react-os-shell 0.2.63 → 0.2.64

package/dist/index.js

@@ -5,18 +5,20 @@ import { subscribePomo, getPomoSnapshot } from './chunk-MK3HLUO4.js';
 import { useGoogleAuth } from './chunk-MVWEL34Y.js';
 import { useShellPrefs } from './chunk-36VM54SC.js';
 export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
+import { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-2RIRISNW.js';
 import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, playLogout, setSoundForType, previewSound, setAllSounds } from './chunk-D7PYW2QS.js';
-import { setPdfPreview } from './chunk-TRYZ75AV.js';
+import { setPdfPreview } from './chunk-BUJKR34D.js';
 import './chunk-KUIPWCTJ.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
-import { useAuth } from './chunk-ADJ3CERD.js';
-export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ3CERD.js';
+import './chunk-MY5PL6MK.js';
 export { EditableGrid } from './chunk-GP4Y3VCB.js';
-import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, useIsMobile, ModalActions, useModalActive, WINDOW_REGISTRY, isPageEntry, LoadingSpinner, ThumbCard, activateModal } from './chunk-ONQJGZCL.js';
-export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-ONQJGZCL.js';
+import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, useIsMobile, ModalActions, useModalActive, WINDOW_REGISTRY, isPageEntry, LoadingSpinner, ThumbCard, activateModal } from './chunk-4CFEJ4CC.js';
+export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-4CFEJ4CC.js';
 import { confirm } from './chunk-PLGHQ7QW.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-PLGHQ7QW.js';
+import { useAuth } from './chunk-ADJ3CERD.js';
+export { ShellAuthProvider, setShellAuthBridge, useShellAuth } from './chunk-ADJ3CERD.js';
 import { glassStyle, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons } from './chunk-SSA762W5.js';
 export { GLASS_DIVIDER, GLASS_INPUT_BG, glassStyle, setShellNavIcons } from './chunk-SSA762W5.js';
 import { createContext, lazy, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, Suspense, isValidElement, cloneElement, useSyncExternalStore, useMemo } from 'react';
@@ -913,7 +915,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.2.62" ;
+var VERSION = "0.2.64" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -1010,6 +1012,22 @@ var ENTITY_ICONS = {
   proposal: "PR",
   folder: "FLD"
 };
+var PREVIEW_FILE_CODES = {
+  pdf: "PDF",
+  dxf: "DXF",
+  "3d": "STP",
+  image: "IMG",
+  csv: "CSV"
+};
+var PREVIEW_FILE_COLORS = {
+  pdf: "text-red-600",
+  dxf: "text-blue-600",
+  "3d": "text-purple-600",
+  image: "text-emerald-600",
+  csv: "text-green-600"
+};
+var DOCUMENTS_FOLDER_ID = "documents";
+var DOCUMENTS_FOLDER_NAME = "Documents";
 var GRID = 90;
 function snapToGrid(x, y) {
   return { x: Math.round(x / GRID) * GRID, y: Math.round(y / GRID) * GRID };
@@ -1175,7 +1193,7 @@ function FolderWindow({ folder, items, onClose, onOpen, onMoveOut, onReorder })
                     children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" }) })
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { className: `w-12 h-12 rounded-lg bg-white shadow flex items-center justify-center text-xs font-bold ${ENTITY_ICON_COLORS[item.entityType] || "text-gray-600"}`, children: ENTITY_ICONS[item.entityType] || item.entityType.slice(0, 3).toUpperCase() }),
+                /* @__PURE__ */ jsx("div", { className: `w-12 h-12 rounded-lg bg-white shadow flex items-center justify-center text-xs font-bold ${item.entityType === "preview-file" && item.fileKind ? PREVIEW_FILE_COLORS[item.fileKind] : ENTITY_ICON_COLORS[item.entityType] || "text-gray-600"}`, children: item.entityType === "preview-file" && item.fileKind ? PREVIEW_FILE_CODES[item.fileKind] : ENTITY_ICONS[item.entityType] || item.entityType.slice(0, 3).toUpperCase() }),
                 /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium text-center leading-tight truncate w-full ${isSelected ? "text-blue-900" : "text-gray-700"}`, children: item.label })
               ]
             },
@@ -1321,6 +1339,32 @@ function Desktop({ profile }) {
     if (host.saveSnap) host.saveSnap(v);
     else saveShellPrefs({ desktop_snap: v });
   }, [host, saveShellPrefs]);
+  const previewStateRef = useRef({ folders, favDocs, saveFolders, saveDocs });
+  previewStateRef.current = { folders, favDocs, saveFolders, saveDocs };
+  useEffect(() => {
+    const handler = (e) => {
+      const detail = e.detail;
+      if (!detail?.filePath) return;
+      const { folders: fs, favDocs: docs, saveFolders: sf, saveDocs: sd } = previewStateRef.current;
+      if (!fs.some((f) => f.id === DOCUMENTS_FOLDER_ID)) {
+        sf([...fs, { id: DOCUMENTS_FOLDER_ID, name: DOCUMENTS_FOLDER_NAME }]);
+      }
+      const deduped = docs.filter(
+        (d) => !(d.entityType === "preview-file" && d.filePath === detail.filePath)
+      );
+      const next = {
+        entityType: "preview-file",
+        entityId: detail.filePath,
+        label: detail.filename,
+        filePath: detail.filePath,
+        fileKind: detail.kind,
+        folderId: DOCUMENTS_FOLDER_ID
+      };
+      sd([next, ...deduped]);
+    };
+    window.addEventListener(PREVIEW_OPENED_EVENT, handler);
+    return () => window.removeEventListener(PREVIEW_OPENED_EVENT, handler);
+  }, []);
   const getDefaultPos = (idx) => {
     const col = Math.floor(idx / 8);
     const row = idx % 8;
@@ -1504,6 +1548,25 @@ function Desktop({ profile }) {
   };
   useEffect(() => {
     if (!rubberBand) return;
+    const computeSelection = (minX, maxX, minY, maxY) => {
+      const sel = /* @__PURE__ */ new Set();
+      const cw = containerRef.current?.clientWidth || 800;
+      desktopItems.forEach((item, i) => {
+        const pos = getItemPos(item, i);
+        const leftX = cw - pos.right - 80;
+        if (leftX + 40 > minX && leftX < maxX && pos.top + 40 > minY && pos.top < maxY) {
+          sel.add(`item-${i}`);
+        }
+      });
+      folders.forEach((f, i) => {
+        const pos = getFolderPos(f, i);
+        const leftX = cw - pos.right - 80;
+        if (leftX + 40 > minX && leftX < maxX && pos.top + 40 > minY && pos.top < maxY) {
+          sel.add(`folder-${i}`);
+        }
+      });
+      return sel;
+    };
     const move = (e) => {
       const rect = containerRef.current?.getBoundingClientRect();
       if (!rect) return;
@@ -1513,31 +1576,15 @@ function Desktop({ profile }) {
       const dy = y - rubberBand.startY;
       if (dx * dx + dy * dy > 16) didRubberBandDragRef.current = true;
       setRubberBand((prev) => prev ? { ...prev, endX: x, endY: y } : null);
+      if (didRubberBandDragRef.current) {
+        const minX = Math.min(rubberBand.startX, x);
+        const maxX = Math.max(rubberBand.startX, x);
+        const minY = Math.min(rubberBand.startY, y);
+        const maxY = Math.max(rubberBand.startY, y);
+        setSelected(computeSelection(minX, maxX, minY, maxY));
+      }
     };
     const up = () => {
-      if (rubberBand) {
-        const minX = Math.min(rubberBand.startX, rubberBand.endX);
-        const maxX = Math.max(rubberBand.startX, rubberBand.endX);
-        const minY = Math.min(rubberBand.startY, rubberBand.endY);
-        const maxY = Math.max(rubberBand.startY, rubberBand.endY);
-        const sel = /* @__PURE__ */ new Set();
-        const cw = containerRef.current?.clientWidth || 800;
-        desktopItems.forEach((item, i) => {
-          const pos = getItemPos(item, i);
-          const leftX = cw - pos.right - 80;
-          if (leftX + 40 > minX && leftX < maxX && pos.top + 40 > minY && pos.top < maxY) {
-            sel.add(`item-${i}`);
-          }
-        });
-        folders.forEach((f, i) => {
-          const pos = getFolderPos(f, i);
-          const leftX = cw - pos.right - 80;
-          if (leftX + 40 > minX && leftX < maxX && pos.top + 40 > minY && pos.top < maxY) {
-            sel.add(`folder-${i}`);
-          }
-        });
-        setSelected(sel);
-      }
       setRubberBand(null);
     };
     window.addEventListener("pointermove", move);
@@ -1724,26 +1771,31 @@ function Desktop({ profile }) {
     purple: "bg-purple-100 border-purple-300",
     orange: "bg-orange-100 border-orange-300"
   };
-  const renderIcon = (entityType, label, isSelected, entityId) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 w-20 p-2", children: [
-    entityType === "folder" ? /* @__PURE__ */ jsx("div", { className: `w-12 h-12 flex items-center justify-center ${isSelected ? "rounded-lg bg-blue-400/30 ring-2 ring-blue-500" : ""}`, children: /* @__PURE__ */ jsxs("svg", { className: "h-12 w-12 drop-shadow-[0_2px_3px_rgba(0,0,0,0.3)]", viewBox: "0 0 48 48", children: [
-      /* @__PURE__ */ jsx("path", { d: "M6 12a4 4 0 014-4h10l4 4h14a4 4 0 014 4v20a4 4 0 01-4 4H10a4 4 0 01-4-4V12z", fill: "white", stroke: "#eab308", strokeWidth: "2", strokeLinejoin: "round" }),
-      /* @__PURE__ */ jsx("path", { d: "M6 18h36", stroke: "#eab308", strokeWidth: "1.5" })
-    ] }) }) : entityType === "page" ? /* @__PURE__ */ jsx("div", { className: `w-12 h-12 flex items-center justify-center ${isSelected ? "rounded-lg bg-blue-400/30 ring-2 ring-blue-500" : ""}`, children: (() => {
-      const icon = navIcons[label] || (entityId ? navIcons[entityId] : void 0);
-      if (icon && isValidElement(icon)) {
-        return cloneElement(icon, { className: "h-10 w-10 text-white drop-shadow-[0_2px_3px_rgba(0,0,0,0.4)]" });
-      }
-      return /* @__PURE__ */ jsx("svg", { className: "h-10 w-10 text-white drop-shadow-[0_2px_3px_rgba(0,0,0,0.4)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6z" }) });
-    })() }) : /* @__PURE__ */ jsxs("div", { className: `w-12 h-12 relative flex items-center justify-center ${isSelected ? "rounded-lg bg-blue-400/30 ring-2 ring-blue-500" : ""}`, children: [
-      /* @__PURE__ */ jsxs("svg", { className: `w-10 h-12 drop-shadow-[0_2px_3px_rgba(0,0,0,0.3)] ${ENTITY_ICON_COLORS[entityType] || "text-gray-500"}`, viewBox: "0 0 40 48", fill: "none", children: [
-        /* @__PURE__ */ jsx("path", { d: "M4 0h22l10 10v34a4 4 0 01-4 4H4a4 4 0 01-4-4V4a4 4 0 014-4z", fill: "white", fillOpacity: "0.92" }),
-        /* @__PURE__ */ jsx("path", { d: "M26 0l10 10H30a4 4 0 01-4-4V0z", fill: "currentColor", fillOpacity: "0.2" }),
-        /* @__PURE__ */ jsx("path", { d: "M4 0h22l10 10v34a4 4 0 01-4 4H4a4 4 0 01-4-4V4a4 4 0 014-4z", stroke: "currentColor", strokeWidth: "1.5", strokeOpacity: "0.5" })
+  const renderIcon = (entityType, label, isSelected, entityId, fileKind) => {
+    const isPreviewFile = entityType === "preview-file" && fileKind;
+    const previewColor2 = isPreviewFile ? PREVIEW_FILE_COLORS[fileKind] : null;
+    const previewCode = isPreviewFile ? PREVIEW_FILE_CODES[fileKind] : null;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 w-20 p-2", children: [
+      entityType === "folder" ? /* @__PURE__ */ jsx("div", { className: `w-12 h-12 flex items-center justify-center ${isSelected ? "rounded-lg bg-blue-400/30 ring-2 ring-blue-500" : ""}`, children: /* @__PURE__ */ jsxs("svg", { className: "h-12 w-12 drop-shadow-[0_2px_3px_rgba(0,0,0,0.3)]", viewBox: "0 0 48 48", children: [
+        /* @__PURE__ */ jsx("path", { d: "M6 12a4 4 0 014-4h10l4 4h14a4 4 0 014 4v20a4 4 0 01-4 4H10a4 4 0 01-4-4V12z", fill: "white", stroke: "#eab308", strokeWidth: "2", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 18h36", stroke: "#eab308", strokeWidth: "1.5" })
+      ] }) }) : entityType === "page" ? /* @__PURE__ */ jsx("div", { className: `w-12 h-12 flex items-center justify-center ${isSelected ? "rounded-lg bg-blue-400/30 ring-2 ring-blue-500" : ""}`, children: (() => {
+        const icon = navIcons[label] || (entityId ? navIcons[entityId] : void 0);
+        if (icon && isValidElement(icon)) {
+          return cloneElement(icon, { className: "h-10 w-10 text-white drop-shadow-[0_2px_3px_rgba(0,0,0,0.4)]" });
+        }
+        return /* @__PURE__ */ jsx("svg", { className: "h-10 w-10 text-white drop-shadow-[0_2px_3px_rgba(0,0,0,0.4)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6z" }) });
+      })() }) : /* @__PURE__ */ jsxs("div", { className: `w-12 h-12 relative flex items-center justify-center ${isSelected ? "rounded-lg bg-blue-400/30 ring-2 ring-blue-500" : ""}`, children: [
+        /* @__PURE__ */ jsxs("svg", { className: `w-10 h-12 drop-shadow-[0_2px_3px_rgba(0,0,0,0.3)] ${previewColor2 ?? ENTITY_ICON_COLORS[entityType] ?? "text-gray-500"}`, viewBox: "0 0 40 48", fill: "none", children: [
+          /* @__PURE__ */ jsx("path", { d: "M4 0h22l10 10v34a4 4 0 01-4 4H4a4 4 0 01-4-4V4a4 4 0 014-4z", fill: "white", fillOpacity: "0.92" }),
+          /* @__PURE__ */ jsx("path", { d: "M26 0l10 10H30a4 4 0 01-4-4V0z", fill: "currentColor", fillOpacity: "0.2" }),
+          /* @__PURE__ */ jsx("path", { d: "M4 0h22l10 10v34a4 4 0 01-4 4H4a4 4 0 01-4-4V4a4 4 0 014-4z", stroke: "currentColor", strokeWidth: "1.5", strokeOpacity: "0.5" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: `absolute inset-0 flex items-center justify-center text-[9px] font-bold pt-2 ${previewColor2 ?? ENTITY_ICON_COLORS[entityType] ?? "text-gray-600"}`, children: previewCode ?? ENTITY_ICONS[entityType] ?? entityType.slice(0, 3).toUpperCase() })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: `absolute inset-0 flex items-center justify-center text-[9px] font-bold pt-2 ${ENTITY_ICON_COLORS[entityType] || "text-gray-600"}`, children: ENTITY_ICONS[entityType] || entityType.slice(0, 3).toUpperCase() })
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium text-center leading-tight w-full drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)] ${isSelected ? "text-blue-200 bg-blue-600/60 rounded px-1" : "text-white"}`, children: label })
-  ] });
+      /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium text-center leading-tight w-full drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)] ${isSelected ? "text-blue-200 bg-blue-600/60 rounded px-1" : "text-white"}`, children: label })
+    ] });
+  };
   const menuStyle = (x, y) => ({
     ...x + 180 > window.innerWidth ? { right: window.innerWidth - x } : { left: x },
     ...y + 250 > window.innerHeight ? { bottom: window.innerHeight - y } : { top: y }
@@ -1866,10 +1918,21 @@ function Desktop({ profile }) {
               onContextMenu: (e) => handleItemContextMenu(e, i),
               onDoubleClick: (e) => {
                 e.stopPropagation();
-                doc.entityType === "page" ? openPage(doc.entityId) : openEntity(doc.entityType, doc.entityId, null, doc.label);
+                if (doc.entityType === "preview-file" && doc.filePath && doc.fileKind) {
+                  openPreviewFile({
+                    filePath: doc.filePath,
+                    filename: doc.label,
+                    kind: doc.fileKind,
+                    onStaged: (route) => openPage(route)
+                  });
+                } else if (doc.entityType === "page") {
+                  openPage(doc.entityId);
+                } else {
+                  openEntity(doc.entityType, doc.entityId, null, doc.label);
+                }
               },
               className: "cursor-default select-none",
-              children: renderIcon(doc.entityType, doc.label, isSelected, doc.entityId)
+              children: renderIcon(doc.entityType, doc.label, isSelected, doc.entityId, doc.fileKind)
             },
             `item-${doc.entityType}-${doc.entityId}-${i}`
           );
@@ -2161,7 +2224,18 @@ function Desktop({ profile }) {
               folder,
               items: folderItems(openFolder),
               onClose: () => setOpenFolder(null),
-              onOpen: (item) => openEntity(item.entityType, item.entityId, null, item.label),
+              onOpen: (item) => {
+                if (item.entityType === "preview-file" && item.filePath && item.fileKind) {
+                  openPreviewFile({
+                    filePath: item.filePath,
+                    filename: item.label,
+                    kind: item.fileKind,
+                    onStaged: (route) => openPage(route)
+                  });
+                } else {
+                  openEntity(item.entityType, item.entityId, null, item.label);
+                }
+              },
               onMoveOut: (toMove) => {
                 const ids = new Set(toMove.map((t) => `${t.entityType}|${t.entityId}`));
                 const updated = favDocs.map(