@keyfunc/keybricks-ds 1.0.0

package/components/charts/chart-geometry.js

@@ -0,0 +1,223 @@
+// Framework-neutral chart math shared by the React and Vue chart components.
+// Everything here is pure: values in, geometry out. No DOM, no tokens.
+
+export const SERIES = ["var(--series-1)","var(--series-2)","var(--series-3)","var(--series-4)","var(--series-5)","var(--series-6)","var(--series-7)","var(--series-8)","var(--series-9)","var(--series-10)"];
+export const seriesColor = (i) => SERIES[i % SERIES.length];
+
+/** Compact number label: 1.24M · 843K · 12,400 → 12.4K · 0.82 */
+export function fmtNum(v, opts = {}) {
+  if (v == null || isNaN(v)) return "–";
+  const abs = Math.abs(v);
+  const sign = v < 0 ? "-" : "";
+  const f = (n, d) => n.toFixed(d).replace(/\.0+$|(\.\d*[1-9])0+$/, "$1");
+  if (opts.pct) return f(v, abs < 10 ? 1 : 0) + "%";
+  if (abs >= 1e9) return sign + f(abs / 1e9, 2) + "B";
+  if (abs >= 1e6) return sign + f(abs / 1e6, 2) + "M";
+  if (abs >= 1e4) return sign + f(abs / 1e3, 1) + "K";
+  if (abs >= 1000) return sign + abs.toLocaleString("en-US");
+  return sign + f(abs, abs < 1 && abs > 0 ? 2 : abs < 100 && abs % 1 ? 1 : 0);
+}
+
+/** Nice axis ticks covering [min,max]. Returns {ticks, lo, hi}. */
+export function niceTicks(min, max, count = 4) {
+  if (min === max) { max = min + (min === 0 ? 1 : Math.abs(min) * 0.1); }
+  const span = max - min;
+  const step0 = span / Math.max(1, count);
+  const mag = Math.pow(10, Math.floor(Math.log10(step0)));
+  const step = [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => span / s <= count + 0.5) || 10 * mag;
+  const lo = Math.floor(min / step) * step;
+  const hi = Math.ceil(max / step) * step;
+  const ticks = [];
+  for (let t = lo; t <= hi + step / 1e6; t += step) ticks.push(Math.abs(t) < step / 1e6 ? 0 : +t.toPrecision(12));
+  return { ticks, lo, hi };
+}
+
+export const scaleLin = (lo, hi, r0, r1) => (v) => r0 + ((v - lo) / (hi - lo || 1)) * (r1 - r0);
+
+/** Extent over arrays of numbers (ignores null). */
+export function extent(arrs, zero = true) {
+  let min = Infinity, max = -Infinity;
+  arrs.forEach((a) => a.forEach((v) => { if (v == null) return; if (v < min) min = v; if (v > max) max = v; }));
+  if (min === Infinity) { min = 0; max = 1; }
+  if (zero) { min = Math.min(0, min); max = Math.max(0, max); }
+  return [min, max];
+}
+
+export const linePath = (pts) => pts.length ? "M" + pts.map((p) => p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" L") : "";
+export const areaPath = (pts, y0) => pts.length ? linePath(pts) + " L" + pts[pts.length - 1][0].toFixed(1) + " " + y0.toFixed(1) + " L" + pts[0][0].toFixed(1) + " " + y0.toFixed(1) + " Z" : "";
+
+/** Stack rows of series values → per-series [y0,y1] bands (positive stacking). */
+export function stack(seriesValues) {
+  const n = seriesValues[0] ? seriesValues[0].length : 0;
+  const acc = new Array(n).fill(0);
+  return seriesValues.map((vals) => vals.map((v, i) => { const y0 = acc[i]; acc[i] += v || 0; return [y0, acc[i]]; }));
+}
+
+/** Polar arc path (annular sector) for donut/gauge. Angles in degrees, 0 = 12 o'clock, clockwise. */
+export function arcPath(cx, cy, rOuter, rInner, a0, a1) {
+  const rad = (a) => ((a - 90) * Math.PI) / 180;
+  const p = (r, a) => [cx + r * Math.cos(rad(a)), cy + r * Math.sin(rad(a))];
+  const large = a1 - a0 > 180 ? 1 : 0;
+  const [x0, y0] = p(rOuter, a0), [x1, y1] = p(rOuter, a1), [x2, y2] = p(rInner, a1), [x3, y3] = p(rInner, a0);
+  return `M${x0.toFixed(2)} ${y0.toFixed(2)} A${rOuter} ${rOuter} 0 ${large} 1 ${x1.toFixed(2)} ${y1.toFixed(2)} L${x2.toFixed(2)} ${y2.toFixed(2)} A${rInner} ${rInner} 0 ${large} 0 ${x3.toFixed(2)} ${y3.toFixed(2)} Z`;
+}
+
+/** Waterfall: steps [{label,value,total}] → bars [{label,y0,y1,kind}] with running sum. kind: pos|neg|total */
+export function waterfall(steps) {
+  let run = 0;
+  return steps.map((s) => {
+    if (s.total) { const b = { label: s.label, y0: 0, y1: run, kind: "total", value: run }; return b; }
+    const y0 = run; run += s.value;
+    return { label: s.label, y0: Math.min(y0, run), y1: Math.max(y0, run), kind: s.value >= 0 ? "pos" : "neg", value: s.value, from: y0, to: run };
+  });
+}
+
+/** Squarified treemap. items [{value,...}] → [{x,y,w,h,item}] in a w×h box. */
+export function treemap(items, w, h) {
+  const total = items.reduce((s, it) => s + it.value, 0) || 1;
+  const scaled = items.map((it) => ({ it, a: (it.value / total) * w * h })).sort((a, b) => b.a - a.a);
+  const out = [];
+  let x = 0, y = 0, rw = w, rh = h, row = [];
+  const worst = (row, side) => {
+    const s = row.reduce((t, r) => t + r.a, 0);
+    let mx = 0;
+    row.forEach((r) => { const ratio = Math.max((side * side * r.a) / (s * s), (s * s) / (side * side * r.a)); if (ratio > mx) mx = ratio; });
+    return mx;
+  };
+  const layoutRow = (row) => {
+    const s = row.reduce((t, r) => t + r.a, 0);
+    const horiz = rw >= rh;
+    const side = horiz ? rh : rw;
+    const thick = s / side;
+    let off = 0;
+    row.forEach((r) => {
+      const len = r.a / thick;
+      out.push(horiz ? { x, y: y + off, w: thick, h: len, item: r.it } : { x: x + off, y, w: len, h: thick, item: r.it });
+      off += len;
+    });
+    if (horiz) { x += thick; rw -= thick; } else { y += thick; rh -= thick; }
+  };
+  scaled.forEach((r) => {
+    const side = rw >= rh ? rh : rw;
+    if (row.length && worst([...row, r], side) > worst(row, side)) { layoutRow(row); row = [r]; } else row.push(r);
+  });
+  if (row.length) layoutRow(row);
+  return out;
+}
+
+/** 5-step sequential heat color index for v within [lo,hi]. */
+export function heatStep(v, lo, hi) {
+  const t = (v - lo) / (hi - lo || 1);
+  return Math.max(0, Math.min(4, Math.floor(t * 5 - 1e-9)));
+}
+
+/** Monotone cubic path through points — smooth without overshooting real values. */
+export function curvePath(pts) {
+  const n = pts.length;
+  if (n < 3) return linePath(pts);
+  const xs = pts.map((p) => p[0]), ys = pts.map((p) => p[1]);
+  const dx = [], dy = [], m = [];
+  for (let i = 0; i < n - 1; i++) { dx.push(xs[i + 1] - xs[i]); dy.push(ys[i + 1] - ys[i]); m.push(dy[i] / (dx[i] || 1)); }
+  const t = [m[0]];
+  for (let i = 1; i < n - 1; i++) t.push(m[i - 1] * m[i] <= 0 ? 0 : (m[i - 1] + m[i]) / 2);
+  t.push(m[n - 2]);
+  let d = "M" + xs[0].toFixed(1) + " " + ys[0].toFixed(1);
+  for (let i = 0; i < n - 1; i++) {
+    const c = dx[i] / 3;
+    d += " C" + (xs[i] + c).toFixed(1) + " " + (ys[i] + t[i] * c).toFixed(1) + "," + (xs[i + 1] - c).toFixed(1) + " " + (ys[i + 1] - t[i + 1] * c).toFixed(1) + "," + xs[i + 1].toFixed(1) + " " + ys[i + 1].toFixed(1);
+  }
+  return d;
+}
+/** Step path (stairs) — for values that hold until the next reading. */
+export function stepPath(pts) {
+  if (!pts.length) return "";
+  let d = "M" + pts[0][0].toFixed(1) + " " + pts[0][1].toFixed(1);
+  for (let i = 1; i < pts.length; i++) { const mx = (pts[i - 1][0] + pts[i][0]) / 2; d += " L" + mx.toFixed(1) + " " + pts[i - 1][1].toFixed(1) + " L" + mx.toFixed(1) + " " + pts[i][1].toFixed(1) + " L" + pts[i][0].toFixed(1) + " " + pts[i][1].toFixed(1); }
+  return d;
+}
+/** linear | smooth | step in one call. */
+export const shapePath = (pts, curve) => (curve === "smooth" ? curvePath(pts) : curve === "step" ? stepPath(pts) : linePath(pts));
+export const closeToBaseline = (d, pts, y0) => (d ? d + " L" + pts[pts.length - 1][0].toFixed(1) + " " + y0.toFixed(1) + " L" + pts[0][0].toFixed(1) + " " + y0.toFixed(1) + " Z" : "");
+
+/** Sankey layout. nodes:[{id,label}], links:[{source,target,value}] — depth by longest path. */
+export function sankey(nodes, links, w, h, nodeW, pad) {
+  nodeW = nodeW || 14; pad = pad == null ? 14 : pad;
+  const byId = {};
+  nodes.forEach((n) => { byId[n.id] = Object.assign({}, n, { in: [], out: [], depth: 0, value: 0 }); });
+  links.forEach((l) => { byId[l.source].out.push(l); byId[l.target].in.push(l); });
+  let changed = true, guard = 0;
+  while (changed && guard++ < 60) {
+    changed = false;
+    links.forEach((l) => { const d = byId[l.source].depth + 1; if (d > byId[l.target].depth) { byId[l.target].depth = d; changed = true; } });
+  }
+  const list = Object.keys(byId).map((k) => byId[k]);
+  list.forEach((n) => { n.value = Math.max(n.in.reduce((s, l) => s + l.value, 0), n.out.reduce((s, l) => s + l.value, 0)); });
+  const maxDepth = Math.max.apply(null, list.map((n) => n.depth));
+  /* Sinks hug the right edge so the diagram reads left-to-right even with uneven path lengths. */
+  list.forEach((n) => { if (!n.out.length) n.depth = maxDepth; });
+  const cols = [];
+  list.forEach((n) => { (cols[n.depth] = cols[n.depth] || []).push(n); });
+  const colX = maxDepth ? (w - nodeW) / maxDepth : 0;
+  const scale = Math.min.apply(null, cols.map((c) => (h - pad * (c.length - 1)) / (c.reduce((s, n) => s + n.value, 0) || 1)));
+  cols.forEach((col, ci) => {
+    let y = 0;
+    col.forEach((n) => { n.x = ci * colX; n.w = nodeW; n.y = y; n.h = Math.max(2, n.value * scale); y += n.h + pad; });
+    const extra = (h - (y - pad)) / 2;
+    col.forEach((n) => { n.y += extra; });
+  });
+  const outAt = {}, inAt = {};
+  const ribbons = links.map((l) => {
+    const s = byId[l.source], t = byId[l.target];
+    const so = (outAt[l.source] = outAt[l.source] || 0), ti = (inAt[l.target] = inAt[l.target] || 0);
+    const th = Math.max(1, l.value * scale);
+    outAt[l.source] += th; inAt[l.target] += th;
+    const x0 = s.x + s.w, x1 = t.x, cx = (x1 - x0) / 2;
+    const y0 = s.y + so, y1 = t.y + ti;
+    const d = "M" + x0 + " " + y0 + " C" + (x0 + cx) + " " + y0 + ", " + (x1 - cx) + " " + y1 + ", " + x1 + " " + y1
+      + " L" + x1 + " " + (y1 + th) + " C" + (x1 - cx) + " " + (y1 + th) + ", " + (x0 + cx) + " " + (y0 + th) + ", " + x0 + " " + (y0 + th) + " Z";
+    return { link: l, thickness: th, d: d, source: s, target: t };
+  });
+  return { nodes: list, ribbons: ribbons, maxDepth: maxDepth };
+}
+
+/** Chord (circular sankey) layout from a square matrix of flows. */
+export function chord(matrix, gapDeg) {
+  gapDeg = gapDeg == null ? 2 : gapDeg;
+  const n = matrix.length;
+  const totals = matrix.map((row, i) => row.reduce((s, v) => s + v, 0) + matrix.reduce((s, r2, j) => s + (j === i ? 0 : r2[i]), 0));
+  const grand = totals.reduce((s, v) => s + v, 0) || 1;
+  const span = 360 - gapDeg * n;
+  const arcs = []; let a = 0;
+  totals.forEach((v, i) => { const sweep = (v / grand) * span; arcs.push({ i: i, a0: a, a1: a + sweep, value: v }); a += sweep + gapDeg; });
+  const cursor = arcs.map((x) => x.a0);
+  const ribbons = [];
+  for (let i = 0; i < n; i++) for (let j = 0; j < n; j++) {
+    const v = matrix[i][j];
+    if (!v || i === j) continue;
+    const sweep = (v / grand) * span;
+    const a0 = cursor[i], a1 = a0 + sweep; cursor[i] = a1;
+    const b0 = cursor[j], b1 = b0 + sweep; cursor[j] = b1;
+    ribbons.push({ i: i, j: j, value: v, a0: a0, a1: a1, b0: b0, b1: b1 });
+  }
+  return { arcs: arcs, ribbons: ribbons, totals: totals, grand: grand };
+}
+export const polar = (cx, cy, r, deg) => [cx + r * Math.cos(((deg - 90) * Math.PI) / 180), cy + r * Math.sin(((deg - 90) * Math.PI) / 180)];
+/** Ribbon between two arc spans, bowed through the circle centre. */
+export function chordRibbon(cx, cy, r, a0, a1, b0, b1) {
+  const p = (deg) => polar(cx, cy, r, deg);
+  const s0 = p(a0), s1 = p(a1), t0 = p(b0), t1 = p(b1);
+  const big = (x, y) => (Math.abs(y - x) > 180 ? 1 : 0);
+  return "M" + s0[0].toFixed(1) + " " + s0[1].toFixed(1)
+    + " A" + r + " " + r + " 0 " + big(a0, a1) + " 1 " + s1[0].toFixed(1) + " " + s1[1].toFixed(1)
+    + " Q" + cx + " " + cy + " " + t0[0].toFixed(1) + " " + t0[1].toFixed(1)
+    + " A" + r + " " + r + " 0 " + big(b0, b1) + " 1 " + t1[0].toFixed(1) + " " + t1[1].toFixed(1)
+    + " Q" + cx + " " + cy + " " + s0[0].toFixed(1) + " " + s0[1].toFixed(1) + " Z";
+}
+/** Quantile buckets for choropleth shading — returns a 0..steps-1 index fn. */
+export function quantize(values, steps) {
+  const sorted = values.filter((v) => v != null).slice().sort((a, b) => a - b);
+  if (!sorted.length) return () => 0;
+  const cuts = [];
+  for (let i = 1; i < steps; i++) cuts.push(sorted[Math.floor((i / steps) * sorted.length)]);
+  return (v) => { if (v == null) return -1; let k = 0; while (k < cuts.length && v >= cuts[k]) k++; return k; };
+}

package/components/charts/charts.prompt.md

@@ -0,0 +1,24 @@
+Charting module — 12 chart types on one geometry core (`chart-geometry.js`), React + Vue 3.
+Types: `Sparkline`, `LineChart` (area/stacked/`curve`), `BarChart` (grouped/stacked/diverging + `overlay` combo line on a right axis), `BarList`, `DonutChart` (pie opt), `ScatterChart` (bubble), `HeatmapChart` (sequential/diverging), `WaterfallChart`, `BulletChart`, `GaugeChart`, `FunnelChart`, `TreemapChart`, `RadarChart`, `Histogram`, `BoxPlot`, `ParetoChart`, `CandlestickChart`, `SankeyChart`, `ChordChart` (circular sankey), `SunburstChart`, `WorldMap`, `GanttChart`. Shared furniture in `ChartKit.jsx` (`ChartLegend`, `ChartTooltip`).
+
+Picking one: trend over time → Line (`curve="smooth"` for a soft trend, `"step"` for hold-until-next readings); composition → Donut ≤6 slices, Treemap 15+, Sunburst when depth matters; ranking → BarList or Pareto (when "which few cause most" is the question); distribution → Histogram for one population, BoxPlot for many; correlation → Scatter; flow → Sankey (directional) or Chord (cyclical, many-to-many); price → Candlestick; schedule → Gantt; geography → WorldMap (needs the pinned d3 + topojson tags on the page); profile comparison → Radar. 3D (`Surface3D`, `Scatter3D`, `Bar3D`, `Pie3D`, `Ribbon3D`) is presentation-tier only — default to the 2D equivalent for analysis; orbitable via drag (Pie3D spins in place), SVG-rendered, React + Vue 3.
+
+Size tiers, one component each:
+- **sm (tile)** — `Sparkline`, or any chart with `axes={false} legend={false} interactive={false}` at ~200×64. Lives inside a stat card next to the number.
+- **md (interactive)** — defaults: hover tooltip + guideline, legend click mutes a series. ~560–650px wide inside a content card.
+- **lg (full page)** — one chart owns the screen: KPI rail on top, the chart at ~880×430+, breakdown panels (`BarList`, `DonutChart`) at the side. See the Full-Page Analytics card.
+
+Rules:
+- Colors: series walk `--series-1…10` in order; signed values are ALWAYS `--chart-pos`/`--chart-neg` (diverging bars, waterfall, deltas, auto sparklines); totals/overlay lines are `--chart-total`; guides are `--chart-guide` dashed. Never hard-code a hex.
+- Lines are straight — no spline smoothing. The only gradient in the system stays the area fill (`--chart-area-alpha`).
+- Numbers are `--font-mono`, compact-formatted via `fmtNum` (1.24M · 843K · 12%).
+- Every chart answers a hover, at every size — a tile-tier chart drops its axes and legend, never its tooltip.
+- Stacked areas fill to the baseline so their gradients overlap; stacked bars round only the topmost segment so the joins stay flush.
+- Geography is data, never a drawing: `WorldMap` projects Natural Earth geometry with d3-geo.
+- Donuts cap at ~6 segments; beyond that use BarList or Treemap. Bullets beat a wall of gauges for 3+ KPIs.
+
+```jsx
+<LineChart series={[{name:"Actual",values:[...]},{name:"Plan",values:[...]}]} xLabels={months} target={1250}/>
+<BarChart mode="diverging" categories={entities} series={[{name:"Δ vs plan",values:[120,-80,45]}]}/>
+<WaterfallChart steps={[{label:"Revenue",value:6100},{label:"COGS",value:-2400},{label:"Net",total:true}]}/>
+```

package/components/data/CodeBlock.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/** Monospace code/JSON block with copy button. Addition — upgrades the plain LogViewer for single-block SQL/JSON display. */
+export interface CodeBlockProps {
+  code?: string;
+  language?: string;
+  height?: number | string;
+  style?: React.CSSProperties;
+}
+export declare function CodeBlock(props: CodeBlockProps): JSX.Element;

package/components/data/CodeBlock.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+/** Monospace code/JSON block with a language label and copy-to-clipboard button (SQL Preview, export JSON). */
+export function CodeBlock({ code = "", language, height, style }) {
+  const [copied, setCopied] = React.useState(false);
+  const copy = () => { try { navigator.clipboard && navigator.clipboard.writeText(code); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 1400); };
+  return (
+    <div style={{ background: "var(--bg-inset)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", ...style }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "7px 10px", borderBottom: "1px solid var(--border-subtle)" }}>
+        <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>{language || "code"}</span>
+        <button type="button" onClick={copy} style={{ display: "flex", alignItems: "center", gap: 4, border: "none", background: "transparent", cursor: "pointer", color: copied ? "var(--success-strong)" : "var(--text-secondary)", fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", padding: 0 }}>
+          <Icon name={copied ? "check" : "copy"} size={12} />{copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+      <pre style={{ margin: 0, padding: "10px 12px", overflow: "auto", height, fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", color: "var(--text-body)" }}>{code}</pre>
+    </div>
+  );
+}

package/components/data/CodeBlock.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { ref } from 'vue'
+import Icon from '../icons/Icon.vue'
+// Monospace code/JSON block with a language label and copy-to-clipboard button (SQL Preview, export JSON).
+const props = defineProps({ code: { type: String, default: '' }, language: String, height: [Number, String], style: Object })
+const copied = ref(false)
+function copy() {
+  try { navigator.clipboard && navigator.clipboard.writeText(props.code) } catch (e) {}
+  copied.value = true; setTimeout(() => copied.value = false, 1400)
+}
+</script>
+<template>
+  <div :style="{ background: 'var(--bg-inset)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', ...style }">
+    <div style="display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-bottom:1px solid var(--border-subtle)">
+      <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)">{{ language || 'code' }}</span>
+      <button type="button" @click="copy" :style="{ display: 'flex', alignItems: 'center', gap: 4, border: 'none', background: 'transparent', cursor: 'pointer', color: copied ? 'var(--success-strong)' : 'var(--text-secondary)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-xs)', padding: 0 }">
+        <Icon :name="copied ? 'check' : 'copy'" :size="12" />{{ copied ? 'Copied' : 'Copy' }}
+      </button>
+    </div>
+    <pre :style="{ margin: 0, padding: '10px 12px', overflow: 'auto', height, fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', color: 'var(--text-body)' }">{{ code }}</pre>
+  </div>
+</template>

package/components/data/DataTable.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+/**
+ * Hairline data table — #fafafa header, #f5f5f5 row separators.
+ * @startingPoint section="Data" subtitle="Comparison / preview tables with mono cells" viewport="700x300"
+ */
+export interface DataTableColumn {
+  key: string;
+  label: string;
+  width?: number | string;
+  /** Menlo 11px cell (config codes, values) */
+  mono?: boolean;
+  align?: "left" | "right" | "center";
+  render?: (value: any, row: any, index: number) => React.ReactNode;
+}
+export interface DataTableProps {
+  columns?: DataTableColumn[];
+  rows?: Record<string, any>[];
+  /** 29px rows + lowercase 11px headers (data-preview drawer) */
+  dense?: boolean;
+  /** Leading checkbox column */
+  selectable?: boolean;
+  selected?: number[];
+  /** onToggle("all"|rowIndex, checked) */
+  onToggle?: (which: number | "all", checked: boolean) => void;
+  headerBorder?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function DataTable(props: DataTableProps): JSX.Element;

package/components/data/DataTable.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Checkbox } from "../forms/Checkbox.jsx";
+
+/** Keybricks data table. columns: [{key,label,width,mono,render}]. dense = 29px preview-drawer rows; default = 51.5px config rows. */
+export function DataTable({ columns = [], rows = [], dense, selectable, selected = [], onToggle, headerBorder = true, style }) {
+  const rowH = dense ? 29.5 : 51.5;
+  const cellFont = (c) => c.mono
+    ? { fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-heading)" }
+    : { fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-primary)" };
+  return (
+    <table style={{ width: "100%", borderCollapse: "collapse", ...style }}>
+      <thead>
+        <tr style={{ background: "var(--bg-inset)", borderTop: headerBorder && !dense ? "1px solid var(--border-control)" : "none", borderBottom: headerBorder ? "1px solid var(--border-control)" : "none", height: dense ? 29 : 48.5 }}>
+          {selectable ? <th style={{ width: 40, padding: "0 0 0 16px", textAlign: "left" }}><Checkbox size="sm" checked={rows.length > 0 && selected.length === rows.length} onChange={(v) => onToggle && onToggle("all", v)} /></th> : null}
+          {columns.map((c) => (
+            <th key={c.key} style={{ textAlign: c.align || "left", padding: "0 12px", width: c.width, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-xs)", lineHeight: "var(--leading-xs)", letterSpacing: dense ? "var(--tracking-xs)" : ".3px", textTransform: dense ? "none" : "uppercase", color: "var(--text-secondary)", whiteSpace: "nowrap" }}>{c.label}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((r, ri) => (
+          <tr key={ri} style={{ height: rowH, borderBottom: "1px solid var(--border-subtle)" }}>
+            {selectable ? <td style={{ padding: "0 0 0 16px" }}><Checkbox size="sm" checked={selected.includes(ri)} onChange={(v) => onToggle && onToggle(ri, v)} /></td> : null}
+            {columns.map((c) => (
+              <td key={c.key} style={{ padding: "0 12px", textAlign: c.align || "left", whiteSpace: "nowrap", ...cellFont(c) }}>{c.render ? c.render(r[c.key], r, ri) : r[c.key]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/components/data/DataTable.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+import Checkbox from '../forms/Checkbox.vue'
+// Keybricks data table. columns: [{key,label,width,mono,render}]. dense = 29px preview-drawer rows; default = 51.5px config rows.
+const props = defineProps({ columns: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, dense: Boolean, selectable: Boolean, selected: { type: Array, default: () => [] }, headerBorder: { type: Boolean, default: true }, style: Object })
+const emit = defineEmits(['toggle'])
+const rowH = computed(() => props.dense ? 29.5 : 51.5)
+function cellFont(c) { return c.mono ? { fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-xs)', color: 'var(--text-heading)' } : { fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: 'var(--text-primary)' } }
+</script>
+<template>
+  <table :style="{ width: '100%', borderCollapse: 'collapse', ...style }">
+    <thead>
+      <tr :style="{ background: 'var(--bg-inset)', borderTop: (headerBorder && !dense) ? '1px solid var(--border-control)' : 'none', borderBottom: headerBorder ? '1px solid var(--border-control)' : 'none', height: dense ? 29 : 48.5 }">
+        <th v-if="selectable" style="width:40px;padding:0 0 0 16px;text-align:left"><Checkbox size="sm" :checked="rows.length > 0 && selected.length === rows.length" @change="v => emit('toggle', 'all', v)" /></th>
+        <th v-for="c in columns" :key="c.key" :style="{ textAlign: c.align || 'left', padding: '0 12px', width: c.width, fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-xs)', lineHeight: 'var(--leading-xs)', letterSpacing: dense ? 'var(--tracking-xs)' : '.3px', textTransform: dense ? 'none' : 'uppercase', color: 'var(--text-secondary)', whiteSpace: 'nowrap' }">{{ c.label }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(r, ri) in rows" :key="ri" :style="{ height: rowH, borderBottom: '1px solid var(--border-subtle)' }">
+        <td v-if="selectable" style="padding:0 0 0 16px"><Checkbox size="sm" :checked="selected.includes(ri)" @change="v => emit('toggle', ri, v)" /></td>
+        <td v-for="c in columns" :key="c.key" :style="{ padding: '0 12px', textAlign: c.align || 'left', whiteSpace: 'nowrap', ...cellFont(c) }">{{ c.render ? c.render(r[c.key], r, ri) : r[c.key] }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>

package/components/data/DiffValue.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+/** Before→after change value, e.g. "USD → EUR". Addition — formalizes the comparison/confirmation-step pattern. */
+export interface DiffValueProps {
+  /** Omit to show only the new value with an arrow (new field) */
+  from?: React.ReactNode;
+  to: React.ReactNode;
+  tone?: "neutral" | "warning" | "success" | "danger";
+  mono?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function DiffValue(props: DiffValueProps): JSX.Element;

package/components/data/DiffValue.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+const toneColor = { neutral: "var(--text-heading)", warning: "var(--warning-text)", success: "var(--success-text)", danger: "var(--danger-text)" };
+
+/** Before → after value change ("USD → EUR"). tone colors the new value; from renders muted + struck through when both sides are given. */
+export function DiffValue({ from, to, tone = "warning", mono = true, style }) {
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)", fontSize: "var(--text-sm)", ...style }}>
+      {from != null ? <span style={{ color: "var(--text-muted)", textDecoration: "line-through" }}>{from}</span> : null}
+      <Icon name="arrow-right" size={12} style={{ color: "var(--text-muted)" }} />
+      <span style={{ color: toneColor[tone], fontWeight: "var(--weight-medium)" }}>{to}</span>
+    </span>
+  );
+}

package/components/data/DiffValue.vue

@@ -0,0 +1,13 @@
+<script setup>
+import Icon from '../icons/Icon.vue'
+const toneColor = { neutral: 'var(--text-heading)', warning: 'var(--warning-text)', success: 'var(--success-text)', danger: 'var(--danger-text)' }
+// Before → after value change ("USD → EUR"). tone colors the new value; from renders muted + struck through when both sides are given.
+defineProps({ from: [String, Number], to: [String, Number], tone: { type: String, default: 'warning' }, mono: { type: Boolean, default: true }, style: Object })
+</script>
+<template>
+  <span :style="{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)', fontSize: 'var(--text-sm)', ...style }">
+    <span v-if="from != null" style="color:var(--text-muted);text-decoration:line-through">{{ from }}</span>
+    <Icon name="arrow-right" :size="12" style="color:var(--text-muted)" />
+    <span :style="{ color: toneColor[tone], fontWeight: 'var(--weight-medium)' }">{{ to }}</span>
+  </span>
+</template>

package/components/data/FilterBar.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+/** SAP Fiori-style list-report filter bar: variant title + expand/collapse, wrapping labeled filter fields (children), Adapt Filters (n) + Go actions. Compose with Field + Select/Input/DatePicker/MultiSelect children. */
+export interface FilterBarProps {
+  /** Variant name shown top-left (e.g. "Standard") */
+  variant?: string;
+  /** Show the modified asterisk after the variant name */
+  modified?: boolean;
+  /** Count shown in "Adapt Filters (n)" */
+  adaptCount?: number;
+  defaultExpanded?: boolean;
+  onGo?: () => void;
+  onAdapt?: () => void;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}

package/components/data/FilterBar.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+import { Button } from "../buttons/Button.jsx";
+
+/** SAP Fiori-style list-report filter bar: variant title row with expand/collapse, a wrapping row of labeled filter fields (pass Field-wrapped controls as children), and Adapt Filters (n) + Go actions. */
+export function FilterBar({ variant = "Standard", modified, adaptCount, defaultExpanded = true, onGo, onAdapt, children, style }) {
+  const [open, setOpen] = React.useState(defaultExpanded);
+  return (
+    <div style={{ background: "var(--bg-surface)", border: "1px solid var(--border-card)", borderRadius: "var(--radius-lg)", padding: "10px 16px 0", boxSizing: "border-box", ...style }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 6, paddingBottom: 10 }}>
+        <button type="button" onClick={() => setOpen(!open)} style={{ display: "flex", alignItems: "center", gap: 6, border: "none", background: "transparent", cursor: "pointer", padding: 0, color: "var(--text-heading)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", letterSpacing: "var(--tracking-base)" }}>
+          {variant}{modified && <span style={{ color: "var(--text-muted)", fontWeight: "var(--weight-regular)" }}>*</span>}
+          <span style={{ color: "var(--text-muted)", display: "inline-flex", transform: open ? "rotate(180deg)" : "none", transition: "transform var(--dur-fast) var(--ease-out)" }}><Icon name="chevron-down" size={14} /></span>
+        </button>
+        <span style={{ flex: 1 }}></span>
+        <Button variant="text" size="sm" onClick={onAdapt}>Adapt Filters{adaptCount ? ` (${adaptCount})` : ""}</Button>
+        <Button size="sm" onClick={onGo}>Go</Button>
+      </div>
+      {open && <div style={{ display: "flex", flexWrap: "wrap", gap: "12px 16px", paddingBottom: 14, borderTop: "1px solid var(--border-subtle)", paddingTop: 12 }}>{children}</div>}
+    </div>
+  );
+}

package/components/data/FilterBar.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { ref } from 'vue'
+import Icon from '../icons/Icon.vue'
+import Button from '../buttons/Button.vue'
+// SAP Fiori-style list-report filter bar: variant title + expand/collapse, wrapping labeled filter fields (slot), Adapt Filters (n) + Go.
+const props = defineProps({ variant: { type: String, default: 'Standard' }, modified: Boolean, adaptCount: Number, defaultExpanded: { type: Boolean, default: true }, style: Object })
+const emit = defineEmits(['go', 'adapt'])
+const open = ref(props.defaultExpanded)
+</script>
+<template>
+  <div :style="{ background: 'var(--bg-surface)', border: '1px solid var(--border-card)', borderRadius: 'var(--radius-lg)', padding: '10px 16px 0', boxSizing: 'border-box', ...style }">
+    <div style="display:flex;align-items:center;gap:6px;padding-bottom:10px">
+      <button type="button" @click="open = !open" style="display:flex;align-items:center;gap:6px;border:none;background:transparent;cursor:pointer;padding:0;color:var(--text-heading);font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base)">
+        {{ variant }}<span v-if="modified" style="color:var(--text-muted);font-weight:var(--weight-regular)">*</span>
+        <span :style="{ color: 'var(--text-muted)', display: 'inline-flex', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast) var(--ease-out)' }"><Icon name="chevron-down" :size="14" /></span>
+      </button>
+      <span style="flex:1" />
+      <Button variant="text" size="sm" @click="emit('adapt')">Adapt Filters{{ adaptCount ? ` (${adaptCount})` : '' }}</Button>
+      <Button size="sm" @click="emit('go')">Go</Button>
+    </div>
+    <div v-if="open" style="display:flex;flex-wrap:wrap;gap:12px 16px;padding-bottom:14px;border-top:1px solid var(--border-subtle);padding-top:12px"><slot /></div>
+  </div>
+</template>

package/components/data/KeyValue.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+/** Label/value summary row. Addition — formalizes the ad-hoc rows used in config and confirmation steps. */
+export interface KeyValueProps {
+  label: string;
+  value?: React.ReactNode;
+  /** Render value in Menlo (config codes) */
+  mono?: boolean;
+  style?: React.CSSProperties;
+}
+export declare function KeyValue(props: KeyValueProps): JSX.Element;
+/** Stack of KeyValue rows separated by hairlines. */
+export interface KeyValueListProps {
+  rows?: KeyValueProps[];
+  style?: React.CSSProperties;
+}
+export declare function KeyValueList(props: KeyValueListProps): JSX.Element;

package/components/data/KeyValue.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+/** Label/value row (config summaries, confirmation steps). mono renders the value in Menlo. */
+export function KeyValue({ label, value, mono, style }) {
+  return (
+    <div style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "7px 0", ...style }}>
+      <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{label}</span>
+      <span style={{ fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)", fontSize: mono ? "var(--text-xs)" : "var(--text-sm)", letterSpacing: mono ? "var(--tracking-xs)" : 0, color: "var(--text-heading)", textAlign: "right" }}>{value}</span>
+    </div>
+  );
+}
+
+/** Stack of KeyValue rows with hairline separators. rows: [{label,value,mono}]. */
+export function KeyValueList({ rows = [], style }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", ...style }}>
+      {rows.map((r, i) => (
+        <React.Fragment key={r.label}>
+          <KeyValue {...r} />
+          {i < rows.length - 1 ? <div style={{ height: 1, background: "var(--border-subtle)" }} /> : null}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}

package/components/data/KeyValue.vue

@@ -0,0 +1,26 @@
+<script setup>
+// Label/value row (config summaries, confirmation steps). mono renders the value in Menlo.
+defineProps({ label: String, value: [String, Number], mono: Boolean, style: Object })
+</script>
+<template>
+  <div :style="{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '7px 0', ...style }">
+    <span style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ label }}</span>
+    <span :style="{ fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)', fontSize: mono ? 'var(--text-xs)' : 'var(--text-sm)', letterSpacing: mono ? 'var(--tracking-xs)' : 0, color: 'var(--text-heading)', textAlign: 'right' }">{{ value }}</span>
+  </div>
+</template>
+
+<!-- KeyValueList — stack of KeyValue rows with hairline separators. rows: [{label,value,mono}]. -->
+<!--
+<script setup name="KeyValueList">
+import KeyValue from './KeyValue.vue'
+defineProps({ rows: { type: Array, default: () => [] }, style: Object })
+</script>
+<template>
+  <div :style="{ display: 'flex', flexDirection: 'column', ...style }">
+    <template v-for="(r, i) in rows" :key="r.label">
+      <KeyValue v-bind="r" />
+      <div v-if="i < rows.length - 1" style="height:1px;background:var(--border-subtle)" />
+    </template>
+  </div>
+</template>
+-->

package/components/data/ListRow.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+/** Expandable list row (Workflow groups): chevron, 32px hairline icon tile, 13px/500 title, 12px meta, right count. */
+export interface ListRowProps {
+  icon?: string;
+  title?: string;
+  meta?: string;
+  /** Right-aligned text ("1 item") */
+  trailing?: React.ReactNode;
+  expanded?: boolean;
+  onClick?: () => void;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+export declare function ListRow(props: ListRowProps): JSX.Element;

package/components/data/ListRow.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+import { IconTile } from "../display/Badge.jsx";
+
+/** Expandable workflow list row: chevron + bordered 32px icon tile + title/meta + right count. */
+export function ListRow({ icon = "file-text", title, meta, trailing, expanded, onClick, children, style }) {
+  const [hover, setHover] = React.useState(false);
+  return (
+    <div style={{ borderBottom: "1px solid var(--border-card)", ...style }}>
+      <div onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
+        style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 16px", cursor: "pointer", background: hover ? "var(--bg-inset)" : "transparent", transition: "var(--t-hover)" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <span style={{ color: "var(--text-muted)", transform: expanded ? "rotate(90deg)" : "none", transition: "transform .15s ease", display: "inline-flex" }}><Icon name="chevron-right" size={16} /></span>
+          <IconTile icon={icon} kind="row" />
+          <div style={{ display: "flex", flexDirection: "column" }}>
+            <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-base)", lineHeight: "var(--leading-base)", letterSpacing: "var(--tracking-base)", color: "var(--text-heading)" }}>{title}</span>
+            {meta ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{meta}</span> : null}
+          </div>
+        </div>
+        {trailing ? <span style={{ fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>{trailing}</span> : null}
+      </div>
+      {expanded && children ? <div style={{ padding: "0 16px 12px 72px" }}>{children}</div> : null}
+    </div>
+  );
+}