react-os-shell 0.2.68 → 0.3.0

package/dist/{chunk-GP4Y3VCB.js → chunk-KMGWSDEI.js}

@@ -1,8 +1,8 @@
+import { WindowTitle } from './chunk-62FC2FHC.js';
 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);
@@ -800,7 +800,483 @@ function EditableGrid({ columns, data, onChange, onColumnsChange, fixedRows = fa
     }
   );
 }
+var TITLE_DISPLAY_MAX = 24;
+function truncateForTitle(s) {
+  return s.length > TITLE_DISPLAY_MAX ? `${s.slice(0, TITLE_DISPLAY_MAX - 1)}\u2026` : s;
+}
+var ALPHA = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+var DEFAULT_COLS = 10;
+var DEFAULT_ROWS = 30;
+function colLabel(i) {
+  if (i < 26) return ALPHA[i];
+  return ALPHA[Math.floor(i / 26) - 1] + ALPHA[i % 26];
+}
+function makeColumns(count) {
+  return Array.from({ length: count }, (_, i) => ({
+    key: `col_${i}`,
+    title: colLabel(i),
+    width: 100
+  }));
+}
+function makeEmptyData(rows, cols) {
+  return Array.from({ length: rows }, () => Array(cols).fill(""));
+}
+function newSheet(name) {
+  return {
+    id: crypto.randomUUID(),
+    name,
+    columns: makeColumns(DEFAULT_COLS),
+    data: makeEmptyData(DEFAULT_ROWS, DEFAULT_COLS),
+    cellStyles: {}
+  };
+}
+function parseCSV(text) {
+  return text.split("\n").map((line) => {
+    if (line.includes("	")) return line.split("	").map((s) => s.trim());
+    const parts = [];
+    let current = "";
+    let inQuotes = false;
+    for (const ch of line) {
+      if (ch === '"') {
+        inQuotes = !inQuotes;
+        continue;
+      }
+      if (ch === "," && !inQuotes) {
+        parts.push(current.trim());
+        current = "";
+        continue;
+      }
+      current += ch;
+    }
+    parts.push(current.trim());
+    return parts;
+  }).filter((r) => r.some((c) => c.trim()));
+}
+function sheetFromCSV(text, sheetName) {
+  const parsed = parseCSV(text);
+  if (parsed.length === 0) return null;
+  const maxCols = Math.max(DEFAULT_COLS, parsed.reduce((m, r) => Math.max(m, r.length), 0));
+  const padded = parsed.map((r) => {
+    while (r.length < maxCols) r.push("");
+    return r;
+  });
+  while (padded.length < DEFAULT_ROWS) padded.push(Array(maxCols).fill(""));
+  return { id: crypto.randomUUID(), name: sheetName, columns: makeColumns(maxCols), data: padded, cellStyles: {} };
+}
+var SPREADSHEET_EVENT_NAME = "react-os-shell:spreadsheet-preview";
+var pendingSpreadsheet = null;
+function setSpreadsheetPreview(data) {
+  pendingSpreadsheet = data;
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(new CustomEvent(SPREADSHEET_EVENT_NAME, { detail: data }));
+  }
+}
+function Spreadsheet() {
+  const containerRef = useRef(null);
+  const initialPreview = (() => {
+    const p = pendingSpreadsheet;
+    pendingSpreadsheet = null;
+    if (!p) return null;
+    const sheet = sheetFromCSV(p.csv, "Sheet 1");
+    if (!sheet) return null;
+    const titleName = p.filename.replace(/\.(csv|tsv|txt)$/i, "");
+    return { sheet, title: titleName };
+  })();
+  const [sheets, setSheets] = useState(initialPreview ? [initialPreview.sheet] : [newSheet("Sheet 1")]);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const undoStackRef = useRef([]);
+  const lastCommittedRef = useRef(sheets);
+  const skipRecordRef = useRef(false);
+  useEffect(() => {
+    if (skipRecordRef.current) {
+      skipRecordRef.current = false;
+    } else if (lastCommittedRef.current !== sheets) {
+      undoStackRef.current.push(lastCommittedRef.current);
+      if (undoStackRef.current.length > 50) undoStackRef.current.shift();
+    }
+    lastCommittedRef.current = sheets;
+  }, [sheets]);
+  const undo = useCallback(() => {
+    const prev = undoStackRef.current.pop();
+    if (!prev) return;
+    skipRecordRef.current = true;
+    setSheets(prev);
+  }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      if (!containerRef.current?.contains(document.activeElement) && !containerRef.current?.matches(":focus-within")) return;
+      const isUndo = (e.ctrlKey || e.metaKey) && !e.shiftKey && (e.key === "z" || e.key === "Z");
+      if (isUndo) {
+        e.preventDefault();
+        undo();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [undo]);
+  const [title, setTitle] = useState(initialPreview?.title ?? "Untitled");
+  useEffect(() => {
+    const handler = (e) => {
+      const next = e.detail;
+      const sheet = sheetFromCSV(next.csv, "Sheet 1");
+      if (!sheet) return;
+      setSheets([sheet]);
+      setActiveIdx(0);
+      setTitle(next.filename.replace(/\.(csv|tsv|txt)$/i, ""));
+    };
+    window.addEventListener(SPREADSHEET_EVENT_NAME, handler);
+    return () => window.removeEventListener(SPREADSHEET_EVENT_NAME, handler);
+  }, []);
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [editingTab, setEditingTab] = useState(null);
+  const [tabName, setTabName] = useState("");
+  const fileRef = useRef(null);
+  const [addColCount, setAddColCount] = useState("1");
+  const [addRowCount, setAddRowCount] = useState("10");
+  const active = sheets[activeIdx] || sheets[0];
+  const data = active.data;
+  const columns = active.columns;
+  const cellStyles = active.cellStyles ?? {};
+  const [focusedCell, setFocusedCell] = useState(null);
+  const [selection, setSelection] = useState(null);
+  const targetCells = useCallback(() => {
+    if (selection) {
+      const r1 = Math.min(selection.anchor.row, selection.end.row);
+      const r2 = Math.max(selection.anchor.row, selection.end.row);
+      const c1 = Math.min(selection.anchor.col, selection.end.col);
+      const c2 = Math.max(selection.anchor.col, selection.end.col);
+      const cells = [];
+      for (let r = r1; r <= r2; r++) for (let c = c1; c <= c2; c++) cells.push({ row: r, col: c });
+      return cells;
+    }
+    return focusedCell ? [focusedCell] : [];
+  }, [selection, focusedCell]);
+  const toggleCellStyle = useCallback((key, value) => {
+    const cells = targetCells();
+    if (cells.length === 0) return;
+    setSheets((prev) => prev.map((s, i) => {
+      if (i !== activeIdx) return s;
+      const styles = { ...s.cellStyles ?? {} };
+      const firstKey = `${cells[0].row}:${cells[0].col}`;
+      const desired = value !== void 0 ? value : !(styles[firstKey] ?? {})[key];
+      for (const { row, col } of cells) {
+        const k = `${row}:${col}`;
+        styles[k] = { ...styles[k] ?? {}, [key]: desired };
+      }
+      return { ...s, cellStyles: styles };
+    }));
+  }, [targetCells, activeIdx]);
+  const headCell = selection ? { row: selection.anchor.row, col: selection.anchor.col } : focusedCell;
+  const focusedStyle = headCell ? cellStyles[`${headCell.row}:${headCell.col}`] ?? {} : {};
+  const hasTarget = !!headCell;
+  const updateActiveSheet = useCallback((update) => {
+    setSheets((prev) => prev.map((s, i) => i === activeIdx ? { ...s, ...update } : s));
+  }, [activeIdx]);
+  const handleChange = useCallback((newData) => {
+    const maxCols = newData.reduce((m, r) => Math.max(m, r.length), 0);
+    if (maxCols !== columns.length) {
+      updateActiveSheet({ data: newData, columns: makeColumns(maxCols) });
+    } else {
+      updateActiveSheet({ data: newData });
+    }
+  }, [updateActiveSheet, columns.length]);
+  const addSheet = () => {
+    const name = `Sheet ${sheets.length + 1}`;
+    setSheets((prev) => [...prev, newSheet(name)]);
+    setActiveIdx(sheets.length);
+  };
+  const removeSheet = (idx) => {
+    if (sheets.length <= 1) return;
+    setSheets((prev) => prev.filter((_, i) => i !== idx));
+    if (activeIdx >= idx && activeIdx > 0) setActiveIdx(activeIdx - 1);
+  };
+  const renameSheet = (idx, name) => {
+    setSheets((prev) => prev.map((s, i) => i === idx ? { ...s, name } : s));
+    setEditingTab(null);
+  };
+  const addColumns = (count) => {
+    const newColCount = columns.length + count;
+    updateActiveSheet({
+      columns: makeColumns(newColCount),
+      data: data.map((row) => [...row, ...Array(count).fill("")])
+    });
+  };
+  const addRows = (count) => {
+    updateActiveSheet({
+      data: [...data, ...Array.from({ length: count }, () => Array(columns.length).fill(""))]
+    });
+  };
+  const handleClear = () => {
+    updateActiveSheet({
+      columns: makeColumns(DEFAULT_COLS),
+      data: makeEmptyData(DEFAULT_ROWS, DEFAULT_COLS)
+    });
+  };
+  const exportCSV = () => {
+    const csv = data.filter((row) => row.some((c) => c.trim())).map((row) => row.map((cell) => {
+      if (cell.includes(",") || cell.includes('"') || cell.includes("\n"))
+        return `"${cell.replace(/"/g, '""')}"`;
+      return cell;
+    }).join(",")).join("\n");
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${title || "spreadsheet"}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const importFile = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const name = file.name.replace(/\.(csv|tsv|txt|xlsx|xls|ods)$/i, "");
+    if (/\.(xlsx|xls|ods)$/i.test(file.name)) {
+      const byteArr = new Uint8Array(await file.arrayBuffer());
+      const XLSX = await import('xlsx');
+      const wb = XLSX.read(byteArr, { type: "array" });
+      const newSheets = wb.SheetNames.map((sn) => {
+        const rows = XLSX.utils.sheet_to_json(wb.Sheets[sn], { header: 1, defval: "" });
+        const maxCols = Math.max(DEFAULT_COLS, rows.reduce((m, r) => Math.max(m, r.length), 0));
+        const padded = rows.map((r) => {
+          const nr = r.map((c) => String(c ?? ""));
+          while (nr.length < maxCols) nr.push("");
+          return nr;
+        });
+        while (padded.length < DEFAULT_ROWS) padded.push(Array(maxCols).fill(""));
+        return { id: crypto.randomUUID(), name: sn, columns: makeColumns(maxCols), data: padded };
+      });
+      setSheets(newSheets);
+      setActiveIdx(0);
+      setTitle(name);
+    } else {
+      const text = await file.text();
+      const parsed = parseCSV(text);
+      if (parsed.length === 0) return;
+      const maxCols = Math.max(DEFAULT_COLS, parsed.reduce((m, r) => Math.max(m, r.length), 0));
+      const padded = parsed.map((r) => {
+        while (r.length < maxCols) r.push("");
+        return r;
+      });
+      while (padded.length < DEFAULT_ROWS) padded.push(Array(maxCols).fill(""));
+      updateActiveSheet({ columns: makeColumns(maxCols), data: padded });
+      setTitle(name);
+    }
+    if (fileRef.current) fileRef.current.value = "";
+  };
+  const allNums = [];
+  data.forEach((row) => row.forEach((cell) => {
+    const v = parseFloat(cell);
+    if (!isNaN(v) && cell.trim()) allNums.push(v);
+  }));
+  const filledCount = data.reduce((c, row) => c + row.filter((cell) => cell.trim()).length, 0);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx(WindowTitle, { title: `${truncateForTitle(title || "Untitled")} - Spreadsheets` }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-gray-200 bg-gray-50 shrink-0", children: [
+      editingTitle ? /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: title,
+          onChange: (e) => setTitle(e.target.value),
+          onBlur: () => setEditingTitle(false),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") setEditingTitle(false);
+          },
+          autoFocus: true,
+          className: "text-sm font-medium text-gray-900 border border-gray-300 rounded px-2 py-0.5 w-40 focus:border-blue-500 focus:ring-blue-500"
+        }
+      ) : /* @__PURE__ */ jsx("button", { onClick: () => setEditingTitle(true), className: "text-sm font-medium text-gray-900 hover:text-blue-600 truncate max-w-[200px]", title: "Click to rename", children: title || "Untitled" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-300" }),
+      /* @__PURE__ */ jsx("input", { ref: fileRef, type: "file", accept: ".csv,.tsv,.txt,.xlsx,.xls,.ods", onChange: importFile, className: "hidden" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => fileRef.current?.click(),
+          className: "text-xs text-gray-600 hover:text-gray-900 px-2 py-1 rounded hover:bg-gray-200 transition-colors",
+          children: "Open"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: exportCSV,
+          className: "text-xs text-gray-600 hover:text-gray-900 px-2 py-1 rounded hover:bg-gray-200 transition-colors",
+          children: "Save CSV"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-300" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min: "1",
+            max: "50",
+            value: addColCount,
+            onChange: (e) => setAddColCount(e.target.value),
+            className: "w-10 text-xs text-center border border-gray-300 rounded px-1 py-0.5 focus:border-blue-500 focus:ring-blue-500"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => addColumns(parseInt(addColCount) || 1),
+            className: "text-xs text-gray-600 hover:text-gray-900 px-2 py-1 rounded hover:bg-gray-200 transition-colors",
+            children: "+ Col"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min: "1",
+            max: "500",
+            value: addRowCount,
+            onChange: (e) => setAddRowCount(e.target.value),
+            className: "w-10 text-xs text-center border border-gray-300 rounded px-1 py-0.5 focus:border-blue-500 focus:ring-blue-500"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => addRows(parseInt(addRowCount) || 10),
+            className: "text-xs text-gray-600 hover:text-gray-900 px-2 py-1 rounded hover:bg-gray-200 transition-colors",
+            children: "+ Row"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-300" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleClear,
+          className: "text-xs text-gray-600 hover:text-gray-900 px-2 py-1 rounded hover:bg-gray-200 transition-colors",
+          children: "Clear"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-300" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", title: hasTarget ? "" : "Click a cell first", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => toggleCellStyle("bold"),
+            disabled: !hasTarget,
+            className: `px-2 py-1 text-xs rounded transition-colors font-bold ${focusedStyle.bold ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:bg-gray-200"} disabled:opacity-40 disabled:cursor-not-allowed`,
+            children: "B"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => toggleCellStyle("italic"),
+            disabled: !hasTarget,
+            className: `px-2 py-1 text-xs rounded transition-colors italic ${focusedStyle.italic ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:bg-gray-200"} disabled:opacity-40 disabled:cursor-not-allowed`,
+            children: "I"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => toggleCellStyle("underline"),
+            disabled: !hasTarget,
+            className: `px-2 py-1 text-xs rounded transition-colors underline ${focusedStyle.underline ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:bg-gray-200"} disabled:opacity-40 disabled:cursor-not-allowed`,
+            children: "U"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: focusedStyle.fontSize ?? "base",
+            onChange: (e) => toggleCellStyle("fontSize", e.target.value),
+            disabled: !hasTarget,
+            className: "ml-1 text-xs border border-gray-300 rounded px-1 py-0.5 bg-white disabled:opacity-40 disabled:cursor-not-allowed",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "sm", children: "XS" }),
+              /* @__PURE__ */ jsx("option", { value: "base", children: "S" }),
+              /* @__PURE__ */ jsx("option", { value: "lg", children: "M" }),
+              /* @__PURE__ */ jsx("option", { value: "xl", children: "L" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(
+      EditableGrid,
+      {
+        columns,
+        data,
+        onChange: handleChange,
+        onColumnsChange: (newCols) => updateActiveSheet({ columns: newCols }),
+        cellStyles,
+        onFocusChange: setFocusedCell,
+        onSelectionChange: setSelection,
+        minRows: DEFAULT_ROWS,
+        maxHeight: "100%"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center border-t border-gray-200 bg-gray-50 shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 px-1 py-1 overflow-x-auto flex-1 min-w-0", children: [
+        sheets.map((sheet, idx) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setActiveIdx(idx),
+            onDoubleClick: () => {
+              setEditingTab(idx);
+              setTabName(sheet.name);
+            },
+            onContextMenu: (e) => {
+              e.preventDefault();
+              if (sheets.length > 1) removeSheet(idx);
+            },
+            className: `px-3 py-1 text-xs font-medium rounded-b whitespace-nowrap transition-colors ${idx === activeIdx ? "bg-white text-blue-700 border border-t-0 border-gray-300 -mt-px relative z-10" : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"}`,
+            children: editingTab === idx ? /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: tabName,
+                onChange: (e) => setTabName(e.target.value),
+                onBlur: () => renameSheet(idx, tabName || sheet.name),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") renameSheet(idx, tabName || sheet.name);
+                  if (e.key === "Escape") setEditingTab(null);
+                },
+                onClick: (e) => e.stopPropagation(),
+                autoFocus: true,
+                className: "w-20 text-xs border border-blue-400 rounded px-1 py-0 focus:ring-0 focus:outline-none"
+              }
+            ) : sheet.name
+          },
+          sheet.id
+        )),
+        /* @__PURE__ */ jsx("button", { onClick: addSheet, className: "px-2 py-1 text-xs text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded", title: "Add sheet", children: "+" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 px-3 py-1 text-xs text-gray-500 shrink-0 border-l border-gray-200", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          filledCount,
+          " cells"
+        ] }),
+        allNums.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Sum: ",
+            allNums.reduce((s, v) => s + v, 0).toLocaleString(void 0, { maximumFractionDigits: 2 })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Avg: ",
+            (allNums.reduce((s, v) => s + v, 0) / allNums.length).toLocaleString(void 0, { maximumFractionDigits: 2 })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          data.length,
+          " \xD7 ",
+          columns.length
+        ] })
+      ] })
+    ] })
+  ] });
+}
 
-export { EditableGrid };
-//# sourceMappingURL=chunk-GP4Y3VCB.js.map
-//# sourceMappingURL=chunk-GP4Y3VCB.js.map
+export { EditableGrid, Spreadsheet, setSpreadsheetPreview };
+//# sourceMappingURL=chunk-KMGWSDEI.js.map
+//# sourceMappingURL=chunk-KMGWSDEI.js.map