@calliopelabs/ui 0.0.0-stage → 0.3.1

package/dist/shell/RailTree.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import type { NavIcon } from "../nav/model.js";
+import type { StatusTone } from "../status/tones.js";
+export interface RailTreeItem {
+    key: string;
+    label: string;
+    href: string;
+    icon?: NavIcon;
+    status?: StatusTone;
+    /** Read with the status dot, which carries no text of its own ("failing"). */
+    statusLabel?: string;
+}
+export interface RailTreeGroup {
+    key: string;
+    label: string;
+    items: readonly RailTreeItem[];
+}
+export interface RailTreeProps {
+    /** The tree's heading ("My projects"). */
+    label: string;
+    groups: readonly RailTreeGroup[];
+    /** The page on screen: its row is lit and its group opens. */
+    activeHref?: string;
+    loading?: boolean;
+    /** Shown when there are no groups. */
+    emptyText: string;
+    className?: string;
+}
+/**
+ * A tree of linked groups for a rail: Astrolift's projects and the apps,
+ * agents and workflows in each. It navigates; it never filters the lists on
+ * the page. Each group shows its count and folds; the group holding the
+ * current page starts open.
+ */
+export declare function RailTree({ label, groups, activeHref, loading, emptyText, className, }: RailTreeProps): React.JSX.Element;

package/dist/shell/RailTree.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Skeleton } from "../primitives/Skeleton.js";
+import { useUI } from "../provider/UIProvider.js";
+import { StatusDot } from "../status/StatusDot.js";
+/**
+ * A tree of linked groups for a rail: Astrolift's projects and the apps,
+ * agents and workflows in each. It navigates; it never filters the lists on
+ * the page. Each group shows its count and folds; the group holding the
+ * current page starts open.
+ */
+export function RailTree({ label, groups, activeHref, loading = false, emptyText, className, }) {
+    const headingId = React.useId();
+    return (_jsxs("div", { className: cn("flex min-w-0 flex-col", className), children: [_jsx("div", { id: headingId, className: "px-3 pt-3 pb-1 text-2xs font-semibold tracking-wider text-muted-foreground uppercase", children: label }), _jsx("div", { className: "px-2 pb-2", children: loading ? (_jsx("div", { className: "flex flex-col gap-2 px-1 pt-1", "aria-busy": true, children: Array.from({ length: 4 }, (_, i) => (_jsx(Skeleton, { className: "h-6 w-full" }, i))) })) : groups.length === 0 ? (_jsx("p", { className: "px-2 py-2 text-xs text-muted-foreground", children: emptyText })) : (_jsx("ul", { "aria-labelledby": headingId, className: "flex flex-col gap-0.5", children: groups.map((group) => (_jsx(Branch, { group: group, activeHref: activeHref }, group.key))) })) })] }));
+}
+function Branch({ group, activeHref }) {
+    const { Link } = useUI();
+    const holdsActive = group.items.some((item) => item.href === activeHref);
+    const [open, setOpen] = React.useState(holdsActive);
+    const listId = React.useId();
+    const Chevron = open ? ChevronDownIcon : ChevronRightIcon;
+    return (_jsxs("li", { children: [_jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-expanded": open, "aria-controls": listId, className: "flex h-7 w-full min-w-0 items-center gap-1.5 rounded-lg px-1.5 text-left text-sm hover:bg-sidebar-accent/60 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: [_jsx(Chevron, { className: "size-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx("span", { className: "truncate font-medium", title: group.label, children: group.label }), " ", _jsx("span", { className: "ml-auto font-mono text-2xs text-muted-foreground", children: group.items.length })] }), _jsx("ul", { id: listId, hidden: !open, className: "ml-3 flex flex-col gap-0.5 border-l border-current/10 pl-2", children: group.items.map((item) => {
+                    const Icon = item.icon;
+                    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));
+                }) })] }));
+}

package/dist/shell/Sidebar.d.ts

@@ -0,0 +1,26 @@
+import type * as React from "react";
+import type { NavActive, NavModel } from "../nav/model.js";
+export interface SidebarProps {
+    /** The model, filtered to what the viewer may open (`visibleNav`). */
+    nav: NavModel;
+    /** The current row (`activeFor(nav, pathname)`). */
+    active: NavActive | null;
+    collapsed: boolean;
+    onCollapsedChange: (collapsed: boolean) => void;
+    /** Above the areas: the brand mark. */
+    header?: React.ReactNode;
+    /** The mark alone, for the collapsed rail; nothing when absent (a name cut to one letter reads as a bug). */
+    headerCollapsed?: React.ReactNode;
+    /** Below the areas: the user menu, notifications, help. Hidden while collapsed. */
+    footer?: React.ReactNode;
+    /** The navigation landmark's name. Defaults to "Main". */
+    label?: string;
+    className?: string;
+}
+/**
+ * The main rail, on the left (Astrolift layout D): the one brand surface.
+ * 220px with labels, 48px with icons. Pure: the filtered model, the active
+ * row and the collapsed state are the caller's; `[` toggles it through the
+ * AppShell.
+ */
+export declare function Sidebar({ nav, active, collapsed: collapsedProp, onCollapsedChange, header, headerCollapsed, footer, label, className, }: SidebarProps): React.JSX.Element;

package/dist/shell/Sidebar.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Nav } from "../nav/Nav.js";
+import { useUI } from "../provider/UIProvider.js";
+import { useRailPlacement } from "./placement.js";
+/**
+ * The main rail, on the left (Astrolift layout D): the one brand surface.
+ * 220px with labels, 48px with icons. Pure: the filtered model, the active
+ * row and the collapsed state are the caller's; `[` toggles it through the
+ * AppShell.
+ */
+export function Sidebar({ nav, active, collapsed: collapsedProp, onCollapsedChange, header, headerCollapsed, footer, label, className, }) {
+    const { messages } = useUI();
+    const inDrawer = useRailPlacement() === "drawer";
+    const collapsed = collapsedProp && !inDrawer;
+    return (_jsxs("div", { "data-slot": "sidebar", "data-collapsed": collapsed || undefined, className: cn("flex h-full min-h-0 shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground", inDrawer ? "w-full border-r-0" : "transition-[width] duration-(--motion-base)", !inDrawer && (collapsed ? "w-12" : "w-55"), className), children: [collapsed
+                ? headerCollapsed && _jsx("div", { className: "flex justify-center py-3", children: headerCollapsed })
+                : header && _jsx("div", { className: "flex min-w-0 items-center px-3 py-3", children: header }), _jsx("nav", { "aria-label": label ?? messages.nav.label, className: "min-h-0 flex-1 overflow-y-auto px-2 py-1", children: _jsx(Nav, { nav: nav, active: active, collapsed: collapsed }) }), (footer || !inDrawer) && (_jsxs("div", { className: "flex flex-col gap-1 border-t border-sidebar-border px-2 py-2", children: [!collapsed && footer, !inDrawer && (_jsx("button", { type: "button", onClick: () => onCollapsedChange(!collapsed), "aria-label": collapsed ? messages.nav.expand : messages.nav.collapse, title: collapsed ? messages.nav.expandTitle : messages.nav.collapseTitle, className: "flex h-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: collapsed ? (_jsx(ChevronsRightIcon, { className: "size-4", "aria-hidden": true })) : (_jsx(ChevronsLeftIcon, { className: "size-4", "aria-hidden": true })) }))] }))] }));
+}

package/dist/shell/UserMenu.d.ts

@@ -0,0 +1,22 @@
+import type * as React from "react";
+import type { NavIcon } from "../nav/model.js";
+export interface UserMenuItem {
+    label: string;
+    icon?: NavIcon;
+    /** A page: every item is a link unless it acts in place. */
+    href?: string;
+    /** An action in place (open the appearance picker, say) when there is no page. */
+    onSelect?: () => void;
+}
+export interface UserMenuProps {
+    name: string;
+    email: string;
+    /** Groups of items, separated by rules: account pages, then help. */
+    groups?: readonly (readonly UserMenuItem[])[];
+    onSignOut: () => void;
+    /** The avatar alone, for a collapsed rail. */
+    collapsed?: boolean;
+    className?: string;
+}
+/** The signed-in person's menu, at the foot of the sidebar. Pure: the person, the items and sign-out are the app's. */
+export declare function UserMenu({ name, email, groups, onSignOut, collapsed, className, }: UserMenuProps): React.JSX.Element;

package/dist/shell/UserMenu.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LogOutIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../primitives/DropdownMenu.js";
+import { useUI } from "../provider/UIProvider.js";
+function initialsOf(name) {
+    return (name
+        .split(/\s+/)
+        .map((part) => part[0])
+        .filter(Boolean)
+        .slice(0, 2)
+        .join("")
+        .toUpperCase() || "?");
+}
+/** The signed-in person's menu, at the foot of the sidebar. Pure: the person, the items and sign-out are the app's. */
+export function UserMenu({ name, email, groups = [], onSignOut, collapsed = false, className, }) {
+    const { Link, messages } = useUI();
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger
+            // Expanded, the visible name and email are the trigger's name (WCAG
+            // 2.5.3, label in name); collapsed, only the initials show, so it
+            // needs one.
+            , { "aria-label": collapsed ? messages.user.accountMenu(name, initialsOf(name)) : undefined, className: cn("flex h-10 w-full min-w-0 items-center gap-2 rounded-lg px-1.5 text-left hover:bg-sidebar-accent/60 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", collapsed && "justify-center px-0", className), children: [_jsx("span", { "aria-hidden": true, className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-muted font-mono text-xs font-medium text-foreground", children: initialsOf(name) }), !collapsed && (_jsxs("span", { className: "grid min-w-0 flex-1 leading-tight", children: [_jsx("span", { className: "truncate text-sm font-medium", children: name }), " ", _jsx("span", { className: "truncate text-xs text-muted-foreground", children: email })] }))] }), _jsxs(DropdownMenuContent, { side: "right", align: "end", className: "min-w-56", children: [_jsxs(DropdownMenuLabel, { className: "grid font-normal", children: [_jsx("span", { className: "truncate text-sm font-medium text-popover-foreground", children: name }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: email })] }), groups.map((items, i) => (_jsx(MenuGroup, { items: items, Link: Link }, i))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: onSignOut, children: [_jsx(LogOutIcon, { "aria-hidden": true }), " ", messages.user.signOut] })] })] }));
+}
+function MenuGroup({ items, Link, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: items.map((item) => {
+                    const Icon = item.icon;
+                    const content = (_jsxs(_Fragment, { children: [Icon && _jsx(Icon, { "aria-hidden": true }), " ", item.label] }));
+                    return item.href ? (_jsx(DropdownMenuItem, { asChild: true, children: _jsx(Link, { href: item.href, children: content }) }, item.label)) : (_jsx(DropdownMenuItem, { onSelect: item.onSelect, children: content }, item.label));
+                }) })] }));
+}

package/dist/shell/placement.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+/**
+ * Where a rail is drawn: inline beside the content, or inside the drawer the
+ * shell opens on narrow screens. In a drawer a rail fills it, ignores its
+ * collapsed state and width, and hides the controls that only make sense
+ * beside the content.
+ */
+export type RailPlacement = "inline" | "drawer";
+export declare const RailPlacementContext: React.Context<RailPlacement>;
+export declare function useRailPlacement(): RailPlacement;

package/dist/shell/placement.js

@@ -0,0 +1,6 @@
+"use client";
+import * as React from "react";
+export const RailPlacementContext = React.createContext("inline");
+export function useRailPlacement() {
+    return React.useContext(RailPlacementContext);
+}

package/dist/shell/rail-state.d.ts

@@ -0,0 +1,13 @@
+/**
+ * One rail's collapsed state, remembered per person in this browser.
+ * `defaultCollapsed` applies until they choose: Astrolift's projects rail
+ * passes "narrower than 1280px". The server renders the rail expanded and the
+ * client applies the saved choice without a hydration mismatch; a change in
+ * one tab reaches the others.
+ */
+export declare function useRailState(storageKey: string, defaultCollapsed?: () => boolean): readonly [boolean, (collapsed: boolean) => void];
+/** A resizable rail's width in px, remembered like its collapsed state and held to its range. */
+export declare function useRailWidth(storageKey: string, defaultWidth: number, range: {
+    min: number;
+    max: number;
+}): readonly [number, (width: number) => void];

package/dist/shell/rail-state.js

@@ -0,0 +1,28 @@
+"use client";
+import * as React from "react";
+import { readLocal, subscribeLocal, writeLocal } from "../lib/local-store.js";
+/**
+ * One rail's collapsed state, remembered per person in this browser.
+ * `defaultCollapsed` applies until they choose: Astrolift's projects rail
+ * passes "narrower than 1280px". The server renders the rail expanded and the
+ * client applies the saved choice without a hydration mismatch; a change in
+ * one tab reaches the others.
+ */
+export function useRailState(storageKey, defaultCollapsed = () => false) {
+    const collapsed = React.useSyncExternalStore(subscribeLocal, () => {
+        const saved = readLocal(storageKey);
+        return saved === "1" ? true : saved === "0" ? false : defaultCollapsed();
+    }, () => false);
+    const set = React.useCallback((next) => writeLocal(storageKey, next ? "1" : "0"), [storageKey]);
+    return [collapsed, set];
+}
+/** A resizable rail's width in px, remembered like its collapsed state and held to its range. */
+export function useRailWidth(storageKey, defaultWidth, range) {
+    const { min, max } = range;
+    const width = React.useSyncExternalStore(subscribeLocal, () => {
+        const saved = Number(readLocal(storageKey));
+        return Number.isFinite(saved) && saved >= min && saved <= max ? saved : defaultWidth;
+    }, () => defaultWidth);
+    const set = React.useCallback((next) => writeLocal(storageKey, String(Math.round(Math.min(max, Math.max(min, next))))), [storageKey, min, max]);
+    return [width, set];
+}

package/dist/states/EmptyState.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+export interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: React.ReactNode;
+    /** The create action: a link, so it can open in a new tab. */
+    actionHref?: string;
+    actionLabel?: string;
+    /**
+     * Context help, low-prominence beneath the description (Astrolift #356).
+     * External URLs open in a new tab; app paths go through the app's link.
+     */
+    learnMoreHref?: string;
+    learnMoreLabel?: string;
+    /** Anything else: a secondary action, a button with a handler. */
+    secondary?: React.ReactNode;
+    className?: string;
+}
+/** Nothing to show yet, with the way to change that. "No matches" is a different state; see DataTable. */
+export declare function EmptyState({ icon, title, description, actionHref, actionLabel, learnMoreHref, learnMoreLabel, secondary, className, }: EmptyStateProps): React.JSX.Element;

package/dist/states/EmptyState.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLinkIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+/** Nothing to show yet, with the way to change that. "No matches" is a different state; see DataTable. */
+export function EmptyState({ icon, title, description, actionHref, actionLabel, learnMoreHref, learnMoreLabel, secondary, className, }) {
+    const { Link, messages } = useUI();
+    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 &&
+                        (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/states/ErrorState.d.ts

@@ -0,0 +1,23 @@
+export interface ErrorStateProps {
+    /** What failed ("Could not load runs"). Defaults to "Something went wrong". */
+    title?: string;
+    /** The error, or its message. Without one, a generic line. */
+    error?: string | {
+        message: string;
+    } | null;
+    onRetry?: () => void;
+    retryLabel?: string;
+    /**
+     * `inline` is a callout inside a page, for one query that failed. `page` is
+     * the whole surface, for an error boundary: centred, with the digest a
+     * report can be traced by, and a way out when retrying fails the same way.
+     */
+    variant?: "inline" | "page";
+    /** The server's error digest, shown on the page variant. */
+    digest?: string;
+    /** A known-good page to escape to, on the page variant. */
+    homeHref?: string;
+    homeLabel?: string;
+    className?: string;
+}
+export declare function ErrorState({ title, error, onRetry, retryLabel, variant, digest, homeHref, homeLabel, className, }: ErrorStateProps): import("react").JSX.Element;

package/dist/states/ErrorState.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlertIcon, TriangleAlertIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+export function ErrorState({ title, error, onRetry, retryLabel, variant = "inline", digest, homeHref, homeLabel, className, }) {
+    const { Link, messages } = useUI();
+    const message = (typeof error === "string" ? error : error?.message) || messages.states.unexpected;
+    const heading = title ?? messages.states.errorTitle;
+    const retry = onRetry && (_jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: onRetry, children: retryLabel ?? messages.states.retry }));
+    if (variant === "page") {
+        return (_jsxs("div", { role: "alert", "data-slot": "error-state", className: cn("flex flex-1 flex-col items-center justify-center gap-4 p-6 text-center", className), children: [_jsx("div", { "aria-hidden": true, className: "rounded-full bg-danger-bg p-4 text-danger", children: _jsx(CircleAlertIcon, { className: "size-8" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), _jsx("p", { className: "mt-1 max-w-sm text-sm [overflow-wrap:anywhere] text-muted-foreground", children: message }), digest && (_jsx("p", { className: "mt-2 font-mono text-xs text-muted-foreground", children: messages.states.errorId(digest) }))] }), (retry || homeHref) && (_jsxs("div", { className: "flex items-center gap-2", children: [retry, homeHref && homeLabel && (_jsx(Button, { asChild: true, size: "sm", variant: "ghost", children: _jsx(Link, { href: homeHref, children: homeLabel }) }))] }))] }));
+    }
+    return (_jsxs("div", { role: "alert", "data-slot": "error-state", className: cn("flex min-w-0 flex-col gap-3 rounded-lg border border-danger-border bg-danger/5 p-4", className), children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(TriangleAlertIcon, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-danger" }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-danger-fg", children: heading }), _jsx("p", { className: "mt-1 text-xs [overflow-wrap:anywhere] text-muted-foreground", children: message })] })] }), retry && _jsx("div", { children: retry })] }));
+}

package/dist/states/LoadingState.d.ts

@@ -0,0 +1,14 @@
+export interface LoadingStateProps {
+    /** Announced to screen readers ("Loading runs"). Defaults to "Loading". */
+    label?: string;
+    /**
+     * `rows` stands in for a list: hairline rows in one panel. `page` stands in
+     * for a whole route: a row of stat tiles over two panels. Tables draw their
+     * own skeleton rows inside the real table, sized from the columns.
+     */
+    variant?: "rows" | "page";
+    rows?: number;
+    className?: string;
+}
+/** The loading placeholder: the geometry of what is coming, so nothing jumps when it lands. */
+export declare function LoadingState({ label, variant, rows, className }: LoadingStateProps): import("react").JSX.Element;

package/dist/states/LoadingState.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 { Skeleton } from "../primitives/Skeleton.js";
+import { useUI } from "../provider/UIProvider.js";
+/** The loading placeholder: the geometry of what is coming, so nothing jumps when it lands. */
+export function LoadingState({ label, variant = "rows", rows = 5, className }) {
+    const { messages } = useUI();
+    const status = (_jsx("p", { role: "status", className: "sr-only", children: label ?? messages.states.loading }));
+    if (variant === "page") {
+        return (_jsxs("div", { "data-slot": "loading-state", "aria-busy": true, className: cn("flex min-w-0 flex-1 flex-col gap-6", className), children: [status, _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: Array.from({ length: 4 }, (_, i) => (_jsxs("div", { className: "flex flex-col gap-3 rounded-lg border bg-card p-4", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-8 w-32" })] }, i))) }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-3 rounded-lg border bg-card p-4 lg:col-span-2", children: [_jsx(Skeleton, { className: "h-5 w-32" }), _jsx(Skeleton, { className: "h-60 w-full" })] }), _jsxs("div", { className: "flex flex-col gap-3 rounded-lg border bg-card p-4", children: [_jsx(Skeleton, { className: "h-5 w-28" }), _jsx(Skeleton, { className: "h-60 w-full" })] })] })] }));
+    }
+    return (_jsxs("div", { "data-slot": "loading-state", "aria-busy": true, className: cn("min-w-0 overflow-hidden rounded-lg border", className), children: [status, Array.from({ length: rows }, (_, i) => (_jsxs("div", { className: "flex items-center gap-3 border-b px-(--row-pad-x) py-(--row-pad-y) last:border-b-0", children: [_jsx(Skeleton, { className: "size-4 shrink-0" }), _jsx(Skeleton, { className: "h-4 flex-1" }), _jsx(Skeleton, { className: "h-4 w-20 shrink-0" })] }, i)))] }));
+}

package/dist/status/StatusBadge.d.ts

@@ -0,0 +1,19 @@
+import type * as React from "react";
+import { type StatusTone } from "./tones.js";
+export interface StatusBadgeProps extends Omit<React.ComponentProps<"span">, "children"> {
+    tone: StatusTone;
+    /** The status in words ("running", "failed"). Colour is never the only carrier. */
+    children: React.ReactNode;
+    /** In flight (deploying, running): the dot pulses; the label holds still, so it stays readable. */
+    pulse?: boolean;
+    /** Strike the label through, for superseded states. */
+    struck?: boolean;
+}
+/**
+ * A status pill: mono label, tinted fill, glowing dot (the admin badge
+ * recipe). Apps map their own states onto the five tones, once, in a table:
+ *
+ *   const DEPLOYMENT_TONE = { running: "ok", failed: "error", deploying: "info", ... };
+ *   <StatusBadge tone={DEPLOYMENT_TONE[d.status]} pulse={d.status === "deploying"}>{label}</StatusBadge>
+ */
+export declare function StatusBadge({ tone, children, pulse, struck, className, ...props }: StatusBadgeProps): React.JSX.Element;

package/dist/status/StatusBadge.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { IN_FLIGHT, PILL_TONE } from "./tones.js";
+/**
+ * A status pill: mono label, tinted fill, glowing dot (the admin badge
+ * recipe). Apps map their own states onto the five tones, once, in a table:
+ *
+ *   const DEPLOYMENT_TONE = { running: "ok", failed: "error", deploying: "info", ... };
+ *   <StatusBadge tone={DEPLOYMENT_TONE[d.status]} pulse={d.status === "deploying"}>{label}</StatusBadge>
+ */
+export function StatusBadge({ tone, children, pulse = false, struck = false, className, ...props }) {
+    return (_jsxs("span", { "data-slot": "status-badge", "data-tone": tone, className: cn("inline-flex h-5 w-fit shrink-0 items-center gap-1.5 overflow-hidden rounded-full border px-2 font-mono text-xs font-semibold whitespace-nowrap", PILL_TONE[tone], className), ...props, children: [_jsx("span", { "aria-hidden": true, className: cn("size-1.5 shrink-0 rounded-full bg-current shadow-[0_0_8px_currentColor]", pulse && IN_FLIGHT) }), _jsx("span", { className: cn("truncate", struck && "line-through"), children: children })] }));
+}

package/dist/status/StatusDot.d.ts

@@ -0,0 +1,14 @@
+import { type StatusTone } from "./tones.js";
+export interface StatusDotProps {
+    tone: StatusTone;
+    /** In flight (deploying, running): the dot pulses. */
+    pulse?: boolean;
+    /**
+     * Read by screen readers when the dot stands alone (a tree row, a table
+     * cell with no text). Leave it out when a visible label sits beside it.
+     */
+    label?: string;
+    className?: string;
+}
+/** A status mark. Its colour is a status token, so it means the same thing whatever the accent. */
+export declare function StatusDot({ tone, pulse, label, className }: StatusDotProps): import("react").JSX.Element;

package/dist/status/StatusDot.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { DOT_TONE, IN_FLIGHT } from "./tones.js";
+/** A status mark. Its colour is a status token, so it means the same thing whatever the accent. */
+export function StatusDot({ tone, pulse = false, label, className }) {
+    return (_jsxs("span", { className: cn("inline-flex shrink-0 items-center", className), "data-tone": tone, children: [_jsx("span", { "aria-hidden": true, className: cn("inline-block size-2 rounded-full shadow-[0_0_0_2px_var(--background)]", DOT_TONE[tone], pulse && IN_FLIGHT) }), label && _jsx("span", { className: "sr-only", children: label })] }));
+}

package/dist/status/tones.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The one status colour map (Astrolift #2126). Status is semantic and never
+ * follows the accent: with a copper or ice accent a healthy deployment is
+ * still lime, a failure still red. Every tone here is a status token.
+ */
+export type StatusTone = "ok" | "warn" | "error" | "info" | "muted";
+export declare const STATUS_TONES: readonly StatusTone[];
+/** The status token each tone paints. `muted` has none: it is the muted foreground. */
+export declare const TONE_TOKEN: Record<StatusTone, "success" | "warning" | "danger" | "info" | null>;
+/** A dot: solid status colour with a soft halo, the one glow the brand permits besides focus. */
+export declare const DOT_TONE: Record<StatusTone, string>;
+/** How much of the status colour tints a pill's fill (`bg-success/15`). */
+export declare const PILL_TINT = 0.15;
+/** A pill: tinted fill, readable text, tinted hairline. */
+export declare const PILL_TONE: Record<StatusTone, string>;
+/** In-flight states pulse; nothing else moves. Reduced motion holds it still. */
+export declare const IN_FLIGHT = "animate-pulse motion-reduce:animate-none";

package/dist/status/tones.js

@@ -0,0 +1,29 @@
+export const STATUS_TONES = ["ok", "warn", "error", "info", "muted"];
+/** The status token each tone paints. `muted` has none: it is the muted foreground. */
+export const TONE_TOKEN = {
+    ok: "success",
+    warn: "warning",
+    error: "danger",
+    info: "info",
+    muted: null,
+};
+/** A dot: solid status colour with a soft halo, the one glow the brand permits besides focus. */
+export const DOT_TONE = {
+    ok: "bg-success shadow-success/50",
+    warn: "bg-warning shadow-warning/50",
+    error: "bg-danger shadow-danger/50",
+    info: "bg-info shadow-info/50",
+    muted: "bg-muted-foreground shadow-muted-foreground/40",
+};
+/** How much of the status colour tints a pill's fill (`bg-success/15`). */
+export const PILL_TINT = 0.15;
+/** A pill: tinted fill, readable text, tinted hairline. */
+export const PILL_TONE = {
+    ok: "border-success-border bg-success/15 text-success-fg",
+    warn: "border-warning-border bg-warning/15 text-warning-fg",
+    error: "border-danger-border bg-danger/15 text-danger-fg",
+    info: "border-info-border bg-info/15 text-info-fg",
+    muted: "border-border bg-foreground/5 text-muted-foreground",
+};
+/** In-flight states pulse; nothing else moves. Reduced motion holds it still. */
+export const IN_FLIGHT = "animate-pulse motion-reduce:animate-none";