@markii/ansi 0.15.0 → 0.17.0-next.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 sadigaxund
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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,45 @@
-import type { AnsiComponent } from '../registry.js';
+import type { GlyphSet } from '../glyphs.js';
+import type { ResolvedLayoutPresets } from '../layout.js';
+import { type AnsiComponent, type DirectiveAttributes } from '../registry.js';
+import type { Tier1Token } from '../theme.js';
 export type CalloutType = 'info' | 'warning' | 'danger';
+export declare const CALLOUT_TOKENS: Record<CalloutType, Tier1Token>;
+export declare function isCalloutType(value: string): value is CalloutType;
+/** `headerText` for `type`, e.g. `ℹ Info` — needed by both `resolveCalloutInnerWidth` (before there is a component instance) and `Callout` itself. */
+export declare function headerTextFor(type: CalloutType, glyphs: GlyphSet): string;
+/** The resolved `type` of a callout: an unknown or missing value is `info`. */
+export declare function resolveCalloutType(attributes: DirectiveAttributes): CalloutType;
+/**
+ * The callout's own OUTER (bar-including) width: what `Callout` draws at
+ * and what the Ink element form in `render.tsx` sizes its `Box` to.
+ * `title` is expected already sanitized, as `Callout` passes it.
+ */
+export declare function resolveCalloutBoxWidth(type: CalloutType, title: string | null, layout: ResolvedLayoutPresets | undefined, outerWidth: number, glyphs: GlyphSet): number;
+/**
+ * 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, glyphs: GlyphSet): 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,69 +1,106 @@
-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: 'ℹ',
-    warning: '▲',
-    danger: '✕',
-};
 const CALLOUT_LABELS = {
     info: 'Info',
     warning: 'Warning',
     danger: 'Danger',
 };
-const CALLOUT_TOKENS = {
+export const CALLOUT_TOKENS = {
     info: '--mk-info',
     warning: '--mk-warning',
     danger: '--mk-danger',
 };
-function isCalloutType(value) {
+export function isCalloutType(value) {
     return CALLOUT_TYPES.includes(value);
 }
 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). */
-const BAR = '▌ ';
+/** `headerText` for `type`, e.g. `ℹ Info` — needed by both `resolveCalloutInnerWidth` (before there is a component instance) and `Callout` itself. */
+export function headerTextFor(type, glyphs) {
+    return `${glyphs.calloutIcons[type]} ${CALLOUT_LABELS[type]}`;
+}
+/** The resolved `type` of a callout: an unknown or missing value is `info`. */
+export function resolveCalloutType(attributes) {
+    const raw = attributes.type ?? 'info';
+    return isCalloutType(raw) ? raw : 'info';
+}
+/**
+ * The callout's own OUTER (bar-including) width: what `Callout` draws at
+ * and what the Ink element form in `render.tsx` sizes its `Box` to.
+ * `title` is expected already sanitized, as `Callout` passes it.
+ */
+export function resolveCalloutBoxWidth(type, title, layout, outerWidth, glyphs) {
+    const barWidth = measureWidth(glyphs.calloutBar);
+    const naturalWidth = barWidth +
+        Math.max(measureWidth(headerTextFor(type, glyphs)), measureWidth(title ?? ''));
+    return selfLayoutWidth(layout, outerWidth, naturalWidth);
+}
+/**
+ * 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, glyphs) {
+    // The left bar every line of a callout carries, marking it as one
+    // colored block at a glance.
+    const barWidth = measureWidth(glyphs.calloutBar);
+    const rawType = attributes.type ?? 'info';
+    const type = isCalloutType(rawType) ? rawType : 'info';
+    const title = attributes.title ?? null;
+    const naturalWidth = barWidth +
+        Math.max(measureWidth(headerTextFor(type, glyphs)), measureWidth(title ?? ''));
+    const boxWidth = selfLayoutWidth(layout, outerWidth, naturalWidth);
+    return Math.max(1, boxWidth - barWidth);
+}
 /**
  * `:::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, ctx.glyphs);
     const titleText = title ? ctx.text(title) : undefined;
-    const naturalWidth = BAR.length + Math.max(measure(headerText), measure(titleText ?? ''));
+    const barWidth = measureWidth(ctx.glyphs.calloutBar);
+    const naturalWidth = barWidth +
+        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 bar = ctx.style(ctx.glyphs.calloutBar, token);
+    const innerWidth = Math.max(1, boxWidth - barWidth);
+    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,33 @@
-import type { AnsiComponent } from '../registry.js';
+import type { ResolvedLayoutPresets } from '../layout.js';
+import { type AnsiComponent, type DirectiveAttributes } from '../registry.js';
+/** Frame border + one space of interior padding on each side. Exported: `render.tsx`'s Ink-`Box`-bordered ELEMENT builder needs the same overhead to go from a box width to an inner width. */
+export declare const CARD_FRAME_OVERHEAD = 2;
+/**
+ * `card`'s own natural/self-drawn OUTER (frame-including) width, given ONLY
+ * its own attributes, the resolved `width=`/`align=` layout preset, and the
+ * outer budget — never the body. Exported for `render.tsx`'s ELEMENT-mode
+ * builder, which needs the outer box width itself (to size its Ink `Box`)
+ * rather than only the inner budget `resolveCardInnerWidth` below returns.
+ */
+export declare function resolveCardBoxWidth(attributes: DirectiveAttributes, layout: ResolvedLayoutPresets | undefined, outerWidth: number): number;
+/**
+ * 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 +36,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,49 @@
-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;
+/** Frame border + one space of interior padding on each side. Exported: `render.tsx`'s Ink-`Box`-bordered ELEMENT builder needs the same overhead to go from a box width to an inner width. */
+export const CARD_FRAME_OVERHEAD = 2;
+/**
+ * `card`'s own natural/self-drawn OUTER (frame-including) width, given ONLY
+ * its own attributes, the resolved `width=`/`align=` layout preset, and the
+ * outer budget — never the body. Exported for `render.tsx`'s ELEMENT-mode
+ * builder, which needs the outer box width itself (to size its Ink `Box`)
+ * rather than only the inner budget `resolveCardInnerWidth` below returns.
+ */
+export function resolveCardBoxWidth(attributes, layout, outerWidth) {
+    const title = attributes.title ?? null;
+    const naturalWidth = title
+        ? measureWidth(title) + CARD_FRAME_OVERHEAD * 2
+        : FIT_DEFAULT_WIDTH;
+    return selfLayoutWidth(layout, outerWidth, naturalWidth);
+}
+/**
+ * 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 boxWidth = resolveCardBoxWidth(attributes, layout, outerWidth);
+    return Math.max(1, boxWidth - CARD_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,29 +52,30 @@ 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
-        : 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 boxWidth = resolveCardBoxWidth({ ...attributes, title: titleText ?? null }, ctx.layout, ctx.width);
+    const innerWidth = Math.max(1, boxWidth - CARD_FRAME_OVERHEAD);
+    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,
+        glyphs: ctx.glyphs,
     });
     return selfLayoutAlign(framed, ctx.layout, ctx.width);
 };

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;