@markii/ansi 0.15.0 → 0.17.0-next.0

package/dist/components/layout-wrapper.js

@@ -1,14 +1,12 @@
 import { layoutWrapperAxis } from '@markii/stdlib';
 import { applyLayout } from '../layout.js';
+import { childrenText } 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 const LAYOUT_WRAPPER_PRESETS = [
     'center',
@@ -22,20 +20,8 @@ export const LAYOUT_WRAPPER_PRESETS = [
 /**
  * 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 function createLayoutWrapper(preset) {
     const ownAxis = layoutWrapperAxis(preset);
@@ -46,9 +32,9 @@ export function createLayoutWrapper(preset) {
     const own = ownAxis === 'align'
         ? { align: preset }
         : { width: preset };
-    return (_attributes, children, ctx) => {
+    return ({ children, ctx }) => {
         const merged = { ...own, ...ctx.layout };
-        return applyLayout(children(), merged, ctx.width);
+        return applyLayout(childrenText(children), merged, ctx.width);
     };
 }
 /** The layout axis `preset` sets by its own name. Mirrors `@markii/html`'s `layoutWrapperPresetAxis`. */

package/dist/components/progress.d.ts

@@ -1,15 +1,7 @@
 import type { AnsiComponent } from '../registry.js';
 /**
- * `::progress{value=3 max=5 label="tasks"}` — a meter bar. Data binding (§8)
- * mirrors `@markii/html`'s `Progress`: a bound number supplies `value`; a
- * bound object may supply `value`/`max` — explicit attributes always win.
- * Non-numeric/`NaN`/`Infinity` input falls back to `0` (value) or the
- * default `max` of `1`; the effective value is clamped to `[0, max]`.
- * Terminal form: `label bar percent`, the bar drawn with `█` (filled) and
- * `░` (empty) at up to `MAX_BAR_WIDTH` columns, narrower when the label and
- * percent text leave less room. `format`/`decimals`, when given, format the
- * `value/max` fraction for the percent readout in place of the default
- * rounded integer percent, matching `@markii/html` exactly. A failed/stale
- * binding appends the quiet failure suffix after the percent.
+ * `::progress{value=3 max=5 label="tasks"}` — a meter bar. Data binding
+ * (§8): a bound number supplies `value`; a bound object may supply
+ * `value`/`max` — explicit attributes always win.
  */
 export declare const Progress: AnsiComponent;

package/dist/components/progress.js

@@ -1,5 +1,5 @@
 import { formatValue } from '@markii/stdlib';
-import { measure } from '../measure.js';
+import { measureWidth } from '../text-grid.js';
 import { safeRead } from '../resolve.js';
 import { dataStateSuffix, failureToken } from '../failure-presentation.js';
 const DEFAULT_MAX = 1;
@@ -33,24 +33,14 @@ function readProgressFields(data) {
     return {};
 }
 /** Block characters the bar fills with, and its widest allowed footprint (columns), sized down further when the label/percent text leaves less room. */
-const FILLED_CHAR = '█';
-const EMPTY_CHAR = '░';
 const MAX_BAR_WIDTH = 30;
 const MIN_BAR_WIDTH = 3;
 /**
- * `::progress{value=3 max=5 label="tasks"}` — a meter bar. Data binding (§8)
- * mirrors `@markii/html`'s `Progress`: a bound number supplies `value`; a
- * bound object may supply `value`/`max` — explicit attributes always win.
- * Non-numeric/`NaN`/`Infinity` input falls back to `0` (value) or the
- * default `max` of `1`; the effective value is clamped to `[0, max]`.
- * Terminal form: `label bar percent`, the bar drawn with `█` (filled) and
- * `░` (empty) at up to `MAX_BAR_WIDTH` columns, narrower when the label and
- * percent text leave less room. `format`/`decimals`, when given, format the
- * `value/max` fraction for the percent readout in place of the default
- * rounded integer percent, matching `@markii/html` exactly. A failed/stale
- * binding appends the quiet failure suffix after the percent.
+ * `::progress{value=3 max=5 label="tasks"}` — a meter bar. Data binding
+ * (§8): a bound number supplies `value`; a bound object may supply
+ * `value`/`max` — explicit attributes always win.
  */
-export const Progress = (attributes, _children, ctx) => {
+export const Progress = ({ attributes, ctx }) => {
     const { data, dataStatus, dataFailureKind } = ctx;
     const bound = safeRead(() => dataStatus === 'missing' || dataStatus === 'error'
         ? {}
@@ -70,9 +60,10 @@ export const Progress = (attributes, _children, ctx) => {
     const suffix = dataStateSuffix(dataStatus, dataFailureKind);
     const token = failureToken(dataFailureKind);
     const percentPart = ` ${ctx.text(percentText)}${suffix ? (token ? ctx.style(suffix, token) : ctx.dim(suffix)) : ''}`;
-    const overhead = measure(labelPart) + measure(percentText) + 1;
+    const overhead = measureWidth(labelPart) + measureWidth(percentText) + 1;
     const barWidth = Math.max(MIN_BAR_WIDTH, Math.min(MAX_BAR_WIDTH, ctx.width - overhead));
     const filledCount = Math.round((percent / 100) * barWidth);
-    const bar = FILLED_CHAR.repeat(filledCount) + EMPTY_CHAR.repeat(barWidth - filledCount);
+    const bar = ctx.glyphs.barFilled.repeat(filledCount) +
+        ctx.glyphs.barEmpty.repeat(barWidth - filledCount);
     return `${labelPart}${bar}${percentPart}`;
 };

package/dist/components/rating.d.ts

@@ -3,7 +3,6 @@ import type { AnsiComponent } from '../registry.js';
  * `::rating{value=3 max=5}` — a leaf directive rendering a row of stars.
  * Both attributes are optional and clamped to sane bounds; malformed input
  * degrades gracefully instead of throwing. Terminal form: filled (`★`) and
- * empty (`☆`) stars, one per position up to `max`. Matches
- * `@markii/html`'s `Rating` clamping rules exactly.
+ * empty (`☆`) stars, one per position up to `max`.
  */
 export declare const Rating: AnsiComponent;

package/dist/components/rating.js

@@ -14,15 +14,14 @@ function clamp(value, min, max) {
  * `::rating{value=3 max=5}` — a leaf directive rendering a row of stars.
  * Both attributes are optional and clamped to sane bounds; malformed input
  * degrades gracefully instead of throwing. Terminal form: filled (`★`) and
- * empty (`☆`) stars, one per position up to `max`. Matches
- * `@markii/html`'s `Rating` clamping rules exactly.
+ * empty (`☆`) stars, one per position up to `max`.
  */
-export const Rating = (attributes) => {
+export const Rating = ({ attributes, ctx }) => {
     const max = clamp(parseCount(attributes.max, DEFAULT_MAX), MIN_MAX, MAX_MAX);
     const value = clamp(parseCount(attributes.value, 0), 0, max);
     let stars = '';
     for (let index = 0; index < max; index += 1) {
-        stars += index < value ? '★' : '☆';
+        stars += index < value ? ctx.glyphs.starFilled : ctx.glyphs.starEmpty;
     }
     return stars;
 };

package/dist/components/row.d.ts

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

package/dist/components/row.js

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

package/dist/components/stat.d.ts

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

package/dist/components/stat.js

@@ -1,7 +1,6 @@
 import { formatValue } from '@markii/stdlib';
 import { safeRead } from '../resolve.js';
 import { dataStateSuffix, failureToken } from '../failure-presentation.js';
-const EMPTY_VALUE = '—';
 const TRENDS = ['up', 'down', 'flat'];
 function isTrend(value) {
     return TRENDS.includes(value);
@@ -35,16 +34,11 @@ function pick(attribute, fromData) {
 }
 /**
  * `::stat{value=42 label="stars" trend=up}` — a big value plus label. Data
- * binding (§8) mirrors `@markii/html`'s `Stat` exactly: a bound number/string
- * supplies `value`; a bound object may supply `value`/`label`/`delta`/`trend`
- * — an explicit attribute always wins. Missing value renders `—` rather than
- * a blank line. Terminal form: a muted label line, then a bold value line
- * (with `delta` appended, colored by `trend` when recognized). A failed or
- * stale binding appends `failure-presentation.ts`'s quiet suffix to the
- * value line — the terminal has no tooltip channel, so the reason has to
- * reach the text itself (AGENTS.md's "clean is not silent").
+ * binding (§8): a bound number/string supplies `value`; a bound object may
+ * supply `value`/`label`/`delta`/`trend` — an explicit attribute always
+ * wins. Missing value renders `—` rather than a blank line.
  */
-export const Stat = (attributes, _children, ctx) => {
+export const Stat = ({ attributes, ctx }) => {
     const { data, dataStatus, dataFailureKind } = ctx;
     const bound = safeRead(() => dataStatus === 'missing' || dataStatus === 'error'
         ? {}
@@ -59,7 +53,7 @@ export const Stat = (attributes, _children, ctx) => {
     const lines = [];
     if (label)
         lines.push(ctx.style(ctx.text(label), '--mk-muted'));
-    let valueLine = ctx.bold(ctx.text(formattedValue || EMPTY_VALUE));
+    let valueLine = ctx.bold(ctx.text(formattedValue || ctx.glyphs.emptyValue));
     if (delta) {
         const deltaToken = trend === 'up'
             ? '--mk-success'

package/dist/components/tab.d.ts

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

package/dist/components/tab.js

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

package/dist/components/table-grid.d.ts

@@ -1,3 +1,4 @@
+import type { GlyphSet } from '../glyphs.js';
 /**
  * The ONE box-drawing/width-negotiation routine every table this engine
  * draws goes through: the data-bound `::table` component (`./table.ts`) and
@@ -29,6 +30,6 @@ export declare const MIN_COLUMN_WIDTH = 3;
  * complete grid at most `width` columns wide when the natural content
  * allows it, otherwise as narrow as `MIN_COLUMN_WIDTH` per column permits.
  */
-export declare function drawTableGrid(header: readonly string[] | undefined, rows: readonly (readonly string[])[], width: number, boldFn?: (text: string) => string, align?: 'left' | 'center' | 'right'): string;
+export declare function drawTableGrid(header: readonly string[] | undefined, rows: readonly (readonly string[])[], width: number, glyphs: GlyphSet, boldFn?: (text: string) => string, align?: 'left' | 'center' | 'right'): string;
 /** The widest a `drawTableGrid` result's lines get, for a `selfLayout` component (`./table.ts`) that needs to know its own natural footprint (the `fit` width preset). */
 export declare function measureTableGridWidth(header: readonly string[] | undefined, rows: readonly (readonly string[])[]): number;

package/dist/components/table-grid.js

@@ -1,5 +1,4 @@
-import { pad, wrap } from '../box.js';
-import { measure } from '../measure.js';
+import { padText as pad, wrapText as wrap, measureWidth as measure, } from '../text-grid.js';
 /**
  * The ONE box-drawing/width-negotiation routine every table this engine
  * draws goes through: the data-bound `::table` component (`./table.ts`) and
@@ -76,7 +75,7 @@ function wrapRow(row, widths) {
     const height = Math.max(1, ...lines.map((l) => l.length));
     return { lines, height };
 }
-function drawRow(row, widths, boldRow, boldFn, align) {
+function drawRow(row, widths, boldRow, boldFn, align, glyphs) {
     const { lines, height } = wrapRow(row, widths);
     const rowLines = [];
     for (let line = 0; line < height; line += 1) {
@@ -84,12 +83,14 @@ function drawRow(row, widths, boldRow, boldFn, align) {
             const text = pad(lines[c]?.[line] ?? '', w, align);
             return boldRow ? boldFn(text) : text;
         });
-        rowLines.push(`│ ${cells.join(' │ ')} │`);
+        const bar = glyphs.solid.vertical;
+        rowLines.push(`${bar} ${cells.join(` ${bar} `)} ${bar}`);
     }
     return rowLines.join('\n');
 }
-function drawSeparator(widths, left, mid, right) {
-    return `${left}${widths.map((w) => '─'.repeat(w + CELL_PADDING)).join(mid)}${right}`;
+function drawSeparator(widths, left, mid, right, glyphs) {
+    const rule = glyphs.solid.horizontal;
+    return `${left}${widths.map((w) => rule.repeat(w + CELL_PADDING)).join(mid)}${right}`;
 }
 /**
  * Draws a box-drawn table. `header`, when given, is the bold first row,
@@ -101,19 +102,20 @@ function drawSeparator(widths, left, mid, right) {
  * complete grid at most `width` columns wide when the natural content
  * allows it, otherwise as narrow as `MIN_COLUMN_WIDTH` per column permits.
  */
-export function drawTableGrid(header, rows, width, boldFn = (text) => text, align = 'left') {
+export function drawTableGrid(header, rows, width, glyphs, boldFn = (text) => text, align = 'left') {
     const columnCount = Math.max(header?.length ?? 0, ...rows.map((row) => row.length), 1);
     const natural = naturalColumnWidths(header, rows, columnCount);
     const widths = negotiateColumnWidths(natural, width);
     const lines = [];
-    lines.push(drawSeparator(widths, '┌', '┬', '┐'));
+    const g = glyphs;
+    lines.push(drawSeparator(widths, g.topLeft, g.teeDown, g.topRight, g));
     if (header) {
-        lines.push(drawRow(header, widths, true, boldFn, align));
-        lines.push(drawSeparator(widths, '├', '┼', '┤'));
+        lines.push(drawRow(header, widths, true, boldFn, align, g));
+        lines.push(drawSeparator(widths, g.teeRight, g.cross, g.teeLeft, g));
     }
     for (const row of rows)
-        lines.push(drawRow(row, widths, false, boldFn, align));
-    lines.push(drawSeparator(widths, '└', '┴', '┘'));
+        lines.push(drawRow(row, widths, false, boldFn, align, g));
+    lines.push(drawSeparator(widths, g.bottomLeft, g.teeUp, g.bottomRight, g));
     return lines.join('\n');
 }
 /** The widest a `drawTableGrid` result's lines get, for a `selfLayout` component (`./table.ts`) that needs to know its own natural footprint (the `fit` width preset). */

package/dist/components/table.d.ts

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

package/dist/components/table.js

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

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

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