@visulima/tui-kit 0.0.0 → 1.0.0

package/dist/r/date-picker.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "date-picker",
+  "type": "registry:ui",
+  "title": "Date Picker",
+  "description": "Date Picker component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [
+    "https://visulima.com/r/calendar.json"
+  ],
+  "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\nimport Calendar from \"@/components/ui/calendar\";\n\nexport type Props = {\n    /**\n     * Accent color used by the inner calendar when open.\n     * @default \"blue\"\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Auto-focus the picker on mount.\n     */\n    readonly autoFocus?: boolean;\n\n    /**\n     * Initial selected date when uncontrolled.\n     */\n    readonly defaultValue?: Date;\n\n    /**\n     * Override the way the selected date is rendered in the input row.\n     */\n    readonly formatValue?: (date: Date) => string;\n\n    /**\n     * Disable the picker.\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * Upper bound for selectable dates.\n     */\n    readonly maxDate?: Date;\n\n    /**\n     * Lower bound for selectable dates.\n     */\n    readonly minDate?: Date;\n\n    /**\n     * Fired when the user commits a date with Enter.\n     */\n    readonly onChange?: (date: Date) => void;\n\n    /**\n     * Placeholder rendered when no date is selected.\n     * @default \"Pick a date\"\n     */\n    readonly placeholder?: string;\n\n    /**\n     * Controlled selected date.\n     */\n    readonly value?: Date;\n};\n\nconst defaultFormat = (date: Date): string => {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, \"0\");\n    const day = String(date.getDate()).padStart(2, \"0\");\n\n    return `${year}-${month}-${day}`;\n};\n\n/**\n * Compact date input. Shows the currently-selected date; Enter / Space opens\n * the inline `Calendar` for navigation. Enter inside the calendar commits the\n * date and closes the picker.\n */\nexport default function DatePicker({\n    accentColor = \"blue\",\n    autoFocus = false,\n    defaultValue,\n    formatValue = defaultFormat,\n    isDisabled = false,\n    maxDate,\n    minDate,\n    onChange,\n    placeholder = \"Pick a date\",\n    value,\n}: Props): ReactElement {\n    const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });\n    const [isOpen, setIsOpen] = useState(false);\n    const [internal, setInternal] = useState(defaultValue);\n    const current = value ?? internal;\n\n    useInput(\n        useCallback(\n            (input, key) => {\n                if (!isFocused || isOpen) {\n                    return;\n                }\n\n                if (key.return || input === \" \") {\n                    setIsOpen(true);\n                }\n            },\n            [isFocused, isOpen],\n        ),\n        { isActive: !isDisabled && isFocused && !isOpen },\n    );\n\n    // While the Calendar is open we still want Esc to dismiss without\n    // committing — the Calendar itself doesn't handle Escape.\n    useInput(\n        useCallback((_input, key) => {\n            if (key.escape) {\n                setIsOpen(false);\n            }\n        }, []),\n        { isActive: !isDisabled && isFocused && isOpen },\n    );\n\n    const handleCalendarSubmit = useCallback(\n        (date: Date) => {\n            if (value === undefined) {\n                setInternal(date);\n            }\n\n            setIsOpen(false);\n            onChange?.(date);\n        },\n        [value, onChange],\n    );\n\n    return (\n        <Box flexDirection=\"column\">\n            <Box borderColor={isFocused ? accentColor : undefined} borderStyle=\"round\" paddingX={1}>\n                <Text color={accentColor}>📅 </Text>\n                {current === undefined ? <Text dimColor>{placeholder}</Text> : <Text bold>{formatValue(current)}</Text>}\n                {isFocused && !isOpen\n                    ? (\n                    <Box marginLeft={1}>\n                        <Text dimColor>(Enter to open)</Text>\n                    </Box>\n                    )\n                    : undefined}\n            </Box>\n            {isOpen\n                ? (\n                <Box marginTop={1}>\n                    <Calendar accentColor={accentColor} autoFocus defaultValue={current} maxDate={maxDate} minDate={minDate} onSubmit={handleCalendarSubmit} />\n                </Box>\n                )\n                : undefined}\n        </Box>\n    );\n}\n\nexport { DatePicker };\nexport type { Props as DatePickerProps };\n",
+      "path": "registry/ui/date-picker.tsx",
+      "target": "components/ui/date-picker.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/definition-list.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "definition-list",
+  "type": "registry:ui",
+  "title": "Definition List",
+  "description": "Definition List 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 DefinitionItem = {\n    readonly description: ReactNode;\n    readonly key?: string;\n    readonly term: ReactNode;\n};\n\nexport type Props = {\n    /**\n     * Spacing between term and description columns.\n     * @default 2\n     */\n    readonly columnGap?: number;\n\n    /**\n     * Entries to render.\n     */\n    readonly items: ReadonlyArray<DefinitionItem>;\n\n    /**\n     * Inline items display on the same row; stacked items display with the term above the description.\n     * @default \"inline\"\n     */\n    readonly layout?: \"inline\" | \"stacked\";\n\n    /**\n     * Color applied to the term.\n     * @default \"cyan\"\n     */\n    readonly termColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Minimum width used to align inline terms.\n     */\n    readonly termWidth?: number;\n};\n\n/**\n * Key/value style definition list. Equivalent to the HTML `&lt;dl>` element.\n */\nexport default function DefinitionList({ columnGap = 2, items, layout = \"inline\", termColor = \"cyan\", termWidth }: Props): ReactElement {\n    if (layout === \"stacked\") {\n        return (\n            <Box flexDirection=\"column\" gap={1}>\n                {items.map((item, index) => (\n                    // eslint-disable-next-line react-x/no-array-index-key -- items expose an optional stable `key`; index is the documented fallback for keyless entries\n                    <Box flexDirection=\"column\" key={item.key ?? index}>\n                        <Text bold color={termColor}>\n                            {item.term}\n                        </Text>\n                        <Text>{item.description}</Text>\n                    </Box>\n                ))}\n            </Box>\n        );\n    }\n\n    return (\n        <Box flexDirection=\"column\">\n            {items.map((item, index) => (\n                // eslint-disable-next-line react-x/no-array-index-key -- items expose an optional stable `key`; index is the documented fallback for keyless entries\n                <Box gap={columnGap} key={item.key ?? index}>\n                    <Box flexShrink={0} width={termWidth}>\n                        <Text color={termColor}>{item.term}</Text>\n                    </Box>\n                    <Box flexGrow={1} flexShrink={1}>\n                        <Text>{item.description}</Text>\n                    </Box>\n                </Box>\n            ))}\n        </Box>\n    );\n}\n\nexport { DefinitionList };\nexport type { Props as DefinitionListProps };\n",
+      "path": "registry/ui/definition-list.tsx",
+      "target": "components/ui/definition-list.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/dialog.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog",
+  "type": "registry:ui",
+  "title": "Dialog",
+  "description": "Dialog component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [
+    "https://visulima.com/r/scroll.json"
+  ],
+  "files": [
+    {
+      "content": "import Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport useTerminalPalette from \"@visulima/tui/hooks/use-terminal-palette\";\nimport useWindowSize from \"@visulima/tui/hooks/use-window-size\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useRef } from \"react\";\n\nimport type { ScrollViewRef } from \"@/components/ui/scroll\";\nimport { ScrollView } from \"@/components/ui/scroll\";\n\nexport type Props = {\n    /**\n     * Background color for the dialog. Defaults to the detected terminal\n     * background color, falling back to `\"black\"`.\n     */\n    readonly backgroundColor?: string;\n\n    /**\n     * Border color.\n     * @default \"cyan\"\n     */\n    readonly borderColor?: string;\n\n    /**\n     * Border style.\n     * @default \"round\"\n     */\n    readonly borderStyle?: \"arrow\" | \"bold\" | \"classic\" | \"double\" | \"doubleSingle\" | \"round\" | \"single\" | \"singleDouble\";\n\n    /**\n     * Dialog content.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Override terminal columns. Useful in renderToString or testing contexts\n     * where useWindowSize is unavailable.\n     */\n    readonly columns?: number;\n\n    /**\n     * Footer content rendered below the scrollable area.\n     * Useful for hints like \"Press ? to close\".\n     */\n    readonly footer?: ReactNode;\n\n    /**\n     * Maximum height as a fraction of terminal rows (0-1) or absolute rows.\n     * Values &lt;= 1 are treated as fractions; values > 1 as absolute row counts.\n     * @default 0.8\n     */\n    readonly maxHeight?: number;\n\n    /**\n     * Padding inside the dialog border.\n     * @default 2\n     */\n    readonly paddingX?: number;\n\n    /**\n     * Vertical padding inside the dialog border.\n     * @default 1\n     */\n    readonly paddingY?: number;\n\n    /**\n     * Override terminal rows. Useful in renderToString or testing contexts\n     * where useWindowSize is unavailable.\n     */\n    readonly rows?: number;\n\n    /**\n     * Scrollbar visual style.\n     * @default \"block\"\n     */\n    readonly scrollbarStyle?:\n        | \"arrow\"\n        | \"block\"\n        | \"bold\"\n        | \"classic\"\n        | \"dots\"\n        | \"double\"\n        | \"doubleSingle\"\n        | \"line\"\n        | \"round\"\n        | \"single\"\n        | \"singleDouble\"\n        | \"thick\";\n\n    /**\n     * Ref to the internal ScrollView for programmatic scrolling.\n     */\n    readonly scrollRef?: React.Ref<ScrollViewRef>;\n\n    /**\n     * Title rendered at the top of the dialog. If a string is provided,\n     * it is rendered as bold cyan text.\n     */\n    readonly title?: ReactNode;\n\n    /**\n     * Whether the dialog is visible. When `false`, nothing is rendered.\n     * @default true\n     */\n    readonly visible?: boolean;\n\n    /**\n     * Dialog width in columns.\n     * @default 60\n     */\n    readonly width?: number;\n};\n\n/**\n * A centered overlay dialog with automatic scrolling and scrollbar when\n * content exceeds the available terminal height.\n *\n * Uses the terminal's detected background color by default so the\n * dialog blends with the user's theme.\n *\n * ```tsx\n * &lt;Dialog title=\"Help\" footer={&lt;Text dimColor>Press Esc to close&lt;/Text>}>\n *   &lt;Text>Dialog content here&lt;/Text>\n * &lt;/Dialog>\n * ```\n */\nconst Dialog = ({\n    backgroundColor: backgroundColorProp,\n    borderColor = \"cyan\",\n    borderStyle = \"round\",\n    children,\n    columns: columnsProp,\n    footer,\n    maxHeight: maxHeightProp = 0.8,\n    paddingX = 2,\n    paddingY = 1,\n    rows: rowsProp,\n    scrollbarStyle: scrollbarStyleProp = \"block\",\n    scrollRef: externalScrollRef,\n    title,\n    visible = true,\n    width = 60,\n}: Props): ReactElement | null => {\n    // Hooks must be called unconditionally (React rules)\n    const windowSize = useWindowSize();\n    const { isLoading: paletteLoading, palette } = useTerminalPalette();\n    const internalScrollRef = useRef<ScrollViewRef>(null);\n    const scrollViewRef = externalScrollRef ?? internalScrollRef;\n\n    if (!visible) {\n        return null;\n    }\n\n    const cols = columnsProp ?? (windowSize.columns || 80);\n    const termRows = rowsProp ?? (windowSize.rows || 24);\n\n    const bg = backgroundColorProp ?? (paletteLoading ? \"black\" : palette?.background ?? \"black\");\n\n    const resolvedMaxHeight = maxHeightProp <= 1 ? Math.floor(termRows * maxHeightProp) : Math.min(maxHeightProp, termRows - 2);\n\n    const titleElement\n        = typeof title === \"string\"\n            ? (\n            <Box marginBottom={1}>\n                <Text bold color={borderColor}>\n                    {title}\n                </Text>\n            </Box>\n            )\n            : title ?? null\n        ;\n\n    return (\n        <Box alignItems=\"center\" height={termRows} justifyContent=\"center\" position=\"absolute\" width={cols}>\n            <Box\n                backgroundColor={bg}\n                borderBackgroundColor={bg}\n                borderColor={borderColor}\n                borderStyle={borderStyle}\n                flexDirection=\"column\"\n                maxHeight={resolvedMaxHeight}\n                opaque\n                paddingY={paddingY}\n                width={Math.min(width, cols - 4)}\n            >\n                {/* Title — fixed above scroll area */}\n                {titleElement != null && (\n                    <Box flexShrink={0} paddingX={paddingX}>\n                        {titleElement}\n                    </Box>\n                )}\n\n                {/* Scrollable content with built-in scrollbar */}\n                <ScrollView\n                    flexGrow={1}\n                    flexShrink={1}\n                    paddingX={paddingX}\n                    ref={scrollViewRef}\n                    scrollbar\n                    scrollbarColor={borderColor}\n                    scrollbarStyle={scrollbarStyleProp}\n                >\n                    {children}\n                </ScrollView>\n\n                {/* Footer — fixed below scroll area */}\n                {footer != null && (\n                    <Box alignItems=\"center\" flexDirection=\"column\" flexShrink={0} marginTop={1} paddingX={paddingX}>\n                        {footer}\n                    </Box>\n                )}\n            </Box>\n        </Box>\n    );\n};\n\nexport default Dialog;\n\nexport { Dialog };\nexport type { Props as DialogProps };\n",
+      "path": "registry/ui/dialog.tsx",
+      "target": "components/ui/dialog.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/diff-view.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "diff-view",
+  "type": "registry:ui",
+  "title": "Diff View",
+  "description": "Diff View component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui",
+    "diff",
+    "shiki"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable @typescript-eslint/no-unnecessary-condition, @typescript-eslint/no-use-before-define, consistent-return, default-case, no-void, react-x/no-array-index-key, react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, react/function-component-definition, sonarjs/prefer-read-only-props */\n\n/**\n * Diff viewer component for Ink.\n *\n * Displays file differences in unified or split (side-by-side) mode\n * with colored additions/deletions and optional inline character-level diffs.\n */\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport { getCachedTokens, getHighlighter, isLanguageSupported, renderTokenLine, resolveLanguage } from \"@visulima/tui/highlighter\";\nimport useWindowSize from \"@visulima/tui/hooks/use-window-size\";\nimport { createPatch, diffChars, diffWords, parsePatch } from \"diff\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ThemedToken } from \"shiki\";\n\nexport type DiffViewMode = \"split\" | \"unified\";\nexport type InlineDiffMode = \"chars\" | \"words\";\n\nexport type Props = {\n    /**\n     * Number of unchanged context lines around changes.\n     * @default 3\n     */\n    readonly context?: number;\n\n    /**\n     * Pre-computed unified diff string. If provided, `oldText`/`newText` are ignored.\n     */\n    readonly diff?: string;\n\n    /**\n     * Enable character-level inline diff highlighting within changed lines.\n     * @default true\n     */\n    readonly inlineDiff?: boolean;\n\n    /**\n     * Granularity of inline diff highlighting.\n     * - `\"chars\"` — character-level (best for code)\n     * - `\"words\"` — word-level (best for prose)\n     * @default \"chars\"\n     */\n    readonly inlineDiffMode?: InlineDiffMode;\n\n    /**\n     * Programming language for syntax highlighting within diff lines.\n     * When provided, diff content is highlighted with Shiki.\n     */\n    readonly language?: string;\n\n    /**\n     * Display mode: unified (interleaved) or split (side-by-side).\n     * @default \"unified\"\n     */\n    readonly mode?: DiffViewMode;\n\n    /**\n     * Label for the new version.\n     */\n    readonly newLabel?: string;\n\n    /**\n     * Modified text (\"new\" / right side).\n     */\n    readonly newText?: string;\n\n    /**\n     * Label for the old version.\n     */\n    readonly oldLabel?: string;\n\n    /**\n     * Original text (\"old\" / left side).\n     */\n    readonly oldText?: string;\n\n    /**\n     * Whether to display line numbers.\n     * @default true\n     */\n    readonly showLineNumbers?: boolean;\n\n    /**\n     * Shiki theme for syntax highlighting.\n     * @default \"github-dark-default\"\n     */\n    readonly theme?: string;\n};\n\ntype DiffLine = {\n    content: string;\n    inlineDiff?: PrecomputedInlineDiff;\n    newLineNum?: number;\n    oldLineNum?: number;\n    pairedIndex?: number;\n    type: \"add\" | \"context\" | \"del\";\n};\n\n/**\n * Render a line's content using Shiki syntax tokens if available,\n * falling back to plain text with the given color.\n */\nconst renderHighlightedContent = (\n    content: string,\n    highlightedLines: ThemedToken[][] | null,\n    lineNumber: number | undefined,\n    fallbackColor?: string,\n): ReactNode => {\n    if (!highlightedLines || lineNumber === undefined || lineNumber < 1 || lineNumber > highlightedLines.length) {\n        return fallbackColor ? <Text color={fallbackColor}>{content}</Text> : <Text dimColor>{content}</Text>;\n    }\n\n    const tokens = highlightedLines[lineNumber - 1];\n\n    if (!tokens || tokens.length === 0) {\n        return fallbackColor ? <Text color={fallbackColor}>{content}</Text> : <Text dimColor>{content}</Text>;\n    }\n\n    return renderTokenLine(tokens);\n};\n\n/**\n * Hook that asynchronously highlights text with Shiki when a language is provided.\n * Returns ThemedToken[][] (one array per line) or null if not ready.\n */\nconst useHighlightedLines = (text: string, language: string | undefined, theme: string): ThemedToken[][] | null => {\n    const [tokens, setTokens] = useState<ThemedToken[][] | null>(null);\n    const cancelledRef = useRef(false);\n\n    useEffect(() => {\n        cancelledRef.current = false;\n\n        if (!language) {\n            setTokens(null); // eslint-disable-line react-x/set-state-in-effect\n\n            return;\n        }\n\n        const lang = resolveLanguage(language);\n\n        if (!isLanguageSupported(lang)) {\n            setTokens(null); // eslint-disable-line react-x/set-state-in-effect\n\n            return;\n        }\n\n        void (async () => {\n            try {\n                const highlighter = await getHighlighter([lang], theme);\n                const result = getCachedTokens(highlighter, text, lang, theme);\n\n                if (!cancelledRef.current) {\n                    setTokens(result.tokens);\n                }\n            } catch {\n                if (!cancelledRef.current) {\n                    setTokens(null);\n                }\n            }\n        })();\n\n        return () => {\n            cancelledRef.current = true;\n        };\n    }, [text, language, theme]);\n\n    return tokens;\n};\n\n/**\n * Parse a unified diff string into structured lines with optional precomputed inline diffs.\n */\nconst parseDiffLines = (diffString: string, enableInlineDiff: boolean, inlineDiffMode: InlineDiffMode = \"chars\"): { header: string; lines: DiffLine[] }[] => {\n    const patches = parsePatch(diffString);\n    const hunks: { header: string; lines: DiffLine[] }[] = [];\n\n    for (const patch of patches) {\n        for (const hunk of patch.hunks) {\n            const header = `@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@`;\n            const lines: DiffLine[] = [];\n            let oldLine = hunk.oldStart;\n            let newLine = hunk.newStart;\n\n            for (const line of hunk.lines) {\n                // Skip \"\\" markers\n                if (line.startsWith(\"\\\\\")) {\n                    continue;\n                }\n\n                if (line.startsWith(\"+\")) {\n                    lines.push({ content: line.slice(1), newLineNum: newLine++, type: \"add\" });\n                } else if (line.startsWith(\"-\")) {\n                    lines.push({ content: line.slice(1), oldLineNum: oldLine++, type: \"del\" });\n                } else {\n                    lines.push({ content: line.slice(1), newLineNum: newLine++, oldLineNum: oldLine++, type: \"context\" });\n                }\n            }\n\n            // Precompute inline diffs for paired lines\n            if (enableInlineDiff) {\n                const pairs = findInlinePairs(lines);\n\n                for (const [delIndex, addIndex] of pairs) {\n                    if (lines[delIndex]!.type === \"del\" && lines[addIndex]!.type === \"add\") {\n                        const computed = computeInlineDiff(lines[delIndex]!.content, lines[addIndex]!.content, inlineDiffMode);\n\n                        lines[delIndex]!.inlineDiff = computed ?? undefined;\n                        lines[delIndex]!.pairedIndex = addIndex;\n                        lines[addIndex]!.inlineDiff = computed ?? undefined;\n                        lines[addIndex]!.pairedIndex = delIndex;\n                    }\n                }\n            }\n\n            hunks.push({ header, lines });\n        }\n    }\n\n    return hunks;\n};\n\ntype InlineDiffPart = {\n    highlight: boolean;\n    value: string;\n};\n\ntype PrecomputedInlineDiff = {\n    addParts: InlineDiffPart[];\n    delParts: InlineDiffPart[];\n};\n\n// Skip character-level diff for lines exceeding this length (O(n*m) would be too slow)\nconst INLINE_DIFF_MAX_LINE_LENGTH = 500;\n\n/**\n * Precompute inline diff between paired del/add lines (character or word level).\n */\nconst computeInlineDiff = (oldContent: string, newContent: string, mode: InlineDiffMode = \"chars\"): PrecomputedInlineDiff | null => {\n    if (oldContent.length > INLINE_DIFF_MAX_LINE_LENGTH || newContent.length > INLINE_DIFF_MAX_LINE_LENGTH) {\n        return null;\n    }\n\n    const parts = mode === \"words\" ? diffWords(oldContent, newContent) : diffChars(oldContent, newContent);\n    const delParts: InlineDiffPart[] = [];\n    const addParts: InlineDiffPart[] = [];\n\n    for (const part of parts) {\n        if (part.removed) {\n            delParts.push({ highlight: true, value: part.value });\n        } else if (part.added) {\n            addParts.push({ highlight: true, value: part.value });\n        } else {\n            delParts.push({ highlight: false, value: part.value });\n            addParts.push({ highlight: false, value: part.value });\n        }\n    }\n\n    return { addParts, delParts };\n};\n\n/**\n * Render precomputed inline diff parts.\n */\nconst renderInlineParts = (parts: InlineDiffPart[], color: string, bgColor: string): ReactNode => (\n    <>\n        {parts.map((part, index) => {\n            if (part.highlight) {\n                return (\n                    <Text backgroundColor={bgColor} color=\"white\" key={index}>\n                        {part.value}\n                    </Text>\n                );\n            }\n\n            return (\n                <Text color={color} key={index}>\n                    {part.value}\n                </Text>\n            );\n        })}\n    </>\n);\n\n/**\n * Find paired del/add line blocks for inline diff.\n * Handles consecutive del blocks followed by consecutive add blocks.\n */\nconst findInlinePairs = (lines: DiffLine[]): Map<number, number> => {\n    const pairs = new Map<number, number>();\n    let index = 0;\n\n    while (index < lines.length) {\n        // Find a block of consecutive deletions\n        const delStart = index;\n\n        while (index < lines.length && lines[index]!.type === \"del\") {\n            index++;\n        }\n\n        const delEnd = index;\n\n        // Find a block of consecutive additions right after\n        const addStart = index;\n\n        while (index < lines.length && lines[index]!.type === \"add\") {\n            index++;\n        }\n\n        const addEnd = index;\n\n        // Pair them up (1:1, shorter block determines pair count)\n        const delCount = delEnd - delStart;\n        const addCount = addEnd - addStart;\n        const pairCount = Math.min(delCount, addCount);\n\n        for (let p = 0; p < pairCount; p++) {\n            pairs.set(delStart + p, addStart + p);\n            pairs.set(addStart + p, delStart + p);\n        }\n\n        // Skip non-del/add lines\n        if (index === delStart) {\n            index++;\n        }\n    }\n\n    return pairs;\n};\n\n/**\n * Render unified diff view.\n */\nfunction UnifiedView({\n    hunks,\n    newHighlighted,\n    oldHighlighted,\n    showLineNumbers,\n}: {\n    hunks: { header: string; lines: DiffLine[] }[];\n    newHighlighted: ThemedToken[][] | null;\n    oldHighlighted: ThemedToken[][] | null;\n    showLineNumbers: boolean;\n}): ReactElement {\n    return (\n        <Box flexDirection=\"column\">\n            {hunks.map((hunk, hunkIndex) => (\n                <Box flexDirection=\"column\" key={hunkIndex}>\n                    {hunkIndex > 0\n                        ? (\n                        <Box marginBottom={0} marginTop={0}>\n                            <Text dimColor>···</Text>\n                        </Box>\n                        )\n                        : undefined}\n                    <Text color=\"cyan\" dimColor>\n                        {hunk.header}\n                    </Text>\n                    {hunk.lines.map((line, lineIndex) => {\n                        let lineContent: ReactNode;\n                        let prefix: string;\n                        let color: string | undefined;\n\n                        switch (line.type) {\n                            case \"add\": {\n                                prefix = \"+\";\n                                color = \"green\";\n                                lineContent = line.inlineDiff\n                                    ? renderInlineParts(line.inlineDiff.addParts, \"green\", \"green\")\n                                    : renderHighlightedContent(line.content, newHighlighted, line.newLineNum, \"green\");\n                                break;\n                            }\n\n                            case \"del\": {\n                                prefix = \"-\";\n                                color = \"red\";\n                                lineContent = line.inlineDiff\n                                    ? renderInlineParts(line.inlineDiff.delParts, \"red\", \"red\")\n                                    : renderHighlightedContent(line.content, oldHighlighted, line.oldLineNum, \"red\");\n                                break;\n                            }\n\n                            default: {\n                                prefix = \" \";\n                                color = undefined;\n                                lineContent = renderHighlightedContent(line.content, oldHighlighted, line.oldLineNum);\n                                break;\n                            }\n                        }\n\n                        return (\n                            <Box key={lineIndex}>\n                                {showLineNumbers\n                                    ? (\n                                    <Text color={color} dimColor={line.type === \"context\"}>\n                                        {String(line.oldLineNum ?? \"\").padStart(4)}\n{\" \"}\n{String(line.newLineNum ?? \"\").padStart(4)}\n{\" \"}\n                                    </Text>\n                                    )\n                                    : undefined}\n                                <Text color={color}>{prefix}</Text>\n                                {lineContent}\n                            </Box>\n                        );\n                    })}\n                </Box>\n            ))}\n        </Box>\n    );\n}\n\n/**\n * Render split (side-by-side) diff view.\n */\nfunction SplitView({\n    hunks,\n    newHighlighted,\n    oldHighlighted,\n    showLineNumbers,\n    width,\n}: {\n    hunks: { header: string; lines: DiffLine[] }[];\n    newHighlighted: ThemedToken[][] | null;\n    oldHighlighted: ThemedToken[][] | null;\n    showLineNumbers: boolean;\n    width: number;\n}): ReactElement {\n    const halfWidth = Math.floor(width / 2) - 1;\n\n    return (\n        <Box flexDirection=\"column\">\n            {hunks.map((hunk, hunkIndex) => {\n                const separator\n                    = hunkIndex > 0\n                        ? (\n                        <Box marginBottom={0} marginTop={0}>\n                            <Text dimColor>···</Text>\n                        </Box>\n                        )\n                        : undefined;\n\n                // Build left (old) and right (new) lines using precomputed inline diffs\n                const leftLines: { content: ReactNode; lineNum?: number }[] = [];\n                const rightLines: { content: ReactNode; lineNum?: number }[] = [];\n\n                for (let lineIndex = 0; lineIndex < hunk.lines.length; lineIndex++) {\n                    const line = hunk.lines[lineIndex]!;\n\n                    switch (line.type) {\n                        case \"add\": {\n                            // Only reach here for unpaired adds (paired adds handled by their del)\n                            if (line.pairedIndex === undefined) {\n                                leftLines.push({ content: <Text dimColor /> });\n                                rightLines.push({\n                                    content: renderHighlightedContent(line.content, newHighlighted, line.newLineNum, \"green\"),\n                                    lineNum: line.newLineNum,\n                                });\n                            }\n\n                            break;\n                        }\n                        case \"context\": {\n                            leftLines.push({ content: renderHighlightedContent(line.content, oldHighlighted, line.oldLineNum), lineNum: line.oldLineNum });\n                            rightLines.push({ content: renderHighlightedContent(line.content, newHighlighted, line.newLineNum), lineNum: line.newLineNum });\n\n                            break;\n                        }\n                        case \"del\": {\n                            if (line.pairedIndex === undefined) {\n                                leftLines.push({\n                                    content: renderHighlightedContent(line.content, oldHighlighted, line.oldLineNum, \"red\"),\n                                    lineNum: line.oldLineNum,\n                                });\n                                rightLines.push({ content: <Text dimColor /> });\n                            } else {\n                                const pairedLine = hunk.lines[line.pairedIndex]!;\n\n                                leftLines.push({\n                                    content: line.inlineDiff\n                                        ? renderInlineParts(line.inlineDiff.delParts, \"red\", \"red\")\n                                        : renderHighlightedContent(line.content, oldHighlighted, line.oldLineNum, \"red\"),\n                                    lineNum: line.oldLineNum,\n                                });\n                                rightLines.push({\n                                    content: pairedLine.inlineDiff\n                                        ? renderInlineParts(pairedLine.inlineDiff.addParts, \"green\", \"green\")\n                                        : renderHighlightedContent(pairedLine.content, newHighlighted, pairedLine.newLineNum, \"green\"),\n                                    lineNum: pairedLine.newLineNum,\n                                });\n                            }\n\n                            break;\n                        }\n                        // No default\n                    }\n                }\n\n                const rowCount = Math.max(leftLines.length, rightLines.length);\n\n                return (\n                    <Box flexDirection=\"column\" key={hunkIndex}>\n                        {separator}\n                        <Text color=\"cyan\" dimColor>\n                            {hunk.header}\n                        </Text>\n                        {Array.from({ length: rowCount }, (_, rowIndex) => {\n                            const left = leftLines[rowIndex];\n                            const right = rightLines[rowIndex];\n\n                            return (\n                                <Box flexDirection=\"row\" key={rowIndex}>\n                                    <Box width={halfWidth}>\n                                        {showLineNumbers\n                                            ? (\n<Text dimColor>\n{String(left?.lineNum ?? \"\").padStart(4)}\n{\" \"}\n</Text>\n                                            )\n                                            : undefined}\n                                        {left?.content}\n                                    </Box>\n                                    <Text dimColor>│</Text>\n                                    <Box width={halfWidth}>\n                                        {showLineNumbers\n                                            ? (\n<Text dimColor>\n{String(right?.lineNum ?? \"\").padStart(4)}\n{\" \"}\n</Text>\n                                            )\n                                            : undefined}\n                                        {right?.content}\n                                    </Box>\n                                </Box>\n                            );\n                        })}\n                    </Box>\n                );\n            })}\n        </Box>\n    );\n}\n\n/**\n * Display file differences with colored additions/deletions.\n *\n * ```tsx\n * &lt;DiffView oldText=\"hello\" newText=\"hello world\" />\n * &lt;DiffView diff={unifiedDiffString} mode=\"split\" />\n * ```\n */\nexport default function DiffView({\n    context = 3,\n    diff: diffProp,\n    inlineDiff = true,\n    inlineDiffMode = \"chars\",\n    language,\n    mode = \"unified\",\n    newLabel = \"new\",\n    newText = \"\",\n    oldLabel = \"old\",\n    oldText = \"\",\n    showLineNumbers = true,\n    theme = \"github-dark-default\",\n}: Props): ReactElement {\n    const { columns } = useWindowSize();\n\n    // Syntax highlighting for old and new text\n    const oldHighlighted = useHighlightedLines(oldText, language, theme);\n    const newHighlighted = useHighlightedLines(newText, language, theme);\n\n    const diffString = useMemo(() => {\n        if (diffProp) {\n            return diffProp;\n        }\n\n        return createPatch(\"file\", oldText, newText, oldLabel, newLabel, { context });\n    }, [diffProp, oldText, newText, oldLabel, newLabel, context]);\n\n    const hunks = useMemo(() => parseDiffLines(diffString, inlineDiff, inlineDiffMode), [diffString, inlineDiff, inlineDiffMode]);\n\n    if (hunks.every((h) => h.lines.length === 0)) {\n        return (\n            <Box>\n                <Text dimColor>No differences found.</Text>\n            </Box>\n        );\n    }\n\n    // File labels\n    const labels = (\n        <Box flexDirection=\"column\">\n            <Text color=\"red\" dimColor>\n                ---\n{\" \"}\n{oldLabel}\n            </Text>\n            <Text color=\"green\" dimColor>\n                +++\n{\" \"}\n{newLabel}\n            </Text>\n        </Box>\n    );\n\n    if (mode === \"split\") {\n        return (\n            <Box flexDirection=\"column\">\n                {labels}\n                <SplitView\n                    hunks={hunks}\n                    newHighlighted={newHighlighted}\n                    oldHighlighted={oldHighlighted}\n                    showLineNumbers={showLineNumbers}\n                    width={columns ?? 80}\n                />\n            </Box>\n        );\n    }\n\n    return (\n        <Box flexDirection=\"column\">\n            {labels}\n            <UnifiedView hunks={hunks} newHighlighted={newHighlighted} oldHighlighted={oldHighlighted} showLineNumbers={showLineNumbers} />\n        </Box>\n    );\n}\n\nexport { DiffView };\nexport type { Props as DiffViewProps };\n",
+      "path": "registry/ui/diff-view.tsx",
+      "target": "components/ui/diff-view.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/digits.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "digits",
+  "type": "registry:ui",
+  "title": "Digits",
+  "description": "Digits component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\n// A compact three-row \"seven-segment\" font. Every glyph is three columns wide\n// so digits align into a stable readout.\nconst FONT: Record<string, readonly [string, string, string]> = {\n    \" \": [\"   \", \"   \", \"   \"],\n    0: [\" ▄ \", \"█ █\", \"▀▄▀\"],\n    1: [\" ▄ \", \" █ \", \" ▪ \"],\n    2: [\"▄▄ \", \" ▄▀\", \"▀▄▄\"],\n    3: [\"▄▄ \", \" ▄▀\", \"▄▄▀\"],\n    4: [\"   \", \"█▄█\", \"  █\"],\n    5: [\"▄▄▄\", \"█▄ \", \"▄▄▀\"],\n    6: [\" ▄ \", \"█▄ \", \"▀▄▀\"],\n    7: [\"▄▄▄\", \"  █\", \" █ \"],\n    8: [\" ▄ \", \"▄▀▄\", \"▀▄▀\"],\n    9: [\" ▄ \", \"▀▄█\", \" ▄▀\"],\n    \"-\": [\"   \", \" ─ \", \"   \"],\n    \".\": [\"   \", \"   \", \" ▪ \"],\n    \":\": [\"   \", \" ▪ \", \" ▪ \"],\n};\n\nconst FALLBACK: readonly [string, string, string] = [\"   \", \" ? \", \"   \"];\n\nexport type Props = {\n    /**\n     * Color of the digits.\n     * @default \"cyan\"\n     */\n    readonly color?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Number of spaces between glyphs.\n     * @default 1\n     */\n    readonly gap?: number;\n\n    /**\n     * The value to render. Numbers are stringified; unsupported characters\n     * render as `?`.\n     */\n    readonly value: number | string;\n};\n\n/**\n * A large seven-segment-style numeric readout. Supports digits, space, minus,\n * dot and colon — enough for counters, clocks and timers.\n */\nexport default function Digits({ color = \"cyan\", gap = 1, value }: Props): ReactElement {\n    const text = String(value);\n    const spacer = \" \".repeat(Math.max(0, gap));\n\n    const characters: string[] = [];\n\n    for (const char of text) {\n        characters.push(char);\n    }\n\n    const lines = [0, 1, 2].map((rowIndex) => characters.map((char) => (FONT[char] ?? FALLBACK)[rowIndex]).join(spacer));\n\n    return (\n        <Box flexDirection=\"column\">\n            {lines.map((line, index) => (\n                // eslint-disable-next-line react-x/no-array-index-key -- row index (0..2) is stable\n                <Text color={color} key={index}>\n                    {line}\n                </Text>\n            ))}\n        </Box>\n    );\n}\n\nexport { Digits };\nexport type { Props as DigitsProps };\n",
+      "path": "registry/ui/digits.tsx",
+      "target": "components/ui/digits.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/directory-tree.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "directory-tree",
+  "type": "registry:ui",
+  "title": "Directory Tree",
+  "description": "Directory Tree component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport useFocus from \"@visulima/tui/hooks/use-focus\";\nimport useInput from \"@visulima/tui/hooks/use-input\";\nimport type { ReactElement } from \"react\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type DirectoryNode = {\n    readonly children?: ReadonlyArray<DirectoryNode>;\n    readonly name: string;\n    readonly type: \"directory\" | \"file\";\n};\n\nexport type Props = {\n    /**\n     * Accent color for the focused row.\n     * @default \"blue\"\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Auto-focus for keyboard navigation.\n     */\n    readonly autoFocus?: boolean;\n\n    /**\n     * Start with every directory expanded.\n     * @default false\n     */\n    readonly defaultExpanded?: boolean;\n\n    /**\n     * Color used for directory names.\n     * @default \"cyan\"\n     */\n    readonly directoryColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * The tree to render.\n     */\n    readonly nodes: ReadonlyArray<DirectoryNode>;\n\n    /**\n     * Fires with the path segments when Enter is pressed on a file.\n     */\n    readonly onSelect?: (path: ReadonlyArray<string>) => void;\n};\n\ntype FlatEntry = {\n    readonly depth: number;\n    readonly id: string;\n    readonly node: DirectoryNode;\n    readonly path: ReadonlyArray<string>;\n};\n\nfunction wrap(value: number, size: number): number {\n    return size === 0 ? 0 : ((value % size) + size) % size;\n}\n\nfunction glyphFor(isDirectory: boolean, isOpen: boolean): string {\n    if (!isDirectory) {\n        return \"  📄\";\n    }\n\n    return isOpen ? \"▾ 📁\" : \"▸ 📁\";\n}\n\nconst flatten = (nodes: ReadonlyArray<DirectoryNode>, expanded: ReadonlySet<string>, depth: number, parentId: string, parentPath: ReadonlyArray<string>, out: FlatEntry[]): void => {\n    for (const node of nodes) {\n        const id = `${parentId}/${node.name}`;\n        const path = [...parentPath, node.name];\n\n        out.push({ depth, id, node, path });\n\n        if (node.type === \"directory\" && node.children !== undefined && expanded.has(id)) {\n            flatten(node.children, expanded, depth + 1, id, path, out);\n        }\n    }\n};\n\nconst collectExpandable = (nodes: ReadonlyArray<DirectoryNode>, parentId: string, out: Set<string>): void => {\n    for (const node of nodes) {\n        const id = `${parentId}/${node.name}`;\n\n        if (node.type === \"directory\" && node.children !== undefined) {\n            out.add(id);\n            collectExpandable(node.children, id, out);\n        }\n    }\n};\n\n/**\n * A read-only filesystem tree. Directories show a ▸/▾ toggle and a folder\n * glyph; files show a document glyph. Arrow keys navigate, →/← and Space\n * expand/collapse directories, and Enter fires `onSelect` with a file's path.\n */\nexport default function DirectoryTree({\n    accentColor = \"blue\",\n    autoFocus = false,\n    defaultExpanded = false,\n    directoryColor = \"cyan\",\n    nodes,\n    onSelect,\n}: Props): ReactElement {\n    const { isFocused } = useFocus({ autoFocus });\n\n    const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => {\n        if (!defaultExpanded) {\n            return new Set();\n        }\n\n        const set = new Set<string>();\n\n        collectExpandable(nodes, \"\", set);\n\n        return set;\n    });\n    const [cursor, setCursor] = useState(0);\n\n    const rows = useMemo(() => {\n        const out: FlatEntry[] = [];\n\n        flatten(nodes, expanded, 0, \"\", [], out);\n\n        return out;\n    }, [expanded, nodes]);\n\n    const toggle = useCallback((id: string, force?: boolean) => {\n        setExpanded((current) => {\n            const next = new Set(current);\n            const shouldExpand = force ?? !next.has(id);\n\n            if (shouldExpand) {\n                next.add(id);\n            } else {\n                next.delete(id);\n            }\n\n            return next;\n        });\n    }, []);\n\n    const inputHandler = useCallback(\n        (input: string, key: { downArrow: boolean; leftArrow: boolean; return: boolean; rightArrow: boolean; upArrow: boolean }) => {\n            const row = rows[cursor];\n\n            if (key.upArrow) {\n                setCursor((index) => wrap(index - 1, rows.length));\n\n                return;\n            }\n\n            if (key.downArrow) {\n                setCursor((index) => wrap(index + 1, rows.length));\n\n                return;\n            }\n\n            if (row === undefined) {\n                return;\n            }\n\n            // A directory (matches the folder glyph) is never \"selected\" on Enter,\n            // even when it has no children; only nodes with children can expand.\n            const isDirectory = row.node.type === \"directory\";\n            const isExpandable = isDirectory && row.node.children !== undefined;\n\n            if (isExpandable && (input === \" \" || key.rightArrow || key.leftArrow)) {\n                let force: boolean | undefined;\n\n                if (key.rightArrow) {\n                    force = true;\n                } else if (key.leftArrow) {\n                    force = false;\n                }\n\n                toggle(row.id, force);\n\n                return;\n            }\n\n            if (key.return && !isDirectory) {\n                onSelect?.(row.path);\n            }\n        },\n        [cursor, onSelect, rows, toggle],\n    );\n\n    useInput(inputHandler, { isActive: isFocused });\n\n    return (\n        <Box flexDirection=\"column\">\n            {rows.map((row, index) => {\n                const isActive = isFocused && index === cursor;\n                const isDirectory = row.node.type === \"directory\";\n                const isOpen = expanded.has(row.id);\n                const glyph = glyphFor(isDirectory, isOpen);\n\n                return (\n                    <Box key={row.id}>\n                        <Text color={isActive ? accentColor : undefined}>{isActive ? \"❯\" : \" \"}</Text>\n                        <Text>{\"  \".repeat(row.depth)}</Text>\n                        <Text color={isDirectory ? directoryColor : undefined}>\n                            {glyph}\n                            {\" \"}\n                            {row.node.name}\n                        </Text>\n                    </Box>\n                );\n            })}\n        </Box>\n    );\n}\n\nexport { DirectoryTree };\nexport type { Props as DirectoryTreeProps };\n",
+      "path": "registry/ui/directory-tree.tsx",
+      "target": "components/ui/directory-tree.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/divider.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "divider",
+  "type": "registry:ui",
+  "title": "Divider",
+  "description": "Divider 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 useWindowSize from \"@visulima/tui/hooks/use-window-size\";\nimport type { ReactElement } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type Props = {\n    /**\n     * Custom character to use instead of the default line character.\n     */\n    readonly character?: string;\n\n    /**\n     * Color of the divider line.\n     */\n    readonly color?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Render the divider with dim color.\n     */\n    readonly dimColor?: boolean;\n\n    /**\n     * Optional label rendered in the middle of a horizontal divider.\n     */\n    readonly label?: string;\n\n    /**\n     * Padding around the label.\n     * @default 1\n     */\n    readonly labelPadding?: number;\n\n    /**\n     * Total length of the divider. When omitted, horizontal dividers stretch to\n     * fill the available space and vertical dividers default to one row.\n     */\n    readonly length?: number;\n\n    /**\n     * Orientation of the divider.\n     * @default \"horizontal\"\n     */\n    readonly orientation?: \"horizontal\" | \"vertical\";\n};\n\n/**\n * Horizontal or vertical divider line, optionally with a centered label.\n */\nexport default function Divider({ character, color, dimColor = false, label, labelPadding = 1, length, orientation = \"horizontal\" }: Props): ReactElement {\n    const { columns } = useWindowSize();\n    const char = character ?? (orientation === \"horizontal\" ? \"─\" : \"│\");\n\n    if (orientation === \"vertical\") {\n        const rows = length ?? 1;\n\n        return (\n            <Box flexDirection=\"column\" height={rows}>\n                {Array.from({ length: rows }, (_, index) => (\n                    <Text color={color} dimColor={dimColor} key={`divider-row-${index}`}>\n                        {char}\n                    </Text>\n                ))}\n            </Box>\n        );\n    }\n\n    // Repeat long enough to fill the widest reasonable viewport; Yoga + Text\n    // `truncate` wrapping will clip the excess. Cap the allocation so a\n    // multi-thousand-column terminal (or a pathological `length` prop) can't\n    // blow up the string size.\n    const MAX_FILL = 500;\n    const fillLength = Math.min(MAX_FILL, length ?? Math.max(columns, 1));\n\n    if (label === undefined) {\n        return (\n            <Box flexGrow={length === undefined ? 1 : 0} width={length}>\n                <Text color={color} dimColor={dimColor} wrap=\"truncate\">\n                    {char.repeat(fillLength)}\n                </Text>\n            </Box>\n        );\n    }\n\n    const padding = \" \".repeat(labelPadding);\n\n    return (\n        <Box flexGrow={length === undefined ? 1 : 0} width={length}>\n            <Box flexGrow={1} flexShrink={1}>\n                <Text color={color} dimColor={dimColor} wrap=\"truncate\">\n                    {char.repeat(fillLength)}\n                </Text>\n            </Box>\n            <Box flexShrink={0}>\n                <Text color={color} dimColor={dimColor}>\n                    {padding}\n                    {label}\n                    {padding}\n                </Text>\n            </Box>\n            <Box flexGrow={1} flexShrink={1}>\n                <Text color={color} dimColor={dimColor} wrap=\"truncate\">\n                    {char.repeat(fillLength)}\n                </Text>\n            </Box>\n        </Box>\n    );\n}\n\nexport { Divider };\nexport type { Props as DividerProps };\n",
+      "path": "registry/ui/divider.tsx",
+      "target": "components/ui/divider.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/drawer.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer",
+  "type": "registry:ui",
+  "title": "Drawer",
+  "description": "Drawer 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 useInput from \"@visulima/tui/hooks/use-input\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useCallback } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type Props = {\n    /**\n     * Accent color for the border and title.\n     * @default \"blue\"\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Drawer body.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Whether the drawer is open. When false, nothing is rendered.\n     */\n    readonly isOpen: boolean;\n\n    /**\n     * Fires when Escape is pressed while open.\n     */\n    readonly onClose?: () => void;\n\n    /**\n     * Edge the drawer is anchored to. Left/right drawers take a fixed `size`\n     * as width; top/bottom take it as height.\n     * @default \"right\"\n     */\n    readonly side?: \"bottom\" | \"left\" | \"right\" | \"top\";\n\n    /**\n     * Fixed extent (width for left/right, height for top/bottom) in cells.\n     * @default 32\n     */\n    readonly size?: number;\n\n    /**\n     * Optional title shown in the drawer header.\n     */\n    readonly title?: string;\n};\n\n/**\n * A slide-over panel anchored to a terminal edge. Rendered as a bordered box\n * sized along one axis; Escape fires `onClose`, and nothing renders while\n * closed. Terminals have no true overlay layer, so place the drawer where it\n * should appear in your layout.\n */\nexport default function Drawer({ accentColor = \"blue\", children, isOpen, onClose, side = \"right\", size = 32, title }: Props): ReactElement | null {\n    const inputHandler = useCallback(\n        (_input: string, key: { escape: boolean }) => {\n            if (key.escape) {\n                onClose?.();\n            }\n        },\n        [onClose],\n    );\n\n    useInput(inputHandler, { isActive: isOpen });\n\n    if (!isOpen) {\n        return null;\n    }\n\n    const horizontal = side === \"left\" || side === \"right\";\n\n    return (\n        <Box\n            borderColor={accentColor}\n            borderStyle=\"round\"\n            flexDirection=\"column\"\n            height={horizontal ? undefined : size}\n            paddingX={1}\n            width={horizontal ? size : undefined}\n        >\n            {title === undefined\n                ? undefined\n                : (\n                <Box justifyContent=\"space-between\">\n                    <Text bold color={accentColor}>\n                        {title}\n                    </Text>\n                    <Text dimColor>esc</Text>\n                </Box>\n                )}\n            <Box flexDirection=\"column\" marginTop={title === undefined ? 0 : 1}>\n                {children}\n            </Box>\n        </Box>\n    );\n}\n\nexport { Drawer };\nexport type { Props as DrawerProps };\n",
+      "path": "registry/ui/drawer.tsx",
+      "target": "components/ui/drawer.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/file-change.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "file-change",
+  "type": "registry:ui",
+  "title": "File Change",
+  "description": "File Change component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type FileChangeStatus = \"added\" | \"deleted\" | \"modified\" | \"renamed\";\n\nconst STATUS_META: Record<FileChangeStatus, { readonly color: LiteralUnion<AnsiColors, string>; readonly mark: string }> = {\n    added: { color: \"green\", mark: \"A\" },\n    deleted: { color: \"red\", mark: \"D\" },\n    modified: { color: \"yellow\", mark: \"M\" },\n    renamed: { color: \"blue\", mark: \"R\" },\n};\n\nexport type Props = {\n    /**\n     * Number of added lines.\n     * @default 0\n     */\n    readonly additions?: number;\n\n    /**\n     * Total width of the +/- change bar in cells.\n     * @default 10\n     */\n    readonly barWidth?: number;\n\n    /**\n     * Number of removed lines.\n     * @default 0\n     */\n    readonly deletions?: number;\n\n    /**\n     * The file path.\n     */\n    readonly path: string;\n\n    /**\n     * Change status, shown as a colored one-letter badge.\n     * @default \"modified\"\n     */\n    readonly status?: FileChangeStatus;\n};\n\n/**\n * A single git-style diff-stat row: a status badge, the path, the numeric\n * add/remove counts, and a proportional ▰/▱ change bar.\n */\nexport default function FileChange({ additions = 0, barWidth = 10, deletions = 0, path, status = \"modified\" }: Props): ReactElement {\n    const meta = STATUS_META[status];\n    const total = additions + deletions;\n    const plusCells = total === 0 ? 0 : Math.round((additions / total) * barWidth);\n    const minusCells = total === 0 ? 0 : Math.min(barWidth - plusCells, Math.round((deletions / total) * barWidth));\n\n    return (\n        <Box gap={1}>\n            <Text bold color={meta.color}>\n                {meta.mark}\n            </Text>\n            <Text>{path}</Text>\n            <Text color=\"green\">{`+${additions}`}</Text>\n            <Text color=\"red\">{`-${deletions}`}</Text>\n            <Box>\n                <Text color=\"green\">{\"▰\".repeat(plusCells)}</Text>\n                <Text color=\"red\">{\"▰\".repeat(minusCells)}</Text>\n                <Text dimColor>{\"▱\".repeat(Math.max(0, barWidth - plusCells - minusCells))}</Text>\n            </Box>\n        </Box>\n    );\n}\n\nexport { FileChange };\nexport type { Props as FileChangeProps };\n",
+      "path": "registry/ui/file-change.tsx",
+      "target": "components/ui/file-change.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/file-picker.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "file-picker",
+  "type": "registry:ui",
+  "title": "File Picker",
+  "description": "File Picker component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui",
+    "node:fs",
+    "node:path"
+  ],
+  "registryDependencies": [
+    "https://visulima.com/r/spinner.json"
+  ],
+  "files": [
+    {
+      "content": "import Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport useInput from \"@visulima/tui/hooks/use-input\";\nimport type { ReactElement } from \"react\";\nimport { useCallback, useState } from \"react\";\n\nimport Spinner from \"@/components/ui/spinner\";\nimport type { FileEntry, FilePickerFilter } from \"./types\";\nimport useFileSystem from \"./use-file-system\";\n\nexport type Props = {\n    /**\n     * Color for the focused item highlight.\n     * @default \"cyan\"\n     */\n    readonly accentColor?: string;\n\n    /**\n     * Color for directory entries.\n     * @default \"blue\"\n     */\n    readonly directoryColor?: string;\n\n    /**\n     * Color for file entries.\n     * @default \"white\"\n     */\n    readonly fileColor?: string;\n\n    /**\n     * File filter options.\n     */\n    readonly filter?: FilePickerFilter;\n\n    /**\n     * Starting directory path.\n     * @default process.cwd()\n     */\n    readonly initialPath?: string;\n\n    /**\n     * Whether keyboard navigation is active.\n     * @default true\n     */\n    readonly isFocused?: boolean;\n\n    /**\n     * Maximum number of visible items (viewport height).\n     * @default 10\n     */\n    readonly limit?: number;\n\n    /**\n     * Called when escape is pressed.\n     */\n    readonly onCancel?: () => void;\n\n    /**\n     * Called when a file is selected (enter on a file entry).\n     */\n    readonly onSelect?: (entry: FileEntry) => void;\n\n    /**\n     * Show file permissions column.\n     * @default false\n     */\n    readonly showPermissions?: boolean;\n\n    /**\n     * Show file size column.\n     * @default false\n     */\n    readonly showSize?: boolean;\n};\n\nfunction formatSize(bytes: number): string {\n    if (bytes < 1024) {\n        return `${bytes}B`;\n    }\n\n    if (bytes < 1024 * 1024) {\n        return `${(bytes / 1024).toFixed(1)}K`;\n    }\n\n    if (bytes < 1024 * 1024 * 1024) {\n        return `${(bytes / (1024 * 1024)).toFixed(1)}M`;\n    }\n\n    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)}G`;\n}\n\n/**\n * A file system browser component for picking files from the terminal.\n *\n * ```tsx\n * &lt;FilePicker\n *   onSelect={(entry) => console.log(\"Selected:\", entry.path)}\n *   filter={{ extensions: [\".ts\", \".tsx\"] }}\n * />\n * ```\n */\n// Stable defaults hoisted to module scope — using fresh `{}` / `process.cwd()`\n// as default props creates a new reference on every render, which triggers\n// re-render loops in children that memoize on reference equality.\nconst EMPTY_FILTER: NonNullable<Props[\"filter\"]> = {};\nconst getDefaultInitialPath = (): string => process.cwd();\n\nconst FilePicker = ({\n    accentColor = \"cyan\",\n    directoryColor = \"blue\",\n    fileColor = \"white\",\n    filter = EMPTY_FILTER,\n    initialPath,\n    isFocused = true,\n    limit = 10,\n    onCancel,\n    onSelect,\n    showPermissions = false,\n    showSize = false,\n}: Props): ReactElement => {\n    const resolvedInitialPath = initialPath ?? getDefaultInitialPath();\n    const fs = useFileSystem({ filter, initialPath: resolvedInitialPath });\n    const [focusedIndex, setFocusedIndex] = useState(0);\n\n    // Clamp focused index to valid range\n    const maxIndex = Math.max(0, fs.entries.length - 1);\n    const safeIndex = Math.min(focusedIndex, maxIndex);\n\n    useInput(\n        useCallback(\n            (_input: string, key) => {\n                if (key.upArrow) {\n                    setFocusedIndex((i) => Math.max(0, i - 1));\n                } else if (key.downArrow) {\n                    setFocusedIndex((i) => Math.min(maxIndex, i + 1));\n                } else if (key.return) {\n                    const entry = fs.entries[safeIndex];\n\n                    if (entry) {\n                        if (entry.isDirectory) {\n                            fs.navigateTo(entry.path);\n                            setFocusedIndex(0);\n                        } else {\n                            onSelect?.(entry);\n                        }\n                    }\n                } else if (key.backspace || key.leftArrow) {\n                    fs.goUp();\n                    setFocusedIndex(0);\n                } else if (key.escape) {\n                    onCancel?.();\n                } else if (_input === \".\") {\n                    fs.refresh();\n                } else if (key.pageUp) {\n                    setFocusedIndex((i) => Math.max(0, i - limit));\n                } else if (key.pageDown) {\n                    setFocusedIndex((i) => Math.min(maxIndex, i + limit));\n                } else if (key.home) {\n                    setFocusedIndex(0);\n                } else if (key.end) {\n                    setFocusedIndex(maxIndex);\n                }\n            },\n            [maxIndex, safeIndex, fs, limit, onSelect, onCancel],\n        ),\n        { isActive: isFocused },\n    );\n\n    // Viewport window\n    const halfLimit = Math.floor(limit / 2);\n    let windowStart = Math.max(0, safeIndex - halfLimit);\n    const windowEnd = Math.min(fs.entries.length, windowStart + limit);\n\n    windowStart = Math.max(0, windowEnd - limit);\n\n    const visibleEntries = fs.entries.slice(windowStart, windowEnd);\n\n    return (\n        <Box flexDirection=\"column\">\n            <Text bold dimColor>\n                {fs.currentPath}\n            </Text>\n\n            {fs.isLoading && (\n                <Box>\n                    <Spinner />\n                    <Text> Loading...</Text>\n                </Box>\n            )}\n\n            {fs.error && (\n                <Text color=\"red\">\n                    Error:\n                    {fs.error}\n                </Text>\n            )}\n\n            {!fs.isLoading && !fs.error && fs.entries.length === 0 && <Text dimColor>(empty directory)</Text>}\n\n            {visibleEntries.map((entry, viewIndex) => {\n                const absoluteIndex = windowStart + viewIndex;\n                const isFocusedEntry = absoluteIndex === safeIndex;\n                const icon = entry.isDirectory ? \"\\uD83D\\uDCC1 \" : \"\\uD83D\\uDCC4 \";\n                const nameColor = entry.isDirectory ? directoryColor : fileColor;\n\n                return (\n                    <Box key={entry.name}>\n                        <Text color={isFocusedEntry ? accentColor : undefined}>{isFocusedEntry ? \"\\u25B8 \" : \"  \"}</Text>\n                        <Text>{icon}</Text>\n                        <Text bold={entry.isDirectory} color={isFocusedEntry ? accentColor : nameColor}>\n                            {entry.name}\n                            {entry.isDirectory ? \"/\" : \"\"}\n                        </Text>\n                        {showSize && !entry.isDirectory && (\n                            <Text dimColor>\n                                {\"  \"}\n                                {formatSize(entry.size)}\n                            </Text>\n                        )}\n                        {showPermissions && (\n                            <Text dimColor>\n                                {\"  \"}\n                                {entry.permissions}\n                            </Text>\n                        )}\n                    </Box>\n                );\n            })}\n\n            {fs.entries.length > limit && (\n                <Text dimColor>\n                    {safeIndex + 1}\n/\n{fs.entries.length}\n                </Text>\n            )}\n        </Box>\n    );\n};\n\nexport default FilePicker;\n",
+      "path": "registry/ui/file-picker/file-picker.tsx",
+      "target": "components/ui/file-picker/file-picker.tsx",
+      "type": "registry:ui"
+    },
+    {
+      "content": "// fallow-ignore-file unused-type -- public component API barrel; re-exports consumed by library users, not internally.\n// fallow-ignore-file unused-export -- public component API barrel; re-exports consumed by library users, not internally.\nexport type { Props as FilePickerProps } from \"./file-picker\";\nexport { default as FilePicker } from \"./file-picker\";\nexport type { FileEntry, FilePickerFilter } from \"./types\";\n",
+      "path": "registry/ui/file-picker/index.ts",
+      "target": "components/ui/file-picker/index.ts",
+      "type": "registry:ui"
+    },
+    {
+      "content": "/**\n * A single entry (file or directory) returned by the file system hook.\n */\nexport type FileEntry = {\n    readonly isDirectory: boolean;\n    readonly isHidden: boolean;\n    readonly name: string;\n    readonly path: string;\n    readonly permissions: string;\n    readonly size: number;\n};\n\n/**\n * Filter options for the file picker.\n */\nexport type FilePickerFilter = {\n    /**\n     * Allowed file extensions (e.g. `[\".ts\", \".tsx\"]`). Empty or omitted means all.\n     */\n    readonly extensions?: ReadonlyArray<string>;\n\n    /**\n     * Whether to include directories in the list.\n     * @default true\n     */\n    readonly showDirectories?: boolean;\n\n    /**\n     * Whether to include regular files in the list.\n     * @default true\n     */\n    readonly showFiles?: boolean;\n\n    /**\n     * Whether to include hidden files (names starting with `.`).\n     * @default false\n     */\n    readonly showHidden?: boolean;\n};\n",
+      "path": "registry/ui/file-picker/types.ts",
+      "target": "components/ui/file-picker/types.ts",
+      "type": "registry:ui"
+    },
+    {
+      "content": "import { readdir, stat } from \"node:fs/promises\";\nimport { dirname, extname, join, resolve } from \"node:path\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport type { FileEntry, FilePickerFilter } from \"./types\";\n\ntype UseFileSystemOptions = {\n    readonly filter: FilePickerFilter;\n    readonly initialPath: string;\n};\n\ntype UseFileSystemResult = {\n    readonly currentPath: string;\n    readonly entries: ReadonlyArray<FileEntry>;\n    readonly error: string | undefined;\n    readonly goUp: () => void;\n    readonly isLoading: boolean;\n    readonly navigateTo: (path: string) => void;\n    readonly refresh: () => void;\n};\n\nfunction formatPermissions(mode: number): string {\n    const rwx = (m: number): string =>\n        // eslint-disable-next-line no-bitwise\n        `${m & 4 ? \"r\" : \"-\"}${m & 2 ? \"w\" : \"-\"}${m & 1 ? \"x\" : \"-\"}`;\n\n    // eslint-disable-next-line no-bitwise\n    return `${rwx((mode >> 6) & 7)}${rwx((mode >> 3) & 7)}${rwx(mode & 7)}`;\n}\n\nfunction matchesFilter(entry: FileEntry, filter: FilePickerFilter): boolean {\n    if (!(filter.showHidden ?? false) && entry.isHidden) {\n        return false;\n    }\n\n    if (!(filter.showDirectories ?? true) && entry.isDirectory) {\n        return false;\n    }\n\n    if (!(filter.showFiles ?? true) && !entry.isDirectory) {\n        return false;\n    }\n\n    if (filter.extensions && filter.extensions.length > 0 && !entry.isDirectory) {\n        const extension = extname(entry.name);\n\n        if (!filter.extensions.includes(extension)) {\n            return false;\n        }\n    }\n\n    return true;\n}\n\nexport default function useFileSystem(options: UseFileSystemOptions): UseFileSystemResult {\n    const { filter, initialPath } = options;\n\n    const [currentPath, setCurrentPath] = useState(() => resolve(initialPath));\n    const [entries, setEntries] = useState<ReadonlyArray<FileEntry>>([]);\n    const [isLoading, setIsLoading] = useState(true);\n    const [error, setError] = useState<string | undefined>();\n    const [refreshKey, setRefreshKey] = useState(0);\n\n    const filterRef = useRef(filter);\n\n    filterRef.current = filter;\n\n    useEffect(() => {\n        let cancelled = false;\n\n        const loadDirectory = async (): Promise<void> => {\n            setIsLoading(true);\n            setError(undefined);\n\n            try {\n                const directoryEntries = await readdir(currentPath, { withFileTypes: true });\n\n                // Gather stats for all entries in parallel — sequential stat() calls\n                // serialize filesystem latency unnecessarily.\n                const statsResults = await Promise.all(\n                    directoryEntries.map(async (entry) => {\n                        try {\n                            return await stat(join(currentPath, entry.name));\n                        } catch {\n                            return undefined;\n                        }\n                    }),\n                );\n\n                const fileEntries: FileEntry[] = directoryEntries.map((entry, index) => {\n                    const entryPath = join(currentPath, entry.name);\n                    const isDirectory = entry.isDirectory();\n                    const isHidden = entry.name.startsWith(\".\");\n                    const stats = statsResults[index];\n                    const size = stats?.size ?? 0;\n                    const permissions = stats ? formatPermissions(stats.mode) : \"---------\";\n\n                    return {\n                        isDirectory,\n                        isHidden,\n                        name: entry.name,\n                        path: entryPath,\n                        permissions,\n                        size,\n                    };\n                });\n\n                if (cancelled) {\n                    return;\n                }\n\n                // Filter entries\n                const filtered = fileEntries.filter((entry) => matchesFilter(entry, filterRef.current));\n\n                // Sort: directories first, then alphabetical (case-insensitive)\n                filtered.sort((a, b) => {\n                    if (a.isDirectory !== b.isDirectory) {\n                        return a.isDirectory ? -1 : 1;\n                    }\n\n                    return a.name.localeCompare(b.name, undefined, { sensitivity: \"base\" });\n                });\n\n                setEntries(filtered);\n            } catch (error_: unknown) {\n                if (!cancelled) {\n                    setError(error_ instanceof Error ? error_.message : String(error_));\n                    setEntries([]);\n                }\n            } finally {\n                if (!cancelled) {\n                    setIsLoading(false);\n                }\n            }\n        };\n\n        loadDirectory().catch(() => undefined);\n\n        return () => {\n            cancelled = true;\n        };\n    }, [currentPath, refreshKey]);\n\n    const navigateTo = useCallback((path: string) => {\n        setCurrentPath(resolve(path));\n    }, []);\n\n    const goUp = useCallback(() => {\n        setCurrentPath((previous) => {\n            const parent = dirname(previous);\n\n            // Don't go above root\n            return parent === previous ? previous : parent;\n        });\n    }, []);\n\n    const refresh = useCallback(() => {\n        setRefreshKey((k) => k + 1);\n    }, []);\n\n    return { currentPath, entries, error, goUp, isLoading, navigateTo, refresh };\n}\n",
+      "path": "registry/ui/file-picker/use-file-system.ts",
+      "target": "components/ui/file-picker/use-file-system.ts",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/form.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "form",
+  "type": "registry:ui",
+  "title": "Form",
+  "description": "Form component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "import 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 FormFieldProps = {\n    /**\n     * The input element (TextInput, Checkbox, Select, …).\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Optional helper text rendered beneath the input.\n     */\n    readonly description?: string;\n\n    /**\n     * Validation error — dimmed red below the input.\n     */\n    readonly error?: string;\n\n    /**\n     * When true, the field's label and description are dim.\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * Label rendered above the input.\n     */\n    readonly label: string;\n\n    /**\n     * Mark the field as required (adds a trailing `*`).\n     */\n    readonly required?: boolean;\n};\n\n/**\n * Standard form field wrapper: label + input + helper/error.\n */\nexport const FormField = ({ children, description, error, isDisabled = false, label, required = false }: FormFieldProps): ReactElement => (\n    <Box flexDirection=\"column\" marginBottom={1}>\n        <Box>\n            <Text bold dimColor={isDisabled}>\n                {label}\n            </Text>\n            {required ? <Text color=\"red\"> *</Text> : undefined}\n        </Box>\n        <Box marginTop={0}>{children}</Box>\n        {/* eslint-disable-next-line sonarjs/no-nested-conditional -- minimal three-way render: error → description → nothing */}\n        {error === undefined ? description === undefined ? undefined : <Text dimColor>{description}</Text> : <Text color=\"red\">{error}</Text>}\n    </Box>\n);\n\nexport type Props = {\n    /**\n     * Accent color for the form chrome.\n     * @default \"blue\"\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Render a border around the form.\n     * @default true\n     */\n    readonly bordered?: boolean;\n\n    /**\n     * Fields composed via `&lt;FormField />`.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Optional description rendered under the title.\n     */\n    readonly description?: string;\n\n    /**\n     * Optional footer rendered below the fields (buttons, hints, summary).\n     */\n    readonly footer?: ReactNode;\n\n    /**\n     * Optional heading rendered at the top.\n     */\n    readonly title?: string;\n\n    /**\n     * Fixed width.\n     */\n    readonly width?: number;\n};\n\ntype FormComponent = ((props: Props) => ReactElement) & { Field: typeof FormField };\n\n/**\n * Stateless form layout. Pair with the `useForm` hook for state management\n * and `FormField` for consistent label/error styling.\n */\nconst Form: FormComponent = Object.assign(\n    ({ accentColor = \"blue\", bordered = true, children, description, footer, title, width }: Props): ReactElement => {\n        const content = (\n            <Box flexDirection=\"column\">\n                {title === undefined\n                    ? undefined\n                    : (\n                    <Box marginBottom={1}>\n                        <Text bold color={accentColor}>\n                            {title}\n                        </Text>\n                    </Box>\n                    )}\n                {description === undefined\n                    ? undefined\n                    : (\n                    <Box marginBottom={1}>\n                        <Text dimColor>{description}</Text>\n                    </Box>\n                    )}\n                <Box flexDirection=\"column\">{children}</Box>\n                {footer === undefined ? undefined : <Box marginTop={1}>{footer}</Box>}\n            </Box>\n        );\n\n        if (!bordered) {\n            return (\n                <Box flexDirection=\"column\" width={width}>\n                    {content}\n                </Box>\n            );\n        }\n\n        return (\n            <Box borderColor={accentColor} borderStyle=\"round\" flexDirection=\"column\" paddingX={1} paddingY={1} width={width}>\n                {content}\n            </Box>\n        );\n    },\n    { Field: FormField },\n);\n\nexport default Form;\n\nexport { Form };\nexport type { Props as FormProps };\n",
+      "path": "registry/ui/form.tsx",
+      "target": "components/ui/form.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/gauge.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "gauge",
+  "type": "registry:ui",
+  "title": "Gauge",
+  "description": "Gauge 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 type { CanvasContext } from \"@visulima/tui/canvas\";\nimport { createBrailleGrid } from \"@visulima/tui/canvas\";\nimport Box from \"@visulima/tui/components/box\";\nimport Canvas from \"@visulima/tui/components/canvas\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement } from \"react\";\nimport { useMemo } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type GaugeThreshold = {\n    /**\n     * Color used for the arc segment and, when the current value falls into\n     * this segment, for the value readout.\n     */\n    readonly color: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Optional label used by the legend under the gauge.\n     */\n    readonly label?: string;\n\n    /**\n     * Upper bound of this threshold segment (inclusive). Segments are sorted\n     * ascending and painted in order.\n     */\n    readonly max: number;\n};\n\nexport type GaugeSize = \"large\" | \"medium\" | \"small\";\n\nexport type Props = {\n    /**\n     * Color of the arc background (the portion beyond `value`).\n     * @default \"gray\"\n     */\n    readonly backgroundColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Format for the numeric readout. Defaults to rounding to an integer.\n     */\n    readonly formatValue?: (value: number) => string;\n\n    /**\n     * Optional label rendered above the readout.\n     */\n    readonly label?: string;\n\n    /**\n     * Upper bound of the range.\n     * @default 100\n     */\n    readonly max?: number;\n\n    /**\n     * Lower bound of the range.\n     * @default 0\n     */\n    readonly min?: number;\n\n    /**\n     * Show a legend listing thresholds below the gauge.\n     * @default false\n     */\n    readonly showLegend?: boolean;\n\n    /**\n     * Show a numeric readout in the middle of the gauge.\n     * @default true\n     */\n    readonly showValue?: boolean;\n\n    /**\n     * Overall dimension preset.\n     * @default \"medium\"\n     */\n    readonly size?: GaugeSize;\n\n    /**\n     * Color threshold ramp. When provided, segments of the arc are painted in\n     * the corresponding colors and the value readout picks up the color for\n     * the segment `value` lands in.\n     */\n    readonly thresholds?: ReadonlyArray<GaugeThreshold>;\n\n    /**\n     * Current value. Clamped into the `[min, max]` range.\n     */\n    readonly value: number;\n};\n\ntype Size = { readonly cols: number; readonly rows: number };\n\nconst SIZES: Record<GaugeSize, Size> = {\n    large: { cols: 40, rows: 10 },\n    medium: { cols: 24, rows: 6 },\n    small: { cols: 16, rows: 4 },\n};\n\nconst NEEDLE_RATIO = 0.9;\nconst ARC_ANGLE_STEPS_PER_PIXEL = 2;\n\nconst defaultFormat = (value: number): string => String(Math.round(value));\n\n/**\n * Find the threshold segment that `ratio` lands in. `ratio` is in [0, 1] and\n * maps onto the [min, max] range.\n */\nconst thresholdAtRatio = (thresholds: ReadonlyArray<GaugeThreshold>, min: number, max: number, ratio: number): GaugeThreshold | undefined => {\n    const value = min + (max - min) * ratio;\n\n    for (const threshold of thresholds) {\n        if (value <= threshold.max) {\n            return threshold;\n        }\n    }\n\n    return thresholds[thresholds.length - 1];\n};\n\n/**\n * Semi-circular gauge rendered at 2x4 sub-cell resolution. Supports colored\n * threshold segments and an optional needle.\n */\nexport default function Gauge({\n    backgroundColor = \"gray\",\n    formatValue = defaultFormat,\n    label,\n    max = 100,\n    min = 0,\n    showLegend = false,\n    showValue = true,\n    size = \"medium\",\n    thresholds,\n    value,\n}: Props): ReactElement {\n    const { cols, rows } = SIZES[size];\n    const clampedValue = Math.max(min, Math.min(max, value));\n    const range = max - min || 1;\n    const ratio = (clampedValue - min) / range;\n\n    // Sort once per threshold change; reused by both the active-threshold\n    // lookup and the draw loop below.\n    const sortedThresholds = useMemo(() => {\n        if (thresholds === undefined || thresholds.length === 0) {\n            return undefined;\n        }\n\n        return [...thresholds].toSorted((a, b) => a.max - b.max);\n    }, [thresholds]);\n\n    const activeThreshold = useMemo(() => {\n        if (sortedThresholds === undefined) {\n            return undefined;\n        }\n\n        return thresholdAtRatio(sortedThresholds, min, max, ratio);\n    }, [sortedThresholds, min, max, ratio]);\n\n    const readout = formatValue(clampedValue);\n\n    return (\n        <Box flexDirection=\"column\">\n            <Canvas\n                // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop -- canvas re-renders on `version` change, not draw identity\n                draw={(context: CanvasContext) => {\n                    context.clear();\n\n                    const pixelWidth = context.width * 2;\n                    const pixelHeight = context.height * 4;\n                    // Center at bottom middle of the grid.\n                    const cx = pixelWidth / 2;\n                    const cy = pixelHeight - 1;\n                    // Leave 1 pixel of padding around the arc.\n                    const rx = pixelWidth / 2 - 1;\n                    const ry = pixelHeight - 1;\n                    const radius = Math.max(1, Math.min(rx, ry));\n\n                    // One braille grid per color so different segments keep\n                    // their colors cleanly (each flush paints its own color).\n                    const gridsByColor = new Map<string, ReturnType<typeof createBrailleGrid>>();\n\n                    const gridFor = (color: string) => {\n                        const existing = gridsByColor.get(color);\n\n                        if (existing !== undefined) {\n                            return existing;\n                        }\n\n                        const grid = createBrailleGrid(context.width, context.height);\n\n                        gridsByColor.set(color, grid);\n\n                        return grid;\n                    };\n\n                    const arcSteps = Math.max(32, Math.round(Math.PI * radius) * ARC_ANGLE_STEPS_PER_PIXEL);\n\n                    for (let step = 0; step <= arcSteps; step += 1) {\n                        // θ from π (left) to 0 (right)\n                        const stepRatio = step / arcSteps;\n                        const angle = Math.PI * (1 - stepRatio);\n                        const px = Math.round(cx + radius * Math.cos(angle));\n                        const py = Math.round(cy - radius * Math.sin(angle));\n\n                        let color: string;\n\n                        if (stepRatio > ratio) {\n                            color = backgroundColor;\n                        } else if (sortedThresholds) {\n                            const segment = thresholdAtRatio(sortedThresholds, min, max, stepRatio);\n\n                            color = segment?.color ?? \"cyan\";\n                        } else {\n                            color = \"cyan\";\n                        }\n\n                        const grid = gridFor(color);\n\n                        grid.plotPoint(px, py);\n                    }\n\n                    // Needle: from center to current position at NEEDLE_RATIO of the radius.\n                    const needleRadius = radius * NEEDLE_RATIO;\n                    const needleAngle = Math.PI * (1 - ratio);\n                    const nx = Math.round(cx + needleRadius * Math.cos(needleAngle));\n                    const ny = Math.round(cy - needleRadius * Math.sin(needleAngle));\n                    const needleColor = (activeThreshold?.color ?? \"white\") as string;\n                    const needleGrid = gridFor(needleColor);\n\n                    needleGrid.plotLine(Math.round(cx), Math.round(cy), nx, ny);\n\n                    for (const [color, grid] of gridsByColor) {\n                        grid.flush(context, { color });\n                    }\n                }}\n                height={rows}\n                // eslint-disable-next-line react-perf/jsx-no-new-array-as-prop -- version array is the canvas redraw key\n                version={[value, min, max, size, thresholds, backgroundColor]}\n                width={cols}\n            />\n            {/* eslint-disable-next-line @stylistic/multiline-ternary -- prettier formats JSX ternaries on one line */}\n            {showValue || label ? (\n                <Box flexDirection=\"column\">\n                    {/* eslint-disable-next-line @stylistic/multiline-ternary -- prettier formats JSX ternaries on one line */}\n                    {label === undefined ? undefined : (\n                        <Box justifyContent=\"center\">\n                            <Text dimColor>{label}</Text>\n                        </Box>\n                    )}\n                    {/* eslint-disable-next-line @stylistic/multiline-ternary -- prettier formats JSX ternaries on one line */}\n                    {showValue ? (\n                        <Box justifyContent=\"center\">\n                            <Text bold color={activeThreshold?.color ?? \"white\"}>\n                                {readout}\n                            </Text>\n                        </Box>\n                    ) : undefined}\n                </Box>\n            ) : undefined}\n            {/* eslint-disable-next-line @stylistic/multiline-ternary -- prettier formats JSX ternaries on one line */}\n            {showLegend && thresholds && thresholds.length > 0 ? (\n                <Box gap={2} justifyContent=\"center\" marginTop={1}>\n                    {thresholds.map((threshold, index) => (\n                        // eslint-disable-next-line react-x/no-array-index-key -- threshold index is stable for the render\n                        <Box gap={1} key={index}>\n                            <Text color={threshold.color}>●</Text>\n                            <Text dimColor>{threshold.label ?? `≤ ${threshold.max}`}</Text>\n                        </Box>\n                    ))}\n                </Box>\n            ) : undefined}\n        </Box>\n    );\n}\n\nexport { Gauge };\nexport type { Props as GaugeProps };\n",
+      "path": "registry/ui/gauge.tsx",
+      "target": "components/ui/gauge.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/gradient.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "gradient",
+  "type": "registry:ui",
+  "title": "Gradient",
+  "description": "Gradient component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/ansi",
+    "@visulima/colorize",
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable @stylistic/no-extra-parens, react/function-component-definition */\nimport { strip } from \"@visulima/ansi\";\nimport { multilineGradient } from \"@visulima/colorize/gradient\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport Transform from \"@visulima/tui/components/transform\";\nimport type { Key, ReactElement, ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\";\n\n/**\n * A color stop for the gradient — hex string, CSS color name, RGB tuple, RGB object, or positioned stop.\n */\ntype GradientStop = Parameters<typeof multilineGradient>[0][number];\n\n/**\n * Built-in gradient presets.\n */\ntype GradientName = \"atlas\" | \"cristal\" | \"fruit\" | \"instagram\" | \"mind\" | \"morning\" | \"pastel\" | \"passion\" | \"rainbow\" | \"retro\" | \"summer\" | \"teen\" | \"vice\";\n\n/**\n * Custom gradient colors — an array of color stops accepted by `@visulima/colorize`'s gradient API.\n */\ntype GradientColors = GradientStop[];\n\nconst presets: Record<GradientName, { colors: GradientStop[]; options?: { hsvSpin?: \"long\" | \"short\"; interpolation?: \"hsv\" | \"rgb\" } }> = {\n    atlas: { colors: [\"#feac5e\", \"#c779d0\", \"#4bc0c8\"] },\n    cristal: { colors: [\"#bdfff3\", \"#4ac29a\"] },\n    fruit: { colors: [\"#ff4e50\", \"#f9d423\"] },\n    instagram: { colors: [\"#833ab4\", \"#fd1d1d\", \"#fcb045\"] },\n    mind: { colors: [\"#473b7b\", \"#3584a7\", \"#30d2be\"] },\n    morning: { colors: [\"#ff5f6d\", \"#ffc371\"], options: { interpolation: \"hsv\" } },\n    passion: { colors: [\"#f43b47\", \"#453a94\"] },\n    pastel: { colors: [\"#74ebd5\", \"#74ecd5\"], options: { hsvSpin: \"long\", interpolation: \"hsv\" } },\n    rainbow: { colors: [\"#ff0000\", \"#ff0100\"], options: { hsvSpin: \"long\", interpolation: \"hsv\" } },\n    retro: { colors: [\"#3f51b1\", \"#5a55ae\", \"#7b5fac\", \"#8f6aae\", \"#a86aa4\", \"#cc6b8e\", \"#f18271\", \"#f3a469\", \"#f7c978\"] },\n    summer: { colors: [\"#fdbb2d\", \"#22c1c3\"] },\n    teen: { colors: [\"#77a1d3\", \"#79cbca\", \"#e684ae\"] },\n    vice: { colors: [\"#5ee7df\", \"#b490ca\"], options: { interpolation: \"hsv\" } },\n};\n\nexport type Props = {\n    /**\n     * The content to colorize.\n     *\n     * Multiple `&lt;Text>` children are treated as separate nodes, which preserves layout when `&lt;Gradient>` is placed inside a `&lt;Box flexDirection=\"column\">`.\n     *\n     * If you want a continuous gradient across multiple lines, pass a single string or a single `&lt;Text>` with `\\n`.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * [Colors to use to make the gradient.](https://visulima.com/packages/colorize)\n     *\n     * Mutually exclusive with `name`.\n     */\n    readonly colors?: GradientColors;\n\n    /**\n     * The name of a built-in gradient preset.\n     *\n     * Mutually exclusive with `colors`.\n     */\n    readonly name?: GradientName;\n};\n\n/**\n * Apply a terminal gradient to child text content using `@visulima/colorize`.\n * @example\n * ```tsx\n * import { Gradient, Text } from \"@visulima/tui/ink\";\n *\n * <Gradient name=\"rainbow\">\n *   <Text>Hello, World!</Text>\n * </Gradient>\n * ```\n */\nconst containsBoxDescendant = (nodeChildren: ReactNode): boolean => {\n    let hasBox = false;\n\n    const search = (value: ReactNode) => {\n        // eslint-disable-next-line react-x/no-children-for-each\n        Children.forEach(value, (child) => {\n            if (hasBox) {\n                return;\n            }\n\n            if (!isValidElement(child)) {\n                return;\n            }\n\n            if (child.type === Box) {\n                hasBox = true;\n\n                return;\n            }\n\n            const childProps = child.props as Record<string, unknown>;\n\n            if (Object.hasOwn(childProps, \"children\")) {\n                search(childProps[\"children\"] as ReactNode);\n            }\n        });\n    };\n\n    search(nodeChildren);\n\n    return hasBox;\n};\n\nconst hasChildrenProp = (properties: Record<string, unknown>) => Object.hasOwn(properties, \"children\");\nconst isPlainTextNode = (node: ReactNode): node is number | string => typeof node === \"string\" || typeof node === \"number\";\nconst isNonRenderableChild = (node: ReactNode) => node === null || node === undefined || typeof node === \"boolean\";\n\nexport default function Gradient({ children, colors, name }: Props): ReactElement | null {\n    if (name && colors) {\n        throw new Error(\"The `name` and `colors` props are mutually exclusive\");\n    }\n\n    if (!name && !colors) {\n        throw new Error(\"Either `name` or `colors` prop must be provided\");\n    }\n\n    const gradientFunction = useMemo(\n        () => (name ? multilineGradient(presets[name].colors, presets[name].options) : multilineGradient(colors ?? [])),\n        [name, colors],\n    );\n    const applyGradient = (text: string) => gradientFunction(strip(text));\n    // eslint-disable-next-line react-x/no-children-count\n    const childrenCount = Children.count(children);\n\n    if (isPlainTextNode(children)) {\n        return <Transform transform={applyGradient}>{children}</Transform>;\n    }\n\n    if (childrenCount === 1 && !containsBoxDescendant(children)) {\n        return <Transform transform={applyGradient}>{children}</Transform>;\n    }\n\n    const applyGradientToChildren = (nodeChildren: ReactNode): ReactNode => {\n        const nodes: ReactNode[] = [];\n        let bufferedText = \"\";\n        let nodeIndex = 0;\n\n        const createKey = () => {\n            const key = `gradient-node-${String(nodeIndex)}`;\n\n            nodeIndex += 1;\n\n            return key;\n        };\n\n        const pushTransformed = (node: ReactNode, key: Key) => {\n            nodes.push(\n                <Transform key={key} transform={applyGradient}>\n                    {node}\n                </Transform>,\n            );\n        };\n\n        const flushText = () => {\n            if (bufferedText === \"\") {\n                return;\n            }\n\n            const text = bufferedText;\n\n            bufferedText = \"\";\n            pushTransformed(<Text>{text}</Text>, createKey());\n        };\n\n        // eslint-disable-next-line react-x/no-children-for-each\n        Children.forEach(nodeChildren, (child) => {\n            if (isNonRenderableChild(child)) {\n                return;\n            }\n\n            if (isPlainTextNode(child)) {\n                bufferedText += String(child);\n\n                return;\n            }\n\n            flushText();\n\n            if (isValidElement(child)) {\n                const childKey = child.key ?? createKey();\n                const childProps = child.props as Record<string, unknown>;\n\n                if (child.type === Text) {\n                    pushTransformed(child, childKey);\n\n                    return;\n                }\n\n                if (child.type === Box) {\n                    if (hasChildrenProp(childProps)) {\n                        const childChildren = childProps[\"children\"] as ReactNode;\n\n                        // eslint-disable-next-line react-x/no-clone-element\n                        nodes.push(cloneElement(child, { key: childKey }, applyGradientToChildren(childChildren)));\n\n                        return;\n                    }\n\n                    // eslint-disable-next-line react-x/no-clone-element\n                    nodes.push(cloneElement(child, { key: childKey }));\n\n                    return;\n                }\n\n                if (hasChildrenProp(childProps)) {\n                    const childChildren = childProps[\"children\"] as ReactNode;\n\n                    if (!containsBoxDescendant(childChildren)) {\n                        pushTransformed(child, childKey);\n\n                        return;\n                    }\n\n                    // eslint-disable-next-line react-x/no-clone-element\n                    nodes.push(cloneElement(child, { key: childKey }, applyGradientToChildren(childChildren)));\n\n                    return;\n                }\n\n                pushTransformed(child, childKey);\n\n                return;\n            }\n\n            nodes.push(child);\n        });\n\n        flushText();\n\n        return nodes;\n    };\n\n    return <>{applyGradientToChildren(children)}</>;\n}\n\nexport type { GradientColors, GradientName };\n\nexport { Gradient };\nexport type { Props as GradientProps };\n",
+      "path": "registry/ui/gradient.tsx",
+      "target": "components/ui/gradient.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/grid.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "grid",
+  "type": "registry:ui",
+  "title": "Grid",
+  "description": "Grid component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport Box from \"@visulima/tui/components/box\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Children } from \"react\";\n\nexport type Props = {\n    /**\n     * The grid cells, filled left-to-right, top-to-bottom.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Horizontal gap between columns, in cells.\n     * @default 1\n     */\n    readonly columnGap?: number;\n\n    /**\n     * Number of columns. Children wrap into as many rows as needed.\n     * @default 2\n     */\n    readonly columns?: number;\n\n    /**\n     * Fixed width for every column, in cells. Omit to let columns size to\n     * their content.\n     */\n    readonly columnWidth?: number;\n\n    /**\n     * Vertical gap between rows, in cells.\n     * @default 0\n     */\n    readonly rowGap?: number;\n};\n\n/**\n * A simple 2D grid: children flow left-to-right into a fixed number of columns,\n * wrapping to new rows. Column and row gaps are configurable, and columns can\n * be given a fixed width for uniform cells.\n */\nexport default function Grid({ children, columnGap = 1, columns = 2, columnWidth, rowGap = 0 }: Props): ReactElement {\n    // Children.toArray is the right tool here: it flattens fragments and\n    // assigns stable keys before we slice the flat list into grid rows.\n    // eslint-disable-next-line react-x/no-children-to-array -- intentional flatten for 2D layout\n    const cells = Children.toArray(children);\n    const rows: ReactNode[][] = [];\n    // Guard against columns <= 0, which would never advance the loop.\n    const columnCount = Math.max(1, columns);\n\n    for (let index = 0; index < cells.length; index += columnCount) {\n        rows.push(cells.slice(index, index + columnCount));\n    }\n\n    return (\n        <Box flexDirection=\"column\" gap={rowGap}>\n            {rows.map((row, rowIndex) => (\n                // eslint-disable-next-line react-x/no-array-index-key -- row index is stable for the render\n                <Box gap={columnGap} key={rowIndex}>\n                    {row.map((cell, columnIndex) => (\n                        // eslint-disable-next-line react-x/no-array-index-key -- cell index is stable for the render\n                        <Box flexShrink={0} key={columnIndex} width={columnWidth}>\n                            {cell}\n                        </Box>\n                    ))}\n                </Box>\n            ))}\n        </Box>\n    );\n}\n\nexport { Grid };\nexport type { Props as GridProps };\n",
+      "path": "registry/ui/grid.tsx",
+      "target": "components/ui/grid.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}