@ricsam/react-spreadsheets 0.0.2 → 0.0.4

package/dist/cjs/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@ricsam/react-spreadsheets",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "commonjs"
 }

package/dist/mjs/lib.mjs

@@ -69,6 +69,85 @@ function useColorScheme(element) {
   return scheme;
 }
 
+// src/utils/contrast-text.ts
+var DARK_INK = "#101828";
+var LIGHT_INK = "#ffffff";
+var NAMED_COLORS = {
+  white: [255, 255, 255],
+  black: [0, 0, 0],
+  red: [255, 0, 0],
+  green: [0, 128, 0],
+  blue: [0, 0, 255],
+  yellow: [255, 255, 0],
+  orange: [255, 165, 0],
+  purple: [128, 0, 128],
+  gray: [128, 128, 128],
+  grey: [128, 128, 128],
+  silver: [192, 192, 192]
+};
+var clamp255 = (value) => Math.min(255, Math.max(0, value));
+function parseCssColor(input) {
+  const value = input.trim().toLowerCase();
+  if (!value || value === "transparent" || value === "currentcolor" || value === "inherit") {
+    return;
+  }
+  if (value.includes("var(") || value.includes("color-mix(") || value.includes("gradient")) {
+    return;
+  }
+  const named = NAMED_COLORS[value];
+  if (named) {
+    return { r: named[0], g: named[1], b: named[2], a: 1 };
+  }
+  if (value.startsWith("#")) {
+    const hex = value.slice(1);
+    const expand = (part) => parseInt(part + part, 16);
+    if (hex.length === 3 || hex.length === 4) {
+      const r = expand(hex[0]);
+      const g = expand(hex[1]);
+      const b = expand(hex[2]);
+      const a = hex.length === 4 ? expand(hex[3]) / 255 : 1;
+      return Number.isNaN(r + g + b) ? undefined : { r, g, b, a };
+    }
+    if (hex.length === 6 || hex.length === 8) {
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+      return Number.isNaN(r + g + b) ? undefined : { r, g, b, a };
+    }
+    return;
+  }
+  const rgbMatch = value.match(/^rgba?\(([^)]+)\)$/);
+  if (rgbMatch) {
+    const parts = rgbMatch[1].split(/[\s,/]+/).filter(Boolean);
+    if (parts.length < 3)
+      return;
+    const toChannel = (part) => part.endsWith("%") ? parseFloat(part) / 100 * 255 : parseFloat(part);
+    const r = toChannel(parts[0]);
+    const g = toChannel(parts[1]);
+    const b = toChannel(parts[2]);
+    const alphaPart = parts[3];
+    const a = alphaPart === undefined ? 1 : alphaPart.endsWith("%") ? parseFloat(alphaPart) / 100 : parseFloat(alphaPart);
+    if ([r, g, b, a].some((channel) => Number.isNaN(channel)))
+      return;
+    return { r: clamp255(r), g: clamp255(g), b: clamp255(b), a };
+  }
+  return;
+}
+function relativeLuminance({ r, g, b }) {
+  const channel = (value) => {
+    const srgb = value / 255;
+    return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+function getContrastingTextColor(background) {
+  const color = parseCssColor(background);
+  if (!color || color.a < 0.5)
+    return;
+  return relativeLuminance(color) > 0.45 ? DARK_INK : LIGHT_INK;
+}
+
 // src/utils/cn.ts
 function cn(...values) {
   const out = [];
@@ -1247,16 +1326,27 @@ var resizeCellSnapAnchorToNearestEdges = (anchor, rect, handle, columnWidths, ro
 
 // src/spreadsheet/spreadsheet.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var resolveGridLineColor = (element, colorScheme) => {
-  const fallback = colorScheme === "dark" ? "#4b5563" : "#e1e5e9";
-  if (!element || typeof getComputedStyle !== "function") {
+var resolveGridLineColor = (probe, colorScheme) => {
+  const fallback = colorScheme === "dark" ? "#232c3d" : "#e8ebf1";
+  if (!probe || typeof getComputedStyle !== "function") {
     return fallback;
   }
-  const declared = getComputedStyle(element).getPropertyValue("--rsp-gridline").trim();
-  if (!declared || declared.includes("light-dark(")) {
+  const resolved = getComputedStyle(probe).color?.trim();
+  if (!resolved || resolved.includes("light-dark(") || resolved === "rgba(0, 0, 0, 0)") {
     return fallback;
   }
-  return declared;
+  return resolved;
+};
+var withReadableTextColor = (style) => {
+  if (!style?.backgroundColor || style.color)
+    return style;
+  const background = style.backgroundColor;
+  if (typeof background !== "string")
+    return style;
+  const color = getContrastingTextColor(background);
+  if (!color)
+    return style;
+  return { ...style, color };
 };
 var hasBorderStyle = (style) => Boolean(style?.borderColor || style?.borderTopColor || style?.borderRightColor || style?.borderBottomColor || style?.borderLeftColor);
 var CellComponent = React2.memo(({
@@ -1299,7 +1389,7 @@ var CellComponent = React2.memo(({
     isSelected,
     isBeingEdited: isBeingEdited || false
   };
-  const customStyle = customCellStyle?.(cellStyleCallbackData);
+  const customStyle = withReadableTextColor(customCellStyle?.(cellStyleCallbackData));
   const canHaveFillHandle = useSelectionManager(selectionManager, () => {
     return selectionManager.canCellHaveFillHandle({
       row: rowIndex,
@@ -1331,7 +1421,8 @@ var CellComponent = React2.memo(({
       top: y,
       width: getColumnWidth(col) - 1,
       height: getRowHeight(row) - 1,
-      ...customStyle
+      ...customStyle,
+      ...isBeingEdited ? { backgroundColor: undefined, color: undefined } : null
     },
     children: [
       isBeingEdited ? /* @__PURE__ */ jsx3("textarea", {
@@ -1581,6 +1672,7 @@ var Spreadsheet = forwardRef(({
   const [{ width, height }, containerRef] = useResizeObserver();
   const [containerDivRef, setContainerDivRef] = useState4(null);
   const colorScheme = useColorScheme(containerDivRef);
+  const gridLineProbeRef = useRef3(null);
   const selectionManager = useInitializeSelectionManager({
     getNumCols: () => ({ type: "infinity" }),
     getNumRows: () => ({ type: "infinity" }),
@@ -1774,7 +1866,7 @@ var Spreadsheet = forwardRef(({
     if (!ctx)
       return;
     ctx.clearRect(0, 0, width, height);
-    ctx.strokeStyle = resolveGridLineColor(canvasRef.current, colorScheme);
+    ctx.strokeStyle = resolveGridLineColor(gridLineProbeRef.current, colorScheme);
     ctx.lineWidth = 1;
     let x = gridDims.headerWidth;
     let colIndex = 0;
@@ -2522,6 +2614,7 @@ var Spreadsheet = forwardRef(({
   }), [selectionManager]);
   return /* @__PURE__ */ jsx3("div", {
     className: cn("rsp-root", className),
+    "data-rsp-scheme": colorScheme,
     style: { position: "relative", ...style },
     ...containerProps,
     children: /* @__PURE__ */ jsx3("div", {
@@ -2537,6 +2630,18 @@ var Spreadsheet = forwardRef(({
         },
         tabIndex: 0,
         children: [
+          /* @__PURE__ */ jsx3("span", {
+            ref: gridLineProbeRef,
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              width: 0,
+              height: 0,
+              visibility: "hidden",
+              pointerEvents: "none",
+              color: "var(--rsp-gridline)"
+            }
+          }),
           /* @__PURE__ */ jsx3("canvas", {
             ref: canvasRef,
             className: "rsp-canvas",
@@ -2716,7 +2821,15 @@ import {
   parseCellReference as parseCellReference2,
   getCellReference as getCellReference3
 } from "@ricsam/formula-engine";
-import React3, { useCallback as useCallback4, useRef as useRef4, useState as useState5 } from "react";
+import React3, { useCallback as useCallback4, useRef as useRef4, useState as useState6 } from "react";
+
+// src/utils/use-scheme-root.ts
+import { useState as useState5 } from "react";
+function useSchemeRoot() {
+  const [element, setElement] = useState5(null);
+  const scheme = useColorScheme(element);
+  return { ref: setElement, "data-rsp-scheme": scheme };
+}
 
 // src/workbook/border-sides.ts
 function normalizeBorderSides(sides, defaultAllWhenUnset = false) {
@@ -3122,7 +3235,7 @@ var MinusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsx4("svg", {
   })
 });
 function useEngine(engine) {
-  const [state, setState] = useState5(() => engine.getState());
+  const [state, setState] = useState6(() => engine.getState());
   React3.useEffect(() => {
     return engine.onUpdate(() => {
       setState(engine.getState());
@@ -3227,7 +3340,8 @@ function FormulaSheet({
   showFormulas = false,
   ...rest
 }) {
-  const [selectedArea, setSelectedArea] = useState5(null);
+  const schemeRoot = useSchemeRoot();
+  const [selectedArea, setSelectedArea] = useState6(null);
   const clipboardManager = React3.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
   const state = useEngine(engine);
   const sheet = state.workbooks.get(workbookName)?.sheets.get(sheetName);
@@ -3372,6 +3486,7 @@ function FormulaSheet({
   if (!sheet) {
     return /* @__PURE__ */ jsxs3("div", {
       className: "rsp-root rsp-workbook",
+      ...schemeRoot,
       children: [
         toolbar,
         /* @__PURE__ */ jsx4("div", {
@@ -3382,6 +3497,7 @@ function FormulaSheet({
   }
   return /* @__PURE__ */ jsxs3("div", {
     className: "rsp-root rsp-workbook",
+    ...schemeRoot,
     children: [
       toolbar,
       /* @__PURE__ */ jsx4("div", {
@@ -3452,32 +3568,32 @@ function FormulaSheet({
             const isLastColumn = cell.colIndex === tableInfo.start.colIndex + tableInfo.headers.size - 1;
             const isLastRow = tableInfo.endRow.type === "number" ? cell.rowIndex === tableInfo.endRow.value : false;
             const style = {
-              border: "1px solid var(--table-border-light)"
+              border: "1px solid var(--rsp-table-border-light)"
             };
             if (isHeaderRow) {
-              style.backgroundColor = "var(--table-header-bg)";
-              style.color = "var(--table-header-color)";
+              style.backgroundColor = "var(--rsp-table-header-bg)";
+              style.color = "var(--rsp-table-header-color)";
               style.fontWeight = "bold";
-              style.borderBottom = "2px solid var(--table-header-border)";
+              style.borderBottom = "2px solid var(--rsp-table-header-border)";
             } else {
               const dataRowIndex = cell.rowIndex - tableInfo.start.rowIndex - 1;
               if (dataRowIndex % 2 === 0) {
-                style.backgroundColor = "var(--table-even-row-bg)";
+                style.backgroundColor = "var(--rsp-table-even-row-bg)";
               } else {
-                style.backgroundColor = "var(--table-odd-row-bg)";
+                style.backgroundColor = "var(--rsp-table-odd-row-bg)";
               }
             }
             if (isFirstColumn) {
-              style.borderLeft = "2px solid var(--table-border-color)";
+              style.borderLeft = "2px solid var(--rsp-table-border-color)";
             }
             if (isLastColumn) {
-              style.borderRight = "2px solid var(--table-border-color)";
+              style.borderRight = "2px solid var(--rsp-table-border-color)";
             }
             if (isHeaderRow) {
-              style.borderTop = "2px solid var(--table-border-color)";
+              style.borderTop = "2px solid var(--rsp-table-border-color)";
             }
             if (isLastRow) {
-              style.borderBottom = "2px solid var(--table-border-color)";
+              style.borderBottom = "2px solid var(--rsp-table-border-color)";
             }
             if (conditionalStyle?.backgroundColor) {
               style.backgroundColor = conditionalStyle.backgroundColor;
@@ -3613,14 +3729,15 @@ function FormulaWorkbook({
   showFormulas = false,
   ...rest
 }) {
+  const schemeRoot = useSchemeRoot();
   const state = useEngine(engine);
-  const [renamingSheet, setRenamingSheet] = useState5(null);
-  const [newSheetName, setNewSheetName] = useState5("");
-  const [spreadsheetZoom, setSpreadsheetZoom] = useState5(1);
+  const [renamingSheet, setRenamingSheet] = useState6(null);
+  const [newSheetName, setNewSheetName] = useState6("");
+  const [spreadsheetZoom, setSpreadsheetZoom] = useState6(1);
   const renameCommittedRef = useRef4(false);
   const clipboardManager = React3.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
   const sheetNames = engine.getOrderedSheetNames(workbookName);
-  const [internalActiveSheet, setInternalActiveSheet] = useState5(() => {
+  const [internalActiveSheet, setInternalActiveSheet] = useState6(() => {
     return sheetNames[0] || "";
   });
   const isControlledRef = useRef4(controlledActiveSheet !== undefined);
@@ -3719,6 +3836,7 @@ function FormulaWorkbook({
   };
   return /* @__PURE__ */ jsxs3("div", {
     className: "rsp-root rsp-workbook",
+    ...schemeRoot,
     children: [
       toolbar,
       /* @__PURE__ */ jsxs3("div", {
@@ -3967,6 +4085,7 @@ export {
   getCellReference,
   getCellSnapAnchorFromRect,
   getColumnEdgePosition,
+  getContrastingTextColor,
   getNearestColumnEdgeIndex,
   getNearestRowEdgeIndex,
   getRectFromCellSnapAnchor,
@@ -3980,7 +4099,9 @@ export {
   normalizeCellSnapAnchor,
   onCellEditError,
   parseCellReference,
+  parseCssColor,
   queueCellEditError,
+  relativeLuminance,
   resizeCellSnapAnchorToNearestEdges,
   rowToLetter,
   useClickAway,
@@ -3988,4 +4109,4 @@ export {
   useResizeObserver
 };
 
-//# debugId=FCE294496834A26064756E2164756E21
+//# debugId=93A3B97B45C8788264756E2164756E21