@pellux/goodvibes-tui 0.27.0 → 0.28.0

package/src/panels/policy-panel.ts

@@ -1,9 +1,13 @@
 import type { Line } from '../types/grid.ts';
 import { createEmptyLine } from '../types/grid.ts';
+import { truncateDisplay } from '../utils/terminal-width.ts';
 import { BasePanel } from './base-panel.ts';
 import type { PolicyRuntimeState } from '@/runtime/index.ts';
 import type { PolicyPanelSnapshot } from '../runtime/diagnostics/panels/policy.ts';
 import {
+  buildEmptyState,
+  buildKeyboardHints,
+  buildKeyValueLine,
   buildPanelLine,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
@@ -89,22 +93,30 @@ export class PolicyPanel extends BasePanel {
   public render(width: number, height: number): Line[] {
     this.needsRender = false;
     const snapshot = this._state.getSnapshot();
+    const summaryLine = this._buildSummary(width, snapshot);
     const content = this._buildContent(width, snapshot);
+    const hintsLine = buildKeyboardHints(width, [
+      { keys: '↑/↓', label: 'scroll' },
+      { keys: 'r', label: 'record divergence snapshot' },
+    ], C);
+    const summarySection = { lines: [summaryLine] };
     const governanceSection = resolveScrollablePanelSection(width, height, {
-      footerLines: [buildPanelLine(width, [['  Up/Down scroll  r record divergence trend snapshot', C.dim]])],
+      footerLines: [hintsLine],
       palette: C,
+      beforeSections: [summarySection],
       section: {
         title: 'Governance',
         scrollableLines: content,
         scrollOffset: this._scrollOffset,
         minRows: 4,
+        appendWindowSummary: content.length > 0 ? { dimColor: C.dim } : undefined,
       },
     });
     this._scrollOffset = governanceSection.scrollOffset;
     const lines = buildPanelWorkspace(width, height, {
       title: 'Policy And Governance',
-      sections: [governanceSection.section],
-      footerLines: [buildPanelLine(width, [['  Up/Down scroll  r record divergence trend snapshot', C.dim]])],
+      sections: [summarySection, governanceSection.section],
+      footerLines: [hintsLine],
       palette: C,
     });
     while (lines.length < height) {
@@ -113,6 +125,28 @@ export class PolicyPanel extends BasePanel {
     return lines.slice(0, height);
   }
 
+  /** Top-of-panel posture summary: the highest-signal governance state at a glance. */
+  private _buildSummary(width: number, snapshot: PolicyPanelSnapshot): Line {
+    const preflight = snapshot.lastPreflightReview;
+    const divergence = snapshot.divergence;
+    const lintCount = snapshot.lintFindings.length;
+    const preflightStatus = preflight ? preflight.status : 'none';
+    const preflightColor = !preflight
+      ? C.dim
+      : preflight.status === 'pass'
+        ? C.ok
+        : preflight.status === 'warn'
+          ? C.warn
+          : C.error;
+    const gateStatus = divergence?.gate.status ?? 'n/a';
+    return buildKeyValueLine(width, [
+      { label: 'bundles', value: `${snapshot.current ? 1 : 0}+${snapshot.candidate ? 1 : 0}c`, valueColor: snapshot.current || snapshot.candidate ? C.value : C.dim },
+      { label: 'preflight', value: preflightStatus.toUpperCase(), valueColor: preflightColor },
+      { label: 'gate', value: gateStatus, valueColor: gateColor(gateStatus) },
+      { label: 'lint', value: String(lintCount), valueColor: lintCount > 0 ? C.warn : C.dim },
+    ], C);
+  }
+
   private _buildContent(width: number, snapshot: PolicyPanelSnapshot): Line[] {
     const lines: Line[] = [];
     const current = snapshot.current;
@@ -123,8 +157,22 @@ export class PolicyPanel extends BasePanel {
     const simulationSummary = snapshot.lastSimulationSummary;
     const preflightReview = snapshot.lastPreflightReview;
 
-    if (!current && !candidate) {
-      lines.push(buildPanelLine(width, [[' No policy bundles loaded. Use /policy load to begin.', C.empty]]));
+    const nothingRecorded = !current && !candidate && !divergence
+      && snapshot.history.length === 0 && permissionAudit.length === 0
+      && lintFindings.length === 0 && !simulationSummary && !preflightReview;
+    if (nothingRecorded) {
+      lines.push(...buildEmptyState(
+        width,
+        ' No policy bundles loaded.',
+        'Load a policy bundle to inspect governance gates, divergence trends, permission audit, lint findings, and preflight posture.',
+        [
+          { command: '/policy load', summary: 'load a policy bundle to begin governance review' },
+          { command: '/policy preflight', summary: 'run a proactive preflight posture review' },
+          { command: '/policy simulate', summary: 'compare authoritative vs candidate decisions' },
+        ],
+        C,
+      ));
+      return lines;
     }
 
     if (current) {
@@ -220,7 +268,7 @@ export class PolicyPanel extends BasePanel {
         ]));
         lines.push(buildPanelLine(width, [
           ['    ', C.label],
-          [entry.summary.slice(0, Math.max(0, width - 6)), C.dim],
+          [truncateDisplay(entry.summary, Math.max(0, width - 6)), C.dim],
         ]));
       }
     }
@@ -233,17 +281,12 @@ export class PolicyPanel extends BasePanel {
           ['  ', C.label],
           [finding.severity.toUpperCase(), color],
           ['  ', C.label],
-          [finding.message.slice(0, Math.max(0, width - 14)), color],
+          [truncateDisplay(finding.message, Math.max(0, width - 14)), color],
         ]));
       }
     }
 
-    if (!preflightReview) {
-      if (!current && !candidate && !divergence && snapshot.history.length === 0 && permissionAudit.length === 0 && lintFindings.length === 0 && !simulationSummary) {
-        lines.push(buildPanelLine(width, [[' Preflight Review', C.label]]));
-        lines.push(buildPanelLine(width, [['  No proactive preflight review recorded yet.', C.empty]]));
-      }
-    } else {
+    if (preflightReview) {
       lines.push(buildPanelLine(width, [[' Preflight Review', C.label]]));
       const statusColor =
         preflightReview.status === 'pass'
@@ -261,7 +304,7 @@ export class PolicyPanel extends BasePanel {
       ]));
       lines.push(buildPanelLine(width, [
         ['  ', C.label],
-        [preflightReview.summary.slice(0, Math.max(0, width - 2)), C.dim],
+        [truncateDisplay(preflightReview.summary, Math.max(0, width - 2)), C.dim],
       ]));
       for (const issue of preflightReview.issues.slice(0, 4)) {
         const issueColor = issue.severity === 'error' ? C.error : issue.severity === 'warn' ? C.warn : C.info;
@@ -269,17 +312,12 @@ export class PolicyPanel extends BasePanel {
           ['  ', C.label],
           [issue.severity.toUpperCase(), issueColor],
           ['  ', C.label],
-          [issue.message.slice(0, Math.max(0, width - 14)), issueColor],
+          [truncateDisplay(issue.message, Math.max(0, width - 14)), issueColor],
         ]));
       }
     }
 
-    if (!simulationSummary) {
-      if (!current && !candidate && !divergence && snapshot.history.length === 0 && permissionAudit.length === 0 && lintFindings.length === 0 && !preflightReview) {
-        lines.push(buildPanelLine(width, [[' Simulation Samples', C.label]]));
-        lines.push(buildPanelLine(width, [['  No concrete simulation samples recorded yet.', C.empty]]));
-      }
-    } else {
+    if (simulationSummary) {
       lines.push(buildPanelLine(width, [[' Simulation Samples', C.label]]));
       lines.push(buildPanelLine(width, [
         ['  Mode: ', C.label],
@@ -293,7 +331,7 @@ export class PolicyPanel extends BasePanel {
         const color = result.diverged ? C.warn : (result.authoritativeDecision.allowed ? C.ok : C.error);
         lines.push(buildPanelLine(width, [
           ['  ', C.label],
-          [result.scenario.label.slice(0, Math.max(0, width - 40)), C.value],
+          [truncateDisplay(result.scenario.label, Math.max(0, width - 40)), C.value],
           ['  ', C.label],
           [(result.authoritativeDecision.allowed ? 'allow' : 'deny').toUpperCase(), color],
           ['  ', C.label],
@@ -302,7 +340,6 @@ export class PolicyPanel extends BasePanel {
       }
     }
 
-    lines.push(buildPanelLine(width, [['  /policy opens this panel. Press r to record a divergence trend snapshot.', C.dim]]));
     return lines;
   }
 }

package/src/panels/polish-core.ts

@@ -0,0 +1,157 @@
+import type { Line } from '../types/grid.ts';
+import { createEmptyLine, createStyledCell } from '../types/grid.ts';
+import { getDisplayWidth } from '../utils/terminal-width.ts';
+import { UI_TONES } from '../renderer/ui-primitives.ts';
+
+// ---------------------------------------------------------------------------
+// Panel palette + core line primitives.
+//
+// The leaf foundation of the panel formatting toolkit: both `polish.ts` and
+// `polish-tables.ts` build on these. Kept dependency-free (only grid /
+// terminal-width / ui-primitives) so it never participates in an import cycle.
+// All symbols are re-exported from `polish.ts` — panels import from there.
+// ---------------------------------------------------------------------------
+
+export interface PanelPalette {
+  readonly label: string;
+  readonly value: string;
+  readonly dim: string;
+  readonly info: string;
+  readonly good?: string;
+  readonly warn?: string;
+  readonly bad?: string;
+  readonly empty: string;
+  readonly header?: string;
+  readonly headerBg?: string;
+  readonly surfaceBg?: string;
+  readonly sectionBg?: string;
+  readonly summaryBg?: string;
+  readonly inputBg?: string;
+  readonly accent?: string;
+  readonly selectBg?: string;
+}
+
+export const DEFAULT_PANEL_PALETTE: Readonly<Required<PanelPalette>> = {
+  header: UI_TONES.fg.primary,
+  headerBg: UI_TONES.bg.title,
+  label: UI_TONES.fg.muted,
+  value: UI_TONES.fg.primary,
+  dim: UI_TONES.fg.dim,
+  info: UI_TONES.state.info,
+  good: UI_TONES.state.good,
+  warn: UI_TONES.state.warn,
+  bad: UI_TONES.state.bad,
+  empty: '#334155',
+  surfaceBg: UI_TONES.bg.surface,
+  sectionBg: UI_TONES.bg.section,
+  summaryBg: UI_TONES.bg.summary,
+  inputBg: UI_TONES.bg.input,
+  accent: UI_TONES.fg.secondary,
+  selectBg: UI_TONES.bg.selected,
+} as const;
+
+/**
+ * Extend the base panel palette with domain-specific colors.
+ *
+ * Convention: raw hex colors may only live inside a palette constant declared
+ * at the top of a panel file, not inline in render calls.
+ *
+ * @example
+ * ```ts
+ * const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+ *   decision: '#38bdf8',
+ *   incident: '#ef4444',
+ * });
+ * ```
+ */
+export function extendPalette<T extends Record<string, string>>(
+  base: typeof DEFAULT_PANEL_PALETTE,
+  extras: T,
+): typeof DEFAULT_PANEL_PALETTE & T {
+  return { ...base, ...extras };
+}
+
+export function buildPanelLine(
+  width: number,
+  segments: Array<StyledPanelSegment | [string, string, string?]>,
+): Line {
+  return buildStyledPanelLine(
+    width,
+    segments.map((seg) =>
+      Array.isArray(seg) ? { text: seg[0], fg: seg[1], bg: seg[2] } : seg,
+    ),
+  );
+}
+
+export interface StyledPanelSegment {
+  readonly text: string;
+  readonly fg: string;
+  readonly bg?: string;
+  readonly bold?: boolean;
+  readonly dim?: boolean;
+}
+
+export function buildSelectablePanelLine(
+  width: number,
+  segments: ReadonlyArray<StyledPanelSegment>,
+  options: { selected?: boolean; selectedBg?: string; fillFg?: string; fillBg?: string; leadingMarker?: string } = {},
+): Line {
+  const selected = options.selected ?? false;
+  const selectedBg = selected ? (options.selectedBg ?? DEFAULT_PANEL_PALETTE.selectBg) : '';
+  const fillBg = selectedBg || options.fillBg || '';
+  const fillFg = options.fillFg ?? '';
+  const cells = createEmptyLine(width);
+  if (fillBg) {
+    for (let col = 0; col < width; col++) {
+      cells[col] = createStyledCell(' ', { bg: fillBg, fg: fillFg });
+    }
+  }
+
+  let col = 0;
+  if (selected && options.leadingMarker) {
+    for (const ch of options.leadingMarker) {
+      const charWidth = getDisplayWidth(ch);
+      if (charWidth <= 0 || col + charWidth > width) break;
+      cells[col] = createStyledCell(ch, { fg: DEFAULT_PANEL_PALETTE.info, bg: selectedBg, bold: true });
+      if (charWidth > 1 && col + 1 < width) cells[col + 1] = createStyledCell(' ', { fg: DEFAULT_PANEL_PALETTE.info, bg: selectedBg, bold: true });
+      col += charWidth;
+    }
+  }
+  for (const segment of segments) {
+    const fg = segment.fg;
+    const bg = segment.bg ?? fillBg;
+    for (const ch of segment.text) {
+      const charWidth = getDisplayWidth(ch);
+      if (charWidth <= 0) continue;
+      if (col + charWidth > width) return cells;
+      cells[col] = createStyledCell(ch, {
+        fg,
+        bg,
+        bold: segment.bold ?? false,
+        dim: segment.dim ?? false,
+      });
+      if (charWidth > 1 && col + 1 < width) {
+        cells[col + 1] = createStyledCell(' ', {
+          fg,
+          bg,
+          bold: segment.bold ?? false,
+          dim: segment.dim ?? false,
+        });
+      }
+      col += charWidth;
+    }
+  }
+
+  while (col < width) {
+    cells[col++] = createStyledCell(' ', { bg: fillBg, fg: fillFg });
+  }
+  return cells;
+}
+
+export function buildStyledPanelLine(
+  width: number,
+  segments: ReadonlyArray<StyledPanelSegment>,
+  options: { fillBg?: string; fillFg?: string } = {},
+): Line {
+  return buildSelectablePanelLine(width, segments, options);
+}

package/src/panels/polish-tables.ts

@@ -0,0 +1,258 @@
+import type { Line } from '../types/grid.ts';
+import { getDisplayWidth, truncateDisplay } from '../utils/terminal-width.ts';
+import { GLYPHS, UI_TONES } from '../renderer/ui-primitives.ts';
+// Build on the leaf primitives in ./polish-core.ts (palette + base line
+// builders). polish-core has no back-edge to this file, so there is no cycle.
+import { buildSelectablePanelLine, DEFAULT_PANEL_PALETTE } from './polish-core.ts';
+import type { PanelPalette, StyledPanelSegment } from './polish-core.ts';
+
+// ---------------------------------------------------------------------------
+// Shared formatting primitives (the toolkit panels standardize on).
+//
+// All are display-width aware (via getDisplayWidth / truncateDisplay) so they
+// stay aligned across emoji, CJK, and other wide characters — never hand-roll
+// .slice()/.padEnd() truncation or alignment in panels.
+// ---------------------------------------------------------------------------
+
+export type ColumnAlign = 'left' | 'right' | 'center';
+
+export interface ColumnSpec {
+  /** Fixed display width of the column. */
+  readonly width: number;
+  /** Horizontal alignment within the column. Default 'left'. */
+  readonly align?: ColumnAlign;
+}
+
+export interface AlignedCell {
+  readonly text: string;
+  readonly fg: string;
+  readonly bg?: string;
+  readonly bold?: boolean;
+  readonly dim?: boolean;
+}
+
+/** Truncate + pad `text` to exactly `width` display columns with alignment. */
+function alignText(text: string, width: number, align: ColumnAlign): string {
+  if (width <= 0) return '';
+  const truncated = truncateDisplay(text, width);
+  const pad = Math.max(0, width - getDisplayWidth(truncated));
+  if (pad === 0) return truncated;
+  if (align === 'right') return ' '.repeat(pad) + truncated;
+  if (align === 'center') {
+    const left = Math.floor(pad / 2);
+    return ' '.repeat(left) + truncated + ' '.repeat(pad - left);
+  }
+  return truncated + ' '.repeat(pad);
+}
+
+/**
+ * Build a multi-column row with display-width-aware alignment. Replaces manual
+ * `.padEnd()`/`.padStart()` column math (which misaligns on wide chars).
+ *
+ * `cells` and `columns` are zip-aligned by index; extra cells are ignored.
+ */
+export function buildAlignedRow(
+  width: number,
+  cells: ReadonlyArray<AlignedCell>,
+  columns: ReadonlyArray<ColumnSpec>,
+  options: {
+    readonly gap?: number;
+    readonly selected?: boolean;
+    readonly selectedBg?: string;
+    readonly marker?: string;
+    readonly fillBg?: string;
+  } = {},
+): Line {
+  const gap = options.gap ?? 1;
+  const segments: StyledPanelSegment[] = [];
+  const count = Math.min(cells.length, columns.length);
+  for (let i = 0; i < count; i++) {
+    const col = columns[i]!;
+    const cell = cells[i]!;
+    if (i > 0 && gap > 0) segments.push({ text: ' '.repeat(gap), fg: cell.fg, bg: cell.bg });
+    segments.push({
+      text: alignText(cell.text, col.width, col.align ?? 'left'),
+      fg: cell.fg,
+      bg: cell.bg,
+      bold: cell.bold,
+      dim: cell.dim,
+    });
+  }
+  return buildSelectablePanelLine(width, segments, {
+    selected: options.selected,
+    selectedBg: options.selectedBg,
+    fillBg: options.fillBg,
+    leadingMarker: options.marker,
+  });
+}
+
+export type StatusBadgeKind =
+  | 'pending'
+  | 'running'
+  | 'completed'
+  | 'failed'
+  | 'cancelled'
+  | 'blocked'
+  | 'review';
+
+interface BadgeSpec {
+  readonly glyph: string;
+  readonly fg: string;
+  readonly label: string;
+}
+
+const STATUS_BADGES: Record<StatusBadgeKind, BadgeSpec> = {
+  pending:   { glyph: GLYPHS.status.pending, fg: DEFAULT_PANEL_PALETTE.info, label: 'Pending' },
+  running:   { glyph: GLYPHS.status.active,  fg: UI_TONES.state.active,      label: 'Running' },
+  completed: { glyph: GLYPHS.status.success, fg: DEFAULT_PANEL_PALETTE.good, label: 'Completed' },
+  failed:    { glyph: GLYPHS.status.failure, fg: DEFAULT_PANEL_PALETTE.bad,  label: 'Failed' },
+  cancelled: { glyph: GLYPHS.status.skipped, fg: DEFAULT_PANEL_PALETTE.dim,  label: 'Cancelled' },
+  blocked:   { glyph: GLYPHS.status.blocked, fg: UI_TONES.state.blocked,     label: 'Blocked' },
+  review:    { glyph: GLYPHS.status.review,  fg: DEFAULT_PANEL_PALETTE.info, label: 'Review' },
+};
+
+/**
+ * Canonical status badge (glyph + label) with a consistent color per lifecycle
+ * state. Returns StyledPanelSegment[] — spread into a buildPanelLine call:
+ *   buildPanelLine(width, [['  ', C.label], ...buildStatusBadge('running')])
+ * Supersedes ad-hoc per-panel status→color maps.
+ */
+export function buildStatusBadge(
+  kind: StatusBadgeKind,
+  label?: string,
+  opts?: { glyph?: string; bg?: string; count?: number },
+): StyledPanelSegment[] {
+  const spec = STATUS_BADGES[kind];
+  const glyph = opts?.glyph ?? spec.glyph;
+  const text = label ?? spec.label;
+  const rendered = opts?.count !== undefined ? `${glyph} ${text} (${opts.count})` : `${glyph} ${text}`;
+  return [{ text: rendered, fg: spec.fg, bg: opts?.bg }];
+}
+
+export interface TreeItemSpec {
+  readonly depth: number;
+  readonly label: string;
+  readonly icon?: string;
+  readonly expandable?: boolean;
+  readonly expanded?: boolean;
+  readonly labelColor?: string;
+  /** Right-aligned metadata columns (e.g. size, mtime). */
+  readonly metadata?: ReadonlyArray<{ text: string; fg: string }>;
+}
+
+/**
+ * Build a hierarchical tree row: indentation + expand/collapse glyph + optional
+ * icon + label, with right-aligned metadata. Replaces hand-rolled indentation
+ * in file-explorer / symbol-outline / orchestration panels.
+ */
+export function buildTreeRow(
+  width: number,
+  item: TreeItemSpec,
+  palette: PanelPalette,
+  options: { selected?: boolean; selectedBg?: string; indentWidth?: number } = {},
+): Line {
+  const indent = ' '.repeat(Math.max(0, item.depth) * (options.indentWidth ?? 2));
+  const toggle = item.expandable
+    ? (item.expanded ? GLYPHS.navigation.expanded : GLYPHS.navigation.collapsed)
+    : ' ';
+  const iconPart = item.icon ? `${item.icon} ` : '';
+  const prefix = `${indent}${toggle} ${iconPart}`;
+  const prefixW = getDisplayWidth(prefix);
+
+  const metadata = item.metadata ?? [];
+  const metaText = metadata.map((m) => m.text).join(' ');
+  const metaW = getDisplayWidth(metaText);
+  const reserve = metaW > 0 ? metaW + 1 : 0;
+
+  const labelBudget = Math.max(0, width - prefixW - reserve);
+  const label = truncateDisplay(item.label, labelBudget);
+  const usedW = prefixW + getDisplayWidth(label);
+
+  const segments: StyledPanelSegment[] = [
+    { text: prefix, fg: palette.dim },
+    { text: label, fg: item.labelColor ?? palette.value },
+  ];
+  if (metaW > 0) {
+    const spacer = Math.max(1, width - usedW - metaW);
+    segments.push({ text: ' '.repeat(spacer), fg: palette.dim });
+    metadata.forEach((m, i) => {
+      if (i > 0) segments.push({ text: ' ', fg: palette.dim });
+      segments.push({ text: m.text, fg: m.fg });
+    });
+  }
+  return buildSelectablePanelLine(width, segments, {
+    selected: options.selected,
+    selectedBg: options.selectedBg ?? palette.selectBg,
+  });
+}
+
+export interface TableColumn {
+  readonly label: string;
+  /** Fixed width; omit to auto-distribute remaining space. */
+  readonly width?: number;
+  readonly align?: ColumnAlign;
+}
+
+export interface TableCell {
+  readonly text: string;
+  readonly fg?: string;
+  readonly bg?: string;
+  readonly bold?: boolean;
+}
+
+export interface TableRow {
+  readonly cells: ReadonlyArray<TableCell>;
+  readonly selected?: boolean;
+}
+
+/** Resolve concrete per-column widths, auto-distributing any unsized columns. */
+function resolveColumnWidths(width: number, columns: ReadonlyArray<TableColumn>, gap: number): number[] {
+  const totalGap = gap * Math.max(0, columns.length - 1);
+  const explicit = columns.reduce((s, c) => s + (c.width ?? 0), 0);
+  const autoIdx = columns.map((c, i) => (c.width === undefined ? i : -1)).filter((i) => i >= 0);
+  const autoBudget = Math.max(0, width - totalGap - explicit);
+  const each = autoIdx.length > 0 ? Math.floor(autoBudget / autoIdx.length) : 0;
+  const widths = columns.map((c) => c.width ?? each);
+  if (autoIdx.length > 0) {
+    const used = each * autoIdx.length;
+    widths[autoIdx[autoIdx.length - 1]!] += autoBudget - used; // remainder to last auto col
+  }
+  return widths;
+}
+
+/**
+ * Build a table: a header row plus aligned data rows. Replaces ad-hoc
+ * row/column offset math in history/ledger/roster panels.
+ */
+export function buildTable(
+  width: number,
+  columns: ReadonlyArray<TableColumn>,
+  rows: ReadonlyArray<TableRow>,
+  palette: PanelPalette,
+  options: { gap?: number; selectedBg?: string } = {},
+): Line[] {
+  const gap = options.gap ?? 1;
+  const widths = resolveColumnWidths(width, columns, gap);
+  const specs: ColumnSpec[] = columns.map((c, i) => ({ width: widths[i]!, align: c.align }));
+
+  const header = buildAlignedRow(
+    width,
+    columns.map((c) => ({ text: c.label, fg: palette.label, bold: true })),
+    specs,
+    { gap },
+  );
+
+  const dataRows = rows.map((row) =>
+    buildAlignedRow(
+      width,
+      columns.map((_, i) => {
+        const cell = row.cells[i] ?? { text: '', fg: palette.value };
+        return { text: cell.text, fg: cell.fg ?? palette.value, bg: cell.bg, bold: cell.bold };
+      }),
+      specs,
+      { gap, selected: row.selected, selectedBg: options.selectedBg ?? palette.selectBg },
+    ),
+  );
+
+  return [header, ...dataRows];
+}