@streamsai/ui 0.0.0-stage → 0.1.0

package/dist/components/ui/sidebar.js

@@ -0,0 +1,283 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+import { motion } from '../../motion/index.js';
+import { transitions } from '../../motion/config.js';
+import { useIsMobile } from '../../hooks/use-mobile.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Separator } from './separator.js';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from './sheet.js';
+import { Skeleton } from './skeleton.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip.js';
+import { PanelLeft as PanelLeftIcon } from '../../icons/index.js';
+const SIDEBAR_WIDTH = 'var(--nav-w)';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = 'var(--nav-w-icon)';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+// Attribute selector, not `isContentEditable`: jsdom does not implement that property.
+const EDITABLE_SELECTOR = 'input, textarea, select, [contenteditable]:not([contenteditable="false"])';
+const isEditableTarget = (target) => target instanceof Element && target.closest(EDITABLE_SELECTOR) !== null;
+const SidebarContext = React.createContext(null);
+function useSidebar() {
+    const context = React.useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebar must be used within a SidebarProvider.');
+    }
+    return context;
+}
+function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback((value) => {
+        const openState = typeof value === 'function' ? value(open) : value;
+        if (setOpenProp) {
+            setOpenProp(openState);
+        }
+        else {
+            _setOpen(openState);
+        }
+        // This sets the cookie to keep the sidebar state.
+    }, [setOpenProp, open]);
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+        return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+    // Adds a keyboard shortcut to toggle the sidebar. A focused editor owns the chord (the rich
+    // text editor makes text bold on it), so the shortcut yields when the key press was already
+    // handled or comes from an editable field.
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.defaultPrevented || isEditableTarget(event.target))
+                return;
+            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [toggleSidebar]);
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? 'expanded' : 'collapsed';
+    const contextValue = React.useMemo(() => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+    }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "sidebar-wrapper", style: {
+                '--sidebar-width': SIDEBAR_WIDTH,
+                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                ...style,
+            }, className: cn('group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar', className), ...props, children: children }) }));
+}
+function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, dir, ...props }) {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    if (collapsible === 'none') {
+        return (_jsx("div", { "data-slot": "sidebar", className: cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className), ...props, children: children }));
+    }
+    if (isMobile) {
+        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { dir: dir, "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
+                    '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+                }, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
+    }
+    const iconGapWidth = variant === 'floating' || variant === 'inset'
+        ? 'calc(var(--sidebar-width-icon) + 1rem)'
+        : 'var(--sidebar-width-icon)';
+    const gapWidth = state === 'collapsed'
+        ? collapsible === 'offcanvas'
+            ? '0px'
+            : iconGapWidth
+        : 'var(--sidebar-width)';
+    const containerX = state === 'collapsed' && collapsible === 'offcanvas'
+        ? side === 'left'
+            ? 'calc(var(--sidebar-width) * -1)'
+            : 'var(--sidebar-width)'
+        : '0px';
+    const containerWidth = state === 'collapsed' && collapsible === 'icon'
+        ? variant === 'floating' || variant === 'inset'
+            ? 'calc(var(--sidebar-width-icon) + 1rem + 2px)'
+            : 'var(--sidebar-width-icon)'
+        : 'var(--sidebar-width)';
+    return (_jsxs("div", { className: "group peer hidden text-sidebar-foreground md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx(motion.div, { "data-slot": "sidebar-gap", initial: false, animate: { width: gapWidth }, transition: transitions.base, className: cn('relative bg-transparent', side === 'right' && 'rotate-180') }), _jsx(motion.div, { "data-slot": "sidebar-container", "data-side": side, initial: false, animate: { x: containerX, width: containerWidth }, transition: transitions.base, className: cn('fixed inset-y-0 z-(--z-sticky) hidden h-svh w-(--sidebar-width) md:flex', side === 'left' ? 'left-0' : 'right-0', 
+                // Adjust the padding for floating and inset variants.
+                variant === 'floating' || variant === 'inset'
+                    ? 'p-2'
+                    : side === 'left'
+                        ? 'border-r'
+                        : 'border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border", children: children }) })] }));
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+    const { toggleSidebar } = useSidebar();
+    return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon-sm", className: cn(className), onClick: (event) => {
+            onClick?.(event);
+            toggleSidebar();
+        }, ...props, children: [_jsx(PanelLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
+}
+function SidebarRail({ className, ...props }) {
+    const { toggleSidebar } = useSidebar();
+    return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('absolute inset-y-0 z-20 hidden w-4 transition-colors group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className), ...props }));
+}
+function SidebarInset({ className, ...props }) {
+    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2', className), ...props }));
+}
+function SidebarInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn('h-8 w-full bg-background shadow-none', className), ...props }));
+}
+function SidebarHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className), ...props }));
+}
+function SidebarFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className), ...props }));
+}
+function SidebarSeparator({ className, ...props }) {
+    return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn('mx-2 w-auto bg-sidebar-border', className), ...props }));
+}
+function SidebarContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn('no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className), ...props }));
+}
+function SidebarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className), ...props }));
+}
+function SidebarGroupLabel({ className, render, ...props }) {
+    const { state: sidebarState } = useSidebar();
+    // Animate whenever collapsed; in offcanvas mode the sidebar is off-screen so the
+    // animation is hidden. In icon mode this collapses the label up into the sidebar.
+    const isIconCollapsed = sidebarState === 'collapsed';
+    const label = useRender({
+        defaultTagName: 'div',
+        props: mergeProps({
+            className: cn('flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', className),
+        }, props),
+        render,
+        state: {
+            slot: 'sidebar-group-label',
+            sidebar: 'group-label',
+        },
+    });
+    return (_jsx(motion.div, { initial: false, animate: { marginTop: isIconCollapsed ? '-32px' : '0px', opacity: isIconCollapsed ? 0 : 1 }, transition: transitions.base, children: label }));
+}
+function SidebarGroupAction({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'button',
+        props: mergeProps({
+            className: cn('absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0', className),
+        }, props),
+        render,
+        state: {
+            slot: 'sidebar-group-action',
+            sidebar: 'group-action',
+        },
+    });
+}
+function SidebarGroupContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn('w-full text-sm', className), ...props }));
+}
+function SidebarMenu({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-0', className), ...props }));
+}
+function SidebarMenuItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props }));
+}
+const sidebarMenuButtonVariants = cva('peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[active=true]:bg-selected data-[active=true]:font-medium data-[active=true]:text-selected-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate', {
+    variants: {
+        variant: {
+            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            outline: 'bg-background ring-1 ring-sidebar-border hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:ring-sidebar-accent',
+        },
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function SidebarMenuButton({ render, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props }) {
+    const { isMobile, state } = useSidebar();
+    const comp = useRender({
+        defaultTagName: 'button',
+        props: mergeProps({
+            className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+        }, props),
+        render: !tooltip ? render : _jsx(TooltipTrigger, { render: render }),
+        state: {
+            slot: 'sidebar-menu-button',
+            sidebar: 'menu-button',
+            size,
+            active: isActive,
+        },
+    });
+    if (!tooltip) {
+        return comp;
+    }
+    if (typeof tooltip === 'string') {
+        tooltip = {
+            children: tooltip,
+        };
+    }
+    return (_jsxs(Tooltip, { children: [comp, _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== 'collapsed' || isMobile, ...tooltip })] }));
+}
+function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
+    return useRender({
+        defaultTagName: 'button',
+        props: mergeProps({
+            className: cn('absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0', showOnHover &&
+                'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0', className),
+        }, props),
+        render,
+        state: {
+            slot: 'sidebar-menu-action',
+            sidebar: 'menu-action',
+        },
+    });
+}
+function SidebarMenuBadge({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn('pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground', className), ...props }));
+}
+function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
+    // Random width between 50 to 90%.
+    const [width] = React.useState(() => {
+        return `${Math.floor(Math.random() * 40) + 50}%`;
+    });
+    return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn('flex h-8 items-center gap-2 rounded-md px-2', className), ...props, children: [showIcon && _jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
+                    '--skeleton-width': width,
+                } })] }));
+}
+function SidebarMenuSub({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn('mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden', className), ...props }));
+}
+function SidebarMenuSubItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn('group/menu-sub-item relative', className), ...props }));
+}
+function SidebarMenuSubButton({ render, size = 'md', isActive = false, className, ...props }) {
+    return useRender({
+        defaultTagName: 'a',
+        props: mergeProps({
+            className: cn('flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground', className),
+        }, props),
+        render,
+        state: {
+            slot: 'sidebar-menu-sub-button',
+            sidebar: 'menu-sub-button',
+            size,
+            active: isActive,
+        },
+    });
+}
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };

package/dist/components/ui/skeleton.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { HTMLMotionProps } from '../../motion/index.js';
+type SkeletonProps = Omit<HTMLMotionProps<'div'>, 'children'> & {
+    children?: ReactNode;
+    /**
+     * `pulse` fades the block in and out. `shimmer` is Vibe's skeleton: a still block with a light
+     * band sweeping across it. Under reduced motion `shimmer` falls back to `pulse`, because the
+     * sweep is a transform and would otherwise freeze mid-flight.
+     */
+    variant?: 'pulse' | 'shimmer';
+};
+declare function Skeleton({ className, variant, children, ...props }: SkeletonProps): import("react").JSX.Element;
+export { Skeleton };
+export type { SkeletonProps };

package/dist/components/ui/skeleton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion, useReducedMotion } from '../../motion/index.js';
+import { loops } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+function Skeleton({ className, variant = 'pulse', children, ...props }) {
+    const reduceMotion = useReducedMotion();
+    if (variant === 'shimmer' && reduceMotion !== true) {
+        return (_jsxs(motion.div, { "data-slot": "skeleton", "data-variant": "shimmer", className: cn('relative isolate overflow-hidden rounded-md bg-muted', className), ...props, children: [_jsx(motion.span, { "aria-hidden": true, className: "absolute inset-0 bg-linear-to-r from-transparent via-background/70 to-transparent", initial: { transform: 'translateX(-100%)' }, animate: { transform: ['translateX(-100%)', 'translateX(100%)'] }, transition: loops.sweep }), children] }));
+    }
+    return (_jsx(motion.div, { "data-slot": "skeleton", animate: { opacity: [1, 0.4, 1] }, transition: loops.pulse, className: cn('rounded-md bg-muted', className), ...props, children: children }));
+}
+export { Skeleton };

package/dist/components/ui/sonner.d.ts

@@ -0,0 +1,4 @@
+import { Toaster as SonnerToaster } from 'sonner';
+export { toast } from 'sonner';
+declare function Toaster({ ...props }: React.ComponentProps<typeof SonnerToaster>): import("react").JSX.Element;
+export { Toaster };

package/dist/components/ui/sonner.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toaster as SonnerToaster } from 'sonner';
+export { toast } from 'sonner';
+function Toaster({ ...props }) {
+    return (_jsx(SonnerToaster, { "data-slot": "toaster", className: "toaster", toastOptions: {
+            classNames: {
+                toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+                description: 'group-[.toast]:text-muted-foreground',
+                actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+                cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+            },
+        }, ...props }));
+}
+export { Toaster };

package/dist/components/ui/spark-bars.d.ts

@@ -0,0 +1,29 @@
+export interface SparkBarsBar {
+    /** Short label for the bar (bucket range, day, …). */
+    label: string;
+    value: number;
+}
+export interface SparkBarsProps extends Omit<React.ComponentProps<'figure'>, 'children'> {
+    bars: readonly SparkBarsBar[];
+    /** Names the chart for assistive tech. Required. */
+    'aria-label': string;
+    /**
+     * `default` — full-width spark with axis end labels (standalone summary).
+     * `sm` — lean inline spark for table cells: short height, no axis labels.
+     */
+    size?: 'default' | 'sm';
+    /** Formats values in the tooltip and the screen-reader table; defaults to `String`. */
+    formatValue?: (value: number) => string;
+    /**
+     * Optional secondary string under the hover readout (e.g. exact spend when cents rounding
+     * hid precision).
+     */
+    formatValueDetail?: (value: number) => string | undefined;
+}
+/**
+ * Compact spark histogram: equal-width bars, soft entrance, one hover/focus readout.
+ * Hand-rolled (no chart library); colours from `--chart-1` only. Empty bars stay as a hairline
+ * so the distribution shape stays readable when a bucket has zero runs.
+ */
+declare function SparkBars({ bars, size, formatValue, formatValueDetail, className, 'aria-label': ariaLabel, ...props }: SparkBarsProps): import("react").JSX.Element;
+export { SparkBars };

package/dist/components/ui/spark-bars.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { AnimatePresence, motion } from '../../motion/index.js';
+import { presets, staggerDelay, transitions } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * Compact spark histogram: equal-width bars, soft entrance, one hover/focus readout.
+ * Hand-rolled (no chart library); colours from `--chart-1` only. Empty bars stay as a hairline
+ * so the distribution shape stays readable when a bucket has zero runs.
+ */
+function SparkBars({ bars, size = 'default', formatValue = String, formatValueDetail, className, 'aria-label': ariaLabel, ...props }) {
+    const [active, setActive] = useState(null);
+    const tableId = useId();
+    const max = Math.max(1, ...bars.map((bar) => bar.value));
+    const activeBar = active === null ? null : bars[active];
+    const activeDetail = activeBar ? formatValueDetail?.(activeBar.value) : undefined;
+    const activeLeft = active === null || bars.length < 1 ? 50 : ((active + 0.5) / bars.length) * 100;
+    const lean = size === 'sm';
+    return (_jsxs("figure", { "data-slot": "spark-bars", "data-size": size, "aria-label": ariaLabel, className: cn('relative flex flex-col text-xs text-muted-foreground', lean ? 'h-4 w-16 shrink-0 gap-0' : 'h-16 w-full gap-1', className), ...props, children: [_jsxs("div", { className: "relative min-h-0 flex-1", onMouseLeave: () => setActive(null), "aria-describedby": tableId, children: [_jsx("div", { className: "absolute inset-0 flex items-end gap-px", "aria-hidden": "true", children: bars.map((bar, index) => {
+                            const heightPct = bar.value <= 0 ? 0 : Math.max(lean ? 12 : 8, (bar.value / max) * 100);
+                            return (_jsx("div", { className: "flex h-full min-w-0 flex-1 items-end", children: _jsx(motion.div, { initial: { height: 0 }, animate: { height: bar.value <= 0 ? '1px' : `${heightPct}%` }, transition: { ...transitions.slow, delay: staggerDelay(index) }, "data-active": active === index || undefined, className: cn('w-full rounded-sm bg-chart-1/35', bar.value <= 0 && 'bg-border', active === index && 'bg-chart-1') }) }, `${bar.label}-${index}`));
+                        }) }), _jsx("div", { className: "absolute inset-0 flex", children: bars.map((bar, index) => (_jsx("button", { type: "button", "aria-label": `${bar.label}: ${formatValue(bar.value)}`, "data-active": active === index || undefined, className: "min-w-0 flex-1 cursor-crosshair rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50", onMouseEnter: () => setActive(index), onFocus: () => setActive(index), onBlur: () => setActive(null) }, `${bar.label}-${index}`))) }), _jsx(AnimatePresence, { children: activeBar ? (_jsxs(motion.div, { ...presets.fade, role: "presentation", "aria-hidden": "true", "data-slot": "spark-bars-tooltip", className: cn('pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-full whitespace-nowrap rounded-md bg-foreground text-xs text-background shadow-md', lean ? '-top-0.5 px-1.5 py-0.5' : '-top-1 px-2 py-1'), style: { left: `${activeLeft}%` }, children: [_jsx("span", { className: "font-semibold tabular-nums", children: formatValue(activeBar.value) }), _jsx("span", { className: "ms-1.5 opacity-70", children: activeBar.label }), activeDetail ? (_jsx("div", { className: "mt-0.5 opacity-70 tabular-nums", children: activeDetail })) : null] }, "tooltip")) : null })] }), !lean && bars.length > 0 ? (_jsxs("div", { className: "flex justify-between tabular-nums", "aria-hidden": "true", children: [_jsx("span", { className: "truncate", children: bars[0]?.label }), bars.length > 1 ? (_jsx("span", { className: "truncate text-end", children: bars[bars.length - 1]?.label })) : null] })) : null, _jsxs("table", { id: tableId, className: "sr-only", children: [_jsx("caption", { children: ariaLabel }), _jsx("tbody", { children: bars.map((bar, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: bar.label }), _jsx("td", { children: formatValue(bar.value) })] }, `${bar.label}-${index}`))) })] })] }));
+}
+export { SparkBars };

package/dist/components/ui/spinner.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLMotionProps } from '../../motion/index.js';
+/**
+ * Spinning loading indicator. The rotation is driven by motion.dev, so it honours
+ * `MotionProvider`'s `reducedMotion` setting and the `disableMotion()` test helper.
+ * The wrapper span carries the ARIA role; the SVG is hidden from assistive tech.
+ * Pass `className` to size/colour the icon; all other props forward to the wrapper span.
+ *
+ * Both loops run as browser (WAAPI) animations, off the main thread: the turn animates the whole
+ * `transform` (motion would drive `rotate` frame by frame in JS).
+ *
+ * Reduced motion: the spinner stops turning and only pulses, so it still reads as loading.
+ * `MotionProvider` drops `rotate`, `x` and the like under `prefers-reduced-motion`, but not a
+ * whole `transform`, so the spinner checks for itself.
+ */
+declare function Spinner({ className, ...props }: HTMLMotionProps<'span'>): import("react").JSX.Element;
+export { Spinner };

package/dist/components/ui/spinner.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useReducedMotion } from '../../motion/index.js';
+import { loopAnimate, loopTransition } from '../../motion/config.js';
+import { LoaderCircle as Loader2Icon } from '../../icons/index.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * Spinning loading indicator. The rotation is driven by motion.dev, so it honours
+ * `MotionProvider`'s `reducedMotion` setting and the `disableMotion()` test helper.
+ * The wrapper span carries the ARIA role; the SVG is hidden from assistive tech.
+ * Pass `className` to size/colour the icon; all other props forward to the wrapper span.
+ *
+ * Both loops run as browser (WAAPI) animations, off the main thread: the turn animates the whole
+ * `transform` (motion would drive `rotate` frame by frame in JS).
+ *
+ * Reduced motion: the spinner stops turning and only pulses, so it still reads as loading.
+ * `MotionProvider` drops `rotate`, `x` and the like under `prefers-reduced-motion`, but not a
+ * whole `transform`, so the spinner checks for itself.
+ */
+function Spinner({ className, ...props }) {
+    const reduceMotion = useReducedMotion();
+    return (_jsx(motion.span, { role: "status", "aria-label": "Loading", "data-slot": "spinner", 
+        // Stable refs from `loopAnimate` / `loopTransition` — a fresh animate object each render
+        // restarts the loop (agent Trace re-renders often; leave/return looked frozen until refresh).
+        animate: reduceMotion ? loopAnimate.spinnerReduced : loopAnimate.spinner, transition: loopTransition.spinner, className: "inline-flex", ...props, children: _jsx(Loader2Icon, { className: cn('size-4', className), "aria-hidden": "true" }) }));
+}
+export { Spinner };

package/dist/components/ui/stacked-bar.d.ts

@@ -0,0 +1,37 @@
+export interface StackedBarSegment {
+    label: string;
+    value: number;
+    /** Picks one of the five chart steps; wraps past 5. */
+    colorIndex: number;
+}
+export interface StackedBarProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    segments: readonly StackedBarSegment[];
+    /** Names the bar for assistive tech. Required. */
+    'aria-label': string;
+    formatValue?: (value: number) => string;
+    /** Hide the legend under the bar when the host lists the segments itself. */
+    legend?: boolean;
+}
+/**
+ * Widths as percentages. A segment that would draw thinner than 2% is pinned to 2% so it stays
+ * visible and hoverable; the rest are scaled down to fill what remains.
+ */
+export declare const stackedBarWidths: (values: readonly number[]) => number[];
+/**
+ * One bar split into shares. Each segment is a focusable trigger with its own tooltip, so the
+ * breakdown is reachable by pointer and keyboard alike; the legend repeats every label with its
+ * share so nothing depends on hovering.
+ */
+declare function StackedBar({ segments, formatValue, legend, className, 'aria-label': ariaLabel, ...props }: StackedBarProps): import("react").JSX.Element;
+export interface StackedBarSkeletonProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** Segments and legend entries to draw, 1 to 3. */
+    segments?: 1 | 2 | 3;
+    /** Draw the legend line, as `StackedBar` does by default. */
+    legend?: boolean;
+}
+/**
+ * The loading shape of `StackedBar`: the same track split into still segments, and a legend line
+ * with a dot and a label stub for each segment.
+ */
+declare function StackedBarSkeleton({ segments, legend, className, ...props }: StackedBarSkeletonProps): import("react").JSX.Element;
+export { StackedBar, StackedBarSkeleton };

package/dist/components/ui/stacked-bar.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from '../../motion/index.js';
+import { staggerDelay, transitions } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+import { Skeleton } from './skeleton.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip.js';
+// Shared with `StackedBarSkeleton`: change a size here and the skeleton follows.
+const ROOT_CLASS = 'flex flex-col gap-3';
+const BAR_CLASS = 'flex h-3 w-full gap-px overflow-hidden rounded-full bg-muted';
+const LEGEND_CLASS = 'flex flex-wrap gap-x-4 gap-y-1 text-xs';
+const MIN_SHARE_PCT = 2;
+const CHART_CLASS = ['bg-chart-1', 'bg-chart-2', 'bg-chart-3', 'bg-chart-4', 'bg-chart-5'];
+const chartClass = (colorIndex) => CHART_CLASS[Math.abs(colorIndex) % CHART_CLASS.length];
+/**
+ * Widths as percentages. A segment that would draw thinner than 2% is pinned to 2% so it stays
+ * visible and hoverable; the rest are scaled down to fill what remains.
+ */
+export const stackedBarWidths = (values) => {
+    const total = values.reduce((sum, value) => sum + value, 0);
+    if (total <= 0)
+        return values.map(() => 0);
+    const raw = values.map((value) => (value / total) * 100);
+    const pinned = raw.map((share) => share > 0 && share < MIN_SHARE_PCT);
+    const pinnedTotal = pinned.filter(Boolean).length * MIN_SHARE_PCT;
+    const freeTotal = raw.reduce((sum, share, i) => (pinned[i] ? sum : sum + share), 0);
+    if (freeTotal <= 0)
+        return raw.map((share, i) => (pinned[i] ? MIN_SHARE_PCT : share));
+    const scale = (100 - pinnedTotal) / freeTotal;
+    return raw.map((share, i) => (pinned[i] ? MIN_SHARE_PCT : share * scale));
+};
+/**
+ * One bar split into shares. Each segment is a focusable trigger with its own tooltip, so the
+ * breakdown is reachable by pointer and keyboard alike; the legend repeats every label with its
+ * share so nothing depends on hovering.
+ */
+function StackedBar({ segments, formatValue = String, legend = true, className, 'aria-label': ariaLabel, ...props }) {
+    const total = segments.reduce((sum, segment) => sum + segment.value, 0);
+    const widths = stackedBarWidths(segments.map((segment) => segment.value));
+    const percent = (value) => (total > 0 ? Math.round((value / total) * 100) : 0);
+    return (_jsxs("div", { "data-slot": "stacked-bar", className: cn(ROOT_CLASS, className), ...props, children: [_jsx("div", { role: "group", "aria-label": ariaLabel, className: BAR_CLASS, children: segments.map((segment, index) => {
+                    const width = widths[index] ?? 0;
+                    if (width <= 0)
+                        return null;
+                    const description = `${segment.label}: ${formatValue(segment.value)} (${percent(segment.value)}%)`;
+                    return (_jsx(motion.div, { initial: { width: 0 }, animate: { width: `${width}%` }, transition: { ...transitions.slow, delay: staggerDelay(index) }, className: "h-full min-w-0 shrink-0", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { "aria-label": description, "data-slot": "stacked-bar-segment", className: cn('h-full w-full outline-none transition-opacity hover:opacity-80 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset', chartClass(segment.colorIndex)) }), _jsx(TooltipContent, { children: description })] }) }, `${segment.label}-${index}`));
+                }) }), legend && segments.length > 0 && (_jsx("ul", { "data-slot": "stacked-bar-legend", className: LEGEND_CLASS, children: segments.map((segment, index) => (_jsxs("li", { className: "flex items-center gap-1.5", children: [_jsx("span", { "aria-hidden": "true", className: cn('size-2 shrink-0 rounded-full', chartClass(segment.colorIndex)) }), _jsx("span", { className: "text-muted-foreground", children: segment.label }), _jsxs("span", { className: "font-medium tabular-nums", children: [percent(segment.value), "%"] })] }, `${segment.label}-${index}`))) }))] }));
+}
+const SKELETON_SHARES = ['w-1/2', 'w-[30%]', 'w-1/5'];
+/**
+ * The loading shape of `StackedBar`: the same track split into still segments, and a legend line
+ * with a dot and a label stub for each segment.
+ */
+function StackedBarSkeleton({ segments = 3, legend = true, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "stacked-bar-skeleton", "aria-hidden": "true", className: cn(ROOT_CLASS, className), ...props, children: [_jsx("div", { className: BAR_CLASS, children: SKELETON_SHARES.slice(0, segments).map((share) => (_jsx(Skeleton, { variant: "shimmer", className: cn('h-full shrink-0 rounded-none bg-foreground/10', share) }, share))) }), legend && (_jsx("div", { className: LEGEND_CLASS, children: Array.from({ length: segments }, (_, index) => (_jsxs("div", { className: "flex h-4 items-center gap-1.5", children: [_jsx(Skeleton, { variant: "shimmer", className: "size-2 shrink-0 rounded-full" }), _jsx(Skeleton, { variant: "shimmer", className: "h-3 w-16" })] }, index))) }))] }));
+}
+export { StackedBar, StackedBarSkeleton };

package/dist/components/ui/status-dot.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from 'class-variance-authority';
+declare const statusDotVariants: (props?: ({
+    status?: "done" | "working" | "stuck" | "idle" | "attention" | "unread" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface StatusDotProps extends VariantProps<typeof statusDotVariants> {
+    label: string;
+    className?: string;
+    /**
+     * `home` is the mobile Home dot: an 8px core in a fixed 12px box so every state lines up.
+     * Working is the `RunningIndicator` (green, pulsing halo) instead of the purple fade.
+     */
+    appearance?: 'default' | 'home';
+}
+declare function StatusDot({ status, size, label, className, appearance }: StatusDotProps): import("react").JSX.Element;
+export { StatusDot, statusDotVariants, type StatusDotProps };

package/dist/components/ui/status-dot.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { motion } from '../../motion/index.js';
+import { loops } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+import { RunningIndicator } from './running-indicator.js';
+const statusDotVariants = cva('inline-block shrink-0 rounded-full', {
+    variants: {
+        status: {
+            idle: 'bg-status-idle',
+            working: 'bg-status-working',
+            done: 'bg-status-done',
+            stuck: 'bg-status-stuck',
+            attention: 'bg-warning',
+            unread: 'bg-primary',
+        },
+        size: { sm: 'size-1.5', md: 'size-2' },
+    },
+    defaultVariants: { status: 'idle', size: 'md' },
+});
+function StatusDot({ status, size, label, className, appearance = 'default' }) {
+    const isWorking = status === 'working';
+    if (appearance === 'home') {
+        return isWorking ? (_jsx(RunningIndicator, { label: label, className: className })) : (_jsx(HomeStatusDot, { status: status, label: label, className: className }));
+    }
+    return (_jsx(motion.span, { role: "img", "aria-label": label, "data-slot": "status-dot", animate: isWorking ? { opacity: [1, 0.3, 1] } : { opacity: 1 }, transition: isWorking ? loops.pulse : { duration: 0 }, className: cn(statusDotVariants({ status, size }), className) }));
+}
+/** A resting Home dot, in the same 12px box as the `RunningIndicator` so rows line up. */
+function HomeStatusDot({ status, label, className, }) {
+    return (_jsx("span", { role: "img", "aria-label": label, "data-slot": "status-dot", "data-appearance": "home", className: cn('relative inline-grid size-3 shrink-0 place-items-center', className), children: _jsx("span", { "aria-hidden": true, "data-slot": "status-dot-core", className: cn('relative size-2 rounded-full', statusDotVariants({ status })) }) }));
+}
+export { StatusDot, statusDotVariants };

package/dist/components/ui/switch.d.ts

@@ -0,0 +1,5 @@
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+declare function Switch({ className, size, ...props }: SwitchPrimitive.Root.Props & {
+    size?: 'sm' | 'default';
+}): import("react").JSX.Element;
+export { Switch };

package/dist/components/ui/switch.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+import { motion } from '../../motion/index.js';
+import { transitions } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+/** Thumb slides to the checked position with a spring layout transition. */
+function renderSwitchThumb(props, state) {
+    return (_jsx(motion.div, { ...props, initial: false, animate: { x: state.checked ? 'calc(100% - 2px)' : '0px' }, transition: transitions.layout }));
+}
+function Switch({ className, size = 'default', ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn('peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", render: renderSwitchThumb, className: "pointer-events-none block rounded-full bg-background ring-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground" }) }));
+}
+export { Switch };