@visulima/tui-kit 0.0.0 → 1.0.0

package/README.md

@@ -1,45 +1,131 @@
-# @visulima/tui-kit
+<!-- START_PACKAGE_OG_IMAGE_PLACEHOLDER -->
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+<a href="https://www.anolilab.com/open-source" align="center">
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+  <img src="__assets__/package-og.svg" alt="tui-kit" />
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+</a>
 
-## Purpose
+<h3 align="center">Component library for @visulima/tui — installable as a package, or copy-pasteable via the shadcn CLI registry</h3>
 
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@visulima/tui-kit`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
+<!-- END_PACKAGE_OG_IMAGE_PLACEHOLDER -->
 
-## What is OIDC Trusted Publishing?
+<div align="center">
 
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
+[![typescript-image][typescript-badge]][typescript-url]
+[![mit licence][license-badge]][license]
+[![npm downloads][npm-downloads-badge]][npm-downloads]
+[![Chat][chat-badge]][chat]
+[![PRs Welcome][prs-welcome-badge]][prs-welcome]
 
-## Setup Instructions
+</div>
 
-To properly configure OIDC trusted publishing for this package:
+---
+
+<div align="center">
+    <p>
+        <sup>
+            Daniel Bannert's open source work is supported by the community on <a href="https://github.com/sponsors/prisis">GitHub Sponsors</a>
+        </sup>
+    </p>
+</div>
 
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
+---
 
-## DO NOT USE THIS PACKAGE
+Charts, inputs, overlays, layout and AI-chat components for [`@visulima/tui`](../tui/README.md). Every component is rendered by the `@visulima/tui` runtime — its React reconciler, yoga layout and native Rust diff engine — so this package holds components only.
 
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
+## Two ways to use it
 
-## More Information
+Pick whichever fits. The source is identical; only the delivery differs.
 
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
+### 1. Install it
 
----
+You get versioned components and upgrades for free. Each component is its own subpath export, so you only pay for what you import.
+
+```sh
+npm install @visulima/tui @visulima/tui-kit
+```
+
+```sh
+pnpm add @visulima/tui @visulima/tui-kit
+```
+
+```tsx
+import { render } from "@visulima/tui";
+import Box from "@visulima/tui/components/box";
+import Gauge from "@visulima/tui-kit/gauge";
+
+render(
+    <Box>
+        <Gauge label="CPU" value={72} />
+    </Box>,
+);
+```
+
+### 2. Copy it in
+
+You own the code and can change anything. The component is copied into your repo; `@visulima/tui` stays an installed dependency because the renderer can't be copy-pasted.
+
+```sh
+npx shadcn@latest add https://visulima.com/r/gauge.json
+```
+
+Components that build on others (`area-chart` uses `line-chart` and `chart-utils`) declare those as registry dependencies, so the CLI fetches them too.
+
+> **Note:** copied files use the automatic JSX runtime and do not import React. Your `tsconfig.json` needs `"jsx": "react-jsx"`, otherwise you'll hit `ReferenceError: React is not defined`.
+
+## What lives where
+
+`@visulima/tui` owns the runtime and the primitives every component builds on — `Box`, `Text`, `Canvas`, `Cursor`, `Newline`, `Spacer`, `Static`, `StaticRender`, `Transform` — plus the hooks (`@visulima/tui/hooks/*`). Import those from there:
+
+```tsx
+import Box from "@visulima/tui/components/box";
+import Text from "@visulima/tui/components/text";
+import useInput from "@visulima/tui/hooks/use-input";
+```
+
+Everything above that layer lives here: charts (`gauge`, `area-chart`, `bar-chart`, `line-chart`, `sparkline`, `heatmap`, `histogram`, `scatter-plot`), inputs (`text-input`, `textarea`, `select-input`, `multi-select`, `slider`, `date-picker`, `calendar`, `masked-input`, `search-input`), overlays (`dialog`, `toast`, `tooltip`, `command-palette`), layout (`card`, `table`, `tabs`, `tree-view`, `scroll-view`), and AI-chat widgets (`message-bubble`, `streaming-text`, `approval-prompt`, `operation-tree`).
+
+## Heavy features are optional
+
+Some components need a peer that is not installed by default, so unused features cost nothing. Install the peer only if you use the component:
+
+| Component          | Peer                               |
+| ------------------ | ---------------------------------- |
+| `code`, `markdown` | `shiki`, `@shikijs/langs`/`themes` |
+| `markdown`         | `marked`                           |
+| `diff-view`        | `diff`                             |
+| `big-text`         | `cfonts`                           |
+| `table`            | `@visulima/tabular`                |
+
+## Contributing
+
+If you would like to help take a look at the [list of issues](https://github.com/visulima/visulima/issues) and check our [Contributing](.github/CONTRIBUTING.md) guidelines.
+
+> **Note:** please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
+
+## Credits
+
+- [Daniel Bannert](https://github.com/prisis)
+- [All Contributors](https://github.com/visulima/visulima/graphs/contributors)
+
+## Made with ❤️ at Anolilab
+
+This is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Anolilab](https://www.anolilab.com/open-source) is a Development and AI Studio. Contact us at [hello@anolilab.com](mailto:hello@anolilab.com) if you need any help with these technologies or just want to say hi!
+
+## License
+
+The visulima tui-kit is open-sourced software licensed under the [MIT][license]
+
+<!-- badges -->
 
-**Maintained for OIDC setup purposes only**
+[license-badge]: https://img.shields.io/npm/l/@visulima/tui-kit?style=for-the-badge
+[license]: https://github.com/visulima/visulima/blob/main/LICENSE
+[npm-downloads-badge]: https://img.shields.io/npm/dm/@visulima/tui-kit?style=for-the-badge
+[npm-downloads]: https://www.npmjs.com/package/@visulima/tui-kit
+[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge
+[prs-welcome]: https://github.com/visulima/visulima/blob/main/.github/CONTRIBUTING.md
+[chat-badge]: https://img.shields.io/discord/932323359193186354.svg?style=for-the-badge
+[chat]: https://discord.gg/TtFJY8xkFK
+[typescript-badge]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge&logo=typescript
+[typescript-url]: https://www.typescriptlang.org/

package/dist/accordion.d.ts

@@ -0,0 +1,59 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type AccordionItem = {
+  /**
+  * Content rendered when the item is expanded.
+  */
+  readonly content: ReactNode;
+  /**
+  * Unique identifier.
+  */
+  readonly id: string;
+  /**
+  * Header label.
+  */
+  readonly title: ReactNode;
+};
+type Props = {
+  /**
+  * Accent color for the focused header.
+  * @default "blue"
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * When true, multiple panels can be open at once.
+  * @default false
+  */
+  readonly allowMultiple?: boolean;
+  /**
+  * Auto-focus the first item on mount.
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Initially open item ids.
+  */
+  readonly defaultExpanded?: ReadonlyArray<string>;
+  /**
+  * Disable interaction.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * List of panels.
+  */
+  readonly items: ReadonlyArray<AccordionItem>;
+};
+/**
+* Keyboard-navigable accordion. Use arrow keys to move between panels and
+* Enter / Space to toggle.
+* @returns A `ReactElement` rendering the accordion column.
+*/
+declare function Accordion({
+  accentColor,
+  allowMultiple,
+  autoFocus,
+  defaultExpanded,
+  isDisabled,
+  items
+}: Props): ReactElement;
+export { Accordion, AccordionItem, type Props as AccordionProps, Props, Accordion as default };

package/dist/accordion.js

@@ -0,0 +1 @@
+import{jsx as m,jsxs as a}from"react/jsx-runtime";import u from"@visulima/tui/components/box";import b from"@visulima/tui/components/text";import F from"@visulima/tui/hooks/use-focus";import j from"@visulima/tui/hooks/use-input";import{useState as v,useRef as k,useCallback as A}from"react";function R({accentColor:D="blue",allowMultiple:d=!1,autoFocus:g=!1,defaultExpanded:n,isDisabled:c=!1,items:l}){const{isFocused:s}=F({autoFocus:g,isActive:!c}),[w,C]=v(()=>n===void 0||n.length===0?[]:d?n:n.slice(0,1)),[f,p]=v(0),i=k(f);i.current=f;const h=A(r=>{C(e=>{const o=e.includes(r);return d?o?e.filter(t=>t!==r):[...e,r]:o?[]:[r]})},[d]);return j(A((r,e)=>{if(!s)return;const o=l.length;if((e.downArrow||r==="j")&&i.current<o-1)p(i.current+1);else if((e.upArrow||r==="k")&&i.current>0)p(i.current-1);else if(e.return||r===" "){const t=l[i.current];t&&h(t.id)}},[s,l,h]),{isActive:!c&&s}),m(u,{flexDirection:"column",children:l.map((r,e)=>{const o=w.includes(r.id),t=s&&e===f,x=t?D:void 0;return a(u,{flexDirection:"column",children:[a(u,{children:[a(b,{color:x,dimColor:c,children:[t?"▸ ":"  ",o?"▼ ":"▶ "]}),m(b,{bold:t,color:x,dimColor:c,children:r.title})]}),o?m(u,{flexDirection:"column",marginBottom:1,marginLeft:4,children:r.content}):void 0]},r.id)})})}export{R as Accordion,R as default};

package/dist/alert.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode, ReactElement } from 'react';
+import { V as Variant } from "./packem_shared/variant-config.d-D5NnrrQK.js";
+type AlertVariant = Variant;
+type Props = {
+  /**
+  * Alert message content.
+  */
+  readonly children: ReactNode;
+  /**
+  * Optional heading displayed above the message.
+  */
+  readonly title?: string;
+  /**
+  * Determines the border color and icon.
+  */
+  readonly variant: AlertVariant;
+};
+/**
+* Renders a bordered alert box with a variant-specific icon, optional title, and message.
+*/
+declare function Alert({
+  children,
+  title,
+  variant
+}: Props): ReactElement;
+export { Alert, type Props as AlertProps, AlertVariant, Props, Alert as default };

package/dist/alert.js

@@ -0,0 +1 @@
+import{jsxs as n,jsx as r}from"react/jsx-runtime";import o from"@visulima/tui/components/box";import i from"@visulima/tui/components/text";import{o as f}from"./packem_shared/variant-config-BJqpNo7H.js";function p({children:d,title:e,variant:t}){const{color:l,icon:c}=f[t];return n(o,{borderColor:l,borderStyle:"round",flexGrow:1,gap:1,paddingX:1,children:[r(o,{flexShrink:0,children:r(i,{color:l,children:c})}),n(o,{flexDirection:"column",flexGrow:1,flexShrink:1,gap:1,minWidth:0,children:[e?r(i,{bold:!0,children:e}):void 0,r(i,{children:d})]})]})}export{p as Alert,p as default};

package/dist/animate-presence.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, ReactElement } from 'react';
+type Props = {
+  /**
+  * Keyed children. Any child that accepts a `show: boolean` prop and calls
+  * `onExit` when its exit transition finishes (such as `<Transition />`) is
+  * orchestrated automatically. Other children render as-is.
+  */
+  readonly children: ReactNode;
+};
+/**
+* Orchestrates enter / exit animations for keyed children. Wrap a dynamic
+* list of `<Transition />` (or any component accepting `show` + `onExit`) to
+* keep outgoing children mounted until their exit animation finishes.
+*/
+declare function AnimatePresence({
+  children
+}: Props): ReactElement;
+export { AnimatePresence, type Props as AnimatePresenceProps, Props, AnimatePresence as default };

package/dist/animate-presence.js

@@ -0,0 +1 @@
+import{jsx as y}from"react/jsx-runtime";import k from"@visulima/tui/components/box";import{useState as w,Children as f,isValidElement as m,useEffect as d,useCallback as E,cloneElement as p}from"react";const a=s=>{const{key:r}=s;if(r!==null)return r},x=s=>s.type?.isAnimatable===!0?!0:typeof s.props=="object"&&s.props!==null&&"show"in s.props;function A({children:s}){const[r,c]=w(()=>{const e=[];return f.forEach(s,t=>{if(!m(t))return;const n=a(t);n!==void 0&&e.push({element:t,key:n,show:!0})}),e});d(()=>{const e=new Map;f.forEach(s,t=>{if(!m(t))return;const n=a(t);n!==void 0&&e.set(n,t)}),c(t=>{const n=[],i=new Set;let l=!1;for(const o of t)if(e.has(o.key)){const u=e.get(o.key);(!o.show||o.element!==u)&&(l=!0),n.push({element:u,key:o.key,show:!0}),i.add(o.key)}else o.show&&(l=!0),n.push({...o,show:!1});for(const[o,u]of e)i.has(o)||(l=!0,n.push({element:u,key:o,show:!0}));return l?n:t})},[s]);const h=E(e=>{c(t=>t.filter(n=>n.key!==e))},[]);return y(k,{flexDirection:"column",children:r.map(e=>{if(!x(e.element))return p(e.element,{key:e.key});const t=e.element.props.onExit;return p(e.element,{key:e.key,onExit:()=>{t?.(),h(e.key)},show:e.show})})})}export{A as AnimatePresence,A as default};

package/dist/approval-prompt.d.ts

@@ -0,0 +1,65 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type ApprovalRisk = "high" | "low" | "medium";
+type ApprovalDecision = "allow-always" | "allow-once" | "deny";
+type Props = {
+  /**
+  * Accent color for the highlighted option letters. Overrides the risk color.
+  */
+  readonly accentColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Auto-focus the prompt on mount. Set to `false` if a parent already
+  * owns focus and routes input to this component.
+  * @default true
+  */
+  readonly autoFocus?: boolean;
+  /**
+  * Optional body rendered between the header and the prompt line (e.g. a
+  * rendered diff or command preview).
+  */
+  readonly children?: ReactNode;
+  /**
+  * Accessible description of what approving will do.
+  */
+  readonly description?: string;
+  /**
+  * Disable input; use when a parent manages focus and input routing.
+  */
+  readonly isDisabled?: boolean;
+  /**
+  * Resolution callback. Called once the user answers.
+  */
+  readonly onDecision: (decision: ApprovalDecision) => void;
+  /**
+  * Params shown as a compact key=value preview.
+  */
+  readonly params?: Readonly<Record<string, unknown>>;
+  /**
+  * Severity badge; controls the border color.
+  * @default "medium"
+  */
+  readonly risk?: ApprovalRisk;
+  /**
+  * Name of the tool / action under review.
+  */
+  readonly tool: string;
+};
+/**
+* Three-way approval prompt for tool calls. Resolves via `onDecision`:
+* `y` / Enter → allow-once, `a` → allow-always, `n` / Esc → deny.
+* @returns A bordered `ReactElement` containing the risk banner, params
+* preview, optional body, and the prompt line.
+*/
+declare function ApprovalPrompt({
+  accentColor,
+  autoFocus,
+  children,
+  description,
+  isDisabled,
+  onDecision,
+  params,
+  risk,
+  tool
+}: Props): ReactElement;
+export { ApprovalDecision, ApprovalPrompt, type Props as ApprovalPromptProps, ApprovalRisk, Props, ApprovalPrompt as default };

package/dist/approval-prompt.js

@@ -0,0 +1 @@
+import{jsxs as i,jsx as o}from"react/jsx-runtime";import n from"@visulima/tui/components/box";import e from"@visulima/tui/components/text";import v from"@visulima/tui/hooks/use-focus";import S from"@visulima/tui/hooks/use-input";import{useCallback as x}from"react";const C={high:"red",low:"green",medium:"yellow"},D={high:"HIGH RISK",low:"LOW RISK",medium:"MEDIUM RISK"},A=r=>{if(r===null)return"null";if(typeof r=="string")return r;if(typeof r=="number"||typeof r=="boolean")return String(r);try{return JSON.stringify(r)}catch{return String(r)}};function O({accentColor:r,autoFocus:b=!0,children:u,description:m,isDisabled:h=!1,onDecision:l,params:p,risk:f="medium",tool:y}){const d=C[f],a=r??d,{isFocused:w}=v({autoFocus:b,isActive:!h});S(x((t,c)=>{const s=t.toLowerCase();if(s==="y"||c.return){l("allow-once");return}if(s==="a"){l("allow-always");return}(s==="n"||c.escape)&&l("deny")},[l]),{isActive:!h&&w});const g=p===void 0?[]:Object.entries(p);return i(n,{borderColor:d,borderStyle:"round",flexDirection:"column",paddingX:1,children:[i(n,{children:[i(e,{backgroundColor:d,color:"black",children:[" ",D[f]," "]}),i(e,{children:[" ",o(e,{bold:!0,children:y})]})]}),m===void 0?void 0:o(n,{marginTop:1,children:o(e,{children:m})}),g.length===0?void 0:o(n,{flexDirection:"column",marginTop:1,children:g.map(([t,c])=>i(n,{children:[i(e,{color:"cyan",children:[t,"="]}),o(e,{wrap:"truncate-end",children:A(c)})]},t))}),u===void 0?void 0:o(n,{marginTop:1,children:u}),o(n,{marginTop:1,children:i(e,{children:["Allow? [",o(e,{bold:!0,color:a,children:"y"}),"es /"," ",o(e,{bold:!0,color:a,children:"a"}),"lways /"," ",o(e,{bold:!0,color:a,children:"n"}),"o ]"]})})]})}export{O as ApprovalPrompt,O as default};

package/dist/area-chart.d.ts

@@ -0,0 +1,66 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+import { LineSeries } from "./line-chart.js";
+import '@visulima/tui/canvas';
+type Props = {
+  /**
+  * Axis label color.
+  * @default "gray"
+  */
+  readonly axisColor?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Density of the shaded fill below each line.
+  * - `light` → `░`
+  * - `medium` → `▒` (default)
+  * - `heavy` → `▓`
+  */
+  readonly fillDensity?: "heavy" | "light" | "medium";
+  /**
+  * Chart body height in character rows.
+  * @default 10
+  */
+  readonly height?: number;
+  /**
+  * Upper bound for the y-axis.
+  */
+  readonly maxY?: number;
+  /**
+  * Lower bound for the y-axis.
+  */
+  readonly minY?: number;
+  /**
+  * Fallback palette.
+  */
+  readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;
+  /**
+  * Series to plot.
+  */
+  readonly series: ReadonlyArray<LineSeries>;
+  /**
+  * Render the legend below the plot.
+  * @default true
+  */
+  readonly showLegend?: boolean;
+  /**
+  * Chart body width in character columns.
+  * @default 40
+  */
+  readonly width?: number;
+};
+/**
+* Area chart: line chart with the area between the line and the baseline
+* filled with shaded blocks.
+*/
+declare function AreaChart({
+  axisColor,
+  fillDensity,
+  height,
+  maxY,
+  minY,
+  palette,
+  series,
+  showLegend,
+  width
+}: Props): ReactElement;
+export { AreaChart, type Props as AreaChartProps, Props, AreaChart as default };

package/dist/area-chart.js

@@ -0,0 +1 @@
+import{jsxs as b,jsx as m}from"react/jsx-runtime";import{createBrailleGrid as P}from"@visulima/tui/canvas";import M from"@visulima/tui/components/box";import Y from"@visulima/tui/components/canvas";import w from"@visulima/tui/components/text";import{useMemo as _}from"react";import{t as v,p as F,c as D,D as L,a as u}from"./packem_shared/line-chart-BbhMhcZg.js";const S=L,V={heavy:"▓",light:"░",medium:"▒"};function R({axisColor:I="gray",fillDensity:g="medium",height:y=10,maxY:p,minY:x,palette:d=S,series:f,showLegend:A=!0,width:N=40}){const n=_(()=>{const o=f.map((r,h)=>({color:F(r,h,d),points:v(r.data),series:r})),t=D(o);return{list:o,xMax:t.xMax===Number.NEGATIVE_INFINITY?1:t.xMax,xMin:t.xMin===Number.POSITIVE_INFINITY?0:t.xMin,yMax:p??(t.yMax===Number.NEGATIVE_INFINITY?1:t.yMax),yMin:x??(t.yMin===Number.POSITIVE_INFINITY?0:t.yMin)}},[f,d,x,p]),T=V[g];return b(M,{flexDirection:"column",children:[m(Y,{draw:o=>{o.clear();const t=o.width*2,r=o.height*4,h={xMax:n.xMax,xMin:n.xMin,yMax:n.yMax,yMin:n.yMin};for(const{color:s,points:a}of n.list)if(a.length!==0)for(let l=0;l<o.width;l+=1){let i;for(const e of a){const{px:c,py:C}=u(e,h,t,r);if(Math.floor(c/2)===l){const E=Math.floor(C/4);(i===void 0||E<i)&&(i=E)}}if(i!==void 0)for(let e=i+1;e<o.height;e+=1)o.setCell(l,e,T,{color:s,dim:!0})}for(let s=0;s<o.width;s+=2)o.setCell(s,o.height-1,"·",{color:I,dim:!0});for(const{color:s,points:a}of n.list){if(a.length===0)continue;const l=P(o.width,o.height);let i=u(a[0],h,t,r);l.plotPoint(i.px,i.py);for(let e=1;e<a.length;e+=1){const c=u(a[e],h,t,r);l.plotLine(i.px,i.py,c.px,c.py),i=c}l.flush(o,{bold:!0,color:s})}},height:y,version:[f,N,y,x,p,g,I,d],width:N}),A?m(M,{gap:2,marginTop:1,children:n.list.map(({color:o,series:t},r)=>b(M,{gap:1,children:[m(w,{color:o,children:T}),m(w,{children:t.label??`Series ${r+1}`})]},`${r}:${t.label??""}`))}):void 0]})}export{R as AreaChart,R as default};

package/dist/badge.d.ts

@@ -0,0 +1,22 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactNode, ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Label content. Strings are automatically uppercased.
+  */
+  readonly children: ReactNode;
+  /**
+  * Background color for the badge.
+  * @default "magenta"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+};
+/**
+* Renders an uppercase colored label badge, useful for status indicators.
+*/
+declare function Badge({
+  children,
+  color
+}: Props): ReactElement;
+export { Badge, type Props as BadgeProps, Props, Badge as default };

package/dist/badge.js

@@ -0,0 +1 @@
+import{jsxs as n,jsx as a}from"react/jsx-runtime";import o from"@visulima/tui/components/text";function l({children:r,color:t="magenta"}){const e=typeof r=="string"?r.toUpperCase():r;return n(o,{backgroundColor:t,children:[" ",a(o,{color:"black",children:e})," "]})}export{l as Badge,l as default};

package/dist/bar-chart.d.ts

@@ -0,0 +1,67 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type BarDatum = {
+  /**
+  * Per-bar color override. Falls back to the chart-level palette.
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  readonly label?: string;
+  readonly value: number;
+};
+type Props = {
+  /**
+  * Bars to render.
+  */
+  readonly data: ReadonlyArray<BarDatum>;
+  /**
+  * Total height of the plot area in character rows.
+  * @default 10
+  */
+  readonly height?: number;
+  /**
+  * Optional upper bound for the axis. When omitted the chart uses the
+  * largest value in `data`.
+  */
+  readonly max?: number;
+  /**
+  * Orientation of the bars.
+  * @default "vertical"
+  */
+  readonly orientation?: "horizontal" | "vertical";
+  /**
+  * Fallback palette cycled through when a bar does not provide its own color.
+  * @default ["cyan", "magenta", "yellow", "green", "blue", "red"]
+  */
+  readonly palette?: ReadonlyArray<LiteralUnion<AnsiColors, string>>;
+  /**
+  * Render labels underneath vertical bars (or to the left of horizontal bars).
+  * @default true
+  */
+  readonly showLabels?: boolean;
+  /**
+  * Render numeric values next to each bar.
+  * @default false
+  */
+  readonly showValues?: boolean;
+  /**
+  * Total width of the plot area in character columns. Defaults to
+  * `data.length * 3` for vertical charts, or `24` for horizontal.
+  */
+  readonly width?: number;
+};
+/**
+* Bar chart rendered on top of `Canvas`. Uses fractional block glyphs for
+* sub-cell precision (▁▂▃▄▅▆▇█ vertical, ▏▎▍▌▋▊▉█ horizontal).
+*/
+declare function BarChart({
+  data,
+  height,
+  max: maxOverride,
+  orientation,
+  palette,
+  showLabels,
+  showValues,
+  width: widthOverride
+}: Props): ReactElement;
+export { BarChart, type Props as BarChartProps, BarDatum, Props, BarChart as default };

package/dist/bar-chart.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as b}from"react/jsx-runtime";import o from"@visulima/tui/components/box";import k from"@visulima/tui/components/canvas";import p from"@visulima/tui/components/text";import{useMemo as E}from"react";const j=["cyan","magenta","yellow","green","blue","red"],D=(r,t)=>{if(t!==void 0)return t;if(r.length===0)return 0;let n=r[0].value;for(let u=1;u<r.length;u+=1){const{value:h}=r[u];h>n&&(n=h)}return n},B=(r,t,n)=>n.color??t[r%t.length]??"cyan";function A({data:r,height:t=10,max:n,orientation:u="vertical",palette:h=j,showLabels:g=!0,showValues:x=!1,width:S}){const c=E(()=>D(r,n),[r,n]);if(u==="horizontal"){const i=S??24;return e(o,{flexDirection:"column",children:r.map((l,m)=>{const v=c===0?0:l.value/c,s=B(m,h,l);return b(o,{gap:1,children:[g&&l.label!==void 0?e(o,{flexShrink:0,minWidth:8,children:e(p,{dimColor:!0,wrap:"truncate-end",children:l.label})}):void 0,e(o,{flexGrow:1,flexShrink:1,children:e(k,{draw:f=>{f.clear(),f.drawHBar(0,0,i,v,{color:s})},height:1,version:[l.value,c,s,i],width:i})}),x?e(o,{flexShrink:0,children:e(p,{children:String(l.value)})}):void 0]},m)})})}const a=2,d=1,C=S??Math.max(r.length*(a+d),1);return b(o,{flexDirection:"column",children:[e(k,{draw:i=>{i.clear(),r.forEach((l,m)=>{const v=c===0?0:l.value/c,s=B(m,h,l),f=m*(a+d);for(let w=0;w<a;w+=1)i.drawVBar(f+w,0,t,v,{color:s})})},height:t,version:[r,c,h,a,d,t],width:C}),x?e(o,{children:r.map((i,l)=>e(o,{width:a+d,children:e(p,{dimColor:!0,children:String(i.value).padEnd(a+d," ")})},l))}):void 0,g?e(o,{children:r.map((i,l)=>e(o,{width:a+d,children:e(p,{dimColor:!0,wrap:"truncate-end",children:(i.label??"").padEnd(a+d," ")})},l))}):void 0]})}export{A as BarChart,A as default};

package/dist/big-text.d.ts

@@ -0,0 +1,81 @@
+import { ReactElement } from 'react';
+/**
+* Available CFonts font faces.
+*/
+type Font = "3d" | "block" | "chrome" | "grid" | "huge" | "pallet" | "shade" | "simple" | "simple3d" | "simpleBlock" | "slick" | "tiny";
+/**
+* Horizontal text alignment.
+*/
+type Align = "center" | "left" | "right";
+/**
+* Terminal background color names supported by CFonts.
+*/
+type BackgroundColor = "black" | "blue" | "cyan" | "green" | "magenta" | "red" | "transparent" | "white" | "yellow";
+type Props = {
+  /**
+  * Horizontal alignment of the text.
+  * @default "left"
+  */
+  readonly align?: Align;
+  /**
+  * Background color.
+  * @default "transparent"
+  */
+  readonly backgroundColor?: BackgroundColor;
+  /**
+  * Colors to use for the font. Accepts color names, hex values, or `"system"` for terminal default.
+  * @default ["system"]
+  */
+  readonly colors?: string[];
+  /**
+  * Font face to use.
+  * @default "block"
+  * @see https://github.com/dominikwilkowski/cfonts#supported-fonts
+  */
+  readonly font?: Font;
+  /**
+  * Letter spacing.
+  * @default 1
+  */
+  readonly letterSpacing?: number;
+  /**
+  * Line height.
+  * @default 1
+  */
+  readonly lineHeight?: number;
+  /**
+  * Maximum character length per line. `0` means no limit.
+  * @default 0
+  */
+  readonly maxLength?: number;
+  /**
+  * Whether to add an empty line on top and at the bottom of the output.
+  * @default true
+  */
+  readonly space?: boolean;
+  /**
+  * The text to render in a large font.
+  */
+  readonly text: string;
+};
+/**
+* Render large terminal text using CFonts.
+* @example
+* ```tsx
+* import { BigText } from "@visulima/tui/ink";
+*
+* <BigText text="Hello" font="block" />
+* ```
+*/
+declare function BigText({
+  align,
+  backgroundColor,
+  colors,
+  font,
+  letterSpacing,
+  lineHeight,
+  maxLength,
+  space,
+  text
+}: Props): ReactElement;
+export { type Align, type BackgroundColor, BigText, type Align as BigTextAlign, type BackgroundColor as BigTextBackgroundColor, type Font as BigTextFont, type Props as BigTextProps, type Font, type Props, BigText as default };

package/dist/big-text.js

@@ -0,0 +1 @@
+import{jsx as s}from"react/jsx-runtime";import m from"@visulima/tui/components/text";import p from"cfonts";import{useMemo as f}from"react";const u={align:"left",backgroundColor:"transparent",colors:["system"],font:"block",letterSpacing:1,lineHeight:1,maxLength:0,space:!0};function k({align:t,backgroundColor:e,colors:o,font:r,letterSpacing:n,lineHeight:i,maxLength:a,space:g,text:l}){const c=f(()=>p.render(l,{...u,align:t,backgroundColor:e,colors:o,font:r,letterSpacing:n,lineHeight:i,maxLength:a,space:g}),[l,t,e,o,r,n,i,a,g]);return s(m,{children:c&&c.string})}export{k as BigText,k as default};

package/dist/blink-dot.d.ts

@@ -0,0 +1,36 @@
+import { AnsiColors } from '@visulima/colorize';
+import { ReactElement } from 'react';
+import { LiteralUnion } from 'type-fest';
+type Props = {
+  /**
+  * Glyph rendered as the blinking dot.
+  * @default "●" (filled bullet)
+  */
+  readonly character?: string;
+  /**
+  * Dot color.
+  * @default "red"
+  */
+  readonly color?: LiteralUnion<AnsiColors, string>;
+  /**
+  * Milliseconds per blink cycle. The dot is visible for half the cycle.
+  * @default 800
+  */
+  readonly interval?: number;
+  /**
+  * When false, the dot stays solid (no animation).
+  * @default true
+  */
+  readonly isActive?: boolean;
+};
+/**
+* Steady or blinking indicator dot. Pair with `StatusLine` or next to a
+* label to show a "live" / "recording" status.
+*/
+declare function BlinkDot({
+  character,
+  color,
+  interval,
+  isActive
+}: Props): ReactElement;
+export { BlinkDot, type Props as BlinkDotProps, Props, BlinkDot as default };

package/dist/blink-dot.js

@@ -0,0 +1 @@
+import{jsx as c}from"react/jsx-runtime";import l from"@visulima/tui/components/text";import m from"@visulima/tui/hooks/use-animation";function p({character:t="●",color:o="red",interval:i=800,isActive:r=!0}){const{frame:e}=m({interval:Math.max(1,Math.floor(i/2)),isActive:r}),a=!r||e%2===0;return c(l,{color:o,children:a?t:" "})}export{p as BlinkDot,p as default};