@visulima/tui-kit 0.0.0 → 1.0.0

package/dist/digits.d.ts

@@ -0,0 +1,30 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color of the digits.
+  * @default "cyan"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Number of spaces between glyphs.
+  * @default 1
+  */
+  readonly gap?: number;
+  /**
+  * The value to render. Numbers are stringified; unsupported characters
+  * render as `?`.
+  */
+  readonly value: number | string;
+};
+/**
+* A large seven-segment-style numeric readout. Supports digits, space, minus,
+* dot and colon — enough for counters, clocks and timers.
+*/
+declare function Digits({
+  color,
+  gap,
+  value
+}: Props): ReactElement;
+export { Digits, type Props as DigitsProps, Props, Digits as default };

package/dist/digits.js

@@ -0,0 +1 @@
+import{jsx as n}from"react/jsx-runtime";import f from"@visulima/tui/components/box";import l from"@visulima/tui/components/text";const s={" ":["   ","   ","   "],0:[" ▄ ","█ █","▀▄▀"],1:[" ▄ "," █ "," ▪ "],2:["▄▄ "," ▄▀","▀▄▄"],3:["▄▄ "," ▄▀","▄▄▀"],4:["   ","█▄█","  █"],5:["▄▄▄","█▄ ","▄▄▀"],6:[" ▄ ","█▄ ","▀▄▀"],7:["▄▄▄","  █"," █ "],8:[" ▄ ","▄▀▄","▀▄▀"],9:[" ▄ ","▀▄█"," ▄▀"],"-":["   "," ─ ","   "],".":["   ","   "," ▪ "],":":["   "," ▪ "," ▪ "]},u=["   "," ? ","   "];function g({color:a="cyan",gap:c=1,value:i}){const m=String(i),e=" ".repeat(Math.max(0,c)),t=[];for(const o of m)t.push(o);const p=[0,1,2].map(o=>t.map(r=>(s[r]??u)[o]).join(e));return n(f,{flexDirection:"column",children:p.map((o,r)=>n(l,{color:a,children:o},r))})}export{g as Digits,g as default};

package/dist/directory-tree.d.ts

@@ -0,0 +1,51 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type DirectoryNode = {
+  readonly children?: ReadonlyArray<DirectoryNode>;
+  readonly name: string;
+  readonly type: "directory" | "file";
+};
+type Props = {
+  /**
+  * Accent color for the focused row.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus for keyboard navigation.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Start with every directory expanded.
+  * @default false
+  */
+  readonly defaultExpanded?: boolean;
+  /**
+  * Color used for directory names.
+  * @default "cyan"
+  */
+  readonly directoryColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * The tree to render.
+  */
+  readonly nodes: ReadonlyArray<DirectoryNode>;
+  /**
+  * Fires with the path segments when Enter is pressed on a file.
+  */
+  readonly onSelect?: (path: ReadonlyArray<string>) => void;
+};
+/**
+* A read-only filesystem tree. Directories show a ▸/▾ toggle and a folder
+* glyph; files show a document glyph. Arrow keys navigate, →/← and Space
+* expand/collapse directories, and Enter fires `onSelect` with a file's path.
+*/
+declare function DirectoryTree({
+  accentColor,
+  autoFocus,
+  defaultExpanded,
+  directoryColor,
+  nodes,
+  onSelect
+}: Props): ReactElement;
+export { DirectoryNode, DirectoryTree, type Props as DirectoryTreeProps, Props, DirectoryTree as default };

package/dist/directory-tree.js

@@ -0,0 +1 @@
+import{jsx as y,jsxs as x}from"react/jsx-runtime";import S from"@visulima/tui/components/box";import w from"@visulima/tui/components/text";import B from"@visulima/tui/hooks/use-focus";import k from"@visulima/tui/hooks/use-input";import{useState as g,useMemo as E,useCallback as $}from"react";function F(i,e){return e===0?0:(i%e+e)%e}function M(i,e){return i?e?"▾ 📁":"▸ 📁":"  📄"}const b=(i,e,u,l,s,f)=>{for(const d of i){const a=`${l}/${d.name}`,m=[...s,d.name];f.push({depth:u,id:a,node:d,path:m}),d.type==="directory"&&d.children!==void 0&&e.has(a)&&b(d.children,e,u+1,a,m,f)}},C=(i,e,u)=>{for(const l of i){const s=`${e}/${l.name}`;l.type==="directory"&&l.children!==void 0&&(u.add(s),C(l.children,s,u))}};function H({accentColor:i="blue",autoFocus:e=!1,defaultExpanded:u=!1,directoryColor:l="cyan",nodes:s,onSelect:f}){const{isFocused:d}=B({autoFocus:e}),[a,m]=g(()=>{if(!u)return new Set;const r=new Set;return C(s,"",r),r}),[p,v]=g(0),h=E(()=>{const r=[];return b(s,a,0,"",[],r),r},[a,s]),A=$((r,t)=>{m(o=>{const n=new Set(o);return t??!n.has(r)?n.add(r):n.delete(r),n})},[]),D=$((r,t)=>{const o=h[p];if(t.upArrow){v(c=>F(c-1,h.length));return}if(t.downArrow){v(c=>F(c+1,h.length));return}if(o===void 0)return;const n=o.node.type==="directory";if(n&&o.node.children!==void 0&&(r===" "||t.rightArrow||t.leftArrow)){let c;t.rightArrow?c=!0:t.leftArrow&&(c=!1),A(o.id,c);return}t.return&&!n&&f?.(o.path)},[p,f,h,A]);return k(D,{isActive:d}),y(S,{flexDirection:"column",children:h.map((r,t)=>{const o=d&&t===p,n=r.node.type==="directory",c=a.has(r.id),j=M(n,c);return x(S,{children:[y(w,{color:o?i:void 0,children:o?"❯":" "}),y(w,{children:"  ".repeat(r.depth)}),x(w,{color:n?l:void 0,children:[j," ",r.node.name]})]},r.id)})})}export{H as DirectoryTree,H as default};

package/dist/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/divider.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as f}from"react/jsx-runtime";import e from"@visulima/tui/components/box";import t from"@visulima/tui/components/text";import w from"@visulima/tui/hooks/use-window-size";function S({character:x,color:i,dimColor:l=!1,label:a,labelPadding:p=1,length:o,orientation:d="horizontal"}){const{columns:s}=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(s,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(p);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/drawer.d.ts

@@ -0,0 +1,53 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color for the border and title.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Drawer body.
+  */
+  readonly children: ReactNode;
+  /**
+  * Whether the drawer is open. When false, nothing is rendered.
+  */
+  readonly isOpen: boolean;
+  /**
+  * Fires when Escape is pressed while open.
+  */
+  readonly onClose?: () => void;
+  /**
+  * Edge the drawer is anchored to. Left/right drawers take a fixed `size`
+  * as width; top/bottom take it as height.
+  * @default "right"
+  */
+  readonly side?: "bottom" | "left" | "right" | "top";
+  /**
+  * Fixed extent (width for left/right, height for top/bottom) in cells.
+  * @default 32
+  */
+  readonly size?: number;
+  /**
+  * Optional title shown in the drawer header.
+  */
+  readonly title?: string;
+};
+/**
+* A slide-over panel anchored to a terminal edge. Rendered as a bordered box
+* sized along one axis; Escape fires `onClose`, and nothing renders while
+* closed. Terminals have no true overlay layer, so place the drawer where it
+* should appear in your layout.
+*/
+declare function Drawer({
+  accentColor,
+  children,
+  isOpen,
+  onClose,
+  side,
+  size,
+  title
+}: Props): ReactElement | null;
+export { Drawer, type Props as DrawerProps, Props, Drawer as default };

package/dist/drawer.js

@@ -0,0 +1 @@
+import{jsxs as s,jsx as r}from"react/jsx-runtime";import e from"@visulima/tui/components/box";import m from"@visulima/tui/components/text";import a from"@visulima/tui/hooks/use-input";import{useCallback as h}from"react";function j({accentColor:i="blue",children:u,isOpen:t,onClose:n,side:l="right",size:c=32,title:o}){const f=h((b,p)=>{p.escape&&n?.()},[n]);if(a(f,{isActive:t}),!t)return null;const d=l==="left"||l==="right";return s(e,{borderColor:i,borderStyle:"round",flexDirection:"column",height:d?void 0:c,paddingX:1,width:d?c:void 0,children:[o===void 0?void 0:s(e,{justifyContent:"space-between",children:[r(m,{bold:!0,color:i,children:o}),r(m,{dimColor:!0,children:"esc"})]}),r(e,{flexDirection:"column",marginTop:o===void 0?0:1,children:u})]})}export{j as Drawer,j as default};

package/dist/file-change.d.ts

@@ -0,0 +1,40 @@
+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-Cie6aAMD.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,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/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,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/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,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/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,40 @@
+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,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/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,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/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};