@ricsam/react-spreadsheets 0.0.2 → 0.0.4

package/README.md

@@ -88,11 +88,11 @@ top of `FormulaSheet`.
 
 ## Theming
 
-All colors, fonts and sizes are CSS custom properties declared on `.rsp-root`.
-Override them anywhere in your cascade:
+All colors, fonts and sizes are CSS custom properties declared on `:root`, so
+you can override them from **any** ancestor of the grid:
 
 ```css
-.rsp-root {
+.my-panel {
   --rsp-accent: #7c3aed;
   --rsp-bg: #ffffff;
   --rsp-header-bg: #f4f4f5;
@@ -100,9 +100,42 @@ Override them anywhere in your cascade:
 }
 ```
 
-Light and dark are resolved automatically with `light-dark()`. To pin a subtree
-to one mode, set `color-scheme: light` (or `dark`) on `.rsp-root`; canvas
-gridlines follow the same setting.
+### Light and dark
+
+By default the grid follows the user's OS preference.
+
+The grid deliberately does **not** declare `color-scheme` on `.rsp-root`, so a
+pin you set on an ancestor is respected. Pin a subtree with plain CSS:
+
+```css
+.workbook-stage { color-scheme: light; } /* always light */
+.workbook-stage { color-scheme: dark; }  /* always dark  */
+```
+
+or with the bundled helper classes:
+
+```tsx
+<FormulaWorkbook className="rsp-theme-dark" ... />
+```
+
+Canvas gridlines and every DOM surface follow the same resolved scheme. The
+component resolves the inherited `color-scheme` and reflects it on the grid root
+as `data-rsp-scheme`, which drives the `--rsp-light` / `--rsp-dark` token
+switches.
+
+> **Note** — the stylesheet intentionally avoids `light-dark()`. Bundlers that
+> target browsers without native support (Vite's Lightning CSS, for example)
+> lower it to switch variables that only exist next to a `color-scheme`
+> declaration, which makes shared-root tokens compute to an invalid value — in
+> production builds only. An equivalent space-toggle is used instead.
+
+### Cell fills stay readable
+
+A `backgroundColor` coming from your document model is usually a single literal
+color with no dark-mode variant. To stop light fills from pairing with the dark
+theme's near-white text, the grid derives a readable ink for any cell that sets
+a background but no explicit `color`. Set `color` yourself to opt out, and use
+`getContrastingTextColor` if you want the same behaviour elsewhere.
 
 Per-cell styling is done in JS:
 

package/dist/cjs/lib.cjs

@@ -92,6 +92,7 @@ __export(exports_lib, {
   getCellReference: () => getCellReference,
   getCellSnapAnchorFromRect: () => getCellSnapAnchorFromRect,
   getColumnEdgePosition: () => getColumnEdgePosition,
+  getContrastingTextColor: () => getContrastingTextColor,
   getNearestColumnEdgeIndex: () => getNearestColumnEdgeIndex,
   getNearestRowEdgeIndex: () => getNearestRowEdgeIndex,
   getRectFromCellSnapAnchor: () => getRectFromCellSnapAnchor,
@@ -105,7 +106,9 @@ __export(exports_lib, {
   normalizeCellSnapAnchor: () => normalizeCellSnapAnchor,
   onCellEditError: () => onCellEditError,
   parseCellReference: () => parseCellReference,
+  parseCssColor: () => parseCssColor,
   queueCellEditError: () => queueCellEditError,
+  relativeLuminance: () => relativeLuminance,
   resizeCellSnapAnchorToNearestEdges: () => resizeCellSnapAnchorToNearestEdges,
   rowToLetter: () => rowToLetter,
   useClickAway: () => useClickAway,
@@ -174,6 +177,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 = [];
@@ -1352,16 +1434,27 @@ var resizeCellSnapAnchorToNearestEdges = (anchor, rect, handle, columnWidths, ro
 
 // src/spreadsheet/spreadsheet.tsx
 var jsx_runtime3 = require("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 = import_react4.default.memo(({
@@ -1404,7 +1497,7 @@ var CellComponent = import_react4.default.memo(({
     isSelected,
     isBeingEdited: isBeingEdited || false
   };
-  const customStyle = customCellStyle?.(cellStyleCallbackData);
+  const customStyle = withReadableTextColor(customCellStyle?.(cellStyleCallbackData));
   const canHaveFillHandle = import_selection_manager.useSelectionManager(selectionManager, () => {
     return selectionManager.canCellHaveFillHandle({
       row: rowIndex,
@@ -1436,7 +1529,8 @@ var CellComponent = import_react4.default.memo(({
       top: y,
       width: getColumnWidth(col) - 1,
       height: getRowHeight(row) - 1,
-      ...customStyle
+      ...customStyle,
+      ...isBeingEdited ? { backgroundColor: undefined, color: undefined } : null
     },
     children: [
       isBeingEdited ? /* @__PURE__ */ jsx_runtime3.jsx("textarea", {
@@ -1686,6 +1780,7 @@ var Spreadsheet = import_react4.forwardRef(({
   const [{ width, height }, containerRef] = useResizeObserver();
   const [containerDivRef, setContainerDivRef] = import_react4.useState(null);
   const colorScheme = useColorScheme(containerDivRef);
+  const gridLineProbeRef = import_react4.useRef(null);
   const selectionManager = import_selection_manager.useInitializeSelectionManager({
     getNumCols: () => ({ type: "infinity" }),
     getNumRows: () => ({ type: "infinity" }),
@@ -1879,7 +1974,7 @@ var Spreadsheet = import_react4.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;
@@ -2627,6 +2722,7 @@ var Spreadsheet = import_react4.forwardRef(({
   }), [selectionManager]);
   return /* @__PURE__ */ jsx_runtime3.jsx("div", {
     className: cn("rsp-root", className),
+    "data-rsp-scheme": colorScheme,
     style: { position: "relative", ...style },
     ...containerProps,
     children: /* @__PURE__ */ jsx_runtime3.jsx("div", {
@@ -2642,6 +2738,18 @@ var Spreadsheet = import_react4.forwardRef(({
         },
         tabIndex: 0,
         children: [
+          /* @__PURE__ */ jsx_runtime3.jsx("span", {
+            ref: gridLineProbeRef,
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              width: 0,
+              height: 0,
+              visibility: "hidden",
+              pointerEvents: "none",
+              color: "var(--rsp-gridline)"
+            }
+          }),
           /* @__PURE__ */ jsx_runtime3.jsx("canvas", {
             ref: canvasRef,
             className: "rsp-canvas",
@@ -2818,7 +2926,15 @@ var Spreadsheet = import_react4.forwardRef(({
 Spreadsheet.displayName = "Spreadsheet";
 // src/workbook/workbook.tsx
 var import_formula_engine2 = require("@ricsam/formula-engine");
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
+
+// src/utils/use-scheme-root.ts
+var import_react5 = require("react");
+function useSchemeRoot() {
+  const [element, setElement] = import_react5.useState(null);
+  const scheme = useColorScheme(element);
+  return { ref: setElement, "data-rsp-scheme": scheme };
+}
 
 // src/workbook/border-sides.ts
 function normalizeBorderSides(sides, defaultAllWhenUnset = false) {
@@ -3224,8 +3340,8 @@ var MinusIcon = ({ className = "", ...props }) => /* @__PURE__ */ jsx_runtime4.j
   })
 });
 function useEngine(engine) {
-  const [state, setState] = import_react5.useState(() => engine.getState());
-  import_react5.default.useEffect(() => {
+  const [state, setState] = import_react6.useState(() => engine.getState());
+  import_react6.default.useEffect(() => {
     return engine.onUpdate(() => {
       setState(engine.getState());
     });
@@ -3329,11 +3445,12 @@ function FormulaSheet({
   showFormulas = false,
   ...rest
 }) {
-  const [selectedArea, setSelectedArea] = import_react5.useState(null);
-  const clipboardManager = import_react5.default.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
+  const schemeRoot = useSchemeRoot();
+  const [selectedArea, setSelectedArea] = import_react6.useState(null);
+  const clipboardManager = import_react6.default.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
   const state = useEngine(engine);
   const sheet = state.workbooks.get(workbookName)?.sheets.get(sheetName);
-  const onCellDataChange = import_react5.useCallback((updatedSpreadsheet) => {
+  const onCellDataChange = import_react6.useCallback((updatedSpreadsheet) => {
     const data = new Map(updatedSpreadsheet);
     data.forEach((value, key) => {
       if (typeof value === "string") {
@@ -3349,7 +3466,7 @@ function FormulaSheet({
     engine.setSheetContent({ sheetName, workbookName }, data);
   }, [sheetName, engine, workbookName]);
   const passedSelectionEffects = selection?.effects;
-  const selectionManagerEffects = import_react5.useCallback((spreadsheetSelectionManager) => {
+  const selectionManagerEffects = import_react6.useCallback((spreadsheetSelectionManager) => {
     const convertSmAreaToSpreadsheetRange = (area) => {
       const rowEnd = area.end.row.type === "infinity" ? {
         type: "infinity",
@@ -3474,6 +3591,7 @@ function FormulaSheet({
   if (!sheet) {
     return /* @__PURE__ */ jsx_runtime4.jsxs("div", {
       className: "rsp-root rsp-workbook",
+      ...schemeRoot,
       children: [
         toolbar,
         /* @__PURE__ */ jsx_runtime4.jsx("div", {
@@ -3484,6 +3602,7 @@ function FormulaSheet({
   }
   return /* @__PURE__ */ jsx_runtime4.jsxs("div", {
     className: "rsp-root rsp-workbook",
+    ...schemeRoot,
     children: [
       toolbar,
       /* @__PURE__ */ jsx_runtime4.jsx("div", {
@@ -3554,32 +3673,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;
@@ -3715,18 +3834,19 @@ function FormulaWorkbook({
   showFormulas = false,
   ...rest
 }) {
+  const schemeRoot = useSchemeRoot();
   const state = useEngine(engine);
-  const [renamingSheet, setRenamingSheet] = import_react5.useState(null);
-  const [newSheetName, setNewSheetName] = import_react5.useState("");
-  const [spreadsheetZoom, setSpreadsheetZoom] = import_react5.useState(1);
-  const renameCommittedRef = import_react5.useRef(false);
-  const clipboardManager = import_react5.default.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
+  const [renamingSheet, setRenamingSheet] = import_react6.useState(null);
+  const [newSheetName, setNewSheetName] = import_react6.useState("");
+  const [spreadsheetZoom, setSpreadsheetZoom] = import_react6.useState(1);
+  const renameCommittedRef = import_react6.useRef(false);
+  const clipboardManager = import_react6.default.useMemo(() => controlledClipboardManager ?? new WorkbookClipboardManager(engine), [controlledClipboardManager, engine]);
   const sheetNames = engine.getOrderedSheetNames(workbookName);
-  const [internalActiveSheet, setInternalActiveSheet] = import_react5.useState(() => {
+  const [internalActiveSheet, setInternalActiveSheet] = import_react6.useState(() => {
     return sheetNames[0] || "";
   });
-  const isControlledRef = import_react5.useRef(controlledActiveSheet !== undefined);
-  import_react5.default.useEffect(() => {
+  const isControlledRef = import_react6.useRef(controlledActiveSheet !== undefined);
+  import_react6.default.useEffect(() => {
     const isCurrentlyControlled = controlledActiveSheet !== undefined;
     if (isControlledRef.current !== isCurrentlyControlled) {
       console.error(`FormulaWorkbook: Component changed from ${isControlledRef.current ? "controlled" : "uncontrolled"} to ${isCurrentlyControlled ? "controlled" : "uncontrolled"} mode. ` + `A component should not switch between controlled and uncontrolled modes. ` + `Decide between using activeSheet and onActiveSheetChange props (controlled) or neither (uncontrolled) for the lifetime of the component.`);
@@ -3734,7 +3854,7 @@ function FormulaWorkbook({
     isControlledRef.current = isCurrentlyControlled;
   }, [controlledActiveSheet]);
   const activeSheet = controlledActiveSheet ?? internalActiveSheet;
-  const handleActiveSheetChange = import_react5.useCallback((sheetName) => {
+  const handleActiveSheetChange = import_react6.useCallback((sheetName) => {
     if (onActiveSheetChange) {
       onActiveSheetChange(sheetName);
     } else {
@@ -3745,16 +3865,16 @@ function FormulaWorkbook({
   const activeSheetSelectedOverlayId = sheetSelectedOverlayIds?.[activeSheet];
   const activeSheetColumnWidths = sheetLayouts?.[activeSheet]?.columnWidths;
   const activeSheetRowHeights = sheetLayouts?.[activeSheet]?.rowHeights;
-  const handleOverlaySelect = import_react5.useCallback((overlayId) => {
+  const handleOverlaySelect = import_react6.useCallback((overlayId) => {
     onOverlaySelect?.(activeSheet, overlayId);
   }, [onOverlaySelect, activeSheet]);
-  const handleOverlayChildrenChange = import_react5.useCallback((children) => {
+  const handleOverlayChildrenChange = import_react6.useCallback((children) => {
     onOverlayChildrenChange?.(activeSheet, children);
   }, [onOverlayChildrenChange, activeSheet]);
-  const handleColumnWidthsChange = import_react5.useCallback((columnWidths) => {
+  const handleColumnWidthsChange = import_react6.useCallback((columnWidths) => {
     onSheetColumnWidthsChange?.(activeSheet, columnWidths);
   }, [activeSheet, onSheetColumnWidthsChange]);
-  const handleRowHeightsChange = import_react5.useCallback((rowHeights) => {
+  const handleRowHeightsChange = import_react6.useCallback((rowHeights) => {
     onSheetRowHeightsChange?.(activeSheet, rowHeights);
   }, [activeSheet, onSheetRowHeightsChange]);
   const addSheet = () => {
@@ -3821,6 +3941,7 @@ function FormulaWorkbook({
   };
   return /* @__PURE__ */ jsx_runtime4.jsxs("div", {
     className: "rsp-root rsp-workbook",
+    ...schemeRoot,
     children: [
       toolbar,
       /* @__PURE__ */ jsx_runtime4.jsxs("div", {
@@ -4026,9 +4147,9 @@ var DEFAULT_ZOOM = 1;
 var MIN_ZOOM = 0.5;
 var MAX_ZOOM = 3;
 // src/utils/use-click-away.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var useClickAway = (ref, callback) => {
-  import_react6.useEffect(() => {
+  import_react7.useEffect(() => {
     const handleClickAway = (event) => {
       if (ref) {
         const away = !ref.contains(event.target);
@@ -4042,4 +4163,4 @@ var useClickAway = (ref, callback) => {
   }, [ref, callback]);
 };
 
-//# debugId=2D3DCCBBF4E8DCA364756E2164756E21
+//# debugId=A383A8C557A8A55164756E2164756E21