@streamsai/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 `BarListSkeleton`: change a size here and the skeleton follows.
+const LIST_CLASS = 'flex flex-col gap-2 text-sm';
+const ITEM_CLASS = 'grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1';
+const LABEL_CLASS = 'flex min-w-0 items-center gap-2';
+const SELECT_CLASS = '-m-1.5 w-[calc(100%+0.75rem)] cursor-pointer rounded-sm p-1.5 text-start transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none';
+const TRACK_CLASS = 'col-span-2 h-1.5 w-full overflow-hidden rounded-full bg-muted';
+/**
+ * Ranked horizontal bars. The widest bar is the largest value; every other bar is a share of it
+ * so the eye compares lengths, not labels. Plain list semantics — an `<ol>` with one row per
+ * item — so it reads top to bottom without any extra roles.
+ */
+function BarList({ items, formatValue = String, formatValueTooltip, className, ...props }) {
+    const max = Math.max(1, ...items.map((item) => item.value));
+    return (_jsx("ol", { "data-slot": "bar-list", className: cn(LIST_CLASS, className), ...props, children: items.map((item, index) => {
+            const share = Math.max(0, Math.min(100, (item.value / max) * 100));
+            const label = formatValue(item.value);
+            const tip = formatValueTooltip?.(item.value);
+            const value = tip ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { className: "cursor-default font-medium tabular-nums" }), children: label }), _jsx(TooltipContent, { children: tip })] })) : (_jsx("span", { className: "font-medium tabular-nums", children: label }));
+            const row = (_jsxs(_Fragment, { children: [_jsxs("div", { className: LABEL_CLASS, children: [item.leading, _jsx("span", { className: "truncate", children: item.label })] }), value, _jsx("div", { className: TRACK_CLASS, children: _jsx(motion.div, { "data-slot": "bar-list-bar", initial: { width: 0 }, animate: { width: `${share}%` }, transition: { ...transitions.slow, delay: staggerDelay(index) }, className: "h-full rounded-full bg-chart-1" }) })] }));
+            return (_jsx("li", { "data-slot": "bar-list-item", children: item.onSelect ? (_jsx("button", { type: "button", "aria-label": item.selectLabel, onClick: item.onSelect, className: cn(ITEM_CLASS, SELECT_CLASS), children: row })) : (_jsx("div", { className: ITEM_CLASS, children: row })) }, `${item.label}-${index}`));
+        }) }));
+}
+const SKELETON_LABEL_WIDTHS = ['w-1/3', 'w-1/4', 'w-2/5'];
+/**
+ * The loading shape of `BarList`: the same list, row grid and bar track, with a label stub, a
+ * value stub and a still track in each row. Rows are `aria-hidden`; the host names the busy region.
+ */
+function BarListSkeleton({ rows = 3, avatar = false, className, ...props }) {
+    return (_jsx("div", { "data-slot": "bar-list-skeleton", "aria-hidden": "true", className: cn(LIST_CLASS, className), ...props, children: Array.from({ length: rows }, (_, index) => (_jsxs("div", { className: ITEM_CLASS, children: [_jsxs("div", { className: cn(LABEL_CLASS, avatar ? 'h-7' : 'h-5'), children: [avatar && _jsx(Skeleton, { variant: "shimmer", className: "size-7 shrink-0 rounded-full" }), _jsx(Skeleton, { variant: "shimmer", className: cn('h-4', SKELETON_LABEL_WIDTHS[index % SKELETON_LABEL_WIDTHS.length]) })] }), _jsx("div", { className: "flex h-5 items-center", children: _jsx(Skeleton, { variant: "shimmer", className: "h-4 w-10" }) }), _jsx("div", { className: TRACK_CLASS, children: _jsx(Skeleton, { variant: "shimmer", className: "h-full w-full rounded-full" }) })] }, index))) }));
+}
+export { BarList, BarListSkeleton };

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

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'react';
+declare function Breadcrumb({ ...props }: ComponentProps<'nav'>): import("react").JSX.Element;
+declare function BreadcrumbList({ className, ...props }: ComponentProps<'ol'>): import("react").JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
+declare function BreadcrumbLink({ className, ...props }: ComponentProps<'a'>): import("react").JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, };

package/dist/components/ui/breadcrumb.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+function Breadcrumb({ ...props }) {
+    return _jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn('flex flex-wrap items-center gap-1.5 text-body-2 text-muted-foreground', className), ...props }));
+}
+function BreadcrumbItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn('inline-flex items-center gap-1.5', className), ...props }));
+}
+function BreadcrumbLink({ className, ...props }) {
+    return (_jsx("a", { "data-slot": "breadcrumb-link", className: cn('hover:text-foreground transition-colors', className), ...props }));
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", "aria-current": "page", role: "link", "aria-disabled": "true", className: cn('text-foreground font-medium', className), ...props }));
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn('text-icon', className), ...props, children: children ?? '/' }));
+}
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, };

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

@@ -0,0 +1,10 @@
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { Separator } from './separator.js';
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
+declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

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

@@ -0,0 +1,41 @@
+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 { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+import { Separator } from './separator.js';
+const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+    variants: {
+        orientation: {
+            horizontal: '*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
+            vertical: 'flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0',
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+    },
+});
+function ButtonGroup({ className, orientation, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
+}
+function ButtonGroupText({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        props: mergeProps({
+            className: cn("flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+        }, props),
+        render,
+        state: {
+            slot: 'button-group-text',
+        },
+    });
+}
+function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }) {
+    return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn(
+        // Deliberate fix to generated output: the registry ships `data-horizontal:` /
+        // `data-vertical:`, which Tailwind compiles to `[data-horizontal]` / `[data-vertical]`.
+        // Base UI's Separator emits `data-orientation="horizontal"|"vertical"`, so those never
+        // match. Re-check on the next `shadcn add button-group` in case upstream fixes it.
+        'relative self-stretch bg-input data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto', className), ...props }));
+}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

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

@@ -0,0 +1,9 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { type VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    shape?: "default" | "pill" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, shape, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
+export { Button, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground disabled:opacity-100 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 in-data-[platform=mobile]:not-[.absolute]:not-[.fixed]:not-[.sticky]:relative in-data-[platform=mobile]:after:absolute in-data-[platform=mobile]:after:top-1/2 in-data-[platform=mobile]:after:left-1/2 in-data-[platform=mobile]:after:size-full in-data-[platform=mobile]:after:min-h-11 in-data-[platform=mobile]:after:min-w-11 in-data-[platform=mobile]:after:-translate-1/2 in-data-[platform=mobile]:after:content-[''] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary-hover',
+            outline: 'border-input bg-background hover:bg-accent',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-accent aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+            ghost: 'hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground dark:hover:bg-accent/50',
+            destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-body-3 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+            icon: 'size-8',
+            'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+            'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+            'icon-lg': 'size-9',
+        },
+        shape: {
+            default: '',
+            pill: 'rounded-full px-4',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+        shape: 'default',
+    },
+});
+function Button({ className, variant = 'default', size = 'default', shape = 'default', ...props }) {
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, shape, className })), ...props }));
+}
+export { Button, buttonVariants };

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare function Card({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

package/dist/components/ui/card.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+function Card({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn('rounded-xl border bg-card text-card-foreground shadow-sm', className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn('flex flex-col gap-1.5 p-6', className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn('leading-none font-semibold', className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn('text-sm text-muted-foreground', className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return _jsx("div", { "data-slot": "card-action", className: cn('ml-auto', className), ...props });
+}
+function CardContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "card-content", className: cn('p-6 pt-0', className), ...props });
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center p-6 pt-0', className), ...props }));
+}
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

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

@@ -0,0 +1,3 @@
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+declare function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props): import("react").JSX.Element;
+export { Checkbox };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { motion } from '../../motion/index.js';
+import { scale, transitions } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+import { Check as CheckIcon } from '../../icons/index.js';
+/** Indicator pops in with a spring scale when checked, out when unchecked. */
+function renderCheckboxIndicator(props, state) {
+    const isChecked = state.checked !== false;
+    return (_jsx(motion.span, { ...props, initial: false, animate: { opacity: isChecked ? 1 : 0, scale: isChecked ? 1 : scale.pop }, transition: transitions.pop }));
+}
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", render: renderCheckboxIndicator, keepMounted: true, className: "grid place-content-center text-current [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
+}
+export { Checkbox };

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

@@ -0,0 +1,13 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps, ReactNode } from 'react';
+declare const chipVariants: (props?: ({
+    variant?: "outline" | "default" | "primary" | "negative" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ChipProps extends Omit<ComponentProps<'span'>, 'children'>, VariantProps<typeof chipVariants> {
+    icon?: ReactNode;
+    children?: ReactNode;
+    onRemove?: () => void;
+    removeLabel?: string;
+}
+declare function Chip({ icon, onRemove, removeLabel, variant, className, children, ...props }: ChipProps): import("react").JSX.Element;
+export { Chip, chipVariants, type ChipProps };

package/dist/components/ui/chip.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { AnimatePresence, motion } from '../../motion/index.js';
+import { presets } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+import { X } from '../../icons/index.js';
+const chipVariants = cva('inline-flex h-6 max-w-full items-center gap-1 rounded-sm px-2 text-body-3 font-medium [&>svg]:size-3.5 [&>svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'bg-secondary text-secondary-foreground',
+            primary: 'bg-surface-primary text-primary',
+            outline: 'border border-input bg-background text-foreground',
+            /** Vibe's negative color at 10%: something is wrong or missing. */
+            negative: 'bg-negative/10 text-negative',
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+function Chip({ icon, onRemove, removeLabel, variant, className, children, ...props }) {
+    return (_jsxs("span", { "data-slot": "chip", className: cn(chipVariants({ variant }), className), ...props, children: [icon, _jsx("span", { className: "truncate", children: children }), _jsx(AnimatePresence, { initial: false, children: onRemove ? (_jsx(motion.button, { ...presets.pop, type: "button", "aria-label": removeLabel, onClick: onRemove, className: "-mr-1 inline-flex size-4 items-center justify-center rounded-sm text-icon hover:bg-accent", children: _jsx(X, { className: "size-3", "aria-hidden": "true" }) }, "remove")) : null })] }));
+}
+export { Chip, chipVariants };

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

@@ -0,0 +1,27 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+declare const clickableVariants: (props?: ({
+    variant?: "default" | "plain" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ClickableProps extends Omit<ComponentProps<'div'>, 'ref'>, VariantProps<typeof clickableVariants> {
+    /**
+     * When provided the element renders as `<a>`, preserving native link
+     * semantics. `role="button"` is NOT applied — do not override with the
+     * `role` prop.
+     */
+    href?: string;
+    /**
+     * Marks the element as non-interactive via `aria-disabled`. Activation via
+     * click, Enter, and Space is suppressed at the handler level so that the
+     * guard is not bypassable by removing the CSS.
+     */
+    disabled?: boolean;
+    /** Forwarded to `<a>` when `href` is set. */
+    rel?: string;
+    /** Forwarded to `<a>` when `href` is set. */
+    target?: string;
+}
+declare function Clickable({ className, variant, size, disabled, href, rel, target, onClick, onKeyDown, children, ...rest }: ClickableProps): import("react").JSX.Element;
+export { Clickable, clickableVariants };
+export type { ClickableProps };

package/dist/components/ui/clickable.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+const clickableVariants = cva('group/clickable inline-flex cursor-pointer select-none items-center justify-center border border-transparent outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50', {
+    variants: {
+        variant: {
+            /** Subtle hover background — most common wrapper use. */
+            default: 'rounded-md hover:bg-accent hover:text-accent-foreground',
+            /** Lighter muted hover background — for secondary surfaces. */
+            ghost: 'rounded-md hover:bg-muted',
+            /** No hover treatment — caller owns all visual feedback. */
+            plain: '',
+        },
+        size: {
+            sm: 'min-h-6',
+            /** Meets the platform tap-target minimum (24 px web, 44 px mobile). */
+            default: 'min-h-tap',
+            lg: 'min-h-9',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function Clickable({ className, variant, size, disabled = false, href, rel, target, onClick, onKeyDown, children, ...rest }) {
+    const classes = cn(clickableVariants({ variant, size }), className);
+    const ariaDisabled = disabled || undefined;
+    function handleKeyDown(e) {
+        if (e.key === ' ') {
+            // Space must never scroll the page when a clickable element is focused.
+            e.preventDefault();
+            if (!disabled)
+                e.currentTarget.click();
+        }
+        else if (e.key === 'Enter' && href === undefined && !disabled) {
+            // Enter on <a> fires natively; on a div role="button" we synthesise a click.
+            e.currentTarget.click();
+        }
+        // Always forward to the caller's onKeyDown (after preventDefault so they
+        // can read e.defaultPrevented correctly).
+        onKeyDown?.(e);
+    }
+    if (href !== undefined) {
+        return (_jsx("a", { "data-slot": "clickable", href: disabled ? undefined : href, rel: rel, target: target, "aria-disabled": ariaDisabled, tabIndex: disabled ? -1 : undefined, onClick: disabled
+                ? (e) => {
+                    e.preventDefault();
+                }
+                : onClick, onKeyDown: handleKeyDown, className: classes, ...rest, children: children }));
+    }
+    return (_jsx("div", { "data-slot": "clickable", role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": ariaDisabled, onClick: disabled ? undefined : onClick, onKeyDown: handleKeyDown, className: classes, ...rest, children: children }));
+}
+export { Clickable, clickableVariants };

package/dist/components/ui/code-block.d.ts

@@ -0,0 +1,68 @@
+import { type ComponentProps } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { Button } from './button.js';
+import type { CodeLanguage } from '../../lib/code-language.js';
+declare const codeBlockVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CodeBlockProps = ComponentProps<'div'> & VariantProps<typeof codeBlockVariants> & {
+    size?: 'default' | 'sm';
+};
+/**
+ * shadcn Code Block, adapted: a compound frame (header, actions, content, footer). The slots
+ * only lay out; pass text through `CodeBlockLines` so code is always a text node.
+ */
+declare function CodeBlock({ className, variant, size, ...props }: CodeBlockProps): import("react").JSX.Element;
+declare function CodeBlockHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function CodeBlockTitle({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/**
+ * Header action row. As a direct child of `CodeBlock` (no header) it floats over the top corner,
+ * hidden until hover or focus on a mouse and always shown on touch.
+ */
+declare function CodeBlockActions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+type CodeBlockCopyLabels = {
+    copy: string;
+    copied: string;
+    failed: string;
+};
+type CodeBlockCopyButtonProps = Omit<ComponentProps<typeof Button>, 'value' | 'children'> & {
+    /** The exact text to copy: newlines and trailing whitespace included. */
+    value: string;
+    /** Already translated; the library holds no copy of its own. */
+    labels: CodeBlockCopyLabels;
+    /** Fires once per copy the browser confirmed, never for a rejection. */
+    onCopied?: () => void;
+    onCopyError?: () => void;
+};
+declare function CodeBlockCopyButton({ value, labels, onCopied, onCopyError, variant, size, className, onClick, ...props }: CodeBlockCopyButtonProps): import("react").JSX.Element;
+type CodeBlockContentProps = ComponentProps<'pre'> & {
+    /** Wrap long lines instead of scrolling sideways. */
+    wrap?: boolean;
+    lineNumbers?: boolean;
+    startLine?: number;
+};
+/** Scrolling code body. Always `dir="ltr"`: code does not mirror in RTL. */
+declare function CodeBlockContent({ className, children, style, wrap, lineNumbers, startLine, ...props }: CodeBlockContentProps): import("react").JSX.Element;
+declare const codeBlockLineVariants: (props?: ({
+    variant?: "default" | "highlighted" | "added" | "removed" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CodeBlockLineProps = ComponentProps<'span'> & VariantProps<typeof codeBlockLineVariants>;
+declare function CodeBlockLine({ className, variant, children, ...props }: CodeBlockLineProps): import("react").JSX.Element;
+type CodeBlockLinesProps = {
+    /** Rendered verbatim as text. A trailing newline does not add a blank line. */
+    code: string;
+    /** Resolved language, or `null` for plain text (nothing is loaded). */
+    language: CodeLanguage | null;
+    /** False keeps plain text, e.g. while the fence is still open. Default true. */
+    highlight?: boolean;
+    /** Called when the highlighter fails to load; the plain text stays. */
+    onHighlightError?: (error: unknown) => void;
+};
+/**
+ * The lines of `code` as `CodeBlockLine`s: plain text at once, tokens when the shared lazy
+ * highlighter is ready. Same line geometry before and after, so the swap does not move anything.
+ * Code over the highlight size limits is one plain text node (no line wrappers or numbers).
+ */
+declare function CodeBlockLines({ code, language, highlight, onHighlightError, }: CodeBlockLinesProps): import("react").JSX.Element;
+declare function CodeBlockFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export { CodeBlock, CodeBlockHeader, CodeBlockTitle, CodeBlockActions, CodeBlockCopyButton, CodeBlockContent, CodeBlockLine, CodeBlockLines, CodeBlockFooter, type CodeBlockProps, type CodeBlockCopyLabels, type CodeBlockCopyButtonProps, type CodeBlockContentProps, type CodeBlockLineProps, type CodeBlockLinesProps, };

package/dist/components/ui/code-block.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+import { Button } from './button.js';
+import { Check, CircleAlert, Copy } from '../../icons/index.js';
+import { copyText } from '../../lib/copy-text.js';
+import { codeDisplayLines, renderCodeTokens } from '../../lib/code-tokens.js';
+import { exceedsHighlightLimits, useCodeHighlighting } from '../../hooks/use-code-highlighting.js';
+const codeBlockVariants = cva('group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 data-[size=sm]:text-xs', {
+    variants: {
+        variant: {
+            default: 'border border-input bg-surface-1 text-foreground has-[>[data-slot=code-block-content]:focus-visible]:border-ring',
+            destructive: 'border border-destructive/30 text-destructive dark:border-destructive/40',
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+/**
+ * shadcn Code Block, adapted: a compound frame (header, actions, content, footer). The slots
+ * only lay out; pass text through `CodeBlockLines` so code is always a text node.
+ */
+function CodeBlock({ className, variant = 'default', size = 'default', ...props }) {
+    return (_jsx("div", { "data-slot": "code-block", "data-variant": variant, "data-size": size, className: cn(codeBlockVariants({ variant }), className), ...props }));
+}
+function CodeBlockHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "code-block-header", className: cn('flex min-h-8 min-w-0 shrink-0 items-center gap-2 px-3 pt-2 text-muted-foreground group-data-[size=sm]/code-block:min-h-7 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-1.5 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0', className), ...props }));
+}
+function CodeBlockTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "code-block-title", className: cn('min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*=size-])]:size-3.5 *:[svg]:me-1.5', className), ...props }));
+}
+/**
+ * Header action row. As a direct child of `CodeBlock` (no header) it floats over the top corner,
+ * hidden until hover or focus on a mouse and always shown on touch.
+ */
+function CodeBlockActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "code-block-actions", className: cn('-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10', className), ...props }));
+}
+const FEEDBACK_MS = 2000;
+function CodeBlockCopyButton({ value, labels, onCopied, onCopyError, variant = 'ghost', size = 'icon-xs', className, onClick, ...props }) {
+    const [result, setResult] = useState(null);
+    // Feedback belongs to the text that was copied; a changed value starts clean.
+    const status = result && result.value === value ? result.status : 'idle';
+    useEffect(() => {
+        if (!result)
+            return;
+        const timeout = setTimeout(() => setResult(null), FEEDBACK_MS);
+        return () => clearTimeout(timeout);
+    }, [result]);
+    const label = status === 'copied' ? labels.copied : status === 'failed' ? labels.failed : labels.copy;
+    const Glyph = status === 'copied' ? Check : status === 'failed' ? CircleAlert : Copy;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { "data-slot": "code-block-copy-button", "data-copied": status === 'copied' || undefined, "data-copy-failed": status === 'failed' || undefined, variant: variant, size: size, "aria-label": label, className: cn(status === 'failed' && 'text-destructive', className), onClick: (event) => {
+                    onClick?.(event);
+                    if (event.defaultPrevented)
+                        return;
+                    void copyText(value).then((ok) => {
+                        setResult({ value, status: ok ? 'copied' : 'failed' });
+                        if (ok)
+                            onCopied?.();
+                        else
+                            onCopyError?.();
+                    });
+                }, ...props, children: _jsx(Glyph, { "aria-hidden": "true" }) }), _jsx("span", { "aria-live": "polite", role: "status", className: "sr-only", children: status === 'idle' ? '' : label })] }));
+}
+/** Scrolling code body. Always `dir="ltr"`: code does not mirror in RTL. */
+function CodeBlockContent({ className, children, style, wrap = false, lineNumbers = false, startLine = 1, ...props }) {
+    return (_jsx("pre", { "data-slot": "code-block-content", "data-wrap": wrap || undefined, "data-numbered": lineNumbers || undefined, dir: "ltr", tabIndex: 0, style: { counterReset: `line ${startLine - 1}`, ...style }, className: cn('min-h-0 min-w-0 overflow-auto px-3 py-3 text-start font-mono leading-relaxed outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-1.5 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1 data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap', className), ...props, children: _jsx("code", { "data-slot": "code-block-code", className: "grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0", children: children }) }));
+}
+const codeBlockLineVariants = cva("relative -mx-3 block min-h-lh px-3 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']", {
+    variants: {
+        variant: {
+            default: '',
+            added: "bg-muted after:content-['+']",
+            removed: "bg-destructive/10 after:text-destructive after:content-['−']",
+            highlighted: 'bg-muted',
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+function CodeBlockLine({ className, variant = 'default', children, ...props }) {
+    // An empty line holds a newline so a selection keeps blank lines.
+    const empty = children === undefined ||
+        children === null ||
+        children === '' ||
+        (Array.isArray(children) && children.length === 0);
+    return (_jsx("span", { "data-slot": "code-block-line", "data-variant": variant, className: cn(codeBlockLineVariants({ variant }), className), ...props, children: _jsx("span", { "data-slot": "code-block-line-content", className: "min-w-0", children: empty ? '\n' : children }) }));
+}
+/**
+ * The lines of `code` as `CodeBlockLine`s: plain text at once, tokens when the shared lazy
+ * highlighter is ready. Same line geometry before and after, so the swap does not move anything.
+ * Code over the highlight size limits is one plain text node (no line wrappers or numbers).
+ */
+function CodeBlockLines({ code, language, highlight = true, onHighlightError, }) {
+    const tokens = useCodeHighlighting({
+        code,
+        language,
+        enabled: highlight,
+        onError: onHighlightError,
+    });
+    // Past the highlight limits one text node replaces the per-line wrappers: a 100,000-line
+    // file would otherwise mount hundreds of thousands of spans for no visible gain.
+    if (exceedsHighlightLimits(code)) {
+        return (_jsx("span", { "data-slot": "code-block-plain", className: "block", children: code.endsWith('\n') ? code.slice(0, -1) : code }));
+    }
+    const plain = codeDisplayLines(code);
+    const count = tokens ? Math.min(tokens.length, plain.length) : plain.length;
+    return (_jsx(_Fragment, { children: Array.from({ length: count }, (_, index) => (_jsx(CodeBlockLine, { children: tokens ? renderCodeTokens(tokens[index]) : plain[index] }, index))) }));
+}
+function CodeBlockFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "code-block-footer", className: cn('flex min-w-0 shrink-0 items-center gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5', className), ...props }));
+}
+export { CodeBlock, CodeBlockHeader, CodeBlockTitle, CodeBlockActions, CodeBlockCopyButton, CodeBlockContent, CodeBlockLine, CodeBlockLines, CodeBlockFooter, };

package/dist/components/ui/code-view.d.ts

@@ -0,0 +1,21 @@
+import { type CodeLanguage } from '../../lib/code-language.js';
+import { CODE_VIEW_MAX_CHARS, CODE_VIEW_MAX_LINES } from '../../hooks/use-code-highlighting.js';
+export { CODE_VIEW_MAX_CHARS, CODE_VIEW_MAX_LINES };
+type CodeViewProps = {
+    /** The file's text. Always rendered as text nodes, never as markup. */
+    code: string;
+    /** Picks the language from the extension. Unknown extensions stay plain and load nothing. */
+    fileName?: string;
+    /** Overrides the extension lookup. */
+    language?: CodeLanguage;
+    /** Called when the highlighter or a grammar fails to load or throws; the plain text stays. */
+    onError?: (error: unknown) => void;
+    className?: string;
+};
+/**
+ * Read-only code or text. Renders the plain `<pre>` straight away and swaps in syntax-highlighted
+ * tokens once the lazily loaded highlighter is ready. Highlighting is skipped for large files
+ * and whenever the language is unknown.
+ */
+declare function CodeView({ code, fileName, language, onError, className }: CodeViewProps): import("react").JSX.Element;
+export { CodeView, type CodeViewProps };

package/dist/components/ui/code-view.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { cn } from '../../lib/utils.js';
+import { codeLanguageForFileName } from '../../lib/code-language.js';
+import { renderCodeTokens } from '../../lib/code-tokens.js';
+import { CODE_VIEW_MAX_CHARS, CODE_VIEW_MAX_LINES, useCodeHighlighting, } from '../../hooks/use-code-highlighting.js';
+export { CODE_VIEW_MAX_CHARS, CODE_VIEW_MAX_LINES };
+/**
+ * Read-only code or text. Renders the plain `<pre>` straight away and swaps in syntax-highlighted
+ * tokens once the lazily loaded highlighter is ready. Highlighting is skipped for large files
+ * and whenever the language is unknown.
+ */
+function CodeView({ code, fileName, language, onError, className }) {
+    const lang = language ?? codeLanguageForFileName(fileName);
+    const lines = useCodeHighlighting({ code, language: lang, onError });
+    return (_jsx("pre", { "data-slot": "code-view", "data-highlighted": lines ? 'true' : undefined, className: cn('whitespace-pre-wrap break-words p-6 font-mono text-sm text-foreground', className), children: lines
+            ? lines.map((line, index) => (_jsxs(Fragment, { children: [index > 0 ? '\n' : null, renderCodeTokens(line)] }, index)))
+            : code }));
+}
+export { CodeView };

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

@@ -0,0 +1,6 @@
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+declare function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props): import("react").JSX.Element;
+declare function CollapsibleTrigger({ className, ...props }: CollapsiblePrimitive.Trigger.Props): import("react").JSX.Element;
+/** Animates open and shut with `presets.collapse` (motion), so callers never add their own. */
+declare function CollapsibleContent({ className, ...props }: CollapsiblePrimitive.Panel.Props): import("react").JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };