@visulima/tui 1.0.0-alpha.8 → 1.0.0

package/README.md

@@ -65,11 +65,39 @@ yarn add @visulima/tui react react-reconciler
 pnpm add @visulima/tui react react-reconciler
 ```
 
-## Quick Start
+### Component imports
+
+Every component lives at its own subpath under `@visulima/tui/components/<kebab-name>`. Hooks, `render`, and primitives stay on the bare `@visulima/tui` entry. This keeps the import graph small — you only pull in what you use, and heavy peer dependencies are loaded only when their component is imported.
 
 ```tsx
-import { render, Box, Text } from "@visulima/tui";
+import { Box } from "@visulima/tui/components/box";
+import { Text } from "@visulima/tui/components/text";
+import { Spinner } from "@visulima/tui/components/spinner";
+import { useApp } from "@visulima/tui/hooks/use-app";
+import { useInput } from "@visulima/tui/hooks/use-input";
+import { render } from "@visulima/tui";
+```
+
+### Optional peer dependencies
+
+A few components have heavy peer dependencies. Install only the peers for the components you use:
+
+| Component  | Subpath                              | Required peers                                                                                            |
+| ---------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------- |
+| `BigText`  | `@visulima/tui/components/big-text`  | `cfonts`                                                                                                  |
+| `Code`     | `@visulima/tui/components/code`      | `shiki`, `@shikijs/langs`, `@shikijs/themes`                                                              |
+| `DiffView` | `@visulima/tui/components/diff-view` | `diff` (+ `shiki`, `@shikijs/langs`, `@shikijs/themes` for syntax highlighting)                           |
+| `Markdown` | `@visulima/tui/components/markdown`  | `marked` (+ `shiki`, `@shikijs/langs`, `@shikijs/themes` for code blocks; `@visulima/tabular` for tables) |
+| `Table`    | `@visulima/tui/components/table`     | `@visulima/tabular`                                                                                       |
+
+To enable the in-app React DevTools overlay (`DEV=true`), install `react-devtools-core` and `ws`.
+
+## Quick Start
 
+```tsx
+import { Box } from "@visulima/tui/components/box";
+import { Text } from "@visulima/tui/components/text";
+import { render } from "@visulima/tui";
 const App = () => (
     <Box flexDirection="column" padding={1}>
         <Text bold>Hello, world!</Text>
@@ -87,8 +115,8 @@ render(<App />);
 Drive frame-based or time-based animations with a shared timer. Multiple `useAnimation` calls consolidate into one render cycle.
 
 ```tsx
-import { Text, useAnimation } from "@visulima/tui";
-
+import { Text } from "@visulima/tui/components/text";
+import { useAnimation } from "@visulima/tui/hooks/use-animation";
 const Spinner = () => {
     const { frame } = useAnimation({ interval: 80 });
     const characters = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
@@ -104,6 +132,23 @@ const Spinner = () => {
 
 Returns `{ frame, time, delta, reset }`. See the [full hooks reference](https://visulima.com/packages/tui/hooks#useanimation) for detailed return values, more examples (sine waves, physics, pausable, reset), and `maxFps` interaction.
 
+The full list of hooks (each at `@visulima/tui/hooks/<name>`): `use-animation`, `use-app`, `use-box-metrics`, `use-clipboard`, `use-color-blindness`, `use-console-capture`, `use-cursor`, `use-element-position`, `use-focus`, `use-focus-manager`, `use-form`, `use-hotkey`, `use-input`, `use-interval`, `use-is-screen-reader-enabled`, `use-key-bindings`, `use-key-chord`, `use-linked-scroll`, `use-mouse`, `use-mouse-action`, `use-mouse-position`, `use-on-mouse-click`, `use-on-mouse-hover`, `use-on-mouse-state`, `use-paste`, `use-persistent-state`, `use-scroll-acceleration`, `use-scroll-input`, `use-stderr`, `use-stdin`, `use-stdout`, `use-stopwatch`, `use-terminal-palette`, `use-text-buffer`, `use-text-selection`, `use-timeout`, `use-timer`, `use-window-size`. See the [hooks reference](https://visulima.com/packages/tui/hooks) for details.
+
+## Component Catalog
+
+`@visulima/tui` ships 90+ components, each at its own subpath `@visulima/tui/components/<name>`:
+
+- **Layout & text**: `box`, `text`, `paragraph`, `heading`, `divider`, `spacer`, `newline`, `transform`, `gradient`, `big-text`, `shimmer-text`, `streaming-text`, `placeholder`, `link`, `kbd`, `code`, `markdown`, `diff-view`.
+- **Lists & data**: `ordered-list`, `unordered-list`, `definition-list`, `option-list`, `table`, `tree-view`, `operation-tree`, `breadcrumb`, `paginator`, `tag`, `badge`, `model-badge`.
+- **Inputs & forms**: `text-input`, `textarea`, `masked-input`, `search-input`, `confirm-input`, `select-input` (`select-input-item`, `select-input-indicator`), `multi-select`, `checkbox`, `radio-group`, `switch`, `slider`, `date-picker`, `calendar`, `form`, `button`, `file-picker`.
+- **Feedback & status**: `alert`, `toast`, `status-line`, `status-message`, `progress-bar`, `gauge`, `spinner`, `loading-indicator`, `blink-dot`, `stepper`, `timer`, `stopwatch`, `cursor`.
+- **Overlays & navigation**: `dialog`, `confirm-dialog`, `approval-prompt`, `command-palette`, `command-block`, `menu`, `tooltip`, `tab`, `tabs`, `content-switcher`, `accordion`, `collapsible`, `help`, `console-overlay`, `message-bubble`.
+- **Charts & viz**: `area-chart`, `bar-chart`, `line-chart`, `scatter-plot`, `histogram`, `heatmap`, `sparkline`, `canvas`, `card`.
+- **Scrolling**: `scroll-view`, `controlled-scroll-view`, `scroll-list`, `scroll-bar`, `scroll-bar-box`.
+- **Animation & rendering**: `animate-presence`, `transition`, `static`, `static-render`.
+
+Browse the live gallery and per-component APIs in the [component docs](https://visulima.com/packages/tui/components).
+
 ## Documentation
 
 Full documentation, API reference, component gallery, and guides are available at:

package/dist/components/accordion.d.ts

@@ -0,0 +1,59 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type AccordionItem = {
+  /**
+  * Content rendered when the item is expanded.
+  */
+  readonly content: ReactNode;
+  /**
+  * Unique identifier.
+  */
+  readonly id: string;
+  /**
+  * Header label.
+  */
+  readonly title: ReactNode;
+};
+type Props = {
+  /**
+  * Accent color for the focused header.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * When true, multiple panels can be open at once.
+  * @default false
+  */
+  readonly allowMultiple?: boolean;
+  /**
+  * Auto-focus the first item on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Initially open item ids.
+  */
+  readonly defaultExpanded?: ReadonlyArray<string>;
+  /**
+  * Disable interaction.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * List of panels.
+  */
+  readonly items: ReadonlyArray<AccordionItem>;
+};
+/**
+* Keyboard-navigable accordion. Use arrow keys to move between panels and
+* Enter / Space to toggle.
+* @returns A `ReactElement` rendering the accordion column.
+*/
+declare function Accordion({
+  accentColor,
+  allowMultiple,
+  autoFocus,
+  defaultExpanded,
+  isDisabled,
+  items
+}: Props): ReactElement;
+export { Accordion, AccordionItem, type Props as AccordionProps, Props, Accordion as default };

package/dist/components/accordion.js

@@ -0,0 +1 @@
+import{jsx as m,jsxs as a}from"react/jsx-runtime";import{useState as b,useRef as F,useCallback as v}from"react";import j from"../ink/hooks/use-focus.js";import k from"../ink/hooks/use-input.js";import{Box as u}from"./box.js";import{Text as A}from"./text.js";function M({accentColor:g="blue",allowMultiple:d=!1,autoFocus:w=!1,defaultExpanded:i,isDisabled:c=!1,items:l}){const{isFocused:s}=j({autoFocus:w,isActive:!c}),[C,D]=b(()=>i===void 0||i.length===0?[]:d?i:i.slice(0,1)),[f,p]=b(0),n=F(f);n.current=f;const x=v(r=>{D(e=>{const o=e.includes(r);return d?o?e.filter(t=>t!==r):[...e,r]:o?[]:[r]})},[d]);return k(v((r,e)=>{if(!s)return;const o=l.length;if((e.downArrow||r==="j")&&n.current<o-1)p(n.current+1);else if((e.upArrow||r==="k")&&n.current>0)p(n.current-1);else if(e.return||r===" "){const t=l[n.current];t&&x(t.id)}},[s,l,x]),{isActive:!c&&s}),m(u,{flexDirection:"column",children:l.map((r,e)=>{const o=C.includes(r.id),t=s&&e===f,h=t?g:void 0;return a(u,{flexDirection:"column",children:[a(u,{children:[a(A,{color:h,dimColor:c,children:[t?"▸ ":"  ",o?"▼ ":"▶ "]}),m(A,{bold:t,color:h,dimColor:c,children:r.title})]}),o?m(u,{flexDirection:"column",marginBottom:1,marginLeft:4,children:r.content}):void 0]},r.id)})})}export{M as Accordion,M as default};

package/dist/components/alert.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode, ReactElement } from 'react';
+import { V as Variant } from "../packem_shared/variant-config.d-D5NnrrQK.js";
+type AlertVariant = Variant;
+type Props = {
+  /**
+  * Alert message content.
+  */
+  readonly children: ReactNode;
+  /**
+  * Optional heading displayed above the message.
+  */
+  readonly title?: string;
+  /**
+  * Determines the border color and icon.
+  */
+  readonly variant: AlertVariant;
+};
+/**
+* Renders a bordered alert box with a variant-specific icon, optional title, and message.
+*/
+declare function Alert({
+  children,
+  title,
+  variant
+}: Props): ReactElement;
+export { Alert, type Props as AlertProps, AlertVariant, Props, Alert as default };

package/dist/components/alert.js

@@ -0,0 +1 @@
+import{jsxs as l,jsx as r}from"react/jsx-runtime";import{Box as o}from"./box.js";import{Text as i}from"./text.js";import{o as f}from"../packem_shared/variant-config-BJqpNo7H.js";function p({children:t,title:e,variant:d}){const{color:n,icon:c}=f[d];return l(o,{borderColor:n,borderStyle:"round",flexGrow:1,gap:1,paddingX:1,children:[r(o,{flexShrink:0,children:r(i,{color:n,children:c})}),l(o,{flexDirection:"column",flexGrow:1,flexShrink:1,gap:1,minWidth:0,children:[e?r(i,{bold:!0,children:e}):void 0,r(i,{children:t})]})]})}export{p as Alert,p as default};

package/dist/components/animate-presence.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, ReactElement } from 'react';
+type Props = {
+  /**
+  * Keyed children. Any child that accepts a `show: boolean` prop and calls
+  * `onExit` when its exit transition finishes (such as `<Transition />`) is
+  * orchestrated automatically. Other children render as-is.
+  */
+  readonly children: ReactNode;
+};
+/**
+* Orchestrates enter / exit animations for keyed children. Wrap a dynamic
+* list of `<Transition />` (or any component accepting `show` + `onExit`) to
+* keep outgoing children mounted until their exit animation finishes.
+*/
+declare function AnimatePresence({
+  children
+}: Props): ReactElement;
+export { AnimatePresence, type Props as AnimatePresenceProps, Props, AnimatePresence as default };

package/dist/components/animate-presence.js

@@ -0,0 +1 @@
+import{jsx as y}from"react/jsx-runtime";import{useState as k,Children as f,isValidElement as a,useEffect as w,useCallback as d,cloneElement as m}from"react";import{Box as E}from"./box.js";const p=s=>{const{key:r}=s;if(r!==null)return r},x=s=>s.type?.isAnimatable===!0?!0:typeof s.props=="object"&&s.props!==null&&"show"in s.props;function A({children:s}){const[r,c]=k(()=>{const e=[];return f.forEach(s,t=>{if(!a(t))return;const n=p(t);n!==void 0&&e.push({element:t,key:n,show:!0})}),e});w(()=>{const e=new Map;f.forEach(s,t=>{if(!a(t))return;const n=p(t);n!==void 0&&e.set(n,t)}),c(t=>{const n=[],i=new Set;let l=!1;for(const o of t)if(e.has(o.key)){const u=e.get(o.key);(!o.show||o.element!==u)&&(l=!0),n.push({element:u,key:o.key,show:!0}),i.add(o.key)}else o.show&&(l=!0),n.push({...o,show:!1});for(const[o,u]of e)i.has(o)||(l=!0,n.push({element:u,key:o,show:!0}));return l?n:t})},[s]);const h=d(e=>{c(t=>t.filter(n=>n.key!==e))},[]);return y(E,{flexDirection:"column",children:r.map(e=>{if(!x(e.element))return m(e.element,{key:e.key});const t=e.element.props.onExit;return m(e.element,{key:e.key,onExit:()=>{t?.(),h(e.key)},show:e.show})})})}export{A as AnimatePresence,A as default};

package/dist/components/approval-prompt.d.ts

@@ -0,0 +1,65 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type ApprovalRisk = "high" | "low" | "medium";
+type ApprovalDecision = "allow-always" | "allow-once" | "deny";
+type Props = {
+  /**
+  * Accent color for the highlighted option letters. Overrides the risk color.
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus the prompt on mount. Set to `false` if a parent already
+  * owns focus and routes input to this component.
+  * @default true
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Optional body rendered between the header and the prompt line (e.g. a
+  * rendered diff or command preview).
+  */
+  readonly children?: ReactNode;
+  /**
+  * Accessible description of what approving will do.
+  */
+  readonly description?: string;
+  /**
+  * Disable input; use when a parent manages focus and input routing.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Resolution callback. Called once the user answers.
+  */
+  readonly onDecision: (decision: ApprovalDecision) => void;
+  /**
+  * Params shown as a compact key=value preview.
+  */
+  readonly params?: Readonly<Record<string, unknown>>;
+  /**
+  * Severity badge; controls the border color.
+  * @default "medium"
+  */
+  readonly risk?: ApprovalRisk;
+  /**
+  * Name of the tool / action under review.
+  */
+  readonly tool: string;
+};
+/**
+* Three-way approval prompt for tool calls. Resolves via `onDecision`:
+* `y` / Enter → allow-once, `a` → allow-always, `n` / Esc → deny.
+* @returns A bordered `ReactElement` containing the risk banner, params
+* preview, optional body, and the prompt line.
+*/
+declare function ApprovalPrompt({
+  accentColor,
+  autoFocus,
+  children,
+  description,
+  isDisabled,
+  onDecision,
+  params,
+  risk,
+  tool
+}: Props): ReactElement;
+export { ApprovalDecision, ApprovalPrompt, type Props as ApprovalPromptProps, ApprovalRisk, Props, ApprovalPrompt as default };

package/dist/components/approval-prompt.js

@@ -0,0 +1 @@
+import{jsxs as n,jsx as o}from"react/jsx-runtime";import{useCallback as v}from"react";import x from"../ink/hooks/use-focus.js";import S from"../ink/hooks/use-input.js";import{Box as i}from"./box.js";import{Text as e}from"./text.js";const C={high:"red",low:"green",medium:"yellow"},k={high:"HIGH RISK",low:"LOW RISK",medium:"MEDIUM RISK"},A=r=>{if(r===null)return"null";if(typeof r=="string")return r;if(typeof r=="number"||typeof r=="boolean")return String(r);try{return JSON.stringify(r)}catch{return String(r)}};function O({accentColor:r,autoFocus:b=!0,children:u,description:m,isDisabled:h=!1,onDecision:l,params:p,risk:f="medium",tool:y}){const d=C[f],a=r??d,{isFocused:w}=x({autoFocus:b,isActive:!h});S(v((t,c)=>{const s=t.toLowerCase();if(s==="y"||c.return){l("allow-once");return}if(s==="a"){l("allow-always");return}(s==="n"||c.escape)&&l("deny")},[l]),{isActive:!h&&w});const g=p===void 0?[]:Object.entries(p);return n(i,{borderColor:d,borderStyle:"round",flexDirection:"column",paddingX:1,children:[n(i,{children:[n(e,{backgroundColor:d,color:"black",children:[" ",k[f]," "]}),n(e,{children:[" ",o(e,{bold:!0,children:y})]})]}),m===void 0?void 0:o(i,{marginTop:1,children:o(e,{children:m})}),g.length===0?void 0:o(i,{flexDirection:"column",marginTop:1,children:g.map(([t,c])=>n(i,{children:[n(e,{color:"cyan",children:[t,"="]}),o(e,{wrap:"truncate-end",children:A(c)})]},t))}),u===void 0?void 0:o(i,{marginTop:1,children:u}),o(i,{marginTop:1,children:n(e,{children:["Allow? [",o(e,{bold:!0,color:a,children:"y"}),"es /"," ",o(e,{bold:!0,color:a,children:"a"}),"lways /"," ",o(e,{bold:!0,color:a,children:"n"}),"o ]"]})})]})}export{O as ApprovalPrompt,O as default};

package/dist/components/area-chart.d.ts

@@ -0,0 +1,66 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+import { LineSeries } from "./line-chart.js";
+import "../packem_shared/buffer.d-EJkZr8uH.js";
+type Props = {
+  /**
+  * Axis label color.
+  * @default "gray"
+  */
+  readonly axisColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Density of the shaded fill below each line.
+  * - `light` → `░`
+  * - `medium` → `▒` (default)
+  * - `heavy` → `▓`
+  */
+  readonly fillDensity?: "heavy" | "light" | "medium";
+  /**
+  * Chart body height in character rows.
+  * @default 10
+  */
+  readonly height?: number;
+  /**
+  * Upper bound for the y-axis.
+  */
+  readonly maxY?: number;
+  /**
+  * Lower bound for the y-axis.
+  */
+  readonly minY?: number;
+  /**
+  * Fallback palette.
+  */
+  readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;
+  /**
+  * Series to plot.
+  */
+  readonly series: ReadonlyArray<LineSeries>;
+  /**
+  * Render the legend below the plot.
+  * @default true
+  */
+  readonly showLegend?: boolean;
+  /**
+  * Chart body width in character columns.
+  * @default 40
+  */
+  readonly width?: number;
+};
+/**
+* Area chart: line chart with the area between the line and the baseline
+* filled with shaded blocks.
+*/
+declare function AreaChart({
+  axisColor,
+  fillDensity,
+  height,
+  maxY,
+  minY,
+  palette,
+  series,
+  showLegend,
+  width
+}: Props): ReactElement;
+export { AreaChart, type Props as AreaChartProps, Props, AreaChart as default };

package/dist/components/area-chart.js

@@ -0,0 +1 @@
+import{jsxs as b,jsx as m}from"react/jsx-runtime";import{useMemo as A}from"react";import{c as P}from"../packem_shared/braille-ch3O5D7I.js";import{Box as M}from"./box.js";import{Canvas as Y}from"./canvas.js";import{t as _,p as F,c as L,D,a as u}from"../packem_shared/line-chart-C7CUrvVs.js";import{Text as w}from"./text.js";const S=D,V={heavy:"▓",light:"░",medium:"▒"};function H({axisColor:I="gray",fillDensity:y="medium",height:g=10,maxY:p,minY:h,palette:d=S,series:f,showLegend:C=!0,width:N=40}){const s=A(()=>{const o=f.map((r,c)=>({color:F(r,c,d),points:_(r.data),series:r})),t=L(o);return{list:o,xMax:t.xMax===Number.NEGATIVE_INFINITY?1:t.xMax,xMin:t.xMin===Number.POSITIVE_INFINITY?0:t.xMin,yMax:p??(t.yMax===Number.NEGATIVE_INFINITY?1:t.yMax),yMin:h??(t.yMin===Number.POSITIVE_INFINITY?0:t.yMin)}},[f,d,h,p]),T=V[y];return b(M,{flexDirection:"column",children:[m(Y,{draw:o=>{o.clear();const t=o.width*2,r=o.height*4,c={xMax:s.xMax,xMin:s.xMin,yMax:s.yMax,yMin:s.yMin};for(const{color:a,points:n}of s.list)if(n.length!==0)for(let l=0;l<o.width;l+=1){let i;for(const e of n){const{px:x,py:v}=u(e,c,t,r);if(Math.floor(x/2)===l){const E=Math.floor(v/4);(i===void 0||E<i)&&(i=E)}}if(i!==void 0)for(let e=i+1;e<o.height;e+=1)o.setCell(l,e,T,{color:a,dim:!0})}for(let a=0;a<o.width;a+=2)o.setCell(a,o.height-1,"·",{color:I,dim:!0});for(const{color:a,points:n}of s.list){if(n.length===0)continue;const l=P(o.width,o.height);let i=u(n[0],c,t,r);l.plotPoint(i.px,i.py);for(let e=1;e<n.length;e+=1){const x=u(n[e],c,t,r);l.plotLine(i.px,i.py,x.px,x.py),i=x}l.flush(o,{bold:!0,color:a})}},height:g,version:[f,N,g,h,p,y,I,d],width:N}),C?m(M,{gap:2,marginTop:1,children:s.list.map(({color:o,series:t},r)=>b(M,{gap:1,children:[m(w,{color:o,children:T}),m(w,{children:t.label??`Series ${r+1}`})]},`${r}:${t.label??""}`))}):void 0]})}export{H as AreaChart,H as default};

package/dist/components/badge.d.ts

@@ -0,0 +1,22 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Label content. Strings are automatically uppercased.
+  */
+  readonly children: ReactNode;
+  /**
+  * Background color for the badge.
+  * @default "magenta"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+};
+/**
+* Renders an uppercase colored label badge, useful for status indicators.
+*/
+declare function Badge({
+  children,
+  color
+}: Props): ReactElement;
+export { Badge, type Props as BadgeProps, Props, Badge as default };

package/dist/components/badge.js

@@ -0,0 +1 @@
+import{jsxs as a,jsx as n}from"react/jsx-runtime";import{Text as o}from"./text.js";function l({children:r,color:t="magenta"}){const e=typeof r=="string"?r.toUpperCase():r;return a(o,{backgroundColor:t,children:[" ",n(o,{color:"black",children:e})," "]})}export{l as Badge,l as default};

package/dist/components/bar-chart.d.ts

@@ -0,0 +1,67 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type BarDatum = {
+  /**
+  * Per-bar color override. Falls back to the chart-level palette.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  readonly label?: string;
+  readonly value: number;
+};
+type Props = {
+  /**
+  * Bars to render.
+  */
+  readonly data: ReadonlyArray<BarDatum>;
+  /**
+  * Total height of the plot area in character rows.
+  * @default 10
+  */
+  readonly height?: number;
+  /**
+  * Optional upper bound for the axis. When omitted the chart uses the
+  * largest value in `data`.
+  */
+  readonly max?: number;
+  /**
+  * Orientation of the bars.
+  * @default "vertical"
+  */
+  readonly orientation?: "horizontal" | "vertical";
+  /**
+  * Fallback palette cycled through when a bar does not provide its own color.
+  * @default ["cyan", "magenta", "yellow", "green", "blue", "red"]
+  */
+  readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;
+  /**
+  * Render labels underneath vertical bars (or to the left of horizontal bars).
+  * @default true
+  */
+  readonly showLabels?: boolean;
+  /**
+  * Render numeric values next to each bar.
+  * @default false
+  */
+  readonly showValues?: boolean;
+  /**
+  * Total width of the plot area in character columns. Defaults to
+  * `data.length * 3` for vertical charts, or `24` for horizontal.
+  */
+  readonly width?: number;
+};
+/**
+* Bar chart rendered on top of `Canvas`. Uses fractional block glyphs for
+* sub-cell precision (▁▂▃▄▅▆▇█ vertical, ▏▎▍▌▋▊▉█ horizontal).
+*/
+declare function BarChart({
+  data,
+  height,
+  max: maxOverride,
+  orientation,
+  palette,
+  showLabels,
+  showValues,
+  width: widthOverride
+}: Props): ReactElement;
+export { BarChart, type Props as BarChartProps, BarDatum, Props, BarChart as default };

package/dist/components/bar-chart.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as B}from"react/jsx-runtime";import{useMemo as E}from"react";import{Box as o}from"./box.js";import{Canvas as C}from"./canvas.js";import{Text as p}from"./text.js";const j=["cyan","magenta","yellow","green","blue","red"],D=(r,t)=>{if(t!==void 0)return t;if(r.length===0)return 0;let a=r[0].value;for(let u=1;u<r.length;u+=1){const{value:h}=r[u];h>a&&(a=h)}return a},S=(r,t,a)=>a.color??t[r%t.length]??"cyan";function z({data:r,height:t=10,max:a,orientation:u="vertical",palette:h=j,showLabels:w=!0,showValues:g=!1,width:k}){const c=E(()=>D(r,a),[r,a]);if(u==="horizontal"){const i=k??24;return e(o,{flexDirection:"column",children:r.map((l,s)=>{const v=c===0?0:l.value/c,m=S(s,h,l);return B(o,{gap:1,children:[w&&l.label!==void 0?e(o,{flexShrink:0,minWidth:8,children:e(p,{dimColor:!0,wrap:"truncate-end",children:l.label})}):void 0,e(o,{flexGrow:1,flexShrink:1,children:e(C,{draw:f=>{f.clear(),f.drawHBar(0,0,i,v,{color:m})},height:1,version:[l.value,c,m,i],width:i})}),g?e(o,{flexShrink:0,children:e(p,{children:String(l.value)})}):void 0]},s)})})}const n=2,d=1,b=k??Math.max(r.length*(n+d),1);return B(o,{flexDirection:"column",children:[e(C,{draw:i=>{i.clear(),r.forEach((l,s)=>{const v=c===0?0:l.value/c,m=S(s,h,l),f=s*(n+d);for(let x=0;x<n;x+=1)i.drawVBar(f+x,0,t,v,{color:m})})},height:t,version:[r,c,h,n,d,t],width:b}),g?e(o,{children:r.map((i,l)=>e(o,{width:n+d,children:e(p,{dimColor:!0,children:String(i.value).padEnd(n+d," ")})},l))}):void 0,w?e(o,{children:r.map((i,l)=>e(o,{width:n+d,children:e(p,{dimColor:!0,wrap:"truncate-end",children:(i.label??"").padEnd(n+d," ")})},l))}):void 0]})}export{z as BarChart,z as default};

package/dist/components/big-text.d.ts

@@ -0,0 +1,81 @@
+import { ReactElement } from 'react';
+/**
+* Available CFonts font faces.
+*/
+type Font = "3d" | "block" | "chrome" | "grid" | "huge" | "pallet" | "shade" | "simple" | "simple3d" | "simpleBlock" | "slick" | "tiny";
+/**
+* Horizontal text alignment.
+*/
+type Align = "center" | "left" | "right";
+/**
+* Terminal background color names supported by CFonts.
+*/
+type BackgroundColor = "black" | "blue" | "cyan" | "green" | "magenta" | "red" | "transparent" | "white" | "yellow";
+type Props = {
+  /**
+  * Horizontal alignment of the text.
+  * @default "left"
+  */
+  readonly align?: Align;
+  /**
+  * Background color.
+  * @default "transparent"
+  */
+  readonly backgroundColor?: BackgroundColor;
+  /**
+  * Colors to use for the font. Accepts color names, hex values, or `"system"` for terminal default.
+  * @default ["system"]
+  */
+  readonly colors?: string[];
+  /**
+  * Font face to use.
+  * @default "block"
+  * @see https://github.com/dominikwilkowski/cfonts#supported-fonts
+  */
+  readonly font?: Font;
+  /**
+  * Letter spacing.
+  * @default 1
+  */
+  readonly letterSpacing?: number;
+  /**
+  * Line height.
+  * @default 1
+  */
+  readonly lineHeight?: number;
+  /**
+  * Maximum character length per line. `0` means no limit.
+  * @default 0
+  */
+  readonly maxLength?: number;
+  /**
+  * Whether to add an empty line on top and at the bottom of the output.
+  * @default true
+  */
+  readonly space?: boolean;
+  /**
+  * The text to render in a large font.
+  */
+  readonly text: string;
+};
+/**
+* Render large terminal text using CFonts.
+* @example
+* ```tsx
+* import { BigText } from "@visulima/tui/ink";
+*
+* <BigText text="Hello" font="block" />
+* ```
+*/
+declare function BigText({
+  align,
+  backgroundColor,
+  colors,
+  font,
+  letterSpacing,
+  lineHeight,
+  maxLength,
+  space,
+  text
+}: Props): ReactElement;
+export { type Align, type BackgroundColor, BigText, type Align as BigTextAlign, type BackgroundColor as BigTextBackgroundColor, type Font as BigTextFont, type Props as BigTextProps, type Font, type Props, BigText as default };

package/dist/components/big-text.js

@@ -0,0 +1 @@
+import{jsx as s}from"react/jsx-runtime";import m from"cfonts";import{useMemo as p}from"react";import{Text as f}from"./text.js";const u={align:"left",backgroundColor:"transparent",colors:["system"],font:"block",letterSpacing:1,lineHeight:1,maxLength:0,space:!0};function b({align:t,backgroundColor:e,colors:o,font:r,letterSpacing:n,lineHeight:a,maxLength:i,space:c,text:g}){const l=p(()=>m.render(g,{...u,align:t,backgroundColor:e,colors:o,font:r,letterSpacing:n,lineHeight:a,maxLength:i,space:c}),[g,t,e,o,r,n,a,i,c]);return s(f,{children:l&&l.string})}export{b as BigText,b as default};

package/dist/components/blink-dot.d.ts

@@ -0,0 +1,36 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Glyph rendered as the blinking dot.
+  * @default "●" (filled bullet)
+  */
+  readonly character?: string;
+  /**
+  * Dot color.
+  * @default "red"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Milliseconds per blink cycle. The dot is visible for half the cycle.
+  * @default 800
+  */
+  readonly interval?: number;
+  /**
+  * When false, the dot stays solid (no animation).
+  * @default true
+  */
+  readonly isActive?: boolean;
+};
+/**
+* Steady or blinking indicator dot. Pair with `StatusLine` or next to a
+* label to show a "live" / "recording" status.
+*/
+declare function BlinkDot({
+  character,
+  color,
+  interval,
+  isActive
+}: Props): ReactElement;
+export { BlinkDot, type Props as BlinkDotProps, Props, BlinkDot as default };

package/dist/components/blink-dot.js

@@ -0,0 +1 @@
+import{jsx as c}from"react/jsx-runtime";import l from"../ink/hooks/use-animation.js";import{Text as m}from"./text.js";function h({character:t="●",color:o="red",interval:e=800,isActive:r=!0}){const{frame:i}=l({interval:Math.max(1,Math.floor(e/2)),isActive:r}),a=!r||i%2===0;return c(m,{color:o,children:a?t:" "})}export{h as BlinkDot,h as default};

package/dist/components/box.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode, PropsWithChildren, RefAttributes, ForwardRefExoticComponent } from 'react';
+import { Except } from 'type-fest';
+import { D as DOMElement } from "../packem_shared/dom.d-B4kXbaVY.js";
+import { S as Styles } from "../packem_shared/styles.d-cMo36xQz.js";
+import 'yoga-layout';
+import "../packem_shared/cursor-helpers.d-BONB9tky.js";
+import '@visulima/colorize';
+import 'cli-boxes';
+type Props = Except<Styles, "textWrap"> & {
+  /**
+  * Hide the element from screen readers.
+  */
+  readonly "aria-hidden"?: boolean;
+  /**
+  * A label for the element for screen readers.
+  */
+  readonly "aria-label"?: string;
+  /**
+  * The role of the element.
+  */
+  readonly "aria-role"?: "button" | "checkbox" | "combobox" | "list" | "listbox" | "listitem" | "menu" | "menuitem" | "option" | "progressbar" | "radio" | "radiogroup" | "tab" | "tablist" | "table" | "textbox" | "timer" | "toolbar";
+  /**
+  * The state of the element.
+  */
+  readonly "aria-state"?: {
+    readonly busy?: boolean;
+    readonly checked?: boolean;
+    readonly disabled?: boolean;
+    readonly expanded?: boolean;
+    readonly multiline?: boolean;
+    readonly multiselectable?: boolean;
+    readonly readonly?: boolean;
+    readonly required?: boolean;
+    readonly selected?: boolean;
+  };
+  /**
+  * Whether this element is opaque (prevents rendering of covered content beneath it).
+  * Useful for performance optimization with layered content.
+  */
+  readonly opaque?: boolean;
+  /**
+  * Whether to render a scrollbar for this scrollable element.
+  * Only applies when `overflow` is `'scroll'`. Defaults to `true`.
+  */
+  readonly scrollbar?: boolean;
+  /**
+  * Makes this element sticky within its scroll container.
+  * - `true` or `'top'`: pinned to the top during scroll
+  * - `'bottom'`: pinned to the bottom during scroll
+  */
+  readonly sticky?: boolean | "top" | "bottom";
+  /**
+  * Alternate content to render when this element is in its sticky (pinned) state.
+  * Only applies when `sticky` is set. When omitted, the normal children are used.
+  */
+  readonly stickyChildren?: ReactNode;
+};
+/**
+* `&lt;Box>` is an essential Ink component to build your layout. It's like `&lt;div style="display: flex">` in the browser.
+*/
+declare const Box: ForwardRefExoticComponent<PropsWithChildren<Props> & RefAttributes<DOMElement>>;
+export { Box, type Props as BoxProps, Props, Box as default };

package/dist/components/box.js

@@ -0,0 +1 @@
+import{jsx as i,jsxs as k}from"react/jsx-runtime";import{forwardRef as w,useContext as m}from"react";import{a as y}from"../packem_shared/accessibility-context-DDyHTwmA.js";import{b as h}from"../packem_shared/background-context-rjOaWFki.js";const C={flexDirection:"row",flexGrow:0,flexShrink:1,flexWrap:"nowrap"},g=w(({"aria-hidden":d,"aria-label":l,"aria-role":t,"aria-state":a,backgroundColor:o,children:b,opaque:u,scrollbar:x,sticky:n,stickyChildren:s,...r},p)=>{const{isScreenReaderEnabled:e}=m(y),c=l?i("ink-text",{children:l}):void 0,v=t||a?{role:t,state:a}:void 0;if(e&&d)return null;const f=k("ink-box",{internal_accessibility:v,opaque:u,ref:p,scrollbar:x,sticky:n,style:{...C,...r,backgroundColor:o,overflowX:r.overflowX??r.overflow??"visible",overflowY:r.overflowY??r.overflow??"visible"},children:[e&&c?c:b,n&&s&&!e?i("ink-box",{internalStickyAlternate:!0,style:{position:"absolute",...r},children:s}):null]});return o?i(h.Provider,{value:o,children:f}):f});g.displayName="Box";export{g as Box,g as default};