@visulima/tui-kit 0.0.0 → 1.0.1

package/dist/file-change.d.ts

@@ -0,0 +1,34 @@
+import { ReactElement } from 'react';
+type FileChangeStatus = "added" | "deleted" | "modified" | "renamed";
+type Props = {
+  /**
+   * Number of added lines.
+   * @default 0
+   */
+  readonly additions?: number;
+  /**
+   * Total width of the +/- change bar in cells.
+   * @default 10
+   */
+  readonly barWidth?: number;
+  /**
+   * Number of removed lines.
+   * @default 0
+   */
+  readonly deletions?: number;
+  /**
+   * The file path.
+   */
+  readonly path: string;
+  /**
+   * Change status, shown as a colored one-letter badge.
+   * @default "modified"
+   */
+  readonly status?: FileChangeStatus;
+};
+/**
+ * A single git-style diff-stat row: a status badge, the path, the numeric
+ * add/remove counts, and a proportional ▰/▱ change bar.
+ */
+declare function FileChange({ additions, barWidth, deletions, path, status }: Props): ReactElement;
+export { FileChange, type Props as FileChangeProps, FileChangeStatus, Props, FileChange as default };

package/dist/file-change.js

@@ -0,0 +1 @@
+import{jsxs as c,jsx as r}from"react/jsx-runtime";import m from"@visulima/tui/components/box";import e from"@visulima/tui/components/text";const u={added:{color:"green",mark:"A"},deleted:{color:"red",mark:"D"},modified:{color:"yellow",mark:"M"},renamed:{color:"blue",mark:"R"}};function k({additions:l=0,barWidth:o=10,deletions:t=0,path:h,status:s="modified"}){const n=u[s],d=l+t,i=d===0?0:Math.round(l/d*o),a=d===0?0:Math.min(o-i,Math.round(t/d*o));return c(m,{gap:1,children:[r(e,{bold:!0,color:n.color,children:n.mark}),r(e,{children:h}),r(e,{color:"green",children:`+${l}`}),r(e,{color:"red",children:`-${t}`}),c(m,{children:[r(e,{color:"green",children:"▰".repeat(i)}),r(e,{color:"red",children:"▰".repeat(a)}),r(e,{dimColor:!0,children:"▱".repeat(Math.max(0,o-i-a))})]})]})}export{k as FileChange,k as default};

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

@@ -0,0 +1,2 @@
+export { type F as FileEntry, a as FilePicker, type b as FilePickerFilter, type P as FilePickerProps, a as default } from "./packem_shared/file-picker.d-CH7pccC7.js";
+import 'react';

package/dist/file-picker-entry.js

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

package/dist/form.d.ts

@@ -0,0 +1,74 @@
+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/form.js

@@ -0,0 +1 @@
+import{jsxs as m,jsx as r}from"react/jsx-runtime";import o from"@visulima/tui/components/box";import i from"@visulima/tui/components/text";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})]}),b=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{b as Form,a as FormField,b as default};

package/dist/gauge.d.ts

@@ -0,0 +1,76 @@
+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/gauge.js

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

package/dist/gradient.d.ts

@@ -0,0 +1,38 @@
+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/gradient.js

@@ -0,0 +1 @@
+import{jsx as s,Fragment as B}from"react/jsx-runtime";import{strip as F}from"@visulima/ansi";import{multilineGradient as k}from"@visulima/colorize/gradient";import C from"@visulima/tui/components/box";import S from"@visulima/tui/components/text";import b from"@visulima/tui/components/transform";import{useMemo as M,Children as g,isValidElement as T,cloneElement as y}from"react";const O={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"}}},j=o=>{let t=!1;const n=u=>{g.forEach(u,i=>{if(t||!T(i))return;if(i.type===C){t=!0;return}const f=i.props;Object.hasOwn(f,"children")&&n(f.children)})};return n(o),t},x=o=>Object.hasOwn(o,"children"),G=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(O[n].colors,O[n].options):k(t??[]),[n,t]),i=h=>u(F(h)),f=g.count(o);if(G(o))return s(b,{transform:i,children:o});if(f===1&&!j(o))return s(b,{transform:i,children:o});const m=h=>{const c=[];let l="",v=0;const w=()=>{const r=`gradient-node-${String(v)}`;return v+=1,r},a=(r,e)=>{c.push(s(b,{transform:i,children:r},e))},E=()=>{if(l==="")return;const r=l;l="",a(s(S,{children:r}),w())};return g.forEach(h,r=>{if(!N(r)){if(G(r)){l+=String(r);return}if(E(),T(r)){const e=r.key??w(),p=r.props;if(r.type===S){a(r,e);return}if(r.type===C){if(x(p)){const d=p.children;c.push(y(r,{key:e},m(d)));return}c.push(y(r,{key:e}));return}if(x(p)){const d=p.children;if(!j(d)){a(r,e);return}c.push(y(r,{key:e},m(d)));return}a(r,e);return}c.push(r)}}),E(),c};return s(B,{children:m(o)})}export{J as Gradient,J as default};

package/dist/grid.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode, ReactElement } from 'react';
+type Props = {
+  /**
+   * The grid cells, filled left-to-right, top-to-bottom.
+   */
+  readonly children: ReactNode;
+  /**
+   * Horizontal gap between columns, in cells.
+   * @default 1
+   */
+  readonly columnGap?: number;
+  /**
+   * Number of columns. Children wrap into as many rows as needed.
+   * @default 2
+   */
+  readonly columns?: number;
+  /**
+   * Fixed width for every column, in cells. Omit to let columns size to
+   * their content.
+   */
+  readonly columnWidth?: number;
+  /**
+   * Vertical gap between rows, in cells.
+   * @default 0
+   */
+  readonly rowGap?: number;
+};
+/**
+ * A simple 2D grid: children flow left-to-right into a fixed number of columns,
+ * wrapping to new rows. Column and row gaps are configurable, and columns can
+ * be given a fixed width for uniform cells.
+ */
+declare function Grid({ children, columnGap, columns, columnWidth, rowGap }: Props): ReactElement;
+export { Grid, type Props as GridProps, Props, Grid as default };

package/dist/grid.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import n from"@visulima/tui/components/box";import{Children as u}from"react";function G({children:e,columnGap:a=1,columns:m=2,columnWidth:c,rowGap:h=0}){const i=u.toArray(e),l=[],t=Math.max(1,m);for(let r=0;r<i.length;r+=t)l.push(i.slice(r,r+t));return o(n,{flexDirection:"column",gap:h,children:l.map((r,p)=>o(n,{gap:a,children:r.map((d,f)=>o(n,{flexShrink:0,width:c,children:d},f))},p))})}export{G as Grid,G as default};

package/dist/heading.d.ts

@@ -0,0 +1,28 @@
+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/heading.js

@@ -0,0 +1 @@
+import{jsx as l,jsxs as t}from"react/jsx-runtime";import c from"@visulima/tui/components/box";import d from"@visulima/tui/components/text";const a={1:"blueBright",2:"cyanBright",3:"magentaBright",4:"yellowBright",5:"green",6:"white"},h={1:"# ",2:"## ",3:"### ",4:"#### ",5:"##### ",6:"###### "};function g({children:e,color:o,level:r=1,underline:i=!1}){const n=o??a[r];return l(c,{flexDirection:"column",children:t(d,{bold:r<=2,color:n,underline:i,children:[h[r],e]})})}export{g as Heading,g as default};

package/dist/heatmap.d.ts

@@ -0,0 +1,52 @@
+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/heatmap.js

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

package/dist/help.d.ts

@@ -0,0 +1,45 @@
+import { KeyBinding } from '@visulima/tui/hooks/use-key-bindings';
+import { ReactElement } from 'react';
+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/help.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as m}from"react/jsx-runtime";import u from"@visulima/tui/components/box";import i from"@visulima/tui/components/text";import x from"@visulima/tui/hooks/use-window-size";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}=x();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(u,{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(u,{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 a=[];c&&a.push(e(i,{bold:!0,children:c},"title"));for(const[k,h]of g.entries()){const w=C(h.key);a.push(m(u,{children:[e(i,{color:o.keyColor,children:w}),e(i,{children:" "}),o.descriptionColor?e(i,{color:o.descriptionColor,children:h.description}):e(i,{dimColor:!0,children:h.description})]},`b-${k}`))}p.push(e(u,{flexDirection:"column",width:l,children:a},`col-${d}`))}return e(u,{flexDirection:"row",children:p})}export{B as Help,B as default};

package/dist/histogram.d.ts

@@ -0,0 +1,52 @@
+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/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/image.d.ts

@@ -0,0 +1,23 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Pixel = LiteralUnion<AnsiColors, string> | undefined;
+type Props = {
+  /**
+   * Character drawn for a transparent (undefined) pixel; defaults to a space.
+   */
+  readonly emptyChar?: string;
+  /**
+   * A row-major grid of colors, one entry per pixel. `undefined` is treated
+   * as transparent. Two vertical pixels share one character cell via the
+   * upper-half-block technique, so the rendered height is `ceil(rows / 2)`.
+   */
+  readonly pixels: ReadonlyArray<ReadonlyArray<Pixel>>;
+};
+/**
+ * Render a small pixel grid using the upper-half-block technique: each text
+ * cell packs two vertical pixels — the top pixel as the glyph's foreground and
+ * the bottom pixel as its background — doubling vertical resolution.
+ */
+declare function Image({ emptyChar, pixels }: Props): ReactElement;
+export { Image, type Props as ImageProps, Props, Image as default };

package/dist/image.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import f from"@visulima/tui/components/box";import h from"@visulima/tui/components/text";const p="▀",a="▄";function y({emptyChar:u=" ",pixels:e}){let c=0;for(const o of e)c=Math.max(c,o.length);const s=[];for(let o=0;o<e.length;o+=2){const d=e[o]??[],m=e[o+1]??[],i=[];for(let r=0;r<c;r+=1){const n=d[r],l=m[r];if(n===void 0&&l===void 0){i.push(t(h,{children:u},r));continue}if(n===void 0){i.push(t(h,{color:l,children:a},r));continue}i.push(t(h,{backgroundColor:l,color:n,children:p},r))}s.push(t(f,{children:i},o))}return t(f,{flexDirection:"column",children:s})}export{y as Image,y as default};