makersclaw 0.2.0 → 0.3.0

package/registry/blocks/spreadsheet/grid.js

@@ -0,0 +1,387 @@
+// The grid's pure helpers: the view (which columns show, in what order,
+// how wide, what is sorted and filtered), rows through that view, ranges,
+// the clipboard as TSV, paste and fill as lists of changes, undo. No
+// React: they run on the server and in a test.
+import { isBlank, parseCell, typeOf } from "./types";
+
+// ── the view ────────────────────────────────────────────────────────────
+
+/** A view is plain JSON, the part of a table a person arranges and may
+ *  save (base-view keeps one per tab):
+ *    order    column keys in the order they show (unknown keys are skipped;
+ *             columns missing from it follow, in `columns` order)
+ *    hidden   keys not shown
+ *    widths   { key: px }
+ *    frozen   how many leading columns stay put while the rest scroll (1)
+ *    sort     [{ key, dir: "asc" | "desc" }] — first wins, the rest break ties
+ *    filters  [{ id, key, op, value }] — every one must hold */
+export function emptyView() {
+  return { order: [], hidden: [], widths: {}, frozen: 1, sort: [], filters: [] };
+}
+
+export function normalizeView(view) {
+  const v = view ?? {};
+  return {
+    order: Array.isArray(v.order) ? v.order : [],
+    hidden: Array.isArray(v.hidden) ? v.hidden : [],
+    widths: v.widths && typeof v.widths === "object" ? v.widths : {},
+    frozen: Number.isInteger(v.frozen) ? Math.max(0, v.frozen) : 1,
+    sort: Array.isArray(v.sort) ? v.sort : [],
+    filters: Array.isArray(v.filters) ? v.filters : [],
+  };
+}
+
+/** The columns in view order (hidden ones included, flagged). */
+export function orderedColumns(columns, view) {
+  const byKey = new Map(columns.map((c) => [c.key, c]));
+  const seen = new Set();
+  const out = [];
+  for (const k of view.order) {
+    const c = byKey.get(k);
+    if (c && !seen.has(k)) {
+      seen.add(k);
+      out.push(c);
+    }
+  }
+  for (const c of columns) if (!seen.has(c.key)) out.push(c);
+  return out;
+}
+
+/** The columns that show, in order, each with its width. */
+export function visibleColumns(columns, view, custom, narrow = false) {
+  const hidden = new Set(view.hidden);
+  return orderedColumns(columns, view)
+    .filter((c) => !hidden.has(c.key))
+    .map((c) => {
+      const w = view.widths[c.key] ?? c.width ?? typeOf(c, custom).width ?? 160;
+      return { ...c, width: Math.round(narrow ? Math.min(w, 220) : w) };
+    });
+}
+
+// ── rows through the view ───────────────────────────────────────────────
+
+/** Does `row` pass every filter? A filter whose value is still blank (a
+ *  half-made condition) passes, so the rows do not vanish while typing. */
+export function passesFilters(row, filters, columnsByKey, ctx, custom) {
+  for (const f of filters) {
+    const col = columnsByKey.get(f.key);
+    if (!col) continue;
+    const t = typeOf(col, custom);
+    const op = t.allFilters.find((o) => o.id === f.op) ?? t.allFilters[0];
+    if (!op) continue;
+    if (op.arg !== "none" && isBlank(f.value)) continue;
+    const v = row[col.key];
+    // An empty cell never matches a value condition ("> 100", "contains").
+    if (op.arg !== "none" && t.empty(v) && !["ne", "not-contains", "none"].includes(op.id)) return false;
+    if (!op.test(v, f.value, col, ctx, t)) return false;
+  }
+  return true;
+}
+
+/** Does any shown cell's text contain `query`? */
+export function matchesSearch(row, query, cols, ctx, custom) {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  return cols.some((c) => typeOf(c, custom).format(row[c.key], c, ctx).toLowerCase().includes(q));
+}
+
+/** Rows filtered, searched and sorted — a new array; the input is untouched. */
+export function processRows(rows, columns, view, { search = "", ctx, custom } = {}) {
+  const byKey = new Map(columns.map((c) => [c.key, c]));
+  const shown = visibleColumns(columns, view, custom);
+  let out = rows;
+  if (view.filters.length) out = out.filter((r) => passesFilters(r, view.filters, byKey, ctx, custom));
+  if (search.trim()) out = out.filter((r) => matchesSearch(r, search, shown, ctx, custom));
+  const sorts = view.sort.map((s) => ({ ...s, col: byKey.get(s.key) })).filter((s) => s.col);
+  if (sorts.length) {
+    const typed = sorts.map((s) => ({ ...s, t: typeOf(s.col, custom), sign: s.dir === "desc" ? -1 : 1 }));
+    // Stable: equal rows keep the order they came in.
+    out = out
+      .map((r, i) => [r, i])
+      .sort(([a, ia], [b, ib]) => {
+        for (const s of typed) {
+          const va = a[s.key];
+          const vb = b[s.key];
+          const ea = s.t.empty(va);
+          const eb = s.t.empty(vb);
+          if (ea || eb) {
+            if (ea && eb) continue;
+            return ea ? 1 : -1; // empties last, whichever way
+          }
+          const d = s.t.compare(va, vb, s.col, ctx);
+          if (d) return d * s.sign;
+        }
+        return ia - ib;
+      })
+      .map(([r]) => r);
+  } else if (out === rows) out = rows.slice();
+  return out;
+}
+
+// ── ranges ──────────────────────────────────────────────────────────────
+
+/** Two corners → { r0, r1, c0, c1 }, inclusive and ordered. */
+export function rangeOf(a, b) {
+  return { r0: Math.min(a.r, b.r), r1: Math.max(a.r, b.r), c0: Math.min(a.c, b.c), c1: Math.max(a.c, b.c) };
+}
+
+export const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+
+export const inRange = (g, r, c) => r >= g.r0 && r <= g.r1 && c >= g.c0 && c <= g.c1;
+
+/** Where a key press moves the active cell: arrows by one, ⌘/Ctrl +
+ *  arrow to the edge, Home/End to the row's ends (with ⌘, the table's),
+ *  PageUp/Down by `page` rows. Returns null for any other key. */
+export function moveBy(key, { r, c }, { rows, cols, page = 10, jump = false }) {
+  const lastR = rows - 1;
+  const lastC = cols - 1;
+  switch (key) {
+    case "ArrowUp":
+      return { r: jump ? 0 : clamp(r - 1, 0, lastR), c };
+    case "ArrowDown":
+      return { r: jump ? lastR : clamp(r + 1, 0, lastR), c };
+    case "ArrowLeft":
+      return { r, c: jump ? 0 : clamp(c - 1, 0, lastC) };
+    case "ArrowRight":
+      return { r, c: jump ? lastC : clamp(c + 1, 0, lastC) };
+    case "Home":
+      return { r: jump ? 0 : r, c: 0 };
+    case "End":
+      return { r: jump ? lastR : r, c: lastC };
+    case "PageUp":
+      return { r: clamp(r - page, 0, lastR), c };
+    case "PageDown":
+      return { r: clamp(r + page, 0, lastR), c };
+    default:
+      return null;
+  }
+}
+
+// ── the clipboard ───────────────────────────────────────────────────────
+
+/** Tab-separated text → rows of cells. Quoted cells (what Sheets and
+ *  Excel write when a cell holds a tab, a newline or a quote) are read
+ *  whole; a trailing newline adds no row. */
+export function parseTSV(text) {
+  const s = String(text ?? "").replace(/\r\n?/g, "\n");
+  const rows = [];
+  let row = [];
+  let cell = "";
+  let i = 0;
+  let quoted = false;
+  let atStart = true;
+  while (i < s.length) {
+    const ch = s[i];
+    if (quoted) {
+      if (ch === '"') {
+        if (s[i + 1] === '"') {
+          cell += '"';
+          i += 2;
+          continue;
+        }
+        quoted = false;
+        i++;
+        continue;
+      }
+      cell += ch;
+      i++;
+      continue;
+    }
+    if (ch === '"' && atStart) {
+      quoted = true;
+      atStart = false;
+      i++;
+      continue;
+    }
+    if (ch === "\t") {
+      row.push(cell);
+      cell = "";
+      atStart = true;
+      i++;
+      continue;
+    }
+    if (ch === "\n") {
+      row.push(cell);
+      rows.push(row);
+      row = [];
+      cell = "";
+      atStart = true;
+      i++;
+      continue;
+    }
+    cell += ch;
+    atStart = false;
+    i++;
+  }
+  if (cell !== "" || row.length) {
+    row.push(cell);
+    rows.push(row);
+  }
+  return rows;
+}
+
+/** Rows of text → TSV, quoting a cell that holds a tab, newline or quote. */
+export function toTSV(matrix) {
+  return matrix
+    .map((row) => row.map((v) => (/[\t\n"]/.test(v) ? `"${String(v).replace(/"/g, '""')}"` : String(v ?? ""))).join("\t"))
+    .join("\n");
+}
+
+/** The range's cells as text rows (what a copy puts on the clipboard). */
+export function rangeText(range, rows, cols, ctx, custom) {
+  const out = [];
+  for (let r = range.r0; r <= range.r1; r++) {
+    const row = rows[r];
+    const line = [];
+    for (let c = range.c0; c <= range.c1; c++) {
+      const col = cols[c];
+      line.push(row && col ? typeOf(col, custom).toText(row[col.key], col, ctx) : "");
+    }
+    out.push(line);
+  }
+  return out;
+}
+
+// ── changes ─────────────────────────────────────────────────────────────
+// A change is { rowId, key, value, prev }. A batch of them is one undo step.
+
+const same = (a, b) => a === b || (Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((x, i) => x === b[i])) || (isBlank(a) && isBlank(b) && !(a === false || b === false));
+
+/** Keep only changes that change something. */
+export function realChanges(changes) {
+  return changes.filter((ch) => !same(ch.value, ch.prev));
+}
+
+/** `rows` with `changes` laid on — a new array; untouched rows keep their identity. */
+export function applyChanges(rows, changes, field = "value") {
+  if (!changes.length) return rows;
+  const byRow = new Map();
+  for (const ch of changes) {
+    if (!byRow.has(ch.rowId)) byRow.set(ch.rowId, {});
+    byRow.get(ch.rowId)[ch.key] = ch[field];
+  }
+  return rows.map((r) => (byRow.has(r.id) ? { ...r, ...byRow.get(r.id) } : r));
+}
+
+/** The changes that undo `changes`. */
+export function invertChanges(changes) {
+  return changes.map((ch) => ({ ...ch, value: ch.prev, prev: ch.value })).reverse();
+}
+
+/**
+ * Text rows pasted with their top-left at (r, c) → what to change. One
+ * value pasted onto a bigger range fills the range (as Sheets does);
+ * a block that runs past the last row lists the rest in `extra` (text
+ * rows the caller may add as new rows). Read-only columns are skipped;
+ * text that does not parse is reported in `errors` and skipped.
+ */
+export function pasteChanges(matrix, range, rows, cols, ctx, custom) {
+  const changes = [];
+  const errors = [];
+  const creates = new Map(); // col key → new options
+  if (!matrix.length) return { changes, errors, creates, extra: [] };
+  const single = matrix.length === 1 && matrix[0].length === 1;
+  const height = single ? range.r1 - range.r0 + 1 : matrix.length;
+  const width = single ? range.c1 - range.c0 + 1 : Math.max(...matrix.map((l) => l.length));
+  const extra = [];
+  for (let i = 0; i < height; i++) {
+    const r = range.r0 + i;
+    const line = single ? matrix[0] : matrix[i];
+    if (r >= rows.length) {
+      extra.push(line);
+      continue;
+    }
+    const row = rows[r];
+    for (let j = 0; j < width; j++) {
+      const col = cols[range.c0 + j];
+      if (!col || col.readOnly || col.computed) continue;
+      const text = single ? line[0] : line[j] ?? "";
+      const withNew = { ...col, options: [...(col.options ?? []), ...(creates.get(col.key) ?? [])] };
+      const res = parseCell(text, withNew, ctx, custom);
+      if ("error" in res) {
+        errors.push({ rowId: row.id, key: col.key, text, error: res.error });
+        continue;
+      }
+      if (res.create) creates.set(col.key, [...(creates.get(col.key) ?? []), ...res.create]);
+      changes.push({ rowId: row.id, key: col.key, value: res.value, prev: row[col.key] });
+    }
+  }
+  return { changes: realChanges(changes), errors, creates, extra };
+}
+
+/**
+ * Fill from the `range` down (or up) to row `to`: the range's rows repeat.
+ * A single column of two or more numbers that step evenly continues the
+ * series (1, 2, 3 → 4, 5…), as a spreadsheet does.
+ */
+export function fillChanges(range, to, rows, cols) {
+  const changes = [];
+  const h = range.r1 - range.r0 + 1;
+  const down = to > range.r1;
+  const targets = [];
+  if (down) for (let r = range.r1 + 1; r <= Math.min(to, rows.length - 1); r++) targets.push(r);
+  else for (let r = range.r0 - 1; r >= Math.max(to, 0); r--) targets.push(r);
+  for (let c = range.c0; c <= range.c1; c++) {
+    const col = cols[c];
+    if (!col || col.readOnly || col.computed) continue;
+    const src = [];
+    for (let r = range.r0; r <= range.r1; r++) src.push(rows[r]?.[col.key]);
+    let step = null;
+    if (h >= 2 && src.every((v) => typeof v === "number")) {
+      const d = src[1] - src[0];
+      if (src.every((v, i) => i === 0 || Math.abs(v - src[i - 1] - d) < 1e-9)) step = d;
+    }
+    targets.forEach((r, k) => {
+      const row = rows[r];
+      if (!row) return;
+      let value;
+      if (step !== null) value = down ? src[h - 1] + step * (k + 1) : src[0] - step * (k + 1);
+      else value = down ? src[k % h] : src[h - 1 - (k % h)];
+      if (Array.isArray(value)) value = value.slice();
+      changes.push({ rowId: row.id, key: col.key, value, prev: row[col.key] });
+    });
+  }
+  return realChanges(changes);
+}
+
+/** Clearing a range: each cell to its type's empty. */
+export function clearChanges(range, rows, cols, ctx, custom) {
+  const changes = [];
+  for (let r = range.r0; r <= range.r1; r++) {
+    const row = rows[r];
+    if (!row) continue;
+    for (let c = range.c0; c <= range.c1; c++) {
+      const col = cols[c];
+      if (!col || col.readOnly || col.computed) continue;
+      const empty = parseCell("", col, ctx, custom);
+      changes.push({ rowId: row.id, key: col.key, value: "error" in empty ? null : empty.value, prev: row[col.key] });
+    }
+  }
+  return realChanges(changes);
+}
+
+/** A number summary of the range's numeric cells, for the status bar. */
+export function summarize(range, rows, cols) {
+  let count = 0;
+  let filled = 0;
+  let sum = 0;
+  let nums = 0;
+  let numCol = null;
+  for (let r = range.r0; r <= range.r1; r++) {
+    const row = rows[r];
+    if (!row) continue;
+    for (let c = range.c0; c <= range.c1; c++) {
+      const col = cols[c];
+      if (!col) continue;
+      count++;
+      const v = row[col.key];
+      if (!isBlank(v) && v !== false) filled++;
+      if (typeof v === "number" && (col.type === "number" || col.type === "currency")) {
+        sum += v;
+        nums++;
+        numCol = numCol === null || numCol?.key === col.key ? col : numCol && numCol.type === col.type ? numCol : false;
+      }
+    }
+  }
+  return { count, filled, sum, nums, avg: nums ? sum / nums : 0, numCol: numCol || null };
+}

package/registry/blocks/spreadsheet/index.js

@@ -0,0 +1,34 @@
+// The Spreadsheet block — `makersclaw add spreadsheet`. Fixed: compose it
+// through its props (README.md beside this file). The helpers (the column
+// types, the view, TSV, paste and fill) are plain functions and work
+// anywhere, the server included. Blocks built on this one (base-view,
+// csv-import) import it, never @tanstack/react-virtual directly.
+export { Spreadsheet } from "./spreadsheet";
+export { CellValue, CellPanel, OptionBadge, editorFor } from "./cells";
+export { TYPE_ORDER, sortWords } from "./chrome";
+export {
+  COLUMN_TYPES,
+  typeOf,
+  parseCell,
+  convertValue,
+  guessType,
+  parseNumberText,
+  parseDateText,
+  optionValue,
+  isBlank,
+} from "./types";
+export {
+  emptyView,
+  normalizeView,
+  orderedColumns,
+  visibleColumns,
+  processRows,
+  passesFilters,
+  parseTSV,
+  toTSV,
+  pasteChanges,
+  fillChanges,
+  clearChanges,
+  applyChanges,
+  invertChanges,
+} from "./grid";