@markii/ansi 0.15.0 → 0.17.0-next.0

package/dist/components/chart.js

@@ -1,5 +1,4 @@
-import { pad } from '../box.js';
-import { measure } from '../measure.js';
+import { padText, measureWidth } from '../text-grid.js';
 import { safeRead } from '../resolve.js';
 import { dataStateSuffix, failureToken } from '../failure-presentation.js';
 const CHART_KINDS = ['line', 'bar'];
@@ -30,7 +29,7 @@ function coercePoint(entry) {
     }
     return undefined;
 }
-/** Builds the numeric point series to plot, a bound `data` array taking priority over the static `values=` attribute. Ported from `@markii/html`'s `resolvePoints`. */
+/** Builds the numeric point series to plot, a bound `data` array taking priority over the static `values=` attribute. */
 function resolvePoints(data, dataStatus, rawValues) {
     if (dataStatus !== 'missing' &&
         dataStatus !== 'error' &&
@@ -58,26 +57,25 @@ function resolvePoints(data, dataStatus, rawValues) {
     }
     return [];
 }
-/** `▁▂▃▄▅▆▇█`, the eight-step block-height ramp a line chart's sparkline row is built from. */
-const SPARKLINE_CHARS = '▁▂▃▄▅▆▇█';
 function formatPoint(value) {
     return Number.isFinite(value)
         ? String(Math.round(value * 100) / 100)
         : String(value);
 }
-function sparkline(points) {
+/** One sparkline row over `ramp`, the render's eight-step `GlyphSet.sparkline`. */
+function sparkline(points, ramp) {
     const min = Math.min(...points);
     const max = Math.max(...points);
     const range = max - min;
     return points
         .map((point) => {
         const normalized = range > 0 ? (point - min) / range : 0.5;
-        const index = Math.min(SPARKLINE_CHARS.length - 1, Math.max(0, Math.round(normalized * (SPARKLINE_CHARS.length - 1))));
-        return SPARKLINE_CHARS[index];
+        const index = Math.min(ramp.length - 1, Math.max(0, Math.round(normalized * (ramp.length - 1))));
+        return ramp[index];
     })
         .join('');
 }
-/** `██████` bar length for `point`, scaled against the series' largest magnitude and capped at `budget` columns. */
+/** A bar's length for `point`, scaled against the series' largest magnitude and capped at `budget` columns. */
 function barLength(point, maxMagnitude, budget) {
     if (maxMagnitude <= 0)
         return 0;
@@ -85,18 +83,12 @@ function barLength(point, maxMagnitude, budget) {
 }
 /**
  * `::chart{kind=line|bar values="1,3,2,5"}` — a dependency-free, hand-rolled
- * chart. Data binding (§8) mirrors `@markii/html`'s `Chart`: a bound `data`
- * array of numbers (or `{value}` objects) takes priority over the static
- * `values=` attribute; non-numeric/non-finite entries are dropped and the
- * point count capped at `MAX_POINTS`. An empty or all-invalid series renders
- * a small neutral "no data" line rather than a broken chart.
- *
- * Terminal form: a `line` chart is a single sparkline row (`▁▂▃▄▅▆▇█`),
- * flanked by its minimum and maximum as plain numbers. A `bar` chart is one
- * horizontal `█` bar per point, its own value as the row's label, labels
- * right-aligned to the widest one so every bar starts at the same column.
+ * chart. Data binding (§8): a bound `data` array of numbers (or `{value}`
+ * objects) takes priority over the static `values=` attribute. Terminal
+ * form: a `line` chart is a single sparkline row, a `bar` chart is one
+ * horizontal bar per point.
  */
-export const Chart = (attributes, _children, ctx) => {
+export const Chart = ({ attributes, ctx }) => {
     const { data, dataStatus, dataFailureKind } = ctx;
     const rawKind = attributes.kind ?? DEFAULT_KIND;
     const kind = isChartKind(rawKind) ? rawKind : DEFAULT_KIND;
@@ -115,15 +107,15 @@ export const Chart = (attributes, _children, ctx) => {
     if (kind === 'line') {
         const min = ctx.dim(formatPoint(Math.min(...points)));
         const max = ctx.dim(formatPoint(Math.max(...points)));
-        return `${min} ${sparkline(points)} ${max}${styledSuffix}`;
+        return `${min} ${sparkline(points, ctx.glyphs.sparkline)} ${max}${styledSuffix}`;
     }
     const labels = points.map((point) => formatPoint(point));
-    const labelWidth = Math.max(...labels.map((label) => measure(label)));
+    const labelWidth = Math.max(...labels.map((label) => measureWidth(label)));
     const budget = Math.max(1, ctx.width - labelWidth - 1);
     const maxMagnitude = Math.max(...points.map((point) => Math.abs(point)));
     const lines = points.map((point, index) => {
-        const bar = '█'.repeat(barLength(point, maxMagnitude, budget));
-        return `${pad(labels[index], labelWidth, 'right')} ${bar}`;
+        const bar = ctx.glyphs.barFilled.repeat(barLength(point, maxMagnitude, budget));
+        return `${padText(labels[index], labelWidth, 'right')} ${bar}`;
     });
     return `${lines.join('\n')}${styledSuffix}`;
 };

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

@@ -0,0 +1,26 @@
+import { type AnsiComponent } from '../registry.js';
+/** Columns the indent prefix ("  ") consumes from the enclosing width. */
+export declare const DETAILS_INDENT_WIDTH = 2;
+/**
+ * The inner budget `details`'s body renders at, given only the outer width
+ * — never the body itself. Mirrors `card.ts`'s `resolveCardInnerWidth`:
+ * `render.tsx`'s walk calls this BEFORE building children (for both the
+ * STRING-mode fallback below and the real interactive element builder in
+ * `details.tsx`), so the body — and anything self-drawing nested inside it
+ * — is built exactly once, at the correct width, never re-wrapped
+ * afterward.
+ */
+export declare function resolveDetailsInnerWidth(outerWidth: number): number;
+/**
+ * The STRING-mode `details` registration (used by `render.tsx`'s registry
+ * lookups, and as the fallback rendering when a `details` directive is
+ * reached through STRING mode — nested inside a self-drawing container's
+ * own body, see `render.tsx`'s top comment). The real Ink/interactive
+ * version `render.tsx` builds directly for a `details` reached through
+ * ELEMENT mode is `InteractiveDetails` in `./details.tsx`; the two share no
+ * code because this one can only ever show the body (a plain string has no
+ * expand/collapse affordance), exactly like the pre-Ink engine. `children`
+ * arrives ALREADY built at exactly `resolveDetailsInnerWidth`'s width —
+ * this component never re-wraps.
+ */
+export declare const Details: AnsiComponent;

package/dist/components/details-string.js

@@ -0,0 +1,39 @@
+import { indentBlock } from '../text-grid.js';
+import { childrenText } from '../registry.js';
+const DEFAULT_TITLE = 'Details';
+/** Columns the indent prefix ("  ") consumes from the enclosing width. */
+export const DETAILS_INDENT_WIDTH = 2;
+/**
+ * The inner budget `details`'s body renders at, given only the outer width
+ * — never the body itself. Mirrors `card.ts`'s `resolveCardInnerWidth`:
+ * `render.tsx`'s walk calls this BEFORE building children (for both the
+ * STRING-mode fallback below and the real interactive element builder in
+ * `details.tsx`), so the body — and anything self-drawing nested inside it
+ * — is built exactly once, at the correct width, never re-wrapped
+ * afterward.
+ */
+export function resolveDetailsInnerWidth(outerWidth) {
+    return Math.max(1, outerWidth - DETAILS_INDENT_WIDTH);
+}
+/**
+ * The STRING-mode `details` registration (used by `render.tsx`'s registry
+ * lookups, and as the fallback rendering when a `details` directive is
+ * reached through STRING mode — nested inside a self-drawing container's
+ * own body, see `render.tsx`'s top comment). The real Ink/interactive
+ * version `render.tsx` builds directly for a `details` reached through
+ * ELEMENT mode is `InteractiveDetails` in `./details.tsx`; the two share no
+ * code because this one can only ever show the body (a plain string has no
+ * expand/collapse affordance), exactly like the pre-Ink engine. `children`
+ * arrives ALREADY built at exactly `resolveDetailsInnerWidth`'s width —
+ * this component never re-wraps.
+ */
+export const Details = ({ attributes, children, ctx }) => {
+    const title = attributes.title ?? DEFAULT_TITLE;
+    const open = Object.hasOwn(attributes, 'open');
+    const glyph = open ? ctx.glyphs.foldOpen : ctx.glyphs.foldClosed;
+    const marker = ctx.dim(`${glyph} ${ctx.bold(ctx.text(title))} (collapsible section, shown expanded)`);
+    const body = childrenText(children);
+    if (!body)
+        return marker;
+    return `${marker}\n${indentBlock(body, '  ')}`;
+};

package/dist/components/details.d.ts

@@ -1,12 +1,34 @@
-import type { AnsiComponent } from '../registry.js';
+import type { GlyphSet } from '../glyphs.js';
+import type { ReactNode } from 'react';
+import type { ColorLevel } from '../ansi.js';
 /**
- * `:::details{title="..." open} ... :::` — a collapsible disclosure. A
- * terminal has no collapse/expand affordance (see `render.ts`'s top comment
- * on interactive components), so this ALWAYS shows the body: the bare
- * `open` attribute instead only changes the marker glyph (`▾` for `open`,
- * `▸` for folded-by-default), a quiet hint at the note's own authored
- * default rather than a control that does anything here. The marker line
- * also names the section a "collapsible section" so a reader understands
- * why they are seeing an indented block with no directive name attached.
+ * `:::details{title="..." open} ... :::` — a collapsible disclosure, built
+ * as a real Ink element (`render.tsx`'s `renderDetailsElement` calls this
+ * directly, the same way it calls `InteractiveTabs` for `tabs` — see
+ * `registry.ts`'s and `render.tsx`'s doc comments).
+ *
+ * Non-interactive (the default, and the render-once path): ALWAYS shows the
+ * body, exactly like the pre-Ink engine — a static render has no
+ * expand/collapse affordance. The bare `open` attribute only changes the
+ * marker glyph (`▾` for `open`, `▸` for folded-by-default), a quiet hint at
+ * the note's own authored default.
+ *
+ * Interactive: starts CLOSED unless `open` was given; Enter toggles it when
+ * this `details` instance is focused (`useIsFocused`). When focused, the
+ * summary line also carries a dim hint (`enter to open`/`enter to close`,
+ * matching the current state) and the whole line is drawn in the accent
+ * color with a leading `› ` glyph (`useFocusMarker`), so focus is visible
+ * even on a theme with no perceptible accent color; unfocused, the line
+ * gets two leading spaces instead, so nothing shifts horizontally when
+ * focus moves onto or off of this block.
  */
-export declare const Details: AnsiComponent;
+export interface InteractiveDetailsProps {
+    title: string;
+    body: ReactNode;
+    defaultOpen: boolean;
+    color: ColorLevel;
+    glyphs: GlyphSet;
+    interactive: boolean;
+    focusId: number | undefined;
+}
+export declare function InteractiveDetails({ title, body, defaultOpen, color, glyphs, interactive, focusId, }: InteractiveDetailsProps): ReactNode;

package/dist/components/details.js

@@ -1,25 +1,28 @@
-import { indentBlock } from '../box.js';
-const DEFAULT_TITLE = 'Details';
-/** Columns the indent prefix ("  ") consumes from the enclosing width. */
-const INDENT_WIDTH = 2;
-/**
- * `:::details{title="..." open} ... :::` — a collapsible disclosure. A
- * terminal has no collapse/expand affordance (see `render.ts`'s top comment
- * on interactive components), so this ALWAYS shows the body: the bare
- * `open` attribute instead only changes the marker glyph (`▾` for `open`,
- * `▸` for folded-by-default), a quiet hint at the note's own authored
- * default rather than a control that does anything here. The marker line
- * also names the section a "collapsible section" so a reader understands
- * why they are seeing an indented block with no directive name attached.
- */
-export const Details = (attributes, children, ctx) => {
-    const title = attributes.title ?? DEFAULT_TITLE;
-    const open = Object.hasOwn(attributes, 'open');
-    const glyph = open ? '▾' : '▸';
-    const marker = ctx.dim(`${glyph} ${ctx.bold(ctx.text(title))} (collapsible section, shown expanded)`);
-    const innerWidth = Math.max(1, ctx.width - INDENT_WIDTH);
-    const childrenText = children({ width: innerWidth });
-    if (!childrenText)
-        return marker;
-    return `${marker}\n${indentBlock(childrenText, '  ')}`;
-};
+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 { useFocusAnchor, useFocusMarker, useIsFocused, } from '../interactive.js';
+export function InteractiveDetails({ title, body, defaultOpen, color, glyphs, interactive, focusId, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    const focused = useIsFocused(focusId);
+    const anchor = useFocusAnchor(focusId);
+    useInput((_input, key) => {
+        if (key.return)
+            setOpen((current) => !current);
+    }, { 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 summary
+    // line is cheap to build and unused in the non-interactive branch; that
+    // waste is the price of never making a hook call conditional.
+    const openGlyph = open ? glyphs.foldOpen : glyphs.foldClosed;
+    const hint = focused ? (open ? '  enter to close' : '  enter to open') : '';
+    const summaryLine = dim(`${openGlyph} ${bold(title, color)}${hint}`, color);
+    const focusGlyph = focused ? glyphs.focus : '  ';
+    const headingLine = useFocusMarker(`${focusGlyph}${summaryLine}`, focusId);
+    if (!interactive) {
+        const glyph = defaultOpen ? glyphs.foldOpen : glyphs.foldClosed;
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: dim(`${glyph} ${bold(title, color)} (collapsible section, shown expanded)`, color) }), _jsx(Box, { marginLeft: 2, flexDirection: "column", children: body })] }));
+    }
+    return (_jsxs(Box, { ref: anchor, flexDirection: "column", children: [_jsx(Text, { children: headingLine }), open && (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: body }))] }));
+}

package/dist/components/divider.js

@@ -1,4 +1,4 @@
-import { measure } from '../measure.js';
+import { measureWidth, padText, ruleLine } from '../text-grid.js';
 import { selfLayoutAlign, selfLayoutWidth } from '../layout.js';
 const DIVIDER_VARIANTS = [
     'line',
@@ -12,15 +12,13 @@ const LABEL_ALIGNS = ['left', 'center', 'right'];
 function isDividerLabelAlign(value) {
     return LABEL_ALIGNS.includes(value);
 }
-const ORNAMENT_GLYPH = '❖';
 /** The rule character each non-ornament variant draws with. */
-const RULE_CHAR = { line: '─', dots: '·' };
 /** How much of a labeled rule's rule fill sits on the SHORT side when the label is pushed left/right (the rest fills the long side). */
 const SHORT_SIDE_RULE = 2;
 /** Builds a full-`width` rule with `label` woven in at `align`, e.g. `── Part 2 ─────────`. */
 function labeledRule(ruleChar, label, width, align) {
     const labelText = ` ${label} `;
-    const remaining = Math.max(0, width - measure(labelText));
+    const remaining = Math.max(0, width - measureWidth(labelText));
     let left;
     if (align === 'left')
         left = Math.min(SHORT_SIDE_RULE, remaining);
@@ -42,15 +40,13 @@ function labeledRule(ruleChar, label, width, align) {
  * within the width. Dimmed, matching the plain thematic-break rendering.
  *
  * Registered `selfLayout` (`registry.ts`'s `AnsiRegistryEntry.selfLayout`):
- * a full-width rule is ONE long run with no spaces in it, so a generic
+ * a full-width rule is ONE long run with no spaces in it, so the generic
  * post-render `applyLayout` narrowing would treat the whole rule as a
- * single over-long "word" and hard-break it into several shorter lines
- * (`../box.ts`'s `wrap`'s `breakLongWord`) instead of drawing one shorter
- * rule — this component instead reads `ctx.layout` and draws its own rule
- * at the resolved width from the start, exactly like `card`/`callout`.
+ * single over-long "word" and hard-break it — this component instead reads
+ * `ctx.layout` and draws its own rule at the resolved width from the start.
  */
 const FIT_DEFAULT_WIDTH = 10;
-export const Divider = (attributes, _children, ctx) => {
+export const Divider = ({ attributes, ctx }) => {
     const rawVariant = attributes.variant ?? 'line';
     const variant = isDividerVariant(rawVariant)
         ? rawVariant
@@ -61,20 +57,20 @@ export const Divider = (attributes, _children, ctx) => {
     const labelAlign = rawLabelAlign && isDividerLabelAlign(rawLabelAlign)
         ? rawLabelAlign
         : 'center';
-    const naturalWidth = label ? measure(label) + 4 : FIT_DEFAULT_WIDTH;
+    const naturalWidth = label ? measureWidth(label) + 4 : FIT_DEFAULT_WIDTH;
     const width = selfLayoutWidth(ctx.layout, ctx.width, naturalWidth);
     let line;
     if (variant === 'ornament') {
         const inner = label
-            ? `${ORNAMENT_GLYPH} ${label} ${ORNAMENT_GLYPH}`
-            : ORNAMENT_GLYPH;
-        line = ctx.pad(inner, width, labelAlign);
+            ? `${ctx.glyphs.ornament} ${label} ${ctx.glyphs.ornament}`
+            : ctx.glyphs.ornament;
+        line = padText(inner, width, labelAlign);
     }
     else {
-        const ruleChar = RULE_CHAR[variant];
+        const ruleChar = variant === 'dots' ? ctx.glyphs.ruleDots : ctx.glyphs.rule;
         line = label
             ? labeledRule(ruleChar, label, width, labelAlign)
-            : ctx.rule(width, ruleChar);
+            : ruleLine(width, ruleChar);
     }
     return selfLayoutAlign(ctx.dim(line), ctx.layout, ctx.width);
 };

package/dist/components/figure.d.ts

@@ -1,20 +1,9 @@
-import type { AnsiComponent } from '../registry.js';
+import { type AnsiComponent } from '../registry.js';
 /**
  * `:::figure{src="..." alt="..."} caption markdown :::` — an image with a
- * rich (markdown) caption. `src` is required; a missing `src` shows only the
- * caption, matching the graceful-degradation spirit of the unknown-directive
- * fallback rather than throwing.
- *
- * Security: `src` bypasses `@markii/core`'s hast-level URL sanitizer (it is
- * a directive attribute, not a markdown image), so this component closes
- * that gap itself with `@markii/core`'s `isSafeUrl` — the same allowlist the
- * sanitizer uses — and drops the image line entirely on a refusal, replacing
- * it with a short labeled marker (a terminal has no tooltip to carry the
- * full sentence out of the text flow) plus the full sentence reported to
- * `onDiagnostic`; matches `@markii/html`'s `Figure` in behavior, not in the
- * inline wording.
- *
- * Terminal form: alt text, then the (possibly host-resolved) src, then the
- * caption, each on its own line, dimmed except the caption itself.
+ * rich (markdown) caption. `src` is required; a missing `src` shows only
+ * the caption. Security: `src` bypasses `@markii/core`'s hast-level URL
+ * sanitizer (it is a directive attribute, not a markdown image), so this
+ * component closes that gap itself with `isSafeUrl`.
  */
 export declare const Figure: AnsiComponent;

package/dist/components/figure.js

@@ -2,27 +2,17 @@ import { isSafeUrl } from '@markii/core';
 import { reportDiagnostic } from '@markii/stdlib';
 import { resolveImageAttribute } from '../image-resolve.js';
 import { unsafeImageSrcLabel, unsafeImageSrcTitle, } from '../failure-presentation.js';
+import { childrenText } from '../registry.js';
 const DEFAULT_ALT = '';
 const DIRECTIVE_NAME = 'figure';
 /**
  * `:::figure{src="..." alt="..."} caption markdown :::` — an image with a
- * rich (markdown) caption. `src` is required; a missing `src` shows only the
- * caption, matching the graceful-degradation spirit of the unknown-directive
- * fallback rather than throwing.
- *
- * Security: `src` bypasses `@markii/core`'s hast-level URL sanitizer (it is
- * a directive attribute, not a markdown image), so this component closes
- * that gap itself with `@markii/core`'s `isSafeUrl` — the same allowlist the
- * sanitizer uses — and drops the image line entirely on a refusal, replacing
- * it with a short labeled marker (a terminal has no tooltip to carry the
- * full sentence out of the text flow) plus the full sentence reported to
- * `onDiagnostic`; matches `@markii/html`'s `Figure` in behavior, not in the
- * inline wording.
- *
- * Terminal form: alt text, then the (possibly host-resolved) src, then the
- * caption, each on its own line, dimmed except the caption itself.
+ * rich (markdown) caption. `src` is required; a missing `src` shows only
+ * the caption. Security: `src` bypasses `@markii/core`'s hast-level URL
+ * sanitizer (it is a directive attribute, not a markdown image), so this
+ * component closes that gap itself with `isSafeUrl`.
  */
-export const Figure = (attributes, children, ctx) => {
+export const Figure = ({ attributes, children, ctx }) => {
     const rawSrc = attributes.src ?? null;
     const alt = attributes.alt ?? DEFAULT_ALT;
     const refused = Boolean(rawSrc) && !isSafeUrl(rawSrc);
@@ -46,8 +36,8 @@ export const Figure = (attributes, children, ctx) => {
             lines.push(ctx.dim(src));
         }
     }
-    const childrenText = children();
-    if (childrenText)
-        lines.push(childrenText);
+    const body = childrenText(children);
+    if (body)
+        lines.push(body);
     return lines.join('\n');
 };

package/dist/components/index.d.ts

@@ -6,7 +6,8 @@ export type { CalloutType } from './callout.js';
 export { Card } from './card.js';
 export { Cell } from './cell.js';
 export { Chart } from './chart.js';
-export { Details } from './details.js';
+export { Details } from './details-string.js';
+export { InteractiveDetails } from './details.js';
 export { Divider } from './divider.js';
 export type { DividerVariant } from './divider.js';
 export { Figure } from './figure.js';
@@ -15,20 +16,23 @@ export { createLayoutWrapper, layoutWrapperPresetAxis, LAYOUT_WRAPPER_PRESETS, }
 export type { LayoutWrapperPreset } from './layout-wrapper.js';
 export { Progress } from './progress.js';
 export { Rating } from './rating.js';
-export { Row, ROW_COLUMN_THRESHOLD } from './row.js';
+export { Row, ROW_COLUMN_THRESHOLD, resolveRowLayout } from './row.js';
 export { Stat } from './stat.js';
 export { Tab, DEFAULT_TAB_LABEL } from './tab.js';
-export { Tabs } from './tabs.js';
+export { Tabs } from './tabs-string.js';
+export { InteractiveTabs } from './tabs.js';
 export { Table } from './table.js';
 export { drawTableGrid, measureTableGridWidth, MIN_COLUMN_WIDTH, } from './table-grid.js';
 /**
- * The built-in standard components, pre-registered under their names —
- * matching `@markii/html`'s `defaultHtmlRegistry` and `@markii/react`'s
- * `defaultRegistry` in shape and coverage: the same 23 names. `card`,
- * `callout`, `divider`, and `table` are marked `selfLayout` (`registry.ts`'s
- * `AnsiRegistryEntry.selfLayout`) because they draw a single long
+ * The built-in standard components, pre-registered under their names: the
+ * same 23 names as `@markii/html`'s `defaultHtmlRegistry` and
+ * `@markii/react`'s `defaultRegistry`. `card`, `callout`, `divider`, and
+ * `table` are marked `selfLayout` because they draw a single long
  * frame/bar/rule/grid a generic post-render `applyLayout` narrow/pad would
- * corrupt or hard-break mid-glyph; see `card.ts`'s and `divider.ts`'s doc
- * comments.
+ * corrupt or hard-break mid-glyph. `row`, `tabs`, and `details` are the
+ * three directives `render.tsx` gives real Ink layout/state to directly
+ * (see `registry.ts`'s and `render.tsx`'s doc comments); their REGISTERED
+ * `component` here is the STRING-mode fallback, reached only when one of
+ * them is nested inside a self-drawing container's own body.
  */
 export declare const defaultAnsiRegistry: AnsiRegistry;

package/dist/components/index.js

@@ -5,7 +5,7 @@ import { Callout } from './callout.js';
 import { Card } from './card.js';
 import { Cell } from './cell.js';
 import { Chart } from './chart.js';
-import { Details } from './details.js';
+import { Details } from './details-string.js';
 import { Divider } from './divider.js';
 import { Figure } from './figure.js';
 import { Kbd } from './kbd.js';
@@ -15,31 +15,33 @@ import { Rating } from './rating.js';
 import { Row } from './row.js';
 import { Stat } from './stat.js';
 import { Tab } from './tab.js';
-import { Tabs } from './tabs.js';
+import { Tabs } from './tabs-string.js';
 import { Table } from './table.js';
 export { Badge } from './badge.js';
 export { Callout } from './callout.js';
 export { Card } from './card.js';
 export { Cell } from './cell.js';
 export { Chart } from './chart.js';
-export { Details } from './details.js';
+export { Details } from './details-string.js';
+export { InteractiveDetails } from './details.js';
 export { Divider } from './divider.js';
 export { Figure } from './figure.js';
 export { Kbd } from './kbd.js';
 export { createLayoutWrapper, layoutWrapperPresetAxis, LAYOUT_WRAPPER_PRESETS, } from './layout-wrapper.js';
 export { Progress } from './progress.js';
 export { Rating } from './rating.js';
-export { Row, ROW_COLUMN_THRESHOLD } from './row.js';
+export { Row, ROW_COLUMN_THRESHOLD, resolveRowLayout } from './row.js';
 export { Stat } from './stat.js';
 export { Tab, DEFAULT_TAB_LABEL } from './tab.js';
-export { Tabs } from './tabs.js';
+export { Tabs } from './tabs-string.js';
+export { InteractiveTabs } from './tabs.js';
 export { Table } from './table.js';
 export { drawTableGrid, measureTableGridWidth, MIN_COLUMN_WIDTH, } from './table-grid.js';
 /**
  * Derives a registry entry's `inline` flag from `@markii/stdlib`'s standard
- * component contract for `name`, matching `@markii/html`'s
- * `inlineFromContract`: `kind: 'inline'` -> `inline: true`, otherwise
- * `false`. Falls back to `false` if `name` has no standard contract.
+ * component contract for `name`: `kind: 'inline'` -> `inline: true`,
+ * otherwise `false`. Falls back to `false` if `name` has no standard
+ * contract.
  */
 function inlineFromContract(name) {
     return getContract(name)?.kind === 'inline';
@@ -47,7 +49,6 @@ function inlineFromContract(name) {
 /**
  * One layout-wrapper registration: the shared wrapper component bound to
  * `preset`, plus the `layout` axis that preset sets by its own name.
- * Matches `@markii/html`'s `layoutWrapperEntry`.
  */
 function layoutWrapperEntry(preset) {
     return {
@@ -57,14 +58,16 @@ function layoutWrapperEntry(preset) {
     };
 }
 /**
- * The built-in standard components, pre-registered under their names —
- * matching `@markii/html`'s `defaultHtmlRegistry` and `@markii/react`'s
- * `defaultRegistry` in shape and coverage: the same 23 names. `card`,
- * `callout`, `divider`, and `table` are marked `selfLayout` (`registry.ts`'s
- * `AnsiRegistryEntry.selfLayout`) because they draw a single long
+ * The built-in standard components, pre-registered under their names: the
+ * same 23 names as `@markii/html`'s `defaultHtmlRegistry` and
+ * `@markii/react`'s `defaultRegistry`. `card`, `callout`, `divider`, and
+ * `table` are marked `selfLayout` because they draw a single long
  * frame/bar/rule/grid a generic post-render `applyLayout` narrow/pad would
- * corrupt or hard-break mid-glyph; see `card.ts`'s and `divider.ts`'s doc
- * comments.
+ * corrupt or hard-break mid-glyph. `row`, `tabs`, and `details` are the
+ * three directives `render.tsx` gives real Ink layout/state to directly
+ * (see `registry.ts`'s and `render.tsx`'s doc comments); their REGISTERED
+ * `component` here is the STRING-mode fallback, reached only when one of
+ * them is nested inside a self-drawing container's own body.
  */
 export const defaultAnsiRegistry = createAnsiRegistry({
     callout: {

package/dist/components/kbd.d.ts

@@ -1,4 +1,4 @@
-import type { AnsiComponent } from '../registry.js';
+import { type AnsiComponent } from '../registry.js';
 /**
  * `:kbd[Ctrl+S]` — a styled keycap for an inline text directive. Terminal
  * form: bracketed bold text, e.g. `[Ctrl+S]`. Takes no attributes; its inner

package/dist/components/kbd.js

@@ -1,8 +1,9 @@
+import { childrenText } from '../registry.js';
 /**
  * `:kbd[Ctrl+S]` — a styled keycap for an inline text directive. Terminal
  * form: bracketed bold text, e.g. `[Ctrl+S]`. Takes no attributes; its inner
  * content (already rendered plain text) is the key label.
  */
-export const Kbd = (_attributes, children, ctx) => {
-    return `[${ctx.bold(children())}]`;
+export const Kbd = ({ children, ctx }) => {
+    return `[${ctx.bold(childrenText(children))}]`;
 };

package/dist/components/layout-wrapper.d.ts

@@ -1,34 +1,19 @@
 import type { LayoutAxis } from '@markii/stdlib';
-import type { AnsiComponent } from '../registry.js';
+import { type AnsiComponent } from '../registry.js';
 /**
  * The closed set of layout-wrapper container names (docs/format.md):
- * aliases of the one shared implementation below (`createLayoutWrapper`),
- * matching `@markii/html`'s `layout-wrapper.ts`. There is deliberately no
- * `normal` alias: the default needs no wrapper at all. Every name here is
- * ALSO one of `@markii/stdlib`'s own width/align preset values (`center`/
- * `left`/`right` are align presets, `wide`/`narrow`/`full`/`fit` are width
- * presets), which is what lets `createLayoutWrapper` use the preset name
- * itself as that axis's value with no separate lookup table.
+ * aliases of the one shared implementation below (`createLayoutWrapper`).
+ * There is deliberately no `normal` alias: the default needs no wrapper at
+ * all. Every name here is ALSO one of `@markii/stdlib`'s own width/align
+ * preset values.
  */
 export declare const LAYOUT_WRAPPER_PRESETS: readonly ["center", "left", "right", "wide", "narrow", "full", "fit"];
 export type LayoutWrapperPreset = (typeof LAYOUT_WRAPPER_PRESETS)[number];
 /**
  * Creates the registry component for one of docs/format.md's layout-wrapper
  * container names. One shared implementation, bound to `preset` at
- * registration time, matching `@markii/html`'s `createLayoutWrapper` in
- * spirit: it never reads `attributes` at all — `render.ts` already stripped
- * both reserved keys before this ever runs.
- *
- * A wrapper sets ONE axis by its own NAME (docs/spec.md §3): `preset` itself
- * IS that axis's value (`center` sets `align: 'center'`; `narrow` sets
- * `width: 'narrow'`), so it is applied unconditionally, whatever the author
- * wrote for that axis's own reserved attribute (already discarded — the
- * name always wins). The OTHER axis, when the author supplied it, arrives
- * as `ctx.layout` (`render.ts` resolved it on this wrapper's behalf, since
- * this wrapper is the directive's registered `layout` scope). Both are
- * merged into one `ResolvedLayoutPresets` and applied together via
- * `../layout.js`'s `applyLayout`, so `:::center{width=fit}` narrows AND
- * centers in one pass.
+ * registration time: it never reads `attributes` at all — `render.tsx`
+ * already stripped both reserved keys before this ever runs.
  */
 export declare function createLayoutWrapper(preset: LayoutWrapperPreset): AnsiComponent;
 /** The layout axis `preset` sets by its own name. Mirrors `@markii/html`'s `layoutWrapperPresetAxis`. */