@streamsai/ui 0.0.0-stage → 0.1.1

package/dist/components/ui/trend-line.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { AnimatePresence, motion } from '../../motion/index.js';
+import { presets, transitions } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+import { Skeleton } from './skeleton.js';
+// Shared with `TrendLineSkeleton`: change a size here and the skeleton follows.
+const SINGLE_ROOT_CLASS = 'relative flex h-40 w-full gap-2 text-xs text-muted-foreground';
+const MULTI_ROOT_CLASS = 'relative flex w-full flex-col gap-3 text-xs text-muted-foreground';
+const MULTI_PLOT_CLASS = 'relative mb-5 flex h-40 gap-2';
+const X_AXIS_CLASS = 'absolute inset-x-0 -bottom-5 flex justify-between';
+const VIEW_W = 100;
+const VIEW_H = 40;
+const GRIDLINES = 3;
+const gridFractions = Array.from({ length: GRIDLINES }, (_, i) => i / (GRIDLINES - 1));
+const buildPaths = (points, all, max) => {
+    // No history: nothing to draw (and no last real coordinate to end the area under), even when
+    // a projection is passed.
+    if (points.length === 0)
+        return { line: '', area: '' };
+    const step = all.length > 1 ? VIEW_W / (all.length - 1) : 0;
+    const coordsAll = all.map((point, index) => {
+        const x = all.length > 1 ? index * step : VIEW_W / 2;
+        const y = VIEW_H - (point.value / max) * VIEW_H;
+        return { x, y };
+    });
+    const coordsPoints = coordsAll.slice(0, points.length);
+    const projected = all.length > points.length;
+    if (coordsPoints.length === 1) {
+        const only = coordsPoints[0];
+        // With a projection the lone real point sits at its own x (a dot); the dashed line goes on.
+        if (projected)
+            return {
+                line: `M${only.x},${only.y} L${only.x},${only.y}`,
+                area: `M${only.x},${only.y} L${only.x},${VIEW_H} Z`,
+            };
+        return {
+            line: `M0,${only.y} L${VIEW_W},${only.y}`,
+            area: `M0,${only.y} L${VIEW_W},${only.y} L${VIEW_W},${VIEW_H} L0,${VIEW_H} Z`,
+        };
+    }
+    const line = coordsPoints.map((c, i) => `${i === 0 ? 'M' : 'L'}${c.x},${c.y}`).join(' ');
+    // The area ends under the last real point: no area under the projection.
+    const lastX = projected ? coordsPoints[coordsPoints.length - 1].x : VIEW_W;
+    const area = `${line} L${lastX},${VIEW_H} L0,${VIEW_H} Z`;
+    return { line, area };
+};
+const buildProjectionPath = (points, projection, all, max) => {
+    const step = all.length > 1 ? VIEW_W / (all.length - 1) : 0;
+    const getCoord = (index, value) => ({
+        x: all.length > 1 ? index * step : VIEW_W / 2,
+        y: VIEW_H - (value / max) * VIEW_H,
+    });
+    // Start from the last real point
+    const lastReal = points[points.length - 1];
+    if (!lastReal)
+        return '';
+    const startCoord = getCoord(points.length - 1, lastReal.value);
+    const projCoords = projection.map((pt, i) => getCoord(points.length + i, pt.value));
+    return [startCoord, ...projCoords].map((c, i) => `${i === 0 ? 'M' : 'L'}${c.x},${c.y}`).join(' ');
+};
+/**
+ * A line with a soft area under it, three gridlines and one tooltip. Hand-rolled SVG on a
+ * fixed viewBox stretched to the box (`preserveAspectRatio="none"`); `vectorEffect` keeps the
+ * stroke one pixel wide whatever the aspect. The SVG is decoration: an invisible button per
+ * point carries the data for pointers, keyboards and screen readers, and a visually hidden
+ * table repeats it for anyone who reads instead of hovers.
+ *
+ * On mount the line and its area draw in from the left (a clip that grows to full width, which
+ * reads the same as a stroke draw because x only ever increases, and unlike `pathLength` it is
+ * not thrown off by `non-scaling-stroke`). The hover guide and tooltip fade in and out.
+ *
+ * Pass `projection` to render a dashed line continuing from the last real point through
+ * projected future values; hover buttons and the hidden table cover all points.
+ */
+function SingleSeriesTrendLine({ points, formatValue = String, formatValueDetail, projection, projectedLabel = 'projected', className, 'aria-label': ariaLabel, ...props }) {
+    const [active, setActive] = useState(null);
+    const tableId = useId();
+    const clipId = useId();
+    const all = projection ? [...points, ...projection] : points;
+    const max = Math.max(1, ...all.map((point) => point.value));
+    const { line, area } = buildPaths(points, all, max);
+    const projectionPath = projection && projection.length > 0 && points.length > 0
+        ? buildProjectionPath(points, projection, all, max)
+        : null;
+    const activePoint = active === null ? null : (all[active] ?? null);
+    const isActiveProjected = active !== null && active >= points.length;
+    const activeDetail = activePoint && !isActiveProjected ? formatValueDetail?.(activePoint.value) : undefined;
+    const activeLeft = active === null || all.length < 2 ? 50 : (active / (all.length - 1)) * 100;
+    return (_jsxs("figure", { "data-slot": "trend-line", "aria-label": ariaLabel, className: cn(SINGLE_ROOT_CLASS, className), ...props, children: [_jsx("div", { "aria-hidden": "true", className: "flex shrink-0 flex-col justify-between py-px text-right tabular-nums", children: gridFractions.map((fraction) => (_jsx("span", { children: formatValue(Math.round(max * (1 - fraction))) }, fraction))) }), _jsxs("div", { className: "relative min-w-0 flex-1", onMouseLeave: () => setActive(null), children: [_jsxs("svg", { "aria-hidden": "true", viewBox: `0 0 ${VIEW_W} ${VIEW_H}`, preserveAspectRatio: "none", className: "absolute inset-0 size-full overflow-visible", children: [gridFractions.map((fraction) => (_jsx("line", { x1: "0", x2: VIEW_W, y1: fraction * VIEW_H, y2: fraction * VIEW_H, vectorEffect: "non-scaling-stroke", className: "stroke-border", strokeWidth: "1", strokeDasharray: fraction === 1 ? undefined : '2 3' }, fraction))), points.length > 0 && (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx(motion.rect, { x: -1, y: -VIEW_H, height: VIEW_H * 3, initial: { width: 0 }, animate: { width: VIEW_W + 2 }, transition: transitions.slow }) }) }), _jsxs("g", { clipPath: `url(#${clipId})`, children: [_jsx("path", { d: area, className: "fill-chart-1/15" }), _jsx("path", { d: line, fill: "none", vectorEffect: "non-scaling-stroke", strokeWidth: "1.5", strokeLinejoin: "round", strokeLinecap: "round", className: "stroke-chart-1" }), projectionPath && (_jsx("path", { d: projectionPath, fill: "none", vectorEffect: "non-scaling-stroke", strokeWidth: "1.5", strokeLinejoin: "round", strokeLinecap: "round", strokeDasharray: "2 2", className: "stroke-chart-1/50", "data-slot": "trend-line-projection" }))] })] })), _jsx(AnimatePresence, { children: active !== null && (_jsx(motion.line, { ...presets.fade, x1: (activeLeft / 100) * VIEW_W, x2: (activeLeft / 100) * VIEW_W, y1: "0", y2: VIEW_H, vectorEffect: "non-scaling-stroke", strokeWidth: "1", className: "stroke-foreground/40" }, "guide")) })] }), _jsx("div", { className: "absolute inset-0 flex", "aria-describedby": tableId, children: all.map((point, index) => {
+                            const isProjected = index >= points.length;
+                            const label = isProjected
+                                ? `${point.label}: ${formatValue(point.value)} (${projectedLabel})`
+                                : `${point.label}: ${formatValue(point.value)}`;
+                            return (_jsx("button", { type: "button", "aria-label": label, "data-active": active === index || undefined, className: "min-w-0 flex-1 cursor-crosshair rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50", onMouseEnter: () => setActive(index), onFocus: () => setActive(index), onBlur: () => setActive(null) }, `${point.label}-${index}`));
+                        }) }), _jsx(AnimatePresence, { children: activePoint && (_jsxs(motion.div, { ...presets.fade, role: "presentation", "aria-hidden": "true", "data-slot": "trend-line-tooltip", className: "pointer-events-none absolute -top-1 z-10 -translate-x-1/2 -translate-y-full rounded-md bg-foreground px-2 py-1 text-xs whitespace-nowrap text-background shadow-md", style: { left: `${activeLeft}%` }, children: [_jsx("span", { className: "font-semibold tabular-nums", children: formatValue(activePoint.value) }), _jsx("span", { className: "ml-1.5 opacity-70", children: activePoint.label }), isActiveProjected && _jsxs("span", { className: "ml-1 opacity-70", children: ["(", projectedLabel, ")"] }), activeDetail ? (_jsx("div", { className: "mt-0.5 opacity-70 tabular-nums", children: activeDetail })) : null] }, "tooltip")) }), _jsxs("div", { className: X_AXIS_CLASS, "aria-hidden": "true", children: [_jsx("span", { children: points[0]?.label }), all.length > 1 && _jsx("span", { children: all[all.length - 1]?.label })] })] }), _jsxs("table", { id: tableId, className: "sr-only", children: [_jsx("caption", { children: ariaLabel }), _jsx("tbody", { children: all.map((point, index) => {
+                            const isProjected = index >= points.length;
+                            return (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: point.label }), _jsxs("td", { children: [formatValue(point.value), isProjected && ` (${projectedLabel})`] })] }, `${point.label}-${index}`));
+                        }) })] })] }));
+}
+/**
+ * Colour AND shape differ per series, so overlapping lines stay readable without colour: solid
+ * with round dots, dashed with diamond dots, dotted with square dots. Colours are chart tokens.
+ */
+const MULTI_STYLES = [
+    {
+        stroke: 'stroke-chart-1',
+        fill: 'fill-chart-1',
+        dash: undefined,
+        dot: 'rounded-full bg-chart-1',
+    },
+    {
+        stroke: 'stroke-chart-3',
+        fill: 'fill-chart-3',
+        dash: '5 3',
+        dot: 'rotate-45 rounded-[1px] bg-chart-3',
+    },
+    { stroke: 'stroke-chart-2', fill: 'fill-chart-2', dash: '1 3', dot: 'rounded-[1px] bg-chart-2' },
+];
+/** Dots on every point up to this many points; beyond it only the first, last and active. */
+const MAX_ALL_DOTS = 31;
+/**
+ * Zero-based integer axis: at most two intervals, every tick a whole number. The top tick is
+ * the smallest multiple of the step that holds `max`, so no line is ever clipped.
+ */
+const integerTicks = (max) => {
+    const top = Math.max(1, Math.ceil(max));
+    const intervals = Math.min(top, GRIDLINES - 1);
+    const step = Math.ceil(top / intervals);
+    return Array.from({ length: intervals + 1 }, (_, i) => i * step);
+};
+function MultiSeriesTrendLine({ multiSeries, formatValue = String, onPointActivate, className, 'aria-label': ariaLabel, ...props }) {
+    const [active, setActive] = useState(null);
+    const tableId = useId();
+    const clipId = useId();
+    const { names, points } = multiSeries;
+    const ticks = integerTicks(Math.max(0, ...points.flatMap((point) => point.values)));
+    const top = ticks[ticks.length - 1];
+    const first = points[0]?.timestamp ?? 0;
+    const span = (points[points.length - 1]?.timestamp ?? 0) - first;
+    // x is the timestamp's share of the span, so a short last interval stays short. The SVG is not
+    // mirrored in RTL, so the overlay below uses physical `left` to stay aligned with it.
+    const xs = points.map((point) => (span > 0 ? ((point.timestamp - first) / span) * VIEW_W : 50));
+    const yOf = (value) => VIEW_H - (Math.min(value, top) / top) * VIEW_H;
+    const paths = names.map((_, series) => xs.length < 2
+        ? ''
+        : points
+            .map((point, i) => `${i === 0 ? 'M' : 'L'}${xs[i]},${yOf(point.values[series] ?? 0)}`)
+            .join(' '));
+    const showAllDots = points.length <= MAX_ALL_DOTS;
+    const dotIndexes = new Set(showAllDots
+        ? points.map((_, i) => i)
+        : [0, points.length - 1, ...(active === null ? [] : [active])]);
+    const activePoint = active === null ? null : (points[active] ?? null);
+    const activeLeft = active === null ? 50 : (xs[active] ?? 50);
+    const tooltipShift = activeLeft < 20 ? 'translate-x-0' : activeLeft > 80 ? '-translate-x-full' : '-translate-x-1/2';
+    // Each target spans from the midpoint before it to the midpoint after it.
+    const bounds = xs.map((x, i) => {
+        const start = i === 0 ? 0 : (xs[i - 1] + x) / 2;
+        const end = i === xs.length - 1 ? VIEW_W : (x + xs[i + 1]) / 2;
+        return { start, width: Math.max(0, end - start) };
+    });
+    const pointLabel = (point) => [
+        `${point.label}: ${names.map((name, s) => `${name} ${formatValue(point.values[s] ?? 0)}`).join(', ')}`,
+        point.note,
+        point.activateLabel,
+    ]
+        .filter(Boolean)
+        .join('. ');
+    return (_jsxs("figure", { "data-slot": "trend-line", "data-mode": "multi", "aria-label": ariaLabel, className: cn(MULTI_ROOT_CLASS, className), ...props, children: [_jsx("ul", { "data-slot": "trend-line-legend", className: "flex flex-wrap items-center gap-x-4 gap-y-1", children: names.map((name, series) => {
+                    const style = MULTI_STYLES[series % MULTI_STYLES.length];
+                    return (_jsxs("li", { className: "flex items-center gap-1.5", children: [_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 16 8", className: "h-2 w-4 shrink-0", children: [_jsx("line", { x1: "0", x2: "16", y1: "4", y2: "4", strokeWidth: "1.5", strokeDasharray: style.dash, className: style.stroke }), _jsx("rect", { x: "5.5", y: "1.5", width: "5", height: "5", rx: series % MULTI_STYLES.length === 0 ? 2.5 : 0.5, transform: series % MULTI_STYLES.length === 1 ? 'rotate(45 8 4)' : undefined, className: style.fill })] }), _jsx("span", { children: name })] }, `${name}-${series}`));
+                }) }), _jsxs("div", { className: MULTI_PLOT_CLASS, children: [_jsx("div", { "aria-hidden": "true", "data-slot": "trend-line-y-axis", className: "flex shrink-0 flex-col-reverse justify-between py-px text-end tabular-nums", children: ticks.map((tick) => (_jsx("span", { children: formatValue(tick) }, tick))) }), _jsxs("div", { className: "relative min-w-0 flex-1", onMouseLeave: () => setActive(null), children: [_jsxs("svg", { "aria-hidden": "true", "data-slot": "trend-line-plot", viewBox: `0 0 ${VIEW_W} ${VIEW_H}`, preserveAspectRatio: "none", className: "absolute inset-0 size-full overflow-visible", children: [ticks.map((tick) => (_jsx("line", { x1: "0", x2: VIEW_W, y1: yOf(tick), y2: yOf(tick), vectorEffect: "non-scaling-stroke", className: "stroke-border", strokeWidth: "1", strokeDasharray: tick === 0 ? undefined : '2 3' }, tick))), points.length > 0 && (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx(motion.rect, { x: -1, y: -VIEW_H, height: VIEW_H * 3, initial: { width: 0 }, animate: { width: VIEW_W + 2 }, transition: transitions.slow }) }) }), _jsx("g", { clipPath: `url(#${clipId})`, children: paths.map((d, series) => {
+                                                    if (!d)
+                                                        return null;
+                                                    const style = MULTI_STYLES[series % MULTI_STYLES.length];
+                                                    return (_jsx("path", { d: d, fill: "none", vectorEffect: "non-scaling-stroke", strokeWidth: "1.5", strokeLinejoin: "round", strokeDasharray: style.dash, className: style.stroke, "data-slot": "trend-line-series", "data-series": series }, series));
+                                                }) })] })), _jsx(AnimatePresence, { children: active !== null && (_jsx(motion.line, { ...presets.fade, x1: activeLeft, x2: activeLeft, y1: "0", y2: VIEW_H, vectorEffect: "non-scaling-stroke", strokeWidth: "1", className: "stroke-foreground/40" }, "guide")) })] }), _jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", children: points.map((point, index) => dotIndexes.has(index)
+                                    ? names.map((_, series) => {
+                                        const style = MULTI_STYLES[series % MULTI_STYLES.length];
+                                        return (_jsx("span", { "data-slot": "trend-line-dot", "data-series": series, className: cn('absolute size-1.5 -translate-x-1/2 -translate-y-1/2 ring-1 ring-background', style.dot, active === index && 'size-2'), style: {
+                                                left: `${xs[index]}%`,
+                                                top: `${(yOf(point.values[series] ?? 0) / VIEW_H) * 100}%`,
+                                            } }, `${index}-${series}`));
+                                    })
+                                    : null) }), _jsx("div", { className: "absolute inset-0", "aria-describedby": tableId, children: points.map((point, index) => {
+                                    const activatable = Boolean(point.activateLabel && onPointActivate);
+                                    return (_jsx("button", { type: "button", "aria-label": pointLabel(point), "data-active": active === index || undefined, "data-activatable": activatable || undefined, className: cn('absolute inset-y-0 min-w-0 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50', activatable ? 'cursor-pointer' : 'cursor-crosshair'), style: { left: `${bounds[index]?.start}%`, width: `${bounds[index]?.width}%` }, onMouseEnter: () => setActive(index), onFocus: () => setActive(index), onBlur: () => setActive(null), onClick: () => {
+                                            if (activatable)
+                                                onPointActivate?.(index);
+                                        } }, `${point.timestamp}-${index}`));
+                                }) }), _jsx(AnimatePresence, { children: activePoint && (_jsxs(motion.div, { ...presets.fade, role: "presentation", "aria-hidden": "true", "data-slot": "trend-line-tooltip", className: cn('pointer-events-none absolute -top-1 z-10 -translate-y-full rounded-md bg-foreground px-2 py-1 text-xs whitespace-nowrap text-background shadow-md', tooltipShift), style: { left: `${activeLeft}%` }, children: [_jsx("div", { className: "font-semibold", children: activePoint.label }), activePoint.note ? _jsx("div", { className: "opacity-70", children: activePoint.note }) : null, names.map((name, series) => (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "opacity-70", children: name }), _jsx("span", { className: "font-semibold tabular-nums", children: formatValue(activePoint.values[series] ?? 0) })] }, `${name}-${series}`)))] }, "tooltip")) }), _jsxs("div", { className: X_AXIS_CLASS, "aria-hidden": "true", children: [_jsx("span", { children: points[0]?.axisLabel ?? points[0]?.label }), points.length > 1 && (_jsx("span", { children: points[points.length - 1]?.axisLabel ?? points[points.length - 1]?.label }))] })] })] }), _jsxs("table", { id: tableId, className: "sr-only", children: [_jsx("caption", { children: ariaLabel }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("td", {}), names.map((name, series) => (_jsx("th", { scope: "col", children: name }, `${name}-${series}`)))] }) }), _jsx("tbody", { children: points.map((point, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: point.label }), names.map((name, series) => (_jsx("td", { children: formatValue(point.values[series] ?? 0) }, `${name}-${series}`)))] }, `${point.timestamp}-${index}`))) })] })] }));
+}
+function TrendLine(props) {
+    if (props.multiSeries !== undefined)
+        return _jsx(MultiSeriesTrendLine, { ...props });
+    return _jsx(SingleSeriesTrendLine, { ...props });
+}
+const SKELETON_AREA = 'polygon(0 72%, 14% 48%, 28% 62%, 43% 30%, 58% 52%, 72% 24%, 86% 44%, 100% 18%, 100% 100%, 0 100%)';
+/** Y-axis stubs, dashed grid, an area shape and x-axis stubs: the plot of either trend line. */
+function PlotSkeleton() {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "trend-line-skeleton-y-axis", className: "flex shrink-0 flex-col justify-between py-px", children: [0, 1, 2].map((tick) => (_jsx(Skeleton, { variant: "shimmer", className: "h-3 w-8" }, tick))) }), _jsxs("div", { className: "relative min-w-0 flex-1", children: [['top-0', 'top-1/2', 'bottom-0'].map((position) => (_jsx("div", { className: cn('absolute inset-x-0 border-t border-dashed border-border', position) }, position))), _jsx(Skeleton, { variant: "shimmer", className: "absolute inset-0 rounded-none bg-foreground/10", style: { clipPath: SKELETON_AREA } }), _jsxs("div", { className: X_AXIS_CLASS, children: [_jsx(Skeleton, { variant: "shimmer", className: "h-3 w-10" }), _jsx(Skeleton, { variant: "shimmer", className: "h-3 w-10" })] })] })] }));
+}
+/**
+ * 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.
+ */
+function TrendLineSkeleton({ legendItems = 0, className, ...props }) {
+    if (legendItems > 0) {
+        return (_jsxs("div", { "data-slot": "trend-line-skeleton", "aria-hidden": "true", className: cn(MULTI_ROOT_CLASS, className), ...props, children: [_jsx("div", { className: "flex h-4 items-center gap-x-4", children: Array.from({ length: legendItems }, (_, index) => (_jsx(Skeleton, { variant: "shimmer", className: "h-3 w-20" }, index))) }), _jsx("div", { className: MULTI_PLOT_CLASS, children: _jsx(PlotSkeleton, {}) })] }));
+    }
+    return (_jsx("div", { "data-slot": "trend-line-skeleton", "aria-hidden": "true", className: cn(SINGLE_ROOT_CLASS, className), ...props, children: _jsx(PlotSkeleton, {}) }));
+}
+export { TrendLine, TrendLineSkeleton };

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

@@ -0,0 +1,30 @@
+import { useRender } from '@base-ui/react/use-render';
+import { type ReactElement, type ReactNode, type RefObject } from 'react';
+/**
+ * Shared by `Truncate`, `Text ellipsis` and `Heading ellipsis`: attach your `ref` to the clipped
+ * element and wrap it in `TruncationTooltip` with the returned `text` and `truncated`. `tooltip`:
+ * `false` opts out, a string overrides the content (needed when the children are not plain text).
+ * `enabled: false` leaves `text` undefined, which makes the wrapper a pass-through.
+ */
+declare function useTruncationTooltip(ref: RefObject<HTMLElement | null>, enabled: boolean, tooltip: boolean | string | undefined, children: ReactNode): {
+    text: string | undefined;
+    truncated: boolean;
+};
+/** Tooltip with the full text around `children`; only opens while `truncated`. */
+declare function TruncationTooltip({ text, truncated, children, }: {
+    text: string | undefined;
+    truncated: boolean;
+    children: ReactElement;
+}): import("react").JSX.Element;
+type TruncateProps = useRender.ComponentProps<'span'> & {
+    /** `false` turns the tooltip off; a string overrides its content. Default: the children's text. */
+    tooltip?: boolean | string;
+};
+/**
+ * Typography-free truncation: clips overflowing text with an ellipsis and shows the full text in
+ * a tooltip only while it is clipped. Renders a `span`; use `render` to put the same behaviour on
+ * another element (`render={<h1 />}`, `render={<button />}`). It adds no display or font classes,
+ * so the element must already be a block, flex item or `min-w-0` box that can overflow.
+ */
+declare function Truncate({ className, render, tooltip, ref, ...props }: TruncateProps): import("react").JSX.Element;
+export { Truncate, TruncationTooltip, useTruncationTooltip, type TruncateProps };

package/dist/components/ui/truncate.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { Children, useRef } from 'react';
+import { useIsTruncated } from '../../hooks/use-is-truncated.js';
+import { cn } from '../../lib/utils.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip.js';
+/** Plain text of string / number children; undefined as soon as any child is an element. */
+function plainText(children) {
+    const parts = Children.toArray(children);
+    return parts.every((part) => typeof part === 'string' || typeof part === 'number')
+        ? parts.join('')
+        : undefined;
+}
+/**
+ * Shared by `Truncate`, `Text ellipsis` and `Heading ellipsis`: attach your `ref` to the clipped
+ * element and wrap it in `TruncationTooltip` with the returned `text` and `truncated`. `tooltip`:
+ * `false` opts out, a string overrides the content (needed when the children are not plain text).
+ * `enabled: false` leaves `text` undefined, which makes the wrapper a pass-through.
+ */
+function useTruncationTooltip(ref, enabled, tooltip, children) {
+    const text = enabled && tooltip !== false
+        ? typeof tooltip === 'string'
+            ? tooltip
+            : plainText(children)
+        : undefined;
+    const truncated = useIsTruncated(ref, text);
+    return { text, truncated };
+}
+/** Tooltip with the full text around `children`; only opens while `truncated`. */
+function TruncationTooltip({ text, truncated, children, }) {
+    if (text === undefined)
+        return children;
+    return (_jsxs(Tooltip, { disabled: !truncated, children: [_jsx(TooltipTrigger, { render: children }), _jsx(TooltipContent, { children: text })] }));
+}
+/**
+ * Typography-free truncation: clips overflowing text with an ellipsis and shows the full text in
+ * a tooltip only while it is clipped. Renders a `span`; use `render` to put the same behaviour on
+ * another element (`render={<h1 />}`, `render={<button />}`). It adds no display or font classes,
+ * so the element must already be a block, flex item or `min-w-0` box that can overflow.
+ */
+function Truncate({ className, render, tooltip = true, ref, ...props }) {
+    const innerRef = useRef(null);
+    const truncation = useTruncationTooltip(innerRef, true, tooltip, props.children);
+    const element = useRender({
+        defaultTagName: 'span',
+        ref: ref ? [ref, innerRef] : innerRef,
+        props: mergeProps({ className: cn('truncate', className) }, props),
+        render,
+        state: { slot: 'truncate' },
+    });
+    return (_jsx(TruncationTooltip, { text: truncation.text, truncated: truncation.truncated, children: element }));
+}
+export { Truncate, TruncationTooltip, useTruncationTooltip };

package/dist/components/ui/viewer-shell.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+export interface ViewerShellLabels {
+    close: string;
+    fullscreen: string;
+    exitFullscreen: string;
+    openExternal?: string;
+    download?: string;
+    reload: string;
+    popOut: string;
+}
+/** Header zoom buttons for content the shell can't scale itself; the host owns the level. */
+export interface ViewerShellZoom {
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    canZoomIn: boolean;
+    canZoomOut: boolean;
+    labels: {
+        zoomIn: string;
+        zoomOut: string;
+    };
+}
+export interface ViewerShellProps {
+    title: string;
+    children: React.ReactNode;
+    onClose: () => void;
+    fullscreen?: boolean;
+    onToggleFullscreen?: () => void;
+    externalHref?: string;
+    downloadHref?: string;
+    /**
+     * A url on an origin of its own (the user content domain) that is safe to open top-level in a
+     * new tab. Never pass a same-origin or storage url: the link drops `opener` and the referrer,
+     * but it cannot sandbox what it opens.
+     */
+    popOutHref?: string;
+    /**
+     * Runs when the pop out link is clicked, before the browser follows it. A host whose link can
+     * go stale (a signed url) calls `preventDefault()` and opens a fresh one itself.
+     */
+    onPopOut?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** Re-mounts the content (and lets the host fetch a fresh signed url). */
+    onReload?: () => void;
+    zoom?: ViewerShellZoom;
+    /** Host chrome rendered at the very top of the card, above the header (a desktop caption band). */
+    lead?: React.ReactNode;
+    /**
+     * Chrome that belongs to the host, rendered under the header and outside the content: used to
+     * tell people that what follows is someone else's file, not the app.
+     */
+    banner?: React.ReactNode;
+    className?: string;
+    labels: ViewerShellLabels;
+}
+declare function ViewerShell({ title, children, onClose, fullscreen, onToggleFullscreen, externalHref, downloadHref, popOutHref, onPopOut, onReload, zoom, lead, banner, className, labels, }: ViewerShellProps): React.JSX.Element;
+export { ViewerShell };

package/dist/components/ui/viewer-shell.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { AnimatePresence, Swap, motion } from '../../motion/index.js';
+import { presets } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+import { X, Maximize, Minimize, ExternalLink, Download, Open, RotateCcw, ZoomIn, ZoomOut, } from '../../icons/index.js';
+import { IconButton } from './icon-button.js';
+function ViewerShell({ title, children, onClose, fullscreen = false, onToggleFullscreen, externalHref, downloadHref, popOutHref, onPopOut, onReload, zoom, lead, banner, className, labels, }) {
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape')
+            onClose();
+    };
+    return (_jsxs("div", { "data-slot": "viewer-shell", tabIndex: -1, onKeyDown: handleKeyDown, className: cn('flex flex-col overflow-hidden rounded-xl border bg-background shadow-lg outline-none', className), children: [lead, _jsxs("div", { className: "flex h-11 shrink-0 items-center gap-2 border-b px-3", children: [_jsx("h2", { className: "min-w-0 flex-1 truncate text-body-2 font-semibold", children: title }), _jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [onReload ? (_jsx(IconButton, { "aria-label": labels.reload, size: "icon-sm", variant: "ghost", onClick: onReload, children: _jsx(RotateCcw, { className: "size-3.5" }) })) : null, _jsxs(AnimatePresence, { initial: false, children: [externalHref ? (_jsx(motion.a, { ...presets.pop, href: externalHref, target: "_blank", rel: "noopener noreferrer", "aria-label": labels.openExternal, className: "inline-flex size-7 items-center justify-center rounded-md text-sm text-foreground transition-colors hover:bg-accent", children: _jsx(ExternalLink, { className: "size-3.5" }) }, "external")) : null, popOutHref ? (_jsx(motion.a, { ...presets.pop, href: popOutHref, onClick: onPopOut, target: "_blank", rel: "noopener noreferrer", "aria-label": labels.popOut, className: "inline-flex size-7 items-center justify-center rounded-md text-sm text-foreground transition-colors hover:bg-accent", children: _jsx(Open, { className: "size-3.5" }) }, "pop-out")) : null, downloadHref ? (_jsx(motion.a, { ...presets.pop, href: downloadHref, download: true, "aria-label": labels.download, className: "inline-flex size-7 items-center justify-center rounded-md text-sm text-foreground transition-colors hover:bg-accent", children: _jsx(Download, { className: "size-3.5" }) }, "download")) : null] }), zoom ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": zoom.labels.zoomOut, size: "icon-sm", variant: "ghost", disabled: !zoom.canZoomOut, onClick: zoom.onZoomOut, children: _jsx(ZoomOut, { className: "size-3.5" }) }), _jsx(IconButton, { "aria-label": zoom.labels.zoomIn, size: "icon-sm", variant: "ghost", disabled: !zoom.canZoomIn, onClick: zoom.onZoomIn, children: _jsx(ZoomIn, { className: "size-3.5" }) })] })) : null, onToggleFullscreen ? (_jsx(IconButton, { "aria-label": fullscreen ? labels.exitFullscreen : labels.fullscreen, size: "icon-sm", variant: "ghost", onClick: onToggleFullscreen, children: _jsx(Swap, { inline: true, swapKey: fullscreen ? 'minimize' : 'maximize', className: "inline-flex", children: fullscreen ? _jsx(Minimize, { className: "size-3.5" }) : _jsx(Maximize, { className: "size-3.5" }) }) })) : null, _jsx(IconButton, { "aria-label": labels.close, size: "icon-sm", variant: "ghost", onClick: onClose, children: _jsx(X, { className: "size-3.5" }) })] })] }), banner, _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: children })] }));
+}
+export { ViewerShell };

package/dist/components/ui/virtual-list.d.ts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+export type VirtualListHandle = {
+    scrollToOffset: (offset: number) => void;
+    /** Jumps to an item by index — has its own measurement-aware retry, so it lands correctly even
+     *  when `estimateSize` is wrong and gets corrected by `measureElement` after mount. */
+    scrollToIndex: (index: number, options?: {
+        align?: 'start' | 'center' | 'end' | 'auto';
+        behavior?: 'auto' | 'smooth';
+    }) => void;
+    /** Lands on the real end (`paddingEnd` included) and tracks it while rows measure. */
+    scrollToEnd: (options?: {
+        behavior?: 'auto' | 'smooth';
+    }) => void;
+    /** Within `threshold` (default `scrollEndThreshold`) of the end. */
+    isAtEnd: (threshold?: number) => boolean;
+    /** The virtualizer's `isScrolling`, or a touch that ended moments ago. On iOS corrections wait for it. */
+    isScrolling: () => boolean;
+    /** Drops an in-flight scroll target (landing, jump) so a reader's gesture takes over. */
+    cancelScroll: () => void;
+    /** The item under `offset` (e.g. the top visible row at `scrollTop`), for key-based restore. */
+    getItemForOffset: (offset: number) => {
+        key: string;
+        index: number;
+        start: number;
+    } | undefined;
+    /** An item's start offset: measured, or estimated while it has not rendered. */
+    getItemStart: (index: number) => number | undefined;
+    /**
+     * Lands with the item's start `offset` px above the top edge (`getItemStart` at save time), or
+     * `scrollToIndex(…, { align: 'start' })` without one. Returns false if no item has that key.
+     */
+    scrollToKey: (key: string, offset?: number) => boolean;
+};
+export type VirtualListProps<T> = {
+    items: readonly T[];
+    estimateSize: (index: number) => number;
+    renderItem: (item: T, index: number) => React.ReactNode;
+    getKey: (item: T, index: number) => string;
+    /** Pixel height of the scroll container; the parent controls layout. */
+    height: number | string;
+    overscan?: number;
+    /**
+     * Keys of items that stay mounted wherever they are, even far outside the overscan. For a row
+     * that owns something the page cannot lose by unmounting it (a video floating in picture in
+     * picture). Keep the set small: each kept row is a rendered row.
+     */
+    keepMountedKeys?: ReadonlySet<string>;
+    /** Called when the last item enters the viewport; for reverse-chronological chat loading. */
+    onEndReached?: () => void;
+    className?: string;
+    /** For restoring a saved position: the virtualizer starts here, so any re-attach lands here, not 0. */
+    initialOffset?: number;
+    /** Space above the first item, known to the virtualizer (unlike CSS padding on the scroller). */
+    paddingStart?: number;
+    /** Space below the last item, known to the virtualizer. */
+    paddingEnd?: number;
+    /**
+     * `'end'` is TanStack's chat mode. It owns every compensating `scrollTop` write (deferred on iOS
+     * during touch and momentum), so nothing here writes one. On iOS a row size change while the
+     * list scrolls gets no compensation.
+     */
+    anchorTo?: 'start' | 'end';
+    /** Follow appends at the end. Also keep the end on box or `paddingEnd` changes if not moved. */
+    followOnAppend?: boolean;
+    /**
+     * Appended items this accepts grow into place (height 0 to natural) while the list stays on the
+     * end, so the rows above glide up under the reader instead of jumping by the item's height. Only
+     * for items that are not the reader's own send (that one is expected to land at once).
+     */
+    glideItem?: (item: T) => boolean;
+    /** How close to the end counts as "at the end", for following and `isAtEnd`. */
+    scrollEndThreshold?: number;
+    /** Scroll events this far apart end the virtualizer's `isScrolling` (TanStack default 150ms). */
+    isScrollingResetDelay?: number;
+    /**
+     * Compensate the old first row's next size change after a prepend (it can drop its header).
+     * TanStack skips rows in the viewport and backward scrolls. Read once per mount.
+     */
+    anchorPrependBoundary?: boolean;
+    /** Imperative scrolling (offset, index, key, end) and top-item lookup, for landing and restore. */
+    ref?: React.Ref<VirtualListHandle>;
+    /** Scroll this item index into view (e.g. deep-link focus). Cleared by the parent after apply. */
+    scrollToIndex?: number | null;
+    scrollToAlign?: 'start' | 'center' | 'end' | 'auto';
+    /** Room kept above an item scrolled to with `align: 'start'`, for chrome that floats over the top edge. */
+    scrollPaddingStart?: number;
+    /** Opt-in scroll diagnostics. Read once per mount. */
+    onDebug?: (event: string, context: Record<string, unknown>) => void;
+};
+declare function VirtualList<T>({ items, estimateSize, renderItem, getKey, height, overscan, keepMountedKeys, onEndReached, className, initialOffset, paddingStart, paddingEnd, anchorTo, followOnAppend, glideItem, scrollEndThreshold, isScrollingResetDelay, anchorPrependBoundary, ref, scrollToIndex, scrollToAlign, scrollPaddingStart, onDebug, }: VirtualListProps<T>): React.JSX.Element;
+export { VirtualList };