@visulima/tui-kit 0.0.0 → 1.0.0

package/dist/command-palette.js

@@ -0,0 +1 @@
+import{jsxs as a,jsx as n}from"react/jsx-runtime";import d from"@visulima/tui/components/box";import t from"@visulima/tui/components/text";import M from"@visulima/tui/hooks/use-focus";import S from"@visulima/tui/hooks/use-input";import{isInsertableInput as T}from"@visulima/tui/input";import{useState as y,useRef as D,useMemo as F,useEffect as A,useCallback as L}from"react";const j=(m,f)=>{if(m.length===0)return 1;const p=[f.label,f.description??"",...f.keywords??[]].map(i=>i.toLowerCase()).filter(i=>i.length>0),h=m.toLowerCase();let s=0;for(const i of p){if(i.includes(h)){const u=i.indexOf(h);s=Math.max(s,100-u);continue}let x=0,g=0;for(const u of h){const c=i.indexOf(u,x);if(c===-1){g=0;break}g+=1,x=c+1}g===h.length&&(s=Math.max(s,20))}return s};function P({accentColor:m="cyan",autoFocus:f=!0,commands:p,emptyText:h="No results",limit:s=8,onCancel:i,onSelect:x,placeholder:g="Type a command or search..."}){const{isFocused:u}=M({autoFocus:f}),[c,k]=y(""),[w,C]=y(0),b=D(w);b.current=w;const l=F(()=>{const e=p.map(r=>({command:r,score:j(c,r)})).filter(({score:r})=>r>0);return e.sort((r,o)=>o.score-r.score),e.slice(0,s).map(({command:r})=>r)},[p,c,s]);return A(()=>{const e=Math.max(0,l.length-1);b.current>e&&(b.current=e,C(e))},[l]),S(L((e,r)=>{if(u){if(r.escape){i?.();return}if(r.downArrow){if(l.length===0)return;C(o=>Math.min(l.length-1,o+1));return}if(r.upArrow){C(o=>Math.max(0,o-1));return}if(r.return){const o=l[b.current];o&&x(o.id,c);return}if(r.backspace||r.delete){k(o=>o.slice(0,-1)),C(0);return}T(e,r)&&(k(o=>o+e),C(0))}},[u,l,c,x,i]),{isActive:u}),a(d,{borderColor:m,borderStyle:"round",flexDirection:"column",paddingX:1,children:[a(d,{children:[n(t,{color:m,children:"❯"}),a(t,{children:[" ",c.length===0?n(t,{dimColor:!0,children:g}):c]}),n(t,{inverse:!0,children:" "})]}),n(d,{marginTop:1,children:a(t,{dimColor:!0,children:[l.length," of ",p.length]})}),n(d,{flexDirection:"column",marginTop:1,children:l.length===0?n(t,{dimColor:!0,children:h}):l.map((e,r)=>{const o=r===w,v=o?m:void 0;return a(d,{flexDirection:"column",children:[a(d,{children:[n(t,{color:v,children:o?"▸ ":"  "}),e.icon===void 0?void 0:a(t,{color:v,children:[e.icon," "]}),n(d,{flexGrow:1,flexShrink:1,minWidth:0,children:n(t,{bold:o,color:v,wrap:"truncate-end",children:e.label})}),e.hotkey===void 0?void 0:n(d,{flexShrink:0,children:a(t,{dimColor:!0,children:[" ",e.hotkey]})})]}),e.description===void 0?void 0:n(d,{marginLeft:2,children:n(t,{dimColor:!0,wrap:"truncate-end",children:e.description})})]},e.id)})})]})}export{P as CommandPalette,P as default};

package/dist/confirm-dialog.d.ts

@@ -0,0 +1,75 @@
+import { ReactNode, ReactElement } from 'react';
+type ConfirmTone = "danger" | "info" | "warning";
+type Props = {
+  /**
+  * Auto-focus the dialog on mount. Set `false` if a parent already owns
+  * focus and routes input here.
+  * @default true
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Label for the cancel button.
+  * @default "Cancel"
+  */
+  readonly cancelLabel?: string;
+  /**
+  * Body content (rendered between title and buttons).
+  */
+  readonly children?: ReactNode;
+  /**
+  * Label for the confirm button.
+  * @default "Confirm"
+  */
+  readonly confirmLabel?: string;
+  /**
+  * Default button when opening the dialog.
+  * @default "confirm"
+  */
+  readonly defaultFocus?: "cancel" | "confirm";
+  /**
+  * Disable input.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Fired when the user declines.
+  */
+  readonly onCancel: () => void;
+  /**
+  * Fired when the user confirms.
+  */
+  readonly onConfirm: () => void;
+  /**
+  * Heading rendered at the top of the dialog.
+  */
+  readonly title?: string;
+  /**
+  * Controls the border color.
+  * @default "info"
+  */
+  readonly tone?: ConfirmTone;
+  /**
+  * Dialog width.
+  */
+  readonly width?: number;
+};
+/**
+* Full-width modal-style confirm/cancel prompt. Unlike `ConfirmInput`, this
+* renders a visible two-button UI: ← / → to toggle focus, Enter to activate,
+* y/n as shortcuts, Esc to cancel.
+* @returns A bordered `ReactElement` with optional title, body, and two
+* buttons (cancel / confirm).
+*/
+declare function ConfirmDialog({
+  autoFocus,
+  cancelLabel,
+  children,
+  confirmLabel,
+  defaultFocus,
+  isDisabled,
+  onCancel,
+  onConfirm,
+  title,
+  tone,
+  width
+}: Props): ReactElement;
+export { ConfirmDialog, type Props as ConfirmDialogProps, ConfirmTone, Props, ConfirmDialog as default };

package/dist/confirm-dialog.js

@@ -0,0 +1 @@
+import{jsxs as b,jsx as o}from"react/jsx-runtime";import n from"@visulima/tui/components/box";import s from"@visulima/tui/components/text";import x from"@visulima/tui/hooks/use-focus";import y from"@visulima/tui/hooks/use-input";import{useState as D,useCallback as A}from"react";const j={danger:"red",info:"blue",warning:"yellow"},p=({color:l,isFocused:r,label:i})=>o(n,{backgroundColor:r?l:void 0,borderColor:r?l:void 0,borderStyle:"round",paddingX:1,children:o(s,{bold:r,color:r?"black":void 0,children:i})});function Y({autoFocus:l=!0,cancelLabel:r="Cancel",children:i,confirmLabel:h="Confirm",defaultFocus:g="confirm",isDisabled:u=!1,onCancel:a,onConfirm:f,title:m,tone:v="info",width:C}){const[e,F]=D(g),c=j[v],{isFocused:w}=x({autoFocus:l,isActive:!u});return y(A((t,d)=>{if(d.leftArrow||d.rightArrow||t==="h"||t==="l"){F(e==="confirm"?"cancel":"confirm");return}if(d.return){e==="confirm"?f():a();return}if(d.escape||t==="n"){a();return}t==="y"&&f()},[e,f,a]),{isActive:!u&&w}),b(n,{borderColor:c,borderStyle:"round",flexDirection:"column",paddingX:1,paddingY:1,width:C,children:[m===void 0?void 0:o(n,{marginBottom:1,children:o(s,{bold:!0,color:c,children:m})}),i===void 0?void 0:o(n,{flexDirection:"column",marginBottom:1,children:typeof i=="string"?o(s,{children:i}):i}),b(n,{gap:2,justifyContent:"flex-end",children:[o(p,{color:c,isFocused:e==="cancel",label:r}),o(p,{color:c,isFocused:e==="confirm",label:h})]})]})}export{Y as ConfirmDialog,Y as default};

package/dist/confirm-input.d.ts

@@ -0,0 +1,38 @@
+import { ReactElement } from 'react';
+type Props = {
+  /**
+  * The default action when pressing Enter without typing Y or N.
+  * @default "confirm"
+  */
+  readonly defaultChoice?: "cancel" | "confirm";
+  /**
+  * Whether the input is disabled.
+  * @default false
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Called when the user cancels (presses N).
+  */
+  readonly onCancel: () => void;
+  /**
+  * Called when the user confirms (presses Y).
+  */
+  readonly onConfirm: () => void;
+  /**
+  * Whether pressing Enter submits the default choice.
+  * @default true
+  */
+  readonly submitOnEnter?: boolean;
+};
+/**
+* Renders a Y/N confirmation prompt. Shows "Y/n" when default is confirm,
+* or "y/N" when default is cancel.
+*/
+declare function ConfirmInput({
+  defaultChoice,
+  isDisabled,
+  onCancel,
+  onConfirm,
+  submitOnEnter
+}: Props): ReactElement;
+export { ConfirmInput, type Props as ConfirmInputProps, Props, ConfirmInput as default };

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

package/dist/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};