@visulima/tui 1.0.0-alpha.9 → 1.0.1

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 @@
+import{jsx as r,jsxs as f}from"react/jsx-runtime";import w from"../ink/hooks/use-window-size.js";import{Box as e}from"./box.js";import{Text as t}from"./text.js";function S({character:x,color:i,dimColor:l=!1,label:a,labelPadding:s=1,length:o,orientation:d="horizontal"}){const{columns:p}=w(),n=x??(d==="horizontal"?"─":"│");if(d==="vertical"){const m=o??1;return r(e,{flexDirection:"column",height:m,children:Array.from({length:m},(v,u)=>r(t,{color:i,dimColor:l,children:n},`divider-row-${u}`))})}const c=Math.min(500,o??Math.max(p,1));if(a===void 0)return r(e,{flexGrow:o===void 0?1:0,width:o,children:r(t,{color:i,dimColor:l,wrap:"truncate",children:n.repeat(c)})});const h=" ".repeat(s);return f(e,{flexGrow:o===void 0?1:0,width:o,children:[r(e,{flexGrow:1,flexShrink:1,children:r(t,{color:i,dimColor:l,wrap:"truncate",children:n.repeat(c)})}),r(e,{flexShrink:0,children:f(t,{color:i,dimColor:l,children:[h,a,h]})}),r(e,{flexGrow:1,flexShrink:1,children:r(t,{color:i,dimColor:l,wrap:"truncate",children:n.repeat(c)})})]})}export{S as Divider,S 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-BLS9nOPz.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 @@
+import{jsxs as m,jsx as r}from"react/jsx-runtime";import{Box as o}from"./box.js";import{Text as i}from"./text.js";const a=({children:e,description:d,error:l,isDisabled:n=!1,label:c,required:t=!1})=>m(o,{flexDirection:"column",marginBottom:1,children:[m(o,{children:[r(i,{bold:!0,dimColor:n,children:c}),t?r(i,{color:"red",children:" *"}):void 0]}),r(o,{marginTop:0,children:e}),l===void 0?d===void 0?void 0:r(i,{dimColor:!0,children:d}):r(i,{color:"red",children:l})]}),x=Object.assign(({accentColor:e="blue",bordered:d=!0,children:l,description:n,footer:c,title:t,width:h})=>{const s=m(o,{flexDirection:"column",children:[t===void 0?void 0:r(o,{marginBottom:1,children:r(i,{bold:!0,color:e,children:t})}),n===void 0?void 0:r(o,{marginBottom:1,children:r(i,{dimColor:!0,children:n})}),r(o,{flexDirection:"column",children:l}),c===void 0?void 0:r(o,{marginTop:1,children:c})]});return d?r(o,{borderColor:e,borderStyle:"round",flexDirection:"column",paddingX:1,paddingY:1,width:h,children:s}):r(o,{flexDirection:"column",width:h,children:s})},{Field:a});export{x as Form,a as FormField,x 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 @@
+import{jsxs as C,jsx as l}from"react/jsx-runtime";import{useMemo as q}from"react";import{c as T}from"../packem_shared/braille-ch3O5D7I.js";import{Box as s}from"./box.js";import{Canvas as U}from"./canvas.js";import{Text as x}from"./text.js";const W={large:{cols:40,rows:10},medium:{cols:24,rows:6},small:{cols:16,rows:4}},X=.9,_=2,Y=r=>String(Math.round(r)),z=(r,m,c,e)=>{const t=m+(c-m)*e;for(const f of r)if(t<=f.max)return f;return r[r.length-1]};function no({backgroundColor:r="gray",formatValue:m=Y,label:c,max:e=100,min:t=0,showLegend:f=!1,showValue:j=!0,size:b="medium",thresholds:n,value:P}){const{cols:A,rows:E}=W[b],I=Math.max(t,Math.min(e,P)),F=e-t||1,M=(I-t)/F,d=q(()=>{if(!(n===void 0||n.length===0))return[...n].toSorted((o,h)=>o.max-h.max)},[n]),k=q(()=>{if(d!==void 0)return z(d,t,e,M)},[d,t,e,M]),G=m(I);return C(s,{flexDirection:"column",children:[l(U,{draw:o=>{o.clear();const h=o.width*2,B=o.height*4,w=h/2,v=B-1,H=h/2-1,J=B-1,g=Math.max(1,Math.min(H,J)),y=new Map,D=i=>{const a=y.get(i);if(a!==void 0)return a;const u=T(o.width,o.height);return y.set(i,u),u},L=Math.max(32,Math.round(Math.PI*g)*_);for(let i=0;i<=L;i+=1){const a=i/L,u=Math.PI*(1-a),Q=Math.round(w+g*Math.cos(u)),R=Math.round(v-g*Math.sin(u));let p;a>M?p=r:d?p=z(d,t,e,a)?.color??"cyan":p="cyan",D(p).plotPoint(Q,R)}const S=g*X,V=Math.PI*(1-M),K=Math.round(w+S*Math.cos(V)),N=Math.round(v-S*Math.sin(V)),O=k?.color??"white";D(O).plotLine(Math.round(w),Math.round(v),K,N);for(const[i,a]of y)a.flush(o,{color:i})},height:E,version:[P,t,e,b,n,r],width:A}),j||c?C(s,{flexDirection:"column",children:[c===void 0?void 0:l(s,{justifyContent:"center",children:l(x,{dimColor:!0,children:c})}),j?l(s,{justifyContent:"center",children:l(x,{bold:!0,color:k?.color??"white",children:G})}):void 0]}):void 0,f&&n&&n.length>0?l(s,{gap:2,justifyContent:"center",marginTop:1,children:n.map((o,h)=>C(s,{gap:1,children:[l(x,{color:o.color,children:"●"}),l(x,{dimColor:!0,children:o.label??`≤ ${o.max}`})]},h))}):void 0]})}export{no as Gauge,no 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 @@
+import{jsx as c,Fragment as C}from"react/jsx-runtime";import{strip as F}from"@visulima/ansi";import{multilineGradient as k}from"@visulima/colorize/gradient";import{useMemo as M,Children as g,isValidElement as G,cloneElement as b}from"react";import{Box as B}from"./box.js";import{Text as x}from"./text.js";import{Transform as y}from"./transform.js";const S={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"}}},O=o=>{let t=!1;const n=u=>{g.forEach(u,s=>{if(t||!G(s))return;if(s.type===B){t=!0;return}const f=s.props;Object.hasOwn(f,"children")&&n(f.children)})};return n(o),t},T=o=>Object.hasOwn(o,"children"),j=o=>typeof o=="string"||typeof o=="number",N=o=>o==null||typeof o=="boolean";function J({children:o,colors:t,name:n}){if(n&&t)throw new Error("The `name` and `colors` props are mutually exclusive");if(!n&&!t)throw new Error("Either `name` or `colors` prop must be provided");const u=M(()=>n?k(S[n].colors,S[n].options):k(t??[]),[n,t]),s=h=>u(F(h)),f=g.count(o);if(j(o))return c(y,{transform:s,children:o});if(f===1&&!O(o))return c(y,{transform:s,children:o});const m=h=>{const i=[];let a="",v=0;const w=()=>{const r=`gradient-node-${String(v)}`;return v+=1,r},l=(r,e)=>{i.push(c(y,{transform:s,children:r},e))},E=()=>{if(a==="")return;const r=a;a="",l(c(x,{children:r}),w())};return g.forEach(h,r=>{if(!N(r)){if(j(r)){a+=String(r);return}if(E(),G(r)){const e=r.key??w(),p=r.props;if(r.type===x){l(r,e);return}if(r.type===B){if(T(p)){const d=p.children;i.push(b(r,{key:e},m(d)));return}i.push(b(r,{key:e}));return}if(T(p)){const d=p.children;if(!O(d)){l(r,e);return}i.push(b(r,{key:e},m(d)));return}l(r,e);return}i.push(r)}}),E(),i};return c(C,{children:m(o)})}export{J as Gradient,J 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 @@
+import{jsx as l,jsxs as t}from"react/jsx-runtime";import{Box as c}from"./box.js";import{Text as a}from"./text.js";const s={1:"blueBright",2:"cyanBright",3:"magentaBright",4:"yellowBright",5:"green",6:"white"},d={1:"# ",2:"## ",3:"### ",4:"#### ",5:"##### ",6:"###### "};function g({children:e,color:o,level:r=1,underline:n=!1}){const i=o??s[r];return l(c,{flexDirection:"column",children:t(a,{bold:r<=2,color:i,underline:n,children:[d[r],e]})})}export{g as Heading,g 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 @@
+import{jsxs as C,jsx as a}from"react/jsx-runtime";import{useMemo as R}from"react";import{Box as m}from"./box.js";import{Canvas as A}from"./canvas.js";import{Text as M}from"./text.js";const B=["#0b1e4f","#1f3b96","#3258c8","#4e84ec","#78b0ff"];function G({cellWidth:s=2,character:k="█",columnLabels:p,data:t,max:c,min:l,palette:x=B,rowLabels:w,textColor:L}){const{cols:g,colWidth:f,extent:W,rows:u}=R(()=>{const e=t.length,r=t.reduce((n,o)=>Math.max(n,o.length),0);let i=l??1/0,d=c??-1/0;if(l===void 0||c===void 0)for(const n of t)for(const o of n)l===void 0&&o<i&&(i=o),c===void 0&&o>d&&(d=o);return{cols:r,colWidth:s,extent:{max:d,min:i},rows:e}},[t,l,c,s]),j=g*f,D=u;return C(m,{children:[w===void 0?void 0:a(m,{flexDirection:"column",marginRight:1,children:Array.from({length:u},(e,r)=>a(M,{dimColor:!0,children:w[r]??""},r))}),C(m,{flexDirection:"column",children:[a(A,{draw:e=>{e.clear();const{max:r,min:i}=W,d=r-i||1,n=x.length-1;for(let o=0;o<u;o+=1)for(let h=0;h<g;h+=1){const b=t[o]?.[h],H=b===void 0?void 0:x[Math.max(0,Math.min(n,Math.round((b-i)/d*n)))];for(let v=0;v<f;v+=1)e.setCell(h*f+v,o,k,{background:H,color:L})}},height:D,version:[t,x,s,l,c],width:j}),p===void 0?void 0:a(m,{children:p.map((e,r)=>a(m,{width:f,children:a(M,{dimColor:!0,wrap:"truncate-end",children:e})},r))})]})]})}export{G as Heatmap,G 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 @@
+import{jsx as e,jsxs as m}from"react/jsx-runtime";import w from"../ink/hooks/use-window-size.js";import{Box as a}from"./box.js";import{Text as i}from"./text.js";const f={backspace:"backspace",delete:"del",downArrow:"↓",end:"end",escape:"esc",home:"home",leftArrow:"←",pageDown:"pgdn",pageUp:"pgup",return:"enter",rightArrow:"→",tab:"tab",upArrow:"↑"};function y(r){const o=r.indexOf("+");if(o!==-1){const n=r.slice(0,o),t=r.slice(o+1);return`${n}+${f[t]??t}`}return f[r]??r}function C(r){return(typeof r=="string"?[r]:r).map(o=>y(o)).join("/")}function B({bindings:r,descriptionColor:o,keyColor:n="cyan",maxColumns:t=3,mode:s="short",separator:l=" · "}){const{columns:p}=w();return s==="full"?$(r,{columns:p,descriptionColor:o,keyColor:n,maxColumns:t}):b(r,{columns:p,descriptionColor:o,keyColor:n,separator:l})}function b(r,o){const n=[];let t=0;for(const[s,l]of r.entries()){const p=C(l.key),d=`${p} ${l.description}`,c=(s>0?o.separator.length:0)+d.length;if(t+c>o.columns&&n.length>0)break;s>0&&n.push(e(i,{dimColor:!0,children:o.separator},`sep-${s}`)),n.push(m(a,{children:[e(i,{color:o.keyColor,children:p}),e(i,{children:" "}),o.descriptionColor?e(i,{color:o.descriptionColor,children:l.description}):e(i,{dimColor:!0,children:l.description})]},`pair-${s}`)),t+=c}return e(a,{flexDirection:"row",children:n})}function $(r,o){const n=new Map;for(const d of r){const c=d.group??"";n.has(c)||n.set(c,[]),n.get(c).push(d)}const t=[...n.entries()],s=Math.min(o.maxColumns,t.length||1),l=Math.floor(o.columns/s),p=[];for(const[d,[c,g]]of t.entries()){const u=[];c&&u.push(e(i,{bold:!0,children:c},"title"));for(const[x,h]of g.entries()){const k=C(h.key);u.push(m(a,{children:[e(i,{color:o.keyColor,children:k}),e(i,{children:" "}),o.descriptionColor?e(i,{color:o.descriptionColor,children:h.description}):e(i,{dimColor:!0,children:h.description})]},`b-${x}`))}p.push(e(a,{flexDirection:"column",width:l,children:u},`col-${d}`))}return e(a,{flexDirection:"row",children:p})}export{B as Help,B as default};

package/dist/components/histogram.d.ts

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

package/dist/components/histogram.js

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

package/dist/components/kbd.d.ts

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

package/dist/components/kbd.js

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