@visulima/tui 1.0.0-alpha.2 → 1.0.0-alpha.20

package/dist/components/static-render.d.ts

@@ -0,0 +1,54 @@
+import React, { ReactNode, DependencyList } from 'react';
+import { D as DOMElement } from "../packem_shared/dom.d-DgP_exKU.js";
+import { S as Styles } from "../packem_shared/styles.d-CLJdt-kg.js";
+import 'yoga-layout';
+import "../packem_shared/cursor-helpers.d-BONB9tky.js";
+import "../packem_shared/index.server.d-eZWyC2Ku.js";
+import 'type-fest';
+
+/**
+* StaticRender component — pre-renders children once and caches the result.
+*
+* When mounted, StaticRender renders its children into a Region via
+* prepareYogaTree() in the Ink layout phase, then caches the result on the
+* DOM node. On subsequent renders, the cached Region is composited directly
+* via addRegionTree(), skipping the entire subtree traversal.
+*
+* Children are passed as a render function `() => ReactNode`. Once the cache
+* is ready, the component stops calling the function so React does not
+* re-reconcile the subtree on subsequent renders.
+*
+* Re-rendering the cached content is controlled via the `deps` prop (similar
+* to React's hook deps). When `deps` changes, the cache is invalidated and
+* `children()` is invoked again. If `deps` is omitted, the cache is
+* invalidated whenever the `children` function reference changes.
+*
+* Use this for content that renders once and doesn't change (e.g., completed
+* task output, logged messages, static headers).
+*
+* Ported from jacob314/ink (Google LLC, Apache-2.0).
+* @license Apache-2.0
+*/
+
+/**
+* @property children Render function invoked once to produce the cached content.
+* @property deps Dependencies that control when the static content is re-rendered. When any dependency changes (shallow, Object.is comparison), the cache is invalidated and children() is invoked again. If omitted, the cache is invalidated whenever the children function reference changes.
+* @property onRender Callback fired after the static content has been rendered and cached. The node's cachedRender holds the measured width/height — useful for reacting to the cached block's size without setting up a full ResizeObserver.
+* @property style Optional style applied to the static-render container.
+* @property width Optional fixed width for the cached region.
+*/
+type Props = {
+  readonly children: () => ReactNode;
+  readonly deps?: DependencyList;
+  readonly onRender?: (node: DOMElement) => void;
+  readonly style?: Styles;
+  readonly width?: number;
+};
+declare const StaticRender: ({
+  children,
+  deps,
+  onRender,
+  style,
+  width
+}: Props) => React.ReactNode;
+export { Props, StaticRender, type Props as StaticRenderProps, StaticRender as default };

package/dist/components/static-render.js

@@ -0,0 +1 @@
+var p=Object.defineProperty;var R=(e,r)=>p(e,"name",{value:r,configurable:!0});import{jsx as v}from"react/jsx-runtime";import{useRef as u,useLayoutEffect as y,useEffect as b,useMemo as g}from"react";var j=Object.defineProperty,h=R((e,r)=>j(e,"name",{value:r,configurable:!0}),"u");const E=h((e,r)=>{if(e===r)return!0;if(!e||!r||e.length!==r.length)return!1;for(const[c,a]of e.entries())if(!Object.is(a,r[c]))return!1;return!0},"areDepsEqual"),O=h(({children:e,deps:r,onRender:c,style:a,width:s})=>{const n=u(null),i=u(!1),d=u(r),l=u(e),f=u(c);f.current=c;let o=!1;r!==void 0?E(d.current,r)||(o=!0,d.current=r):e!==l.current&&(o=!0,l.current=e),o&&(i.current=!1,n.current&&(n.current.cachedRender=void 0)),y(()=>{const t=n.current;t&&(t.internal_onRendered=()=>{i.current=!0,f.current?.(t)})}),b(()=>()=>{const t=n.current;t&&(t.cachedRender=void 0,t.internal_onRendered=void 0)},[]);const m=g(()=>({...a,width:s}),[a,s]);return v("ink-static-render",{ref:n,style:m,children:i.current?null:e()})},"StaticRender");export{O as StaticRender,O as default};

package/dist/components/static.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode, ReactElement } from 'react';
+import { S as Styles } from "../packem_shared/styles.d-CLJdt-kg.js";
+import "../packem_shared/index.server.d-eZWyC2Ku.js";
+import 'type-fest';
+import 'yoga-layout';
+type Props<T> = {
+  /**
+  * Function that is called to render every item in the `items` array. The first argument is the item itself, and the second argument is the index of that item in the `items` array. Note that a `key` must be assigned to the root component.
+  */
+  readonly children: (item: T, index: number) => ReactNode;
+  /**
+  * Array of items of any type to render using the function you pass as a component child.
+  */
+  readonly items: T[];
+  /**
+  * Styles to apply to a container of child elements. See &lt;Box> for supported properties.
+  */
+  readonly style?: Styles;
+};
+/**
+* `&lt;Static>` component permanently renders its output above everything else. It's useful for displaying activity like completed tasks or logs—things that don't change after they're rendered (hence the name "Static").
+*
+* It's preferred to use `&lt;Static>` for use cases like these when you can't know or control the number of items that need to be rendered.
+*
+* For example, [Tap](https://github.com/tapjs/node-tap) uses `&lt;Static>` to display a list of completed tests. [Gatsby](https://github.com/gatsbyjs/gatsby) uses it to display a list of generated pages while still displaying a live progress bar.
+*/
+declare function Static<T>(props: Props<T>): ReactElement;
+export { Props, Static, type Props as StaticProps, Static as default };

package/dist/components/static.js

@@ -0,0 +1 @@
+var p=Object.defineProperty;var o=(e,t)=>p(e,"name",{value:t,configurable:!0});import{jsx as y}from"react/jsx-runtime";import{useState as b,useMemo as a,useLayoutEffect as d}from"react";var h=Object.defineProperty,x=o((e,t)=>h(e,"name",{value:t,configurable:!0}),"r");function g(e){const{children:t,items:i,style:r}=e,[n,s]=b(0),c=a(()=>i.slice(n),[i,n]);d(()=>{s(i.length)},[i.length]);const l=c.map((f,m)=>t(f,n+m)),u=a(()=>({flexDirection:"column",position:"absolute",...r}),[r]);return y("ink-box",{internal_static:!0,style:u,children:l})}o(g,"i");x(g,"Static");export{g as Static,g as default};

package/dist/components/status-line.d.ts

@@ -0,0 +1,37 @@
+import { A as AnsiColors } from "../packem_shared/index.server.d-eZWyC2Ku.js";
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Background color spanning the whole row.
+  */
+  readonly backgroundColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Content rendered in the center. Optional.
+  */
+  readonly center?: ReactNode;
+  /**
+  * Default foreground for text rendered inside the row.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Content rendered flush-left.
+  */
+  readonly left?: ReactNode;
+  /**
+  * Content rendered flush-right.
+  */
+  readonly right?: ReactNode;
+};
+/**
+* Full-width status bar with left / center / right slots. Typically pinned to
+* the bottom of the UI.
+*/
+declare function StatusLine({
+  backgroundColor,
+  center,
+  color,
+  left,
+  right
+}: Props): ReactElement;
+export { Props, StatusLine, type Props as StatusLineProps, StatusLine as default };

package/dist/components/status-line.js

@@ -0,0 +1 @@
+var a=Object.defineProperty;var i=(r,e)=>a(r,"name",{value:e,configurable:!0});import{jsxs as s,jsx as n}from"react/jsx-runtime";import{Box as t}from"./box.js";import{Text as u}from"./text.js";var h=Object.defineProperty,d=i((r,e)=>h(r,"name",{value:e,configurable:!0}),"i");const l=d((r,e)=>{if(r!==void 0)return typeof r=="string"||typeof r=="number"?n(u,{color:e,children:r}):r},"renderSlot");function x({backgroundColor:r,center:e,color:o,left:f,right:c}){return s(t,{backgroundColor:r,paddingX:1,width:"100%",children:[n(t,{flexGrow:1,flexShrink:1,minWidth:0,children:l(f,o)}),e===void 0?void 0:n(t,{flexGrow:0,flexShrink:0,justifyContent:"center",children:l(e,o)}),n(t,{flexGrow:1,flexShrink:1,justifyContent:"flex-end",minWidth:0,children:l(c,o)})]})}i(x,"l");d(x,"StatusLine");export{x as StatusLine,x as default};

package/dist/components/status-message.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, ReactElement } from 'react';
+import { V as Variant } from "../packem_shared/variant-config.d-D5NnrrQK.js";
+type StatusMessageVariant = Variant;
+type Props = {
+  /**
+  * Message content.
+  */
+  readonly children: ReactNode;
+  /**
+  * Determines the icon and color of the status message.
+  */
+  readonly variant: StatusMessageVariant;
+};
+/**
+* Renders a status notification with a colored icon and message text.
+*/
+declare function StatusMessage({
+  children,
+  variant
+}: Props): ReactElement;
+export { Props, StatusMessage, type Props as StatusMessageProps, StatusMessageVariant, StatusMessage as default };

package/dist/components/status-message.js

@@ -0,0 +1 @@
+var i=Object.defineProperty;var e=(r,o)=>i(r,"name",{value:o,configurable:!0});import{jsxs as c,jsx as a}from"react/jsx-runtime";import{Box as l}from"./box.js";import{Text as t}from"./text.js";import{o as m}from"../packem_shared/variant-config-BJqpNo7H.js";var f=Object.defineProperty,p=e((r,o)=>f(r,"name",{value:o,configurable:!0}),"o");function u({children:r,variant:o}){const{color:s,icon:n}=m[o];return c(l,{gap:1,children:[a(t,{color:s,children:n}),a(t,{children:r})]})}e(u,"p");p(u,"StatusMessage");export{u as StatusMessage,u as default};

package/dist/components/stepper.d.ts

@@ -0,0 +1,48 @@
+import { A as AnsiColors } from "../packem_shared/index.server.d-eZWyC2Ku.js";
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type StepStatus = "active" | "completed" | "error" | "pending";
+type StepperStep = {
+  readonly description?: string;
+  readonly key?: string;
+  readonly label: ReactNode;
+  readonly status?: StepStatus;
+};
+type Props = {
+  /**
+  * Color used for active and completed steps.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Index of the current step (used when steps do not provide a status).
+  * @default 0
+  */
+  readonly activeIndex?: number;
+  /**
+  * Color used for errors.
+  * @default "red"
+  */
+  readonly errorColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Orientation of the stepper.
+  * @default "horizontal"
+  */
+  readonly orientation?: "horizontal" | "vertical";
+  /**
+  * List of steps.
+  */
+  readonly steps: ReadonlyArray<StepperStep>;
+};
+/**
+* Step indicator for multi-stage flows.
+* @returns A `ReactElement` rendering the steps horizontally or vertically.
+*/
+declare function Stepper({
+  accentColor,
+  activeIndex,
+  errorColor,
+  orientation,
+  steps
+}: Props): ReactElement;
+export { Props, StepStatus, Stepper, type Props as StepperProps, StepperStep, Stepper as default };

package/dist/components/stepper.js

@@ -0,0 +1 @@
+var x=Object.defineProperty;var h=(r,o)=>x(r,"name",{value:o,configurable:!0});import{jsx as n,jsxs as c}from"react/jsx-runtime";import{Fragment as C}from"react";import{Box as t}from"./box.js";import{Text as d}from"./text.js";var b=Object.defineProperty,g=h((r,o)=>b(r,"name",{value:o,configurable:!0}),"u");const u={active:"●",completed:"✔",error:"✖",pending:"○"},v=g((r,o,a)=>r.status!==void 0?r.status:o<a?"completed":o===a?"active":"pending","resolveStatus");function y({accentColor:r="blue",activeIndex:o=0,errorColor:a="red",orientation:f="horizontal",steps:m}){return f==="vertical"?n(t,{flexDirection:"column",children:m.map((i,l)=>{const e=v(i,l,o),p=l===m.length-1,s=e==="error"?a:e==="pending"?void 0:r;return c(t,{flexDirection:"column",children:[c(t,{children:[c(d,{color:s,dimColor:e==="pending",children:[u[e]," "]}),n(d,{bold:e==="active",color:s,dimColor:e==="pending",children:i.label})]}),i.description===void 0?void 0:n(t,{marginLeft:2,children:n(d,{dimColor:!0,children:i.description})}),p?void 0:n(t,{marginLeft:0,children:n(d,{dimColor:!0,children:"│"})})]},i.key??l)})}):n(t,{children:m.map((i,l)=>{const e=v(i,l,o),p=e==="error"?a:e==="pending"?void 0:r,s=l===m.length-1;return c(C,{children:[c(t,{children:[c(d,{color:p,dimColor:e==="pending",children:[u[e]," "]}),n(d,{bold:e==="active",color:p,dimColor:e==="pending",children:i.label})]}),s?void 0:n(d,{dimColor:!0,children:" ── "})]},i.key??l)})})}h(y,"g");g(y,"Stepper");export{y as Stepper,y as default};

package/dist/components/stopwatch.d.ts

@@ -0,0 +1,49 @@
+import { Ref, ReactElement } from 'react';
+import { UseStopwatchResult } from "../ink/hooks/use-stopwatch.js";
+type StopwatchRef = Omit<UseStopwatchResult, "elapsed" | "isRunning" | "laps">;
+type Props = {
+  /**
+  * Whether to start counting immediately.
+  * @default false
+  */
+  readonly autoStart?: boolean;
+  /**
+  * Make the rendered text bold.
+  */
+  readonly bold?: boolean;
+  /**
+  * Text color for the rendered time.
+  */
+  readonly color?: string;
+  /**
+  * Custom formatter for the elapsed time.
+  * Receives elapsed milliseconds, returns a display string.
+  * @default formatDuration (MM:SS or HH:MM:SS)
+  */
+  readonly format?: (elapsed: number) => string;
+  /**
+  * Tick interval in milliseconds.
+  * @default 1000
+  */
+  readonly interval?: number;
+  readonly ref?: Ref<StopwatchRef>;
+};
+/**
+* A count-up stopwatch component.
+*
+* Exposes `start`, `stop`, `toggle`, `reset`, and `lap` methods via ref.
+*
+* ```tsx
+* const ref = useRef&lt;StopwatchRef>(null);
+* &lt;Stopwatch ref={ref} autoStart />
+* ```
+*/
+declare const Stopwatch: ({
+  autoStart,
+  bold,
+  color,
+  format,
+  interval,
+  ref
+}: Props) => ReactElement;
+export { Props, Stopwatch, type Props as StopwatchProps, StopwatchRef, Stopwatch as default };

package/dist/components/stopwatch.js

@@ -0,0 +1 @@
+var m=Object.defineProperty;var e=(r,o)=>m(r,"name",{value:o,configurable:!0});import{jsx as f}from"react/jsx-runtime";import{useImperativeHandle as i}from"react";import n from"../ink/hooks/use-stopwatch.js";import{f as c}from"../packem_shared/format-time-C7Q-hQZq.js";import{Text as u}from"./text.js";var d=Object.defineProperty,g=e((r,o)=>d(r,"name",{value:o,configurable:!0}),"r");const w=g(({autoStart:r,bold:o,color:a,format:l=c,interval:p,ref:s})=>{const t=n({autoStart:r,interval:p});return i(s,()=>({lap:t.lap,reset:t.reset,start:t.start,stop:t.stop,toggle:t.toggle}),[t.lap,t.reset,t.start,t.stop,t.toggle]),f(u,{bold:o,color:a,children:l(t.elapsed)})},"Stopwatch");export{w as Stopwatch,w as default};

package/dist/components/streaming-text.d.ts

@@ -0,0 +1,46 @@
+import { A as AnsiColors } from "../packem_shared/index.server.d-eZWyC2Ku.js";
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Color applied to the streamed output.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Glyph rendered at the streaming caret while characters are still being revealed.
+  * @default "▊" (left three quarters block)
+  */
+  readonly cursor?: string;
+  /**
+  * Milliseconds between characters.
+  * @default 20
+  */
+  readonly interval?: number;
+  /**
+  * Called exactly once per `text` value, after the full text has been revealed.
+  */
+  readonly onComplete?: () => void;
+  /**
+  * Whether to display the cursor after streaming completes.
+  * @default false
+  */
+  readonly showCursorWhenDone?: boolean;
+  /**
+  * Full text to stream into the output.
+  */
+  readonly text: string;
+};
+/**
+* Typewriter animation that reveals text one character at a time.
+* Automatically resets and replays when `text` changes. `onComplete`
+* fires exactly once per `text` value once it is fully revealed.
+*/
+declare function StreamingText({
+  color,
+  cursor,
+  interval,
+  onComplete,
+  showCursorWhenDone,
+  text
+}: Props): ReactElement;
+export { Props, StreamingText, type Props as StreamingTextProps, StreamingText as default };

package/dist/components/streaming-text.js

@@ -0,0 +1 @@
+var T=Object.defineProperty;var u=(r,t)=>T(r,"name",{value:t,configurable:!0});import{jsxs as d}from"react/jsx-runtime";import{useState as v,useRef as f,useEffect as i}from"react";import{Text as C}from"./text.js";var S=Object.defineProperty,b=u((r,t)=>S(r,"name",{value:t,configurable:!0}),"c");function j({color:r,cursor:t="▊",interval:c=20,onComplete:a,showCursorWhenDone:m=!1,text:e}){const[n,s]=v(0),l=f(a),o=f(!1);l.current=a,i(()=>{s(0),o.current=!1},[e]),i(()=>{if(n>=e.length){o.current||(o.current=!0,l.current?.());return}const p=setTimeout(()=>{s(x=>Math.min(e.length,x+1))},c);return()=>{clearTimeout(p)}},[n,e,c]);const g=!(n>=e.length)||m,h=e.slice(0,n);return d(C,{color:r,children:[h,g?t:""]})}u(j,"u");b(j,"StreamingText");export{j as StreamingText,j as default};

package/dist/components/switch.d.ts

@@ -0,0 +1,55 @@
+import { A as AnsiColors } from "../packem_shared/index.server.d-eZWyC2Ku.js";
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color for the on state.
+  * @default "green"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus when mounted if nothing else is focused.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Optional label rendered after the switch.
+  */
+  readonly children?: ReactNode;
+  /**
+  * Initial value when uncontrolled.
+  */
+  readonly defaultValue?: boolean;
+  /**
+  * Disable input and dim the switch.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Labels displayed inside the switch track.
+  * @default ["off", "on"]
+  */
+  readonly labels?: readonly [string, string];
+  /**
+  * Fired when the switch is toggled.
+  */
+  readonly onChange?: (value: boolean) => void;
+  /**
+  * Controlled value. Pair with `onChange` to update the parent.
+  */
+  readonly value?: boolean;
+};
+/**
+* Focusable on/off switch. Toggles with Space or Enter.
+* @returns A `ReactElement` rendering two labeled segments plus an optional
+* trailing label.
+*/
+declare function Switch({
+  accentColor,
+  autoFocus,
+  children,
+  defaultValue,
+  isDisabled,
+  labels,
+  onChange,
+  value
+}: Props): ReactElement;
+export { Props, Switch, type Props as SwitchProps, Switch as default };

package/dist/components/switch.js

@@ -0,0 +1 @@
+var j=Object.defineProperty;var t=(o,i)=>j(o,"name",{value:i,configurable:!0});import{jsxs as l,jsx as y}from"react/jsx-runtime";import{useState as A,useCallback as F}from"react";import S from"../ink/hooks/use-focus.js";import w from"../ink/hooks/use-input.js";import{Box as m}from"./box.js";import{Text as n}from"./text.js";var P=Object.defineProperty,T=t((o,i)=>P(o,"name",{value:i,configurable:!0}),"u");const B=["off","on"];function D({accentColor:o="green",autoFocus:i=!1,children:s,defaultValue:v=!1,isDisabled:e=!1,labels:d=B,onChange:u,value:c}){const{isFocused:a}=S({autoFocus:i,isActive:!e}),[b,p]=A(v),r=c??b;w(F((x,k)=>{if(a&&(k.return||x===" ")){const f=!r;c===void 0&&p(f),u?.(f)}},[a,r,c,u]),{isActive:!e&&a});const g=d[0],h=d[1],C=a?o:void 0;return l(m,{gap:1,children:[l(m,{gap:0,children:[l(n,{backgroundColor:r?void 0:"gray",color:r?void 0:"black",dimColor:e,children:[" ",g," "]}),l(n,{backgroundColor:r?o:void 0,color:r?"black":void 0,dimColor:e,children:[" ",h," "]})]}),s===void 0?void 0:y(n,{color:C,dimColor:e,children:s})]})}t(D,"m");T(D,"Switch");export{D as Switch,D as default};

package/dist/components/tab.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode, ReactElement } from 'react';
+type Props = {
+  /**
+  * Tab content to render when the tab is active.
+  */
+  readonly children: ReactNode;
+  /**
+  * Unique name identifying this tab.
+  */
+  readonly name: string;
+};
+/**
+* A single tab within a Tabs container.
+* The `name` prop identifies the tab; `children` is rendered when active.
+*/
+declare function Tab({
+  children
+}: Props): ReactElement;
+export { Props, Tab, type Props as TabProps, Tab as default };

package/dist/components/tab.js

@@ -0,0 +1 @@
+var t=Object.defineProperty;var a=(e,r)=>t(e,"name",{value:r,configurable:!0});import{jsx as n,Fragment as o}from"react/jsx-runtime";var i=Object.defineProperty,u=a((e,r)=>i(e,"name",{value:r,configurable:!0}),"t");function c({children:e}){return n(o,{children:e})}a(c,"o");u(c,"Tab");export{c as Tab,c as default};

package/dist/components/table.d.ts

@@ -0,0 +1,119 @@
+import { ReactElement } from 'react';
+interface BorderComponent {
+  char: string;
+  width: number;
+}
+/**
+* Represents the style of the border for a table or grid.
+*/
+interface BorderStyle {
+  /** Box vertical character. */
+  bodyJoin: BorderComponent;
+  /** Box vertical character. */
+  bodyLeft: BorderComponent;
+  /** Box vertical character. */
+  bodyRight: BorderComponent;
+  /** Box horizontal character. */
+  bottomBody: BorderComponent;
+  /** Box bottom join character. */
+  bottomJoin: BorderComponent;
+  /** Box bottom left character. */
+  bottomLeft: BorderComponent;
+  /** Box bottom right character. */
+  bottomRight: BorderComponent;
+  /** Box horizontal character. */
+  joinBody: BorderComponent;
+  /** Box horizontal join character. */
+  joinJoin: BorderComponent;
+  /** Box left join character. */
+  joinLeft: BorderComponent;
+  /** Box right join character. */
+  joinRight: BorderComponent;
+  /** Box horizontal character. */
+  topBody: BorderComponent;
+  /** Box top join character. */
+  topJoin: BorderComponent;
+  /** Box top left character. */
+  topLeft: BorderComponent;
+  /** Box top right character. */
+  topRight: BorderComponent;
+}
+/** Base style properties applicable globally */
+type HorizontalAlignment = "center" | "left" | "right";
+/**
+* Scalar value that can be displayed in a table cell.
+*/
+type Scalar = bigint | boolean | number | string | null | undefined;
+/**
+* Dictionary with scalar values, representing a single row of data.
+*/
+type ScalarDict = Record<string, Scalar>;
+/**
+* Configuration for a single table column.
+*/
+type ColumnConfig<T extends ScalarDict> = {
+  /**
+  * Horizontal alignment of cell content.
+  */
+  readonly align?: HorizontalAlignment;
+  /**
+  * Custom header label. Defaults to the key name.
+  */
+  readonly header?: string;
+  /**
+  * Key from the data object to display in this column.
+  */
+  readonly key: keyof T & string;
+  /**
+  * Fixed width for this column in characters.
+  */
+  readonly width?: number;
+};
+type Props<T extends ScalarDict> = {
+  /**
+  * Border style preset name or a custom `BorderStyle` object from `@visulima/tabular`.
+  * @default "default"
+  */
+  readonly borderStyle?: "ascii" | "block" | "default" | "dots" | "double" | "markdown" | "minimal" | "none" | "rounded" | "thick" | BorderStyle;
+  /**
+  * Columns to display and their order.
+  * Accepts simple key strings or `ColumnConfig` objects for advanced control.
+  * If omitted, all keys from the first data item are used.
+  */
+  readonly columns?: ((keyof T & string) | ColumnConfig<T>)[];
+  /**
+  * Array of objects to display as rows.
+  */
+  readonly data: T[];
+  /**
+  * Format a cell value before rendering. Return a string to display in the cell.
+  */
+  readonly formatCell?: (value: Scalar, column: keyof T & string, rowIndex: number) => string;
+  /**
+  * Format a header label before rendering. Return a string to display as the column header.
+  */
+  readonly formatHeader?: (column: keyof T & string) => string;
+  /**
+  * Maximum width of the table in characters. Columns will be truncated or wrapped to fit.
+  */
+  readonly maxWidth?: number;
+  /**
+  * Cell padding (left and right) in characters.
+  * @default 1
+  */
+  readonly padding?: number;
+  /**
+  * Whether to show the header row.
+  * @default true
+  */
+  readonly showHeader?: boolean;
+  /** Placeholder shown in place of `null` or `undefined` cell values. Defaults to an empty string. */
+  readonly skeleton?: string;
+  /**
+  * Enable word wrap instead of truncation when cells exceed their width.
+  * @default false
+  */
+  readonly wordWrap?: boolean;
+};
+declare const Table: <T extends ScalarDict>(props: Props<T>) => ReactElement;
+export { type ColumnConfig, type Props, type Scalar, type ScalarDict, Table, type ColumnConfig as TableColumnConfig, type Props as TableProps, type Scalar as TableScalar, type ScalarDict as TableScalarDict, Table as default };

package/dist/components/table.js

@@ -0,0 +1 @@
+var b=Object.defineProperty;var E=(e,o)=>b(e,"name",{value:o,configurable:!0});import{jsx as _}from"react/jsx-runtime";import{Table as w}from"@visulima/tabular";import{THICK_BORDER as C,ROUNDED_BORDER as T,NO_BORDER as W,MINIMAL_BORDER as S,MARKDOWN_BORDER as v,DOUBLE_BORDER as x,DOTS_BORDER as H,DEFAULT_BORDER as h,BLOCK_BORDER as I,ASCII_BORDER as L}from"@visulima/tabular/style";import{useMemo as N}from"react";import{Text as A}from"./text.js";var K=Object.defineProperty,k=E((e,o)=>K(e,"name",{value:o,configurable:!0}),"f");const M={ascii:L,block:I,default:h,dots:H,double:x,markdown:v,minimal:S,none:W,rounded:T,thick:C},j=k(e=>typeof e=="string"?{key:e}:e,"toColumnConfig"),U=k(({borderStyle:e="default",columns:o,data:n,formatCell:d,formatHeader:m,maxWidth:u,padding:i=1,showHeader:l=!0,skeleton:p="",wordWrap:O=!1})=>{const B=N(()=>{if(n.length===0)return"";let r;if(o?r=o.map(t=>j(t)):r=Object.keys(n[0]).map(t=>({key:t})),r.length===0)return"";const g=typeof e=="string"?M[e]??h:e,D=r.map(t=>t.width),y=D.some(t=>t!==void 0),s=new w({columnWidths:y?D:void 0,maxWidth:u,showHeader:l,style:{border:g,paddingLeft:i,paddingRight:i},wordWrap:O});if(l){const t=r.map(a=>{const f=a.header??a.key;return m?m(a.key):f});s.setHeaders(t)}for(const[t,a]of n.entries()){const f=r.map(c=>{const R=a[c.key];return d?d(R,c.key,t):R==null?p:String(R)});s.addRow(f)}return s.toString()},[e,o,n,d,m,u,i,l,p,O]);return _(A,{children:B})},"TableComponent"),Q=U;export{Q as Table,Q as default};

package/dist/components/tabs.d.ts

@@ -0,0 +1,107 @@
+import { A as AnsiColors } from "../packem_shared/index.server.d-eZWyC2Ku.js";
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+import { Props as Props$1 } from "./tab.js";
+/**
+* Keyboard navigation configuration for Tabs.
+*/
+type KeyMap = {
+  /**
+  * Key names that move to the next tab.
+  * Defaults to `["rightArrow"]` for row layouts and `["downArrow"]` for column layouts.
+  */
+  readonly next?: ReadonlyArray<string>;
+  /**
+  * Key names that move to the previous tab.
+  * Defaults to `["leftArrow"]` for row layouts and `["upArrow"]` for column layouts.
+  */
+  readonly previous?: ReadonlyArray<string>;
+  /**
+  * Whether Meta/Cmd + 1–9 jumps to a specific tab.
+  * @default true
+  */
+  readonly useNumbers?: boolean;
+  /**
+  * Whether the Tab key cycles through tabs (only when `isFocused` is not managed by Ink).
+  * @default true
+  */
+  readonly useTab?: boolean;
+};
+/**
+* Color customization for active tab styling.
+*/
+type TabColors = {
+  readonly activeTab?: {
+    readonly backgroundColor?: LiteralUnion<AnsiColors, string>;
+    readonly color?: LiteralUnion<AnsiColors, string>;
+  };
+};
+type Props = {
+  /**
+  * Tab elements to render.
+  */
+  readonly children: ReactNode;
+  /**
+  * Active tab colors. When `isFocused` is `false`, the active tab uses gray.
+  */
+  readonly colors?: TabColors;
+  /**
+  * Name of the tab to select initially (uncontrolled mode).
+  * Ignored when `value` is provided.
+  */
+  readonly defaultValue?: string;
+  /**
+  * Layout direction for the tab bar.
+  * @default "row"
+  */
+  readonly flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+  /**
+  * Whether the tabs are focused and respond to keyboard input.
+  * - `true`: focused, uses active colors.
+  * - `false`: unfocused, uses gray active color, ignores input.
+  * - `undefined`/`null`: always active (focus not managed by Ink).
+  * @default undefined
+  */
+  readonly isFocused?: boolean | null;
+  /**
+  * Custom keyboard mappings.
+  */
+  readonly keyMap?: KeyMap;
+  /**
+  * Called when the active tab changes.
+  */
+  readonly onChange: (name: string, activeTab: ReactElement<Props$1>) => void;
+  /**
+  * Whether to display 1-based index numbers before each tab name.
+  * @default true
+  */
+  readonly showIndex?: boolean;
+  /**
+  * Controlled active tab name. When provided, the component is controlled —
+  * the parent owns the active tab state and must update it via `onChange`.
+  * When omitted, the component manages its own state (uncontrolled mode).
+  */
+  readonly value?: string;
+  /**
+  * Width of the container Box. Also determines the separator width in column layouts.
+  */
+  readonly width?: number | string;
+};
+/**
+* Tabbed navigation component. Renders a row or column of tabs with keyboard
+* navigation (arrow keys, Tab, number keys) and calls `onChange` when the
+* active tab changes.
+*/
+declare function Tabs({
+  children,
+  colors: colorsProp,
+  defaultValue,
+  flexDirection,
+  isFocused,
+  keyMap: keyMapProp,
+  onChange,
+  showIndex,
+  value,
+  width
+}: Props): ReactElement;
+export { KeyMap, Props, TabColors, Tabs, type KeyMap as TabsKeyMap, type Props as TabsProps, Tabs as default };

package/dist/components/tabs.js

@@ -0,0 +1 @@
+var X=Object.defineProperty;var A=(o,n)=>X(o,"name",{value:n,configurable:!0});import{jsx as y,jsxs as j}from"react/jsx-runtime";import{useRef as D,useState as Z,useCallback as d,useEffect as _,useMemo as M,Children as H}from"react";import J from"../ink/hooks/use-input.js";import{Box as I}from"./box.js";import{Text as B}from"./text.js";var Q=Object.defineProperty,f=A((o,n)=>Q(o,"name",{value:n,configurable:!0}),"b");const Y=/^\d$/u,$=f(o=>o!=null&&typeof o=="object"&&"props"in o&&"name"in o.props,"isTabElement"),rr=f(o=>{const n=[];for(const t of H.toArray(o))$(t)&&n.push(t);return n},"collectTabs"),G=f((o,n)=>o.some(t=>n[t]),"matchesAnyKey"),er=f((o,n,t)=>o?n?{backgroundColor:t?.activeTab?.backgroundColor??"green",color:t?.activeTab?.color??"black"}:{backgroundColor:"gray",color:"black"}:{backgroundColor:void 0,color:void 0},"getActiveTabColors");function or({children:o,colors:n,defaultValue:t,flexDirection:b="row",isFocused:h,keyMap:u,onChange:E,showIndex:K=!0,value:g,width:x}){const s=rr(o),c=s.length,p=D(s);p.current=s;const a=b==="column"||b==="column-reverse",C=g!==void 0,[L,O]=Z(()=>{const r=g??t;if(r==null||c===0)return 0;const e=s.findIndex(i=>i.props.name===r);return e===-1?0:e}),v=C?Math.max(0,s.findIndex(r=>r.props.name===g)):L,U=d(()=>{},[]),l=C?U:O,m=D(E);m.current=E,_(()=>{if(C)return;const r=p.current[v];r&&m.current(r.props.name,r)},[]);const F=M(()=>u?.previous??[a?"upArrow":"leftArrow"],[u?.previous,a]),N=M(()=>u?.next??[a?"downArrow":"rightArrow"],[u?.next,a]),P=u?.useNumbers??!0,R=u?.useTab??!0,k=D(v);k.current=v;const S=d(r=>{l(r);const e=p.current[r];e&&m.current(e.props.name,e)},[l]),T=d(()=>{const r=(k.current+1)%c;l(r);const e=p.current[r];e&&m.current(e.props.name,e)},[c,l]),w=d(()=>{const r=(k.current-1+c)%c;l(r);const e=p.current[r];e&&m.current(e.props.name,e)},[c,l]);J(d((r,e)=>{if(G(F,e)){w();return}if(G(N,e)){T();return}if(e.tab&&R&&h==null){e.shift?w():T();return}if(P&&e.meta&&Y.test(r)){const i=r==="0"?9:Number.parseInt(r,10)-1;i<c&&S(i)}},[F,N,R,P,h,w,T,c,S]),{isActive:h!==!1});const V=typeof x=="number"?x:6,W=M(()=>a?"─".repeat(V):" | ",[a,V]);return y(I,{flexDirection:b,width:x,children:s.map((r,e)=>{const{name:i}=r.props,q=er(v===e,h!==!1,n);let z=null;return K&&(z=j(B,{color:"grey",children:[e+1,"."," "]})),j(I,{flexDirection:b,children:[e!==0&&y(B,{color:"dim",children:W}),j(I,{children:[z,y(B,{backgroundColor:q.backgroundColor,color:q.color,children:r})]})]},i)})})}A(or,"W");f(or,"Tabs");export{or as Tabs,or as default};