@calliopelabs/ui 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,61 @@
+/**
+ * @calliopelabs/ui: the Calliope AI operator UI, shared by Astrolift AI and
+ * Zentinelle AI. Styles: `@import "@calliopelabs/ui/preset.css"` after Tailwind.
+ */
+// Environment
+export { UIProvider, useUI, } from "./provider/UIProvider.js";
+export { defaultMessages, mergeMessages, } from "./provider/messages.js";
+export { cn } from "./lib/cn.js";
+// Tokens
+export { ACCENTS, ACCENT_KEYS, DENSITIES, DENSITY_KEYS, GROUNDS, GROUND_KEYS, MODE_TOKENS, SURFACES, } from "./theme/tokens.js";
+export { MIN_NON_TEXT_CONTRAST, MIN_TEXT_CONTRAST, contrastRatio, luminance, } from "./theme/contrast.js";
+// Product and appearance
+export { CORNERS, defineProduct, } from "./appearance/product.js";
+export { astroliftBrand, zentinelleBrand } from "./appearance/brands.js";
+export { accentContrast, appearanceFromServer, applyAppearance, clearAppearance, inkFor, isCustomAccent, modeFor, normalize, normalizePartial, parseCustomAccent, readAppearance, resolveAppearance, writeAppearance, } from "./appearance/appearance.js";
+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";
+// Navigation
+export { activeFor, areaSwitcher, localizeNav, visibleNav, } from "./nav/model.js";
+export { Nav } from "./nav/Nav.js";
+// Shell
+export { AppShell } from "./shell/AppShell.js";
+export { Sidebar } from "./shell/Sidebar.js";
+export { BrandMark } from "./shell/BrandMark.js";
+export { UserMenu } from "./shell/UserMenu.js";
+export { RailPanel } from "./shell/RailPanel.js";
+export { RailTree, } from "./shell/RailTree.js";
+export { useRailState, useRailWidth } from "./shell/rail-state.js";
+// Page
+export { PageFrame } from "./page/PageFrame.js";
+export { PageHeader } from "./page/PageHeader.js";
+export { Breadcrumbs } from "./page/Breadcrumbs.js";
+export { TabNav } from "./page/TabNav.js";
+export { Section } from "./page/Section.js";
+// Data
+export { DataTable } from "./data/DataTable.js";
+export { List, ListItem } from "./data/List.js";
+export { useRowSelection } from "./data/use-row-selection.js";
+export { DEFAULT_PAGE_SIZE, PAGE_SIZES, } from "./data/types.js";
+// Status
+export { StatusBadge } from "./status/StatusBadge.js";
+export { StatusDot } from "./status/StatusDot.js";
+export { DOT_TONE, IN_FLIGHT, PILL_TONE, STATUS_TONES, TONE_TOKEN, } from "./status/tones.js";
+// States
+export { EmptyState } from "./states/EmptyState.js";
+export { ErrorState } from "./states/ErrorState.js";
+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 { 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/Tabs.js";
+export { Skeleton } from "./primitives/Skeleton.js";

package/dist/lib/cn.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+/** Join class names, letting a later Tailwind utility override an earlier one. */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/cn.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/** Join class names, letting a later Tailwind utility override an earlier one. */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/lib/local-store.d.ts

@@ -0,0 +1,12 @@
+/**
+ * localStorage as a React external store, for per-person display
+ * preferences (appearance, rail state). Reads and writes never throw: Safari
+ * private mode and embedded webviews throw on storage access. A write that
+ * storage refuses is held for the rest of the page, so the choice still
+ * applies until reload.
+ */
+/** Dispatched on window after every write in this tab; other tabs hear `storage`. */
+export declare const LOCAL_STORE_EVENT = "calliope-ui:storage";
+export declare function readLocal(key: string): string | null;
+export declare function writeLocal(key: string, value: string | null): void;
+export declare function subscribeLocal(onChange: () => void): () => void;

package/dist/lib/local-store.js

@@ -0,0 +1,54 @@
+/**
+ * localStorage as a React external store, for per-person display
+ * preferences (appearance, rail state). Reads and writes never throw: Safari
+ * private mode and embedded webviews throw on storage access. A write that
+ * storage refuses is held for the rest of the page, so the choice still
+ * applies until reload.
+ */
+/** Dispatched on window after every write in this tab; other tabs hear `storage`. */
+export const LOCAL_STORE_EVENT = "calliope-ui:storage";
+const unsaved = new Map();
+function storage() {
+    try {
+        return typeof window === "undefined" ? null : window.localStorage;
+    }
+    catch {
+        return null;
+    }
+}
+export function readLocal(key) {
+    if (unsaved.has(key))
+        return unsaved.get(key) ?? null;
+    try {
+        return storage()?.getItem(key) ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+export function writeLocal(key, value) {
+    try {
+        const s = storage();
+        if (!s)
+            throw new Error("storage unavailable");
+        if (value === null)
+            s.removeItem(key);
+        else
+            s.setItem(key, value);
+        unsaved.delete(key);
+    }
+    catch {
+        unsaved.set(key, value);
+    }
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent(LOCAL_STORE_EVENT, { detail: key }));
+    }
+}
+export function subscribeLocal(onChange) {
+    window.addEventListener("storage", onChange);
+    window.addEventListener(LOCAL_STORE_EVENT, onChange);
+    return () => {
+        window.removeEventListener("storage", onChange);
+        window.removeEventListener(LOCAL_STORE_EVENT, onChange);
+    };
+}

package/dist/nav/Nav.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { NavActive, NavModel } from "./model.js";
+export interface NavProps {
+    /** The model, already filtered to what the viewer may open (`visibleNav`). */
+    nav: NavModel;
+    /** The row the current page belongs to (`activeFor`). */
+    active: NavActive | null;
+    /** Icons only, with each area's functions in a flyout. */
+    collapsed?: boolean;
+    /** Called when a row is followed, so a drawer holding the nav can close. */
+    onNavigate?: () => void;
+    className?: string;
+}
+/**
+ * The areas and their functions (Astrolift spec 44 §4.1). Expanded, each area
+ * is a heading that folds, over its groups and rows; a flat area (Home,
+ * Overview) is just its rows. Collapsed, each area is an icon, and hovering,
+ * focusing or pressing it opens its rows as a flyout. The current row is the
+ * one lit row: an accent tint and a 2px accent edge.
+ */
+export declare function Nav({ nav, active, collapsed, onNavigate, className }: NavProps): React.JSX.Element;

package/dist/nav/Nav.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover.js";
+import { useUI } from "../provider/UIProvider.js";
+/**
+ * The areas and their functions (Astrolift spec 44 §4.1). Expanded, each area
+ * is a heading that folds, over its groups and rows; a flat area (Home,
+ * Overview) is just its rows. Collapsed, each area is an icon, and hovering,
+ * focusing or pressing it opens its rows as a flyout. The current row is the
+ * one lit row: an accent tint and a 2px accent edge.
+ */
+export function Nav({ nav, active, collapsed = false, onNavigate, className }) {
+    return (_jsx("div", { className: cn("flex flex-col", collapsed ? "items-center gap-1" : "gap-2", className), children: nav.map((area) => collapsed ? (_jsx(CollapsedArea, { area: area, active: active, onNavigate: onNavigate }, area.key)) : (_jsx(ExpandedArea, { area: area, active: active, onNavigate: onNavigate }, area.key))) }));
+}
+function FunctionLink({ fn, isActive, onNavigate, }) {
+    const { Link } = useUI();
+    const Icon = fn.icon;
+    return (_jsxs(Link, { href: fn.href, onClick: onNavigate, "aria-current": isActive ? "page" : undefined, ...fn.attributes, className: cn("flex h-8 min-w-0 items-center gap-2 rounded-lg px-2 text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", isActive
+            ? "bg-primary/15 font-medium text-sidebar-foreground shadow-[inset_2px_0_0_var(--primary)]"
+            : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground"), children: [Icon && _jsx(Icon, { className: "size-4 shrink-0 opacity-80", "aria-hidden": true }), _jsx("span", { className: "truncate", children: fn.label })] }));
+}
+function Rows({ area, active, onNavigate, }) {
+    return (_jsx(_Fragment, { children: area.groups.map((group, i) => (_jsxs("div", { className: "flex flex-col gap-0.5", children: [group.label && (_jsx("div", { className: "px-2 pt-2 pb-1 text-2xs text-muted-foreground", children: group.label })), group.functions.map((fn) => (_jsx(FunctionLink, { fn: fn, isActive: active?.area === area.key && active.fn === fn.key, onNavigate: onNavigate }, fn.key)))] }, group.key ?? group.label ?? i))) }));
+}
+function ExpandedArea({ area, active, onNavigate, }) {
+    const [open, setOpen] = React.useState(true);
+    const regionId = React.useId();
+    if (area.flat) {
+        return (_jsx("div", { className: "flex flex-col gap-0.5", children: _jsx(Rows, { area: area, active: active, onNavigate: onNavigate }) }));
+    }
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-expanded": open, "aria-controls": regionId, className: "flex h-7 w-full items-center justify-between rounded-lg px-2 text-2xs font-semibold tracking-wider text-muted-foreground uppercase hover:text-sidebar-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: [area.label, _jsx(ChevronDownIcon, { className: cn("size-3 transition-transform", !open && "-rotate-90"), "aria-hidden": true })] }), _jsx("div", { id: regionId, hidden: !open, className: "flex flex-col gap-0.5", children: _jsx(Rows, { area: area, active: active, onNavigate: onNavigate }) })] }));
+}
+/** How long the pointer may be away from a flyout before it closes. */
+const FLYOUT_GRACE_MS = 150;
+function CollapsedArea({ area, active, onNavigate, }) {
+    const { Link } = useUI();
+    const [open, setOpen] = React.useState(false);
+    const pointerOpened = React.useRef(false);
+    const closeTimer = React.useRef(null);
+    const isActive = active?.area === area.key;
+    const Icon = area.icon;
+    const only = area.groups.length === 1 && area.groups[0]?.functions.length === 1
+        ? area.groups[0].functions[0]
+        : null;
+    React.useEffect(() => {
+        const timer = closeTimer;
+        return () => {
+            if (timer.current)
+                clearTimeout(timer.current);
+        };
+    }, []);
+    const tile = (_jsx("span", { className: cn("flex size-8 items-center justify-center rounded-lg", isActive
+            ? "bg-primary/15 text-sidebar-foreground shadow-[inset_2px_0_0_var(--primary)]"
+            : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60"), children: _jsx(Icon, { className: "size-4", "aria-hidden": true }) }));
+    // One row: the icon is that row's link, no flyout needed.
+    if (only) {
+        return (_jsx(Link, { href: only.href, onClick: onNavigate, "aria-label": area.flat ? only.label : area.label, title: area.flat ? only.label : area.label, "aria-current": isActive ? "page" : undefined, ...only.attributes, className: "flex rounded-lg focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: tile }));
+    }
+    const cancelClose = () => {
+        if (closeTimer.current)
+            clearTimeout(closeTimer.current);
+        closeTimer.current = null;
+    };
+    const scheduleClose = () => {
+        cancelClose();
+        closeTimer.current = setTimeout(() => setOpen(false), FLYOUT_GRACE_MS);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: (next) => {
+            if (!next)
+                pointerOpened.current = false;
+            setOpen(next);
+        }, children: [_jsx(PopoverTrigger, { "aria-label": area.label, title: area.label, className: "flex rounded-lg focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", onPointerEnter: (event) => {
+                    if (event.pointerType !== "mouse")
+                        return;
+                    cancelClose();
+                    pointerOpened.current = true;
+                    setOpen(true);
+                }, onPointerLeave: (event) => {
+                    if (event.pointerType === "mouse")
+                        scheduleClose();
+                }, children: tile }), _jsxs(PopoverContent, { side: "right", align: "start", className: "w-56 gap-0 p-2", 
+                // Opened by hovering: leave focus where the person is. Opened from the
+                // keyboard: move it in, to the first row.
+                onOpenAutoFocus: (event) => {
+                    if (pointerOpened.current)
+                        event.preventDefault();
+                }, onPointerEnter: cancelClose, onPointerLeave: (event) => {
+                    if (event.pointerType === "mouse")
+                        scheduleClose();
+                }, children: [_jsx("div", { className: "px-2 pb-1 text-2xs font-semibold tracking-wider text-muted-foreground uppercase", children: area.label }), _jsx(Rows, { area: area, active: active, onNavigate: () => {
+                            setOpen(false);
+                            onNavigate?.();
+                        } })] })] }));
+}

package/dist/nav/model.d.ts

@@ -0,0 +1,77 @@
+import type * as React from "react";
+/**
+ * The navigation model (Astrolift spec 44 §4.1 and §4.4; Zentinelle
+ * ui-overhaul-ia §4.1): areas, optional groups inside an area, and the
+ * functions in each group. A function is one sidebar row; its tabs, views
+ * and actions live inside its pages. Pure data plus pure functions, so the
+ * sidebar, the breadcrumb switcher and the tests read the same model, and a
+ * Server Component can compute the active row.
+ */
+/** Any icon component: lucide-react's, or an app's own SVG. */
+export type NavIcon = React.ComponentType<{
+    className?: string;
+    "aria-hidden"?: boolean;
+}>;
+export interface NavFunction {
+    key: string;
+    label: string;
+    href: string;
+    icon?: NavIcon;
+    /**
+     * Capabilities that show this row; any one of them is enough. Absent means
+     * always shown. The app decides what a capability is: Astrolift passes
+     * module keys (`me.modules.<key>.canView`), Zentinelle passes roles.
+     */
+    requires?: string | readonly string[];
+    /** Other path prefixes this row owns, for pages that sit under several routes. */
+    also?: readonly string[];
+    /** Extra attributes on the row's link, such as a tour anchor (`data-tour`). */
+    attributes?: Readonly<Record<`data-${string}`, string>>;
+}
+export interface NavGroup {
+    key?: string;
+    label?: string;
+    functions: readonly NavFunction[];
+}
+export interface NavArea {
+    key: string;
+    label: string;
+    icon: NavIcon;
+    /** Render the area's functions as top-level rows, with no area heading (Home, Overview). */
+    flat?: boolean;
+    groups: readonly NavGroup[];
+}
+export type NavModel = readonly NavArea[];
+/** The row the current page belongs to. */
+export interface NavActive {
+    area: string;
+    fn: string;
+}
+/** The model with every row the viewer may not open removed, and empty groups and areas dropped. */
+export declare function visibleNav(nav: NavModel, can: (capability: string) => boolean): NavArea[];
+/**
+ * Which area and function own `pathname`: the function whose href (or `also`
+ * prefix) is the longest prefix of it, so /agents/skills/42 is Skills, not
+ * Agents. Query strings and fragments are ignored.
+ */
+export declare function activeFor(nav: NavModel, pathname: string): NavActive | null;
+export interface CrumbSwitchOption {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+/**
+ * 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.
+ */
+export declare function areaSwitcher(nav: NavModel, area: string, activeFn: string): {
+    label: string;
+    switcher: CrumbSwitchOption[];
+};
+/**
+ * The model with every label passed through `translate`, for apps whose
+ * copy lives in a message catalog. `fallback` is the model's own label;
+ * return it when the catalog has no entry.
+ */
+export declare function localizeNav(nav: NavModel, translate: (kind: "area" | "group" | "function", key: string, fallback: string) => string): NavArea[];

package/dist/nav/model.js

@@ -0,0 +1,72 @@
+function allowed(fn, can) {
+    if (fn.requires === undefined)
+        return true;
+    const required = typeof fn.requires === "string" ? [fn.requires] : fn.requires;
+    return required.some(can);
+}
+/** The model with every row the viewer may not open removed, and empty groups and areas dropped. */
+export function visibleNav(nav, can) {
+    return nav
+        .map((area) => ({
+        ...area,
+        groups: area.groups
+            .map((group) => ({ ...group, functions: group.functions.filter((fn) => allowed(fn, can)) }))
+            .filter((group) => group.functions.length > 0),
+    }))
+        .filter((area) => area.groups.length > 0);
+}
+/**
+ * Which area and function own `pathname`: the function whose href (or `also`
+ * prefix) is the longest prefix of it, so /agents/skills/42 is Skills, not
+ * Agents. Query strings and fragments are ignored.
+ */
+export function activeFor(nav, pathname) {
+    const path = pathname.split(/[?#]/)[0] ?? pathname;
+    let best = null;
+    for (const area of nav) {
+        for (const group of area.groups) {
+            for (const fn of group.functions) {
+                for (const prefix of [fn.href, ...(fn.also ?? [])]) {
+                    const matches = path === prefix || path.startsWith(`${prefix}/`);
+                    if (matches && (!best || prefix.length > best.length)) {
+                        best = { area: area.key, fn: fn.key, length: prefix.length };
+                    }
+                }
+            }
+        }
+    }
+    return best ? { area: best.area, fn: best.fn } : null;
+}
+/**
+ * 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.
+ */
+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 }))),
+    };
+}
+/**
+ * The model with every label passed through `translate`, for apps whose
+ * copy lives in a message catalog. `fallback` is the model's own label;
+ * return it when the catalog has no entry.
+ */
+export function localizeNav(nav, translate) {
+    return nav.map((area) => ({
+        ...area,
+        label: translate("area", area.key, area.label),
+        groups: area.groups.map((group) => ({
+            ...group,
+            ...(group.label !== undefined
+                ? { label: translate("group", group.key ?? group.label, group.label) }
+                : {}),
+            functions: group.functions.map((fn) => ({
+                ...fn,
+                label: translate("function", fn.key, fn.label),
+            })),
+        })),
+    }));
+}

package/dist/overlays/ConfirmDialog.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+/** A required free-text reason, for actions the audit trail must explain. */
+export interface ConfirmReason {
+    label: React.ReactNode;
+    placeholder?: string;
+    /** Shown when the reason is empty. Defaults to "A reason is required." */
+    requiredError?: string;
+}
+export interface ConfirmDialogProps {
+    open: boolean;
+    /** Called on cancel, Escape, and after a confirmation that succeeded. Not called while one is pending. */
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    /** The blast radius: what changes, what is recoverable, who can undo it. */
+    description?: React.ReactNode;
+    confirmLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    /** The destructive treatment, for delete, revoke and abort. */
+    destructive?: boolean;
+    /** Hold the confirm button until required data is ready. */
+    confirmDisabled?: boolean;
+    /**
+     * 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.
+     */
+    onConfirm: (reason: string) => Promise<unknown> | unknown;
+    reason?: ConfirmReason;
+}
+/**
+ * The confirmation for destructive actions (Astrolift's ConfirmDialog, #2126):
+ * a themed alert dialog with a pending state and real error feedback, in
+ * 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;

package/dist/overlays/ConfirmDialog.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+import { overlayClassName } from "./Dialog.js";
+/**
+ * The confirmation for destructive actions (Astrolift's ConfirmDialog, #2126):
+ * a themed alert dialog with a pending state and real error feedback, in
+ * 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, }) {
+    const { messages } = useUI();
+    const t = messages.confirm;
+    const [pending, setPending] = React.useState(false);
+    const [draft, setDraft] = React.useState("");
+    const [error, setError] = React.useState(null);
+    const reasonId = React.useId();
+    const errorId = `${reasonId}-error`;
+    // Cleared on every close, so the next open never shows a cancelled attempt.
+    function close() {
+        setDraft("");
+        setError(null);
+        onOpenChange(false);
+    }
+    async function confirm(event) {
+        // Radix closes on Action by default; hold it open while the action runs.
+        event.preventDefault();
+        if (pending || confirmDisabled)
+            return;
+        const trimmed = draft.trim();
+        if (reason && !trimmed) {
+            setError(reason.requiredError ?? t.reasonRequired);
+            return;
+        }
+        setError(null);
+        setPending(true);
+        try {
+            const result = await onConfirm(trimmed);
+            if (result !== false)
+                close();
+        }
+        catch (err) {
+            setError(err instanceof Error && err.message
+                ? err.message
+                : typeof err === "string" && err
+                    ? err
+                    : t.failed);
+        }
+        finally {
+            setPending(false);
+        }
+    }
+    return (_jsx(AlertDialogPrimitive.Root, { open: open, onOpenChange: (next) => {
+            // A stray Escape must not abandon a request in flight.
+            if (pending && !next)
+                return;
+            if (next)
+                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) => {
+                                        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) }) })] })] })] }) }));
+}

package/dist/overlays/Dialog.d.ts

@@ -0,0 +1,18 @@
+import { Dialog as DialogPrimitive } from "radix-ui";
+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. */
+export declare function overlayClassName(className?: string): string;
+/**
+ * A centred modal on the raised surface. Focus moves in on open and back to
+ * the trigger on close (Radix); Escape and the scrim close it.
+ */
+export declare function DialogContent({ className, children, hideCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    hideCloseButton?: boolean;
+}): React.JSX.Element;
+export declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+export declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;

package/dist/overlays/Dialog.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+export function Dialog(props) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+export function DialogTrigger(props) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+export function DialogClose(props) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+/** The scrim behind a modal; shared with Drawer. */
+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);
+}
+/**
+ * A centred modal on the raised surface. Focus moves in on open and back to
+ * the trigger on close (Radix); Escape and the scrim close it.
+ */
+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 }) }))] })] }));
+}
+export function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-1.5 pr-6", 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 }));
+}
+export function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("font-head text-lg font-semibold [overflow-wrap:anywhere]", className), ...props }));
+}
+export function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-sm [overflow-wrap:anywhere] text-muted-foreground", className), ...props }));
+}

package/dist/overlays/Drawer.d.ts

@@ -0,0 +1,24 @@
+import { Dialog as DrawerPrimitive } from "radix-ui";
+import type * as React from "react";
+export declare function Drawer(props: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
+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";
+};
+/**
+ * A modal panel from an edge: secondary content that should not cost a page
+ * (a detail sheet, a filter set), and the shell's rails on narrow screens.
+ * The Astrolift UI calls it a sheet.
+ */
+export declare function DrawerContent({ className, children, side, hideCloseButton, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+    side?: keyof typeof SIDE;
+    hideCloseButton?: boolean;
+}): React.JSX.Element;
+export declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): React.JSX.Element;
+export declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): React.JSX.Element;
+export {};