@calliopelabs/ui 0.0.0-stage → 0.1.0

package/dist/provider/messages.js

@@ -0,0 +1,104 @@
+const lower = (label) => label.toLocaleLowerCase("en");
+const count = (n) => n.toLocaleString("en");
+export const defaultMessages = {
+    shell: {
+        skipToContent: "Skip to content",
+        navigation: "Navigation",
+        close: "Close",
+    },
+    nav: {
+        label: "Main",
+        collapse: "Collapse sidebar",
+        expand: "Expand sidebar",
+        collapseTitle: "Collapse sidebar ([)",
+        expandTitle: "Expand sidebar ([)",
+    },
+    rail: {
+        show: (label) => `Show ${lower(label)}`,
+        hide: (label) => `Hide ${lower(label)}`,
+        resize: (label) => `Resize ${lower(label)}`,
+        expand: (label) => `Expand ${lower(label)} to full width`,
+        restore: (label) => `Restore ${lower(label)} to the side`,
+    },
+    breadcrumb: {
+        label: "Breadcrumb",
+        switchFrom: (label) => `Switch from ${label}`,
+    },
+    table: {
+        search: "Search",
+        clearSearch: "Clear search",
+        results: (n) => (n === 1 ? "1 result" : `${count(n)} results`),
+        loading: "Loading",
+        loadFailed: (label) => `Could not load ${lower(label)}`,
+        requestFailed: "The request failed.",
+        retry: "Retry",
+        noMatches: "No matches",
+        noMatchesDescription: (label) => `No ${lower(label)} match the search.`,
+        selected: (n) => `${count(n)} selected`,
+        clearSelection: "Clear",
+        selectRow: (id) => `Select ${id}`,
+        selectPage: (label) => `Select all ${lower(label)} on this page`,
+        actions: "Actions",
+        rowActions: (label) => `Actions for ${label}`,
+        rowsPerPage: "Rows per page",
+        page: (n) => `Page ${count(n)}`,
+        previousPage: "Previous page",
+        nextPage: "Next page",
+        sortKey: (index) => `sort key ${index}`,
+    },
+    states: {
+        errorTitle: "Something went wrong",
+        unexpected: "An unexpected error occurred.",
+        retry: "Try again",
+        errorId: (digest) => `Error ID ${digest}`,
+        loading: "Loading",
+        learnMore: "Learn more",
+    },
+    dialog: {
+        close: "Close",
+    },
+    confirm: {
+        confirm: "Confirm",
+        cancel: "Cancel",
+        working: "Working",
+        failed: "That did not work. Try again.",
+        reasonRequired: "A reason is required.",
+    },
+    user: {
+        accountMenu: (name, initials) => `${initials}, account menu for ${name}`,
+        signOut: "Sign out",
+    },
+    appearance: {
+        locked: "Your organization has locked the theme. These settings are read-only.",
+        themes: "Theme",
+        accent: "Accent",
+        ground: "Ground",
+        density: "Density",
+        corners: "Corners",
+        reset: "Use the default",
+        mode: (mode) => mode,
+        groundLabel: (_ground, label) => label,
+        accentLabel: (_accent, label) => label,
+        densityLabel: (density) => (density === "compact" ? "Compact" : "Cards"),
+        densityHint: (density) => density === "compact"
+            ? "Dense rows with hairline dividers"
+            : "Boxed items that flow into columns",
+        cornersLabel: (corners) => corners === 0 ? "Square" : corners === 10 ? "Rounded" : `${corners}px`,
+        customAccent: "Custom accent",
+        customAccentPick: "Pick a colour",
+        customAccentHelp: "Any colour that stands 3:1 off the ground. Status colours never change.",
+        customAccentInvalid: "Use a hex colour such as #2f9e52.",
+        customAccentInUse: "In use",
+        customAccentOk: (ratio) => `${ratio}:1 against this ground.`,
+        customAccentFaint: (ratio, min, mode) => `${ratio}:1 against this ground; it needs ${min}:1. Try a ${mode === "dark" ? "lighter" : "darker"} colour.`,
+    },
+};
+export function mergeMessages(overrides) {
+    if (!overrides)
+        return defaultMessages;
+    const merged = { ...defaultMessages };
+    for (const group of Object.keys(overrides)) {
+        merged[group] = { ...defaultMessages[group], ...overrides[group] };
+    }
+    return merged;
+}

package/dist/shell/AppShell.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+interface AppShellBaseProps {
+    /** The main rail, on the left: a Sidebar. */
+    sidebar: React.ReactNode;
+    children: React.ReactNode;
+    /** A bar above the content, between the rails: global search, an assistant toggle. */
+    header?: React.ReactNode;
+    /** Above everything, full width: an incident banner. */
+    banner?: React.ReactNode;
+    /** `[`: collapse or expand the sidebar. */
+    onToggleSidebar?: () => void;
+    /** `]`: show or hide the right rail. */
+    onToggleRightRail?: () => void;
+    className?: string;
+}
+type RightRailProps = {
+    rightRail?: undefined;
+    rightRailLabel?: undefined;
+    rightRailExpanded?: undefined;
+} | {
+    /** The right rail: Astrolift's projects, Zentinelle's assistant dock. Usually a RailPanel. */
+    rightRail: React.ReactNode;
+    /** Names the right rail on narrow screens: its button and its drawer's title. */
+    rightRailLabel: string;
+    /** The right rail takes the whole content column (the assistant's full-width mode). */
+    rightRailExpanded?: boolean;
+};
+export type AppShellProps = AppShellBaseProps & RightRailProps;
+/**
+ * The app frame (Astrolift layout D, Zentinelle §5): the sidebar on the
+ * left, the content between, the right rail on the right, each scrolling on
+ * its own. Pure: it lays them out and owns only the shortcuts (`[` and `]`,
+ * handed to the caller's collapse state) and, below `md`, the drawers the
+ * rails open in.
+ *
+ * On narrow screens the top bar holds a button for each rail's drawer, so
+ * hide header controls that only make sense beside the content (a dock
+ * toggle). A rail then renders inside its drawer as well as in its hidden
+ * desktop place: keep anything that must survive (an assistant's
+ * conversation) in state above the shell, not inside the rail.
+ */
+export declare function AppShell({ sidebar, children, header, rightRail, rightRailLabel, rightRailExpanded, banner, onToggleSidebar, onToggleRightRail, className, }: AppShellProps): React.JSX.Element;
+export {};

package/dist/shell/AppShell.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "../overlays/Drawer.js";
+import { Button } from "../primitives/Button.js";
+import { useUI } from "../provider/UIProvider.js";
+import { RailPlacementContext } from "./placement.js";
+function ignoresShortcut(event) {
+    if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey || event.isComposing)
+        return true;
+    const target = event.target;
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName))
+        return true;
+    // A dialog owns the keyboard while it is open.
+    return Boolean(target.closest("[role='dialog'], [role='alertdialog']"));
+}
+/**
+ * The app frame (Astrolift layout D, Zentinelle §5): the sidebar on the
+ * left, the content between, the right rail on the right, each scrolling on
+ * its own. Pure: it lays them out and owns only the shortcuts (`[` and `]`,
+ * handed to the caller's collapse state) and, below `md`, the drawers the
+ * rails open in.
+ *
+ * On narrow screens the top bar holds a button for each rail's drawer, so
+ * hide header controls that only make sense beside the content (a dock
+ * toggle). A rail then renders inside its drawer as well as in its hidden
+ * desktop place: keep anything that must survive (an assistant's
+ * conversation) in state above the shell, not inside the rail.
+ */
+export function AppShell({ sidebar, children, header, rightRail, rightRailLabel, rightRailExpanded = false, banner, onToggleSidebar, onToggleRightRail, className, }) {
+    const { messages } = useUI();
+    const [drawer, setDrawer] = React.useState(null);
+    React.useEffect(() => {
+        function onKey(event) {
+            if (ignoresShortcut(event))
+                return;
+            if (event.key === "[" && onToggleSidebar) {
+                event.preventDefault();
+                onToggleSidebar();
+            }
+            else if (event.key === "]" && onToggleRightRail) {
+                event.preventDefault();
+                onToggleRightRail();
+            }
+        }
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [onToggleSidebar, onToggleRightRail]);
+    const railLabel = rightRailLabel ?? "";
+    const drawerTitle = drawer === "rightRail" ? railLabel : messages.shell.navigation;
+    return (_jsxs("div", { "data-slot": "app-shell", className: cn("flex h-dvh min-h-0 w-full flex-col bg-background text-foreground", className), children: [_jsx("a", { href: "#main-content", className: "sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-100 focus:rounded-lg focus:bg-primary focus:px-3 focus:py-2 focus:text-primary-foreground focus:shadow-md focus:ring-2 focus:ring-ring focus:outline-none", children: messages.shell.skipToContent }), banner, _jsx(Drawer, { open: drawer !== null, onOpenChange: (open) => {
+                    if (!open)
+                        setDrawer(null);
+                }, children: _jsxs(DrawerContent, { side: drawer === "rightRail" ? "right" : "left", "aria-describedby": undefined, className: cn("gap-0 p-0", drawer === "rightRail" ? "w-full sm:max-w-md" : "w-72 max-w-[85vw]"), children: [_jsx(DrawerHeader, { className: "border-b", children: _jsx(DrawerTitle, { children: drawerTitle }) }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", onClick: (event) => {
+                                // Following a link closes the drawer, as navigating would on a wide screen.
+                                if (event.target.closest("a[href]"))
+                                    setDrawer(null);
+                            }, children: _jsx(RailPlacementContext.Provider, { value: "drawer", children: drawer === "rightRail" ? rightRail : sidebar }) })] }) }), _jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsx("div", { className: "hidden min-h-0 shrink-0 md:flex", children: sidebar }), _jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", rightRailExpanded && rightRail && "md:hidden"), children: [_jsxs("div", { className: cn("flex shrink-0 items-center gap-2 border-b px-3 py-2", !header && "md:hidden"), children: [_jsxs("div", { className: "flex shrink-0 gap-2 md:hidden", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setDrawer("sidebar"), children: messages.shell.navigation }), rightRail && (_jsx(Button, { variant: "outline", size: "sm", onClick: () => setDrawer("rightRail"), children: railLabel }))] }), header && _jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: header })] }), _jsx("main", { id: "main-content", tabIndex: -1, className: "min-w-0 flex-1 overflow-y-auto px-3 py-5 outline-none md:px-6", children: children })] }), rightRail && (_jsx("div", { className: cn("hidden min-h-0 md:flex", rightRailExpanded ? "min-w-0 flex-1" : "shrink-0"), children: rightRail }))] })] }));
+}

package/dist/shell/BrandMark.d.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+export interface BrandMarkProps {
+    /** Where the mark leads: the product's home. */
+    href: string;
+    /** The product's logo mark (an <img> or SVG). Decorative: the name or the label carries the meaning. */
+    mark?: React.ReactNode;
+    /** Defaults to the product's name from AppearanceProvider. */
+    name?: string;
+    /** The mark alone, for the collapsed sidebar. */
+    collapsed?: boolean;
+    className?: string;
+}
+/** The product's mark and name, heading the sidebar. */
+export declare function BrandMark({ href, mark, name, collapsed, className }: BrandMarkProps): React.JSX.Element;

package/dist/shell/BrandMark.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProduct } from "../appearance/AppearanceProvider.js";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+/** The product's mark and name, heading the sidebar. */
+export function BrandMark({ href, mark, name, collapsed = false, className }) {
+    const { Link } = useUI();
+    const product = useProduct();
+    const title = name ?? product?.name;
+    if (!title)
+        throw new Error("BrandMark needs a name, or an AppearanceProvider with a product");
+    return (_jsxs(Link, { href: href, "aria-label": collapsed ? title : undefined, className: cn("flex min-w-0 items-center gap-2 rounded-lg focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", collapsed && "justify-center", className), children: [mark && (_jsx("span", { "aria-hidden": true, className: "flex size-7 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary/10 ring-1 ring-sidebar-primary/30 [&_img]:size-4.5 [&_svg]:size-4.5", children: mark })), !collapsed && (_jsx("span", { className: "truncate font-head text-sm font-semibold tracking-tight", children: title }))] }));
+}

package/dist/shell/RailPanel.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+export interface RailPanelProps {
+    /** Names the rail: its landmark, and its show, hide, resize and expand controls. */
+    label: string;
+    /** The rail's heading row: an organization switcher, a title. Defaults to the label. */
+    title?: React.ReactNode;
+    /** Controls beside the title. */
+    actions?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    collapsed: boolean;
+    onCollapsedChange: (collapsed: boolean) => void;
+    /**
+     * Collapsed, a rail is a thin strip with a show button (Astrolift's projects
+     * rail), or nothing at all, reopened from elsewhere (Zentinelle's assistant,
+     * from a header button or `]`).
+     */
+    collapsedMode?: "strip" | "hidden";
+    /** Under the show button, in the strip. */
+    collapsedIcon?: React.ReactNode;
+    /** px. Fixed unless `onWidthChange` is given. */
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    /** Makes the rail resizable from its inner edge, by pointer or by arrow keys. */
+    onWidthChange?: (width: number) => void;
+    /** The rail takes the content column (pair with AppShell's `rightRailExpanded`). */
+    expanded?: boolean;
+    /** Shows the expand and restore control. */
+    onExpandedChange?: (expanded: boolean) => void;
+    className?: string;
+}
+/**
+ * The right rail's frame: the slot where Astrolift keeps its projects and
+ * Zentinelle docks its assistant. A rail pushes the content aside rather
+ * than covering it. In the shell's drawer (narrow screens) it fills the
+ * drawer and drops the controls that only make sense beside the content.
+ */
+export declare function RailPanel({ label, title, actions, footer, children, collapsed, onCollapsedChange, collapsedMode, collapsedIcon, width, minWidth, maxWidth, onWidthChange, expanded, onExpandedChange, className, }: RailPanelProps): React.JSX.Element | null;

package/dist/shell/RailPanel.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronsLeftIcon, ChevronsRightIcon, Maximize2Icon, Minimize2Icon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+import { useRailPlacement } from "./placement.js";
+const STEP = 16;
+/**
+ * The right rail's frame: the slot where Astrolift keeps its projects and
+ * Zentinelle docks its assistant. A rail pushes the content aside rather
+ * than covering it. In the shell's drawer (narrow screens) it fills the
+ * drawer and drops the controls that only make sense beside the content.
+ */
+export function RailPanel({ label, title, actions, footer, children, collapsed, onCollapsedChange, collapsedMode = "strip", collapsedIcon, width = 260, minWidth = 200, maxWidth = 640, onWidthChange, expanded = false, onExpandedChange, className, }) {
+    const { messages } = useUI();
+    const inDrawer = useRailPlacement() === "drawer";
+    const clamp = (value) => Math.min(maxWidth, Math.max(minWidth, value));
+    if (collapsed && !inDrawer) {
+        if (collapsedMode === "hidden")
+            return null;
+        return (_jsxs("aside", { "aria-label": label, "data-slot": "rail-panel", "data-collapsed": true, className: cn("flex h-full w-8 shrink-0 flex-col items-center gap-2 border-l border-sidebar-border bg-sidebar py-2 text-muted-foreground", className), children: [_jsx("button", { type: "button", onClick: () => onCollapsedChange(false), "aria-label": messages.rail.show(label), title: `${messages.rail.show(label)} (])`, className: "flex size-7 items-center justify-center rounded-lg hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: _jsx(ChevronsLeftIcon, { className: "size-4", "aria-hidden": true }) }), collapsedIcon && (_jsx("span", { "aria-hidden": true, className: "[&_svg]:size-4", children: collapsedIcon }))] }));
+    }
+    const resizable = Boolean(onWidthChange) && !inDrawer && !expanded;
+    const iconButton = "flex size-7 shrink-0 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";
+    return (_jsxs("aside", { "aria-label": label, "data-slot": "rail-panel", "data-expanded": expanded || undefined, style: inDrawer || expanded ? undefined : { width }, className: cn("relative flex h-full min-h-0 shrink-0 flex-col border-l border-sidebar-border bg-sidebar text-sidebar-foreground", (inDrawer || expanded) && "w-full min-w-0 flex-1", inDrawer && "border-l-0", className), children: [resizable && (_jsx(ResizeHandle, { label: messages.rail.resize(label), width: width, minWidth: minWidth, maxWidth: maxWidth, onWidthChange: (next) => onWidthChange?.(clamp(next)) })), _jsxs("div", { className: "flex min-w-0 items-center gap-2 border-b border-sidebar-border px-3 py-2", children: [_jsx("div", { className: "min-w-0 flex-1 truncate text-sm font-semibold", children: title ?? label }), actions, onExpandedChange && !inDrawer && (_jsx("button", { type: "button", onClick: () => onExpandedChange(!expanded), "aria-label": expanded ? messages.rail.restore(label) : messages.rail.expand(label), title: expanded ? messages.rail.restore(label) : messages.rail.expand(label), className: iconButton, children: expanded ? (_jsx(Minimize2Icon, { className: "size-4", "aria-hidden": true })) : (_jsx(Maximize2Icon, { className: "size-4", "aria-hidden": true })) })), !inDrawer && (_jsx("button", { type: "button", onClick: () => onCollapsedChange(true), "aria-label": messages.rail.hide(label), title: `${messages.rail.hide(label)} (])`, className: iconButton, children: _jsx(ChevronsRightIcon, { className: "size-4", "aria-hidden": true }) }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: children }), footer && _jsx("div", { className: "border-t border-sidebar-border px-3 py-2", children: footer })] }));
+}
+/* A focusable separator is the WAI-ARIA window splitter, an interactive
+   widget; jsx-a11y counts every separator as static. */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
+function ResizeHandle({ label, width, minWidth, maxWidth, onWidthChange, }) {
+    const drag = React.useRef(null);
+    return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": label, "aria-valuenow": width, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, tabIndex: 0, onKeyDown: (event) => {
+            // The rail is on the right, so moving the edge left widens it.
+            const next = event.key === "ArrowLeft"
+                ? width + STEP
+                : event.key === "ArrowRight"
+                    ? width - STEP
+                    : event.key === "Home"
+                        ? minWidth
+                        : event.key === "End"
+                            ? maxWidth
+                            : null;
+            if (next === null)
+                return;
+            event.preventDefault();
+            onWidthChange(next);
+        }, onPointerDown: (event) => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+            drag.current = { x: event.clientX, width };
+        }, onPointerMove: (event) => {
+            const start = drag.current;
+            if (start)
+                onWidthChange(start.width + (start.x - event.clientX));
+        }, onPointerUp: (event) => {
+            drag.current = null;
+            event.currentTarget.releasePointerCapture?.(event.pointerId);
+        }, className: "absolute inset-y-0 left-0 z-10 w-1.5 -translate-x-1/2 cursor-col-resize touch-none outline-none hover:bg-primary/40 focus-visible:bg-primary/60" }));
+}

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] }));
+}