@markii/ansi 0.0.1 → 0.16.0

package/dist/ansi.d.ts

@@ -39,6 +39,32 @@ export declare const italic: (text: string, level: ColorLevel) => string;
 export declare const underline: (text: string, level: ColorLevel) => string;
 /** SGR inverse/reverse video (7). Returns `text` unchanged at `'none'`. */
 export declare const inverse: (text: string, level: ColorLevel) => string;
+/**
+ * Repairs an SGR escape span that would otherwise cross an embedded `\n`
+ * inside `text`, so every physical LINE is independently self-contained:
+ * whatever SGR codes are still "open" (emitted since the last full reset)
+ * at a line boundary are closed with a reset before the `\n` and reopened
+ * at the start of the next line.
+ *
+ * This is the SYSTEMATIC fix for a real Ink behavior discovered during
+ * batch 10's post-phase-2 review: Ink's `<Text>` does not treat an embedded
+ * raw ANSI escape as transparent across an embedded newline the way a
+ * terminal receiving the same bytes directly would — it resets SGR state
+ * at every line boundary within one `<Text>` value and does not reopen it.
+ * Every multi-line string this engine hands to a single `<Text>` node
+ * (`render.tsx`'s `styledText` helper) MUST pass through this function
+ * first: a dim-wrapped multi-line frame, a bold-and-underlined heading that
+ * wrapped onto more than one line, a paragraph whose bold span happened to
+ * straddle a wrap point — anything this engine itself line-wrapped (with
+ * `text-grid.ts`'s `wrapText`) while carrying an open style. It is a no-op,
+ * fast-pathed, for a string with no `\n` at all.
+ *
+ * Every SGR code this engine's own helpers ever emit closes with a FULL
+ * reset (`\x1b[0m`), never a narrow one (`ansi.ts`'s `wrapSgr`), so
+ * tracking "what is currently open" only ever needs a flat list cleared by
+ * the next `\x1b[0m` (or a bare `\x1b[m`) — never per-attribute bookkeeping.
+ */
+export declare function carrySgrAcrossLines(text: string): string;
 /**
  * OSC 8: `ESC ] 8 ; ; url BEL text ESC ] 8 ; ; BEL`. Emitted only when
  * `level` is not `'none'`; at `'none'` this returns `text` UNCHANGED, and

package/dist/ansi.js

@@ -63,6 +63,57 @@ export const italic = sgrWrap(3);
 export const underline = sgrWrap(4);
 /** SGR inverse/reverse video (7). Returns `text` unchanged at `'none'`. */
 export const inverse = sgrWrap(7);
+/** Matches one SGR sequence, capturing its raw parameter string (empty for a bare `ESC [ m`). */
+const SGR_TOKEN = /\x1b\[([0-9;]*)m/g;
+/**
+ * Repairs an SGR escape span that would otherwise cross an embedded `\n`
+ * inside `text`, so every physical LINE is independently self-contained:
+ * whatever SGR codes are still "open" (emitted since the last full reset)
+ * at a line boundary are closed with a reset before the `\n` and reopened
+ * at the start of the next line.
+ *
+ * This is the SYSTEMATIC fix for a real Ink behavior discovered during
+ * batch 10's post-phase-2 review: Ink's `<Text>` does not treat an embedded
+ * raw ANSI escape as transparent across an embedded newline the way a
+ * terminal receiving the same bytes directly would — it resets SGR state
+ * at every line boundary within one `<Text>` value and does not reopen it.
+ * Every multi-line string this engine hands to a single `<Text>` node
+ * (`render.tsx`'s `styledText` helper) MUST pass through this function
+ * first: a dim-wrapped multi-line frame, a bold-and-underlined heading that
+ * wrapped onto more than one line, a paragraph whose bold span happened to
+ * straddle a wrap point — anything this engine itself line-wrapped (with
+ * `text-grid.ts`'s `wrapText`) while carrying an open style. It is a no-op,
+ * fast-pathed, for a string with no `\n` at all.
+ *
+ * Every SGR code this engine's own helpers ever emit closes with a FULL
+ * reset (`\x1b[0m`), never a narrow one (`ansi.ts`'s `wrapSgr`), so
+ * tracking "what is currently open" only ever needs a flat list cleared by
+ * the next `\x1b[0m` (or a bare `\x1b[m`) — never per-attribute bookkeeping.
+ */
+export function carrySgrAcrossLines(text) {
+    if (!text.includes('\n'))
+        return text;
+    const lines = text.split('\n');
+    let openCodes = [];
+    const result = [];
+    for (const line of lines) {
+        const prefix = openCodes.map((params) => `${ESC}[${params}m`).join('');
+        SGR_TOKEN.lastIndex = 0;
+        let match;
+        while ((match = SGR_TOKEN.exec(line)) !== null) {
+            const params = match[1] ?? '';
+            if (params === '' || params === '0') {
+                openCodes = [];
+            }
+            else {
+                openCodes = [...openCodes, params];
+            }
+        }
+        const suffix = openCodes.length > 0 ? RESET : '';
+        result.push(`${prefix}${line}${suffix}`);
+    }
+    return result.join('\n');
+}
 /**
  * OSC 8: `ESC ] 8 ; ; url BEL text ESC ] 8 ; ; BEL`. Emitted only when
  * `level` is not `'none'`; at `'none'` this returns `text` UNCHANGED, and

package/dist/components/badge.d.ts

@@ -1,4 +1,4 @@
-import type { AnsiComponent } from '../registry.js';
+import { type AnsiComponent } from '../registry.js';
 export type BadgeVariant = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 /**
  * `:badge[New]{variant=success}` — a status pill for an inline text

package/dist/components/badge.js

@@ -1,3 +1,4 @@
+import { childrenText } from '../registry.js';
 const BADGE_VARIANTS = [
     'neutral',
     'info',
@@ -31,14 +32,14 @@ const TOKEN_NAME = {
  * variant. At color level `'none'` there is no inverse video to distinguish
  * a badge from surrounding text, so it degrades to `[label]` instead.
  */
-export const Badge = (attributes, children, ctx) => {
+export const Badge = ({ attributes, children, ctx }) => {
     const rawVariant = attributes.variant ?? DEFAULT_VARIANT;
     const variant = isBadgeVariant(rawVariant)
         ? rawVariant
         : DEFAULT_VARIANT;
-    const childrenText = children();
+    const text = childrenText(children);
     if (ctx.color === 'none')
-        return `[${childrenText}]`;
+        return `[${text}]`;
     const token = TOKEN_NAME[VARIANT_TOKEN[variant]];
-    return ctx.inverse(ctx.style(` ${childrenText} `, token));
+    return ctx.inverse(ctx.style(` ${text} `, token));
 };

package/dist/components/callout.d.ts

@@ -1,20 +1,31 @@
-import type { AnsiComponent } from '../registry.js';
+import type { ResolvedLayoutPresets } from '../layout.js';
+import { type AnsiComponent, type DirectiveAttributes } from '../registry.js';
 export type CalloutType = 'info' | 'warning' | 'danger';
+/**
+ * The inner budget `callout`'s body renders at, given ONLY its own
+ * attributes and the outer width — never the body itself. Mirrors
+ * `card.ts`'s `resolveCardInnerWidth`: `render.tsx`'s walk calls this
+ * BEFORE building children, so a callout's body (and any self-drawing
+ * component nested inside it, like a `card`) is built exactly once, at the
+ * correct width, never built wide and re-wrapped narrower afterward — see
+ * `resolveCardInnerWidth`'s doc comment for why that re-wrap-afterward
+ * shape was a real, shipped regression.
+ */
+export declare function resolveCalloutInnerWidth(attributes: DirectiveAttributes, layout: ResolvedLayoutPresets | undefined, outerWidth: number): number;
 /**
  * `:::callout{type=info|warning|danger title="..." text=left|center|right}` —
  * a colored aside/warning/danger box. Unknown/missing `type` falls back to
- * `info` (`render.ts`'s generic invalid-enum notice covers reporting that,
- * same as every other enum attribute). Terminal form: every line carries a
- * colored left bar; the first line is the icon plus the type label, an
- * optional bold title line follows, then the body wrapped to the remaining
- * width. `text` aligns the icon/title/body lines within that remaining
- * width; absent/invalid `text` behaves as `left` (no padding needed).
+ * `info`. Terminal form: every line carries a colored left bar; the first
+ * line is the icon plus the type label, an optional bold title line
+ * follows, then the body. `text` aligns the icon/title/body lines within
+ * the remaining width.
  *
- * Registered `selfLayout` (`registry.ts`'s `AnsiRegistryEntry.selfLayout`):
- * every line carries the colored bar prefix, which a generic post-render
- * `applyLayout` narrowing would re-wrap right through, losing the bar on any
- * continuation line. This component instead reads the resolved
- * `width`/`align` off `ctx.layout` itself and sizes/places its own bar
- * block, exactly like `card`/`table`/`chart`.
+ * Registered `selfLayout`: every line carries the colored bar prefix, which
+ * a generic post-render `applyLayout` narrowing would re-wrap right through,
+ * losing the bar on any continuation line. This component reads the
+ * resolved `width`/`align` off `ctx.layout` itself and sizes/places its own
+ * bar block, exactly like `card`/`table`/`divider`. `children` arrives
+ * ALREADY built at exactly this component's own inner width
+ * (`resolveCalloutInnerWidth` above) — this component never re-wraps.
  */
 export declare const Callout: AnsiComponent;

package/dist/components/callout.js

@@ -1,5 +1,6 @@
-import { measure } from '../measure.js';
+import { measureWidth, padText } from '../text-grid.js';
 import { selfLayoutAlign, selfLayoutWidth } from '../layout.js';
+import { childrenText, } from '../registry.js';
 const CALLOUT_TYPES = ['info', 'warning', 'danger'];
 const CALLOUT_ICONS = {
     info: 'ℹ',
@@ -23,47 +24,70 @@ const TEXT_ALIGNS = ['left', 'center', 'right'];
 function isTextAlign(value) {
     return TEXT_ALIGNS.includes(value);
 }
-/** The left bar every line of a callout carries, marking it as one colored block at a glance (`box.ts` reserves `│`/`┆` for frames, so this uses the half-block glyph instead). */
+/** The left bar every line of a callout carries, marking it as one colored block at a glance. */
 const BAR = '▌ ';
+/** `headerText` for `type`, e.g. `ℹ Info` — needed by both `resolveCalloutInnerWidth` (before there is a component instance) and `Callout` itself. */
+function headerTextFor(type) {
+    return `${CALLOUT_ICONS[type]} ${CALLOUT_LABELS[type]}`;
+}
+/**
+ * The inner budget `callout`'s body renders at, given ONLY its own
+ * attributes and the outer width — never the body itself. Mirrors
+ * `card.ts`'s `resolveCardInnerWidth`: `render.tsx`'s walk calls this
+ * BEFORE building children, so a callout's body (and any self-drawing
+ * component nested inside it, like a `card`) is built exactly once, at the
+ * correct width, never built wide and re-wrapped narrower afterward — see
+ * `resolveCardInnerWidth`'s doc comment for why that re-wrap-afterward
+ * shape was a real, shipped regression.
+ */
+export function resolveCalloutInnerWidth(attributes, layout, outerWidth) {
+    const rawType = attributes.type ?? 'info';
+    const type = isCalloutType(rawType) ? rawType : 'info';
+    const title = attributes.title ?? null;
+    const naturalWidth = BAR.length +
+        Math.max(measureWidth(headerTextFor(type)), measureWidth(title ?? ''));
+    const boxWidth = selfLayoutWidth(layout, outerWidth, naturalWidth);
+    return Math.max(1, boxWidth - BAR.length);
+}
 /**
  * `:::callout{type=info|warning|danger title="..." text=left|center|right}` —
  * a colored aside/warning/danger box. Unknown/missing `type` falls back to
- * `info` (`render.ts`'s generic invalid-enum notice covers reporting that,
- * same as every other enum attribute). Terminal form: every line carries a
- * colored left bar; the first line is the icon plus the type label, an
- * optional bold title line follows, then the body wrapped to the remaining
- * width. `text` aligns the icon/title/body lines within that remaining
- * width; absent/invalid `text` behaves as `left` (no padding needed).
+ * `info`. Terminal form: every line carries a colored left bar; the first
+ * line is the icon plus the type label, an optional bold title line
+ * follows, then the body. `text` aligns the icon/title/body lines within
+ * the remaining width.
  *
- * Registered `selfLayout` (`registry.ts`'s `AnsiRegistryEntry.selfLayout`):
- * every line carries the colored bar prefix, which a generic post-render
- * `applyLayout` narrowing would re-wrap right through, losing the bar on any
- * continuation line. This component instead reads the resolved
- * `width`/`align` off `ctx.layout` itself and sizes/places its own bar
- * block, exactly like `card`/`table`/`chart`.
+ * Registered `selfLayout`: every line carries the colored bar prefix, which
+ * a generic post-render `applyLayout` narrowing would re-wrap right through,
+ * losing the bar on any continuation line. This component reads the
+ * resolved `width`/`align` off `ctx.layout` itself and sizes/places its own
+ * bar block, exactly like `card`/`table`/`divider`. `children` arrives
+ * ALREADY built at exactly this component's own inner width
+ * (`resolveCalloutInnerWidth` above) — this component never re-wraps.
  */
-export const Callout = (attributes, children, ctx) => {
+export const Callout = ({ attributes, children, ctx }) => {
     const rawType = attributes.type ?? 'info';
     const type = isCalloutType(rawType) ? rawType : 'info';
     const token = CALLOUT_TOKENS[type];
     const title = attributes.title ?? null;
     const rawTextAlign = attributes.text;
     const align = rawTextAlign && isTextAlign(rawTextAlign) ? rawTextAlign : 'left';
-    const headerText = `${CALLOUT_ICONS[type]} ${CALLOUT_LABELS[type]}`;
+    const headerText = headerTextFor(type);
     const titleText = title ? ctx.text(title) : undefined;
-    const naturalWidth = BAR.length + Math.max(measure(headerText), measure(titleText ?? ''));
+    const naturalWidth = BAR.length +
+        Math.max(measureWidth(headerText), measureWidth(titleText ?? ''));
     const boxWidth = selfLayoutWidth(ctx.layout, ctx.width, naturalWidth);
     const bar = ctx.style(BAR, token);
     const innerWidth = Math.max(1, boxWidth - BAR.length);
-    const placeLine = (line) => align === 'left' ? line : ctx.pad(line, innerWidth, align);
+    const placeLine = (line) => align === 'left' ? line : padText(line, innerWidth, align);
     const headerLine = `${bar}${placeLine(ctx.style(headerText, token))}`;
     const lines = [headerLine];
     if (titleText) {
         lines.push(`${bar}${placeLine(ctx.bold(titleText))}`);
     }
-    const childrenText = children({ width: innerWidth });
-    if (childrenText) {
-        for (const line of childrenText.split('\n')) {
+    const body = childrenText(children);
+    if (body) {
+        for (const line of body.split('\n')) {
             lines.push(`${bar}${placeLine(line)}`);
         }
     }

package/dist/components/card.d.ts

@@ -1,4 +1,23 @@
-import type { AnsiComponent } from '../registry.js';
+import type { ResolvedLayoutPresets } from '../layout.js';
+import { type AnsiComponent, type DirectiveAttributes } from '../registry.js';
+/**
+ * The inner budget `card`'s body renders at, given ONLY its own attributes
+ * and the outer width — never the body itself. This is deliberately a pure
+ * function callable BEFORE any children exist: `render.tsx`'s walk calls it
+ * to decide the width its OWN recursive children-builder uses, so `card`'s
+ * children are built ONCE, directly at the correct inner width, and never
+ * built wide and re-wrapped narrower afterward.
+ *
+ * That re-wrap-afterward shape was a real, shipped regression (caught
+ * post-phase-2 review): re-wrapping an ALREADY-RENDERED child block with a
+ * word-based wrapper corrupts anything in it that draws its own fixed-width
+ * glyphs (a nested `card`/`callout`'s frame, a nested `row`'s columns) — the
+ * word-wrapper has no notion that a run of box-drawing characters is not
+ * prose. Computing the inner width eagerly and building children exactly
+ * once at it is the fix, and it is what makes the deleted lazy-children API
+ * safe to have removed: this is its eager equivalent.
+ */
+export declare function resolveCardInnerWidth(attributes: DirectiveAttributes, layout: ResolvedLayoutPresets | undefined, outerWidth: number): number;
 /**
  * `:::card{title="..." text=left|center|right} ... :::` — a titled panel.
  * `title` is optional; the title is woven into the frame's top edge, not a
@@ -7,6 +26,9 @@ import type { AnsiComponent } from '../registry.js';
  *
  * Registered `selfLayout` (see `callout.ts`'s doc comment for why): this
  * component draws a real box-drawn frame, which a generic post-render
- * narrow/pad would corrupt, so it reads `ctx.layout` and sizes its own frame.
+ * narrow/pad would corrupt, so it reads `ctx.layout` and sizes its own
+ * frame. `children` arrives ALREADY built at exactly this component's own
+ * inner width (`render.tsx`'s walk calls `resolveCardInnerWidth` above
+ * before building them) — this component never re-wraps.
  */
 export declare const Card: AnsiComponent;

package/dist/components/card.js

@@ -1,13 +1,39 @@
-import { measure } from '../measure.js';
+import { measureWidth, frameBlock, padText } from '../text-grid.js';
 import { selfLayoutAlign, selfLayoutWidth } from '../layout.js';
+import { childrenText, } from '../registry.js';
 const TEXT_ALIGNS = ['left', 'center', 'right'];
 function isTextAlign(value) {
     return TEXT_ALIGNS.includes(value);
 }
-/** `width=fit` with no `title` and an unhelpfully-shaped body (nothing to measure a sensible box from) falls back to this column count rather than the full available width. */
+/** `width=fit` with no `title` and an unhelpfully-shaped body falls back to this column count rather than the full available width. */
 const FIT_DEFAULT_WIDTH = 40;
 /** Frame border + one space of interior padding on each side. */
 const FRAME_OVERHEAD = 2;
+/**
+ * The inner budget `card`'s body renders at, given ONLY its own attributes
+ * and the outer width — never the body itself. This is deliberately a pure
+ * function callable BEFORE any children exist: `render.tsx`'s walk calls it
+ * to decide the width its OWN recursive children-builder uses, so `card`'s
+ * children are built ONCE, directly at the correct inner width, and never
+ * built wide and re-wrapped narrower afterward.
+ *
+ * That re-wrap-afterward shape was a real, shipped regression (caught
+ * post-phase-2 review): re-wrapping an ALREADY-RENDERED child block with a
+ * word-based wrapper corrupts anything in it that draws its own fixed-width
+ * glyphs (a nested `card`/`callout`'s frame, a nested `row`'s columns) — the
+ * word-wrapper has no notion that a run of box-drawing characters is not
+ * prose. Computing the inner width eagerly and building children exactly
+ * once at it is the fix, and it is what makes the deleted lazy-children API
+ * safe to have removed: this is its eager equivalent.
+ */
+export function resolveCardInnerWidth(attributes, layout, outerWidth) {
+    const title = attributes.title ?? null;
+    const naturalWidth = title
+        ? measureWidth(title) + FRAME_OVERHEAD * 2
+        : FIT_DEFAULT_WIDTH;
+    const boxWidth = selfLayoutWidth(layout, outerWidth, naturalWidth);
+    return Math.max(1, boxWidth - FRAME_OVERHEAD);
+}
 /**
  * `:::card{title="..." text=left|center|right} ... :::` — a titled panel.
  * `title` is optional; the title is woven into the frame's top edge, not a
@@ -16,26 +42,29 @@ const FRAME_OVERHEAD = 2;
  *
  * Registered `selfLayout` (see `callout.ts`'s doc comment for why): this
  * component draws a real box-drawn frame, which a generic post-render
- * narrow/pad would corrupt, so it reads `ctx.layout` and sizes its own frame.
+ * narrow/pad would corrupt, so it reads `ctx.layout` and sizes its own
+ * frame. `children` arrives ALREADY built at exactly this component's own
+ * inner width (`render.tsx`'s walk calls `resolveCardInnerWidth` above
+ * before building them) — this component never re-wraps.
  */
-export const Card = (attributes, children, ctx) => {
+export const Card = ({ attributes, children, ctx }) => {
     const title = attributes.title ?? null;
     const titleText = title ? ctx.text(title) : undefined;
     const rawTextAlign = attributes.text;
     const align = rawTextAlign && isTextAlign(rawTextAlign) ? rawTextAlign : 'left';
     const naturalWidth = titleText
-        ? measure(titleText) + FRAME_OVERHEAD * 2
+        ? measureWidth(titleText) + FRAME_OVERHEAD * 2
         : FIT_DEFAULT_WIDTH;
     const boxWidth = selfLayoutWidth(ctx.layout, ctx.width, naturalWidth);
     const innerWidth = Math.max(1, boxWidth - FRAME_OVERHEAD);
-    const childrenText = children({ width: innerWidth });
-    const body = childrenText
-        ? childrenText
+    const bodyText = childrenText(children);
+    const body = align === 'left'
+        ? bodyText
+        : bodyText
             .split('\n')
-            .map((line) => align === 'left' ? line : ctx.pad(line, innerWidth, align))
-            .join('\n')
-        : '';
-    const framed = ctx.frame(body, {
+            .map((line) => padText(line, innerWidth, align))
+            .join('\n');
+    const framed = frameBlock(body, {
         style: 'solid',
         title: titleText,
         width: boxWidth,

package/dist/components/cell.d.ts

@@ -1,18 +1,12 @@
-import type { AnsiComponent } from '../registry.js';
+import { type AnsiComponent } from '../registry.js';
 /**
  * `:::cell ... :::` — a transparent grouping container whose only job is
  * letting several blocks count as ONE cell of `:::row`.
  *
- * `row.ts` no longer discovers its cells by splitting a flattened string on
- * a blank-line heuristic: it walks its own directive's top-level children
- * directly (`registry.ts`'s `AnsiChildren.parts`), so a `cell` grouping more
- * than one block renders those blocks exactly as it would standalone,
- * blank line and all, with no collapsing needed to keep a cell boundary
- * unambiguous for `row.ts`.
- *
  * `text` aligns this cell's own content when rendered STANDALONE (outside a
- * `row`); nested inside a `row`, the row's own `text` decides every cell's
- * alignment uniformly instead, for the same reason `row.ts` does not look
- * inside a cell's own attributes when it places columns.
+ * `row`) or nested inside one: `render.tsx`'s `row` handling still runs
+ * each cell through the ordinary directive pipeline (so this component's
+ * own alignment applies first), then applies `row`'s OWN `text` uniformly
+ * on top — see `components/row.ts`'s doc comment.
  */
 export declare const Cell: AnsiComponent;

package/dist/components/cell.js

@@ -1,3 +1,5 @@
+import { padText } from '../text-grid.js';
+import { childrenText } from '../registry.js';
 const TEXT_ALIGNS = ['left', 'center', 'right'];
 function isTextAlign(value) {
     return TEXT_ALIGNS.includes(value);
@@ -6,26 +8,20 @@ function isTextAlign(value) {
  * `:::cell ... :::` — a transparent grouping container whose only job is
  * letting several blocks count as ONE cell of `:::row`.
  *
- * `row.ts` no longer discovers its cells by splitting a flattened string on
- * a blank-line heuristic: it walks its own directive's top-level children
- * directly (`registry.ts`'s `AnsiChildren.parts`), so a `cell` grouping more
- * than one block renders those blocks exactly as it would standalone,
- * blank line and all, with no collapsing needed to keep a cell boundary
- * unambiguous for `row.ts`.
- *
  * `text` aligns this cell's own content when rendered STANDALONE (outside a
- * `row`); nested inside a `row`, the row's own `text` decides every cell's
- * alignment uniformly instead, for the same reason `row.ts` does not look
- * inside a cell's own attributes when it places columns.
+ * `row`) or nested inside one: `render.tsx`'s `row` handling still runs
+ * each cell through the ordinary directive pipeline (so this component's
+ * own alignment applies first), then applies `row`'s OWN `text` uniformly
+ * on top — see `components/row.ts`'s doc comment.
  */
-export const Cell = (attributes, children, ctx) => {
+export const Cell = ({ attributes, children, ctx }) => {
     const rawTextAlign = attributes.text;
     const align = rawTextAlign && isTextAlign(rawTextAlign) ? rawTextAlign : undefined;
-    const childrenText = children();
+    const text = childrenText(children);
     if (!align || align === 'left')
-        return childrenText;
-    return childrenText
+        return text;
+    return text
         .split('\n')
-        .map((line) => ctx.pad(line, ctx.width, align))
+        .map((line) => padText(line, ctx.width, align))
         .join('\n');
 };

package/dist/components/chart.d.ts

@@ -1,15 +1,9 @@
 import type { AnsiComponent } from '../registry.js';
 /**
  * `::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 declare const Chart: AnsiComponent;

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' &&
@@ -85,18 +84,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;
@@ -118,12 +111,12 @@ export const Chart = (attributes, _children, ctx) => {
         return `${min} ${sparkline(points)} ${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}`;
+        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 ? '▾' : '▸';
+    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, '  ')}`;
+};