@calliopelabs/ui 0.0.0-stage → 0.3.1

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 {};

package/dist/overlays/Drawer.js

@@ -0,0 +1,42 @@
+"use client";
+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 { useUI } from "../provider/UIProvider.js";
+import { overlayClassName } from "./Dialog.js";
+export function Drawer(props) {
+    return _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+export function DrawerTrigger(props) {
+    return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+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",
+};
+/**
+ * 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 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 }) }))] })] }));
+}
+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 }));
+}
+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 }));
+}
+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/Breadcrumbs.d.ts

@@ -0,0 +1,20 @@
+import type { CrumbSwitchOption } from "../nav/model.js";
+export interface Crumb {
+    label: string;
+    /** Absent on the last crumb, the page itself. */
+    href?: string;
+    /** The sideways move: the area's other functions (`areaSwitcher`), or the person's projects. */
+    switcher?: readonly CrumbSwitchOption[];
+}
+export interface BreadcrumbsProps {
+    crumbs: readonly Crumb[];
+    /** The landmark's name. Defaults to "Breadcrumb". */
+    label?: string;
+    className?: string;
+}
+/**
+ * Where the page sits. Crumbs come from the navigation model, never from
+ * path segments (a segment is not always a page). The first crumb usually
+ * switches between the area's functions.
+ */
+export declare function Breadcrumbs({ crumbs, label, className }: BreadcrumbsProps): import("react").JSX.Element;

package/dist/page/Breadcrumbs.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../primitives/DropdownMenu.js";
+import { useUI } from "../provider/UIProvider.js";
+/**
+ * Where the page sits. Crumbs come from the navigation model, never from
+ * path segments (a segment is not always a page). The first crumb usually
+ * switches between the area's functions.
+ */
+export function Breadcrumbs({ crumbs, label, className }) {
+    const { messages } = useUI();
+    return (_jsx("nav", { "aria-label": label ?? messages.breadcrumb.label, className: cn("min-w-0", className), children: _jsx("ol", { className: "flex min-w-0 flex-wrap items-center gap-1.5 text-sm text-muted-foreground", children: crumbs.map((crumb, i) => (_jsxs("li", { className: "flex min-w-0 items-center gap-1.5", children: [i > 0 && (_jsx("span", { "aria-hidden": true, className: "text-muted-foreground/60", children: "\u203A" })), _jsx(CrumbItem, { crumb: crumb, isLast: i === crumbs.length - 1 })] }, `${crumb.label}-${i}`))) }) }));
+}
+function CrumbItem({ crumb, isLast }) {
+    const { Link, messages } = useUI();
+    if (crumb.switcher && crumb.switcher.length > 0) {
+        return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { "aria-label": messages.breadcrumb.switchFrom(crumb.label), className: "inline-flex min-w-0 items-center gap-1 rounded-lg hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: [_jsx("span", { className: "truncate", children: crumb.label }), _jsx(ChevronDownIcon, { className: "size-3.5 shrink-0", "aria-hidden": true })] }), _jsx(DropdownMenuContent, { className: "min-w-48", children: crumb.switcher.map((option) => (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(Link, { href: option.href, "aria-current": option.active ? "page" : undefined, children: [_jsx(CheckIcon, { className: cn("size-3.5", !option.active && "invisible"), "aria-hidden": true }), option.label] }) }, option.href))) })] }));
+    }
+    if (isLast || !crumb.href) {
+        return (_jsx("span", { "aria-current": isLast ? "page" : undefined, className: cn("min-w-0 truncate", isLast && "text-foreground"), children: crumb.label }));
+    }
+    return (_jsx(Link, { href: crumb.href, className: "min-w-0 truncate rounded-lg hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: crumb.label }));
+}

package/dist/page/PageFrame.d.ts

@@ -0,0 +1,17 @@
+import type * as React from "react";
+import { type PageHeaderProps } from "./PageHeader.js";
+export interface PageFrameProps extends PageHeaderProps {
+    /** The filter bar, under the header: search, filter selects, the list's actions. */
+    filters?: React.ReactNode;
+    /** A notice the reader must see before the body (a one-time reveal). Not a second list. */
+    notice?: React.ReactNode;
+    children: React.ReactNode;
+}
+/**
+ * A page: its header (breadcrumb, title, actions, tabs), an optional filter
+ * bar and notice, then the body. The body is made of Sections holding Cards,
+ * tables or charts, two container levels at most (Astrolift's container
+ * rule). A page fits about two screens; more becomes a tab, a section that
+ * loads when opened, or a drawer.
+ */
+export declare function PageFrame({ filters, notice, children, className, ...header }: PageFrameProps): React.JSX.Element;

package/dist/page/PageFrame.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { PageHeader } from "./PageHeader.js";
+/**
+ * A page: its header (breadcrumb, title, actions, tabs), an optional filter
+ * bar and notice, then the body. The body is made of Sections holding Cards,
+ * tables or charts, two container levels at most (Astrolift's container
+ * rule). A page fits about two screens; more becomes a tab, a section that
+ * loads when opened, or a drawer.
+ */
+export function PageFrame({ filters, notice, children, className, ...header }) {
+    return (_jsxs("div", { "data-slot": "page-frame", className: cn("flex min-w-0 flex-1 flex-col gap-4", className), children: [_jsx(PageHeader, { ...header }), notice, filters && (_jsx("div", { "data-slot": "page-filters", className: "flex min-w-0 flex-wrap items-center gap-2", children: filters })), _jsx("div", { className: "flex min-w-0 flex-col gap-6", children: children })] }));
+}

package/dist/page/PageHeader.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import { type Crumb } from "./Breadcrumbs.js";
+import { type TabNavItem } from "./TabNav.js";
+export interface PageHeaderProps {
+    crumbs?: readonly Crumb[];
+    title: React.ReactNode;
+    /** A status badge beside the title. */
+    status?: React.ReactNode;
+    /** One line of context beside the title: environment, region, model. */
+    context?: React.ReactNode;
+    /** Supporting copy under the title row. */
+    description?: React.ReactNode;
+    /** The page's one primary action. */
+    primaryAction?: React.ReactNode;
+    /** The `⋯` menu, beside the primary action. */
+    menu?: React.ReactNode;
+    /** At most one row of tabs: the views of a list, or an entity's own tabs. */
+    tabs?: readonly TabNavItem[];
+    /** Names the tab row. Defaults to "Page". */
+    tabsLabel?: string;
+    className?: string;
+}
+/**
+ * Every page's header, in three rows (Astrolift spec 44 §4.4): the
+ * 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;

package/dist/page/PageHeader.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+import { TabNav } from "./TabNav.js";
+/**
+ * Every page's header, in three rows (Astrolift spec 44 §4.4): the
+ * 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" }))] }));
+}

package/dist/page/Section.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+export interface SectionProps extends Omit<React.ComponentProps<"section">, "title"> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Actions beside the title. */
+    action?: React.ReactNode;
+    /** A hairline under the heading; spacing alone by default. */
+    divided?: boolean;
+    /** For the document outline. Defaults to h2. */
+    headingLevel?: "h2" | "h3";
+    children: React.ReactNode;
+}
+/**
+ * A page region, expressed as a heading rather than a border: the top level
+ * of `PageFrame > Section > (Card | table | chart)`. Never wrap a bordered box
+ * around another, and never put a Section inside a Card.
+ */
+export declare function Section({ title, description, action, divided, headingLevel, className, children, ...props }: SectionProps): React.JSX.Element;

package/dist/page/Section.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/**
+ * A page region, expressed as a heading rather than a border: the top level
+ * of `PageFrame > Section > (Card | table | chart)`. Never wrap a bordered box
+ * around another, and never put a Section inside a Card.
+ */
+export function Section({ title, description, action, divided = false, headingLevel = "h2", className, children, ...props }) {
+    const Heading = headingLevel;
+    const hasHeader = Boolean(title || description || action);
+    return (_jsxs("section", { "data-slot": "section", className: cn("flex min-w-0 flex-col gap-4", className), ...props, children: [hasHeader && (_jsxs("div", { className: cn("flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between", divided && "border-b pb-3"), children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [title && _jsx(Heading, { className: "text-base font-semibold tracking-tight", children: title }), description && _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), action && _jsx("div", { className: "flex flex-wrap items-center gap-2", children: action })] })), children] }));
+}

package/dist/page/TabNav.d.ts

@@ -0,0 +1,19 @@
+export interface TabNavItem {
+    key: string;
+    label: string;
+    href: string;
+    active: boolean;
+}
+export interface TabNavProps {
+    tabs: readonly TabNavItem[];
+    /** The landmark's name ("Agent", "Views"). */
+    label: string;
+    className?: string;
+}
+/**
+ * Tabs that are pages: an entity's Overview, Activity, Settings; a list's
+ * views. Links, so each can be opened in a new tab and shared; the current
+ * one carries `aria-current="page"`. One row at most per page, named by
+ * function. On a narrow screen the row scrolls sideways under an edge fade.
+ */
+export declare function TabNav({ tabs, label, className }: TabNavProps): import("react").JSX.Element;

package/dist/page/TabNav.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+/**
+ * Tabs that are pages: an entity's Overview, Activity, Settings; a list's
+ * views. Links, so each can be opened in a new tab and shared; the current
+ * one carries `aria-current="page"`. One row at most per page, named by
+ * function. On a narrow screen the row scrolls sideways under an edge fade.
+ */
+export function TabNav({ tabs, label, className }) {
+    const { Link } = useUI();
+    return (_jsx("nav", { "aria-label": label, className: cn("flex min-w-0 [scrollbar-width:none] gap-1 overflow-x-auto border-b border-border [mask-image:linear-gradient(to_right,transparent_0,black_1.5rem,black_calc(100%-3rem),transparent_100%)] px-3 md:px-6", className), children: tabs.map((tab) => (_jsxs(Link, { href: tab.href, "aria-current": tab.active ? "page" : undefined, className: cn("relative shrink-0 rounded-lg px-3 py-2.5 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", tab.active
+                ? "font-medium text-foreground"
+                : "text-muted-foreground hover:text-foreground"), children: [tab.label, tab.active && (_jsx("span", { "aria-hidden": true, className: "absolute inset-x-1 -bottom-px h-0.5 rounded-full bg-primary" }))] }, tab.key))) }));
+}

package/dist/primitives/Button.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+/**
+ * Astrolift's button (shadcn), on the family tokens. Every size takes the
+ * corners setting (`rounded-lg` is `--radius`), so a 0px or 10px choice
+ * reaches buttons as it reaches panels.
+ */
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+    /** Render the child (a link, usually) with the button's styling instead of a <button>. */
+    asChild?: boolean;
+}
+export declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): React.JSX.Element;

package/dist/primitives/Button.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/**
+ * Astrolift's button (shadcn), on the family tokens. Every size takes the
+ * 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", {
+    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",
+            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",
+            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",
+        },
+        size: {
+            default: "h-8 gap-1.5 px-2.5",
+            xs: "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-7 gap-1 px-2.5 text-[0.8rem] [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-9 gap-1.5 px-3",
+            icon: "size-8",
+            "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-7",
+            "icon-lg": "size-9",
+        },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+});
+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 }));
+}

package/dist/primitives/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import type * as React from "react";
+/**
+ * The selection box for data surfaces. Radix rather than a native input:
+ * `indeterminate` has no HTML attribute, so the header's "some selected"
+ * state cannot be expressed in JSX on a native box.
+ */
+export declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;

package/dist/primitives/Checkbox.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/**
+ * The selection box for data surfaces. Radix rather than a native input:
+ * `indeterminate` has no HTML attribute, so the header's "some selected"
+ * 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 })) }) }));
+}

package/dist/primitives/DropdownMenu.d.ts

@@ -0,0 +1,11 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type * as React from "react";
+export declare function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+export declare function DropdownMenuTrigger(props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+export declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+export declare function DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+export declare function DropdownMenuItem({ className, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    variant?: "default" | "destructive";
+}): 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;