@visulima/tui 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist/components/histogram.d.ts

@@ -0,0 +1,62 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Number of equal-width buckets. Ignored if `thresholds` is set.
+  * @default 10
+  */
+  readonly bins?: number;
+  /**
+  * Bar color.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Raw values to bin.
+  */
+  readonly data: ReadonlyArray<number>;
+  /**
+  * Plot height in character rows.
+  * @default 10
+  */
+  readonly height?: number;
+  /**
+  * Optional fixed maximum.
+  */
+  readonly max?: number;
+  /**
+  * Optional fixed minimum.
+  */
+  readonly min?: number;
+  /**
+  * Render a numeric count above each bucket.
+  * @default false
+  */
+  readonly showValues?: boolean;
+  /**
+  * Explicit bin edges. When provided, `bins`, `min`, and `max` are ignored.
+  * Must be strictly increasing.
+  */
+  readonly thresholds?: ReadonlyArray<number>;
+  /**
+  * Plot width in character columns.
+  */
+  readonly width?: number;
+};
+/**
+* Histogram built on top of BarChart. Bins the raw values (via explicit
+* thresholds or equal-width bins) and hands the counts off to BarChart.
+* @returns A `ReactElement` rendering a BarChart of bucket counts.
+*/
+declare function Histogram({
+  bins,
+  color,
+  data,
+  height,
+  max: maxOverride,
+  min: minOverride,
+  showValues,
+  thresholds,
+  width
+}: Props): ReactElement;
+export { Histogram, type Props as HistogramProps, Props, Histogram as default };

package/dist/components/histogram.js

@@ -0,0 +1 @@
+var b=Object.defineProperty;var c=(o,t)=>b(o,"name",{value:t,configurable:!0});import{jsx as p}from"react/jsx-runtime";import{useMemo as v}from"react";import{BarChart as w}from"./bar-chart.js";var y=Object.defineProperty,m=c((o,t)=>y(o,"name",{value:t,configurable:!0}),"c");const x=m((o,t,r)=>{if(r<=0||o>=t)return[o,t];const h=(t-o)/r;return Array.from({length:r+1},(n,e)=>o+e*h)},"computeThresholds"),g=m((o,t)=>{if(t.length<2)return[];const r=Array.from({length:t.length-1}).fill(0),h=t[0],n=t[t.length-1];for(const e of o)if(!(e<h||e>n))for(let a=0;a<t.length-1;a+=1){const l=a===t.length-2,s=t[a+1];if(e<s||l&&e<=s){r[a]=(r[a]??0)+1;break}}return r.map((e,a)=>{const l=t[a],s=t[a+1];return{count:e,label:`${Math.round(l)}-${Math.round(s)}`}})},"binData");function M({bins:o=10,color:t,data:r,height:h=10,max:n,min:e,showValues:a=!1,thresholds:l,width:s}){const d=v(()=>{if(l&&l.length>=2)return g(r,l);if(r.length===0)return[];let i=e??1/0,u=n??-1/0;if(e===void 0||n===void 0)for(const f of r)e===void 0&&f<i&&(i=f),n===void 0&&f>u&&(u=f);return i===u?[{count:r.length,label:i.toString()}]:g(r,x(i,u,o))},[r,l,o,e,n]);return p(w,{data:d.map(i=>({color:t,label:i.label,value:i.count})),height:h,orientation:"vertical",showLabels:!0,showValues:a,width:s})}c(M,"s");m(M,"Histogram");export{M as Histogram,M as default};

package/dist/components/kbd.d.ts

@@ -0,0 +1,31 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Key cap content.
+  */
+  readonly children: ReactNode;
+  /**
+  * Background color of the key cap.
+  * @default "gray"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Visual style.
+  * - `solid` (default): background filled
+  * - `outline`: border only
+  * - `bare`: no decoration, just dimmed text
+  */
+  readonly variant?: "bare" | "outline" | "solid";
+};
+/**
+* Render a keyboard key (e.g. `&lt;Kbd>Enter&lt;/Kbd>`).
+* @returns A `ReactElement` styled as a key cap (solid / outline / bare).
+*/
+declare function Kbd({
+  children,
+  color,
+  variant
+}: Props): ReactElement;
+export { Kbd, type Props as KbdProps, Props, Kbd as default };

package/dist/components/kbd.js

@@ -0,0 +1 @@
+var a=Object.defineProperty;var e=(r,o)=>a(r,"name",{value:o,configurable:!0});import{jsxs as i,jsx as l}from"react/jsx-runtime";import{Box as t}from"./box.js";import{Text as d}from"./text.js";var c=Object.defineProperty,u=e((r,o)=>c(r,"name",{value:o,configurable:!0}),"l");function s({children:r,color:o="gray",variant:n="solid"}){return n==="solid"?i(d,{backgroundColor:o,color:"black",children:[" ",r," "]}):n==="outline"?l(t,{borderColor:o,borderStyle:"round",paddingX:1,children:l(d,{color:o,children:r})}):l(d,{dimColor:!0,children:r})}e(s,"n");u(s,"Kbd");export{s as Kbd,s as default};

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-BBjIoaN0.js";import"./box.js";import"./canvas.js";import{f as s,f,d as n,a as d}from"../packem_shared/line-chart-kf7uhR0K.js";import"./text.js";export{s as LineChart,f as default,n as drawSeriesOnCanvas,d 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 @@
+var a=Object.defineProperty;var o=(r,e)=>a(r,"name",{value:e,configurable:!0});import{jsx as u}from"react/jsx-runtime";import{hyperlink as f}from"@visulima/ansi";import{useCallback as l}from"react";import{Text as m}from"./text.js";import{Transform as R}from"./transform.js";var v=Object.defineProperty,i=o((r,e)=>v(r,"name",{value:e,configurable:!0}),"s");let p;const d=i(()=>{if(!process.stdout.isTTY)return!1;const r=process.env.TERM_PROGRAM??"",e=process.env.TERM_PROGRAM_VERSION??"";if(r==="iTerm.app")return Number.parseInt(e.split(".")[0]??"0",10)>=3;if(r==="WezTerm"||r==="ghostty")return!0;if(r==="vscode"){const s=e.split("."),n=Number.parseInt(s[0]??"0",10),c=Number.parseInt(s[1]??"0",10);return n>1||n===1&&c>=72}if(process.env.WT_SESSION)return!0;const t=process.env.VTE_VERSION;if(t){const s=Number.parseInt(t,10);return s>=5e3&&s!==5e3}return!1},"detectHyperlinkSupport"),E=i(()=>process.env.FORCE_HYPERLINK?process.env.FORCE_HYPERLINK!=="0":(p!==void 0||(p=d()),p),"supportsHyperlinks");function T({children:r,fallback:e=!0,url:t}){const s=l(n=>E()?f(n,t):e===!1?n:typeof e=="function"?e(n,t):`${n} ${t}`,[e,t]);return u(R,{transform:s,children:u(m,{children:r})})}o(T,"u");i(T,"Link");export{T as Link,T 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 @@
+var t=Object.defineProperty;var i=(r,o)=>t(r,"name",{value:o,configurable:!0});import{jsxs as c,jsx as n}from"react/jsx-runtime";import{Box as d}from"./box.js";import{Spinner as l}from"./spinner.js";import{Text as a}from"./text.js";var p=Object.defineProperty,m=i((r,o)=>p(r,"name",{value:o,configurable:!0}),"t");function s({children:r,color:o="cyan",type:e="dots"}){return c(d,{gap:1,children:[n(a,{color:o,children:n(l,{type:e})}),r===void 0?void 0:n(a,{color:o,children:r})]})}i(s,"i");m(s,"LoadingIndicator");export{s as LoadingIndicator,s 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 @@
+var j=Object.defineProperty;var u=(c,t)=>j(c,"name",{value:t,configurable:!0});import{jsx as r,jsxs as w}from"react/jsx-runtime";import{Lexer as B}from"marked";import b,{useMemo as L}from"react";import D from"../ink/hooks/use-window-size.js";import{Box as l}from"./box.js";import{Code as W}from"./code.js";import{Link as $}from"./link.js";import{Newline as C}from"./newline.js";import{OrderedList as q}from"./ordered-list.js";import{Table as I}from"./table.js";import{Text as m}from"./text.js";import{UnorderedList as O}from"./unordered-list.js";var A=Object.defineProperty,g=u((c,t)=>A(c,"name",{value:t,configurable:!0}),"g");const E={1:"cyan",2:"green",3:"yellow",4:"blue",5:"magenta",6:"gray"};function h(c){return!c||c.length===0?null:c.map((t,n)=>{switch(t.type){case"br":return r(C,{},n);case"codespan":return w(m,{inverse:!0,children:[" ",t.text," "]},n);case"del":return r(m,{strikethrough:!0,children:h(t.tokens)},n);case"em":return r(m,{italic:!0,children:h(t.tokens)},n);case"escape":return r(b.Fragment,{children:t.text},n);case"image":{const e=t;return w(m,{dimColor:!0,children:["[image:"," ",e.text||e.href,"]"]},n)}case"link":{const e=t;return r($,{url:e.href,children:h(e.tokens)??e.text},n)}case"strong":return r(m,{bold:!0,children:h(t.tokens)},n);case"text":return r(b.Fragment,{children:t.text},n);default:{const e="raw"in t?t.raw:"";return r(b.Fragment,{children:e},n)}}})}u(h,"l");g(h,"renderInlineTokens");function T(c){return c.map(t=>{const n=t.tokens??[],e=n.find(i=>i.type==="text"),o=h(e?.tokens??n),p=n.find(i=>i.type==="list");return{children:p?T(p.items):void 0,label:o}})}u(T,"w");g(T,"mapListItems");function y(c,t,n){const e=[];for(const[o,p]of c.entries()){const i=p,s=o>0?1:0;switch(i.type){case"blockquote":{const a=i;e.push(r(l,{borderLeft:!0,borderLeftColor:"gray",marginTop:s,paddingLeft:1,children:r(l,{flexDirection:"column",children:y(a.tokens,t,n-3)})},o));break}case"code":{const a=i;e.push(r(l,{marginTop:s,children:r(W,{code:a.text,language:a.lang,theme:t})},o));break}case"heading":{const a=i,d=E[a.depth]??"white",x=`${"#".repeat(a.depth)} `;e.push(r(l,{marginTop:s,children:w(m,{bold:!0,color:d,children:[x,h(a.tokens)]})},o));break}case"hr":{e.push(r(l,{marginTop:s,children:r(m,{dimColor:!0,children:"─".repeat(Math.min(n,40))})},o));break}case"html":{const a=i.text.replaceAll(/<[^>]*>/g,"");a.trim()&&e.push(r(l,{marginTop:s,children:r(m,{dimColor:!0,children:a})},o));break}case"list":{const a=i,d=T(a.items);a.ordered?e.push(r(l,{marginTop:s,children:r(q,{items:d})},o)):e.push(r(l,{marginTop:s,children:r(O,{items:d})},o));break}case"paragraph":{const a=i;e.push(r(l,{marginTop:s,children:r(m,{wrap:"wrap",children:h(a.tokens)})},o));break}case"space":{e.push(r(C,{},o));break}case"table":{const a=i,d=(a.header??[]).map(f=>f.text),x=(a.rows??[]).map(f=>f.map(k=>k.text)).map(f=>{const k={};return d.forEach((F,M)=>{k[F]=f[M]??""}),k});e.push(r(l,{marginTop:s,children:r(I,{data:x})},o));break}default:{const a="raw"in i?i.raw:"",d="text"in i?i.text:a;d&&e.push(r(l,{marginTop:s,children:r(m,{children:d})},o));break}}}return e}u(y,"L");g(y,"renderBlockTokens");function v(c,t){const n=B.lex(c);if(!t||c.length===0)return n;let e=0;for(const o of n)e+=o.raw?.length??0;if(e<c.length){const o=c.slice(e);o.trim().length>0&&n.push({raw:o,text:o,tokens:[{raw:o,text:o,type:"text"}],type:"paragraph"})}return n}u(v,"q");g(v,"lexWithStreamingFallback");function N({children:c,codeTheme:t="github-dark-default",maxWidth:n,streaming:e=!1}){const{columns:o}=D(),p=n??o??80,i=L(()=>v(c,e),[c,e]),s=L(()=>y(i,t,p),[i,t,p]);return r(l,{flexDirection:"column",children:s})}u(N,"B");g(N,"Markdown");export{N as Markdown,N 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 @@
+var B=Object.defineProperty;var x=(n,e)=>B(n,"name",{value:e,configurable:!0});import{jsxs as T,jsx as C}from"react/jsx-runtime";import{useMemo as V,useState as A,useCallback as j}from"react";import _ from"../ink/hooks/use-input.js";import{Box as D}from"./box.js";import{Text as b}from"./text.js";var O=Object.defineProperty,v=x((n,e)=>O(n,"name",{value:e,configurable:!0}),"h");const R=v((n,e)=>{const o=[];let s=0;for(const[a,l]of[...n].entries())l===e&&(o.push({maskColumn:a,rawPosition:s}),s+=1);return o},"buildTokenIndex"),$=v((n,e,o,s)=>{let a=0,l="";for(const f of e)if(f===o){const m=n[a];m===void 0?l+=s:(l+=m,a+=1)}else l+=f;return l},"formatValue");function q({defaultValue:n="",isDisabled:e=!1,mask:o,onChange:s,onSubmit:a,placeholderChar:l="_",token:f="#"}){const m=V(()=>R(o,f),[o,f]),h=m.length,M=n.slice(0,h),[t,w]=A(M),[r,d]=A(M.length),p=j((u,i)=>{w(u),d(Math.max(0,Math.min(h,i))),s?.(u)},[h,s]);_(j((u,i)=>{if(i.return){a?.(t);return}if(i.leftArrow){d(c=>Math.max(0,c-1));return}if(i.rightArrow){d(c=>Math.min(t.length,c+1));return}if(i.home||i.ctrl&&u==="a"){d(0);return}if(i.end||i.ctrl&&u==="e"){d(t.length);return}if(i.backspace){if(r===0)return;const c=t.slice(0,r-1)+t.slice(r);p(c,r-1);return}if(i.delete){if(r>=t.length)return;const c=t.slice(0,r)+t.slice(r+1);p(c,r);return}if(u.length!==1||t.length>=h)return;const S=t.slice(0,r)+u+t.slice(r);p(S,r+1)},[t,r,h,p,a]),{isActive:!e});const g=$(t,o,f,l),k=m[r]?.maskColumn??o.length,y=g.slice(0,k),I=g.charAt(k)||" ",P=g.slice(k+1);return T(D,{children:[C(b,{dimColor:e,children:y}),C(b,{dimColor:e,inverse:!e,children:I}),C(b,{dimColor:e,children:P})]})}x(q,"v");v(q,"MaskedInput");export{q as MaskedInput,q 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 @@
+var A=Object.defineProperty;var g=(r,i)=>A(r,"name",{value:i,configurable:!0});import{jsxs as p,jsx as l}from"react/jsx-runtime";import{useMemo as w,useState as F,useRef as M,useEffect as B,useCallback as E}from"react";import T from"../ink/hooks/use-focus.js";import G from"../ink/hooks/use-input.js";import{Box as u}from"./box.js";import{Text as f}from"./text.js";var N=Object.defineProperty,k=g((r,i)=>N(r,"name",{value:i,configurable:!0}),"b");const O=k((r,i)=>{if(i&&i.length>0){const t=[];for(const o of i){o.title!==void 0&&t.push({kind:"section-header",sectionId:o.id,title:o.title});for(const d of o.items)t.push({item:d,kind:"item",sectionId:o.id})}return t}return(r??[]).map(t=>({item:t,kind:"item",sectionId:void 0}))},"flatten"),y=k((r,i,t)=>{const o=r.length;if(o===0)return i;for(let d=1;d<=o;d+=1){const a=(i+t*d+o*d)%o,h=r[a];if(h?.kind==="item"&&!h.item.isDisabled)return a}return i},"findNextIndex"),S=k(r=>{for(const[i,t]of r.entries())if(t.kind==="item"&&!t.item.isDisabled)return i;return 0},"firstEnabledIndex");function P({accentColor:r="blue",autoFocus:i=!1,bordered:t=!0,items:o,onSelect:d,sections:a,title:h}){const{isFocused:b}=T({autoFocus:i}),n=w(()=>O(o,a),[o,a]),j=w(()=>S(n),[n]),[v,x]=F(j),m=M(v);m.current=v,B(()=>{const{current:c}=m,s=n[c];if(!(s?.kind==="item"&&!s.item.isDisabled)){const e=S(n);x(e),m.current=e}},[n]),G(E((c,s)=>{if(b){if(s.downArrow||c==="j")x(y(n,m.current,1));else if(s.upArrow||c==="k")x(y(n,m.current,-1));else if(s.return){const e=n[m.current];e?.kind==="item"&&!e.item.isDisabled&&d(e.item.id)}}},[b,n,d]),{isActive:b});const I=p(u,{flexDirection:"column",children:[h===void 0?void 0:l(u,{marginBottom:1,children:l(f,{bold:!0,color:r,children:h})}),n.map((c,s)=>{if(c.kind==="section-header")return l(u,{marginTop:s===0?0:1,children:l(f,{dimColor:!0,children:c.title.toUpperCase()})},`header:${c.sectionId}`);const{item:e}=c,C=b&&s===v,D=C?r:void 0;return p(u,{children:[l(f,{color:D,dimColor:e.isDisabled,children:C?"▸ ":"  "}),e.icon===void 0?void 0:p(f,{color:D,dimColor:e.isDisabled,children:[e.icon," "]}),l(u,{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(u,{flexShrink:0,children:p(f,{dimColor:!0,children:[" ",e.hotkey]})})]},`item:${e.id}`)})]});return t?l(u,{borderColor:b?r:void 0,borderStyle:"round",paddingX:1,children:I}):I}g(P,"F");k(P,"Menu");export{P as Menu,P 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 @@
+var m=Object.defineProperty;var c=(o,e)=>m(o,"name",{value:e,configurable:!0});import{jsxs as d,jsx as r}from"react/jsx-runtime";import{Box as l}from"./box.js";import{Text as i}from"./text.js";var u=Object.defineProperty,h=c((o,e)=>u(o,"name",{value:e,configurable:!0}),"f");const x={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 b({children:o,color:e,flat:g=!1,label:n,meta:t,role:f="assistant"}){const s=x[f],a=e??s.color;return d(l,{alignSelf:s.align,flexDirection:"column",marginBottom:1,children:[n===void 0&&t===void 0?void 0:d(l,{gap:1,paddingX:1,children:[n===void 0?void 0:r(i,{bold:!0,color:a,children:n}),t===void 0?void 0:r(i,{dimColor:!0,children:t})]}),g?d(l,{paddingX:1,children:[r(i,{color:a,children:"│ "}),r(l,{flexDirection:"column",flexGrow:1,children:typeof o=="string"?r(i,{children:o}):o})]}):r(l,{borderColor:a,borderStyle:"round",flexDirection:"column",paddingX:1,children:typeof o=="string"?r(i,{children:o}):o})]})}c(b,"g");h(b,"MessageBubble");export{b as MessageBubble,b 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 @@
+var f=Object.defineProperty;var n=(r,o)=>f(r,"name",{value:o,configurable:!0});import{jsxs as e,Fragment as v,jsx as c}from"react/jsx-runtime";import{Box as s}from"./box.js";import{Text as d}from"./text.js";var b=Object.defineProperty,h=n((r,o)=>b(r,"name",{value:o,configurable:!0}),"i");function g({color:r="magenta",icon:o,model:t,provider:a,variant:m="solid"}){const u=h(i=>{const l=o===void 0?void 0:e(v,{children:[o," "]});return m==="outline"?c(s,{borderColor:r,borderStyle:"round",paddingX:1,children:e(d,{color:r,children:[l,i]})}):m==="subtle"?e(d,{color:r,children:[l,i]}):e(d,{backgroundColor:r,color:"black",children:[" ",l,i," "]})},"chip");return a===void 0?u(t):e(s,{children:[c(d,{dimColor:!0,children:a}),c(d,{dimColor:!0,children:"/"}),u(t)]})}n(g,"f");h(g,"ModelBadge");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 @@
+var B=Object.defineProperty;var F=(e,i)=>B(e,"name",{value:i,configurable:!0});import{jsx as m,jsxs as D}from"react/jsx-runtime";import{useReducer as E,useState as L,useRef as a,useMemo as P,useCallback as g}from"react";import _ from"../ink/hooks/use-input.js";import q from"../ink/hooks/use-window-size.js";import{Box as O}from"./box.js";import{Text as f}from"./text.js";var z=Object.defineProperty,R=F((e,i)=>z(e,"name",{value:i,configurable:!0}),"S");const G=[],H=R((e,i)=>{switch(i.type){case"focus":return{...e,focusedIndex:i.index};case"focus-next":{const c=e.focusedIndex+1,u=c>=e.visibleFrom+i.limit;return{...e,focusedIndex:c,visibleFrom:u?e.visibleFrom+1:e.visibleFrom}}case"focus-prev":{const c=e.focusedIndex-1,u=c<e.visibleFrom;return{...e,focusedIndex:c,visibleFrom:u?e.visibleFrom-1:e.visibleFrom}}default:return e}},"multiSelectReducer");function J({accentColor:e="blue",defaultColor:i,defaultValue:c=G,isDisabled:u=!1,isFocused:v=!0,limit:C,onChange:I,onSubmit:w,options:t}){const{rows:T}=q(),l=Math.min(typeof C=="number"?C:T,t.length),[s,S]=E(H,{focusedIndex:0,visibleFrom:0}),[b,j]=L(c),y=a(b);y.current=b;const M=a(w);M.current=w;const p=a(I);p.current=I;const x=a(s);x.current=s;const V=P(()=>t.slice(s.visibleFrom,s.visibleFrom+l),[t,s.visibleFrom,l]),k=g(()=>{const r=t[x.current.focusedIndex]?.value;r&&j(o=>{const n=o.includes(r)?o.filter(d=>d!==r):[...o,r];return p.current?.(n),n})},[t]),A=g(()=>{j(r=>{const o=r.length===t.length?[]:t.map(n=>n.value);return p.current?.(o),o})},[t]);return _(g((r,o)=>{const{focusedIndex:n}=x.current;(o.downArrow||r==="j")&&n<t.length-1&&S({limit:l,type:"focus-next"}),(o.upArrow||r==="k")&&n>0&&S({limit:l,type:"focus-prev"}),r===" "&&k(),r==="a"&&A(),o.return&&M.current?.(y.current)},[t.length,l,k,A]),{isActive:!u&&v}),m(O,{flexDirection:"column",children:V.map((r,o)=>{const n=s.visibleFrom+o===s.focusedIndex,d=b.includes(r.value);let h=i;return d?h="green":n&&(h=e),D(O,{gap:1,children:[n?m(f,{color:e,dimColor:!v,children:"▸"}):m(f,{children:" "}),D(f,{color:h,dimColor:u,children:[d?"◼":"◻"," ",r.label]}),d?m(f,{color:"green",dimColor:!v,children:"✓"}):void 0]},r.key??r.value)})})}F(J,"V");R(J,"MultiSelect");export{J as MultiSelect,J as default};