@markii/ansi 0.16.0 → 0.17.0-next.1

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/components/callout.d.ts

@@ -1,6 +1,20 @@
+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
@@ -11,7 +25,7 @@ export type CalloutType = 'info' | 'warning' | 'danger';
  * `resolveCardInnerWidth`'s doc comment for why that re-wrap-afterward
  * shape was a real, shipped regression.
  */
-export declare function resolveCalloutInnerWidth(attributes: DirectiveAttributes, layout: ResolvedLayoutPresets | undefined, outerWidth: number): number;
+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

package/dist/components/callout.js

@@ -2,33 +2,42 @@ 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. */
-const BAR = '▌ ';
 /** `headerText` for `type`, e.g. `ℹ Info` — needed by both `resolveCalloutInnerWidth` (before there is a component instance) and `Callout` itself. */
-function headerTextFor(type) {
-    return `${CALLOUT_ICONS[type]} ${CALLOUT_LABELS[type]}`;
+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
@@ -40,14 +49,17 @@ function headerTextFor(type) {
  * `resolveCardInnerWidth`'s doc comment for why that re-wrap-afterward
  * shape was a real, shipped regression.
  */
-export function resolveCalloutInnerWidth(attributes, layout, outerWidth) {
+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 = BAR.length +
-        Math.max(measureWidth(headerTextFor(type)), measureWidth(title ?? ''));
+    const naturalWidth = barWidth +
+        Math.max(measureWidth(headerTextFor(type, glyphs)), measureWidth(title ?? ''));
     const boxWidth = selfLayoutWidth(layout, outerWidth, naturalWidth);
-    return Math.max(1, boxWidth - BAR.length);
+    return Math.max(1, boxWidth - barWidth);
 }
 /**
  * `:::callout{type=info|warning|danger title="..." text=left|center|right}` —
@@ -72,13 +84,14 @@ export const Callout = ({ attributes, children, ctx }) => {
     const title = attributes.title ?? null;
     const rawTextAlign = attributes.text;
     const align = rawTextAlign && isTextAlign(rawTextAlign) ? rawTextAlign : 'left';
-    const headerText = headerTextFor(type);
+    const headerText = headerTextFor(type, ctx.glyphs);
     const titleText = title ? ctx.text(title) : undefined;
-    const naturalWidth = BAR.length +
+    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 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];

package/dist/components/card.d.ts

@@ -1,5 +1,15 @@
 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

package/dist/components/card.js

@@ -7,8 +7,22 @@ function isTextAlign(value) {
 }
 /** `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
@@ -27,12 +41,8 @@ const FRAME_OVERHEAD = 2;
  * safe to have removed: this is its eager equivalent.
  */
 export function resolveCardInnerWidth(attributes, layout, outerWidth) {
-    const title = attributes.title ?? null;
-    const naturalWidth = title
-        ? measureWidth(title) + FRAME_OVERHEAD * 2
-        : FIT_DEFAULT_WIDTH;
-    const boxWidth = selfLayoutWidth(layout, outerWidth, naturalWidth);
-    return Math.max(1, boxWidth - FRAME_OVERHEAD);
+    const boxWidth = resolveCardBoxWidth(attributes, layout, outerWidth);
+    return Math.max(1, boxWidth - CARD_FRAME_OVERHEAD);
 }
 /**
  * `:::card{title="..." text=left|center|right} ... :::` — a titled panel.
@@ -52,11 +62,8 @@ export const Card = ({ attributes, children, ctx }) => {
     const titleText = title ? ctx.text(title) : undefined;
     const rawTextAlign = attributes.text;
     const align = rawTextAlign && isTextAlign(rawTextAlign) ? rawTextAlign : 'left';
-    const naturalWidth = titleText
-        ? measureWidth(titleText) + FRAME_OVERHEAD * 2
-        : FIT_DEFAULT_WIDTH;
-    const boxWidth = selfLayoutWidth(ctx.layout, ctx.width, naturalWidth);
-    const innerWidth = Math.max(1, boxWidth - FRAME_OVERHEAD);
+    const 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
@@ -68,6 +75,7 @@ export const Card = ({ attributes, children, ctx }) => {
         style: 'solid',
         title: titleText,
         width: boxWidth,
+        glyphs: ctx.glyphs,
     });
     return selfLayoutAlign(framed, ctx.layout, ctx.width);
 };

package/dist/components/chart.d.ts

@@ -4,6 +4,6 @@ import type { AnsiComponent } from '../registry.js';
  * 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.
+ * horizontal bar per point.
  */
 export declare const Chart: AnsiComponent;

package/dist/components/chart.js

@@ -57,26 +57,25 @@ function resolvePoints(data, dataStatus, rawValues) {
     }
     return [];
 }
-/** `▁▂▃▄▅▆▇█`, the eight-step block-height ramp a line chart's sparkline row is built from. */
-const SPARKLINE_CHARS = '▁▂▃▄▅▆▇█';
 function formatPoint(value) {
     return Number.isFinite(value)
         ? String(Math.round(value * 100) / 100)
         : String(value);
 }
-function sparkline(points) {
+/** One sparkline row over `ramp`, the render's eight-step `GlyphSet.sparkline`. */
+function sparkline(points, ramp) {
     const min = Math.min(...points);
     const max = Math.max(...points);
     const range = max - min;
     return points
         .map((point) => {
         const normalized = range > 0 ? (point - min) / range : 0.5;
-        const index = Math.min(SPARKLINE_CHARS.length - 1, Math.max(0, Math.round(normalized * (SPARKLINE_CHARS.length - 1))));
-        return SPARKLINE_CHARS[index];
+        const index = Math.min(ramp.length - 1, Math.max(0, Math.round(normalized * (ramp.length - 1))));
+        return ramp[index];
     })
         .join('');
 }
-/** `██████` bar length for `point`, scaled against the series' largest magnitude and capped at `budget` columns. */
+/** A bar's length for `point`, scaled against the series' largest magnitude and capped at `budget` columns. */
 function barLength(point, maxMagnitude, budget) {
     if (maxMagnitude <= 0)
         return 0;
@@ -87,7 +86,7 @@ function barLength(point, maxMagnitude, budget) {
  * 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.
+ * horizontal bar per point.
  */
 export const Chart = ({ attributes, ctx }) => {
     const { data, dataStatus, dataFailureKind } = ctx;
@@ -108,14 +107,14 @@ export const Chart = ({ attributes, ctx }) => {
     if (kind === 'line') {
         const min = ctx.dim(formatPoint(Math.min(...points)));
         const max = ctx.dim(formatPoint(Math.max(...points)));
-        return `${min} ${sparkline(points)} ${max}${styledSuffix}`;
+        return `${min} ${sparkline(points, ctx.glyphs.sparkline)} ${max}${styledSuffix}`;
     }
     const labels = points.map((point) => formatPoint(point));
     const labelWidth = Math.max(...labels.map((label) => measureWidth(label)));
     const budget = Math.max(1, ctx.width - labelWidth - 1);
     const maxMagnitude = Math.max(...points.map((point) => Math.abs(point)));
     const lines = points.map((point, index) => {
-        const bar = '█'.repeat(barLength(point, maxMagnitude, budget));
+        const bar = ctx.glyphs.barFilled.repeat(barLength(point, maxMagnitude, budget));
         return `${padText(labels[index], labelWidth, 'right')} ${bar}`;
     });
     return `${lines.join('\n')}${styledSuffix}`;

package/dist/components/details-string.js

@@ -30,7 +30,7 @@ export function resolveDetailsInnerWidth(outerWidth) {
 export const Details = ({ attributes, children, ctx }) => {
     const title = attributes.title ?? DEFAULT_TITLE;
     const open = Object.hasOwn(attributes, 'open');
-    const glyph = open ? '▾' : '▸';
+    const glyph = open ? ctx.glyphs.foldOpen : ctx.glyphs.foldClosed;
     const marker = ctx.dim(`${glyph} ${ctx.bold(ctx.text(title))} (collapsible section, shown expanded)`);
     const body = childrenText(children);
     if (!body)

package/dist/components/details.d.ts

@@ -1,3 +1,4 @@
+import type { GlyphSet } from '../glyphs.js';
 import type { ReactNode } from 'react';
 import type { ColorLevel } from '../ansi.js';
 /**
@@ -26,7 +27,8 @@ export interface InteractiveDetailsProps {
     body: ReactNode;
     defaultOpen: boolean;
     color: ColorLevel;
+    glyphs: GlyphSet;
     interactive: boolean;
     focusId: number | undefined;
 }
-export declare function InteractiveDetails({ title, body, defaultOpen, color, interactive, focusId, }: InteractiveDetailsProps): ReactNode;
+export declare function InteractiveDetails({ title, body, defaultOpen, color, glyphs, interactive, focusId, }: InteractiveDetailsProps): ReactNode;

package/dist/components/details.js

@@ -2,10 +2,11 @@ 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, }) {
+import { useFocusAnchor, useFocusMarker, useIsFocused, } from '../interactive.js';
+export function InteractiveDetails({ title, body, defaultOpen, color, glyphs, interactive, focusId, }) {
     const [open, setOpen] = useState(defaultOpen);
     const focused = useIsFocused(focusId);
+    const anchor = useFocusAnchor(focusId);
     useInput((_input, key) => {
         if (key.return)
             setOpen((current) => !current);
@@ -14,14 +15,14 @@ export function InteractiveDetails({ title, body, defaultOpen, color, interactiv
     // 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 openGlyph = open ? glyphs.foldOpen : glyphs.foldClosed;
     const hint = focused ? (open ? '  enter to close' : '  enter to open') : '';
     const summaryLine = dim(`${openGlyph} ${bold(title, color)}${hint}`, color);
-    const focusGlyph = focused ? '› ' : '  ';
+    const focusGlyph = focused ? glyphs.focus : '  ';
     const headingLine = useFocusMarker(`${focusGlyph}${summaryLine}`, focusId);
     if (!interactive) {
-        const glyph = defaultOpen ? '▾' : '▸';
+        const glyph = defaultOpen ? glyphs.foldOpen : glyphs.foldClosed;
         return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: dim(`${glyph} ${bold(title, color)} (collapsible section, shown expanded)`, color) }), _jsx(Box, { marginLeft: 2, flexDirection: "column", children: body })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: headingLine }), open && (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: body }))] }));
+    return (_jsxs(Box, { ref: anchor, flexDirection: "column", children: [_jsx(Text, { children: headingLine }), open && (_jsx(Box, { marginLeft: 2, flexDirection: "column", children: body }))] }));
 }

package/dist/components/divider.js

@@ -12,9 +12,7 @@ const LABEL_ALIGNS = ['left', 'center', 'right'];
 function isDividerLabelAlign(value) {
     return LABEL_ALIGNS.includes(value);
 }
-const ORNAMENT_GLYPH = '❖';
 /** The rule character each non-ornament variant draws with. */
-const RULE_CHAR = { line: '─', dots: '·' };
 /** How much of a labeled rule's rule fill sits on the SHORT side when the label is pushed left/right (the rest fills the long side). */
 const SHORT_SIDE_RULE = 2;
 /** Builds a full-`width` rule with `label` woven in at `align`, e.g. `── Part 2 ─────────`. */
@@ -64,12 +62,12 @@ export const Divider = ({ attributes, ctx }) => {
     let line;
     if (variant === 'ornament') {
         const inner = label
-            ? `${ORNAMENT_GLYPH} ${label} ${ORNAMENT_GLYPH}`
-            : ORNAMENT_GLYPH;
+            ? `${ctx.glyphs.ornament} ${label} ${ctx.glyphs.ornament}`
+            : ctx.glyphs.ornament;
         line = padText(inner, width, labelAlign);
     }
     else {
-        const ruleChar = RULE_CHAR[variant];
+        const ruleChar = variant === 'dots' ? ctx.glyphs.ruleDots : ctx.glyphs.rule;
         line = label
             ? labeledRule(ruleChar, label, width, labelAlign)
             : ruleLine(width, ruleChar);

package/dist/components/progress.js

@@ -33,8 +33,6 @@ 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;
 /**
@@ -65,6 +63,7 @@ export const Progress = ({ attributes, ctx }) => {
     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.js

@@ -16,12 +16,12 @@ function clamp(value, min, max) {
  * degrades gracefully instead of throwing. Terminal form: filled (`★`) and
  * 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

@@ -3,6 +3,8 @@ 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;

package/dist/components/row.js

@@ -8,6 +8,8 @@ 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;
+/** 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} ... :::`'s pure layout
  * decision: how many columns, how wide each one is, and whether the row
@@ -30,7 +32,7 @@ export function resolveRowLayout(attributes, cellCount, width) {
     const rawCols = attributes.cols ?? '';
     const requestedCols = isColsValue(rawCols) ? Number(rawCols) : cellCount;
     const columnCount = Math.max(1, Math.min(requestedCols, Math.max(1, cellCount)));
-    const gutter = 1;
+    const gutter = ROW_GUTTER;
     const stacked = width < ROW_COLUMN_THRESHOLD || columnCount <= 1;
     const colWidth = stacked
         ? width

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);
@@ -54,7 +53,7 @@ export const Stat = ({ attributes, 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/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

@@ -75,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) {
@@ -83,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,
@@ -100,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.js

@@ -89,7 +89,7 @@ export const Table = ({ attributes, 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.d.ts

@@ -1,3 +1,4 @@
+import type { GlyphSet } from '../glyphs.js';
 import type { ReactNode } from 'react';
 import type { ColorLevel } from '../ansi.js';
 import type { ElementTabPanel } from '../render.js';
@@ -27,7 +28,8 @@ import type { ElementTabPanel } from '../render.js';
 export interface InteractiveTabsProps {
     panels: readonly ElementTabPanel[];
     color: ColorLevel;
+    glyphs: GlyphSet;
     interactive: boolean;
     focusId: number | undefined;
 }
-export declare function InteractiveTabs({ panels, color, interactive, focusId, }: InteractiveTabsProps): ReactNode;
+export declare function InteractiveTabs({ panels, color, glyphs, interactive, focusId, }: InteractiveTabsProps): ReactNode;

package/dist/components/tabs.js

@@ -1,18 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Box, Text, useInput } from 'ink';
 import { bold, dim } from '../ansi.js';
-import { useFocusMarker, useIsFocused } from '../interactive.js';
-export function InteractiveTabs({ panels, color, interactive, focusId, }) {
+import { useFocusAnchor, useFocusMarker, useIsFocused, useReportActiveLabel, } from '../interactive.js';
+export function InteractiveTabs({ panels, color, glyphs, interactive, focusId, }) {
     const [active, setActive] = useState(0);
     const focused = useIsFocused(focusId);
+    const reportActiveLabel = useReportActiveLabel();
+    const anchor = useFocusAnchor(focusId);
     useInput((_input, key) => {
+        if (panels.length === 0)
+            return;
+        let nextIndex;
         if (key.leftArrow) {
-            setActive((current) => (current - 1 + panels.length) % panels.length);
+            nextIndex = (active - 1 + panels.length) % panels.length;
         }
         else if (key.rightArrow || key.tab) {
-            setActive((current) => (current + 1) % panels.length);
+            nextIndex = (active + 1) % panels.length;
         }
+        if (nextIndex === undefined)
+            return;
+        setActive(nextIndex);
     }, { 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 header
@@ -20,6 +28,16 @@ export function InteractiveTabs({ panels, color, interactive, focusId, }) {
     // waste is the price of never making a hook call conditional.
     const activeIndex = Math.min(active, Math.max(0, panels.length - 1));
     const activePanel = panels[activeIndex];
+    const activeLabel = activePanel?.label ?? '';
+    // Tells the status line which panel is showing. Reported from an effect
+    // on the active label itself, so it also follows a re-parse (`--watch`)
+    // that changes the panels under a mounted block. The root ignores a
+    // report that repeats what it already has, so this cannot loop.
+    useEffect(() => {
+        if (interactive && focusId !== undefined) {
+            reportActiveLabel(focusId, activeLabel);
+        }
+    }, [interactive, focusId, activeLabel, reportActiveLabel]);
     const strip = panels
         .map((panel, index) => {
         const rendered = index === activeIndex
@@ -28,10 +46,10 @@ export function InteractiveTabs({ panels, color, interactive, focusId, }) {
         return index > 0 ? `  ${rendered}` : rendered;
     })
         .join('');
-    const focusGlyph = focused ? '› ' : '  ';
+    const focusGlyph = focused ? glyphs.focus : '  ';
     const headingLine = useFocusMarker(`${focusGlyph}${strip}`, focusId);
     if (!interactive) {
         return (_jsx(Box, { flexDirection: "column", children: panels.map((panel, index) => (_jsxs(Box, { marginTop: index > 0 ? 1 : 0, flexDirection: "column", children: [_jsx(Text, { children: bold(`${panel.label}${index === 0 ? ' (active)' : ''}`, color) }), panel.body] }, index))) }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: headingLine }), activePanel?.body] }));
+    return (_jsxs(Box, { ref: anchor, flexDirection: "column", children: [_jsx(Text, { children: headingLine }), activePanel?.body] }));
 }