@streamsai/ui 0.0.0-stage → 0.1.0

package/dist/components/ui/running-indicator.d.ts

@@ -0,0 +1,17 @@
+interface RunningIndicatorProps {
+    label: string;
+    className?: string;
+}
+/**
+ * The "an agent is working" cue, the twin of iOS `RunningIndicator`: an 8px green core that
+ * breathes inside a fixed 12px box, with a flat 2px halo that fades on the same loop. The box never
+ * changes size, so a row's geometry is stable while it animates. Reduced motion renders the core
+ * static with no halo.
+ *
+ * The loops start imperatively, not with `animate` keyframes on a `motion` element: inside an
+ * `AnimatePresence initial={false}` (the leading slot of a NavItem row) motion skips an animation
+ * that starts on mount, so a declarative loop sat still in rows while the same dot pulsed in the
+ * filter chips.
+ */
+declare function RunningIndicator({ label, className }: RunningIndicatorProps): import("react").JSX.Element;
+export { RunningIndicator, type RunningIndicatorProps };

package/dist/components/ui/running-indicator.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { animate, usePrefersReducedMotion } from '../../motion/index.js';
+import { runningIndicator } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The "an agent is working" cue, the twin of iOS `RunningIndicator`: an 8px green core that
+ * breathes inside a fixed 12px box, with a flat 2px halo that fades on the same loop. The box never
+ * changes size, so a row's geometry is stable while it animates. Reduced motion renders the core
+ * static with no halo.
+ *
+ * The loops start imperatively, not with `animate` keyframes on a `motion` element: inside an
+ * `AnimatePresence initial={false}` (the leading slot of a NavItem row) motion skips an animation
+ * that starts on mount, so a declarative loop sat still in rows while the same dot pulsed in the
+ * filter chips.
+ */
+function RunningIndicator({ label, className }) {
+    const pulsing = !usePrefersReducedMotion();
+    const coreRef = useRef(null);
+    const haloRef = useRef(null);
+    useEffect(() => {
+        const core = coreRef.current;
+        const halo = haloRef.current;
+        if (!pulsing || !core || !halo)
+            return;
+        const controls = [
+            animate(core, runningIndicator.core, runningIndicator.transition),
+            animate(halo, runningIndicator.halo, runningIndicator.transition),
+        ];
+        return () => controls.forEach((control) => control.cancel());
+    }, [pulsing]);
+    return (_jsxs("span", { role: "img", "aria-label": label, "data-slot": "running-indicator", className: cn('relative inline-grid size-3 shrink-0 place-items-center', className), children: [pulsing ? (_jsx("span", { ref: haloRef, "aria-hidden": true, "data-slot": "running-indicator-halo", className: "absolute inset-0 rounded-full bg-home-running-halo" })) : null, _jsx("span", { ref: coreRef, "aria-hidden": true, "data-slot": "running-indicator-core", className: "relative size-2 rounded-full bg-home-running" })] }));
+}
+export { RunningIndicator };

package/dist/components/ui/sandboxed-frame.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps } from 'react';
+type FrameSource = {
+    kind: 'url';
+    url: string;
+} | {
+    kind: 'html';
+    html: string;
+}
+/** An upload on its own throwaway origin (user content domain): framed by url, never trusted. */
+ | {
+    kind: 'usercontent';
+    url: string;
+};
+/**
+ * `allow-same-origin` together with `allow-scripts` lets a document remove its own sandbox
+ * and read its origin's storage. Inline `html` (user uploads, agent output) never gets it or
+ * `allow-forms`. The `url` source is for hosted previews that are already on their own origin,
+ * where same-origin only lets that document use its own cookies and storage. Never point it at
+ * an upload on the shared storage origin: uploaded files must render as `html` (srcdoc) or not at all.
+ */
+declare function sandboxFor(source: FrameSource): string;
+/** Props that grant a frame powers or decide what it loads: only `source` and the component set them. */
+type SecurityProps = 'src' | 'srcDoc' | 'sandbox' | 'allow' | 'allowFullScreen' | 'referrerPolicy' | 'name' | 'csp' | 'credentialless';
+interface SandboxedFrameProps extends Omit<ComponentProps<'iframe'>, SecurityProps> {
+    source: FrameSource;
+    title: string;
+}
+declare function SandboxedFrame({ source, title, className, ...props }: SandboxedFrameProps): import("react").JSX.Element;
+export { SandboxedFrame, sandboxFor, type FrameSource, type SandboxedFrameProps };

package/dist/components/ui/sandboxed-frame.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+// No `allow-forms`: a page that cannot submit cannot pose as a login form that posts somewhere.
+// No `allow-popups`: `window.open(url)` would carry whatever the page read out to any host.
+// No `allow-same-origin`: see below.
+const HTML_SANDBOX = 'allow-scripts';
+const URL_SANDBOX = 'allow-scripts allow-forms allow-popups';
+/**
+ * `allow-same-origin` together with `allow-scripts` lets a document remove its own sandbox
+ * and read its origin's storage. Inline `html` (user uploads, agent output) never gets it or
+ * `allow-forms`. The `url` source is for hosted previews that are already on their own origin,
+ * where same-origin only lets that document use its own cookies and storage. Never point it at
+ * an upload on the shared storage origin: uploaded files must render as `html` (srcdoc) or not at all.
+ */
+function sandboxFor(source) {
+    // `usercontent` gets the srcdoc sandbox exactly: never the `url` branch's same-origin grant.
+    if (source.kind === 'html' || source.kind === 'usercontent')
+        return HTML_SANDBOX;
+    let origin;
+    try {
+        origin = new URL(source.url, location.href).origin;
+    }
+    catch {
+        return URL_SANDBOX;
+    }
+    if (origin === location.origin)
+        return URL_SANDBOX;
+    return 'allow-scripts allow-same-origin allow-forms allow-popups';
+}
+const escapeAttribute = (value) => value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+/**
+ * The page cannot be stopped from navigating its own frame (`location.href = "https://x/?k=" +
+ * typed`, a link, a meta refresh): no header on the page's own response can forbid that, but the
+ * CSP of the document that embeds a frame governs where that frame may go. So an uploaded page is
+ * framed inside a static wrapper whose CSP allows exactly the page's origin as a frame source. A
+ * navigation anywhere else is refused before a request leaves the browser.
+ *
+ * The wrapper is deliberately NOT sandboxed. The edge answers with `frame-ancestors <app origins>`,
+ * and a sandboxed wrapper has an opaque origin that no `frame-ancestors` source (not even `*`)
+ * matches, so the browser would refuse to show the page at all. An unsandboxed `srcdoc` takes the
+ * app's origin and passes. It is inert: its own CSP is `default-src 'none'` (no script can run in
+ * it), it holds no data, and the page below it is sandboxed by the inner frame's attribute and by
+ * the edge's `sandbox` header, so the page is an opaque origin that can reach neither the wrapper
+ * nor the app. Keep every byte interpolated into it escaped.
+ */
+function guardedDocument(url) {
+    let source;
+    try {
+        const parsed = new URL(url, location.href);
+        source = parsed.protocol === 'blob:' ? 'blob:' : parsed.origin;
+    }
+    catch {
+        return '';
+    }
+    if (source === 'null')
+        return '';
+    return (`<!doctype html><meta http-equiv="Content-Security-Policy" content="default-src 'none'; ` +
+        `style-src 'unsafe-inline'; frame-src ${escapeAttribute(source)}">` +
+        `<style>html,body{margin:0;height:100%}iframe{display:block;border:0;width:100%;height:100%}</style>` +
+        `<iframe sandbox="${HTML_SANDBOX}" referrerpolicy="no-referrer" allow="" src="${escapeAttribute(url)}"></iframe>`);
+}
+function SandboxedFrame({ source, title, className, ...props }) {
+    // A wrapped page is sandboxed by the frame inside the wrapper; see `guardedDocument`.
+    const sandbox = source.kind === 'usercontent' ? undefined : sandboxFor(source);
+    // Both attributes are always set, so a stray `src` or `srcDoc` in `props` can never win.
+    const sourceProps = source.kind === 'html'
+        ? { src: undefined, srcDoc: source.html }
+        : source.kind === 'usercontent'
+            ? { src: undefined, srcDoc: guardedDocument(source.url) }
+            : { src: source.url, srcDoc: undefined };
+    return (_jsx("iframe", { ...props, title: title, "data-slot": "sandboxed-frame", className: cn('size-full border-0 bg-background', className), 
+        // After the spread, so nothing a caller passes (even past the types) can override them.
+        sandbox: sandbox, referrerPolicy: "no-referrer", 
+        // Delegate no powers (camera, clipboard, fullscreen, ...) to framed content.
+        allow: "", allowFullScreen: false, name: undefined, csp: undefined, credentialless: undefined, ...sourceProps }));
+}
+export { SandboxedFrame, sandboxFor };

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

@@ -0,0 +1,14 @@
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+type ScrollbarVisibility = 'always' | 'hover';
+type ScrollAreaProps = ScrollAreaPrimitive.Root.Props & {
+    /**
+     * `hover` shows a lighter bar only while the pointer is over the area or it is scrolling, and
+     * keeps the track 16px off the top and bottom so rounded corners never clip it.
+     */
+    scrollbar?: ScrollbarVisibility;
+};
+declare function ScrollArea({ className, children, scrollbar, ...props }: ScrollAreaProps): import("react").JSX.Element;
+declare function ScrollBar({ className, orientation, visibility, ...props }: ScrollAreaPrimitive.Scrollbar.Props & {
+    visibility?: ScrollbarVisibility;
+}): import("react").JSX.Element;
+export { ScrollArea, ScrollBar, type ScrollAreaProps };

package/dist/components/ui/scroll-area.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+import { cn } from '../../lib/utils.js';
+function ScrollArea({ className, children, scrollbar = 'always', ...props }) {
+    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn('relative overflow-hidden', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "h-full w-full rounded-[inherit]", children: scrollbar === 'hover' ? (
+                // Content is observed for size, so a section opening inside shows the bar without a
+                // scroll first. Its default `min-width: fit-content` would stop rows from truncating.
+                _jsx(ScrollAreaPrimitive.Content, { className: "min-w-0!", children: children })) : (children) }), _jsx(ScrollBar, { visibility: scrollbar }), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+}
+function ScrollBar({ className, orientation = 'vertical', visibility = 'always', ...props }) {
+    const hover = visibility === 'hover';
+    return (_jsx(ScrollAreaPrimitive.Scrollbar, { "data-slot": "scroll-area-scrollbar", "data-visibility": visibility, orientation: orientation, className: cn('flex touch-none select-none border-0 bg-transparent transition-colors', orientation === 'vertical' && 'h-full w-2.5 p-px', orientation === 'horizontal' && 'h-2.5 flex-col p-px', 
+        // Base UI positions the bar with inline top/bottom (left/right), so the inset needs `!`.
+        hover && orientation === 'vertical' && 'h-auto! top-4! bottom-4!', hover && orientation === 'horizontal' && 'w-auto! right-4! left-4!', hover &&
+            'opacity-0 transition-opacity data-hovering:opacity-100 data-scrolling:opacity-100', className), ...props, children: _jsx(ScrollAreaPrimitive.Thumb, { "data-slot": "scroll-area-thumb", className: cn('relative flex-1 rounded-full', hover ? 'bg-border/60' : 'bg-border') }) }));
+}
+export { ScrollArea, ScrollBar };

package/dist/components/ui/section-header.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+interface SectionHeaderProps {
+    title: ReactNode;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    count?: number;
+    actions?: ReactNode;
+    className?: string;
+}
+/** Sidebar group title (Figma "Collapsible section title"): 12px semibold, chevron after the title (shown on hover or focus only), actions right. */
+declare function SectionHeader({ title, open, onOpenChange, count, actions, className, }: SectionHeaderProps): import("react").JSX.Element;
+export { SectionHeader, type SectionHeaderProps };

package/dist/components/ui/section-header.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from '../../motion/index.js';
+import { transitions } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+import { ChevronDown } from '../../icons/index.js';
+import { Counter } from './counter.js';
+/** Sidebar group title (Figma "Collapsible section title"): 12px semibold, chevron after the title (shown on hover or focus only), actions right. */
+function SectionHeader({ title, open, onOpenChange, count, actions, className, }) {
+    return (_jsxs("div", { className: cn('flex h-8 items-center gap-1 pr-1 pl-2', className), children: [_jsxs("button", { type: "button", "aria-expanded": open, onClick: () => onOpenChange(!open), className: "group/section flex min-w-0 flex-1 items-center gap-1 rounded-sm text-left text-body-3 font-semibold text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "truncate", children: title }), _jsx(motion.span, { animate: { rotate: open ? 0 : -90 }, transition: transitions.base, className: "flex size-3 shrink-0 items-center justify-center text-icon opacity-0 transition-opacity group-hover/section:opacity-100 group-focus-visible/section:opacity-100", "aria-hidden": "true", children: _jsx(ChevronDown, { className: "size-3" }) }), count != null ? _jsx(Counter, { count: count, className: "ml-1" }) : null] }), actions ? _jsx("span", { className: "flex shrink-0 items-center gap-0.5", children: actions }) : null] }));
+}
+export { SectionHeader };

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+declare function Select<Value, Multiple extends boolean | undefined = false>({ actionsRef, onOpenChange, ...props }: SelectPrimitive.Root.Props<Value, Multiple>): React.JSX.Element;
+declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): React.JSX.Element;
+declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): React.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: SelectPrimitive.Trigger.Props & {
+    size?: 'sm' | 'default';
+}): React.JSX.Element;
+declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'>): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): React.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>): React.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>): React.JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/ui/select.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+import { cn } from '../../lib/utils.js';
+import { PopupExitContext, usePopupExit, usePopupRender } from '../../motion/popup.js';
+import { Check as CheckIcon, ChevronDown as ChevronDownIcon, ChevronUp as ChevronUpIcon, } from '../../icons/index.js';
+function Select({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(SelectPrimitive.Root, { ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+function SelectGroup({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn('scroll-my-1 p-1', className), ...props }));
+}
+function SelectValue({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", className: cn('flex flex-1 text-left', className), ...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-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 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", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
+}
+function SelectContent({ className, children, side = 'bottom', sideOffset = 4, align = 'center', alignOffset = 0, alignItemWithTrigger = true, ...props }) {
+    const renderPopup = usePopupRender();
+    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-(--z-dropdown)", children: _jsxs(SelectPrimitive.Popup, { render: renderPopup, "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn('relative isolate z-(--z-dropdown) max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10', className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { className: "in-data-[platform=mobile]:flex in-data-[platform=mobile]:flex-col in-data-[platform=mobile]:gap-0.5", children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn('px-1.5 py-1 text-xs 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-pointer items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm in-data-[platform=mobile]:text-base outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn('pointer-events-none -mx-1 my-1 h-px bg-border', className), ...props }));
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpArrow, { "data-slot": "select-scroll-up-button", className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronUpIcon, {}) }));
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownArrow, { "data-slot": "select-scroll-down-button", className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronDownIcon, {}) }));
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

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

@@ -0,0 +1,3 @@
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react").JSX.Element;
+export { Separator };

package/dist/components/ui/separator.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import { cn } from '../../lib/utils.js';
+function Separator({ className, orientation = 'horizontal', ...props }) {
+    return (_jsx(SeparatorPrimitive, { "data-slot": "separator", orientation: orientation, className: cn(
+        // Deliberate edit to generated output: the registry ships `data-horizontal:` /
+        // `data-vertical:`, which Tailwind compiles to `[data-horizontal]` / `[data-vertical]`.
+        // Base UI actually emits `data-orientation="horizontal"|"vertical"`, so those never match
+        // and the separator renders with no height or width at all. Re-check on the next
+        // `shadcn add separator` in case upstream fixes it.
+        '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 }));
+}
+export { Separator };

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+type SheetSide = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Bottom-sheet height preset (only meaningful when `side="bottom"`).
+ * - `medium` — 50dvh; good for pickers and compact profiles.
+ * - `large`  — almost full-height (safe-area inset + 1.5rem gap); good for content viewers.
+ */
+type SheetDetent = 'medium' | 'large';
+declare function Sheet({ actionsRef, onOpenChange, ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
+declare function SheetTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
+declare function SheetClose({ ...props }: DialogPrimitive.Close.Props): React.JSX.Element;
+declare function SheetContent({ className, children, side, detent, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
+    side?: SheetSide;
+    detent?: SheetDetent;
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
+export type { SheetDetent };
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/components/ui/sheet.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { cn } from '../../lib/utils.js';
+import { PopupExitContext, renderBackdrop, useModalRender, usePopupExit } from '../../motion/popup.js';
+import { X as XIcon } from '../../icons/index.js';
+import { sheet } from '../../motion/config.js';
+const DETENT_CLASSES = {
+    medium: 'h-[50dvh] rounded-t-2xl',
+    large: 'h-[calc(100dvh-env(safe-area-inset-top)-1.5rem)] rounded-t-2xl',
+};
+const SHEET_PRESETS = {
+    left: sheet('left'),
+    right: sheet('right'),
+    top: sheet('top'),
+    bottom: sheet('bottom'),
+};
+function Sheet({ actionsRef, onOpenChange, ...props }) {
+    const exit = usePopupExit(actionsRef, onOpenChange);
+    return (_jsx(PopupExitContext, { value: exit.unmount, children: _jsx(DialogPrimitive.Root, { "data-slot": "sheet", ...props, actionsRef: exit.actionsRef, onOpenChange: exit.onOpenChange }) }));
+}
+function SheetTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetContent({ className, children, side = 'right', detent, showCloseButton = true, ...props }) {
+    const renderPopup = useModalRender(SHEET_PRESETS[side]);
+    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { render: renderBackdrop, "data-slot": "sheet-overlay", className: "fixed inset-y-0 left-[var(--overlay-inset-left,0px)] right-[var(--overlay-inset-right,0px)] z-(--z-modal) bg-black/10" }), _jsxs(DialogPrimitive.Popup, { render: renderPopup, "data-slot": "sheet-content", "data-side": side, className: cn('fixed z-(--z-modal) flex flex-col gap-4 bg-background p-6 shadow-lg', side === 'right' &&
+                    'safe-border-t safe-border-r safe-border-b top-0 right-[var(--overlay-inset-right,0px)] h-full w-3/4 sm:max-w-sm', side === 'left' &&
+                    'safe-border-t safe-border-l safe-border-b top-0 left-[var(--overlay-inset-left,0px)] h-full w-3/4 sm:max-w-sm', side === 'top' &&
+                    'safe-border-t safe-border-l safe-border-r top-0 left-[var(--overlay-inset-left,0px)] right-[var(--overlay-inset-right,0px)] h-auto', side === 'bottom' && (detent ? DETENT_CLASSES[detent] : 'h-auto'), side === 'bottom' &&
+                    'safe-border-b safe-border-l safe-border-r bottom-0 left-[var(--overlay-inset-left,0px)] right-[var(--overlay-inset-right,0px)]', className), ...props, children: [children, showCloseButton ? (_jsxs(DialogPrimitive.Close, { "data-slot": "sheet-close-btn", className: "absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
+}
+function SheetHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-header", className: cn('flex flex-col gap-2', className), ...props }));
+}
+function SheetFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "sheet-footer", className: cn('mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
+}
+function SheetTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "sheet-title", className: cn('text-base leading-none font-semibold', className), ...props }));
+}
+function SheetDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "sheet-description", className: cn('text-sm text-muted-foreground', className), ...props }));
+}
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

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

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithoutRef } from 'react';
+type SpanProps = Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart'>;
+export type ShimmerTextProps = {
+    /** Label text. Must be a string so the gradient width can scale with length (shadcn AI Shimmer). */
+    children: string;
+    /**
+     * When false, render plain muted text with no sweep (e.g. after a title arrives, or when the
+     * pending window has expired). Default true.
+     */
+    active?: boolean;
+    /**
+     * Multiplier for how wide the shine is relative to character count. Default 2 — same as
+     * [shadcn AI Shimmer](https://www.shadcn.io/ai/shimmer).
+     */
+    spread?: number;
+} & SpanProps;
+/**
+ * AI-style loading label: muted text with an animated gradient that sweeps across the glyphs
+ * (`bg-clip-text` + `backgroundPosition`). Same effect as
+ * [shadcn AI Shimmer](https://www.shadcn.io/ai/shimmer) / AI Elements.
+ *
+ * Used for provisional UI copy (e.g. “Untitled” while a session title generates). Under reduced
+ * motion — or when `active={false}` — the sweep is dropped and the label stays muted.
+ */
+declare function ShimmerText({ className, children, active, spread, style, ...props }: ShimmerTextProps): import("react").JSX.Element;
+export { ShimmerText };

package/dist/components/ui/shimmer-text.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useReducedMotion } from '../../motion/index.js';
+import { loopAnimate, loopTransition } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * AI-style loading label: muted text with an animated gradient that sweeps across the glyphs
+ * (`bg-clip-text` + `backgroundPosition`). Same effect as
+ * [shadcn AI Shimmer](https://www.shadcn.io/ai/shimmer) / AI Elements.
+ *
+ * Used for provisional UI copy (e.g. “Untitled” while a session title generates). Under reduced
+ * motion — or when `active={false}` — the sweep is dropped and the label stays muted.
+ */
+function ShimmerText({ className, children, active = true, spread = 2, style, ...props }) {
+    const reduceMotion = useReducedMotion();
+    const shimmer = active && reduceMotion !== true;
+    const dynamicSpread = children.length * spread;
+    if (!shimmer) {
+        return (_jsx("span", { "data-slot": "shimmer-text", className: cn('inline-block max-w-full align-middle truncate text-muted-foreground', className), style: style, ...props, children: children }));
+    }
+    return (_jsx(motion.span, { "data-slot": "shimmer-text", className: cn('relative inline-block max-w-full align-middle truncate bg-clip-text text-transparent', className), 
+        // Stable keyframe bag (`loopAnimate.shimmer`): same identity across re-renders so agent
+        // Trace / session-title updates do not restart the sweep and leave it looking stuck.
+        animate: loopAnimate.shimmer, transition: loopTransition.shimmer, ...props, style: {
+            ...style,
+            '--spread': `${dynamicSpread}px`,
+            // Shine band + solid muted fill underneath (shadcn AI Shimmer / AI Elements).
+            backgroundImage: 'linear-gradient(90deg, transparent calc(50% - var(--spread)), var(--color-background), transparent calc(50% + var(--spread))), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))',
+            backgroundSize: '250% 100%, auto',
+            backgroundRepeat: 'no-repeat, padding-box',
+        }, children: children }));
+}
+export { ShimmerText };

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Separator } from './separator.js';
+import { TooltipContent } from './tooltip.js';
+type SidebarContextProps = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): React.JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, dir, ...props }: React.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+}): React.JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function SidebarRail({ className, ...props }: React.ComponentProps<'button'>): React.JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<'main'>): React.JSX.Element;
+declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "outline" | "default" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<'button'> & React.ComponentProps<'button'> & {
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
+declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<'button'> & React.ComponentProps<'button'> & {
+    showOnHover?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<'div'> & {
+    showIcon?: boolean;
+}): React.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: useRender.ComponentProps<'a'> & React.ComponentProps<'a'> & {
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+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, };