@atmos.build/ui 0.1.0

package/dist/components/rename-dialog.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Button } from "./button.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from './dialog.js';
+import { Input } from "./input.js";
+import { Label } from "./label.js";
+export function RenameDialog({ open, value, title, label, confirmLabel, cancelLabel, onOpenChange, onSubmit, description, placeholder, busy = false, error, requiredError, detail, detailPlacement = 'bottom', }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(RenameDialogContent, { value: value, title: title, label: label, confirmLabel: confirmLabel, cancelLabel: cancelLabel, onOpenChange: onOpenChange, onSubmit: onSubmit, description: description, placeholder: placeholder, busy: busy, error: error, requiredError: requiredError, detail: detail, detailPlacement: detailPlacement }, `${open ? 'open' : 'closed'}:${value}`) }));
+}
+function RenameDialogContent({ value, title, label, confirmLabel, cancelLabel, onOpenChange, onSubmit, description, placeholder, busy, error, requiredError, detail, detailPlacement = 'bottom', }) {
+    const [draft, setDraft] = useState(value);
+    const [localError, setLocalError] = useState(null);
+    const inputRef = useRef(null);
+    const submit = (event) => {
+        event.preventDefault();
+        const trimmed = draft.trim();
+        if (!trimmed) {
+            setLocalError(requiredError ?? null);
+            return;
+        }
+        setLocalError(null);
+        void onSubmit(trimmed);
+    };
+    return (_jsx(DialogContent, { className: "sm:max-w-sm", onOpenAutoFocus: (event) => {
+            event.preventDefault();
+            requestAnimationFrame(() => {
+                inputRef.current?.focus();
+                inputRef.current?.select();
+            });
+        }, children: _jsxs("form", { onSubmit: submit, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description ? (_jsx(DialogDescription, { children: description })) : (_jsx(DialogDescription, { className: "sr-only", children: title }))] }), detail && detailPlacement === 'top' ? _jsx("div", { className: "mt-4", children: detail }) : null, _jsxs("div", { className: "mt-4 space-y-2", children: [_jsx(Label, { htmlFor: "rename-dialog-input", className: "text-[12px]", children: label }), _jsx(Input, { ref: inputRef, id: "rename-dialog-input", value: draft, disabled: busy, placeholder: placeholder, "aria-invalid": Boolean(localError || error), onChange: (event) => {
+                                setDraft(event.target.value);
+                                setLocalError(null);
+                            } }), localError || error ? (_jsx("p", { className: "text-destructive text-[12px]", children: localError ?? error })) : null] }), detail && detailPlacement === 'bottom' ? _jsx("div", { className: "mt-4", children: detail }) : null, _jsxs(DialogFooter, { className: "mt-5", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), disabled: busy, children: cancelLabel }), _jsx(Button, { type: "submit", disabled: busy, children: confirmLabel })] })] }) }));
+}

package/dist/components/row-surface.d.ts

@@ -0,0 +1 @@
+export declare const rowSurfaceRingClassName = "ring-(--row-surface)";

package/dist/components/row-surface.js

@@ -0,0 +1,5 @@
+// A row paints a solid surface and publishes it as --row-surface, so children
+// that fake a cut-out — overlapping avatar rings, dot stacks — repaint the exact
+// row colour instead of the page background and keep the illusion on hover and
+// selection.
+export const rowSurfaceRingClassName = 'ring-(--row-surface)';

package/dist/components/row-trailing.d.ts

@@ -0,0 +1,30 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export declare const rowTrailingGroupClassName = "group/side-panel-item";
+/**
+ * Resting content that hover actions displace out of flow, for rows whose resting
+ * marks live outside {@link RowTrailing} (a stacked trailing column, say) but must
+ * still yield to the same reveal.
+ */
+export declare const rowTrailingConcealedClassName = "flex group-hover/side-panel-item:hidden group-focus-visible/side-panel-item:hidden group-has-[:focus-visible]/side-panel-item:hidden group-has-[[data-slot=row-actions]_[data-state=open]]/side-panel-item:hidden group-data-[context-menu-open]/side-panel-item:hidden group-data-[context-menu-open]/context-menu:hidden";
+export type RowTrailingReveal = 'replace' | 'slide';
+export interface RowTrailingProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children'> {
+    resting?: ReactNode;
+    actions?: ReactNode;
+    reveal?: RowTrailingReveal;
+    restingClassName?: string;
+    actionsClassName?: string;
+}
+/**
+ * The trailing slot of a `rowTrailingGroupClassName` row: resting content (unread
+ * badge, timestamp, spinner) and the actions a hover reveals.
+ *
+ * `replace` swaps one for the other, so exactly one side is in flow at a time, the
+ * visible side is flush to the row's padding, and the row's `flex-1 truncate` label
+ * shortens against whichever is showing. `slide` keeps the resting content in place
+ * and glides the buttons in from the row's right edge instead, pushing the resting
+ * content left — right for a stacked resting column, which would otherwise re-centre
+ * itself around a taller button the moment the pointer arrives.
+ *
+ * Coarse pointers have no hover to reveal with, so they get both.
+ */
+export declare const RowTrailing: import("react").ForwardRefExoticComponent<RowTrailingProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/row-trailing.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../lib/cn.js';
+export const rowTrailingGroupClassName = 'group/side-panel-item';
+// Spelled out rather than composed from a shared list: Tailwind only emits classes
+// it finds as literal strings in source. A row whose context menu is open counts as
+// hovered: the menu suppresses pointer events, so its own actions would otherwise
+// collapse out from under the pointer that opened it.
+const revealedClassName = 'hidden group-hover/side-panel-item:flex group-focus-visible/side-panel-item:flex group-has-[:focus-visible]/side-panel-item:flex group-has-[[data-slot=row-actions]_[data-state=open]]/side-panel-item:flex group-data-[context-menu-open]/side-panel-item:flex group-data-[context-menu-open]/context-menu:flex pointer-coarse:flex';
+/**
+ * Resting content that hover actions displace out of flow, for rows whose resting
+ * marks live outside {@link RowTrailing} (a stacked trailing column, say) but must
+ * still yield to the same reveal.
+ */
+export const rowTrailingConcealedClassName = 'flex group-hover/side-panel-item:hidden group-focus-visible/side-panel-item:hidden group-has-[:focus-visible]/side-panel-item:hidden group-has-[[data-slot=row-actions]_[data-state=open]]/side-panel-item:hidden group-data-[context-menu-open]/side-panel-item:hidden group-data-[context-menu-open]/context-menu:hidden';
+// The same row states as `revealedClassName`, in the two halves a slide needs: a track
+// that grows from no width to the buttons' own width, and the buttons themselves
+// travelling in from beyond the row's edge. `0fr`/`1fr` is the one pair a browser
+// interpolates smoothly towards intrinsic content width, so the buttons need no
+// measured size.
+const slideTrackOpenClassName = 'group-hover/side-panel-item:grid-cols-[1fr] group-hover/side-panel-item:opacity-100 group-focus-visible/side-panel-item:grid-cols-[1fr] group-focus-visible/side-panel-item:opacity-100 group-has-[:focus-visible]/side-panel-item:grid-cols-[1fr] group-has-[:focus-visible]/side-panel-item:opacity-100 group-has-[[data-slot=row-actions]_[data-state=open]]/side-panel-item:grid-cols-[1fr] group-has-[[data-slot=row-actions]_[data-state=open]]/side-panel-item:opacity-100 group-data-[context-menu-open]/side-panel-item:grid-cols-[1fr] group-data-[context-menu-open]/side-panel-item:opacity-100 group-data-[context-menu-open]/context-menu:grid-cols-[1fr] group-data-[context-menu-open]/context-menu:opacity-100 pointer-coarse:grid-cols-[1fr] pointer-coarse:opacity-100';
+const slideActionsOpenClassName = 'group-hover/side-panel-item:translate-x-0 group-focus-visible/side-panel-item:translate-x-0 group-has-[:focus-visible]/side-panel-item:translate-x-0 group-has-[[data-slot=row-actions]_[data-state=open]]/side-panel-item:translate-x-0 group-data-[context-menu-open]/side-panel-item:translate-x-0 group-data-[context-menu-open]/context-menu:translate-x-0 pointer-coarse:translate-x-0';
+// Both motion tokens carry their own value as a fallback, the way globals.css does:
+// only the color half of the token layer reaches the app, so a bare
+// var(--duration-slide) computes to nothing and drops the transition to 0s.
+const slideMotionClassName = 'duration-[var(--duration-slide,180ms)] ease-[var(--ease-out-expo,cubic-bezier(0.32,0.72,0,1))] motion-reduce:transition-none';
+/**
+ * The trailing slot of a `rowTrailingGroupClassName` row: resting content (unread
+ * badge, timestamp, spinner) and the actions a hover reveals.
+ *
+ * `replace` swaps one for the other, so exactly one side is in flow at a time, the
+ * visible side is flush to the row's padding, and the row's `flex-1 truncate` label
+ * shortens against whichever is showing. `slide` keeps the resting content in place
+ * and glides the buttons in from the row's right edge instead, pushing the resting
+ * content left — right for a stacked resting column, which would otherwise re-centre
+ * itself around a taller button the moment the pointer arrives.
+ *
+ * Coarse pointers have no hover to reveal with, so they get both.
+ */
+export const RowTrailing = forwardRef(function RowTrailing({ resting, actions, reveal = 'replace', restingClassName, actionsClassName, className, ...props }, ref) {
+    if (!resting && !actions)
+        return null;
+    const slides = reveal === 'slide';
+    const actionsSlot = actions ? (_jsx("span", { "data-slot": "row-actions", role: "presentation", 
+        // A portaled menu still bubbles through the React tree, so without this an
+        // item click inside a row's own dropdown would also activate the row.
+        onClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
+            if (event.key === 'Enter' || event.key === ' ')
+                event.stopPropagation();
+        }, className: cn('items-center gap-0.5', slides ? 'flex min-w-0 justify-end' : revealedClassName, actionsClassName), children: slides ? (
+        // Padding here rather than on the collapsing box, whose own padding would floor
+        // the closed track at its width and shove the resting content permanently left.
+        _jsx("span", { className: cn('flex translate-x-2 items-center gap-0.5 pl-1.5 transition-transform', slideMotionClassName, slideActionsOpenClassName), children: actions })) : (actions) })) : null;
+    return (_jsxs("span", { ref: ref, "data-slot": "row-trailing", className: cn('ml-auto flex shrink-0 items-center', className), ...props, children: [resting ? (_jsx("span", { "data-slot": "row-resting", className: cn('items-center gap-1.5', slides ? 'flex' : rowTrailingConcealedClassName, restingClassName), children: resting })) : null, slides && actionsSlot ? (_jsx("span", { "data-slot": "row-actions-reveal", className: cn(
+                // The clip that hides the not-yet-arrived buttons would also cut a focused
+                // button's ring, so the frame borrows the room back off the row's padding.
+                'grid grid-cols-[0fr] overflow-hidden opacity-0 transition-[grid-template-columns,opacity]', '-my-1 -mr-1 py-1 pr-1', slideMotionClassName, slideTrackOpenClassName), children: actionsSlot })) : (actionsSlot)] }));
+});

package/dist/components/run-status-badge.d.ts

@@ -0,0 +1,16 @@
+export type RunStatus = 'pending' | 'running' | 'paused_for_approval' | 'waiting_for_user' | 'succeeded' | 'failed' | 'canceled';
+interface RunStatusBadgeBaseProps {
+    status: RunStatus;
+    className?: string;
+    detail?: string;
+    label?: string;
+}
+export type RunStatusBadgeProps = RunStatusBadgeBaseProps & ({
+    iconOnly: true;
+    ariaLabel: string;
+} | {
+    iconOnly?: false;
+    ariaLabel?: string;
+});
+export declare function RunStatusBadge({ status, className, detail, label: labelOverride, ariaLabel, iconOnly, }: RunStatusBadgeProps): import("react").JSX.Element;
+export {};

package/dist/components/run-status-badge.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Ban, Check, Clock, Loader2, MessageCircleQuestion, ShieldAlert, X, } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+const runTone = {
+    pending: { bg: 'bg-muted', text: 'text-muted-foreground' },
+    running: { bg: 'bg-muted', text: 'text-muted-foreground' },
+    paused_for_approval: {
+        bg: 'bg-amber-500/15',
+        text: 'text-amber-600 dark:text-amber-400',
+    },
+    waiting_for_user: { bg: 'bg-sky-500/15', text: 'text-sky-600 dark:text-sky-400' },
+    succeeded: { bg: 'bg-emerald-500/15', text: 'text-emerald-600 dark:text-emerald-400' },
+    failed: { bg: 'bg-rose-500/15', text: 'text-rose-600 dark:text-rose-400' },
+    canceled: { bg: 'bg-muted', text: 'text-muted-foreground' },
+};
+const runGlyph = {
+    pending: Clock,
+    running: Loader2,
+    paused_for_approval: ShieldAlert,
+    waiting_for_user: MessageCircleQuestion,
+    succeeded: Check,
+    failed: X,
+    canceled: Ban,
+};
+const label = {
+    pending: 'pending',
+    running: 'running',
+    paused_for_approval: 'awaiting approval',
+    waiting_for_user: 'waiting for user',
+    succeeded: 'done',
+    failed: 'failed',
+    canceled: 'canceled',
+};
+export function RunStatusBadge({ status, className, detail, label: labelOverride, ariaLabel, iconOnly, }) {
+    const tone = runTone[status];
+    const text = labelOverride ?? label[status];
+    const Glyph = runGlyph[status];
+    if (iconOnly) {
+        return (_jsx("span", { "data-status": status, role: "img", "aria-label": ariaLabel, title: ariaLabel, className: cn('inline-flex size-5 shrink-0 items-center justify-center rounded-full', status === 'running' ? 'bg-primary/12 text-foreground' : cn(tone.bg, tone.text), className), children: _jsx(Glyph, { "aria-hidden": true, strokeWidth: 1.5, className: cn('size-3 shrink-0', status === 'running' && 'animate-spin') }) }));
+    }
+    return (_jsxs("span", { "data-status": status, "aria-label": ariaLabel ?? `Run status: ${text}`, className: cn('inline-flex items-center gap-1 whitespace-nowrap px-2 py-0.5 rounded-full text-[11px]', status === 'running' ? 'bg-primary/12 text-foreground' : cn(tone.bg, tone.text), className), children: [_jsx(Glyph, { "aria-hidden": true, strokeWidth: 1.5, className: cn('size-3 shrink-0', status === 'running' && 'animate-spin') }), _jsx("span", { children: text }), detail ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground/60", children: "\u00B7" }), _jsx("span", { className: "font-mono tabular-nums text-[10.5px]", children: detail })] })) : null] }));
+}

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): React.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element;
+export { ScrollArea, ScrollBar };

package/dist/components/scroll-area.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
+import { cn } from '../lib/cn.js';
+function ScrollArea({ className, children, ...props }) {
+    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn('relative', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+}
+function ScrollBar({ className, orientation = 'vertical', ...props }) {
+    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", "data-orientation": orientation, orientation: orientation, className: cn('flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full bg-border" }) }));
+}
+export { ScrollArea, ScrollBar };

package/dist/components/select.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): React.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): React.JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/select.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+function Select({ ...props }) {
+    return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ ...props }) {
+    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm whitespace-nowrap shadow-none transition-colors outline-none data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 hover:bg-muted/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-muted-foreground aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
+}
+function SelectContent({ className, children, position = "popper", ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("relative z-50 max-h-(--radix-select-content-available-height) w-max min-w-[8rem] max-w-[calc(100vw-2rem)] origin-(--radix-select-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 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-0", position === "popper" &&
+                        "h-(--radix-select-trigger-height) w-max min-w-[max(8rem,var(--radix-select-trigger-width))] scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className), ...props }));
+}
+function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-muted data-highlighted:text-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUpIcon, { className: "size-4" }) }));
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDownIcon, { className: "size-4" }) }));
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/selectable-card.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const selectableCardVariants: (props?: ({
+    layout?: "grid" | "row" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SelectableCardOwnProps = {
+    selected?: boolean;
+    onSelect?: (next: boolean) => void;
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    trailing?: React.ReactNode;
+    hideIndicator?: boolean;
+    indicator?: 'check' | 'radio';
+    role?: 'radio' | 'checkbox';
+    className?: string;
+    children?: React.ReactNode;
+};
+export type SelectableCardProps = Omit<React.ComponentPropsWithoutRef<'button'>, keyof SelectableCardOwnProps | 'value'> & SelectableCardOwnProps & VariantProps<typeof selectableCardVariants>;
+declare const SelectableCard: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value" | keyof SelectableCardOwnProps> & SelectableCardOwnProps & VariantProps<(props?: ({
+    layout?: "grid" | "row" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+export type SelectableCardGroupProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> & {
+    value?: string | null;
+    onChange?: (value: string) => void;
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    children?: React.ReactNode;
+};
+declare function SelectableCardGroup({ value, onChange, orientation, className, children, onKeyDown, ...props }: SelectableCardGroupProps): React.JSX.Element;
+declare const SelectableCardGroupItem: React.ForwardRefExoticComponent<Omit<SelectableCardProps, "role" | "selected"> & {
+    value: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { SelectableCard, SelectableCardGroup, SelectableCardGroupItem, selectableCardVariants, };

package/dist/components/selectable-card.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Check } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+const selectableCardVariants = cva([
+    'group/selectable-card relative flex min-h-8 w-full cursor-pointer select-none rounded-lg border border-border/60 bg-card bg-clip-padding text-left outline-none transition-all',
+    'hover:border-primary/35 hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
+    'data-[selected=true]:border-primary/60 data-[selected=true]:bg-primary/5 data-[selected=true]:shadow-sm data-[selected=true]:ring-1 data-[selected=true]:ring-primary/20',
+], {
+    variants: {
+        layout: { row: 'items-center gap-3 p-3', grid: 'flex-col items-start gap-2 p-4' },
+    },
+    defaultVariants: { layout: 'row' },
+});
+const SelectableCard = React.forwardRef(function SelectableCard({ selected = false, onSelect, icon, title, description, trailing, hideIndicator = false, indicator = 'check', role = 'radio', layout = 'row', disabled, className, children, onClick, onKeyDown, ...props }, ref) {
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented && !disabled)
+            onSelect?.(role === 'checkbox' ? !selected : true);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || disabled || event.key !== ' ')
+            return;
+        event.preventDefault();
+        onSelect?.(role === 'checkbox' ? !selected : true);
+    };
+    const showIndicator = !hideIndicator && trailing === undefined;
+    const trailingNode = trailing ??
+        (showIndicator && indicator === 'radio' ? (_jsx("span", { "aria-hidden": true, className: cn('flex size-[18px] shrink-0 items-center justify-center rounded-full border transition-colors', layout === 'grid' && 'absolute end-3 top-3', selected ? 'border-primary' : 'border-border group-hover/selectable-card:border-primary/50'), children: _jsx("span", { className: cn('size-2.5 rounded-full bg-primary transition-transform', selected ? 'scale-100' : 'scale-0') }) })) : showIndicator ? (_jsx(Check, { "aria-hidden": true, className: cn('size-4 shrink-0 text-primary transition-opacity', layout === 'grid' && 'absolute end-3 top-3', selected ? 'opacity-100' : 'opacity-0'), strokeWidth: 2 })) : null);
+    return (_jsxs("button", { ref: ref, type: "button", role: role, "aria-checked": selected, "aria-disabled": disabled || undefined, disabled: disabled, "data-slot": "selectable-card", "data-selected": selected, "data-layout": layout, onClick: handleClick, onKeyDown: handleKeyDown, className: cn(selectableCardVariants({ layout }), className), ...props, children: [icon != null ? (_jsx("span", { "data-slot": "selectable-card-icon", className: "flex shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: icon })) : null, children, title != null || description != null ? (_jsxs("span", { "data-slot": "selectable-card-body", className: "min-w-0 flex-1", children: [title != null ? _jsx("span", { className: "block truncate text-sm font-medium", children: title }) : null, description != null ? (_jsx("span", { className: "mt-0.5 block text-xs leading-snug text-muted-foreground", children: description })) : null] })) : null, trailingNode] }));
+});
+const SelectableCardGroupContext = React.createContext(null);
+function SelectableCardGroup({ value, onChange, orientation = 'vertical', className, children, onKeyDown, ...props }) {
+    const rootRef = React.useRef(null);
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const vertical = orientation === 'vertical' || orientation === 'both';
+        const horizontal = orientation === 'horizontal' || orientation === 'both';
+        const forward = (vertical && event.key === 'ArrowDown') || (horizontal && event.key === 'ArrowRight');
+        const backward = (vertical && event.key === 'ArrowUp') || (horizontal && event.key === 'ArrowLeft');
+        if (!forward && !backward)
+            return;
+        const cards = Array.from(rootRef.current?.querySelectorAll('[data-slot="selectable-card"]:not([disabled])') ?? []);
+        if (cards.length === 0)
+            return;
+        event.preventDefault();
+        const current = cards.findIndex((card) => card === document.activeElement);
+        const from = current === -1 ? (forward ? -1 : 0) : current;
+        cards[(from + (forward ? 1 : -1) + cards.length) % cards.length]?.focus();
+    };
+    return (_jsx(SelectableCardGroupContext.Provider, { value: { value, onChange }, children: _jsx("div", { ref: rootRef, role: "radiogroup", tabIndex: -1, "data-slot": "selectable-card-group", "aria-orientation": orientation === 'both' ? undefined : orientation, className: cn('flex flex-col gap-2', className), onKeyDown: handleKeyDown, ...props, children: children }) }));
+}
+const SelectableCardGroupItem = React.forwardRef(function SelectableCardGroupItem({ value, onSelect, ...props }, ref) {
+    const context = React.useContext(SelectableCardGroupContext);
+    return (_jsx(SelectableCard, { ref: ref, role: "radio", selected: context?.value === value, onSelect: (next) => {
+            onSelect?.(next);
+            context?.onChange?.(value);
+        }, ...props }));
+});
+export { SelectableCard, SelectableCardGroup, SelectableCardGroupItem, selectableCardVariants, };

package/dist/components/separator.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+export declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.JSX.Element;

package/dist/components/separator.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+import { cn } from '../lib/cn.js';
+export function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
+    return _jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn('shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch', className), ...props });
+}

package/dist/components/settings-dialog-shell.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from 'react';
+/**
+ * Shared building blocks for the standard two-pane settings dialog (sidebar nav
+ * + content pane). The app-wide settings dialog and the calendar booking
+ * settings dialog compose these so they read as one system rather than each
+ * hand-rolling its own shell.
+ */
+export declare function SettingsDialogShell({ title, description, nav, children, testId, contentClassName, }: {
+    title: string;
+    description?: string;
+    nav: ReactNode;
+    children: ReactNode;
+    testId?: string;
+    contentClassName?: string;
+}): import("react").JSX.Element;
+export declare function SettingsNavAside({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SettingsNavItem({ icon, label, active, onClick, }: {
+    icon: ReactNode;
+    label: string;
+    active: boolean;
+    onClick: () => void;
+}): import("react").JSX.Element;
+export declare function SettingsSectionHeader({ title, hint }: {
+    title: string;
+    hint?: string;
+}): import("react").JSX.Element;
+/**
+ * The "slide over to a sub-page" pattern. A section renders its list inside a
+ * scope; opening an editor pushes a sub-page that slides in over the whole
+ * content pane (back button + editor), instead of stacking a nested dialog.
+ * The list stays mounted underneath so its state (selection, scroll) survives a
+ * round-trip.
+ */
+type SettingsSubpageApi = {
+    subpage: ReactNode | null;
+    open: (node: ReactNode) => void;
+    close: () => void;
+};
+export declare function useSettingsSubpage(): Pick<SettingsSubpageApi, 'open' | 'close'>;
+export declare function SettingsSubpageScope({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/settings-dialog-shell.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from 'react';
+import { cn } from '../lib/cn.js';
+import { DialogContent, DialogDescription, DialogTitle } from './dialog.js';
+/**
+ * Shared building blocks for the standard two-pane settings dialog (sidebar nav
+ * + content pane). The app-wide settings dialog and the calendar booking
+ * settings dialog compose these so they read as one system rather than each
+ * hand-rolling its own shell.
+ */
+export function SettingsDialogShell({ title, description, nav, children, testId, contentClassName, }) {
+    return (_jsxs(DialogContent, { showCloseButton: true, "data-testid": testId, className: cn('gap-0 overflow-hidden p-0', 'h-[min(900px,94vh)] sm:max-w-[min(1180px,94vw)]', 'grid grid-cols-[260px_1fr] grid-rows-1'), children: [_jsx(DialogTitle, { className: "sr-only", children: title }), description ? (_jsx(DialogDescription, { className: "sr-only", children: description })) : null, nav, _jsx("div", { className: cn('bg-background min-w-0', contentClassName), children: children })] }));
+}
+export function SettingsNavAside({ children }) {
+    return (_jsx("aside", { className: "border-border bg-sidebar flex min-h-0 flex-col border-r", children: children }));
+}
+export function SettingsNavItem({ icon, label, active, onClick, }) {
+    return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: onClick, "data-active": active || undefined, "aria-current": active ? 'page' : undefined, className: cn('flex h-7 w-full cursor-pointer items-center gap-2 rounded-md px-2 text-[12.5px] transition-colors', active
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                : 'text-sidebar-foreground/85 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground'), children: [_jsx("span", { className: cn('shrink-0', active ? 'text-primary' : 'text-muted-foreground'), children: icon }), _jsx("span", { className: "truncate", children: label })] }) }));
+}
+export function SettingsSectionHeader({ title, hint }) {
+    return (_jsxs("header", { className: "mb-6", children: [_jsx("h2", { className: "text-[22px] font-semibold tracking-tight", children: title }), hint ? (_jsx("p", { className: "text-muted-foreground mt-1.5 text-[13px] leading-relaxed", children: hint })) : null] }));
+}
+const NOOP_SUBPAGE = {
+    open: () => { },
+    close: () => { },
+};
+const SettingsSubpageContext = createContext(null);
+export function useSettingsSubpage() {
+    return useContext(SettingsSubpageContext) ?? NOOP_SUBPAGE;
+}
+export function SettingsSubpageScope({ children, className, }) {
+    const [subpage, setSubpage] = useState(null);
+    const triggerRef = useRef(null);
+    const open = useCallback((node) => {
+        triggerRef.current =
+            document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        setSubpage(node);
+    }, []);
+    const close = useCallback(() => {
+        setSubpage(null);
+        requestAnimationFrame(() => triggerRef.current?.focus());
+    }, []);
+    const api = useMemo(() => ({ subpage, open, close }), [close, open, subpage]);
+    return (_jsx(SettingsSubpageContext.Provider, { value: api, children: _jsxs("div", { className: cn('relative flex min-h-0 flex-1 flex-col', className), children: [_jsx("div", { "aria-hidden": subpage != null ? true : undefined, inert: subpage != null ? true : undefined, className: "flex min-h-0 flex-1 flex-col", children: children }), subpage != null ? (_jsx("div", { role: "group", "data-testid": "settings-subpage", className: "bg-background animate-in fade-in-0 slide-in-from-right-4 absolute inset-0 z-10 flex min-h-0 flex-col overflow-y-auto px-10 py-8 duration-200 motion-reduce:animate-none", children: subpage })) : null] }) }));
+}

package/dist/components/shimmer-text.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { type HTMLMotionProps } from 'motion/react';
+export interface ShimmerTextProps extends Omit<HTMLMotionProps<'span'>, 'children'> {
+    children: string | number;
+    duration?: number;
+    spread?: number;
+}
+export declare const ShimmerText: React.NamedExoticComponent<Omit<ShimmerTextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/shimmer-text.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { motion, useReducedMotion } from 'motion/react';
+import { cn } from '../lib/cn.js';
+const ShimmerTextComponent = React.forwardRef(function ShimmerText({ children, className, duration = 2, spread = 2, style, ...props }, forwardedRef) {
+    const reducedMotion = useReducedMotion();
+    const dynamicSpread = React.useMemo(() => `${String(children).length * spread}px`, [children, spread]);
+    const backgroundImage = reducedMotion
+        ? 'linear-gradient(var(--base-color), var(--base-color))'
+        : 'var(--bg), linear-gradient(var(--base-color), var(--base-color))';
+    return (_jsx(motion.span, { ref: forwardedRef, "data-slot": "shimmer-text", className: cn('relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent', '[--base-color:color-mix(in_oklch,var(--foreground)_30%,transparent)] [--base-gradient-color:var(--foreground)]', '[background-repeat:no-repeat,padding-box]', '[--bg:linear-gradient(90deg,transparent_calc(50%-var(--spread)),var(--base-gradient-color),transparent_calc(50%+var(--spread)))]', className), 
+        // Keyframes, not an initial→animate delta: nested under an AnimatePresence
+        // the presence context suppresses `initial`, which would freeze the sweep
+        // at its end position and leave the text flat.
+        animate: reducedMotion ? undefined : { backgroundPosition: ['100% center', '0% center'] }, transition: {
+            repeat: Number.POSITIVE_INFINITY,
+            duration,
+            ease: 'linear',
+        }, style: {
+            '--spread': dynamicSpread,
+            backgroundImage,
+            ...style,
+        }, ...props, children: children }));
+});
+export const ShimmerText = React.memo(ShimmerTextComponent);

package/dist/components/side-panel-tokens.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The ring means focus and only focus. It also stands in while a menu the row opened
+ * holds focus in the row's place — its own context menu, or a menu among its trailing
+ * actions — so right-clicking a row never reads as losing your place in the list. The
+ * context menu is read from `ContextMenuTrigger`, whether the row is the trigger or
+ * sits inside one.
+ *
+ * It deliberately ignores the row's own `data-state`: a hover card stamps that same
+ * attribute on the row it opens from, and hovering is not focus.
+ */
+export declare const sidePanelRowFocusClassName: string;
+export declare const sidePanelRowBaseClassName: string;
+export declare const sidePanelRowInactiveTextClassName = "text-muted-foreground";
+export declare const sidePanelRowActiveTextClassName = "text-foreground";
+export declare const sidePanelRowIdleClassName: string;
+export declare const sidePanelRowSelectedClassName: string;
+/**
+ * Keeps a row wearing its hover surface for as long as the hover card it triggers is
+ * open, so the row and the card read as one thing instead of two. Pairs with
+ * `HoverCardTrigger`, which supplies the `group/hover-card` this hangs off.
+ */
+export declare const sidePanelRowHoverCardOpenClassName: string;
+export declare function sidePanelRowClassName({ selected, interactive, className, }?: {
+    selected?: boolean;
+    interactive?: boolean;
+    className?: string;
+}): string;

package/dist/components/side-panel-tokens.js

@@ -0,0 +1,26 @@
+import { cn } from '../lib/cn.js';
+/**
+ * The ring means focus and only focus. It also stands in while a menu the row opened
+ * holds focus in the row's place — its own context menu, or a menu among its trailing
+ * actions — so right-clicking a row never reads as losing your place in the list. The
+ * context menu is read from `ContextMenuTrigger`, whether the row is the trigger or
+ * sits inside one.
+ *
+ * It deliberately ignores the row's own `data-state`: a hover card stamps that same
+ * attribute on the row it opens from, and hovering is not focus.
+ */
+export const sidePanelRowFocusClassName = cn('outline-none', 'focus-within:ring-ring focus-within:ring-1 focus-within:ring-inset', 'data-[context-menu-open]:ring-ring data-[context-menu-open]:ring-1 data-[context-menu-open]:ring-inset', 'group-data-[context-menu-open]/context-menu:ring-ring group-data-[context-menu-open]/context-menu:ring-1 group-data-[context-menu-open]/context-menu:ring-inset', 'has-[[data-slot=row-actions]_[data-state=open]]:ring-ring has-[[data-slot=row-actions]_[data-state=open]]:ring-1 has-[[data-slot=row-actions]_[data-state=open]]:ring-inset');
+export const sidePanelRowBaseClassName = cn('relative flex h-7 w-full items-center gap-1.5 rounded-md px-2 text-left text-[12.5px] transition-colors [--row-surface:var(--side-panel-row-surface)]', sidePanelRowFocusClassName);
+export const sidePanelRowInactiveTextClassName = 'text-muted-foreground';
+export const sidePanelRowActiveTextClassName = 'text-foreground';
+export const sidePanelRowIdleClassName = cn(sidePanelRowInactiveTextClassName, 'hover:bg-(--side-panel-row-hover-surface) hover:[--side-panel-row-surface:var(--side-panel-row-hover-surface)] hover:text-foreground', 'focus-within:bg-(--side-panel-row-hover-surface) focus-within:[--side-panel-row-surface:var(--side-panel-row-hover-surface)] focus-within:text-foreground', 'data-[state=open]:bg-(--side-panel-row-hover-surface) data-[state=open]:[--side-panel-row-surface:var(--side-panel-row-hover-surface)] data-[state=open]:text-foreground', 'has-[[data-state=open]]:bg-(--side-panel-row-hover-surface) has-[[data-state=open]]:[--side-panel-row-surface:var(--side-panel-row-hover-surface)] has-[[data-state=open]]:text-foreground', 'data-[context-menu-open]:bg-(--side-panel-row-hover-surface) data-[context-menu-open]:[--side-panel-row-surface:var(--side-panel-row-hover-surface)] data-[context-menu-open]:text-foreground', 'group-data-[context-menu-open]/context-menu:bg-(--side-panel-row-hover-surface) group-data-[context-menu-open]/context-menu:[--side-panel-row-surface:var(--side-panel-row-hover-surface)] group-data-[context-menu-open]/context-menu:text-foreground');
+export const sidePanelRowSelectedClassName = cn('bg-(--side-panel-row-selected-surface) [--side-panel-row-surface:var(--side-panel-row-selected-surface)]', 'hover:bg-(--side-panel-row-selected-surface) hover:[--side-panel-row-surface:var(--side-panel-row-selected-surface)]', 'focus-within:bg-(--side-panel-row-selected-surface) focus-within:[--side-panel-row-surface:var(--side-panel-row-selected-surface)]', 'data-[state=open]:bg-(--side-panel-row-selected-surface) data-[state=open]:[--side-panel-row-surface:var(--side-panel-row-selected-surface)]', 'has-[[data-state=open]]:bg-(--side-panel-row-selected-surface) has-[[data-state=open]]:[--side-panel-row-surface:var(--side-panel-row-selected-surface)]', 'data-[context-menu-open]:bg-(--side-panel-row-selected-surface) data-[context-menu-open]:[--side-panel-row-surface:var(--side-panel-row-selected-surface)]', 'group-data-[context-menu-open]/context-menu:bg-(--side-panel-row-selected-surface) group-data-[context-menu-open]/context-menu:[--side-panel-row-surface:var(--side-panel-row-selected-surface)]', sidePanelRowActiveTextClassName);
+/**
+ * Keeps a row wearing its hover surface for as long as the hover card it triggers is
+ * open, so the row and the card read as one thing instead of two. Pairs with
+ * `HoverCardTrigger`, which supplies the `group/hover-card` this hangs off.
+ */
+export const sidePanelRowHoverCardOpenClassName = cn('group-data-[state=open]/hover-card:bg-(--side-panel-row-hover-surface)', 'group-data-[state=open]/hover-card:[--side-panel-row-surface:var(--side-panel-row-hover-surface)]', 'group-data-[state=open]/hover-card:text-foreground');
+export function sidePanelRowClassName({ selected, interactive = true, className, } = {}) {
+    return cn(sidePanelRowBaseClassName, interactive && 'cursor-pointer', selected ? sidePanelRowSelectedClassName : sidePanelRowIdleClassName, className);
+}