@braincrew-lab/langchain-canvas 0.2.0 → 0.3.0

package/dist/TableRenderer-BJQE2HMO.js

@@ -0,0 +1,636 @@
+import { loadOptional } from './chunk-YZZSJJMQ.js';
+import { useCanvasStore } from './chunk-ZLXAWRUP.js';
+import { useT } from './chunk-QMOJEGRH.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 normalizeSheets(sheets) {
+  return (sheets ?? []).map((sheet) => {
+    const matrix = sheet.data;
+    if (!Array.isArray(matrix)) return sheet;
+    const celldata = [];
+    matrix.forEach((row, r) => {
+      if (!Array.isArray(row)) return;
+      row.forEach((v, c) => {
+        if (v != null) celldata.push({ r, c, v });
+      });
+    });
+    const { data: _dropped, ...rest } = sheet;
+    return { ...rest, celldata };
+  });
+}
+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();
+var NUMBER_FORMATS = [
+  { labelKey: "fmtGeneral", suffix: "", fa: "General" },
+  { labelKey: "fmtCurrency", suffix: " \u20A9#,##0", fa: "\u20A9#,##0" },
+  { labelKey: "fmtCurrency", suffix: " $#,##0.00", fa: "$#,##0.00" },
+  { labelKey: "fmtPercent", suffix: " 0.0%", fa: "0.0%" },
+  { labelKey: "fmtThousands", suffix: " #,##0", fa: "#,##0" },
+  { labelKey: "fmtDecimal", suffix: " 0.00", fa: "0.00" },
+  { labelKey: "fmtDate", suffix: " yyyy-mm-dd", fa: "yyyy-mm-dd" }
+];
+var QUICK_FUNCTIONS = ["SUM", "AVERAGE", "COUNT", "MAX", "MIN"];
+var colToLetters = (c) => {
+  let s = "";
+  for (let n = c; n >= 0; n = Math.floor(n / 26) - 1) s = String.fromCharCode(65 + n % 26) + s;
+  return s;
+};
+var toA1 = (r, c) => `${colToLetters(c)}${r + 1}`;
+var plainFormula = (f) => {
+  if (!f.includes("<")) return f;
+  const div = document.createElement("div");
+  div.innerHTML = f;
+  return div.textContent ?? f;
+};
+var selectionHasMerge = (wb, sel) => {
+  let scanned = 0;
+  for (let r = sel.row[0]; r <= sel.row[1]; r++) {
+    for (let c = sel.column[0]; c <= sel.column[1]; c++) {
+      if (scanned++ >= 400) return false;
+      if (wb.getCellValue?.(r, c, { type: "mc" })) return true;
+    }
+  }
+  return false;
+};
+function AlignIcon({ mode }) {
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "12", viewBox: "0 0 14 12", "aria-hidden": true, focusable: "false", children: [0, 1, 2, 3].map((i) => {
+    const w = i % 2 ? 8.5 : 13;
+    const x = mode === "left" ? 0 : mode === "right" ? 14 - w : (14 - w) / 2;
+    return /* @__PURE__ */ jsx("rect", { x, y: i * 3.1, width: w, height: "1.7", rx: "0.85", fill: "currentColor" }, i);
+  }) });
+}
+function FillIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", "aria-hidden": true, focusable: "false", children: [
+    /* @__PURE__ */ jsx("path", { d: "M5.6 1.2 10 5.6a1.1 1.1 0 0 1 0 1.6L7.4 9.8a1.1 1.1 0 0 1-1.6 0L1.4 5.4a1.1 1.1 0 0 1 0-1.6L4 1.2a1.1 1.1 0 0 1 1.6 0Z", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("path", { d: "M12.6 9.4c0 .9-.55 1.6-1.25 1.6s-1.25-.7-1.25-1.6c0-.85 1.25-2.3 1.25-2.3s1.25 1.45 1.25 2.3Z", fill: "currentColor" })
+  ] });
+}
+function RibbonGroup({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "cv-ribbon__group", role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsx("div", { className: "cv-ribbon__items", children }),
+    /* @__PURE__ */ jsx("span", { className: "cv-ribbon__label", children: label })
+  ] });
+}
+function TableRenderer({ artifact }) {
+  const t = useT();
+  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 t2 = setTimeout(() => setAppliedFilter(filter), 300);
+    return () => clearTimeout(t2);
+  }, [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 mountEcho = useRef(1);
+  const handleChange = useCallback(
+    (sheets) => {
+      if (mountEcho.current > 0) {
+        mountEcho.current--;
+        return;
+      }
+      if (persistTimer.current) clearTimeout(persistTimer.current);
+      persistTimer.current = setTimeout(() => {
+        applyEvent({
+          type: "canvas.patch",
+          id: artifact.id,
+          patch: { sheet: normalizeSheets(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 [selHasMerge, setSelHasMerge] = useState(false);
+  const [fxValue, setFxValue] = useState("");
+  const [fxDraft, setFxDraft] = useState(null);
+  const handleSelectionChange = useCallback((_sheetId, sel) => {
+    setSelection({ row: [...sel.row], column: [...sel.column] });
+    const wb = wbRef.current;
+    const [r, c] = [sel.row[0], sel.column[0]];
+    const bl = wb?.getCellValue?.(r, c, { type: "bl" });
+    setBoldOn(bl === 1 || bl === "1");
+    const f = wb?.getCellValue?.(r, c, { type: "f" });
+    const v = wb?.getCellValue?.(r, c);
+    setFxValue(typeof f === "string" && f ? plainFormula(f) : v == null ? "" : String(v));
+    setFxDraft(null);
+    setSelHasMerge(wb ? selectionHasMerge(wb, sel) : false);
+  }, []);
+  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 applyNumberFormat = (fa) => {
+    const wb = wbRef.current;
+    const sel = wb?.getSelection?.();
+    if (!wb || !sel?.length) return;
+    const isDate = fa === "yyyy-mm-dd";
+    const calls = [];
+    sel.forEach((s) => {
+      for (let r = s.row[0]; r <= s.row[1]; r++) {
+        for (let c = s.column[0]; c <= s.column[1]; c++) {
+          const v = wb.getCellValue?.(r, c);
+          const numeric = v != null && v !== "" && Number.isFinite(Number(v));
+          const t2 = isDate ? "d" : fa === "General" ? numeric ? "n" : "g" : "n";
+          calls.push({ name: "setCellFormat", args: [r, c, "ct", { fa, t: t2 }] });
+        }
+      }
+    });
+    wb.batchCallApis(calls);
+  };
+  const mergeSelection = () => {
+    const sel = wbRef.current?.getSelection?.();
+    if (!sel?.length) return;
+    wbRef.current?.mergeCells(sel, "merge-all");
+    setSelHasMerge(true);
+  };
+  const unmergeSelection = () => {
+    const sel = wbRef.current?.getSelection?.();
+    if (!sel?.length) return;
+    wbRef.current?.cancelMerge(sel);
+    setSelHasMerge(false);
+  };
+  const insertQuickFormula = (fn) => {
+    const wb = wbRef.current;
+    const sel = wb?.getSelection?.()?.[0];
+    if (!wb || !sel) return;
+    const [r1, r2] = [sel.row[0], sel.row[1]];
+    const [c1, c2] = [sel.column[0], sel.column[1]];
+    const singleRow = r1 === r2;
+    const [tr, tc] = singleRow ? [r1, c2 + 1] : [r2 + 1, c1];
+    const sheet = wb.getSheet?.();
+    if (tr >= (sheet?.row ?? 0) || tc >= (sheet?.column ?? 0)) return;
+    wb.setCellValue(tr, tc, `=${fn}(${toA1(r1, c1)}:${toA1(r2, c2)})`);
+  };
+  const commitFormulaBar = () => {
+    const wb = wbRef.current;
+    if (!wb || !selection || fxDraft == null) return;
+    wb.setCellValue(selection.row[0], selection.column[0], fxDraft);
+    setFxValue(fxDraft);
+    setFxDraft(null);
+  };
+  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(() => {
+    mountEcho.current = 1;
+    setFrozen(!viewActive && hasSheet && !!artifact.data.sheet?.[0]?.frozen);
+    setSelection(null);
+    setBoldOn(false);
+    setSelHasMerge(false);
+    setFxValue("");
+    setFxDraft(null);
+  }, [wbKey]);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx("div", { className: "cv-sheet cv-sheet--empty", children: t("loadingSheet") });
+  }
+  if (!hasSheet && columns.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "cv-sheet cv-sheet--empty", children: t("waitingData") });
+  }
+  if (!hasSheet && !formulasReady) {
+    return /* @__PURE__ */ jsx("div", { className: "cv-sheet cv-sheet--empty", children: t("calculating") });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "cv-sheet-panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "cv-sheet-tools cv-ribbon", children: [
+      /* @__PURE__ */ jsxs(RibbonGroup, { label: t("groupInsert"), children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-ribbon__btn", onClick: () => insert("column"), children: t("addColumn") }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-ribbon__btn", onClick: () => insert("row"), children: t("addRow") })
+      ] }),
+      /* @__PURE__ */ jsxs(RibbonGroup, { label: t("groupFont"), children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `cv-ribbon__btn cv-ribbon__btn--glyph cv-ribbon__bold${boldOn ? " is-on" : ""}`,
+            title: t("bold"),
+            "aria-pressed": boldOn,
+            disabled: !selection,
+            onClick: toggleBold,
+            children: t("boldGlyph")
+          }
+        ),
+        /* @__PURE__ */ jsxs("label", { className: `cv-ribbon__swatch${!selection ? " is-disabled" : ""}`, title: t("textColor"), children: [
+          /* @__PURE__ */ jsx("span", { className: "cv-ribbon__swatch-glyph", children: t("textGlyph") }),
+          /* @__PURE__ */ jsx("span", { className: "cv-ribbon__swatch-bar", style: { background: textColor } }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              className: "cv-sheet-tools__color cv-sheet-tools__color--text",
+              disabled: !selection,
+              value: textColor,
+              onChange: (e) => {
+                setTextColor(e.target.value);
+                applyFormat("fc", e.target.value);
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: `cv-ribbon__swatch${!selection ? " is-disabled" : ""}`, title: t("fillColor"), children: [
+          /* @__PURE__ */ jsx("span", { className: "cv-ribbon__swatch-glyph", children: /* @__PURE__ */ jsx(FillIcon, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "cv-ribbon__swatch-bar", style: { background: fillColor } }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              className: "cv-sheet-tools__color cv-sheet-tools__color--fill",
+              disabled: !selection,
+              value: fillColor,
+              onChange: (e) => {
+                setFillColor(e.target.value);
+                applyFormat("bg", e.target.value);
+              }
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(RibbonGroup, { label: t("groupAlign"), children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-ribbon__btn cv-ribbon__btn--icon cv-sheet-tools__align", title: t("alignLeft"), disabled: !selection, onClick: () => applyFormat("ht", 1), children: /* @__PURE__ */ jsx(AlignIcon, { mode: "left" }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-ribbon__btn cv-ribbon__btn--icon", title: t("alignCenter"), disabled: !selection, onClick: () => applyFormat("ht", 0), children: /* @__PURE__ */ jsx(AlignIcon, { mode: "center" }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-ribbon__btn cv-ribbon__btn--icon", title: t("alignRight"), disabled: !selection, onClick: () => applyFormat("ht", 2), children: /* @__PURE__ */ jsx(AlignIcon, { mode: "right" }) }),
+        /* @__PURE__ */ jsx("span", { className: "cv-ribbon__gap" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "cv-ribbon__btn cv-sheet-tools__merge",
+            title: t("mergeTip"),
+            disabled: !selection || selection.row[0] === selection.row[1] && selection.column[0] === selection.column[1],
+            onClick: mergeSelection,
+            children: t("mergeCells")
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-ribbon__btn cv-sheet-tools__unmerge", title: t("unmergeTip"), disabled: !selHasMerge, onClick: unmergeSelection, children: t("unmergeCells") })
+      ] }),
+      /* @__PURE__ */ jsx(RibbonGroup, { label: t("groupNumber"), children: /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "cv-ribbon__select cv-sheet-tools__numfmt",
+          value: "",
+          title: t("numberFormatTip"),
+          disabled: !selection,
+          onChange: (e) => {
+            if (e.target.value) applyNumberFormat(e.target.value);
+          },
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: t("numberFormat") }),
+            NUMBER_FORMATS.map((f) => /* @__PURE__ */ jsx("option", { value: f.fa, children: t(f.labelKey) + f.suffix }, f.fa))
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(RibbonGroup, { label: t("groupEdit"), children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "cv-ribbon__select cv-sheet-tools__fx",
+            value: "",
+            title: t("quickFunctionTip"),
+            disabled: !selection,
+            onChange: (e) => {
+              if (e.target.value) insertQuickFormula(e.target.value);
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: t("autoSum") }),
+              QUICK_FUNCTIONS.map((fn) => /* @__PURE__ */ jsx("option", { value: fn, children: fn }, fn))
+            ]
+          }
+        ),
+        columns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "cv-ribbon__select cv-sheet-tools__sort",
+              value: sortCol,
+              title: t("sortByColumn"),
+              onChange: (e) => setSortCol(e.target.value),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: t("sortBy") }),
+                columns.map((c) => /* @__PURE__ */ jsx("option", { value: c.key, children: c.label ?? c.key }, c.key))
+              ]
+            }
+          ),
+          sortCol && /* @__PURE__ */ jsx("button", { type: "button", className: "cv-ribbon__btn cv-ribbon__btn--icon", title: sortDir === 1 ? t("ascending") : t("descending"), onClick: () => setSortDir((d) => d === 1 ? -1 : 1), children: sortDir === 1 ? "\u25B2" : "\u25BC" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "cv-ribbon__input cv-sheet-tools__filter",
+              value: filter,
+              placeholder: t("filterRows"),
+              onChange: (e) => setFilter(e.target.value),
+              title: t("filterTip")
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(RibbonGroup, { label: t("groupView"), children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `cv-ribbon__btn cv-sheet-tools__freeze${frozen ? " is-on" : ""}`,
+            title: frozen ? t("freezeOffTip") : t("freezeOnTip"),
+            "aria-pressed": frozen,
+            onClick: toggleFreeze,
+            children: t("freezeHeader")
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-ribbon__btn cv-sheet-tools__clean", title: t("cleanStylingTip"), onClick: cleanStyling, children: t("cleanStyling") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "cv-sheet-fxbar", children: [
+      /* @__PURE__ */ jsx("span", { className: "cv-sheet-fxbar__cell", children: selection ? toA1(selection.row[0], selection.column[0]) : "\u2014" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "cv-sheet-fxbar__input",
+          value: fxDraft ?? fxValue,
+          placeholder: t("fxPlaceholder"),
+          disabled: !selection,
+          onChange: (e) => setFxDraft(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              commitFormulaBar();
+            } else if (e.key === "Escape") {
+              setFxDraft(null);
+            }
+          },
+          title: "Formula bar"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "cv-sheet", ref: rootRef, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "cv-sheet--empty", children: t("loading") }), children: /* @__PURE__ */ jsx(Workbook, { ref: wbRef, data: initialData, onChange: handleChange, hooks: workbookHooks }, wbKey) }) })
+  ] });
+}
+
+export { TableRenderer };

package/dist/{chunk-UL5F66PN.js → chunk-FSFOURG5.js}

@@ -1,4 +1,4 @@
-import { useCanvasStore } from './chunk-S54GJDSJ.js';
+import { useCanvasStore } from './chunk-ZLXAWRUP.js';
 import { useCallback } from 'react';
 
 function useArtifactPatch(id) {