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

package/dist/components/diff-view.d.ts

@@ -0,0 +1,85 @@
+import { ReactElement } from 'react';
+type DiffViewMode = "split" | "unified";
+type InlineDiffMode = "chars" | "words";
+type Props = {
+  /**
+  * Number of unchanged context lines around changes.
+  * @default 3
+  */
+  readonly context?: number;
+  /**
+  * Pre-computed unified diff string. If provided, `oldText`/`newText` are ignored.
+  */
+  readonly diff?: string;
+  /**
+  * Enable character-level inline diff highlighting within changed lines.
+  * @default true
+  */
+  readonly inlineDiff?: boolean;
+  /**
+  * Granularity of inline diff highlighting.
+  * - `"chars"` — character-level (best for code)
+  * - `"words"` — word-level (best for prose)
+  * @default "chars"
+  */
+  readonly inlineDiffMode?: InlineDiffMode;
+  /**
+  * Programming language for syntax highlighting within diff lines.
+  * When provided, diff content is highlighted with Shiki.
+  */
+  readonly language?: string;
+  /**
+  * Display mode: unified (interleaved) or split (side-by-side).
+  * @default "unified"
+  */
+  readonly mode?: DiffViewMode;
+  /**
+  * Label for the new version.
+  */
+  readonly newLabel?: string;
+  /**
+  * Modified text ("new" / right side).
+  */
+  readonly newText?: string;
+  /**
+  * Label for the old version.
+  */
+  readonly oldLabel?: string;
+  /**
+  * Original text ("old" / left side).
+  */
+  readonly oldText?: string;
+  /**
+  * Whether to display line numbers.
+  * @default true
+  */
+  readonly showLineNumbers?: boolean;
+  /**
+  * Shiki theme for syntax highlighting.
+  * @default "github-dark-default"
+  */
+  readonly theme?: string;
+};
+/**
+* Display file differences with colored additions/deletions.
+*
+* ```tsx
+* <DiffView oldText="hello" newText="hello world" />
+* <DiffView diff={unifiedDiffString} mode="split" />
+* ```
+*/
+declare function DiffView({
+  context,
+  diff: diffProp,
+  inlineDiff,
+  inlineDiffMode,
+  language,
+  mode,
+  newLabel,
+  newText,
+  oldLabel,
+  oldText,
+  showLineNumbers,
+  theme
+}: Props): ReactElement;
+export { DiffView, DiffViewMode, type Props as DiffViewProps, InlineDiffMode, Props, DiffView as default };

package/dist/components/diff-view.js

@@ -0,0 +1 @@
+var M=Object.defineProperty;var v=(r,i)=>M(r,"name",{value:i,configurable:!0});import{jsx as u,jsxs as g,Fragment as $}from"react/jsx-runtime";import{createPatch as V,parsePatch as W,diffWords as j,diffChars as B}from"diff";import{useMemo as k,useState as U,useRef as q,useEffect as A}from"react";import{r as E,i as F,P as J,g as K,a as O}from"../packem_shared/token-to-elements-BAZpNZsu.js";import R from"../ink/hooks/use-window-size.js";import{Box as p}from"./box.js";import{Text as a}from"./text.js";var X=Object.defineProperty,x=v((r,i)=>X(r,"name",{value:i,configurable:!0}),"y");const L=x((r,i,n,d)=>{if(!i||n===void 0||n<1||n>i.length)return d?u(a,{color:d,children:r}):u(a,{dimColor:!0,children:r});const o=i[n-1];return!o||o.length===0?d?u(a,{color:d,children:r}):u(a,{dimColor:!0,children:r}):O(o)},"renderHighlightedContent"),S=x((r,i,n)=>{const[d,o]=U(null),h=q(!1);return A(()=>{if(h.current=!1,!i){o(null);return}const e=E(i);if(!F(e)){o(null);return}return(async()=>{try{const f=await J([e],n),l=K(f,r,e,n);h.current||o(l.tokens)}catch{h.current||o(null)}})(),()=>{h.current=!0}},[r,i,n]),d},"useHighlightedLines"),z=x((r,i,n="chars")=>{const d=W(r),o=[];for(const h of d)for(const e of h.hunks){const f=`@@ -${e.oldStart},${e.oldLines} +${e.newStart},${e.newLines} @@`,l=[];let s=e.oldStart,c=e.newStart;for(const w of e.lines)w.startsWith("\\")||(w.startsWith("+")?l.push({content:w.slice(1),newLineNum:c++,type:"add"}):w.startsWith("-")?l.push({content:w.slice(1),oldLineNum:s++,type:"del"}):l.push({content:w.slice(1),newLineNum:c++,oldLineNum:s++,type:"context"}));if(i){const w=Q(l);for(const[N,t]of w)if(l[N].type==="del"&&l[t].type==="add"){const m=G(l[N].content,l[t].content,n);l[N].inlineDiff=m??void 0,l[N].pairedIndex=t,l[t].inlineDiff=m??void 0,l[t].pairedIndex=N}}o.push({header:f,lines:l})}return o},"parseDiffLines"),P=500,G=x((r,i,n="chars")=>{if(r.length>P||i.length>P)return null;const d=n==="words"?j(r,i):B(r,i),o=[],h=[];for(const e of d)e.removed?o.push({highlight:!0,value:e.value}):e.added?h.push({highlight:!0,value:e.value}):(o.push({highlight:!1,value:e.value}),h.push({highlight:!1,value:e.value}));return{addParts:h,delParts:o}},"computeInlineDiff"),C=x((r,i,n)=>u($,{children:r.map((d,o)=>d.highlight?u(a,{backgroundColor:n,color:"white",children:d.value},o):u(a,{color:i,children:d.value},o))}),"renderInlineParts"),Q=x(r=>{const i=new Map;let n=0;for(;n<r.length;){const d=n;for(;n<r.length&&r[n].type==="del";)n++;const o=n,h=n;for(;n<r.length&&r[n].type==="add";)n++;const e=n,f=o-d,l=e-h,s=Math.min(f,l);for(let c=0;c<s;c++)i.set(d+c,h+c),i.set(h+c,d+c);n===d&&n++}return i},"findInlinePairs");function H({hunks:r,newHighlighted:i,oldHighlighted:n,showLineNumbers:d}){return u(p,{flexDirection:"column",children:r.map((o,h)=>g(p,{flexDirection:"column",children:[h>0?u(p,{marginBottom:0,marginTop:0,children:u(a,{dimColor:!0,children:"···"})}):void 0,u(a,{color:"cyan",dimColor:!0,children:o.header}),o.lines.map((e,f)=>{let l,s,c;switch(e.type){case"add":{s="+",c="green",l=e.inlineDiff?C(e.inlineDiff.addParts,"green","green"):L(e.content,i,e.newLineNum,"green");break}case"del":{s="-",c="red",l=e.inlineDiff?C(e.inlineDiff.delParts,"red","red"):L(e.content,n,e.oldLineNum,"red");break}default:{s=" ",c=void 0,l=L(e.content,n,e.oldLineNum);break}}return g(p,{children:[d?g(a,{color:c,dimColor:e.type==="context",children:[String(e.oldLineNum??"").padStart(4)," ",String(e.newLineNum??"").padStart(4)," "]}):void 0,u(a,{color:c,children:s}),l]},f)})]},h))})}v(H,"J");x(H,"UnifiedView");function I({hunks:r,newHighlighted:i,oldHighlighted:n,showLineNumbers:d,width:o}){const h=Math.floor(o/2)-1;return u(p,{flexDirection:"column",children:r.map((e,f)=>{const l=f>0?u(p,{marginBottom:0,marginTop:0,children:u(a,{dimColor:!0,children:"···"})}):void 0,s=[],c=[];for(let N=0;N<e.lines.length;N++){const t=e.lines[N];switch(t.type){case"add":{t.pairedIndex===void 0&&(s.push({content:u(a,{dimColor:!0})}),c.push({content:L(t.content,i,t.newLineNum,"green"),lineNum:t.newLineNum}));break}case"context":{s.push({content:L(t.content,n,t.oldLineNum),lineNum:t.oldLineNum}),c.push({content:L(t.content,i,t.newLineNum),lineNum:t.newLineNum});break}case"del":{if(t.pairedIndex===void 0)s.push({content:L(t.content,n,t.oldLineNum,"red"),lineNum:t.oldLineNum}),c.push({content:u(a,{dimColor:!0})});else{const m=e.lines[t.pairedIndex];s.push({content:t.inlineDiff?C(t.inlineDiff.delParts,"red","red"):L(t.content,n,t.oldLineNum,"red"),lineNum:t.oldLineNum}),c.push({content:m.inlineDiff?C(m.inlineDiff.addParts,"green","green"):L(m.content,i,m.newLineNum,"green"),lineNum:m.newLineNum})}break}}}const w=Math.max(s.length,c.length);return g(p,{flexDirection:"column",children:[l,u(a,{color:"cyan",dimColor:!0,children:e.header}),Array.from({length:w},(N,t)=>{const m=s[t],D=c[t];return g(p,{flexDirection:"row",children:[g(p,{width:h,children:[d?g(a,{dimColor:!0,children:[String(m?.lineNum??"").padStart(4)," "]}):void 0,m?.content]}),u(a,{dimColor:!0,children:"│"}),g(p,{width:h,children:[d?g(a,{dimColor:!0,children:[String(D?.lineNum??"").padStart(4)," "]}):void 0,D?.content]})]},t)})]},f)})})}v(I,"K");x(I,"SplitView");function Y({context:r=3,diff:i,inlineDiff:n=!0,inlineDiffMode:d="chars",language:o,mode:h="unified",newLabel:e="new",newText:f="",oldLabel:l="old",oldText:s="",showLineNumbers:c=!0,theme:w="github-dark-default"}){const{columns:N}=R(),t=S(s,o,w),m=S(f,o,w),D=k(()=>i||V("file",s,f,l,e,{context:r}),[i,s,f,l,e,r]),b=k(()=>z(D,n,d),[D,n,d]);if(b.every(T=>T.lines.length===0))return u(p,{children:u(a,{dimColor:!0,children:"No differences found."})});const y=g(p,{flexDirection:"column",children:[g(a,{color:"red",dimColor:!0,children:["---"," ",l]}),g(a,{color:"green",dimColor:!0,children:["+++"," ",e]})]});return h==="split"?g(p,{flexDirection:"column",children:[y,u(I,{hunks:b,newHighlighted:m,oldHighlighted:t,showLineNumbers:c,width:N??80})]}):g(p,{flexDirection:"column",children:[y,u(H,{hunks:b,newHighlighted:m,oldHighlighted:t,showLineNumbers:c})]})}v(Y,"S");x(Y,"DiffView");export{Y as DiffView,Y as default};

package/dist/components/divider.d.ts

@@ -0,0 +1,49 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Custom character to use instead of the default line character.
+  */
+  readonly character?: string;
+  /**
+  * Color of the divider line.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Render the divider with dim color.
+  */
+  readonly dimColor?: boolean;
+  /**
+  * Optional label rendered in the middle of a horizontal divider.
+  */
+  readonly label?: string;
+  /**
+  * Padding around the label.
+  * @default 1
+  */
+  readonly labelPadding?: number;
+  /**
+  * Total length of the divider. When omitted, horizontal dividers stretch to
+  * fill the available space and vertical dividers default to one row.
+  */
+  readonly length?: number;
+  /**
+  * Orientation of the divider.
+  * @default "horizontal"
+  */
+  readonly orientation?: "horizontal" | "vertical";
+};
+/**
+* Horizontal or vertical divider line, optionally with a centered label.
+*/
+declare function Divider({
+  character,
+  color,
+  dimColor,
+  label,
+  labelPadding,
+  length,
+  orientation
+}: Props): ReactElement;
+export { Divider, type Props as DividerProps, Props, Divider as default };

package/dist/components/divider.js

@@ -0,0 +1 @@
+var w=Object.defineProperty;var d=(l,r)=>w(l,"name",{value:r,configurable:!0});import{jsx as o,jsxs as p}from"react/jsx-runtime";import C from"../ink/hooks/use-window-size.js";import{Box as i}from"./box.js";import{Text as n}from"./text.js";var g=Object.defineProperty,b=d((l,r)=>g(l,"name",{value:r,configurable:!0}),"m");function G({character:l,color:r,dimColor:t=!1,label:h,labelPadding:u=1,length:e,orientation:m="horizontal"}){const{columns:s}=C(),a=l??(m==="horizontal"?"─":"│");if(m==="vertical"){const x=e??1;return o(i,{flexDirection:"column",height:x,children:Array.from({length:x},(j,v)=>o(n,{color:r,dimColor:t,children:a},`divider-row-${v}`))})}const c=Math.min(500,e??Math.max(s,1));if(h===void 0)return o(i,{flexGrow:e===void 0?1:0,width:e,children:o(n,{color:r,dimColor:t,wrap:"truncate",children:a.repeat(c)})});const f=" ".repeat(u);return p(i,{flexGrow:e===void 0?1:0,width:e,children:[o(i,{flexGrow:1,flexShrink:1,children:o(n,{color:r,dimColor:t,wrap:"truncate",children:a.repeat(c)})}),o(i,{flexShrink:0,children:p(n,{color:r,dimColor:t,children:[f,h,f]})}),o(i,{flexGrow:1,flexShrink:1,children:o(n,{color:r,dimColor:t,wrap:"truncate",children:a.repeat(c)})})]})}d(G,"u");b(G,"Divider");export{G as Divider,G as default};

package/dist/components/file-picker-entry.d.ts

@@ -0,0 +1,104 @@
+import { ReactElement } from 'react';
+/**
+* A single entry (file or directory) returned by the file system hook.
+*/
+type FileEntry = {
+  readonly isDirectory: boolean;
+  readonly isHidden: boolean;
+  readonly name: string;
+  readonly path: string;
+  readonly permissions: string;
+  readonly size: number;
+};
+/**
+* Filter options for the file picker.
+*/
+type FilePickerFilter = {
+  /**
+  * Allowed file extensions (e.g. `[".ts", ".tsx"]`). Empty or omitted means all.
+  */
+  readonly extensions?: ReadonlyArray<string>;
+  /**
+  * Whether to include directories in the list.
+  * @default true
+  */
+  readonly showDirectories?: boolean;
+  /**
+  * Whether to include regular files in the list.
+  * @default true
+  */
+  readonly showFiles?: boolean;
+  /**
+  * Whether to include hidden files (names starting with `.`).
+  * @default false
+  */
+  readonly showHidden?: boolean;
+};
+type Props = {
+  /**
+  * Color for the focused item highlight.
+  * @default "cyan"
+  */
+  readonly accentColor?: string;
+  /**
+  * Color for directory entries.
+  * @default "blue"
+  */
+  readonly directoryColor?: string;
+  /**
+  * Color for file entries.
+  * @default "white"
+  */
+  readonly fileColor?: string;
+  /**
+  * File filter options.
+  */
+  readonly filter?: FilePickerFilter;
+  /**
+  * Starting directory path.
+  * @default process.cwd()
+  */
+  readonly initialPath?: string;
+  /**
+  * Whether keyboard navigation is active.
+  * @default true
+  */
+  readonly isFocused?: boolean;
+  /**
+  * Maximum number of visible items (viewport height).
+  * @default 10
+  */
+  readonly limit?: number;
+  /**
+  * Called when escape is pressed.
+  */
+  readonly onCancel?: () => void;
+  /**
+  * Called when a file is selected (enter on a file entry).
+  */
+  readonly onSelect?: (entry: FileEntry) => void;
+  /**
+  * Show file permissions column.
+  * @default false
+  */
+  readonly showPermissions?: boolean;
+  /**
+  * Show file size column.
+  * @default false
+  */
+  readonly showSize?: boolean;
+};
+declare const FilePicker: ({
+  accentColor,
+  directoryColor,
+  fileColor,
+  filter,
+  initialPath,
+  isFocused,
+  limit,
+  onCancel,
+  onSelect,
+  showPermissions,
+  showSize
+}: Props) => ReactElement;
+export { type FileEntry, FilePicker, type FilePickerFilter, type Props as FilePickerProps, FilePicker as default };

package/dist/components/file-picker-entry.js

@@ -0,0 +1 @@
+import{default as f,default as l}from"../packem_shared/FilePicker-tYj_CIau.js";export{f as FilePicker,l as default};

package/dist/components/form.d.ts

@@ -0,0 +1,81 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type FormFieldProps = {
+  /**
+  * The input element (TextInput, Checkbox, Select, …).
+  */
+  readonly children: ReactNode;
+  /**
+  * Optional helper text rendered beneath the input.
+  */
+  readonly description?: string;
+  /**
+  * Validation error — dimmed red below the input.
+  */
+  readonly error?: string;
+  /**
+  * When true, the field's label and description are dim.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Label rendered above the input.
+  */
+  readonly label: string;
+  /**
+  * Mark the field as required (adds a trailing `*`).
+  */
+  readonly required?: boolean;
+};
+/**
+* Standard form field wrapper: label + input + helper/error.
+*/
+declare const FormField: ({
+  children,
+  description,
+  error,
+  isDisabled,
+  label,
+  required
+}: FormFieldProps) => ReactElement;
+type Props = {
+  /**
+  * Accent color for the form chrome.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Render a border around the form.
+  * @default true
+  */
+  readonly bordered?: boolean;
+  /**
+  * Fields composed via `&lt;FormField />`.
+  */
+  readonly children: ReactNode;
+  /**
+  * Optional description rendered under the title.
+  */
+  readonly description?: string;
+  /**
+  * Optional footer rendered below the fields (buttons, hints, summary).
+  */
+  readonly footer?: ReactNode;
+  /**
+  * Optional heading rendered at the top.
+  */
+  readonly title?: string;
+  /**
+  * Fixed width.
+  */
+  readonly width?: number;
+};
+type FormComponent = ((props: Props) => ReactElement) & {
+  Field: typeof FormField;
+};
+/**
+* Stateless form layout. Pair with the `useForm` hook for state management
+* and `FormField` for consistent label/error styling.
+*/
+declare const Form: FormComponent;
+export { Form, FormField, FormFieldProps, type Props as FormProps, Props, Form as default };

package/dist/components/form.js

@@ -0,0 +1 @@
+var u=Object.defineProperty;var s=(e,i)=>u(e,"name",{value:i,configurable:!0});import{jsxs as m,jsx as r}from"react/jsx-runtime";import{Box as o}from"./box.js";import{Text as d}from"./text.js";var f=Object.defineProperty,v=s((e,i)=>f(e,"name",{value:i,configurable:!0}),"s");const b=v(({children:e,description:i,error:l,isDisabled:n=!1,label:c,required:t=!1})=>m(o,{flexDirection:"column",marginBottom:1,children:[m(o,{children:[r(d,{bold:!0,dimColor:n,children:c}),t?r(d,{color:"red",children:" *"}):void 0]}),r(o,{marginTop:0,children:e}),l===void 0?i===void 0?void 0:r(d,{dimColor:!0,children:i}):r(d,{color:"red",children:l})]}),"FormField"),F=Object.assign(({accentColor:e="blue",bordered:i=!0,children:l,description:n,footer:c,title:t,width:a})=>{const h=m(o,{flexDirection:"column",children:[t===void 0?void 0:r(o,{marginBottom:1,children:r(d,{bold:!0,color:e,children:t})}),n===void 0?void 0:r(o,{marginBottom:1,children:r(d,{dimColor:!0,children:n})}),r(o,{flexDirection:"column",children:l}),c===void 0?void 0:r(o,{marginTop:1,children:c})]});return i?r(o,{borderColor:e,borderStyle:"round",flexDirection:"column",paddingX:1,paddingY:1,width:a,children:h}):r(o,{flexDirection:"column",width:a,children:h})},{Field:b});export{F as Form,b as FormField,F as default};

package/dist/components/gauge.d.ts

@@ -0,0 +1,87 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type GaugeThreshold = {
+  /**
+  * Color used for the arc segment and, when the current value falls into
+  * this segment, for the value readout.
+  */
+  readonly color: LiteralUnion<AnsiColors, string>;
+  /**
+  * Optional label used by the legend under the gauge.
+  */
+  readonly label?: string;
+  /**
+  * Upper bound of this threshold segment (inclusive). Segments are sorted
+  * ascending and painted in order.
+  */
+  readonly max: number;
+};
+type GaugeSize = "large" | "medium" | "small";
+type Props = {
+  /**
+  * Color of the arc background (the portion beyond `value`).
+  * @default "gray"
+  */
+  readonly backgroundColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Format for the numeric readout. Defaults to rounding to an integer.
+  */
+  readonly formatValue?: (value: number) => string;
+  /**
+  * Optional label rendered above the readout.
+  */
+  readonly label?: string;
+  /**
+  * Upper bound of the range.
+  * @default 100
+  */
+  readonly max?: number;
+  /**
+  * Lower bound of the range.
+  * @default 0
+  */
+  readonly min?: number;
+  /**
+  * Show a legend listing thresholds below the gauge.
+  * @default false
+  */
+  readonly showLegend?: boolean;
+  /**
+  * Show a numeric readout in the middle of the gauge.
+  * @default true
+  */
+  readonly showValue?: boolean;
+  /**
+  * Overall dimension preset.
+  * @default "medium"
+  */
+  readonly size?: GaugeSize;
+  /**
+  * Color threshold ramp. When provided, segments of the arc are painted in
+  * the corresponding colors and the value readout picks up the color for
+  * the segment `value` lands in.
+  */
+  readonly thresholds?: ReadonlyArray<GaugeThreshold>;
+  /**
+  * Current value. Clamped into the `[min, max]` range.
+  */
+  readonly value: number;
+};
+/**
+* Semi-circular gauge rendered at 2x4 sub-cell resolution. Supports colored
+* threshold segments and an optional needle.
+*/
+declare function Gauge({
+  backgroundColor,
+  formatValue,
+  label,
+  max,
+  min,
+  showLegend,
+  showValue,
+  size,
+  thresholds,
+  value
+}: Props): ReactElement;
+export { Gauge, type Props as GaugeProps, GaugeSize, GaugeThreshold, Props, Gauge as default };

package/dist/components/gauge.js

@@ -0,0 +1 @@
+var Z=Object.defineProperty;var x=(o,e)=>Z(o,"name",{value:e,configurable:!0});import{jsxs as j,jsx as h}from"react/jsx-runtime";import{useMemo as A}from"react";import{c as _}from"../packem_shared/braille-BBjIoaN0.js";import{Box as d}from"./box.js";import{Canvas as $}from"./canvas.js";import{Text as w}from"./text.js";var q=Object.defineProperty,v=x((o,e)=>q(o,"name",{value:e,configurable:!0}),"f");const J={large:{cols:40,rows:10},medium:{cols:24,rows:6},small:{cols:16,rows:4}},R=.9,oo=2,ro=v(o=>String(Math.round(o)),"defaultFormat"),G=v((o,e,s,a)=>{const t=e+(s-e)*a;for(const f of o)if(t<=f.max)return f;return o[o.length-1]},"thresholdAtRatio");function to({backgroundColor:o="gray",formatValue:e=ro,label:s,max:a=100,min:t=0,showLegend:f=!1,showValue:P=!0,size:B="medium",thresholds:n,value:D}){const{cols:O,rows:T}=J[B],F=Math.max(t,Math.min(a,D)),E=a-t||1,M=(F-t)/E,m=A(()=>{if(!(n===void 0||n.length===0))return[...n].toSorted((r,c)=>r.max-c.max)},[n]),I=A(()=>{if(m!==void 0)return G(m,t,a,M)},[m,t,a,M]),H=e(F);return j(d,{flexDirection:"column",children:[h($,{draw:x(r=>{r.clear();const c=r.width*2,L=r.height*4,y=c/2,C=L-1,K=c/2-1,N=L-1,g=Math.max(1,Math.min(K,N)),b=new Map,S=v(i=>{const l=b.get(i);if(l!==void 0)return l;const u=_(r.width,r.height);return b.set(i,u),u},"gridFor"),V=Math.max(32,Math.round(Math.PI*g)*oo);for(let i=0;i<=V;i+=1){const l=i/V,u=Math.PI*(1-l),X=Math.round(y+g*Math.cos(u)),Y=Math.round(C-g*Math.sin(u));let p;l>M?p=o:m?p=G(m,t,a,l)?.color??"cyan":p="cyan",S(p).plotPoint(X,Y)}const k=g*R,z=Math.PI*(1-M),Q=Math.round(y+k*Math.cos(z)),U=Math.round(C-k*Math.sin(z)),W=I?.color??"white";S(W).plotLine(Math.round(y),Math.round(C),Q,U);for(const[i,l]of b)l.flush(r,{color:i})},"draw"),height:T,version:[D,t,a,B,n,o],width:O}),P||s?j(d,{flexDirection:"column",children:[s===void 0?void 0:h(d,{justifyContent:"center",children:h(w,{dimColor:!0,children:s})}),P?h(d,{justifyContent:"center",children:h(w,{bold:!0,color:I?.color??"white",children:H})}):void 0]}):void 0,f&&n&&n.length>0?h(d,{gap:2,justifyContent:"center",marginTop:1,children:n.map((r,c)=>j(d,{gap:1,children:[h(w,{color:r.color,children:"●"}),h(w,{dimColor:!0,children:r.label??`≤ ${r.max}`})]},c))}):void 0]})}x(to,"j");v(to,"Gauge");export{to as Gauge,to as default};

package/dist/components/gradient.d.ts

@@ -0,0 +1,42 @@
+import { multilineGradient } from '@visulima/colorize/gradient';
+import { ReactNode, ReactElement } from 'react';
+/**
+* A color stop for the gradient — hex string, CSS color name, RGB tuple, RGB object, or positioned stop.
+*/
+type GradientStop = Parameters<typeof multilineGradient>[0][number];
+/**
+* Built-in gradient presets.
+*/
+type GradientName = "atlas" | "cristal" | "fruit" | "instagram" | "mind" | "morning" | "pastel" | "passion" | "rainbow" | "retro" | "summer" | "teen" | "vice";
+/**
+* Custom gradient colors — an array of color stops accepted by `@visulima/colorize`'s gradient API.
+*/
+type GradientColors = GradientStop[];
+type Props = {
+  /**
+  * The content to colorize.
+  *
+  * Multiple `&lt;Text>` children are treated as separate nodes, which preserves layout when `&lt;Gradient>` is placed inside a `&lt;Box flexDirection="column">`.
+  *
+  * If you want a continuous gradient across multiple lines, pass a single string or a single `&lt;Text>` with `\n`.
+  */
+  readonly children: ReactNode;
+  /**
+  * [Colors to use to make the gradient.](https://visulima.com/packages/colorize)
+  *
+  * Mutually exclusive with `name`.
+  */
+  readonly colors?: GradientColors;
+  /**
+  * The name of a built-in gradient preset.
+  *
+  * Mutually exclusive with `colors`.
+  */
+  readonly name?: GradientName;
+};
+declare function Gradient({
+  children,
+  colors,
+  name
+}: Props): ReactElement | null;
+export { Gradient, type GradientColors, type GradientName, type Props as GradientProps, Props, Gradient as default };

package/dist/components/gradient.js

@@ -0,0 +1 @@
+var D=Object.defineProperty;var y=(o,e)=>D(o,"name",{value:e,configurable:!0});import{jsx as c,Fragment as K}from"react/jsx-runtime";import{strip as N}from"@visulima/ansi";import{multilineGradient as G}from"@visulima/colorize/gradient";import{useMemo as F,Children as x,isValidElement as P,cloneElement as v}from"react";import{Box as B}from"./box.js";import{Text as O}from"./text.js";import{Transform as g}from"./transform.js";var M=Object.defineProperty,n=y((o,e)=>M(o,"name",{value:e,configurable:!0}),"o");const k={atlas:{colors:["#feac5e","#c779d0","#4bc0c8"]},cristal:{colors:["#bdfff3","#4ac29a"]},fruit:{colors:["#ff4e50","#f9d423"]},instagram:{colors:["#833ab4","#fd1d1d","#fcb045"]},mind:{colors:["#473b7b","#3584a7","#30d2be"]},morning:{colors:["#ff5f6d","#ffc371"],options:{interpolation:"hsv"}},passion:{colors:["#f43b47","#453a94"]},pastel:{colors:["#74ebd5","#74ecd5"],options:{hsvSpin:"long",interpolation:"hsv"}},rainbow:{colors:["#ff0000","#ff0100"],options:{hsvSpin:"long",interpolation:"hsv"}},retro:{colors:["#3f51b1","#5a55ae","#7b5fac","#8f6aae","#a86aa4","#cc6b8e","#f18271","#f3a469","#f7c978"]},summer:{colors:["#fdbb2d","#22c1c3"]},teen:{colors:["#77a1d3","#79cbca","#e684ae"]},vice:{colors:["#5ee7df","#b490ca"],options:{interpolation:"hsv"}}},C=n(o=>{let e=!1;const t=n(h=>{x.forEach(h,s=>{if(e||!P(s))return;if(s.type===B){e=!0;return}const f=s.props;Object.hasOwn(f,"children")&&t(f.children)})},"search");return t(o),e},"containsBoxDescendant"),j=n(o=>Object.hasOwn(o,"children"),"hasChildrenProp"),S=n(o=>typeof o=="string"||typeof o=="number","isPlainTextNode"),R=n(o=>o==null||typeof o=="boolean","isNonRenderableChild");function V({children:o,colors:e,name:t}){if(t&&e)throw new Error("The `name` and `colors` props are mutually exclusive");if(!t&&!e)throw new Error("Either `name` or `colors` prop must be provided");const h=F(()=>t?G(k[t].colors,k[t].options):G(e??[]),[t,e]),s=n(b=>h(N(b)),"applyGradient"),f=x.count(o);if(S(o))return c(g,{transform:s,children:o});if(f===1&&!C(o))return c(g,{transform:s,children:o});const m=n(b=>{const a=[];let l="",w=0;const E=n(()=>{const r=`gradient-node-${String(w)}`;return w+=1,r},"createKey"),p=n((r,i)=>{a.push(c(g,{transform:s,children:r},i))},"pushTransformed"),T=n(()=>{if(l==="")return;const r=l;l="",p(c(O,{children:r}),E())},"flushText");return x.forEach(b,r=>{if(!R(r)){if(S(r)){l+=String(r);return}if(T(),P(r)){const i=r.key??E(),d=r.props;if(r.type===O){p(r,i);return}if(r.type===B){if(j(d)){const u=d.children;a.push(v(r,{key:i},m(u)));return}a.push(v(r,{key:i}));return}if(j(d)){const u=d.children;if(!C(u)){p(r,i);return}a.push(v(r,{key:i},m(u)));return}p(r,i);return}a.push(r)}}),T(),a},"applyGradientToChildren");return c(K,{children:m(o)})}y(V,"K");n(V,"Gradient");export{V as Gradient,V as default};

package/dist/components/heading.d.ts

@@ -0,0 +1,33 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type Props = {
+  /**
+  * Heading content.
+  */
+  readonly children: ReactNode;
+  /**
+  * Explicit color. By default the color is derived from the level.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Heading level controls decoration and color.
+  * @default 1
+  */
+  readonly level?: HeadingLevel;
+  /**
+  * When true, renders an underline on a second line.
+  */
+  readonly underline?: boolean;
+};
+/**
+* Semantic heading with level-based styling.
+*/
+declare function Heading({
+  children,
+  color,
+  level,
+  underline
+}: Props): ReactElement;
+export { Heading, HeadingLevel, type Props as HeadingProps, Props, Heading as default };

package/dist/components/heading.js

@@ -0,0 +1 @@
+var l=Object.defineProperty;var o=(e,r)=>l(e,"name",{value:r,configurable:!0});import{jsx as a,jsxs as c}from"react/jsx-runtime";import{Box as s}from"./box.js";import{Text as d}from"./text.js";var u=Object.defineProperty,f=o((e,r)=>u(e,"name",{value:r,configurable:!0}),"t");const g={1:"blueBright",2:"cyanBright",3:"magentaBright",4:"yellowBright",5:"green",6:"white"},m={1:"# ",2:"## ",3:"### ",4:"#### ",5:"##### ",6:"###### "};function h({children:e,color:r,level:n=1,underline:t=!1}){const i=r??g[n];return a(s,{flexDirection:"column",children:c(d,{bold:n<=2,color:i,underline:t,children:[m[n],e]})})}o(h,"n");f(h,"Heading");export{h as Heading,h as default};

package/dist/components/heatmap.d.ts

@@ -0,0 +1,62 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type HeatmapProps = {
+  /**
+  * Width of each cell in character columns.
+  * @default 2
+  */
+  readonly cellWidth?: number;
+  /**
+  * Glyph used to paint each heatmap cell. Defaults to `█` so the
+  * background color fills the cell.
+  * @default "█" (full block)
+  */
+  readonly character?: string;
+  /**
+  * Column labels rendered below the grid.
+  */
+  readonly columnLabels?: ReadonlyArray<string>;
+  /**
+  * 2D matrix, rows × cols.
+  */
+  readonly data: ReadonlyArray<ReadonlyArray<number>>;
+  /**
+  * Fixed maximum (for consistent scales across multiple heatmaps).
+  */
+  readonly max?: number;
+  /**
+  * Fixed minimum.
+  */
+  readonly min?: number;
+  /**
+  * Color palette, lowest-to-highest intensity. Values are mapped into the
+  * palette by their position in the [min, max] range.
+  * @default ["#0b1e4f", "#1f3b96", "#3258c8", "#4e84ec", "#78b0ff"]
+  */
+  readonly palette?: ReadonlyArray<string>;
+  /**
+  * Row labels rendered to the left of the grid.
+  */
+  readonly rowLabels?: ReadonlyArray<string>;
+  /**
+  * Foreground color override (rarely needed since the character is a full block).
+  */
+  readonly textColor?: LiteralUnion<AnsiColors, string>;
+};
+/**
+* 2D heatmap. Each cell's background color is derived from its value's
+* position in the [min, max] range mapped into `palette`.
+*/
+declare function Heatmap({
+  cellWidth,
+  character,
+  columnLabels,
+  data,
+  max: maxOverride,
+  min: minOverride,
+  palette,
+  rowLabels,
+  textColor
+}: HeatmapProps): ReactElement;
+export { Heatmap, HeatmapProps, Heatmap as default };

package/dist/components/heatmap.js

@@ -0,0 +1 @@
+var T=Object.defineProperty;var v=(r,l)=>T(r,"name",{value:l,configurable:!0});import{jsxs as j,jsx as c}from"react/jsx-runtime";import{useMemo as k}from"react";import{Box as s}from"./box.js";import{Canvas as B}from"./canvas.js";import{Text as y}from"./text.js";var E=Object.defineProperty,O=v((r,l)=>E(r,"name",{value:l,configurable:!0}),"A");const P=["#0b1e4f","#1f3b96","#3258c8","#4e84ec","#78b0ff"];function R({cellWidth:r=2,character:l="█",columnLabels:g,data:n,max:d,min:m,palette:x=P,rowLabels:w,textColor:D}){const{cols:C,colWidth:f,extent:L,rows:p}=k(()=>{const t=n.length,e=n.reduce((a,o)=>Math.max(a,o.length),0);let i=m??1/0,h=d??-1/0;if(m===void 0||d===void 0)for(const a of n)for(const o of a)m===void 0&&o<i&&(i=o),d===void 0&&o>h&&(h=o);return{cols:e,colWidth:r,extent:{max:h,min:i},rows:t}},[n,m,d,r]),W=C*f,A=p;return j(s,{children:[w===void 0?void 0:c(s,{flexDirection:"column",marginRight:1,children:Array.from({length:p},(t,e)=>c(y,{dimColor:!0,children:w[e]??""},e))}),j(s,{flexDirection:"column",children:[c(B,{draw:v(t=>{t.clear();const{max:e,min:i}=L,h=e-i||1,a=x.length-1;for(let o=0;o<p;o+=1)for(let u=0;u<C;u+=1){const M=n[o]?.[u],H=M===void 0?void 0:x[Math.max(0,Math.min(a,Math.round((M-i)/h*a)))];for(let b=0;b<f;b+=1)t.setCell(u*f+b,o,l,{background:H,color:D})}},"draw"),height:A,version:[n,x,r,m,d],width:W}),g===void 0?void 0:c(s,{children:g.map((t,e)=>c(s,{width:f,children:c(y,{dimColor:!0,wrap:"truncate-end",children:t})},e))})]})]})}v(R,"T");O(R,"Heatmap");export{R as Heatmap,R as default};

package/dist/components/help.d.ts

@@ -0,0 +1,52 @@
+import { ReactElement } from 'react';
+import { KeyBinding } from "../ink/hooks/use-key-bindings.js";
+type Props = {
+  /**
+  * Key bindings to display. Typically the `bindings` array returned by `useKeyBindings`.
+  */
+  readonly bindings: ReadonlyArray<KeyBinding>;
+  /**
+  * Color for description text.
+  * @default undefined (uses dimColor)
+  */
+  readonly descriptionColor?: string;
+  /**
+  * Color for key labels.
+  * @default "cyan"
+  */
+  readonly keyColor?: string;
+  /**
+  * Maximum number of columns in full mode.
+  * @default 3
+  */
+  readonly maxColumns?: number;
+  /**
+  * Display mode.
+  * - `"short"`: Single-line horizontal bar, truncated to terminal width.
+  * - `"full"`: Multi-column layout grouped by `group` field.
+  * @default "short"
+  */
+  readonly mode?: "full" | "short";
+  /**
+  * Separator between key-description pairs in short mode.
+  * @default " \u00b7 "
+  */
+  readonly separator?: string;
+};
+/**
+* Renders a keybinding help bar from an array of `KeyBinding` definitions.
+*
+* ```tsx
+* &lt;Help bindings={bindings} />
+* &lt;Help bindings={bindings} mode="full" />
+* ```
+*/
+declare function Help({
+  bindings,
+  descriptionColor,
+  keyColor,
+  maxColumns,
+  mode,
+  separator
+}: Props): ReactElement;
+export { Help, type Props as HelpProps, Props, Help as default };

package/dist/components/help.js

@@ -0,0 +1 @@
+var j=Object.defineProperty;var p=(o,r)=>j(o,"name",{value:r,configurable:!0});import{jsx as n,jsxs as x}from"react/jsx-runtime";import D from"../ink/hooks/use-window-size.js";import{Box as u}from"./box.js";import{Text as i}from"./text.js";var v=Object.defineProperty,h=p((o,r)=>v(o,"name",{value:r,configurable:!0}),"u");const g={backspace:"backspace",delete:"del",downArrow:"↓",end:"end",escape:"esc",home:"home",leftArrow:"←",pageDown:"pgdn",pageUp:"pgup",return:"enter",rightArrow:"→",tab:"tab",upArrow:"↑"};function y(o){const r=o.indexOf("+");if(r!==-1){const e=o.slice(0,r),t=o.slice(r+1);return`${e}+${g[t]??t}`}return g[o]??o}p(y,"w");h(y,"formatKeyLabel");function C(o){return(typeof o=="string"?[o]:o).map(r=>y(r)).join("/")}p(C,"x");h(C,"formatKeys");function M({bindings:o,descriptionColor:r,keyColor:e="cyan",maxColumns:t=3,mode:l="short",separator:s=" · "}){const{columns:d}=D();return l==="full"?w(o,{columns:d,descriptionColor:r,keyColor:e,maxColumns:t}):b(o,{columns:d,descriptionColor:r,keyColor:e,separator:s})}p(M,"h");h(M,"Help");function b(o,r){const e=[];let t=0;for(const[l,s]of o.entries()){const d=C(s.key),a=`${d} ${s.description}`,c=(l>0?r.separator.length:0)+a.length;if(t+c>r.columns&&e.length>0)break;l>0&&e.push(n(i,{dimColor:!0,children:r.separator},`sep-${l}`)),e.push(x(u,{children:[n(i,{color:r.keyColor,children:d}),n(i,{children:" "}),r.descriptionColor?n(i,{color:r.descriptionColor,children:s.description}):n(i,{dimColor:!0,children:s.description})]},`pair-${l}`)),t+=c}return n(u,{flexDirection:"row",children:e})}p(b,"T");h(b,"renderShort");function w(o,r){const e=new Map;for(const a of o){const c=a.group??"";e.has(c)||e.set(c,[]),e.get(c).push(a)}const t=[...e.entries()],l=Math.min(r.maxColumns,t.length||1),s=Math.floor(r.columns/l),d=[];for(const[a,[c,$]]of t.entries()){const f=[];c&&f.push(n(i,{bold:!0,children:c},"title"));for(const[k,m]of $.entries()){const A=C(m.key);f.push(x(u,{children:[n(i,{color:r.keyColor,children:A}),n(i,{children:" "}),r.descriptionColor?n(i,{color:r.descriptionColor,children:m.description}):n(i,{dimColor:!0,children:m.description})]},`b-${k}`))}d.push(n(u,{flexDirection:"column",width:s,children:f},`col-${a}`))}return n(u,{flexDirection:"row",children:d})}p(w,"A");h(w,"renderFull");export{M as Help,M as default};