@visulima/tui-kit 0.0.0 → 1.0.0

package/dist/textarea.d.ts

@@ -0,0 +1,68 @@
+import { ReactElement } from 'react';
+type Props = {
+  /** @default "" */
+  readonly defaultValue?: string;
+  /**
+  * When true, all input is ignored and text is dimmed.
+  * @default false
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * When true, the component responds to keyboard input.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Maximum visible rows before viewport scrolling kicks in.
+  * When set, the textarea will grow from `rows` to `maxRows` before scrolling.
+  */
+  readonly maxRows?: number;
+  /**
+  * Fires on every edit with the updated text.
+  */
+  readonly onChange?: (value: string) => void;
+  /**
+  * Fires when the user presses Meta+Enter or Ctrl+Enter.
+  */
+  readonly onSubmit?: (value: string) => void;
+  /**
+  * Greyed-out text shown when the textarea is empty.
+  */
+  readonly placeholder?: string;
+  /**
+  * Number of visible rows (viewport height).
+  * @default 5
+  */
+  readonly rows?: number;
+  /**
+  * Show line numbers in the left gutter.
+  * @default false
+  */
+  readonly showLineNumbers?: boolean;
+  /**
+  * Number of spaces inserted for a Tab key press.
+  * @default 2
+  */
+  readonly tabSize?: number;
+};
+/**
+* A multi-line text input with cursor navigation, selection, clipboard, undo/redo,
+* paste support, and viewport scrolling.
+*
+* ```tsx
+* <Textarea defaultValue="Hello\nWorld" rows={10} onChange={setValue} onSubmit={handleSubmit} />
+* ```
+*/
+declare function Textarea({
+  defaultValue,
+  isDisabled,
+  isFocused,
+  maxRows,
+  onChange,
+  onSubmit,
+  placeholder,
+  rows,
+  showLineNumbers,
+  tabSize
+}: Props): ReactElement;
+export { Props, Textarea, type Props as TextareaProps, Textarea as default };

package/dist/textarea.js

@@ -0,0 +1,2 @@
+import{jsx as l,jsxs as m,Fragment as x}from"react/jsx-runtime";import C from"@visulima/tui/components/box";import o from"@visulima/tui/components/text";import I from"@visulima/tui/hooks/use-clipboard";import W from"@visulima/tui/hooks/use-input";import Z from"@visulima/tui/hooks/use-paste";import $ from"@visulima/tui/hooks/use-text-buffer";import{isInsertableInput as q}from"@visulima/tui/input";import{useRef as A,useState as H,useEffect as z,useMemo as N,useCallback as M}from"react";const O=(t,c)=>c.line<t.line||c.line===t.line&&c.col<t.col?{endCol:t.col,endLine:t.line,startCol:c.col,startLine:c.line}:{endCol:c.col,endLine:c.line,startCol:t.col,startLine:t.line};function rr({defaultValue:t="",isDisabled:c=!1,isFocused:g=!0,maxRows:d,onChange:v,onSubmit:h,placeholder:p,rows:a=5,showLineNumbers:f=!1,tabSize:L=2}){const n=$(t),S=A(n);S.current=n;const{copy:s}=I(),[u,T]=H(0),D=A(v);D.current=v;const E=A(h);E.current=h;const k=A(t);z(()=>{n.value!==k.current&&(k.current=n.value,D.current?.(n.value))},[n.value]);const w=N(()=>d?Math.min(Math.max(a,n.lines.length),d):a,[a,d,n.lines.length]);z(()=>{T(i=>n.cursor.line<i?n.cursor.line:n.cursor.line>=i+w?n.cursor.line-w+1:i)},[n.cursor.line,w]);const R=M((i,r)=>{const e=S.current;if(r.return&&(r.meta||r.ctrl)){E.current?.(e.value);return}if(r.return){e.newline();return}if(r.escape){e.clearSelection();return}if(r.tab){e.insert(" ".repeat(L));return}if(r.ctrl&&i==="z"){e.undo();return}if(r.ctrl&&(i==="y"||r.shift&&i==="Z")){e.redo();return}if(r.ctrl&&i==="c"&&e.hasSelection()){s(e.getSelectedText());return}if(r.ctrl&&(i==="A"||i==="a"&&r.shift)){e.selectAll();return}if(r.upArrow){e.moveCursor("up",r.shift);return}if(r.downArrow){e.moveCursor("down",r.shift);return}if(r.leftArrow){e.moveCursor("left",r.shift);return}if(r.rightArrow){e.moveCursor("right",r.shift);return}if(r.home){r.ctrl?e.moveToStart(r.shift):e.moveToLineStart(r.shift);return}if(r.end){r.ctrl?e.moveToEnd(r.shift):e.moveToLineEnd(r.shift);return}if(r.ctrl&&i==="a"){e.moveToLineStart(r.shift);return}if(r.ctrl&&i==="e"){e.moveToLineEnd(r.shift);return}if(r.backspace){e.deleteBack();return}if(r.delete){e.deleteForward();return}if(r.ctrl&&i==="u"){e.deleteToLineStart();return}if(r.ctrl&&i==="k"){e.deleteToLineEnd();return}if(r.ctrl&&i==="w"){e.deleteWord();return}q(i,r)&&(e.hasSelection()?e.replaceSelection(i):e.insert(i))},[s,L]);W(R,{isActive:g&&!c});const j=M(i=>{const r=S.current;r.hasSelection()?r.replaceSelection(i):r.insert(i)},[]);Z(j,{isActive:g&&!c});const F=n.lines.slice(u,u+w),b=f?String(n.lines.length).length+1:0,y=n.anchor?O(n.cursor,n.anchor):null;if(c)return l(C,{flexDirection:"column",children:F.map((i,r)=>{const e=u+r;return m(C,{children:[f?m(o,{dimColor:!0,children:[String(e+1).padStart(b)," "]}):void 0,l(o,{dimColor:!0,children:i||(e===0&&p?p:"")})]},e)})});if(n.value.length===0&&p){const i=p.split(`
+`).slice(0,w);return l(C,{flexDirection:"column",children:i.map((r,e)=>m(C,{children:[f?m(o,{dimColor:!0,children:[String(e+1).padStart(b)," "]}):void 0,e===0?m(o,{children:[l(o,{dimColor:!0,inverse:!0,children:r[0]??" "}),l(o,{dimColor:!0,children:r.slice(1)})]}):l(o,{dimColor:!0,children:r})]},e))})}return l(C,{flexDirection:"column",children:F.map((i,r)=>{const e=u+r,B=e===n.cursor.line;return m(C,{children:[f?m(o,{dimColor:!B,children:[String(e+1).padStart(b)," "]}):void 0,l(o,{children:P(i,e,n.cursor,y)})]},e)})})}function P(t,c,g,d){const v=c===g.line,h=v?g.col:-1,p=d&&c>=d.startLine&&c<=d.endLine;if(!p&&!v)return l(x,{children:t});if(!p){const s=t.slice(0,h),u=t[h],T=t.slice(h+1);return m(x,{children:[s,l(o,{inverse:!0,children:u??" "}),T]})}const a=c===d.startLine?d.startCol:0,f=c===d.endLine?d.endCol:t.length,L=t.slice(0,a),n=t.slice(a,f),S=t.slice(f);if(v&&(h<a||h>=f)){const s=[];let u=0;return h<a?(s.push(l(o,{children:t.slice(0,h)},u++)),s.push(l(o,{inverse:!0,children:t[h]??" "},u++)),s.push(l(o,{children:t.slice(h+1,a)},u++)),s.push(l(o,{inverse:!0,children:n},u++)),s.push(l(o,{children:S},u++))):(s.push(l(o,{children:L},u++)),s.push(l(o,{inverse:!0,children:n},u++)),s.push(l(o,{children:t.slice(f,h)},u++)),s.push(l(o,{inverse:!0,children:t[h]??" "},u++)),s.push(l(o,{children:t.slice(h+1)},u++))),l(x,{children:s})}return m(x,{children:[L,l(o,{inverse:!0,children:n}),S]})}export{rr as Textarea,rr as default};

package/dist/thinking-block.d.ts

@@ -0,0 +1,57 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color for the header and border.
+  * @default "magenta"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus so Space/Enter can toggle the block.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * The reasoning text.
+  */
+  readonly children: string;
+  /**
+  * Start expanded when uncontrolled.
+  * @default true
+  */
+  readonly defaultExpanded?: boolean;
+  /**
+  * Controlled expanded state. When set, `defaultExpanded` is ignored.
+  */
+  readonly expanded?: boolean;
+  /**
+  * Header label.
+  * @default "Thinking"
+  */
+  readonly label?: string;
+  /**
+  * Fires when the expanded state toggles.
+  */
+  readonly onToggle?: (expanded: boolean) => void;
+  /**
+  * Show a pulsing indicator to signal in-progress reasoning.
+  * @default false
+  */
+  readonly streaming?: boolean;
+};
+/**
+* A collapsible block for an assistant's reasoning. The dimmed body is hidden
+* when collapsed; Space or Enter toggles it while focused. Set `streaming` to
+* mark reasoning still in progress.
+*/
+declare function ThinkingBlock({
+  accentColor,
+  autoFocus,
+  children,
+  defaultExpanded,
+  expanded: controlledExpanded,
+  label,
+  onToggle,
+  streaming
+}: Props): ReactElement;
+export { Props, ThinkingBlock, type Props as ThinkingBlockProps, ThinkingBlock as default };

package/dist/thinking-block.js

@@ -0,0 +1 @@
+import{jsxs as u,jsx as o}from"react/jsx-runtime";import n from"@visulima/tui/components/box";import e from"@visulima/tui/components/text";import b from"@visulima/tui/hooks/use-focus";import B from"@visulima/tui/hooks/use-input";import{useState as F,useCallback as m}from"react";function E({accentColor:i="magenta",autoFocus:p=!1,children:f,defaultExpanded:h=!0,expanded:c,label:g="Thinking",onToggle:t,streaming:x=!1}){const{isFocused:d}=b({autoFocus:p}),a=c!==void 0,[k,v]=F(h),r=c??k,s=m(()=>{const l=!r;a||v(l),t?.(l)},[r,a,t]),C=m((l,T)=>{(l===" "||T.return)&&s()},[s]);return B(C,{isActive:d}),u(n,{borderColor:i,borderStyle:"round",flexDirection:"column",paddingX:1,children:[u(n,{gap:1,children:[o(e,{color:i,children:r?"▾":"▸"}),o(e,{color:i,italic:!0,children:g}),x?o(e,{color:i,children:"…"}):void 0,d?o(e,{dimColor:!0,children:r?"(space to collapse)":"(space to expand)"}):void 0]}),r?o(n,{marginTop:1,children:o(e,{dimColor:!0,italic:!0,children:f})}):void 0]})}export{E as ThinkingBlock,E as default};

package/dist/time-picker.d.ts

@@ -0,0 +1,67 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type TimeValue = {
+  readonly hours: number;
+  readonly minutes: number;
+  readonly seconds?: number;
+};
+type Props = {
+  /**
+  * Accent color for the focused segment.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Initial value when uncontrolled.
+  * @default { hours: 0, minutes: 0 }
+  */
+  readonly defaultValue?: TimeValue;
+  /**
+  * Use a 12-hour clock with an AM/PM segment instead of 24-hour.
+  * @default false
+  */
+  readonly hour12?: boolean;
+  /**
+  * Disable input and dim the display.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Fires whenever any segment changes.
+  */
+  readonly onChange?: (value: TimeValue) => void;
+  /**
+  * Fires on Enter.
+  */
+  readonly onSubmit?: (value: TimeValue) => void;
+  /**
+  * Show a seconds segment.
+  * @default false
+  */
+  readonly showSeconds?: boolean;
+  /**
+  * Controlled value. When provided, `defaultValue` is ignored.
+  */
+  readonly value?: TimeValue;
+};
+/**
+* A keyboard-driven time input with independent hour/minute (and optional
+* second) segments. ←/→ move between segments, ↑/↓ adjust the focused segment
+* (wrapping), digits type directly, and Enter submits.
+*/
+declare function TimePicker({
+  accentColor,
+  autoFocus,
+  defaultValue,
+  hour12,
+  isDisabled,
+  onChange,
+  onSubmit,
+  showSeconds,
+  value: controlledValue
+}: Props): ReactElement;
+export { Props, TimePicker, type Props as TimePickerProps, TimeValue, TimePicker as default };

package/dist/time-picker.js

@@ -0,0 +1 @@
+import{jsxs as R,jsx as c,Fragment as W}from"react/jsx-runtime";import T from"@visulima/tui/components/box";import f from"@visulima/tui/components/text";import _ from"@visulima/tui/hooks/use-focus";import z from"@visulima/tui/hooks/use-input";import{useState as V,useRef as X,useCallback as A}from"react";const I=/^\d$/,K={hours:0,minutes:0};function m(a,d){return d===0?0:(a%d+d)%d}const w=a=>String(a).padStart(2,"0");function oe({accentColor:a="blue",autoFocus:d=!1,defaultValue:q=K,hour12:n=!1,isDisabled:h=!1,onChange:k,onSubmit:x,showSeconds:F=!1,value:j}){const{isFocused:g}=_({autoFocus:d,isActive:!h}),M=j!==void 0,[y,B]=V(q),e=j??y,p=["hours","minutes",...F?["seconds"]:[],...n?["ampm"]:[]],[E,$]=V(0),i=p[Math.min(E,p.length-1)],D=X(k);D.current=k;const t=X(null),u=A(r=>{M||B(r),D.current?.(r)},[M]),S=A((r,o)=>{switch(r){case"hours":{u({...e,hours:m(e.hours+o,24)});break}case"minutes":{u({...e,minutes:m(e.minutes+o,60)});break}case"seconds":{u({...e,seconds:m((e.seconds??0)+o,60)});break}default:u({...e,hours:m(e.hours+12,24)})}},[e,u]),L=A((r,o)=>{const s=t.current,N=s!==null&&s.segment===r;if(r==="minutes"||r==="seconds"){let l=N?s.value*10+o:o;l>59&&(l=o),t.current={segment:r,value:l},u(r==="minutes"?{...e,minutes:l}:{...e,seconds:l});return}const Q=n?12:23;let v=N?s.value*10+o:o;if(v>Q&&(v=o),t.current={segment:r,value:v},n){const l=e.hours>=12;u({...e,hours:v%12+(l?12:0)})}else u({...e,hours:v})},[e,n,u]),G=A((r,o)=>{if(o.leftArrow){t.current=null,$(s=>m(s-1,p.length));return}if(o.rightArrow){t.current=null,$(s=>m(s+1,p.length));return}if(o.upArrow){t.current=null,S(i,1);return}if(o.downArrow){t.current=null,S(i,-1);return}if(o.return){x?.(e);return}if(I.test(r)){i!=="ampm"&&L(i,Number.parseInt(r,10));return}(r==="a"||r==="p")&&n&&(t.current=null,e.hours>=12!=(r==="p")&&u({...e,hours:m(e.hours+12,24)}))},[S,L,e,i,n,x,p.length,u]);z(G,{isActive:g&&!h});const H=e.hours%12===0?12:e.hours%12,J=n?H:e.hours,P=e.hours>=12?"PM":"AM";function b(r){return g&&i===r?a:void 0}function C(r){return g&&i===r}return R(T,{borderColor:g?a:void 0,borderStyle:"round",paddingX:1,children:[c(f,{color:b("hours"),dimColor:h,inverse:C("hours"),children:w(J)}),c(f,{dimColor:!0,children:":"}),c(f,{color:b("minutes"),dimColor:h,inverse:C("minutes"),children:w(e.minutes)}),F?R(W,{children:[c(f,{dimColor:!0,children:":"}),c(f,{color:b("seconds"),dimColor:h,inverse:C("seconds"),children:w(e.seconds??0)})]}):void 0,n?c(T,{marginLeft:1,children:c(f,{color:b("ampm"),dimColor:h,inverse:C("ampm"),children:P})}):void 0]})}export{oe as TimePicker,oe as default};

package/dist/timer.d.ts

@@ -0,0 +1,59 @@
+import { UseTimerResult } from '@visulima/tui/hooks/use-timer';
+import { Ref, ReactElement } from 'react';
+type TimerRef = Omit<UseTimerResult, "isFinished" | "isRunning" | "remaining">;
+type Props = {
+  /**
+  * Whether to start the timer immediately.
+  * @default false
+  */
+  readonly autoStart?: boolean;
+  /**
+  * Make the rendered text bold.
+  */
+  readonly bold?: boolean;
+  /**
+  * Text color for the rendered time.
+  */
+  readonly color?: string;
+  /**
+  * Total countdown duration in milliseconds.
+  */
+  readonly duration: number;
+  /**
+  * Custom formatter for the remaining time.
+  * Receives remaining milliseconds, returns a display string.
+  * @default formatDuration (MM:SS or HH:MM:SS)
+  */
+  readonly format?: (remaining: number) => string;
+  /**
+  * Tick interval in milliseconds.
+  * @default 1000
+  */
+  readonly interval?: number;
+  /**
+  * Called once when the timer reaches zero.
+  */
+  readonly onTimeout?: () => void;
+  readonly ref?: Ref<TimerRef>;
+};
+/**
+* A countdown timer component.
+*
+* Exposes `start`, `stop`, `toggle`, and `reset` methods via ref.
+*
+* ```tsx
+* const ref = useRef&lt;TimerRef>(null);
+* &lt;Timer ref={ref} duration={60_000} autoStart />
+* ```
+*/
+declare const Timer: ({
+  autoStart,
+  bold,
+  color,
+  duration,
+  format,
+  interval,
+  onTimeout,
+  ref
+}: Props) => ReactElement;
+export { Props, Timer, type Props as TimerProps, TimerRef, Timer as default };

package/dist/timer.js

@@ -0,0 +1 @@
+import{jsx as l}from"react/jsx-runtime";import u from"@visulima/tui/components/text";import p from"@visulima/tui/hooks/use-timer";import{formatDuration as f}from"@visulima/tui/utils";import{useImperativeHandle as d}from"react";const x=({autoStart:o,bold:r,color:e,duration:a,format:i=f,interval:m,onTimeout:s,ref:n})=>{const t=p({autoStart:o,duration:a,interval:m,onTimeout:s});return d(n,()=>({reset:t.reset,start:t.start,stop:t.stop,toggle:t.toggle}),[t.reset,t.start,t.stop,t.toggle]),l(u,{bold:r,color:e,children:i(t.remaining)})};export{x as Timer,x as default};

package/dist/toast.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode, ReactElement } from 'react';
+import { V as Variant } from "./packem_shared/variant-config.d-D5NnrrQK.js";
+type ToastVariant = Variant;
+type Props = {
+  /**
+  * Toast body.
+  */
+  readonly children: ReactNode;
+  /**
+  * Milliseconds to display before auto-dismissing. Use `0` to disable.
+  * @default 4000
+  */
+  readonly duration?: number;
+  /**
+  * Called after the toast dismisses itself.
+  */
+  readonly onDismiss?: () => void;
+  /**
+  * Optional title rendered before the body.
+  */
+  readonly title?: string;
+  /**
+  * Visual variant determining the icon and border color.
+  * @default "info"
+  */
+  readonly variant?: ToastVariant;
+  /**
+  * Manually control visibility. When provided, `duration` is ignored.
+  */
+  readonly visible?: boolean;
+  /**
+  * Optional width override.
+  */
+  readonly width?: number;
+};
+/**
+* Ephemeral notification. Disappears automatically after `duration` ms.
+* @returns A bordered `ReactElement` while visible; `null` once dismissed.
+*/
+declare function Toast({
+  children,
+  duration,
+  onDismiss,
+  title,
+  variant,
+  visible,
+  width
+}: Props): ReactElement | null;
+export { Props, Toast, type Props as ToastProps, ToastVariant, Toast as default };

package/dist/toast.js

@@ -0,0 +1 @@
+import{jsxs as s,jsx as t}from"react/jsx-runtime";import u from"@visulima/tui/components/box";import i from"@visulima/tui/components/text";import{useState as v,useRef as T,useEffect as w}from"react";import{o as g}from"./packem_shared/variant-config-BJqpNo7H.js";function E({children:f,duration:r=4e3,onDismiss:n,title:l,variant:m="info",visible:o,width:a}){const[p,h]=v(!0),e=o??p,d=T(n);if(d.current=n,w(()=>{if(o!==void 0||r<=0||!e)return;const b=setTimeout(()=>{h(!1),d.current?.()},r);return()=>{clearTimeout(b)}},[r,o,e]),!e)return null;const{color:c,icon:x}=g[m];return s(u,{borderColor:c,borderStyle:"round",gap:1,paddingX:1,width:a,children:[t(i,{color:c,children:x}),s(u,{flexDirection:"column",flexGrow:1,children:[l===void 0?void 0:t(i,{bold:!0,children:l}),t(i,{children:f})]})]})}export{E as Toast,E as default};

package/dist/token-usage.d.ts

@@ -0,0 +1,50 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Color = LiteralUnion<AnsiColors, string>;
+type Props = {
+  /**
+  * Width of the input/output ratio bar in cells.
+  * @default 20
+  */
+  readonly barWidth?: number;
+  /**
+  * Optional context-window size. When set, a `used / limit (pct%)` summary
+  * and a fill bar are shown instead of the input/output split.
+  */
+  readonly contextLimit?: number;
+  /**
+  * Number of input (prompt) tokens.
+  * @default 0
+  */
+  readonly input?: number;
+  /**
+  * Color for the input segment.
+  * @default "cyan"
+  */
+  readonly inputColor?: Color;
+  /**
+  * Number of output (completion) tokens.
+  * @default 0
+  */
+  readonly output?: number;
+  /**
+  * Color for the output segment.
+  * @default "magenta"
+  */
+  readonly outputColor?: Color;
+};
+/**
+* A compact token-usage readout. By default it shows input vs output counts
+* with a proportional two-color bar; when `contextLimit` is set, it instead
+* shows how much of the context window is used.
+*/
+declare function TokenUsage({
+  barWidth,
+  contextLimit,
+  input,
+  inputColor,
+  output,
+  outputColor
+}: Props): ReactElement;
+export { Props, TokenUsage, type Props as TokenUsageProps, TokenUsage as default };

package/dist/token-usage.js

@@ -0,0 +1 @@
+import{jsxs as c,jsx as e}from"react/jsx-runtime";import l from"@visulima/tui/components/box";import t from"@visulima/tui/components/text";function f(r){return r>.9?"red":r>.7?"yellow":"green"}const o=r=>r>=1e6?`${(r/1e6).toFixed(1)}M`:r>=1e3?`${(r/1e3).toFixed(1)}k`:String(r);function $({barWidth:r=20,contextLimit:i,input:d=0,inputColor:h="cyan",output:u=0,outputColor:m="magenta"}){const n=d+u;if(i!==void 0&&i>0){const a=Math.min(1,n/i),s=Math.round(a*r),M=f(a);return c(l,{gap:1,children:[e(t,{color:M,children:"█".repeat(s)}),e(t,{dimColor:!0,children:"░".repeat(Math.max(0,r-s))}),c(t,{children:[o(n),"/",o(i)," ","(",Math.round(a*100),"%)"]})]})}const p=n===0?0:Math.round(d/n*r),x=Math.max(0,r-p);return c(l,{gap:1,children:[c(l,{children:[e(t,{color:h,children:"█".repeat(p)}),e(t,{color:m,children:"█".repeat(x)})]}),e(t,{color:h,children:`↑${o(d)}`}),e(t,{color:m,children:`↓${o(u)}`}),e(t,{dimColor:!0,children:`Σ${o(n)}`})]})}export{$ as TokenUsage,$ as default};

package/dist/tool-call.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode, ReactElement } from 'react';
+type ToolCallStatus = "error" | "pending" | "running" | "success";
+type Props = {
+  /**
+  * The tool arguments. Objects are shown as compact `key=value` pairs;
+  * strings are shown verbatim.
+  */
+  readonly args?: Record<string, unknown> | string;
+  /**
+  * Rendered output/result of the call, shown indented beneath the header.
+  */
+  readonly children?: ReactNode;
+  /**
+  * The tool name.
+  */
+  readonly name: string;
+  /**
+  * Call status, driving the icon and color.
+  * @default "pending"
+  */
+  readonly status?: ToolCallStatus;
+};
+/**
+* A single tool invocation: a status icon, the tool name, its arguments as
+* compact `key=value` pairs, and any result rendered as indented children.
+*/
+declare function ToolCall({
+  args,
+  children,
+  name,
+  status
+}: Props): ReactElement;
+export { Props, ToolCall, type Props as ToolCallProps, ToolCallStatus, ToolCall as default };

package/dist/tool-call.js

@@ -0,0 +1 @@
+import{jsxs as d,jsx as i}from"react/jsx-runtime";import c from"@visulima/tui/components/box";import e from"@visulima/tui/components/text";const a={error:{color:"red",icon:"✖"},pending:{color:"gray",icon:"○"},running:{color:"yellow",icon:"◐"},success:{color:"green",icon:"✔"}},g=o=>o===void 0?"":typeof o=="string"?o:Object.entries(o).map(([n,r])=>`${n}=${typeof r=="string"?r:JSON.stringify(r)}`).join(" ");function u({args:o,children:n,name:r,status:s="pending"}){const l=a[s],t=g(o);return d(c,{flexDirection:"column",children:[d(c,{gap:1,children:[i(e,{color:l.color,children:l.icon}),i(e,{bold:!0,children:r}),t.length>0?i(e,{dimColor:!0,children:t}):void 0]}),n===void 0?void 0:i(c,{marginLeft:2,children:i(e,{dimColor:!0,children:n})})]})}export{u as ToolCall,u as default};

package/dist/tooltip.d.ts

@@ -0,0 +1,43 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type TooltipPlacement = "bottom" | "left" | "right" | "top";
+type Props = {
+  /**
+  * The element the tooltip is attached to.
+  */
+  readonly children: ReactNode;
+  /**
+  * Border color.
+  * @default "gray"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Tooltip body content.
+  */
+  readonly content: ReactNode;
+  /**
+  * Controls whether the tooltip is rendered.
+  * @default true
+  */
+  readonly isVisible?: boolean;
+  /**
+  * Relative position. Terminal rendering does not support floating layers,
+  * so the tooltip is placed inline next to (or above / below) the anchor.
+  * @default "right"
+  */
+  readonly placement?: TooltipPlacement;
+};
+/**
+* Renders supplementary text next to an anchor. Because terminals don't have
+* a floating-layer concept, the tooltip lives inline in the layout. Hide it
+* by toggling `isVisible`.
+*/
+declare function Tooltip({
+  children,
+  color,
+  content,
+  isVisible,
+  placement
+}: Props): ReactElement;
+export { Props, Tooltip, TooltipPlacement, type Props as TooltipProps, Tooltip as default };

package/dist/tooltip.js

@@ -0,0 +1 @@
+import{jsx as i,jsxs as s}from"react/jsx-runtime";import o from"@visulima/tui/components/box";import m from"@visulima/tui/components/text";const a={bottom:{flexDirection:"column",orderFirst:!1},left:{flexDirection:"row",orderFirst:!0},right:{flexDirection:"row",orderFirst:!1},top:{flexDirection:"column",orderFirst:!0}};function x({children:c,color:t="gray",content:r,isVisible:d=!0,placement:e="right"}){const{flexDirection:f,orderFirst:n}=a[e],l=d?i(o,{borderColor:t,borderStyle:"round",flexShrink:0,marginLeft:e==="right"?1:0,marginRight:e==="left"?1:0,paddingX:1,children:typeof r=="string"?i(m,{color:t,children:r}):r}):void 0;return s(o,{alignItems:"center",flexDirection:f,children:[n?l:void 0,i(o,{children:c}),n?void 0:l]})}export{x as Tooltip,x as default};

package/dist/transition.d.ts

@@ -0,0 +1,74 @@
+import { ReactNode, ReactElement } from 'react';
+type TransitionPreset = "fade" | "reveal" | "slide-down" | "slide-left" | "slide-right" | "slide-up";
+type TransitionPhase = "entered" | "entering" | "exited" | "exiting";
+type Props = {
+  /**
+  * Content to animate.
+  */
+  readonly children: ReactNode;
+  /**
+  * For slide presets, how many characters of offset to animate across.
+  * For the `reveal` preset, the maximum row count to scale through.
+  * @default 4
+  */
+  readonly distance?: number;
+  /**
+  * Duration of both enter and exit transitions, in milliseconds.
+  * @default 240
+  */
+  readonly duration?: number;
+  /**
+  * Called once the exit animation finishes (i.e. the component has fully
+  * transitioned out). AnimatePresence uses this to unmount the wrapper.
+  */
+  readonly onExit?: () => void;
+  /**
+  * Animation preset controlling how the content appears/disappears.
+  * @default "fade"
+  */
+  readonly preset?: TransitionPreset;
+  /**
+  * Controls the target phase. `true` drives towards `entered`, `false`
+  * drives towards `exited`. Flip the value to trigger animation.
+  * @default true
+  */
+  readonly show?: boolean;
+  /**
+  * Tick interval in milliseconds. Lower values yield smoother animation
+  * at the cost of CPU.
+  * @default 30
+  */
+  readonly tickInterval?: number;
+};
+type TransitionComponent = ((props: Props) => ReactElement | null) & {
+  isAnimatable: true;
+};
+/**
+* Animate a child's entry and exit using a TUI-friendly preset. Drive via
+* `show`; the component toggles between enter and exit, fires `onExit` once
+* the exit animation completes.
+*
+* **Fade preset note:** `dimColor` is only applied when the child is a plain
+* string. Non-string children (Box trees, other components) pass through
+* untouched during the transition — wrap them in `<Text>` if you need the
+* fade effect.
+* @returns A `ReactElement` rendering the transitioning child, or `null`
+* once a hidden transition has fully completed.
+*/
+declare function Transition({
+  children,
+  distance,
+  duration,
+  onExit,
+  preset,
+  show,
+  tickInterval
+}: Props): ReactElement | null;
+/**
+* Static marker used by `AnimatePresence` to recognize Transition children
+* even when the consumer hasn't explicitly passed a `show` prop. Consumers
+* can apply the same marker to their own wrappers (`MyWrapper.isAnimatable
+* = true`) to opt them into animation orchestration.
+*/
+declare const TransitionWithMarker: TransitionComponent;
+export { Props, Transition, TransitionPhase, TransitionPreset, type Props as TransitionProps, TransitionWithMarker as default };

package/dist/transition.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import c from"@visulima/tui/components/box";import y from"@visulima/tui/components/text";import{useState as w,useRef as a,useEffect as D}from"react";const A=(t,r)=>t>=1?e(c,{children:r}):t<=0?e(c,{}):e(c,{children:typeof r=="string"?e(y,{dimColor:t<.7,children:r}):r}),B=(t,r)=>Math.max(0,Math.min(r,Math.round((1-t)*r))),f=(t,r)=>(i,u,h)=>{const n=B(i,h);return i>=1?e(c,{children:u}):i<=0?e(c,{}):t==="x"?e(c,{paddingLeft:r===1?n:0,paddingRight:r===-1?n:0,children:u}):e(c,{flexDirection:"column",paddingBottom:r===-1?n:0,paddingTop:r===1?n:0,children:u})},C=(t,r,i)=>{if(t>=1)return e(c,{children:r});if(t<=0)return e(c,{});const u=Math.max(0,Math.min(i,Math.round(t*i)));return e(c,{flexDirection:"column",height:u,overflowY:"hidden",children:r})},O={fade:A,reveal:C,"slide-down":f("y",-1),"slide-left":f("x",-1),"slide-right":f("x",1),"slide-up":f("y",1)},T=(t,r)=>t?r>=1?"entered":"entering":r<=0?"exited":"exiting";function K({children:t,distance:r=4,duration:i=240,onExit:u,preset:h="fade",show:n=!0,tickInterval:g=30}){const[m,I]=w(n?1:0),p=a(n?1:0),M=a(Date.now()),l=a(n?1:0),d=a(!n),x=a(u);x.current=u;const[E,R]=w(0);if(D(()=>{const o=n?1:0;p.current!==o&&(p.current=o,M.current=Date.now(),l.current=m,d.current=!1,R(s=>s+1))},[n]),D(()=>{const o=p.current;if(l.current===o){o===0&&!d.current&&(d.current=!0,x.current?.());return}const s=setInterval(()=>{const j=Date.now()-M.current,v=i<=0?1:Math.min(1,j/i),k=l.current+(o-l.current)*v;I(k),v>=1&&(clearInterval(s),o===0&&!d.current&&(d.current=!0,x.current?.()))},g);return()=>{clearInterval(s)}},[E,i,g]),T(n,m)==="exited"&&!n)return null;const b=O[h];return b(m,t,r)}const Y=Object.assign(K,{isAnimatable:!0});export{K as Transition,Y as default};

package/dist/tree-select.d.ts

@@ -0,0 +1,65 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type TreeSelectNode = {
+  readonly children?: ReadonlyArray<TreeSelectNode>;
+  readonly label: string;
+  readonly value: string;
+};
+type Props = {
+  /**
+  * Accent color for the focused row and selection marks.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Selected values when uncontrolled.
+  */
+  readonly defaultValue?: ReadonlyArray<string>;
+  /**
+  * Disable input and dim the tree.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * The tree to render.
+  */
+  readonly nodes: ReadonlyArray<TreeSelectNode>;
+  /**
+  * Fires whenever the selection changes.
+  */
+  readonly onChange?: (values: ReadonlyArray<string>) => void;
+  /**
+  * Fires on Enter with the current selection.
+  */
+  readonly onSubmit?: (values: ReadonlyArray<string>) => void;
+  /**
+  * `single` replaces the selection; `multiple` toggles values.
+  * @default "single"
+  */
+  readonly selectionMode?: "multiple" | "single";
+  /**
+  * Controlled selection. When provided, `defaultValue` is ignored.
+  */
+  readonly value?: ReadonlyArray<string>;
+};
+/**
+* A keyboard-navigable tree with selectable leaves. ↑/↓ move the cursor, →/←
+* expand/collapse a branch (or Space on a branch), Space selects a leaf, and
+* Enter submits. Supports single or multiple selection.
+*/
+declare function TreeSelect({
+  accentColor,
+  autoFocus,
+  defaultValue,
+  isDisabled,
+  nodes,
+  onChange,
+  onSubmit,
+  selectionMode,
+  value: controlledValue
+}: Props): ReactElement;
+export { Props, TreeSelect, TreeSelectNode, type Props as TreeSelectProps, TreeSelect as default };

package/dist/tree-select.js

@@ -0,0 +1 @@
+import{jsx as p,jsxs as k}from"react/jsx-runtime";import B from"@visulima/tui/components/box";import w from"@visulima/tui/components/text";import V from"@visulima/tui/hooks/use-focus";import Y from"@visulima/tui/hooks/use-input";import{useState as C,useMemo as R,useRef as _,useCallback as g}from"react";const q=[];function T(i,t){return t===0?0:(i%t+t)%t}function z(i,t,s){return i?t?"▾":"▸":s?"◉":"◯"}const E=(i,t,s,u)=>{for(const l of i){const a=l.children!==void 0&&l.children.length>0;u.push({depth:s,hasChildren:a,node:l}),a&&t.has(l.value)&&E(l.children,t,s+1,u)}};function X({accentColor:i="blue",autoFocus:t=!1,defaultValue:s=q,isDisabled:u=!1,nodes:l,onChange:a,onSubmit:S,selectionMode:A="single",value:f}){const{isFocused:b}=V({autoFocus:t,isActive:!u}),x=f!==void 0,[D,H]=C(s),c=R(()=>new Set(f??D),[f,D]),[m,I]=C(()=>new Set),[v,F]=C(0),M=_(a);M.current=a;const d=R(()=>{const e=[];return E(l,m,0,e),e},[m,l]),j=g(e=>{const o=[...e];x||H(o),M.current?.(o)},[x]),h=g((e,o)=>{I(r=>{const n=new Set(r);return o??!n.has(e)?n.add(e):n.delete(e),n})},[]),J=g((e,o)=>{const r=d[v];if(o.upArrow){F(n=>T(n-1,d.length));return}if(o.downArrow){F(n=>T(n+1,d.length));return}if(r!==void 0){if(o.rightArrow&&r.hasChildren){h(r.node.value,!0);return}if(o.leftArrow&&r.hasChildren){h(r.node.value,!1);return}if(e===" "){if(r.hasChildren){h(r.node.value);return}const n=A==="single"?new Set:new Set(c);n.has(r.node.value)?n.delete(r.node.value):n.add(r.node.value),j(n);return}o.return&&S?.([...c])}},[v,j,S,d,c,A,h]);return Y(J,{isActive:b&&!u}),p(B,{flexDirection:"column",children:d.map((e,o)=>{const r=b&&o===v,n=c.has(e.node.value),K="  ".repeat(e.depth),N=z(e.hasChildren,m.has(e.node.value),n),U=!e.hasChildren&&n?i:void 0;return k(B,{children:[p(w,{color:r?i:void 0,children:r?"❯":" "}),p(w,{children:K}),k(w,{color:U,dimColor:u,children:[N," ",e.node.label]})]},o)})})}export{X as TreeSelect,X as default};

package/dist/tree-view-entry.d.ts

@@ -0,0 +1,4 @@
+export { type A as AsyncChildrenFunction, type F as FlatNode, type S as SelectionMode, type T as TreeNode, a as TreeNodeMap, type b as TreeNodeRendererProps, type c as TreeNodeState, d as TreeView, type P as TreeViewProps, type e as TreeViewState, type f as TreeViewTheme, type U as UseTreeViewProps, type g as UseTreeViewStateProps, t as treeViewTheme, u as useTreeView, h as useTreeViewState } from "./packem_shared/use-tree-view.d-dXTKoDPM.js";
+import '@visulima/tui/components/box';
+import '@visulima/tui/components/text';
+import 'react';

package/dist/tree-view-entry.js

@@ -0,0 +1 @@
+import{theme as o}from"./packem_shared/treeViewTheme-Dq3ekRAC.js";import{TreeNodeMap as m}from"./packem_shared/TreeNodeMap-cJlYqckB.js";import{TreeView as f}from"./packem_shared/TreeView-q0l446NV.js";import{useTreeView as T}from"./packem_shared/useTreeView-D0JEqT6W.js";import{useTreeViewState as w}from"./packem_shared/useTreeViewState-BiTJakkh.js";export{m as TreeNodeMap,f as TreeView,o as treeViewTheme,T as useTreeView,w as useTreeViewState};