@visulima/tui-kit 0.0.0 → 1.0.1

package/dist/paragraph.d.ts

@@ -0,0 +1,32 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+   * Paragraph body.
+   */
+  readonly children: ReactNode;
+  /**
+   * Foreground color.
+   */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Render the paragraph with dim color.
+   */
+  readonly dimColor?: boolean;
+  /**
+   * Blank lines to add after the paragraph.
+   * @default 1
+   */
+  readonly marginBottom?: number;
+  /**
+   * Blank lines to add before the paragraph.
+   * @default 0
+   */
+  readonly marginTop?: number;
+};
+/**
+ * Wraps body text with a trailing blank line. Useful for README-style layouts.
+ */
+declare function Paragraph({ children, color, dimColor, marginBottom, marginTop }: Props): ReactElement;
+export { Paragraph, type Props as ParagraphProps, Props, Paragraph as default };

package/dist/paragraph.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import a from"@visulima/tui/components/box";import l from"@visulima/tui/components/text";function p({children:r,color:i,dimColor:m=!1,marginBottom:n=1,marginTop:t=0}){return o(a,{flexDirection:"column",marginBottom:n,marginTop:t,children:o(l,{color:i,dimColor:m,children:r})})}export{p as Paragraph,p as default};

package/dist/path-input.d.ts

@@ -0,0 +1,56 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+   * Accent color for the focused border and caret.
+   * @default "blue"
+   */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Auto-focus on mount.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Initial path when uncontrolled.
+   */
+  readonly defaultValue?: string;
+  /**
+   * Override how completions are produced (e.g. to sandbox or mock the
+   * filesystem). Defaults to reading the real filesystem.
+   */
+  readonly getCompletions?: (input: string) => ReadonlyArray<string>;
+  /**
+   * Disable input and dim the display.
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Fires whenever the path text changes.
+   */
+  readonly onChange?: (path: string) => void;
+  /**
+   * Fires on Enter with the current path.
+   */
+  readonly onSubmit?: (path: string) => void;
+  /**
+   * Placeholder shown when empty.
+   * @default "Enter a path…"
+   */
+  readonly placeholder?: string;
+  /**
+   * Show the first few completion candidates beneath the field.
+   * @default true
+   */
+  readonly showSuggestions?: boolean;
+  /**
+   * Controlled path. When provided, `defaultValue` is ignored.
+   */
+  readonly value?: string;
+};
+/**
+ * A text input specialised for filesystem paths. Tab completes against the
+ * directory being typed (cycling through matches on repeated presses), and a
+ * short list of candidates is shown below the field.
+ */
+declare function PathInput({ accentColor, autoFocus, defaultValue, getCompletions, isDisabled, onChange, onSubmit, placeholder, showSuggestions, value: controlledValue }: Props): ReactElement;
+export { PathInput, type Props as PathInputProps, Props, PathInput as default };

package/dist/path-input.js

@@ -0,0 +1 @@
+import{jsxs as f,jsx as a}from"react/jsx-runtime";import{readdirSync as E,statSync as I}from"node:fs";import{basename as j,dirname as w,join as L}from"node:path";import g from"@visulima/tui/components/box";import c from"@visulima/tui/components/text";import M from"@visulima/tui/hooks/use-focus";import R from"@visulima/tui/hooks/use-input";import{useState as V,useRef as D,useMemo as X,useCallback as W}from"react";const _=/\/$/,q=r=>{const u=r.endsWith("/")?r:w(r),p=r.endsWith("/")?"":j(r);try{return E(u.length===0?".":u).filter(o=>o.startsWith(p)).map(o=>{const e=L(u,o);try{return I(e).isDirectory()?`${e}/`:e}catch{return e}}).toSorted((o,e)=>o.localeCompare(e))}catch{return[]}},C=5;function T({accentColor:r="blue",autoFocus:u=!1,defaultValue:p="",getCompletions:o=q,isDisabled:e=!1,onChange:b,onSubmit:v,placeholder:k="Enter a path…",showSuggestions:F=!0,value:S}){const{isFocused:d}=M({autoFocus:u,isActive:!e}),x=S!==void 0,[P,A]=V(p),t=S??P,s=D(null),y=D(b);y.current=b;const i=X(()=>o(t),[o,t]),m=W(n=>{x||A(n),y.current?.(n)},[x]),B=W((n,l)=>{if(l.tab){s.current??={index:0,matches:i};const{index:$,matches:h}=s.current;h.length>0&&(s.current={index:$+1,matches:h},m(h[$%h.length]));return}if(l.return){v?.(t);return}if(l.backspace||l.delete){s.current=null,m(t.slice(0,-1));return}n.length>0&&n.codePointAt(0)>=32&&(s.current=null,m(`${t}${n}`))},[i,v,t,m]);return R(B,{isActive:d&&!e}),f(g,{flexDirection:"column",children:[f(g,{borderColor:d?r:void 0,borderStyle:"round",paddingX:1,children:[a(c,{color:r,children:"📁 "}),t.length===0?a(c,{dimColor:!0,children:k}):a(c,{dimColor:e,children:t}),d&&t.length>0?a(c,{color:r,children:"▏"}):void 0]}),F&&d&&i.length>0?f(g,{flexDirection:"column",marginLeft:1,children:[i.slice(0,C).map((n,l)=>f(c,{dimColor:!0,children:[j(n.replace(_,"")),n.endsWith("/")?"/":""]},l)),i.length>C?a(c,{dimColor:!0,children:`…and ${i.length-C} more`}):void 0]}):void 0]})}export{T as PathInput,T as default};

package/dist/pie-chart.d.ts

@@ -0,0 +1,44 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type PieSlice = {
+  /**
+   * Per-slice color override. Falls back to the chart palette.
+   */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  readonly label?: string;
+  readonly value: number;
+};
+type Props = {
+  /**
+   * Slices to render. Non-positive values are ignored.
+   */
+  readonly data: ReadonlyArray<PieSlice>;
+  /**
+   * Format a slice's legend value. Defaults to `value (percent%)`.
+   */
+  readonly formatLegend?: (slice: PieSlice, percent: number) => string;
+  /**
+   * Fallback palette cycled through when a slice has no color.
+   * @default ["cyan", "magenta", "yellow", "green", "blue", "red"]
+   */
+  readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;
+  /**
+   * Render a legend with per-slice values and percentages.
+   * @default true
+   */
+  readonly showLegend?: boolean;
+  /**
+   * Diameter of the disc in character rows. Width is derived to keep the
+   * circle roughly round given the 2x4 braille cell aspect.
+   * @default 8
+   */
+  readonly size?: number;
+};
+/**
+ * A filled pie chart rendered at 2x4 braille sub-cell resolution. Each pixel of
+ * the disc is assigned to the slice whose angular wedge contains it, so slices
+ * keep clean colors. An optional legend lists values and percentages.
+ */
+declare function PieChart({ data, formatLegend, palette, showLegend, size }: Props): ReactElement;
+export { PieChart, type Props as PieChartProps, PieSlice, Props, PieChart as default };

package/dist/pie-chart.js

@@ -0,0 +1 @@
+import{jsxs as C,jsx as s}from"react/jsx-runtime";import{createBrailleGrid as E}from"@visulima/tui/canvas";import M from"@visulima/tui/components/box";import F from"@visulima/tui/components/canvas";import $ from"@visulima/tui/components/text";import{useMemo as j}from"react";const G=["cyan","magenta","yellow","green","blue","red"],B=(r,i,l)=>l.color??i[r%i.length]??"cyan",S=(r,i)=>`${r.label??""} ${r.value} (${i.toFixed(0)}%)`.trim();function N({data:r,formatLegend:i=S,palette:l=G,showLegend:D=!0,size:L=8}){const c=j(()=>r.filter(t=>t.value>0),[r]),h=j(()=>c.reduce((t,n)=>t+n.value,0),[c]),u=Math.max(2,L),x=Math.max(2,Math.round(u*4/2/2));return C(M,{flexDirection:"row",gap:2,children:[s(F,{draw:t=>{if(t.clear(),h<=0)return;const n=t.width*2,v=t.height*4,w=n/2,P=v/2,y=Math.max(1,Math.min(w,P)-1),m=[];let g=0;c.forEach((o,e)=>{const a=g/h*Math.PI*2;g+=o.value;const d=g/h*Math.PI*2;m.push({color:B(e,l,o),end:d,start:a})});const p=new Map,z=o=>{const e=p.get(o);if(e!==void 0)return e;const a=E(t.width,t.height);return p.set(o,a),a};for(let o=0;o<v;o+=1)for(let e=0;e<n;e+=1){const a=e-w,d=o-P;if(a*a+d*d>y*y)continue;let f=Math.atan2(a,-d);f<0&&(f+=Math.PI*2);const I=m.find(b=>f>=b.start&&f<b.end)??m[m.length-1];I&&z(I.color).plotPoint(e,o)}for(const[o,e]of p)e.flush(t,{color:o})},height:u,version:[r,h,l,u,x],width:x}),D&&c.length>0?s(M,{flexDirection:"column",children:c.map((t,n)=>C(M,{gap:1,children:[s($,{color:B(n,l,t),children:"●"}),s($,{dimColor:!0,children:i(t,t.value/h*100)})]},n))}):void 0]})}export{N as PieChart,N as default};

package/dist/placeholder.d.ts

@@ -0,0 +1,47 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+   * Whether to pulse the skeleton blocks (shimmer).
+   * @default true
+   */
+  readonly animated?: boolean;
+  /**
+   * Glyph repeated to fill each placeholder block.
+   * @default "█" (full block)
+   */
+  readonly character?: string;
+  /**
+   * Block color.
+   * @default "gray"
+   */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Milliseconds between pulses.
+   * @default 500
+   */
+  readonly interval?: number;
+  /**
+   * Number of skeleton rows to render.
+   * @default 3
+   */
+  readonly rows?: number;
+  /**
+   * Total width reference. When omitted, the block flexes to fill its
+   * parent.
+   */
+  readonly width?: number;
+  /**
+   * Relative widths of each row (0–1). The list is sampled cyclically.
+   * @default [1, 0.85, 0.6]
+   */
+  readonly widths?: ReadonlyArray<number>;
+};
+/**
+ * Skeleton loading indicator. Renders a stack of solid blocks whose widths
+ * vary to mimic text placeholders. Pair with `async` data fetching.
+ * @returns A `ReactElement` rendering the skeleton rows.
+ */
+declare function Placeholder({ animated, character, color, interval, rows, width, widths }: Props): ReactElement;
+export { Placeholder, type Props as PlaceholderProps, Props, Placeholder as default };

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,39 @@
+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,43 @@
+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,50 @@
+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,39 @@
+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"
+    }
+  ]
+}