@markii/ansi 0.0.1 → 0.16.0

package/dist/components/row.d.ts

@@ -1,26 +1,39 @@
-import type { AnsiComponent } from '../registry.js';
+import type { AnsiComponent, DirectiveAttributes } from '../registry.js';
+declare const TEXT_ALIGNS: readonly ["left", "center", "right"];
+export type RowTextAlign = (typeof TEXT_ALIGNS)[number];
 /** Below this width, cells stack vertically instead of sitting side by side — a named constant per the batch brief, not a magic number. */
 export declare const ROW_COLUMN_THRESHOLD = 60;
+export interface RowLayout {
+    align: RowTextAlign;
+    columnCount: number;
+    colWidth: number;
+    stacked: boolean;
+}
 /**
- * `:::row{cols=2|3|4 text=left|center|right} ... :::` — docs/format.md's one
- * layout container. An absent/invalid `cols` auto-fits: every direct block
- * child becomes one column, all in a single row of columns. A `cols` value
- * smaller than the child count wraps into further grid rows, `cols` cells at
- * a time — the terminal counterpart of the CSS grid wrap a live host does.
- * Below `ROW_COLUMN_THRESHOLD` columns, or with only one cell, cells stack
- * vertically instead (a plain blank-line-separated list) — a fixed-width
- * terminal has no responsive reflow, so this is the one width breakpoint
- * that stands in for it.
+ * `:::row{cols=2|3|4 text=left|center|right} ... :::`'s pure layout
+ * decision: how many columns, how wide each one is, and whether the row
+ * stacks. `render.tsx`'s walk calls this directly (rather than `row`'s own
+ * registered component) so it can build each cell's real Ink subtree at the
+ * correct width BEFORE assembling the row's flex `Box` — see `render.tsx`'s
+ * top comment and `registry.ts`'s doc comment on why this one directive is
+ * handled at the walk level. Kept here, not in `render.tsx`, so
+ * `components/contract-drift.test.ts`'s literal source scan of `row.tsx`
+ * still finds the `attributes.cols`/`attributes.text` reads.
  *
- * Each cell is one of the directive's own top-level children
- * (`registry.ts`'s `AnsiChildren.parts`: a `:::cell` directive grouping
- * several blocks, or any other block standing for itself, per docs/format.md's
- * "a row counts its direct block children as its cells"), rendered through
- * that part's own `render({ width })` at the ACTUAL column width decided
- * below, rather than rendered once at the row's full width and then
- * re-wrapped into a narrower column. A cell containing a self-drawing box
- * (a nested `card`/`table`) therefore draws that box at the real column
- * width in the first place, instead of having an already-drawn frame
- * mangled by a later re-wrap.
+ * An absent/invalid `cols` auto-fits: every cell becomes one column, all in
+ * a single grid row. A `cols` value smaller than the cell count wraps into
+ * further grid rows, `cols` cells at a time. Below `ROW_COLUMN_THRESHOLD`
+ * columns, or with only one cell, cells stack vertically instead.
+ */
+export declare function resolveRowLayout(attributes: DirectiveAttributes, cellCount: number, width: number): RowLayout;
+/**
+ * `row`'s registered component: a passthrough. `render.tsx`'s walk builds
+ * the row's REAL flex-`Box` grid (or, for a `row` reached through STRING
+ * mode nested inside a self-drawing container, a flattened string) directly
+ * and hands it down as `children`, so the registered component's own job is
+ * just to return what it was given. Kept as a real registration (rather
+ * than omitted) so alias resolution, the contract-drift coverage test, and
+ * an unexpected direct invocation all still see a real `row` component.
  */
 export declare const Row: AnsiComponent;
+export {};

package/dist/components/row.js

@@ -1,4 +1,3 @@
-import { columns } from '../box.js';
 const COLS_VALUES = ['2', '3', '4'];
 function isColsValue(value) {
     return COLS_VALUES.includes(value);
@@ -9,59 +8,42 @@ function isTextAlign(value) {
 }
 /** Below this width, cells stack vertically instead of sitting side by side — a named constant per the batch brief, not a magic number. */
 export const ROW_COLUMN_THRESHOLD = 60;
-/** Spaces between adjacent columns. */
-const GUTTER = 1;
 /**
- * `:::row{cols=2|3|4 text=left|center|right} ... :::` — docs/format.md's one
- * layout container. An absent/invalid `cols` auto-fits: every direct block
- * child becomes one column, all in a single row of columns. A `cols` value
- * smaller than the child count wraps into further grid rows, `cols` cells at
- * a time — the terminal counterpart of the CSS grid wrap a live host does.
- * Below `ROW_COLUMN_THRESHOLD` columns, or with only one cell, cells stack
- * vertically instead (a plain blank-line-separated list) — a fixed-width
- * terminal has no responsive reflow, so this is the one width breakpoint
- * that stands in for it.
+ * `:::row{cols=2|3|4 text=left|center|right} ... :::`'s pure layout
+ * decision: how many columns, how wide each one is, and whether the row
+ * stacks. `render.tsx`'s walk calls this directly (rather than `row`'s own
+ * registered component) so it can build each cell's real Ink subtree at the
+ * correct width BEFORE assembling the row's flex `Box` — see `render.tsx`'s
+ * top comment and `registry.ts`'s doc comment on why this one directive is
+ * handled at the walk level. Kept here, not in `render.tsx`, so
+ * `components/contract-drift.test.ts`'s literal source scan of `row.tsx`
+ * still finds the `attributes.cols`/`attributes.text` reads.
  *
- * Each cell is one of the directive's own top-level children
- * (`registry.ts`'s `AnsiChildren.parts`: a `:::cell` directive grouping
- * several blocks, or any other block standing for itself, per docs/format.md's
- * "a row counts its direct block children as its cells"), rendered through
- * that part's own `render({ width })` at the ACTUAL column width decided
- * below, rather than rendered once at the row's full width and then
- * re-wrapped into a narrower column. A cell containing a self-drawing box
- * (a nested `card`/`table`) therefore draws that box at the real column
- * width in the first place, instead of having an already-drawn frame
- * mangled by a later re-wrap.
+ * An absent/invalid `cols` auto-fits: every cell becomes one column, all in
+ * a single grid row. A `cols` value smaller than the cell count wraps into
+ * further grid rows, `cols` cells at a time. Below `ROW_COLUMN_THRESHOLD`
+ * columns, or with only one cell, cells stack vertically instead.
  */
-export const Row = (attributes, children, ctx) => {
+export function resolveRowLayout(attributes, cellCount, width) {
     const rawTextAlign = attributes.text;
     const align = rawTextAlign && isTextAlign(rawTextAlign) ? rawTextAlign : 'left';
-    const cellParts = children.parts;
-    if (cellParts.length === 0)
-        return '';
     const rawCols = attributes.cols ?? '';
-    const requestedCols = isColsValue(rawCols)
-        ? Number(rawCols)
-        : cellParts.length;
-    const columnCount = Math.max(1, Math.min(requestedCols, cellParts.length));
-    const place = (text, width) => align === 'left'
-        ? text
-        : text
-            .split('\n')
-            .map((line) => ctx.pad(line, width, align))
-            .join('\n');
-    if (ctx.width < ROW_COLUMN_THRESHOLD || columnCount <= 1) {
-        return cellParts
-            .map((part) => place(part.render({ width: ctx.width }), ctx.width))
-            .join('\n\n');
-    }
-    const colWidth = Math.max(1, Math.floor((ctx.width - GUTTER * (columnCount - 1)) / columnCount));
-    const placedCells = cellParts.map((part) => place(part.render({ width: colWidth }), colWidth));
-    const gridRows = [];
-    for (let index = 0; index < placedCells.length; index += columnCount) {
-        const rowCells = placedCells.slice(index, index + columnCount);
-        const widths = rowCells.map(() => colWidth);
-        gridRows.push(columns(rowCells, widths, GUTTER));
-    }
-    return gridRows.join('\n\n');
-};
+    const requestedCols = isColsValue(rawCols) ? Number(rawCols) : cellCount;
+    const columnCount = Math.max(1, Math.min(requestedCols, Math.max(1, cellCount)));
+    const gutter = 1;
+    const stacked = width < ROW_COLUMN_THRESHOLD || columnCount <= 1;
+    const colWidth = stacked
+        ? width
+        : Math.max(1, Math.floor((width - gutter * (columnCount - 1)) / columnCount));
+    return { align, columnCount, colWidth, stacked };
+}
+/**
+ * `row`'s registered component: a passthrough. `render.tsx`'s walk builds
+ * the row's REAL flex-`Box` grid (or, for a `row` reached through STRING
+ * mode nested inside a self-drawing container, a flattened string) directly
+ * and hands it down as `children`, so the registered component's own job is
+ * just to return what it was given. Kept as a real registration (rather
+ * than omitted) so alias resolution, the contract-drift coverage test, and
+ * an unexpected direct invocation all still see a real `row` component.
+ */
+export const Row = ({ children }) => children;

package/dist/components/stat.d.ts

@@ -1,13 +1,8 @@
 import type { AnsiComponent } from '../registry.js';
 /**
  * `::stat{value=42 label="stars" trend=up}` — a big value plus label. Data
- * binding (§8) mirrors `@markii/html`'s `Stat` exactly: a bound number/string
- * supplies `value`; a bound object may supply `value`/`label`/`delta`/`trend`
- * — an explicit attribute always wins. Missing value renders `—` rather than
- * a blank line. Terminal form: a muted label line, then a bold value line
- * (with `delta` appended, colored by `trend` when recognized). A failed or
- * stale binding appends `failure-presentation.ts`'s quiet suffix to the
- * value line — the terminal has no tooltip channel, so the reason has to
- * reach the text itself (AGENTS.md's "clean is not silent").
+ * binding (§8): a bound number/string supplies `value`; a bound object may
+ * supply `value`/`label`/`delta`/`trend` — an explicit attribute always
+ * wins. Missing value renders `—` rather than a blank line.
  */
 export declare const Stat: AnsiComponent;

package/dist/components/stat.js

@@ -35,16 +35,11 @@ function pick(attribute, fromData) {
 }
 /**
  * `::stat{value=42 label="stars" trend=up}` — a big value plus label. Data
- * binding (§8) mirrors `@markii/html`'s `Stat` exactly: a bound number/string
- * supplies `value`; a bound object may supply `value`/`label`/`delta`/`trend`
- * — an explicit attribute always wins. Missing value renders `—` rather than
- * a blank line. Terminal form: a muted label line, then a bold value line
- * (with `delta` appended, colored by `trend` when recognized). A failed or
- * stale binding appends `failure-presentation.ts`'s quiet suffix to the
- * value line — the terminal has no tooltip channel, so the reason has to
- * reach the text itself (AGENTS.md's "clean is not silent").
+ * binding (§8): a bound number/string supplies `value`; a bound object may
+ * supply `value`/`label`/`delta`/`trend` — an explicit attribute always
+ * wins. Missing value renders `—` rather than a blank line.
  */
-export const Stat = (attributes, _children, ctx) => {
+export const Stat = ({ attributes, ctx }) => {
     const { data, dataStatus, dataFailureKind } = ctx;
     const bound = safeRead(() => dataStatus === 'missing' || dataStatus === 'error'
         ? {}

package/dist/components/tab.d.ts

@@ -1,13 +1,14 @@
-import type { AnsiComponent } from '../registry.js';
+import { type AnsiComponent } from '../registry.js';
 export declare const DEFAULT_TAB_LABEL = "Tab";
 /**
  * `:::tab{label="..."} ... :::` — one panel of a `tabs` component
- * (`tabs.ts`). Unlike `@markii/html`'s `Tab` (which never reads `label` at
- * all — see that module's `tabs.ts` for why a string-based engine usually
- * can't reach a child directive's own attributes from its parent), THIS
- * engine's `tab` reads its OWN `label` directly, since it is rendered as
- * its OWN directive, not inspected by `tabs` from the outside: the label
- * becomes a bold heading line above the panel body. Rendered standalone
- * (outside a `tabs` parent) it shows exactly the same heading and panel.
+ * (`tabs.tsx`). Rendered STANDALONE (outside a `tabs` parent, or when
+ * reached through `render.tsx`'s STRING-mode fallback), it reads its own
+ * `label` attribute directly and shows a bold heading above the panel body.
+ * When nested under a real `tabs` directive on the ELEMENT-mode path,
+ * `render.tsx`'s `extractTabPanelsElement` reads `label` itself and this
+ * component is never invoked for that child — `InteractiveTabs` draws the
+ * heading instead, since it needs to draw ALL headings together (the tab
+ * strip / stacked list), not one at a time.
  */
 export declare const Tab: AnsiComponent;

package/dist/components/tab.js

@@ -1,17 +1,19 @@
+import { childrenText } from '../registry.js';
 export const DEFAULT_TAB_LABEL = 'Tab';
 /**
  * `:::tab{label="..."} ... :::` — one panel of a `tabs` component
- * (`tabs.ts`). Unlike `@markii/html`'s `Tab` (which never reads `label` at
- * all — see that module's `tabs.ts` for why a string-based engine usually
- * can't reach a child directive's own attributes from its parent), THIS
- * engine's `tab` reads its OWN `label` directly, since it is rendered as
- * its OWN directive, not inspected by `tabs` from the outside: the label
- * becomes a bold heading line above the panel body. Rendered standalone
- * (outside a `tabs` parent) it shows exactly the same heading and panel.
+ * (`tabs.tsx`). Rendered STANDALONE (outside a `tabs` parent, or when
+ * reached through `render.tsx`'s STRING-mode fallback), it reads its own
+ * `label` attribute directly and shows a bold heading above the panel body.
+ * When nested under a real `tabs` directive on the ELEMENT-mode path,
+ * `render.tsx`'s `extractTabPanelsElement` reads `label` itself and this
+ * component is never invoked for that child — `InteractiveTabs` draws the
+ * heading instead, since it needs to draw ALL headings together (the tab
+ * strip / stacked list), not one at a time.
  */
-export const Tab = (attributes, children, ctx) => {
+export const Tab = ({ attributes, children, ctx }) => {
     const label = attributes.label ?? DEFAULT_TAB_LABEL;
     const heading = ctx.bold(ctx.text(label));
-    const childrenText = children();
-    return childrenText ? `${heading}\n${childrenText}` : heading;
+    const body = childrenText(children);
+    return body ? `${heading}\n${body}` : heading;
 };

package/dist/components/table-grid.js

@@ -1,5 +1,4 @@
-import { pad, wrap } from '../box.js';
-import { measure } from '../measure.js';
+import { padText as pad, wrapText as wrap, measureWidth as measure, } from '../text-grid.js';
 /**
  * The ONE box-drawing/width-negotiation routine every table this engine
  * draws goes through: the data-bound `::table` component (`./table.ts`) and

package/dist/components/table.d.ts

@@ -1,16 +1,11 @@
 import type { AnsiComponent } from '../registry.js';
 /**
  * `::table{data=users columns="name,role" limit=10}` — a data-bound table.
- * Data binding (§8) mirrors `@markii/html`'s `Table`: `@markii/stdlib`'s
- * `deriveTableShape` decides the layout from the bound value's own shape.
- * `format`/`decimals` apply to numeric cells only; `text` aligns every
- * cell's content within its column; `caption`, when given, is a bold line
- * above the grid. A missing/stale/failed binding degrades to the same quiet
- * "no data" line `chart`/`progress` use, with the failure suffix appended.
+ * Data binding (§8): `@markii/stdlib`'s `deriveTableShape` decides the
+ * layout from the bound value's own shape.
  *
- * Registered `selfLayout` (see `card.ts`'s doc comment): draws real
- * box-drawing glyphs (`./table-grid.ts`), so it sizes its own grid off
- * `ctx.layout` instead of letting a generic post-render narrow/pad corrupt
- * the borders.
+ * Registered `selfLayout`: draws real box-drawing glyphs
+ * (`./table-grid.ts`), so it sizes its own grid off `ctx.layout` instead of
+ * letting a generic post-render narrow/pad corrupt the borders.
  */
 export declare const Table: AnsiComponent;

package/dist/components/table.js

@@ -24,7 +24,7 @@ function parseLimit(raw) {
 function limitRows(rows, limit) {
     return limit === undefined ? rows : rows.slice(0, limit);
 }
-/** Renders one cell's display text: `format`/`decimals` apply only when the cell's raw value is itself numeric-like, matching `@markii/html`'s `Table` exactly. */
+/** Renders one cell's display text: `format`/`decimals` apply only when the cell's raw value is itself numeric-like. */
 function renderCell(value, format, decimals) {
     if (format && isNumericLike(value))
         return formatValue(value, format, decimals);
@@ -36,19 +36,14 @@ function isTextAlign(value) {
 }
 /**
  * `::table{data=users columns="name,role" limit=10}` — a data-bound table.
- * Data binding (§8) mirrors `@markii/html`'s `Table`: `@markii/stdlib`'s
- * `deriveTableShape` decides the layout from the bound value's own shape.
- * `format`/`decimals` apply to numeric cells only; `text` aligns every
- * cell's content within its column; `caption`, when given, is a bold line
- * above the grid. A missing/stale/failed binding degrades to the same quiet
- * "no data" line `chart`/`progress` use, with the failure suffix appended.
+ * Data binding (§8): `@markii/stdlib`'s `deriveTableShape` decides the
+ * layout from the bound value's own shape.
  *
- * Registered `selfLayout` (see `card.ts`'s doc comment): draws real
- * box-drawing glyphs (`./table-grid.ts`), so it sizes its own grid off
- * `ctx.layout` instead of letting a generic post-render narrow/pad corrupt
- * the borders.
+ * Registered `selfLayout`: draws real box-drawing glyphs
+ * (`./table-grid.ts`), so it sizes its own grid off `ctx.layout` instead of
+ * letting a generic post-render narrow/pad corrupt the borders.
  */
-export const Table = (attributes, _children, ctx) => {
+export const Table = ({ attributes, ctx }) => {
     const { data, dataStatus, dataFailureKind } = ctx;
     const columnsOverride = parseColumns(attributes.columns);
     const limit = parseLimit(attributes.limit);

package/dist/components/tabs-string.d.ts

@@ -0,0 +1,17 @@
+import { type AnsiComponent } from '../registry.js';
+/**
+ * The STRING-mode `tabs` registration — the fallback rendering used only
+ * when a `tabs` directive is reached through `render.tsx`'s STRING mode
+ * (nested inside a self-drawing container) AND, unlike `row`, not
+ * reachable through the panel-extraction path there either (both of
+ * `render.tsx`'s STRING and ELEMENT dispatchers for `tabs` build panels
+ * directly from the hast tree via `extractTabPanels`/`extractTabPanelsElement`
+ * rather than calling this component, since only the hast tree — not an
+ * already-flattened string — can tell each `tab` child's own `label` apart
+ * from its neighbor without a fragile heuristic). This registration exists
+ * so the registry always has a real `tabs` component (alias resolution,
+ * the contract-drift coverage test, and a caller invoking it directly all
+ * see one), using the same blank-line-boundary heuristic the pre-Ink engine
+ * used when it has nothing but a flattened string to work with.
+ */
+export declare const Tabs: AnsiComponent;

package/dist/components/tabs-string.js

@@ -0,0 +1,30 @@
+import { childrenText } from '../registry.js';
+/** The visible marker appended to whichever tab is treated as "active". */
+const ACTIVE_MARKER = ' (active)';
+/**
+ * The STRING-mode `tabs` registration — the fallback rendering used only
+ * when a `tabs` directive is reached through `render.tsx`'s STRING mode
+ * (nested inside a self-drawing container) AND, unlike `row`, not
+ * reachable through the panel-extraction path there either (both of
+ * `render.tsx`'s STRING and ELEMENT dispatchers for `tabs` build panels
+ * directly from the hast tree via `extractTabPanels`/`extractTabPanelsElement`
+ * rather than calling this component, since only the hast tree — not an
+ * already-flattened string — can tell each `tab` child's own `label` apart
+ * from its neighbor without a fragile heuristic). This registration exists
+ * so the registry always has a real `tabs` component (alias resolution,
+ * the contract-drift coverage test, and a caller invoking it directly all
+ * see one), using the same blank-line-boundary heuristic the pre-Ink engine
+ * used when it has nothing but a flattened string to work with.
+ */
+export const Tabs = ({ children }) => {
+    const text = childrenText(children);
+    if (!text.trim())
+        return '';
+    const blocks = text.split('\n\n');
+    const [first, ...rest] = blocks;
+    if (first === undefined)
+        return text;
+    const lines = first.split('\n');
+    lines[0] = `${lines[0] ?? ''}${ACTIVE_MARKER}`;
+    return [lines.join('\n'), ...rest].join('\n\n');
+};

package/dist/components/tabs.d.ts

@@ -1,18 +1,33 @@
-import type { AnsiComponent } from '../registry.js';
+import type { ReactNode } from 'react';
+import type { ColorLevel } from '../ansi.js';
+import type { ElementTabPanel } from '../render.js';
 /**
  * `::::tabs :::tab{label="..."} ... ::: :::tab{label="..."} ... ::: ::::` —
- * a tabbed panel switcher. A terminal has no click-driven tab switching (see
- * `render.ts`'s top comment on interactive components), so every panel is
- * shown, stacked, in document order — matching `@markii/html`'s `Tabs`
- * faithfulness limitation of showing every panel rather than picking one.
+ * a tabbed panel switcher, built as a real Ink element (`render.tsx`'s
+ * `renderTabsElement` calls this directly rather than going through the
+ * ordinary registry-component invocation, so it can hand it real per-panel
+ * subtrees — see `registry.ts`'s and `render.tsx`'s doc comments).
  *
- * "The active tab marked": since every panel is always visible here, this
- * engine treats the FIRST tab (document order) as the one a live host would
- * show before any interaction, and marks only its heading line — every
- * `tab` child's block is joined into `childrenText` with a blank line
- * between them (`render.ts`'s `renderBlocks`), the same separator this
- * engine uses between any two sibling blocks, so splitting on the first
- * blank line reliably finds the boundary between the first tab's block and
- * the rest without needing any information `tabs` does not have.
+ * Non-interactive (the default, and the render-once path): every panel is
+ * shown, stacked, in document order, the first one's heading marked
+ * `(active)` — matching the pre-Ink engine's faithfulness limitation of
+ * showing every panel rather than picking one, since a static render has no
+ * way to ask which panel a reader wants.
+ *
+ * Interactive: only the active panel's body is shown; the header row lists
+ * every label, the active one bracketed; left/right or Tab switches it when
+ * this `tabs` instance is focused (`useIsFocused`). When this `tabs`
+ * instance itself is the FOCUSED component (as opposed to merely being
+ * interactive), the whole header strip is drawn in the accent color and
+ * prefixed with a `› ` glyph (`useFocusMarker`), so focus is visible even
+ * on a theme with no perceptible accent color; an unfocused header strip
+ * gets two leading spaces instead, so nothing shifts horizontally when
+ * focus moves onto or off of this block.
  */
-export declare const Tabs: AnsiComponent;
+export interface InteractiveTabsProps {
+    panels: readonly ElementTabPanel[];
+    color: ColorLevel;
+    interactive: boolean;
+    focusId: number | undefined;
+}
+export declare function InteractiveTabs({ panels, color, interactive, focusId, }: InteractiveTabsProps): ReactNode;

package/dist/components/tabs.js

@@ -1,30 +1,37 @@
-/** The visible marker appended to whichever tab is treated as "active" (see this module's doc comment for how that is decided). */
-const ACTIVE_MARKER = ' (active)';
-/**
- * `::::tabs :::tab{label="..."} ... ::: :::tab{label="..."} ... ::: ::::` —
- * a tabbed panel switcher. A terminal has no click-driven tab switching (see
- * `render.ts`'s top comment on interactive components), so every panel is
- * shown, stacked, in document order — matching `@markii/html`'s `Tabs`
- * faithfulness limitation of showing every panel rather than picking one.
- *
- * "The active tab marked": since every panel is always visible here, this
- * engine treats the FIRST tab (document order) as the one a live host would
- * show before any interaction, and marks only its heading line — every
- * `tab` child's block is joined into `childrenText` with a blank line
- * between them (`render.ts`'s `renderBlocks`), the same separator this
- * engine uses between any two sibling blocks, so splitting on the first
- * blank line reliably finds the boundary between the first tab's block and
- * the rest without needing any information `tabs` does not have.
- */
-export const Tabs = (_attributes, children) => {
-    const childrenText = children();
-    if (!childrenText.trim())
-        return '';
-    const blocks = childrenText.split('\n\n');
-    const [first, ...rest] = blocks;
-    if (first === undefined)
-        return childrenText;
-    const lines = first.split('\n');
-    lines[0] = `${lines[0] ?? ''}${ACTIVE_MARKER}`;
-    return [lines.join('\n'), ...rest].join('\n\n');
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { bold, dim } from '../ansi.js';
+import { useFocusMarker, useIsFocused } from '../interactive.js';
+export function InteractiveTabs({ panels, color, interactive, focusId, }) {
+    const [active, setActive] = useState(0);
+    const focused = useIsFocused(focusId);
+    useInput((_input, key) => {
+        if (key.leftArrow) {
+            setActive((current) => (current - 1 + panels.length) % panels.length);
+        }
+        else if (key.rightArrow || key.tab) {
+            setActive((current) => (current + 1) % panels.length);
+        }
+    }, { isActive: interactive && focused });
+    // Every hook this component calls runs BEFORE the non-interactive early
+    // return below, so the hook order is identical in both modes. The header
+    // strip is cheap to build and unused in the non-interactive branch; that
+    // waste is the price of never making a hook call conditional.
+    const activeIndex = Math.min(active, Math.max(0, panels.length - 1));
+    const activePanel = panels[activeIndex];
+    const strip = panels
+        .map((panel, index) => {
+        const rendered = index === activeIndex
+            ? bold(`[${panel.label}]`, color)
+            : dim(panel.label, color);
+        return index > 0 ? `  ${rendered}` : rendered;
+    })
+        .join('');
+    const focusGlyph = focused ? '› ' : '  ';
+    const headingLine = useFocusMarker(`${focusGlyph}${strip}`, focusId);
+    if (!interactive) {
+        return (_jsx(Box, { flexDirection: "column", children: panels.map((panel, index) => (_jsxs(Box, { marginTop: index > 0 ? 1 : 0, flexDirection: "column", children: [_jsx(Text, { children: bold(`${panel.label}${index === 0 ? ' (active)' : ''}`, color) }), panel.body] }, index))) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: headingLine }), activePanel?.body] }));
+}

package/dist/index.d.ts

@@ -1,14 +1,12 @@
-export { renderMarkToAnsi, renderMarkNodeToAnsi, renderMarkInlineToAnsi, type RenderMarkOptions, } from './render.js';
+export { renderMarkToAnsi, renderMarkNodeToAnsi, renderMarkInlineToAnsi, buildMarkElement, type RenderMarkOptions, } from './render.js';
 export { fg, colorize, bold, dim, italic, underline, inverse, hyperlink, detectColorLevel, resolveColorOption, type ColorLevel, type ColorOption, type AnsiColor, } from './ansi.js';
 export { defaultAnsiTheme, type AnsiTheme, type Tier1Token } from './theme.js';
 export { style } from './style.js';
-export { createAnsiRegistry, mergeAnsiRegistries, registryAliases, readRegistryComponent, resolveDirectiveAlias, REGISTRY_ALIASES, type DirectiveAttributes, type AnsiRegistry, type AnsiRegistryEntry, type AnsiComponent, type AnsiChildren, type AnsiChildPart, type AnsiChildrenOptions, type AnsiRenderContext, type RegistryAlias, type RegistryAliases, type ResolvedDirective, type ValueResolution, } from './registry.js';
+export { createAnsiRegistry, mergeAnsiRegistries, registryAliases, readRegistryComponent, resolveDirectiveAlias, childrenText, REGISTRY_ALIASES, type DirectiveAttributes, type AnsiRegistry, type AnsiRegistryEntry, type AnsiComponent, type AnsiComponentProps, type AnsiRenderContext, type RegistryAlias, type RegistryAliases, type ResolvedDirective, type ValueResolution, } from './registry.js';
 export { resolveStorePath, resolveScopedPath, VAULT_NAME_PREFIX, type StorePathResolution, type ValueScope, } from './resolve.js';
 export { failurePhrase, failureTitle, failureToken, dataStateSuffix, emptyInlineTitle, invalidAttributeValueLabel, invalidAttributeValueTitle, unsafeImageSrcLabel, unsafeImageSrcTitle, } from './failure-presentation.js';
 export { stringifyStoredValue } from './value-format.js';
-export { measure, stripAnsi } from './measure.js';
 export { stripControlCharacters, sanitizeBlockText, sanitizeUrlText, BLOCK_TAB_WIDTH, } from './sanitize.js';
-export { wrap, pad, indentBlock, columns, frame, rule, type FrameOptions, } from './box.js';
 export { resolveLayoutAttributes, applyLayout, LAYOUT_ATTRIBUTE_KEYS, type ResolvedLayoutAttributes, type ResolvedLayoutPresets, type WidthPreset, type AlignPreset, } from './layout.js';
 export { type ResolveImageSrc } from './image-resolve.js';
 export { type ResolveHref } from './href-resolve.js';

package/dist/index.js

@@ -1,17 +1,16 @@
-// @markii/ansi: a framework-free terminal renderer for Markii documents. It
+// @markii/ansi: a terminal renderer for Markii documents, built on Ink. It
 // consumes @markii/core's sanitized hast and emits a plain string (optionally
 // carrying ANSI SGR/OSC 8 escapes) for a terminal, a pipe, or any host that
-// wants text with no HTML and no React runtime. It is a third platform
-// renderer alongside @markii/html and @markii/react.
-export { renderMarkToAnsi, renderMarkNodeToAnsi, renderMarkInlineToAnsi, } from './render.js';
+// wants text with no HTML runtime — plus, for a live viewer, the Ink element
+// tree itself (`buildMarkElement`). It is a third platform renderer alongside
+// @markii/html and @markii/react.
+export { renderMarkToAnsi, renderMarkNodeToAnsi, renderMarkInlineToAnsi, buildMarkElement, } from './render.js';
 export { fg, colorize, bold, dim, italic, underline, inverse, hyperlink, detectColorLevel, resolveColorOption, } from './ansi.js';
 export { defaultAnsiTheme } from './theme.js';
 export { style } from './style.js';
-export { createAnsiRegistry, mergeAnsiRegistries, registryAliases, readRegistryComponent, resolveDirectiveAlias, REGISTRY_ALIASES, } from './registry.js';
+export { createAnsiRegistry, mergeAnsiRegistries, registryAliases, readRegistryComponent, resolveDirectiveAlias, childrenText, REGISTRY_ALIASES, } from './registry.js';
 export { resolveStorePath, resolveScopedPath, VAULT_NAME_PREFIX, } from './resolve.js';
 export { failurePhrase, failureTitle, failureToken, dataStateSuffix, emptyInlineTitle, invalidAttributeValueLabel, invalidAttributeValueTitle, unsafeImageSrcLabel, unsafeImageSrcTitle, } from './failure-presentation.js';
 export { stringifyStoredValue } from './value-format.js';
-export { measure, stripAnsi } from './measure.js';
 export { stripControlCharacters, sanitizeBlockText, sanitizeUrlText, BLOCK_TAB_WIDTH, } from './sanitize.js';
-export { wrap, pad, indentBlock, columns, frame, rule, } from './box.js';
 export { resolveLayoutAttributes, applyLayout, LAYOUT_ATTRIBUTE_KEYS, } from './layout.js';

package/dist/ink-string.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+/**
+ * Mounts `element` with Ink at `columns` wide, captures the first (and only)
+ * frame as a plain string, and unmounts. `ink` is imported dynamically
+ * because `yoga-layout` (Ink's layout engine) resolves its WASM module via a
+ * top-level `await` at ES-module-evaluation time (`SPIKE-10-findings.md`'s
+ * "Item 3"): the first call to this function pays that one-time cost, and
+ * every exported entry point that reaches here is therefore `async`. A
+ * later call in the same process reuses the already-evaluated module graph,
+ * the ordinary ESM module-cache guarantee.
+ */
+export declare function renderInkToString(element: ReactElement, columns: number): Promise<string>;

package/dist/ink-string.js

@@ -0,0 +1,41 @@
+import { Writable } from 'node:stream';
+function makeCollectingStream(columns) {
+    const chunks = [];
+    const stream = new Writable({
+        write(chunk, _encoding, callback) {
+            chunks.push(chunk.toString('utf8'));
+            callback();
+        },
+    });
+    stream.columns = columns;
+    stream.rows = 40;
+    // Ink's static/measured layout paths expect a TTY-shaped stream.
+    stream.isTTY = true;
+    stream.getColorDepth = () => 8;
+    stream.hasColors = () => true;
+    return { stream, getOutput: () => chunks.join('') };
+}
+/**
+ * Mounts `element` with Ink at `columns` wide, captures the first (and only)
+ * frame as a plain string, and unmounts. `ink` is imported dynamically
+ * because `yoga-layout` (Ink's layout engine) resolves its WASM module via a
+ * top-level `await` at ES-module-evaluation time (`SPIKE-10-findings.md`'s
+ * "Item 3"): the first call to this function pays that one-time cost, and
+ * every exported entry point that reaches here is therefore `async`. A
+ * later call in the same process reuses the already-evaluated module graph,
+ * the ordinary ESM module-cache guarantee.
+ */
+export async function renderInkToString(element, columns) {
+    const { render } = await import('ink');
+    const { stream, getOutput } = makeCollectingStream(columns);
+    const instance = render(element, {
+        stdout: stream,
+        stdin: process.stdin,
+        exitOnCtrlC: false,
+        patchConsole: false,
+        debug: false,
+        interactive: false,
+    });
+    instance.unmount();
+    return getOutput();
+}