react-os-shell 0.2.64 → 0.2.67

package/dist/index.js

@@ -5,16 +5,16 @@ 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 { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-EXYMMWOS.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-BUJKR34D.js';
+import { setPdfPreview } from './chunk-HAUVCQNK.js';
 import './chunk-KUIPWCTJ.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
-import './chunk-MY5PL6MK.js';
+import './chunk-62EP7CNW.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-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 { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, useIsMobile, ModalActions, useModalActive, WINDOW_REGISTRY, isPageEntry, LoadingSpinner, ThumbCard, activateModal } from './chunk-GAC6D4LN.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-GAC6D4LN.js';
 import { confirm } from './chunk-PLGHQ7QW.js';
 export { ConfirmProvider, confirm, confirmDestructive, prompt } from './chunk-PLGHQ7QW.js';
 import { useAuth } from './chunk-ADJ3CERD.js';
@@ -915,7 +915,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.2.64" ;
+var VERSION = "0.2.67" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -1028,6 +1028,29 @@ var PREVIEW_FILE_COLORS = {
 };
 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 };
@@ -1039,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) {
@@ -1054,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 () => {
@@ -1108,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;
@@ -1137,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",
     {
@@ -1154,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"
@@ -1162,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 ${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 })
-              ]
+              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}`
           );
@@ -1495,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 };
@@ -1771,31 +1853,10 @@ function Desktop({ profile }) {
     purple: "bg-purple-100 border-purple-300",
     orange: "bg-orange-100 border-orange-300"
   };
-  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: `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 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) => ({
     ...x + 180 > window.innerWidth ? { right: window.innerWidth - x } : { left: x },
     ...y + 250 > window.innerHeight ? { bottom: window.innerHeight - y } : { top: y }
@@ -2239,13 +2300,40 @@ function Desktop({ profile }) {
               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);
               }
             }
           );