react-os-shell 0.1.0

package/dist/chunk-GP4Y3VCB.js

@@ -0,0 +1,806 @@
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/shell/EditableGrid.tsx
+function rangeContains(anchor, end, row, col) {
+  const r1 = Math.min(anchor.row, end.row), r2 = Math.max(anchor.row, end.row);
+  const c1 = Math.min(anchor.col, end.col), c2 = Math.max(anchor.col, end.col);
+  return row >= r1 && row <= r2 && col >= c1 && col <= c2;
+}
+function EditableGrid({ columns, data, onChange, onColumnsChange, fixedRows = false, minRows = 15, maxHeight = "260px", cellStyles, onFocusChange, onSelectionChange }) {
+  const tableRef = useRef(null);
+  const [focus, setFocus] = useState(null);
+  useEffect(() => {
+    onFocusChange?.(focus);
+  }, [focus, onFocusChange]);
+  const [colWidths, setColWidths] = useState({});
+  const resizing = useRef(null);
+  const [rowHeights, setRowHeights] = useState({});
+  const rowResizing = useRef(null);
+  const [dragRow, setDragRow] = useState(null);
+  const [dragOverRow, setDragOverRow] = useState(null);
+  const [dragCol, setDragCol] = useState(null);
+  const [dragOverCol, setDragOverCol] = useState(null);
+  const [editingCell, setEditingCell] = useState(null);
+  const [selAnchor, setSelAnchor] = useState(null);
+  const [selEnd, setSelEnd] = useState(null);
+  useEffect(() => {
+    onSelectionChange?.(selAnchor && selEnd ? { anchor: selAnchor, end: selEnd } : null);
+  }, [selAnchor, selEnd, onSelectionChange]);
+  const dragging = useRef(false);
+  const [fillTarget, setFillTarget] = useState(null);
+  const filling = useRef(false);
+  const selRefForFill = useRef({ a: null, e: null });
+  selRefForFill.current = { a: selAnchor, e: selEnd };
+  const hasRange = selAnchor && selEnd && (selAnchor.row !== selEnd.row || selAnchor.col !== selEnd.col);
+  const rows = [...data];
+  if (!fixedRows) {
+    while (rows.length < minRows) rows.push(Array(columns.length).fill(""));
+  }
+  const updateCell = useCallback((row, col, value) => {
+    const next = rows.map((r) => [...r]);
+    while (next.length <= row) next.push(Array(columns.length).fill(""));
+    while (next[row].length < columns.length) next[row].push("");
+    next[row][col] = value;
+    onChange(next);
+  }, [rows, columns.length, onChange]);
+  const handleMouseDown = useCallback((e, row, col) => {
+    if (e.button !== 0) return;
+    const active = document.activeElement;
+    if (active?.dataset?.row && active?.dataset?.col) {
+      const ar = parseInt(active.dataset.row);
+      const ac = parseInt(active.dataset.col);
+      const val = active.textContent || "";
+      if (val !== (rows[ar]?.[ac] || "")) {
+        const next = rows.map((r) => [...r]);
+        if (next[ar]) {
+          next[ar][ac] = val;
+          onChange(next);
+        }
+      }
+    }
+    dragging.current = true;
+    if (e.shiftKey && selAnchor) {
+      setSelEnd({ row, col });
+    } else {
+      setSelAnchor({ row, col });
+      setSelEnd({ row, col });
+    }
+  }, [rows, onChange, selAnchor]);
+  const handleMouseEnter = useCallback((row, col) => {
+    if (dragging.current) {
+      setSelEnd({ row, col });
+    }
+  }, []);
+  useEffect(() => {
+    const handleMouseUp = () => {
+      dragging.current = false;
+    };
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => window.removeEventListener("mouseup", handleMouseUp);
+  }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      if (!(e.ctrlKey || e.metaKey) || e.key !== "c") return;
+      if (!selAnchor || !selEnd) return;
+      const nativeSel = window.getSelection();
+      if (nativeSel && nativeSel.toString().length > 0 && !hasRange) return;
+      const r1 = Math.min(selAnchor.row, selEnd.row), r2 = Math.max(selAnchor.row, selEnd.row);
+      const c1 = Math.min(selAnchor.col, selEnd.col), c2 = Math.max(selAnchor.col, selEnd.col);
+      const text = [];
+      for (let r = r1; r <= r2; r++) {
+        const rowCells = [];
+        for (let c = c1; c <= c2; c++) {
+          rowCells.push(rows[r]?.[c] || "");
+        }
+        text.push(rowCells.join("	"));
+      }
+      const tsv = text.join("\n");
+      if (tsv) {
+        e.preventDefault();
+        navigator.clipboard.writeText(tsv);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [selAnchor, selEnd, rows, hasRange]);
+  useEffect(() => {
+    const handler = (e) => {
+      if (!focus) return;
+      const active = document.activeElement;
+      if (active?.isContentEditable) return;
+      if (!tableRef.current?.contains(active)) return;
+      const text = e.clipboardData?.getData("text/plain");
+      if (!text) return;
+      e.preventDefault();
+      const pastedRows = text.split("\n").filter((l) => l).map((line) => line.split("	"));
+      const next = rows.map((r) => [...r]);
+      for (let r = 0; r < pastedRows.length; r++) {
+        const targetRow = focus.row + r;
+        while (next.length <= targetRow) next.push(Array(columns.length).fill(""));
+        while (next[targetRow].length < columns.length) next[targetRow].push("");
+        for (let c = 0; c < pastedRows[r].length; c++) {
+          const targetCol = focus.col + c;
+          if (targetCol >= columns.length) break;
+          if (columns[targetCol].readOnly) continue;
+          next[targetRow][targetCol] = pastedRows[r][c].trim();
+        }
+      }
+      onChange(next);
+      setSelAnchor({ row: focus.row, col: focus.col });
+      setSelEnd({ row: Math.min(focus.row + pastedRows.length - 1, next.length - 1), col: Math.min(focus.col + (pastedRows[0]?.length || 1) - 1, columns.length - 1) });
+    };
+    window.addEventListener("paste", handler);
+    return () => window.removeEventListener("paste", handler);
+  }, [focus, rows, columns, onChange]);
+  const handlePaste = useCallback((e, startRow, startCol) => {
+    const text = e.clipboardData.getData("text/plain");
+    if (!text) return;
+    const pastedRows = text.split("\n").map((line) => line.split("	"));
+    if (pastedRows.length <= 1 && pastedRows[0]?.length <= 1) return;
+    e.preventDefault();
+    const next = rows.map((r) => [...r]);
+    for (let r = 0; r < pastedRows.length; r++) {
+      const targetRow = startRow + r;
+      while (next.length <= targetRow) next.push(Array(columns.length).fill(""));
+      while (next[targetRow].length < columns.length) next[targetRow].push("");
+      for (let c = 0; c < pastedRows[r].length; c++) {
+        const targetCol = startCol + c;
+        if (targetCol >= columns.length) break;
+        if (columns[targetCol].readOnly) continue;
+        next[targetRow][targetCol] = pastedRows[r][c].trim();
+      }
+    }
+    onChange(next);
+  }, [rows, columns, onChange]);
+  const handleKeyDown = useCallback((e, row, col) => {
+    let nextRow = row;
+    let nextCol = col;
+    if (e.key === "Tab") {
+      e.preventDefault();
+      nextCol = e.shiftKey ? col - 1 : col + 1;
+      if (nextCol >= columns.length) {
+        nextCol = 0;
+        nextRow = row + 1;
+      }
+      if (nextCol < 0) {
+        nextCol = columns.length - 1;
+        nextRow = row - 1;
+      }
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      nextRow = e.shiftKey ? row - 1 : row + 1;
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      nextRow = row + 1;
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      nextRow = row - 1;
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      nextCol = col - 1;
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      nextCol = col + 1;
+    } else if (e.key === "Delete" || e.key === "Backspace") {
+      const target = e.target;
+      if (target.isContentEditable) {
+        if (target.textContent && window.getSelection()?.toString() === target.textContent) {
+          e.preventDefault();
+          updateCell(row, col, "");
+        }
+        return;
+      }
+      e.preventDefault();
+      if (selAnchor && selEnd) {
+        const r1 = Math.min(selAnchor.row, selEnd.row), r2 = Math.max(selAnchor.row, selEnd.row);
+        const c1 = Math.min(selAnchor.col, selEnd.col), c2 = Math.max(selAnchor.col, selEnd.col);
+        const next = rows.map((r) => [...r]);
+        for (let r = r1; r <= r2; r++) for (let c = c1; c <= c2; c++) {
+          if (next[r] && !columns[c]?.readOnly) next[r][c] = "";
+        }
+        onChange(next);
+      } else {
+        updateCell(row, col, "");
+      }
+      return;
+    } else {
+      return;
+    }
+    while (nextCol >= 0 && nextCol < columns.length && columns[nextCol].readOnly) {
+      nextCol += e.key === "Tab" && e.shiftKey ? -1 : 1;
+    }
+    if (nextRow >= 0 && nextRow < rows.length && nextCol >= 0 && nextCol < columns.length) {
+      const cell = tableRef.current?.querySelector(`[data-row="${nextRow}"][data-col="${nextCol}"]`);
+      if (cell) {
+        cell.focus({ preventScroll: true });
+        cell.scrollIntoView({ block: "nearest", inline: "nearest" });
+        setFocus({ row: nextRow, col: nextCol });
+        setEditingCell(null);
+        setSelAnchor({ row: nextRow, col: nextCol });
+        setSelEnd({ row: nextRow, col: nextCol });
+      }
+    }
+  }, [columns, rows, rows.length, updateCell, selAnchor, selEnd, onChange]);
+  const ensureRows = useCallback((row) => {
+    if (fixedRows) return;
+    if (row >= rows.length - 2) {
+      const next = rows.map((r) => [...r]);
+      for (let i = 0; i < 5; i++) next.push(Array(columns.length).fill(""));
+      onChange(next);
+    }
+  }, [fixedRows, rows, columns.length, onChange]);
+  const [ctxMenu, setCtxMenu] = useState(null);
+  useEffect(() => {
+    if (!ctxMenu) return;
+    const handler = () => setCtxMenu(null);
+    window.addEventListener("pointerdown", handler);
+    return () => window.removeEventListener("pointerdown", handler);
+  }, [ctxMenu]);
+  const insertRow = useCallback((at) => {
+    const next = rows.map((r) => [...r]);
+    next.splice(at, 0, Array(columns.length).fill(""));
+    onChange(next);
+  }, [rows, columns.length, onChange]);
+  const deleteRow = useCallback((at) => {
+    if (rows.length <= 1) return;
+    const next = rows.filter((_, i) => i !== at);
+    onChange(next);
+  }, [rows, onChange]);
+  const insertCol = useCallback((at) => {
+    const next = rows.map((r) => {
+      const nr = [...r];
+      nr.splice(at, 0, "");
+      return nr;
+    });
+    onChange(next);
+  }, [rows, onChange]);
+  const deleteCol = useCallback((at) => {
+    if (columns.length <= 1) return;
+    const next = rows.map((r) => {
+      const nr = [...r];
+      nr.splice(at, 1);
+      return nr;
+    });
+    onChange(next);
+  }, [rows, columns.length, onChange]);
+  const handleRowCtx = useCallback((e, ri) => {
+    e.preventDefault();
+    if (fixedRows) return;
+    setCtxMenu({ x: e.clientX, y: e.clientY, items: [
+      { label: `Insert row above`, onClick: () => {
+        insertRow(ri);
+        setCtxMenu(null);
+      } },
+      { label: `Insert row below`, onClick: () => {
+        insertRow(ri + 1);
+        setCtxMenu(null);
+      } },
+      { label: `Delete row ${ri + 1}`, onClick: () => {
+        deleteRow(ri);
+        setCtxMenu(null);
+      } }
+    ] });
+  }, [fixedRows, insertRow, deleteRow]);
+  const handleColCtx = useCallback((e, ci) => {
+    e.preventDefault();
+    if (fixedRows) return;
+    setCtxMenu({ x: e.clientX, y: e.clientY, items: [
+      { label: `Insert column left`, onClick: () => {
+        insertCol(ci);
+        setCtxMenu(null);
+      } },
+      { label: `Insert column right`, onClick: () => {
+        insertCol(ci + 1);
+        setCtxMenu(null);
+      } },
+      { label: `Delete column ${columns[ci]?.title || ci + 1}`, onClick: () => {
+        deleteCol(ci);
+        setCtxMenu(null);
+      } }
+    ] });
+  }, [fixedRows, columns, insertCol, deleteCol]);
+  const getColWidth = (ci) => colWidths[ci] ?? columns[ci]?.width ?? 150;
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!resizing.current) return;
+      const diff = e.clientX - resizing.current.startX;
+      const newW = Math.max(40, resizing.current.startW + diff);
+      setColWidths((prev) => ({ ...prev, [resizing.current.col]: newW }));
+    };
+    const handleMouseUp = () => {
+      if (resizing.current && onColumnsChange) {
+        const updated = columns.map((c, i) => ({ ...c, width: colWidths[i] ?? c.width }));
+        updated[resizing.current.col] = { ...updated[resizing.current.col], width: colWidths[resizing.current.col] ?? columns[resizing.current.col].width };
+        onColumnsChange(updated);
+      }
+      resizing.current = null;
+      document.body.style.cursor = "";
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [columns, colWidths, onColumnsChange]);
+  const startColResize = (e, ci) => {
+    e.preventDefault();
+    e.stopPropagation();
+    resizing.current = { col: ci, startX: e.clientX, startW: getColWidth(ci) };
+    document.body.style.cursor = "col-resize";
+  };
+  const getRowHeight = (ri) => rowHeights[ri] ?? 28;
+  useEffect(() => {
+    const handleMove = (e) => {
+      if (!rowResizing.current) return;
+      const diff = e.clientY - rowResizing.current.startY;
+      const newH = Math.max(20, rowResizing.current.startH + diff);
+      setRowHeights((prev) => ({ ...prev, [rowResizing.current.row]: newH }));
+    };
+    const handleUp = () => {
+      rowResizing.current = null;
+      document.body.style.cursor = "";
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, []);
+  const startRowResize = (e, ri) => {
+    e.preventDefault();
+    e.stopPropagation();
+    rowResizing.current = { row: ri, startY: e.clientY, startH: getRowHeight(ri) };
+    document.body.style.cursor = "row-resize";
+  };
+  const autoFitColumn = useCallback((ci) => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.font = "12px ui-monospace, SFMono-Regular, Menlo, monospace";
+    let maxW = 0;
+    for (const row of rows) {
+      const plain = String(row[ci] ?? "").replace(/<[^>]*>/g, "");
+      const w = ctx.measureText(plain).width;
+      if (w > maxW) maxW = w;
+    }
+    const headerW = ctx.measureText(columns[ci]?.title ?? "").width;
+    if (headerW > maxW) maxW = headerW;
+    const finalW = Math.max(40, Math.ceil(maxW + 24));
+    setColWidths((prev) => ({ ...prev, [ci]: finalW }));
+    if (onColumnsChange) {
+      const updated = columns.map((c, i) => ({ ...c, width: i === ci ? finalW : colWidths[i] ?? c.width }));
+      onColumnsChange(updated);
+    }
+  }, [rows, columns, colWidths, onColumnsChange]);
+  const autoFitRow = useCallback((ri) => {
+    setRowHeights((prev) => {
+      const next = { ...prev };
+      delete next[ri];
+      return next;
+    });
+  }, []);
+  const applyFill = useCallback((target) => {
+    const { a: sa, e: se } = selRefForFill.current;
+    if (!sa || !se) return;
+    const r1 = Math.min(sa.row, se.row);
+    const r2 = Math.max(sa.row, se.row);
+    const c1 = Math.min(sa.col, se.col);
+    const c2 = Math.max(sa.col, se.col);
+    let nr1 = r1, nr2 = r2, nc1 = c1, nc2 = c2;
+    if (target.row > r2) nr2 = target.row;
+    else if (target.row < r1) nr1 = target.row;
+    if (target.col > c2) nc2 = target.col;
+    else if (target.col < c1) nc1 = target.col;
+    const selH = r2 - r1 + 1;
+    const selW = c2 - c1 + 1;
+    const next = rows.map((r) => [...r]);
+    while (next.length <= nr2) next.push(Array(columns.length).fill(""));
+    for (const row of next) while (row.length <= nc2) row.push("");
+    function asSeries(values) {
+      const nums = values.map((v) => parseFloat(v));
+      if (nums.length < 2 || nums.some((n) => Number.isNaN(n))) return null;
+      const step = nums[1] - nums[0];
+      for (let i = 2; i < nums.length; i++) {
+        if (Math.abs(nums[i] - nums[i - 1] - step) > 1e-9) return null;
+      }
+      return { step };
+    }
+    for (let r = nr1; r <= nr2; r++) {
+      for (let c = nc1; c <= nc2; c++) {
+        if (r >= r1 && r <= r2 && c >= c1 && c <= c2) continue;
+        let value;
+        if (selW === 1 && nc1 === c1 && nc2 === c2) {
+          const colVals = Array.from({ length: selH }, (_, i) => next[r1 + i]?.[c] ?? "");
+          const series = asSeries(colVals);
+          if (series) {
+            const last = parseFloat(next[r2]?.[c] ?? "0");
+            const first = parseFloat(next[r1]?.[c] ?? "0");
+            const offset = r > r2 ? r - r2 : -(r1 - r);
+            value = String((r > r2 ? last : first) + series.step * offset);
+          } else {
+            const dr = ((r - r1) % selH + selH) % selH;
+            value = next[r1 + dr]?.[c] ?? "";
+          }
+        } else if (selH === 1 && nr1 === r1 && nr2 === r2) {
+          const rowVals = Array.from({ length: selW }, (_, i) => next[r]?.[c1 + i] ?? "");
+          const series = asSeries(rowVals);
+          if (series) {
+            const last = parseFloat(next[r]?.[c2] ?? "0");
+            const first = parseFloat(next[r]?.[c1] ?? "0");
+            const offset = c > c2 ? c - c2 : -(c1 - c);
+            value = String((c > c2 ? last : first) + series.step * offset);
+          } else {
+            const dc = ((c - c1) % selW + selW) % selW;
+            value = next[r]?.[c1 + dc] ?? "";
+          }
+        } else {
+          const dr = ((r - r1) % selH + selH) % selH;
+          const dc = ((c - c1) % selW + selW) % selW;
+          value = next[r1 + dr]?.[c1 + dc] ?? "";
+        }
+        next[r][c] = value;
+      }
+    }
+    onChange(next);
+    setSelAnchor({ row: nr1, col: nc1 });
+    setSelEnd({ row: nr2, col: nc2 });
+  }, [rows, columns.length, onChange]);
+  useEffect(() => {
+    const handleMove = (e) => {
+      if (!filling.current) return;
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      const inner = el?.closest?.("[data-row][data-col]");
+      if (!inner) return;
+      const r = parseInt(inner.dataset.row);
+      const c = parseInt(inner.dataset.col);
+      setFillTarget({ row: r, col: c });
+    };
+    const handleUp = () => {
+      if (filling.current && fillTarget) applyFill(fillTarget);
+      filling.current = false;
+      setFillTarget(null);
+      document.body.style.cursor = "";
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [fillTarget, applyFill]);
+  const startFill = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    filling.current = true;
+    document.body.style.cursor = "crosshair";
+  };
+  const handleRowDragStart = (ri) => setDragRow(ri);
+  const handleRowDragOver = (e, ri) => {
+    e.preventDefault();
+    setDragOverRow(ri);
+  };
+  const handleRowDrop = (ri) => {
+    if (dragRow === null || dragRow === ri) {
+      setDragRow(null);
+      setDragOverRow(null);
+      return;
+    }
+    const next = rows.map((r) => [...r]);
+    const [moved] = next.splice(dragRow, 1);
+    next.splice(ri, 0, moved);
+    onChange(next);
+    setDragRow(null);
+    setDragOverRow(null);
+  };
+  const handleColDragStart = (ci) => setDragCol(ci);
+  const handleColDragOver = (e, ci) => {
+    e.preventDefault();
+    setDragOverCol(ci);
+  };
+  const handleColDrop = (ci) => {
+    if (dragCol === null || dragCol === ci) {
+      setDragCol(null);
+      setDragOverCol(null);
+      return;
+    }
+    const next = rows.map((r) => {
+      const nr = [...r];
+      const [moved] = nr.splice(dragCol, 1);
+      nr.splice(ci, 0, moved);
+      return nr;
+    });
+    onChange(next);
+    if (onColumnsChange) {
+      const newCols = [...columns];
+      const [moved] = newCols.splice(dragCol, 1);
+      newCols.splice(ci, 0, moved);
+      onColumnsChange(newCols);
+    }
+    setDragCol(null);
+    setDragOverCol(null);
+  };
+  const ROW_HEIGHT = 28;
+  const BUFFER = 20;
+  const containerRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(800);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const measure = () => setContainerHeight(el.clientHeight || 800);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const useVirtualization = rows.length > 100;
+  const visibleStart = useVirtualization ? Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - BUFFER) : 0;
+  const visibleEnd = useVirtualization ? Math.min(rows.length, Math.ceil((scrollTop + containerHeight) / ROW_HEIGHT) + BUFFER) : rows.length;
+  const visibleRows = useMemo(() => rows.slice(visibleStart, visibleEnd), [rows, visibleStart, visibleEnd]);
+  const topPad = visibleStart * ROW_HEIGHT;
+  const bottomPad = (rows.length - visibleEnd) * ROW_HEIGHT;
+  const thCls = "px-2 py-1.5 text-left text-xs font-medium text-gray-500 uppercase bg-gray-100 border-b border-r border-gray-200 select-none";
+  const tdCls = "px-0 py-0 border-b border-r border-gray-200 text-sm";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "border border-gray-300 rounded overflow-scroll grid-scroll",
+      style: { maxHeight, height: maxHeight },
+      onScroll: (e) => setScrollTop(e.target.scrollTop),
+      children: [
+        /* @__PURE__ */ jsxs("table", { ref: tableRef, className: "border-collapse select-none", style: { tableLayout: "fixed", minWidth: 36 + columns.reduce((s, c) => s + getColWidth(columns.indexOf(c)), 0) }, children: [
+          /* @__PURE__ */ jsxs("colgroup", { children: [
+            /* @__PURE__ */ jsx("col", { style: { width: 36 } }),
+            columns.map((c, ci) => /* @__PURE__ */ jsx("col", { style: { width: getColWidth(ci) } }, c.key))
+          ] }),
+          /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10", children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx(
+              "th",
+              {
+                className: thCls + " text-center w-9 cursor-pointer hover:bg-gray-200",
+                onClick: () => {
+                  setSelAnchor({ row: 0, col: 0 });
+                  setSelEnd({ row: rows.length - 1, col: columns.length - 1 });
+                },
+                title: "Select all",
+                children: "#"
+              }
+            ),
+            columns.map((c, ci) => {
+              const colSelected = selAnchor && selEnd && Math.min(selAnchor.col, selEnd.col) <= ci && ci <= Math.max(selAnchor.col, selEnd.col) && Math.min(selAnchor.row, selEnd.row) === 0 && Math.max(selAnchor.row, selEnd.row) === rows.length - 1;
+              return /* @__PURE__ */ jsxs(
+                "th",
+                {
+                  className: `${thCls} cursor-pointer hover:bg-gray-200 relative${colSelected ? " !bg-blue-200" : ""}${dragOverCol === ci ? " !bg-blue-100" : ""}`,
+                  style: { width: getColWidth(ci) },
+                  draggable: true,
+                  onDragStart: () => handleColDragStart(ci),
+                  onDragOver: (e) => handleColDragOver(e, ci),
+                  onDrop: () => handleColDrop(ci),
+                  onDragEnd: () => {
+                    setDragCol(null);
+                    setDragOverCol(null);
+                  },
+                  onClick: (e) => {
+                    if (e.shiftKey && selAnchor) {
+                      setSelEnd({ row: rows.length - 1, col: ci });
+                    } else {
+                      setSelAnchor({ row: 0, col: ci });
+                      setSelEnd({ row: rows.length - 1, col: ci });
+                    }
+                  },
+                  onContextMenu: (e) => handleColCtx(e, ci),
+                  children: [
+                    c.title,
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "absolute -right-1 top-0 bottom-0 w-2 cursor-col-resize z-20",
+                        onMouseDown: (e) => startColResize(e, ci),
+                        onDoubleClick: (e) => {
+                          e.stopPropagation();
+                          autoFitColumn(ci);
+                        },
+                        title: "Drag to resize \xB7 double-click to auto-fit"
+                      }
+                    )
+                  ]
+                },
+                c.key
+              );
+            })
+          ] }) }),
+          /* @__PURE__ */ jsxs("tbody", { children: [
+            topPad > 0 && /* @__PURE__ */ jsx("tr", { style: { height: topPad } }),
+            visibleRows.map((row, vi) => {
+              const ri = visibleStart + vi;
+              const rowSelected = selAnchor && selEnd && Math.min(selAnchor.row, selEnd.row) <= ri && ri <= Math.max(selAnchor.row, selEnd.row) && Math.min(selAnchor.col, selEnd.col) === 0 && Math.max(selAnchor.col, selEnd.col) === columns.length - 1;
+              return /* @__PURE__ */ jsxs("tr", { style: { height: getRowHeight(ri) }, children: [
+                /* @__PURE__ */ jsxs(
+                  "td",
+                  {
+                    className: `relative px-1 py-1 text-center text-[10px] text-gray-400 border-b border-r border-gray-200 bg-gray-50 select-none cursor-pointer hover:bg-gray-200${rowSelected ? " !bg-blue-200 !text-gray-700" : ""}${dragOverRow === ri ? " !bg-blue-100" : ""}`,
+                    draggable: true,
+                    onDragStart: () => handleRowDragStart(ri),
+                    onDragOver: (e) => handleRowDragOver(e, ri),
+                    onDrop: () => handleRowDrop(ri),
+                    onDragEnd: () => {
+                      setDragRow(null);
+                      setDragOverRow(null);
+                    },
+                    onClick: (e) => {
+                      if (e.shiftKey && selAnchor) {
+                        setSelEnd({ row: ri, col: columns.length - 1 });
+                      } else {
+                        setSelAnchor({ row: ri, col: 0 });
+                        setSelEnd({ row: ri, col: columns.length - 1 });
+                      }
+                    },
+                    onContextMenu: (e) => handleRowCtx(e, ri),
+                    children: [
+                      ri + 1,
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "absolute -bottom-1 left-0 right-0 h-2 cursor-row-resize z-20",
+                          onMouseDown: (e) => startRowResize(e, ri),
+                          onDoubleClick: (e) => {
+                            e.stopPropagation();
+                            autoFitRow(ri);
+                          },
+                          title: "Drag to resize \xB7 double-click to auto-fit"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                columns.map((col, ci) => {
+                  const inRange = selAnchor && selEnd && rangeContains(selAnchor, selEnd, ri, ci);
+                  const isEditing = editingCell?.row === ri && editingCell?.col === ci && !col.readOnly;
+                  const isFocused = focus?.row === ri && focus?.col === ci;
+                  const cellStyle = cellStyles?.[`${ri}:${ci}`];
+                  const selR2 = selAnchor && selEnd ? Math.max(selAnchor.row, selEnd.row) : -1;
+                  const selC2 = selAnchor && selEnd ? Math.max(selAnchor.col, selEnd.col) : -1;
+                  const isFillCorner = selAnchor && selEnd && ri === selR2 && ci === selC2;
+                  const inFillPreview = filling.current && fillTarget && selAnchor && selEnd && (() => {
+                    const r1 = Math.min(selAnchor.row, selEnd.row), r2 = Math.max(selAnchor.row, selEnd.row);
+                    const c1 = Math.min(selAnchor.col, selEnd.col), c2 = Math.max(selAnchor.col, selEnd.col);
+                    let nr1 = r1, nr2 = r2, nc1 = c1, nc2 = c2;
+                    if (fillTarget.row > r2) nr2 = fillTarget.row;
+                    else if (fillTarget.row < r1) nr1 = fillTarget.row;
+                    if (fillTarget.col > c2) nc2 = fillTarget.col;
+                    else if (fillTarget.col < c1) nc1 = fillTarget.col;
+                    return ri >= nr1 && ri <= nr2 && ci >= nc1 && ci <= nc2 && !(ri >= r1 && ri <= r2 && ci >= c1 && ci <= c2);
+                  })();
+                  const fontSizeCls = cellStyle?.fontSize === "sm" ? "text-[11px]" : cellStyle?.fontSize === "lg" ? "text-sm" : cellStyle?.fontSize === "xl" ? "text-base" : "text-xs";
+                  const styleCls = `${cellStyle?.bold ? " font-bold" : ""}${cellStyle?.italic ? " italic" : ""}${cellStyle?.underline ? " underline" : ""}`;
+                  return /* @__PURE__ */ jsxs(
+                    "td",
+                    {
+                      className: `relative ${tdCls}${col.readOnly ? " bg-gray-50 text-gray-500 cursor-default" : " cursor-cell"}${inRange ? " !bg-blue-100" : ""}${isFocused && !inRange ? " ring-2 ring-inset ring-blue-400" : ""}${inFillPreview ? " !bg-blue-50 ring-1 ring-inset ring-blue-300" : ""}`,
+                      onMouseDown: (e) => {
+                        if (e.target === e.currentTarget) {
+                          handleMouseDown(e, ri, ci);
+                          const inner = e.currentTarget.querySelector("[data-row][data-col]");
+                          inner?.focus();
+                        }
+                      },
+                      onMouseEnter: () => handleMouseEnter(ri, ci),
+                      onClick: (e) => {
+                        if (e.target === e.currentTarget) {
+                          const inner = e.currentTarget.querySelector("[data-row][data-col]");
+                          inner?.focus();
+                        }
+                      },
+                      onDoubleClick: (e) => {
+                        if (e.target === e.currentTarget && !col.readOnly) setEditingCell({ row: ri, col: ci });
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            contentEditable: isEditing,
+                            suppressContentEditableWarning: true,
+                            tabIndex: 0,
+                            "data-row": ri,
+                            "data-col": ci,
+                            className: `w-full h-full px-2 py-1 outline-none whitespace-nowrap overflow-hidden ${col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : ""} ${col.readOnly ? "cursor-default" : "cursor-cell"} font-mono ${fontSizeCls}${styleCls}`,
+                            onMouseDown: (e) => handleMouseDown(e, ri, ci),
+                            onMouseEnter: () => handleMouseEnter(ri, ci),
+                            onDoubleClick: () => {
+                              if (!col.readOnly) setEditingCell({ row: ri, col: ci });
+                            },
+                            onFocus: () => {
+                              setFocus({ row: ri, col: ci });
+                              if (!dragging.current) {
+                                setSelAnchor({ row: ri, col: ci });
+                                setSelEnd({ row: ri, col: ci });
+                              }
+                            },
+                            onBlur: (e) => {
+                              const val = e.currentTarget.textContent || "";
+                              if (val !== (row[ci] || "")) updateCell(ri, ci, val);
+                              setEditingCell(null);
+                            },
+                            onInput: () => ensureRows(ri),
+                            onPaste: (e) => handlePaste(e, ri, ci),
+                            onKeyDown: (e) => {
+                              if (!isEditing && !col.readOnly && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                                e.preventDefault();
+                                updateCell(ri, ci, e.key);
+                                setEditingCell({ row: ri, col: ci });
+                                requestAnimationFrame(() => {
+                                  const el = tableRef.current?.querySelector(`[data-row="${ri}"][data-col="${ci}"]`);
+                                  if (el) {
+                                    el.focus();
+                                    const range = document.createRange();
+                                    range.selectNodeContents(el);
+                                    range.collapse(false);
+                                    const sel = window.getSelection();
+                                    sel?.removeAllRanges();
+                                    sel?.addRange(range);
+                                  }
+                                });
+                                return;
+                              }
+                              handleKeyDown(e, ri, ci);
+                            },
+                            dangerouslySetInnerHTML: { __html: row[ci] || "" }
+                          }
+                        ),
+                        isFillCorner && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            onMouseDown: startFill,
+                            title: "Drag to fill",
+                            className: "absolute -bottom-[3px] -right-[3px] w-[7px] h-[7px] bg-blue-500 border border-white cursor-crosshair z-30 hover:bg-blue-600"
+                          }
+                        )
+                      ]
+                    },
+                    ci
+                  );
+                })
+              ] }, ri);
+            }),
+            bottomPad > 0 && /* @__PURE__ */ jsx("tr", { style: { height: bottomPad } })
+          ] })
+        ] }),
+        ctxMenu && createPortal(
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[200]", onPointerDown: () => setCtxMenu(null) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "fixed z-[201] bg-white rounded-lg shadow-lg border border-gray-200 py-1 min-w-[160px]",
+                style: { left: ctxMenu.x, top: ctxMenu.y },
+                children: ctxMenu.items.map((item, i) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onPointerDown: (e) => {
+                      e.stopPropagation();
+                      item.onClick();
+                    },
+                    className: "w-full text-left px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100",
+                    children: item.label
+                  },
+                  i
+                ))
+              }
+            )
+          ] }),
+          document.body
+        )
+      ]
+    }
+  );
+}
+
+export { EditableGrid };
+//# sourceMappingURL=chunk-GP4Y3VCB.js.map
+//# sourceMappingURL=chunk-GP4Y3VCB.js.map