@particle-academy/fancy-sheets 0.6.3 → 0.7.0

package/dist/index.cjs

@@ -1349,6 +1349,8 @@ function reducer(state, action) {
       const sheet = getActiveSheet(state);
       const existing = sheet.cells[action.address];
       if (existing?.format) cellData.format = existing.format;
+      if (existing?.meta) cellData.meta = existing.meta;
+      if (existing?.comment) cellData.comment = existing.comment;
       const updatedWorkbook = updateActiveSheet(state, (s) => ({
         ...s,
         cells: { ...s.cells, [action.address]: cellData }
@@ -1805,9 +1807,11 @@ var Cell = React.memo(function Cell2({ address, row, col }) {
     getColumnWidth,
     isCellSelected,
     isCellActive,
+    highlights,
     _isDragging
   } = useSpreadsheet();
   const cell = activeSheet.cells[address];
+  const highlight = highlights[address];
   const isActive = isCellActive(address);
   const isSelected = isCellSelected(address);
   const isEditing = editingCell === address;
@@ -1875,11 +1879,13 @@ var Cell = React.memo(function Cell2({ address, row, col }) {
       "data-fancy-sheets-cell": "",
       "data-selected": isSelected || void 0,
       "data-active": isActive || void 0,
+      "data-highlighted": !!highlight || void 0,
       role: "gridcell",
       className: reactFancy.cn(
         "relative flex items-center truncate border-r border-b border-zinc-200 bg-white px-1.5 text-[13px] select-none dark:border-zinc-700 dark:bg-zinc-900",
         isActive && "ring-2 ring-inset ring-blue-500",
-        isSelected && !isActive && "bg-blue-50 dark:bg-blue-950/40"
+        isSelected && !isActive && "bg-blue-50 dark:bg-blue-950/40",
+        cell?.format?.className
       ),
       style: { width, minWidth: width, height: rowHeight, ...formatStyle },
       onMouseDown: handleMouseDown,
@@ -1893,6 +1899,27 @@ var Cell = React.memo(function Cell2({ address, row, col }) {
       },
       onDoubleClick: handleDoubleClick,
       children: [
+        highlight && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0",
+            style: {
+              outline: `2px solid ${highlight.color}`,
+              outlineOffset: "-2px",
+              backgroundColor: highlight.backgroundColor ?? (highlight.color.startsWith("#") ? `${highlight.color}1A` : void 0)
+            },
+            "aria-hidden": true
+          }
+        ),
+        highlight?.label && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "pointer-events-none absolute top-0 left-0 z-[1] px-0.5 text-[8px] font-bold leading-none text-white",
+            style: { backgroundColor: highlight.color },
+            "aria-hidden": true,
+            children: highlight.label
+          }
+        ),
         !isEditing && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: displayValue }),
         comment && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -2588,7 +2615,9 @@ function SpreadsheetRoot({
   defaultColumnWidth = 100,
   rowHeight = 28,
   readOnly = false,
-  contextMenuItems
+  contextMenuItems,
+  highlights,
+  onActiveCellChange
 }) {
   const { state, actions } = useSpreadsheetStore(data ?? defaultData);
   const onChangeRef = React.useRef(onChange);
@@ -2634,7 +2663,15 @@ function SpreadsheetRoot({
     (address) => state.selection.activeCell === address,
     [state.selection.activeCell]
   );
+  const onActiveCellChangeRef = React.useRef(onActiveCellChange);
+  onActiveCellChangeRef.current = onActiveCellChange;
+  React.useEffect(() => {
+    const addr = state.selection.activeCell;
+    const cell = activeSheet.cells[addr];
+    onActiveCellChangeRef.current?.(addr, cell);
+  }, [state.selection.activeCell, activeSheet]);
   const isDraggingRef = React.useRef(false);
+  const highlightsResolved = highlights ?? {};
   const ctx = React.useMemo(
     () => ({
       workbook: state.workbook,
@@ -2654,9 +2691,10 @@ function SpreadsheetRoot({
       isCellSelected,
       isCellActive,
       contextMenuItems,
+      highlights: highlightsResolved,
       _isDragging: isDraggingRef
     }),
-    [state, activeSheet, columnCount, rowCount, defaultColumnWidth, rowHeight, readOnly, actions, getColumnWidth, isCellSelected, isCellActive, contextMenuItems]
+    [state, activeSheet, columnCount, rowCount, defaultColumnWidth, rowHeight, readOnly, actions, getColumnWidth, isCellSelected, isCellActive, contextMenuItems, highlightsResolved]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(SpreadsheetContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -2673,7 +2711,7 @@ var Spreadsheet = Object.assign(SpreadsheetRoot, {
   Grid: SpreadsheetGrid,
   SheetTabs: SpreadsheetSheetTabs
 });
-function Sheet({ data, onChange, contextMenuItems, ...props }) {
+function Sheet({ data, onChange, contextMenuItems, highlights, onActiveCellChange, ...props }) {
   const workbook = React.useMemo(
     () => data ? { sheets: [data], activeSheetId: data.id } : void 0,
     [data]
@@ -2682,7 +2720,7 @@ function Sheet({ data, onChange, contextMenuItems, ...props }) {
     if (!onChange) return void 0;
     return (wb) => onChange(wb.sheets[0]);
   }, [onChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet, { data: workbook, onChange: handleChange, contextMenuItems, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.Grid, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet, { data: workbook, onChange: handleChange, contextMenuItems, highlights, onActiveCellChange, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.Grid, {}) });
 }
 Sheet.displayName = "Sheet";
 function SheetWorkbook({
@@ -2691,9 +2729,11 @@ function SheetWorkbook({
   toolbarExtra,
   toolbarButtons,
   contextMenuItems,
+  highlights,
+  onActiveCellChange,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Spreadsheet, { ...props, contextMenuItems, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Spreadsheet, { ...props, contextMenuItems, highlights, onActiveCellChange, children: [
     !hideToolbar && /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.Toolbar, { extra: toolbarExtra, buttons: toolbarButtons }),
     /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.Grid, {}),
     !hideTabs && /* @__PURE__ */ jsxRuntime.jsx(Spreadsheet.SheetTabs, {})