@calliopelabs/ui 0.3.1 → 0.5.0

package/README.md

@@ -75,9 +75,9 @@ const NAV: NavModel = [
 export const astrolift = defineProduct({ ...astroliftBrand, nav: NAV });
 ```
 
-Astrolift AI: leaf green on the deep planet green sidebar (`#04231a`), all six grounds, graphite by default (mist when the system runs light), and its eight named themes.
+Astrolift AI: leaf green on the deep planet green sidebar (`#04231a`), six grounds (every one but navy), graphite by default (mist when the system runs light), and its eight named themes.
 
-Zentinelle AI: teal (`#37efed`, `#0d7470` on light grounds) on the navy sidebar (`#0b0b19`), a true black ground by default, the family accents beside teal, and no emerald ground. Its seven areas gate rows by role:
+Zentinelle AI: teal (`#37efed`, `#0d7470` on light grounds) on the navy sidebar (`#0b0b19`), a true black ground by default, the family accents beside teal, and no emerald or navy ground. Its seven areas gate rows by role:
 
 ```ts
 import { defineProduct, zentinelleBrand, type NavModel } from "@calliopelabs/ui";
@@ -116,6 +116,8 @@ const NAV: NavModel = [
 export const zentinelle = defineProduct({ ...zentinelleBrand, nav: NAV });
 ```
 
+Calliope AI Workbench (`workbenchBrand`): Workbench blue (`#8fb8e8`, `#2f5d94` on light grounds) on a navy sidebar (`#0e1730`), its own navy ground by default (mist when the system runs light), the family accents beside its blue, and no emerald ground.
+
 `defineProduct` validates the config and throws on anything that would paint wrong: a colour that is not lowercase `#rrggbb`, a default ground the product does not offer, a brand accent key the family already uses.
 
 ## Wire the shell
@@ -265,7 +267,7 @@ The package fetches nothing. `DataTable` reads a `TableController`: rows, state,
 
 ## Appearance
 
-The person sets four axes, per product: the **ground** (black, charcoal, graphite, emerald, paper, mist; it decides light or dark), the **accent** (the product's own, a family accent, or any colour that stands 3:1 off the ground), the **density** (`compact` hairline rows or boxed `cards`) and the **corners** (0, 2, 4 or 10 px). `AppearancePicker` is the settings UI for all four.
+The person sets four axes, per product: the **ground** (black, charcoal, graphite, emerald, navy, paper, mist; it decides light or dark), the **accent** (the product's own, a family accent, or any colour that stands 3:1 off the ground), the **density** (`compact` hairline rows or boxed `cards`) and the **corners** (0, 2, 4 or 10 px). `AppearancePicker` is the settings UI for all four.
 
 - Precedence: a locked org theme, then the person's choice, then the org default, then the product default. Until someone picks a ground, light or dark follows the system.
 - An org policy that arrives after sign-in goes in through `useAppearance().setPolicy`. An app that keeps the preference on its server passes `onChange` and hands the server's copy back through `applyServerAppearance`.

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/appearance/brands.d.ts

@@ -94,24 +94,25 @@ export declare const zentinelleBrand: {
 };
 /**
  * Calliope AI Workbench (JunoHub, the installer's default theme, the desktop
- * splash): teal on navy. From junohub `custom.css` (--calliope-primary,
- * --calliope-dark) and the installer's workbench theme. Dark only today.
+ * splash): a sober light blue on navy. The navy comes from junohub `custom.css`
+ * (--calliope-dark); the hub's teal and violet are retired. Dark only today, so
+ * it defaults to its own navy ground, which no other product offers.
  */
 export declare const workbenchBrand: {
     readonly id: "workbench";
     readonly name: "Calliope AI Workbench";
     readonly accent: {
-        readonly key: "workbench-teal";
-        readonly label: "Workbench teal";
-        readonly dark: "#0af0ce";
+        readonly key: "workbench-blue";
+        readonly label: "Workbench blue";
+        readonly dark: "#8fb8e8";
         readonly onDark: "#0b1120";
-        readonly light: "#0b7a69";
+        readonly light: "#2f5d94";
         readonly onLight: "#f3fbf7";
     };
-    readonly sidebar: "#0b1120";
-    readonly grounds: readonly ["black", "charcoal", "graphite", "paper", "mist"];
+    readonly sidebar: "#0e1730";
+    readonly grounds: readonly ["navy", "black", "charcoal", "graphite", "paper", "mist"];
     readonly defaultGround: {
-        readonly dark: "charcoal";
+        readonly dark: "navy";
         readonly light: "mist";
     };
 };

package/dist/appearance/brands.js

@@ -67,24 +67,25 @@ export const zentinelleBrand = {
  */
 /**
  * Calliope AI Workbench (JunoHub, the installer's default theme, the desktop
- * splash): teal on navy. From junohub `custom.css` (--calliope-primary,
- * --calliope-dark) and the installer's workbench theme. Dark only today.
+ * splash): a sober light blue on navy. The navy comes from junohub `custom.css`
+ * (--calliope-dark); the hub's teal and violet are retired. Dark only today, so
+ * it defaults to its own navy ground, which no other product offers.
  */
 export const workbenchBrand = {
     id: "workbench",
     name: "Calliope AI Workbench",
     accent: {
-        key: "workbench-teal",
-        label: "Workbench teal",
-        dark: "#0af0ce",
+        key: "workbench-blue",
+        label: "Workbench blue",
+        dark: "#8fb8e8",
         onDark: "#0b1120",
         // derived: the hub has no light ground
-        light: "#0b7a69",
+        light: "#2f5d94",
         onLight: "#f3fbf7",
     },
-    sidebar: "#0b1120",
-    grounds: ["black", "charcoal", "graphite", "paper", "mist"],
-    defaultGround: { dark: "charcoal", light: "mist" },
+    sidebar: "#0e1730",
+    grounds: ["navy", "black", "charcoal", "graphite", "paper", "mist"],
+    defaultGround: { dark: "navy", light: "mist" },
 };
 /**
  * Calliope AI Chat Studio: blue, from `sql-agent-ui/src/index.css` (--brand

package/dist/appearance/product.d.ts

@@ -36,7 +36,7 @@ export interface ProductConfig {
     accent: FamilyAccent | BrandAccent;
     /** The brand surface: the sidebar on dark grounds (graphite and light grounds stay neutral). */
     sidebar: string;
-    /** The grounds offered, in picker order. All six when absent. */
+    /** The grounds offered, in picker order. All seven when absent. */
     grounds?: readonly Ground[];
     /** The ground until someone chooses: one per mode, following the operating system. */
     defaultGround?: {

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";
@@ -44,7 +44,7 @@ export { ConfirmDialog, type ConfirmDialogProps, type ConfirmReason, } from "./o
 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";
@@ -55,7 +55,7 @@ export { ConfirmDialog, } from "./overlays/ConfirmDialog.js";
 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/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/dist/styles/theme.css

@@ -200,6 +200,22 @@
   --sidebar-border: rgba(255, 255, 255, 0.08);
 }
 
+/* Ground: Navy (dark) */
+[data-mode="dark"][data-ground="navy"] {
+  --background: #0b1120;
+  --card: #152141;
+  --popover: #1a284a;
+  --secondary: #1d2b50;
+  --muted: #182545;
+  --accent: #213157;
+  --muted-foreground: #97a6c2;
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --sidebar: var(--brand-sidebar, #152141);
+  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, transparent);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+}
+
 /* Ground: Paper (light) */
 [data-mode="light"][data-ground="paper"] {
   --background: #faf6ee;

package/dist/theme/tokens.d.ts

@@ -32,6 +32,10 @@ export declare const GROUNDS: {
         readonly label: "Emerald";
         readonly mode: "dark";
     };
+    readonly navy: {
+        readonly label: "Navy";
+        readonly mode: "dark";
+    };
     readonly paper: {
         readonly label: "Paper";
         readonly mode: "light";

package/dist/theme/tokens.js

@@ -19,6 +19,7 @@ export const GROUNDS = {
     charcoal: { label: "Charcoal", mode: "dark" },
     graphite: { label: "Graphite", mode: "dark" },
     emerald: { label: "Emerald", mode: "dark" },
+    navy: { label: "Navy", mode: "dark" },
     paper: { label: "Paper", mode: "light" },
     mist: { label: "Mist", mode: "light" },
 };
@@ -82,6 +83,27 @@ export const SURFACES = {
         sidebarAccent: PRIMARY_TINT_16,
         sidebarBorder: "rgba(255, 255, 255, 0.08)",
     },
+    /*
+     * Workbench's navy, from JunoHub's palette: page #0b1120 and card
+     * rgba(22, 35, 69, 0.9) composited on the page, with the neutral hairlines
+     * every other dark ground uses. Its text colours are not carried over: foreground is per mode,
+     * and the hub's muted text (#e6e9ee) is not muted, so muted text is a
+     * navy-tinted grey that reads on every panel.
+     */
+    navy: {
+        background: "#0b1120",
+        card: "#152141",
+        popover: "#1a284a",
+        secondary: "#1d2b50",
+        muted: "#182545",
+        accent: "#213157",
+        mutedForeground: "#97a6c2",
+        border: "rgba(255, 255, 255, 0.1)",
+        input: "rgba(255, 255, 255, 0.1)",
+        sidebar: "brand",
+        sidebarAccent: PRIMARY_TINT_16,
+        sidebarBorder: "rgba(255, 255, 255, 0.08)",
+    },
     paper: {
         background: "#faf6ee",
         card: "#fffdf9",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calliopelabs/ui",
-  "version": "0.3.1",
+  "version": "0.5.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",