@keyfunc/keybricks-ds 1.0.0

package/components/data/ListRow.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { ref } from 'vue'
+import Icon from '../icons/Icon.vue'
+import { IconTile } from '../display/Badge.vue'
+// Expandable workflow list row: chevron + bordered 32px icon tile + title/meta + right count.
+defineProps({ icon: { type: String, default: 'file-text' }, title: String, meta: String, trailing: [String, Number], expanded: Boolean, style: Object })
+defineEmits(['click'])
+const hover = ref(false)
+</script>
+<template>
+  <div :style="{ borderBottom: '1px solid var(--border-card)', ...style }">
+    <div @click="$emit('click')" @mouseenter="hover = true" @mouseleave="hover = 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;align-items:center;gap:12px">
+        <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;flex-direction:column">
+          <span style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-heading)">{{ title }}</span>
+          <span v-if="meta" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ meta }}</span>
+        </div>
+      </div>
+      <span v-if="trailing" style="font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ trailing }}</span>
+    </div>
+    <div v-if="expanded" style="padding:0 16px 12px 72px"><slot /></div>
+  </div>
+</template>

package/components/data/Pagination.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/** Table pagination (26px controls, r4). Addition — not in the source file. */
+export interface PaginationProps {
+  page?: number;
+  pageCount?: number;
+  /** Total rows; shows an "1–20 of 128" range label when given */
+  total?: number;
+  pageSize?: number;
+  onChange?: (page: number) => void;
+  style?: React.CSSProperties;
+}
+export declare function Pagination(props: PaginationProps): JSX.Element;

package/components/data/Pagination.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+
+/** Table pagination — 12px range label + prev/next + numbered pages. */
+export function Pagination({ page = 1, pageCount = 1, total, pageSize = 20, onChange, style }) {
+  const btn = (content, disabled, onClick, active) => (
+    <button type="button" disabled={disabled} onClick={onClick}
+      style={{ minWidth: 26, height: 26, padding: "0 6px", borderRadius: "var(--radius-sm)", border: `1px solid ${active ? "var(--action-primary)" : "var(--border-control)"}`, background: active ? "var(--action-primary)" : "var(--bg-surface)", color: active ? "var(--on-accent)" : "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", cursor: disabled ? "default" : "pointer", opacity: disabled ? .45 : 1, display: "inline-flex", alignItems: "center", justifyContent: "center", transition: "var(--t-hover)" }}>
+      {content}
+    </button>
+  );
+  const pages = [];
+  const from = Math.max(1, Math.min(page - 1, pageCount - 2));
+  for (let i = from; i < from + 3 && i <= pageCount; i++) pages.push(i);
+  return (
+    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, ...style }}>
+      <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", lineHeight: "var(--leading-sm)", color: "var(--text-secondary)" }}>
+        {total != null ? `${(page - 1) * pageSize + 1}–${Math.min(page * pageSize, total)} of ${total}` : `Page ${page} of ${pageCount}`}
+      </span>
+      <div style={{ display: "flex", gap: 4 }}>
+        {btn(<Icon name="chevron-left" size={13} />, page <= 1, () => onChange && onChange(page - 1))}
+        {pages.map((p) => <React.Fragment key={p}>{btn(p, false, () => onChange && onChange(p), p === page)}</React.Fragment>)}
+        {btn(<Icon name="chevron-right" size={13} />, page >= pageCount, () => onChange && onChange(page + 1))}
+      </div>
+    </div>
+  );
+}

package/components/data/Pagination.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import Icon from '../icons/Icon.vue'
+// Table pagination — 12px range label + prev/next + numbered pages.
+const props = defineProps({ page: { type: Number, default: 1 }, pageCount: { type: Number, default: 1 }, total: Number, pageSize: { type: Number, default: 20 }, style: Object })
+const emit = defineEmits(['change'])
+const pages = computed(() => {
+  const from = Math.max(1, Math.min(props.page - 1, props.pageCount - 2)), out = []
+  for (let i = from; i < from + 3 && i <= props.pageCount; i++) out.push(i)
+  return out
+})
+const label = computed(() => props.total != null ? `${(props.page - 1) * props.pageSize + 1}–${Math.min(props.page * props.pageSize, props.total)} of ${props.total}` : `Page ${props.page} of ${props.pageCount}`)
+function btnStyle(active, disabled) { return { minWidth: 26, height: 26, padding: '0 6px', borderRadius: 'var(--radius-sm)', border: `1px solid ${active ? 'var(--action-primary)' : 'var(--border-control)'}`, background: active ? 'var(--action-primary)' : 'var(--bg-surface)', color: active ? 'var(--on-accent)' : 'var(--text-body)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', cursor: disabled ? 'default' : 'pointer', opacity: disabled ? .45 : 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: 'var(--t-hover)' } }
+</script>
+<template>
+  <div :style="{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, ...style }">
+    <span style="font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-secondary)">{{ label }}</span>
+    <div style="display:flex;gap:4px">
+      <button type="button" :disabled="page <= 1" @click="emit('change', page - 1)" :style="btnStyle(false, page <= 1)"><Icon name="chevron-left" :size="13" /></button>
+      <button v-for="p in pages" :key="p" type="button" @click="emit('change', p)" :style="btnStyle(p === page, false)">{{ p }}</button>
+      <button type="button" :disabled="page >= pageCount" @click="emit('change', page + 1)" :style="btnStyle(false, page >= pageCount)"><Icon name="chevron-right" :size="13" /></button>
+    </div>
+  </div>
+</template>

package/components/data/SmartTable.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+export interface SmartTableField {
+  key: string;
+  label: string;
+  /** Cell type: text | longText | number | select | multiSelect | date | person | checkbox | url | progress */
+  type?: string;
+  /** Column width px (default 140) */
+  width?: number;
+  /** select/multiSelect: option label → hue (gray|blue|green|orange|amber|teal|cyan|purple|pink|red) */
+  options?: Record<string, string>;
+  /** Footer aggregate: count | sum | avg */
+  aggregate?: "count" | "sum" | "avg";
+  /** Primary field renders medium-weight */
+  primary?: boolean;
+}
+
+/** Notion/Airtable-style database grid: field-type header icons, hue pills, person/date/checkbox/url/progress cells, row hover + expand, inline editing, + New row, footer aggregates, view toolbar. */
+export interface SmartTableProps {
+  fields?: SmartTableField[];
+  rows?: Record<string, any>[];
+  /** View name in the toolbar (default "Grid view") */
+  title?: string;
+  toolbar?: boolean;
+  /** Scroll-area max height */
+  height?: number | string;
+  rowHeight?: number;
+  onChange?: (rows: object[]) => void;
+  style?: React.CSSProperties;
+}

package/components/data/SmartTable.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+import { IconButton } from "../buttons/IconButton.jsx";
+import { Checkbox } from "../forms/Checkbox.jsx";
+import { Avatar } from "../display/Avatar.jsx";
+import { SearchInput } from "../forms/SearchInput.jsx";
+
+const typeIcon = { text: "type", longText: "align-left", number: "hash", select: "chevron-down", multiSelect: "tag", date: "calendar", person: "user", checkbox: "check-square", url: "link", progress: "bar-chart-2" };
+const Pill = ({ hue = "gray", children }) => <span style={{ display: "inline-flex", alignItems: "center", height: 20, padding: "0 8px", borderRadius: "var(--radius-full)", background: `var(--hue-${hue}-bg)`, color: `var(--hue-${hue}-fg)`, fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-xs)", lineHeight: 1, whiteSpace: "nowrap" }}>{children}</span>;
+
+/** Notion/Airtable-style database grid ("smart table"): field-type icons in headers, colored select pills, person/date/checkbox/url/progress cells, row hover + expand, inline text/number editing, + New row, add-field column, per-column footer aggregates, and a view toolbar (Hide fields · Filter · Group · Sort · search). */
+export function SmartTable({ fields = [], rows = [], title = "Grid view", toolbar = true, height, rowHeight = 32, onChange, style }) {
+  const [data, setData] = React.useState(rows);
+  const [hover, setHover] = React.useState(-1);
+  const [editing, setEditing] = React.useState(null);
+  const [draft, setDraft] = React.useState("");
+  const setCell = (r, key, v) => { const next = data.map((row, i) => i === r ? { ...row, [key]: v } : row); setData(next); onChange && onChange(next); };
+  const widths = ["40px", ...fields.map(f => (f.width || 140) + "px"), "40px"];
+  const grid = { display: "grid", gridTemplateColumns: widths.join(" "), width: "fit-content", minWidth: "100%" };
+  const cellBase = { display: "flex", alignItems: "center", gap: 5, padding: "0 8px", borderRight: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", height: rowHeight, boxSizing: "border-box", overflow: "hidden", whiteSpace: "nowrap", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--text-primary)" };
+  const agg = (f) => {
+    if (!f.aggregate) return "";
+    const vals = data.map(r => r[f.key]);
+    if (f.aggregate === "count") return "COUNT " + vals.filter(v => v === true || (v !== "" && v != null && v !== false)).length;
+    const nums = vals.map(Number).filter(n => !isNaN(n));
+    if (f.aggregate === "sum") return "SUM " + nums.reduce((a, b) => a + b, 0);
+    if (f.aggregate === "avg") return "AVG " + (nums.length ? Math.round(nums.reduce((a, b) => a + b, 0) / nums.length * 10) / 10 : 0);
+    return "";
+  };
+  const renderCell = (f, row, r) => {
+    const v = row[f.key];
+    const isEdit = editing && editing.r === r && editing.key === f.key;
+    if (isEdit) return <input autoFocus value={draft} onChange={(e) => setDraft(e.target.value)} onBlur={() => { setCell(r, f.key, f.type === "number" && draft !== "" && !isNaN(Number(draft)) ? Number(draft) : draft); setEditing(null); }} onKeyDown={(e) => { if (e.key === "Enter") e.target.blur(); if (e.key === "Escape") setEditing(null); }} style={{ position: "absolute", inset: 0, border: "2px solid var(--action-primary)", borderRadius: 2, outline: "none", padding: "0 6px", font: "inherit", background: "var(--bg-surface)", color: "var(--text-primary)", boxSizing: "border-box" }} />;
+    switch (f.type) {
+      case "select": { const hue = (f.options || {})[v] || "gray"; return v ? <Pill hue={hue}>{v}</Pill> : null; }
+      case "multiSelect": return <span style={{ display: "flex", gap: 4, overflow: "hidden" }}>{(v || []).map(t => <Pill key={t} hue={(f.options || {})[t] || "gray"}>{t}</Pill>)}</span>;
+      case "person": return v ? <span style={{ display: "inline-flex", alignItems: "center", gap: 6, minWidth: 0 }}><Avatar name={v} size={20} /><span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{v}</span></span> : null;
+      case "checkbox": return <Checkbox size="sm" checked={!!v} onChange={(nv) => setCell(r, f.key, nv)} />;
+      case "url": return v ? <a href={"https://" + v} onClick={(e) => e.preventDefault()} style={{ color: "var(--link)", overflow: "hidden", textOverflow: "ellipsis" }}>{v}</a> : null;
+      case "progress": return <span style={{ display: "flex", alignItems: "center", gap: 6, width: "100%" }}><span style={{ flex: 1, height: 4, borderRadius: "var(--radius-full)", background: "var(--track)", overflow: "hidden" }}><span style={{ display: "block", width: (v || 0) + "%", height: "100%", background: "var(--chart-blue)" }}></span></span><span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--text-secondary)" }}>{v || 0}%</span></span>;
+      case "number": return <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 11.5 }}>{v}</span>;
+      default: return <span style={{ overflow: "hidden", textOverflow: "ellipsis", fontWeight: f.primary ? "var(--weight-medium)" : "var(--weight-regular)", color: f.primary ? "var(--text-heading)" : "var(--text-primary)" }}>{v}</span>;
+    }
+  };
+  const tbBtn = (icon, label) => <button key={label} type="button" style={{ display: "inline-flex", alignItems: "center", gap: 5, height: 26, padding: "0 8px", border: "none", borderRadius: "var(--radius-sm)", background: "transparent", cursor: "pointer", color: "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)" }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-hover)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}><Icon name={icon} size={13} />{label}</button>;
+  return (
+    <div style={{ border: "1px solid var(--border-control)", borderRadius: "var(--radius-lg)", background: "var(--bg-surface)", overflow: "hidden", boxSizing: "border-box", ...style }}>
+      {toolbar && <div style={{ display: "flex", alignItems: "center", gap: 4, padding: "6px 10px", borderBottom: "1px solid var(--border-subtle)" }}>
+        <button type="button" style={{ display: "inline-flex", alignItems: "center", gap: 6, height: 26, padding: "0 8px", border: "none", borderRadius: "var(--radius-sm)", background: "var(--bg-active)", cursor: "pointer", color: "var(--text-heading)", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-sm)" }}><Icon name="layout-grid" size={13} />{title}<Icon name="chevron-down" size={12} /></button>
+        <span style={{ width: 1, height: 16, background: "var(--border-control)", margin: "0 4px" }}></span>
+        {tbBtn("eye-off", "Hide fields")}{tbBtn("funnel", "Filter")}{tbBtn("layers", "Group")}{tbBtn("arrow-down", "Sort")}
+        <span style={{ flex: 1 }}></span>
+        <SearchInput bare placeholder="Search..." style={{ width: 140, gap: 6 }} />
+      </div>}
+      <div style={{ overflow: "auto", maxHeight: height }}>
+        <div style={grid}>
+          <span style={{ ...cellBase, background: "var(--bg-inset)", justifyContent: "center" }}></span>
+          {fields.map(f => <span key={f.key} style={{ ...cellBase, background: "var(--bg-inset)", color: "var(--text-secondary)", fontSize: "var(--text-xs)", fontWeight: "var(--weight-medium)", letterSpacing: "var(--tracking-xs)" }}><Icon name={typeIcon[f.type] || "type"} size={12} style={{ color: "var(--text-muted)" }} />{f.label}</span>)}
+          <span style={{ ...cellBase, background: "var(--bg-inset)", justifyContent: "center" }}><IconButton icon="plus" size="xs" muted label="Add field" /></span>
+          {data.map((row, r) => [
+            <span key={"n" + r} onMouseEnter={() => setHover(r)} onMouseLeave={() => setHover(-1)} style={{ ...cellBase, justifyContent: "center", color: "var(--text-muted)", fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", background: hover === r ? "var(--bg-inset)" : "transparent", cursor: "pointer" }}>{hover === r ? <Icon name="maximize-2" size={12} style={{ color: "var(--action-primary)" }} /> : r + 1}</span>,
+            ...fields.map(f => <span key={r + f.key} onMouseEnter={() => setHover(r)} onMouseLeave={() => setHover(-1)} onDoubleClick={() => { if (f.type === "text" || f.type === "number" || f.type === "date" || f.type === "url") { setEditing({ r, key: f.key }); setDraft(String(row[f.key] == null ? "" : row[f.key])); } }} style={{ ...cellBase, position: "relative", background: hover === r ? "var(--bg-inset)" : "transparent" }}>{renderCell(f, row, r)}</span>),
+            <span key={"a" + r} style={{ ...cellBase, background: hover === r ? "var(--bg-inset)" : "transparent" }}></span>,
+          ])}
+          <button type="button" onClick={() => { const empty = {}; fields.forEach(f => empty[f.key] = f.type === "multiSelect" ? [] : f.type === "checkbox" ? false : ""); const next = [...data, empty]; setData(next); onChange && onChange(next); }} style={{ gridColumn: "1 / -1", display: "flex", alignItems: "center", gap: 6, height: rowHeight, padding: "0 10px", border: "none", borderBottom: "1px solid var(--border-subtle)", background: "transparent", cursor: "pointer", color: "var(--text-secondary)", fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", textAlign: "left" }} onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-inset)"} onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}><Icon name="plus" size={13} />New</button>
+          <span style={{ ...cellBase, borderBottom: "none", background: "var(--bg-inset)" }}></span>
+          {fields.map(f => <span key={"g" + f.key} style={{ ...cellBase, borderBottom: "none", background: "var(--bg-inset)", justifyContent: "flex-end", fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--text-secondary)" }}>{agg(f)}</span>)}
+          <span style={{ ...cellBase, borderBottom: "none", background: "var(--bg-inset)" }}></span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/data/SmartTable.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { ref, computed } from 'vue'
+import Icon from '../icons/Icon.vue'
+import IconButton from '../buttons/IconButton.vue'
+import Checkbox from '../forms/Checkbox.vue'
+import Avatar from '../display/Avatar.vue'
+import SearchInput from '../forms/SearchInput.vue'
+// Notion/Airtable-style database grid: field-type header icons, hue pills, person/date/checkbox/url/progress cells, row hover + expand, inline editing, + New row, footer aggregates, view toolbar.
+const typeIcon = { text: 'type', longText: 'align-left', number: 'hash', select: 'chevron-down', multiSelect: 'tag', date: 'calendar', person: 'user', checkbox: 'check-square', url: 'link', progress: 'bar-chart-2' }
+const props = defineProps({ fields: { type: Array, default: () => [] }, rows: { type: Array, default: () => [] }, title: { type: String, default: 'Grid view' }, toolbar: { type: Boolean, default: true }, height: [Number, String], rowHeight: { type: Number, default: 32 }, style: Object })
+const emit = defineEmits(['change'])
+const data = ref(props.rows.map(r => ({ ...r })))
+const hover = ref(-1), editing = ref(null), draft = ref('')
+const gridCols = computed(() => ['40px', ...props.fields.map(f => (f.width || 140) + 'px'), '40px'].join(' '))
+const cellBase = { display: 'flex', alignItems: 'center', gap: '5px', padding: '0 8px', borderRight: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', boxSizing: 'border-box', overflow: 'hidden', whiteSpace: 'nowrap', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: 'var(--text-primary)' }
+function setCell(r, key, v) { data.value[r][key] = v; emit('change', data.value) }
+function commitEdit(r, f) { setCell(r, f.key, f.type === 'number' && draft.value !== '' && !isNaN(Number(draft.value)) ? Number(draft.value) : draft.value); editing.value = null }
+function startEdit(r, f, row) { if (['text', 'number', 'date', 'url'].includes(f.type || 'text')) { editing.value = { r, key: f.key }; draft.value = String(row[f.key] == null ? '' : row[f.key]) } }
+function addRow() { const empty = {}; props.fields.forEach(f => empty[f.key] = f.type === 'multiSelect' ? [] : f.type === 'checkbox' ? false : ''); data.value.push(empty); emit('change', data.value) }
+function agg(f) {
+  if (!f.aggregate) return ''
+  const vals = data.value.map(r => r[f.key])
+  if (f.aggregate === 'count') return 'COUNT ' + vals.filter(v => v === true || (v !== '' && v != null && v !== false)).length
+  const nums = vals.map(Number).filter(n => !isNaN(n))
+  if (f.aggregate === 'sum') return 'SUM ' + nums.reduce((a, b) => a + b, 0)
+  return 'AVG ' + (nums.length ? Math.round(nums.reduce((a, b) => a + b, 0) / nums.length * 10) / 10 : 0)
+}
+</script>
+<template>
+  <div :style="{ border: '1px solid var(--border-control)', borderRadius: 'var(--radius-lg)', background: 'var(--bg-surface)', overflow: 'hidden', boxSizing: 'border-box', ...style }">
+    <div v-if="toolbar" style="display:flex;align-items:center;gap:4px;padding:6px 10px;border-bottom:1px solid var(--border-subtle)">
+      <button type="button" style="display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;border:none;border-radius:var(--radius-sm);background:var(--bg-active);cursor:pointer;color:var(--text-heading);font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-sm)"><Icon name="layout-grid" :size="13" />{{ title }}<Icon name="chevron-down" :size="12" /></button>
+      <span style="width:1px;height:16px;background:var(--border-control);margin:0 4px" />
+      <button v-for="b in [['eye-off','Hide fields'],['funnel','Filter'],['layers','Group'],['arrow-down','Sort']]" :key="b[1]" type="button" class="kb-st-btn"><Icon :name="b[0]" :size="13" />{{ b[1] }}</button>
+      <span style="flex:1" />
+      <SearchInput bare placeholder="Search..." style="width:140px;gap:6px" />
+    </div>
+    <div :style="{ overflow: 'auto', maxHeight: typeof height === 'number' ? height + 'px' : height }">
+      <div :style="{ display: 'grid', gridTemplateColumns: gridCols, width: 'fit-content', minWidth: '100%' }">
+        <span :style="{ ...cellBase, height: rowHeight + 'px', background: 'var(--bg-inset)' }" />
+        <span v-for="f in fields" :key="f.key" :style="{ ...cellBase, height: rowHeight + 'px', background: 'var(--bg-inset)', color: 'var(--text-secondary)', fontSize: 'var(--text-xs)', fontWeight: 'var(--weight-medium)' }"><Icon :name="typeIcon[f.type] || 'type'" :size="12" style="color:var(--text-muted)" />{{ f.label }}</span>
+        <span :style="{ ...cellBase, height: rowHeight + 'px', background: 'var(--bg-inset)', justifyContent: 'center' }"><IconButton icon="plus" size="xs" muted label="Add field" /></span>
+        <template v-for="(row, r) in data" :key="r">
+          <span @mouseenter="hover = r" @mouseleave="hover = -1" :style="{ ...cellBase, height: rowHeight + 'px', justifyContent: 'center', color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', background: hover === r ? 'var(--bg-inset)' : 'transparent', cursor: 'pointer' }">
+            <Icon v-if="hover === r" name="maximize-2" :size="12" style="color:var(--action-primary)" /><template v-else>{{ r + 1 }}</template>
+          </span>
+          <span v-for="f in fields" :key="r + f.key" @mouseenter="hover = r" @mouseleave="hover = -1" @dblclick="startEdit(r, f, row)" :style="{ ...cellBase, height: rowHeight + 'px', position: 'relative', background: hover === r ? 'var(--bg-inset)' : 'transparent' }">
+            <input v-if="editing && editing.r === r && editing.key === f.key" autofocus :value="draft" @input="draft = $event.target.value" @blur="commitEdit(r, f)" @keydown.enter="$event.target.blur()" @keydown.esc="editing = null" style="position:absolute;inset:0;border:2px solid var(--action-primary);border-radius:2px;outline:none;padding:0 6px;font:inherit;background:var(--bg-surface);color:var(--text-primary);box-sizing:border-box" />
+            <template v-else-if="f.type === 'select'"><span v-if="row[f.key]" class="kb-pill" :style="{ background: `var(--hue-${(f.options || {})[row[f.key]] || 'gray'}-bg)`, color: `var(--hue-${(f.options || {})[row[f.key]] || 'gray'}-fg)` }">{{ row[f.key] }}</span></template>
+            <template v-else-if="f.type === 'multiSelect'"><span style="display:flex;gap:4px;overflow:hidden"><span v-for="t in row[f.key] || []" :key="t" class="kb-pill" :style="{ background: `var(--hue-${(f.options || {})[t] || 'gray'}-bg)`, color: `var(--hue-${(f.options || {})[t] || 'gray'}-fg)` }">{{ t }}</span></span></template>
+            <template v-else-if="f.type === 'person'"><span v-if="row[f.key]" style="display:inline-flex;align-items:center;gap:6px;min-width:0"><Avatar :name="row[f.key]" :size="20" /><span style="overflow:hidden;text-overflow:ellipsis">{{ row[f.key] }}</span></span></template>
+            <template v-else-if="f.type === 'checkbox'"><Checkbox size="sm" :checked="!!row[f.key]" @change="v => setCell(r, f.key, v)" /></template>
+            <template v-else-if="f.type === 'url'"><a v-if="row[f.key]" href="#" @click.prevent style="overflow:hidden;text-overflow:ellipsis">{{ row[f.key] }}</a></template>
+            <template v-else-if="f.type === 'progress'"><span style="display:flex;align-items:center;gap:6px;width:100%"><span style="flex:1;height:4px;border-radius:var(--radius-full);background:var(--track);overflow:hidden"><span :style="{ display: 'block', width: (row[f.key] || 0) + '%', height: '100%', background: 'var(--chart-blue)' }" /></span><span style="font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-secondary)">{{ row[f.key] || 0 }}%</span></span></template>
+            <template v-else-if="f.type === 'number'"><span style="margin-left:auto;font-family:var(--font-mono);font-size:11.5px">{{ row[f.key] }}</span></template>
+            <template v-else><span :style="{ overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: f.primary ? 'var(--weight-medium)' : 'var(--weight-regular)', color: f.primary ? 'var(--text-heading)' : 'var(--text-primary)' }">{{ row[f.key] }}</span></template>
+          </span>
+          <span :style="{ ...cellBase, height: rowHeight + 'px', background: hover === r ? 'var(--bg-inset)' : 'transparent' }" />
+        </template>
+        <button type="button" @click="addRow" class="kb-st-new" :style="{ gridColumn: '1 / -1', height: rowHeight + 'px' }"><Icon name="plus" :size="13" />New</button>
+        <span :style="{ ...cellBase, height: rowHeight + 'px', borderBottom: 'none', background: 'var(--bg-inset)' }" />
+        <span v-for="f in fields" :key="'g' + f.key" :style="{ ...cellBase, height: rowHeight + 'px', borderBottom: 'none', background: 'var(--bg-inset)', justifyContent: 'flex-end', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', color: 'var(--text-secondary)' }">{{ agg(f) }}</span>
+        <span :style="{ ...cellBase, height: rowHeight + 'px', borderBottom: 'none', background: 'var(--bg-inset)' }" />
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.kb-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-full);font-family:var(--font-sans);font-weight:var(--weight-medium);font-size:var(--text-xs);line-height:1;white-space:nowrap}
+.kb-st-btn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border:none;border-radius:var(--radius-sm);background:transparent;cursor:pointer;color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-sm)}
+.kb-st-btn:hover{background:var(--bg-hover)}
+.kb-st-new{display:flex;align-items:center;gap:6px;padding:0 10px;border:none;border-bottom:1px solid var(--border-subtle);background:transparent;cursor:pointer;color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-sm);text-align:left}
+.kb-st-new:hover{background:var(--bg-inset)}
+</style>

package/components/data/Spreadsheet.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+export type SpreadsheetCell = string | number | {
+  /** Literal value */
+  v?: string | number;
+  /** Formula string, e.g. "=SUM(B2:E2)" — supports SUM/AVERAGE/COUNT/MIN/MAX over a range plus + - * / with cell refs */
+  f?: string;
+  /** Display format */
+  t?: "number" | "currency" | "percent";
+  /** Bold / italic / underline */
+  b?: boolean; i?: boolean; u?: boolean;
+  align?: "flex-start" | "center" | "flex-end";
+};
+
+/** Excel-style spreadsheet: toolbar (undo/redo, B/I/U, format), formula bar with name box + fx, frozen lettered/numbered headers, click + shift-click range selection, double-click cell editing, live formula evaluation, sheet tabs, Sum/Avg/Count status bar. */
+export interface SpreadsheetProps {
+  /** 2D cell array (row-major). Primitives or cell objects. */
+  data?: SpreadsheetCell[][];
+  /** Minimum grid size (padded with empty cells) */
+  rows?: number; cols?: number;
+  /** Per-column pixel widths; default 92 */
+  colWidths?: number[]; defaultColWidth?: number;
+  /** Currency symbol for t:"currency" cells */
+  currency?: string;
+  /** Initially selected cell ref, e.g. "F4" */
+  defaultActive?: string;
+  sheets?: string[]; activeSheet?: string;
+  toolbar?: boolean; formulaBar?: boolean; statusBar?: boolean;
+  /** Scroll-area max height */
+  height?: number | string;
+  onChange?: (cells: object[][]) => void;
+  style?: React.CSSProperties;
+}

package/components/data/Spreadsheet.jsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { Icon } from "../icons/Icon.jsx";
+import { IconButton } from "../buttons/IconButton.jsx";
+import { Select } from "../forms/Select.jsx";
+
+export const colName = (i) => { let s = ""; i++; while (i > 0) { s = String.fromCharCode(64 + ((i - 1) % 26 + 1)) + s; i = Math.floor((i - 1) / 26); } return s; };
+const norm = (cell) => cell == null ? { v: "" } : (typeof cell === "object" ? { ...cell } : { v: cell });
+const refRC = (ref) => { const m = /^([A-Z]+)(\d+)$/.exec(String(ref).trim().toUpperCase()); if (!m) return null; let c = 0; for (const ch of m[1]) c = c * 26 + (ch.charCodeAt(0) - 64); return { r: +m[2] - 1, c: c - 1 }; };
+
+function evalCell(cells, cell, depth = 0) {
+  if (!cell || depth > 12) return "";
+  const raw = cell.f != null ? cell.f : cell.v;
+  if (typeof raw === "string" && raw.startsWith("=")) return evalFormula(cells, raw, depth);
+  return raw;
+}
+function numAt(cells, r, c, depth) { const v = evalCell(cells, cells[r] && cells[r][c], depth + 1); const n = typeof v === "number" ? v : parseFloat(String(v).replace(/[^0-9.eE+-]/g, "")); return isNaN(n) ? null : n; }
+function evalFormula(cells, f, depth = 0) {
+  try {
+    let expr = f.slice(1).toUpperCase().replace(/\s+/g, "");
+    expr = expr.replace(/(SUM|AVERAGE|AVG|COUNT|MIN|MAX)\(([A-Z]+\d+):([A-Z]+\d+)\)/g, (m, fn, a, b) => {
+      const A = refRC(a), B = refRC(b), vals = [];
+      for (let r = Math.min(A.r, B.r); r <= Math.max(A.r, B.r); r++) for (let c = Math.min(A.c, B.c); c <= Math.max(A.c, B.c); c++) { const n = numAt(cells, r, c, depth); if (n != null) vals.push(n); }
+      if (fn === "COUNT") return String(vals.length);
+      if (!vals.length) return "0";
+      if (fn === "SUM") return String(vals.reduce((x, y) => x + y, 0));
+      if (fn === "MIN") return String(Math.min(...vals));
+      if (fn === "MAX") return String(Math.max(...vals));
+      return String(vals.reduce((x, y) => x + y, 0) / vals.length);
+    });
+    expr = expr.replace(/[A-Z]+\d+/g, (ref) => { const p = refRC(ref); const n = p ? numAt(cells, p.r, p.c, depth) : null; return String(n == null ? 0 : n); });
+    if (!/^[-+*/().\d\seE]*$/.test(expr)) return "#ERROR";
+    const out = Function('"use strict";return (' + expr + ")")();
+    return typeof out === "number" && isFinite(out) ? out : "#ERROR";
+  } catch (e) { return "#ERROR"; }
+}
+function fmt(val, t, currency) {
+  if (val === "" || val == null) return "";
+  if (typeof val !== "number") return String(val);
+  const r2 = Math.round(val * 100) / 100;
+  if (t === "percent") return (Math.round(val * 1000) / 10) + "%";
+  if (t === "currency") return currency + r2.toLocaleString();
+  return r2.toLocaleString();
+}
+
+/** Excel-style spreadsheet: toolbar, formula bar (name box + fx), lettered/numbered frozen headers, click + shift-click range selection, double-click editing, =SUM()/AVERAGE()-style formulas, sheet tabs and a Sum/Avg/Count status bar. */
+export function Spreadsheet({ data = [], rows, cols, colWidths = [], defaultColWidth = 92, currency = "$", defaultActive = "A1", sheets = ["Sheet1"], activeSheet, toolbar = true, formulaBar = true, statusBar = true, height, onChange, style }) {
+  const nR = Math.max(rows || 0, data.length, 8), nC = Math.max(cols || 0, ...data.map(r => r.length), 6);
+  const [cells, setCells] = React.useState(() => Array.from({ length: nR }, (_, r) => Array.from({ length: nC }, (_, c) => norm(data[r] && data[r][c]))));
+  const a0 = refRC(defaultActive) || { r: 0, c: 0 };
+  const [active, setActive] = React.useState(a0);
+  const [anchor, setAnchor] = React.useState(a0);
+  const [editing, setEditing] = React.useState(null);
+  const [draft, setDraft] = React.useState("");
+  const [sheet, setSheet] = React.useState(activeSheet || sheets[0]);
+  const cur = cells[active.r][active.c];
+  const rawOf = (cell) => cell.f != null ? cell.f : (cell.v == null ? "" : String(cell.v));
+  const commit = (r, c, text) => { const next = cells.map(row => row.map(cell => ({ ...cell }))); const cell = next[r][c]; delete cell.f; if (String(text).startsWith("=")) { cell.f = text; cell.v = ""; } else { const n = text !== "" && !isNaN(Number(text)) ? Number(text) : text; cell.v = n; } setCells(next); onChange && onChange(next); };
+  const lo = { r: Math.min(active.r, anchor.r), c: Math.min(active.c, anchor.c) }, hi = { r: Math.max(active.r, anchor.r), c: Math.max(active.c, anchor.c) };
+  const multi = lo.r !== hi.r || lo.c !== hi.c;
+  const inRange = (r, c) => r >= lo.r && r <= hi.r && c >= lo.c && c <= hi.c;
+  const stats = React.useMemo(() => { if (!multi) return null; const vals = []; for (let r = lo.r; r <= hi.r; r++) for (let c = lo.c; c <= hi.c; c++) { const v = evalCell(cells, cells[r][c]); const n = typeof v === "number" ? v : NaN; if (!isNaN(n)) vals.push(n); } if (!vals.length) return null; const sum = vals.reduce((x, y) => x + y, 0); return { sum: Math.round(sum * 100) / 100, avg: Math.round(sum / vals.length * 100) / 100, count: vals.length }; }, [cells, active, anchor]);
+  const pick = (r, c, e) => { setActive({ r, c }); if (!(e && e.shiftKey)) setAnchor({ r, c }); setEditing(null); };
+  const setFlag = (k) => { const next = cells.map(row => row.map(cell => ({ ...cell }))); for (let r = lo.r; r <= hi.r; r++) for (let c = lo.c; c <= hi.c; c++) next[r][c][k] = !cur[k]; setCells(next); };
+  const setType = (label) => { const t = { Automatic: undefined, Number: "number", Currency: "currency", Percent: "percent" }[label]; const next = cells.map(row => row.map(cell => ({ ...cell }))); for (let r = lo.r; r <= hi.r; r++) for (let c = lo.c; c <= hi.c; c++) { if (t) next[r][c].t = t; else delete next[r][c].t; } setCells(next); };
+  const widths = [46]; for (let c = 0; c < nC; c++) widths.push(colWidths[c] || defaultColWidth);
+  const hdr = { position: "sticky", top: 0, zIndex: 3, background: "var(--bg-inset)", borderRight: "1px solid var(--border-control)", borderBottom: "1px solid var(--border-control)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-sans)", fontWeight: "var(--weight-medium)", fontSize: "var(--text-xs)", letterSpacing: "var(--tracking-xs)", color: "var(--text-secondary)", height: 26, boxSizing: "border-box", userSelect: "none" };
+  const tbBtn = (label, k, st) => <button key={label} type="button" onClick={() => setFlag(k)} style={{ width: 24, height: 24, border: "none", borderRadius: "var(--radius-sm)", cursor: "pointer", background: cur[k] ? "var(--bg-active)" : "transparent", color: "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: 12.5, ...st }}>{label}</button>;
+  return (
+    <div style={{ border: "1px solid var(--border-control)", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "var(--bg-surface)", boxSizing: "border-box", ...style }}>
+      {toolbar && <div style={{ height: 36, display: "flex", alignItems: "center", gap: 2, padding: "0 8px", borderBottom: "1px solid var(--border-subtle)" }}>
+        <IconButton icon="undo-2" size="sm" muted label="Undo" /><IconButton icon="redo-2" size="sm" muted label="Redo" />
+        <span style={{ width: 1, height: 16, background: "var(--border-control)", margin: "0 6px" }}></span>
+        {tbBtn("B", "b", { fontWeight: 700 })}{tbBtn("I", "i", { fontStyle: "italic" })}{tbBtn("U", "u", { textDecoration: "underline" })}
+        <span style={{ width: 1, height: 16, background: "var(--border-control)", margin: "0 6px" }}></span>
+        <Select size="sm" options={["Automatic", "Number", "Currency", "Percent"]} value={{ number: "Number", currency: "Currency", percent: "Percent" }[cur.t] || "Automatic"} onChange={setType} style={{ width: 110 }} />
+      </div>}
+      {formulaBar && <div style={{ height: 32, display: "flex", alignItems: "center", borderBottom: "1px solid var(--border-control)" }}>
+        <span style={{ width: 72, alignSelf: "stretch", display: "flex", alignItems: "center", justifyContent: "center", borderRight: "1px solid var(--border-control)", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-heading)" }}>{multi ? colName(lo.c) + (lo.r + 1) + ":" + colName(hi.c) + (hi.r + 1) : colName(active.c) + (active.r + 1)}</span>
+        <span style={{ padding: "0 10px", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", fontStyle: "italic", color: "var(--text-muted)", borderRight: "1px solid var(--border-subtle)", alignSelf: "stretch", display: "flex", alignItems: "center" }}>fx</span>
+        <input value={editing === "fx" ? draft : rawOf(cur)} onFocus={() => { setEditing("fx"); setDraft(rawOf(cur)); }} onChange={(e) => setDraft(e.target.value)} onBlur={() => { if (editing === "fx") { commit(active.r, active.c, draft); setEditing(null); } }} onKeyDown={(e) => { if (e.key === "Enter") e.target.blur(); if (e.key === "Escape") { setEditing(null); e.target.blur(); } }} style={{ flex: 1, border: "none", outline: "none", background: "transparent", padding: "0 10px", fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-primary)" }} />
+      </div>}
+      <div style={{ overflow: "auto", maxHeight: height }}>
+        <div style={{ display: "grid", gridTemplateColumns: widths.map(w => w + "px").join(" "), width: "fit-content" }}>
+          <span style={{ ...hdr, zIndex: 5, left: 0 }}><span style={{ width: 0, height: 0, borderStyle: "solid", borderWidth: "0 0 10px 10px", borderColor: "transparent transparent var(--border-control) transparent", alignSelf: "flex-end", marginLeft: "auto", marginRight: 3, marginBottom: 3 }}></span></span>
+          {Array.from({ length: nC }, (_, c) => <span key={c} style={{ ...hdr, ...(c >= lo.c && c <= hi.c ? { background: "var(--soft-bg)", color: "var(--action-primary)" } : null) }}>{colName(c)}</span>)}
+          {cells.map((row, r) => [
+            <span key={"h" + r} style={{ ...hdr, position: "sticky", left: 0, top: "auto", zIndex: 2, height: 28, ...(r >= lo.r && r <= hi.r ? { background: "var(--soft-bg)", color: "var(--action-primary)" } : null) }}>{r + 1}</span>,
+            ...row.map((cell, c) => {
+              const v = evalCell(cells, cell);
+              const isNum = typeof v === "number";
+              const isActive = active.r === r && active.c === c;
+              const isEdit = editing && editing !== "fx" && editing.r === r && editing.c === c;
+              return <span key={r + "," + c} onMouseDown={(e) => pick(r, c, e)} onDoubleClick={() => { setEditing({ r, c }); setDraft(rawOf(cell)); }}
+                style={{ position: "relative", height: 28, boxSizing: "border-box", borderRight: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: cell.align || (isNum ? "flex-end" : "flex-start"), padding: "0 8px", cursor: "cell", background: isActive ? "var(--bg-surface)" : inRange(r, c) ? "var(--soft-bg)" : "var(--bg-surface)", boxShadow: isActive ? "inset 0 0 0 2px var(--action-primary)" : "none", zIndex: isActive ? 1 : 0, fontFamily: isNum ? "var(--font-mono)" : "var(--font-sans)", fontSize: isNum ? 11.5 : "var(--text-sm)", color: v === "#ERROR" ? "var(--danger)" : "var(--text-primary)", fontWeight: cell.b ? 600 : "var(--weight-regular)", fontStyle: cell.i ? "italic" : "normal", textDecoration: cell.u ? "underline" : "none", whiteSpace: "nowrap", overflow: "hidden", userSelect: "none" }}>
+                {isEdit ? <input autoFocus value={draft} onChange={(e) => setDraft(e.target.value)} onBlur={() => { commit(r, c, draft); setEditing(null); }} onKeyDown={(e) => { if (e.key === "Enter") e.target.blur(); if (e.key === "Escape") setEditing(null); }} style={{ position: "absolute", inset: 0, border: "none", outline: "none", padding: "0 8px", fontFamily: "inherit", fontSize: "inherit", background: "var(--bg-surface)", color: "var(--text-primary)" }} /> : fmt(v, cell.t, currency)}
+                {isActive && !isEdit && <span style={{ position: "absolute", right: -3, bottom: -3, width: 6, height: 6, background: "var(--action-primary)", border: "1px solid var(--bg-surface)", cursor: "crosshair", zIndex: 2 }}></span>}
+              </span>;
+            })])}
+        </div>
+      </div>
+      {statusBar && <div style={{ height: 32, display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "1px solid var(--border-control)", background: "var(--bg-inset)", paddingRight: 12 }}>
+        <div style={{ display: "flex", alignSelf: "stretch", alignItems: "stretch" }}>
+          {sheets.map(s => <button key={s} type="button" onClick={() => setSheet(s)} style={{ border: "none", borderRight: "1px solid var(--border-subtle)", padding: "0 16px", cursor: "pointer", background: sheet === s ? "var(--bg-surface)" : "transparent", color: sheet === s ? "var(--text-heading)" : "var(--text-secondary)", fontFamily: "var(--font-sans)", fontWeight: sheet === s ? "var(--weight-medium)" : "var(--weight-regular)", fontSize: "var(--text-sm)", boxShadow: sheet === s ? "inset 0 2px 0 var(--action-primary)" : "none" }}>{s}</button>)}
+          <span style={{ display: "flex", alignItems: "center", padding: "0 6px" }}><IconButton icon="plus" size="xs" muted label="Add sheet" /></span>
+        </div>
+        <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", color: "var(--text-secondary)" }}>{stats ? "Sum " + fmt(stats.sum, cur.t, currency) + "   Avg " + fmt(stats.avg, cur.t, currency) + "   Count " + stats.count : "100%"}</span>
+      </div>}
+    </div>
+  );
+}

package/components/data/Spreadsheet.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { ref, computed } from 'vue'
+import Icon from '../icons/Icon.vue'
+import IconButton from '../buttons/IconButton.vue'
+import KSelect from '../forms/Select.vue'
+// Excel-style spreadsheet: toolbar, formula bar (name box + fx), frozen lettered/numbered headers, click + shift-click range selection, double-click editing, =SUM()/AVERAGE() formulas, sheet tabs, Sum/Avg/Count status bar.
+const props = defineProps({ data: { type: Array, default: () => [] }, rows: Number, cols: Number, colWidths: { type: Array, default: () => [] }, defaultColWidth: { type: Number, default: 92 }, currency: { type: String, default: '$' }, defaultActive: { type: String, default: 'A1' }, sheets: { type: Array, default: () => ['Sheet1'] }, toolbar: { type: Boolean, default: true }, formulaBar: { type: Boolean, default: true }, statusBar: { type: Boolean, default: true }, height: [Number, String], style: Object })
+const emit = defineEmits(['change'])
+
+const colName = (i) => { let s = ''; i++; while (i > 0) { s = String.fromCharCode(64 + ((i - 1) % 26 + 1)) + s; i = Math.floor((i - 1) / 26) } return s }
+const refRC = (ref) => { const m = /^([A-Z]+)(\d+)$/.exec(String(ref).trim().toUpperCase()); if (!m) return null; let c = 0; for (const ch of m[1]) c = c * 26 + (ch.charCodeAt(0) - 64); return { r: +m[2] - 1, c: c - 1 } }
+const norm = (cell) => cell == null ? { v: '' } : (typeof cell === 'object' ? { ...cell } : { v: cell })
+function evalCell(cells, cell, depth = 0) { if (!cell || depth > 12) return ''; const raw = cell.f != null ? cell.f : cell.v; if (typeof raw === 'string' && raw.startsWith('=')) return evalFormula(cells, raw, depth); return raw }
+function numAt(cells, r, c, depth) { const v = evalCell(cells, cells[r] && cells[r][c], depth + 1); const n = typeof v === 'number' ? v : parseFloat(String(v).replace(/[^0-9.eE+-]/g, '')); return isNaN(n) ? null : n }
+function evalFormula(cells, f, depth = 0) {
+  try {
+    let expr = f.slice(1).toUpperCase().replace(/\s+/g, '')
+    expr = expr.replace(/(SUM|AVERAGE|AVG|COUNT|MIN|MAX)\(([A-Z]+\d+):([A-Z]+\d+)\)/g, (m, fn, a, b) => {
+      const A = refRC(a), B = refRC(b), vals = []
+      for (let r = Math.min(A.r, B.r); r <= Math.max(A.r, B.r); r++) for (let c = Math.min(A.c, B.c); c <= Math.max(A.c, B.c); c++) { const n = numAt(cells, r, c, depth); if (n != null) vals.push(n) }
+      if (fn === 'COUNT') return String(vals.length)
+      if (!vals.length) return '0'
+      if (fn === 'SUM') return String(vals.reduce((x, y) => x + y, 0))
+      if (fn === 'MIN') return String(Math.min(...vals))
+      if (fn === 'MAX') return String(Math.max(...vals))
+      return String(vals.reduce((x, y) => x + y, 0) / vals.length)
+    })
+    expr = expr.replace(/[A-Z]+\d+/g, (ref) => { const p = refRC(ref); const n = p ? numAt(cells, p.r, p.c, depth) : null; return String(n == null ? 0 : n) })
+    if (!/^[-+*/().\d\seE]*$/.test(expr)) return '#ERROR'
+    const out = Function('"use strict";return (' + expr + ')')()
+    return typeof out === 'number' && isFinite(out) ? out : '#ERROR'
+  } catch (e) { return '#ERROR' }
+}
+function fmt(val, t, currency) { if (val === '' || val == null) return ''; if (typeof val !== 'number') return String(val); const r2 = Math.round(val * 100) / 100; if (t === 'percent') return (Math.round(val * 1000) / 10) + '%'; if (t === 'currency') return currency + r2.toLocaleString(); return r2.toLocaleString() }
+
+const nR = Math.max(props.rows || 0, props.data.length, 8)
+const nC = Math.max(props.cols || 0, ...props.data.map(r => r.length), 6)
+const cells = ref(Array.from({ length: nR }, (_, r) => Array.from({ length: nC }, (_, c) => norm(props.data[r] && props.data[r][c]))))
+const a0 = refRC(props.defaultActive) || { r: 0, c: 0 }
+const active = ref(a0), anchor = ref(a0), editing = ref(null), draft = ref(''), sheet = ref(props.sheets[0])
+const cur = computed(() => cells.value[active.value.r][active.value.c])
+const rawOf = (cell) => cell.f != null ? cell.f : (cell.v == null ? '' : String(cell.v))
+const lo = computed(() => ({ r: Math.min(active.value.r, anchor.value.r), c: Math.min(active.value.c, anchor.value.c) }))
+const hi = computed(() => ({ r: Math.max(active.value.r, anchor.value.r), c: Math.max(active.value.c, anchor.value.c) }))
+const multi = computed(() => lo.value.r !== hi.value.r || lo.value.c !== hi.value.c)
+const inRange = (r, c) => r >= lo.value.r && r <= hi.value.r && c >= lo.value.c && c <= hi.value.c
+const stats = computed(() => { if (!multi.value) return null; const vals = []; for (let r = lo.value.r; r <= hi.value.r; r++) for (let c = lo.value.c; c <= hi.value.c; c++) { const v = evalCell(cells.value, cells.value[r][c]); if (typeof v === 'number') vals.push(v) } if (!vals.length) return null; const sum = vals.reduce((x, y) => x + y, 0); return { sum: Math.round(sum * 100) / 100, avg: Math.round(sum / vals.length * 100) / 100, count: vals.length } })
+function pick(r, c, e) { active.value = { r, c }; if (!(e && e.shiftKey)) anchor.value = { r, c }; editing.value = null }
+function commit(r, c, text) { const cell = cells.value[r][c]; delete cell.f; if (String(text).startsWith('=')) { cell.f = text; cell.v = '' } else cell.v = text !== '' && !isNaN(Number(text)) ? Number(text) : text; emit('change', cells.value) }
+function setFlag(k) { const on = !cur.value[k]; for (let r = lo.value.r; r <= hi.value.r; r++) for (let c = lo.value.c; c <= hi.value.c; c++) cells.value[r][c][k] = on }
+function setType(label) { const t = { Automatic: undefined, Number: 'number', Currency: 'currency', Percent: 'percent' }[label]; for (let r = lo.value.r; r <= hi.value.r; r++) for (let c = lo.value.c; c <= hi.value.c; c++) { if (t) cells.value[r][c].t = t; else delete cells.value[r][c].t } }
+const gridCols = computed(() => ['46px', ...Array.from({ length: nC }, (_, c) => (props.colWidths[c] || props.defaultColWidth) + 'px')].join(' '))
+const hdr = { position: 'sticky', top: 0, zIndex: 3, background: 'var(--bg-inset)', borderRight: '1px solid var(--border-control)', borderBottom: '1px solid var(--border-control)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-sans)', fontWeight: 'var(--weight-medium)', fontSize: 'var(--text-xs)', color: 'var(--text-secondary)', height: '26px', boxSizing: 'border-box', userSelect: 'none' }
+const hl = { background: 'var(--soft-bg)', color: 'var(--action-primary)' }
+</script>
+<template>
+  <div :style="{ border: '1px solid var(--border-control)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--bg-surface)', boxSizing: 'border-box', ...style }">
+    <div v-if="toolbar" style="height:36px;display:flex;align-items:center;gap:2px;padding:0 8px;border-bottom:1px solid var(--border-subtle)">
+      <IconButton icon="undo-2" size="sm" muted label="Undo" /><IconButton icon="redo-2" size="sm" muted label="Redo" />
+      <span style="width:1px;height:16px;background:var(--border-control);margin:0 6px" />
+      <button type="button" @click="setFlag('b')" :style="{ width: '24px', height: '24px', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', background: cur.b ? 'var(--bg-active)' : 'transparent', color: 'var(--text-body)', fontWeight: 700 }">B</button>
+      <button type="button" @click="setFlag('i')" :style="{ width: '24px', height: '24px', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', background: cur.i ? 'var(--bg-active)' : 'transparent', color: 'var(--text-body)', fontStyle: 'italic' }">I</button>
+      <button type="button" @click="setFlag('u')" :style="{ width: '24px', height: '24px', border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer', background: cur.u ? 'var(--bg-active)' : 'transparent', color: 'var(--text-body)', textDecoration: 'underline' }">U</button>
+      <span style="width:1px;height:16px;background:var(--border-control);margin:0 6px" />
+      <KSelect size="sm" :options="['Automatic','Number','Currency','Percent']" :model-value="{ number: 'Number', currency: 'Currency', percent: 'Percent' }[cur.t] || 'Automatic'" @update:modelValue="setType" style="width:110px" />
+    </div>
+    <div v-if="formulaBar" style="height:32px;display:flex;align-items:center;border-bottom:1px solid var(--border-control)">
+      <span style="width:72px;align-self:stretch;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border-control);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)">{{ multi ? colName(lo.c) + (lo.r + 1) + ':' + colName(hi.c) + (hi.r + 1) : colName(active.c) + (active.r + 1) }}</span>
+      <span style="padding:0 10px;font-family:var(--font-mono);font-size:var(--text-xs);font-style:italic;color:var(--text-muted);border-right:1px solid var(--border-subtle);align-self:stretch;display:flex;align-items:center">fx</span>
+      <input :value="editing === 'fx' ? draft : rawOf(cur)" @focus="editing = 'fx'; draft = rawOf(cur)" @input="draft = $event.target.value" @blur="editing === 'fx' && (commit(active.r, active.c, draft), editing = null)" @keydown.enter="$event.target.blur()" @keydown.esc="editing = null; $event.target.blur()" style="flex:1;border:none;outline:none;background:transparent;padding:0 10px;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-primary)" />
+    </div>
+    <div :style="{ overflow: 'auto', maxHeight: typeof height === 'number' ? height + 'px' : height }">
+      <div :style="{ display: 'grid', gridTemplateColumns: gridCols, width: 'fit-content' }">
+        <span :style="{ ...hdr, zIndex: 5, left: 0 }" />
+        <span v-for="c in nC" :key="'c' + c" :style="{ ...hdr, ...((c - 1) >= lo.c && (c - 1) <= hi.c ? hl : null) }">{{ colName(c - 1) }}</span>
+        <template v-for="(row, r) in cells" :key="r">
+          <span :style="{ ...hdr, position: 'sticky', left: 0, top: 'auto', zIndex: 2, height: '28px', ...(r >= lo.r && r <= hi.r ? hl : null) }">{{ r + 1 }}</span>
+          <span v-for="(cell, c) in row" :key="r + ',' + c" @mousedown="pick(r, c, $event)" @dblclick="editing = { r, c }; draft = rawOf(cell)"
+            :style="{ position: 'relative', height: '28px', boxSizing: 'border-box', borderRight: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', justifyContent: cell.align || (typeof evalCell(cells, cell) === 'number' ? 'flex-end' : 'flex-start'), padding: '0 8px', cursor: 'cell', background: inRange(r, c) && !(active.r === r && active.c === c) ? 'var(--soft-bg)' : 'var(--bg-surface)', boxShadow: active.r === r && active.c === c ? 'inset 0 0 0 2px var(--action-primary)' : 'none', fontFamily: typeof evalCell(cells, cell) === 'number' ? 'var(--font-mono)' : 'var(--font-sans)', fontSize: typeof evalCell(cells, cell) === 'number' ? '11.5px' : 'var(--text-sm)', color: evalCell(cells, cell) === '#ERROR' ? 'var(--danger)' : 'var(--text-primary)', fontWeight: cell.b ? 600 : 'var(--weight-regular)', fontStyle: cell.i ? 'italic' : 'normal', textDecoration: cell.u ? 'underline' : 'none', whiteSpace: 'nowrap', overflow: 'hidden', userSelect: 'none' }">
+            <input v-if="editing && editing !== 'fx' && editing.r === r && editing.c === c" autofocus :value="draft" @input="draft = $event.target.value" @blur="commit(r, c, draft); editing = null" @keydown.enter="$event.target.blur()" @keydown.esc="editing = null" style="position:absolute;inset:0;border:none;outline:none;padding:0 8px;font:inherit;background:var(--bg-surface);color:var(--text-primary)" />
+            <template v-else>{{ fmt(evalCell(cells, cell), cell.t, currency) }}</template>
+            <span v-if="active.r === r && active.c === c && !editing" style="position:absolute;right:-3px;bottom:-3px;width:6px;height:6px;background:var(--action-primary);border:1px solid var(--bg-surface);cursor:crosshair;z-index:2" />
+          </span>
+        </template>
+      </div>
+    </div>
+    <div v-if="statusBar" style="height:32px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border-control);background:var(--bg-inset);padding-right:12px">
+      <div style="display:flex;align-self:stretch;align-items:stretch">
+        <button v-for="s in sheets" :key="s" type="button" @click="sheet = s" :style="{ border: 'none', borderRight: '1px solid var(--border-subtle)', padding: '0 16px', cursor: 'pointer', background: sheet === s ? 'var(--bg-surface)' : 'transparent', color: sheet === s ? 'var(--text-heading)' : 'var(--text-secondary)', fontFamily: 'var(--font-sans)', fontWeight: sheet === s ? 'var(--weight-medium)' : 'var(--weight-regular)', fontSize: 'var(--text-sm)', boxShadow: sheet === s ? 'inset 0 2px 0 var(--action-primary)' : 'none' }">{{ s }}</button>
+        <span style="display:flex;align-items:center;padding:0 6px"><IconButton icon="plus" size="xs" muted label="Add sheet" /></span>
+      </div>
+      <span style="font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)">{{ stats ? 'Sum ' + fmt(stats.sum, cur.t, currency) + '   Avg ' + fmt(stats.avg, cur.t, currency) + '   Count ' + stats.count : '100%' }}</span>
+    </div>
+  </div>
+</template>

package/components/data/_dir.card.html

@@ -0,0 +1,13 @@
+<!-- @dsCard group="Directory Index" viewport="700x120" name="Data dir" subtitle="Full cards: Components → Data Table / List Row / etc." -->
+<!DOCTYPE html>
+<html><head><meta charset="utf-8"><link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>body{margin:0;background:var(--bg-surface);padding:16px;font-family:var(--font-sans)}</style></head>
+<body><div id="root"></div>
+<script type="text/babel">
+const { DataTable } = window.KeybricksDesignSystem_71231a;
+ReactDOM.createRoot(document.getElementById("root")).render(<DataTable dense columns={[{key:"id",label:"ID",mono:true},{key:"entity",label:"Entity",mono:true}]} rows={[{id:"528563",entity:"HK"}]}/>);
+</script></body></html>