react-os-shell 0.2.63 → 0.2.66

package/dist/index.d.ts

@@ -606,6 +606,8 @@ interface ChangelogEntry {
     changes: string[];
 }
 
+type PreviewFileKind = 'pdf' | 'dxf' | '3d' | 'image' | 'csv';
+
 interface DesktopItem {
     entityType: string;
     entityId: string;
@@ -613,6 +615,10 @@ interface DesktopItem {
     x?: number;
     y?: number;
     folderId?: string;
+    folderX?: number;
+    folderY?: number;
+    filePath?: string;
+    fileKind?: PreviewFileKind;
 }
 interface DesktopFolder {
     id: string;

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-XWSXCBP2.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-ZAOJ5JY5.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-JRUZT46J.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-DVS3TOYB.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-DVS3TOYB.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.66" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -1010,6 +1012,45 @@ 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";
+function FileIconTile({ entityType, isSelected, entityId, label, fileKind }) {
+  const isPreviewFile = entityType === "preview-file" && fileKind;
+  const previewColor2 = isPreviewFile ? PREVIEW_FILE_COLORS[fileKind] : null;
+  const previewCode = isPreviewFile ? PREVIEW_FILE_CODES[fileKind] : null;
+  if (entityType === "folder") {
+    return /* @__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" })
+    ] }) });
+  }
+  if (entityType === "page") {
+    const icon = label && navIcons[label] || (entityId ? navIcons[entityId] : void 0);
+    return /* @__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: icon && isValidElement(icon) ? cloneElement(icon, { className: "h-10 w-10 text-white drop-shadow-[0_2px_3px_rgba(0,0,0,0.4)]" }) : /* @__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" }) }) });
+  }
+  return /* @__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() })
+  ] });
+}
 var GRID = 90;
 function snapToGrid(x, y) {
   return { x: Math.round(x / GRID) * GRID, y: Math.round(y / GRID) * GRID };
@@ -1021,13 +1062,35 @@ function DesktopHostProvider({ value, children }) {
 function useDesktopHost() {
   return useContext(DesktopHostContext);
 }
-function FolderWindow({ folder, items, onClose, onOpen, onMoveOut, onReorder }) {
+var FOLDER_GRID = 90;
+var FOLDER_ITEM_H = 80;
+var FOLDER_PAD = 12;
+function FolderWindow({ folder, items, onClose, onOpen, onMoveOut, onSetFolderPosition, onDragOutToDesktop }) {
   const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
   const [rubber, setRubber] = useState(null);
   const didDragRubber = useRef(false);
   const bodyRef = useRef(null);
-  const [dragIdx, setDragIdx] = useState(null);
-  const [dropIdx, setDropIdx] = useState(null);
+  const [bodyWidth, setBodyWidth] = useState(800);
+  const setDragOutsideClass = (on) => {
+    const el = bodyRef.current;
+    if (!el) return;
+    el.style.outline = on ? "2px dashed rgb(96 165 250 / 0.6)" : "";
+    el.style.outlineOffset = on ? "-2px" : "";
+  };
+  useEffect(() => {
+    const el = bodyRef.current;
+    if (!el) return;
+    const update = () => setBodyWidth(el.clientWidth);
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const cols = Math.max(1, Math.floor((bodyWidth - FOLDER_PAD) / FOLDER_GRID));
+  const getItemFolderPos = (item, idx) => {
+    if (item.folderX != null && item.folderY != null) return { x: item.folderX, y: item.folderY };
+    return { x: FOLDER_PAD + idx % cols * FOLDER_GRID, y: FOLDER_PAD + Math.floor(idx / cols) * FOLDER_GRID };
+  };
   const toggleSelect = (i, e) => {
     e.stopPropagation();
     if (e.shiftKey || e.metaKey || e.ctrlKey) {
@@ -1036,53 +1099,57 @@ function FolderWindow({ folder, items, onClose, onOpen, onMoveOut, onReorder })
         next.has(i) ? next.delete(i) : next.add(i);
         return next;
       });
-    } else {
+    } else if (!selected.has(i)) {
       setSelected(/* @__PURE__ */ new Set([i]));
     }
   };
   const startRubber = (e) => {
     if (e.button !== 0 || e.target !== bodyRef.current) return;
-    const r = bodyRef.current.getBoundingClientRect();
-    const x = e.clientX - r.left;
-    const y = e.clientY - r.top;
+    const el = bodyRef.current;
+    const r = el.getBoundingClientRect();
+    const x = e.clientX - r.left + el.scrollLeft;
+    const y = e.clientY - r.top + el.scrollTop;
     setRubber({ x1: x, y1: y, x2: x, y2: y });
     didDragRubber.current = false;
     setSelected(/* @__PURE__ */ new Set());
   };
   useEffect(() => {
     if (!rubber) return;
+    const computeSelection = (minX, maxX, minY, maxY) => {
+      const next = /* @__PURE__ */ new Set();
+      const r = bodyRef.current;
+      if (!r) return next;
+      const tiles = r.querySelectorAll("[data-folder-item]");
+      const containerRect = r.getBoundingClientRect();
+      tiles.forEach((t) => {
+        const tr = t.getBoundingClientRect();
+        const tx = tr.left - containerRect.left + r.scrollLeft;
+        const ty = tr.top - containerRect.top + r.scrollTop;
+        if (tx + tr.width > minX && tx < maxX && ty + tr.height > minY && ty < maxY) {
+          const i = parseInt(t.getAttribute("data-folder-item") || "-1", 10);
+          if (i >= 0) next.add(i);
+        }
+      });
+      return next;
+    };
     const move = (e) => {
-      const r = bodyRef.current?.getBoundingClientRect();
-      if (!r) return;
-      const x = e.clientX - r.left;
-      const y = e.clientY - r.top;
+      const el = bodyRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const x = e.clientX - r.left + el.scrollLeft;
+      const y = e.clientY - r.top + el.scrollTop;
       const dx = x - rubber.x1, dy = y - rubber.y1;
       if (dx * dx + dy * dy > 16) didDragRubber.current = true;
       setRubber((prev) => prev ? { ...prev, x2: x, y2: y } : null);
-    };
-    const up = () => {
-      const next = /* @__PURE__ */ new Set();
-      const r = bodyRef.current;
-      if (r && rubber) {
-        const minX = Math.min(rubber.x1, rubber.x2);
-        const maxX = Math.max(rubber.x1, rubber.x2);
-        const minY = Math.min(rubber.y1, rubber.y2);
-        const maxY = Math.max(rubber.y1, rubber.y2);
-        const tiles = r.querySelectorAll("[data-folder-item]");
-        const containerRect = r.getBoundingClientRect();
-        tiles.forEach((t) => {
-          const tr = t.getBoundingClientRect();
-          const tx = tr.left - containerRect.left;
-          const ty = tr.top - containerRect.top;
-          if (tx + tr.width > minX && tx < maxX && ty + tr.height > minY && ty < maxY) {
-            const i = parseInt(t.getAttribute("data-folder-item") || "-1", 10);
-            if (i >= 0) next.add(i);
-          }
-        });
+      if (didDragRubber.current) {
+        const minX = Math.min(rubber.x1, x);
+        const maxX = Math.max(rubber.x1, x);
+        const minY = Math.min(rubber.y1, y);
+        const maxY = Math.max(rubber.y1, y);
+        setSelected(computeSelection(minX, maxX, minY, maxY));
       }
-      if (didDragRubber.current) setSelected(next);
-      setRubber(null);
     };
+    const up = () => setRubber(null);
     window.addEventListener("pointermove", move);
     window.addEventListener("pointerup", up);
     return () => {
@@ -1090,28 +1157,75 @@ function FolderWindow({ folder, items, onClose, onOpen, onMoveOut, onReorder })
       window.removeEventListener("pointerup", up);
     };
   }, [rubber]);
-  const onItemDragStart = (i) => (e) => {
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/plain", String(i));
-    setDragIdx(i);
-  };
-  const onItemDragOver = (i) => (e) => {
-    e.preventDefault();
-    if (dragIdx !== null && dragIdx !== i) setDropIdx(i);
-  };
-  const onItemDrop = (i) => (e) => {
+  const dragEntriesRef = useRef([]);
+  const dragStartRef = useRef(null);
+  const startItemDrag = (i, e) => {
+    if (e.button !== 0) return;
+    e.stopPropagation();
     e.preventDefault();
-    if (dragIdx === null || dragIdx === i) {
-      setDragIdx(null);
-      setDropIdx(null);
-      return;
-    }
-    const next = [...items];
-    const [moved] = next.splice(dragIdx, 1);
-    next.splice(i, 0, moved);
-    onReorder(next);
-    setDragIdx(null);
-    setDropIdx(null);
+    const useMulti = selected.has(i) && selected.size > 1;
+    const idxs = useMulti ? Array.from(selected) : [i];
+    if (!useMulti) setSelected(/* @__PURE__ */ new Set([i]));
+    const entries = idxs.map((idx) => {
+      const item = items[idx];
+      const pos = getItemFolderPos(item, idx);
+      const el = bodyRef.current?.querySelector(`[data-folder-item="${idx}"]`) ?? null;
+      return { idx, item, origX: pos.x, origY: pos.y, el };
+    }).filter((e2) => e2.item);
+    dragEntriesRef.current = entries;
+    dragStartRef.current = { clientX: e.clientX, clientY: e.clientY };
+    setDragOutsideClass(false);
+    let moved = false;
+    const move = (ev) => {
+      const start = dragStartRef.current;
+      if (!start) return;
+      const dx = ev.clientX - start.clientX;
+      const dy = ev.clientY - start.clientY;
+      if (!moved && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) moved = true;
+      if (!moved) return;
+      for (const entry of dragEntriesRef.current) {
+        if (!entry.el) continue;
+        entry.el.style.left = `${entry.origX + dx}px`;
+        entry.el.style.top = `${entry.origY + dy}px`;
+        entry.el.style.zIndex = "100";
+        entry.el.style.opacity = "0.85";
+      }
+      const r = bodyRef.current?.getBoundingClientRect();
+      const inside = !!r && ev.clientX >= r.left && ev.clientX <= r.right && ev.clientY >= r.top && ev.clientY <= r.bottom;
+      setDragOutsideClass(!inside);
+    };
+    const up = (ev) => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      const entries2 = dragEntriesRef.current;
+      dragEntriesRef.current = [];
+      dragStartRef.current = null;
+      for (const entry of entries2) {
+        if (!entry.el) continue;
+        entry.el.style.zIndex = "";
+        entry.el.style.opacity = "";
+      }
+      setDragOutsideClass(false);
+      if (!moved) return;
+      const r = bodyRef.current?.getBoundingClientRect();
+      const inside = !!r && ev.clientX >= r.left && ev.clientX <= r.right && ev.clientY >= r.top && ev.clientY <= r.bottom;
+      if (!inside) {
+        const drops = entries2.map((e2) => ({ item: e2.item, clientX: ev.clientX, clientY: ev.clientY }));
+        setSelected(/* @__PURE__ */ new Set());
+        onDragOutToDesktop(drops);
+      } else {
+        const updates = entries2.map((e2) => {
+          const leftStr = e2.el?.style.left || `${e2.origX}px`;
+          const topStr = e2.el?.style.top || `${e2.origY}px`;
+          const x = Math.max(0, parseFloat(leftStr));
+          const y = Math.max(0, parseFloat(topStr));
+          return { item: e2.item, x, y };
+        });
+        onSetFolderPosition(updates);
+      }
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
   };
   const moveSelectedOut = () => {
     if (selected.size === 0) return;
@@ -1119,6 +1233,10 @@ function FolderWindow({ folder, items, onClose, onOpen, onMoveOut, onReorder })
     setSelected(/* @__PURE__ */ new Set());
   };
   const folderIcon = /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-amber-500", fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M2 6a2 2 0 012-2h5l2 2h9a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" }) });
+  const contentHeight = items.reduce((max, item, i) => {
+    const pos = getItemFolderPos(item, i);
+    return Math.max(max, pos.y + FOLDER_ITEM_H + FOLDER_PAD);
+  }, 300);
   return /* @__PURE__ */ jsx(Modal, { open: true, onClose, title: folder.name, icon: folderIcon, size: "lg", children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1136,7 +1254,7 @@ function FolderWindow({ folder, items, onClose, onOpen, onMoveOut, onReorder })
         background: "linear-gradient(135deg, rgba(254, 243, 199, 0.55) 0%, rgba(253, 230, 138, 0.4) 50%, rgba(252, 211, 77, 0.3) 100%)"
       },
       children: [
-        selected.size > 0 && /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 mb-2 flex items-center gap-2 px-2 py-1 rounded-md bg-white/80 backdrop-blur-sm shadow border border-gray-200 text-xs text-gray-700 w-fit", children: [
+        selected.size > 0 && /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-20 mb-2 flex items-center gap-2 px-2 py-1 rounded-md bg-white/80 backdrop-blur-sm shadow border border-gray-200 text-xs text-gray-700 w-fit", children: [
           /* @__PURE__ */ jsxs("span", { children: [
             selected.size,
             " selected"
@@ -1144,40 +1262,22 @@ function FolderWindow({ folder, items, onClose, onOpen, onMoveOut, onReorder })
           /* @__PURE__ */ jsx("button", { onClick: moveSelectedOut, className: "px-2 py-0.5 rounded text-blue-600 hover:bg-blue-50", children: "Move to desktop" }),
           /* @__PURE__ */ jsx("button", { onClick: () => setSelected(/* @__PURE__ */ new Set()), className: "px-2 py-0.5 rounded text-gray-500 hover:bg-gray-100", children: "Clear" })
         ] }),
-        items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 text-center py-8 italic", children: "Folder is empty. Drag documents here." }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: items.map((item, i) => {
+        items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 text-center py-8 italic", children: "Folder is empty. Drag documents here." }) : /* @__PURE__ */ jsx("div", { className: "relative", style: { height: contentHeight }, children: items.map((item, i) => {
           const isSelected = selected.has(i);
-          const isDropTarget = dropIdx === i && dragIdx !== i;
-          return /* @__PURE__ */ jsxs(
+          const pos = getItemFolderPos(item, i);
+          return /* @__PURE__ */ jsx(
             "div",
             {
               "data-folder-item": i,
-              draggable: true,
-              onDragStart: onItemDragStart(i),
-              onDragOver: onItemDragOver(i),
-              onDrop: onItemDrop(i),
-              onDragEnd: () => {
-                setDragIdx(null);
-                setDropIdx(null);
-              },
+              onPointerDown: (e) => startItemDrag(i, e),
               onClick: (e) => toggleSelect(i, e),
               onDoubleClick: () => onOpen(item),
-              className: `group relative flex flex-col items-center gap-1 w-20 p-2 rounded-lg cursor-default transition-colors ${isSelected ? "bg-blue-200/60 ring-2 ring-blue-400" : "hover:bg-white/60"} ${isDropTarget ? "ring-2 ring-blue-500 ring-dashed" : ""} ${dragIdx === i ? "opacity-40" : ""}`,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onMoveOut([item]);
-                    },
-                    title: "Move to desktop",
-                    className: "absolute -top-1 -right-1 h-5 w-5 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-[10px] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-100 hover:text-red-600 shadow-sm z-10",
-                    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("span", { className: `text-[10px] font-medium text-center leading-tight truncate w-full ${isSelected ? "text-blue-900" : "text-gray-700"}`, children: item.label })
-              ]
+              style: { position: "absolute", left: pos.x, top: pos.y },
+              className: "cursor-default select-none",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 w-20 p-2", children: [
+                /* @__PURE__ */ jsx(FileIconTile, { entityType: item.entityType, isSelected, entityId: item.entityId, label: item.label, fileKind: item.fileKind }),
+                /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium text-center leading-tight truncate w-full ${isSelected ? "text-blue-900 bg-blue-200/60 rounded px-1" : "text-gray-700"}`, children: item.label })
+              ] })
             },
             `${item.entityType}-${item.entityId}-${i}`
           );
@@ -1321,6 +1421,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;
@@ -1451,7 +1577,7 @@ function Desktop({ profile }) {
           const desktopIdx = favDocs.indexOf(desktopItems[move2.entry.idx]);
           if (desktopIdx === -1) continue;
           if (droppedOnFolder) {
-            updated[desktopIdx] = { ...updated[desktopIdx], folderId: droppedOnFolder.id, x: void 0, y: void 0 };
+            updated[desktopIdx] = { ...updated[desktopIdx], folderId: droppedOnFolder.id, x: void 0, y: void 0, folderX: void 0, folderY: void 0 };
           } else {
             updated[desktopIdx] = { ...updated[desktopIdx], x: move2.finalRight, y: move2.finalTop, folderId: void 0 };
             positionsPatch[`item-${desktopIdx}`] = { right: move2.finalRight, top: move2.finalTop };
@@ -1504,6 +1630,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 +1658,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,24 +1853,8 @@ 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" })
-      ] }),
-      /* @__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() })
-    ] }),
+  const renderIcon = (entityType, label, isSelected, entityId, fileKind) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 w-20 p-2", children: [
+    /* @__PURE__ */ jsx(FileIconTile, { entityType, isSelected, entityId, label, fileKind }),
     /* @__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) => ({
@@ -1866,10 +1979,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,17 +2285,55 @@ 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(
-                  (d) => d.folderId === openFolder && ids.has(`${d.entityType}|${d.entityId}`) ? { ...d, folderId: void 0 } : d
+                  (d) => d.folderId === openFolder && ids.has(`${d.entityType}|${d.entityId}`) ? { ...d, folderId: void 0, folderX: void 0, folderY: void 0 } : d
                 );
                 saveDocs(updated);
               },
-              onReorder: (nextItems) => {
-                const others = favDocs.filter((d) => d.folderId !== openFolder);
-                saveDocs([...others, ...nextItems]);
+              onSetFolderPosition: (updates) => {
+                const patch = new Map(updates.map((u) => [`${u.item.entityType}|${u.item.entityId}`, u]));
+                const updated = favDocs.map((d) => {
+                  const u = patch.get(`${d.entityType}|${d.entityId}`);
+                  return u ? { ...d, folderX: u.x, folderY: u.y } : d;
+                });
+                saveDocs(updated);
+              },
+              onDragOutToDesktop: (drops) => {
+                const containerRect = containerRef.current?.getBoundingClientRect();
+                const cw = containerRef.current?.clientWidth ?? window.innerWidth;
+                const patch = /* @__PURE__ */ new Map();
+                for (const d of drops) {
+                  const offX = containerRect ? d.clientX - containerRect.left : d.clientX;
+                  const offY = containerRect ? d.clientY - containerRect.top : d.clientY;
+                  let right = cw - offX - 40;
+                  let top = Math.max(0, offY - 40);
+                  if (snapEnabled) {
+                    const s = snapToGrid(right, top);
+                    right = s.x;
+                    top = s.y;
+                  }
+                  right = Math.max(0, right);
+                  patch.set(`${d.item.entityType}|${d.item.entityId}`, { right, top });
+                }
+                const updated = favDocs.map((d) => {
+                  const p = patch.get(`${d.entityType}|${d.entityId}`);
+                  return p ? { ...d, folderId: void 0, folderX: void 0, folderY: void 0, x: p.right, y: p.top } : d;
+                });
+                saveDocs(updated);
               }
             }
           );