@particle-academy/fancy-sheets 0.2.0 → 0.3.1

package/dist/index.cjs

@@ -123,12 +123,41 @@ function lexFormula(input) {
     if (ch >= "A" && ch <= "Z" || ch >= "a" && ch <= "z" || ch === "_") {
       const pos = i;
       i++;
-      while (i < len && (input[i] >= "A" && input[i] <= "Z" || input[i] >= "a" && input[i] <= "z" || input[i] >= "0" && input[i] <= "9" || input[i] === "_")) i++;
-      const word = input.slice(pos, i);
+      while (i < len && (input[i] >= "A" && input[i] <= "Z" || input[i] >= "a" && input[i] <= "z" || input[i] >= "0" && input[i] <= "9" || input[i] === "_" || input[i] === " ")) {
+        if (input[i] === " ") {
+          let lookAhead = i + 1;
+          while (lookAhead < len && input[lookAhead] === " ") lookAhead++;
+          if (lookAhead < len && (input[lookAhead] >= "A" && input[lookAhead] <= "Z" || input[lookAhead] >= "a" && input[lookAhead] <= "z" || input[lookAhead] >= "0" && input[lookAhead] <= "9" || input[lookAhead] === "!")) {
+            i++;
+            continue;
+          }
+          break;
+        }
+        i++;
+      }
+      let word = input.slice(pos, i).trimEnd();
+      i = pos + word.length;
       if (word.toUpperCase() === "TRUE" || word.toUpperCase() === "FALSE") {
         tokens.push({ type: "boolean", value: word.toUpperCase(), position: pos });
         continue;
       }
+      if (i < len && input[i] === "!") {
+        const sheetName = word;
+        i++;
+        const refStart = i;
+        while (i < len && (input[i] >= "A" && input[i] <= "Z" || input[i] >= "a" && input[i] <= "z" || input[i] >= "0" && input[i] <= "9")) i++;
+        const ref1 = input.slice(refStart, i);
+        if (i < len && input[i] === ":") {
+          i++;
+          const ref2Start = i;
+          while (i < len && (input[i] >= "A" && input[i] <= "Z" || input[i] >= "a" && input[i] <= "z" || input[i] >= "0" && input[i] <= "9")) i++;
+          const ref2 = input.slice(ref2Start, i);
+          tokens.push({ type: "sheetRangeRef", value: sheetName + "!" + ref1 + ":" + ref2, position: pos });
+        } else {
+          tokens.push({ type: "sheetCellRef", value: sheetName + "!" + ref1.toUpperCase(), position: pos });
+        }
+        continue;
+      }
       if (i < len && input[i] === ":") {
         const colonPos = i;
         i++;
@@ -272,6 +301,19 @@ function parseFormula(tokens) {
       const parts = t.value.split(":");
       return { type: "rangeRef", start: parts[0], end: parts[1] };
     }
+    if (t.type === "sheetCellRef") {
+      advance();
+      const bangIdx = t.value.indexOf("!");
+      return { type: "sheetCellRef", sheet: t.value.slice(0, bangIdx), address: t.value.slice(bangIdx + 1).toUpperCase() };
+    }
+    if (t.type === "sheetRangeRef") {
+      advance();
+      const bangIdx = t.value.indexOf("!");
+      const sheetName = t.value.slice(0, bangIdx);
+      const rangePart = t.value.slice(bangIdx + 1);
+      const parts = rangePart.split(":");
+      return { type: "sheetRangeRef", sheet: sheetName, start: parts[0].toUpperCase(), end: parts[1].toUpperCase() };
+    }
     if (t.type === "function") {
       const name = advance().value;
       expect("paren", "(");
@@ -1005,7 +1047,7 @@ registerFunction("TYPE", (args) => {
 });
 
 // src/engine/formula/evaluator.ts
-function evaluateAST(node, getCellValue, getRangeValues) {
+function evaluateAST(node, getCellValue, getRangeValues, ctx) {
   switch (node.type) {
     case "number":
       return node.value;
@@ -1015,9 +1057,19 @@ function evaluateAST(node, getCellValue, getRangeValues) {
       return node.value;
     case "cellRef":
       return getCellValue(node.address);
-    case "rangeRef":
+    case "rangeRef": {
       const vals = getRangeValues(node.start, node.end);
       return vals[0] ?? null;
+    }
+    case "sheetCellRef": {
+      if (!ctx?.getSheetCellValue) return "#REF!";
+      return ctx.getSheetCellValue(node.sheet, node.address);
+    }
+    case "sheetRangeRef": {
+      if (!ctx?.getSheetRangeValues) return "#REF!";
+      const vals = ctx.getSheetRangeValues(node.sheet, node.start, node.end);
+      return vals[0] ?? null;
+    }
     case "functionCall": {
       const entry = getFunction(node.name);
       if (!entry) return `#NAME?`;
@@ -1025,7 +1077,11 @@ function evaluateAST(node, getCellValue, getRangeValues) {
         if (arg.type === "rangeRef") {
           return getRangeValues(arg.start, arg.end);
         }
-        const val = evaluateAST(arg, getCellValue, getRangeValues);
+        if (arg.type === "sheetRangeRef") {
+          if (!ctx?.getSheetRangeValues) return ["#REF!"];
+          return ctx.getSheetRangeValues(arg.sheet, arg.start, arg.end);
+        }
+        const val = evaluateAST(arg, getCellValue, getRangeValues, ctx);
         return [val];
       });
       try {
@@ -1035,8 +1091,8 @@ function evaluateAST(node, getCellValue, getRangeValues) {
       }
     }
     case "binaryOp": {
-      const left = evaluateAST(node.left, getCellValue, getRangeValues);
-      const right = evaluateAST(node.right, getCellValue, getRangeValues);
+      const left = evaluateAST(node.left, getCellValue, getRangeValues, ctx);
+      const right = evaluateAST(node.right, getCellValue, getRangeValues, ctx);
       const lNum = typeof left === "number" ? left : Number(left);
       const rNum = typeof right === "number" ? right : Number(right);
       switch (node.operator) {
@@ -1069,7 +1125,7 @@ function evaluateAST(node, getCellValue, getRangeValues) {
       }
     }
     case "unaryOp": {
-      const operand = evaluateAST(node.operand, getCellValue, getRangeValues);
+      const operand = evaluateAST(node.operand, getCellValue, getRangeValues, ctx);
       const num = typeof operand === "number" ? operand : Number(operand);
       if (isNaN(num)) return "#VALUE!";
       return node.operator === "-" ? -num : num;
@@ -1183,7 +1239,7 @@ function getRecalculationOrder(graph) {
 function recalculateWorkbook(workbook) {
   return {
     ...workbook,
-    sheets: workbook.sheets.map(recalculateSheet)
+    sheets: workbook.sheets.map((s) => recalculateSheet(s, workbook.sheets))
   };
 }
 function createInitialState(data) {
@@ -1213,7 +1269,7 @@ function pushUndo(state) {
   if (stack.length > 50) stack.shift();
   return { undoStack: stack, redoStack: [] };
 }
-function recalculateSheet(sheet) {
+function recalculateSheet(sheet, allSheets) {
   const graph = buildDependencyGraph(sheet.cells);
   if (graph.size === 0) return sheet;
   const circular = detectCircularRefs(graph);
@@ -1229,6 +1285,28 @@ function recalculateSheet(sheet) {
     const addresses = expandRange(startAddr, endAddr);
     return addresses.map(getCellValue);
   };
+  const getSheetCellValue = (sheetName, addr) => {
+    if (!allSheets) return "#REF!";
+    const target = allSheets.find((s) => s.name === sheetName || s.id === sheetName);
+    if (!target) return "#REF!";
+    const c = target.cells[addr];
+    if (!c) return null;
+    if (c.formula && c.computedValue !== void 0) return c.computedValue;
+    return c.value;
+  };
+  const getSheetRangeValues = (sheetName, startAddr, endAddr) => {
+    if (!allSheets) return [];
+    const target = allSheets.find((s) => s.name === sheetName || s.id === sheetName);
+    if (!target) return [];
+    const addresses = expandRange(startAddr, endAddr);
+    return addresses.map((a) => {
+      const c = target.cells[a];
+      if (!c) return null;
+      if (c.formula && c.computedValue !== void 0) return c.computedValue;
+      return c.value;
+    });
+  };
+  const ctx = { getSheetCellValue, getSheetRangeValues };
   for (const addr of order) {
     const cell = cells[addr];
     if (!cell?.formula) continue;
@@ -1239,7 +1317,7 @@ function recalculateSheet(sheet) {
     try {
       const tokens = lexFormula(cell.formula);
       const ast = parseFormula(tokens);
-      const result = evaluateAST(ast, getCellValue, getRangeValues);
+      const result = evaluateAST(ast, getCellValue, getRangeValues, ctx);
       cells[addr] = { ...cell, computedValue: result };
     } catch {
       cells[addr] = { ...cell, computedValue: "#ERROR!" };
@@ -1264,7 +1342,7 @@ function reducer(state, action) {
       if (existing?.format) cellData.format = existing.format;
       const workbook = updateActiveSheet(state, (s) => {
         const updated = { ...s, cells: { ...s.cells, [action.address]: cellData } };
-        return recalculateSheet(updated);
+        return recalculateSheet(updated, state.workbook.sheets);
       });
       return { ...state, workbook, ...history };
     }
@@ -1420,6 +1498,20 @@ function reducer(state, action) {
         selection: { activeCell: "A1", ranges: [{ start: "A1", end: "A1" }] },
         editingCell: null
       };
+    case "SET_FROZEN_ROWS": {
+      const workbook = updateActiveSheet(state, (s) => ({
+        ...s,
+        frozenRows: Math.max(0, action.count)
+      }));
+      return { ...state, workbook };
+    }
+    case "SET_FROZEN_COLS": {
+      const workbook = updateActiveSheet(state, (s) => ({
+        ...s,
+        frozenCols: Math.max(0, action.count)
+      }));
+      return { ...state, workbook };
+    }
     case "UNDO": {
       if (state.undoStack.length === 0) return state;
       const prev = state.undoStack[state.undoStack.length - 1];
@@ -1464,6 +1556,8 @@ function useSpreadsheetStore(initialData) {
     addSheet: () => dispatch({ type: "ADD_SHEET" }),
     renameSheet: (sheetId, name) => dispatch({ type: "RENAME_SHEET", sheetId, name }),
     deleteSheet: (sheetId) => dispatch({ type: "DELETE_SHEET", sheetId }),
+    setFrozenRows: (count) => dispatch({ type: "SET_FROZEN_ROWS", count }),
+    setFrozenCols: (count) => dispatch({ type: "SET_FROZEN_COLS", count }),
     setActiveSheet: (sheetId) => dispatch({ type: "SET_ACTIVE_SHEET", sheetId }),
     undo: () => dispatch({ type: "UNDO" }),
     redo: () => dispatch({ type: "REDO" }),
@@ -1507,7 +1601,15 @@ function ColumnResizeHandle({ colIndex }) {
 }
 ColumnResizeHandle.displayName = "ColumnResizeHandle";
 function ColumnHeaders() {
-  const { columnCount, rowHeight, getColumnWidth } = useSpreadsheet();
+  const { columnCount, rowCount, rowHeight, getColumnWidth, selectRange } = useSpreadsheet();
+  const handleColumnClick = react.useCallback(
+    (colIdx) => {
+      const start = toAddress(0, colIdx);
+      const end = toAddress(rowCount - 1, colIdx);
+      selectRange(start, end);
+    },
+    [rowCount, selectRange]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1525,8 +1627,9 @@ function ColumnHeaders() {
         Array.from({ length: columnCount }, (_, i) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "relative flex shrink-0 items-center justify-center border-r border-zinc-300 text-[11px] font-medium text-zinc-500 select-none dark:border-zinc-600 dark:text-zinc-400",
+            className: "relative flex shrink-0 cursor-pointer items-center justify-center border-r border-zinc-300 text-[11px] font-medium text-zinc-500 select-none hover:bg-zinc-200 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-700",
             style: { width: getColumnWidth(i), minWidth: getColumnWidth(i) },
+            onClick: () => handleColumnClick(i),
             children: [
               columnToLetter(i),
               /* @__PURE__ */ jsxRuntime.jsx(ColumnResizeHandle, { colIndex: i })
@@ -1540,23 +1643,67 @@ function ColumnHeaders() {
 }
 ColumnHeaders.displayName = "ColumnHeaders";
 function RowHeader({ rowIndex }) {
-  const { rowHeight } = useSpreadsheet();
+  const { rowHeight, columnCount, selectRange } = useSpreadsheet();
+  const handleClick = react.useCallback(() => {
+    const start = toAddress(rowIndex, 0);
+    const end = toAddress(rowIndex, columnCount - 1);
+    selectRange(start, end);
+  }, [rowIndex, columnCount, selectRange]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "data-fancy-sheets-row-header": "",
-      className: "flex shrink-0 items-center justify-center border-r border-b border-zinc-300 bg-zinc-100 text-[11px] font-medium text-zinc-500 select-none dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-400",
+      className: "flex shrink-0 cursor-pointer items-center justify-center border-r border-b border-zinc-300 bg-zinc-100 text-[11px] font-medium text-zinc-500 select-none hover:bg-zinc-200 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700",
       style: { width: 48, minWidth: 48, height: rowHeight },
+      onClick: handleClick,
       children: rowIndex + 1
     }
   );
 }
 RowHeader.displayName = "RowHeader";
+var EXCEL_EPOCH2 = new Date(1899, 11, 30).getTime();
+function serialToDateStr(serial) {
+  const d = new Date(EXCEL_EPOCH2 + Math.floor(serial) * 864e5);
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function serialToDateTimeStr(serial) {
+  const date = serialToDateStr(serial);
+  const fraction = serial % 1;
+  const totalSeconds = Math.round(fraction * 86400);
+  const h = String(Math.floor(totalSeconds / 3600)).padStart(2, "0");
+  const min = String(Math.floor(totalSeconds % 3600 / 60)).padStart(2, "0");
+  const s = String(totalSeconds % 60).padStart(2, "0");
+  return `${date} ${h}:${min}:${s}`;
+}
+function isDateFormula(formula) {
+  if (!formula) return false;
+  const f = formula.toUpperCase();
+  return /^(TODAY|NOW|DATE|EDATE)\b/.test(f) || /\b(TODAY|NOW|DATE|EDATE)\s*\(/.test(f);
+}
+function formatCellValue(val, cell) {
+  if (val === null || val === void 0) return "";
+  const fmt = cell?.format?.displayFormat;
+  if (typeof val === "number") {
+    if (fmt === "date") return serialToDateStr(val);
+    if (fmt === "datetime") return serialToDateTimeStr(val);
+    if (fmt === "percentage") return (val * 100).toFixed(1) + "%";
+    if (fmt === "currency") return "$" + val.toFixed(2);
+    if (fmt === "auto" || !fmt) {
+      if (cell?.formula && isDateFormula(cell.formula)) {
+        return val % 1 === 0 ? serialToDateStr(val) : serialToDateTimeStr(val);
+      }
+    }
+  }
+  if (typeof val === "boolean") return val ? "TRUE" : "FALSE";
+  return String(val);
+}
 function getCellDisplayValue2(cell) {
   if (!cell) return "";
-  if (cell.formula && cell.computedValue !== void 0) return String(cell.computedValue ?? "");
-  if (cell.value === null) return "";
-  return String(cell.value);
+  const val = cell.formula && cell.computedValue !== void 0 ? cell.computedValue : cell.value;
+  return formatCellValue(val, cell);
 }
 var Cell = react.memo(function Cell2({ address, row, col }) {
   const {
@@ -1852,13 +1999,42 @@ function SpreadsheetGrid({ className }) {
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(ColumnHeaders, {}) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          Array.from({ length: rowCount }, (_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky left-0 z-[5]", children: /* @__PURE__ */ jsxRuntime.jsx(RowHeader, { rowIndex: rowIdx }) }),
-            Array.from({ length: columnCount }, (_2, colIdx) => {
-              const addr = toAddress(rowIdx, colIdx);
-              return /* @__PURE__ */ jsxRuntime.jsx(Cell, { address: addr, row: rowIdx, col: colIdx }, addr);
-            })
-          ] }, rowIdx)),
+          Array.from({ length: rowCount }, (_, rowIdx) => {
+            const isFrozenRow = rowIdx < activeSheet.frozenRows;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex",
+                style: isFrozenRow ? {
+                  position: "sticky",
+                  top: rowHeight + rowIdx * rowHeight,
+                  zIndex: 8,
+                  backgroundColor: "inherit"
+                } : void 0,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky left-0 z-[5]", children: /* @__PURE__ */ jsxRuntime.jsx(RowHeader, { rowIndex: rowIdx }) }),
+                  Array.from({ length: columnCount }, (_2, colIdx) => {
+                    const addr = toAddress(rowIdx, colIdx);
+                    const isFrozenCol = colIdx < activeSheet.frozenCols;
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: isFrozenCol ? {
+                          position: "sticky",
+                          left: 48 + Array.from({ length: colIdx }, (_3, c) => getColumnWidth(c)).reduce((a, b) => a + b, 0),
+                          zIndex: isFrozenRow ? 9 : 6,
+                          backgroundColor: "inherit"
+                        } : void 0,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Cell, { address: addr, row: rowIdx, col: colIdx })
+                      },
+                      addr
+                    );
+                  })
+                ]
+              },
+              rowIdx
+            );
+          }),
           /* @__PURE__ */ jsxRuntime.jsx(SelectionOverlay, {}),
           editorPosition && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -1886,6 +2062,8 @@ function DefaultToolbar() {
     confirmEdit,
     startEdit,
     setCellFormat,
+    setFrozenRows,
+    setFrozenCols,
     undo,
     redo,
     canUndo,
@@ -1957,7 +2135,57 @@ function DefaultToolbar() {
           ] })
         },
         align
-      ))
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: reactFancy.cn(btnClass, activeSheet.frozenRows > 0 && activeBtnClass),
+          onClick: () => {
+            if (activeSheet.frozenRows > 0) {
+              setFrozenRows(0);
+            } else {
+              const row = selection.activeCell.match(/\d+/);
+              setFrozenRows(row ? parseInt(row[0], 10) - 1 || 1 : 1);
+            }
+          },
+          disabled: readOnly,
+          title: activeSheet.frozenRows > 0 ? `Unfreeze rows (${activeSheet.frozenRows} frozen)` : "Freeze rows above current cell",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "4", x2: "21", y2: "4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "14", x2: "21", y2: "14", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "19", x2: "21", y2: "19", strokeDasharray: "3 3" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: reactFancy.cn(btnClass, activeSheet.frozenCols > 0 && activeBtnClass),
+          onClick: () => {
+            if (activeSheet.frozenCols > 0) {
+              setFrozenCols(0);
+            } else {
+              const colMatch = selection.activeCell.match(/^([A-Z]+)/);
+              if (colMatch) {
+                const col = colMatch[1].split("").reduce((acc, ch) => acc * 26 + ch.charCodeAt(0) - 64, 0) - 1;
+                setFrozenCols(col || 1);
+              } else {
+                setFrozenCols(1);
+              }
+            }
+          },
+          disabled: readOnly,
+          title: activeSheet.frozenCols > 0 ? `Unfreeze columns (${activeSheet.frozenCols} frozen)` : "Freeze columns left of current cell",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "3", x2: "4", y2: "21" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", y1: "3", x2: "14", y2: "21", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "19", y1: "3", x2: "19", y2: "21", strokeDasharray: "3 3" })
+          ] })
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-fancy-sheets-formula-bar": "", className: "flex items-center gap-2 border-b border-zinc-200 px-2 py-1 dark:border-zinc-700", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-12 shrink-0 text-center text-[11px] font-medium text-zinc-500 dark:text-zinc-400", children: selection.activeCell }),