@streamsai/ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,406 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { defaultRangeExtractor, measureElement as defaultMeasureElement, useVirtualizer, } from '@tanstack/react-virtual';
+import { animate } from '../../motion/index.js';
+import { glide, presets, transitions } from '../../motion/config.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The virtualizer re-renders the list on every scroll and resize frame (a composer growing, a pane
+ * sliding) to move rows; memoising each row's content keeps those frames to repositioning instead
+ * of re-rendering every visible row, which in a chat timeline is enough work to drop frames.
+ */
+/** Sub-pixel slack: an offset this close to the end, or to where it was, has not moved. */
+const END_EPSILON_PX = 1;
+/** TanStack's default `resizeItem` predicate, which a custom one replaces. */
+const defaultAdjusts = (item, instance) => {
+    const offset = (instance.scrollOffset ?? 0) + instance.scrollAdjustments;
+    const measured = instance.itemSizeCache.get(item.key);
+    return measured === undefined
+        ? item.start < offset
+        : item.start + measured <= offset && instance.scrollDirection !== 'backward';
+};
+/** virtual-core's iOS WebKit test (not exported), where it holds scroll corrections until rest. */
+const isIOSWebKit = () => typeof navigator !== 'undefined' &&
+    (/iP(hone|od|ad)/.test(navigator.userAgent) ||
+        (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 0));
+/** virtual-core defers scroll corrections for 150ms after a touch ends; this adds margin for a late timer. */
+const TOUCH_END_GRACE_MS = 250;
+/** How long after a width change the rows are treated as re-wrapping (the next frames' measures). */
+const REFLOW_WINDOW_MS = 100;
+const NO_INDEXES = [];
+/**
+ * While the box changes width its rows re-wrap, and a reader who is not at the end would see the
+ * lines they are reading slide down out of view if only rows above the fold were compensated.
+ * Compensating every row that lies fully above the visible bottom edge keeps that edge's last
+ * line where it is instead. A row whose size was never cached (its first measure matched the
+ * estimate, so the library stored nothing) still has that size in `item.size`.
+ */
+const adjustsBottomEdge = (item, instance) => {
+    const before = instance.itemSizeCache.get(item.key) ?? item.size;
+    const offset = (instance.scrollOffset ?? 0) + instance.scrollAdjustments;
+    const visibleEnd = offset + (instance.scrollElement?.clientHeight ?? 0) - (instance.options.paddingEnd ?? 0);
+    return item.start + before <= visibleEnd;
+};
+/**
+ * Grows `row` from nothing to the height it has now. The virtualizer measures the row every frame
+ * (its observer fires before paint) and, on the end, shifts the scroll by each change, so the rows
+ * above rise with the growth instead of jumping by the row's whole height at once. The clip is
+ * dropped at the end so a later change in the row's height is not cut off.
+ */
+const glideIn = (row) => {
+    const natural = row.getBoundingClientRect().height;
+    if (natural <= 0)
+        return;
+    // Before the first paint: `animate` only starts on the next frame, which would show the full height once.
+    row.style.overflow = 'hidden';
+    row.style.maxHeight = '0px';
+    void animate(row, { maxHeight: [0, natural] }, glide).then(() => {
+        row.style.overflow = '';
+        row.style.maxHeight = '';
+    });
+};
+const VirtualRow = React.memo(function VirtualRow({ item, index, renderItem }) {
+    return renderItem(item, index);
+});
+function VirtualList({ items, estimateSize, renderItem, getKey, height, overscan = 3, keepMountedKeys, onEndReached, className, initialOffset, paddingStart, paddingEnd, anchorTo, followOnAppend = false, glideItem, scrollEndThreshold, isScrollingResetDelay, anchorPrependBoundary = false, ref, scrollToIndex = null, scrollToAlign = 'center', scrollPaddingStart, onDebug, }) {
+    const scrollRef = React.useRef(null);
+    const rowsRef = React.useRef(null);
+    const onEndReachedFiredRef = React.useRef(-1);
+    const lastFocusedKeyRef = React.useRef(null);
+    // `scrollTop` when last seen at the end, else `null`. A reader who moved since is not kept there.
+    const endScrollTopRef = React.useRef(null);
+    const touchEndedAtRef = React.useRef(-Infinity);
+    // Fixed at mount: the boundary hook below is a virtualizer option it captures once.
+    const [debug] = React.useState(() => onDebug !== undefined);
+    const [boundaryEnabled] = React.useState(anchorPrependBoundary);
+    const onDebugRef = React.useRef(onDebug);
+    React.useLayoutEffect(() => {
+        onDebugRef.current = onDebug;
+    }, [onDebug]);
+    // The row that was first before the last prepend, until its next measure (`anchorPrependBoundary`).
+    const boundaryKeyRef = React.useRef(null);
+    // Scroller width at the last row size change, and until when its rows count as re-wrapping.
+    const widthRef = React.useRef(null);
+    const reflowUntilRef = React.useRef(0);
+    // Retires the boundary row when it measures unchanged. Spread only when set: an explicit
+    // `undefined` would replace the library's default reader.
+    const [hookOptions] = React.useState(() => ({
+        ...(boundaryEnabled
+            ? {
+                measureElement: (element, entry, instance) => {
+                    const size = defaultMeasureElement(element, entry, instance);
+                    const item = instance.measurementsCache[instance.indexFromElement(element)];
+                    if (!item || item.key !== boundaryKeyRef.current)
+                        return size;
+                    const from = instance.itemSizeCache.get(item.key) ?? item.size;
+                    if (from === size)
+                        boundaryKeyRef.current = null;
+                    return size;
+                },
+            }
+            : {}),
+    }));
+    const getItemKey = React.useCallback((index) => getKey(items[index], index), [items, getKey]);
+    const keptIndexes = React.useMemo(() => {
+        if (!keepMountedKeys || keepMountedKeys.size === 0)
+            return NO_INDEXES;
+        const found = [];
+        items.forEach((item, index) => {
+            if (keepMountedKeys.has(getKey(item, index)))
+                found.push(index);
+        });
+        return found.length > 0 ? found : NO_INDEXES;
+    }, [items, getKey, keepMountedKeys]);
+    const rangeExtractor = React.useCallback((range) => [...new Set([...defaultRangeExtractor(range), ...keptIndexes])].sort((a, b) => a - b), [keptIndexes]);
+    // eslint-disable-next-line react-hooks/incompatible-library
+    const virtualizer = useVirtualizer({
+        count: items.length,
+        getScrollElement: () => scrollRef.current,
+        estimateSize,
+        overscan,
+        initialOffset,
+        paddingStart,
+        scrollPaddingStart,
+        paddingEnd,
+        anchorTo,
+        followOnAppend,
+        scrollEndThreshold,
+        isScrollingResetDelay,
+        getItemKey,
+        // Spread only when set: an explicit `undefined` would replace the library's default.
+        ...(keptIndexes.length > 0 ? { rangeExtractor } : {}),
+        ...hookOptions,
+    });
+    // Replaces the library's default rule (which `defaultAdjusts` mirrors) with one that also knows
+    // the prepend boundary row and the re-wrap window after a width change.
+    React.useLayoutEffect(() => {
+        const scroller = scrollRef.current;
+        // Called from the row measures and from a scroller observer, whichever the browser delivers
+        // first in a frame, so the window is open before the first re-wrapped row is judged.
+        const noteWidth = () => {
+            const width = scroller?.clientWidth ?? null;
+            if (widthRef.current !== null && width !== widthRef.current)
+                reflowUntilRef.current = performance.now() + REFLOW_WINDOW_MS;
+            widthRef.current = width;
+        };
+        noteWidth();
+        const observer = scroller ? new ResizeObserver(noteWidth) : null;
+        if (scroller)
+            observer?.observe(scroller);
+        virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item, _delta, instance) => {
+            if (item.key === boundaryKeyRef.current) {
+                boundaryKeyRef.current = null;
+                return true;
+            }
+            noteWidth();
+            // iOS would write the sum of these at rest, one jump after the rows already moved in motion.
+            if (instance.isScrolling && isIOSWebKit())
+                return false;
+            return performance.now() < reflowUntilRef.current
+                ? adjustsBottomEdge(item, instance)
+                : defaultAdjusts(item, instance);
+        };
+        return () => {
+            observer?.disconnect();
+            virtualizer.shouldAdjustScrollPositionOnItemSizeChange = undefined;
+        };
+    }, [virtualizer]);
+    // virtual-core ends its iOS touch window on `touchend` only, so a cancelled touch (a system
+    // gesture, an alert) would leave it deferring scroll corrections until the next scroll event.
+    React.useLayoutEffect(() => {
+        const scroller = scrollRef.current;
+        if (!scroller)
+            return;
+        const onTouchEnd = () => {
+            touchEndedAtRef.current = performance.now();
+        };
+        const onTouchCancel = () => {
+            onDebugRef.current?.('touchcancel ended the virtualizer touch window', {});
+            scroller.dispatchEvent(new Event('touchend'));
+        };
+        scroller.addEventListener('touchend', onTouchEnd, { passive: true });
+        scroller.addEventListener('touchcancel', onTouchCancel, { passive: true });
+        return () => {
+            scroller.removeEventListener('touchend', onTouchEnd);
+            scroller.removeEventListener('touchcancel', onTouchCancel);
+        };
+    }, []);
+    const virtualItems = virtualizer.getVirtualItems();
+    const totalSize = virtualizer.getTotalSize();
+    const focusKey = scrollToIndex != null && items[scrollToIndex]
+        ? getKey(items[scrollToIndex], scrollToIndex)
+        : null;
+    const scrollToEnd = React.useCallback((options) => {
+        virtualizer.scrollToEnd(options);
+        const scroller = scrollRef.current;
+        // A smooth scroll is not there yet; its arrival's scroll event records the end.
+        endScrollTopRef.current =
+            scroller && options?.behavior !== 'smooth' ? scroller.scrollTop : null;
+    }, [virtualizer]);
+    React.useImperativeHandle(ref, () => ({
+        // Not a raw `scrollTop` assignment: `estimateSize`'s guess for not-yet-rendered rows can be
+        // wrong, and the virtualizer's own measurement-correction logic then fights a manual
+        // assignment made before it has measured the real rows near that offset — same reason
+        // `scrollToIndex` below goes through the virtualizer instead of the DOM directly.
+        scrollToOffset: (offset) => virtualizer.scrollToOffset(offset, { align: 'start' }),
+        scrollToIndex: (index, options) => virtualizer.scrollToIndex(index, options),
+        scrollToEnd,
+        isAtEnd: (threshold) => virtualizer.isAtEnd(threshold),
+        isScrolling: () => virtualizer.isScrolling || performance.now() - touchEndedAtRef.current < TOUCH_END_GRACE_MS,
+        cancelScroll: () => virtualizer.cancelScroll(),
+        getItemForOffset: (offset) => {
+            const item = virtualizer.getVirtualItemForOffset(offset);
+            return item ? { key: String(item.key), index: item.index, start: item.start } : undefined;
+        },
+        getItemStart: (index) => virtualizer.measurementsCache[index]?.start,
+        scrollToKey: (key, offset) => {
+            const index = items.findIndex((item, i) => getKey(item, i) === key);
+            if (index === -1)
+                return false;
+            const start = virtualizer.measurementsCache[index]?.start;
+            if (offset === undefined || start === undefined)
+                virtualizer.scrollToIndex(index, { align: 'start' });
+            else
+                virtualizer.scrollToOffset(start + offset, { align: 'start' });
+            return true;
+        },
+    }), [virtualizer, items, getKey, scrollToEnd]);
+    React.useEffect(() => {
+        if (!onEndReached || virtualItems.length === 0)
+            return;
+        // A kept row far from the viewport is not the reader reaching the end.
+        const range = virtualizer.range;
+        const lastIndex = keptIndexes.length > 0 && range
+            ? Math.min(range.endIndex + overscan, items.length - 1)
+            : virtualItems[virtualItems.length - 1]?.index;
+        if (lastIndex === undefined)
+            return;
+        if (lastIndex === items.length - 1 && onEndReachedFiredRef.current !== items.length) {
+            onEndReachedFiredRef.current = items.length;
+            onEndReached();
+        }
+    }, [virtualItems, virtualizer, keptIndexes, overscan, items.length, onEndReached]);
+    React.useLayoutEffect(() => {
+        if (scrollToIndex == null || focusKey == null)
+            return;
+        // Keyed, not indexed: a prepend shifts the same item's index and must not re-scroll to it.
+        if (lastFocusedKeyRef.current === focusKey)
+            return;
+        lastFocusedKeyRef.current = focusKey;
+        onDebugRef.current?.('scrollToIndex (deep link)', { index: scrollToIndex, key: focusKey });
+        virtualizer.scrollToIndex(scrollToIndex, { align: scrollToAlign });
+    }, [scrollToIndex, scrollToAlign, focusKey, virtualizer]);
+    // Debug: log item and padding changes per commit. Runs before the end keeper.
+    const debugSnapshotRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!debug)
+            return;
+        const keyAt = (index) => (items[index] ? getKey(items[index], index) : null);
+        const next = {
+            items,
+            count: items.length,
+            firstKey: keyAt(0),
+            lastKey: keyAt(items.length - 1),
+            totalSize,
+            paddingStart,
+            paddingEnd,
+        };
+        const prev = debugSnapshotRef.current;
+        debugSnapshotRef.current = next;
+        if (!prev)
+            return;
+        // A refetch with the same edges is not a prepend, append or reset.
+        if (prev.items !== items &&
+            (prev.count !== next.count ||
+                prev.firstKey !== next.firstKey ||
+                prev.lastKey !== next.lastKey))
+            onDebugRef.current?.('items', {
+                countBefore: prev.count,
+                countAfter: next.count,
+                firstKeyBefore: prev.firstKey,
+                firstKeyAfter: next.firstKey,
+                lastKeyBefore: prev.lastKey,
+                lastKeyAfter: next.lastKey,
+                totalSizeBefore: prev.totalSize,
+                totalSizeAfter: totalSize,
+            });
+        if (prev.paddingStart !== paddingStart || prev.paddingEnd !== paddingEnd)
+            onDebugRef.current?.('padding', {
+                paddingStartBefore: prev.paddingStart,
+                paddingStartAfter: paddingStart,
+                paddingEndBefore: prev.paddingEnd,
+                paddingEndAfter: paddingEnd,
+            });
+    });
+    // The virtualizer sees row size changes; these are the three it does not see.
+    const keepEnd = React.useCallback((cause) => {
+        const scroller = scrollRef.current;
+        const endTop = endScrollTopRef.current;
+        if (!scroller || endTop === null)
+            return;
+        if (Math.abs(scroller.scrollTop - endTop) >= END_EPSILON_PX)
+            return;
+        if (scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop < END_EPSILON_PX)
+            return;
+        onDebugRef.current?.(`scrollToEnd (keeper ${cause})`, {});
+        scrollToEnd();
+    }, [scrollToEnd]);
+    React.useLayoutEffect(() => {
+        const scroller = scrollRef.current;
+        if (!followOnAppend || !scroller)
+            return;
+        // Registered after the virtualizer's own listener, so `isAtEnd` reads this event's offset.
+        const onScroll = () => {
+            endScrollTopRef.current = virtualizer.isAtEnd() ? scroller.scrollTop : null;
+        };
+        const observer = new ResizeObserver(() => keepEnd('box'));
+        observer.observe(scroller);
+        scroller.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            observer.disconnect();
+            scroller.removeEventListener('scroll', onScroll);
+        };
+    }, [followOnAppend, virtualizer, keepEnd]);
+    // The library follows only when the count grows; a last row that changes without the count
+    // growing (a swap) leaves the reader behind by the height difference.
+    const lastKey = items.length > 0 ? getKey(items[items.length - 1], items.length - 1) : null;
+    const edgeRef = React.useRef({ lastKey, count: items.length });
+    React.useLayoutEffect(() => {
+        const prev = edgeRef.current;
+        edgeRef.current = { lastKey, count: items.length };
+        if (!followOnAppend || prev.lastKey === null || lastKey === prev.lastKey)
+            return;
+        if (items.length > prev.count)
+            return;
+        keepEnd('swap');
+    }, [lastKey, items.length, followOnAppend, keepEnd]);
+    const paddingEndRef = React.useRef(paddingEnd);
+    React.useLayoutEffect(() => {
+        if (paddingEndRef.current === paddingEnd)
+            return;
+        paddingEndRef.current = paddingEnd;
+        if (followOnAppend)
+            keepEnd('paddingEnd');
+    }, [paddingEnd, followOnAppend, keepEnd]);
+    // After a prepend, track the old first row until it measures (`anchorPrependBoundary`).
+    const firstKeyRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (!boundaryEnabled)
+            return;
+        const first = items[0] ? getKey(items[0], 0) : null;
+        const previous = firstKeyRef.current;
+        firstKeyRef.current = first;
+        if (previous === null || previous === first)
+            return;
+        if (!items.some((item, i) => i > 0 && getKey(item, i) === previous))
+            return;
+        boundaryKeyRef.current = previous;
+    }, [boundaryEnabled, items, getKey]);
+    // New keys after the first known key are appends; they fade in.
+    const knownKeysRef = React.useRef(null);
+    const glideItemRef = React.useRef(glideItem);
+    React.useLayoutEffect(() => {
+        glideItemRef.current = glideItem;
+    }, [glideItem]);
+    React.useLayoutEffect(() => {
+        const rowsEl = rowsRef.current;
+        const keys = items.map((item, i) => getKey(item, i));
+        const known = knownKeysRef.current;
+        knownKeysRef.current = new Set(keys);
+        if (!rowsEl || !known)
+            return;
+        const firstKnown = keys.findIndex((key) => known.has(key));
+        if (firstKnown === -1)
+            return;
+        // Only a list that stays on its end glides: a reader higher up does not see the row arrive.
+        const scroller = scrollRef.current;
+        const gliding = followOnAppend &&
+            scroller !== null &&
+            !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches &&
+            scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop <=
+                (scrollEndThreshold ?? 1);
+        for (let index = firstKnown + 1; index < keys.length; index++) {
+            if (known.has(keys[index]))
+                continue;
+            const row = rowsEl.querySelector(`[data-index="${index}"]`);
+            if (!row)
+                continue;
+            const glides = gliding && glideItemRef.current?.(items[index]) === true;
+            void animate(row, { opacity: [presets.fade.initial.opacity, 1] }, glides ? glide : transitions.enter);
+            if (glides)
+                glideIn(row);
+        }
+    }, [items, getKey, followOnAppend, scrollEndThreshold]);
+    React.useEffect(() => {
+        if (scrollToIndex == null)
+            lastFocusedKeyRef.current = null;
+    }, [scrollToIndex]);
+    return (_jsx("div", { ref: scrollRef, "data-slot": "virtual-list", role: "list", className: cn('overflow-auto', className), style: { height }, children: _jsx("div", { ref: rowsRef, style: { height: totalSize, width: '100%', position: 'relative' }, children: virtualItems.map((virtualItem) => (_jsx("div", { ref: virtualizer.measureElement, "data-index": virtualItem.index, "data-slot": "virtual-list-item", role: "listitem", style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    transform: `translateY(${virtualItem.start}px)`,
+                }, children: _jsx(VirtualRow, { item: items[virtualItem.index], index: virtualItem.index, renderItem: renderItem }) }, virtualItem.key))) }) }));
+}
+export { VirtualList };

package/dist/components/ui/visually-hidden.d.ts

@@ -0,0 +1,15 @@
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Applies the standard clip-rect visually-hidden technique (Tailwind `sr-only`).
+ *
+ * Content is removed from the visual viewport but remains present in the DOM
+ * and fully accessible to screen readers and the ARIA tree. Use this instead
+ * of `display:none` or `visibility:hidden`, which also remove the element from
+ * assistive technology.
+ *
+ * Common uses: supplemental labels for icon-only buttons, skip-link anchors,
+ * table summary text, and any case where visible context is missing.
+ */
+declare const visuallyHiddenVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare function VisuallyHidden({ className, ...props }: React.ComponentProps<'span'> & VariantProps<typeof visuallyHiddenVariants>): import("react").JSX.Element;
+export { VisuallyHidden, visuallyHiddenVariants };

package/dist/components/ui/visually-hidden.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+/**
+ * Applies the standard clip-rect visually-hidden technique (Tailwind `sr-only`).
+ *
+ * Content is removed from the visual viewport but remains present in the DOM
+ * and fully accessible to screen readers and the ARIA tree. Use this instead
+ * of `display:none` or `visibility:hidden`, which also remove the element from
+ * assistive technology.
+ *
+ * Common uses: supplemental labels for icon-only buttons, skip-link anchors,
+ * table summary text, and any case where visible context is missing.
+ */
+const visuallyHiddenVariants = cva('sr-only');
+function VisuallyHidden({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "visually-hidden", className: cn(visuallyHiddenVariants({ className })), ...props }));
+}
+export { VisuallyHidden, visuallyHiddenVariants };

package/dist/direction/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @no-story Context provider — renders no UI; sets `dir` on <html>.
+ */
+import { type ReactNode } from 'react';
+export type TextDirection = 'ltr' | 'rtl';
+interface DirectionContextValue {
+    direction: TextDirection;
+}
+interface DirectionProviderProps {
+    /** Direction implied by the active i18n language (`i18next.dir(lng)`). Defaults to `'ltr'`. */
+    localeDirection?: TextDirection;
+    children: ReactNode;
+}
+declare function DirectionProvider({ localeDirection, children }: DirectionProviderProps): import("react").JSX.Element;
+declare function useDirection(): DirectionContextValue;
+/** `useDirection` for primitives that may render outside a provider (stories, tests): falls back to `'ltr'`. */
+declare function useTextDirection(): TextDirection;
+export type { DirectionProviderProps };
+export { DirectionProvider, useDirection, useTextDirection };

package/dist/direction/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @no-story Context provider — renders no UI; sets `dir` on <html>.
+ */
+import { createContext, useContext, useEffect, useMemo } from 'react';
+const DirectionContext = createContext(null);
+function applyDirection(direction) {
+    if (typeof document === 'undefined')
+        return;
+    document.documentElement.dir = direction;
+}
+function DirectionProvider({ localeDirection = 'ltr', children }) {
+    const direction = localeDirection;
+    // Synchronous during render on the client so portals mounted in the same commit see `dir`.
+    applyDirection(direction);
+    useEffect(() => {
+        applyDirection(direction);
+    }, [direction]);
+    const value = useMemo(() => ({ direction }), [direction]);
+    return _jsx(DirectionContext.Provider, { value: value, children: children });
+}
+function useDirection() {
+    const ctx = useContext(DirectionContext);
+    if (ctx === null)
+        throw new Error('useDirection() must be called inside a <DirectionProvider>.');
+    return ctx;
+}
+/** `useDirection` for primitives that may render outside a provider (stories, tests): falls back to `'ltr'`. */
+function useTextDirection() {
+    return useContext(DirectionContext)?.direction ?? 'ltr';
+}
+export { DirectionProvider, useDirection, useTextDirection };

package/dist/hooks/use-code-highlighting.d.ts

@@ -0,0 +1,22 @@
+import type { CodeLanguage } from '../lib/code-language.js';
+import type { CodeLines } from '../lib/code-highlighter.js';
+/** Above either limit the text stays plain: tokenising it would stall the main thread. */
+export declare const CODE_VIEW_MAX_CHARS = 500000;
+export declare const CODE_VIEW_MAX_LINES = 10000;
+export declare const exceedsHighlightLimits: (code: string) => boolean;
+type UseCodeHighlightingOptions = {
+    code: string;
+    /** `null` (unknown language) never loads the highlighter. */
+    language: CodeLanguage | null;
+    /** False keeps the text plain, e.g. while a fenced block is still being written. */
+    enabled?: boolean;
+    /** Called when the highlighter or a grammar fails to load or throws; the plain text stays. */
+    onError?: (error: unknown) => void;
+};
+/**
+ * Tokens for `code`, or `null` while plain text should be shown (not ready, disabled, too large,
+ * unknown language, or failed). Loads the Shiki engine lazily. A result for earlier code or
+ * language is never returned against the current ones.
+ */
+export declare function useCodeHighlighting({ code, language, enabled, onError, }: UseCodeHighlightingOptions): CodeLines | null;
+export {};

package/dist/hooks/use-code-highlighting.js

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react';
+/** Above either limit the text stays plain: tokenising it would stall the main thread. */
+export const CODE_VIEW_MAX_CHARS = 500_000;
+export const CODE_VIEW_MAX_LINES = 10_000;
+export const exceedsHighlightLimits = (code) => {
+    if (code.length > CODE_VIEW_MAX_CHARS)
+        return true;
+    let lines = 1;
+    for (let i = code.indexOf('\n'); i >= 0; i = code.indexOf('\n', i + 1)) {
+        if (++lines > CODE_VIEW_MAX_LINES)
+            return true;
+    }
+    return false;
+};
+/**
+ * Tokens for `code`, or `null` while plain text should be shown (not ready, disabled, too large,
+ * unknown language, or failed). Loads the Shiki engine lazily. A result for earlier code or
+ * language is never returned against the current ones.
+ */
+export function useCodeHighlighting({ code, language, enabled = true, onError, }) {
+    const skip = !enabled || language === null || exceedsHighlightLimits(code);
+    const [highlighted, setHighlighted] = useState(null);
+    const onErrorRef = useRef(onError);
+    useEffect(() => {
+        onErrorRef.current = onError;
+    });
+    useEffect(() => {
+        if (skip || language === null)
+            return;
+        let cancelled = false;
+        import('../lib/code-highlighter.js')
+            .then(({ highlightCode }) => highlightCode(code, language))
+            .then((lines) => {
+            if (!cancelled)
+                setHighlighted({ code, lang: language, lines });
+        })
+            .catch((error) => {
+            if (!cancelled)
+                onErrorRef.current?.(error);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [code, language, skip]);
+    const current = !skip && highlighted !== null && highlighted.code === code && highlighted.lang === language;
+    return current ? highlighted.lines : null;
+}

package/dist/hooks/use-is-truncated.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+/**
+ * True while the referenced element (or a descendant that truncates on its own, e.g. a nested
+ * `truncate` span) is clipped with an ellipsis. Re-measures on resize and whenever `content`
+ * changes. `content` is the text being shown; pass `undefined` to opt out.
+ */
+export declare function useIsTruncated(ref: RefObject<HTMLElement | null>, content: string | undefined): boolean;

package/dist/hooks/use-is-truncated.js

@@ -0,0 +1,23 @@
+import { useLayoutEffect, useState } from 'react';
+const isOverflowing = (node) => node.scrollWidth > node.clientWidth;
+/**
+ * True while the referenced element (or a descendant that truncates on its own, e.g. a nested
+ * `truncate` span) is clipped with an ellipsis. Re-measures on resize and whenever `content`
+ * changes. `content` is the text being shown; pass `undefined` to opt out.
+ */
+export function useIsTruncated(ref, content) {
+    const [truncated, setTruncated] = useState(false);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el || content === undefined) {
+            setTruncated(false);
+            return;
+        }
+        const measure = () => setTruncated(isOverflowing(el) || Array.from(el.querySelectorAll('*')).some(isOverflowing));
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [ref, content]);
+    return truncated;
+}

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,2 @@
+/** True below the tablet breakpoint. Environments without `matchMedia` (jsdom) count as desktop. */
+export declare function useIsMobile(): boolean;

package/dist/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+const MOBILE_BREAKPOINT = 768;
+const QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
+const subscribe = (onChange) => {
+    if (typeof window.matchMedia !== 'function')
+        return () => { };
+    const mql = window.matchMedia(QUERY);
+    mql.addEventListener('change', onChange);
+    return () => mql.removeEventListener('change', onChange);
+};
+const getSnapshot = () => typeof window.matchMedia === 'function' ? window.matchMedia(QUERY).matches : false;
+/** True below the tablet breakpoint. Environments without `matchMedia` (jsdom) count as desktop. */
+export function useIsMobile() {
+    return React.useSyncExternalStore(subscribe, getSnapshot, () => false);
+}

package/dist/icons/custom.d.ts

@@ -0,0 +1,29 @@
+import type { SVGAttributes } from 'react';
+export interface CustomIconProps extends SVGAttributes<SVGElement> {
+    size?: string | number;
+}
+/** The stream glyph in the Figma left pane ("Wave-1 Streamline Ultimate"): one soft wave. */
+export declare const Wave: (props: CustomIconProps) => import("react").JSX.Element;
+/** Figma "Icon / Views / Workload": a hollow ring, used for Catch up and for sessions with no status. */
+export declare const Workload: (props: CustomIconProps) => import("react").JSX.Element;
+/** Figma "Icon / Platform / AI Agent": a robot head with a sparkle. */
+export declare const AIAgent: (props: CustomIconProps) => import("react").JSX.Element;
+/** monday icons "SlashCommand": a slash in a rounded box, ahead of a run's `/trigger` name. */
+export declare const SlashCommand: (props: CustomIconProps) => import("react").JSX.Element;
+/** Figma "stop-circle" (cycle run Stop): a ring around a rounded square. */
+export declare const StopCircle: (props: CustomIconProps) => import("react").JSX.Element;
+/** Stream menu Unpin: pinned pin with a strike-through (design export Unpin.svg). */
+export declare const Unpin: (props: CustomIconProps) => import("react").JSX.Element;
+/** Stream menu Kanban: three uneven columns (design export Kanban.svg). Vibe has no Kanban glyph. */
+export declare const Kanban: (props: CustomIconProps) => import("react").JSX.Element;
+export declare const ChartLine: ({ size, ...props }: CustomIconProps) => import("react").JSX.Element;
+export declare const ChartArea: ({ size, ...props }: CustomIconProps) => import("react").JSX.Element;
+export declare const ChartBar: ({ size, ...props }: CustomIconProps) => import("react").JSX.Element;
+export declare const ChartBarHorizontal: ({ size, ...props }: CustomIconProps) => import("react").JSX.Element;
+export declare const ChartStacked: ({ size, ...props }: CustomIconProps) => import("react").JSX.Element;
+export declare const ChartDonut: ({ size, ...props }: CustomIconProps) => import("react").JSX.Element;
+export declare const ChartScatter: ({ size, ...props }: CustomIconProps) => import("react").JSX.Element;
+export declare const ChartFunnel: ({ size, ...props }: CustomIconProps) => import("react").JSX.Element;
+export declare const ChartGauge: ({ size, ...props }: CustomIconProps) => import("react").JSX.Element;
+export declare const ChartHeatmap: ({ size, ...props }: CustomIconProps) => import("react").JSX.Element;
+export declare const ChartGantt: ({ size, ...props }: CustomIconProps) => import("react").JSX.Element;