@bakers-build/addon-bakers-ui 0.0.0-stage → 0.1.0-next.38

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 keytec GmbH
+
+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/README.md

@@ -1,3 +1,5 @@
-# Temporary Holding Version
+# @bakers-build/addon-bakers-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+bakers.build TUI: interactive terminal UI (dashboard, projects, tickets) as a dropsh `tui` renderer plugin.
+
+Part of the bakers.build CLI. Install the meta package `@bakers-build/bakers` to get the `bakers` CLI with all addons. Source: https://git.key-tec.de/bakers-build/bakers-build (bakers-cli/).

package/dist/src/Agent/launch.d.ts

@@ -0,0 +1,25 @@
+import type { CreateFormPayload } from '../Entity/ticket/Form/create.js';
+import type { TuiAgentService } from '../types.js';
+/** The launch intent passed to {@link TuiAgentService.launch}. */
+export type CreateLaunch = Parameters<TuiAgentService['launch']>[0];
+/**
+ * Build the `ticket:create` launch intent for a project. The prompt is a pure
+ * pointer to WORKFLOW.md (the pre-filled form is passed via
+ * `$BB_NEW_TICKET_INPUT`); `BB_ID` is never inherited (a create must not be
+ * bound to a claimed ticket).
+ */
+export declare function buildCreateLaunch(opts: {
+    project: string;
+    cwd: string;
+    specPath?: string | undefined;
+    workflow?: string | undefined;
+    createPrompt?: string | undefined;
+    label?: string | undefined;
+}): CreateLaunch;
+/**
+ * A short human label for the agent list: the ticket's title, else the
+ * description's first line (both capped to 40 incl. the ellipsis), else
+ * "New <workflow>". BB-236 AC-8: it builds the `label` `buildCreateLaunch`
+ * takes, so it belongs to the module that builds the launch intent.
+ */
+export declare function shortName(payload: CreateFormPayload): string;

package/dist/src/Agent/launch.js

@@ -0,0 +1,56 @@
+// Ticket-create launch request (AC-3). Pressing `n` starts an embedded agent
+// that runs the bakers.build `ticket:create` workflow. This module is pure: it builds
+// the launch intent (prompt + env) the TUI hands to the injected agent host
+// (`services.agents.launch`); the host (herdr) owns transport + layout. No
+// node-pty / @xterm, no session object.
+const CREATE_PROMPT = 'Read the repository\'s WORKFLOW.md and follow its "Create ticket" section to ' +
+    'create a new bakers.build ticket. Do not start work on the new ticket.';
+/**
+ * Build the `ticket:create` launch intent for a project. The prompt is a pure
+ * pointer to WORKFLOW.md (the pre-filled form is passed via
+ * `$BB_NEW_TICKET_INPUT`); `BB_ID` is never inherited (a create must not be
+ * bound to a claimed ticket).
+ */
+export function buildCreateLaunch(opts) {
+    const env = {
+        ...process.env,
+        TERM: 'xterm-256color',
+        BB_PROJECT: opts.project,
+    };
+    delete env.BB_ID;
+    if (opts.specPath)
+        env.BB_NEW_TICKET_INPUT = opts.specPath;
+    if (opts.workflow)
+        env.BB_WORKFLOW = opts.workflow;
+    return {
+        group: opts.project,
+        cwd: opts.cwd,
+        prompt: opts.createPrompt?.trim() || CREATE_PROMPT,
+        env,
+        isNew: true,
+        ...(opts.label !== undefined ? { label: opts.label } : {}),
+    };
+}
+/**
+ * A short human label for the agent list: the ticket's title, else the
+ * description's first line (both capped to 40 incl. the ellipsis), else
+ * "New <workflow>". BB-236 AC-8: it builds the `label` `buildCreateLaunch`
+ * takes, so it belongs to the module that builds the launch intent.
+ */
+export function shortName(payload) {
+    // BB-309 D9: the title is what the operator NAMED the ticket, so it is the
+    // better tab label; the description's first line stays the fallback for a
+    // payload that has no title yet. This touches the launch intent's `label`
+    // ONLY — never `prompt`, never `env`, which is what AC-6 pins.
+    const cap = (line) => line.length > 40 ? `${line.slice(0, 39)}…` : line;
+    const title = payload.title.trim();
+    if (title)
+        return cap(title);
+    const firstLine = payload.description
+        .split('\n')
+        .map((l) => l.trim())
+        .find((l) => l.length > 0);
+    if (firstLine)
+        return cap(firstLine);
+    return `New ${payload.workflow?.label ?? 'ticket'}`;
+}

package/dist/src/Component/badge/index.d.ts

@@ -0,0 +1,11 @@
+import type { RGBA, VNode } from '@opentui/core';
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'secondary';
+/** The unbordered badge — the only form the TUI draws. */
+export interface BadgeProps {
+    id: string;
+    label: string;
+    variant?: BadgeVariant;
+    color?: RGBA;
+    bold?: boolean;
+}
+export declare const Badge: ({ id, label, variant, color, bold, }: BadgeProps) => VNode;

package/dist/src/Component/badge/index.js

@@ -0,0 +1,10 @@
+import { FOREGROUND, FOREGROUND_HIGHLIGHT } from '../../lib/theme.js';
+import { BOLD, paragraphNode, plainRun } from '../../lib/vnode.js';
+// Every status variant shares the highlight slot: the palette names roles, not
+// hues (`lib/theme.ts`).
+const variantColor = (variant) => variant === 'secondary' ? FOREGROUND : FOREGROUND_HIGHLIGHT;
+export const Badge = ({ id, label, variant = 'default', color, bold = false, }) => paragraphNode({
+    id,
+    runs: [plainRun(label, bold ? BOLD : 0)],
+    fg: color ?? variantColor(variant),
+});

package/dist/src/Component/bar-chart/index.d.ts

@@ -0,0 +1,16 @@
+import { type RGBA, type VNode } from '@opentui/core';
+export interface BarChartItem {
+    label: string;
+    value: number;
+    color?: RGBA;
+}
+/** The horizontal chart — the only direction the TUI draws. */
+export interface BarChartProps {
+    id: string;
+    data: readonly BarChartItem[];
+    width?: number;
+    showValues?: boolean;
+    title?: string;
+    maxValue?: number;
+}
+export declare const BarChart: ({ id, data, width, showValues, title, maxValue: suppliedMax, }: BarChartProps) => VNode;

package/dist/src/Component/bar-chart/index.js

@@ -0,0 +1,63 @@
+import { BoxRenderable, h } from '@opentui/core';
+import { FOREGROUND, FOREGROUND_HIGHLIGHT } from '../../lib/theme.js';
+import { BOLD, DIM, paragraphNode, plainRun } from '../../lib/vnode.js';
+const BAR_CHAR = '█';
+const EMPTY_CHAR = '░';
+const pad = (str, length) => {
+    if (str.length >= length) {
+        return str.slice(0, length);
+    }
+    return str.padEnd(length);
+};
+const padStart = (str, length) => {
+    if (str.length >= length) {
+        return str.slice(0, length);
+    }
+    return ' '.repeat(length - str.length) + str;
+};
+export const BarChart = ({ id, data, width = 30, showValues = true, title, maxValue: suppliedMax, }) => {
+    if (data.length === 0)
+        return paragraphNode({
+            id,
+            runs: [plainRun('No data', DIM)],
+            fg: FOREGROUND,
+        });
+    const maxValue = suppliedMax ?? Math.max(...data.map((d) => d.value));
+    const maxLabelLen = Math.max(...data.map((d) => d.label.length));
+    const maxValLen = Math.max(...data.map((d) => String(d.value).length));
+    const barWidth = width - maxLabelLen - maxValLen - 3;
+    return h(BoxRenderable, { id, flexDirection: 'column' }, ...(title
+        ? [
+            paragraphNode({
+                id: `${id}-title`,
+                runs: [plainRun(title, BOLD)],
+                fg: FOREGROUND_HIGHLIGHT,
+            }),
+        ]
+        : []), 
+    // One bar per data item, in the caller's order.
+    ...data.map((item, index) => {
+        const row = `${id}-${index}`;
+        const filled = maxValue === 0
+            ? 0
+            : Math.round((item.value / maxValue) * Math.max(1, barWidth));
+        const empty = Math.max(0, barWidth - filled);
+        return h(BoxRenderable, { id: row, flexDirection: 'row', gap: 1 }, paragraphNode({
+            id: `${row}-label`,
+            runs: [plainRun(pad(item.label, maxLabelLen))],
+            fg: FOREGROUND,
+        }), paragraphNode({
+            id: `${row}-bar`,
+            runs: [plainRun(BAR_CHAR.repeat(filled) + EMPTY_CHAR.repeat(empty))],
+            fg: item.color ?? FOREGROUND_HIGHLIGHT,
+        }), ...(showValues
+            ? [
+                paragraphNode({
+                    id: `${row}-value`,
+                    runs: [plainRun(padStart(String(item.value), maxValLen), DIM)],
+                    fg: FOREGROUND,
+                }),
+            ]
+            : []));
+    }));
+};

package/dist/src/Component/card/index.d.ts

@@ -0,0 +1,16 @@
+import { type RGBA, type VNode } from '@opentui/core';
+export type BorderStyle = 'single' | 'double' | 'rounded' | 'heavy';
+export interface CardProps {
+    /** Entity-derived; the card's parts derive their ids from it. */
+    id: string;
+    title?: string;
+    subtitle?: string;
+    children: readonly VNode[];
+    borderColor?: RGBA;
+    width?: number | `${number}%`;
+    onMouseDown?: () => void;
+    borderStyle?: BorderStyle;
+    paddingX?: number;
+    paddingY?: number;
+}
+export declare const Card: ({ id, title, subtitle, children, borderColor, width, onMouseDown, borderStyle, paddingX, paddingY, }: CardProps) => VNode;

package/dist/src/Component/card/index.js

@@ -0,0 +1,39 @@
+import { BoxRenderable, h } from '@opentui/core';
+import { BORDER, FOREGROUND } from '../../lib/theme.js';
+import { BOLD, DIM, paragraphNode, plainRun, pressHandler, } from '../../lib/vnode.js';
+export const Card = ({ id, title, subtitle, children, borderColor, width, onMouseDown, borderStyle = 'rounded', paddingX = 1, paddingY = 0, }) => {
+    const heading = [];
+    if (title)
+        heading.push(paragraphNode({
+            id: `${id}-title`,
+            runs: [plainRun(title, BOLD)],
+            fg: FOREGROUND,
+        }));
+    if (subtitle)
+        heading.push(paragraphNode({
+            id: `${id}-subtitle`,
+            runs: [plainRun(subtitle, DIM)],
+            fg: FOREGROUND,
+        }));
+    return h(BoxRenderable, {
+        id,
+        flexDirection: 'column',
+        border: true,
+        borderStyle,
+        borderColor: borderColor ?? BORDER,
+        width: width ?? 'auto',
+        paddingLeft: paddingX,
+        paddingRight: paddingX,
+        paddingTop: paddingY,
+        paddingBottom: paddingY,
+        onMouseDown: pressHandler(onMouseDown),
+    }, ...(heading.length > 0
+        ? [
+            h(BoxRenderable, {
+                id: `${id}-heading`,
+                flexDirection: 'column',
+                paddingBottom: 1,
+            }, ...heading),
+        ]
+        : []), h(BoxRenderable, { id: `${id}-content`, flexDirection: 'column' }, ...children));
+};

package/dist/src/Component/divider/index.d.ts

@@ -0,0 +1,7 @@
+import { type RGBA, type VNode } from '@opentui/core';
+export interface DividerProps {
+    id: string;
+    color?: RGBA;
+}
+/** The horizontal, unlabelled rule — the only shape the TUI draws. */
+export declare const Divider: ({ id, color }: DividerProps) => VNode;

package/dist/src/Component/divider/index.js

@@ -0,0 +1,13 @@
+import { BoxRenderable, h } from '@opentui/core';
+import { BORDER } from '../../lib/theme.js';
+// One array for every divider: `border` re-applies Yoga borders when it is
+// handed a different value, and a patch restates it on every draw.
+const TOP = ['top'];
+/** The horizontal, unlabelled rule — the only shape the TUI draws. */
+export const Divider = ({ id, color }) => h(BoxRenderable, { id, flexDirection: 'row' }, h(BoxRenderable, {
+    id: `${id}-rule`,
+    flexGrow: 1,
+    borderStyle: 'single',
+    borderColor: color ?? BORDER,
+    border: TOP,
+}));

package/dist/src/Component/footer-actions/index.d.ts

@@ -0,0 +1,58 @@
+import { type VNode } from '@opentui/core';
+/**
+ * One footer action — the atomic chip screens publish.
+ * Rendered as `key` ({@link FOREGROUND_ACTIVE} fg) plus optional muted `:Label`.
+ */
+export interface ActionItem {
+    /** Stable id — nodes are `${id}-key` / `${id}-sfx`. */
+    id: string;
+    /** Active key glyph, e.g. `e`, `Tab`, `→`. */
+    key: string;
+    /**
+     * Plain label without a colon (`edit`, `next`). Title-cased and prefixed
+     * with `:` at render time. Omit for a bare key (`Enter`).
+     */
+    label?: string;
+}
+/** Build an {@link ActionItem} — the usual screen-side constructor. */
+export declare const actionItem: (id: string, key: string, label?: string) => ActionItem;
+/** Legacy ladder string for assertions (`n new · e edit`). */
+export declare const formatActionLadder: (items: readonly ActionItem[] | undefined) => string;
+/** Box-drawing pipe — sits optically higher than ASCII `|`. */
+export declare const footerSep: (id: string) => VNode;
+/**
+ * Render one action-item as FOREGROUND_ACTIVE-fg key + optional muted `:Label`.
+ * Also used by the kernel basics row (`Esc:back`, `q:quit`).
+ */
+export declare const renderActionItem: (item: Pick<ActionItem, "id" | "key" | "label"> & {
+    suffix?: string;
+}) => VNode[];
+/**
+ * Low-level chip used by kernel basics that already pass a ready `:suffix`
+ * (e.g. `:quit`). Screen actions prefer {@link actionItem}.
+ */
+export declare const footerKey: (id: string, key: string, suffix?: string) => VNode[];
+/**
+ * A segment inside {@link withActionPipes}: an {@link ActionItem}, or already
+ * rendered nodes (plain text, {@link footerKey} chips, …).
+ */
+export type ActionSegment = ActionItem | readonly VNode[];
+/**
+ * Wrapper that inserts `│` between segments — action-items or prebuilt node
+ * groups. Callers never place separators by hand.
+ */
+export declare const withActionPipes: (sepIdPrefix: string, segments: readonly ActionSegment[]) => VNode[];
+/** Pipe-joined chips from an action-item list (thin wrapper over {@link withActionPipes}). */
+export declare const footerActionChips: (items: readonly ActionItem[], sepIdPrefix?: string) => VNode[];
+/**
+ * Full screen-actions row: lead pad + piped action-items + width pad.
+ * Returns `null` when `items` is empty — caller omits the row.
+ */
+export declare const footerActions: (id: string, items: readonly ActionItem[], width: number) => VNode | null;
+/** @deprecated Use {@link footerActions}. */
+export declare const footerActionsRow: (id: string, items: readonly ActionItem[], width: number) => VNode | null;
+/**
+ * Parse a legacy ladder string (`n new · e edit`) into action-items.
+ * Prefer publishing {@link ActionItem} arrays from screens directly.
+ */
+export declare const parseFooterLadder: (ladder: string, idPrefix?: string) => ActionItem[];

package/dist/src/Component/footer-actions/index.js

@@ -0,0 +1,113 @@
+// BB-375 — footer actions: action-item chips + withActionPipes (│ between them).
+// No footer fill — chips sit on the terminal default (same as header).
+import { BoxRenderable, h } from '@opentui/core';
+import { BORDER, FOREGROUND_ACTIVE, textNode } from '../../lib/vnode.js';
+/** Build an {@link ActionItem} — the usual screen-side constructor. */
+export const actionItem = (id, key, label) => (label === undefined ? { id, key } : { id, key, label });
+/** Legacy ladder string for assertions (`n new · e edit`). */
+export const formatActionLadder = (items) => (items ?? [])
+    .map((item) => item.label !== undefined ? `${item.key} ${item.label}` : item.key)
+    .join(' · ');
+/** Box-drawing pipe — sits optically higher than ASCII `|`. */
+export const footerSep = (id) => textNode({ id, content: ' │ ', fg: BORDER });
+/** First letter upper for labels (`edit` → `Edit`). */
+const titleCase = (label) => label.length === 0 ? label : label.charAt(0).toUpperCase() + label.slice(1);
+/**
+ * Render one action-item as FOREGROUND_ACTIVE-fg key + optional muted `:Label`.
+ * Also used by the kernel basics row (`Esc:back`, `q:quit`).
+ */
+export const renderActionItem = (item) => {
+    const suffix = item.suffix ??
+        (item.label !== undefined ? `:${titleCase(item.label)}` : undefined);
+    const nodes = [
+        textNode({
+            id: `${item.id}-key`,
+            content: item.key,
+            fg: FOREGROUND_ACTIVE,
+            bold: true,
+        }),
+    ];
+    if (suffix !== undefined) {
+        nodes.push(textNode({
+            id: `${item.id}-sfx`,
+            content: suffix,
+            fg: BORDER,
+        }));
+    }
+    return nodes;
+};
+/**
+ * Low-level chip used by kernel basics that already pass a ready `:suffix`
+ * (e.g. `:quit`). Screen actions prefer {@link actionItem}.
+ */
+export const footerKey = (id, key, suffix) => suffix === undefined
+    ? renderActionItem({ id, key })
+    : renderActionItem({ id, key, suffix });
+const isActionItem = (segment) => !Array.isArray(segment);
+/**
+ * Wrapper that inserts `│` between segments — action-items or prebuilt node
+ * groups. Callers never place separators by hand.
+ */
+export const withActionPipes = (sepIdPrefix, segments) => {
+    const parts = [];
+    let placed = 0;
+    for (const segment of segments) {
+        const nodes = isActionItem(segment)
+            ? renderActionItem(segment)
+            : [...segment];
+        if (nodes.length === 0)
+            continue;
+        if (placed > 0)
+            parts.push(footerSep(`${sepIdPrefix}-${placed}`));
+        parts.push(...nodes);
+        placed += 1;
+    }
+    return parts;
+};
+/** Pipe-joined chips from an action-item list (thin wrapper over {@link withActionPipes}). */
+export const footerActionChips = (items, sepIdPrefix = 'footer-actions-sep') => withActionPipes(sepIdPrefix, items);
+/**
+ * Full screen-actions row: lead pad + piped action-items + width pad.
+ * Returns `null` when `items` is empty — caller omits the row.
+ */
+export const footerActions = (id, items, width) => {
+    if (items.length === 0)
+        return null;
+    return h(BoxRenderable, {
+        id,
+        flexDirection: 'row',
+        height: 1,
+        flexShrink: 0,
+        width: '100%',
+    }, textNode({
+        id: `${id}-lead`,
+        content: ' ',
+    }), ...withActionPipes(`${id}-sep`, items), textNode({
+        id: `${id}-pad`,
+        content: ' '.repeat(width),
+    }));
+};
+/** @deprecated Use {@link footerActions}. */
+export const footerActionsRow = footerActions;
+/**
+ * Parse a legacy ladder string (`n new · e edit`) into action-items.
+ * Prefer publishing {@link ActionItem} arrays from screens directly.
+ */
+export const parseFooterLadder = (ladder, idPrefix = 'footer-action') => {
+    const segments = ladder
+        .split(/\s·\s/)
+        .map((s) => s.trim())
+        .filter((s) => s !== '');
+    const items = [];
+    for (const [i, seg] of segments.entries()) {
+        const m = /^(\S+)(?:\s+(.+))?$/.exec(seg);
+        if (m === null)
+            continue;
+        const key = m[1];
+        if (key === undefined)
+            continue;
+        const label = m[2];
+        items.push(actionItem(`${idPrefix}-${i}`, key, label));
+    }
+    return items;
+};

package/dist/src/Component/heat-map/index.d.ts

@@ -0,0 +1,21 @@
+import { type RGBA, type VNode } from '@opentui/core';
+export interface HeatMapProps {
+    id: string;
+    data: number[][];
+    rowLabels?: string[];
+    colLabels?: string[];
+    cellLabels?: string[][];
+    /** Low to high; indexed palette slots only. */
+    colorScale?: readonly RGBA[];
+    cellWidth?: number;
+    showValues?: boolean;
+    showLegend?: boolean;
+    minValue?: number;
+    maxValue?: number;
+}
+/**
+ * Low → high intensity as three palette slots, so the scale follows the
+ * operator's terminal theme like every other colour the cockpit paints.
+ */
+export declare const HEAT_SCALE: readonly RGBA[];
+export declare const HeatMap: ({ id, data, rowLabels, colLabels, cellLabels, colorScale, cellWidth, showValues, showLegend, minValue, maxValue, }: HeatMapProps) => VNode;

package/dist/src/Component/heat-map/index.js

@@ -0,0 +1,86 @@
+import { BoxRenderable, h } from '@opentui/core';
+import { FOREGROUND, FOREGROUND_ACTIVE, FOREGROUND_HIGHLIGHT, } from '../../lib/theme.js';
+import { DIM, paragraphNode, plainRun, } from '../../lib/vnode.js';
+/**
+ * Low → high intensity as three palette slots, so the scale follows the
+ * operator's terminal theme like every other colour the cockpit paints.
+ */
+export const HEAT_SCALE = [
+    FOREGROUND,
+    FOREGROUND_HIGHLIGHT,
+    FOREGROUND_ACTIVE,
+];
+const SHADE_CHARS = [' ', '░', '▒', '▓', '█'];
+const getColorForValue = (value, min, max, scale) => {
+    if (max === min)
+        return scale[Math.floor(scale.length / 2)] ?? FOREGROUND;
+    const t = (value - min) / (max - min);
+    const index = Math.min(scale.length - 1, Math.max(0, Math.round(t * (scale.length - 1))));
+    return scale[index] ?? scale[0] ?? FOREGROUND;
+};
+const getShadeForValue = (value, min, max) => {
+    if (max === min)
+        return SHADE_CHARS[2] ?? '▒';
+    const t = (value - min) / (max - min);
+    const index = Math.min(SHADE_CHARS.length - 1, Math.max(0, Math.round(t * (SHADE_CHARS.length - 1))));
+    return SHADE_CHARS[index] ?? SHADE_CHARS[0] ?? ' ';
+};
+const padCenter = (value, width) => {
+    if (value.length >= width)
+        return value;
+    const total = width - value.length;
+    const left = Math.floor(total / 2);
+    return ' '.repeat(left) + value + ' '.repeat(total - left);
+};
+const padStart = (value, width) => value.length >= width ? value.slice(0, width) : value.padStart(width);
+/** One grid row as one text: the cells touch, so their runs are the row. */
+const gridRow = (id, runs) => paragraphNode({
+    id,
+    runs,
+    fg: FOREGROUND,
+    wrapMode: 'none',
+    flexShrink: 0,
+});
+export const HeatMap = ({ id, data, rowLabels, colLabels, cellLabels, colorScale = HEAT_SCALE, cellWidth = 5, showValues = false, showLegend = true, minValue, maxValue, }) => {
+    const firstRow = data[0];
+    if (data.length === 0 || !firstRow || firstRow.length === 0)
+        return paragraphNode({
+            id,
+            runs: [plainRun('No data', DIM)],
+            fg: FOREGROUND,
+        });
+    const numCols = firstRow.length;
+    const allValues = data.flat();
+    const min = minValue ?? Math.min(...allValues);
+    const max = maxValue ?? Math.max(...allValues);
+    const rowLabelWidth = rowLabels
+        ? Math.max(...rowLabels.map((label) => label.length)) + 1
+        : 0;
+    const rows = [];
+    if (colLabels)
+        rows.push(gridRow(`${id}-columns`, [
+            ...(rowLabelWidth > 0
+                ? [plainRun(' '.repeat(rowLabelWidth + 1), DIM, FOREGROUND)]
+                : []),
+            ...Array.from({ length: numCols }, (_, column) => plainRun(padCenter(colLabels[column] ?? String(column), cellWidth), DIM, FOREGROUND)),
+        ]));
+    data.forEach((row, rowIndex) => {
+        rows.push(gridRow(`${id}-row-${rowIndex}`, [
+            ...(rowLabels
+                ? [
+                    plainRun(`${padStart(rowLabels[rowIndex] ?? String(rowIndex), rowLabelWidth)} `, DIM, FOREGROUND),
+                ]
+                : []),
+            ...row.map((value, column) => plainRun(showValues
+                ? padCenter(cellLabels?.[rowIndex]?.[column] ?? String(Math.round(value)), cellWidth)
+                : getShadeForValue(value, min, max).repeat(cellWidth), 0, getColorForValue(value, min, max, colorScale))),
+        ]));
+    });
+    if (showLegend)
+        rows.push(h(BoxRenderable, { id: `${id}-legend`, flexDirection: 'row', marginTop: 1 }, gridRow(`${id}-legend-scale`, [
+            plainRun('Low ', DIM, FOREGROUND),
+            ...colorScale.map((colour) => plainRun('█ ', 0, colour)),
+            plainRun('High', DIM, FOREGROUND),
+        ])));
+    return h(BoxRenderable, { id, flexDirection: 'column' }, ...rows);
+};

package/dist/src/Component/key-value/index.d.ts

@@ -0,0 +1,18 @@
+import { type RGBA, type VNode } from '@opentui/core';
+export interface KeyValueItem {
+    key: string;
+    value: string;
+    /** Drawn underlined — the value is a link the click acts on. */
+    underline?: boolean;
+    color?: RGBA;
+    onMouseDown?: () => void;
+}
+export interface KeyValueProps {
+    id: string;
+    items: readonly KeyValueItem[];
+    keyWidth?: number;
+    separator?: string;
+    keyColor?: RGBA;
+    valueColor?: RGBA;
+}
+export declare const KeyValue: ({ id, items, keyWidth, separator, keyColor, valueColor, }: KeyValueProps) => VNode;

package/dist/src/Component/key-value/index.js

@@ -0,0 +1,30 @@
+import { BoxRenderable, h } from '@opentui/core';
+import { FOREGROUND } from '../../lib/theme.js';
+import { paragraphNode, plainRun, UNDERLINE } from '../../lib/vnode.js';
+export const KeyValue = ({ id, items, keyWidth, separator = ':', keyColor, valueColor, }) => {
+    const resolvedKeyWidth = keyWidth ?? Math.max(0, ...items.map((item) => item.key.length)) + 1;
+    const resolvedKeyColor = keyColor ?? FOREGROUND;
+    const resolvedValueColor = valueColor ?? FOREGROUND;
+    return h(BoxRenderable, { id, flexDirection: 'column', width: '100%' }, 
+    // A fixed list per owner, rebuilt whole from the model on every draw, so
+    // the position is a sound key for its rows.
+    ...items.map((item, index) => {
+        const row = `${id}-${index}`;
+        return h(BoxRenderable, { id: row, flexDirection: 'row', gap: 1, width: '100%' }, paragraphNode({
+            id: `${row}-key`,
+            runs: [plainRun(item.key.padEnd(resolvedKeyWidth, ' '))],
+            fg: resolvedKeyColor,
+        }), paragraphNode({
+            id: `${row}-separator`,
+            runs: [plainRun(separator)],
+            fg: resolvedKeyColor,
+        }), paragraphNode({
+            id: `${row}-value`,
+            runs: [plainRun(item.value, item.underline ? UNDERLINE : 0)],
+            fg: item.color ?? resolvedValueColor,
+            flexGrow: 1,
+            flexShrink: 1,
+            onMouseDown: item.onMouseDown,
+        }));
+    }));
+};

package/dist/src/Component/list-chrome/index.d.ts

@@ -0,0 +1,22 @@
+import { type VNode } from '@opentui/core';
+/** One filter/action badge in the strip above a list table. */
+export interface ListFilterBadge {
+    /** Stable id suffix — node id is `${stripId}-${id}`. */
+    id: string;
+    /**
+     * Shortcut plus a space plus the idle caption, e.g. `/ search` or `x closed`.
+     * The first space-delimited token is the shortcut rendered before an active value.
+     */
+    label: string;
+    /**
+     * Active caption rendered after the shortcut (e.g. `closed: hidden`, `who: cw`).
+     * Undefined or empty keeps the badge idle: {@link label} only, idle palette.
+     */
+    value?: string;
+}
+/**
+ * Rounded filter chips in a row (idle outline + active FOREGROUND_ACTIVE fg).
+ * Each badge is its own `borderStyle: 'rounded'` box — the panel border language.
+ * Horizontal inset matches the body ScrollBox frame padding (BB-375).
+ */
+export declare const filterBadgeStrip: (id: string, badges: readonly ListFilterBadge[]) => VNode;