@campfire-interactive/ui 0.9.2 → 0.10.0

package/dist/index.d.ts

@@ -363,7 +363,11 @@ declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.Re
 interface SwitchProps extends React.ComponentPropsWithoutRef<typeof RadixSwitch.Root> {
     label?: React.ReactNode;
     description?: React.ReactNode;
-    /** Puts the label before the control — the shape a settings row uses. */
+    /**
+     * Where the CONTROL sits beside its label. `end` (the default) puts the
+     * label first and the switch after it — the shape a settings row uses.
+     * `start` puts the switch first.
+     */
     labelPosition?: 'start' | 'end';
 }
 /**
@@ -372,6 +376,12 @@ interface SwitchProps extends React.ComponentPropsWithoutRef<typeof RadixSwitch.
  * A switch takes effect immediately; a checkbox is a value you then save. That
  * distinction is the whole reason both exist, and mixing them is why some
  * settings screens in the fleet appear to save on toggle and others don't.
+ *
+ * NAMED WITHOUT AN `id`. The label is tied to the control by `htmlFor`, and
+ * that used to need the caller's `id` — without one, a screen reader announced
+ * an unnamed switch (found in pm's Settings → Gates, 2026-10-01). It now makes
+ * its own when none is passed, and the description is wired as the control's
+ * description the same way.
  */
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -423,7 +433,9 @@ declare function DialogBody({ className, ...rest }: React.HTMLAttributes<HTMLDiv
 declare function DialogFooter({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
 interface ModalProps {
     open: boolean;
-    onOpenChange: (open: boolean) => void;
+    onOpenChange?: (open: boolean) => void;
+    /** Called when the dialog asks to close (Esc, ×, outside click). */
+    onClose?: () => void;
     title: React.ReactNode;
     /** Sub-heading under the title. Also becomes the dialog's accessible description. */
     description?: React.ReactNode;
@@ -453,7 +465,7 @@ interface ModalProps {
  * its Save button on screen. That single detail is missing from most of the
  * hand-built copies.
  */
-declare function Modal({ open, onOpenChange, title, description, size, side, footer, hideClose, dismissible, className, children, }: ModalProps): react.JSX.Element;
+declare function Modal({ open, onOpenChange, onClose, title, description, size, side, footer, hideClose, dismissible, className, children, }: ModalProps): react.JSX.Element;
 /**
  * A `Modal` that slides in from the side.
  *
@@ -479,7 +491,9 @@ declare const SheetBody: typeof DialogBody;
 declare const SheetFooter: typeof DialogFooter;
 interface ConfirmDialogProps {
     open: boolean;
-    onOpenChange: (open: boolean) => void;
+    onOpenChange?: (open: boolean) => void;
+    /** Called on Cancel, Esc, or any other request to close. */
+    onClose?: () => void;
     title: React.ReactNode;
     /** What is about to happen, and what cannot be undone. */
     description?: React.ReactNode;
@@ -504,7 +518,7 @@ interface ConfirmDialogProps {
  * confirm should not count as an answer either way. Esc still cancels, and
  * focus starts on Cancel, so a held Enter key cannot confirm a deletion.
  */
-declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, loading, onConfirm, children, }: ConfirmDialogProps): react.JSX.Element;
+declare function ConfirmDialog({ open, onOpenChange, onClose, title, description, confirmLabel, cancelLabel, destructive, loading, onConfirm, children, }: ConfirmDialogProps): react.JSX.Element;
 
 declare const PopoverRoot: react.FC<RadixPopover.PopoverProps>;
 declare const PopoverTrigger: react.ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
@@ -1345,28 +1359,40 @@ interface ToggleOption<T extends string = string> {
     /** Accessible name for an icon-only option. Required when there is no label. */
     ariaLabel?: string;
 }
-interface ToggleGroupProps<T extends string = string> {
+interface ToggleGroupBaseProps<T extends string> {
     options: ToggleOption<T>[];
+    size?: 'sm' | 'md';
+    className?: string;
+    'aria-label': string;
+}
+interface ToggleGroupSingleProps<T extends string> extends ToggleGroupBaseProps<T> {
+    type?: 'single';
     value?: T;
     onValueChange?: (value: T) => void;
-    size?: 'sm' | 'md';
     /**
      * Allows deselecting the active option, leaving nothing selected. Off by
      * default — a view switcher with no view selected shows nothing.
      */
     allowEmpty?: boolean;
-    className?: string;
-    'aria-label': string;
 }
+interface ToggleGroupMultipleProps<T extends string> extends ToggleGroupBaseProps<T> {
+    /** Any number of options on at once, including none — a set of filters. */
+    type: 'multiple';
+    value?: T[];
+    onValueChange?: (value: T[]) => void;
+}
+type ToggleGroupProps<T extends string = string> = ToggleGroupSingleProps<T> | ToggleGroupMultipleProps<T>;
 /**
- * A segmented single-choice control — a view switcher, a unit toggle, a
- * density picker.
- *
- * Clicking the active option does nothing unless `allowEmpty` is set. Radix
- * clears the value by default, which is how a chart switcher ends up rendering
- * an empty panel.
+ * A segmented control — a view switcher, a unit toggle, a density picker
+ * (`type="single"`, the default), or a set of on/off filters drawn the same
+ * way (`type="multiple"`).
+ *
+ * Single: clicking the active option does nothing unless `allowEmpty` is set.
+ * Radix clears the value by default, which is how a chart switcher ends up
+ * rendering an empty panel. Multiple: every click toggles, and an empty
+ * selection is a normal state, so there is no `allowEmpty`.
  */
-declare function ToggleGroup<T extends string = string>({ options, value, onValueChange, size, allowEmpty, className, ...aria }: ToggleGroupProps<T>): react.JSX.Element;
+declare function ToggleGroup<T extends string = string>(props: ToggleGroupProps<T>): react.JSX.Element;
 
 /**
  * The states every data-backed screen has to render.
@@ -1442,6 +1468,124 @@ interface ComingSoonProps {
  * invented figures is worse than an honest gap.
  */
 declare function ComingSoon({ title, detail, className }: ComingSoonProps): react.JSX.Element;
+interface BootScreenProps {
+    /** `loading` while the app fetches its config; `error` when that failed. */
+    state: 'loading' | 'error';
+    error?: unknown;
+    /** Defaults to "Loading…". */
+    label?: string;
+    /** Defaults to "Could not start the app". */
+    title?: string;
+    /** Defaults to reloading the page, which is the only retry a boot has. */
+    onRetry?: () => void;
+    retryLabel?: string;
+}
+/**
+ * The whole viewport before the app exists: config loading, or config failed.
+ *
+ * Every adopted app's `main.tsx` hand-wrote both, with a raw `#dc2626` and an
+ * unstyled `<button>`, because the page states above assume a layout to sit
+ * in. This is them, centered on the screen. It renders before any provider,
+ * so it takes no context and no translations.
+ */
+declare function BootScreen({ state, error, label, title, onRetry, retryLabel, }: BootScreenProps): react.JSX.Element;
+
+type StatTone = 'neutral' | 'success' | 'warning' | 'error';
+interface StatTileProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'onClick'> {
+    label: ReactNode;
+    /** Already formatted: `$1.3M`, `12/18`, `—`. A number is thousands-separated. */
+    value: ReactNode;
+    /** One muted line under the value: a breakdown, a date, a unit. Truncates. */
+    hint?: ReactNode;
+    /** Colors the value. `neutral` (default) leaves it at body color. */
+    tone?: StatTone;
+    /**
+     * Dims the value when it is a zero, a dash, or otherwise "nothing to see".
+     * A zero is a real answer worth showing, but at full weight a row of zeros
+     * carries the same claim as the numbers that moved and the eye goes nowhere.
+     */
+    quiet?: boolean;
+    /** Top-right corner: a confidence ring, an info button, a sparkline. */
+    aside?: ReactNode;
+    /** Under the hint: a trend delta, a volatility meter. */
+    footer?: ReactNode;
+    /** Makes the whole tile a button — a drill-down. */
+    onClick?: () => void;
+}
+/**
+ * A KPI: a label, one big number, and at most a line of context.
+ *
+ * Six copies existed across the three adopted apps (four in pm alone) and
+ * agreed on everything that matters — muted label, tabular figure, optional
+ * sub-line, a tone for the bad news — while disagreeing on type size,
+ * padding and which of three palettes "amber" meant. Tabular figures are the
+ * one non-negotiable: tiles sit in a row and their digits should line up.
+ */
+declare function StatTile({ label, value, hint, tone, quiet, aside, footer, onClick, className, ...rest }: StatTileProps): react.JSX.Element;
+interface StatGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Narrowest a tile gets before the row wraps. Default `11rem`. */
+    minTileWidth?: string;
+}
+/** A row of `StatTile`s that wraps by width, not by breakpoint. */
+declare function StatGrid({ minTileWidth, className, style, ...rest }: StatGridProps): react.JSX.Element;
+
+interface ExternalLinkProps {
+    /**
+     * Null when the id behind the label is missing. Renders the children and
+     * nothing else: the honest rendering of "we have the number but not the
+     * link" is the number, not underlined text that does nothing.
+     */
+    href: string | null | undefined;
+    /** What the reader is about to open: "Open quote Q-2026-164 in Opportunity Management". */
+    title?: string;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A link to a record in ANOTHER app, drawn the same way every time.
+ *
+ * pm and analytics each had one, and master-data built its URLs a third way.
+ * A cross-app link says three things an in-app link does not: that it leaves
+ * the app (the arrow), where it goes (the title), and when the id is missing,
+ * that it is not a link at all (null `href`).
+ *
+ * New tab, deliberately: the reader is mid-task and the other app is a
+ * reference. Build the href with shell-header's `getAppUrl`, never from an
+ * env var, so it follows the environment the reader is in.
+ */
+declare function ExternalLink({ href, title, className, children }: ExternalLinkProps): react.JSX.Element;
+interface FileButtonProps extends Omit<ButtonProps, 'onClick' | 'asChild'> {
+    /** The input's `accept`: `.csv,.xlsx`, `image/*`. */
+    accept?: string;
+    /** Called with the chosen file. The input is reset after, so choosing the same file again fires again. */
+    onFile: (file: File) => void;
+}
+/**
+ * A button that opens the file picker.
+ *
+ * Five copies across pm and master-data, each a hidden `<input type="file">`
+ * plus a ref plus a button that clicks it, and most forgot to reset the
+ * input — so re-uploading the same file after a failed import did nothing.
+ */
+declare function FileButton({ accept, onFile, children, ...button }: FileButtonProps): react.JSX.Element;
+
+/**
+ * `value`, once it has stopped changing for `delayMs`.
+ *
+ * For a value that drives a request (a search string into a query key).
+ * Do not wrap a `SearchInput`'s value in this: `SearchInput` already
+ * debounces its `onChange`, and master-data's seven list hooks waited twice.
+ */
+declare function useDebouncedValue<T>(value: T, delayMs?: number): T;
+/**
+ * `useState` that survives a reload, per viewer and per browser.
+ *
+ * For conveniences only — a collapsed panel, a chosen tab, column widths.
+ * Storage can be absent or throw (a private window, blocked site data), so
+ * every read and write is guarded and the state still works in memory; and a
+ * stored value that no longer parses falls back to `initial`.
+ */
+declare function usePersistentState<T>(key: string, initial: T): [T, (next: T | ((prev: T) => T)) => void];
 
 interface SortState<K extends string> {
     key: K;
@@ -1775,6 +1919,13 @@ declare function usePagedRows<T>(all: readonly T[], initialPageSize?: number): P
  * one that matches a browser setting.
  */
 declare function formatDate(value: Date | string | number | null | undefined): string;
+/**
+ * A calendar date — an SOP, a due date, a birthday — that the API sends as a
+ * UTC-midnight timestamp (`2028-01-01T00:00:00.000Z`, which is how a Prisma
+ * `@db.Date` serializes). Reads the UTC day, so it is the same day in Detroit
+ * and in Silao. Use `formatDate` for an instant (created, updated).
+ */
+declare function formatCalendarDate(value: Date | string | number | null | undefined): string;
 /** `2026-09-11 14:30`. Same reasoning as `formatDate`, plus a 24-hour clock. */
 declare function formatDateTime(value: Date | string | number | null | undefined): string;
 interface MoneyOptions {
@@ -1788,8 +1939,14 @@ interface MoneyOptions {
     decimals?: number;
     /** Set for a per-piece figure to get 4 decimals without naming the number. */
     perUnit?: boolean;
+    /**
+     * Scale to the magnitude for a tile or an axis: `$1.3M`, `$52.0K`, `$640`.
+     * `decimals` (default 1) applies to the scaled figure; under 1,000 rounds
+     * to whole units. Never for a per-unit price, which needs its 4 places.
+     */
+    compact?: boolean;
 }
-declare function formatMoney(value: number | null | undefined, { currency, decimals, perUnit }?: MoneyOptions): string;
+declare function formatMoney(value: number | null | undefined, { currency, decimals, perUnit, compact }?: MoneyOptions): string;
 /** Thousands-separated, no currency. `null` renders as an em dash, not `0`. */
 declare function formatNumber(value: number | null | undefined, decimals?: number): string;
 /**
@@ -1799,4 +1956,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, 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, Field, type FieldProps, Fieldset, type FieldsetProps, 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, 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, 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, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, useFieldControl, usePagedRows, 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, 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, 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 };

package/dist/index.js

@@ -124,7 +124,7 @@ import * as RadixMenu from "@radix-ui/react-dropdown-menu";
 import { Check } from "lucide-react";
 
 // src/Floating.css
-styleInject("@layer components {\n  .cfi-ui-floating {\n    z-index: var(--cfi-ui-z-popover);\n    background: var(--cfi-ui-surface-raised);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-md);\n    box-shadow: var(--cfi-ui-shadow-lg);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n    max-height: var(--radix-popper-available-height, none);\n    overflow: hidden auto;\n  }\n  .cfi-ui-floating__arrow {\n    fill: var(--cfi-ui-surface-raised);\n    filter: drop-shadow(0 -1px 0 var(--cfi-ui-border));\n  }\n  .cfi-ui-popover {\n    padding: var(--cfi-ui-space-md);\n    min-width: 12rem;\n  }\n  .cfi-ui-popover[data-flush] {\n    padding: 0;\n  }\n  .cfi-ui-menu {\n    z-index: var(--cfi-ui-z-dropdown);\n    min-width: 11rem;\n    padding: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-menu__item {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: 0.375rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    font-size: var(--cfi-ui-text-sm);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n  .cfi-ui-menu__item[data-highlighted] {\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-menu__item[data-disabled] {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-menu__item[data-variant=danger] {\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-menu__item[data-variant=danger][data-highlighted] {\n    background: var(--cfi-ui-error-soft);\n  }\n  .cfi-ui-menu__item > svg,\n  .cfi-ui-menu__item .cfi-ui-menu__icon > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    flex: none;\n  }\n  .cfi-ui-menu__icon {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-menu__item[data-variant=danger] .cfi-ui-menu__icon {\n    color: inherit;\n  }\n  .cfi-ui-menu__shortcut {\n    margin-left: auto;\n    padding-left: var(--cfi-ui-space-md);\n    font-family: var(--cfi-ui-font-mono);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-menu__label {\n    padding: 0.375rem 0.5rem 0.25rem;\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-menu__separator {\n    height: 1px;\n    margin: var(--cfi-ui-space-xs) calc(-1 * var(--cfi-ui-space-xs));\n    background: var(--cfi-ui-border);\n  }\n  .cfi-ui-select-content {\n    z-index: var(--cfi-ui-z-dropdown);\n    padding: var(--cfi-ui-space-xs);\n    min-width: var(--radix-select-trigger-width, 11rem);\n  }\n  .cfi-ui-select-viewport {\n    max-height: min(18rem, var(--radix-select-content-available-height, 18rem));\n  }\n  .cfi-ui-select-item {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: 0.375rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n  .cfi-ui-select-item[data-highlighted] {\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-select-item[data-state=checked] {\n    font-weight: var(--cfi-ui-weight-medium);\n  }\n  .cfi-ui-select-item[data-disabled] {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-select-item__indicator {\n    display: inline-flex;\n    flex: none;\n    width: 0.875rem;\n    color: var(--cfi-ui-accent);\n  }\n  .cfi-ui-select-item__indicator > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n  .cfi-ui-select-empty {\n    padding: var(--cfi-ui-space-sm);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n    text-align: center;\n  }\n  .cfi-ui-tooltip {\n    z-index: var(--cfi-ui-z-tooltip);\n    max-width: 20rem;\n    padding: 0.3125rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: var(--cfi-ui-content);\n    color: var(--cfi-ui-surface);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    box-shadow: var(--cfi-ui-shadow-md);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-tooltip__arrow {\n    fill: var(--cfi-ui-content);\n  }\n}\n");
+styleInject("@layer components {\n  .cfi-ui-floating {\n    z-index: var(--cfi-ui-z-popover);\n    background: var(--cfi-ui-surface-raised);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-md);\n    box-shadow: var(--cfi-ui-shadow-lg);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n    max-height: var(--radix-popper-available-height, none);\n    overflow: hidden auto;\n  }\n  .cfi-ui-floating__arrow {\n    fill: var(--cfi-ui-surface-raised);\n    filter: drop-shadow(0 -1px 0 var(--cfi-ui-border));\n  }\n  .cfi-ui-popover {\n    padding: var(--cfi-ui-space-md);\n    min-width: 12rem;\n  }\n  .cfi-ui-popover[data-flush] {\n    padding: 0;\n  }\n  .cfi-ui-menu {\n    min-width: 11rem;\n    padding: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-menu__item {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: 0.375rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    font-size: var(--cfi-ui-text-sm);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n  .cfi-ui-menu__item[data-highlighted] {\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-menu__item[data-disabled] {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-menu__item[data-variant=danger] {\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-menu__item[data-variant=danger][data-highlighted] {\n    background: var(--cfi-ui-error-soft);\n  }\n  .cfi-ui-menu__item > svg,\n  .cfi-ui-menu__item .cfi-ui-menu__icon > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    flex: none;\n  }\n  .cfi-ui-menu__icon {\n    display: inline-flex;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-menu__item[data-variant=danger] .cfi-ui-menu__icon {\n    color: inherit;\n  }\n  .cfi-ui-menu__shortcut {\n    margin-left: auto;\n    padding-left: var(--cfi-ui-space-md);\n    font-family: var(--cfi-ui-font-mono);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-menu__label {\n    padding: 0.375rem 0.5rem 0.25rem;\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-menu__separator {\n    height: 1px;\n    margin: var(--cfi-ui-space-xs) calc(-1 * var(--cfi-ui-space-xs));\n    background: var(--cfi-ui-border);\n  }\n  .cfi-ui-select-content {\n    padding: var(--cfi-ui-space-xs);\n    min-width: var(--radix-select-trigger-width, 11rem);\n  }\n  .cfi-ui-select-viewport {\n    max-height: min(18rem, var(--radix-select-content-available-height, 18rem));\n  }\n  .cfi-ui-select-item {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: 0.375rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n  .cfi-ui-select-item[data-highlighted] {\n    background: var(--cfi-ui-surface-active);\n  }\n  .cfi-ui-select-item[data-state=checked] {\n    font-weight: var(--cfi-ui-weight-medium);\n  }\n  .cfi-ui-select-item[data-disabled] {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-select-item__indicator {\n    display: inline-flex;\n    flex: none;\n    width: 0.875rem;\n    color: var(--cfi-ui-accent);\n  }\n  .cfi-ui-select-item__indicator > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n  .cfi-ui-select-empty {\n    padding: var(--cfi-ui-space-sm);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n    text-align: center;\n  }\n  .cfi-ui-tooltip {\n    z-index: var(--cfi-ui-z-tooltip);\n    max-width: 20rem;\n    padding: 0.3125rem 0.5rem;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: var(--cfi-ui-content);\n    color: var(--cfi-ui-surface);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n    box-shadow: var(--cfi-ui-shadow-md);\n    animation: cfi-ui-zoom-in var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-tooltip__arrow {\n    fill: var(--cfi-ui-content);\n  }\n}\n");
 
 // src/Menu.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -481,7 +481,7 @@ function Select({
 }
 
 // src/Switch.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef7, useId } from "react";
 import * as RadixSwitch from "@radix-ui/react-switch";
 
 // src/Switch.css
@@ -491,11 +491,15 @@ styleInject("@layer components {\n  .cfi-ui-switch {\n    flex: none;\n    posit
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var Switch = forwardRef7(
   function Switch2({ label, description, labelPosition = "end", className, id, ...rest }, ref) {
+    const generated = useId();
+    const controlId = id ?? generated;
+    const descriptionId = description ? `${controlId}-description` : void 0;
     const control = /* @__PURE__ */ jsx7(
       RadixSwitch.Root,
       {
         ref,
-        id,
+        id: controlId,
+        "aria-describedby": descriptionId,
         className: cn("cfi-ui", "cfi-ui-switch", !label && className),
         ...rest,
         children: /* @__PURE__ */ jsx7(RadixSwitch.Thumb, { className: "cfi-ui-switch__thumb" })
@@ -505,8 +509,8 @@ var Switch = forwardRef7(
     return /* @__PURE__ */ jsxs7("div", { "data-label-position": labelPosition, className: cn("cfi-ui", "cfi-ui-switch-row", className), children: [
       labelPosition === "start" && control,
       /* @__PURE__ */ jsxs7("div", { className: "cfi-ui-switch-row__text", children: [
-        /* @__PURE__ */ jsx7("label", { htmlFor: id, className: "cfi-ui-switch-row__label", children: label }),
-        description && /* @__PURE__ */ jsx7("span", { className: "cfi-ui-switch-row__description", children: description })
+        /* @__PURE__ */ jsx7("label", { htmlFor: controlId, className: "cfi-ui-switch-row__label", children: label }),
+        description && /* @__PURE__ */ jsx7("span", { id: descriptionId, className: "cfi-ui-switch-row__description", children: description })
       ] }),
       labelPosition === "end" && control
     ] });
@@ -659,7 +663,7 @@ var Textarea = forwardRef8(function Textarea2({ invalid, className, rows = 3, ..
 });
 
 // src/Field.tsx
-import { Children, cloneElement as cloneElement2, createContext, isValidElement as isValidElement2, useContext, useId } from "react";
+import { Children, cloneElement as cloneElement2, createContext, isValidElement as isValidElement2, useContext, useId as useId2 } from "react";
 
 // src/Field.css
 styleInject('@layer components {\n  .cfi-ui-label {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-3xs);\n    font-size: var(--cfi-ui-text-sm);\n    font-weight: var(--cfi-ui-weight-medium);\n    color: var(--cfi-ui-content);\n    line-height: var(--cfi-ui-leading-normal);\n  }\n  .cfi-ui-label__required {\n    color: var(--cfi-ui-error);\n    font-weight: var(--cfi-ui-weight-semibold);\n  }\n  .cfi-ui-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-field__label {\n    justify-self: start;\n  }\n  .cfi-ui-field__body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-xs);\n    min-width: 0;\n  }\n  .cfi-ui-field__hint,\n  .cfi-ui-field__error {\n    margin: 0;\n    font-size: var(--cfi-ui-text-xs);\n    line-height: var(--cfi-ui-leading-normal);\n  }\n  .cfi-ui-field__hint {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-field__error {\n    color: var(--cfi-ui-error-text);\n    font-weight: var(--cfi-ui-weight-medium);\n  }\n  .cfi-ui-field[data-orientation=horizontal] {\n    grid-template-columns: minmax(8rem, 12rem) 1fr;\n    align-items: start;\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-field[data-orientation=horizontal] .cfi-ui-field__label {\n    padding-top: 0.4375rem;\n  }\n  @media (max-width: 640px) {\n    .cfi-ui-field[data-orientation=horizontal] {\n      grid-template-columns: 1fr;\n      gap: var(--cfi-ui-space-xs);\n    }\n    .cfi-ui-field[data-orientation=horizontal] .cfi-ui-field__label {\n      padding-top: 0;\n    }\n  }\n  .cfi-ui-fieldset {\n    min-width: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .cfi-ui-fieldset__legend {\n    padding: 0 0 var(--cfi-ui-space-sm);\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-fieldset__body {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-fieldset[data-columns="2"] .cfi-ui-fieldset__body {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .cfi-ui-fieldset[data-columns="3"] .cfi-ui-fieldset__body {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  @media (max-width: 720px) {\n    .cfi-ui-fieldset[data-columns="2"] .cfi-ui-fieldset__body,\n    .cfi-ui-fieldset[data-columns="3"] .cfi-ui-fieldset__body {\n      grid-template-columns: 1fr;\n    }\n  }\n}\n');
@@ -686,7 +690,7 @@ function Field({
   children,
   id
 }) {
-  const generatedId = useId();
+  const generatedId = useId2();
   const controlId = id ?? `cfi-field-${generatedId}`;
   const hintId = `${controlId}-hint`;
   const errorId = `${controlId}-error`;
@@ -842,9 +846,16 @@ function DialogBody({ className, ...rest }) {
 function DialogFooter({ className, ...rest }) {
   return /* @__PURE__ */ jsx13("div", { className: cn("cfi-ui-dialog__footer", className), ...rest });
 }
+function closeHandler(onOpenChange, onClose) {
+  return (open) => {
+    onOpenChange?.(open);
+    if (!open) onClose?.();
+  };
+}
 function Modal({
   open,
   onOpenChange,
+  onClose,
   title,
   description,
   size = "md",
@@ -856,7 +867,7 @@ function Modal({
   children
 }) {
   const block = dismissible ? void 0 : (e) => e.preventDefault();
-  return /* @__PURE__ */ jsx13(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx13(Dialog, { open, onOpenChange: closeHandler(onOpenChange, onClose), children: /* @__PURE__ */ jsxs13(
     DialogContent,
     {
       size,
@@ -899,6 +910,7 @@ var SheetFooter = DialogFooter;
 function ConfirmDialog({
   open,
   onOpenChange,
+  onClose,
   title,
   description,
   confirmLabel = "Confirm",
@@ -908,7 +920,7 @@ function ConfirmDialog({
   onConfirm,
   children
 }) {
-  return /* @__PURE__ */ jsx13(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx13(Dialog, { open, onOpenChange: closeHandler(onOpenChange, onClose), children: /* @__PURE__ */ jsxs13(
     DialogContent,
     {
       size: "sm",
@@ -1087,7 +1099,7 @@ function CreatableSelect({
 }
 
 // src/Combobox.tsx
-import { Fragment as Fragment4, useEffect, useId as useId2, useMemo as useMemo3, useRef, useState as useState3 } from "react";
+import { Fragment as Fragment4, useEffect, useId as useId3, useMemo as useMemo3, useRef, useState as useState3 } from "react";
 import { Check as Check4, ChevronDown as ChevronDown3, Search, X as X3 } from "lucide-react";
 
 // src/Combobox.css
@@ -1123,7 +1135,7 @@ function Combobox({
   const [open, setOpen] = useState3(false);
   const [search, setSearch] = useState3("");
   const [highlighted, setHighlighted] = useState3(0);
-  const listId = useId2();
+  const listId = useId3();
   const searchRef = useRef(null);
   const listRef = useRef(null);
   const filtered = useMemo3(() => {
@@ -1962,15 +1974,42 @@ function Accordion({
     /* @__PURE__ */ jsx24(AccordionContent, { children: section.content })
   ] }, section.value)) });
 }
-function ToggleGroup({
-  options,
-  value,
-  onValueChange,
-  size = "md",
-  allowEmpty = false,
-  className,
-  ...aria
-}) {
+function ToggleGroup(props) {
+  const { options, size = "md", className, "aria-label": ariaLabel } = props;
+  const shared = {
+    "data-size": size,
+    className: cn("cfi-ui", "cfi-ui-toggle-group", className),
+    "aria-label": ariaLabel
+  };
+  const items = options.map((option) => /* @__PURE__ */ jsxs24(
+    RadixToggleGroup.Item,
+    {
+      value: option.value,
+      disabled: option.disabled,
+      "aria-label": option.ariaLabel,
+      title: option.ariaLabel,
+      className: "cfi-ui-toggle-group__item",
+      children: [
+        option.icon && /* @__PURE__ */ jsx24("span", { className: "cfi-ui-toggle-group__icon", children: option.icon }),
+        option.label
+      ]
+    },
+    option.value
+  ));
+  if (props.type === "multiple") {
+    const { value: value2, onValueChange: onValueChange2 } = props;
+    return /* @__PURE__ */ jsx24(
+      RadixToggleGroup.Root,
+      {
+        type: "multiple",
+        value: value2,
+        onValueChange: (next) => onValueChange2?.(next),
+        ...shared,
+        children: items
+      }
+    );
+  }
+  const { value, onValueChange, allowEmpty = false } = props;
   return /* @__PURE__ */ jsx24(
     RadixToggleGroup.Root,
     {
@@ -1980,24 +2019,8 @@ function ToggleGroup({
         if (!next && !allowEmpty) return;
         onValueChange?.(next);
       },
-      "data-size": size,
-      className: cn("cfi-ui", "cfi-ui-toggle-group", className),
-      ...aria,
-      children: options.map((option) => /* @__PURE__ */ jsxs24(
-        RadixToggleGroup.Item,
-        {
-          value: option.value,
-          disabled: option.disabled,
-          "aria-label": option.ariaLabel,
-          title: option.ariaLabel,
-          className: "cfi-ui-toggle-group__item",
-          children: [
-            option.icon && /* @__PURE__ */ jsx24("span", { className: "cfi-ui-toggle-group__icon", children: option.icon }),
-            option.label
-          ]
-        },
-        option.value
-      ))
+      ...shared,
+      children: items
     }
   );
 }
@@ -2006,7 +2029,7 @@ function ToggleGroup({
 import { AlertCircle as AlertCircle2, Loader2 } from "lucide-react";
 
 // src/PageState.css
-styleInject("@layer components {\n  :where(.cfi-ui-pagestate) {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--cfi-ui-space-sm);\n    padding-block: var(--cfi-ui-space-2xl, 4rem);\n    text-align: center;\n    color: var(--cfi-ui-content);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n  }\n  .cfi-ui-pagestate[data-size=inline] {\n    padding-block: var(--cfi-ui-space-md);\n    gap: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-pagestate:has(> .cfi-ui-pagestate__spinner) {\n    flex-direction: row;\n  }\n  .cfi-ui-pagestate__spinner {\n    width: 1rem;\n    height: 1rem;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n    animation: cfi-ui-pagestate-spin 1s linear infinite;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .cfi-ui-pagestate__spinner {\n      animation-duration: 2.4s;\n    }\n  }\n  .cfi-ui-pagestate__icon {\n    display: inline-flex;\n    color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-pagestate__icon > svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n  .cfi-ui-pagestate__icon[data-tone=error] {\n    width: 1.5rem;\n    height: 1.5rem;\n    color: var(--cfi-ui-error-strong);\n  }\n  .cfi-ui-pagestate__title {\n    margin: 0;\n    font-weight: var(--cfi-ui-weight-medium);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-pagestate__muted {\n    margin: 0;\n    max-width: 34rem;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-pagestate__title + .cfi-ui-pagestate__muted {\n    margin-top: var(--cfi-ui-space-3xs);\n  }\n  .cfi-ui-pagestate__action {\n    margin-top: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-pagestate__retry {\n    height: var(--cfi-ui-control-height-sm);\n    padding-inline: var(--cfi-ui-space-sm);\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    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    line-height: normal;\n    cursor: pointer;\n  }\n  .cfi-ui-pagestate__retry:hover {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-pagestate__retry: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@keyframes cfi-ui-pagestate-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
+styleInject("@layer components {\n  :where(.cfi-ui-pagestate) {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--cfi-ui-space-sm);\n    padding-block: var(--cfi-ui-space-2xl, 4rem);\n    text-align: center;\n    color: var(--cfi-ui-content);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n  }\n  .cfi-ui-pagestate[data-size=inline] {\n    padding-block: var(--cfi-ui-space-md);\n    gap: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-pagestate:has(> .cfi-ui-pagestate__spinner) {\n    flex-direction: row;\n  }\n  .cfi-ui-pagestate__spinner {\n    width: 1rem;\n    height: 1rem;\n    flex: none;\n    color: var(--cfi-ui-content-muted);\n    animation: cfi-ui-pagestate-spin 1s linear infinite;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .cfi-ui-pagestate__spinner {\n      animation-duration: 2.4s;\n    }\n  }\n  .cfi-ui-pagestate__icon {\n    display: inline-flex;\n    color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-pagestate__icon > svg {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n  .cfi-ui-pagestate__icon[data-tone=error] {\n    width: 1.5rem;\n    height: 1.5rem;\n    color: var(--cfi-ui-error-strong);\n  }\n  .cfi-ui-pagestate__title {\n    margin: 0;\n    font-weight: var(--cfi-ui-weight-medium);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-pagestate__muted {\n    margin: 0;\n    max-width: 34rem;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-pagestate__title + .cfi-ui-pagestate__muted {\n    margin-top: var(--cfi-ui-space-3xs);\n  }\n  .cfi-ui-pagestate__action {\n    margin-top: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-pagestate__retry {\n    height: var(--cfi-ui-control-height-sm);\n    padding-inline: var(--cfi-ui-space-sm);\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    font-family: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    line-height: normal;\n    cursor: pointer;\n  }\n  .cfi-ui-pagestate__retry:hover {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-pagestate__retry: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  :where(.cfi-ui-boot) {\n    display: grid;\n    place-items: center;\n    min-height: 100dvh;\n    background: var(--cfi-ui-surface);\n  }\n}\n@keyframes cfi-ui-pagestate-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n");
 
 // src/PageState.tsx
 import { jsx as jsx25, jsxs as jsxs25 } from "react/jsx-runtime";
@@ -2070,17 +2093,160 @@ function ComingSoon({ title, detail, className }) {
     }
   );
 }
+function BootScreen({
+  state,
+  error,
+  label,
+  title = "Could not start the app",
+  onRetry = () => window.location.reload(),
+  retryLabel
+}) {
+  return /* @__PURE__ */ jsx25("div", { className: "cfi-ui cfi-ui-boot", children: state === "loading" ? /* @__PURE__ */ jsx25(LoadingState, { label }) : /* @__PURE__ */ jsx25(ErrorState, { error, title, onRetry, retryLabel }) });
+}
+
+// src/StatTile.css
+styleInject("@layer components {\n  :where(.cfi-ui-stat) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-ui-space-3xs);\n    min-width: 0;\n    padding: 0.75rem var(--cfi-ui-space-md);\n    background: var(--cfi-ui-surface);\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-lg);\n    font-family: var(--cfi-ui-font);\n    color: var(--cfi-ui-content);\n    text-align: start;\n  }\n  .cfi-ui-stat--action {\n    cursor: pointer;\n    font: inherit;\n    transition: background-color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-stat--action:hover {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-stat--action: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-stat__top {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-stat__label {\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-stat__aside {\n    flex: none;\n  }\n  .cfi-ui-stat__value {\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    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-stat__value[data-tone=success] {\n    color: var(--cfi-ui-success-text);\n  }\n  .cfi-ui-stat__value[data-tone=warning] {\n    color: var(--cfi-ui-warning-text);\n  }\n  .cfi-ui-stat__value[data-tone=error] {\n    color: var(--cfi-ui-error-text);\n  }\n  .cfi-ui-stat__value[data-quiet] {\n    font-weight: var(--cfi-ui-weight-normal);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-stat__hint {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-stat__footer {\n    margin-top: var(--cfi-ui-space-3xs);\n    font-size: var(--cfi-ui-text-sm);\n  }\n  :where(.cfi-ui-stat-grid) {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(var(--cfi-ui-stat-min, 11rem), 1fr));\n    gap: var(--cfi-ui-space-sm);\n  }\n}\n");
+
+// src/StatTile.tsx
+import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs26 } from "react/jsx-runtime";
+function StatTile({
+  label,
+  value,
+  hint,
+  tone = "neutral",
+  quiet = false,
+  aside,
+  footer,
+  onClick,
+  className,
+  ...rest
+}) {
+  const body = /* @__PURE__ */ jsxs26(Fragment6, { children: [
+    /* @__PURE__ */ jsxs26("div", { className: "cfi-ui-stat__top", children: [
+      /* @__PURE__ */ jsx26("span", { className: "cfi-ui-stat__label", children: label }),
+      aside && /* @__PURE__ */ jsx26("span", { className: "cfi-ui-stat__aside", children: aside })
+    ] }),
+    /* @__PURE__ */ jsx26("span", { className: "cfi-ui-stat__value", "data-tone": tone, "data-quiet": quiet || void 0, children: typeof value === "number" ? value.toLocaleString("en-US") : value }),
+    hint && /* @__PURE__ */ jsx26("span", { className: "cfi-ui-stat__hint", children: hint }),
+    footer && /* @__PURE__ */ jsx26("div", { className: "cfi-ui-stat__footer", children: footer })
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx26(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: cn("cfi-ui", "cfi-ui-stat", "cfi-ui-stat--action", className),
+        ...rest,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx26("div", { className: cn("cfi-ui", "cfi-ui-stat", className), ...rest, children: body });
+}
+function StatGrid({ minTileWidth = "11rem", className, style, ...rest }) {
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      className: cn("cfi-ui", "cfi-ui-stat-grid", className),
+      style: { ["--cfi-ui-stat-min"]: minTileWidth, ...style },
+      ...rest
+    }
+  );
+}
+
+// src/ExternalLink.tsx
+import { useRef as useRef3 } from "react";
+import { ArrowUpRight } from "lucide-react";
+
+// src/ExternalLink.css
+styleInject("@layer components {\n  :where(.cfi-ui-extlink) {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.125rem;\n    color: var(--cfi-ui-accent);\n    text-decoration: none;\n  }\n  .cfi-ui-extlink:hover {\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n  .cfi-ui-extlink:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n    border-radius: var(--cfi-ui-radius-sm);\n  }\n  .cfi-ui-extlink__icon {\n    flex: none;\n    width: 0.75rem;\n    height: 0.75rem;\n    opacity: 0.7;\n  }\n}\n");
+
+// src/ExternalLink.tsx
+import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs27 } from "react/jsx-runtime";
+function ExternalLink({ href, title, className, children }) {
+  if (!href) return /* @__PURE__ */ jsx27(Fragment7, { children });
+  return /* @__PURE__ */ jsxs27(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title,
+      className: cn("cfi-ui", "cfi-ui-extlink", className),
+      children: [
+        children,
+        /* @__PURE__ */ jsx27(ArrowUpRight, { className: "cfi-ui-extlink__icon", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+function FileButton({ accept, onFile, children, ...button }) {
+  const input = useRef3(null);
+  return /* @__PURE__ */ jsxs27(Fragment7, { children: [
+    /* @__PURE__ */ jsx27(
+      "input",
+      {
+        ref: input,
+        type: "file",
+        accept,
+        hidden: true,
+        onChange: (e) => {
+          const file = e.target.files?.[0];
+          e.target.value = "";
+          if (file) onFile(file);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx27(Button, { ...button, onClick: () => input.current?.click(), children })
+  ] });
+}
+
+// src/hooks.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState5 } from "react";
+function useDebouncedValue(value, delayMs = 300) {
+  const [debounced, setDebounced] = useState5(value);
+  useEffect3(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+  return debounced;
+}
+function usePersistentState(key, initial) {
+  const [value, setValue] = useState5(() => {
+    try {
+      const raw = window.localStorage.getItem(key);
+      return raw === null ? initial : JSON.parse(raw);
+    } catch {
+      return initial;
+    }
+  });
+  const set = useCallback2(
+    (next) => {
+      setValue((prev) => {
+        const resolved = typeof next === "function" ? next(prev) : next;
+        try {
+          window.localStorage.setItem(key, JSON.stringify(resolved));
+        } catch {
+        }
+        return resolved;
+      });
+    },
+    [key]
+  );
+  return [value, set];
+}
 
 // src/useSortState.ts
-import { useCallback as useCallback2, useMemo as useMemo5, useState as useState5 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo5, useState as useState6 } from "react";
 function useSortState(initialKey, initialDirection = "asc") {
-  const [sort, setSort] = useState5({ key: initialKey, direction: initialDirection });
-  const toggle = useCallback2((key) => {
+  const [sort, setSort] = useState6({ key: initialKey, direction: initialDirection });
+  const toggle = useCallback3((key) => {
     setSort(
       (current) => current.key === key ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction: "asc" }
     );
   }, []);
-  const sortProps = useCallback2(
+  const sortProps = useCallback3(
     (key) => ({
       sortable: true,
       sortDirection: sort.key === key ? sort.direction : null,
@@ -2088,7 +2254,7 @@ function useSortState(initialKey, initialDirection = "asc") {
     }),
     [sort, toggle]
   );
-  const sortBy = useCallback2(
+  const sortBy = useCallback3(
     (rows, accessor) => {
       const dir = sort.direction === "asc" ? 1 : -1;
       return [...rows].sort((a, b) => {
@@ -2111,21 +2277,21 @@ function useSortState(initialKey, initialDirection = "asc") {
 }
 
 // src/SearchInput.tsx
-import { forwardRef as forwardRef18, useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
+import { forwardRef as forwardRef18, useEffect as useEffect4, useRef as useRef4, useState as useState7 } 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 jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay = 250, placeholder = "Search\u2026", clearLabel = "Clear search", ...rest }, ref) {
-  const [local, setLocal] = useState6(value);
-  const timer = useRef3(void 0);
-  const latest = useRef3(onChange);
+  const [local, setLocal] = useState7(value);
+  const timer = useRef4(void 0);
+  const latest = useRef4(onChange);
   latest.current = onChange;
-  useEffect3(() => setLocal(value), [value]);
-  useEffect3(() => () => clearTimeout(timer.current), []);
+  useEffect4(() => setLocal(value), [value]);
+  useEffect4(() => () => clearTimeout(timer.current), []);
   const push = (next) => {
     setLocal(next);
     clearTimeout(timer.current);
@@ -2137,7 +2303,7 @@ var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay =
     setLocal("");
     latest.current("");
   };
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28(
     Input,
     {
       ...rest,
@@ -2146,8 +2312,8 @@ var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay =
       value: local,
       placeholder,
       onChange: (e) => push(e.target.value),
-      prefix: /* @__PURE__ */ jsx26(Search2, { "aria-hidden": "true" }),
-      suffix: local ? /* @__PURE__ */ jsx26("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx26(X6, { "aria-hidden": "true" }) }) : void 0
+      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
     }
   );
 });
@@ -2159,7 +2325,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 jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
 function Pagination({
   page,
   pageSize,
@@ -2175,12 +2341,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__ */ jsxs26("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
+  return /* @__PURE__ */ jsxs28("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__ */ jsx27("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
-    /* @__PURE__ */ jsxs26("div", { className: "cfi-ui-pagination__controls", children: [
-      /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx29("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
+    /* @__PURE__ */ jsxs28("div", { className: "cfi-ui-pagination__controls", children: [
+      /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -2188,15 +2354,15 @@ function Pagination({
           onClick: () => onPageChange(current - 1),
           disabled: current <= 1,
           "aria-label": labels?.previous ?? "Previous page",
-          children: /* @__PURE__ */ jsx27(ChevronLeft, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx29(ChevronLeft, { "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsxs26("span", { className: "cfi-ui-pagination__page", children: [
+      /* @__PURE__ */ jsxs28("span", { className: "cfi-ui-pagination__page", children: [
         current,
         " / ",
         pageCount
       ] }),
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -2204,7 +2370,7 @@ function Pagination({
           onClick: () => onPageChange(current + 1),
           disabled: current >= pageCount,
           "aria-label": labels?.next ?? "Next page",
-          children: /* @__PURE__ */ jsx27(ChevronRight, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx29(ChevronRight, { "aria-hidden": "true" })
         }
       )
     ] })
@@ -2215,12 +2381,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 jsx28, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
 function ListToolbar({ search, filters, actions, className }) {
-  return /* @__PURE__ */ jsxs27("div", { className: cn("cfi-ui", "cfi-ui-list-toolbar", className), children: [
-    search && /* @__PURE__ */ jsx28("div", { className: "cfi-ui-list-toolbar__search", children: search }),
-    filters && /* @__PURE__ */ jsx28("div", { className: "cfi-ui-list-toolbar__filters", children: filters }),
-    actions && /* @__PURE__ */ jsx28("div", { className: "cfi-ui-list-toolbar__actions", children: actions })
+  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 })
   ] });
 }
 
@@ -2231,7 +2397,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 jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
 function PageHeader({
   title,
   description,
@@ -2245,32 +2411,32 @@ function PageHeader({
   className
 }) {
   const Heading = `h${level}`;
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cn("cfi-ui", "cfi-ui-page-header", className),
       "data-bordered": bordered ? "" : void 0,
       children: [
-        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx29("nav", { className: "cfi-ui-page-header__crumbs", "aria-label": "Breadcrumb", children: breadcrumbs.map((crumb, i) => {
+        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx31("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__ */ jsx29("a", { href: crumb.href, children: crumb.label }) : crumb.label;
-          return /* @__PURE__ */ jsxs28("span", { className: "cfi-ui-page-header__crumb", "data-current": last ? "" : void 0, children: [
-            i > 0 && /* @__PURE__ */ jsx29(ChevronRight2, { className: "cfi-ui-page-header__crumb-sep", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx29("span", { "aria-current": last ? "page" : void 0, children: label })
+          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 })
           ] }, i);
         }) }),
-        onBack && /* @__PURE__ */ jsxs28("button", { type: "button", className: "cfi-ui-page-header__back", onClick: onBack, children: [
-          /* @__PURE__ */ jsx29(ArrowLeft, { "aria-hidden": "true" }),
+        onBack && /* @__PURE__ */ jsxs30("button", { type: "button", className: "cfi-ui-page-header__back", onClick: onBack, children: [
+          /* @__PURE__ */ jsx31(ArrowLeft, { "aria-hidden": "true" }),
           backLabel
         ] }),
-        /* @__PURE__ */ jsxs28("div", { className: "cfi-ui-page-header__row", children: [
-          /* @__PURE__ */ jsxs28("div", { className: "cfi-ui-page-header__titles", children: [
-            /* @__PURE__ */ jsx29(Heading, { className: "cfi-ui-page-header__title", children: title }),
-            description && /* @__PURE__ */ jsx29("p", { className: "cfi-ui-page-header__description", children: description })
+        /* @__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 })
           ] }),
-          actions && /* @__PURE__ */ jsx29("div", { className: "cfi-ui-page-header__actions", children: actions })
+          actions && /* @__PURE__ */ jsx31("div", { className: "cfi-ui-page-header__actions", children: actions })
         ] }),
-        children && /* @__PURE__ */ jsx29("div", { className: "cfi-ui-page-header__meta", children })
+        children && /* @__PURE__ */ jsx31("div", { className: "cfi-ui-page-header__meta", children })
       ]
     }
   );
@@ -2283,7 +2449,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 jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
 function SelectionBar({
   count,
   children,
@@ -2295,7 +2461,7 @@ function SelectionBar({
   className
 }) {
   if (count === 0) return null;
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       role: "status",
@@ -2304,9 +2470,9 @@ function SelectionBar({
       "data-busy": busy ? "" : void 0,
       className: cn("cfi-ui", "cfi-ui-selection-bar", className),
       children: [
-        /* @__PURE__ */ jsx30("span", { className: "cfi-ui-selection-bar__count", children: label(count) }),
-        children && /* @__PURE__ */ jsx30("div", { className: "cfi-ui-selection-bar__actions", children }),
-        onClear && /* @__PURE__ */ jsxs29(
+        /* @__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(
           "button",
           {
             type: "button",
@@ -2314,7 +2480,7 @@ function SelectionBar({
             onClick: onClear,
             disabled: busy,
             children: [
-              /* @__PURE__ */ jsx30(X7, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx32(X7, { "aria-hidden": "true" }),
               clearLabel
             ]
           }
@@ -2325,14 +2491,14 @@ function SelectionBar({
 }
 
 // src/usePagedRows.ts
-import { useEffect as useEffect4, useMemo as useMemo6, useState as useState7 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo6, useState as useState8 } from "react";
 function usePagedRows(all, initialPageSize = 25) {
-  const [page, setPage] = useState7(1);
-  const [pageSize, setSize] = useState7(initialPageSize);
+  const [page, setPage] = useState8(1);
+  const [pageSize, setSize] = useState8(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);
-  useEffect4(() => {
+  useEffect5(() => {
     if (clamped !== page) setPage(clamped);
   }, [clamped, page]);
   const rows = useMemo6(
@@ -2349,10 +2515,27 @@ function usePagedRows(all, initialPageSize = 25) {
 
 // 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 `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+  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);
@@ -2360,8 +2543,9 @@ function formatDateTime(value) {
   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 } = {}) {
+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",
@@ -2370,6 +2554,19 @@ function formatMoney(value, { currency = "USD", decimals, perUnit = false } = {}
     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", {
@@ -2396,6 +2593,7 @@ export {
   Avatar,
   AvatarGroup,
   Badge,
+  BootScreen,
   Button,
   ButtonGroup,
   Card,
@@ -2425,8 +2623,10 @@ export {
   DialogTrigger,
   EmptyState,
   ErrorState,
+  ExternalLink,
   Field,
   Fieldset,
+  FileButton,
   FilterBar,
   IconButton,
   Input,
@@ -2484,6 +2684,8 @@ export {
   Skeleton,
   Slider,
   SplitButton,
+  StatGrid,
+  StatTile,
   Switch,
   TabSet,
   Table,
@@ -2511,13 +2713,16 @@ export {
   TooltipRoot,
   TooltipTrigger,
   cn,
+  formatCalendarDate,
   formatDate,
   formatDateTime,
   formatMoney,
   formatNumber,
   formatPercent,
+  useDebouncedValue,
   useFieldControl,
   usePagedRows,
+  usePersistentState,
   useSortState,
   useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campfire-interactive/ui",
-  "version": "0.9.2",
+  "version": "0.10.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",