@visulima/tui 1.0.0-alpha.9 → 1.0.0

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,33 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type BreadcrumbItem = {
+  readonly icon?: ReactNode;
+  readonly key?: string;
+  readonly label: string;
+};
+type Props = {
+  /**
+  * Color applied to the trailing (current) item.
+  * @default "blue"
+  */
+  readonly currentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Items to display from root to current page.
+  */
+  readonly items: ReadonlyArray<BreadcrumbItem>;
+  /**
+  * Glyph rendered between adjacent items.
+  * @default "›" (right single angle quote)
+  */
+  readonly separator?: string;
+};
+/**
+* Render a breadcrumb trail (last item is highlighted).
+*/
+declare function Breadcrumb({
+  currentColor,
+  items,
+  separator
+}: Props): ReactElement;
+export { Breadcrumb, BreadcrumbItem, type Props as BreadcrumbProps, Props, Breadcrumb as default };

package/dist/components/breadcrumb.js

@@ -0,0 +1 @@
+import{jsx as a,jsxs as o,Fragment as d}from"react/jsx-runtime";import{Fragment as c}from"react";import{Box as s}from"./box.js";import{Text as t}from"./text.js";function b({currentColor:n="blue",items:i,separator:m="›"}){return a(s,{children:i.map((r,l)=>{const e=l===i.length-1;return o(c,{children:[l>0?o(t,{dimColor:!0,children:[" ",m," "]}):void 0,o(t,{bold:e,color:e?n:void 0,dimColor:!e,children:[r.icon===void 0?void 0:o(d,{children:[r.icon," "]}),r.label]})]},r.key??r.label)})})}export{b as Breadcrumb,b as default};

package/dist/components/button.d.ts

@@ -0,0 +1,45 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type ButtonVariant = "ghost" | "outline" | "primary" | "secondary";
+type Props = {
+  /**
+  * Accent color used when the button is focused.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Focus this button when mounted if nothing else is focused.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Button label.
+  */
+  readonly children: ReactNode;
+  /**
+  * When true, the button ignores input and is rendered dim.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Called when the user presses Enter or Space while the button has focus.
+  */
+  readonly onPress?: () => void;
+  /**
+  * Visual style.
+  * @default "primary"
+  */
+  readonly variant?: ButtonVariant;
+};
+/**
+* Focusable button. Triggers `onPress` on Enter / Space.
+* @returns A `ReactElement` rendering the button (bordered or ghost variant).
+*/
+declare function Button({
+  accentColor,
+  autoFocus,
+  children,
+  isDisabled,
+  onPress,
+  variant
+}: Props): ReactElement;
+export { Button, type Props as ButtonProps, ButtonVariant, Props, Button as default };

package/dist/components/button.js

@@ -0,0 +1 @@
+import{jsx as d,jsxs as f}from"react/jsx-runtime";import{useCallback as p}from"react";import b from"../ink/hooks/use-focus.js";import g from"../ink/hooks/use-input.js";import{Box as e}from"./box.js";import{Text as c}from"./text.js";const h="round",y=(i,s,a,r)=>{if(!a){if(i==="primary"&&s)return"black";if(s)return r}};function A({accentColor:i="blue",autoFocus:s=!1,children:a,isDisabled:r=!1,onPress:l,variant:n="primary"}){const{isFocused:o}=b({autoFocus:s,isActive:!r});g(p((m,u)=>{o&&(u.return||m===" ")&&l?.()},[o,l]),{isActive:!r&&o});const t=y(n,o,r,i);return n==="ghost"?d(e,{paddingX:1,children:f(c,{bold:o,color:t,dimColor:r,children:[o?"▸ ":"  ",a]})}):d(e,{backgroundColor:n==="primary"&&o?i:void 0,borderColor:n==="outline"?o?i:"gray":n==="secondary"||o?i:void 0,borderStyle:h,paddingX:1,children:d(c,{bold:o,color:t,dimColor:r,children:a})})}export{A as Button,A as default};

package/dist/components/calendar.d.ts

@@ -0,0 +1,72 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color for today / the focused cell.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus the grid on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Initial focused day when uncontrolled. Defaults to `value` or today.
+  */
+  readonly defaultValue?: Date;
+  /**
+  * First day of the week: 0 = Sunday, 1 = Monday.
+  * @default 1
+  */
+  readonly firstDayOfWeek?: 0 | 1;
+  /**
+  * When true, disable input and render the grid dim.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Upper bound; days after `maxDate` cannot be selected.
+  */
+  readonly maxDate?: Date;
+  /**
+  * Lower bound; days before `minDate` cannot be selected.
+  */
+  readonly minDate?: Date;
+  /**
+  * Called whenever the user navigates or selects a day.
+  */
+  readonly onChange?: (date: Date) => void;
+  /**
+  * Called when the user presses Enter.
+  */
+  readonly onSubmit?: (date: Date) => void;
+  /**
+  * Color used to mark the currently selected day.
+  * @default "green"
+  */
+  readonly selectedColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Controlled selected date.
+  */
+  readonly value?: Date;
+};
+/**
+* Month-grid date picker. Arrow keys move focus by one day, page up/down move
+* by month. Enter submits; Space or Enter selects.
+* @returns A bordered `ReactElement` containing the month header, weekday
+* labels, and the day grid.
+*/
+declare function Calendar({
+  accentColor,
+  autoFocus,
+  defaultValue,
+  firstDayOfWeek,
+  isDisabled,
+  maxDate,
+  minDate,
+  onChange,
+  onSubmit,
+  selectedColor,
+  value
+}: Props): ReactElement;
+export { Calendar, type Props as CalendarProps, Props, Calendar as default };

package/dist/components/calendar.js

@@ -0,0 +1 @@
+import{jsxs as y,jsx as u}from"react/jsx-runtime";import{useMemo as w,useState as V,useRef as W,useCallback as S}from"react";import I from"../ink/hooks/use-focus.js";import K from"../ink/hooks/use-input.js";import{Box as h}from"./box.js";import{Text as b}from"./text.js";const P=["January","February","March","April","May","June","July","August","September","October","November","December"],k=["Su","Mo","Tu","We","Th","Fr","Sa"],p=e=>new Date(e.getFullYear(),e.getMonth(),e.getDate()),x=(e,r)=>{const i=e.getFullYear(),l=e.getMonth()+r,g=new Date(i,l+1,0).getDate(),a=Math.min(e.getDate(),g);return new Date(i,l,a)},T=(e,r)=>e.getFullYear()===r.getFullYear()&&e.getMonth()===r.getMonth()&&e.getDate()===r.getDate(),J=(e,r,i)=>r!==void 0&&e<p(r)||i!==void 0&&e>p(i),X=(e,r,i)=>{const l=(new Date(e,r,1).getDay()-i+7)%7,g=new Date(e,r+1,0).getDate(),a=[];for(let o=0;o<l;o+=1)a.push(void 0);for(let o=1;o<=g;o+=1)a.push(new Date(e,r,o));for(;a.length%7!==0;)a.push(void 0);const D=[];for(let o=0;o<a.length;o+=7)D.push(a.slice(o,o+7));return D};function Z({accentColor:e="blue",autoFocus:r=!1,defaultValue:i,firstDayOfWeek:l=1,isDisabled:g=!1,maxDate:a,minDate:D,onChange:o,onSubmit:F,selectedColor:$="green",value:f}){const{isFocused:m}=I({autoFocus:r,isActive:!g}),M=w(()=>p(new Date),[]),j=p(f??i??M),[O,B]=V(j),c=f?p(f):O,v=W(c);v.current=c;const E=w(()=>[...k.slice(l),...k.slice(0,l)],[l]),N=w(()=>X(c.getFullYear(),c.getMonth(),l),[c,l]),d=S(s=>{const n=p(s);J(n,D,a)||(f===void 0&&B(n),o?.(n))},[f,o,D,a]);K(S((s,n)=>{if(!m)return;const{current:t}=v;n.leftArrow?d(new Date(t.getFullYear(),t.getMonth(),t.getDate()-1)):n.rightArrow?d(new Date(t.getFullYear(),t.getMonth(),t.getDate()+1)):n.upArrow?d(new Date(t.getFullYear(),t.getMonth(),t.getDate()-7)):n.downArrow?d(new Date(t.getFullYear(),t.getMonth(),t.getDate()+7)):n.pageUp?d(x(t,-1)):n.pageDown?d(x(t,1)):n.return&&F?.(t)},[m,d,F]),{isActive:!g&&m});const R=`${P[c.getMonth()]} ${c.getFullYear()}`;return y(h,{borderColor:m?e:void 0,borderStyle:"round",flexDirection:"column",paddingX:1,children:[u(h,{justifyContent:"center",children:u(b,{bold:!0,color:e,children:R})}),u(h,{marginTop:1,children:E.map(s=>u(h,{width:3,children:u(b,{dimColor:!0,children:s.padEnd(2," ")})},s))}),N.map((s,n)=>u(h,{children:s.map((t,C)=>{if(t===void 0)return u(h,{width:3,children:u(b,{children:"   "})},C);const Y=T(t,M),A=T(t,c),U=J(t,D,a);return u(h,{width:3,children:y(b,{backgroundColor:A&&m?e:void 0,bold:Y,color:A&&m?"black":Y?$:void 0,dimColor:U||g,children:[String(t.getDate()).padStart(2," ")," "]})},C)})},n))]})}export{Z as Calendar,Z as default};

package/dist/components/canvas.d.ts

@@ -0,0 +1,44 @@
+import { ReactElement } from 'react';
+import { C as CanvasContext } from "../packem_shared/buffer.d-EJkZr8uH.js";
+export type { a as CanvasColor, b as CellStyle } from "../packem_shared/buffer.d-EJkZr8uH.js";
+type Props = {
+  /**
+  * Imperative draw callback. Mutates the underlying typed-array buffer via
+  * the provided `CanvasContext`. Runs in a `useMemo` keyed by `version` —
+  * pass a stable reference (or hash) so the canvas only re-renders when
+  * the input data truly changes.
+  */
+  readonly draw: (context: CanvasContext) => void;
+  /**
+  * Number of rows (character cells vertically).
+  */
+  readonly height: number;
+  /**
+  * Invalidation key — required so the memoization contract is explicit.
+  * Re-runs `draw` and re-serializes only the rows the draw callback
+  * dirtied. Pass the data you render (or a hash of it). Use a stable
+  * value (e.g. a counter) when you intentionally want to redraw on
+  * every render.
+  */
+  readonly version: unknown;
+  /**
+  * Number of columns (character cells horizontally).
+  */
+  readonly width: number;
+};
+/**
+* A fixed-size cell grid backed by typed arrays. Use the imperative `draw`
+* callback to paint. The canvas emits one `Text` child per row (not per cell)
+* and caches the ANSI output of each row: only rows marked dirty by the last
+* draw pass are re-serialized, and only when `version` changes.
+*
+* This is the foundation for chart/grid components that need more layout
+* control than `Text` alone.
+*/
+declare function Canvas({
+  draw,
+  height,
+  version,
+  width
+}: Props): ReactElement;
+export { Canvas, type CanvasContext, type Props as CanvasProps, Props, Canvas as default };

package/dist/components/canvas.js

@@ -0,0 +1 @@
+import{jsx as $}from"react/jsx-runtime";import{useRef as k,useMemo as _,Fragment as j}from"react";import{a as D}from"../packem_shared/colorize-DU4YZkp3.js";import{Box as z}from"./box.js";import{Text as E}from"./text.js";const T=Math.trunc(1),I=2,A=32,F=0,H=()=>{const c=new Map,r=[void 0];return{decode:l=>r[l],encode:l=>{if(l===void 0)return F;const h=typeof l=="number"?`n:${l}`:`s:${l}`,u=c.get(h);if(u!==void 0)return u;const w=r.length;return r.push(l),c.set(h,w),w}}},C=[9601,9602,9603,9604,9605,9606,9607,9608],S=[9615,9614,9613,9612,9611,9610,9609,9608],U=9608,L=c=>{if(!c)return 0;let r=0;return c.bold&&(r|=T),c.dim&&(r|=I),r},P=c=>typeof c=="number"?c:c.codePointAt(0)??A,O=(c,r)=>{const l=Math.max(0,c*r),h=new Uint32Array(l),u=new Uint32Array(l),w=new Int32Array(l),x=new Int32Array(l),y=new Uint8Array(r),{decode:p,encode:m}=H();h.fill(A);const b=n=>{n>=0&&n<r&&(y[n]=1)},g=(n,t,s,i)=>{if(n<0||n>=c||t<0||t>=r)return;const e=t*c+n,d=P(s),a=m(i?.color),o=m(i?.background),f=L(i);h[e]===d&&u[e]===f&&w[e]===a&&x[e]===o||(h[e]=d,u[e]=f,w[e]=a,x[e]=o,y[t]=1)};return{bg:x,chars:h,colorDecoder:p,context:{clear:()=>{h.fill(A),u.fill(0),w.fill(0),x.fill(0),y.fill(1)},drawHBar:(n,t,s,i,e)=>{if(s<=0||t<0||t>=r)return;const d=Math.max(0,Math.min(1,i)),a=s*S.length,o=Math.round(d*a),f=Math.floor(o/S.length),B=o%S.length;for(let M=0;M<s;M+=1){const v=n+M;M<f?g(v,t,U,e):M===f&&B>0?g(v,t,S[B-1],e):g(v,t,A,e)}b(t)},drawRect:(n,t,s,i,e,d)=>{if(s<=0||i<=0)return;const a=P(e);for(let o=0;o<i;o+=1){for(let f=0;f<s;f+=1)g(n+f,t+o,a,d);b(t+o)}},drawText:(n,t,s,i)=>{if(t<0||t>=r||s.length===0)return;let e=0;for(const d of s)g(n+e,t,d,i),e+=1;b(t)},drawVBar:(n,t,s,i,e)=>{if(s<=0||n<0||n>=c)return;const d=Math.max(0,Math.min(1,i)),a=s*C.length,o=Math.round(d*a),f=Math.floor(o/C.length),B=o%C.length;for(let M=0;M<s;M+=1){const v=s-M-1,R=t+M;v<f?g(n,R,U,e):v===f&&B>0?g(n,R,C[B-1],e):g(n,R,A,e),b(R)}},height:r,setCell:g,width:c},dirty:y,fg:w,height:r,styles:u,width:c}},V=(c,r)=>{const{bg:l,chars:h,colorDecoder:u,fg:w,styles:x,width:y}=c,p=r*y;let m="",b=0,g=x[p],n=w[p],t=l[p];const s=i=>{let e="";for(let f=b;f<i;f+=1)e+=String.fromCodePoint(h[p+f]);const d=u(n),a=u(t);let o=e;d!==void 0&&(o=D(o,typeof d=="number"?String(d):d,"foreground")),a!==void 0&&(o=D(o,typeof a=="number"?String(a):a,"background")),(g&T)!==0&&(o=`\x1B[1m${o}\x1B[22m`),(g&I)!==0&&(o=`\x1B[2m${o}\x1B[22m`),m+=o};for(let i=1;i<y;i+=1){const e=x[p+i],d=w[p+i],a=l[p+i];(e!==g||d!==n||a!==t)&&(s(i),b=i,g=e,n=d,t=a)}return s(y),m};function Q({draw:c,height:r,version:l,width:h}){const u=k(void 0),w=k(void 0);(u.current?.width!==h||u.current.height!==r)&&(u.current=O(h,r),w.current={hasRendered:!1,lines:Array.from({length:r}).fill("")});const x=u.current,y=w.current,p=_(()=>{c(x.context);for(let m=0;m<x.height;m+=1)y.hasRendered&&x.dirty[m]===0||(y.lines[m]=V(x,m),x.dirty[m]=0);return y.hasRendered=!0,[...y.lines]},[l,h,r]);return $(z,{flexDirection:"column",flexShrink:0,height:r,width:h,children:p.map((m,b)=>$(j,{children:$(E,{wrap:"truncate-end",children:m})},b))})}export{Q as Canvas,Q as default};

package/dist/components/card.d.ts

@@ -0,0 +1,57 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Border color.
+  */
+  readonly borderColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Border style name, passed through to `Box`.
+  * @default "round"
+  */
+  readonly borderStyle?: "arrow" | "bold" | "classic" | "double" | "doubleSingle" | "round" | "single" | "singleDouble";
+  /**
+  * Card body.
+  */
+  readonly children: ReactNode;
+  /**
+  * Optional footer rendered below body with a dim divider.
+  */
+  readonly footer?: ReactNode;
+  /**
+  * Optional content rendered after the title on the same row.
+  */
+  readonly headerRight?: ReactNode;
+  /**
+  * Optional subtitle rendered below the title.
+  */
+  readonly subtitle?: string;
+  /**
+  * Optional title rendered in the header area.
+  */
+  readonly title?: string;
+  /**
+  * Color applied to the title.
+  */
+  readonly titleColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Fix the card width. When omitted the card grows to fill its parent.
+  */
+  readonly width?: number | string;
+};
+/**
+* Bordered container with optional title, subtitle, and footer.
+*/
+declare function Card({
+  borderColor,
+  borderStyle,
+  children,
+  footer,
+  headerRight,
+  subtitle,
+  title,
+  titleColor,
+  width
+}: Props): ReactElement;
+export { Card, type Props as CardProps, Props, Card as default };

package/dist/components/card.js

@@ -0,0 +1 @@
+import{jsxs as r,jsx as i}from"react/jsx-runtime";import{Box as o}from"./box.js";import{Divider as u}from"./divider.js";import{Text as c}from"./text.js";function b({borderColor:m,borderStyle:h="round",children:a,footer:l,headerRight:e,subtitle:d,title:t,titleColor:f,width:n}){return r(o,{borderColor:m,borderStyle:h,flexDirection:"column",paddingX:1,width:n,children:[t!==void 0||d!==void 0||e!==void 0?r(o,{flexDirection:"column",marginBottom:1,children:[r(o,{justifyContent:"space-between",children:[i(o,{children:t===void 0?void 0:i(c,{bold:!0,color:f,children:t})}),e===void 0?void 0:i(o,{children:e})]}),d===void 0?void 0:i(c,{dimColor:!0,children:d})]}):void 0,i(o,{flexDirection:"column",children:a}),l===void 0?void 0:r(o,{flexDirection:"column",marginTop:1,children:[i(u,{dimColor:!0,length:typeof n=="number"?Math.max(1,n-4):void 0}),i(o,{marginTop:1,children:l})]})]})}export{b as Card,b as default};

package/dist/components/checkbox.d.ts

@@ -0,0 +1,48 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color when focused.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus when mounted if nothing else is focused.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Label rendered next to the checkbox.
+  */
+  readonly children?: ReactNode;
+  /**
+  * Initial checked state when uncontrolled.
+  * @default false
+  */
+  readonly defaultChecked?: boolean;
+  /**
+  * Controlled checked state. When provided, `onChange` should update the parent.
+  */
+  readonly isChecked?: boolean;
+  /**
+  * Disable input and dim the label.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Fired when the checkbox toggles.
+  */
+  readonly onChange?: (checked: boolean) => void;
+};
+/**
+* Focusable checkbox. Toggles with Space or Enter.
+*/
+declare function Checkbox({
+  accentColor,
+  autoFocus,
+  children,
+  defaultChecked,
+  isChecked,
+  isDisabled,
+  onChange
+}: Props): ReactElement;
+export { Checkbox, type Props as CheckboxProps, Props, Checkbox as default };

package/dist/components/checkbox.js

@@ -0,0 +1 @@
+import{jsxs as d,jsx as v}from"react/jsx-runtime";import{useState as C,useCallback as x}from"react";import b from"../ink/hooks/use-focus.js";import k from"../ink/hooks/use-input.js";import{Box as F}from"./box.js";import{Text as l}from"./text.js";const g="☒",j="☐";function q({accentColor:s="blue",autoFocus:m=!1,children:c,defaultChecked:n=!1,isChecked:i,isDisabled:e=!1,onChange:t}){const{isFocused:o}=b({autoFocus:m,isActive:!e}),[u,f]=C(n),r=i??u;return k(x((h,p)=>{if(o&&(p.return||h===" ")){const a=!r;i===void 0&&f(a),t?.(a)}},[o,r,i,t]),{isActive:!e&&o}),d(F,{gap:1,children:[d(l,{color:o?s:void 0,dimColor:e,children:[o?"▸ ":"  ",r?g:j]}),c===void 0?void 0:v(l,{color:o?s:void 0,dimColor:e,children:c})]})}export{q as Checkbox,q as default};

package/dist/components/code.d.ts

@@ -0,0 +1,48 @@
+import { ReactElement } from 'react';
+type Props = {
+  /**
+  * The source code string to highlight.
+  */
+  readonly code: string;
+  /**
+  * Set of line numbers to visually emphasize.
+  */
+  readonly highlightLines?: ReadonlySet<number>;
+  /**
+  * Programming language for syntax highlighting.
+  * Falls back to plain text if the language is unknown.
+  */
+  readonly language?: string;
+  /**
+  * Whether to show line numbers in the gutter.
+  * @default false
+  */
+  readonly showLineNumbers?: boolean;
+  /**
+  * Starting line number (useful for code excerpts).
+  * @default 1
+  */
+  readonly startLine?: number;
+  /**
+  * Shiki theme name.
+  * @default "github-dark-default"
+  */
+  readonly theme?: string;
+};
+/**
+* Render source code with syntax highlighting.
+*
+* ```tsx
+* &lt;Code code="const x = 42;" language="typescript" />
+* &lt;Code code={source} language="python" showLineNumbers />
+* ```
+*/
+declare function Code({
+  code,
+  highlightLines,
+  language,
+  showLineNumbers,
+  startLine,
+  theme
+}: Props): ReactElement;
+export { Code, type Props as CodeProps, Props, Code as default };

package/dist/components/code.js

@@ -0,0 +1,2 @@
+import{jsx as m,jsxs as d}from"react/jsx-runtime";import{useState as w,useRef as S,useEffect as T}from"react";import{r as b,i as v,w as y,g as C,t as j}from"../packem_shared/token-to-elements-D6J6-P2A.js";import{Box as p}from"./box.js";import{Text as x}from"./text.js";function q({code:o,highlightLines:c,language:s,showLineNumbers:i=!1,startLine:a=1,theme:l="github-dark-default"}){const[f,u]=w(null),t=S(!1);T(()=>{t.current=!1;const e=s?b(s):"text";if(e!=="text"&&!v(e)){u(null);return}return(async()=>{try{const r=await y(e==="text"?[]:[e],l),n=C(r,o,e,l);t.current||u(n.tokens)}catch{t.current||u(null)}})(),()=>{t.current=!0}},[o,s,l]);const L={highlightLines:c,showLineNumbers:i,startLine:a};if(f)return j(f,L);const h=o.split(`
+`),k=i?String(a+h.length-1).length:0;return m(p,{flexDirection:"column",children:h.map((e,r)=>{const n=a+r,g=c?.has(n)??!1;return d(p,{children:[i?d(x,{color:g?"yellow":void 0,dimColor:!g,children:[String(n).padStart(k)," "]}):void 0,m(x,{children:e})]},r)})})}export{q as Code,q as default};

package/dist/components/collapsible.d.ts

@@ -0,0 +1,53 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Accent color when the header is focused.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus the collapsible on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Child content rendered when open.
+  */
+  readonly children: ReactNode;
+  /**
+  * Whether the section starts expanded.
+  * @default false
+  */
+  readonly defaultOpen?: boolean;
+  /**
+  * Disable interaction.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Controlled open state.
+  */
+  readonly isOpen?: boolean;
+  /**
+  * Called when the user toggles the section.
+  */
+  readonly onToggle?: (isOpen: boolean) => void;
+  /**
+  * Header label.
+  */
+  readonly title: ReactNode;
+};
+/**
+* Focusable section that can be expanded or collapsed.
+*/
+declare function Collapsible({
+  accentColor,
+  autoFocus,
+  children,
+  defaultOpen,
+  isDisabled,
+  isOpen,
+  onToggle,
+  title
+}: Props): ReactElement;
+export { Collapsible, type Props as CollapsibleProps, Props, Collapsible as default };

package/dist/components/collapsible.js

@@ -0,0 +1 @@
+import{jsxs as a,jsx as l}from"react/jsx-runtime";import{useState as C,useCallback as g}from"react";import D from"../ink/hooks/use-focus.js";import F from"../ink/hooks/use-input.js";import{Box as t}from"./box.js";import{Text as d}from"./text.js";function L({accentColor:c="blue",autoFocus:m=!1,children:f,defaultOpen:u=!1,isDisabled:o=!1,isOpen:r,onToggle:s,title:p}){const{isFocused:e}=D({autoFocus:m,isActive:!o}),[x,b]=C(u),i=r??x;return F(g((h,v)=>{if(v.return||h===" "){const n=!i;r===void 0&&b(n),s?.(n)}},[i,r,s]),{isActive:!o&&e}),a(t,{flexDirection:"column",children:[a(t,{children:[l(d,{color:e?c:void 0,dimColor:o,children:i?"▼ ":"▶ "}),l(d,{bold:e,color:e?c:void 0,dimColor:o,children:p})]}),i?l(t,{flexDirection:"column",marginLeft:2,children:f}):void 0]})}export{L as Collapsible,L as default};

package/dist/components/command-block.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode, ReactElement } from 'react';
+type CommandStatus = "error" | "idle" | "running" | "success";
+type Props = {
+  /**
+  * Shell command rendered in the header.
+  */
+  readonly command: string;
+  /**
+  * Optional working directory shown after the command name.
+  */
+  readonly cwd?: string;
+  /**
+  * Duration in ms; shown when finished.
+  */
+  readonly durationMs?: number;
+  /**
+  * Exit code of the completed command.
+  */
+  readonly exitCode?: number;
+  /**
+  * Max output rows rendered before truncation. Use `Infinity` to disable.
+  */
+  readonly maxOutputRows?: number;
+  /**
+  * Command output. Either a string (rendered as-is) or arbitrary children.
+  */
+  readonly output?: ReactNode;
+  /**
+  * Lifecycle state. Controls the header icon and color.
+  * @default "idle"
+  */
+  readonly status?: CommandStatus;
+};
+/**
+* Renders a shell command with its output and a status header. Designed for
+* coding-agent UIs that stream terminal operations.
+*/
+declare function CommandBlock({
+  command,
+  cwd,
+  durationMs,
+  exitCode,
+  maxOutputRows,
+  output,
+  status
+}: Props): ReactElement;
+export { CommandBlock, type Props as CommandBlockProps, CommandStatus, Props, CommandBlock as default };

package/dist/components/command-block.js

@@ -0,0 +1,4 @@
+import{jsxs as d,jsx as e}from"react/jsx-runtime";import{Box as l}from"./box.js";import{Spinner as p}from"./spinner.js";import{Text as n}from"./text.js";const f={error:"red",idle:"gray",running:"cyan",success:"green"},x=r=>r<1e3?`${Math.round(r)}ms`:`${(r/1e3).toFixed(2)}s`,g=r=>r==="running"?e(p,{type:"dots"}):{error:"✖",idle:"$",success:"✔"}[r],v=(r,i)=>{if(!Number.isFinite(i))return r;const o=r.split(`
+`);if(o.length<=i)return r;const t=o.slice(0,i).join(`
+`),s=o.length-i;return`${t}
+… ${s} more line${s===1?"":"s"}`};function b({command:r,cwd:i,durationMs:o,exitCode:t,maxOutputRows:s=12,output:c,status:m="idle"}){const h=f[m],a=g(m),u=[];return o!==void 0&&u.push(d(n,{dimColor:!0,children:[" ",x(o)]},"duration")),t!==void 0&&m!=="running"&&u.push(d(n,{color:t===0?"green":"red",children:[" ","exit"," ",t]},"exit")),d(l,{borderColor:h,borderStyle:"round",flexDirection:"column",paddingX:1,children:[d(l,{children:[e(n,{color:h,children:a}),e(n,{children:" "}),e(l,{flexGrow:1,flexShrink:1,minWidth:0,children:e(n,{bold:!0,wrap:"truncate-end",children:r})}),i===void 0?void 0:d(n,{dimColor:!0,children:[" ","@",i]}),u.length===0?void 0:e(l,{flexShrink:0,children:u})]}),c===void 0?void 0:e(l,{flexDirection:"column",marginTop:1,children:typeof c=="string"?e(n,{children:v(c,s)}):c})]})}export{b as CommandBlock,b as default};

package/dist/components/command-palette.d.ts

@@ -0,0 +1,82 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type CommandEntry = {
+  /**
+  * Optional description rendered under the label.
+  */
+  readonly description?: string;
+  /**
+  * Optional hotkey rendered on the right.
+  */
+  readonly hotkey?: string;
+  /**
+  * Optional icon rendered before the label.
+  */
+  readonly icon?: ReactNode;
+  /**
+  * Stable identifier returned by `onSelect`.
+  */
+  readonly id: string;
+  /**
+  * Optional keywords to boost matching (not displayed).
+  */
+  readonly keywords?: ReadonlyArray<string>;
+  /**
+  * Label shown in the list (and used as the primary match target).
+  */
+  readonly label: string;
+};
+type Props = {
+  /**
+  * Accent color for the border and focused row.
+  * @default "cyan"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus the palette on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Available commands to search.
+  */
+  readonly commands: ReadonlyArray<CommandEntry>;
+  /**
+  * Empty-state text when nothing matches.
+  * @default "No results"
+  */
+  readonly emptyText?: string;
+  /**
+  * Max rows rendered in the list.
+  * @default 8
+  */
+  readonly limit?: number;
+  /**
+  * Called when the user presses Escape.
+  */
+  readonly onCancel?: () => void;
+  /**
+  * Called when the user picks a command with Enter.
+  */
+  readonly onSelect: (id: string, query: string) => void;
+  /**
+  * Placeholder inside the search field.
+  * @default "Type a command or search..."
+  */
+  readonly placeholder?: string;
+};
+/**
+* Ctrl-P style fuzzy command finder. Features a search input, ranked results,
+* keyboard navigation, and Esc to cancel.
+*/
+declare function CommandPalette({
+  accentColor,
+  autoFocus,
+  commands,
+  emptyText,
+  limit,
+  onCancel,
+  onSelect,
+  placeholder
+}: Props): ReactElement;
+export { CommandEntry, CommandPalette, type Props as CommandPaletteProps, Props, CommandPalette as default };

package/dist/components/command-palette.js

@@ -0,0 +1 @@
+import{jsxs as a,jsx as n}from"react/jsx-runtime";import{useState as y,useRef as M,useMemo as T,useEffect as S,useCallback as F}from"react";import A from"../ink/hooks/use-focus.js";import D from"../ink/hooks/use-input.js";import{i as L}from"../packem_shared/input-utils-BSWCb4F_.js";import{Box as d}from"./box.js";import{Text as t}from"./text.js";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}=A({autoFocus:f}),[c,v]=y(""),[w,C]=y(0),b=M(w);b.current=w;const l=T(()=>{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 S(()=>{const e=Math.max(0,l.length-1);b.current>e&&(b.current=e,C(e))},[l]),D(F((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){v(o=>o.slice(0,-1)),C(0);return}L(e,r)&&(v(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,k=o?m:void 0;return a(d,{flexDirection:"column",children:[a(d,{children:[n(t,{color:k,children:o?"▸ ":"  "}),e.icon===void 0?void 0:a(t,{color:k,children:[e.icon," "]}),n(d,{flexGrow:1,flexShrink:1,minWidth:0,children:n(t,{bold:o,color:k,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/components/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 };