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

package/dist/components/search-input.d.ts

@@ -0,0 +1,55 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color of the accent elements (border, icon).
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Initial value.
+  */
+  readonly defaultValue?: string;
+  /**
+  * Node rendered before the input as a search affordance.
+  * @default "⌕" (telephone recorder)
+  */
+  readonly icon?: ReactNode;
+  /**
+  * Disable the input.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Fired whenever the value changes.
+  */
+  readonly onChange?: (value: string) => void;
+  /**
+  * Fired when the user presses Enter.
+  */
+  readonly onSubmit?: (value: string) => void;
+  /**
+  * Placeholder text shown when the input is empty.
+  * @default "Search..."
+  */
+  readonly placeholder?: string;
+  /**
+  * Autocomplete suggestions.
+  */
+  readonly suggestions?: ReadonlyArray<string>;
+};
+/**
+* Search-styled text input with an icon and bordered container.
+* @returns A `ReactElement` wrapping `TextInput` with an icon column.
+*/
+declare function SearchInput({
+  accentColor,
+  defaultValue,
+  icon,
+  isDisabled,
+  onChange,
+  onSubmit,
+  placeholder,
+  suggestions
+}: Props): ReactElement;
+export { Props, SearchInput, type Props as SearchInputProps, SearchInput as default };

package/dist/components/search-input.js

@@ -0,0 +1 @@
+var d=Object.defineProperty;var o=(e,r)=>d(e,"name",{value:r,configurable:!0});import{jsxs as p,jsx as a}from"react/jsx-runtime";import{Box as n}from"./box.js";import{Text as f}from"./text.js";import{TextInput as m}from"./text-input.js";var h=Object.defineProperty,b=o((e,r)=>h(e,"name",{value:r,configurable:!0}),"t");function g({accentColor:e="blue",defaultValue:r="",icon:t="⌕",isDisabled:l=!1,onChange:i,onSubmit:s,placeholder:u="Search...",suggestions:c}){return p(n,{borderColor:e,borderStyle:"round",gap:1,paddingX:1,children:[a(f,{color:e,children:t}),a(n,{flexGrow:1,children:a(m,{defaultValue:r,isDisabled:l,onChange:i,onSubmit:s,placeholder:u,suggestions:c})})]})}o(g,"a");b(g,"SearchInput");export{g as SearchInput,g as default};

package/dist/components/select-input-indicator.d.ts

@@ -0,0 +1,32 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color of the indicator when selected.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Whether the parent SelectInput has focus.
+  * When `false`, the indicator is dimmed even if the item is selected.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Whether this indicator's item is currently selected.
+  * @default false
+  */
+  readonly isSelected?: boolean;
+};
+/**
+* Renders a pointer indicator next to the selected item, or a blank space otherwise.
+* When unfocused, the indicator is rendered with `dimColor` to visually distinguish
+* the active select input from inactive ones.
+*/
+declare function SelectInputIndicator({
+  accentColor,
+  isFocused,
+  isSelected
+}: Props): ReactElement;
+export { Props, SelectInputIndicator, type Props as SelectInputIndicatorProps, SelectInputIndicator as default };

package/dist/components/select-input-indicator.js

@@ -0,0 +1 @@
+var n=Object.defineProperty;var t=(e,r)=>n(e,"name",{value:r,configurable:!0});import{jsx as o}from"react/jsx-runtime";import{Box as a}from"./box.js";import{Text as c}from"./text.js";var l=Object.defineProperty,u=t((e,r)=>l(e,"name",{value:r,configurable:!0}),"r");function d({accentColor:e="blue",isFocused:r=!0,isSelected:i=!1}){return o(a,{marginRight:1,children:i?o(c,{color:e,dimColor:!r,children:"❯"}):o(c,{children:" "})})}t(d,"l");u(d,"SelectInputIndicator");export{d as SelectInputIndicator,d as default};

package/dist/components/select-input-item.d.ts

@@ -0,0 +1,41 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color of the label when selected.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Color of the label when not selected.
+  */
+  readonly defaultColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Whether the parent SelectInput has focus.
+  * When `false`, the selected item is dimmed.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Whether this item is currently selected.
+  * @default false
+  */
+  readonly isSelected?: boolean;
+  /**
+  * Text label to display for this item.
+  */
+  readonly label: string;
+};
+/**
+* Renders an item label, using `accentColor` when selected and `defaultColor` otherwise.
+* When unfocused, selected items are rendered with `dimColor`.
+*/
+declare function SelectInputItem({
+  accentColor,
+  defaultColor,
+  isFocused,
+  isSelected,
+  label
+}: Props): ReactElement;
+export { Props, SelectInputItem, type Props as SelectInputItemProps, SelectInputItem as default };

package/dist/components/select-input-item.js

@@ -0,0 +1 @@
+var c=Object.defineProperty;var t=(e,r)=>c(e,"name",{value:r,configurable:!0});import{jsx as u}from"react/jsx-runtime";import{Text as n}from"./text.js";var i=Object.defineProperty,f=t((e,r)=>i(e,"name",{value:r,configurable:!0}),"r");function m({accentColor:e="blue",defaultColor:r,isFocused:o=!0,isSelected:l=!1,label:a}){return u(n,{color:l?e:r,dimColor:l&&!o,children:a})}t(m,"l");f(m,"SelectInputItem");export{m as SelectInputItem,m as default};

package/dist/components/select-input.d.ts

@@ -0,0 +1,110 @@
+import { AnsiColors } from '@visulima/colorize';
+import { FC, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+import { Props as Props$1 } from "./select-input-indicator.js";
+import { Props as Props$2 } from "./select-input-item.js";
+type Item<V> = {
+  /**
+  * Called automatically when this item is selected (via Enter or number key).
+  * Fires after `onSelect`. Useful for defining per-item behavior inline.
+  */
+  readonly action?: () => void;
+  readonly key?: string;
+  readonly label: string;
+  readonly value: V;
+};
+type SeparatorItem = {
+  /**
+  * Marks this entry as a non-focusable separator line.
+  */
+  readonly isSeparator: true;
+  readonly key?: string;
+  /**
+  * Custom separator text. Defaults to `"───"`.
+  */
+  readonly label?: string;
+};
+type SelectInputEntry<V> = Item<V> | SeparatorItem;
+type Props<V> = {
+  /**
+  * Color used for the selected item and indicator.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Color used for unselected items.
+  */
+  readonly defaultColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Controlled selected index. When provided, the component becomes controlled
+  * and `initialIndex` is ignored. Update this value in the `onHighlight` callback
+  * to track selection externally. If the index points to a separator, the nearest
+  * selectable item is highlighted instead.
+  */
+  readonly index?: number;
+  /**
+  * Custom component to override the default indicator component.
+  */
+  readonly indicatorComponent?: FC<Props$1>;
+  /**
+  * Index of initially-selected item in `items` array.
+  * Ignored when `index` is provided.
+  * When omitted (`undefined`), no item is highlighted until the user presses a key.
+  * If the index points to a separator, the nearest selectable item is used.
+  */
+  readonly initialIndex?: number;
+  /**
+  * Whether the input is focused. Useful for when there are multiple
+  * inputs on the screen and you need to control which one captures input.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Custom component to override the default item component.
+  */
+  readonly itemComponent?: FC<Props$2>;
+  /** @default [] */
+  readonly items?: ReadonlyArray<SelectInputEntry<V>>;
+  /**
+  * Number of visible items. Useful if the list is long and you want
+  * to limit the display with a scrolling window.
+  */
+  readonly limit?: number;
+  /**
+  * Called when the user highlights a new item via arrow keys or `j`/`k`.
+  * The second argument is the index of the highlighted item in the visible list.
+  */
+  readonly onHighlight?: (item: Item<V>, index: number) => void;
+  /**
+  * Called when the user selects an item via Enter or a number key (1-9).
+  */
+  readonly onSelect?: (item: Item<V>) => void;
+  /**
+  * Whether to reset the selection when items change.
+  * Set to `false` to preserve the current selection across item updates.
+  * @default true
+  */
+  readonly resetOnItemsChange?: boolean;
+};
+/**
+* A select input component for terminal UIs.
+*
+* Renders a list of items with an indicator showing the currently highlighted item.
+* Users can navigate with arrow keys or `j`/`k`, select with Enter, or jump to an
+* item by pressing a number key (1-9).
+*/
+declare function SelectInput<V>({
+  accentColor,
+  defaultColor,
+  index,
+  indicatorComponent,
+  initialIndex,
+  isFocused,
+  itemComponent,
+  items,
+  limit: customLimit,
+  onHighlight,
+  onSelect,
+  resetOnItemsChange
+}: Props<V>): ReactElement;
+export { Item, Props, SelectInput, SelectInputEntry, type Item as SelectInputItemType, type Props as SelectInputProps, type SeparatorItem as SelectInputSeparator, SeparatorItem, SelectInput as default };

package/dist/components/select-input.js

@@ -0,0 +1 @@
+var ne=Object.defineProperty;var F=(t,e)=>ne(t,"name",{value:e,configurable:!0});import{createRequire as re}from"node:module";import{jsx as T,jsxs as se}from"react/jsx-runtime";import{useReducer as ae,useRef as j,useMemo as le,useEffect as Y,useCallback as k,createElement as Z}from"react";import de from"../ink/hooks/use-input.js";import ue from"../ink/hooks/use-window-size.js";import{Box as A}from"./box.js";import{SelectInputIndicator as fe}from"./select-input-indicator.js";import{SelectInputItem as pe}from"./select-input-item.js";import{Text as me}from"./text.js";const oe=re(import.meta.url),R=typeof globalThis<"u"&&typeof globalThis.process<"u"?globalThis.process:process,ce=F(t=>{if(typeof R<"u"&&R.versions&&R.versions.node){const[e,o]=R.versions.node.split(".").map(Number);if(e>22||e===22&&o>=3||e===20&&o>=16)return R.getBuiltinModule(t)}return oe(t)},"__cjs_getBuiltinModule"),{isDeepStrictEqual:ie}=ce("node:util");var Ie=Object.defineProperty,S=F((t,e)=>Ie(t,"name",{value:e,configurable:!0}),"S");const y=S(t=>"isSeparator"in t&&t.isSeparator,"isSeparator"),xe=[],ge=/^[1-9]$/,l=-1,ye="───",he=Symbol("separator"),be=S((t,e)=>{switch(e.type){case"navigate":return{rotateIndex:e.rotateIndex,selectedIndex:e.selectedIndex};case"reset":return{rotateIndex:0,selectedIndex:e.hasInitialSelection?e.initialIndex:l};case"set":return{rotateIndex:e.selectedIndex,selectedIndex:e.selectedIndex};default:return t}},"selectionReducer"),Se=S((t,e)=>{const{length:o}=t;if(o===0)return[];const u=(e%o+o)%o;return[...t.slice(u),...t.slice(0,u)]},"rotateArray"),b=S((t,e,o,u)=>e?Se(t,o).slice(0,u):t,"getVisibleItems"),$=S((t,e,o)=>{const{length:u}=t;for(let v=0;v<u;v+=1){const _=((e+(v+1)*o)%u+u)%u;if(!y(t[_]))return _}return l},"findNextSelectableIndex"),G=S((t,e)=>{if(e<0||e>=t.length)return l;const o=t[e];return o&&!y(o)?e:$(t,e-1,1)},"resolveSelectableIndex");function ve({accentColor:t="blue",defaultColor:e,index:o,indicatorComponent:u=fe,initialIndex:v,isFocused:_=!0,itemComponent:X=pe,items:r=xe,limit:D,onHighlight:f,onSelect:O,resetOnItemsChange:P=!0}){const{rows:U}=ue(),V=typeof D=="number"?D:U,c=r.length>V,d=c?Math.min(V,r.length):r.length,w=d-1,B=typeof o=="number"||typeof v=="number",H=typeof o=="number"?o:v??l,M=H===l?l:G(r,Math.min(H,w)),[q,C]=ae(be,{rotateIndex:M>w?w-M:0,selectedIndex:M}),z=j(B),J=j(M),K=j(q);K.current=q;const N=j(O);N.current=O;const ee=j(r),E=le(()=>r.map(n=>y(n)?he:n.value),[r]),L=j(E);z.current=B,J.current=M,Y(()=>{P&&!ie(L.current,E)&&C({hasInitialSelection:z.current,initialIndex:J.current,type:"reset"}),L.current=E,ee.current=r},[r,E,P]),Y(()=>{if(typeof o=="number"){const n=G(r,Math.min(o,w));C({selectedIndex:n===l?0:n,type:"set"})}},[o,r,w]);const Q=k((n,s)=>{const i=b(r,c,n,d);if(s===l){const x=$(i,0,-1);if(x===l)return;C({rotateIndex:n,selectedIndex:x,type:"navigate"}),typeof f=="function"&&f(i[x],x);return}const g=(c?d:r.length)-1,a=s===0,p=a?g:s-1,m=a&&c?n+1:n,h=b(r,c,m,d),I=y(h[p])?$(h,p,-1):p;I!==l&&(C({rotateIndex:m,selectedIndex:I,type:"navigate"}),typeof f=="function"&&f(h[I],I))},[c,d,r,f]),W=k((n,s)=>{const i=b(r,c,n,d);if(s===l){const x=$(i,i.length-1,1);if(x===l)return;C({rotateIndex:n,selectedIndex:x,type:"navigate"}),typeof f=="function"&&f(i[x],x);return}const g=(c?d:r.length)-1,a=s===g,p=a?0:s+1,m=a&&c?n-1:n,h=b(r,c,m,d),I=y(h[p])?$(h,p,1):p;I!==l&&(C({rotateIndex:m,selectedIndex:I,type:"navigate"}),typeof f=="function"&&f(h[I],I))},[c,d,r,f]);de(k((n,s)=>{const{rotateIndex:i,selectedIndex:g}=K.current;if((n==="k"||s.upArrow)&&Q(i,g),(n==="j"||s.downArrow)&&W(i,g),ge.test(n)){const a=Number.parseInt(n,10)-1,p=b(r,c,i,d);if(a>=0&&a<p.length){const m=p[a];m&&!y(m)&&(N.current?.(m),m.action?.())}}if(s.return&&g!==l){const a=b(r,c,i,d)[g];a&&!y(a)&&(N.current?.(a),a.action?.())}},[Q,W,c,d,r]),{isActive:_});const te=b(r,c,q.rotateIndex,d);return T(A,{flexDirection:"column",children:te.map((n,s)=>{if(y(n))return T(A,{children:T(me,{dimColor:!0,children:n.label??ye})},n.key??`separator-${String(s)}`);const i=s===q.selectedIndex;return se(A,{children:[Z(u,{accentColor:t,isFocused:_,isSelected:i}),Z(X,{...n,accentColor:t,defaultColor:e,isFocused:_,isSelected:i})]},n.key??String(n.value))})})}F(ve,"Q");S(ve,"SelectInput");export{ve as SelectInput,ve as default};

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

@@ -0,0 +1,47 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Width of the highlighted band in characters.
+  * @default 3
+  */
+  readonly bandWidth?: number;
+  /**
+  * Base color of the non-highlighted text.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Highlight color of the sweeping band.
+  * @default "white"
+  */
+  readonly highlightColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Milliseconds between frames of the shimmer.
+  * @default 60
+  */
+  readonly interval?: number;
+  /**
+  * Text to render with a shimmer sweep.
+  */
+  readonly text: string;
+};
+/**
+* Text with an animated highlight band that sweeps across the characters.
+* Perfect for "generating…" states.
+* @param props Component props.
+* @param props.bandWidth Number of characters in the bright band.
+* @param props.color Color applied to characters outside the band.
+* @param props.highlightColor Color applied to characters inside the band.
+* @param props.interval Milliseconds between frames.
+* @param props.text Content to shimmer.
+* @returns A single `Text` element composed of per-character `Text` children.
+*/
+declare function ShimmerText({
+  bandWidth,
+  color,
+  highlightColor,
+  interval,
+  text
+}: Props): ReactElement;
+export { Props, ShimmerText, type Props as ShimmerTextProps, ShimmerText as default };

package/dist/components/shimmer-text.js

@@ -0,0 +1 @@
+var g=Object.defineProperty;var h=(e,r)=>g(e,"name",{value:r,configurable:!0});import{jsx as i}from"react/jsx-runtime";import{useMemo as f}from"react";import T from"../ink/hooks/use-animation.js";import{Text as n}from"./text.js";var S=Object.defineProperty,j=h((e,r)=>S(e,"name",{value:r,configurable:!0}),"c");function C({bandWidth:e=3,color:r,highlightColor:u="white",interval:p=60,text:l}){const{frame:s}=T({interval:p}),t=f(()=>[...l],[l]),c=t.length,x=c+e,b=c===0?0:s%x,v=f(()=>t.map((o,a)=>i(n,{color:r,dimColor:r===void 0,children:o},a)),[t,r]);if(c===0)return i(n,{color:r,children:l});const m=[];for(const[o,a]of t.entries()){const d=b-o;if(!(d>=0&&d<e)){m.push(v[o]);continue}m.push(i(n,{bold:!0,color:u,children:a},`band-${o}`))}return i(n,{children:m})}h(C,"d");j(C,"ShimmerText");export{C as ShimmerText,C as default};

package/dist/components/slider.d.ts

@@ -0,0 +1,103 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color for the filled portion of the track and thumb.
+  * @default "green"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Color for the empty portion of the track.
+  * @default "gray"
+  */
+  readonly defaultColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Initial value when uncontrolled.
+  * @default 0
+  */
+  readonly defaultValue?: number;
+  /**
+  * Character used for the empty portion of the track.
+  * @default "░"
+  */
+  readonly emptyCharacter?: string;
+  /**
+  * Character used for the filled portion of the track.
+  * @default "█"
+  */
+  readonly filledCharacter?: string;
+  /**
+  * When true, all input is ignored and the slider is dimmed.
+  * @default false
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * When true, the component responds to keyboard input.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Maximum value.
+  * @default 100
+  */
+  readonly max?: number;
+  /**
+  * Minimum value.
+  * @default 0
+  */
+  readonly min?: number;
+  /**
+  * Fires whenever the value changes.
+  */
+  readonly onChange?: (value: number) => void;
+  /**
+  * Layout direction of the slider.
+  * @default "horizontal"
+  */
+  readonly orientation?: "horizontal" | "vertical";
+  /**
+  * Increment size for arrow key presses.
+  * @default 1
+  */
+  readonly step?: number;
+  /**
+  * Character used to indicate the current position.
+  * @default "●"
+  */
+  readonly thumbCharacter?: string;
+  /**
+  * Controlled value. When provided, `defaultValue` is ignored.
+  */
+  readonly value?: number;
+  /**
+  * Width of the slider track in columns (horizontal) or rows (vertical).
+  * @default 20
+  */
+  readonly width?: number;
+};
+/**
+* A keyboard-driven slider / range input.
+*
+* ```tsx
+* &lt;Slider defaultValue={50} min={0} max={100} onChange={setValue} />
+* ```
+*/
+declare function Slider({
+  accentColor,
+  defaultColor,
+  defaultValue,
+  emptyCharacter,
+  filledCharacter,
+  isDisabled,
+  isFocused,
+  max,
+  min,
+  onChange,
+  orientation,
+  step,
+  thumbCharacter,
+  value: controlledValue,
+  width
+}: Props): ReactElement;
+export { Props, Slider, type Props as SliderProps, Slider as default };

package/dist/components/slider.js

@@ -0,0 +1 @@
+var H=Object.defineProperty;var M=(t,i)=>H(t,"name",{value:i,configurable:!0});import{jsx as s,jsxs as L}from"react/jsx-runtime";import{useState as R,useRef as q,useCallback as E}from"react";import T from"../ink/hooks/use-input.js";import{Box as y}from"./box.js";import{Text as C}from"./text.js";var U=Object.defineProperty,G=M((t,i)=>U(t,"name",{value:i,configurable:!0}),"v");const j=G((t,i,v)=>Math.min(v,Math.max(i,t)),"clamp");function Z({accentColor:t="green",defaultColor:i="gray",defaultValue:v=0,emptyCharacter:D="░",filledCharacter:$="█",isDisabled:o=!1,isFocused:I=!0,max:z=100,min:O=0,onChange:P,orientation:d="horizontal",step:h=1,thumbCharacter:S="●",value:V,width:J=20}){const n=Math.min(O,z),c=Math.max(O,z),x=V!==void 0,[K,N]=R(j(v,n,c)),b=x?j(V,n,c):K,k=q(P);k.current=P;const m=q(b);m.current=b;const a=E(e=>{const r=j(e,n,c);x||N(r),k.current?.(r)},[n,c,x]),g=h*10,f=c-n,Q=E((e,r)=>{const A=d==="horizontal"?r.rightArrow:r.upArrow,p=d==="horizontal"?r.leftArrow:r.downArrow;if(A){a(m.current+h);return}if(p){a(m.current-h);return}if(r.pageUp){a(m.current+g);return}if(r.pageDown){a(m.current-g);return}if(r.home){a(n);return}if(r.end){a(c);return}if(e>="0"&&e<="9"){const F=Number.parseInt(e,10)/10;a(n+f*F)}},[h,g,n,c,f,d,a]);T(Q,{isActive:I&&!o});const w=Math.max(1,J),W=f===0?0:(b-n)/f,l=Math.round(W*(w-1));if(d==="vertical"){const e=[];for(let r=w-1;r>=0;r--){const A=r===l,p=r<=l;e.push(s(y,{children:s(C,{color:o?void 0:p?t:i,dimColor:o,children:A?S:p?$:D})},r))}return s(y,{flexDirection:"column",children:e})}let u="";for(let e=0;e<w;e++)e===l?u+=S:e<l?u+=$:u+=D;const X=u.slice(0,l),Y=u[l]??"",B=u.slice(l+1);return L(y,{children:[s(C,{color:o?void 0:t,dimColor:o,children:X}),s(C,{bold:!0,color:o?void 0:t,dimColor:o,children:Y}),s(C,{color:o?void 0:i,dimColor:o,children:B})]})}M(Z,"V");G(Z,"Slider");export{Z as Slider,Z as default};

package/dist/components/spacer.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+/**
+* A flexible space that expands along the major axis of its containing layout.
+*
+* It's useful as a shortcut for filling all the available space between elements.
+*/
+declare function Spacer(): ReactElement;
+export { Spacer, Spacer as default };

package/dist/components/spacer.js

@@ -0,0 +1 @@
+var o=Object.defineProperty;var a=(r,e)=>o(r,"name",{value:e,configurable:!0});import{jsx as t}from"react/jsx-runtime";import{Box as f}from"./box.js";var n=Object.defineProperty,p=a((r,e)=>n(r,"name",{value:e,configurable:!0}),"e");function u(){return t(f,{flexGrow:1})}a(u,"t");p(u,"Spacer");export{u as Spacer,u as default};

package/dist/components/sparkline.d.ts

@@ -0,0 +1,35 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color applied to the chart glyphs.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Data points to plot. Values may be any real numbers.
+  */
+  readonly data: ReadonlyArray<number>;
+  /**
+  * Optional fixed maximum for the vertical scale.
+  * When omitted the maximum data value is used.
+  */
+  readonly max?: number;
+  /**
+  * Optional fixed minimum for the vertical scale.
+  * When omitted the minimum data value is used.
+  */
+  readonly min?: number;
+};
+/**
+* Inline bar chart using Unicode block glyphs.
+* @returns A `ReactElement` containing the glyph string, or `null` when
+* `data` is empty.
+*/
+declare function Sparkline({
+  color,
+  data,
+  max,
+  min
+}: Props): ReactElement | null;
+export { Props, Sparkline, type Props as SparklineProps, Sparkline as default };

package/dist/components/sparkline.js

@@ -0,0 +1 @@
+var s=Object.defineProperty;var m=(t,r)=>s(t,"name",{value:r,configurable:!0});import{jsx as p}from"react/jsx-runtime";import{useMemo as d}from"react";import{Text as h}from"./text.js";var I=Object.defineProperty,l=m((t,r)=>I(t,"name",{value:r,configurable:!0}),"i");const i="▁▂▃▄▅▆▇█",v=l((t,r,o)=>{if(o===0)return i[0];const e=(t-r)/o,n=Math.max(0,Math.min(i.length-1,Math.floor(e*i.length)));return i[n]},"resolveGlyph"),x=l((t,r,o)=>{let e=r??Number.POSITIVE_INFINITY,n=o??Number.NEGATIVE_INFINITY;if(r===void 0||o===void 0)for(const a of t)r===void 0&&a<e&&(e=a),o===void 0&&a>n&&(n=a);return{max:n,min:e}},"computeExtent");function N({color:t,data:r,max:o,min:e}){const n=d(()=>{if(r.length===0)return"";const{max:a,min:u}=x(r,e,o),f=a-u;return r.map(c=>v(c,u,f)).join("")},[r,e,o]);return n.length===0?null:p(h,{color:t,children:n})}m(N,"s");l(N,"Sparkline");export{N as Sparkline,N as default};

package/dist/components/spinner.d.ts

@@ -0,0 +1,17 @@
+import { SpinnerName } from '@visulima/spinner';
+import { ReactElement } from 'react';
+type Props = {
+  /**
+  * Type of a spinner.
+  * Accepts any preset from `@visulima/spinner` (cli-spinners + custom frame sets).
+  * @default "dots"
+  */
+  readonly type?: SpinnerName;
+};
+/**
+* Spinner component that renders an animated loading indicator.
+*/
+declare function Spinner({
+  type
+}: Props): ReactElement;
+export { Props, Spinner, type Props as SpinnerProps, Spinner as default };

package/dist/components/spinner.js

@@ -0,0 +1 @@
+var o=Object.defineProperty;var t=(e,r)=>o(e,"name",{value:r,configurable:!0});import{jsx as a}from"react/jsx-runtime";import{getSpinner as i}from"@visulima/spinner";import m from"../ink/hooks/use-animation.js";import{Text as f}from"./text.js";var p=Object.defineProperty,s=t((e,r)=>p(e,"name",{value:r,configurable:!0}),"t");function l({type:e="dots"}){const r=i(e),{frame:n}=m({interval:r.interval});return a(f,{children:r.frames[n%r.frames.length]})}t(l,"n");s(l,"Spinner");export{l as Spinner,l as default};

package/dist/components/static-render.d.ts

@@ -0,0 +1,55 @@
+import React, { ReactNode, DependencyList } from 'react';
+import { D as DOMElement } from "../packem_shared/dom.d-C1IxuLJ9.js";
+import { S as Styles } from "../packem_shared/styles.d-cMo36xQz.js";
+import 'yoga-layout';
+import "../packem_shared/cursor-helpers.d-BONB9tky.js";
+import '@visulima/colorize';
+import 'cli-boxes';
+import 'type-fest';
+
+/**
+* StaticRender component — pre-renders children once and caches the result.
+*
+* When mounted, StaticRender renders its children into a Region via
+* prepareYogaTree() in the Ink layout phase, then caches the result on the
+* DOM node. On subsequent renders, the cached Region is composited directly
+* via addRegionTree(), skipping the entire subtree traversal.
+*
+* Children are passed as a render function `() => ReactNode`. Once the cache
+* is ready, the component stops calling the function so React does not
+* re-reconcile the subtree on subsequent renders.
+*
+* Re-rendering the cached content is controlled via the `deps` prop (similar
+* to React's hook deps). When `deps` changes, the cache is invalidated and
+* `children()` is invoked again. If `deps` is omitted, the cache is
+* invalidated whenever the `children` function reference changes.
+*
+* Use this for content that renders once and doesn't change (e.g., completed
+* task output, logged messages, static headers).
+*
+* Ported from jacob314/ink (Google LLC, Apache-2.0).
+* @license Apache-2.0
+*/
+
+/**
+* @property children Render function invoked once to produce the cached content.
+* @property deps Dependencies that control when the static content is re-rendered. When any dependency changes (shallow, Object.is comparison), the cache is invalidated and children() is invoked again. If omitted, the cache is invalidated whenever the children function reference changes.
+* @property onRender Callback fired after the static content has been rendered and cached. The node's cachedRender holds the measured width/height — useful for reacting to the cached block's size without setting up a full ResizeObserver.
+* @property style Optional style applied to the static-render container.
+* @property width Optional fixed width for the cached region.
+*/
+type Props = {
+  readonly children: () => ReactNode;
+  readonly deps?: DependencyList;
+  readonly onRender?: (node: DOMElement) => void;
+  readonly style?: Styles;
+  readonly width?: number;
+};
+declare const StaticRender: ({
+  children,
+  deps,
+  onRender,
+  style,
+  width
+}: Props) => React.ReactNode;
+export { Props, StaticRender, type Props as StaticRenderProps, StaticRender as default };

package/dist/components/static-render.js

@@ -0,0 +1 @@
+var p=Object.defineProperty;var R=(e,r)=>p(e,"name",{value:r,configurable:!0});import{jsx as v}from"react/jsx-runtime";import{useRef as u,useLayoutEffect as y,useEffect as b,useMemo as g}from"react";var j=Object.defineProperty,h=R((e,r)=>j(e,"name",{value:r,configurable:!0}),"u");const E=h((e,r)=>{if(e===r)return!0;if(!e||!r||e.length!==r.length)return!1;for(const[c,a]of e.entries())if(!Object.is(a,r[c]))return!1;return!0},"areDepsEqual"),O=h(({children:e,deps:r,onRender:c,style:a,width:s})=>{const n=u(null),i=u(!1),d=u(r),l=u(e),f=u(c);f.current=c;let o=!1;r!==void 0?E(d.current,r)||(o=!0,d.current=r):e!==l.current&&(o=!0,l.current=e),o&&(i.current=!1,n.current&&(n.current.cachedRender=void 0)),y(()=>{const t=n.current;t&&(t.internal_onRendered=()=>{i.current=!0,f.current?.(t)})}),b(()=>()=>{const t=n.current;t&&(t.cachedRender=void 0,t.internal_onRendered=void 0)},[]);const m=g(()=>({...a,width:s}),[a,s]);return v("ink-static-render",{ref:n,style:m,children:i.current?null:e()})},"StaticRender");export{O as StaticRender,O as default};

package/dist/components/static.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode, ReactElement } from 'react';
+import { S as Styles } from "../packem_shared/styles.d-cMo36xQz.js";
+import '@visulima/colorize';
+import 'cli-boxes';
+import 'type-fest';
+import 'yoga-layout';
+type Props<T> = {
+  /**
+  * Function that is called to render every item in the `items` array. The first argument is the item itself, and the second argument is the index of that item in the `items` array. Note that a `key` must be assigned to the root component.
+  */
+  readonly children: (item: T, index: number) => ReactNode;
+  /**
+  * Array of items of any type to render using the function you pass as a component child.
+  */
+  readonly items: T[];
+  /**
+  * Styles to apply to a container of child elements. See &lt;Box> for supported properties.
+  */
+  readonly style?: Styles;
+};
+/**
+* `&lt;Static>` component permanently renders its output above everything else. It's useful for displaying activity like completed tasks or logs—things that don't change after they're rendered (hence the name "Static").
+*
+* It's preferred to use `&lt;Static>` for use cases like these when you can't know or control the number of items that need to be rendered.
+*
+* For example, [Tap](https://github.com/tapjs/node-tap) uses `&lt;Static>` to display a list of completed tests. [Gatsby](https://github.com/gatsbyjs/gatsby) uses it to display a list of generated pages while still displaying a live progress bar.
+*/
+declare function Static<T>(props: Props<T>): ReactElement;
+export { Props, Static, type Props as StaticProps, Static as default };

package/dist/components/static.js

@@ -0,0 +1 @@
+var p=Object.defineProperty;var o=(e,t)=>p(e,"name",{value:t,configurable:!0});import{jsx as y}from"react/jsx-runtime";import{useState as b,useMemo as a,useLayoutEffect as d}from"react";var h=Object.defineProperty,x=o((e,t)=>h(e,"name",{value:t,configurable:!0}),"r");function g(e){const{children:t,items:i,style:r}=e,[n,s]=b(0),c=a(()=>i.slice(n),[i,n]);d(()=>{s(i.length)},[i.length]);const l=c.map((f,m)=>t(f,n+m)),u=a(()=>({flexDirection:"column",position:"absolute",...r}),[r]);return y("ink-box",{internal_static:!0,style:u,children:l})}o(g,"i");x(g,"Static");export{g as Static,g as default};

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

@@ -0,0 +1,37 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Background color spanning the whole row.
+  */
+  readonly backgroundColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Content rendered in the center. Optional.
+  */
+  readonly center?: ReactNode;
+  /**
+  * Default foreground for text rendered inside the row.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Content rendered flush-left.
+  */
+  readonly left?: ReactNode;
+  /**
+  * Content rendered flush-right.
+  */
+  readonly right?: ReactNode;
+};
+/**
+* Full-width status bar with left / center / right slots. Typically pinned to
+* the bottom of the UI.
+*/
+declare function StatusLine({
+  backgroundColor,
+  center,
+  color,
+  left,
+  right
+}: Props): ReactElement;
+export { Props, StatusLine, type Props as StatusLineProps, StatusLine as default };

package/dist/components/status-line.js

@@ -0,0 +1 @@
+var a=Object.defineProperty;var i=(r,e)=>a(r,"name",{value:e,configurable:!0});import{jsxs as s,jsx as n}from"react/jsx-runtime";import{Box as t}from"./box.js";import{Text as u}from"./text.js";var h=Object.defineProperty,d=i((r,e)=>h(r,"name",{value:e,configurable:!0}),"i");const l=d((r,e)=>{if(r!==void 0)return typeof r=="string"||typeof r=="number"?n(u,{color:e,children:r}):r},"renderSlot");function x({backgroundColor:r,center:e,color:o,left:f,right:c}){return s(t,{backgroundColor:r,paddingX:1,width:"100%",children:[n(t,{flexGrow:1,flexShrink:1,minWidth:0,children:l(f,o)}),e===void 0?void 0:n(t,{flexGrow:0,flexShrink:0,justifyContent:"center",children:l(e,o)}),n(t,{flexGrow:1,flexShrink:1,justifyContent:"flex-end",minWidth:0,children:l(c,o)})]})}i(x,"l");d(x,"StatusLine");export{x as StatusLine,x as default};

package/dist/components/status-message.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, ReactElement } from 'react';
+import { V as Variant } from "../packem_shared/variant-config.d-D5NnrrQK.js";
+type StatusMessageVariant = Variant;
+type Props = {
+  /**
+  * Message content.
+  */
+  readonly children: ReactNode;
+  /**
+  * Determines the icon and color of the status message.
+  */
+  readonly variant: StatusMessageVariant;
+};
+/**
+* Renders a status notification with a colored icon and message text.
+*/
+declare function StatusMessage({
+  children,
+  variant
+}: Props): ReactElement;
+export { Props, StatusMessage, type Props as StatusMessageProps, StatusMessageVariant, StatusMessage as default };