@visulima/tui 1.0.0-alpha.8 → 1.0.0

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

@@ -0,0 +1,109 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+import { C as CanvasContext } from "../packem_shared/buffer.d-EJkZr8uH.js";
+/**
+* A single 2D data point.
+*/
+type Point = {
+  readonly x: number;
+  readonly y: number;
+};
+type LineSeries = {
+  /**
+  * Per-series color override. Falls back to the chart-level palette.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Numeric samples to plot. Pass either a list of y-values (x is the
+  * index) or {x, y} tuples.
+  */
+  readonly data: ReadonlyArray<number> | ReadonlyArray<{
+    readonly x: number;
+    readonly y: number;
+  }>;
+  /**
+  * Optional label shown in the legend.
+  */
+  readonly label?: string;
+};
+type LineChartProps = {
+  /**
+  * Color for axis ticks / labels.
+  * @default "gray"
+  */
+  readonly axisColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Chart body height in character rows.
+  * @default 10
+  */
+  readonly height?: number;
+  /**
+  * Upper bound for the y-axis. When omitted the chart auto-scales.
+  */
+  readonly maxY?: number;
+  /**
+  * Lower bound for the y-axis. When omitted the chart auto-scales.
+  */
+  readonly minY?: number;
+  /**
+  * Fallback palette cycled through when a series does not set `color`.
+  * @default ["cyan", "magenta", "yellow", "green", "blue", "red"]
+  */
+  readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;
+  /**
+  * One or more line series.
+  */
+  readonly series: ReadonlyArray<LineSeries>;
+  /**
+  * Render the legend row under the plot.
+  * @default true
+  */
+  readonly showLegend?: boolean;
+  /**
+  * Chart body width in character columns.
+  * @default 40
+  */
+  readonly width?: number;
+};
+type RenderConfig = {
+  readonly axisColor: LiteralUnion<AnsiColors, string>;
+  readonly palette: ReadonlyArray<LiteralUnion<AnsiColors, string>>;
+  readonly seriesList: ReadonlyArray<{
+    color: LiteralUnion<AnsiColors, string>;
+    points: ReadonlyArray<Point>;
+    series: LineSeries;
+  }>;
+  readonly xMax: number;
+  readonly xMin: number;
+  readonly yMax: number;
+  readonly yMin: number;
+};
+/**
+* Project an (x, y) data point into pixel-grid coordinates for the given
+* canvas size. Used by every chart that paints on top of a braille grid.
+*/
+declare const projectPoint: (point: Point, config: Pick<RenderConfig, "xMax" | "xMin" | "yMax" | "yMin">, pixelWidth: number, pixelHeight: number) => {
+  px: number;
+  py: number;
+};
+/**
+* Shared drawing path used by LineChart and ScatterPlot. AreaChart wraps
+* this with a fill pass.
+*/
+declare const drawSeriesOnCanvas: (context: CanvasContext, mode: "line" | "scatter", config: RenderConfig) => void;
+/**
+* Smooth multi-series line chart rendered at 2x4 sub-cell resolution using
+* Unicode braille patterns. Auto-scales both axes by default.
+*/
+declare function LineChart({
+  axisColor,
+  height,
+  maxY,
+  minY,
+  palette,
+  series,
+  showLegend,
+  width
+}: LineChartProps): ReactElement;
+export { LineChart, LineChartProps, type RenderConfig as LineChartRenderConfig, LineSeries, LineChart as default, drawSeriesOnCanvas, projectPoint };

package/dist/components/line-chart.js

@@ -0,0 +1 @@
+import"react/jsx-runtime";import"react";import"../packem_shared/braille-ch3O5D7I.js";import"./box.js";import"./canvas.js";import{h as s,h as n,d,a as h}from"../packem_shared/line-chart-C7CUrvVs.js";import"./text.js";export{s as LineChart,n as default,d as drawSeriesOnCanvas,h as projectPoint};

package/dist/components/link.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode, ReactElement } from 'react';
+type Props = {
+  readonly children: ReactNode;
+  /**
+  * Determines whether the URL should be printed for unsupported terminals.
+  *
+  * - `true` (default): appends the URL after the text, e.g. `"My website https://example.com"`
+  * - `false`: renders just the text with no URL
+  * - `function`: custom fallback formatting, e.g. `(text, url) => \`[\${text}](\${url})\``
+  * @default true
+  */
+  readonly fallback?: ((text: string, url: string) => string) | boolean;
+  /**
+  * The URL to link to.
+  */
+  readonly url: string;
+};
+/**
+* An Ink component that creates clickable links in the terminal using OSC 8 hyperlink sequences.
+*
+* [Supported terminals.](https://gist.github.com/egmontkob/eb114294efbcd5adb1944c9f3cb5feda)
+*
+* For unsupported terminals, the link will be printed after the text: `My website https://example.com`.
+*
+* ```tsx
+* import { Link, Text } from "@visulima/tui/ink";
+*
+* <Link url="https://example.com">
+*     <Text color="cyan">My Website</Text>
+* </Link>
+* ```
+*/
+declare function Link({
+  children,
+  fallback,
+  url
+}: Props): ReactElement;
+export { Link, type Props as LinkProps, type Props, Link as default };

package/dist/components/link.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{hyperlink as u}from"@visulima/ansi";import{useCallback as c}from"react";import{Text as f}from"./text.js";import{Transform as a}from"./transform.js";let n;const m=()=>{if(!process.stdout.isTTY)return!1;const o=process.env.TERM_PROGRAM??"",r=process.env.TERM_PROGRAM_VERSION??"";if(o==="iTerm.app")return Number.parseInt(r.split(".")[0]??"0",10)>=3;if(o==="WezTerm"||o==="ghostty")return!0;if(o==="vscode"){const s=r.split("."),t=Number.parseInt(s[0]??"0",10),p=Number.parseInt(s[1]??"0",10);return t>1||t===1&&p>=72}if(process.env.WT_SESSION)return!0;const e=process.env.VTE_VERSION;if(e){const s=Number.parseInt(e,10);return s>=5e3&&s!==5e3}return!1},l=()=>process.env.FORCE_HYPERLINK?process.env.FORCE_HYPERLINK!=="0":(n!==void 0||(n=m()),n);function v({children:o,fallback:r=!0,url:e}){const s=c(t=>l()?u(t,e):r===!1?t:typeof r=="function"?r(t,e):`${t} ${e}`,[r,e]);return i(a,{transform:s,children:i(f,{children:o})})}export{v as Link,v as default};

package/dist/components/loading-indicator.d.ts

@@ -0,0 +1,29 @@
+import { AnsiColors } from '@visulima/colorize';
+import { SpinnerName } from '@visulima/spinner';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Optional message rendered after the spinner.
+  */
+  readonly children?: ReactNode;
+  /**
+  * Color used for the spinner and label.
+  * @default "cyan"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Spinner preset.
+  * @default "dots"
+  */
+  readonly type?: SpinnerName;
+};
+/**
+* Compact spinner + label for loading states.
+*/
+declare function LoadingIndicator({
+  children,
+  color,
+  type
+}: Props): ReactElement;
+export { LoadingIndicator, type Props as LoadingIndicatorProps, Props, LoadingIndicator as default };

package/dist/components/loading-indicator.js

@@ -0,0 +1 @@
+import{jsxs as a,jsx as o}from"react/jsx-runtime";import{Box as c}from"./box.js";import{Spinner as d}from"./spinner.js";import{Text as i}from"./text.js";function m({children:r,color:n="cyan",type:t="dots"}){return a(c,{gap:1,children:[o(i,{color:n,children:o(d,{type:t})}),r===void 0?void 0:o(i,{color:n,children:r})]})}export{m as LoadingIndicator,m as default};

package/dist/components/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/components/markdown.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as x}from"react/jsx-runtime";import{Lexer as C}from"marked";import k,{useMemo as b}from"react";import D from"../ink/hooks/use-window-size.js";import{Box as l}from"./box.js";import{Code as F}from"./code.js";import{Link as M}from"./link.js";import{Newline as w}from"./newline.js";import{OrderedList as j}from"./ordered-list.js";import{Table as v}from"./table.js";import{Text as m}from"./text.js";import{UnorderedList as B}from"./unordered-list.js";const q={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(M,{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 $(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:$(o.tokens,a,t-3)})},n));break}case"code":{const o=i;e.push(r(l,{marginTop:s,children:r(F,{code:o.text,language:o.lang,theme:a})},n));break}case"heading":{const o=i,d=q[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(j,{items:d})},n)):e.push(r(l,{marginTop:s,children:r(B,{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((y,L)=>{f[y]=u[L]??""}),f});e.push(r(l,{marginTop:s,children:r(v,{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 A(c,a){const t=C.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 P({children:c,codeTheme:a="github-dark-default",maxWidth:t,streaming:e=!1}){const{columns:n}=D(),h=t??n??80,i=b(()=>A(c,e),[c,e]),s=b(()=>$(i,a,h),[i,a,h]);return r(l,{flexDirection:"column",children:s})}export{P as Markdown,P as default};

package/dist/components/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/components/masked-input.js

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

package/dist/components/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/components/menu.js

@@ -0,0 +1 @@
+import{jsxs as b,jsx as l}from"react/jsx-runtime";import{useMemo as g,useState as A,useRef as F,useEffect as j,useCallback as y}from"react";import M from"../ink/hooks/use-focus.js";import $ from"../ink/hooks/use-input.js";import{Box as m}from"./box.js";import{Text as f}from"./text.js";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}=M({autoFocus:r}),n=g(()=>B(i,a),[i,a]),S=g(()=>I(n),[n]),[k,v]=A(S),u=F(k);u.current=k,j(()=>{const{current:s}=u,c=n[s];if(!(c?.kind==="item"&&!c.item.isDisabled)){const e=I(n);v(e),u.current=e}},[n]),$(y((s,c)=>{if(p){if(c.downArrow||s==="j")v(w(n,u.current,1));else if(c.upArrow||s==="k")v(w(n,u.current,-1));else if(c.return){const e=n[u.current];e?.kind==="item"&&!e.item.isDisabled&&d(e.item.id)}}},[p,n,d]),{isActive:p});const D=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((s,c)=>{if(s.kind==="section-header")return l(m,{marginTop:c===0?0:1,children:l(f,{dimColor:!0,children:s.title.toUpperCase()})},`header:${s.sectionId}`);const{item:e}=s,x=p&&c===k,C=x?t:void 0;return b(m,{children:[l(f,{color:C,dimColor:e.isDisabled,children:x?"▸ ":"  "}),e.icon===void 0?void 0:b(f,{color:C,dimColor:e.isDisabled,children:[e.icon," "]}),l(m,{flexGrow:1,flexShrink:1,minWidth:0,children:l(f,{bold:x,color:C,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:D}):D}export{W as Menu,W as default};

package/dist/components/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/components/message-bubble.js

@@ -0,0 +1 @@
+import{jsxs as a,jsx as o}from"react/jsx-runtime";import{Box as i}from"./box.js";import{Text as e}from"./text.js";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 u({children:r,color:d,flat:s=!1,label:l,meta:n,role:g="assistant"}){const c=f[g],t=d??c.color;return a(i,{alignSelf:c.align,flexDirection:"column",marginBottom:1,children:[l===void 0&&n===void 0?void 0:a(i,{gap:1,paddingX:1,children:[l===void 0?void 0:o(e,{bold:!0,color:t,children:l}),n===void 0?void 0:o(e,{dimColor:!0,children:n})]}),s?a(i,{paddingX:1,children:[o(e,{color:t,children:"│ "}),o(i,{flexDirection:"column",flexGrow:1,children:typeof r=="string"?o(e,{children:r}):r})]}):o(i,{borderColor:t,borderStyle:"round",flexDirection:"column",paddingX:1,children:typeof r=="string"?o(e,{children:r}):r})]})}export{u as MessageBubble,u as default};

package/dist/components/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/components/model-badge.js

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

package/dist/components/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/components/multi-select.js

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

package/dist/components/newline.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+type Props = {
+  /**
+  * Number of newlines to insert.
+  * @default 1
+  */
+  readonly count?: number;
+};
+/**
+* Adds one or more newline (`\n`) characters. Must be used within `<Text>` components.
+*/
+declare function Newline({
+  count
+}: Props): ReactElement;
+export { Newline, type Props as NewlineProps, Props, Newline as default };

package/dist/components/newline.js

@@ -0,0 +1,2 @@
+import{jsx as t}from"react/jsx-runtime";function r({count:e=1}){return t("ink-text",{children:`
+`.repeat(e)})}export{r as Newline,r as default};

package/dist/components/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 };

package/dist/components/operation-tree.js

@@ -0,0 +1 @@
+import{jsx as n,jsxs as s,Fragment as S}from"react/jsx-runtime";import{Box as t}from"./box.js";import{Spinner as k}from"./spinner.js";import{Text as o}from"./text.js";const w={completed:"green",error:"red",pending:"gray",running:"cyan",skipped:"yellow"},C={completed:"✔",error:"✖",pending:"○",skipped:"⊘"},y=e=>{if(e<1e3)return`${Math.round(e)}ms`;if(e<6e4)return`${(e/1e3).toFixed(1)}s`;const r=Math.round(e/1e3),i=Math.floor(r/60),d=r%60;return`${i}m ${d}s`},h=({isLast:e,node:r,prefix:i,showSpinner:d})=>{const p=w[r.status],c=e?"└─ ":"├─ ",u=i.length===0?"":c,l=i+(e?"   ":"│  "),m=d?n(k,{type:"dots"}):"…",f=r.status==="running"?m:C[r.status];return s(S,{children:[s(t,{children:[n(o,{dimColor:!0,children:i}),n(o,{dimColor:!0,children:u}),n(t,{flexShrink:0,children:n(o,{color:p,children:f})}),n(o,{children:" "}),n(t,{flexGrow:1,flexShrink:1,minWidth:0,children:n(o,{bold:r.status==="running",color:r.status==="pending"?"gray":void 0,dimColor:r.status==="skipped",wrap:"truncate-end",children:r.label})}),r.durationMs===void 0?void 0:n(t,{flexShrink:0,children:s(o,{dimColor:!0,children:[" ",y(r.durationMs)]})})]}),r.details===void 0?void 0:s(t,{children:[n(o,{dimColor:!0,children:l}),n(o,{dimColor:!0,children:r.details})]}),r.children?.map((a,x,g)=>n(h,{isLast:x===g.length-1,node:a,prefix:l,showSpinner:d},a.id))]})};function T({nodes:e,showSpinner:r=!0}){return n(t,{flexDirection:"column",children:e.map((i,d)=>n(h,{isLast:d===e.length-1,node:i,prefix:"",showSpinner:r},i.id))})}export{T as OperationTree,T as default};