@markii/ansi 0.0.1 → 0.16.0

package/dist/components/details.d.ts

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

package/dist/components/details.js

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

package/dist/components/divider.js

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

package/dist/components/figure.d.ts

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

package/dist/components/figure.js

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

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/components/kbd.d.ts

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

package/dist/components/kbd.js

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

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

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

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;
@@ -38,19 +38,11 @@ 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,7 +62,7 @@ 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);

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,10 +14,9 @@ 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 }) => {
     const max = clamp(parseCount(attributes.max, DEFAULT_MAX), MIN_MAX, MAX_MAX);
     const value = clamp(parseCount(attributes.value, 0), 0, max);
     let stars = '';