@visulima/tui-kit 0.0.0 → 1.0.1

package/dist/r/toast.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toast",
+  "type": "registry:ui",
+  "title": "Toast",
+  "description": "Toast component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [
+    "https://visulima.com/r/variant-config.json"
+  ],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { Variant } from \"@/lib/variant-config\";\nimport VARIANT_CONFIG from \"@/lib/variant-config\";\n\nexport type ToastVariant = Variant;\n\nexport type Props = {\n    /**\n     * Toast body.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Milliseconds to display before auto-dismissing. Use `0` to disable.\n     * @default 4000\n     */\n    readonly duration?: number;\n\n    /**\n     * Called after the toast dismisses itself.\n     */\n    readonly onDismiss?: () => void;\n\n    /**\n     * Optional title rendered before the body.\n     */\n    readonly title?: string;\n\n    /**\n     * Visual variant determining the icon and border color.\n     * @default \"info\"\n     */\n    readonly variant?: ToastVariant;\n\n    /**\n     * Manually control visibility. When provided, `duration` is ignored.\n     */\n    readonly visible?: boolean;\n\n    /**\n     * Optional width override.\n     */\n    readonly width?: number;\n};\n\n/**\n * Ephemeral notification. Disappears automatically after `duration` ms.\n * @returns A bordered `ReactElement` while visible; `null` once dismissed.\n */\nexport default function Toast({ children, duration = 4000, onDismiss, title, variant = \"info\", visible, width }: Props): ReactElement | null {\n    const [internalVisible, setInternalVisible] = useState(true);\n    const isVisible = visible ?? internalVisible;\n    const onDismissRef = useRef(onDismiss);\n\n    onDismissRef.current = onDismiss;\n\n    useEffect(() => {\n        if (visible !== undefined || duration <= 0 || !isVisible) {\n            return undefined;\n        }\n\n        const timer = setTimeout(() => {\n            setInternalVisible(false);\n            onDismissRef.current?.();\n        }, duration);\n\n        return () => {\n            clearTimeout(timer);\n        };\n    }, [duration, visible, isVisible]);\n\n    if (!isVisible) {\n        return null;\n    }\n\n    const { color, icon } = VARIANT_CONFIG[variant];\n\n    return (\n        <Box borderColor={color} borderStyle=\"round\" gap={1} paddingX={1} width={width}>\n            <Text color={color}>{icon}</Text>\n            <Box flexDirection=\"column\" flexGrow={1}>\n                {title === undefined ? undefined : <Text bold>{title}</Text>}\n                <Text>{children}</Text>\n            </Box>\n        </Box>\n    );\n}\n\nexport { Toast };\nexport type { Props as ToastProps };\n",
+      "path": "registry/ui/toast.tsx",
+      "target": "components/ui/toast.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/token-usage.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "token-usage",
+  "type": "registry:ui",
+  "title": "Token Usage",
+  "description": "Token Usage component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\ntype Color = LiteralUnion<AnsiColors, string>;\n\nexport type Props = {\n    /**\n     * Width of the input/output ratio bar in cells.\n     * @default 20\n     */\n    readonly barWidth?: number;\n\n    /**\n     * Optional context-window size. When set, a `used / limit (pct%)` summary\n     * and a fill bar are shown instead of the input/output split.\n     */\n    readonly contextLimit?: number;\n\n    /**\n     * Number of input (prompt) tokens.\n     * @default 0\n     */\n    readonly input?: number;\n\n    /**\n     * Color for the input segment.\n     * @default \"cyan\"\n     */\n    readonly inputColor?: Color;\n\n    /**\n     * Number of output (completion) tokens.\n     * @default 0\n     */\n    readonly output?: number;\n\n    /**\n     * Color for the output segment.\n     * @default \"magenta\"\n     */\n    readonly outputColor?: Color;\n};\n\nfunction fillColor(ratio: number): Color {\n    if (ratio > 0.9) {\n        return \"red\";\n    }\n\n    if (ratio > 0.7) {\n        return \"yellow\";\n    }\n\n    return \"green\";\n}\n\nconst formatCount = (value: number): string => {\n    if (value >= 1_000_000) {\n        return `${(value / 1_000_000).toFixed(1)}M`;\n    }\n\n    if (value >= 1000) {\n        return `${(value / 1000).toFixed(1)}k`;\n    }\n\n    return String(value);\n};\n\n/**\n * A compact token-usage readout. By default it shows input vs output counts\n * with a proportional two-color bar; when `contextLimit` is set, it instead\n * shows how much of the context window is used.\n */\nexport default function TokenUsage({\n    barWidth = 20,\n    contextLimit,\n    input = 0,\n    inputColor = \"cyan\",\n    output = 0,\n    outputColor = \"magenta\",\n}: Props): ReactElement {\n    const total = input + output;\n\n    if (contextLimit !== undefined && contextLimit > 0) {\n        const ratio = Math.min(1, total / contextLimit);\n        const filled = Math.round(ratio * barWidth);\n        const barColor = fillColor(ratio);\n\n        return (\n            <Box gap={1}>\n                <Text color={barColor}>{\"█\".repeat(filled)}</Text>\n                <Text dimColor>{\"░\".repeat(Math.max(0, barWidth - filled))}</Text>\n                <Text>\n                    {formatCount(total)}\n                    /\n                    {formatCount(contextLimit)}\n                    {\" \"}\n                    (\n                    {Math.round(ratio * 100)}\n                    %)\n                </Text>\n            </Box>\n        );\n    }\n\n    const inputCells = total === 0 ? 0 : Math.round((input / total) * barWidth);\n    const outputCells = Math.max(0, barWidth - inputCells);\n\n    return (\n        <Box gap={1}>\n            <Box>\n                <Text color={inputColor}>{\"█\".repeat(inputCells)}</Text>\n                <Text color={outputColor}>{\"█\".repeat(outputCells)}</Text>\n            </Box>\n            <Text color={inputColor}>{`↑${formatCount(input)}`}</Text>\n            <Text color={outputColor}>{`↓${formatCount(output)}`}</Text>\n            <Text dimColor>{`Σ${formatCount(total)}`}</Text>\n        </Box>\n    );\n}\n\nexport { TokenUsage };\nexport type { Props as TokenUsageProps };\n",
+      "path": "registry/ui/token-usage.tsx",
+      "target": "components/ui/token-usage.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/tool-call.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tool-call",
+  "type": "registry:ui",
+  "title": "Tool Call",
+  "description": "Tool Call component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\ntype Color = LiteralUnion<AnsiColors, string>;\n\nexport type ToolCallStatus = \"error\" | \"pending\" | \"running\" | \"success\";\n\nconst STATUS_META: Record<ToolCallStatus, { readonly color: Color; readonly icon: string }> = {\n    error: { color: \"red\", icon: \"✖\" },\n    pending: { color: \"gray\", icon: \"○\" },\n    running: { color: \"yellow\", icon: \"◐\" },\n    success: { color: \"green\", icon: \"✔\" },\n};\n\nexport type Props = {\n    /**\n     * The tool arguments. Objects are shown as compact `key=value` pairs;\n     * strings are shown verbatim.\n     */\n    readonly args?: Record<string, unknown> | string;\n\n    /**\n     * Rendered output/result of the call, shown indented beneath the header.\n     */\n    readonly children?: ReactNode;\n\n    /**\n     * The tool name.\n     */\n    readonly name: string;\n\n    /**\n     * Call status, driving the icon and color.\n     * @default \"pending\"\n     */\n    readonly status?: ToolCallStatus;\n};\n\nconst formatArgs = (args: Record<string, unknown> | string | undefined): string => {\n    if (args === undefined) {\n        return \"\";\n    }\n\n    if (typeof args === \"string\") {\n        return args;\n    }\n\n    return Object.entries(args)\n        .map(([key, value]) => `${key}=${typeof value === \"string\" ? value : JSON.stringify(value)}`)\n        .join(\" \");\n};\n\n/**\n * A single tool invocation: a status icon, the tool name, its arguments as\n * compact `key=value` pairs, and any result rendered as indented children.\n */\nexport default function ToolCall({ args, children, name, status = \"pending\" }: Props): ReactElement {\n    const meta = STATUS_META[status];\n    const argumentText = formatArgs(args);\n\n    return (\n        <Box flexDirection=\"column\">\n            <Box gap={1}>\n                <Text color={meta.color}>{meta.icon}</Text>\n                <Text bold>{name}</Text>\n                {argumentText.length > 0 ? <Text dimColor>{argumentText}</Text> : undefined}\n            </Box>\n            {children === undefined\n                ? undefined\n                : (\n                <Box marginLeft={2}>\n                    <Text dimColor>{children}</Text>\n                </Box>\n                )}\n        </Box>\n    );\n}\n\nexport { ToolCall };\nexport type { Props as ToolCallProps };\n",
+      "path": "registry/ui/tool-call.tsx",
+      "target": "components/ui/tool-call.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/tooltip.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip",
+  "type": "registry:ui",
+  "title": "Tooltip",
+  "description": "Tooltip component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type TooltipPlacement = \"bottom\" | \"left\" | \"right\" | \"top\";\n\nexport type Props = {\n    /**\n     * The element the tooltip is attached to.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Border color.\n     * @default \"gray\"\n     */\n    readonly color?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Tooltip body content.\n     */\n    readonly content: ReactNode;\n\n    /**\n     * Controls whether the tooltip is rendered.\n     * @default true\n     */\n    readonly isVisible?: boolean;\n\n    /**\n     * Relative position. Terminal rendering does not support floating layers,\n     * so the tooltip is placed inline next to (or above / below) the anchor.\n     * @default \"right\"\n     */\n    readonly placement?: TooltipPlacement;\n};\n\nconst PLACEMENT_STYLE: Record<TooltipPlacement, { flexDirection: \"column\" | \"row\"; orderFirst: boolean }> = {\n    bottom: { flexDirection: \"column\", orderFirst: false },\n    left: { flexDirection: \"row\", orderFirst: true },\n    right: { flexDirection: \"row\", orderFirst: false },\n    top: { flexDirection: \"column\", orderFirst: true },\n};\n\n/**\n * Renders supplementary text next to an anchor. Because terminals don't have\n * a floating-layer concept, the tooltip lives inline in the layout. Hide it\n * by toggling `isVisible`.\n */\nexport default function Tooltip({ children, color = \"gray\", content, isVisible = true, placement = \"right\" }: Props): ReactElement {\n    const { flexDirection, orderFirst } = PLACEMENT_STYLE[placement];\n\n    const tooltip = isVisible\n        ? (\n        <Box\n            borderColor={color}\n            borderStyle=\"round\"\n            flexShrink={0}\n            marginLeft={placement === \"right\" ? 1 : 0}\n            marginRight={placement === \"left\" ? 1 : 0}\n            paddingX={1}\n        >\n            {typeof content === \"string\" ? <Text color={color}>{content}</Text> : content}\n        </Box>\n        )\n        : undefined;\n\n    return (\n        <Box alignItems=\"center\" flexDirection={flexDirection}>\n            {orderFirst ? tooltip : undefined}\n            <Box>{children}</Box>\n            {orderFirst ? undefined : tooltip}\n        </Box>\n    );\n}\n\nexport { Tooltip };\nexport type { Props as TooltipProps };\n",
+      "path": "registry/ui/tooltip.tsx",
+      "target": "components/ui/tooltip.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/transition.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "transition",
+  "type": "registry:ui",
+  "title": "Transition",
+  "description": "Transition component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TransitionPreset = \"fade\" | \"reveal\" | \"slide-down\" | \"slide-left\" | \"slide-right\" | \"slide-up\";\n\nexport type TransitionPhase = \"entered\" | \"entering\" | \"exited\" | \"exiting\";\n\nexport type Props = {\n    /**\n     * Content to animate.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * For slide presets, how many characters of offset to animate across.\n     * For the `reveal` preset, the maximum row count to scale through.\n     * @default 4\n     */\n    readonly distance?: number;\n\n    /**\n     * Duration of both enter and exit transitions, in milliseconds.\n     * @default 240\n     */\n    readonly duration?: number;\n\n    /**\n     * Called once the exit animation finishes (i.e. the component has fully\n     * transitioned out). AnimatePresence uses this to unmount the wrapper.\n     */\n    readonly onExit?: () => void;\n\n    /**\n     * Animation preset controlling how the content appears/disappears.\n     * @default \"fade\"\n     */\n    readonly preset?: TransitionPreset;\n\n    /**\n     * Controls the target phase. `true` drives towards `entered`, `false`\n     * drives towards `exited`. Flip the value to trigger animation.\n     * @default true\n     */\n    readonly show?: boolean;\n\n    /**\n     * Tick interval in milliseconds. Lower values yield smoother animation\n     * at the cost of CPU.\n     * @default 30\n     */\n    readonly tickInterval?: number;\n};\n\ntype RenderProgress = (progress: number, children: ReactNode, distance: number) => ReactElement;\n\nconst renderFade: RenderProgress = (progress, children) => {\n    // In a terminal there's no alpha — dim text once the transition is past\n    // the halfway point to simulate a fade-in/out.\n    if (progress >= 1) {\n        return <Box>{children}</Box>;\n    }\n\n    if (progress <= 0) {\n        return <Box />;\n    }\n\n    return <Box>{typeof children === \"string\" ? <Text dimColor={progress < 0.7}>{children}</Text> : children}</Box>;\n};\n\nconst slideOffset = (progress: number, distance: number): number => Math.max(0, Math.min(distance, Math.round((1 - progress) * distance)));\n\nconst renderSlide\n    = (axis: \"x\" | \"y\", sign: 1 | -1): RenderProgress =>\n        (progress, children, distance) => {\n            const offset = slideOffset(progress, distance);\n\n            if (progress >= 1) {\n                return <Box>{children}</Box>;\n            }\n\n            if (progress <= 0) {\n                return <Box />;\n            }\n\n            if (axis === \"x\") {\n                return (\n                <Box paddingLeft={sign === 1 ? offset : 0} paddingRight={sign === -1 ? offset : 0}>\n                    {children}\n                </Box>\n                );\n            }\n\n            return (\n            <Box flexDirection=\"column\" paddingBottom={sign === -1 ? offset : 0} paddingTop={sign === 1 ? offset : 0}>\n                {children}\n            </Box>\n            );\n        };\n\nconst renderReveal: RenderProgress = (progress, children, distance) => {\n    // Wraps content in a Box whose height grows from 0 to `distance` rows.\n    if (progress >= 1) {\n        return <Box>{children}</Box>;\n    }\n\n    if (progress <= 0) {\n        return <Box />;\n    }\n\n    const rows = Math.max(0, Math.min(distance, Math.round(progress * distance)));\n\n    return (\n        <Box flexDirection=\"column\" height={rows} overflowY=\"hidden\">\n            {children}\n        </Box>\n    );\n};\n\nconst PRESET_RENDERERS: Record<TransitionPreset, RenderProgress> = {\n    fade: renderFade,\n    reveal: renderReveal,\n    \"slide-down\": renderSlide(\"y\", -1),\n    \"slide-left\": renderSlide(\"x\", -1),\n    \"slide-right\": renderSlide(\"x\", 1),\n    \"slide-up\": renderSlide(\"y\", 1),\n};\n\nconst resolvePhase = (show: boolean, progress: number): TransitionPhase => {\n    if (show) {\n        return progress >= 1 ? \"entered\" : \"entering\";\n    }\n\n    return progress <= 0 ? \"exited\" : \"exiting\";\n};\n\ntype TransitionComponent = ((props: Props) => ReactElement | null) & { isAnimatable: true };\n\n/**\n * Animate a child's entry and exit using a TUI-friendly preset. Drive via\n * `show`; the component toggles between enter and exit, fires `onExit` once\n * the exit animation completes.\n *\n * **Fade preset note:** `dimColor` is only applied when the child is a plain\n * string. Non-string children (Box trees, other components) pass through\n * untouched during the transition — wrap them in `&lt;Text>` if you need the\n * fade effect.\n * @returns A `ReactElement` rendering the transitioning child, or `null`\n * once a hidden transition has fully completed.\n */\nfunction Transition({ children, distance = 4, duration = 240, onExit, preset = \"fade\", show = true, tickInterval = 30 }: Props): ReactElement | null {\n    const [progress, setProgress] = useState(show ? 1 : 0);\n    const targetRef = useRef<0 | 1>(show ? 1 : 0);\n    const startRef = useRef(Date.now());\n    const startProgressRef = useRef(show ? 1 : 0);\n    const completedRef = useRef(!show);\n    const onExitRef = useRef(onExit);\n\n    onExitRef.current = onExit;\n\n    // Restart animation whenever `show` flips. The `animationKey` state forces\n    // the interval-owning effect to re-fire without depending on `progress`.\n    const [animationKey, setAnimationKey] = useState(0);\n\n    useEffect(() => {\n        const target = show ? 1 : 0;\n\n        if (targetRef.current === target) {\n            return;\n        }\n\n        targetRef.current = target;\n        startRef.current = Date.now();\n        startProgressRef.current = progress;\n        completedRef.current = false;\n        // eslint-disable-next-line react-x/set-state-in-effect, react-you-might-not-need-an-effect/no-adjust-state-on-prop-change -- animation restart key must bump in effect when `show` flips; doing it in render would re-trigger every tick\n        setAnimationKey((previous) => previous + 1);\n        // `progress` is intentionally excluded — it would retrigger the\n        // animation on every tick. We snapshot it once when `show` flips.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [show]);\n\n    // Single interval owner. Runs while the animation is in progress and\n    // tears itself down once we reach the target. Crucially does NOT depend\n    // on `progress`, so each tick's setState does not rebuild the timer.\n    useEffect(() => {\n        const target = targetRef.current;\n\n        if (startProgressRef.current === target) {\n            if (target === 0 && !completedRef.current) {\n                completedRef.current = true;\n                onExitRef.current?.();\n            }\n\n            return undefined;\n        }\n\n        const id = setInterval(() => {\n            const elapsed = Date.now() - startRef.current;\n            const ratio = duration <= 0 ? 1 : Math.min(1, elapsed / duration);\n            const next = startProgressRef.current + (target - startProgressRef.current) * ratio;\n\n            setProgress(next);\n\n            if (ratio >= 1) {\n                clearInterval(id);\n\n                if (target === 0 && !completedRef.current) {\n                    completedRef.current = true;\n                    onExitRef.current?.();\n                }\n            }\n        }, tickInterval);\n\n        return () => {\n            clearInterval(id);\n        };\n    }, [animationKey, duration, tickInterval]);\n\n    const phase = resolvePhase(show, progress);\n\n    if (phase === \"exited\" && !show) {\n        return null;\n    }\n\n    const renderer = PRESET_RENDERERS[preset];\n\n    return renderer(progress, children, distance);\n}\n\n/**\n * Static marker used by `AnimatePresence` to recognize Transition children\n * even when the consumer hasn't explicitly passed a `show` prop. Consumers\n * can apply the same marker to their own wrappers (`MyWrapper.isAnimatable\n * = true`) to opt them into animation orchestration.\n */\nconst TransitionWithMarker: TransitionComponent = Object.assign(Transition, { isAnimatable: true as const });\n\nexport default TransitionWithMarker;\n\nexport { Transition };\nexport type { Props as TransitionProps };\n",
+      "path": "registry/ui/transition.tsx",
+      "target": "components/ui/transition.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/tree-select.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tree-select",
+  "type": "registry:ui",
+  "title": "Tree Select",
+  "description": "Tree Select component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport useFocus from \"@visulima/tui/hooks/use-focus\";\nimport useInput from \"@visulima/tui/hooks/use-input\";\nimport type { ReactElement } from \"react\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nconst EMPTY_VALUES: ReadonlyArray<string> = [];\n\nexport type TreeSelectNode = {\n    readonly children?: ReadonlyArray<TreeSelectNode>;\n    readonly label: string;\n    readonly value: string;\n};\n\nexport type Props = {\n    /**\n     * Accent color for the focused row and selection marks.\n     * @default \"blue\"\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Auto-focus on mount.\n     */\n    readonly autoFocus?: boolean;\n\n    /**\n     * Selected values when uncontrolled.\n     */\n    readonly defaultValue?: ReadonlyArray<string>;\n\n    /**\n     * Disable input and dim the tree.\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * The tree to render.\n     */\n    readonly nodes: ReadonlyArray<TreeSelectNode>;\n\n    /**\n     * Fires whenever the selection changes.\n     */\n    readonly onChange?: (values: ReadonlyArray<string>) => void;\n\n    /**\n     * Fires on Enter with the current selection.\n     */\n    readonly onSubmit?: (values: ReadonlyArray<string>) => void;\n\n    /**\n     * `single` replaces the selection; `multiple` toggles values.\n     * @default \"single\"\n     */\n    readonly selectionMode?: \"multiple\" | \"single\";\n\n    /**\n     * Controlled selection. When provided, `defaultValue` is ignored.\n     */\n    readonly value?: ReadonlyArray<string>;\n};\n\ntype FlatNode = {\n    readonly depth: number;\n    readonly hasChildren: boolean;\n    readonly node: TreeSelectNode;\n};\n\nfunction wrap(value: number, size: number): number {\n    return size === 0 ? 0 : ((value % size) + size) % size;\n}\n\nfunction markerFor(hasChildren: boolean, isExpanded: boolean, isSelected: boolean): string {\n    if (hasChildren) {\n        return isExpanded ? \"▾\" : \"▸\";\n    }\n\n    return isSelected ? \"◉\" : \"◯\";\n}\n\n/** Depth-first flatten of the visible rows, honouring the expanded set. */\nconst flatten = (nodes: ReadonlyArray<TreeSelectNode>, expanded: ReadonlySet<string>, depth: number, out: FlatNode[]): void => {\n    for (const node of nodes) {\n        const hasChildren = node.children !== undefined && node.children.length > 0;\n\n        out.push({ depth, hasChildren, node });\n\n        if (hasChildren && expanded.has(node.value)) {\n            flatten(node.children, expanded, depth + 1, out);\n        }\n    }\n};\n\n/**\n * A keyboard-navigable tree with selectable leaves. ↑/↓ move the cursor, →/←\n * expand/collapse a branch (or Space on a branch), Space selects a leaf, and\n * Enter submits. Supports single or multiple selection.\n */\nexport default function TreeSelect({\n    accentColor = \"blue\",\n    autoFocus = false,\n    defaultValue = EMPTY_VALUES,\n    isDisabled = false,\n    nodes,\n    onChange,\n    onSubmit,\n    selectionMode = \"single\",\n    value: controlledValue,\n}: Props): ReactElement {\n    const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });\n    const isControlled = controlledValue !== undefined;\n\n    const [internal, setInternal] = useState<ReadonlyArray<string>>(defaultValue);\n    const selected = useMemo(() => new Set(controlledValue ?? internal), [controlledValue, internal]);\n\n    const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => new Set());\n    const [cursor, setCursor] = useState(0);\n\n    const onChangeRef = useRef(onChange);\n\n    onChangeRef.current = onChange;\n\n    const rows = useMemo(() => {\n        const out: FlatNode[] = [];\n\n        flatten(nodes, expanded, 0, out);\n\n        return out;\n    }, [expanded, nodes]);\n\n    const emit = useCallback(\n        (next: Set<string>) => {\n            const values = [...next];\n\n            if (!isControlled) {\n                setInternal(values);\n            }\n\n            onChangeRef.current?.(values);\n        },\n        [isControlled],\n    );\n\n    const toggleExpand = useCallback((value: string, force?: boolean) => {\n        setExpanded((current) => {\n            const next = new Set(current);\n            const shouldExpand = force ?? !next.has(value);\n\n            if (shouldExpand) {\n                next.add(value);\n            } else {\n                next.delete(value);\n            }\n\n            return next;\n        });\n    }, []);\n\n    const inputHandler = useCallback(\n        (input: string, key: { downArrow: boolean; leftArrow: boolean; return: boolean; rightArrow: boolean; upArrow: boolean }) => {\n            const row = rows[cursor];\n\n            if (key.upArrow) {\n                setCursor((index) => wrap(index - 1, rows.length));\n\n                return;\n            }\n\n            if (key.downArrow) {\n                setCursor((index) => wrap(index + 1, rows.length));\n\n                return;\n            }\n\n            if (row === undefined) {\n                return;\n            }\n\n            if (key.rightArrow && row.hasChildren) {\n                toggleExpand(row.node.value, true);\n\n                return;\n            }\n\n            if (key.leftArrow && row.hasChildren) {\n                toggleExpand(row.node.value, false);\n\n                return;\n            }\n\n            if (input === \" \") {\n                if (row.hasChildren) {\n                    toggleExpand(row.node.value);\n\n                    return;\n                }\n\n                const next = selectionMode === \"single\" ? new Set<string>() : new Set(selected);\n\n                if (next.has(row.node.value)) {\n                    next.delete(row.node.value);\n                } else {\n                    next.add(row.node.value);\n                }\n\n                emit(next);\n\n                return;\n            }\n\n            if (key.return) {\n                onSubmit?.([...selected]);\n            }\n        },\n        [cursor, emit, onSubmit, rows, selected, selectionMode, toggleExpand],\n    );\n\n    useInput(inputHandler, { isActive: isFocused && !isDisabled });\n\n    return (\n        <Box flexDirection=\"column\">\n            {rows.map((row, index) => {\n                const isActive = isFocused && index === cursor;\n                const isSelected = selected.has(row.node.value);\n                const indent = \"  \".repeat(row.depth);\n                const marker = markerFor(row.hasChildren, expanded.has(row.node.value), isSelected);\n                const labelColor = !row.hasChildren && isSelected ? accentColor : undefined;\n\n                return (\n                    // eslint-disable-next-line react-x/no-array-index-key -- row index is stable for the render\n                    <Box key={index}>\n                        <Text color={isActive ? accentColor : undefined}>{isActive ? \"❯\" : \" \"}</Text>\n                        <Text>{indent}</Text>\n                        <Text color={labelColor} dimColor={isDisabled}>\n                            {marker}\n                            {\" \"}\n                            {row.node.label}\n                        </Text>\n                    </Box>\n                );\n            })}\n        </Box>\n    );\n}\n\nexport { TreeSelect };\nexport type { Props as TreeSelectProps };\n",
+      "path": "registry/ui/tree-select.tsx",
+      "target": "components/ui/tree-select.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/tree-view.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tree-view",
+  "type": "registry:ui",
+  "title": "Tree View",
+  "description": "Tree View component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "// fallow-ignore-file unused-type -- public component API barrel; re-exports consumed by library users, not internally.\n// fallow-ignore-file unused-export -- public component API barrel; re-exports consumed by library users, not internally.\nexport type { Theme as TreeViewTheme } from \"./theme\";\nexport { theme as treeViewTheme } from \"./theme\";\nexport type { FlatNode } from \"./tree-node-map\";\nexport { TreeNodeMap } from \"./tree-node-map\";\nexport type { Props as TreeViewProps } from \"./tree-view\";\nexport { TreeView } from \"./tree-view\";\nexport type { AsyncChildrenFunction, SelectionMode, TreeNode, TreeNodeRendererProps, TreeNodeState } from \"./types\";\nexport type { UseTreeViewProps } from \"./use-tree-view\";\nexport { useTreeView } from \"./use-tree-view\";\nexport type { TreeViewState, UseTreeViewStateProps } from \"./use-tree-view-state\";\nexport { useTreeViewState } from \"./use-tree-view-state\";\n",
+      "path": "registry/ui/tree-view/index.ts",
+      "target": "components/ui/tree-view/index.ts",
+      "type": "registry:ui"
+    },
+    {
+      "content": "import type { Props as BoxProps } from \"@visulima/tui/components/box\";\nimport type { Props as TextProps } from \"@visulima/tui/components/text\";\n\ntype StyleFunctionProps = {\n    readonly depth?: number;\n    readonly hasChildren?: boolean;\n    readonly isExpanded?: boolean;\n    readonly isFocused?: boolean;\n    readonly isLoading?: boolean;\n    readonly isSelected?: boolean;\n};\n\nconst theme = {\n    styles: {\n        container: (): BoxProps => {\n            return {\n                flexDirection: \"column\" as const,\n            };\n        },\n        expandIndicator: (_props: StyleFunctionProps): TextProps => {\n            return {\n                color: \"gray\",\n            };\n        },\n        focusIndicator: (): TextProps => {\n            return {\n                color: \"blue\",\n            };\n        },\n        indent: ({ depth }: StyleFunctionProps): BoxProps => {\n            return {\n                width: (depth ?? 0) * 2,\n            };\n        },\n        label: ({ isFocused, isSelected }: StyleFunctionProps): TextProps => {\n            let color: string | undefined;\n\n            if (isSelected) {\n                color = \"green\";\n            }\n\n            if (isFocused) {\n                color = \"blue\";\n            }\n\n            return { color };\n        },\n        loadingIndicator: (): TextProps => {\n            return {\n                color: \"yellow\",\n            };\n        },\n        node: ({ isFocused }: StyleFunctionProps): BoxProps => {\n            return {\n                gap: 1,\n                paddingLeft: isFocused ? 0 : 2,\n            };\n        },\n        selectedIndicator: (): TextProps => {\n            return {\n                color: \"green\",\n            };\n        },\n    },\n};\n\nexport { theme };\nexport type Theme = typeof theme;\n",
+      "path": "registry/ui/tree-view/theme.ts",
+      "target": "components/ui/tree-view/theme.ts",
+      "type": "registry:ui"
+    },
+    {
+      "content": "import type { TreeNode } from \"./types\";\n\n/**\n * A flattened representation of a tree node with navigation links.\n */\nexport type FlatNode<T = Record<string, unknown>> = {\n    /** Ordered list of direct children IDs. */\n    readonly childrenIds: ReadonlyArray<string>;\n    /** Depth in the tree (0 for roots). */\n    readonly depth: number;\n    /** Index in the flattened DFS order (across ALL nodes, not just visible). */\n    readonly flatIndex: number;\n    /** Whether this node has children. */\n    readonly hasChildren: boolean;\n    /** Next sibling's ID, or undefined. */\n    readonly nextSiblingId: string | undefined;\n    /** The original tree node. */\n    readonly node: TreeNode<T>;\n    /** Parent's id, or undefined if root. */\n    readonly parentId: string | undefined;\n    /** Previous sibling's ID, or undefined. */\n    readonly previousSiblingId: string | undefined;\n    /** Total number of siblings (including this node). */\n    readonly siblingCount: number;\n    /** Zero-based index among siblings. */\n    readonly siblingIndex: number;\n};\n\ntype StackEntry<T> = {\n    readonly depth: number;\n    readonly node: TreeNode<T>;\n    readonly parentId: string | undefined;\n    readonly siblingIndex: number;\n    readonly siblings: TreeNode<T>[];\n};\n\n/**\n * A flattened map of all tree nodes built via DFS traversal.\n * Stores parent/child/sibling links for O(1) navigation.\n */\nexport class TreeNodeMap<T = Record<string, unknown>> {\n    /** All node IDs in DFS order. */\n    readonly orderedIds: string[];\n\n    /** Root-level node IDs. */\n    readonly rootIds: string[];\n\n    /** Map from node ID to FlatNode. */\n    private readonly map: Map<string, FlatNode<T>>;\n\n    constructor(data: TreeNode<T>[]) {\n        this.map = new Map();\n        this.orderedIds = [];\n        this.rootIds = [];\n\n        this.buildFromData(data);\n    }\n\n    /**\n     * Iterate over all entries.\n     */\n    entries(): IterableIterator<[string, FlatNode<T>]> {\n        return this.map.entries();\n    }\n\n    /**\n     * Get a flat node by ID.\n     */\n    get(id: string): FlatNode<T> | undefined {\n        return this.map.get(id);\n    }\n\n    /**\n     * Total number of nodes in the tree.\n     */\n    get size(): number {\n        return this.map.size;\n    }\n\n    /**\n     * Given a set of expanded node IDs, return the ordered list of\n     * VISIBLE node IDs (i.e., a node is visible if all its ancestors\n     * are expanded).\n     *\n     * Uses iterative DFS, skipping collapsed subtrees.\n     */\n    getVisibleIds(expandedIds: ReadonlySet<string>): string[] {\n        const result: string[] = [];\n        const stack: string[] = [];\n\n        // Push root IDs in reverse so first root is processed first\n        for (let index = this.rootIds.length - 1; index >= 0; index--) {\n            stack.push(this.rootIds[index]!);\n        }\n\n        while (stack.length > 0) {\n            const id = stack.pop()!;\n\n            result.push(id);\n\n            const flatNode = this.map.get(id);\n\n            if (flatNode && expandedIds.has(id) && flatNode.childrenIds.length > 0) {\n                // Push children in reverse so first child is processed first\n                for (let index = flatNode.childrenIds.length - 1; index >= 0; index--) {\n                    stack.push(flatNode.childrenIds[index]!);\n                }\n            }\n        }\n\n        return result;\n    }\n\n    /**\n     * Check if a node is a descendant of another node.\n     */\n    isDescendantOf(nodeId: string, ancestorId: string): boolean {\n        let currentId: string | undefined = nodeId;\n\n        while (currentId !== undefined) {\n            const flat = this.map.get(currentId);\n\n            if (!flat) {\n                return false;\n            }\n\n            if (flat.parentId === ancestorId) {\n                return true;\n            }\n\n            currentId = flat.parentId;\n        }\n\n        return false;\n    }\n\n    /**\n     * Insert dynamically-loaded children under a parent node.\n     * Returns a new TreeNodeMap (immutable operation).\n     *\n     * Rebuilds the full tree from the current map state (not the original\n     * input data), so successive calls for different parents are safe.\n     */\n    withChildren(parentId: string, children: TreeNode<T>[]): TreeNodeMap<T> {\n        const parentFlat = this.map.get(parentId);\n\n        if (!parentFlat) {\n            return this;\n        }\n\n        // Rebuild tree from current map state so previous withChildren\n        // mutations are preserved (the original node.children may be stale).\n        const rebuildFromMap = (id: string): TreeNode<T> => {\n            const flat = this.map.get(id)!;\n\n            if (id === parentId) {\n                return { ...flat.node, children };\n            }\n\n            if (flat.childrenIds.length > 0) {\n                return { ...flat.node, children: flat.childrenIds.map((childId) => rebuildFromMap(childId)) };\n            }\n\n            return flat.node;\n        };\n\n        const rootData = this.rootIds.map((nodeId) => rebuildFromMap(nodeId));\n\n        return new TreeNodeMap(rootData);\n    }\n\n    private buildFromData(data: TreeNode<T>[]): void {\n        const stack: StackEntry<T>[] = [];\n\n        // Push root nodes in reverse order so first root is processed first\n        for (let index = data.length - 1; index >= 0; index--) {\n            stack.push({\n                depth: 0,\n                node: data[index]!,\n                parentId: undefined,\n                siblingIndex: index,\n                siblings: data,\n            });\n        }\n\n        // Collect root IDs\n        for (const node of data) {\n            this.rootIds.push(node.id);\n        }\n\n        let flatIndex = 0;\n\n        while (stack.length > 0) {\n            const entry = stack.pop()!;\n            const { depth, node, parentId, siblingIndex, siblings } = entry;\n\n            // Check for duplicate IDs\n            if (this.map.has(node.id)) {\n                throw new Error(`TreeView: Duplicate node id '${node.id}' found. All node ids must be unique.`);\n            }\n\n            const children = node.children ?? [];\n            const hasChildren = children.length > 0 || node.isParent === true;\n            const childrenIds = children.map((c) => c.id);\n\n            const previousSiblingId = siblingIndex > 0 ? siblings[siblingIndex - 1]!.id : undefined;\n            const nextSiblingId = siblingIndex < siblings.length - 1 ? siblings[siblingIndex + 1]!.id : undefined;\n\n            const flatNode: FlatNode<T> = {\n                childrenIds,\n                depth,\n                flatIndex,\n                hasChildren,\n                nextSiblingId,\n                node,\n                parentId,\n                previousSiblingId,\n                siblingCount: siblings.length,\n                siblingIndex,\n            };\n\n            this.map.set(node.id, flatNode);\n            this.orderedIds.push(node.id);\n            flatIndex++;\n\n            // Push children in reverse order for correct DFS ordering\n            if (hasChildren) {\n                for (let index = children.length - 1; index >= 0; index--) {\n                    stack.push({\n                        depth: depth + 1,\n                        node: children[index]!,\n                        parentId: node.id,\n                        siblingIndex: index,\n                        siblings: children,\n                    });\n                }\n            }\n        }\n    }\n}\n",
+      "path": "registry/ui/tree-view/tree-node-map.ts",
+      "target": "components/ui/tree-view/tree-node-map.ts",
+      "type": "registry:ui"
+    },
+    {
+      "content": "/* eslint-disable react/function-component-definition */\n\n/**\n * TreeViewNode renders a single node in the tree with focus indicator,\n * indentation, expand/collapse indicator, label, and selection state.\n *\n * Ported from ink-tree-view by John Costa.\n * @see https://github.com/costajohnt/ink-tree-view\n *\n * MIT License\n * Copyright (c) John Costa\n */\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement } from \"react\";\n\nimport type { Theme } from \"./theme\";\nimport type { SelectionMode, TreeNode, TreeNodeState } from \"./types\";\n\n// Unicode symbols (avoids external `figures` dependency)\nconst POINTER = \"❯\";\nconst TRIANGLE_DOWN = \"▾\";\nconst TRIANGLE_RIGHT = \"▸\";\nconst CHECKBOX_ON = \"☒\";\nconst CHECKBOX_OFF = \"☐\";\nconst TICK = \"✔\";\nconst LOADING = \"⟳\";\n\ntype Props<T = Record<string, unknown>> = {\n    readonly isScreenReaderEnabled: boolean;\n    readonly node: TreeNode<T>;\n    readonly nodeState: TreeNodeState;\n    readonly selectionMode: SelectionMode;\n    readonly siblingCount: number;\n    readonly siblingPosition: number;\n    readonly styles: Theme[\"styles\"];\n};\n\n// eslint-disable-next-line react-refresh/only-export-components -- intentionally co-located helper\nexport function buildNodeAriaLabel(label: string, nodeState: TreeNodeState, siblingPosition: number, siblingCount: number): string {\n    const { depth, hasChildren, isExpanded, isLoading, isSelected } = nodeState;\n    const parts: string[] = [label, `item ${siblingPosition} of ${siblingCount}`];\n\n    if (depth > 0) {\n        parts.push(`depth ${depth}`);\n    }\n\n    if (hasChildren) {\n        parts.push(isExpanded ? \"expanded\" : \"collapsed\");\n    }\n\n    if (isLoading) {\n        parts.push(\"loading\");\n    }\n\n    if (isSelected) {\n        parts.push(\"selected\");\n    }\n\n    return parts.join(\", \");\n}\n\n// eslint-disable-next-line react-refresh/only-export-components -- intentionally co-located helper\nexport function buildNodeAriaState(nodeState: TreeNodeState, selectionMode: SelectionMode): { expanded?: boolean; selected?: boolean } | undefined {\n    const state: { expanded?: boolean; selected?: boolean } = {};\n\n    if (nodeState.hasChildren) {\n        state.expanded = nodeState.isExpanded;\n    }\n\n    if (selectionMode !== \"none\") {\n        state.selected = nodeState.isSelected;\n    }\n\n    return Object.keys(state).length > 0 ? state : undefined;\n}\n\nexport function TreeViewNode<T>({ isScreenReaderEnabled, node, nodeState, selectionMode, siblingCount, siblingPosition, styles }: Props<T>): ReactElement {\n    const { depth, hasChildren, isExpanded, isFocused, isLoading, isSelected } = nodeState;\n\n    // Determine expand/collapse indicator\n    let expandChar = \" \";\n\n    if (isLoading) {\n        expandChar = LOADING;\n    } else if (hasChildren) {\n        expandChar = isExpanded ? TRIANGLE_DOWN : TRIANGLE_RIGHT;\n    }\n\n    const ariaLabel = isScreenReaderEnabled ? buildNodeAriaLabel(node.label, nodeState, siblingPosition, siblingCount) : undefined;\n\n    return (\n        <Box {...styles.node({ isFocused })} aria-role=\"listitem\" aria-state={buildNodeAriaState(nodeState, selectionMode)}>\n            {ariaLabel && <Text aria-label={ariaLabel} />}\n            {/* Focus indicator */}\n            {isFocused && (\n                <Text {...styles.focusIndicator()} aria-hidden>\n                    {POINTER}\n                </Text>\n            )}\n\n            {/* Indentation based on depth */}\n            {depth > 0 && <Box {...styles.indent({ depth })} aria-hidden />}\n\n            {/* Multi-select checkbox */}\n            {selectionMode === \"multiple\" && (\n                <Text {...styles.selectedIndicator()} aria-hidden>\n                    {isSelected ? CHECKBOX_ON : CHECKBOX_OFF}\n                </Text>\n            )}\n\n            {/* Expand/collapse indicator */}\n            <Text {...(isLoading ? styles.loadingIndicator() : styles.expandIndicator({ isExpanded }))} aria-hidden>\n                {expandChar}\n            </Text>\n\n            {/* Node label */}\n            <Text {...styles.label({ isFocused, isSelected })}>{node.label}</Text>\n\n            {/* Single-select tick */}\n            {selectionMode === \"single\" && isSelected && (\n                <Text {...styles.selectedIndicator()} aria-hidden>\n                    {\" \"}\n                    {TICK}\n                </Text>\n            )}\n        </Box>\n    );\n}\n",
+      "path": "registry/ui/tree-view/tree-view-node.tsx",
+      "target": "components/ui/tree-view/tree-view-node.tsx",
+      "type": "registry:ui"
+    },
+    {
+      "content": "/* eslint-disable react/function-component-definition */\n\n/**\n * TreeView component for terminal UIs with keyboard navigation,\n * expand/collapse, single/multi selection, async children loading,\n * and viewport virtualization.\n *\n * Ported from ink-tree-view by John Costa.\n * @see https://github.com/costajohnt/ink-tree-view\n *\n * MIT License\n * Copyright (c) John Costa\n */\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport useIsScreenReaderEnabled from \"@visulima/tui/hooks/use-is-screen-reader-enabled\";\nimport type { ReactElement, ReactNode } from \"react\";\n\nimport { theme } from \"./theme\";\nimport { buildNodeAriaLabel, buildNodeAriaState, TreeViewNode } from \"./tree-view-node\";\nimport type { AsyncChildrenFunction, SelectionMode, TreeNode, TreeNodeRendererProps } from \"./types\";\nimport { useTreeView } from \"./use-tree-view\";\nimport { useTreeViewState } from \"./use-tree-view-state\";\n\nexport type Props<T = Record<string, unknown>> = {\n    /**\n     * Accessible label for the tree container.\n     * Useful when multiple tree views are on screen.\n     * @default \"Tree view\"\n     */\n    readonly ariaLabel?: string;\n\n    /**\n     * The tree data. Array of root-level nodes.\n     *\n     * **Important:** Must be referentially stable across renders (e.g. stored\n     * in state or wrapped in `useMemo`). Passing a new array reference on\n     * every render will reset focus, expansion, and selection state.\n     */\n    readonly data: TreeNode<T>[];\n\n    /**\n     * Set of node IDs that are expanded by default.\n     * If not provided, all nodes start collapsed.\n     */\n    readonly defaultExpanded?: ReadonlySet<string> | \"all\";\n\n    /**\n     * Set of node IDs that are selected by default.\n     */\n    readonly defaultSelected?: ReadonlySet<string>;\n\n    /**\n     * When disabled, user input is ignored.\n     * @default false\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * Async function to load children on demand.\n     */\n    readonly loadChildren?: AsyncChildrenFunction<T>;\n\n    /** Called when expanded set changes. */\n    readonly onExpandChange?: (expandedIds: ReadonlySet<string>) => void;\n\n    /** Called when the focused node changes. */\n    readonly onFocusChange?: (nodeId: string) => void;\n\n    /**\n     * Called when `loadChildren` rejects. Receives the node ID and error.\n     */\n    readonly onLoadError?: (nodeId: string, error: Error) => void;\n\n    /** Called when selection changes. */\n    readonly onSelectChange?: (selectedIds: ReadonlySet<string>) => void;\n\n    /**\n     * Custom node renderer. Receives node + state, returns Ink JSX.\n     */\n    readonly renderNode?: (props: TreeNodeRendererProps<T>) => ReactNode;\n\n    /**\n     * Selection mode.\n     * - \"none\": No selection behavior (default).\n     * - \"single\": One node can be selected at a time.\n     * - \"multiple\": Multiple nodes can be selected (checkboxes shown).\n     * @default \"none\"\n     */\n    readonly selectionMode?: SelectionMode;\n\n    /**\n     * Number of visible nodes in the viewport (for virtualization).\n     * @default Infinity (no virtualization)\n     */\n    readonly visibleNodeCount?: number;\n};\n\n/**\n * Renders an interactive tree view with keyboard navigation.\n *\n * ```tsx\n * &lt;TreeView\n *   data={[\n *     { id: \"1\", label: \"Root\", children: [\n *       { id: \"1.1\", label: \"Child\" },\n *     ]},\n *   ]}\n *   defaultExpanded=\"all\"\n * />\n * ```\n */\nexport function TreeView<T = Record<string, unknown>>({\n    ariaLabel = \"Tree view\",\n    data,\n    defaultExpanded,\n    defaultSelected,\n    isDisabled = false,\n    loadChildren,\n    onExpandChange,\n    onFocusChange,\n    onLoadError,\n    onSelectChange,\n    renderNode,\n    selectionMode = \"none\",\n    visibleNodeCount,\n}: Props<T>): ReactElement {\n    const state = useTreeViewState<T>({\n        data,\n        defaultExpanded,\n        defaultSelected,\n        onExpandChange,\n        onFocusChange,\n        onSelectChange,\n        selectionMode,\n        visibleNodeCount,\n    });\n\n    useTreeView<T>({\n        isDisabled,\n        loadChildren,\n        onLoadError,\n        selectionMode,\n        state,\n    });\n\n    const { styles } = theme;\n    const isScreenReaderEnabled = useIsScreenReaderEnabled();\n\n    return (\n        // Ink's aria-role enum does not include \"tree\"/\"treeitem\"/\"group\",\n        // so we use \"list\"/\"listitem\" as the closest available semantic match.\n        <Box {...styles.container()} aria-role=\"list\">\n            {isScreenReaderEnabled && <Text aria-label={ariaLabel} />}\n            {state.hasScrollUp && (\n                <Text aria-label={`${state.viewportFromIndex} more items above`} dimColor>\n                    {\"  \"}\n↑\n{state.viewportFromIndex}\n{\" \"}\nmore above\n                </Text>\n            )}\n            {state.viewportNodes.map(({ node, state: nodeState }) => {\n                const flatNode = state.nodeMap.get(node.id);\n                const siblingPosition = flatNode ? flatNode.siblingIndex + 1 : 1;\n                const siblingCount = flatNode ? flatNode.siblingCount : 1;\n\n                if (renderNode) {\n                    const nodeAriaLabel = isScreenReaderEnabled ? buildNodeAriaLabel(node.label, nodeState, siblingPosition, siblingCount) : undefined;\n\n                    return (\n                        <Box aria-role=\"listitem\" aria-state={buildNodeAriaState(nodeState, selectionMode)} key={node.id}>\n                            {nodeAriaLabel && <Text aria-label={nodeAriaLabel} />}\n                            {renderNode({ node, state: nodeState })}\n                        </Box>\n                    );\n                }\n\n                return (\n                    <TreeViewNode\n                        isScreenReaderEnabled={isScreenReaderEnabled}\n                        key={node.id}\n                        node={node}\n                        nodeState={nodeState}\n                        selectionMode={selectionMode}\n                        siblingCount={siblingCount}\n                        siblingPosition={siblingPosition}\n                        styles={styles}\n                    />\n                );\n            })}\n            {state.hasScrollDown && (\n                <Text aria-label={`${state.visibleCount - state.viewportToIndex} more items below`} dimColor>\n                    {\"  \"}\n↓\n{state.visibleCount - state.viewportToIndex}\n{\" \"}\nmore below\n                </Text>\n            )}\n        </Box>\n    );\n}\n",
+      "path": "registry/ui/tree-view/tree-view.tsx",
+      "target": "components/ui/tree-view/tree-view.tsx",
+      "type": "registry:ui"
+    },
+    {
+      "content": "/**\n * A single node in the tree. Generic over the user's data shape.\n * The `id` field MUST be unique across the entire tree.\n */\nexport type TreeNode<T = Record<string, unknown>> = {\n    /** Child nodes. Undefined or empty array means leaf node. */\n    readonly children?: TreeNode<T>[];\n    /** Arbitrary user data attached to this node. */\n    readonly data?: T;\n    /** Unique identifier for this node. Used as the key for all lookups. */\n    readonly id: string;\n\n    /**\n     * Explicitly marks this node as a parent that can have children loaded\n     * asynchronously via `loadChildren`. When true, the node shows an expand\n     * indicator even if `children` is empty or undefined, and expanding it\n     * triggers the `loadChildren` callback.\n     */\n    readonly isParent?: boolean;\n    /** Display label. Used by the default renderer. */\n    readonly label: string;\n};\n\n/**\n * For async/lazy loading: a function that resolves children on demand.\n */\nexport type AsyncChildrenFunction<T = Record<string, unknown>> = (node: TreeNode<T>) => Promise<TreeNode<T>[]>;\n\n/**\n * State passed to custom renderers and theme functions.\n */\nexport type TreeNodeState = {\n    /** Depth of this node in the tree (root = 0). */\n    readonly depth: number;\n    /** Whether this node has children (or a lazy loader). */\n    readonly hasChildren: boolean;\n    /** Whether this node is expanded (children visible). */\n    readonly isExpanded: boolean;\n    /** Whether this node is currently focused (cursor is on it). */\n    readonly isFocused: boolean;\n    /** Whether children are currently loading (async mode). */\n    readonly isLoading: boolean;\n    /** Whether this node is selected (in select/multi-select mode). */\n    readonly isSelected: boolean;\n};\n\n/**\n * Props received by a custom node renderer.\n */\nexport type TreeNodeRendererProps<T = Record<string, unknown>> = {\n    /** The tree node data. */\n    readonly node: TreeNode<T>;\n    /** Current state of this node. */\n    readonly state: TreeNodeState;\n};\n\n/**\n * Selection mode for the tree view.\n */\nexport type SelectionMode = \"multiple\" | \"none\" | \"single\";\n",
+      "path": "registry/ui/tree-view/types.ts",
+      "target": "components/ui/tree-view/types.ts",
+      "type": "registry:ui"
+    },
+    {
+      "content": "import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from \"react\";\n\nimport { TreeNodeMap } from \"./tree-node-map\";\nimport type { SelectionMode, TreeNode, TreeNodeState } from \"./types\";\n\n// ─── State ──────────────────────────────────────────────────────────────────\n\nexport type State<T> = {\n    expandedIds: Set<string>;\n    focusedId: string | undefined;\n    loadingIds: Set<string>;\n    nodeMap: TreeNodeMap<T>;\n    previousExpandedIds: Set<string>;\n    previousSelectedIds: Set<string>;\n    selectedIds: Set<string>;\n    selectionMode: SelectionMode;\n    viewportFromIndex: number;\n    viewportToIndex: number;\n    /** O(1) lookup from node ID to index in visibleIds. */\n    visibleIdIndex: Map<string, number>;\n    visibleIds: string[];\n    visibleNodeCount: number;\n};\n\n// ─── Actions ────────────────────────────────────────────────────────────────\n\nexport type Action<T>\n    = | { nodeId: string; type: \"collapse-node\" }\n        | { nodeId: string; type: \"expand-node\" }\n        | { nodeId: string; type: \"set-children-error\" }\n        | { children: TreeNode<T>[]; parentId: string; type: \"insert-children\" }\n        | { isLoading: boolean; nodeId: string; type: \"set-loading\" }\n        | { state: State<T>; type: \"reset\" }\n        | { type: \"collapse\" }\n        | { type: \"collapse-all\" }\n        | { type: \"expand\" }\n        | { type: \"expand-all\" }\n        | { type: \"focus-first\" }\n        | { type: \"focus-first-child\" }\n        | { type: \"focus-last\" }\n        | { type: \"focus-next\" }\n        | { type: \"focus-parent\" }\n        | { type: \"focus-previous\" }\n        | { type: \"select\" }\n        | { type: \"toggle-expanded\" };\n\n// ─── Index helper ──────────────────────────────────────────────────────────\n\nfunction buildVisibleIdIndex(visibleIds: string[]): Map<string, number> {\n    const map = new Map<string, number>();\n\n    for (const [index, visibleId] of visibleIds.entries()) {\n        map.set(visibleId, index);\n    }\n\n    return map;\n}\n\n// ─── Viewport helper ────────────────────────────────────────────────────────\n\nfunction adjustViewport<T>(state: State<T>, targetIndex: number): { viewportFromIndex: number; viewportToIndex: number } {\n    if (state.visibleNodeCount >= state.visibleIds.length) {\n        return { viewportFromIndex: 0, viewportToIndex: state.visibleIds.length };\n    }\n\n    let from = state.viewportFromIndex;\n    let to = state.viewportToIndex;\n\n    // Scroll down: target is at or past the bottom of viewport\n    if (targetIndex >= to) {\n        to = targetIndex + 1;\n        from = to - state.visibleNodeCount;\n    }\n\n    // Scroll up: target is before the top of viewport\n    if (targetIndex < from) {\n        from = targetIndex;\n        to = from + state.visibleNodeCount;\n    }\n\n    return {\n        viewportFromIndex: Math.max(0, from),\n        viewportToIndex: Math.min(state.visibleIds.length, to),\n    };\n}\n\nfunction adjustViewportForNewVisible<T>(state: State<T>, newVisible: string[]): { viewportFromIndex: number; viewportToIndex: number } {\n    if (state.visibleNodeCount >= newVisible.length) {\n        return { viewportFromIndex: 0, viewportToIndex: newVisible.length };\n    }\n\n    // Keep the focused node in the viewport\n    const focusedIndex = state.focusedId ? newVisible.indexOf(state.focusedId) : -1;\n\n    if (focusedIndex < 0) {\n        return {\n            viewportFromIndex: 0,\n            viewportToIndex: Math.min(state.visibleNodeCount, newVisible.length),\n        };\n    }\n\n    // Clamp to new bounds\n    let to = Math.min(state.viewportToIndex, newVisible.length);\n    let from = Math.max(0, to - state.visibleNodeCount);\n\n    // Ensure focused node is visible\n    if (focusedIndex >= to) {\n        to = focusedIndex + 1;\n        from = to - state.visibleNodeCount;\n    }\n\n    if (focusedIndex < from) {\n        from = focusedIndex;\n        to = from + state.visibleNodeCount;\n    }\n\n    return {\n        viewportFromIndex: Math.max(0, from),\n        viewportToIndex: Math.min(newVisible.length, to),\n    };\n}\n\n// ─── Reducer ────────────────────────────────────────────────────────────────\n\nexport function reducer<T>(state: State<T>, action: Action<T>): State<T> {\n    switch (action.type) {\n        case \"collapse\": {\n            if (!state.focusedId) {\n                return state;\n            }\n\n            return reducer(state, { nodeId: state.focusedId, type: \"collapse-node\" });\n        }\n\n        case \"collapse-all\": {\n            const newExpanded = new Set<string>();\n            const newVisible = state.nodeMap.getVisibleIds(newExpanded);\n\n            return {\n                ...state,\n                expandedIds: newExpanded,\n                focusedId: newVisible[0],\n                previousExpandedIds: state.expandedIds,\n                viewportFromIndex: 0,\n                viewportToIndex: Math.min(state.visibleNodeCount, newVisible.length),\n                visibleIdIndex: buildVisibleIdIndex(newVisible),\n                visibleIds: newVisible,\n            };\n        }\n\n        case \"collapse-node\": {\n            const { nodeId } = action;\n\n            if (!state.expandedIds.has(nodeId)) {\n                return state;\n            }\n\n            const newExpanded = new Set(state.expandedIds);\n\n            newExpanded.delete(nodeId);\n            const newVisible = state.nodeMap.getVisibleIds(newExpanded);\n\n            // Collapse-focus invariant: if the focused node is a descendant\n            // of the collapsed node, move focus to the collapsed node.\n            let newFocusedId = state.focusedId;\n\n            if (newFocusedId !== undefined && newFocusedId !== nodeId && state.nodeMap.isDescendantOf(newFocusedId, nodeId)) {\n                newFocusedId = nodeId;\n            }\n\n            return {\n                ...state,\n                expandedIds: newExpanded,\n                focusedId: newFocusedId,\n                previousExpandedIds: state.expandedIds,\n                visibleIdIndex: buildVisibleIdIndex(newVisible),\n                visibleIds: newVisible,\n                ...adjustViewportForNewVisible({ ...state, focusedId: newFocusedId, visibleIds: newVisible }, newVisible),\n            };\n        }\n\n        case \"expand\": {\n            if (!state.focusedId) {\n                return state;\n            }\n\n            return reducer(state, { nodeId: state.focusedId, type: \"expand-node\" });\n        }\n\n        case \"expand-all\": {\n            const allParentIds = new Set<string>();\n\n            for (const [id, flat] of state.nodeMap.entries()) {\n                if (flat.hasChildren) {\n                    allParentIds.add(id);\n                }\n            }\n\n            const newVisible = state.nodeMap.getVisibleIds(allParentIds);\n\n            return {\n                ...state,\n                expandedIds: allParentIds,\n                previousExpandedIds: state.expandedIds,\n                visibleIdIndex: buildVisibleIdIndex(newVisible),\n                visibleIds: newVisible,\n                ...adjustViewportForNewVisible({ ...state, visibleIds: newVisible }, newVisible),\n            };\n        }\n\n        case \"expand-node\": {\n            const { nodeId } = action;\n            const flat = state.nodeMap.get(nodeId);\n\n            if (!flat?.hasChildren) {\n                return state;\n            }\n\n            if (state.expandedIds.has(nodeId)) {\n                return state;\n            }\n\n            const newExpanded = new Set(state.expandedIds);\n\n            newExpanded.add(nodeId);\n            const newVisible = state.nodeMap.getVisibleIds(newExpanded);\n\n            return {\n                ...state,\n                expandedIds: newExpanded,\n                previousExpandedIds: state.expandedIds,\n                visibleIdIndex: buildVisibleIdIndex(newVisible),\n                visibleIds: newVisible,\n                ...adjustViewportForNewVisible({ ...state, visibleIds: newVisible }, newVisible),\n            };\n        }\n\n        case \"focus-first\": {\n            if (state.visibleIds.length === 0) {\n                return state;\n            }\n\n            return {\n                ...state,\n                focusedId: state.visibleIds[0],\n                viewportFromIndex: 0,\n                viewportToIndex: Math.min(state.visibleNodeCount, state.visibleIds.length),\n            };\n        }\n\n        case \"focus-first-child\": {\n            if (!state.focusedId) {\n                return state;\n            }\n\n            const flat = state.nodeMap.get(state.focusedId);\n\n            if (!flat || flat.childrenIds.length === 0) {\n                return state;\n            }\n\n            if (!state.expandedIds.has(state.focusedId)) {\n                return state;\n            }\n\n            const firstChildId = flat.childrenIds[0]!;\n            const childIndex = state.visibleIdIndex.get(firstChildId) ?? -1;\n\n            if (childIndex < 0) {\n                return state;\n            }\n\n            return {\n                ...state,\n                focusedId: firstChildId,\n                ...adjustViewport(state, childIndex),\n            };\n        }\n\n        case \"focus-last\": {\n            if (state.visibleIds.length === 0) {\n                return state;\n            }\n\n            const lastIndex = state.visibleIds.length - 1;\n\n            return {\n                ...state,\n                focusedId: state.visibleIds[lastIndex],\n                ...adjustViewport(state, lastIndex),\n            };\n        }\n\n        case \"focus-next\": {\n            if (!state.focusedId) {\n                return state;\n            }\n\n            const index = state.visibleIdIndex.get(state.focusedId) ?? -1;\n\n            if (index < 0 || index >= state.visibleIds.length - 1) {\n                return state;\n            }\n\n            const nextId = state.visibleIds[index + 1]!;\n\n            return {\n                ...state,\n                focusedId: nextId,\n                ...adjustViewport(state, index + 1),\n            };\n        }\n\n        case \"focus-parent\": {\n            if (!state.focusedId) {\n                return state;\n            }\n\n            const flat = state.nodeMap.get(state.focusedId);\n\n            if (!flat?.parentId) {\n                return state;\n            }\n\n            const parentIndex = state.visibleIdIndex.get(flat.parentId) ?? -1;\n\n            if (parentIndex < 0) {\n                return state;\n            }\n\n            return {\n                ...state,\n                focusedId: flat.parentId,\n                ...adjustViewport(state, parentIndex),\n            };\n        }\n\n        case \"focus-previous\": {\n            if (!state.focusedId) {\n                return state;\n            }\n\n            const index = state.visibleIdIndex.get(state.focusedId) ?? -1;\n\n            if (index <= 0) {\n                return state;\n            }\n\n            const previousId = state.visibleIds[index - 1]!;\n\n            return {\n                ...state,\n                focusedId: previousId,\n                ...adjustViewport(state, index - 1),\n            };\n        }\n\n        case \"insert-children\": {\n            const parentFlat = state.nodeMap.get(action.parentId);\n\n            if (!parentFlat) {\n                return state;\n            }\n\n            const newNodeMap = state.nodeMap.withChildren(action.parentId, action.children);\n            const newVisible = newNodeMap.getVisibleIds(state.expandedIds);\n\n            return {\n                ...state,\n                nodeMap: newNodeMap,\n                visibleIdIndex: buildVisibleIdIndex(newVisible),\n                visibleIds: newVisible,\n            };\n        }\n\n        case \"reset\": {\n            return action.state;\n        }\n\n        case \"select\": {\n            if (!state.focusedId) {\n                return state;\n            }\n\n            if (state.selectionMode === \"none\") {\n                return state;\n            }\n\n            if (state.selectionMode === \"single\") {\n                const newSelected = new Set<string>([state.focusedId]);\n\n                return {\n                    ...state,\n                    previousSelectedIds: state.selectedIds,\n                    selectedIds: newSelected,\n                };\n            }\n\n            // 'multiple': toggle\n            const newSelected = new Set(state.selectedIds);\n\n            if (newSelected.has(state.focusedId)) {\n                newSelected.delete(state.focusedId);\n            } else {\n                newSelected.add(state.focusedId);\n            }\n\n            return {\n                ...state,\n                previousSelectedIds: state.selectedIds,\n                selectedIds: newSelected,\n            };\n        }\n\n        case \"set-children-error\": {\n            const newLoading = new Set(state.loadingIds);\n\n            newLoading.delete(action.nodeId);\n\n            return { ...state, loadingIds: newLoading };\n        }\n\n        case \"set-loading\": {\n            const newLoading = new Set(state.loadingIds);\n\n            if (action.isLoading) {\n                newLoading.add(action.nodeId);\n            } else {\n                newLoading.delete(action.nodeId);\n            }\n\n            return { ...state, loadingIds: newLoading };\n        }\n\n        case \"toggle-expanded\": {\n            if (!state.focusedId) {\n                return state;\n            }\n\n            if (state.expandedIds.has(state.focusedId)) {\n                return reducer(state, { type: \"collapse\" });\n            }\n\n            return reducer(state, { type: \"expand\" });\n        }\n\n        default: {\n            return state;\n        }\n    }\n}\n\n// ─── Default state factory ──────────────────────────────────────────────────\n\nexport type CreateDefaultStateProps<T> = {\n    data: TreeNode<T>[];\n    defaultExpanded?: ReadonlySet<string> | \"all\";\n    defaultSelected?: ReadonlySet<string>;\n    selectionMode: SelectionMode;\n    visibleNodeCount: number;\n};\n\nexport function createDefaultState<T>({ data, defaultExpanded, defaultSelected, selectionMode, visibleNodeCount }: CreateDefaultStateProps<T>): State<T> {\n    const nodeMap = new TreeNodeMap(data);\n\n    let expandedIds: Set<string>;\n\n    if (defaultExpanded === \"all\") {\n        expandedIds = new Set<string>();\n\n        for (const [id, flat] of nodeMap.entries()) {\n            if (flat.hasChildren) {\n                expandedIds.add(id);\n            }\n        }\n    } else if (defaultExpanded) {\n        expandedIds = new Set(defaultExpanded);\n    } else {\n        expandedIds = new Set();\n    }\n\n    const visibleIds = nodeMap.getVisibleIds(expandedIds);\n    const selectedIds = selectionMode !== \"none\" && defaultSelected ? new Set(defaultSelected) : new Set<string>();\n\n    const nodeCount = Math.min(visibleNodeCount, visibleIds.length);\n\n    return {\n        expandedIds,\n        focusedId: visibleIds[0],\n        loadingIds: new Set(),\n        nodeMap,\n        previousExpandedIds: expandedIds,\n        previousSelectedIds: selectedIds,\n        selectedIds,\n        selectionMode,\n        viewportFromIndex: 0,\n        viewportToIndex: nodeCount,\n        visibleIdIndex: buildVisibleIdIndex(visibleIds),\n        visibleIds,\n        visibleNodeCount,\n    };\n}\n\n// ─── Public hook types ──────────────────────────────────────────────────────\n\nexport type UseTreeViewStateProps<T = Record<string, unknown>> = {\n    /** The tree data. Array of root-level nodes. */\n    readonly data: TreeNode<T>[];\n\n    /**\n     * Set of node IDs that are expanded by default.\n     * If not provided, all nodes start collapsed.\n     */\n    readonly defaultExpanded?: ReadonlySet<string> | \"all\";\n\n    /**\n     * Set of node IDs that are selected by default.\n     */\n    readonly defaultSelected?: ReadonlySet<string>;\n    /** Called when expanded set changes. */\n    readonly onExpandChange?: (expandedIds: ReadonlySet<string>) => void;\n    /** Called when the focused node changes. */\n    readonly onFocusChange?: (nodeId: string) => void;\n    /** Called when selection changes. */\n    readonly onSelectChange?: (selectedIds: ReadonlySet<string>) => void;\n\n    /**\n     * Selection mode.\n     * @default \"none\"\n     */\n    readonly selectionMode?: SelectionMode;\n\n    /**\n     * Number of visible nodes in the viewport (for virtualization).\n     * @default Infinity\n     */\n    readonly visibleNodeCount?: number;\n};\n\nexport type TreeViewState<T = Record<string, unknown>> = {\n    readonly collapse: () => void;\n    readonly collapseAll: () => void;\n    readonly collapseNode: (nodeId: string) => void;\n    readonly expand: () => void;\n    readonly expandAll: () => void;\n    readonly expandedIds: ReadonlySet<string>;\n    readonly expandNode: (nodeId: string) => void;\n    readonly focusedId: string | undefined;\n    readonly focusFirst: () => void;\n    readonly focusFirstChild: () => void;\n    readonly focusLast: () => void;\n    readonly focusNext: () => void;\n    readonly focusParent: () => void;\n    readonly focusPrevious: () => void;\n    readonly hasScrollDown: boolean;\n    readonly hasScrollUp: boolean;\n    readonly insertChildren: (parentId: string, children: TreeNode<T>[]) => void;\n    readonly loadingIds: ReadonlySet<string>;\n    readonly nodeMap: TreeNodeMap<T>;\n    readonly select: () => void;\n    readonly selectedIds: ReadonlySet<string>;\n    readonly setChildrenError: (nodeId: string) => void;\n    readonly setLoading: (nodeId: string, isLoading: boolean) => void;\n    readonly toggleExpanded: () => void;\n    readonly viewportFromIndex: number;\n    readonly viewportNodes: { node: TreeNode<T>; state: TreeNodeState }[];\n    readonly viewportToIndex: number;\n    readonly visibleCount: number;\n};\n\n// ─── Hook ───────────────────────────────────────────────────────────────────\n\nexport function useTreeViewState<T = Record<string, unknown>>({\n    data,\n    defaultExpanded,\n    defaultSelected,\n    onExpandChange,\n    onFocusChange,\n    onSelectChange,\n    selectionMode = \"none\",\n    visibleNodeCount = Infinity,\n}: UseTreeViewStateProps<T>): TreeViewState<T> {\n    const [state, dispatch] = useReducer(reducer<T>, { data, defaultExpanded, defaultSelected, selectionMode, visibleNodeCount }, createDefaultState<T>);\n\n    // Detect data changes and reset\n    const [lastData, setLastData] = useState(data);\n\n    if (data !== lastData) {\n        dispatch({\n            state: createDefaultState({\n                data,\n                defaultExpanded,\n                defaultSelected,\n                selectionMode,\n                visibleNodeCount,\n            }),\n            type: \"reset\",\n        });\n        setLastData(data);\n    }\n\n    // Store callbacks in refs to avoid infinite loops when consumers\n    // pass inline functions (new reference every render)\n    const onFocusChangeReference = useRef(onFocusChange);\n\n    onFocusChangeReference.current = onFocusChange;\n    const onExpandChangeReference = useRef(onExpandChange);\n\n    onExpandChangeReference.current = onExpandChange;\n    const onSelectChangeReference = useRef(onSelectChange);\n\n    onSelectChangeReference.current = onSelectChange;\n\n    // Fire callbacks on state changes (skip initial mount for onFocusChange)\n    const isInitialMount = useRef(true);\n\n    useEffect(() => {\n        if (isInitialMount.current) {\n            isInitialMount.current = false;\n\n            return;\n        }\n\n        if (state.focusedId) {\n            onFocusChangeReference.current?.(state.focusedId);\n        }\n    }, [state.focusedId]);\n\n    useEffect(() => {\n        if (state.expandedIds !== state.previousExpandedIds) {\n            onExpandChangeReference.current?.(state.expandedIds);\n        }\n    }, [state.expandedIds, state.previousExpandedIds]);\n\n    useEffect(() => {\n        if (state.selectedIds !== state.previousSelectedIds) {\n            onSelectChangeReference.current?.(state.selectedIds);\n        }\n    }, [state.selectedIds, state.previousSelectedIds]);\n\n    // Compute viewportNodes from state\n    const viewportNodes = useMemo(\n        () =>\n            state.visibleIds.slice(state.viewportFromIndex, state.viewportToIndex).map((id) => {\n                const flat = state.nodeMap.get(id)!;\n\n                return {\n                    node: flat.node,\n                    state: {\n                        depth: flat.depth,\n                        hasChildren: flat.hasChildren,\n                        isExpanded: state.expandedIds.has(id),\n                        isFocused: id === state.focusedId,\n                        isLoading: state.loadingIds.has(id),\n                        isSelected: state.selectedIds.has(id),\n                    } satisfies TreeNodeState,\n                };\n            }),\n        [\n            state.visibleIds,\n            state.viewportFromIndex,\n            state.viewportToIndex,\n            state.focusedId,\n            state.expandedIds,\n            state.selectedIds,\n            state.nodeMap,\n            state.loadingIds,\n        ],\n    );\n\n    const focusNext = useCallback(() => {\n        dispatch({ type: \"focus-next\" });\n    }, []);\n    const focusPrevious = useCallback(() => {\n        dispatch({ type: \"focus-previous\" });\n    }, []);\n    const focusFirst = useCallback(() => {\n        dispatch({ type: \"focus-first\" });\n    }, []);\n    const focusLast = useCallback(() => {\n        dispatch({ type: \"focus-last\" });\n    }, []);\n    const expand = useCallback(() => {\n        dispatch({ type: \"expand\" });\n    }, []);\n    const expandNode = useCallback((nodeId: string) => {\n        dispatch({ nodeId, type: \"expand-node\" });\n    }, []);\n    const collapse = useCallback(() => {\n        dispatch({ type: \"collapse\" });\n    }, []);\n    const collapseNode = useCallback((nodeId: string) => {\n        dispatch({ nodeId, type: \"collapse-node\" });\n    }, []);\n    const toggleExpanded = useCallback(() => {\n        dispatch({ type: \"toggle-expanded\" });\n    }, []);\n    const expandAll = useCallback(() => {\n        dispatch({ type: \"expand-all\" });\n    }, []);\n    const collapseAll = useCallback(() => {\n        dispatch({ type: \"collapse-all\" });\n    }, []);\n    const select = useCallback(() => {\n        dispatch({ type: \"select\" });\n    }, []);\n    const focusParent = useCallback(() => {\n        dispatch({ type: \"focus-parent\" });\n    }, []);\n    const focusFirstChild = useCallback(() => {\n        dispatch({ type: \"focus-first-child\" });\n    }, []);\n    const setLoading = useCallback((nodeId: string, isLoading: boolean) => {\n        dispatch({ isLoading, nodeId, type: \"set-loading\" });\n    }, []);\n    const setChildrenError = useCallback((nodeId: string) => {\n        dispatch({ nodeId, type: \"set-children-error\" });\n    }, []);\n    const insertChildren = useCallback((parentId: string, children: TreeNode<T>[]) => {\n        dispatch({ children, parentId, type: \"insert-children\" });\n    }, []);\n\n    return {\n        collapse,\n        collapseAll,\n        collapseNode,\n        expand,\n        expandAll,\n        expandedIds: state.expandedIds,\n        expandNode,\n        focusedId: state.focusedId,\n        focusFirst,\n        focusFirstChild,\n        focusLast,\n        focusNext,\n        focusParent,\n        focusPrevious,\n        hasScrollDown: state.viewportToIndex < state.visibleIds.length,\n        hasScrollUp: state.viewportFromIndex > 0,\n        insertChildren,\n        loadingIds: state.loadingIds,\n        nodeMap: state.nodeMap,\n        select,\n        selectedIds: state.selectedIds,\n        setChildrenError,\n        setLoading,\n        toggleExpanded,\n        viewportFromIndex: state.viewportFromIndex,\n        viewportNodes,\n        viewportToIndex: state.viewportToIndex,\n        visibleCount: state.visibleIds.length,\n    };\n}\n",
+      "path": "registry/ui/tree-view/use-tree-view-state.ts",
+      "target": "components/ui/tree-view/use-tree-view-state.ts",
+      "type": "registry:ui"
+    },
+    {
+      "content": "import useInput from \"@visulima/tui/hooks/use-input\";\nimport { useCallback, useRef } from \"react\";\n\nimport type { AsyncChildrenFunction, SelectionMode } from \"./types\";\nimport type { TreeViewState } from \"./use-tree-view-state\";\n\nexport type UseTreeViewProps<T = Record<string, unknown>> = {\n    /**\n     * When disabled, user input is ignored.\n     * @default false\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * Async function to load children on demand.\n     */\n    readonly loadChildren?: AsyncChildrenFunction<T>;\n\n    /**\n     * Called when `loadChildren` rejects.\n     */\n    readonly onLoadError?: (nodeId: string, error: Error) => void;\n\n    /**\n     * Selection mode.\n     */\n    readonly selectionMode: SelectionMode;\n\n    /**\n     * The tree view state from `useTreeViewState`.\n     */\n    readonly state: TreeViewState<T>;\n};\n\nexport function useTreeView<T>({ isDisabled = false, loadChildren, onLoadError, selectionMode, state }: UseTreeViewProps<T>): void {\n    const loadingReference = useRef(new Set<string>());\n    const stateReference = useRef(state);\n\n    stateReference.current = state;\n\n    const loadChildrenReference = useRef(loadChildren);\n\n    loadChildrenReference.current = loadChildren;\n\n    const onLoadErrorReference = useRef(onLoadError);\n\n    onLoadErrorReference.current = onLoadError;\n\n    const triggerLoad = useCallback(async (nodeId: string) => {\n        if (loadingReference.current.has(nodeId)) {\n            return;\n        }\n\n        const currentLoadChildren = loadChildrenReference.current;\n\n        if (!currentLoadChildren) {\n            return;\n        }\n\n        const flat = stateReference.current.nodeMap.get(nodeId);\n\n        if (!flat || flat.childrenIds.length > 0) {\n            return;\n        }\n\n        loadingReference.current.add(nodeId);\n        stateReference.current.setLoading(nodeId, true);\n\n        try {\n            const children = await currentLoadChildren(flat.node);\n\n            stateReference.current.insertChildren(nodeId, children);\n            stateReference.current.expandNode(nodeId);\n        } catch (error: unknown) {\n            const normalizedError = error instanceof Error ? error : new Error(String(error));\n\n            stateReference.current.setChildrenError(nodeId);\n            onLoadErrorReference.current?.(nodeId, normalizedError);\n        } finally {\n            stateReference.current.setLoading(nodeId, false);\n            loadingReference.current.delete(nodeId);\n        }\n    }, []);\n\n    useInput(\n        (input, key) => {\n            if (key.downArrow) {\n                state.focusNext();\n\n                return;\n            }\n\n            if (key.upArrow) {\n                state.focusPrevious();\n\n                return;\n            }\n\n            if (key.rightArrow) {\n                if (state.focusedId && state.expandedIds.has(state.focusedId)) {\n                    // Already expanded: move to first child\n                    state.focusFirstChild();\n                } else if (state.focusedId) {\n                    // Not expanded: try to expand\n                    if (loadChildren) {\n                        const flat = state.nodeMap.get(state.focusedId);\n\n                        if (flat && flat.hasChildren && flat.childrenIds.length === 0) {\n                            // Async load needed\n                            triggerLoad(state.focusedId).catch(() => {\n                                // Swallow async load errors\n                            });\n\n                            return;\n                        }\n                    }\n\n                    state.expand();\n                }\n\n                return;\n            }\n\n            if (key.leftArrow) {\n                if (state.focusedId && state.expandedIds.has(state.focusedId)) {\n                    state.collapse();\n                } else {\n                    state.focusParent();\n                }\n\n                return;\n            }\n\n            if (key.return) {\n                if (selectionMode === \"none\") {\n                    state.toggleExpanded();\n                } else {\n                    state.select();\n                }\n\n                return;\n            }\n\n            if (input === \" \") {\n                if (selectionMode === \"multiple\") {\n                    state.select();\n                } else {\n                    state.toggleExpanded();\n                }\n\n                return;\n            }\n\n            // Home key: input is the raw escape sequence\n            if (input === \"\\u001B[H\" || input === \"\\u001B[1~\" || input === \"\\u001BOH\") {\n                state.focusFirst();\n\n                return;\n            }\n\n            // End key\n            if (input === \"\\u001B[F\" || input === \"\\u001B[4~\" || input === \"\\u001BOF\") {\n                state.focusLast();\n            }\n        },\n        { isActive: !isDisabled },\n    );\n}\n",
+      "path": "registry/ui/tree-view/use-tree-view.ts",
+      "target": "components/ui/tree-view/use-tree-view.ts",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/unordered-list.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "unordered-list",
+  "type": "registry:ui",
+  "title": "Unordered List",
+  "description": "Unordered List component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/**\n * Unordered list component for Ink.\n *\n * Inspired by ink-ui UnorderedList by Vadim Demedes.\n * @see https://github.com/vadimdemedes/ink-ui\n *\n * MIT License\n * Copyright (c) Vadym Demedes (github.com/vadimdemedes)\n */\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement, ReactNode } from \"react\";\n\nconst DEFAULT_MARKERS: ReadonlyArray<string> = [\"─\", \"◦\", \"▪\"];\n\nexport type UnorderedListEntry = {\n    /**\n     * Content of the list entry. Can be a string or nested list.\n     */\n    readonly children?: ReadonlyArray<UnorderedListEntry>;\n\n    /**\n     * Display text for this item.\n     */\n    readonly label: ReactNode;\n};\n\nexport type Props = {\n    /**\n     * Entries to render as a bullet list.\n     */\n    readonly items: ReadonlyArray<UnorderedListEntry>;\n\n    /**\n     * Custom bullet symbol(s). A string uses the same symbol at all depths.\n     * An array cycles through symbols by nesting depth.\n     */\n    readonly marker?: ReadonlyArray<string> | string;\n};\n\n/**\n * Resolve the markers array from the prop value.\n */\nconst resolveMarkers = (marker: ReadonlyArray<string> | string | undefined): ReadonlyArray<string> => {\n    if (typeof marker === \"string\") {\n        return [marker];\n    }\n\n    if (Array.isArray(marker)) {\n        return marker;\n    }\n\n    return DEFAULT_MARKERS;\n};\n\n/**\n * Render a list recursively at the given depth.\n */\nconst renderList = (items: ReadonlyArray<UnorderedListEntry>, markers: ReadonlyArray<string>, depth: number): ReactElement => {\n    const resolvedMarker = markers[depth % markers.length] ?? \"─\";\n\n    return (\n        <Box flexDirection=\"column\">\n            {items.map((item, index) => (\n                // eslint-disable-next-line react-x/no-array-index-key -- list entries have no unique key\n                <Box gap={1} key={index}>\n                    <Text dimColor>{resolvedMarker}</Text>\n                    <Box flexDirection=\"column\">\n                        <Text>{item.label}</Text>\n                        {item.children ? renderList(item.children, markers, depth + 1) : undefined}\n                    </Box>\n                </Box>\n            ))}\n        </Box>\n    );\n};\n\n/**\n * Renders a bullet list with nesting support.\n */\nexport default function UnorderedList({ items, marker }: Props): ReactElement {\n    const markers = resolveMarkers(marker);\n\n    return renderList(items, markers, 0);\n}\n\nexport { UnorderedList };\nexport type { Props as UnorderedListProps };\n",
+      "path": "registry/ui/unordered-list.tsx",
+      "target": "components/ui/unordered-list.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/use-linked-scroll.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-linked-scroll",
+  "type": "registry:ui",
+  "title": "Use Linked Scroll",
+  "description": "Use Linked Scroll component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [
+    "https://visulima.com/r/scroll.json"
+  ],
+  "files": [
+    {
+      "content": "import type { RefObject } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport type { ScrollViewRef } from \"@/components/ui/scroll/scroll-view\";\n\nexport type UseLinkedScrollReturn = {\n    /**\n     * Callback to pass to ScrollView's `onScroll` prop.\n     * Broadcasts the scroll position to all linked instances.\n     */\n    onScroll: (scrollOffset: number) => void;\n\n    /**\n     * Ref to attach to the ScrollView component.\n     * Used internally to call `scrollTo()` when other instances scroll.\n     */\n    ref: RefObject<ScrollViewRef | null>;\n};\n\nexport type LinkedScrollGroup = {\n    /**\n     * Hook that returns a ref and onScroll callback for linking a ScrollView\n     * to this group. Call once per ScrollView instance.\n     */\n    useLinkedScroll: () => UseLinkedScrollReturn;\n};\n\ntype Listener = {\n    ref: RefObject<ScrollViewRef | null>;\n    setOffset: (offset: number) => void;\n};\n\n/**\n * Creates a linked scroll group that synchronizes scroll position\n * across multiple ScrollView instances.\n * @example\n * ```tsx\n * const group = createLinkedScrollGroup();\n *\n * const PanelA = () => {\n *     const { ref, onScroll } = group.useLinkedScroll();\n *     return <ScrollView ref={ref} onScroll={onScroll}>...</ScrollView>;\n * };\n *\n * const PanelB = () => {\n *     const { ref, onScroll } = group.useLinkedScroll();\n *     return <ScrollView ref={ref} onScroll={onScroll}>...</ScrollView>;\n * };\n * ```\n */\nconst createLinkedScrollGroup = (): LinkedScrollGroup => {\n    const listeners = new Set<Listener>();\n    let broadcasting = false;\n\n    const useLinkedScroll = (): UseLinkedScrollReturn => {\n        const scrollRef = useRef<ScrollViewRef | null>(null);\n        const [, setTick] = useState(0);\n\n        const listener: Listener = {\n            ref: scrollRef,\n            setOffset: () => {\n                setTick((t) => t + 1);\n            },\n        };\n\n        const listenerRef = useRef(listener);\n\n        listenerRef.current = listener;\n\n        useEffect(() => {\n            const { current } = listenerRef;\n\n            listeners.add(current);\n\n            return () => {\n                listeners.delete(current);\n            };\n        }, []);\n\n        const onScroll = useCallback((scrollOffset: number) => {\n            if (broadcasting) {\n                return;\n            }\n\n            broadcasting = true;\n\n            try {\n                for (const l of listeners) {\n                    if (l.ref !== scrollRef) {\n                        l.ref.current?.scrollTo(scrollOffset);\n                    }\n                }\n            } finally {\n                broadcasting = false;\n            }\n        }, []);\n\n        return { onScroll, ref: scrollRef };\n    };\n\n    return { useLinkedScroll };\n};\n\nexport default createLinkedScrollGroup;\n\nexport { createLinkedScrollGroup };\n",
+      "path": "registry/ui/use-linked-scroll.ts",
+      "target": "components/ui/use-linked-scroll.ts",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/variant-config.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "variant-config",
+  "type": "registry:lib",
+  "title": "Variant Config",
+  "description": "Variant Config component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/**\n * Shared variant configuration for Alert and StatusMessage components.\n */\ntype VariantConfig = {\n    readonly color: string;\n    readonly icon: string;\n};\n\nexport type Variant = \"error\" | \"info\" | \"success\" | \"warning\";\n\nconst VARIANT_CONFIG: Record<Variant, VariantConfig> = {\n    error: { color: \"red\", icon: \"✖\" },\n    info: { color: \"blue\", icon: \"ℹ\" },\n    success: { color: \"green\", icon: \"✔\" },\n    warning: { color: \"yellow\", icon: \"⚠\" },\n};\n\nexport default VARIANT_CONFIG;\n",
+      "path": "registry/lib/variant-config.ts",
+      "target": "lib/variant-config.ts",
+      "type": "registry:lib"
+    }
+  ]
+}

package/dist/radio-group.d.ts

@@ -0,0 +1,63 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type RadioOption = {
+  readonly description?: string;
+  readonly key?: string;
+  readonly label: string;
+  readonly value: string;
+};
+type Props = {
+  /**
+   * Accent color for the focused and selected indicator.
+   * @default "blue"
+   */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Auto-focus when mounted.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * When true, moving focus with arrow keys immediately updates the selected
+   * value (and fires `onChange`). When false, focus moves independently and
+   * selection commits only on Space or Enter.
+   * @default true
+   */
+  readonly commitOnNavigate?: boolean;
+  /**
+   * Initial selected value when uncontrolled.
+   */
+  readonly defaultValue?: string;
+  /**
+   * Disable input and dim labels.
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Called when selection changes.
+   */
+  readonly onChange?: (value: string) => void;
+  /**
+   * Called when the user submits by pressing Enter.
+   */
+  readonly onSubmit?: (value: string) => void;
+  /**
+   * Available options.
+   */
+  readonly options: ReadonlyArray<RadioOption>;
+  /**
+   * Orientation of options.
+   * @default "vertical"
+   */
+  readonly orientation?: "horizontal" | "vertical";
+  /**
+   * Controlled selected value.
+   */
+  readonly value?: string;
+};
+/**
+ * Single-choice radio group with keyboard navigation. By default, navigation
+ * commits selection; set `commitOnNavigate={false}` to require an explicit
+ * Space/Enter commit.
+ */
+declare function RadioGroup({ accentColor, autoFocus, commitOnNavigate, defaultValue, isDisabled, onChange, onSubmit, options, orientation, value }: Props): ReactElement;
+export { Props, RadioGroup, type Props as RadioGroupProps, RadioOption, RadioGroup as default };

package/dist/radio-group.js

@@ -0,0 +1 @@
+import{jsx as h,jsxs as R}from"react/jsx-runtime";import z from"@visulima/tui/components/box";import w from"@visulima/tui/components/text";import G from"@visulima/tui/hooks/use-focus";import S from"@visulima/tui/hooks/use-input";import{useState as D,useRef as y,useCallback as F}from"react";const B=(x,s)=>{if(s===void 0)return 0;const l=x.findIndex(b=>b.value===s);return Math.max(l,0)};function H({accentColor:x="blue",autoFocus:s=!1,commitOnNavigate:l=!0,defaultValue:b,isDisabled:d=!1,onChange:A,onSubmit:j,options:t,orientation:e="vertical",value:m}){const{isFocused:c}=G({autoFocus:s,isActive:!d}),[C,M]=D(b??t[0]?.value),v=m??C,[g,k]=D(()=>B(t,v)),u=y(g);u.current=g;const a=F(r=>{const o=t[r];if(!o)return;const n=m??C;o.value!==n&&(m===void 0&&M(o.value),A?.(o.value))},[t,m,C,A]);return S(F((r,o)=>{if(!c)return;const n=t.length;if(n===0)return;const f=o.downArrow&&e==="vertical"||o.rightArrow&&e==="horizontal"||r==="j",p=o.upArrow&&e==="vertical"||o.leftArrow&&e==="horizontal"||r==="k";if(f){const i=Math.min(n-1,u.current+1);k(i),l&&a(i);return}if(p){const i=Math.max(0,u.current-1);k(i),l&&a(i);return}if(r===" "){a(u.current);return}if(o.return){l||a(u.current);const i=t[u.current]?.value??v;i!==void 0&&j?.(i)}},[c,t,e,a,l,v,j]),{isActive:!d&&c}),h(z,{flexDirection:e==="vertical"?"column":"row",gap:e==="vertical"?0:2,children:t.map((r,o)=>{const n=r.value===v,f=c&&o===g,p=(n||f)&&c?x:void 0;return R(z,{gap:1,children:[h(w,{color:p,dimColor:d,children:n?"●":"○"}),h(w,{bold:f,color:p,dimColor:d,children:r.label}),r.description===void 0?void 0:h(w,{dimColor:!0,children:r.description})]},r.key??r.value)})})}export{H as RadioGroup,H as default};

package/dist/scatter-plot.d.ts

@@ -0,0 +1,24 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+import { LineSeries } from "./line-chart.js";
+import '@visulima/tui/canvas';
+type Props = {
+  readonly axisColor?: LiteralUnion<AnsiColors, string>;
+  readonly height?: number;
+  readonly maxX?: number;
+  readonly maxY?: number;
+  readonly minX?: number;
+  readonly minY?: number;
+  readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;
+  readonly series: ReadonlyArray<LineSeries>;
+  readonly showLegend?: boolean;
+  readonly width?: number;
+};
+/**
+ * Scatter plot rendered on a braille pixel grid. Each sample lights one
+ * sub-cell pixel; overlapping points merge into denser braille glyphs.
+ * @returns A `ReactElement` containing the plot and an optional legend.
+ */
+declare function ScatterPlot({ axisColor, height, maxX, maxY, minX, minY, palette, series, showLegend, width }: Props): ReactElement;
+export { Props, ScatterPlot, type Props as ScatterPlotProps, ScatterPlot as default };

package/dist/scatter-plot.js

@@ -0,0 +1 @@
+import{jsxs as N,jsx as t}from"react/jsx-runtime";import c from"@visulima/tui/components/box";import u from"@visulima/tui/components/canvas";import T from"@visulima/tui/components/text";import{useMemo as E}from"react";import{t as f,p as g,c as y,D as b,d as S}from"./packem_shared/line-chart-BbhMhcZg.js";const Y=b;function P({axisColor:s="gray",height:I=10,maxX:a,maxY:n,minX:m,minY:x,palette:o=Y,series:l,showLegend:M=!0,width:p=40}){const d=E(()=>{const e=l.map((i,h)=>({color:g(i,h,o),points:f(i.data),series:i})),r=y(e);return{axisColor:s,palette:o,seriesList:e,xMax:a??(r.xMax===Number.NEGATIVE_INFINITY?1:r.xMax),xMin:m??(r.xMin===Number.POSITIVE_INFINITY?0:r.xMin),yMax:n??(r.yMax===Number.NEGATIVE_INFINITY?1:r.yMax),yMin:x??(r.yMin===Number.POSITIVE_INFINITY?0:r.yMin)}},[l,s,o,m,a,x,n]);return N(c,{flexDirection:"column",children:[t(u,{draw:e=>{S(e,"scatter",d)},height:I,version:[l,p,I,m,a,x,n,s,o],width:p}),M?t(c,{gap:2,marginTop:1,children:d.seriesList.map(({color:e,series:r},i)=>N(c,{gap:1,children:[t(T,{color:e,children:"●"}),t(T,{children:r.label??`Series ${i+1}`})]},`${i}:${r.label??""}`))}):void 0]})}export{P as ScatterPlot,P as default};

package/dist/scroll-bar-box.d.ts

@@ -0,0 +1,3 @@
+export { S as ScrollBarBox, type a as ScrollBarBoxProps } from "./packem_shared/scroll-bar-box.d-CpTYEcTZ.js";
+import '@visulima/tui/components/box';
+import 'react';

package/dist/scroll-bar-box.js

@@ -0,0 +1 @@
+import{ScrollBarBox as l}from"./packem_shared/ScrollBarBox-DZEC8YnV.js";export{l as ScrollBarBox};

package/dist/scroll-bar.d.ts

@@ -0,0 +1,3 @@
+export { S as ScrollBar, type a as ScrollBarPlacement, type b as ScrollBarProps, type c as ScrollBarStyle } from "./packem_shared/scroll-bar.d-B4sD1hBR.js";
+import '@visulima/tui/components/box';
+import 'react';

package/dist/scroll-bar.js

@@ -0,0 +1 @@
+import{ScrollBar as l}from"./packem_shared/ScrollBar-C9i3z3Ft.js";export{l as ScrollBar};

package/dist/scroll-list.d.ts

@@ -0,0 +1,4 @@
+export { type S as ScrollAlignment, a as ScrollList, type b as ScrollListProps, type c as ScrollListRef } from "./packem_shared/scroll-list.d-CPCF0RwC.js";
+import 'react';
+import "./packem_shared/scroll-view.d-GZcgAHl4.js";
+import '@visulima/tui/components/box';

package/dist/scroll-list.js

@@ -0,0 +1 @@
+import{ScrollList as l}from"./packem_shared/ScrollList-Djtb2vVy.js";export{l as ScrollList};