@visulima/tui-kit 0.0.0 → 1.0.0

package/dist/placeholder.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import n from"@visulima/tui/components/box";import x from"@visulima/tui/components/text";import g from"@visulima/tui/hooks/use-animation";import v from"@visulima/tui/hooks/use-window-size";const y=[1,.85,.6];function E({animated:o=!0,character:l="█",color:m="gray",interval:c=500,rows:h=3,width:e,widths:r=y}){const{frame:d}=g({interval:c,isActive:o}),{columns:f}=v(),s=o&&d%2===0,u=e??Math.max(1,f);return t(n,{flexDirection:"column",width:e,children:Array.from({length:h},(M,a)=>{const p=r.length>0?r[a%r.length]??1:1,i=Math.max(1,Math.round(u*p)),w=l.repeat(i);return t(n,{width:i,children:t(x,{color:m,dimColor:s,wrap:"truncate-end",children:w})},a)})})}export{E as Placeholder,E as default};

package/dist/popover.d.ts

@@ -0,0 +1,46 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color for the content border.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * The trigger element the popover is anchored to.
+  */
+  readonly anchor: ReactNode;
+  /**
+  * The floating content, shown in a bordered box while open.
+  */
+  readonly children: ReactNode;
+  /**
+  * Whether the popover content is shown.
+  */
+  readonly isOpen: boolean;
+  /**
+  * Fires when Escape is pressed while open.
+  */
+  readonly onClose?: () => void;
+  /**
+  * Whether the content sits above or below the anchor.
+  * @default "bottom"
+  */
+  readonly placement?: "bottom" | "top";
+};
+/**
+* Floating content anchored to a trigger element. The anchor always renders;
+* the bordered content appears above or below it while `isOpen`, and Escape
+* fires `onClose`. Terminals have no true overlay layer, so the content takes
+* layout space rather than floating over other content.
+*/
+declare function Popover({
+  accentColor,
+  anchor,
+  children,
+  isOpen,
+  onClose,
+  placement
+}: Props): ReactElement;
+export { Popover, type Props as PopoverProps, Props, Popover as default };

package/dist/popover.js

@@ -0,0 +1 @@
+import{jsx as a,jsxs as m}from"react/jsx-runtime";import i from"@visulima/tui/components/box";import p from"@visulima/tui/hooks/use-input";import{useCallback as f}from"react";function C({accentColor:n="blue",anchor:l,children:c,isOpen:o,onClose:r,placement:e="bottom"}){const d=f((u,s)=>{s.escape&&r?.()},[r]);p(d,{isActive:o});const t=o?a(i,{alignSelf:"flex-start",borderColor:n,borderStyle:"round",paddingX:1,children:c}):void 0;return m(i,{flexDirection:"column",children:[e==="top"?t:void 0,l,e==="bottom"?t:void 0]})}export{C as Popover,C as default};

package/dist/progress-bar.d.ts

@@ -0,0 +1,51 @@
+import { Props as Props$1 } from '@visulima/tui/components/text';
+import { ReactElement } from 'react';
+type Props = {
+  /** Fill glyph repeated across the completed portion of the progress bar. Defaults to "█". */
+  readonly character?: string;
+  /**
+  * Override the terminal width used for calculation.
+  * When 0, uses the actual terminal width.
+  * @default 0
+  */
+  readonly columns?: number;
+  /**
+  * Number of columns reserved on the left side (e.g. for labels).
+  * @default 0
+  */
+  readonly left?: number;
+  /**
+  * Completion percentage between 0 and 1.
+  * @default 1
+  */
+  readonly percent?: number;
+  /**
+  * Number of columns reserved on the right side (e.g. for percentage text).
+  * @default 0
+  */
+  readonly right?: number;
+  /**
+  * Whether to pad the remaining space with whitespace.
+  * Useful when rendering the bar over a background color.
+  * @default false
+  */
+  readonly rightPad?: boolean;
+} & Omit<Props$1, "children">;
+/**
+* A terminal progress bar that fills proportionally to a percentage value.
+*
+* ```tsx
+* &lt;ProgressBar percent={0.5} />
+* &lt;ProgressBar percent={0.75} color="green" left={10} right={5} />
+* ```
+*/
+declare function ProgressBar({
+  character,
+  columns: columnsProp,
+  left,
+  percent,
+  right,
+  rightPad,
+  ...textProps
+}: Props): ReactElement;
+export { ProgressBar, type Props as ProgressBarProps, Props, ProgressBar as default };

package/dist/progress-bar.js

@@ -0,0 +1 @@
+import{jsx as f}from"react/jsx-runtime";import l from"@visulima/tui/components/text";import p from"@visulima/tui/hooks/use-window-size";function d({character:a="█",columns:e=0,left:o=0,percent:m=1,right:i=0,rightPad:n=!1,...c}){const{columns:h}=p(),r=Math.max(0,(e||h||80)-i-o),t=Math.min(Math.floor(r*Math.max(0,Math.min(1,m))),r),s=a.repeat(t)+(n?" ".repeat(r-t):"");return f(l,{...c,children:s})}export{d as ProgressBar,d as default};

package/dist/progress-circle.d.ts

@@ -0,0 +1,59 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color of the filled portion of the ring.
+  * @default "cyan"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Format the centered readout. Defaults to a rounded percentage.
+  */
+  readonly formatValue?: (ratio: number) => string;
+  /**
+  * Upper bound of the range.
+  * @default 100
+  */
+  readonly max?: number;
+  /**
+  * Lower bound of the range.
+  * @default 0
+  */
+  readonly min?: number;
+  /**
+  * Show the readout in the middle of the ring.
+  * @default true
+  */
+  readonly showValue?: boolean;
+  /**
+  * Diameter of the ring in character rows.
+  * @default 8
+  */
+  readonly size?: number;
+  /**
+  * Color of the unfilled track behind the ring.
+  * @default "gray"
+  */
+  readonly trackColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Current value, clamped into `[min, max]`.
+  */
+  readonly value: number;
+};
+/**
+* A circular progress ring rendered at 2x4 braille sub-cell resolution. The
+* filled arc grows clockwise from the top in proportion to `value`, with an
+* optional centered readout.
+*/
+declare function ProgressCircle({
+  color,
+  formatValue,
+  max,
+  min,
+  showValue,
+  size,
+  trackColor,
+  value
+}: Props): ReactElement;
+export { ProgressCircle, type Props as ProgressCircleProps, Props, ProgressCircle as default };

package/dist/progress-circle.js

@@ -0,0 +1 @@
+import{jsxs as V,jsx as e}from"react/jsx-runtime";import{createBrailleGrid as p}from"@visulima/tui/canvas";import w from"@visulima/tui/components/box";import b from"@visulima/tui/components/canvas";import z from"@visulima/tui/components/text";const A=o=>`${Math.round(o*100)}%`;function E({color:o="cyan",formatValue:P=A,max:l=100,min:r=0,showValue:I=!0,size:m=8,trackColor:c="gray",value:M}){const v=l-r||1,s=Math.max(0,Math.min(1,(M-r)/v)),h=Math.max(3,m),y=Math.max(3,Math.round(h*4/2/2));return V(w,{alignItems:"center",flexDirection:"column",children:[e(b,{draw:t=>{t.clear();const C=t.width*2,j=t.height*4,u=C/2,d=j/2,i=Math.max(1,Math.min(u,d)-1),f=p(t.width,t.height),x=p(t.width,t.height),n=Math.max(64,Math.round(Math.PI*2*i)),k=Math.round(s*n);for(let a=0;a<n;a+=1){const g=a/n*Math.PI*2-Math.PI/2,B=Math.round(u+i*Math.cos(g)),G=Math.round(d+i*Math.sin(g));(a<k?x:f).plotPoint(B,G)}f.flush(t,{color:c}),x.flush(t,{color:o})},height:h,version:[M,r,l,m,o,c],width:y}),I?e(w,{marginTop:-Math.ceil(h/2)-1,children:e(z,{bold:!0,color:o,children:P(s)})}):void 0]})}export{E as ProgressCircle,E as default};

package/dist/qr-code.d.ts

@@ -0,0 +1,45 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Color = LiteralUnion<AnsiColors, string>;
+type Props = {
+  /**
+  * Color of the "dark" modules.
+  * @default "black"
+  */
+  readonly darkColor?: Color;
+  /**
+  * Color of the "light" modules and quiet zone.
+  * @default "white"
+  */
+  readonly lightColor?: Color;
+  /**
+  * A pre-encoded square grid of modules (`true` = dark). Provide this to
+  * render without the optional `qrcode` peer; it takes precedence over
+  * `value`.
+  */
+  readonly matrix?: ReadonlyArray<ReadonlyArray<boolean>>;
+  /**
+  * Width of the light border around the code, in modules.
+  * @default 2
+  */
+  readonly quietZone?: number;
+  /**
+  * A string to encode. Requires the optional `qrcode` peer dependency; when
+  * absent, provide `matrix` instead.
+  */
+  readonly value?: string;
+};
+/**
+* Render a QR code from a module matrix using the upper-half-block technique,
+* so two module rows share one character row. Pass `matrix` for a self-contained
+* render, or `value` to encode a string via the optional `qrcode` peer.
+*/
+declare function QrCode({
+  darkColor,
+  lightColor,
+  matrix,
+  quietZone,
+  value
+}: Props): ReactElement;
+export { Props, QrCode, type Props as QrCodeProps, QrCode as default };

package/dist/qr-code.js

@@ -0,0 +1 @@
+import{jsx as h}from"react/jsx-runtime";import g from"@visulima/tui/components/box";import C from"@visulima/tui/components/text";import{useState as k,useEffect as y,useMemo as z}from"react";const E="▀",b=(s,e)=>{if(e<=0)return s.map(o=>[...o]);let c=0;for(const o of s)c=Math.max(c,o.length);const m=c+e*2,t=()=>{const o=[];for(let r=0;r<m;r+=1)o.push(!1);return o},n=[];for(let o=0;o<e;o+=1)n.push(t());for(const o of s){const r=t();o.forEach((l,d)=>{r[d+e]=l}),n.push(r)}for(let o=0;o<e;o+=1)n.push(t());return n};function q({darkColor:s="black",lightColor:e="white",matrix:c,quietZone:m=2,value:t}){const[n,o]=k(void 0);y(()=>{if(c!==void 0||t===void 0)return;let i=!1;return(async()=>{try{const v=await import("qrcode"),{modules:u}=v.create(t),a=[];for(let f=0;f<u.size;f+=1){const p=[];for(let x=0;x<u.size;x+=1)p.push(!!u.data[f*u.size+x]);a.push(p)}i||o(a)}catch{}})().catch(()=>{}),()=>{i=!0}},[c,t]);const r=c??n,l=z(()=>{if(r!==void 0)return b(r,m)},[m,r]);if(l===void 0)return h(g,{children:h(C,{dimColor:!0,children:t===void 0?"":"Encoding…"})});const d=[];for(let i=0;i<l.length;i+=2){const v=l[i]??[],u=l[i+1]??[],a=[];for(const[f,p]of v.entries())a.push(h(C,{backgroundColor:u[f]?s:e,color:p?s:e,children:E},f));d.push(h(g,{children:a},i))}return h(g,{flexDirection:"column",children:d})}export{q as QrCode,q as default};

package/dist/r/accordion.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "type": "registry:ui",
+  "title": "Accordion",
+  "description": "Accordion component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport useFocus from \"@visulima/tui/hooks/use-focus\";\nimport useInput from \"@visulima/tui/hooks/use-input\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type AccordionItem = {\n    /**\n     * Content rendered when the item is expanded.\n     */\n    readonly content: ReactNode;\n\n    /**\n     * Unique identifier.\n     */\n    readonly id: string;\n\n    /**\n     * Header label.\n     */\n    readonly title: ReactNode;\n};\n\nexport type Props = {\n    /**\n     * Accent color for the focused header.\n     * @default \"blue\"\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * When true, multiple panels can be open at once.\n     * @default false\n     */\n    readonly allowMultiple?: boolean;\n\n    /**\n     * Auto-focus the first item on mount.\n     */\n    readonly autoFocus?: boolean;\n\n    /**\n     * Initially open item ids.\n     */\n    readonly defaultExpanded?: ReadonlyArray<string>;\n\n    /**\n     * Disable interaction.\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * List of panels.\n     */\n    readonly items: ReadonlyArray<AccordionItem>;\n};\n\n/**\n * Keyboard-navigable accordion. Use arrow keys to move between panels and\n * Enter / Space to toggle.\n * @returns A `ReactElement` rendering the accordion column.\n */\nexport default function Accordion({\n    accentColor = \"blue\",\n    allowMultiple = false,\n    autoFocus = false,\n    defaultExpanded,\n    isDisabled = false,\n    items,\n}: Props): ReactElement {\n    const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });\n    const [expanded, setExpanded] = useState<ReadonlyArray<string>>(() => {\n        if (defaultExpanded === undefined || defaultExpanded.length === 0) {\n            return [];\n        }\n\n        // When `allowMultiple` is false the accordion only ever shows one open\n        // panel — clamp the seed so the initial render matches that contract.\n        if (!allowMultiple) {\n            return defaultExpanded.slice(0, 1);\n        }\n\n        return defaultExpanded;\n    });\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const focusedIndexRef = useRef(focusedIndex);\n\n    focusedIndexRef.current = focusedIndex;\n\n    const toggle = useCallback(\n        (id: string) => {\n            setExpanded((previous) => {\n                const isOpen = previous.includes(id);\n\n                if (allowMultiple) {\n                    return isOpen ? previous.filter((x) => x !== id) : [...previous, id];\n                }\n\n                return isOpen ? [] : [id];\n            });\n        },\n        [allowMultiple],\n    );\n\n    useInput(\n        useCallback(\n            (input, key) => {\n                if (!isFocused) {\n                    return;\n                }\n\n                const total = items.length;\n\n                if ((key.downArrow || input === \"j\") && focusedIndexRef.current < total - 1) {\n                    setFocusedIndex(focusedIndexRef.current + 1);\n                } else if ((key.upArrow || input === \"k\") && focusedIndexRef.current > 0) {\n                    setFocusedIndex(focusedIndexRef.current - 1);\n                } else if (key.return || input === \" \") {\n                    const target = items[focusedIndexRef.current];\n\n                    if (target) {\n                        toggle(target.id);\n                    }\n                }\n            },\n            [isFocused, items, toggle],\n        ),\n        { isActive: !isDisabled && isFocused },\n    );\n\n    return (\n        <Box flexDirection=\"column\">\n            {items.map((item, index) => {\n                const isOpen = expanded.includes(item.id);\n                const isItemFocused = isFocused && index === focusedIndex;\n                const color = isItemFocused ? accentColor : undefined;\n\n                return (\n                    <Box flexDirection=\"column\" key={item.id}>\n                        <Box>\n                            <Text color={color} dimColor={isDisabled}>\n                                {isItemFocused ? \"▸ \" : \"  \"}\n                                {isOpen ? \"▼ \" : \"▶ \"}\n                            </Text>\n                            <Text bold={isItemFocused} color={color} dimColor={isDisabled}>\n                                {item.title}\n                            </Text>\n                        </Box>\n                        {isOpen\n                            ? (\n                            <Box flexDirection=\"column\" marginBottom={1} marginLeft={4}>\n                                {item.content}\n                            </Box>\n                            )\n                            : undefined}\n                    </Box>\n                );\n            })}\n        </Box>\n    );\n}\n\nexport { Accordion };\nexport type { Props as AccordionProps };\n",
+      "path": "registry/ui/accordion.tsx",
+      "target": "components/ui/accordion.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/alert.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "type": "registry:ui",
+  "title": "Alert",
+  "description": "Alert component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [
+    "https://visulima.com/r/variant-config.json"
+  ],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\n\n/**\n * Alert component for Ink.\n *\n * Inspired by ink-ui Alert by Vadim Demedes.\n * @see https://github.com/vadimdemedes/ink-ui\n *\n * MIT License\n * Copyright (c) Vadym Demedes (github.com/vadimdemedes)\n */\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement, ReactNode } from \"react\";\n\nimport type { Variant } from \"@/lib/variant-config\";\nimport VARIANT_CONFIG from \"@/lib/variant-config\";\n\nexport type AlertVariant = Variant;\n\nexport type Props = {\n    /**\n     * Alert message content.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Optional heading displayed above the message.\n     */\n    readonly title?: string;\n\n    /**\n     * Determines the border color and icon.\n     */\n    readonly variant: AlertVariant;\n};\n\n/**\n * Renders a bordered alert box with a variant-specific icon, optional title, and message.\n */\nexport default function Alert({ children, title, variant }: Props): ReactElement {\n    const { color, icon } = VARIANT_CONFIG[variant];\n\n    return (\n        <Box borderColor={color} borderStyle=\"round\" flexGrow={1} gap={1} paddingX={1}>\n            <Box flexShrink={0}>\n                <Text color={color}>{icon}</Text>\n            </Box>\n            <Box flexDirection=\"column\" flexGrow={1} flexShrink={1} gap={1} minWidth={0}>\n                {title ? <Text bold>{title}</Text> : undefined}\n                <Text>{children}</Text>\n            </Box>\n        </Box>\n    );\n}\n\nexport { Alert };\nexport type { Props as AlertProps };\n",
+      "path": "registry/ui/alert.tsx",
+      "target": "components/ui/alert.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/animate-presence.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "animate-presence",
+  "type": "registry:ui",
+  "title": "Animate Presence",
+  "description": "Animate Presence 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, cloneElement, isValidElement, useCallback, useEffect, useState } from \"react\";\n\ntype AnimatableProps = {\n    readonly onExit?: () => void;\n    readonly show?: boolean;\n};\n\nexport type Props = {\n    /**\n     * Keyed children. Any child that accepts a `show: boolean` prop and calls\n     * `onExit` when its exit transition finishes (such as `&lt;Transition />`) is\n     * orchestrated automatically. Other children render as-is.\n     */\n    readonly children: ReactNode;\n};\n\ntype Slot = {\n    readonly element: ReactElement<AnimatableProps>;\n    readonly key: string;\n    readonly show: boolean;\n};\n\n/**\n * Normalize a ReactElement's `key` to a string (or `undefined` when the\n * caller forgot to set one). AnimatePresence ignores children without a key\n * because tracking identity across renders requires it.\n */\nconst getKey = (element: ReactElement): string | undefined => {\n    const { key } = element;\n\n    if (key === null) {\n        return undefined;\n    }\n\n    return key;\n};\n\n/**\n * Type-guard used to narrow a child to something AnimatePresence can drive.\n * Matches two cases.\n *\n * 1. The element's component type carries a static `isAnimatable = true`\n * marker (this is how built-in `&lt;Transition />` is recognized — consumers\n * can opt in their own wrappers the same way).\n * 2. The element's props object already declares a `show` key, letting\n * inline components participate without a marker.\n */\nconst isAnimatable = (element: ReactElement): element is ReactElement<AnimatableProps> => {\n    const type = element.type as { isAnimatable?: boolean } | undefined;\n\n    if (type?.isAnimatable === true) {\n        return true;\n    }\n\n    return typeof element.props === \"object\" && element.props !== null && \"show\" in element.props;\n};\n\n/* eslint-disable react-x/no-children-for-each, react-x/no-clone-element -- AnimatePresence intentionally walks and clones React children to track keyed enter/exit */\n\n/**\n * Orchestrates enter / exit animations for keyed children. Wrap a dynamic\n * list of `&lt;Transition />` (or any component accepting `show` + `onExit`) to\n * keep outgoing children mounted until their exit animation finishes.\n */\nexport default function AnimatePresence({ children }: Props): ReactElement {\n    const [slots, setSlots] = useState<ReadonlyArray<Slot>>(() => {\n        const collected: Slot[] = [];\n\n        Children.forEach(children, (child) => {\n            if (!isValidElement(child)) {\n                return;\n            }\n\n            const key = getKey(child);\n\n            if (key === undefined) {\n                return;\n            }\n\n            collected.push({\n                element: isAnimatable(child) ? child : (child as ReactElement<AnimatableProps>),\n                key,\n                show: true,\n            });\n        });\n\n        return collected;\n    });\n\n    // Reconcile children on every render — additions marked show=true,\n    // removals flipped to show=false so they can animate out. Persisting\n    // keys simply get their element updated.\n    useEffect(() => {\n        const incoming = new Map<string, ReactElement<AnimatableProps>>();\n\n        Children.forEach(children, (child) => {\n            if (!isValidElement(child)) {\n                return;\n            }\n\n            const key = getKey(child);\n\n            if (key === undefined) {\n                return;\n            }\n\n            incoming.set(key, isAnimatable(child) ? child : (child as ReactElement<AnimatableProps>));\n        });\n\n        // eslint-disable-next-line react-x/set-state-in-effect -- AnimatePresence reconciles slots from children in an effect; \"removed\" slots persist with show=false until exit animation completes, so this is not pure derivation\n        setSlots((previous) => {\n            const next: Slot[] = [];\n            const seen = new Set<string>();\n            let changed = false;\n\n            for (const slot of previous) {\n                if (incoming.has(slot.key)) {\n                    const nextElement = incoming.get(slot.key)!;\n\n                    if (!slot.show || slot.element !== nextElement) {\n                        changed = true;\n                    }\n\n                    next.push({\n                        element: nextElement,\n                        key: slot.key,\n                        show: true,\n                    });\n                    seen.add(slot.key);\n                } else {\n                    if (slot.show) {\n                        changed = true;\n                    }\n\n                    // Removed in the incoming render; keep rendering with show=false.\n                    next.push({ ...slot, show: false });\n                }\n            }\n\n            for (const [key, element] of incoming) {\n                if (!seen.has(key)) {\n                    changed = true;\n                    next.push({ element, key, show: true });\n                }\n            }\n\n            // React bails out of the update if we return the same reference,\n            // preventing an infinite effect/setState loop when `children` gets\n            // a fresh JSX identity each parent render but is functionally\n            // unchanged.\n            return changed ? next : previous;\n        });\n    }, [children]);\n\n    const removeSlot = useCallback((key: string) => {\n        setSlots((previous) => previous.filter((slot) => slot.key !== key));\n    }, []);\n\n    return (\n        <Box flexDirection=\"column\">\n            {slots.map((slot) => {\n                if (!isAnimatable(slot.element)) {\n                    // Still clone so React sees the exact key we stored in\n                    // the slot (our reconciler and React's key-tracking now\n                    // agree even if the original element carried a different\n                    // one).\n                    return cloneElement(slot.element, { key: slot.key });\n                }\n\n                const originalOnExit = slot.element.props.onExit;\n\n                return cloneElement(slot.element, {\n                    key: slot.key,\n                    onExit: () => {\n                        originalOnExit?.();\n                        removeSlot(slot.key);\n                    },\n                    show: slot.show,\n                });\n            })}\n        </Box>\n    );\n}\n\nexport { AnimatePresence };\nexport type { Props as AnimatePresenceProps };\n",
+      "path": "registry/ui/animate-presence.tsx",
+      "target": "components/ui/animate-presence.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/approval-prompt.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "approval-prompt",
+  "type": "registry:ui",
+  "title": "Approval Prompt",
+  "description": "Approval Prompt component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport useFocus from \"@visulima/tui/hooks/use-focus\";\nimport useInput from \"@visulima/tui/hooks/use-input\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useCallback } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type ApprovalRisk = \"high\" | \"low\" | \"medium\";\n\nexport type ApprovalDecision = \"allow-always\" | \"allow-once\" | \"deny\";\n\nexport type Props = {\n    /**\n     * Accent color for the highlighted option letters. Overrides the risk color.\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Auto-focus the prompt on mount. Set to `false` if a parent already\n     * owns focus and routes input to this component.\n     * @default true\n     */\n    readonly autoFocus?: boolean;\n\n    /**\n     * Optional body rendered between the header and the prompt line (e.g. a\n     * rendered diff or command preview).\n     */\n    readonly children?: ReactNode;\n\n    /**\n     * Accessible description of what approving will do.\n     */\n    readonly description?: string;\n\n    /**\n     * Disable input; use when a parent manages focus and input routing.\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * Resolution callback. Called once the user answers.\n     */\n    readonly onDecision: (decision: ApprovalDecision) => void;\n\n    /**\n     * Params shown as a compact key=value preview.\n     */\n    readonly params?: Readonly<Record<string, unknown>>;\n\n    /**\n     * Severity badge; controls the border color.\n     * @default \"medium\"\n     */\n    readonly risk?: ApprovalRisk;\n\n    /**\n     * Name of the tool / action under review.\n     */\n    readonly tool: string;\n};\n\nconst RISK_COLOR: Record<ApprovalRisk, LiteralUnion<AnsiColors, string>> = {\n    high: \"red\",\n    low: \"green\",\n    medium: \"yellow\",\n};\n\nconst RISK_LABEL: Record<ApprovalRisk, string> = {\n    high: \"HIGH RISK\",\n    low: \"LOW RISK\",\n    medium: \"MEDIUM RISK\",\n};\n\nconst formatParameterValue = (value: unknown): string => {\n    if (value === null) {\n        return \"null\";\n    }\n\n    if (typeof value === \"string\") {\n        return value;\n    }\n\n    if (typeof value === \"number\" || typeof value === \"boolean\") {\n        return String(value);\n    }\n\n    try {\n        return JSON.stringify(value);\n    } catch {\n        // eslint-disable-next-line @typescript-eslint/no-base-to-string -- last-resort fallback when value isn't JSON-serializable\n        return String(value);\n    }\n};\n\n/**\n * Three-way approval prompt for tool calls. Resolves via `onDecision`:\n * `y` / Enter → allow-once, `a` → allow-always, `n` / Esc → deny.\n * @returns A bordered `ReactElement` containing the risk banner, params\n * preview, optional body, and the prompt line.\n */\nexport default function ApprovalPrompt({\n    accentColor,\n    autoFocus = true,\n    children,\n    description,\n    isDisabled = false,\n    onDecision,\n    params,\n    risk = \"medium\",\n    tool,\n}: Props): ReactElement {\n    const riskColor = RISK_COLOR[risk];\n    const color = accentColor ?? riskColor;\n    const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });\n\n    useInput(\n        useCallback(\n            (input, key) => {\n                const typed = input.toLowerCase();\n\n                if (typed === \"y\" || key.return) {\n                    onDecision(\"allow-once\");\n\n                    return;\n                }\n\n                if (typed === \"a\") {\n                    onDecision(\"allow-always\");\n\n                    return;\n                }\n\n                if (typed === \"n\" || key.escape) {\n                    onDecision(\"deny\");\n                }\n            },\n            [onDecision],\n        ),\n        { isActive: !isDisabled && isFocused },\n    );\n\n    const parameterEntries = params === undefined ? [] : Object.entries(params);\n\n    return (\n        <Box borderColor={riskColor} borderStyle=\"round\" flexDirection=\"column\" paddingX={1}>\n            <Box>\n                <Text backgroundColor={riskColor} color=\"black\">\n                    {\" \"}\n                    {RISK_LABEL[risk]}\n{\" \"}\n                </Text>\n                <Text>\n                    {\" \"}\n                    <Text bold>{tool}</Text>\n                </Text>\n            </Box>\n            {description === undefined\n                ? undefined\n                : (\n                <Box marginTop={1}>\n                    <Text>{description}</Text>\n                </Box>\n                )}\n            {parameterEntries.length === 0\n                ? undefined\n                : (\n                <Box flexDirection=\"column\" marginTop={1}>\n                    {parameterEntries.map(([name, value]) => (\n                        <Box key={name}>\n                            <Text color=\"cyan\">\n{name}\n=\n                            </Text>\n                            <Text wrap=\"truncate-end\">{formatParameterValue(value)}</Text>\n                        </Box>\n                    ))}\n                </Box>\n                )}\n            {children === undefined ? undefined : <Box marginTop={1}>{children}</Box>}\n            <Box marginTop={1}>\n                <Text>\n                    Allow? [\n                    <Text bold color={color}>\n                        y\n                    </Text>\n                    es /\n{\" \"}\n                    <Text bold color={color}>\n                        a\n                    </Text>\n                    lways /\n{\" \"}\n                    <Text bold color={color}>\n                        n\n                    </Text>\n                    o ]\n                </Text>\n            </Box>\n        </Box>\n    );\n}\n\nexport { ApprovalPrompt };\nexport type { Props as ApprovalPromptProps };\n",
+      "path": "registry/ui/approval-prompt.tsx",
+      "target": "components/ui/approval-prompt.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/area-chart.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "area-chart",
+  "type": "registry:ui",
+  "title": "Area Chart",
+  "description": "Area Chart component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [
+    "https://visulima.com/r/chart-utils.json",
+    "https://visulima.com/r/line-chart.json"
+  ],
+  "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\nimport { computeExtents, DEFAULT_CHART_PALETTE, pickSeriesColor, toPoints } from \"@/lib/chart-utils\";\nimport type { LineSeries } from \"@/components/ui/line-chart\";\nimport { projectPoint } from \"@/components/ui/line-chart\";\n\nexport type Props = {\n    /**\n     * Axis label color.\n     * @default \"gray\"\n     */\n    readonly axisColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Density of the shaded fill below each line.\n     * - `light` → `░`\n     * - `medium` → `▒` (default)\n     * - `heavy` → `▓`\n     */\n    readonly fillDensity?: \"heavy\" | \"light\" | \"medium\";\n\n    /**\n     * Chart body height in character rows.\n     * @default 10\n     */\n    readonly height?: number;\n\n    /**\n     * Upper bound for the y-axis.\n     */\n    readonly maxY?: number;\n\n    /**\n     * Lower bound for the y-axis.\n     */\n    readonly minY?: number;\n\n    /**\n     * Fallback palette.\n     */\n    readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;\n\n    /**\n     * Series to plot.\n     */\n    readonly series: ReadonlyArray<LineSeries>;\n\n    /**\n     * Render the legend below the plot.\n     * @default true\n     */\n    readonly showLegend?: boolean;\n\n    /**\n     * Chart body width in character columns.\n     * @default 40\n     */\n    readonly width?: number;\n};\n\nconst DEFAULT_PALETTE = DEFAULT_CHART_PALETTE;\n\nconst FILL_GLYPH: Record<Required<Props>[\"fillDensity\"], string> = {\n    heavy: \"▓\",\n    light: \"░\",\n    medium: \"▒\",\n};\n\n/**\n * Area chart: line chart with the area between the line and the baseline\n * filled with shaded blocks.\n */\nexport default function AreaChart({\n    axisColor = \"gray\",\n    fillDensity = \"medium\",\n    height = 10,\n    maxY,\n    minY,\n    palette = DEFAULT_PALETTE,\n    series,\n    showLegend = true,\n    width = 40,\n}: Props): ReactElement {\n    const prepared = useMemo(() => {\n        const list = series.map((input, index) => {\n            return {\n                color: pickSeriesColor(input, index, palette),\n                points: toPoints(input.data),\n                series: input,\n            };\n        });\n\n        const extents = computeExtents(list);\n\n        return {\n            list,\n            xMax: extents.xMax === Number.NEGATIVE_INFINITY ? 1 : extents.xMax,\n            xMin: extents.xMin === Number.POSITIVE_INFINITY ? 0 : extents.xMin,\n            yMax: maxY ?? (extents.yMax === Number.NEGATIVE_INFINITY ? 1 : extents.yMax),\n            yMin: minY ?? (extents.yMin === Number.POSITIVE_INFINITY ? 0 : extents.yMin),\n        };\n    }, [series, palette, minY, maxY]);\n\n    const glyph = FILL_GLYPH[fillDensity];\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                    const config = {\n                        xMax: prepared.xMax,\n                        xMin: prepared.xMin,\n                        yMax: prepared.yMax,\n                        yMin: prepared.yMin,\n                    };\n\n                    // Fill layer — drawn below the line so the braille overlay stays crisp.\n                    for (const { color, points } of prepared.list) {\n                        if (points.length === 0) {\n                            continue;\n                        }\n\n                        // Sample the line once per character column and fill from\n                        // that row down to the baseline.\n                        for (let cellX = 0; cellX < context.width; cellX += 1) {\n                            // Find the data point that projects into this column.\n                            // Linear scan is fine for reasonable point counts;\n                            // larger datasets should pre-resample. One\n                            // projection per point — reuse px AND py.\n                            let sampleY: number | undefined;\n\n                            for (const point of points) {\n                                const { px, py } = projectPoint(point, config, pixelWidth, pixelHeight);\n                                const candidateCellX = Math.floor(px / 2);\n\n                                if (candidateCellX === cellX) {\n                                    const candidateCellY = Math.floor(py / 4);\n\n                                    if (sampleY === undefined || candidateCellY < sampleY) {\n                                        sampleY = candidateCellY;\n                                    }\n                                }\n                            }\n\n                            if (sampleY === undefined) {\n                                continue;\n                            }\n\n                            for (let cellY = sampleY + 1; cellY < context.height; cellY += 1) {\n                                context.setCell(cellX, cellY, glyph, { color, dim: true });\n                            }\n                        }\n                    }\n\n                    // Dashed baseline.\n                    for (let cellX = 0; cellX < context.width; cellX += 2) {\n                        context.setCell(cellX, context.height - 1, \"·\", { color: axisColor, dim: true });\n                    }\n\n                    // Line overlay using braille.\n                    for (const { color, points } of prepared.list) {\n                        if (points.length === 0) {\n                            continue;\n                        }\n\n                        const grid = createBrailleGrid(context.width, context.height);\n                        let previous = projectPoint(points[0]!, config, pixelWidth, pixelHeight);\n\n                        grid.plotPoint(previous.px, previous.py);\n\n                        for (let index = 1; index < points.length; index += 1) {\n                            const current = projectPoint(points[index]!, config, pixelWidth, pixelHeight);\n\n                            grid.plotLine(previous.px, previous.py, current.px, current.py);\n                            previous = current;\n                        }\n\n                        grid.flush(context, { bold: true, color });\n                    }\n                }}\n                height={height}\n                // eslint-disable-next-line react-perf/jsx-no-new-array-as-prop -- version array is the canvas redraw key\n                version={[series, width, height, minY, maxY, fillDensity, axisColor, palette]}\n                width={width}\n            />\n            {/* eslint-disable-next-line @stylistic/multiline-ternary -- prettier formats JSX ternaries on one line */}\n            {showLegend ? (\n                <Box gap={2} marginTop={1}>\n                    {prepared.list.map(({ color, series: input }, index) => (\n                        // Composite key: series index plus label so two\n                        // series sharing a label don't collide.\n                        // eslint-disable-next-line react-x/no-array-index-key -- series index is stable for the render\n                        <Box gap={1} key={`${index}:${input.label ?? \"\"}`}>\n                            <Text color={color}>{glyph}</Text>\n                            <Text>{input.label ?? `Series ${index + 1}`}</Text>\n                        </Box>\n                    ))}\n                </Box>\n            ) : undefined}\n        </Box>\n    );\n}\n\nexport { AreaChart };\nexport type { Props as AreaChartProps };\n",
+      "path": "registry/ui/area-chart.tsx",
+      "target": "components/ui/area-chart.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/badge.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "type": "registry:ui",
+  "title": "Badge",
+  "description": "Badge component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\n\n/**\n * Badge component for Ink.\n *\n * Inspired by ink-ui Badge by Vadim Demedes.\n * @see https://github.com/vadimdemedes/ink-ui\n *\n * MIT License\n * Copyright (c) Vadym Demedes (github.com/vadimdemedes)\n */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type Props = {\n    /**\n     * Label content. Strings are automatically uppercased.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * Background color for the badge.\n     * @default \"magenta\"\n     */\n    readonly color?: LiteralUnion<AnsiColors, string>;\n};\n\n/**\n * Renders an uppercase colored label badge, useful for status indicators.\n */\nexport default function Badge({ children, color = \"magenta\" }: Props): ReactElement {\n    const formattedChildren = typeof children === \"string\" ? children.toUpperCase() : children;\n\n    return (\n        <Text backgroundColor={color}>\n            {\" \"}\n            <Text color=\"black\">{formattedChildren}</Text>\n{\" \"}\n        </Text>\n    );\n}\n\nexport { Badge };\nexport type { Props as BadgeProps };\n",
+      "path": "registry/ui/badge.tsx",
+      "target": "components/ui/badge.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/bar-chart.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "bar-chart",
+  "type": "registry:ui",
+  "title": "Bar Chart",
+  "description": "Bar Chart 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 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 BarDatum = {\n    /**\n     * Per-bar color override. Falls back to the chart-level palette.\n     */\n    readonly color?: LiteralUnion<AnsiColors, string>;\n    readonly label?: string;\n    readonly value: number;\n};\n\nexport type Props = {\n    /**\n     * Bars to render.\n     */\n    readonly data: ReadonlyArray<BarDatum>;\n\n    /**\n     * Total height of the plot area in character rows.\n     * @default 10\n     */\n    readonly height?: number;\n\n    /**\n     * Optional upper bound for the axis. When omitted the chart uses the\n     * largest value in `data`.\n     */\n    readonly max?: number;\n\n    /**\n     * Orientation of the bars.\n     * @default \"vertical\"\n     */\n    readonly orientation?: \"horizontal\" | \"vertical\";\n\n    /**\n     * Fallback palette cycled through when a bar does not provide its own color.\n     * @default [\"cyan\", \"magenta\", \"yellow\", \"green\", \"blue\", \"red\"]\n     */\n    readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;\n\n    /**\n     * Render labels underneath vertical bars (or to the left of horizontal bars).\n     * @default true\n     */\n    readonly showLabels?: boolean;\n\n    /**\n     * Render numeric values next to each bar.\n     * @default false\n     */\n    readonly showValues?: boolean;\n\n    /**\n     * Total width of the plot area in character columns. Defaults to\n     * `data.length * 3` for vertical charts, or `24` for horizontal.\n     */\n    readonly width?: number;\n};\n\nconst DEFAULT_PALETTE: ReadonlyArray<LiteralUnion<AnsiColors, string>> = [\"cyan\", \"magenta\", \"yellow\", \"green\", \"blue\", \"red\"];\n\n/**\n * Walk `data` once to find the maximum value. Avoids `Math.max(...values)`\n * which blows the call-stack on large arrays (same rule as Sparkline).\n */\nconst findMax = (data: ReadonlyArray<BarDatum>, userMax: number | undefined): number => {\n    if (userMax !== undefined) {\n        return userMax;\n    }\n\n    if (data.length === 0) {\n        return 0;\n    }\n\n    // Seed from the first sample so all-negative datasets still yield a\n    // sensible upper bound (otherwise initializing `max = 0` would wipe out\n    // every datum < 0).\n    let max = data[0]!.value;\n\n    for (let index = 1; index < data.length; index += 1) {\n        const { value } = data[index]!;\n\n        if (value > max) {\n            max = value;\n        }\n    }\n\n    return max;\n};\n\nconst colorFor = (index: number, palette: ReadonlyArray<LiteralUnion<AnsiColors, string>>, datum: BarDatum): LiteralUnion<AnsiColors, string> =>\n    datum.color ?? palette[index % palette.length] ?? \"cyan\";\n\n/**\n * Bar chart rendered on top of `Canvas`. Uses fractional block glyphs for\n * sub-cell precision (▁▂▃▄▅▆▇█ vertical, ▏▎▍▌▋▊▉█ horizontal).\n */\nexport default function BarChart({\n    data,\n    height = 10,\n    max: maxOverride,\n    orientation = \"vertical\",\n    palette = DEFAULT_PALETTE,\n    showLabels = true,\n    showValues = false,\n    width: widthOverride,\n}: Props): ReactElement {\n    const computedMax = useMemo(() => findMax(data, maxOverride), [data, maxOverride]);\n\n    if (orientation === \"horizontal\") {\n        const plotWidth = widthOverride ?? 24;\n\n        return (\n            <Box flexDirection=\"column\">\n                {data.map((datum, index) => {\n                    const ratio = computedMax === 0 ? 0 : datum.value / computedMax;\n                    const color = colorFor(index, palette, datum);\n\n                    return (\n                        // eslint-disable-next-line react-x/no-array-index-key -- chart bar index is stable for the render\n                        <Box gap={1} key={index}>\n                            {/* eslint-disable-next-line @stylistic/multiline-ternary -- prettier formats JSX ternaries on one line */}\n                            {showLabels && datum.label !== undefined ? (\n                                <Box flexShrink={0} minWidth={8}>\n                                    <Text dimColor wrap=\"truncate-end\">\n                                        {datum.label}\n                                    </Text>\n                                </Box>\n                            ) : undefined}\n                            <Box flexGrow={1} flexShrink={1}>\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                                        context.drawHBar(0, 0, plotWidth, ratio, { color });\n                                    }}\n                                    height={1}\n                                    // eslint-disable-next-line react-perf/jsx-no-new-array-as-prop -- version array is the canvas redraw key\n                                    version={[datum.value, computedMax, color, plotWidth]}\n                                    width={plotWidth}\n                                />\n                            </Box>\n                            {/* eslint-disable-next-line @stylistic/multiline-ternary -- prettier formats JSX ternaries on one line */}\n                            {showValues ? (\n                                <Box flexShrink={0}>\n                                    <Text>{String(datum.value)}</Text>\n                                </Box>\n                            ) : undefined}\n                        </Box>\n                    );\n                })}\n            </Box>\n        );\n    }\n\n    const barWidth = 2;\n    const gap = 1;\n    const plotWidth = widthOverride ?? Math.max(data.length * (barWidth + gap), 1);\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                    data.forEach((datum, index) => {\n                        const ratio = computedMax === 0 ? 0 : datum.value / computedMax;\n                        const color = colorFor(index, palette, datum);\n                        const x = index * (barWidth + gap);\n\n                        for (let column = 0; column < barWidth; column += 1) {\n                            context.drawVBar(x + column, 0, height, ratio, { color });\n                        }\n                    });\n                }}\n                height={height}\n                // eslint-disable-next-line react-perf/jsx-no-new-array-as-prop -- version array is the canvas redraw key\n                version={[data, computedMax, palette, barWidth, gap, height]}\n                width={plotWidth}\n            />\n            {/* eslint-disable-next-line @stylistic/multiline-ternary -- prettier formats JSX ternaries on one line */}\n            {showValues ? (\n                <Box>\n                    {data.map((datum, index) => (\n                        // eslint-disable-next-line react-x/no-array-index-key -- chart column index is stable for the render\n                        <Box key={index} width={barWidth + gap}>\n                            <Text dimColor>{String(datum.value).padEnd(barWidth + gap, \" \")}</Text>\n                        </Box>\n                    ))}\n                </Box>\n            ) : undefined}\n            {/* eslint-disable-next-line @stylistic/multiline-ternary -- prettier formats JSX ternaries on one line */}\n            {showLabels ? (\n                <Box>\n                    {data.map((datum, index) => (\n                        // eslint-disable-next-line react-x/no-array-index-key -- chart column index is stable for the render\n                        <Box key={index} width={barWidth + gap}>\n                            <Text dimColor wrap=\"truncate-end\">\n                                {(datum.label ?? \"\").padEnd(barWidth + gap, \" \")}\n                            </Text>\n                        </Box>\n                    ))}\n                </Box>\n            ) : undefined}\n        </Box>\n    );\n}\n\nexport { BarChart };\nexport type { Props as BarChartProps };\n",
+      "path": "registry/ui/bar-chart.tsx",
+      "target": "components/ui/bar-chart.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/big-text.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "big-text",
+  "type": "registry:ui",
+  "title": "Big Text",
+  "description": "Big Text component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui",
+    "cfonts"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport Text from \"@visulima/tui/components/text\";\nimport CFonts from \"cfonts\";\nimport type { ReactElement } from \"react\";\nimport { useMemo } from \"react\";\n\n/**\n * Available CFonts font faces.\n */\ntype Font = \"3d\" | \"block\" | \"chrome\" | \"grid\" | \"huge\" | \"pallet\" | \"shade\" | \"simple\" | \"simple3d\" | \"simpleBlock\" | \"slick\" | \"tiny\";\n\n/**\n * Horizontal text alignment.\n */\ntype Align = \"center\" | \"left\" | \"right\";\n\n/**\n * Terminal background color names supported by CFonts.\n */\ntype BackgroundColor = \"black\" | \"blue\" | \"cyan\" | \"green\" | \"magenta\" | \"red\" | \"transparent\" | \"white\" | \"yellow\";\n\ntype Props = {\n    /**\n     * Horizontal alignment of the text.\n     * @default \"left\"\n     */\n    readonly align?: Align;\n\n    /**\n     * Background color.\n     * @default \"transparent\"\n     */\n    readonly backgroundColor?: BackgroundColor;\n\n    /**\n     * Colors to use for the font. Accepts color names, hex values, or `\"system\"` for terminal default.\n     * @default [\"system\"]\n     */\n    readonly colors?: string[];\n\n    /**\n     * Font face to use.\n     * @default \"block\"\n     * @see https://github.com/dominikwilkowski/cfonts#supported-fonts\n     */\n    readonly font?: Font;\n\n    /**\n     * Letter spacing.\n     * @default 1\n     */\n    readonly letterSpacing?: number;\n\n    /**\n     * Line height.\n     * @default 1\n     */\n    readonly lineHeight?: number;\n\n    /**\n     * Maximum character length per line. `0` means no limit.\n     * @default 0\n     */\n    readonly maxLength?: number;\n\n    /**\n     * Whether to add an empty line on top and at the bottom of the output.\n     * @default true\n     */\n    readonly space?: boolean;\n\n    /**\n     * The text to render in a large font.\n     */\n    readonly text: string;\n};\n\nconst defaults = {\n    align: \"left\" as const,\n    backgroundColor: \"transparent\" as const,\n    colors: [\"system\"],\n    font: \"block\" as const,\n    letterSpacing: 1,\n    lineHeight: 1,\n    maxLength: 0,\n    space: true,\n};\n\n/**\n * Render large terminal text using CFonts.\n * @example\n * ```tsx\n * import { BigText } from \"@visulima/tui/ink\";\n *\n * <BigText text=\"Hello\" font=\"block\" />\n * ```\n */\nexport default function BigText({ align, backgroundColor, colors, font, letterSpacing, lineHeight, maxLength, space, text }: Props): ReactElement {\n    const rendered = useMemo(\n        () => CFonts.render(text, { ...defaults, align, backgroundColor, colors, font, letterSpacing, lineHeight, maxLength, space }),\n        [text, align, backgroundColor, colors, font, letterSpacing, lineHeight, maxLength, space],\n    );\n\n    return <Text>{rendered && rendered.string}</Text>;\n}\n\nexport { BigText };\nexport type { Align, BackgroundColor, Font, Props };\nexport type { Align as BigTextAlign, BackgroundColor as BigTextBackgroundColor, Font as BigTextFont, Props as BigTextProps };\n",
+      "path": "registry/ui/big-text.tsx",
+      "target": "components/ui/big-text.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/blink-dot.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "blink-dot",
+  "type": "registry:ui",
+  "title": "Blink Dot",
+  "description": "Blink Dot component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Text from \"@visulima/tui/components/text\";\nimport useAnimation from \"@visulima/tui/hooks/use-animation\";\nimport type { ReactElement } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type Props = {\n    /**\n     * Glyph rendered as the blinking dot.\n     * @default \"●\" (filled bullet)\n     */\n    readonly character?: string;\n\n    /**\n     * Dot color.\n     * @default \"red\"\n     */\n    readonly color?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Milliseconds per blink cycle. The dot is visible for half the cycle.\n     * @default 800\n     */\n    readonly interval?: number;\n\n    /**\n     * When false, the dot stays solid (no animation).\n     * @default true\n     */\n    readonly isActive?: boolean;\n};\n\n/**\n * Steady or blinking indicator dot. Pair with `StatusLine` or next to a\n * label to show a \"live\" / \"recording\" status.\n */\nexport default function BlinkDot({ character = \"●\", color = \"red\", interval = 800, isActive = true }: Props): ReactElement {\n    const { frame } = useAnimation({ interval: Math.max(1, Math.floor(interval / 2)), isActive });\n    // When the animation is paused, useAnimation freezes `frame` at 0 — the\n    // dot stays solid. When running, even frames show the character and odd\n    // frames show a space, producing the blink.\n    const visible = !isActive || frame % 2 === 0;\n\n    return <Text color={color}>{visible ? character : \" \"}</Text>;\n}\n\nexport { BlinkDot };\nexport type { Props as BlinkDotProps };\n",
+      "path": "registry/ui/blink-dot.tsx",
+      "target": "components/ui/blink-dot.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/breadcrumb.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "type": "registry:ui",
+  "title": "Breadcrumb",
+  "description": "Breadcrumb component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Fragment } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type BreadcrumbItem = {\n    readonly icon?: ReactNode;\n    readonly key?: string;\n    readonly label: string;\n};\n\nexport type Props = {\n    /**\n     * Color applied to the trailing (current) item.\n     * @default \"blue\"\n     */\n    readonly currentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Items to display from root to current page.\n     */\n    readonly items: ReadonlyArray<BreadcrumbItem>;\n\n    /**\n     * Glyph rendered between adjacent items.\n     * @default \"›\" (right single angle quote)\n     */\n    readonly separator?: string;\n};\n\n/**\n * Render a breadcrumb trail (last item is highlighted).\n */\nexport default function Breadcrumb({ currentColor = \"blue\", items, separator = \"›\" }: Props): ReactElement {\n    return (\n        <Box>\n            {items.map((item, index) => {\n                const isLast = index === items.length - 1;\n\n                return (\n                    <Fragment key={item.key ?? item.label}>\n                        {index > 0\n                            ? (\n<Text dimColor>\n{\" \"}\n{separator}\n{\" \"}\n</Text>\n                            )\n                            : undefined}\n                        <Text bold={isLast} color={isLast ? currentColor : undefined} dimColor={!isLast}>\n                            {item.icon === undefined\n                                ? undefined\n                                : (\n<>\n{item.icon}\n{\" \"}\n</>\n                                )}\n                            {item.label}\n                        </Text>\n                    </Fragment>\n                );\n            })}\n        </Box>\n    );\n}\n\nexport { Breadcrumb };\nexport type { Props as BreadcrumbProps };\n",
+      "path": "registry/ui/breadcrumb.tsx",
+      "target": "components/ui/breadcrumb.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/button.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "type": "registry:ui",
+  "title": "Button",
+  "description": "Button component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport useFocus from \"@visulima/tui/hooks/use-focus\";\nimport useInput from \"@visulima/tui/hooks/use-input\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useCallback } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type ButtonVariant = \"ghost\" | \"outline\" | \"primary\" | \"secondary\";\n\nexport type Props = {\n    /**\n     * Accent color used when the button is focused.\n     * @default \"blue\"\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Focus this button when mounted if nothing else is focused.\n     */\n    readonly autoFocus?: boolean;\n\n    /**\n     * Button label.\n     */\n    readonly children: ReactNode;\n\n    /**\n     * When true, the button ignores input and is rendered dim.\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * Called when the user presses Enter or Space while the button has focus.\n     */\n    readonly onPress?: () => void;\n\n    /**\n     * Visual style.\n     * @default \"primary\"\n     */\n    readonly variant?: ButtonVariant;\n};\n\nconst BORDER_STYLE = \"round\" as const;\n\n/**\n * Pick the label color for a Button based on its variant, focus state, and\n * disabled state. Returns `undefined` when the default terminal color should\n * be used (disabled, or an unfocused non-primary button). The focused primary\n * variant uses `\"black\"` so the label is readable against the filled accent\n * background; every other focused variant just echoes `accentColor`.\n */\nconst resolveTextColor = (\n    variant: ButtonVariant,\n    isFocused: boolean,\n    isDisabled: boolean,\n    accentColor: LiteralUnion<AnsiColors, string>,\n    // eslint-disable-next-line sonarjs/function-return-type -- legitimate union return based on variant/state\n): LiteralUnion<AnsiColors, string> | undefined => {\n    if (isDisabled) {\n        return undefined;\n    }\n\n    if (variant === \"primary\" && isFocused) {\n        return \"black\";\n    }\n\n    if (isFocused) {\n        return accentColor;\n    }\n\n    return undefined;\n};\n\n/**\n * Focusable button. Triggers `onPress` on Enter / Space.\n * @returns A `ReactElement` rendering the button (bordered or ghost variant).\n */\nexport default function Button({ accentColor = \"blue\", autoFocus = false, children, isDisabled = false, onPress, variant = \"primary\" }: Props): ReactElement {\n    const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });\n\n    useInput(\n        useCallback(\n            (input, key) => {\n                if (!isFocused) {\n                    return;\n                }\n\n                if (key.return || input === \" \") {\n                    onPress?.();\n                }\n            },\n            [isFocused, onPress],\n        ),\n        { isActive: !isDisabled && isFocused },\n    );\n\n    const textColor = resolveTextColor(variant, isFocused, isDisabled, accentColor);\n\n    if (variant === \"ghost\") {\n        return (\n            <Box paddingX={1}>\n                <Text bold={isFocused} color={textColor} dimColor={isDisabled}>\n                    {isFocused ? \"▸ \" : \"  \"}\n                    {children}\n                </Text>\n            </Box>\n        );\n    }\n\n    // Visual tokens per variant:\n    //\n    //   primary   → filled accent background + accent border (highlighted when focused)\n    //   secondary → transparent background + accent border always; bolder label on focus\n    //   outline   → transparent background + neutral border, accent-colored when focused\n    // eslint-disable-next-line sonarjs/function-return-type -- legitimate union return based on variant/focus\n    const borderColor = (() => {\n        if (variant === \"outline\") {\n            return isFocused ? accentColor : \"gray\";\n        }\n\n        if (variant === \"secondary\") {\n            // Secondary keeps the accent-colored border always; focus is\n            // conveyed by the bold label alone.\n            return accentColor;\n        }\n\n        // primary (and any future variants) — accent border when focused.\n        return isFocused ? accentColor : undefined;\n    })();\n    const fillBackground = variant === \"primary\" && isFocused ? accentColor : undefined;\n\n    return (\n        <Box backgroundColor={fillBackground} borderColor={borderColor} borderStyle={BORDER_STYLE} paddingX={1}>\n            <Text bold={isFocused} color={textColor} dimColor={isDisabled}>\n                {children}\n            </Text>\n        </Box>\n    );\n}\n\nexport { Button };\nexport type { Props as ButtonProps };\n",
+      "path": "registry/ui/button.tsx",
+      "target": "components/ui/button.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}