@calliopelabs/ui 0.4.0 → 0.6.0

package/dist/appearance/AppearancePicker.d.ts

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { type Ground } from "../theme/tokens.js";
+import { type CustomAccent } from "./appearance.js";
 /**
  * The person's appearance for the product in context: theme presets, accent
  * (including any colour that stands 3:1 off the ground), ground, density and
@@ -8,3 +10,20 @@ import * as React from "react";
 export declare function AppearancePicker({ className }: {
     className?: string;
 }): React.JSX.Element;
+export interface CustomAccentFieldProps {
+    /** The text field's id; the help text takes `${id}-help`. */
+    id: string;
+    /** The custom accent in use, or null while a named accent is. */
+    value: CustomAccent | null;
+    /** The ground the colour must stand 3:1 off. */
+    ground: Ground;
+    disabled: boolean;
+    /** Called only with a colour that passes the contrast check. */
+    onChange: (accent: CustomAccent) => void;
+}
+/**
+ * Any colour as the accent (Astrolift palette option A). It applies only once
+ * it stands 3:1 off the ground (WCAG 2.2 §1.4.11); until then the draft stays
+ * in the field with the reason.
+ */
+export declare function CustomAccentField({ id, value, ground, disabled, onChange, }: CustomAccentFieldProps): React.JSX.Element;

package/dist/appearance/AppearancePicker.js

@@ -44,17 +44,24 @@ export function AppearancePicker({ className }) {
     const id = React.useId();
     const accents = product.accents;
     const activeTheme = product.themes.find((th) => th.ground === appearance.ground && th.accent === appearance.accent);
-    return (_jsxs("div", { "data-slot": "appearance-picker", className: cn("flex min-w-0 flex-col gap-6", className), children: [locked && (_jsxs("p", { className: "flex items-center gap-2 rounded-lg border border-info-border bg-info-bg px-3 py-2 text-sm text-info-fg", children: [_jsx(LockIcon, { className: "size-4 shrink-0", "aria-hidden": true }), t.locked] })), product.themes.length > 0 && (_jsx(Group, { legend: t.themes, children: _jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-2", children: product.themes.map((theme) => (_jsxs(Choice, { name: `${id}-theme`, checked: activeTheme?.id === theme.id, disabled: locked, onSelect: () => setAppearance({ ground: theme.ground, accent: theme.accent }), className: "flex-col items-stretch gap-2 p-2", children: [_jsx(ThemePreview, { product: product, ground: theme.ground, accent: accents.find((a) => a.key === theme.accent) }), _jsxs("span", { children: [_jsx("span", { className: "block text-sm font-semibold", children: theme.name }), _jsx("span", { className: "block text-xs text-muted-foreground", children: theme.hint })] })] }, theme.id))) }) })), _jsxs(Group, { legend: t.accent, children: [_jsx("div", { className: "flex flex-wrap gap-2", children: accents.map((accent) => (_jsxs(Choice, { name: `${id}-accent`, checked: appearance.accent === accent.key, disabled: locked, onSelect: () => setAppearance({ accent: accent.key }), children: [_jsx("span", { "aria-hidden": true, className: "size-3.5 rounded-full", style: { background: accentOn(accent, appearance.ground) } }), t.accentLabel(accent.key, accent.label)] }, accent.key))) }), _jsx(CustomAccent, { id: `${id}-custom`, value: isCustomAccent(appearance.accent) ? appearance.accent : null, ground: appearance.ground, disabled: locked, onChange: (accent) => setAppearance({ accent }) })] }), _jsx(Group, { legend: t.ground, children: _jsx("div", { className: "flex flex-wrap gap-2", children: product.grounds.map((ground) => (_jsxs(Choice, { name: `${id}-ground`, checked: appearance.ground === ground, disabled: locked, onSelect: () => setAppearance({ ground }), children: [_jsx("span", { "aria-hidden": true, className: "size-3.5 rounded-full border", style: { background: SURFACES[ground].background } }), t.groundLabel(ground, GROUNDS[ground].label), _jsx("span", { className: "text-xs text-muted-foreground", children: t.mode(GROUNDS[ground].mode) })] }, ground))) }) }), _jsx(Group, { legend: t.density, children: _jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: DENSITY_KEYS.map((density) => (_jsxs(Choice, { name: `${id}-density`, checked: appearance.density === density, disabled: locked, onSelect: () => setAppearance({ density }), className: "flex-col items-start gap-0.5 px-3 py-2", children: [_jsx("span", { className: "text-sm font-semibold", children: t.densityLabel(density) }), _jsx("span", { className: "text-xs text-muted-foreground", children: t.densityHint(density) })] }, density))) }) }), _jsx(Group, { legend: t.corners, children: _jsx("div", { className: "flex flex-wrap gap-2", children: CORNERS.map((corners) => (_jsxs(Choice, { name: `${id}-corners`, checked: appearance.corners === corners, disabled: locked, onSelect: () => setAppearance({ corners }), children: [_jsx("span", { "aria-hidden": true, className: "size-3.5 border-t-2 border-l-2 border-current", style: { borderTopLeftRadius: corners } }), t.cornersLabel(corners)] }, corners))) }) }), !locked && (_jsx("div", { children: _jsx(Button, { variant: "outline", size: "sm", onClick: reset, children: t.reset }) }))] }));
+    return (_jsxs("div", { "data-slot": "appearance-picker", className: cn("flex min-w-0 flex-col gap-6", className), children: [locked && (_jsxs("p", { className: "flex items-center gap-2 rounded-lg border border-info-border bg-info-bg px-3 py-2 text-sm text-info-fg", children: [_jsx(LockIcon, { className: "size-4 shrink-0", "aria-hidden": true }), t.locked] })), product.themes.length > 0 && (_jsx(Group, { legend: t.themes, children: _jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-2", children: product.themes.map((theme) => (_jsxs(Choice, { name: `${id}-theme`, checked: activeTheme?.id === theme.id, disabled: locked, onSelect: () => setAppearance({ ground: theme.ground, accent: theme.accent }), className: "flex-col items-stretch gap-2 p-2", children: [_jsx(ThemePreview, { product: product, ground: theme.ground, accent: accents.find((a) => a.key === theme.accent) }), _jsxs("span", { children: [_jsx("span", { className: "block text-sm font-semibold", children: t.themeName(theme) }), _jsx("span", { className: "block text-xs text-muted-foreground", children: t.themeHint(theme) })] })] }, theme.id))) }) })), _jsxs(Group, { legend: t.accent, children: [_jsx("div", { className: "flex flex-wrap gap-2", children: accents.map((accent) => (_jsxs(Choice, { name: `${id}-accent`, checked: appearance.accent === accent.key, disabled: locked, onSelect: () => setAppearance({ accent: accent.key }), children: [_jsx("span", { "aria-hidden": true, className: "size-3.5 rounded-full", style: { background: accentOn(accent, appearance.ground) } }), t.accentLabel(accent.key, accent.label)] }, accent.key))) }), _jsx(CustomAccentField, { id: `${id}-custom`, value: isCustomAccent(appearance.accent) ? appearance.accent : null, ground: appearance.ground, disabled: locked, onChange: (accent) => setAppearance({ accent }) })] }), _jsx(Group, { legend: t.ground, children: _jsx("div", { className: "flex flex-wrap gap-2", children: product.grounds.map((ground) => (_jsxs(Choice, { name: `${id}-ground`, checked: appearance.ground === ground, disabled: locked, onSelect: () => setAppearance({ ground }), children: [_jsx("span", { "aria-hidden": true, className: "size-3.5 rounded-full border", style: { background: SURFACES[ground].background } }), t.groundLabel(ground, GROUNDS[ground].label), _jsx("span", { className: "text-xs text-muted-foreground", children: t.mode(GROUNDS[ground].mode) })] }, ground))) }) }), _jsx(Group, { legend: t.density, children: _jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: DENSITY_KEYS.map((density) => (_jsxs(Choice, { name: `${id}-density`, checked: appearance.density === density, disabled: locked, onSelect: () => setAppearance({ density }), className: "flex-col items-start gap-0.5 px-3 py-2", children: [_jsx("span", { className: "text-sm font-semibold", children: t.densityLabel(density) }), _jsx("span", { className: "text-xs text-muted-foreground", children: t.densityHint(density) })] }, density))) }) }), _jsx(Group, { legend: t.corners, children: _jsx("div", { className: "flex flex-wrap gap-2", children: CORNERS.map((corners) => (_jsxs(Choice, { name: `${id}-corners`, checked: appearance.corners === corners, disabled: locked, onSelect: () => setAppearance({ corners }), children: [_jsx("span", { "aria-hidden": true, className: "size-3.5 border-t-2 border-l-2 border-current", style: { borderTopLeftRadius: corners } }), t.cornersLabel(corners)] }, corners))) }) }), !locked && (_jsx("div", { children: _jsx(Button, { variant: "outline", size: "sm", onClick: reset, children: t.reset }) }))] }));
 }
 /**
  * Any colour as the accent (Astrolift palette option A). It applies only once
  * it stands 3:1 off the ground (WCAG 2.2 §1.4.11); until then the draft stays
  * in the field with the reason.
  */
-function CustomAccent({ id, value, ground, disabled, onChange, }) {
+export function CustomAccentField({ id, value, ground, disabled, onChange, }) {
     const { messages } = useUI();
     const t = messages.appearance;
     const [draft, setDraft] = React.useState(value ?? "");
+    // Controlled by `value`: a new value from outside (a server load, a reset)
+    // replaces the draft. Adjusted during render, not in an effect.
+    const [shownValue, setShownValue] = React.useState(value);
+    if (value !== shownValue) {
+        setShownValue(value);
+        setDraft(value ?? "");
+    }
     const parsed = parseCustomAccent(draft);
     const check = parsed ? accentContrast(parsed, ground) : null;
     const helpId = `${id}-help`;

package/dist/data/DataTable.js

@@ -31,7 +31,7 @@ export function DataTable({ label, controller, columns, getRowId, empty, emptyFi
     const t = messages.table;
     const contextDensity = useDensity();
     const density = densityProp ?? contextDensity;
-    const { rows, state, error, retry, pageSize, clearFilters } = controller;
+    const { rows, state, error, retry, pageSize, isFiltered, clearFilters } = controller;
     const cards = density === "cards" && Boolean(renderCard);
     const pageIds = React.useMemo(() => rows.map(getRowId), [rows, getRowId]);
     const visibleColumns = rowActions
@@ -98,7 +98,7 @@ export function DataTable({ label, controller, columns, getRowId, empty, emptyFi
                 return (_jsxs("div", { className: "relative", "aria-busy": controller.isStale || undefined, children: [controller.isStale && _jsx(StaleBar, { className: "-top-1.5" }), _jsx("ul", { "aria-label": label, className: grid, children: rows.map((row) => (_jsx("li", { className: cn(box, rowClassName?.(row)), children: rowHref ? (_jsx(Link, { href: rowHref(row), className: "block h-full rounded-lg outline-none after:absolute after:inset-0 focus-visible:after:ring-2 focus-visible:after:ring-ring", children: renderCard?.(row) })) : onRowActivate ? (_jsx("button", { type: "button", "aria-label": rowLabel?.(row), onClick: () => onRowActivate(row), className: "block h-full w-full text-left outline-none after:absolute after:inset-0 focus-visible:after:ring-2 focus-visible:after:ring-ring", children: renderCard?.(row) })) : (renderCard?.(row)) }, getRowId(row)))) })] }));
         }
     })();
-    return (_jsxs("div", { "data-slot": "data-table", "data-density": densityProp, className: cn("flex min-w-0 flex-col gap-3", className), children: [chrome === "full" && (_jsx(Toolbar, { controller: controller, placeholder: searchPlaceholder, children: toolbar })), selection && selection.selectedCount > 0 && bulkActions && !cards && (_jsxs("div", { className: "flex flex-wrap items-center gap-3 rounded-lg border bg-muted/50 px-3 py-2", children: [_jsx("span", { className: "text-sm font-medium tabular-nums", children: t.selected(selection.selectedCount) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: selection.clear, children: t.clearSelection }), _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: bulkActions(selection) })] })), cards ? cardGrid : table, chrome === "full" && _jsx(Pagination, { controller: controller }), state === "loading" && (_jsx("p", { role: "status", className: "sr-only", children: t.loading }))] }));
+    return (_jsxs("div", { "data-slot": "data-table", "data-density": densityProp, className: cn("flex min-w-0 flex-col gap-3", className), children: [chrome === "full" && (_jsx(Toolbar, { controller: controller, placeholder: searchPlaceholder, children: toolbar })), selection && selection.selectedCount > 0 && bulkActions && !cards && (_jsxs("div", { className: "flex flex-wrap items-center gap-3 rounded-lg border bg-muted/50 px-3 py-2", children: [_jsx("span", { className: "text-sm font-medium tabular-nums", children: t.selected(selection.selectedCount) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: selection.clear, children: t.clearSelection }), _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: bulkActions(selection) })] })), cards ? cardGrid : table, chrome === "full" && _jsx(Pagination, { controller: controller }), state === "loading" && (_jsx("p", { role: "status", className: "sr-only", children: t.loading })), isFiltered && state === "ready" && (_jsx("p", { "aria-live": "polite", className: "sr-only", children: t.filteredResults }))] }));
 }
 /**
  * The rows on screen answer the previous question while the next answer is

package/dist/index.d.ts

@@ -13,7 +13,7 @@ export { accentContrast, appearanceFromServer, applyAppearance, clearAppearance,
 export { appearanceScript, productStyles } from "./appearance/boot.js";
 export { AppearanceScript, type AppearanceScriptProps } from "./appearance/AppearanceScript.js";
 export { AppearanceProvider, useAppearance, useDensity, useProduct, type AppearanceContextValue, type AppearanceProviderProps, } from "./appearance/AppearanceProvider.js";
-export { AppearancePicker } from "./appearance/AppearancePicker.js";
+export { AppearancePicker, CustomAccentField, type CustomAccentFieldProps, } from "./appearance/AppearancePicker.js";
 export { activeFor, areaSwitcher, localizeNav, visibleNav, type CrumbSwitchOption, type NavActive, type NavArea, type NavFunction, type NavGroup, type NavIcon, type NavModel, } from "./nav/model.js";
 export { Nav, type NavProps } from "./nav/Nav.js";
 export { AppShell, type AppShellProps } from "./shell/AppShell.js";
@@ -40,11 +40,12 @@ export { ErrorState, type ErrorStateProps } from "./states/ErrorState.js";
 export { LoadingState, type LoadingStateProps } from "./states/LoadingState.js";
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./overlays/Dialog.js";
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "./overlays/Drawer.js";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./overlays/AlertDialog.js";
 export { ConfirmDialog, type ConfirmDialogProps, type ConfirmReason, } from "./overlays/ConfirmDialog.js";
 export { Button, buttonVariants, type ButtonProps } from "./primitives/Button.js";
 export { Input } from "./primitives/Input.js";
 export { Checkbox } from "./primitives/Checkbox.js";
-export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./primitives/DropdownMenu.js";
-export { Popover, PopoverContent, PopoverTrigger } from "./primitives/Popover.js";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./primitives/DropdownMenu.js";
+export { Popover, PopoverAnchor, PopoverContent, PopoverHeader, PopoverTrigger, } from "./primitives/Popover.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/Tabs.js";
 export { Skeleton } from "./primitives/Skeleton.js";

package/dist/index.js

@@ -16,7 +16,7 @@ export { accentContrast, appearanceFromServer, applyAppearance, clearAppearance,
 export { appearanceScript, productStyles } from "./appearance/boot.js";
 export { AppearanceScript } from "./appearance/AppearanceScript.js";
 export { AppearanceProvider, useAppearance, useDensity, useProduct, } from "./appearance/AppearanceProvider.js";
-export { AppearancePicker } from "./appearance/AppearancePicker.js";
+export { AppearancePicker, CustomAccentField, } from "./appearance/AppearancePicker.js";
 // Navigation
 export { activeFor, areaSwitcher, localizeNav, visibleNav, } from "./nav/model.js";
 export { Nav } from "./nav/Nav.js";
@@ -50,12 +50,13 @@ export { LoadingState } from "./states/LoadingState.js";
 // Overlays
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./overlays/Dialog.js";
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "./overlays/Drawer.js";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./overlays/AlertDialog.js";
 export { ConfirmDialog, } from "./overlays/ConfirmDialog.js";
 // Primitives
 export { Button, buttonVariants } from "./primitives/Button.js";
 export { Input } from "./primitives/Input.js";
 export { Checkbox } from "./primitives/Checkbox.js";
-export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./primitives/DropdownMenu.js";
-export { Popover, PopoverContent, PopoverTrigger } from "./primitives/Popover.js";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "./primitives/DropdownMenu.js";
+export { Popover, PopoverAnchor, PopoverContent, PopoverHeader, PopoverTrigger, } from "./primitives/Popover.js";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/Tabs.js";
 export { Skeleton } from "./primitives/Skeleton.js";

package/dist/nav/model.d.ts

@@ -59,14 +59,19 @@ export interface CrumbSwitchOption {
     label: string;
     href: string;
     active?: boolean;
+    /** The function's key, so an app can translate the label from its catalog. */
+    navFunction?: string;
 }
 /**
  * The first crumb of a page inside an area: the area's name, switching
  * between its functions with the current one checked. Read from the model,
- * so the sidebar and the breadcrumb always agree.
+ * so the sidebar and the breadcrumb always agree. `navArea` and each
+ * option's `navFunction` carry the model's keys, so an app can translate the
+ * labels from its catalog.
  */
 export declare function areaSwitcher(nav: NavModel, area: string, activeFn: string): {
     label: string;
+    navArea: string;
     switcher: CrumbSwitchOption[];
 };
 /**

package/dist/nav/model.js

@@ -40,13 +40,21 @@ export function activeFor(nav, pathname) {
 /**
  * The first crumb of a page inside an area: the area's name, switching
  * between its functions with the current one checked. Read from the model,
- * so the sidebar and the breadcrumb always agree.
+ * so the sidebar and the breadcrumb always agree. `navArea` and each
+ * option's `navFunction` carry the model's keys, so an app can translate the
+ * labels from its catalog.
  */
 export function areaSwitcher(nav, area, activeFn) {
     const found = nav.find((a) => a.key === area);
     return {
         label: found?.label ?? area,
-        switcher: (found?.groups ?? []).flatMap((group) => group.functions.map((fn) => ({ label: fn.label, href: fn.href, active: fn.key === activeFn }))),
+        navArea: area,
+        switcher: (found?.groups ?? []).flatMap((group) => group.functions.map((fn) => ({
+            label: fn.label,
+            href: fn.href,
+            active: fn.key === activeFn,
+            navFunction: fn.key,
+        }))),
     };
 }
 /**

package/dist/overlays/AlertDialog.d.ts

@@ -0,0 +1,22 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import type * as React from "react";
+import { Button } from "../primitives/Button.js";
+/**
+ * The parts of a confirmation that needs more than ConfirmDialog holds: a
+ * preview of what the action touches, a typed check, a choice. Prefer
+ * ConfirmDialog when a title, a description and an optional reason will do;
+ * it brings the pending state and the error feedback. The scrim does not
+ * close an alert dialog; Escape and Cancel do.
+ */
+export declare function AlertDialog(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+export declare function AlertDialogTrigger(props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+export declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): React.JSX.Element;
+export declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+export declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+type ButtonLook = Pick<React.ComponentProps<typeof Button>, "variant" | "size">;
+/** Closes the dialog when clicked; call `event.preventDefault()` to hold it open. */
+export declare function AlertDialogAction({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & ButtonLook): React.JSX.Element;
+export declare function AlertDialogCancel({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & ButtonLook): React.JSX.Element;
+export {};

package/dist/overlays/AlertDialog.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { overlayClassName } from "./Dialog.js";
+/**
+ * The parts of a confirmation that needs more than ConfirmDialog holds: a
+ * preview of what the action touches, a typed check, a choice. Prefer
+ * ConfirmDialog when a title, a description and an optional reason will do;
+ * it brings the pending state and the error feedback. The scrim does not
+ * close an alert dialog; Escape and Cancel do.
+ */
+export function AlertDialog(props) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+export function AlertDialogTrigger(props) {
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+export function AlertDialogContent({ className, ...props }) {
+    return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: overlayClassName("bg-black/10") }), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-xs -translate-x-1/2 -translate-y-1/2 grid-cols-[minmax(0,1fr)] gap-4 overflow-y-auto rounded-xl bg-background p-4 text-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-[state=closed]:animate-cui-pop-out data-[state=open]:animate-cui-pop-in sm:max-w-sm", className), ...props })] }));
+}
+export function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid place-items-center gap-1.5 text-center sm:place-items-start sm:text-left", className), ...props }));
+}
+export function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className), ...props }));
+}
+export function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn("font-head text-base font-semibold [overflow-wrap:anywhere]", className), ...props }));
+}
+export function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn("text-sm [overflow-wrap:anywhere] text-muted-foreground", className), ...props }));
+}
+/** Closes the dialog when clicked; call `event.preventDefault()` to hold it open. */
+export function AlertDialogAction({ className, variant = "default", size = "default", ...props }) {
+    return (_jsx(Button, { variant: variant, size: size, asChild: true, children: _jsx(AlertDialogPrimitive.Action, { "data-slot": "alert-dialog-action", className: className, ...props }) }));
+}
+export function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+    return (_jsx(Button, { variant: variant, size: size, asChild: true, children: _jsx(AlertDialogPrimitive.Cancel, { "data-slot": "alert-dialog-cancel", className: className, ...props }) }));
+}

package/dist/overlays/ConfirmDialog.d.ts

@@ -23,9 +23,16 @@ export interface ConfirmDialogProps {
      * Awaited on confirm, with the trimmed reason ("" without one). While it is
      * pending both buttons are disabled. Resolving `false` keeps the dialog
      * open (the caller reported the failure); any other result closes it. A
-     * rejection keeps it open and shows the error's message in the dialog.
+     * rejection keeps it open and shows the error's message in the dialog,
+     * or hands it to `onError` when one is given.
      */
     onConfirm: (reason: string) => Promise<unknown> | unknown;
+    /**
+     * Report a rejected `onConfirm` yourself (a toast, say) instead of the
+     * inline error. `message` is the line the dialog would have shown. The
+     * dialog still stays open. A missing reason is always shown inline.
+     */
+    onError?: (error: unknown, message: string) => void;
     reason?: ConfirmReason;
 }
 /**
@@ -34,4 +41,4 @@ export interface ConfirmDialogProps {
  * place of `window.confirm`, which blocks the event loop and can say nothing
  * when the action fails.
  */
-export declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, confirmDisabled, onConfirm, reason, }: ConfirmDialogProps): React.JSX.Element;
+export declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, confirmDisabled, onConfirm, onError, reason, }: ConfirmDialogProps): React.JSX.Element;

package/dist/overlays/ConfirmDialog.js

@@ -12,7 +12,7 @@ import { overlayClassName } from "./Dialog.js";
  * place of `window.confirm`, which blocks the event loop and can say nothing
  * when the action fails.
  */
-export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive = false, confirmDisabled = false, onConfirm, reason, }) {
+export function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive = false, confirmDisabled = false, onConfirm, onError, reason, }) {
     const { messages } = useUI();
     const t = messages.confirm;
     const [pending, setPending] = React.useState(false);
@@ -44,11 +44,15 @@ export function ConfirmDialog({ open, onOpenChange, title, description, confirmL
                 close();
         }
         catch (err) {
-            setError(err instanceof Error && err.message
+            const message = err instanceof Error && err.message
                 ? err.message
                 : typeof err === "string" && err
                     ? err
-                    : t.failed);
+                    : t.failed;
+            if (onError)
+                onError(err, message);
+            else
+                setError(message);
         }
         finally {
             setPending(false);
@@ -62,9 +66,9 @@ export function ConfirmDialog({ open, onOpenChange, title, description, confirmL
                 onOpenChange(true);
             else
                 close();
-        }, children: _jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "confirm-dialog-overlay", className: overlayClassName() }), _jsxs(AlertDialogPrimitive.Content, { "data-slot": "confirm-dialog", "aria-busy": pending || undefined, ...(description == null ? { "aria-describedby": undefined } : {}), className: "fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 grid-cols-[minmax(0,1fr)] gap-4 rounded-lg bg-popover p-5 text-popover-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-[state=open]:animate-cui-pop-in", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(AlertDialogPrimitive.Title, { className: "font-head text-base font-semibold [overflow-wrap:anywhere]", children: title }), description != null && (_jsx(AlertDialogPrimitive.Description, { className: "text-sm [overflow-wrap:anywhere] text-muted-foreground", children: description }))] }), reason && (_jsxs("div", { className: "grid min-w-0 gap-1.5", children: [_jsx("label", { htmlFor: reasonId, className: "text-sm font-medium", children: reason.label }), _jsx("textarea", { id: reasonId, value: draft, rows: 4, disabled: pending, placeholder: reason.placeholder, "aria-invalid": error != null || undefined, "aria-describedby": error ? errorId : undefined, onChange: (event) => {
+        }, children: _jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "confirm-dialog-overlay", className: overlayClassName("bg-black/10") }), _jsxs(AlertDialogPrimitive.Content, { "data-slot": "confirm-dialog", "aria-busy": pending || undefined, ...(description == null ? { "aria-describedby": undefined } : {}), className: "fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-xs -translate-x-1/2 -translate-y-1/2 grid-cols-[minmax(0,1fr)] gap-4 rounded-xl bg-background p-4 text-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-[state=closed]:animate-cui-pop-out data-[state=open]:animate-cui-pop-in sm:max-w-sm", children: [_jsxs("div", { "data-slot": "confirm-dialog-header", className: "grid place-items-center gap-1.5 text-center sm:place-items-start sm:text-left", children: [_jsx(AlertDialogPrimitive.Title, { className: "font-head text-base font-semibold [overflow-wrap:anywhere]", children: title }), description != null && (_jsx(AlertDialogPrimitive.Description, { className: "text-sm [overflow-wrap:anywhere] text-muted-foreground", children: description }))] }), reason && (_jsxs("div", { className: "grid min-w-0 gap-1.5", children: [_jsx("label", { htmlFor: reasonId, className: "text-sm font-medium", children: reason.label }), _jsx("textarea", { id: reasonId, value: draft, rows: 4, disabled: pending, placeholder: reason.placeholder, "aria-invalid": error != null || undefined, "aria-describedby": error ? errorId : undefined, onChange: (event) => {
                                         setDraft(event.target.value);
                                         if (error)
                                             setError(null);
-                                    }, className: "min-h-20 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 aria-invalid:border-destructive" })] })), error && (_jsx("p", { id: errorId, role: "alert", className: "rounded-lg border border-danger-border bg-danger-bg px-3 py-2 text-sm [overflow-wrap:anywhere] text-danger-fg", children: error })), _jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [_jsx(AlertDialogPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "outline", disabled: pending, children: cancelLabel ?? t.cancel }) }), _jsx(AlertDialogPrimitive.Action, { asChild: true, children: _jsx(Button, { variant: destructive ? "destructive" : "default", disabled: pending || confirmDisabled, onClick: confirm, className: cn(pending && "cursor-progress"), children: pending ? t.working : (confirmLabel ?? t.confirm) }) })] })] })] }) }));
+                                    }, className: "min-h-20 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 aria-invalid:border-destructive" })] })), error && (_jsx("p", { id: errorId, role: "alert", className: "rounded-lg border border-danger-border bg-danger-bg px-3 py-2 text-sm [overflow-wrap:anywhere] text-danger-fg", children: error })), _jsxs("div", { "data-slot": "confirm-dialog-footer", className: "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", children: [_jsx(AlertDialogPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "outline", disabled: pending, children: cancelLabel ?? t.cancel }) }), _jsx(AlertDialogPrimitive.Action, { asChild: true, children: _jsx(Button, { variant: destructive ? "destructive" : "default", disabled: pending || confirmDisabled, onClick: confirm, className: cn(pending && "cursor-progress"), children: pending ? t.working : (confirmLabel ?? t.confirm) }) })] })] })] }) }));
 }

package/dist/overlays/Dialog.d.ts

@@ -3,7 +3,7 @@ import type * as React from "react";
 export declare function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 export declare function DialogTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
 export declare function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
-/** The scrim behind a modal; shared with Drawer. */
+/** The scrim behind a modal; shared with Drawer and ConfirmDialog, which lighten it. */
 export declare function overlayClassName(className?: string): string;
 /**
  * A centred modal on the raised surface. Focus moves in on open and back to

package/dist/overlays/Dialog.js

@@ -13,9 +13,9 @@ export function DialogTrigger(props) {
 export function DialogClose(props) {
     return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
-/** The scrim behind a modal; shared with Drawer. */
+/** The scrim behind a modal; shared with Drawer and ConfirmDialog, which lighten it. */
 export function overlayClassName(className) {
-    return cn("fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-cui-fade-in supports-backdrop-filter:backdrop-blur-xs", className);
+    return cn("fixed inset-0 z-50 bg-black/30 data-[state=closed]:animate-cui-fade-out data-[state=open]:animate-cui-fade-in supports-backdrop-filter:backdrop-blur-xs", className);
 }
 /**
  * A centred modal on the raised surface. Focus moves in on open and back to
@@ -23,10 +23,10 @@ export function overlayClassName(className) {
  */
 export function DialogContent({ className, children, hideCloseButton = false, ...props }) {
     const { messages } = useUI();
-    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: overlayClassName() }), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 grid-cols-[minmax(0,1fr)] gap-4 overflow-y-auto rounded-lg bg-popover p-6 text-popover-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-[state=open]:animate-cui-pop-in", className), ...props, children: [children, !hideCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close-button", "aria-label": messages.dialog.close, className: "absolute top-3 right-3 rounded-lg p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: _jsx(XIcon, { className: "size-4", "aria-hidden": true }) }))] })] }));
+    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: overlayClassName() }), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 grid-cols-[minmax(0,1fr)] gap-4 overflow-y-auto rounded-xl bg-background p-6 text-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-[state=closed]:animate-cui-pop-out data-[state=open]:animate-cui-pop-in sm:max-w-xl", className), ...props, children: [children, !hideCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close-button", "aria-label": messages.dialog.close, className: "absolute top-3 right-3 rounded-lg p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: _jsx(XIcon, { className: "size-4", "aria-hidden": true }) }))] })] }));
 }
 export function DialogHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-1.5 pr-6", className), ...props }));
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-1.5 pr-6 text-left", className), ...props }));
 }
 export function DialogFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props }));

package/dist/overlays/Drawer.d.ts

@@ -4,9 +4,9 @@ export declare function Drawer(props: React.ComponentProps<typeof DrawerPrimitiv
 export declare function DrawerTrigger(props: React.ComponentProps<typeof DrawerPrimitive.Trigger>): React.JSX.Element;
 export declare function DrawerClose(props: React.ComponentProps<typeof DrawerPrimitive.Close>): React.JSX.Element;
 declare const SIDE: {
-    readonly right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=open]:animate-cui-slide-in-right sm:max-w-sm";
-    readonly left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=open]:animate-cui-slide-in-left sm:max-w-sm";
-    readonly bottom: "inset-x-0 bottom-0 max-h-[85dvh] border-t data-[state=open]:animate-cui-slide-in-bottom";
+    readonly right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:animate-cui-slide-out-right data-[state=open]:animate-cui-slide-in-right sm:max-w-sm";
+    readonly left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:animate-cui-slide-out-left data-[state=open]:animate-cui-slide-in-left sm:max-w-sm";
+    readonly bottom: "inset-x-0 bottom-0 max-h-[85dvh] border-t data-[state=closed]:animate-cui-slide-out-bottom data-[state=open]:animate-cui-slide-in-bottom";
 };
 /**
  * A modal panel from an edge: secondary content that should not cost a page

package/dist/overlays/Drawer.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
 import { Dialog as DrawerPrimitive } from "radix-ui";
 import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
 import { useUI } from "../provider/UIProvider.js";
 import { overlayClassName } from "./Dialog.js";
 export function Drawer(props) {
@@ -15,9 +16,9 @@ export function DrawerClose(props) {
     return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
 }
 const SIDE = {
-    right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=open]:animate-cui-slide-in-right sm:max-w-sm",
-    left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=open]:animate-cui-slide-in-left sm:max-w-sm",
-    bottom: "inset-x-0 bottom-0 max-h-[85dvh] border-t data-[state=open]:animate-cui-slide-in-bottom",
+    right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:animate-cui-slide-out-right data-[state=open]:animate-cui-slide-in-right sm:max-w-sm",
+    left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:animate-cui-slide-out-left data-[state=open]:animate-cui-slide-in-left sm:max-w-sm",
+    bottom: "inset-x-0 bottom-0 max-h-[85dvh] border-t data-[state=closed]:animate-cui-slide-out-bottom data-[state=open]:animate-cui-slide-in-bottom",
 };
 /**
  * A modal panel from an edge: secondary content that should not cost a page
@@ -26,7 +27,7 @@ const SIDE = {
  */
 export function DrawerContent({ className, children, side = "right", hideCloseButton = false, ...props }) {
     const { messages } = useUI();
-    return (_jsxs(DrawerPrimitive.Portal, { children: [_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: overlayClassName() }), _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", "data-side": side, className: cn("fixed z-50 flex flex-col gap-4 overflow-y-auto border-border bg-background text-sm text-foreground shadow-lg outline-none", SIDE[side], className), ...props, children: [children, !hideCloseButton && (_jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close-button", "aria-label": messages.dialog.close, className: "absolute top-3 right-3 rounded-lg p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: _jsx(XIcon, { className: "size-4", "aria-hidden": true }) }))] })] }));
+    return (_jsxs(DrawerPrimitive.Portal, { children: [_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: overlayClassName("bg-black/10") }), _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", "data-side": side, className: cn("fixed z-50 flex flex-col gap-4 overflow-y-auto border-border bg-background text-sm text-foreground shadow-lg outline-none", SIDE[side], className), ...props, children: [children, !hideCloseButton && (_jsx(DrawerPrimitive.Close, { asChild: true, children: _jsx(Button, { "data-slot": "drawer-close-button", variant: "ghost", size: "icon-sm", "aria-label": messages.dialog.close, className: "absolute top-3 right-3", children: _jsx(XIcon, { "aria-hidden": true }) }) }))] })] }));
 }
 export function DrawerHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex flex-col gap-1 p-4 pr-10", className), ...props }));
@@ -35,7 +36,7 @@ export function DrawerFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
 }
 export function DrawerTitle({ className, ...props }) {
-    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn("font-head text-base font-semibold text-foreground", className), ...props }));
+    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn("font-head text-base font-medium text-foreground", className), ...props }));
 }
 export function DrawerDescription({ className, ...props }) {
     return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn("text-sm text-muted-foreground", className), ...props }));

package/dist/page/PageHeader.d.ts

@@ -18,6 +18,12 @@ export interface PageHeaderProps {
     tabs?: readonly TabNavItem[];
     /** Names the tab row. Defaults to "Page". */
     tabsLabel?: string;
+    /**
+     * Classes for the tab row, merged over its default gutter
+     * (`-mx-3 md:-mx-6`). Match the page's padding: a page padded `p-6` at
+     * every width passes `-mx-6 px-6`.
+     */
+    tabsClassName?: string;
     className?: string;
 }
 /**
@@ -25,4 +31,4 @@ export interface PageHeaderProps {
  * breadcrumb, the title row with its status, context and actions, and at
  * most one row of tabs. Pure.
  */
-export declare function PageHeader({ crumbs, title, status, context, description, primaryAction, menu, tabs, tabsLabel, className, }: PageHeaderProps): React.JSX.Element;
+export declare function PageHeader({ crumbs, title, status, context, description, primaryAction, menu, tabs, tabsLabel, tabsClassName, className, }: PageHeaderProps): React.JSX.Element;

package/dist/page/PageHeader.js

@@ -8,6 +8,6 @@ import { TabNav } from "./TabNav.js";
  * breadcrumb, the title row with its status, context and actions, and at
  * most one row of tabs. Pure.
  */
-export function PageHeader({ crumbs, title, status, context, description, primaryAction, menu, tabs, tabsLabel = "Page", className, }) {
-    return (_jsxs("header", { "data-slot": "page-header", className: cn("flex min-w-0 flex-col gap-3", className), children: [crumbs && crumbs.length > 0 && _jsx(Breadcrumbs, { crumbs: crumbs }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2", children: [_jsx("h1", { className: "min-w-0 truncate font-head text-xl font-semibold", children: title }), status, context && (_jsx("span", { className: "min-w-0 truncate text-sm text-muted-foreground", children: context })), (primaryAction || menu) && (_jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [primaryAction, menu] }))] }), description && (_jsx("div", { className: "max-w-2xl text-sm [overflow-wrap:anywhere] text-muted-foreground", children: description })), tabs && tabs.length > 0 && (_jsx(TabNav, { tabs: tabs, label: tabsLabel, className: "-mx-3 md:-mx-6" }))] }));
+export function PageHeader({ crumbs, title, status, context, description, primaryAction, menu, tabs, tabsLabel = "Page", tabsClassName, className, }) {
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("flex min-w-0 flex-col gap-3", className), children: [crumbs && crumbs.length > 0 && _jsx(Breadcrumbs, { crumbs: crumbs }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2", children: [_jsx("h1", { className: "min-w-0 truncate font-head text-xl font-semibold", children: title }), status, context && (_jsx("span", { className: "min-w-0 truncate text-sm text-muted-foreground", children: context })), (primaryAction || menu) && (_jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [primaryAction, menu] }))] }), description && (_jsx("div", { className: "max-w-2xl text-sm [overflow-wrap:anywhere] text-muted-foreground", children: description })), tabs && tabs.length > 0 && (_jsx(TabNav, { tabs: tabs, label: tabsLabel, className: cn("-mx-3 md:-mx-6", tabsClassName) }))] }));
 }

package/dist/primitives/Button.js

@@ -7,13 +7,13 @@ import { cn } from "../lib/cn.js";
  * corners setting (`rounded-lg` is `--radius`), so a 0px or 10px choice
  * reaches buttons as it reaches panels.
  */
-export const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+export const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/85",
-            outline: "border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+            outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary",
-            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
             destructive: "bg-danger/10 text-danger-fg hover:bg-danger/15 focus-visible:border-danger-border focus-visible:ring-danger/20",
             link: "text-primary underline-offset-4 hover:underline",
         },
@@ -32,5 +32,5 @@ export const buttonVariants = cva("group/button inline-flex shrink-0 items-cente
 });
 export function Button({ className, variant, size, asChild = false, ...props }) {
     const Component = asChild ? Slot.Root : "button";
-    return (_jsx(Component, { "data-slot": "button", "data-variant": variant ?? "default", className: cn(buttonVariants({ variant, size }), className), ...props }));
+    return (_jsx(Component, { "data-slot": "button", "data-variant": variant ?? "default", "data-size": size ?? "default", className: cn(buttonVariants({ variant, size }), className), ...props }));
 }

package/dist/primitives/Checkbox.js

@@ -9,5 +9,5 @@ import { cn } from "../lib/cn.js";
  * state cannot be expressed in JSX on a native box.
  */
 export function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer size-4 shrink-0 rounded-sm border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current", children: props.checked === "indeterminate" ? (_jsx(MinusIcon, { className: "size-3.5", "aria-hidden": true })) : (_jsx(CheckIcon, { className: "size-3.5", "aria-hidden": true })) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer size-4 shrink-0 rounded-sm border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:bg-input/30", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none", children: props.checked === "indeterminate" ? (_jsx(MinusIcon, { className: "size-3.5", "aria-hidden": true })) : (_jsx(CheckIcon, { className: "size-3.5", "aria-hidden": true })) }) }));
 }

package/dist/primitives/DropdownMenu.d.ts

@@ -7,5 +7,8 @@ export declare function DropdownMenuGroup(props: React.ComponentProps<typeof Dro
 export declare function DropdownMenuItem({ className, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
     variant?: "default" | "destructive";
 }): React.JSX.Element;
+export declare function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): React.JSX.Element;
+export declare function DropdownMenuRadioGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+export declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): React.JSX.Element;
 export declare function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label>): React.JSX.Element;
 export declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;

package/dist/primitives/DropdownMenu.js

@@ -1,5 +1,6 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { cn } from "../lib/cn.js";
 export function DropdownMenu(props) {
@@ -17,6 +18,16 @@ export function DropdownMenuGroup(props) {
 export function DropdownMenuItem({ className, variant = "default", ...props }) {
     return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-variant": variant, className: cn("relative flex cursor-default items-center gap-1.5 rounded-lg px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[variant=destructive]:text-danger-fg data-[variant=destructive]:focus:bg-danger/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
+const selectableItemClass = "relative flex cursor-default items-center gap-1.5 rounded-lg py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+export function DropdownMenuCheckboxItem({ className, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn(selectableItemClass, className), ...props, children: [_jsx("span", { "data-slot": "dropdown-menu-checkbox-item-indicator", className: "pointer-events-none absolute right-2 flex items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { "aria-hidden": true }) }) }), children] }));
+}
+export function DropdownMenuRadioGroup(props) {
+    return _jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+export function DropdownMenuRadioItem({ className, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn(selectableItemClass, className), ...props, children: [_jsx("span", { "data-slot": "dropdown-menu-radio-item-indicator", className: "pointer-events-none absolute right-2 flex items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { "aria-hidden": true }) }) }), children] }));
+}
 export function DropdownMenuLabel({ className, ...props }) {
     return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground", className), ...props }));
 }

package/dist/primitives/Input.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 export function Input({ className, type, ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm", className), ...props }));
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }

package/dist/primitives/Popover.d.ts

@@ -3,3 +3,5 @@ import type * as React from "react";
 export declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
 export declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
 export declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
+export declare function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+export declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/primitives/Popover.js

@@ -11,3 +11,9 @@ export function PopoverTrigger(props) {
 export function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
     return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden data-[state=open]:animate-cui-fade-in", className), ...props }) }));
 }
+export function PopoverAnchor(props) {
+    return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+export function PopoverHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-0.5 text-sm", className), ...props }));
+}

package/dist/provider/messages.d.ts

@@ -1,3 +1,4 @@
+import type { ProductTheme } from "../appearance/product.js";
 /**
  * Every string the package renders, in English. An app with a message
  * catalog overrides any of them through `UIProvider messages={...}`; a
@@ -34,6 +35,7 @@ export interface Messages {
         search: string;
         clearSearch: string;
         results: (count: number) => string;
+        filteredResults: string;
         loading: string;
         loadFailed: (label: string) => string;
         requestFailed: string;
@@ -83,6 +85,10 @@ export interface Messages {
         density: string;
         corners: string;
         reset: string;
+        /** A named theme's title; the default is the product's own English name. */
+        themeName: (theme: ProductTheme) => string;
+        /** A named theme's one-line hint; the default is the product's own English hint. */
+        themeHint: (theme: ProductTheme) => string;
         mode: (mode: "dark" | "light") => string;
         groundLabel: (ground: string, label: string) => string;
         accentLabel: (accent: string, label: string) => string;

package/dist/provider/messages.js

@@ -28,6 +28,7 @@ export const defaultMessages = {
         search: "Search",
         clearSearch: "Clear search",
         results: (n) => (n === 1 ? "1 result" : `${count(n)} results`),
+        filteredResults: "Filtered results shown.",
         loading: "Loading",
         loadFailed: (label) => `Could not load ${lower(label)}`,
         requestFailed: "The request failed.",
@@ -76,6 +77,8 @@ export const defaultMessages = {
         density: "Density",
         corners: "Corners",
         reset: "Use the default",
+        themeName: (theme) => theme.name,
+        themeHint: (theme) => theme.hint,
         mode: (mode) => mode,
         groundLabel: (_ground, label) => label,
         accentLabel: (_accent, label) => label,

package/dist/shell/RailTree.d.ts

@@ -9,6 +9,8 @@ export interface RailTreeItem {
     status?: StatusTone;
     /** Read with the status dot, which carries no text of its own ("failing"). */
     statusLabel?: string;
+    /** In flight (pending, provisioning): the status dot pulses, unless the viewer prefers reduced motion. */
+    statusPulse?: boolean;
 }
 export interface RailTreeGroup {
     key: string;

package/dist/shell/RailTree.js

@@ -27,6 +27,6 @@ function Branch({ group, activeHref }) {
                     const isActive = item.href === activeHref;
                     return (_jsx("li", { children: _jsxs(Link, { href: item.href, "aria-current": isActive ? "page" : undefined, className: cn("flex h-7 min-w-0 items-center gap-2 rounded-lg px-1.5 text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", isActive
                                 ? "bg-primary/15 font-medium text-sidebar-foreground"
-                                : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60"), children: [Icon && _jsx(Icon, { className: "size-3.5 shrink-0 opacity-70", "aria-hidden": true }), _jsx("span", { className: "truncate", title: item.label, children: item.label }), " ", item.status && (_jsx(StatusDot, { tone: item.status, label: item.statusLabel, className: "ml-auto" }))] }) }, item.key));
+                                : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60"), children: [Icon && _jsx(Icon, { className: "size-3.5 shrink-0 opacity-70", "aria-hidden": true }), _jsx("span", { className: "truncate", title: item.label, children: item.label }), " ", item.status && (_jsx(StatusDot, { tone: item.status, pulse: item.statusPulse, label: item.statusLabel, className: "ml-auto" }))] }) }, item.key));
                 }) })] }));
 }

package/dist/states/EmptyState.js

@@ -10,6 +10,6 @@ export function EmptyState({ icon, title, description, actionHref, actionLabel,
     const learnMoreText = learnMoreLabel ?? messages.states.learnMore;
     const external = learnMoreHref ? /^https?:\/\//.test(learnMoreHref) : false;
     const learnMoreClass = "mt-2 inline-flex items-center gap-1 text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline";
-    return (_jsxs("div", { "data-slot": "empty-state", className: cn("flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed px-6 py-12 text-center whitespace-normal", className), children: [icon && (_jsx("div", { "aria-hidden": true, className: "rounded-lg bg-muted p-2 text-muted-foreground [&_svg]:size-5", children: icon })), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-medium [overflow-wrap:anywhere]", children: title }), description && (_jsx("p", { className: "mx-auto mt-1 max-w-sm text-sm leading-relaxed text-muted-foreground", children: description })), learnMoreHref &&
+    return (_jsxs("div", { "data-slot": "empty-state", className: cn("flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed px-6 py-12 text-center whitespace-normal", className), children: [icon && (_jsx("div", { "aria-hidden": true, className: "rounded-lg bg-muted p-2 text-muted-foreground [&_svg:not([class*='size-'])]:size-5", children: icon })), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "font-medium [overflow-wrap:anywhere]", children: title }), description && (_jsx("p", { className: "mx-auto mt-1 max-w-sm text-sm leading-relaxed text-muted-foreground", children: description })), learnMoreHref &&
                         (external ? (_jsxs("a", { href: learnMoreHref, target: "_blank", rel: "noreferrer", className: learnMoreClass, children: [learnMoreText, _jsx(ExternalLinkIcon, { className: "size-3", "aria-hidden": true })] })) : (_jsx(Link, { href: learnMoreHref, className: learnMoreClass, children: learnMoreText })))] }), actionHref && actionLabel && (_jsx(Button, { asChild: true, size: "sm", children: _jsx(Link, { href: actionHref, children: actionLabel }) })), secondary] }));
 }

package/dist/styles/preset.css

@@ -94,12 +94,20 @@
   --ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
 
-  /* Overlays arrive calmly and leave at once. */
+  /* Overlays arrive calmly and leave quickly. */
   --animate-cui-fade-in: cui-fade-in var(--motion-fast) var(--ease-standard);
   --animate-cui-pop-in: cui-pop-in var(--motion-base) var(--ease-emphasized);
   --animate-cui-slide-in-right: cui-slide-in-right var(--motion-base) var(--ease-emphasized);
   --animate-cui-slide-in-left: cui-slide-in-left var(--motion-base) var(--ease-emphasized);
   --animate-cui-slide-in-bottom: cui-slide-in-bottom var(--motion-base) var(--ease-emphasized);
+  /* Exits hold their last frame so nothing flashes back before Radix unmounts. */
+  --animate-cui-fade-out: cui-fade-out var(--motion-fast) var(--ease-standard) forwards;
+  --animate-cui-pop-out: cui-pop-out var(--motion-fast) var(--ease-standard) forwards;
+  --animate-cui-slide-out-right: cui-slide-out-right var(--motion-fast) var(--ease-standard)
+    forwards;
+  --animate-cui-slide-out-left: cui-slide-out-left var(--motion-fast) var(--ease-standard) forwards;
+  --animate-cui-slide-out-bottom: cui-slide-out-bottom var(--motion-fast) var(--ease-standard)
+    forwards;
   /* A table's rows being replaced: a short bar travelling along the top edge. */
   --animate-cui-progress: cui-progress 1.4s var(--ease-standard) infinite;
 
@@ -141,6 +149,35 @@
       opacity: 0;
     }
   }
+  @keyframes cui-fade-out {
+    to {
+      opacity: 0;
+    }
+  }
+  @keyframes cui-pop-out {
+    to {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+  }
+  @keyframes cui-slide-out-right {
+    to {
+      transform: translateX(1.5rem);
+      opacity: 0;
+    }
+  }
+  @keyframes cui-slide-out-left {
+    to {
+      transform: translateX(-1.5rem);
+      opacity: 0;
+    }
+  }
+  @keyframes cui-slide-out-bottom {
+    to {
+      transform: translateY(1.5rem);
+      opacity: 0;
+    }
+  }
 }
 
 @layer base {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calliopelabs/ui",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Calliope AI shared operator UI: app shell, navigation, page frame, data table and list patterns, status colours, design tokens and appearance for Astrolift AI and Zentinelle AI.",
   "keywords": [
     "calliope-ai",