@calliopelabs/ui 0.0.0-stage → 0.3.1

package/dist/primitives/DropdownMenu.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+export function DropdownMenu(props) {
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+export function DropdownMenuTrigger(props) {
+    return _jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+export function DropdownMenuContent({ className, align = "start", sideOffset = 4, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", align: align, sideOffset: sideOffset, className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[state=open]:animate-cui-fade-in", className), ...props }) }));
+}
+export function DropdownMenuGroup(props) {
+    return _jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+export function DropdownMenuItem({ className, variant = "default", ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-variant": variant, className: cn("relative flex cursor-default items-center gap-1.5 rounded-lg px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[variant=destructive]:text-danger-fg data-[variant=destructive]:focus:bg-danger/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+export function DropdownMenuLabel({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground", className), ...props }));
+}
+export function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}

package/dist/primitives/Input.d.ts

@@ -0,0 +1,2 @@
+import type * as React from "react";
+export declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;

package/dist/primitives/Input.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+export function Input({ className, type, ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm", className), ...props }));
+}

package/dist/primitives/Popover.d.ts

@@ -0,0 +1,5 @@
+import { Popover as PopoverPrimitive } from "radix-ui";
+import type * as React from "react";
+export declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+export declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+export declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;

package/dist/primitives/Popover.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+export function Popover(props) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+export function PopoverTrigger(props) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+export function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden data-[state=open]:animate-cui-fade-in", className), ...props }) }));
+}

package/dist/primitives/Skeleton.d.ts

@@ -0,0 +1,3 @@
+import type * as React from "react";
+/** A placeholder block with the geometry of what it stands in for. It pulses; with reduced motion it holds still. */
+export declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/primitives/Skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/** A placeholder block with the geometry of what it stands in for. It pulses; with reduced motion it holds still. */
+export function Skeleton({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "skeleton", "aria-hidden": true, className: cn("animate-pulse rounded-lg bg-muted motion-reduce:animate-none", className), ...props }));
+}

package/dist/primitives/Tabs.d.ts

@@ -0,0 +1,12 @@
+import { Tabs as TabsPrimitive } from "radix-ui";
+import type * as React from "react";
+/**
+ * In-page tabs: panels on one URL, with the ARIA tablist pattern (arrow keys
+ * move between tabs). Tabs that are pages (an entity's Overview, Logs,
+ * Settings) are links: use TabNav. The underline matches TabNav's, so the two
+ * read as one family.
+ */
+export declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
+export declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): React.JSX.Element;
+export declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
+export declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;

package/dist/primitives/Tabs.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/**
+ * In-page tabs: panels on one URL, with the ARIA tablist pattern (arrow keys
+ * move between tabs). Tabs that are pages (an entity's Overview, Logs,
+ * Settings) are links: use TabNav. The underline matches TabNav's, so the two
+ * read as one family.
+ */
+export function Tabs({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn("flex min-w-0 flex-col gap-4", className), ...props }));
+}
+export function TabsList({ className, ...props }) {
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn("flex min-w-0 gap-1 overflow-x-auto border-b border-border", className), ...props }));
+}
+export function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative shrink-0 px-3 py-2.5 text-sm text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:rounded-lg focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-medium data-[state=active]:text-foreground data-[state=active]:after:absolute data-[state=active]:after:inset-x-1 data-[state=active]:after:-bottom-px data-[state=active]:after:h-0.5 data-[state=active]:after:rounded-full data-[state=active]:after:bg-primary", className), ...props }));
+}
+export function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("min-w-0 outline-none focus-visible:ring-2 focus-visible:ring-ring", className), ...props }));
+}

package/dist/provider/UIProvider.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { type MessageOverrides, type Messages } from "./messages.js";
+/** What the package hands a link: anchor props with a string `href`. */
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    ref?: React.Ref<HTMLAnchorElement>;
+}
+/** The app's link component: next/link, a router's Link, or a plain anchor. */
+export type LinkComponent = React.ComponentType<LinkProps>;
+interface UIContextValue {
+    Link: LinkComponent;
+    messages: Messages;
+}
+export interface UIProviderProps {
+    /** Rendered for every link the package draws. Defaults to a plain `<a>`. */
+    link?: LinkComponent;
+    /** Copy overrides, one level deep (`{ table: { retry: "Reintentar" } }`). */
+    messages?: MessageOverrides;
+    children: React.ReactNode;
+}
+/**
+ * The app's environment: its link component and its copy. The package never
+ * imports a router, so this is how navigation stays the app's: pass next/link
+ * in a Next app, your router's Link elsewhere. Without a provider every link
+ * is a plain anchor and every string is English.
+ */
+export declare function UIProvider({ link, messages, children }: UIProviderProps): React.JSX.Element;
+export declare function useUI(): UIContextValue;
+export {};

package/dist/provider/UIProvider.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { defaultMessages, mergeMessages, } from "./messages.js";
+function Anchor({ ref, children, ...props }) {
+    return (_jsx("a", { ref: ref, ...props, children: children }));
+}
+const UIContext = React.createContext({ Link: Anchor, messages: defaultMessages });
+/**
+ * The app's environment: its link component and its copy. The package never
+ * imports a router, so this is how navigation stays the app's: pass next/link
+ * in a Next app, your router's Link elsewhere. Without a provider every link
+ * is a plain anchor and every string is English.
+ */
+export function UIProvider({ link, messages, children }) {
+    const value = React.useMemo(() => ({ Link: link ?? Anchor, messages: mergeMessages(messages) }), [link, messages]);
+    return _jsx(UIContext.Provider, { value: value, children: children });
+}
+export function useUI() {
+    return React.useContext(UIContext);
+}

package/dist/provider/messages.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Every string the package renders, in English. An app with a message
+ * catalog overrides any of them through `UIProvider messages={...}`; a
+ * message that takes a value is a function, so the app's own i18n formats
+ * it (plurals, numbers, word order).
+ */
+export interface Messages {
+    shell: {
+        skipToContent: string;
+        /** The mobile button and drawer title for the sidebar. */
+        navigation: string;
+        close: string;
+    };
+    nav: {
+        /** The sidebar's landmark name. */
+        label: string;
+        collapse: string;
+        expand: string;
+        collapseTitle: string;
+        expandTitle: string;
+    };
+    rail: {
+        show: (label: string) => string;
+        hide: (label: string) => string;
+        resize: (label: string) => string;
+        expand: (label: string) => string;
+        restore: (label: string) => string;
+    };
+    breadcrumb: {
+        label: string;
+        switchFrom: (label: string) => string;
+    };
+    table: {
+        search: string;
+        clearSearch: string;
+        results: (count: number) => string;
+        loading: string;
+        loadFailed: (label: string) => string;
+        requestFailed: string;
+        retry: string;
+        noMatches: string;
+        noMatchesDescription: (label: string) => string;
+        selected: (count: number) => string;
+        clearSelection: string;
+        selectRow: (id: string) => string;
+        selectPage: (label: string) => string;
+        actions: string;
+        rowActions: (label: string) => string;
+        rowsPerPage: string;
+        page: (page: number) => string;
+        previousPage: string;
+        nextPage: string;
+        sortKey: (index: number) => string;
+    };
+    states: {
+        errorTitle: string;
+        unexpected: string;
+        retry: string;
+        errorId: (digest: string) => string;
+        loading: string;
+        learnMore: string;
+    };
+    dialog: {
+        close: string;
+    };
+    confirm: {
+        confirm: string;
+        cancel: string;
+        working: string;
+        failed: string;
+        reasonRequired: string;
+    };
+    user: {
+        /** The collapsed trigger's name: it shows only the initials, so the name starts with them (WCAG 2.5.3). */
+        accountMenu: (name: string, initials: string) => string;
+        signOut: string;
+    };
+    appearance: {
+        locked: string;
+        themes: string;
+        accent: string;
+        ground: string;
+        density: string;
+        corners: string;
+        reset: string;
+        mode: (mode: "dark" | "light") => string;
+        groundLabel: (ground: string, label: string) => string;
+        accentLabel: (accent: string, label: string) => string;
+        densityLabel: (density: "compact" | "cards") => string;
+        densityHint: (density: "compact" | "cards") => string;
+        cornersLabel: (corners: number) => string;
+        customAccent: string;
+        customAccentPick: string;
+        customAccentHelp: string;
+        customAccentInvalid: string;
+        customAccentInUse: string;
+        customAccentOk: (ratio: string) => string;
+        customAccentFaint: (ratio: string, min: number, mode: "dark" | "light") => string;
+    };
+}
+export declare const defaultMessages: Messages;
+/** Any subset of the messages, one level deep. */
+export type MessageOverrides = {
+    [Group in keyof Messages]?: Partial<Messages[Group]>;
+};
+export declare function mergeMessages(overrides: MessageOverrides | undefined): Messages;

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