@visulima/tui 1.0.0-alpha.9 → 1.0.1

package/dist/components/confirm-dialog.js

@@ -0,0 +1 @@
+import{jsxs as b,jsx as o}from"react/jsx-runtime";import{useState as w,useCallback as y}from"react";import k from"../ink/hooks/use-focus.js";import A from"../ink/hooks/use-input.js";import{Box as n}from"./box.js";import{Text as f}from"./text.js";const D={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(f,{bold:r,color:r?"black":void 0,children:i})});function X({autoFocus:l=!0,cancelLabel:r="Cancel",children:i,confirmLabel:h="Confirm",defaultFocus:g="confirm",isDisabled:u=!1,onCancel:a,onConfirm:s,title:m,tone:v="info",width:C}){const[e,x]=w(g),c=D[v],{isFocused:F}=k({autoFocus:l,isActive:!u});return A(y((t,d)=>{if(d.leftArrow||d.rightArrow||t==="h"||t==="l"){x(e==="confirm"?"cancel":"confirm");return}if(d.return){e==="confirm"?s():a();return}if(d.escape||t==="n"){a();return}t==="y"&&s()},[e,s,a]),{isActive:!u&&F}),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(f,{bold:!0,color:c,children:m})}),i===void 0?void 0:o(n,{flexDirection:"column",marginBottom:1,children:typeof i=="string"?o(f,{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{X as ConfirmDialog,X as default};

package/dist/components/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/components/confirm-input.js

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

package/dist/components/console-overlay.d.ts

@@ -0,0 +1,54 @@
+import { ReactElement } from 'react';
+import { ConsoleLevel } from "../ink/hooks/use-console-capture.js";
+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/components/console-overlay.js

@@ -0,0 +1 @@
+import{jsx as a,jsxs as d}from"react/jsx-runtime";import{useMemo as c}from"react";import g from"../ink/hooks/use-console-capture.js";import{Box as p}from"./box.js";import{Text as l}from"./text.js";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:u=!0}){const{entries:m}=g({filter:r,maxEntries:i}),s=c(()=>m.slice(-o),[m,o]);return a(p,{borderBottom:t==="top",borderBottomColor:"gray",borderTop:t==="bottom",borderTopColor:"gray",flexDirection:"column",height:o+1,children:s.length===0?a(l,{dimColor:!0,children:"Console output will appear here..."}):s.map(e=>d(p,{children:[u?d(l,{dimColor:!0,children:["[",b(e.timestamp),"]"," "]}):void 0,n?d(l,{color:h[e.level],children:[f[e.level]," "]}):void 0,a(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/components/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/components/content-switcher.js

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

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

@@ -0,0 +1,61 @@
+import React, { ReactNode, Ref } from 'react';
+import { BoxProps as Props } from "./box.js";
+import 'type-fest';
+import "../packem_shared/dom.d-B4kXbaVY.js";
+import 'yoga-layout';
+import "../packem_shared/cursor-helpers.d-BONB9tky.js";
+import '@visulima/colorize';
+import 'cli-boxes';
+import "../packem_shared/styles.d-cMo36xQz.js";
+interface ControlledScrollViewProps extends Props {
+  children?: ReactNode;
+  debug?: boolean;
+  onContentHeightChange?: (height: number, previousHeight: number) => void;
+  onItemHeightChange?: (index: number, height: number, previousHeight: number) => void;
+  onViewportSizeChange?: (size: {
+    height: number;
+    width: number;
+  }, previousSize: {
+    height: number;
+    width: number;
+  }) => void;
+  /**
+  * Number of extra items to render above/below the viewport when virtualized.
+  * @default 3
+  */
+  overscan?: number;
+  scrollOffset: number;
+  /**
+  * Only render items visible in the viewport plus overscan.
+  * Items must be measured first (first render always renders all items).
+  * @default false
+  */
+  virtualize?: boolean;
+}
+interface ControlledScrollViewRef {
+  getBottomOffset: () => number;
+  getContentHeight: () => number;
+  getItemHeight: (index: number) => number;
+  getItemPosition: (index: number) => {
+    height: number;
+    top: number;
+  } | null;
+  getViewportHeight: () => number;
+  remeasure: () => void;
+  remeasureItem: (index: number) => void;
+}
+declare const ControlledScrollView: ({
+  children,
+  debug,
+  onContentHeightChange,
+  onItemHeightChange,
+  onViewportSizeChange,
+  overscan,
+  ref,
+  scrollOffset,
+  virtualize,
+  ...boxProps
+}: ControlledScrollViewProps & {
+  ref?: Ref<ControlledScrollViewRef>;
+}) => React.JSX.Element;
+export { ControlledScrollView, type ControlledScrollViewProps, type ControlledScrollViewRef };

package/dist/components/controlled-scroll-view.js

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

package/dist/components/cursor.d.ts

@@ -0,0 +1,62 @@
+import React, { RefObject } from 'react';
+import { C as CursorShape } from "../packem_shared/cursor-helpers.d-BONB9tky.js";
+import { D as DOMElement } from "../packem_shared/dom.d-B4kXbaVY.js";
+import 'yoga-layout';
+import '@visulima/colorize';
+import 'cli-boxes';
+import "../packem_shared/styles.d-cMo36xQz.js";
+import 'type-fest';
+type Props = {
+  /**
+  * Optional reference to anchor cursor coordinates to a different element.
+  * If omitted, `<Cursor>` uses the parent container as anchor.
+  * If `anchorRef` is set but currently unresolved, Ink hides the cursor for that frame.
+  * If multiple `<Cursor>` components are rendered in one frame, the last rendered one controls the terminal cursor position.
+  */
+  readonly anchorRef?: RefObject<DOMElement | null>;
+  /**
+  * Optional cursor shape (DECSCUSR). The shape is restored to the terminal
+  * default on unmount, SIGINT, and unhandled React tree throws, so the
+  * parent shell never inherits a leaked shape.
+  *
+  * Steady variants are non-blinking; `blinking-*` variants opt into blink.
+  */
+  readonly shape?: CursorShape;
+  /**
+  * Horizontal offset from anchor content origin.
+  */
+  readonly x?: number;
+  /**
+  * Vertical offset from anchor content origin.
+  */
+  readonly y?: number;
+};
+/**
+* Declaratively position the terminal cursor.
+* `&lt;Cursor>` must not be rendered inside `&lt;Text>`.
+*
+* **Inline mode** (no props): place `&lt;Cursor />` after a `&lt;Text>` node and the
+* cursor appears where that text ended — even when text wraps across lines.
+*
+* **Anchor mode**: pass `anchorRef` and/or `x`/`y` to position relative to
+* another element's content origin.
+* @example Inline mode — cursor follows text naturally
+* ```jsx
+* <Box>
+*     <Text>{prompt + value}</Text>
+*     <Cursor />
+* </Box>
+* ```
+* @example Anchor mode — offset from a referenced element
+* ```jsx
+* <Box ref={ref} />
+* <Cursor anchorRef={ref} x={5} />
+* ```
+*/
+declare function Cursor({
+  anchorRef,
+  shape,
+  x,
+  y
+}: Props): React.JSX.Element;
+export { Cursor, type Props as CursorProps, Props, Cursor as default };

package/dist/components/cursor.js

@@ -0,0 +1 @@
+import{jsx as a}from"react/jsx-runtime";import{useMemo as u}from"react";function p({anchorRef:i,shape:s,x:o=0,y:r=0}){const n=i??void 0,e=n===void 0&&o===0&&r===0,t=u(()=>({anchorRef:n,inline:e,shape:s,x:o,y:r}),[n,e,s,o,r]);return a("ink-cursor",{internal_cursor:t})}export{p as Cursor,p as default};

package/dist/components/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/components/date-picker.js

@@ -0,0 +1 @@
+import{jsxs as g,jsx as o}from"react/jsx-runtime";import{useState as C,useCallback as h}from"react";import $ from"../ink/hooks/use-focus.js";import b from"../ink/hooks/use-input.js";import{Box as i}from"./box.js";import{Calendar as T}from"./calendar.js";import{Text as l}from"./text.js";const V=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=V,isDisabled:s=!1,maxDate:D,minDate:x,onChange:v,placeholder:S="Pick a date",value:u}){const{isFocused:r}=$({autoFocus:n,isActive:!s}),[t,m]=C(!1),[F,k]=C(c),f=u??F;b(h((a,p)=>{!r||t||(p.return||a===" ")&&m(!0)},[r,t]),{isActive:!s&&r&&!t}),b(h((a,p)=>{p.escape&&m(!1)},[]),{isActive:!s&&r&&t});const A=h(a=>{u===void 0&&k(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:S}):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(T,{accentColor:e,autoFocus:!0,defaultValue:f,maxDate:D,minDate:x,onSubmit:A})}):void 0]})}export{O as DatePicker,O as default};

package/dist/components/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/components/definition-list.js

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

package/dist/components/dialog.d.ts

@@ -0,0 +1,117 @@
+import { ReactNode, ReactElement } from 'react';
+import 'yoga-layout';
+import '@visulima/colorize';
+import 'cli-boxes';
+import { b as ScrollViewRef } from "../packem_shared/scroll-view.d-DtpsgHLg.js";
+import "./box.js";
+import 'type-fest';
+import "../packem_shared/dom.d-B4kXbaVY.js";
+import "../packem_shared/cursor-helpers.d-BONB9tky.js";
+import "../packem_shared/styles.d-cMo36xQz.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/components/dialog.js

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

package/dist/components/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/components/diff-view.js

@@ -0,0 +1 @@
+import{jsx as u,jsxs as g,Fragment as P}from"react/jsx-runtime";import{createPatch as H,parsePatch as T,diffWords as I,diffChars as M}from"diff";import{useMemo as k,useState as W,useRef as B,useEffect as j}from"react";import{r as q,i as z,w as A,g as E,a as F}from"../packem_shared/token-to-elements-D6J6-P2A.js";import G from"../ink/hooks/use-window-size.js";import{Box as p}from"./box.js";import{Text as a}from"./text.js";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}):F(o)},y=(r,i,n)=>{const[d,o]=W(null),h=B(!1);return j(()=>{if(h.current=!1,!i){o(null);return}const e=q(i);if(!z(e)){o(null);return}return(async()=>{try{const f=await A([e],n),l=E(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=T(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},b=500,U=(r,i,n="chars")=>{if(r.length>b||i.length>b)return null;const d=n==="words"?I(r,i):M(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(P,{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}=G(),t=y(s,o,w),m=y(f,o,w),x=k(()=>i||H("file",s,f,l,e,{context:r}),[i,s,f,l,e,r]),v=k(()=>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};