@visulima/tui-kit 0.0.0 → 1.0.0

package/dist/r/spinner.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "spinner",
+  "type": "registry:ui",
+  "title": "Spinner",
+  "description": "Spinner component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/spinner",
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\n\n/**\n * Spinner component for Ink.\n *\n * Based on ink-spinner by Vadim Demedes.\n * @see https://github.com/vadimdemedes/ink-spinner\n *\n * MIT License\n * Copyright (c) Vadym Demedes (github.com/vadimdemedes)\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy of\n * this software and associated documentation files (the \"Software\"), to deal in the\n * Software without restriction, including without limitation the rights to use, copy,\n * modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,\n * and to permit persons to whom the Software is furnished to do so, subject to the\n * following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,\n * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A\n * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\n * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\n * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\nimport type { SpinnerName } from \"@visulima/spinner\";\nimport { getSpinner } from \"@visulima/spinner\";\nimport Text from \"@visulima/tui/components/text\";\nimport useAnimation from \"@visulima/tui/hooks/use-animation\";\nimport type { ReactElement } from \"react\";\n\nexport type Props = {\n    /**\n     * Type of a spinner.\n     * Accepts any preset from `@visulima/spinner` (cli-spinners + custom frame sets).\n     * @default \"dots\"\n     */\n    readonly type?: SpinnerName;\n};\n\n/**\n * Spinner component that renders an animated loading indicator.\n */\nexport default function Spinner({ type = \"dots\" }: Props): ReactElement {\n    // `getSpinner` returns `undefined` for an unknown name; fall back to the\n    // \"dots\" preset and, defensively, to a single blank frame.\n    const spinner = getSpinner(type) ?? getSpinner(\"dots\");\n    const frames = spinner?.frames ?? [\" \"];\n    const { frame } = useAnimation({ interval: spinner?.interval ?? 80 });\n\n    return <Text>{frames[frame % frames.length]}</Text>;\n}\n\nexport { Spinner };\nexport type { Props as SpinnerProps };\n",
+      "path": "registry/ui/spinner.tsx",
+      "target": "components/ui/spinner.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/status-line.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "status-line",
+  "type": "registry:ui",
+  "title": "Status Line",
+  "description": "Status Line 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 Props = {\n    /**\n     * Background color spanning the whole row.\n     */\n    readonly backgroundColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Content rendered in the center. Optional.\n     */\n    readonly center?: ReactNode;\n\n    /**\n     * Default foreground for text rendered inside the row.\n     */\n    readonly color?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Content rendered flush-left.\n     */\n    readonly left?: ReactNode;\n\n    /**\n     * Content rendered flush-right.\n     */\n    readonly right?: ReactNode;\n};\n\n// eslint-disable-next-line sonarjs/function-return-type -- legitimate union return based on content type\nconst renderSlot = (content: ReactNode, color: LiteralUnion<AnsiColors, string> | undefined): ReactNode => {\n    if (content === undefined) {\n        return undefined;\n    }\n\n    if (typeof content === \"string\" || typeof content === \"number\") {\n        return <Text color={color}>{content}</Text>;\n    }\n\n    return content;\n};\n\n/**\n * Full-width status bar with left / center / right slots. Typically pinned to\n * the bottom of the UI.\n */\nexport default function StatusLine({ backgroundColor, center, color, left, right }: Props): ReactElement {\n    return (\n        <Box backgroundColor={backgroundColor} paddingX={1} width=\"100%\">\n            <Box flexGrow={1} flexShrink={1} minWidth={0}>\n                {renderSlot(left, color)}\n            </Box>\n            {center === undefined\n                ? undefined\n                : (\n                <Box flexGrow={0} flexShrink={0} justifyContent=\"center\">\n                    {renderSlot(center, color)}\n                </Box>\n                )}\n            <Box flexGrow={1} flexShrink={1} justifyContent=\"flex-end\" minWidth={0}>\n                {renderSlot(right, color)}\n            </Box>\n        </Box>\n    );\n}\n\nexport { StatusLine };\nexport type { Props as StatusLineProps };\n",
+      "path": "registry/ui/status-line.tsx",
+      "target": "components/ui/status-line.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/status-message.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "status-message",
+  "type": "registry:ui",
+  "title": "Status Message",
+  "description": "Status Message 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 */\n\n/**\n * Status message component for Ink.\n *\n * Inspired by ink-ui StatusMessage 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\nimport type { Variant } from \"@/lib/variant-config\";\nimport VARIANT_CONFIG from \"@/lib/variant-config\";\n\nexport type StatusMessageVariant = Variant;\n\nexport type Props = {\n    /**\n     * Message content.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Determines the icon and color of the status message.\n     */\n    readonly variant: StatusMessageVariant;\n};\n\n/**\n * Renders a status notification with a colored icon and message text.\n */\nexport default function StatusMessage({ children, variant }: Props): ReactElement {\n    const { color, icon } = VARIANT_CONFIG[variant];\n\n    return (\n        <Box gap={1}>\n            <Text color={color}>{icon}</Text>\n            <Text>{children}</Text>\n        </Box>\n    );\n}\n\nexport { StatusMessage };\nexport type { Props as StatusMessageProps };\n",
+      "path": "registry/ui/status-message.tsx",
+      "target": "components/ui/status-message.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/stepper.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "stepper",
+  "type": "registry:ui",
+  "title": "Stepper",
+  "description": "Stepper 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 { Fragment } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type StepStatus = \"active\" | \"completed\" | \"error\" | \"pending\";\n\nexport type StepperStep = {\n    readonly description?: string;\n    readonly key?: string;\n    readonly label: ReactNode;\n    readonly status?: StepStatus;\n};\n\nexport type Props = {\n    /**\n     * Color used for active and completed steps.\n     * @default \"blue\"\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Index of the current step (used when steps do not provide a status).\n     * @default 0\n     */\n    readonly activeIndex?: number;\n\n    /**\n     * Color used for errors.\n     * @default \"red\"\n     */\n    readonly errorColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Orientation of the stepper.\n     * @default \"horizontal\"\n     */\n    readonly orientation?: \"horizontal\" | \"vertical\";\n\n    /**\n     * List of steps.\n     */\n    readonly steps: ReadonlyArray<StepperStep>;\n};\n\nconst STATUS_ICON: Record<StepStatus, string> = {\n    active: \"●\",\n    completed: \"✔\",\n    error: \"✖\",\n    pending: \"○\",\n};\n\nconst resolveStatus = (step: StepperStep, index: number, activeIndex: number): StepStatus => {\n    if (step.status !== undefined) {\n        return step.status;\n    }\n\n    if (index < activeIndex) {\n        return \"completed\";\n    }\n\n    if (index === activeIndex) {\n        return \"active\";\n    }\n\n    return \"pending\";\n};\n\n/**\n * Step indicator for multi-stage flows.\n * @returns A `ReactElement` rendering the steps horizontally or vertically.\n */\nexport default function Stepper({ accentColor = \"blue\", activeIndex = 0, errorColor = \"red\", orientation = \"horizontal\", steps }: Props): ReactElement {\n    if (orientation === \"vertical\") {\n        return (\n            <Box flexDirection=\"column\">\n                {steps.map((step, index) => {\n                    const status = resolveStatus(step, index, activeIndex);\n                    const isLast = index === steps.length - 1;\n                    // eslint-disable-next-line sonarjs/no-nested-conditional -- minimal three-way status mapping\n                    const color = status === \"error\" ? errorColor : status === \"pending\" ? undefined : accentColor;\n\n                    return (\n                        // eslint-disable-next-line react-x/no-array-index-key -- steps expose an optional stable `key`; index is the documented fallback for keyless entries\n                        <Box flexDirection=\"column\" key={step.key ?? index}>\n                            <Box>\n                                <Text color={color} dimColor={status === \"pending\"}>\n                                    {STATUS_ICON[status]}\n{\" \"}\n                                </Text>\n                                <Text bold={status === \"active\"} color={color} dimColor={status === \"pending\"}>\n                                    {step.label}\n                                </Text>\n                            </Box>\n                            {step.description === undefined\n                                ? undefined\n                                : (\n                                <Box marginLeft={2}>\n                                    <Text dimColor>{step.description}</Text>\n                                </Box>\n                                )}\n                            {isLast\n                                ? undefined\n                                : (\n                                <Box marginLeft={0}>\n                                    <Text dimColor>│</Text>\n                                </Box>\n                                )}\n                        </Box>\n                    );\n                })}\n            </Box>\n        );\n    }\n\n    return (\n        <Box>\n            {steps.map((step, index) => {\n                const status = resolveStatus(step, index, activeIndex);\n                // eslint-disable-next-line sonarjs/no-nested-conditional -- minimal three-way status mapping\n                const color = status === \"error\" ? errorColor : status === \"pending\" ? undefined : accentColor;\n                const isLast = index === steps.length - 1;\n\n                return (\n                    // eslint-disable-next-line react-x/no-array-index-key -- steps expose an optional stable `key`; index is the documented fallback for keyless entries\n                    <Fragment key={step.key ?? index}>\n                        <Box>\n                            <Text color={color} dimColor={status === \"pending\"}>\n                                {STATUS_ICON[status]}\n{\" \"}\n                            </Text>\n                            <Text bold={status === \"active\"} color={color} dimColor={status === \"pending\"}>\n                                {step.label}\n                            </Text>\n                        </Box>\n                        {isLast ? undefined : <Text dimColor> ── </Text>}\n                    </Fragment>\n                );\n            })}\n        </Box>\n    );\n}\n\nexport { Stepper };\nexport type { Props as StepperProps };\n",
+      "path": "registry/ui/stepper.tsx",
+      "target": "components/ui/stepper.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/stopwatch.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "stopwatch",
+  "type": "registry:ui",
+  "title": "Stopwatch",
+  "description": "Stopwatch component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "import Text from \"@visulima/tui/components/text\";\nimport type { UseStopwatchResult } from \"@visulima/tui/hooks/use-stopwatch\";\nimport useStopwatch from \"@visulima/tui/hooks/use-stopwatch\";\nimport { formatDuration } from \"@visulima/tui/utils\";\nimport type { ReactElement, Ref } from \"react\";\nimport { useImperativeHandle } from \"react\";\n\nexport type StopwatchRef = Omit<UseStopwatchResult, \"elapsed\" | \"isRunning\" | \"laps\">;\n\nexport type Props = {\n    /**\n     * Whether to start counting immediately.\n     * @default false\n     */\n    readonly autoStart?: boolean;\n\n    /**\n     * Make the rendered text bold.\n     */\n    readonly bold?: boolean;\n\n    /**\n     * Text color for the rendered time.\n     */\n    readonly color?: string;\n\n    /**\n     * Custom formatter for the elapsed time.\n     * Receives elapsed milliseconds, returns a display string.\n     * @default formatDuration (MM:SS or HH:MM:SS)\n     */\n    readonly format?: (elapsed: number) => string;\n\n    /**\n     * Tick interval in milliseconds.\n     * @default 1000\n     */\n    readonly interval?: number;\n\n    readonly ref?: Ref<StopwatchRef>;\n};\n\n/**\n * A count-up stopwatch component.\n *\n * Exposes `start`, `stop`, `toggle`, `reset`, and `lap` methods via ref.\n *\n * ```tsx\n * const ref = useRef&lt;StopwatchRef>(null);\n * &lt;Stopwatch ref={ref} autoStart />\n * ```\n */\nconst Stopwatch = ({ autoStart, bold, color, format = formatDuration, interval, ref }: Props): ReactElement => {\n    const sw = useStopwatch({ autoStart, interval });\n\n    useImperativeHandle(ref, () => {\n        return {\n            lap: sw.lap,\n            reset: sw.reset,\n            start: sw.start,\n            stop: sw.stop,\n            toggle: sw.toggle,\n        };\n    }, [sw.lap, sw.reset, sw.start, sw.stop, sw.toggle]);\n\n    return (\n        <Text bold={bold} color={color}>\n            {format(sw.elapsed)}\n        </Text>\n    );\n};\n\nexport default Stopwatch;\n\nexport { Stopwatch };\nexport type { Props as StopwatchProps };\n",
+      "path": "registry/ui/stopwatch.tsx",
+      "target": "components/ui/stopwatch.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/streaming-text.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "streaming-text",
+  "type": "registry:ui",
+  "title": "Streaming Text",
+  "description": "Streaming Text 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 Text from \"@visulima/tui/components/text\";\nimport type { ReactElement } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type Props = {\n    /**\n     * Color applied to the streamed output.\n     */\n    readonly color?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Glyph rendered at the streaming caret while characters are still being revealed.\n     * @default \"▊\" (left three quarters block)\n     */\n    readonly cursor?: string;\n\n    /**\n     * Milliseconds between characters.\n     * @default 20\n     */\n    readonly interval?: number;\n\n    /**\n     * Called exactly once per `text` value, after the full text has been revealed.\n     */\n    readonly onComplete?: () => void;\n\n    /**\n     * Whether to display the cursor after streaming completes.\n     * @default false\n     */\n    readonly showCursorWhenDone?: boolean;\n\n    /**\n     * Full text to stream into the output.\n     */\n    readonly text: string;\n};\n\n/**\n * Typewriter animation that reveals text one character at a time.\n * Automatically resets and replays when `text` changes. `onComplete`\n * fires exactly once per `text` value once it is fully revealed.\n */\nexport default function StreamingText({ color, cursor = \"▊\", interval = 20, onComplete, showCursorWhenDone = false, text }: Props): ReactElement {\n    const [visibleLength, setVisibleLength] = useState(0);\n    const onCompleteRef = useRef(onComplete);\n    const hasCompletedRef = useRef(false);\n\n    onCompleteRef.current = onComplete;\n\n    useEffect(() => {\n        // eslint-disable-next-line react-x/set-state-in-effect, react-you-might-not-need-an-effect/no-adjust-state-on-prop-change -- reset stream progress when source text changes; resetting during render would create an infinite loop\n        setVisibleLength(0);\n        hasCompletedRef.current = false;\n    }, [text]);\n\n    useEffect(() => {\n        if (visibleLength >= text.length) {\n            if (!hasCompletedRef.current) {\n                hasCompletedRef.current = true;\n                onCompleteRef.current?.();\n            }\n\n            return undefined;\n        }\n\n        const timer = setTimeout(() => {\n            setVisibleLength((previous) => Math.min(text.length, previous + 1));\n        }, interval);\n\n        return () => {\n            clearTimeout(timer);\n        };\n    }, [visibleLength, text, interval]);\n\n    const done = visibleLength >= text.length;\n    const showCursor = !done || showCursorWhenDone;\n    const visible = text.slice(0, visibleLength);\n\n    return (\n        <Text color={color}>\n            {visible}\n            {showCursor ? cursor : \"\"}\n        </Text>\n    );\n}\n\nexport { StreamingText };\nexport type { Props as StreamingTextProps };\n",
+      "path": "registry/ui/streaming-text.tsx",
+      "target": "components/ui/streaming-text.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/switch.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "switch",
+  "type": "registry:ui",
+  "title": "Switch",
+  "description": "Switch 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, ReactNode } from \"react\";\nimport { useCallback, useState } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type Props = {\n    /**\n     * Accent color for the on state.\n     * @default \"green\"\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Auto-focus when mounted if nothing else is focused.\n     */\n    readonly autoFocus?: boolean;\n\n    /**\n     * Optional label rendered after the switch.\n     */\n    readonly children?: ReactNode;\n\n    /**\n     * Initial value when uncontrolled.\n     */\n    readonly defaultValue?: boolean;\n\n    /**\n     * Disable input and dim the switch.\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * Labels displayed inside the switch track.\n     * @default [\"off\", \"on\"]\n     */\n    readonly labels?: readonly [string, string];\n\n    /**\n     * Fired when the switch is toggled.\n     */\n    readonly onChange?: (value: boolean) => void;\n\n    /**\n     * Controlled value. Pair with `onChange` to update the parent.\n     */\n    readonly value?: boolean;\n};\n\nconst DEFAULT_LABELS: readonly [string, string] = [\"off\", \"on\"];\n\n/**\n * Focusable on/off switch. Toggles with Space or Enter.\n * @returns A `ReactElement` rendering two labeled segments plus an optional\n * trailing label.\n */\nexport default function Switch({\n    accentColor = \"green\",\n    autoFocus = false,\n    children,\n    defaultValue = false,\n    isDisabled = false,\n    labels = DEFAULT_LABELS,\n    onChange,\n    value,\n}: Props): ReactElement {\n    const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });\n    const [internal, setInternal] = useState(defaultValue);\n    const current = value ?? internal;\n\n    useInput(\n        useCallback(\n            (input, key) => {\n                if (!isFocused) {\n                    return;\n                }\n\n                if (key.return || input === \" \") {\n                    const next = !current;\n\n                    if (value === undefined) {\n                        setInternal(next);\n                    }\n\n                    onChange?.(next);\n                }\n            },\n            [isFocused, current, value, onChange],\n        ),\n        { isActive: !isDisabled && isFocused },\n    );\n\n    const off = labels[0];\n    const on = labels[1];\n    const focusColor = isFocused ? accentColor : undefined;\n\n    return (\n        <Box gap={1}>\n            <Box gap={0}>\n                <Text backgroundColor={current ? undefined : \"gray\"} color={current ? undefined : \"black\"} dimColor={isDisabled}>\n                    {\" \"}\n                    {off}\n{\" \"}\n                </Text>\n                <Text backgroundColor={current ? accentColor : undefined} color={current ? \"black\" : undefined} dimColor={isDisabled}>\n                    {\" \"}\n                    {on}\n{\" \"}\n                </Text>\n            </Box>\n            {children === undefined\n                ? undefined\n                : (\n                <Text color={focusColor} dimColor={isDisabled}>\n                    {children}\n                </Text>\n                )}\n        </Box>\n    );\n}\n\nexport { Switch };\nexport type { Props as SwitchProps };\n",
+      "path": "registry/ui/switch.tsx",
+      "target": "components/ui/switch.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/tab.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tab",
+  "type": "registry:ui",
+  "title": "Tab",
+  "description": "Tab component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\n\n/**\n * Tab component for Ink.\n *\n * Inspired by ink-tab by Julien Deniau.\n * @see https://github.com/jdeniau/ink-tab\n *\n * MIT License\n * Copyright (c) Julien Deniau (github.com/jdeniau)\n */\nimport type { ReactElement, ReactNode } from \"react\";\n\nexport type Props = {\n    /**\n     * Tab content to render when the tab is active.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Unique name identifying this tab.\n     */\n    // eslint-disable-next-line react/no-unused-prop-types, react-x/no-unused-props\n    readonly name: string;\n};\n\n/**\n * A single tab within a Tabs container.\n * The `name` prop identifies the tab; `children` is rendered when active.\n */\nexport default function Tab({ children }: Props): ReactElement {\n    return <>{children}</>;\n}\n\nexport { Tab };\nexport type { Props as TabProps };\n",
+      "path": "registry/ui/tab.tsx",
+      "target": "components/ui/tab.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/table.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "table",
+  "type": "registry:ui",
+  "title": "Table",
+  "description": "Table component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tabular",
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "import type { BorderStyle, HorizontalAlignment } from \"@visulima/tabular\";\nimport { Table as TabularTable } from \"@visulima/tabular\";\nimport {\n    ASCII_BORDER,\n    BLOCK_BORDER,\n    DEFAULT_BORDER,\n    DOTS_BORDER,\n    DOUBLE_BORDER,\n    MARKDOWN_BORDER,\n    MINIMAL_BORDER,\n    NO_BORDER,\n    ROUNDED_BORDER,\n    THICK_BORDER,\n} from \"@visulima/tabular/style\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement } from \"react\";\nimport { useMemo } from \"react\";\n\n/**\n * Scalar value that can be displayed in a table cell.\n */\ntype Scalar = bigint | boolean | number | string | null | undefined;\n\n/**\n * Dictionary with scalar values, representing a single row of data.\n */\ntype ScalarDict = Record<string, Scalar>;\n\n/**\n * Configuration for a single table column.\n */\ntype ColumnConfig<T extends ScalarDict> = {\n    /**\n     * Horizontal alignment of cell content.\n     */\n    readonly align?: HorizontalAlignment;\n\n    /**\n     * Custom header label. Defaults to the key name.\n     */\n    readonly header?: string;\n\n    /**\n     * Key from the data object to display in this column.\n     */\n    readonly key: keyof T & string;\n\n    /**\n     * Fixed width for this column in characters.\n     */\n    readonly width?: number;\n};\n\ntype Props<T extends ScalarDict> = {\n    /**\n     * Border style preset name or a custom `BorderStyle` object from `@visulima/tabular`.\n     * @default \"default\"\n     */\n    readonly borderStyle?: \"ascii\" | \"block\" | \"default\" | \"dots\" | \"double\" | \"markdown\" | \"minimal\" | \"none\" | \"rounded\" | \"thick\" | BorderStyle;\n\n    /**\n     * Columns to display and their order.\n     * Accepts simple key strings or `ColumnConfig` objects for advanced control.\n     * If omitted, all keys from the first data item are used.\n     */\n    readonly columns?: ((keyof T & string) | ColumnConfig<T>)[];\n\n    /**\n     * Array of objects to display as rows.\n     */\n    readonly data: T[];\n\n    /**\n     * Format a cell value before rendering. Return a string to display in the cell.\n     */\n    readonly formatCell?: (value: Scalar, column: keyof T & string, rowIndex: number) => string;\n\n    /**\n     * Format a header label before rendering. Return a string to display as the column header.\n     */\n    readonly formatHeader?: (column: keyof T & string) => string;\n\n    /**\n     * Maximum width of the table in characters. Columns will be truncated or wrapped to fit.\n     */\n    readonly maxWidth?: number;\n\n    /**\n     * Cell padding (left and right) in characters.\n     * @default 1\n     */\n    readonly padding?: number;\n\n    /**\n     * Whether to show the header row.\n     * @default true\n     */\n    readonly showHeader?: boolean;\n\n    /** Placeholder shown in place of `null` or `undefined` cell values. Defaults to an empty string. */\n    readonly skeleton?: string;\n\n    /**\n     * Enable word wrap instead of truncation when cells exceed their width.\n     * @default false\n     */\n    readonly wordWrap?: boolean;\n};\n\nconst BORDER_PRESETS: Record<string, BorderStyle> = {\n    ascii: ASCII_BORDER,\n    block: BLOCK_BORDER,\n    default: DEFAULT_BORDER,\n    dots: DOTS_BORDER,\n    double: DOUBLE_BORDER,\n    markdown: MARKDOWN_BORDER,\n    minimal: MINIMAL_BORDER,\n    none: NO_BORDER,\n    rounded: ROUNDED_BORDER,\n    thick: THICK_BORDER,\n};\n\n/**\n * Render a data table in the terminal.\n *\n * Uses `@visulima/tabular` as the rendering engine, supporting multiple border styles,\n * column configuration, cell formatting, and word wrap.\n * @example\n * ```tsx\n * import { Table } from \"@visulima/tui/ink\";\n *\n * const data = [\n *     { name: \"Alice\", age: 30 },\n *     { name: \"Bob\", age: 25 },\n * ];\n *\n * <Table data={data} />\n * <Table data={data} borderStyle=\"rounded\" padding={2} />\n * ```\n */\nconst toColumnConfig = <T extends ScalarDict>(col: (keyof T & string) | ColumnConfig<T>): ColumnConfig<T> => {\n    if (typeof col === \"string\") {\n        return { key: col };\n    }\n\n    return col;\n};\n\nconst TableComponent = <T extends ScalarDict>({\n    borderStyle = \"default\",\n    columns: columnsProp,\n    data,\n    formatCell,\n    formatHeader,\n    maxWidth,\n    padding = 1,\n    showHeader = true,\n    skeleton = \"\",\n    wordWrap = false,\n}: Props<T>): ReactElement => {\n    const tableString = useMemo((): string => {\n        if (data.length === 0) {\n            return \"\";\n        }\n\n        // Resolve column configs\n        let resolvedColumns: ColumnConfig<T>[];\n\n        if (columnsProp) {\n            resolvedColumns = columnsProp.map((col) => toColumnConfig(col));\n        } else {\n            resolvedColumns = (Object.keys(data[0] as object) as (keyof T & string)[]).map((key) => {\n                return { key };\n            });\n        }\n\n        if (resolvedColumns.length === 0) {\n            return \"\";\n        }\n\n        // Resolve border style\n        const border = typeof borderStyle === \"string\" ? BORDER_PRESETS[borderStyle] ?? DEFAULT_BORDER : borderStyle;\n\n        // Build column widths array (undefined entries let tabular auto-calculate)\n        const columnWidths: (number | undefined)[] = resolvedColumns.map((col) => col.width);\n        const hasFixedWidths = columnWidths.some((w) => w !== undefined);\n\n        const table = new TabularTable({\n            columnWidths: hasFixedWidths ? columnWidths : undefined,\n            maxWidth,\n            showHeader,\n            style: {\n                border,\n                paddingLeft: padding,\n                paddingRight: padding,\n            },\n            wordWrap,\n        });\n\n        // Set headers\n        if (showHeader) {\n            const headers = resolvedColumns.map((col) => {\n                const label = col.header ?? col.key;\n\n                return formatHeader ? formatHeader(col.key) : label;\n            });\n\n            table.setHeaders(headers);\n        }\n\n        // Add data rows\n        for (const [rowIndex, row] of data.entries()) {\n            const cells = resolvedColumns.map((col) => {\n                const value = row[col.key];\n\n                if (formatCell) {\n                    return formatCell(value, col.key, rowIndex);\n                }\n\n                // eslint-disable-next-line sonarjs/different-types-comparison, @typescript-eslint/no-unnecessary-condition\n                return value === undefined || value === null ? skeleton : String(value);\n            });\n\n            table.addRow(cells);\n        }\n\n        return table.toString();\n    }, [borderStyle, columnsProp, data, formatCell, formatHeader, maxWidth, padding, showHeader, skeleton, wordWrap]);\n\n    return <Text>{tableString}</Text>;\n};\n\nconst Table = TableComponent as <T extends ScalarDict>(props: Props<T>) => ReactElement;\n\nexport default Table;\nexport { Table };\nexport type { ColumnConfig, Props, Scalar, ScalarDict };\nexport type { ColumnConfig as TableColumnConfig, Props as TableProps, Scalar as TableScalar, ScalarDict as TableScalarDict };\n",
+      "path": "registry/ui/table.tsx",
+      "target": "components/ui/table.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/tabs.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs",
+  "type": "registry:ui",
+  "title": "Tabs",
+  "description": "Tabs component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [
+    "https://visulima.com/r/tab.json"
+  ],
+  "files": [
+    {
+      "content": "/* eslint-disable react-you-might-not-need-an-effect/no-event-handler, react/function-component-definition */\n\n/**\n * Tabs component for Ink.\n *\n * Inspired by ink-tab by Julien Deniau.\n * @see https://github.com/jdeniau/ink-tab\n *\n * MIT License\n * Copyright (c) Julien Deniau (github.com/jdeniau)\n */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { Key } from \"@visulima/tui/hooks/use-input\";\nimport useInput from \"@visulima/tui/hooks/use-input\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Children, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nimport type { Props as TabProps } from \"@/components/ui/tab\";\n\nconst NUMBER_KEY_PATTERN = /^\\d$/u;\n\n/**\n * Keyboard navigation configuration for Tabs.\n */\nexport type KeyMap = {\n    /**\n     * Key names that move to the next tab.\n     * Defaults to `[\"rightArrow\"]` for row layouts and `[\"downArrow\"]` for column layouts.\n     */\n    readonly next?: ReadonlyArray<string>;\n\n    /**\n     * Key names that move to the previous tab.\n     * Defaults to `[\"leftArrow\"]` for row layouts and `[\"upArrow\"]` for column layouts.\n     */\n    readonly previous?: ReadonlyArray<string>;\n\n    /**\n     * Whether Meta/Cmd + 1–9 jumps to a specific tab.\n     * @default true\n     */\n    readonly useNumbers?: boolean;\n\n    /**\n     * Whether the Tab key cycles through tabs (only when `isFocused` is not managed by Ink).\n     * @default true\n     */\n    readonly useTab?: boolean;\n};\n\n/**\n * Color customization for active tab styling.\n */\nexport type TabColors = {\n    readonly activeTab?: {\n        readonly backgroundColor?: LiteralUnion<AnsiColors, string>;\n        readonly color?: LiteralUnion<AnsiColors, string>;\n    };\n};\n\nexport type Props = {\n    /**\n     * Tab elements to render.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Active tab colors. When `isFocused` is `false`, the active tab uses gray.\n     */\n    readonly colors?: TabColors;\n\n    /**\n     * Name of the tab to select initially (uncontrolled mode).\n     * Ignored when `value` is provided.\n     */\n    readonly defaultValue?: string;\n\n    /**\n     * Layout direction for the tab bar.\n     * @default \"row\"\n     */\n    readonly flexDirection?: \"column\" | \"column-reverse\" | \"row\" | \"row-reverse\";\n\n    /**\n     * Whether the tabs are focused and respond to keyboard input.\n     * - `true`: focused, uses active colors.\n     * - `false`: unfocused, uses gray active color, ignores input.\n     * - `undefined`/`null`: always active (focus not managed by Ink).\n     * @default undefined\n     */\n    readonly isFocused?: boolean | null;\n\n    /**\n     * Custom keyboard mappings.\n     */\n    readonly keyMap?: KeyMap;\n\n    /**\n     * Called when the active tab changes.\n     */\n    readonly onChange: (name: string, activeTab: ReactElement<TabProps>) => void;\n\n    /**\n     * Whether to display 1-based index numbers before each tab name.\n     * @default true\n     */\n    readonly showIndex?: boolean;\n\n    /**\n     * Controlled active tab name. When provided, the component is controlled —\n     * the parent owns the active tab state and must update it via `onChange`.\n     * When omitted, the component manages its own state (uncontrolled mode).\n     */\n    readonly value?: string;\n\n    /**\n     * Width of the container Box. Also determines the separator width in column layouts.\n     */\n    readonly width?: number | string;\n};\n\nconst isTabElement = (child: unknown): child is ReactElement<TabProps> =>\n    child != null && typeof child === \"object\" && \"props\" in (child as ReactElement) && \"name\" in (child as ReactElement<TabProps>).props;\n\nconst collectTabs = (children: ReactNode): ReactElement<TabProps>[] => {\n    const result: ReactElement<TabProps>[] = [];\n\n    // Children.toArray flattens fragments and filters out nulls/booleans\n    // eslint-disable-next-line react-x/no-children-to-array\n    for (const child of Children.toArray(children)) {\n        if (isTabElement(child)) {\n            result.push(child);\n        }\n    }\n\n    return result;\n};\n\nconst matchesAnyKey = (keys: ReadonlyArray<string>, key: Key): boolean => keys.some((keyName) => key[keyName as keyof Key]);\n\nconst getActiveTabColors = (\n    isActive: boolean,\n    focused: boolean,\n    colorsProp: TabColors | undefined,\n): { backgroundColor: string | undefined; color: string | undefined } => {\n    if (!isActive) {\n        return { backgroundColor: undefined, color: undefined };\n    }\n\n    if (focused) {\n        return {\n            backgroundColor: colorsProp?.activeTab?.backgroundColor ?? \"green\",\n            color: colorsProp?.activeTab?.color ?? \"black\",\n        };\n    }\n\n    return { backgroundColor: \"gray\", color: \"black\" };\n};\n\n/**\n * Tabbed navigation component. Renders a row or column of tabs with keyboard\n * navigation (arrow keys, Tab, number keys) and calls `onChange` when the\n * active tab changes.\n */\nexport default function Tabs({\n    children,\n    colors: colorsProp,\n    defaultValue,\n    flexDirection = \"row\",\n    isFocused,\n    keyMap: keyMapProp,\n    onChange,\n    showIndex = true,\n    value,\n    width,\n}: Props): ReactElement {\n    const tabs = collectTabs(children);\n    const tabCount = tabs.length;\n    const tabsRef = useRef(tabs);\n\n    tabsRef.current = tabs;\n\n    const isColumn = flexDirection === \"column\" || flexDirection === \"column-reverse\";\n    const isControlled = value !== undefined;\n\n    const [internalTab, setInternalTab] = useState(() => {\n        const initial = value ?? defaultValue;\n\n        if (initial == null || tabCount === 0) {\n            return 0;\n        }\n\n        const foundIndex = tabs.findIndex((tab) => tab.props.name === initial);\n\n        return foundIndex === -1 ? 0 : foundIndex;\n    });\n\n    // In controlled mode, derive activeTab from value prop\n    const activeTab = isControlled\n        ? Math.max(\n            0,\n            tabs.findIndex((tab) => tab.props.name === value),\n        )\n        : internalTab;\n\n    // no-op in controlled mode; parent drives state via onChange.\n    const noopSetTab = useCallback(() => {}, []);\n    const setActiveTab = isControlled ? noopSetTab : setInternalTab;\n\n    const onChangeRef = useRef(onChange);\n\n    onChangeRef.current = onChange;\n\n    // Notify initial tab on mount (uncontrolled only)\n    useEffect(() => {\n        if (isControlled) {\n            return;\n        }\n\n        const tab = tabsRef.current[activeTab];\n\n        if (tab) {\n            onChangeRef.current(tab.props.name, tab);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // Resolve key map with directional defaults\n    const previousKeys = useMemo(() => keyMapProp?.previous ?? [isColumn ? \"upArrow\" : \"leftArrow\"], [keyMapProp?.previous, isColumn]);\n    const nextKeys = useMemo(() => keyMapProp?.next ?? [isColumn ? \"downArrow\" : \"rightArrow\"], [keyMapProp?.next, isColumn]);\n    const useNumbers = keyMapProp?.useNumbers ?? true;\n    const useTab = keyMapProp?.useTab ?? true;\n\n    // Use a ref for activeTab so callbacks always see the latest value\n    const activeTabRef = useRef(activeTab);\n\n    activeTabRef.current = activeTab;\n\n    const handleTabChange = useCallback(\n        (index: number) => {\n            setActiveTab(index);\n\n            const tab = tabsRef.current[index];\n\n            if (tab) {\n                onChangeRef.current(tab.props.name, tab);\n            }\n        },\n        [setActiveTab],\n    );\n\n    const moveToNext = useCallback(() => {\n        const next = (activeTabRef.current + 1) % tabCount;\n\n        setActiveTab(next);\n\n        const tab = tabsRef.current[next];\n\n        if (tab) {\n            onChangeRef.current(tab.props.name, tab);\n        }\n    }, [tabCount, setActiveTab]);\n\n    const moveToPrevious = useCallback(() => {\n        const previous = (activeTabRef.current - 1 + tabCount) % tabCount;\n\n        setActiveTab(previous);\n\n        const tab = tabsRef.current[previous];\n\n        if (tab) {\n            onChangeRef.current(tab.props.name, tab);\n        }\n    }, [tabCount, setActiveTab]);\n\n    useInput(\n        useCallback(\n            (input: string, key) => {\n                if (matchesAnyKey(previousKeys, key)) {\n                    moveToPrevious();\n\n                    return;\n                }\n\n                if (matchesAnyKey(nextKeys, key)) {\n                    moveToNext();\n\n                    return;\n                }\n\n                // Tab key navigation (only when focus is not managed by Ink)\n                if (key.tab && useTab && isFocused == null) {\n                    if (key.shift) {\n                        moveToPrevious();\n                    } else {\n                        moveToNext();\n                    }\n\n                    return;\n                }\n\n                // Number key navigation (Meta/Cmd + 1-9)\n                if (useNumbers && key.meta && NUMBER_KEY_PATTERN.test(input)) {\n                    const tabIndex = input === \"0\" ? 9 : Number.parseInt(input, 10) - 1;\n\n                    if (tabIndex < tabCount) {\n                        handleTabChange(tabIndex);\n                    }\n                }\n            },\n            [previousKeys, nextKeys, useTab, useNumbers, isFocused, moveToPrevious, moveToNext, tabCount, handleTabChange],\n        ),\n        { isActive: isFocused !== false },\n    );\n\n    const separatorWidth = typeof width === \"number\" ? width : 6;\n\n    const separator = useMemo(\n        // eslint-disable-next-line @stylistic/no-extra-parens\n        () => (isColumn ? \"─\".repeat(separatorWidth) : \" | \"),\n        [isColumn, separatorWidth],\n    );\n\n    return (\n        <Box flexDirection={flexDirection} width={width}>\n            {tabs.map((child, index) => {\n                const { name } = child.props;\n                const textColors = getActiveTabColors(activeTab === index, isFocused !== false, colorsProp);\n\n                let indexLabel: ReactElement | null = null;\n\n                if (showIndex) {\n                    indexLabel = (\n                        <Text color=\"grey\">\n                            {/* eslint-disable-next-line @stylistic/jsx-one-expression-per-line */}\n                            {index + 1}.{\" \"}\n                        </Text>\n                    );\n                }\n\n                return (\n                    <Box flexDirection={flexDirection} key={name}>\n                        {index !== 0 && <Text color=\"dim\">{separator}</Text>}\n                        <Box>\n                            {indexLabel}\n                            <Text backgroundColor={textColors.backgroundColor} color={textColors.color}>\n                                {child}\n                            </Text>\n                        </Box>\n                    </Box>\n                );\n            })}\n        </Box>\n    );\n}\n\nexport { Tabs };\nexport type { Props as TabsProps };\nexport type { KeyMap as TabsKeyMap };\n",
+      "path": "registry/ui/tabs.tsx",
+      "target": "components/ui/tabs.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/tag-input.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tag-input",
+  "type": "registry:ui",
+  "title": "Tag Input",
+  "description": "Tag Input 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, useRef, useState } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nconst EMPTY_TAGS: ReadonlyArray<string> = [];\n\nexport type Props = {\n    /**\n     * Accent color for the chips and focused border.\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     * Reject duplicate tags (case-sensitive).\n     * @default true\n     */\n    readonly dedupe?: boolean;\n\n    /**\n     * Tags present when uncontrolled.\n     */\n    readonly defaultValue?: ReadonlyArray<string>;\n\n    /**\n     * Disable input and dim the display.\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * Maximum number of tags. Further input is ignored once reached.\n     */\n    readonly max?: number;\n\n    /**\n     * Fires whenever the set of tags changes.\n     */\n    readonly onChange?: (tags: ReadonlyArray<string>) => void;\n\n    /**\n     * Fires on Enter with an empty draft (i.e. \"done adding tags\").\n     */\n    readonly onSubmit?: (tags: ReadonlyArray<string>) => void;\n\n    /**\n     * Placeholder shown when there are no tags and no draft.\n     * @default \"Add tags…\"\n     */\n    readonly placeholder?: string;\n\n    /**\n     * Besides Enter, which typed characters commit the current draft (default comma and space).\n     */\n    readonly separators?: ReadonlyArray<string>;\n\n    /**\n     * Controlled tags. When provided, `defaultValue` is ignored.\n     */\n    readonly value?: ReadonlyArray<string>;\n};\n\nconst DEFAULT_SEPARATORS: ReadonlyArray<string> = [\",\", \" \"];\n\n/**\n * A chip-style multi-value input. Type a tag and press Enter (or a separator)\n * to commit it; Backspace on an empty draft removes the last tag. Renders each\n * committed value as a colored chip followed by the live draft.\n */\nexport default function TagInput({\n    accentColor = \"blue\",\n    autoFocus = false,\n    dedupe = true,\n    defaultValue = EMPTY_TAGS,\n    isDisabled = false,\n    max,\n    onChange,\n    onSubmit,\n    placeholder = \"Add tags…\",\n    separators = DEFAULT_SEPARATORS,\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 [draft, setDraft] = useState(\"\");\n\n    const tags = controlledValue ?? internal;\n\n    const onChangeRef = useRef(onChange);\n\n    onChangeRef.current = onChange;\n\n    const setTags = useCallback(\n        (next: ReadonlyArray<string>) => {\n            if (!isControlled) {\n                setInternal(next);\n            }\n\n            onChangeRef.current?.(next);\n        },\n        [isControlled],\n    );\n\n    const commitDraft = useCallback(\n        (raw: string) => {\n            const trimmed = raw.trim();\n\n            if (trimmed.length === 0) {\n                return;\n            }\n\n            if (max !== undefined && tags.length >= max) {\n                return;\n            }\n\n            if (dedupe && tags.includes(trimmed)) {\n                setDraft(\"\");\n\n                return;\n            }\n\n            setTags([...tags, trimmed]);\n            setDraft(\"\");\n        },\n        [dedupe, max, setTags, tags],\n    );\n\n    const inputHandler = useCallback(\n        (input: string, key: { backspace: boolean; delete: boolean; return: boolean }) => {\n            if (key.return) {\n                if (draft.trim().length > 0) {\n                    commitDraft(draft);\n                } else {\n                    onSubmit?.(tags);\n                }\n\n                return;\n            }\n\n            if ((key.backspace || key.delete) && draft.length === 0) {\n                if (tags.length > 0) {\n                    setTags(tags.slice(0, -1));\n                }\n\n                return;\n            }\n\n            if (key.backspace || key.delete) {\n                setDraft(draft.slice(0, -1));\n\n                return;\n            }\n\n            if (separators.includes(input)) {\n                commitDraft(draft);\n\n                return;\n            }\n\n            // Ignore control bytes; accept printable input.\n            if (input.length > 0 && input.codePointAt(0)! >= 0x20) {\n                setDraft(`${draft}${input}`);\n            }\n        },\n        [commitDraft, draft, onSubmit, separators, setTags, tags],\n    );\n\n    useInput(inputHandler, { isActive: isFocused && !isDisabled });\n\n    const isEmpty = tags.length === 0 && draft.length === 0;\n\n    return (\n        <Box borderColor={isFocused ? accentColor : undefined} borderStyle=\"round\" flexWrap=\"wrap\" gap={1} paddingX={1}>\n            {tags.map((tag, index) => (\n                // eslint-disable-next-line react-x/no-array-index-key -- tag index is stable for the render\n                <Text backgroundColor={accentColor} key={index}>\n                    {` ${tag} `}\n                </Text>\n            ))}\n            {isEmpty ? <Text dimColor>{placeholder}</Text> : <Text>{draft}</Text>}\n            {isFocused && !isEmpty ? <Text color={accentColor}>▏</Text> : undefined}\n        </Box>\n    );\n}\n\nexport { TagInput };\nexport type { Props as TagInputProps };\n",
+      "path": "registry/ui/tag-input.tsx",
+      "target": "components/ui/tag-input.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/tag.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tag",
+  "type": "registry:ui",
+  "title": "Tag",
+  "description": "Tag 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 TagVariant = \"outline\" | \"solid\" | \"subtle\";\n\nexport type Props = {\n    /**\n     * Tag content.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Base color.\n     * @default \"blue\"\n     */\n    readonly color?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Optional symbol rendered before the label (e.g. `●`, `✔`, `★`).\n     */\n    readonly icon?: ReactNode;\n\n    /**\n     * Visual style.\n     * @default \"subtle\"\n     */\n    readonly variant?: TagVariant;\n};\n\n/**\n * Render a short pill-shaped label.\n * @returns A `ReactElement` rendering the tag in the requested variant.\n */\nexport default function Tag({ children, color = \"blue\", icon, variant = \"subtle\" }: Props): ReactElement {\n    if (variant === \"outline\") {\n        return (\n            <Box borderColor={color} borderStyle=\"round\" paddingX={1}>\n                <Text color={color}>\n                    {icon === undefined\n                        ? undefined\n                        : (\n<>\n{icon}\n{\" \"}\n</>\n                        )}\n                    {children}\n                </Text>\n            </Box>\n        );\n    }\n\n    if (variant === \"solid\") {\n        return (\n            <Text backgroundColor={color} color=\"black\">\n                {\" \"}\n                {icon === undefined\n                    ? undefined\n                    : (\n<>\n{icon}\n{\" \"}\n</>\n                    )}\n                {children}\n{\" \"}\n            </Text>\n        );\n    }\n\n    return (\n        <Text color={color}>\n            {icon === undefined\n                ? undefined\n                : (\n<>\n{icon}\n{\" \"}\n</>\n                )}\n            {children}\n        </Text>\n    );\n}\n\nexport { Tag };\nexport type { Props as TagProps };\n",
+      "path": "registry/ui/tag.tsx",
+      "target": "components/ui/tag.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/text-input.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "text-input",
+  "type": "registry:ui",
+  "title": "Text Input",
+  "description": "Text Input component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\n\n/**\n * Text input component for Ink.\n *\n * Inspired by ink-ui TextInput by Vadim Demedes and ink-text-input by Sindre Sorhus.\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 useInput from \"@visulima/tui/hooks/use-input\";\nimport { isInsertableInput } from \"@visulima/tui/input\";\nimport type { ReactElement } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\n\nexport type Props = {\n    // eslint-disable-next-line jsdoc/informative-docs -- @default tag triggers false positive\n    /** @default \"\" */\n    readonly defaultValue?: string;\n\n    /**\n     * When true, all input is ignored and text is dimmed.\n     * @default false\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * When true, renders asterisks instead of the actual characters.\n     * @default false\n     */\n    readonly mask?: boolean;\n\n    /**\n     * Fires on every keystroke with the updated text.\n     */\n    readonly onChange?: (value: string) => void;\n\n    /**\n     * Fires when the user presses Enter.\n     */\n    readonly onSubmit?: (value: string) => void;\n\n    /**\n     * Greyed-out text shown when the input is empty.\n     */\n    readonly placeholder?: string;\n\n    /**\n     * Autocomplete candidates. The first case-sensitive prefix match is shown\n     * dimmed after the current input. Press right-arrow or Enter to accept.\n     */\n    readonly suggestions?: ReadonlyArray<string>;\n};\n\n// eslint-disable-next-line sonarjs/slow-regex -- false positive: linear backtracking on short input lines\nconst KILL_WORD_PATTERN = /\\S+\\s*$/;\n\n/**\n * Find the first suggestion suffix that matches the current value.\n */\nconst findSuggestion = (value: string, suggestions: ReadonlyArray<string> | undefined): string | undefined => {\n    if (value.length === 0 || !suggestions) {\n        return undefined;\n    }\n\n    const match = suggestions.find((s) => s.startsWith(value));\n\n    return match?.slice(value.length) ?? undefined;\n};\n\nconst NAV_NOT_HANDLED = -1;\n\n/**\n * Handle cursor navigation keys (arrows, Home, End, Ctrl+A/E).\n * Returns the new cursor position, or NAV_NOT_HANDLED if the key was not a navigation key.\n */\nconst handleNavigation = (\n    input: string,\n    key: { ctrl: boolean; end: boolean; home: boolean; leftArrow: boolean; rightArrow: boolean },\n    cursor: number,\n    valueLength: number,\n): number => {\n    if (key.leftArrow) {\n        return Math.max(0, cursor - 1);\n    }\n\n    if (key.home || (key.ctrl && input === \"a\")) {\n        return 0;\n    }\n\n    if (key.end || (key.ctrl && input === \"e\")) {\n        return valueLength;\n    }\n\n    // rightArrow without suggestion acceptance is handled by caller\n    return NAV_NOT_HANDLED;\n};\n\n/**\n * Handle editing keys (Backspace, Delete, Ctrl+U/K/W).\n * Returns [newValue, newCursor] or undefined if the key was not an editing key.\n */\nconst handleEditing = (\n    input: string,\n    key: { backspace: boolean; ctrl: boolean; delete: boolean },\n    currentValue: string,\n    cursor: number,\n): [string, number] | undefined => {\n    if (key.backspace && cursor > 0) {\n        return [currentValue.slice(0, cursor - 1) + currentValue.slice(cursor), cursor - 1];\n    }\n\n    if (key.delete && cursor < currentValue.length) {\n        return [currentValue.slice(0, cursor) + currentValue.slice(cursor + 1), cursor];\n    }\n\n    if (key.ctrl && input === \"u\") {\n        return [currentValue.slice(cursor), 0];\n    }\n\n    if (key.ctrl && input === \"k\") {\n        return [currentValue.slice(0, cursor), cursor];\n    }\n\n    if (key.ctrl && input === \"w\") {\n        const before = currentValue.slice(0, cursor);\n        const trimmed = before.replace(KILL_WORD_PATTERN, \"\");\n\n        return [trimmed + currentValue.slice(cursor), trimmed.length];\n    }\n\n    return undefined;\n};\n\n/**\n * A single-line text input with cursor navigation, optional placeholder,\n * autocomplete suggestions, and password masking.\n *\n * Supports arrow keys, Home/End, Ctrl+A/E, Ctrl+U/K/W, Backspace, Delete.\n */\nexport default function TextInput({ defaultValue = \"\", isDisabled = false, mask = false, onChange, onSubmit, placeholder, suggestions }: Props): ReactElement {\n    const [value, setValueRaw] = useState(defaultValue);\n    const [cursor, setCursor] = useState(defaultValue.length);\n\n    const valueRef = useRef(value);\n\n    valueRef.current = value;\n    const cursorRef = useRef(cursor);\n\n    cursorRef.current = cursor;\n\n    const onChangeRef = useRef(onChange);\n\n    onChangeRef.current = onChange;\n    const onSubmitRef = useRef(onSubmit);\n\n    onSubmitRef.current = onSubmit;\n\n    const suggestion = findSuggestion(value, suggestions);\n\n    const inputHandler = useCallback(\n        (\n            input: string,\n            key: {\n                backspace: boolean;\n                ctrl: boolean;\n                delete: boolean;\n                end: boolean;\n                escape: boolean;\n                home: boolean;\n                leftArrow: boolean;\n                meta: boolean;\n                return: boolean;\n                rightArrow: boolean;\n            },\n        ) => {\n            const { current } = cursorRef;\n            const currentValue = valueRef.current;\n\n            if (key.return) {\n                const currentSuggestion = findSuggestion(currentValue, suggestions);\n                const finalValue = currentSuggestion ? currentValue + currentSuggestion : currentValue;\n\n                if (currentSuggestion) {\n                    setValueRaw(finalValue);\n                    setCursor(finalValue.length);\n                    onChangeRef.current?.(finalValue);\n                }\n\n                onSubmitRef.current?.(finalValue);\n\n                return;\n            }\n\n            if (key.escape) {\n                return;\n            }\n\n            // Right arrow: accept suggestion if at end, otherwise move cursor\n            if (key.rightArrow) {\n                const currentSuggestion = findSuggestion(currentValue, suggestions);\n\n                if (current === currentValue.length && currentSuggestion) {\n                    const completed = currentValue + currentSuggestion;\n\n                    setValueRaw(completed);\n                    setCursor(completed.length);\n                    onChangeRef.current?.(completed);\n\n                    return;\n                }\n\n                setCursor(Math.min(currentValue.length, current + 1));\n\n                return;\n            }\n\n            // Navigation keys\n            const navResult = handleNavigation(input, key, current, currentValue.length);\n\n            if (navResult !== NAV_NOT_HANDLED) {\n                setCursor(navResult);\n\n                return;\n            }\n\n            // Editing keys\n            const editResult = handleEditing(input, key, currentValue, current);\n\n            if (editResult) {\n                const [newValue, newCursor] = editResult;\n\n                setValueRaw(newValue);\n                setCursor(newCursor);\n                onChangeRef.current?.(newValue);\n\n                return;\n            }\n\n            // Printable character — insert at cursor (filters out ctrl/meta chords,\n            // but allows AltGr symbols like @ and € on international keyboards)\n            if (isInsertableInput(input, key)) {\n                const next = currentValue.slice(0, current) + input + currentValue.slice(current);\n\n                setValueRaw(next);\n                setCursor(current + input.length);\n                onChangeRef.current?.(next);\n            }\n        },\n        [suggestions],\n    );\n\n    useInput(inputHandler, { isActive: !isDisabled });\n\n    // Build the display string\n    const displayValue = mask ? \"*\".repeat(value.length) : value;\n\n    // Render with cursor\n    const beforeCursor = displayValue.slice(0, cursor);\n    const atCursor = displayValue[cursor];\n    const afterCursor = displayValue.slice(cursor + 1);\n\n    if (isDisabled) {\n        return (\n            <Box>\n                {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- intentional: empty string should fall through to placeholder */}\n                <Text dimColor>{displayValue || placeholder || \"\"}</Text>\n            </Box>\n        );\n    }\n\n    if (value.length === 0 && placeholder) {\n        return (\n            <Box>\n                <Text dimColor inverse>\n                    {placeholder[0]}\n                </Text>\n                <Text dimColor>{placeholder.slice(1)}</Text>\n            </Box>\n        );\n    }\n\n    return (\n        <Box>\n            <Text>\n                {beforeCursor}\n                <Text inverse>{atCursor ?? \" \"}</Text>\n                {afterCursor}\n            </Text>\n            {suggestion ? <Text dimColor>{suggestion}</Text> : undefined}\n        </Box>\n    );\n}\n\nexport { TextInput };\nexport type { Props as TextInputProps };\n",
+      "path": "registry/ui/text-input.tsx",
+      "target": "components/ui/text-input.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/textarea.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea",
+  "type": "registry:ui",
+  "title": "Textarea",
+  "description": "Textarea component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable no-useless-assignment, react-x/no-array-index-key, react-x/set-state-in-effect, react/function-component-definition, unicorn/prefer-single-call */\n\n/**\n * Multi-line text input component for Ink.\n *\n * Provides a full-featured textarea with cursor navigation, selection,\n * clipboard support, undo/redo, and viewport scrolling.\n */\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport useClipboard from \"@visulima/tui/hooks/use-clipboard\";\nimport useInput from \"@visulima/tui/hooks/use-input\";\nimport usePaste from \"@visulima/tui/hooks/use-paste\";\nimport useTextBuffer from \"@visulima/tui/hooks/use-text-buffer\";\nimport { isInsertableInput } from \"@visulima/tui/input\";\nimport type { ReactElement } from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nexport type Props = {\n    // eslint-disable-next-line jsdoc/informative-docs -- @default tag triggers false positive\n    /** @default \"\" */\n    readonly defaultValue?: string;\n\n    /**\n     * When true, all input is ignored and text is dimmed.\n     * @default false\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * When true, the component responds to keyboard input.\n     * @default true\n     */\n    readonly isFocused?: boolean;\n\n    /**\n     * Maximum visible rows before viewport scrolling kicks in.\n     * When set, the textarea will grow from `rows` to `maxRows` before scrolling.\n     */\n    readonly maxRows?: number;\n\n    /**\n     * Fires on every edit with the updated text.\n     */\n    readonly onChange?: (value: string) => void;\n\n    /**\n     * Fires when the user presses Meta+Enter or Ctrl+Enter.\n     */\n    readonly onSubmit?: (value: string) => void;\n\n    /**\n     * Greyed-out text shown when the textarea is empty.\n     */\n    readonly placeholder?: string;\n\n    /**\n     * Number of visible rows (viewport height).\n     * @default 5\n     */\n    readonly rows?: number;\n\n    /**\n     * Show line numbers in the left gutter.\n     * @default false\n     */\n    readonly showLineNumbers?: boolean;\n\n    /**\n     * Number of spaces inserted for a Tab key press.\n     * @default 2\n     */\n    readonly tabSize?: number;\n};\n\ntype SelectionRange = {\n    endCol: number;\n    endLine: number;\n    startCol: number;\n    startLine: number;\n};\n\nconst getOrderedSelection = (cursor: { col: number; line: number }, anchor: { col: number; line: number }): SelectionRange => {\n    if (anchor.line < cursor.line || (anchor.line === cursor.line && anchor.col < cursor.col)) {\n        return { endCol: cursor.col, endLine: cursor.line, startCol: anchor.col, startLine: anchor.line };\n    }\n\n    return { endCol: anchor.col, endLine: anchor.line, startCol: cursor.col, startLine: cursor.line };\n};\n\n/**\n * A multi-line text input with cursor navigation, selection, clipboard, undo/redo,\n * paste support, and viewport scrolling.\n *\n * ```tsx\n * &lt;Textarea defaultValue=\"Hello\\nWorld\" rows={10} onChange={setValue} onSubmit={handleSubmit} />\n * ```\n */\nexport default function Textarea({\n    defaultValue = \"\",\n    isDisabled = false,\n    isFocused = true,\n    maxRows,\n    onChange,\n    onSubmit,\n    placeholder,\n    rows = 5,\n    showLineNumbers = false,\n    tabSize = 2,\n}: Props): ReactElement {\n    const buffer = useTextBuffer(defaultValue);\n    const bufferRef = useRef(buffer);\n\n    bufferRef.current = buffer;\n\n    const { copy } = useClipboard();\n    const [scrollOffset, setScrollOffset] = useState(0);\n\n    const onChangeRef = useRef(onChange);\n\n    onChangeRef.current = onChange;\n    const onSubmitRef = useRef(onSubmit);\n\n    onSubmitRef.current = onSubmit;\n\n    // Fire onChange on value changes\n    const previousValueRef = useRef(defaultValue);\n\n    useEffect(() => {\n        if (buffer.value !== previousValueRef.current) {\n            previousValueRef.current = buffer.value;\n            onChangeRef.current?.(buffer.value);\n        }\n    }, [buffer.value]);\n\n    // Calculate visible rows\n    const visibleRows = useMemo(() => {\n        if (maxRows) {\n            return Math.min(Math.max(rows, buffer.lines.length), maxRows);\n        }\n\n        return rows;\n    }, [rows, maxRows, buffer.lines.length]);\n\n    // Keep cursor in viewport\n    useEffect(() => {\n        setScrollOffset((offset) => {\n            if (buffer.cursor.line < offset) {\n                return buffer.cursor.line;\n            }\n\n            if (buffer.cursor.line >= offset + visibleRows) {\n                return buffer.cursor.line - visibleRows + 1;\n            }\n\n            return offset;\n        });\n    }, [buffer.cursor.line, visibleRows]);\n\n    const inputHandler = useCallback(\n        (\n            input: string,\n            key: {\n                backspace: boolean;\n                ctrl: boolean;\n                delete: boolean;\n                downArrow: boolean;\n                end: boolean;\n                escape: boolean;\n                home: boolean;\n                leftArrow: boolean;\n                meta: boolean;\n                return: boolean;\n                rightArrow: boolean;\n                shift: boolean;\n                tab: boolean;\n                upArrow: boolean;\n            },\n        ) => {\n            const b = bufferRef.current;\n\n            // Submit: Meta+Enter or Ctrl+Enter\n            if (key.return && (key.meta || key.ctrl)) {\n                onSubmitRef.current?.(b.value);\n\n                return;\n            }\n\n            // Enter: insert newline\n            if (key.return) {\n                b.newline();\n\n                return;\n            }\n\n            if (key.escape) {\n                b.clearSelection();\n\n                return;\n            }\n\n            // Tab: insert spaces\n            if (key.tab) {\n                b.insert(\" \".repeat(tabSize));\n\n                return;\n            }\n\n            // Undo: Ctrl+Z\n            if (key.ctrl && input === \"z\") {\n                b.undo();\n\n                return;\n            }\n\n            // Redo: Ctrl+Y or Ctrl+Shift+Z\n            if (key.ctrl && (input === \"y\" || (key.shift && input === \"Z\"))) {\n                b.redo();\n\n                return;\n            }\n\n            // Copy: Ctrl+C (with selection)\n            if (key.ctrl && input === \"c\" && b.hasSelection()) {\n                copy(b.getSelectedText());\n\n                return;\n            }\n\n            // Select all: Ctrl+Shift+A (Shift produces uppercase \"A\")\n            if (key.ctrl && (input === \"A\" || (input === \"a\" && key.shift))) {\n                b.selectAll();\n\n                return;\n            }\n\n            // Navigation\n            if (key.upArrow) {\n                b.moveCursor(\"up\", key.shift);\n\n                return;\n            }\n\n            if (key.downArrow) {\n                b.moveCursor(\"down\", key.shift);\n\n                return;\n            }\n\n            if (key.leftArrow) {\n                b.moveCursor(\"left\", key.shift);\n\n                return;\n            }\n\n            if (key.rightArrow) {\n                b.moveCursor(\"right\", key.shift);\n\n                return;\n            }\n\n            if (key.home) {\n                if (key.ctrl) {\n                    b.moveToStart(key.shift);\n                } else {\n                    b.moveToLineStart(key.shift);\n                }\n\n                return;\n            }\n\n            if (key.end) {\n                if (key.ctrl) {\n                    b.moveToEnd(key.shift);\n                } else {\n                    b.moveToLineEnd(key.shift);\n                }\n\n                return;\n            }\n\n            // Ctrl+A (no shift): home\n            if (key.ctrl && input === \"a\") {\n                b.moveToLineStart(key.shift);\n\n                return;\n            }\n\n            // Ctrl+E: end\n            if (key.ctrl && input === \"e\") {\n                b.moveToLineEnd(key.shift);\n\n                return;\n            }\n\n            // Editing\n            if (key.backspace) {\n                b.deleteBack();\n\n                return;\n            }\n\n            if (key.delete) {\n                b.deleteForward();\n\n                return;\n            }\n\n            if (key.ctrl && input === \"u\") {\n                b.deleteToLineStart();\n\n                return;\n            }\n\n            if (key.ctrl && input === \"k\") {\n                b.deleteToLineEnd();\n\n                return;\n            }\n\n            if (key.ctrl && input === \"w\") {\n                b.deleteWord();\n\n                return;\n            }\n\n            // Printable character\n            if (isInsertableInput(input, key)) {\n                if (b.hasSelection()) {\n                    b.replaceSelection(input);\n                } else {\n                    b.insert(input);\n                }\n            }\n        },\n        [copy, tabSize],\n    );\n\n    useInput(inputHandler, { isActive: isFocused && !isDisabled });\n\n    // Paste handler\n    const pasteHandler = useCallback((text: string) => {\n        const b = bufferRef.current;\n\n        if (b.hasSelection()) {\n            b.replaceSelection(text);\n        } else {\n            b.insert(text);\n        }\n    }, []);\n\n    usePaste(pasteHandler, { isActive: isFocused && !isDisabled });\n\n    // Render\n    const visibleLines = buffer.lines.slice(scrollOffset, scrollOffset + visibleRows);\n    const lineNumberWidth = showLineNumbers ? String(buffer.lines.length).length + 1 : 0;\n\n    // Selection range (ordered)\n    const sel = buffer.anchor ? getOrderedSelection(buffer.cursor, buffer.anchor) : null;\n\n    if (isDisabled) {\n        return (\n            <Box flexDirection=\"column\">\n                {visibleLines.map((line, index) => {\n                    const lineNumber = scrollOffset + index;\n\n                    return (\n                        <Box key={lineNumber}>\n                            {showLineNumbers\n                                ? (\n<Text dimColor>\n{String(lineNumber + 1).padStart(lineNumberWidth)}\n{\" \"}\n</Text>\n                                )\n                                : undefined}\n                            {}\n                            <Text dimColor>{line || (lineNumber === 0 && placeholder ? placeholder : \"\")}</Text>\n                        </Box>\n                    );\n                })}\n            </Box>\n        );\n    }\n\n    // Empty with placeholder\n    if (buffer.value.length === 0 && placeholder) {\n        const placeholderLines = placeholder.split(\"\\n\").slice(0, visibleRows);\n\n        return (\n            <Box flexDirection=\"column\">\n                {placeholderLines.map((pLine, index) => (\n                    <Box key={index}>\n                        {showLineNumbers\n                            ? (\n<Text dimColor>\n{String(index + 1).padStart(lineNumberWidth)}\n{\" \"}\n</Text>\n                            )\n                            : undefined}\n                        {index === 0\n                            ? (\n                            <Text>\n                                <Text dimColor inverse>\n                                    {pLine[0] ?? \" \"}\n                                </Text>\n                                <Text dimColor>{pLine.slice(1)}</Text>\n                            </Text>\n                            )\n                            : (\n                            <Text dimColor>{pLine}</Text>\n                            )}\n                    </Box>\n                ))}\n            </Box>\n        );\n    }\n\n    return (\n        <Box flexDirection=\"column\">\n            {visibleLines.map((line, index) => {\n                const lineNumber = scrollOffset + index;\n                const isCursorLine = lineNumber === buffer.cursor.line;\n\n                return (\n                    <Box key={lineNumber}>\n                        {showLineNumbers\n                            ? (\n<Text dimColor={!isCursorLine}>\n{String(lineNumber + 1).padStart(lineNumberWidth)}\n{\" \"}\n</Text>\n                            )\n                            : undefined}\n                        <Text>{renderLine(line, lineNumber, buffer.cursor, sel)}</Text>\n                    </Box>\n                );\n            })}\n        </Box>\n    );\n}\n\n/**\n * Render a single line with cursor and selection highlighting.\n */\nfunction renderLine(line: string, lineNumber: number, cursor: { col: number; line: number }, sel: SelectionRange | null): ReactElement {\n    const isCursorLine = lineNumber === cursor.line;\n    const cursorCol = isCursorLine ? cursor.col : -1;\n\n    // Determine if this line has any selection\n    const lineSelected = sel && lineNumber >= sel.startLine && lineNumber <= sel.endLine;\n\n    if (!lineSelected && !isCursorLine) {\n        // No cursor, no selection — plain text\n        return <>{line}</>;\n    }\n\n    if (!lineSelected) {\n        // Cursor on this line, no selection\n        const before = line.slice(0, cursorCol);\n        const at = line[cursorCol];\n        const after = line.slice(cursorCol + 1);\n\n        return (\n            <>\n                {before}\n                <Text inverse>{at ?? \" \"}</Text>\n                {after}\n            </>\n        );\n    }\n\n    // Selection on this line\n    const selStart = lineNumber === sel.startLine ? sel.startCol : 0;\n    const selEnd = lineNumber === sel.endLine ? sel.endCol : line.length;\n\n    const beforeSel = line.slice(0, selStart);\n    const selected = line.slice(selStart, selEnd);\n    const afterSel = line.slice(selEnd);\n\n    if (isCursorLine && (cursorCol < selStart || cursorCol >= selEnd)) {\n        // Cursor is outside the selection on this line\n        const parts: ReactElement[] = [];\n        let key = 0;\n\n        if (cursorCol < selStart) {\n            parts.push(<Text key={key++}>{line.slice(0, cursorCol)}</Text>);\n            parts.push(\n                <Text inverse key={key++}>\n                    {line[cursorCol] ?? \" \"}\n                </Text>,\n            );\n            parts.push(<Text key={key++}>{line.slice(cursorCol + 1, selStart)}</Text>);\n            parts.push(\n                <Text inverse key={key++}>\n                    {selected}\n                </Text>,\n            );\n            parts.push(<Text key={key++}>{afterSel}</Text>);\n        } else {\n            parts.push(<Text key={key++}>{beforeSel}</Text>);\n            parts.push(\n                <Text inverse key={key++}>\n                    {selected}\n                </Text>,\n            );\n            parts.push(<Text key={key++}>{line.slice(selEnd, cursorCol)}</Text>);\n            parts.push(\n                <Text inverse key={key++}>\n                    {line[cursorCol] ?? \" \"}\n                </Text>,\n            );\n            parts.push(<Text key={key++}>{line.slice(cursorCol + 1)}</Text>);\n        }\n\n        return <>{parts}</>;\n    }\n\n    // Cursor is within or no cursor — just show selection\n    return (\n        <>\n            {beforeSel}\n            <Text inverse>{selected}</Text>\n            {afterSel}\n        </>\n    );\n}\n\nexport { Textarea };\nexport type { Props as TextareaProps };\n",
+      "path": "registry/ui/textarea.tsx",
+      "target": "components/ui/textarea.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/thinking-block.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "thinking-block",
+  "type": "registry:ui",
+  "title": "Thinking Block",
+  "description": "Thinking Block 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, useState } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type Props = {\n    /**\n     * Accent color for the header and border.\n     * @default \"magenta\"\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Auto-focus so Space/Enter can toggle the block.\n     */\n    readonly autoFocus?: boolean;\n\n    /**\n     * The reasoning text.\n     */\n    readonly children: string;\n\n    /**\n     * Start expanded when uncontrolled.\n     * @default true\n     */\n    readonly defaultExpanded?: boolean;\n\n    /**\n     * Controlled expanded state. When set, `defaultExpanded` is ignored.\n     */\n    readonly expanded?: boolean;\n\n    /**\n     * Header label.\n     * @default \"Thinking\"\n     */\n    readonly label?: string;\n\n    /**\n     * Fires when the expanded state toggles.\n     */\n    readonly onToggle?: (expanded: boolean) => void;\n\n    /**\n     * Show a pulsing indicator to signal in-progress reasoning.\n     * @default false\n     */\n    readonly streaming?: boolean;\n};\n\n/**\n * A collapsible block for an assistant's reasoning. The dimmed body is hidden\n * when collapsed; Space or Enter toggles it while focused. Set `streaming` to\n * mark reasoning still in progress.\n */\nexport default function ThinkingBlock({\n    accentColor = \"magenta\",\n    autoFocus = false,\n    children,\n    defaultExpanded = true,\n    expanded: controlledExpanded,\n    label = \"Thinking\",\n    onToggle,\n    streaming = false,\n}: Props): ReactElement {\n    const { isFocused } = useFocus({ autoFocus });\n    const isControlled = controlledExpanded !== undefined;\n\n    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);\n    const expanded = controlledExpanded ?? internalExpanded;\n\n    const toggle = useCallback(() => {\n        const next = !expanded;\n\n        if (!isControlled) {\n            setInternalExpanded(next);\n        }\n\n        onToggle?.(next);\n    }, [expanded, isControlled, onToggle]);\n\n    const inputHandler = useCallback(\n        (input: string, key: { return: boolean }) => {\n            if (input === \" \" || key.return) {\n                toggle();\n            }\n        },\n        [toggle],\n    );\n\n    useInput(inputHandler, { isActive: isFocused });\n\n    return (\n        <Box borderColor={accentColor} borderStyle=\"round\" flexDirection=\"column\" paddingX={1}>\n            <Box gap={1}>\n                <Text color={accentColor}>{expanded ? \"▾\" : \"▸\"}</Text>\n                <Text color={accentColor} italic>\n                    {label}\n                </Text>\n                {streaming ? <Text color={accentColor}>…</Text> : undefined}\n                {isFocused ? <Text dimColor>{expanded ? \"(space to collapse)\" : \"(space to expand)\"}</Text> : undefined}\n            </Box>\n            {expanded\n                ? (\n                <Box marginTop={1}>\n                    <Text dimColor italic>\n                        {children}\n                    </Text>\n                </Box>\n                )\n                : undefined}\n        </Box>\n    );\n}\n\nexport { ThinkingBlock };\nexport type { Props as ThinkingBlockProps };\n",
+      "path": "registry/ui/thinking-block.tsx",
+      "target": "components/ui/thinking-block.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/time-picker.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "time-picker",
+  "type": "registry:ui",
+  "title": "Time Picker",
+  "description": "Time Picker 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, useRef, useState } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type TimeValue = {\n    readonly hours: number;\n    readonly minutes: number;\n    readonly seconds?: number;\n};\n\nexport type Props = {\n    /**\n     * Accent color for the focused segment.\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     * Initial value when uncontrolled.\n     * @default { hours: 0, minutes: 0 }\n     */\n    readonly defaultValue?: TimeValue;\n\n    /**\n     * Use a 12-hour clock with an AM/PM segment instead of 24-hour.\n     * @default false\n     */\n    readonly hour12?: boolean;\n\n    /**\n     * Disable input and dim the display.\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * Fires whenever any segment changes.\n     */\n    readonly onChange?: (value: TimeValue) => void;\n\n    /**\n     * Fires on Enter.\n     */\n    readonly onSubmit?: (value: TimeValue) => void;\n\n    /**\n     * Show a seconds segment.\n     * @default false\n     */\n    readonly showSeconds?: boolean;\n\n    /**\n     * Controlled value. When provided, `defaultValue` is ignored.\n     */\n    readonly value?: TimeValue;\n};\n\ntype Segment = \"ampm\" | \"hours\" | \"minutes\" | \"seconds\";\n\nconst DIGIT_PATTERN = /^\\d$/;\nconst DEFAULT_TIME: TimeValue = { hours: 0, minutes: 0 };\n\nfunction wrap(value: number, size: number): number {\n    return size === 0 ? 0 : ((value % size) + size) % size;\n}\n\nconst pad = (value: number): string => String(value).padStart(2, \"0\");\n\n/**\n * A keyboard-driven time input with independent hour/minute (and optional\n * second) segments. ←/→ move between segments, ↑/↓ adjust the focused segment\n * (wrapping), digits type directly, and Enter submits.\n */\nexport default function TimePicker({\n    accentColor = \"blue\",\n    autoFocus = false,\n    defaultValue = DEFAULT_TIME,\n    hour12 = false,\n    isDisabled = false,\n    onChange,\n    onSubmit,\n    showSeconds = false,\n    value: controlledValue,\n}: Props): ReactElement {\n    const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });\n    const isControlled = controlledValue !== undefined;\n\n    const [internal, setInternal] = useState<TimeValue>(defaultValue);\n    const current = controlledValue ?? internal;\n\n    const segments: Segment[] = [\"hours\", \"minutes\", ...showSeconds ? ([\"seconds\"] as Segment[]) : [], ...hour12 ? ([\"ampm\"] as Segment[]) : []];\n    const [segmentIndex, setSegmentIndex] = useState(0);\n    const focusedSegment = segments[Math.min(segmentIndex, segments.length - 1)]!;\n\n    const onChangeRef = useRef(onChange);\n\n    onChangeRef.current = onChange;\n\n    // Tracks in-progress two-digit entry for the focused segment; reset whenever\n    // focus moves or a non-digit key is pressed.\n    const typedRef = useRef<{ segment: Segment; value: number } | null>(null);\n\n    const update = useCallback(\n        (next: TimeValue) => {\n            if (!isControlled) {\n                setInternal(next);\n            }\n\n            onChangeRef.current?.(next);\n        },\n        [isControlled],\n    );\n\n    const adjust = useCallback(\n        (segment: Segment, delta: number) => {\n            switch (segment) {\n                case \"hours\": {\n                    update({ ...current, hours: wrap(current.hours + delta, 24) });\n\n                    break;\n                }\n                case \"minutes\": {\n                    update({ ...current, minutes: wrap(current.minutes + delta, 60) });\n\n                    break;\n                }\n                case \"seconds\": {\n                    update({ ...current, seconds: wrap((current.seconds ?? 0) + delta, 60) });\n\n                    break;\n                }\n                default: {\n                // AM/PM: flip by ±12 hours.\n                    update({ ...current, hours: wrap(current.hours + 12, 24) });\n                }\n            }\n        },\n        [current, update],\n    );\n\n    const applyDigit = useCallback(\n        (segment: Segment, digit: number) => {\n            const previous = typedRef.current;\n            const combine = previous !== null && previous.segment === segment;\n\n            if (segment === \"minutes\" || segment === \"seconds\") {\n                let next = combine ? previous.value * 10 + digit : digit;\n\n                if (next > 59) {\n                    next = digit;\n                }\n\n                typedRef.current = { segment, value: next };\n                update(segment === \"minutes\" ? { ...current, minutes: next } : { ...current, seconds: next });\n\n                return;\n            }\n\n            // Hours. In 12-hour mode digits address the 1..12 range and the\n            // current AM/PM is preserved; in 24-hour mode they address 0..23.\n            const maxHour = hour12 ? 12 : 23;\n            let next = combine ? previous.value * 10 + digit : digit;\n\n            if (next > maxHour) {\n                next = digit;\n            }\n\n            typedRef.current = { segment, value: next };\n\n            if (hour12) {\n                const isPm = current.hours >= 12;\n\n                update({ ...current, hours: (next % 12) + (isPm ? 12 : 0) });\n            } else {\n                update({ ...current, hours: next });\n            }\n        },\n        [current, hour12, update],\n    );\n\n    const inputHandler = useCallback(\n        (input: string, key: { downArrow: boolean; leftArrow: boolean; return: boolean; rightArrow: boolean; upArrow: boolean }) => {\n            if (key.leftArrow) {\n                typedRef.current = null;\n                setSegmentIndex((index) => wrap(index - 1, segments.length));\n\n                return;\n            }\n\n            if (key.rightArrow) {\n                typedRef.current = null;\n                setSegmentIndex((index) => wrap(index + 1, segments.length));\n\n                return;\n            }\n\n            if (key.upArrow) {\n                typedRef.current = null;\n                adjust(focusedSegment, 1);\n\n                return;\n            }\n\n            if (key.downArrow) {\n                typedRef.current = null;\n                adjust(focusedSegment, -1);\n\n                return;\n            }\n\n            if (key.return) {\n                onSubmit?.(current);\n\n                return;\n            }\n\n            if (DIGIT_PATTERN.test(input)) {\n                if (focusedSegment !== \"ampm\") {\n                    applyDigit(focusedSegment, Number.parseInt(input, 10));\n                }\n\n                return;\n            }\n\n            if ((input === \"a\" || input === \"p\") && hour12) {\n                typedRef.current = null;\n\n                const isPm = current.hours >= 12;\n                const wantPm = input === \"p\";\n\n                if (isPm !== wantPm) {\n                    update({ ...current, hours: wrap(current.hours + 12, 24) });\n                }\n            }\n        },\n        [adjust, applyDigit, current, focusedSegment, hour12, onSubmit, segments.length, update],\n    );\n\n    useInput(inputHandler, { isActive: isFocused && !isDisabled });\n\n    const hours12 = current.hours % 12 === 0 ? 12 : current.hours % 12;\n    const displayHours = hour12 ? hours12 : current.hours;\n    const meridiem = current.hours >= 12 ? \"PM\" : \"AM\";\n\n    function segmentColor(segment: Segment): LiteralUnion<AnsiColors, string> | undefined {\n        return isFocused && focusedSegment === segment ? accentColor : undefined;\n    }\n\n    function segmentInverse(segment: Segment): boolean {\n        return isFocused && focusedSegment === segment;\n    }\n\n    return (\n        <Box borderColor={isFocused ? accentColor : undefined} borderStyle=\"round\" paddingX={1}>\n            <Text color={segmentColor(\"hours\")} dimColor={isDisabled} inverse={segmentInverse(\"hours\")}>\n                {pad(displayHours)}\n            </Text>\n            <Text dimColor>:</Text>\n            <Text color={segmentColor(\"minutes\")} dimColor={isDisabled} inverse={segmentInverse(\"minutes\")}>\n                {pad(current.minutes)}\n            </Text>\n            {showSeconds\n                ? (\n                <>\n                    <Text dimColor>:</Text>\n                    <Text color={segmentColor(\"seconds\")} dimColor={isDisabled} inverse={segmentInverse(\"seconds\")}>\n                        {pad(current.seconds ?? 0)}\n                    </Text>\n                </>\n                )\n                : undefined}\n            {hour12\n                ? (\n                <Box marginLeft={1}>\n                    <Text color={segmentColor(\"ampm\")} dimColor={isDisabled} inverse={segmentInverse(\"ampm\")}>\n                        {meridiem}\n                    </Text>\n                </Box>\n                )\n                : undefined}\n        </Box>\n    );\n}\n\nexport { TimePicker };\nexport type { Props as TimePickerProps };\n",
+      "path": "registry/ui/time-picker.tsx",
+      "target": "components/ui/time-picker.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/timer.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "timer",
+  "type": "registry:ui",
+  "title": "Timer",
+  "description": "Timer component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "import Text from \"@visulima/tui/components/text\";\nimport type { UseTimerResult } from \"@visulima/tui/hooks/use-timer\";\nimport useTimer from \"@visulima/tui/hooks/use-timer\";\nimport { formatDuration } from \"@visulima/tui/utils\";\nimport type { ReactElement, Ref } from \"react\";\nimport { useImperativeHandle } from \"react\";\n\nexport type TimerRef = Omit<UseTimerResult, \"isFinished\" | \"isRunning\" | \"remaining\">;\n\nexport type Props = {\n    /**\n     * Whether to start the timer immediately.\n     * @default false\n     */\n    readonly autoStart?: boolean;\n\n    /**\n     * Make the rendered text bold.\n     */\n    readonly bold?: boolean;\n\n    /**\n     * Text color for the rendered time.\n     */\n    readonly color?: string;\n\n    /**\n     * Total countdown duration in milliseconds.\n     */\n    readonly duration: number;\n\n    /**\n     * Custom formatter for the remaining time.\n     * Receives remaining milliseconds, returns a display string.\n     * @default formatDuration (MM:SS or HH:MM:SS)\n     */\n    readonly format?: (remaining: number) => string;\n\n    /**\n     * Tick interval in milliseconds.\n     * @default 1000\n     */\n    readonly interval?: number;\n\n    /**\n     * Called once when the timer reaches zero.\n     */\n    readonly onTimeout?: () => void;\n\n    readonly ref?: Ref<TimerRef>;\n};\n\n/**\n * A countdown timer component.\n *\n * Exposes `start`, `stop`, `toggle`, and `reset` methods via ref.\n *\n * ```tsx\n * const ref = useRef&lt;TimerRef>(null);\n * &lt;Timer ref={ref} duration={60_000} autoStart />\n * ```\n */\nconst Timer = ({ autoStart, bold, color, duration, format = formatDuration, interval, onTimeout, ref }: Props): ReactElement => {\n    const timer = useTimer({ autoStart, duration, interval, onTimeout });\n\n    useImperativeHandle(ref, () => {\n        return {\n            reset: timer.reset,\n            start: timer.start,\n            stop: timer.stop,\n            toggle: timer.toggle,\n        };\n    }, [timer.reset, timer.start, timer.stop, timer.toggle]);\n\n    return (\n        <Text bold={bold} color={color}>\n            {format(timer.remaining)}\n        </Text>\n    );\n};\n\nexport default Timer;\n\nexport { Timer };\nexport type { Props as TimerProps };\n",
+      "path": "registry/ui/timer.tsx",
+      "target": "components/ui/timer.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}