@visulima/tui-kit 0.0.0 → 1.0.0

package/dist/markdown.d.ts

@@ -0,0 +1,40 @@
+import { ReactElement } from 'react';
+type Props = {
+  /**
+  * The Markdown source string.
+  */
+  readonly children: string;
+  /**
+  * Shiki theme for code block syntax highlighting.
+  * @default "github-dark-default"
+  */
+  readonly codeTheme?: string;
+  /**
+  * Maximum width for text wrapping. Defaults to terminal width.
+  */
+  readonly maxWidth?: number;
+  /**
+  * Enable streaming mode for progressive rendering.
+  * When true, the component re-renders on every prop change and handles
+  * incomplete Markdown gracefully (e.g., unclosed code fences, partial lists).
+  * Useful for rendering AI-generated text arriving token-by-token.
+  * @default false
+  */
+  readonly streaming?: boolean;
+};
+/**
+* Render Markdown content as Ink terminal UI elements.
+*
+* ```tsx
+* <Markdown>{"# Hello\n\nThis is **bold** and *italic*."}</Markdown>
+* <Markdown codeTheme="github-dark-default">{"```js\nconst x = 1;\n```"}</Markdown>
+* <Markdown streaming>{"# Streaming\n\nText arriving..."}</Markdown>
+* ```
+*/
+declare function Markdown({
+  children,
+  codeTheme,
+  maxWidth: maxWidthProp,
+  streaming
+}: Props): ReactElement;
+export { Markdown, type Props as MarkdownProps, Props, Markdown as default };

package/dist/markdown.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as x}from"react/jsx-runtime";import l from"@visulima/tui/components/box";import w from"@visulima/tui/components/newline";import m from"@visulima/tui/components/text";import D from"@visulima/tui/hooks/use-window-size";import{Lexer as F}from"marked";import k,{useMemo as b}from"react";import{Code as M}from"./code.js";import{Link as j}from"./link.js";import{OrderedList as v}from"./ordered-list.js";import{Table as E}from"./table.js";import{UnorderedList as q}from"./unordered-list.js";const A={1:"cyan",2:"green",3:"yellow",4:"blue",5:"magenta",6:"gray"};function p(c){return!c||c.length===0?null:c.map((a,t)=>{switch(a.type){case"br":return r(w,{},t);case"codespan":return x(m,{inverse:!0,children:[" ",a.text," "]},t);case"del":return r(m,{strikethrough:!0,children:p(a.tokens)},t);case"em":return r(m,{italic:!0,children:p(a.tokens)},t);case"escape":return r(k.Fragment,{children:a.text},t);case"image":{const e=a;return x(m,{dimColor:!0,children:["[image:"," ",e.text||e.href,"]"]},t)}case"link":{const e=a;return r(j,{url:e.href,children:p(e.tokens)??e.text},t)}case"strong":return r(m,{bold:!0,children:p(a.tokens)},t);case"text":return r(k.Fragment,{children:a.text},t);default:{const e="raw"in a?a.raw:"";return r(k.Fragment,{children:e},t)}}})}function T(c){return c.map(a=>{const t=a.tokens??[],e=t.find(i=>i.type==="text"),n=p(e?.tokens??t),h=t.find(i=>i.type==="list");return{children:h?T(h.items):void 0,label:n}})}function y(c,a,t){const e=[];for(const[n,h]of c.entries()){const i=h,s=n>0?1:0;switch(i.type){case"blockquote":{const o=i;e.push(r(l,{borderLeft:!0,borderLeftColor:"gray",marginTop:s,paddingLeft:1,children:r(l,{flexDirection:"column",children:y(o.tokens,a,t-3)})},n));break}case"code":{const o=i;e.push(r(l,{marginTop:s,children:r(M,{code:o.text,language:o.lang,theme:a})},n));break}case"heading":{const o=i,d=A[o.depth]??"white",g=`${"#".repeat(o.depth)} `;e.push(r(l,{marginTop:s,children:x(m,{bold:!0,color:d,children:[g,p(o.tokens)]})},n));break}case"hr":{e.push(r(l,{marginTop:s,children:r(m,{dimColor:!0,children:"─".repeat(Math.min(t,40))})},n));break}case"html":{const o=i.text.replaceAll(/<[^>]*>/g,"");o.trim()&&e.push(r(l,{marginTop:s,children:r(m,{dimColor:!0,children:o})},n));break}case"list":{const o=i,d=T(o.items);o.ordered?e.push(r(l,{marginTop:s,children:r(v,{items:d})},n)):e.push(r(l,{marginTop:s,children:r(q,{items:d})},n));break}case"paragraph":{const o=i;e.push(r(l,{marginTop:s,children:r(m,{wrap:"wrap",children:p(o.tokens)})},n));break}case"space":{e.push(r(w,{},n));break}case"table":{const o=i,d=(o.header??[]).map(u=>u.text),g=(o.rows??[]).map(u=>u.map(f=>f.text)).map(u=>{const f={};return d.forEach((L,C)=>{f[L]=u[C]??""}),f});e.push(r(l,{marginTop:s,children:r(E,{data:g})},n));break}default:{const o="raw"in i?i.raw:"",d="text"in i?i.text:o;d&&e.push(r(l,{marginTop:s,children:r(m,{children:d})},n));break}}}return e}function B(c,a){const t=F.lex(c);if(!a||c.length===0)return t;let e=0;for(const n of t)e+=n.raw?.length??0;if(e<c.length){const n=c.slice(e);n.trim().length>0&&t.push({raw:n,text:n,tokens:[{raw:n,text:n,type:"text"}],type:"paragraph"})}return t}function Q({children:c,codeTheme:a="github-dark-default",maxWidth:t,streaming:e=!1}){const{columns:n}=D(),h=t??n??80,i=b(()=>B(c,e),[c,e]),s=b(()=>y(i,a,h),[i,a,h]);return r(l,{flexDirection:"column",children:s})}export{Q as Markdown,Q as default};

package/dist/masked-input.d.ts

@@ -0,0 +1,50 @@
+import { ReactElement } from 'react';
+type Props = {
+  /**
+  * Initial raw value (digits/characters only, without mask symbols).
+  */
+  readonly defaultValue?: string;
+  /**
+  * Disable input and dim the display.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Mask definition. Each `#` is replaced with a user character; any other
+  * character is rendered literally. Example: `(###) ###-####`.
+  */
+  readonly mask: string;
+  /**
+  * Called whenever the underlying raw value changes.
+  */
+  readonly onChange?: (value: string) => void;
+  /**
+  * Called when the user presses Enter with the current raw value.
+  */
+  readonly onSubmit?: (value: string) => void;
+  /**
+  * Placeholder character used in the mask for empty positions.
+  * @default "_"
+  */
+  readonly placeholderChar?: string;
+  /**
+  * Sentinel character in the mask string used to mark editable positions.
+  * @default "#" (hash)
+  */
+  readonly token?: string;
+};
+/**
+* Input with a fixed-width mask. The mask token (`#` by default) marks
+* positions where the user can type; every other character is preserved.
+* Supports ←/→ to move within the mask, Home/End to jump, and
+* Backspace/Delete to clear characters.
+*/
+declare function MaskedInput({
+  defaultValue,
+  isDisabled,
+  mask,
+  onChange,
+  onSubmit,
+  placeholderChar,
+  token
+}: Props): ReactElement;
+export { MaskedInput, type Props as MaskedInputProps, Props, MaskedInput as default };

package/dist/masked-input.js

@@ -0,0 +1 @@
+import{jsxs as S,jsx as C}from"react/jsx-runtime";import V from"@visulima/tui/components/box";import x from"@visulima/tui/components/text";import I from"@visulima/tui/hooks/use-input";import{useMemo as L,useState as b,useCallback as A}from"react";const T=(m,n)=>{const o=[];let s=0;for(const[l,i]of[...m].entries())i===n&&(o.push({maskColumn:l,rawPosition:s}),s+=1);return o},_=(m,n,o,s)=>{let l=0,i="";for(const f of n)if(f===o){const u=m[l];u===void 0?i+=s:(i+=u,l+=1)}else i+=f;return i};function F({defaultValue:m="",isDisabled:n=!1,mask:o,onChange:s,onSubmit:l,placeholderChar:i="_",token:f="#"}){const u=L(()=>T(o,f),[o,f]),h=u.length,M=m.slice(0,h),[e,v]=b(M),[t,d]=b(M.length),g=A((c,r)=>{v(c),d(Math.max(0,Math.min(h,r))),s?.(c)},[h,s]);I(A((c,r)=>{if(r.return){l?.(e);return}if(r.leftArrow){d(a=>Math.max(0,a-1));return}if(r.rightArrow){d(a=>Math.min(e.length,a+1));return}if(r.home||r.ctrl&&c==="a"){d(0);return}if(r.end||r.ctrl&&c==="e"){d(e.length);return}if(r.backspace){if(t===0)return;const a=e.slice(0,t-1)+e.slice(t);g(a,t-1);return}if(r.delete){if(t>=e.length)return;const a=e.slice(0,t)+e.slice(t+1);g(a,t);return}if(c.length!==1||e.length>=h)return;const P=e.slice(0,t)+c+e.slice(t);g(P,t+1)},[e,t,h,g,l]),{isActive:!n});const p=_(e,o,f,i),k=u[t]?.maskColumn??o.length,w=p.slice(0,k),j=p.charAt(k)||" ",D=p.slice(k+1);return S(V,{children:[C(x,{dimColor:n,children:w}),C(x,{dimColor:n,inverse:!n,children:j}),C(x,{dimColor:n,children:D})]})}export{F as MaskedInput,F as default};

package/dist/menu.d.ts

@@ -0,0 +1,78 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type MenuItem = {
+  /**
+  * Optional hotkey rendered on the right side of the row (e.g. `"Ctrl+S"`).
+  */
+  readonly hotkey?: string;
+  /**
+  * Optional icon rendered before the label.
+  */
+  readonly icon?: ReactNode;
+  /**
+  * Identifier returned by `onSelect`.
+  */
+  readonly id: string;
+  /**
+  * When true, renders the item dimmed and skips it during navigation.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Human-readable label.
+  */
+  readonly label: ReactNode;
+};
+type MenuSection = {
+  readonly id: string;
+  readonly items: ReadonlyArray<MenuItem>;
+  readonly title?: string;
+};
+type Props = {
+  /**
+  * Accent color for the focused item.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus the menu on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Render a border around the menu.
+  * @default true
+  */
+  readonly bordered?: boolean;
+  /**
+  * Flat list of items. Ignored if `sections` is provided.
+  */
+  readonly items?: ReadonlyArray<MenuItem>;
+  /**
+  * Called with the item id when the user presses Enter.
+  */
+  readonly onSelect: (id: string) => void;
+  /**
+  * Grouped items. Takes precedence over `items`.
+  */
+  readonly sections?: ReadonlyArray<MenuSection>;
+  /**
+  * Optional title rendered at the top of the menu.
+  */
+  readonly title?: string;
+};
+/**
+* Dropdown / context menu with optional sections and disabled items.
+* Keyboard: ↑/↓ (or j/k) to navigate, Enter to select, Esc to cancel.
+* @returns A `ReactElement` rendering the menu, optionally wrapped in a
+* rounded border when `bordered` is true.
+*/
+declare function Menu({
+  accentColor,
+  autoFocus,
+  bordered,
+  items,
+  onSelect,
+  sections,
+  title
+}: Props): ReactElement;
+export { Menu, MenuItem, type Props as MenuProps, MenuSection, Props, Menu as default };

package/dist/menu.js

@@ -0,0 +1 @@
+import{jsxs as b,jsx as l}from"react/jsx-runtime";import m from"@visulima/tui/components/box";import f from"@visulima/tui/components/text";import A from"@visulima/tui/hooks/use-focus";import F from"@visulima/tui/hooks/use-input";import{useMemo as g,useState as j,useRef as y,useEffect as M,useCallback as $}from"react";const B=(t,r)=>{if(r&&r.length>0){const o=[];for(const i of r){i.title!==void 0&&o.push({kind:"section-header",sectionId:i.id,title:i.title});for(const d of i.items)o.push({item:d,kind:"item",sectionId:i.id})}return o}return(t??[]).map(o=>({item:o,kind:"item",sectionId:void 0}))},w=(t,r,o)=>{const i=t.length;if(i===0)return r;for(let d=1;d<=i;d+=1){const a=(r+o*d+i*d)%i,h=t[a];if(h?.kind==="item"&&!h.item.isDisabled)return a}return r},I=t=>{for(const[r,o]of t.entries())if(o.kind==="item"&&!o.item.isDisabled)return r;return 0};function W({accentColor:t="blue",autoFocus:r=!1,bordered:o=!0,items:i,onSelect:d,sections:a,title:h}){const{isFocused:p}=A({autoFocus:r}),n=g(()=>B(i,a),[i,a]),S=g(()=>I(n),[n]),[k,v]=j(S),u=y(k);u.current=k,M(()=>{const{current:c}=u,s=n[c];if(!(s?.kind==="item"&&!s.item.isDisabled)){const e=I(n);v(e),u.current=e}},[n]),F($((c,s)=>{if(p){if(s.downArrow||c==="j")v(w(n,u.current,1));else if(s.upArrow||c==="k")v(w(n,u.current,-1));else if(s.return){const e=n[u.current];e?.kind==="item"&&!e.item.isDisabled&&d(e.item.id)}}},[p,n,d]),{isActive:p});const x=b(m,{flexDirection:"column",children:[h===void 0?void 0:l(m,{marginBottom:1,children:l(f,{bold:!0,color:t,children:h})}),n.map((c,s)=>{if(c.kind==="section-header")return l(m,{marginTop:s===0?0:1,children:l(f,{dimColor:!0,children:c.title.toUpperCase()})},`header:${c.sectionId}`);const{item:e}=c,C=p&&s===k,D=C?t:void 0;return b(m,{children:[l(f,{color:D,dimColor:e.isDisabled,children:C?"▸ ":"  "}),e.icon===void 0?void 0:b(f,{color:D,dimColor:e.isDisabled,children:[e.icon," "]}),l(m,{flexGrow:1,flexShrink:1,minWidth:0,children:l(f,{bold:C,color:D,dimColor:e.isDisabled,wrap:"truncate-end",children:e.label})}),e.hotkey===void 0?void 0:l(m,{flexShrink:0,children:b(f,{dimColor:!0,children:[" ",e.hotkey]})})]},`item:${e.id}`)})]});return o?l(m,{borderColor:p?t:void 0,borderStyle:"round",paddingX:1,children:x}):x}export{W as Menu,W as default};

package/dist/message-bubble.d.ts

@@ -0,0 +1,43 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type MessageRole = "assistant" | "system" | "tool" | "user";
+type Props = {
+  /**
+  * Bubble body.
+  */
+  readonly children: ReactNode;
+  /**
+  * Color override.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * When true, draws the bubble without a border.
+  */
+  readonly flat?: boolean;
+  /**
+  * Text rendered above the bubble (name, model, etc.).
+  */
+  readonly label?: string;
+  /**
+  * Optional metadata rendered next to the label (e.g. timestamp).
+  */
+  readonly meta?: string;
+  /**
+  * Determines the alignment, color, and icon of the bubble.
+  * @default "assistant"
+  */
+  readonly role?: MessageRole;
+};
+/**
+* Chat-style message bubble for AI agent UIs.
+*/
+declare function MessageBubble({
+  children,
+  color,
+  flat,
+  label,
+  meta,
+  role
+}: Props): ReactElement;
+export { MessageBubble, type Props as MessageBubbleProps, MessageRole, Props, MessageBubble as default };

package/dist/message-bubble.js

@@ -0,0 +1 @@
+import{jsxs as c,jsx as o}from"react/jsx-runtime";import i from"@visulima/tui/components/box";import l from"@visulima/tui/components/text";const f={assistant:{align:"flex-start",color:"blueBright",icon:""},system:{align:"flex-start",color:"gray",icon:""},tool:{align:"flex-start",color:"magentaBright",icon:""},user:{align:"flex-end",color:"greenBright",icon:""}};function p({children:r,color:a,flat:s=!1,label:e,meta:n,role:g="assistant"}){const d=f[g],t=a??d.color;return c(i,{alignSelf:d.align,flexDirection:"column",marginBottom:1,children:[e===void 0&&n===void 0?void 0:c(i,{gap:1,paddingX:1,children:[e===void 0?void 0:o(l,{bold:!0,color:t,children:e}),n===void 0?void 0:o(l,{dimColor:!0,children:n})]}),s?c(i,{paddingX:1,children:[o(l,{color:t,children:"│ "}),o(i,{flexDirection:"column",flexGrow:1,children:typeof r=="string"?o(l,{children:r}):r})]}):o(i,{borderColor:t,borderStyle:"round",flexDirection:"column",paddingX:1,children:typeof r=="string"?o(l,{children:r}):r})]})}export{p as MessageBubble,p as default};

package/dist/model-badge.d.ts

@@ -0,0 +1,39 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Background color of the badge.
+  * @default "magenta"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Optional icon/symbol (e.g. `✨`, `◈`) shown before the label.
+  */
+  readonly icon?: ReactNode;
+  /**
+  * Short model identifier, e.g. `claude-opus-4.6`.
+  */
+  readonly model: string;
+  /**
+  * Optional provider name rendered as a separate chip before the model.
+  */
+  readonly provider?: string;
+  /**
+  * Visual style.
+  * @default "solid"
+  */
+  readonly variant?: "outline" | "solid" | "subtle";
+};
+/**
+* Pill-shaped chip identifying the active model / provider. Pair with
+* `MessageBubble` to label assistant output.
+*/
+declare function ModelBadge({
+  color,
+  icon,
+  model,
+  provider,
+  variant
+}: Props): ReactElement;
+export { ModelBadge, type Props as ModelBadgeProps, Props, ModelBadge as default };

package/dist/model-badge.js

@@ -0,0 +1 @@
+import{jsxs as o,jsx as l,Fragment as s}from"react/jsx-runtime";import u from"@visulima/tui/components/box";import r from"@visulima/tui/components/text";function g({color:d="magenta",icon:n,model:c,provider:t,variant:a="solid"}){const m=e=>{const i=n===void 0?void 0:o(s,{children:[n," "]});return a==="outline"?l(u,{borderColor:d,borderStyle:"round",paddingX:1,children:o(r,{color:d,children:[i,e]})}):a==="subtle"?o(r,{color:d,children:[i,e]}):o(r,{backgroundColor:d,color:"black",children:[" ",i,e," "]})};return t===void 0?m(c):o(u,{children:[l(r,{dimColor:!0,children:t}),l(r,{dimColor:!0,children:"/"}),m(c)]})}export{g as ModelBadge,g as default};

package/dist/model-selector.d.ts

@@ -0,0 +1,52 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type ModelOption = {
+  /**
+  * Optional context-window hint shown on the right (e.g. `200k`).
+  */
+  readonly context?: string;
+  readonly id: string;
+  readonly name: string;
+  readonly provider?: string;
+};
+type Props = {
+  /**
+  * Accent color for the focused row and selected marker.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Selected model id when uncontrolled.
+  */
+  readonly defaultValue?: string;
+  /**
+  * The models to choose from.
+  */
+  readonly models: ReadonlyArray<ModelOption>;
+  /**
+  * Fires when the highlighted model is committed with Enter.
+  */
+  readonly onSelect?: (model: ModelOption) => void;
+  /**
+  * Controlled selected model id. When set, `defaultValue` is ignored.
+  */
+  readonly value?: string;
+};
+/**
+* A selectable list of models with provider and context-window hints. ↑/↓ move
+* the cursor and Enter commits; a ● marks the currently-selected model.
+*/
+declare function ModelSelector({
+  accentColor,
+  autoFocus,
+  defaultValue,
+  models,
+  onSelect,
+  value: controlledValue
+}: Props): ReactElement;
+export { ModelOption, ModelSelector, type Props as ModelSelectorProps, Props, ModelSelector as default };

package/dist/model-selector.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as M}from"react/jsx-runtime";import u from"@visulima/tui/components/box";import n from"@visulima/tui/components/text";import S from"@visulima/tui/hooks/use-focus";import j from"@visulima/tui/hooks/use-input";import{useState as x,useCallback as D}from"react";function C(c,i){return i===0?0:(c%i+i)%i}function V({accentColor:c="blue",autoFocus:i=!1,defaultValue:b,models:t,onSelect:m,value:a}){const{isFocused:f}=S({autoFocus:i}),s=a!==void 0,[g,w]=x(b),v=a??g,A=Math.max(0,t.findIndex(r=>r.id===v)),[l,h]=x(A),F=D((r,d)=>{if(d.upArrow){h(o=>C(o-1,t.length));return}if(d.downArrow){h(o=>C(o+1,t.length));return}if(d.return){const o=t[l];o!==void 0&&(s||w(o.id),m?.(o))}},[l,s,t,m]);return j(F,{isActive:f}),e(u,{flexDirection:"column",children:t.map((r,d)=>{const o=f&&d===l,p=r.id===v;return M(u,{gap:1,children:[e(n,{color:o?c:void 0,children:o?"❯":" "}),e(n,{color:p?c:void 0,children:p?"●":"○"}),e(n,{bold:o,children:r.name}),r.provider===void 0?void 0:e(n,{dimColor:!0,children:r.provider}),r.context===void 0?void 0:e(u,{marginLeft:1,children:e(n,{dimColor:!0,children:r.context})})]},r.id)})})}export{V as ModelSelector,V as default};

package/dist/multi-progress.d.ts

@@ -0,0 +1,55 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Color = LiteralUnion<AnsiColors, string>;
+type ProgressItem = {
+  readonly color?: Color;
+  readonly label: string;
+  /**
+  * Progress in the range [0, 1]. Values outside are clamped.
+  */
+  readonly value: number;
+};
+type Props = {
+  /**
+  * Width of each bar in cells.
+  * @default 20
+  */
+  readonly barWidth?: number;
+  /**
+  * Fallback bar color when an item has none.
+  * @default "cyan"
+  */
+  readonly color?: Color;
+  /**
+  * Character for the empty portion of each bar; defaults to a light shade.
+  */
+  readonly emptyChar?: string;
+  /**
+  * Character for the filled portion of each bar; defaults to a full block.
+  */
+  readonly filledChar?: string;
+  /**
+  * The bars to render, top to bottom.
+  */
+  readonly items: ReadonlyArray<ProgressItem>;
+  /**
+  * Render the percentage after each bar.
+  * @default true
+  */
+  readonly showPercent?: boolean;
+};
+/**
+* A stack of labeled progress bars sharing one aligned column layout — useful
+* for parallel downloads, multi-step jobs, or per-file progress. Labels are
+* right-padded to the widest so the bars line up.
+*/
+declare function MultiProgress({
+  barWidth,
+  color,
+  emptyChar,
+  filledChar,
+  items,
+  showPercent
+}: Props): ReactElement;
+export { MultiProgress, type Props as MultiProgressProps, ProgressItem, Props, MultiProgress as default };

package/dist/multi-progress.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as c}from"react/jsx-runtime";import l from"@visulima/tui/components/box";import i from"@visulima/tui/components/text";const p=t=>Math.max(0,Math.min(1,t));function b({barWidth:t=20,color:d="cyan",emptyChar:m="░",filledChar:s="█",items:n,showPercent:u=!0}){let o=0;for(const e of n)o=Math.max(o,e.label.length);return r(l,{flexDirection:"column",children:n.map((e,f)=>{const a=p(e.value),h=Math.round(a*t);return c(l,{gap:1,children:[r(l,{flexShrink:0,width:o,children:r(i,{children:e.label.padEnd(o)})}),c(l,{children:[r(i,{color:e.color??d,children:s.repeat(h)}),r(i,{dimColor:!0,children:m.repeat(Math.max(0,t-h))})]}),u?r(i,{dimColor:!0,children:`${Math.round(a*100)}%`}):void 0]},f)})})}export{b as MultiProgress,b as default};

package/dist/multi-select.d.ts

@@ -0,0 +1,65 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type MultiSelectOption = {
+  readonly key?: string;
+  readonly label: string;
+  readonly value: string;
+};
+type Props = {
+  /**
+  * Color for the focused item indicator and selected checkmarks.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Color for unselected, unfocused option labels.
+  */
+  readonly defaultColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Initially selected values.
+  */
+  readonly defaultValue?: ReadonlyArray<string>;
+  /**
+  * When true, all input is ignored and labels are dimmed.
+  * @default false
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Whether the parent has focus. When false, indicators are dimmed.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Number of visible options before scrolling.
+  * When omitted, auto-limits to terminal height.
+  */
+  readonly limit?: number;
+  /**
+  * Fires when the set of selected values changes (space to toggle).
+  */
+  readonly onChange?: (values: ReadonlyArray<string>) => void;
+  /**
+  * Fires when the user presses Enter to submit.
+  */
+  readonly onSubmit?: (values: ReadonlyArray<string>) => void;
+  /**
+  * Available choices to pick from.
+  */
+  readonly options: ReadonlyArray<MultiSelectOption>;
+};
+/**
+* Renders a multi-choice selection list with checkboxes and keyboard navigation.
+*/
+declare function MultiSelect({
+  accentColor,
+  defaultColor,
+  defaultValue,
+  isDisabled,
+  isFocused,
+  limit: customLimit,
+  onChange,
+  onSubmit,
+  options
+}: Props): ReactElement;
+export { MultiSelect, MultiSelectOption, type Props as MultiSelectProps, Props, MultiSelect as default };

package/dist/multi-select.js

@@ -0,0 +1 @@
+import{jsx as m,jsxs as R}from"react/jsx-runtime";import S from"@visulima/tui/components/box";import f from"@visulima/tui/components/text";import V from"@visulima/tui/hooks/use-input";import $ from"@visulima/tui/hooks/use-window-size";import{useReducer as T,useState as U,useRef as a,useMemo as W,useCallback as F}from"react";const Y=[],q=(o,u)=>{switch(u.type){case"focus":return{...o,focusedIndex:u.index};case"focus-next":{const i=o.focusedIndex+1,c=i>=o.visibleFrom+u.limit;return{...o,focusedIndex:i,visibleFrom:c?o.visibleFrom+1:o.visibleFrom}}case"focus-prev":{const i=o.focusedIndex-1,c=i<o.visibleFrom;return{...o,focusedIndex:i,visibleFrom:c?o.visibleFrom-1:o.visibleFrom}}default:return o}};function L({accentColor:o="blue",defaultColor:u,defaultValue:i=Y,isDisabled:c=!1,isFocused:v=!0,limit:g,onChange:C,onSubmit:I,options:t}){const{rows:A}=$(),l=Math.min(typeof g=="number"?g:A,t.length),[s,w]=T(q,{focusedIndex:0,visibleFrom:0}),[b,M]=U(i),j=a(b);j.current=b;const k=a(I);k.current=I;const p=a(C);p.current=C;const x=a(s);x.current=s;const E=W(()=>t.slice(s.visibleFrom,s.visibleFrom+l),[t,s.visibleFrom,l]),y=F(()=>{const e=t[x.current.focusedIndex]?.value;e&&M(r=>{const n=r.includes(e)?r.filter(d=>d!==e):[...r,e];return p.current?.(n),n})},[t]),D=F(()=>{M(e=>{const r=e.length===t.length?[]:t.map(n=>n.value);return p.current?.(r),r})},[t]);return V(F((e,r)=>{const{focusedIndex:n}=x.current;(r.downArrow||e==="j")&&n<t.length-1&&w({limit:l,type:"focus-next"}),(r.upArrow||e==="k")&&n>0&&w({limit:l,type:"focus-prev"}),e===" "&&y(),e==="a"&&D(),r.return&&k.current?.(j.current)},[t.length,l,y,D]),{isActive:!c&&v}),m(S,{flexDirection:"column",children:E.map((e,r)=>{const n=s.visibleFrom+r===s.focusedIndex,d=b.includes(e.value);let h=u;return d?h="green":n&&(h=o),R(S,{gap:1,children:[n?m(f,{color:o,dimColor:!v,children:"▸"}):m(f,{children:" "}),R(f,{color:h,dimColor:c,children:[d?"◼":"◻"," ",e.label]}),d?m(f,{color:"green",dimColor:!v,children:"✓"}):void 0]},e.key??e.value)})})}export{L as MultiSelect,L as default};

package/dist/notification-badge.d.ts

@@ -0,0 +1,47 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * The element the badge is attached to (rendered before the badge).
+  */
+  readonly children?: ReactNode;
+  /**
+  * Badge background color.
+  * @default "red"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Numeric count. Values above `max` render as `{max}+`. A count of `0`
+  * hides the badge unless `showZero` is set.
+  */
+  readonly count: number;
+  /**
+  * Upper bound before the count is abbreviated with a trailing `+`.
+  * @default 99
+  */
+  readonly max?: number;
+  /**
+  * Render the badge even when `count` is `0`.
+  * @default false
+  */
+  readonly showZero?: boolean;
+  /**
+  * Text color inside the badge.
+  * @default "white"
+  */
+  readonly textColor?: LiteralUnion<AnsiColors, string>;
+};
+/**
+* A small count badge, optionally attached to a child element. Counts above
+* `max` are abbreviated (e.g. `99+`); a zero count is hidden unless `showZero`.
+*/
+declare function NotificationBadge({
+  children,
+  color,
+  count,
+  max,
+  showZero,
+  textColor
+}: Props): ReactElement;
+export { NotificationBadge, type Props as NotificationBadgeProps, Props, NotificationBadge as default };

package/dist/notification-badge.js

@@ -0,0 +1 @@
+import{jsxs as s,jsx as t}from"react/jsx-runtime";import e from"@visulima/tui/components/box";import f from"@visulima/tui/components/text";function x({children:r,color:n="red",count:o,max:i=99,showZero:c=!1,textColor:d="white"}){const l=o>0||c,a=o>i?`${i}+`:String(o);return s(e,{children:[r,l?t(e,{marginLeft:r===void 0?0:1,children:t(f,{backgroundColor:n,color:d,children:` ${a} `})}):void 0]})}export{x as NotificationBadge,x as default};

package/dist/number-input.d.ts

@@ -0,0 +1,85 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color for the border/caret when focused.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus the input on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Initial value when uncontrolled.
+  */
+  readonly defaultValue?: number;
+  /**
+  * Disable input and dim the display.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Upper bound. Values are clamped on commit and by the stepper.
+  */
+  readonly max?: number;
+  /**
+  * Lower bound. Values are clamped on commit and by the stepper.
+  */
+  readonly min?: number;
+  /**
+  * Fires whenever the numeric value changes.
+  */
+  readonly onChange?: (value: number) => void;
+  /**
+  * Fires when the user presses Enter.
+  */
+  readonly onSubmit?: (value: number) => void;
+  /**
+  * Placeholder rendered when the field is empty.
+  * @default "0"
+  */
+  readonly placeholder?: string;
+  /**
+  * Number of decimal places to allow and display. `0` restricts input to
+  * integers.
+  * @default 0
+  */
+  readonly precision?: number;
+  /**
+  * Show ▲/▼ stepper hints and let ↑/↓ adjust by `step`.
+  * @default true
+  */
+  readonly showControls?: boolean;
+  /**
+  * Increment applied by ↑/↓ (and Shift for 10× via PageUp/PageDown).
+  * @default 1
+  */
+  readonly step?: number;
+  /**
+  * Controlled value. When provided, `defaultValue` is ignored.
+  */
+  readonly value?: number;
+};
+/**
+* A keyboard-driven numeric input. Type digits (and `-`/`.` where allowed),
+* use ↑/↓ to step by `step`, PageUp/PageDown for 10× steps, and Enter to
+* submit. The raw text buffer is validated so partial entries like `-` or
+* `1.` are allowed while typing but clamped/parsed on change.
+*/
+declare function NumberInput({
+  accentColor,
+  autoFocus,
+  defaultValue,
+  isDisabled,
+  max,
+  min,
+  onChange,
+  onSubmit,
+  placeholder,
+  precision,
+  showControls,
+  step,
+  value: controlledValue
+}: Props): ReactElement;
+export { NumberInput, type Props as NumberInputProps, Props, NumberInput as default };

package/dist/number-input.js

@@ -0,0 +1 @@
+import{jsxs as L,jsx as b}from"react/jsx-runtime";import R from"@visulima/tui/components/box";import C from"@visulima/tui/components/text";import O from"@visulima/tui/hooks/use-focus";import P from"@visulima/tui/hooks/use-input";import{useState as V,useRef as X,useCallback as A}from"react";const F=(e,o,u)=>{let t=e;return o!==void 0&&t<o&&(t=o),u!==void 0&&t>u&&(t=u),t},S=(e,o)=>{const u=10**o;return Math.round(e*u)/u},q=/^\d$/;function D(e,o){return o>0?e.toFixed(o):String(e)}function K({accentColor:e="blue",autoFocus:o=!1,defaultValue:u,isDisabled:t=!1,max:h,min:s,onChange:j,onSubmit:k,placeholder:U="0",precision:i=0,showControls:$=!0,step:p=1,value:B}){const{isFocused:x}=O({autoFocus:o,isActive:!t}),l=B!==void 0,[w,v]=V(u===void 0?"":D(u,i)),g=X(j);g.current=j;const n=l?D(B,i):w,a=A(d=>{const r=F(S(d,i),s,h);return l||v(D(r,i)),g.current?.(r),r},[l,h,s,i]),c=A(d=>{const r=Number.parseFloat(d);return Number.isFinite(r)?r:0},[]),y=A((d,r)=>{if(r.upArrow){a(c(n)+p);return}if(r.downArrow){a(c(n)-p);return}if(r.pageUp){a(c(n)+p*10);return}if(r.pageDown){a(c(n)-p*10);return}if(r.return){k?.(a(c(n)));return}const m=l?n:w;if(r.backspace||r.delete){const f=m.slice(0,-1);l||v(f),g.current?.(F(S(c(f),i),s,h));return}if(d==="-"&&m.length===0&&(s===void 0||s<0)){l||v("-");return}if(d==="."&&i>0&&!m.includes(".")){l||v(m.length===0?"0.":`${m}.`);return}if(q.test(d)){const f=`${m}${d}`,N=f.indexOf(".");if(N!==-1&&f.length-N-1>i)return;l||v(f),g.current?.(F(S(c(f),i),s,h))}},[w,a,n,l,h,s,k,c,i,p]);P(y,{isActive:x&&!t});const M=n.length===0||n==="-";return L(R,{borderColor:x?e:void 0,borderStyle:"round",paddingX:1,children:[M?b(C,{dimColor:!0,children:U}):b(C,{color:t?void 0:e,dimColor:t,children:n}),x&&!M?b(C,{color:e,children:"▏"}):void 0,$?b(R,{marginLeft:1,children:b(C,{dimColor:!0,children:"▲▼"})}):void 0]})}export{K as NumberInput,K as default};

package/dist/operation-tree.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode, ReactElement } from 'react';
+type OperationStatus = "completed" | "error" | "pending" | "running" | "skipped";
+type OperationNode = {
+  /**
+  * Nested child operations rendered beneath this node.
+  */
+  readonly children?: ReadonlyArray<OperationNode>;
+  /**
+  * Optional supplementary info rendered on the next line (dimmed).
+  */
+  readonly details?: ReactNode;
+  /**
+  * Wall-clock duration in ms, displayed right-aligned.
+  */
+  readonly durationMs?: number;
+  /**
+  * Unique identifier within the tree.
+  */
+  readonly id: string;
+  /**
+  * Human-readable label.
+  */
+  readonly label: ReactNode;
+  /**
+  * Lifecycle state controlling icon + color.
+  */
+  readonly status: OperationStatus;
+};
+type Props = {
+  /**
+  * Tree of operations. Each node can have its own children.
+  */
+  readonly nodes: ReadonlyArray<OperationNode>;
+  /**
+  * When true, runs the running-spinner animation.
+  * @default true
+  */
+  readonly showSpinner?: boolean;
+};
+/**
+* Renders a tree of operations with per-node status. Perfect for agent
+* progress panels (reading → editing → running tests → done).
+* @returns A `ReactElement` rendering the nested tree of operation rows.
+*/
+declare function OperationTree({
+  nodes,
+  showSpinner
+}: Props): ReactElement;
+export { OperationNode, OperationStatus, OperationTree, type Props as OperationTreeProps, Props, OperationTree as default };