@braincrew-lab/langchain-canvas 0.2.0 → 0.3.0

package/dist/TableRenderer-VKDD3CB6.js

@@ -1,419 +0,0 @@
-import { loadOptional } from './chunk-YZZSJJMQ.js';
-import { useCanvasStore } from './chunk-S54GJDSJ.js';
-import { lazy, useMemo, useState, useRef, useEffect, useCallback, Suspense } from 'react';
-import '@fortune-sheet/react/dist/index.css';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-// src/io/formula.ts
-var EMPTY = /* @__PURE__ */ new Map();
-async function computeFormulas(columns, rows) {
-  const formulaCells = [];
-  rows.forEach(
-    (row, dataIdx) => columns.forEach((col, c) => {
-      const v = row[col.key];
-      if (typeof v === "string" && v.startsWith("=")) formulaCells.push({ dataIdx, col: c, formula: v });
-    })
-  );
-  if (formulaCells.length === 0) return EMPTY;
-  const mod = await loadOptional("fast-formula-parser", () => import('fast-formula-parser'));
-  const FormulaParser = mod.default ?? mod;
-  const memo = /* @__PURE__ */ new Map();
-  const inProgress = /* @__PURE__ */ new Set();
-  const rawAt = (row, col) => {
-    const colIdx = col - 1;
-    if (row === 1) return columns[colIdx]?.label ?? columns[colIdx]?.key ?? null;
-    const dataRow = rows[row - 2];
-    const column = columns[colIdx];
-    if (!dataRow || !column) return null;
-    const v = dataRow[column.key];
-    return v ?? null;
-  };
-  const valueAt = (row, col) => {
-    const raw = rawAt(row, col);
-    if (typeof raw !== "string" || !raw.startsWith("=")) return raw ?? 0;
-    const key = `${row},${col}`;
-    const cached = memo.get(key);
-    if (cached !== void 0) return cached;
-    if (inProgress.has(key)) return 0;
-    inProgress.add(key);
-    const value = evaluate(raw, row, col);
-    inProgress.delete(key);
-    memo.set(key, value);
-    return value;
-  };
-  const parser = new FormulaParser({
-    onCell: ({ row, col }) => valueAt(row, col),
-    onRange: (ref) => {
-      const maxRow = Math.min(ref.to.row, rows.length + 1);
-      const maxCol = Math.min(ref.to.col, columns.length);
-      const grid = [];
-      for (let r = ref.from.row; r <= maxRow; r++) {
-        const line = [];
-        for (let c = ref.from.col; c <= maxCol; c++) line.push(valueAt(r, c));
-        grid.push(line);
-      }
-      return grid;
-    }
-  });
-  const evaluate = (formula, row, col) => {
-    try {
-      const result = parser.parse(formula.slice(1), { row, col });
-      if (result != null && typeof result === "object") return "#ERR";
-      return result ?? 0;
-    } catch {
-      return "#ERR";
-    }
-  };
-  const out = /* @__PURE__ */ new Map();
-  for (const { dataIdx, col, formula } of formulaCells) {
-    out.set(`${dataIdx + 1},${col}`, evaluate(formula, dataIdx + 2, col + 1));
-  }
-  return out;
-}
-var Workbook = lazy(() => import('@fortune-sheet/react').then((m) => ({ default: m.Workbook })));
-var isFormula = (v) => typeof v === "string" && v.startsWith("=");
-function toWorkbook(columns, rows, formulas) {
-  const celldata = [];
-  columns.forEach((col, c) => {
-    const label = col.label ?? col.key;
-    celldata.push({ r: 0, c, v: { v: label, m: String(label), bl: 1, bg: "#f3f4f6" } });
-  });
-  rows.forEach((row, r) => {
-    columns.forEach((col, c) => {
-      const val = row[col.key];
-      if (val === void 0 || val === null || val === "") return;
-      if (isFormula(val)) {
-        const computed = formulas.get(`${r + 1},${c}`);
-        const v = { f: val };
-        if (computed !== void 0) {
-          v.v = computed;
-          v.m = String(computed);
-          if (typeof computed === "number") v.ct = { fa: "General", t: "n" };
-        }
-        celldata.push({ r: r + 1, c, v });
-        return;
-      }
-      const numeric = typeof val === "number";
-      celldata.push({
-        r: r + 1,
-        c,
-        v: { v: val, m: String(val), ...numeric ? { ct: { fa: "General", t: "n" } } : {} }
-      });
-    });
-  });
-  const sample = Math.min(rows.length, 400);
-  const columnlen = {};
-  columns.forEach((col, c) => {
-    let widest = String(col.label ?? col.key).length;
-    for (let ri = 0; ri < sample; ri++) {
-      let v = rows[ri][col.key];
-      if (isFormula(v)) v = formulas.get(`${ri + 1},${c}`) ?? "";
-      if (v != null && v !== "") widest = Math.max(widest, String(v).length);
-    }
-    columnlen[c] = Math.min(360, Math.max(64, Math.round(widest * 8.5) + 18));
-  });
-  return [
-    {
-      name: "Sheet1",
-      id: "sheet1",
-      order: 0,
-      // Size the grid to the data plus a modest buffer — big enough to feel like a
-      // real sheet and to keep growing, small enough that the scrollbar stays
-      // proportional (a huge empty grid makes scrolling feel disconnected).
-      row: Math.max(rows.length + 40, 60),
-      column: Math.max(columns.length + 2, 8),
-      celldata,
-      // No frozen pane: a freeze split offsets the initial scroll and hides the
-      // first data rows behind the split line. A plain grid scrolls cleanly.
-      config: { rowlen: { 0: 28 }, columnlen }
-    }
-  ];
-}
-function deriveColumns(rows) {
-  const keys = /* @__PURE__ */ new Set();
-  for (let i = 0; i < Math.min(rows.length, 50); i++) Object.keys(rows[i] ?? {}).forEach((k) => keys.add(k));
-  return [...keys].map((key) => ({ key }));
-}
-var EMPTY_FORMULAS = /* @__PURE__ */ new Map();
-function TableRenderer({ artifact }) {
-  const rows = artifact.data.rows;
-  const columns = useMemo(
-    () => artifact.data.columns.length ? artifact.data.columns : deriveColumns(rows),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [artifact.id, artifact.version, artifact.data.columns.length, rows.length]
-  );
-  const [mounted, setMounted] = useState(false);
-  const rootRef = useRef(null);
-  useEffect(() => setMounted(true), []);
-  useEffect(() => {
-    const root = rootRef.current;
-    if (!root) return;
-    const onWheel = (e) => {
-      const y = root.querySelector(".luckysheet-scrollbar-y");
-      const x = root.querySelector(".luckysheet-scrollbar-x");
-      let moved = false;
-      if (y && e.deltaY && y.scrollHeight > y.clientHeight) {
-        const max = y.scrollHeight - y.clientHeight;
-        const next = Math.max(0, Math.min(max, y.scrollTop + e.deltaY));
-        if (next !== y.scrollTop) {
-          y.scrollTop = next;
-          moved = true;
-        }
-      }
-      if (x && e.deltaX && x.scrollWidth > x.clientWidth) {
-        const max = x.scrollWidth - x.clientWidth;
-        const next = Math.max(0, Math.min(max, x.scrollLeft + e.deltaX));
-        if (next !== x.scrollLeft) {
-          x.scrollLeft = next;
-          moved = true;
-        }
-      }
-      const horizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY);
-      if (moved || horizontal && e.deltaX) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-    root.addEventListener("wheel", onWheel, { passive: false, capture: true });
-    return () => root.removeEventListener("wheel", onWheel, { capture: true });
-  }, [mounted]);
-  const dataKey = `${artifact.id}:v${artifact.version}:${columns.length}x${rows.length}`;
-  const hasFormulas = useMemo(
-    () => rows.slice(0, 400).some((row) => columns.some((col) => isFormula(row[col.key]))),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dataKey]
-  );
-  const [formulas, setFormulas] = useState(EMPTY_FORMULAS);
-  const [formulasReady, setFormulasReady] = useState(!hasFormulas);
-  useEffect(() => {
-    if (!hasFormulas) {
-      setFormulas(EMPTY_FORMULAS);
-      setFormulasReady(true);
-      return;
-    }
-    let alive = true;
-    setFormulasReady(false);
-    computeFormulas(columns, rows).then((values) => {
-      if (!alive) return;
-      setFormulas(values);
-      setFormulasReady(true);
-    });
-    return () => {
-      alive = false;
-    };
-  }, [dataKey, hasFormulas]);
-  const hasSheet = !!artifact.data.sheet?.length;
-  const [sortCol, setSortCol] = useState("");
-  const [sortDir, setSortDir] = useState(1);
-  const [filter, setFilter] = useState("");
-  const [appliedFilter, setAppliedFilter] = useState("");
-  useEffect(() => {
-    const t = setTimeout(() => setAppliedFilter(filter), 300);
-    return () => clearTimeout(t);
-  }, [filter]);
-  const viewRows = useMemo(() => {
-    let r = rows;
-    const q = appliedFilter.trim().toLowerCase();
-    if (q) r = r.filter((row) => columns.some((c) => String(row[c.key] ?? "").toLowerCase().includes(q)));
-    if (sortCol) {
-      r = [...r].sort((a, b) => {
-        const av = a[sortCol];
-        const bv = b[sortCol];
-        const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av ?? "").localeCompare(String(bv ?? ""));
-        return cmp * sortDir;
-      });
-    }
-    return r;
-  }, [rows, columns, appliedFilter, sortCol, sortDir]);
-  const viewActive = !!appliedFilter.trim() || !!sortCol;
-  const wbKey = `${dataKey}:${viewActive ? `view-s${sortCol}${sortDir}-f${appliedFilter}` : hasSheet ? "sheet" : "rows"}`;
-  const initialData = useMemo(
-    () => viewActive ? toWorkbook(columns, viewRows, formulas) : hasSheet ? artifact.data.sheet : toWorkbook(columns, rows, formulas),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [wbKey, formulasReady]
-  );
-  const applyEvent = useCanvasStore((s) => s.applyUserEvent);
-  const persistTimer = useRef(null);
-  const handleChange = useCallback(
-    (sheets) => {
-      if (persistTimer.current) clearTimeout(persistTimer.current);
-      persistTimer.current = setTimeout(() => {
-        applyEvent({ type: "canvas.patch", id: artifact.id, patch: { sheet: sheets } });
-      }, 400);
-    },
-    [applyEvent, artifact.id]
-  );
-  useEffect(() => () => {
-    if (persistTimer.current) clearTimeout(persistTimer.current);
-  }, []);
-  const wbRef = useRef(null);
-  const insert = (type) => {
-    const sel = wbRef.current?.getSelection?.();
-    const range = sel?.[0]?.[type] ?? [0, 0];
-    wbRef.current?.insertRowOrColumn(type, Math.max(0, range[1]), 1, "rightbottom");
-  };
-  const [selection, setSelection] = useState(null);
-  const [boldOn, setBoldOn] = useState(false);
-  const [fillColor, setFillColor] = useState("#fef3c7");
-  const [textColor, setTextColor] = useState("#111827");
-  const handleSelectionChange = useCallback((_sheetId, sel) => {
-    setSelection({ row: [...sel.row], column: [...sel.column] });
-    const bl = wbRef.current?.getCellValue?.(sel.row[0], sel.column[0], { type: "bl" });
-    setBoldOn(bl === 1 || bl === "1");
-  }, []);
-  const workbookHooks = useMemo(() => ({ afterSelectionChange: handleSelectionChange }), [handleSelectionChange]);
-  const applyFormat = (attr, value) => {
-    const sel = wbRef.current?.getSelection?.();
-    if (!sel?.length) return;
-    const ranges = sel.map((s) => ({ row: [s.row[0], s.row[1]], column: [s.column[0], s.column[1]] }));
-    wbRef.current?.setCellFormatByRange(attr, value, ranges);
-  };
-  const toggleBold = () => {
-    applyFormat("bl", boldOn ? 0 : 1);
-    setBoldOn((b) => !b);
-  };
-  const cleanStyling = () => {
-    const wb = wbRef.current;
-    const sheet = wb?.getSheet?.();
-    const sheetId = sheet?.id;
-    if (!wb || !sheet || !sheetId) return;
-    const ops = [];
-    sheet.celldata.forEach(({ r, c, v }) => {
-      if (!v || typeof v !== "object") return;
-      const cell = v;
-      if (cell.bg != null) ops.push({ op: "remove", id: sheetId, path: ["data", r, c, "bg"] });
-      if (cell.fc != null) ops.push({ op: "remove", id: sheetId, path: ["data", r, c, "fc"] });
-      const spans = cell.ct?.s;
-      if (!Array.isArray(spans)) return;
-      spans.forEach((span, i) => {
-        if (!span || typeof span !== "object") return;
-        const run = span;
-        if (run.bg != null) ops.push({ op: "remove", id: sheetId, path: ["data", r, c, "ct", "s", i, "bg"] });
-        if (run.fc != null) ops.push({ op: "remove", id: sheetId, path: ["data", r, c, "ct", "s", i, "fc"] });
-      });
-    });
-    if (ops.length) wb.applyOp(ops);
-  };
-  const [frozen, setFrozen] = useState(false);
-  const toggleFreeze = () => {
-    const wb = wbRef.current;
-    if (!wb) return;
-    if (frozen) {
-      const sheetId = wb.getSheet?.()?.id;
-      if (sheetId) wb.applyOp([{ op: "remove", id: sheetId, path: ["frozen"] }]);
-    } else {
-      wb.freeze("row", { row: 0, column: 0 });
-    }
-    setFrozen((f) => !f);
-  };
-  useEffect(() => {
-    setFrozen(!viewActive && hasSheet && !!artifact.data.sheet?.[0]?.frozen);
-    setSelection(null);
-    setBoldOn(false);
-  }, [wbKey]);
-  if (!mounted) {
-    return /* @__PURE__ */ jsx("div", { className: "cv-sheet cv-sheet--empty", children: "Loading spreadsheet\u2026" });
-  }
-  if (!hasSheet && columns.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "cv-sheet cv-sheet--empty", children: "Waiting for data\u2026" });
-  }
-  if (!hasSheet && !formulasReady) {
-    return /* @__PURE__ */ jsx("div", { className: "cv-sheet cv-sheet--empty", children: "Calculating\u2026" });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "cv-sheet-panel", children: [
-    /* @__PURE__ */ jsxs("div", { className: "cv-sheet-tools", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => insert("column"), children: "\uFF0B Column" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => insert("row"), children: "\uFF0B Row" }),
-      /* @__PURE__ */ jsx("span", { className: "cv-sheet-tools__sep" }),
-      /* @__PURE__ */ jsxs("span", { className: "cv-sheet-tools__fmt", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: `cv-sheet-tools__bold${boldOn ? " cv-sheet-tools__bold--on" : ""}`,
-            title: "Bold",
-            "aria-pressed": boldOn,
-            disabled: !selection,
-            onClick: toggleBold,
-            children: "B"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "color",
-            className: "cv-sheet-tools__color cv-sheet-tools__color--fill",
-            title: "Fill color",
-            disabled: !selection,
-            value: fillColor,
-            onChange: (e) => {
-              setFillColor(e.target.value);
-              applyFormat("bg", e.target.value);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "color",
-            className: "cv-sheet-tools__color cv-sheet-tools__color--text",
-            title: "Text color",
-            disabled: !selection,
-            value: textColor,
-            onChange: (e) => {
-              setTextColor(e.target.value);
-              applyFormat("fc", e.target.value);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-sheet-tools__align", title: "Align left", disabled: !selection, onClick: () => applyFormat("ht", 1), children: "\u21E4" }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-sheet-tools__align", title: "Align center", disabled: !selection, onClick: () => applyFormat("ht", 0), children: "\u2194" }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-sheet-tools__align", title: "Align right", disabled: !selection, onClick: () => applyFormat("ht", 2), children: "\u21E5" })
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "cv-sheet-tools__sep" }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "cv-sheet-tools__clean", title: "Remove all cell fills and font colors", onClick: cleanStyling, children: "Clean styling" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: `cv-sheet-tools__freeze${frozen ? " cv-sheet-tools__freeze--on" : ""}`,
-          title: frozen ? "Unfreeze the header row" : "Keep the header row visible while scrolling",
-          "aria-pressed": frozen,
-          onClick: toggleFreeze,
-          children: "Freeze header"
-        }
-      ),
-      columns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "cv-sheet-tools__sep" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            className: "cv-sheet-tools__sort",
-            value: sortCol,
-            title: "Sort by column",
-            onChange: (e) => setSortCol(e.target.value),
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: "Sort\u2026" }),
-              columns.map((c) => /* @__PURE__ */ jsx("option", { value: c.key, children: c.label ?? c.key }, c.key))
-            ]
-          }
-        ),
-        sortCol && /* @__PURE__ */ jsx("button", { type: "button", title: sortDir === 1 ? "Ascending" : "Descending", onClick: () => setSortDir((d) => d === 1 ? -1 : 1), children: sortDir === 1 ? "\u25B2" : "\u25BC" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            className: "cv-sheet-tools__filter",
-            value: filter,
-            placeholder: "Filter\u2026",
-            onChange: (e) => setFilter(e.target.value),
-            title: "Filter rows"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "cv-sheet-tools__hint", children: "Right-click a header for more, or drag to edit" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "cv-sheet", ref: rootRef, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "cv-sheet--empty", children: "Loading\u2026" }), children: /* @__PURE__ */ jsx(Workbook, { ref: wbRef, data: initialData, onChange: handleChange, hooks: workbookHooks }, wbKey) }) })
-  ] });
-}
-
-export { TableRenderer };