@streamsai/ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,14 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+/**
+ * `default` is shadcn's pill list (a raised background slides between tabs).
+ * `underline` is Vibe's tab list: text on a hairline, with a 2px primary bar under the active tab.
+ * `inverted` is a segmented control: a dark pill (`bg-inverted`) slides across a grey track.
+ */
+type TabsVariant = 'default' | 'underline' | 'inverted';
+declare function Tabs({ className, ...props }: TabsPrimitive.Root.Props): import("react").JSX.Element;
+declare function TabsList({ className, variant, ...props }: TabsPrimitive.List.Props & {
+    variant?: TabsVariant;
+}): import("react").JSX.Element;
+declare function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): import("react").JSX.Element;
+declare function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props): import("react").JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, type TabsVariant };

package/dist/components/ui/tabs.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId } from 'react';
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { LayoutGroup, motion } from '../../motion/index.js';
+import { transitions } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+const TabsVariantContext = createContext('default');
+function Tabs({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn('flex flex-col gap-2', className), ...props }));
+}
+function TabsList({ className, variant = 'default', ...props }) {
+    const id = useId();
+    return (_jsx(TabsVariantContext, { value: variant, children: _jsx(LayoutGroup, { id: id, children: _jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(variant === 'underline'
+                    ? 'flex items-stretch border-b border-border text-muted-foreground'
+                    : variant === 'inverted'
+                        ? 'inline-flex w-fit items-center justify-center gap-1 rounded-lg bg-secondary p-1 text-muted-foreground'
+                        : 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground', className), ...props }) }) }));
+}
+/**
+ * Render function for a tab trigger. Defined at module scope (stable reference).
+ * Conditionally renders a shared-layout motion span that slides between tabs.
+ * Base UI's TabsTabState uses `active` (not `selected`) for the current tab.
+ */
+const pillTabTrigger = (indicatorClassName) => (props, state) => {
+    const { children, ...rest } = props;
+    return (_jsxs("button", { ...rest, children: [state.active && (_jsx(motion.span, { layoutId: "tabs-active-bg", layout: true, 
+                // It slides between tabs through `layoutId` as it remounts. Re-measuring on every render
+                // would have it chase a tab list that is itself moving (a dialog or sheet arriving).
+                layoutDependency: 0, transition: transitions.layout, "aria-hidden": "true", className: cn('absolute inset-0 rounded-md', indicatorClassName) })), _jsx("span", { className: "relative", children: children })] }));
+};
+const renderTabTrigger = pillTabTrigger('bg-background shadow-sm');
+const renderInvertedTabTrigger = pillTabTrigger('bg-inverted');
+/** Same as `renderTabTrigger`, with the indicator drawn as Vibe's bar under the active tab. */
+function renderUnderlineTabTrigger(props, state) {
+    const { children, ...rest } = props;
+    return (_jsxs("button", { ...rest, children: [_jsx("span", { className: "relative", children: children }), state.active && (_jsx(motion.span, { layoutId: "tabs-active-underline", layout: true, layoutDependency: 0, transition: transitions.layout, "aria-hidden": "true", 
+                // -bottom-px covers the list's hairline so the bar reads as sitting on it.
+                className: "absolute inset-x-0 -bottom-px h-0.5 bg-primary" }))] }));
+}
+function TabsTrigger({ className, ...props }) {
+    const variant = useContext(TabsVariantContext);
+    return (_jsx(TabsPrimitive.Tab, { "data-slot": "tabs-trigger", render: variant === 'underline'
+            ? renderUnderlineTabTrigger
+            : variant === 'inverted'
+                ? renderInvertedTabTrigger
+                : renderTabTrigger, className: cn('relative inline-flex items-center justify-center whitespace-nowrap outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50', variant === 'underline'
+            ? 'h-10 rounded-t-sm px-4 text-sm font-normal hover:bg-accent hover:text-foreground data-active:text-primary'
+            : variant === 'inverted'
+                ? 'h-8 rounded-md px-4 text-compact font-semibold data-active:text-inverted-foreground'
+                : 'rounded-md px-3 py-1 text-sm font-medium data-active:text-foreground', className), ...props }));
+}
+function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Panel, { "data-slot": "tabs-content", className: cn('flex-1 outline-none', className), ...props }));
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,27 @@
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Token-backed typography primitive.
+ *
+ * Mirrors Vibe's `type` / `color` / `weight` prop surface so existing call
+ * sites migrate without style regressions. Heading types (`h1`–`h6`) render
+ * as the correct HTML element by default; text types render as `<span>`.
+ * Use the `render` prop to swap the underlying element without losing variants.
+ */
+declare const textVariants: (props?: ({
+    type?: "h3" | "base" | "h1" | "h2" | "h4" | "h5" | "h6" | "sm" | "lg" | "xl" | "xs" | null | undefined;
+    color?: "inherit" | "destructive" | "muted" | "primary" | "foreground" | "accent" | null | undefined;
+    weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextProps = useRender.ComponentProps<'span'> & VariantProps<typeof textVariants> & {
+    /** Truncate overflowing text with an ellipsis. Shows a tooltip with the full text by default. */
+    ellipsis?: boolean;
+    /**
+     * Only with `ellipsis`. `false` turns the tooltip off; a string overrides its content (needed
+     * when the children are not plain text). Default: the children's text.
+     */
+    tooltip?: boolean | string;
+};
+declare function Text({ className, type, color, weight, size, render, ellipsis, tooltip, ...props }: TextProps): import("react").JSX.Element;
+export { Text, textVariants, type TextProps };

package/dist/components/ui/text.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { useRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+import { TruncationTooltip, useTruncationTooltip } from './truncate.js';
+/**
+ * Token-backed typography primitive.
+ *
+ * Mirrors Vibe's `type` / `color` / `weight` prop surface so existing call
+ * sites migrate without style regressions. Heading types (`h1`–`h6`) render
+ * as the correct HTML element by default; text types render as `<span>`.
+ * Use the `render` prop to swap the underlying element without losing variants.
+ */
+const textVariants = cva('', {
+    variants: {
+        /**
+         * Typography scale. Heading types (`h1`–`h6`) carry `scroll-m-20`,
+         * `tracking-tight`, and `font-semibold`; text types set only line-height.
+         * Pass `weight` to override the weight on any type.
+         */
+        type: {
+            h1: 'scroll-m-20 text-4xl font-semibold tracking-tight',
+            h2: 'scroll-m-20 text-3xl font-semibold tracking-tight',
+            h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',
+            h4: 'scroll-m-20 text-xl font-semibold tracking-tight',
+            h5: 'scroll-m-20 text-lg font-semibold tracking-tight',
+            h6: 'scroll-m-20 text-base font-semibold tracking-tight',
+            xl: 'text-xl leading-relaxed',
+            lg: 'text-lg leading-relaxed',
+            base: 'text-base leading-normal',
+            sm: 'text-sm leading-normal',
+            xs: 'text-xs leading-normal',
+        },
+        /** Semantic colour mapped to a design-token utility. Never a raw hex. */
+        color: {
+            foreground: 'text-foreground',
+            muted: 'text-muted-foreground',
+            primary: 'text-primary',
+            destructive: 'text-destructive',
+            accent: 'text-accent-foreground',
+            inherit: 'text-inherit',
+        },
+        /** Font weight. Overrides any weight baked into the `type` variant. */
+        weight: {
+            normal: 'font-normal',
+            medium: 'font-medium',
+            semibold: 'font-semibold',
+            bold: 'font-bold',
+        },
+        /** Body size scale. Maps to design token text-body-* utilities. */
+        size: {
+            sm: 'text-body-3',
+            default: 'text-body-2',
+            lg: 'text-body-1',
+        },
+    },
+    defaultVariants: {
+        type: 'base',
+        color: 'foreground',
+        // weight has no default — when unset, the type variant's weight (font-semibold
+        // on headings) applies. Explicitly passing weight overrides it via tailwind-merge.
+        // size has no default — it only applies when explicitly passed.
+    },
+});
+/**
+ * Returns the default HTML element for a given `type` variant.
+ * Heading types map to the matching heading element; all others use `span`.
+ */
+function tagForType(type) {
+    if (type === 'h1')
+        return 'h1';
+    if (type === 'h2')
+        return 'h2';
+    if (type === 'h3')
+        return 'h3';
+    if (type === 'h4')
+        return 'h4';
+    if (type === 'h5')
+        return 'h5';
+    if (type === 'h6')
+        return 'h6';
+    return 'span';
+}
+function Text({ className, type = 'base', color = 'foreground', weight, size, render, ellipsis = false, tooltip = true, ...props }) {
+    const ref = useRef(null);
+    const truncation = useTruncationTooltip(ref, ellipsis, tooltip, props.children);
+    const element = useRender({
+        defaultTagName: tagForType(type),
+        ref,
+        props: mergeProps({
+            className: cn(textVariants({ type, color, weight, size }), ellipsis && 'block max-w-full truncate', className),
+        }, props),
+        render,
+        state: { slot: 'text', type, color, weight, size },
+    });
+    return (_jsx(TruncationTooltip, { text: truncation.text, truncated: truncation.truncated, children: element }));
+}
+export { Text, textVariants };

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Textarea({ className, ...props }: React.ComponentProps<'textarea'>): React.JSX.Element;
+export { Textarea };

package/dist/components/ui/textarea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn('flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-placeholder focus-visible:border-ring disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:opacity-100 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40', className), ...props }));
+}
+export { Textarea };

package/dist/components/ui/theme-toggle.d.ts

@@ -0,0 +1,21 @@
+import { type Theme } from '../../theme/index.js';
+interface ThemeToggleProps {
+    labels: {
+        legend: string;
+        system: string;
+        light: string;
+        dark: string;
+    };
+    className?: string;
+    /**
+     * Dense 28px icon hits for menus (account menu, browser toolbar). Default matches
+     * the Settings Appearance card.
+     */
+    compact?: boolean;
+    /** When set, names the group instead of `labels.legend` (visible label beside the toggles). */
+    labelledBy?: string;
+    /** Fired after the theme preference changes (Settings analytics). */
+    onThemeChange?: (theme: Theme) => void;
+}
+declare function ThemeToggle({ labels, className, compact, labelledBy, onThemeChange, }: ThemeToggleProps): import("react").JSX.Element;
+export { ThemeToggle, type ThemeToggleProps };

package/dist/components/ui/theme-toggle.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { Sun, Moon, Monitor } from '../../icons/index.js';
+import { useTheme } from '../../theme/index.js';
+import { ToggleGroup, ToggleGroupItem } from './toggle-group.js';
+function ThemeToggle({ labels, className, compact = false, labelledBy, onThemeChange, }) {
+    const { theme, setTheme } = useTheme();
+    const itemClass = compact ? 'size-7 shrink-0 p-0' : undefined;
+    return (_jsxs(ToggleGroup, { "aria-label": labelledBy ? undefined : labels.legend, "aria-labelledby": labelledBy, value: [theme], onValueChange: (vals) => {
+            const next = vals[vals.length - 1];
+            if (!next)
+                return;
+            setTheme(next);
+            onThemeChange?.(next);
+        }, className: cn('gap-0.5', className), children: [_jsx(ToggleGroupItem, { value: "system", "aria-label": labels.system, title: labels.system, className: itemClass, children: _jsx(Monitor, { className: "size-3.5" }) }), _jsx(ToggleGroupItem, { value: "light", "aria-label": labels.light, title: labels.light, className: itemClass, children: _jsx(Sun, { className: "size-3.5" }) }), _jsx(ToggleGroupItem, { value: "dark", "aria-label": labels.dark, title: labels.dark, className: itemClass, children: _jsx(Moon, { className: "size-3.5" }) })] }));
+}
+export { ThemeToggle };

package/dist/components/ui/toggle-group.d.ts

@@ -0,0 +1,6 @@
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import { Toggle } from '@base-ui/react/toggle';
+/** `multiple` allows several items pressed simultaneously (toolbar-style); default is single-select. */
+declare function ToggleGroup<Value extends string>({ className, ...props }: ToggleGroupPrimitive.Props<Value>): import("react").JSX.Element;
+declare function ToggleGroupItem<Value extends string>({ className, ...props }: Toggle.Props<Value>): import("react").JSX.Element;
+export { ToggleGroup, ToggleGroupItem };

package/dist/components/ui/toggle-group.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import { Toggle } from '@base-ui/react/toggle';
+import { cn } from '../../lib/utils.js';
+/** `multiple` allows several items pressed simultaneously (toolbar-style); default is single-select. */
+function ToggleGroup({ className, ...props }) {
+    return (_jsx(ToggleGroupPrimitive, { "data-slot": "toggle-group", className: cn('inline-flex items-center justify-center gap-1 rounded-md', className), ...props }));
+}
+function ToggleGroupItem({ className, ...props }) {
+    return (_jsx(Toggle, { "data-slot": "toggle-group-item", className: cn('inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-pressed:bg-accent data-pressed:text-accent-foreground', className), ...props }));
+}
+export { ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,11 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+import { type PopupVariant } from '../../motion/popup.js';
+declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react").JSX.Element;
+declare function Tooltip({ actionsRef, onOpenChange, ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
+declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, // Vibe: the arrow sits 10px off the trigger
+align, alignOffset, collisionAvoidance, motion, children, ...props }: TooltipPrimitive.Popup.Props & {
+    /** `drift-tip` fades and rises without the scale, for a tip on a dense form. */
+    motion?: Extract<PopupVariant, 'scale' | 'drift-tip'>;
+} & Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'collisionAvoidance'>): import("react").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/components/ui/tooltip.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+import { cn } from '../../lib/utils.js';
+import { PopupExitContext, usePopupExit, usePopupRender } from '../../motion/popup.js';
+function TooltipProvider({ delay = 0, ...props }) {
+    return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props });
+}
+function Tooltip({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, side = 'top', sideOffset = 10, // Vibe: the arrow sits 10px off the trigger
+align = 'center', alignOffset = 0, collisionAvoidance, motion = 'scale', children, ...props }) {
+    const renderPopup = usePopupRender(motion);
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionAvoidance: collisionAvoidance, className: "isolate z-(--z-dropdown)", children: _jsxs(TooltipPrimitive.Popup, { render: renderPopup, "data-slot": "tooltip-content", className: cn('z-(--z-dropdown) inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-[4px] bg-inverted px-4 py-2 text-body-2 text-inverted-foreground shadow-md has-data-[slot=kbd]:pr-3 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-10 **:data-[slot=kbd]:rounded-sm', className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "z-10 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-inverted fill-inverted data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })] }) }) }));
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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

@@ -0,0 +1,24 @@
+import { type ComponentProps } from 'react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible.js';
+type TraceStatus = 'running' | 'done' | 'error' | 'pending';
+/** shadcn Trace, adapted: a semantic list of steps. Each step is a `TraceItem` holding a `TraceLine`. */
+declare function Trace({ className, ...props }: ComponentProps<'ul'>): import("react").JSX.Element;
+declare function TraceItem({ className, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
+type TraceLineProps = ComponentProps<'span'> & {
+    status?: TraceStatus;
+    /** Screen-reader text for the status ("Done", "In progress"). The icon itself is hidden. */
+    statusLabel?: string;
+};
+declare function TraceLine({ className, status, statusLabel, children, ...props }: TraceLineProps): import("react").JSX.Element;
+declare function TraceIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+/** The icon for the enclosing line's status: spinner, check, alert, or a quiet dot. */
+declare function TraceStatusIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+/** The line's label. While the line is `running` and the label is a string it shimmers. */
+declare function TraceTitle({ className, children, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+declare function TraceDescription({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+declare function TraceCollapsible({ className, ...props }: ComponentProps<typeof Collapsible>): import("react").JSX.Element;
+/** A real button holding a `TraceLine` and a turning chevron. Never nest another button inside. */
+declare function TraceCollapsibleTrigger({ className, children, ...props }: ComponentProps<typeof CollapsibleTrigger>): import("react").JSX.Element;
+/** Opens and shuts with the shared collapse motion; closed content is not in the DOM. */
+declare function TraceCollapsibleContent({ className, children, ...props }: ComponentProps<typeof CollapsibleContent>): import("react").JSX.Element;
+export { Trace, TraceItem, TraceLine, TraceIcon, TraceStatusIcon, TraceTitle, TraceDescription, TraceCollapsible, TraceCollapsibleTrigger, TraceCollapsibleContent, type TraceStatus, type TraceLineProps, };

package/dist/components/ui/trace.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { cn } from '../../lib/utils.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible.js';
+import { ShimmerText } from './shimmer-text.js';
+import { Check, ChevronRight, CircleAlert, LoaderCircle } from '../../icons/index.js';
+import { motion, useReducedMotion } from '../../motion/index.js';
+import { loopAnimate, loopTransition } from '../../motion/config.js';
+const TraceLineContext = createContext(undefined);
+/** shadcn Trace, adapted: a semantic list of steps. Each step is a `TraceItem` holding a `TraceLine`. */
+function Trace({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "trace", className: cn('m-0 flex w-full min-w-0 list-none flex-col gap-1.5 p-0', className), ...props }));
+}
+function TraceItem({ className, ...props }) {
+    return _jsx("li", { "data-slot": "trace-item", className: cn('min-w-0', className), ...props });
+}
+// `relative` keeps the `sr-only` status label (absolute) inside its own line; otherwise it escapes a
+// non-positioned scroll box around a long trail and adds phantom height to the scroller above.
+function TraceLine({ className, status, statusLabel, children, ...props }) {
+    return (_jsx(TraceLineContext.Provider, { value: status, children: _jsxs("span", { "data-slot": "trace-line", "data-status": status, className: cn('relative flex w-fit max-w-full min-w-0 items-center gap-2 text-sm text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=pending]:opacity-60', className), ...props, children: [children, statusLabel ? _jsx("span", { className: "sr-only", children: statusLabel }) : null] }) }));
+}
+function TraceIcon({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "trace-icon", "aria-hidden": "true", className: cn('flex size-4 shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4', className), ...props }));
+}
+/** The icon for the enclosing line's status: spinner, check, alert, or a quiet dot. */
+function TraceStatusIcon({ className, ...props }) {
+    const status = useContext(TraceLineContext);
+    const reduceMotion = useReducedMotion();
+    return (_jsx(TraceIcon, { className: className, ...props, children: status === 'running' ? (
+        // Same stable bags as `Spinner` (`loopAnimate` / `loopTransition`): opacity pulse + WAAPI
+        // spin when motion is allowed. Inline animate objects restart the loop on every agent
+        // chunk re-render — leaving a stream and coming back looked frozen until a full refresh.
+        _jsx(motion.span, { className: "inline-flex", animate: reduceMotion ? loopAnimate.spinnerReduced : loopAnimate.spinner, transition: loopTransition.spinner, children: _jsx(LoaderCircle, { className: "size-3.5" }) })) : status === 'done' ? (_jsx(Check, { className: "size-3.5" })) : status === 'error' ? (_jsx(CircleAlert, { className: "size-3.5" })) : (_jsx("span", { className: "size-1.5 rounded-full bg-current opacity-60" })) }));
+}
+/** The line's label. While the line is `running` and the label is a string it shimmers. */
+function TraceTitle({ className, children, ...props }) {
+    const status = useContext(TraceLineContext);
+    if (status === 'running' && typeof children === 'string') {
+        return (_jsx(ShimmerText, { "data-slot": "trace-title", className: cn('min-w-0', className), ...props, children: children }));
+    }
+    return (_jsx("span", { "data-slot": "trace-title", className: cn('min-w-0 truncate', className), ...props, children: children }));
+}
+function TraceDescription({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "trace-description", className: cn('shrink-0 text-muted-foreground/70 tabular-nums', className), ...props }));
+}
+function TraceCollapsible({ className, ...props }) {
+    return (_jsx(Collapsible, { "data-slot": "trace-collapsible", className: cn('flex w-full min-w-0 flex-col', className), ...props }));
+}
+/** A real button holding a `TraceLine` and a turning chevron. Never nest another button inside. */
+function TraceCollapsibleTrigger({ className, children, ...props }) {
+    return (_jsxs(CollapsibleTrigger, { "data-slot": "trace-collapsible-trigger", className: cn('group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-md text-start text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 has-[[data-status=error]]:text-destructive', className), ...props, children: [children, _jsx(TraceIcon, { className: "group-aria-expanded/trace-collapsible-trigger:rotate-90", children: _jsx(ChevronRight, {}) })] }));
+}
+/** Opens and shuts with the shared collapse motion; closed content is not in the DOM. */
+function TraceCollapsibleContent({ className, children, ...props }) {
+    return (_jsx(CollapsibleContent, { "data-slot": "trace-collapsible-content", className: "min-w-0", ...props, children: _jsx("div", { "data-slot": "trace-collapsible-content-inner", className: cn('mt-2 mb-1 ms-[calc(--spacing(2)-1px)] min-w-0 border-s ps-4 pe-1 leading-relaxed wrap-break-word text-muted-foreground', className), children: children }) }));
+}
+export { Trace, TraceItem, TraceLine, TraceIcon, TraceStatusIcon, TraceTitle, TraceDescription, TraceCollapsible, TraceCollapsibleTrigger, TraceCollapsibleContent, };

package/dist/components/ui/trend-line.d.ts

@@ -0,0 +1,93 @@
+export interface TrendLinePoint {
+    label: string;
+    value: number;
+}
+/** One shared timestamp with a value per series (multi-series mode). */
+export interface TrendLineSeriesPoint {
+    /** Epoch milliseconds. Sets the x position, so uneven intervals are never stretched. */
+    timestamp: number;
+    /** Names the point in the tooltip, the focus label and the hidden table ("Oct 14"). */
+    label: string;
+    /** Shorter label under the axis for the first and last point; defaults to `label`. */
+    axisLabel?: string;
+    /** One value per entry of `names`, in the same order. */
+    values: readonly number[];
+    /** Extra sentence for the tooltip and the focus label ("Count at the start of the range"). */
+    note?: string;
+    /**
+     * Makes the point activatable (click, Enter, Space) and adds this phrase to its focus label
+     * ("Show weekly detail"). Points without it never call `onPointActivate`.
+     */
+    activateLabel?: string;
+}
+/** Two or three lines on one shared zero-based integer axis. */
+export interface TrendLineMultiSeries {
+    /** Series names, already localized. The first is solid, the second dashed, the third dotted. */
+    names: readonly string[];
+    /** Sorted by `timestamp`. */
+    points: readonly TrendLineSeriesPoint[];
+}
+interface TrendLineBaseProps extends Omit<React.ComponentProps<'figure'>, 'children'> {
+    /** Names the chart for assistive tech ("Cycles closed per day"). Required. */
+    'aria-label': string;
+    /** Formats values in the tooltip and the axis; defaults to `String`. */
+    formatValue?: (value: number) => string;
+}
+export interface TrendLineProps extends TrendLineBaseProps {
+    points: readonly TrendLinePoint[];
+    /**
+     * Optional secondary string under the hover readout (e.g. exact spend when cents rounding
+     * hid precision). Axis labels still use `formatValue` only.
+     */
+    formatValueDetail?: (value: number) => string | undefined;
+    /**
+     * Optional projection points continuing after `points`. Drawn as a dashed line from the last
+     * real point through the projection; no area under it.
+     */
+    projection?: readonly TrendLinePoint[];
+    /**
+     * Label suffix appended to projected data points in hover readouts and the hidden table.
+     * Defaults to `'projected'`.
+     */
+    projectedLabel?: string;
+    multiSeries?: never;
+    onPointActivate?: never;
+}
+export interface TrendLineMultiProps extends TrendLineBaseProps {
+    /** Multi-series mode: mutually exclusive with `points` and `projection`. */
+    multiSeries: TrendLineMultiSeries;
+    /** Called with the point index when an activatable point is clicked or Enter/Space is pressed. */
+    onPointActivate?: (index: number) => void;
+    points?: never;
+    formatValueDetail?: never;
+    projection?: never;
+    projectedLabel?: never;
+}
+/**
+ * Single-series (default): a line with a soft area under it and an optional dashed `projection`;
+ * see `SingleSeriesTrendLine`.
+ *
+ * Multi-series (`multiSeries`, mutually exclusive with `points`/`projection`): two or three lines
+ * sharing one zero-based integer axis and one set of timestamps. Points sit at their timestamp's
+ * share of the span (partial intervals are not stretched), there is no projection and no area,
+ * series differ in colour, dash and dot shape, a persistent legend names them, and each timestamp
+ * is one tooltip and focus target listing every series. `onPointActivate` makes points that carry
+ * an `activateLabel` clickable and keyboard-activatable.
+ */
+declare function TrendLine(props: TrendLineMultiProps): React.JSX.Element;
+declare function TrendLine(props: TrendLineProps): React.JSX.Element;
+export interface TrendLineSkeletonProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /**
+     * Legend entries of a multi-series line. Leave it out for a single series, whose axis labels
+     * hang below the plot: pass the same `className` (for example `mb-5`) as the host passes to
+     * `TrendLine`.
+     */
+    legendItems?: number;
+}
+/**
+ * The loading shape of `TrendLine`: y-axis stubs, three dashed grid lines, a soft area and
+ * x-axis stubs, in the same 160 px plot. With `legendItems` it also draws the legend line of the
+ * multi-series variant.
+ */
+declare function TrendLineSkeleton({ legendItems, className, ...props }: TrendLineSkeletonProps): import("react").JSX.Element;
+export { TrendLine, TrendLineSkeleton };