@visulima/tui-kit 0.0.0 → 1.0.1

package/dist/confirm-input.js

@@ -0,0 +1 @@
+import{jsx as s,jsxs as a}from"react/jsx-runtime";import l from"@visulima/tui/components/box";import p from"@visulima/tui/components/text";import C from"@visulima/tui/hooks/use-input";import{useRef as f,useCallback as d}from"react";function y({defaultChoice:r="confirm",isDisabled:n=!1,onCancel:t,onConfirm:i,submitOnEnter:c=!0}){const e=f(i);e.current=i;const o=f(t);return o.current=t,C(d((u,m)=>{if(u.toLowerCase()==="y"){e.current();return}if(u.toLowerCase()==="n"){o.current();return}m.return&&c&&(r==="confirm"?e.current():o.current())},[c,r]),{isActive:!n}),s(l,{children:a(p,{dimColor:n,children:[r==="confirm"?"Y":"y","/",r==="cancel"?"N":"n"]})})}export{y as ConfirmInput,y as default};

package/dist/console-overlay.d.ts

@@ -0,0 +1,47 @@
+import { ConsoleLevel } from '@visulima/tui/hooks/use-console-capture';
+import { ReactElement } from 'react';
+type ConsoleOverlayDock = "bottom" | "top";
+type Props = {
+  /**
+   * Dock position within the parent container.
+   * @default "bottom"
+   */
+  readonly dock?: ConsoleOverlayDock;
+  /**
+   * Which console levels to capture.
+   * @default ["log", "info", "warn", "error", "debug"]
+   */
+  readonly filter?: ReadonlyArray<ConsoleLevel>;
+  /**
+   * Visible height in rows.
+   * @default 8
+   */
+  readonly height?: number;
+  /**
+   * Maximum entries to keep in the buffer.
+   * @default 200
+   */
+  readonly maxEntries?: number;
+  /**
+   * Show the log level label.
+   * @default true
+   */
+  readonly showLevel?: boolean;
+  /**
+   * Show timestamps on each entry.
+   * @default true
+   */
+  readonly showTimestamp?: boolean;
+};
+/**
+ * A dockable console overlay that captures and displays console output.
+ *
+ * ```tsx
+ * &lt;Box flexDirection="column" height="100%">
+ *     &lt;Box flexGrow={1}>{mainContent}&lt;/Box>
+ *     &lt;ConsoleOverlay dock="bottom" height={6} />
+ * &lt;/Box>
+ * ```
+ */
+declare function ConsoleOverlay({ dock, filter, height, maxEntries, showLevel, showTimestamp }: Props): ReactElement;
+export { ConsoleOverlay, ConsoleOverlayDock, type Props as ConsoleOverlayProps, Props, ConsoleOverlay as default };

package/dist/console-overlay.js

@@ -0,0 +1 @@
+import{jsx as m,jsxs as d}from"react/jsx-runtime";import p from"@visulima/tui/components/box";import l from"@visulima/tui/components/text";import u from"@visulima/tui/hooks/use-console-capture";import{useMemo as c}from"react";const h={debug:"gray",error:"red",info:"blue",log:"white",warn:"yellow"},f={debug:"DBG",error:"ERR",info:"INF",log:"LOG",warn:"WRN"},b=t=>{const r=new Date(t),o=String(r.getHours()).padStart(2,"0"),i=String(r.getMinutes()).padStart(2,"0"),n=String(r.getSeconds()).padStart(2,"0");return`${o}:${i}:${n}`};function y({dock:t="bottom",filter:r,height:o=8,maxEntries:i=200,showLevel:n=!0,showTimestamp:g=!0}){const{entries:a}=u({filter:r,maxEntries:i}),s=c(()=>a.slice(-o),[a,o]);return m(p,{borderBottom:t==="top",borderBottomColor:"gray",borderTop:t==="bottom",borderTopColor:"gray",flexDirection:"column",height:o+1,children:s.length===0?m(l,{dimColor:!0,children:"Console output will appear here..."}):s.map(e=>d(p,{children:[g?d(l,{dimColor:!0,children:["[",b(e.timestamp),"]"," "]}):void 0,n?d(l,{color:h[e.level],children:[f[e.level]," "]}):void 0,m(l,{color:e.level==="error"?"red":e.level==="warn"?"yellow":void 0,children:e.message})]},e.id))})}export{y as ConsoleOverlay,y as default};

package/dist/content-switcher.d.ts

@@ -0,0 +1,49 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type ContentSwitcherOption = {
+  readonly content: ReactNode;
+  readonly icon?: ReactNode;
+  readonly id: string;
+  readonly label: string;
+};
+type Props = {
+  /**
+   * Accent color for the selected segment.
+   * @default "blue"
+   */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Auto-focus the switcher on mount.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Initial selected id (uncontrolled).
+   */
+  readonly defaultValue?: string;
+  /**
+   * Disable input.
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Called when the selection changes.
+   */
+  readonly onChange?: (id: string) => void;
+  /**
+   * Segments to toggle between.
+   */
+  readonly options: ReadonlyArray<ContentSwitcherOption>;
+  /**
+   * Controlled selected id.
+   */
+  readonly value?: string;
+};
+/**
+ * Segmented control that flips between mutually exclusive content. More
+ * compact than `Tabs`: the selected segment is highlighted as a pill, and
+ * only the active segment's content is rendered.
+ * @returns A `ReactElement` with a segmented header row and the active
+ * panel's content beneath it.
+ */
+declare function ContentSwitcher({ accentColor, autoFocus, defaultValue, isDisabled, onChange, options, value }: Props): ReactElement;
+export { ContentSwitcher, ContentSwitcherOption, type Props as ContentSwitcherProps, Props, ContentSwitcher as default };

package/dist/content-switcher.js

@@ -0,0 +1 @@
+import{jsxs as u,jsx as v,Fragment as w}from"react/jsx-runtime";import m from"@visulima/tui/components/box";import D from"@visulima/tui/components/text";import F from"@visulima/tui/hooks/use-focus";import M from"@visulima/tui/hooks/use-input";import{useState as k,useMemo as j,useCallback as p}from"react";function q({accentColor:g="blue",autoFocus:x=!1,defaultValue:b,isDisabled:l=!1,onChange:f,options:r,value:t}){const{isFocused:c}=F({autoFocus:x,isActive:!l}),C=b??r[0]?.id,[a,A]=k(C),d=t??a,n=j(()=>{if(d===void 0)return 0;const o=r.findIndex(i=>i.id===d);return Math.max(o,0)},[r,d]),s=p(o=>{const i=r[o];if(!i)return;const e=t??a;i.id!==e&&(t===void 0&&A(i.id),f?.(i.id))},[r,t,a,f]);M(p((o,i)=>{c&&(i.leftArrow||o==="h"?s(Math.max(0,n-1)):(i.rightArrow||o==="l")&&s(Math.min(r.length-1,n+1)))},[c,n,r.length,s]),{isActive:!l&&c});const h=r[n];return u(m,{flexDirection:"column",children:[v(m,{children:r.map((o,i)=>{const e=i===n;return u(D,{backgroundColor:e?g:void 0,color:e?"black":void 0,dimColor:l&&!e,children:[" ",o.icon===void 0?void 0:u(w,{children:[o.icon," "]}),o.label," "]},o.id)})}),h===void 0?void 0:v(m,{flexDirection:"column",marginTop:1,children:h.content})]})}export{q as ContentSwitcher,q as default};

package/dist/controlled-scroll-view.d.ts

@@ -0,0 +1,3 @@
+export { C as ControlledScrollView, type a as ControlledScrollViewProps, type b as ControlledScrollViewRef } from "./packem_shared/controlled-scroll-view.d-D3kZZzjI.js";
+import '@visulima/tui/components/box';
+import 'react';

package/dist/controlled-scroll-view.js

@@ -0,0 +1 @@
+import{C as r}from"./packem_shared/controlled-scroll-view-DerVKKv6.js";export{r as ControlledScrollView};

package/dist/data-grid.d.ts

@@ -0,0 +1,43 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type DataGridColumn<Row> = {
+  readonly align?: "left" | "right";
+  readonly header: string;
+  readonly key: keyof Row & string;
+  /**
+   * Render a cell to a string. Defaults to `String(row[key])`.
+   */
+  readonly render?: (row: Row) => string;
+  readonly width?: number;
+};
+type Props<Row extends Record<string, unknown>> = {
+  /**
+   * Accent color for the cursor row and active sort column.
+   * @default "blue"
+   */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Auto-focus for keyboard navigation.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Column definitions in display order.
+   */
+  readonly columns: ReadonlyArray<DataGridColumn<Row>>;
+  /**
+   * The rows to display.
+   */
+  readonly data: ReadonlyArray<Row>;
+  /**
+   * Fires with the row under the cursor when Enter is pressed.
+   */
+  readonly onSelect?: (row: Row) => void;
+};
+/**
+ * A navigable, sortable table. ↑/↓ move the row cursor, ←/→ move the column
+ * cursor, `s` sorts by the cursor column (toggling direction), and Enter fires
+ * `onSelect` with the current row. Column widths default to the widest cell.
+ */
+declare function DataGrid<Row extends Record<string, unknown>>({ accentColor, autoFocus, columns, data, onSelect }: Props<Row>): ReactElement;
+export { DataGrid, DataGridColumn, type Props as DataGridProps, Props, DataGrid as default };

package/dist/data-grid.js

@@ -0,0 +1 @@
+import{jsxs as N,jsx as d}from"react/jsx-runtime";import m from"@visulima/tui/components/box";import h from"@visulima/tui/components/text";import M from"@visulima/tui/hooks/use-focus";import P from"@visulima/tui/hooks/use-input";import{useState as w,useMemo as D,useCallback as T}from"react";function f(t,i){return i===0?0:(t%i+i)%i}const g=(t,i)=>t.render?t.render(i):String(i[t.key]??""),R=(t,i,n)=>t.length>=i?t.slice(0,i):n==="right"?t.padStart(i):t.padEnd(i);function L({accentColor:t="blue",autoFocus:i=!1,columns:n,data:l,onSelect:b}){const{isFocused:p}=M({autoFocus:i}),[k,A]=w(0),[y,S]=w(0),[a,j]=w(void 0),C=D(()=>n.map(r=>{if(r.width!==void 0)return r.width;let o=r.header.length+2;for(const e of l)o=Math.max(o,g(r,e).length);return o}),[n,l]),s=D(()=>{if(a===void 0)return l;const r=n.find(e=>e.key===a.key);if(r===void 0)return l;const o=a.direction==="asc"?1:-1;return[...l].toSorted((e,c)=>{const u=g(r,e),v=g(r,c),x=Number(u),F=Number(v),G=u.length>0&&v.length>0&&!Number.isNaN(x)&&!Number.isNaN(F);return o*(G?x-F:u.localeCompare(v))})},[n,l,a]),B=T((r,o)=>{if(o.upArrow)A(e=>f(e-1,s.length));else if(o.downArrow)A(e=>f(e+1,s.length));else if(o.leftArrow)S(e=>f(e-1,n.length));else if(o.rightArrow)S(e=>f(e+1,n.length));else if(r==="s"){const e=n[y];e!==void 0&&j(c=>c?.key===e.key&&c.direction==="asc"?{direction:"desc",key:e.key}:{direction:"asc",key:e.key})}else if(o.return){const e=s[k];e!==void 0&&b?.(e)}},[y,n,b,k,s]);P(B,{isActive:p});const E=r=>a?.key!==r?"":a.direction==="asc"?" ▲":" ▼";return N(m,{flexDirection:"column",children:[N(m,{children:[d(h,{children:" "}),n.map((r,o)=>d(m,{marginRight:1,children:d(h,{bold:!0,color:p&&o===y?t:void 0,children:R(`${r.header}${E(r.key)}`,C[o],r.align??"left")})},r.key))]}),s.map((r,o)=>{const e=p&&o===k;return N(m,{children:[d(h,{color:e?t:void 0,children:e?"❯":" "}),n.map((c,u)=>d(m,{marginRight:1,children:d(h,{color:e?t:void 0,dimColor:!e,children:R(g(c,r),C[u],c.align??"left")})},c.key))]},o)})]})}export{L as DataGrid,L as default};

package/dist/date-picker.d.ts

@@ -0,0 +1,54 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+   * Accent color used by the inner calendar when open.
+   * @default "blue"
+   */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Auto-focus the picker on mount.
+   */
+  readonly autoFocus?: boolean;
+  /**
+   * Initial selected date when uncontrolled.
+   */
+  readonly defaultValue?: Date;
+  /**
+   * Override the way the selected date is rendered in the input row.
+   */
+  readonly formatValue?: (date: Date) => string;
+  /**
+   * Disable the picker.
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Upper bound for selectable dates.
+   */
+  readonly maxDate?: Date;
+  /**
+   * Lower bound for selectable dates.
+   */
+  readonly minDate?: Date;
+  /**
+   * Fired when the user commits a date with Enter.
+   */
+  readonly onChange?: (date: Date) => void;
+  /**
+   * Placeholder rendered when no date is selected.
+   * @default "Pick a date"
+   */
+  readonly placeholder?: string;
+  /**
+   * Controlled selected date.
+   */
+  readonly value?: Date;
+};
+/**
+ * Compact date input. Shows the currently-selected date; Enter / Space opens
+ * the inline `Calendar` for navigation. Enter inside the calendar commits the
+ * date and closes the picker.
+ */
+declare function DatePicker({ accentColor, autoFocus, defaultValue, formatValue, isDisabled, maxDate, minDate, onChange, placeholder, value }: Props): ReactElement;
+export { DatePicker, type Props as DatePickerProps, Props, DatePicker as default };

package/dist/date-picker.js

@@ -0,0 +1 @@
+import{jsxs as g,jsx as o}from"react/jsx-runtime";import i from"@visulima/tui/components/box";import l from"@visulima/tui/components/text";import k from"@visulima/tui/hooks/use-focus";import C from"@visulima/tui/hooks/use-input";import{useState as D,useCallback as h}from"react";import{Calendar as V}from"./calendar.js";const j=e=>{const n=e.getFullYear(),c=String(e.getMonth()+1).padStart(2,"0"),d=String(e.getDate()).padStart(2,"0");return`${n}-${c}-${d}`};function O({accentColor:e="blue",autoFocus:n=!1,defaultValue:c,formatValue:d=j,isDisabled:s=!1,maxDate:b,minDate:S,onChange:v,placeholder:x="Pick a date",value:u}){const{isFocused:r}=k({autoFocus:n,isActive:!s}),[t,m]=D(!1),[F,$]=D(c),f=u??F;C(h((a,p)=>{!r||t||(p.return||a===" ")&&m(!0)},[r,t]),{isActive:!s&&r&&!t}),C(h((a,p)=>{p.escape&&m(!1)},[]),{isActive:!s&&r&&t});const A=h(a=>{u===void 0&&$(a),m(!1),v?.(a)},[u,v]);return g(i,{flexDirection:"column",children:[g(i,{borderColor:r?e:void 0,borderStyle:"round",paddingX:1,children:[o(l,{color:e,children:"📅 "}),f===void 0?o(l,{dimColor:!0,children:x}):o(l,{bold:!0,children:d(f)}),r&&!t?o(i,{marginLeft:1,children:o(l,{dimColor:!0,children:"(Enter to open)"})}):void 0]}),t?o(i,{marginTop:1,children:o(V,{accentColor:e,autoFocus:!0,defaultValue:f,maxDate:b,minDate:S,onSubmit:A})}):void 0]})}export{O as DatePicker,O as default};

package/dist/definition-list.d.ts

@@ -0,0 +1,38 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type DefinitionItem = {
+  readonly description: ReactNode;
+  readonly key?: string;
+  readonly term: ReactNode;
+};
+type Props = {
+  /**
+   * Spacing between term and description columns.
+   * @default 2
+   */
+  readonly columnGap?: number;
+  /**
+   * Entries to render.
+   */
+  readonly items: ReadonlyArray<DefinitionItem>;
+  /**
+   * Inline items display on the same row; stacked items display with the term above the description.
+   * @default "inline"
+   */
+  readonly layout?: "inline" | "stacked";
+  /**
+   * Color applied to the term.
+   * @default "cyan"
+   */
+  readonly termColor?: LiteralUnion<AnsiColors, string>;
+  /**
+   * Minimum width used to align inline terms.
+   */
+  readonly termWidth?: number;
+};
+/**
+ * Key/value style definition list. Equivalent to the HTML `&lt;dl>` element.
+ */
+declare function DefinitionList({ columnGap, items, layout, termColor, termWidth }: Props): ReactElement;
+export { DefinitionItem, DefinitionList, type Props as DefinitionListProps, Props, DefinitionList as default };

package/dist/definition-list.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"@visulima/tui/components/box";import n from"@visulima/tui/components/text";function s({columnGap:d=2,items:c,layout:m="inline",termColor:o="cyan",termWidth:h}){return m==="stacked"?e(r,{flexDirection:"column",gap:1,children:c.map((i,l)=>t(r,{flexDirection:"column",children:[e(n,{bold:!0,color:o,children:i.term}),e(n,{children:i.description})]},i.key??l))}):e(r,{flexDirection:"column",children:c.map((i,l)=>t(r,{gap:d,children:[e(r,{flexShrink:0,width:h,children:e(n,{color:o,children:i.term})}),e(r,{flexGrow:1,flexShrink:1,children:e(n,{children:i.description})})]},i.key??l))})}export{s as DefinitionList,s as default};

package/dist/dialog.d.ts

@@ -0,0 +1,94 @@
+import { ReactNode, ReactElement } from 'react';
+import '@visulima/tui/components/box';
+import { b as ScrollViewRef } from "./packem_shared/scroll-view.d-GZcgAHl4.js";
+type Props = {
+  /**
+   * Background color for the dialog. Defaults to the detected terminal
+   * background color, falling back to `"black"`.
+   */
+  readonly backgroundColor?: string;
+  /**
+   * Border color.
+   * @default "cyan"
+   */
+  readonly borderColor?: string;
+  /**
+   * Border style.
+   * @default "round"
+   */
+  readonly borderStyle?: "arrow" | "bold" | "classic" | "double" | "doubleSingle" | "round" | "single" | "singleDouble";
+  /**
+   * Dialog content.
+   */
+  readonly children: ReactNode;
+  /**
+   * Override terminal columns. Useful in renderToString or testing contexts
+   * where useWindowSize is unavailable.
+   */
+  readonly columns?: number;
+  /**
+   * Footer content rendered below the scrollable area.
+   * Useful for hints like "Press ? to close".
+   */
+  readonly footer?: ReactNode;
+  /**
+   * Maximum height as a fraction of terminal rows (0-1) or absolute rows.
+   * Values <= 1 are treated as fractions; values > 1 as absolute row counts.
+   * @default 0.8
+   */
+  readonly maxHeight?: number;
+  /**
+   * Padding inside the dialog border.
+   * @default 2
+   */
+  readonly paddingX?: number;
+  /**
+   * Vertical padding inside the dialog border.
+   * @default 1
+   */
+  readonly paddingY?: number;
+  /**
+   * Override terminal rows. Useful in renderToString or testing contexts
+   * where useWindowSize is unavailable.
+   */
+  readonly rows?: number;
+  /**
+   * Scrollbar visual style.
+   * @default "block"
+   */
+  readonly scrollbarStyle?: "arrow" | "block" | "bold" | "classic" | "dots" | "double" | "doubleSingle" | "line" | "round" | "single" | "singleDouble" | "thick";
+  /**
+   * Ref to the internal ScrollView for programmatic scrolling.
+   */
+  readonly scrollRef?: React.Ref<ScrollViewRef>;
+  /**
+   * Title rendered at the top of the dialog. If a string is provided,
+   * it is rendered as bold cyan text.
+   */
+  readonly title?: ReactNode;
+  /**
+   * Whether the dialog is visible. When `false`, nothing is rendered.
+   * @default true
+   */
+  readonly visible?: boolean;
+  /**
+   * Dialog width in columns.
+   * @default 60
+   */
+  readonly width?: number;
+};
+/**
+ * A centered overlay dialog with automatic scrolling and scrollbar when
+ * content exceeds the available terminal height.
+ *
+ * Uses the terminal's detected background color by default so the
+ * dialog blends with the user's theme.
+ *
+ * ```tsx
+ * &lt;Dialog title="Help" footer={&lt;Text dimColor>Press Esc to close&lt;/Text>}>
+ *   &lt;Text>Dialog content here&lt;/Text>
+ * &lt;/Dialog>
+ * ```
+ */
+declare const Dialog: ({ backgroundColor: backgroundColorProp, borderColor, borderStyle, children, columns: columnsProp, footer, maxHeight: maxHeightProp, paddingX, paddingY, rows: rowsProp, scrollbarStyle: scrollbarStyleProp, scrollRef: externalScrollRef, title, visible, width }: Props) => ReactElement | null;
+export { Dialog, type Props as DialogProps, Props, Dialog as default };

package/dist/dialog.js

@@ -0,0 +1 @@
+import{jsx as r,jsxs as B}from"react/jsx-runtime";import o from"@visulima/tui/components/box";import M from"@visulima/tui/components/text";import H from"@visulima/tui/hooks/use-terminal-palette";import I from"@visulima/tui/hooks/use-window-size";import{useRef as R}from"react";import{ScrollView as V}from"./packem_shared/ScrollView-ESxpl6Hy.js";const T=({backgroundColor:u,borderColor:l="cyan",borderStyle:f="round",children:h,columns:g,footer:d,maxHeight:e=.8,paddingX:i=2,paddingY:p=1,rows:b,scrollbarStyle:k="block",scrollRef:x,title:n,visible:C=!0,width:S=60})=>{const c=I(),{isLoading:w,palette:y}=H(),D=R(null),X=x??D;if(!C)return null;const a=g??(c.columns||80),t=b??(c.rows||24),m=u??(w?"black":y?.background??"black"),j=e<=1?Math.floor(t*e):Math.min(e,t-2),s=typeof n=="string"?r(o,{marginBottom:1,children:r(M,{bold:!0,color:l,children:n})}):n??null;return r(o,{alignItems:"center",height:t,justifyContent:"center",position:"absolute",width:a,children:B(o,{backgroundColor:m,borderBackgroundColor:m,borderColor:l,borderStyle:f,flexDirection:"column",maxHeight:j,opaque:!0,paddingY:p,width:Math.min(S,a-4),children:[s!=null&&r(o,{flexShrink:0,paddingX:i,children:s}),r(V,{flexGrow:1,flexShrink:1,paddingX:i,ref:X,scrollbar:!0,scrollbarColor:l,scrollbarStyle:k,children:h}),d!=null&&r(o,{alignItems:"center",flexDirection:"column",flexShrink:0,marginTop:1,paddingX:i,children:d})]})})};export{T as Dialog,T as default};

package/dist/diff-view.d.ts

@@ -0,0 +1,72 @@
+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/diff-view.js

@@ -0,0 +1 @@
+import{jsx as u,jsxs as g,Fragment as H}from"react/jsx-runtime";import p from"@visulima/tui/components/box";import a from"@visulima/tui/components/text";import{resolveLanguage as P,isLanguageSupported as T,getHighlighter as I,getCachedTokens as M,renderTokenLine as W}from"@visulima/tui/highlighter";import j from"@visulima/tui/hooks/use-window-size";import{createPatch as B,parsePatch as E,diffWords as q,diffChars as z}from"diff";import{useMemo as y,useState as A,useRef as F,useEffect as G}from"react";const L=(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}):W(o)},b=(r,i,n)=>{const[d,o]=A(null),h=F(!1);return G(()=>{if(h.current=!1,!i){o(null);return}const e=P(i);if(!T(e)){o(null);return}return(async()=>{try{const f=await I([e],n),l=M(f,r,e,n);h.current||o(l.tokens)}catch{h.current||o(null)}})(),()=>{h.current=!0}},[r,i,n]),d},R=(r,i,n="chars")=>{const d=E(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=V(l);for(const[N,t]of w)if(l[N].type==="del"&&l[t].type==="add"){const m=U(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},k=500,U=(r,i,n="chars")=>{if(r.length>k||i.length>k)return null;const d=n==="words"?q(r,i):z(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}},D=(r,i,n)=>u(H,{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))}),V=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};function X({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?D(e.inlineDiff.addParts,"green","green"):L(e.content,i,e.newLineNum,"green");break}case"del":{s="-",c="red",l=e.inlineDiff?D(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))})}function J({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?D(t.inlineDiff.delParts,"red","red"):L(t.content,n,t.oldLineNum,"red"),lineNum:t.oldLineNum}),c.push({content:m.inlineDiff?D(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],x=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(x?.lineNum??"").padStart(4)," "]}):void 0,x?.content]})]},t)})]},f)})})}function ee({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}=j(),t=b(s,o,w),m=b(f,o,w),x=y(()=>i||B("file",s,f,l,e,{context:r}),[i,s,f,l,e,r]),v=y(()=>R(x,n,d),[x,n,d]);if(v.every(S=>S.lines.length===0))return u(p,{children:u(a,{dimColor:!0,children:"No differences found."})});const C=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:[C,u(J,{hunks:v,newHighlighted:m,oldHighlighted:t,showLineNumbers:c,width:N??80})]}):g(p,{flexDirection:"column",children:[C,u(X,{hunks:v,newHighlighted:m,oldHighlighted:t,showLineNumbers:c})]})}export{ee as DiffView,ee as default};

package/dist/digits.d.ts

@@ -0,0 +1,26 @@
+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,44 @@
+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,41 @@
+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,45 @@
+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};