react-os-shell 1.4.0 → 1.5.0

package/dist/index.js

@@ -4,18 +4,18 @@ import { subscribePomo, getPomoSnapshot } from './chunk-5X5LQNOX.js';
 export { setShellTodoProvider } from './chunk-5X5LQNOX.js';
 import { useShellPrefs } from './chunk-36VM54SC.js';
 export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
-import { PREVIEW_OPENED_EVENT, openPreviewFile } from './chunk-HBJUIVN3.js';
-export { Breadcrumbs } from './chunk-HBJUIVN3.js';
+import { PREVIEW_OPENED_EVENT, publishDesktopFolders, requestFilesTrashView, FolderGlyph, openPreviewFile, requestFilesDesktopFolderView, FileIconTile, hashGradient } from './chunk-F6NIGZTF.js';
+export { Breadcrumbs } from './chunk-F6NIGZTF.js';
 import { SidebarLayout } from './chunk-VGTEM5RZ.js';
 export { SidebarLayout } from './chunk-VGTEM5RZ.js';
 import { playNotification, playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, setSoundForType, previewSound, setAllSounds, playLogout } from './chunk-D7PYW2QS.js';
-import { setPdfPreview } from './chunk-CJH5U3BW.js';
+import { setPdfPreview } from './chunk-PTRHYPXO.js';
 import './chunk-KUIPWCTJ.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
-export { EditableGrid } from './chunk-T6TOGZ2V.js';
-import { APP_VERSION } from './chunk-EUP5PCNL.js';
-export { VERSION } from './chunk-EUP5PCNL.js';
+export { EditableGrid } from './chunk-IJ5Y4EGQ.js';
+import { APP_VERSION } from './chunk-W5ARJ7PU.js';
+export { VERSION } from './chunk-W5ARJ7PU.js';
 import { useWindowManager, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, WINDOW_REGISTRY, isPageEntry, useIsMobile, ModalActions, useModalActive, client_default, LoadingSpinner, setWindowPosition, ThumbCard, activateModal } from './chunk-GWVVILYQ.js';
 export { CancelButton, CopyButton, DocFavStar, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, commitExposeHighlight, exitExposeMode, getActiveWindowRoute, getExposeHighlight, getWindowPosition, isEntityEntry, isPageEntry, setExposeHighlight, setShellApiClient, setShellWindowRegistry, setWindowDefaultPosition, setWindowPosition, subscribeExposeHighlight, toggleExposeMode, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-GWVVILYQ.js';
 import { confirm } from './chunk-UBN4IUDE.js';
@@ -1488,87 +1488,8 @@ async function reportBug(submit) {
     toast_default.error(err?.response?.data?.detail || "Failed to send.");
   }
 }
-var ENTITY_ICON_COLORS = {
-  order: "text-blue-600",
-  purchase_order: "text-purple-600",
-  invoice: "text-green-600",
-  client: "text-indigo-600",
-  manufacturer: "text-orange-600",
-  shipment: "text-teal-600",
-  part_number: "text-gray-600",
-  project: "text-pink-600",
-  mould: "text-red-600",
-  design: "text-cyan-600",
-  brand: "text-amber-600",
-  price_sheet: "text-emerald-600",
-  folder: "text-yellow-600",
-  page: "text-blue-500"
-};
-var ENTITY_ICONS = {
-  order: "SO",
-  purchase_order: "PO",
-  invoice: "INV",
-  client: "CLI",
-  manufacturer: "MFR",
-  shipment: "DN",
-  part_number: "PN",
-  project: "PRJ",
-  mould: "MLD",
-  design: "DSN",
-  brand: "BRD",
-  price_sheet: "PS",
-  vendor_invoice: "VI",
-  vendor_payment: "VP",
-  warranty_claim: "WC",
-  qc_report: "QC",
-  vendor_shipment: "GRN",
-  bank_account: "BA",
-  wheel_finish: "WF",
-  weight_log: "WL",
-  production_progress: "PP",
-  vendor_price_sheet: "VPS",
-  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 };
@@ -1580,242 +1501,6 @@ function DesktopHostProvider({ value, children }) {
 function useDesktopHost() {
   return useContext(DesktopHostContext);
 }
-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 [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) {
-      setSelected((prev) => {
-        const next = new Set(prev);
-        next.has(i) ? next.delete(i) : next.add(i);
-        return next;
-      });
-    } else if (!selected.has(i)) {
-      setSelected(/* @__PURE__ */ new Set([i]));
-    }
-  };
-  const startRubber = (e) => {
-    if (e.button !== 0 || e.target !== bodyRef.current) return;
-    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 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);
-      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));
-      }
-    };
-    const up = () => setRubber(null);
-    window.addEventListener("pointermove", move);
-    window.addEventListener("pointerup", up);
-    return () => {
-      window.removeEventListener("pointermove", move);
-      window.removeEventListener("pointerup", up);
-    };
-  }, [rubber]);
-  const dragEntriesRef = useRef([]);
-  const dragStartRef = useRef(null);
-  const startItemDrag = (i, e) => {
-    if (e.button !== 0) return;
-    e.stopPropagation();
-    e.preventDefault();
-    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;
-    onMoveOut(Array.from(selected).map((i) => items[i]).filter(Boolean));
-    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",
-    {
-      ref: bodyRef,
-      onPointerDown: startRubber,
-      onClick: () => {
-        if (didDragRubber.current) {
-          didDragRubber.current = false;
-          return;
-        }
-        setSelected(/* @__PURE__ */ new Set());
-      },
-      className: "relative h-full min-h-[300px] p-3 overflow-auto",
-      style: {
-        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-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"
-          ] }),
-          /* @__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: "relative", style: { height: contentHeight }, children: items.map((item, i) => {
-          const isSelected = selected.has(i);
-          const pos = getItemFolderPos(item, i);
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-folder-item": i,
-              onPointerDown: (e) => startItemDrag(i, e),
-              onClick: (e) => toggleSelect(i, e),
-              onDoubleClick: () => onOpen(item),
-              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}`
-          );
-        }) }),
-        rubber && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute border border-blue-500 bg-blue-500/10 pointer-events-none",
-            style: {
-              left: Math.min(rubber.x1, rubber.x2),
-              top: Math.min(rubber.y1, rubber.y2),
-              width: Math.abs(rubber.x2 - rubber.x1),
-              height: Math.abs(rubber.y2 - rubber.y1)
-            }
-          }
-        )
-      ]
-    }
-  ) });
-}
 function Desktop({ profile }) {
   useQueryClient();
   const { openEntity, openPage } = useWindowManager();
@@ -1918,7 +1603,6 @@ function Desktop({ profile }) {
   const [contextMenu, setContextMenu] = useState(null);
   const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
   const [rubberBand, setRubberBand] = useState(null);
-  const [openFolder, setOpenFolder] = useState(null);
   const [aboutOpen, setAboutOpen] = useState(false);
   const [whatsNewOpen, setWhatsNewOpen] = useState(false);
   const [widgetsOpen, setWidgetsOpen] = useState(false);
@@ -1941,13 +1625,13 @@ 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 };
+  const liveStateRef = useRef({ folders, favDocs, saveFolders, saveDocs });
+  liveStateRef.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;
+      const { folders: fs, favDocs: docs, saveFolders: sf, saveDocs: sd } = liveStateRef.current;
       if (!fs.some((f) => f.id === DOCUMENTS_FOLDER_ID)) {
         sf([...fs, { id: DOCUMENTS_FOLDER_ID, name: DOCUMENTS_FOLDER_NAME }]);
       }
@@ -1982,6 +1666,36 @@ function Desktop({ profile }) {
   };
   const desktopItems = favDocs.filter((d) => !d.folderId);
   const folderItems = (folderId) => favDocs.filter((d) => d.folderId === folderId);
+  const openItem = (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 if (item.entityType === "page") {
+      openPage(item.entityId);
+    } else {
+      openEntity(item.entityType, item.entityId, null, item.label);
+    }
+  };
+  const openDesktopFolder = (folderId) => {
+    requestFilesDesktopFolderView(folderId);
+    openPage("/files");
+  };
+  const bridgeMoveToDesktop = useCallback((toMove) => {
+    const { favDocs: docs, saveDocs: sd } = liveStateRef.current;
+    const ids = new Set(toMove.map((t) => `${t.entityType}|${t.entityId}`));
+    sd(docs.map(
+      (d) => d.folderId && ids.has(`${d.entityType}|${d.entityId}`) ? { ...d, folderId: void 0, folderX: void 0, folderY: void 0 } : d
+    ));
+  }, []);
+  const bridgeRemoveShortcuts = useCallback((toRemove) => {
+    const { favDocs: docs, saveDocs: sd } = liveStateRef.current;
+    const ids = new Set(toRemove.map((t) => `${t.entityType}|${t.entityId}`));
+    sd(docs.filter((d) => !(d.folderId && ids.has(`${d.entityType}|${d.entityId}`))));
+  }, []);
   const [localPositions, setLocalPositions] = useState({});
   const dragEntriesRef = useRef([]);
   const startDrag = (type, idx, e) => {
@@ -2138,6 +1852,21 @@ function Desktop({ profile }) {
   useEffect(() => {
     setLocalPositions({});
   }, [favDocsKey, foldersKey]);
+  useEffect(() => {
+    const { folders: fs, favDocs: docs } = liveStateRef.current;
+    const itemsByFolder = {};
+    for (const f of fs) itemsByFolder[f.id] = [];
+    for (const d of docs) {
+      if (d.folderId && itemsByFolder[d.folderId]) itemsByFolder[d.folderId].push(d);
+    }
+    publishDesktopFolders({
+      folders: fs.map((f) => ({ id: f.id, name: f.name, itemCount: itemsByFolder[f.id]?.length ?? 0 })),
+      itemsByFolder,
+      moveToDesktop: bridgeMoveToDesktop,
+      removeShortcuts: bridgeRemoveShortcuts
+    });
+  }, [favDocsKey, foldersKey, bridgeMoveToDesktop, bridgeRemoveShortcuts]);
+  useEffect(() => () => publishDesktopFolders(null), []);
   const didRubberBandDragRef = useRef(false);
   const startRubberBand = (e) => {
     if (e.button !== 0 || e.target !== containerRef.current) return;
@@ -2167,6 +1896,16 @@ function Desktop({ profile }) {
           sel.add(`folder-${i}`);
         }
       });
+      const trashEl = containerRef.current?.querySelector('[data-desktop-icon="trash"]');
+      const containerRect = containerRef.current?.getBoundingClientRect();
+      if (trashEl && containerRect) {
+        const tr = trashEl.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) {
+          sel.add("trash");
+        }
+      }
       return sel;
     };
     const move = (e) => {
@@ -2407,6 +2146,7 @@ function Desktop({ profile }) {
           const trashPos = prefs.desktop_trash_position;
           const right = trashPos?.right ?? defaultRight;
           const bottom = trashPos?.bottom ?? defaultBottom;
+          const isTrashSelected = selected.has("trash");
           const startTrashDrag = (e) => {
             if (e.button !== 0) return;
             e.preventDefault();
@@ -2443,18 +2183,28 @@ function Desktop({ profile }) {
               "data-desktop-icon": "trash",
               style: { position: "absolute", right, bottom, zIndex: 1 },
               onPointerDown: startTrashDrag,
-              onClick: (e) => e.stopPropagation(),
+              onClick: (e) => {
+                e.stopPropagation();
+                if (e.shiftKey || e.metaKey || e.ctrlKey) {
+                  setSelected((prev) => {
+                    const next = new Set(prev);
+                    next.has("trash") ? next.delete("trash") : next.add("trash");
+                    return next;
+                  });
+                } else if (!selected.has("trash")) {
+                  setSelected(/* @__PURE__ */ new Set(["trash"]));
+                }
+              },
               onContextMenu: (e) => e.preventDefault(),
               onDoubleClick: (e) => {
                 e.stopPropagation();
-                window.__REACT_OS_SHELL_FILES_VIEW__ = "trash";
-                window.dispatchEvent(new CustomEvent("react-os-shell:files-show-trash"));
+                requestFilesTrashView();
                 openPage("/files");
               },
               className: "cursor-default select-none",
               title: "Trash \u2014 double-click to open, drag to move",
               children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 w-20 p-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "w-12 h-12 flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "h-12 w-12 drop-shadow-[0_2px_3px_rgba(0,0,0,0.4)]", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: `w-12 h-12 flex items-center justify-center ${isTrashSelected ? "rounded-lg bg-blue-400/30 ring-2 ring-blue-500" : ""}`, children: /* @__PURE__ */ jsx("svg", { className: "h-12 w-12 drop-shadow-[0_2px_3px_rgba(0,0,0,0.4)]", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
                   "path",
                   {
                     fill: "#c0c4cc",
@@ -2466,7 +2216,7 @@ function Desktop({ profile }) {
                     d: "M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 014.368 0c1.603.051 2.816 1.387 2.816 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.346-9z"
                   }
                 ) }) }),
-                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-center leading-tight text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]", children: "Trash" })
+                /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium text-center leading-tight drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)] ${isTrashSelected ? "text-blue-200 bg-blue-600/60 rounded px-1" : "text-white"}`, children: "Trash" })
               ] })
             }
           );
@@ -2499,18 +2249,7 @@ function Desktop({ profile }) {
               onContextMenu: (e) => handleItemContextMenu(e, i),
               onDoubleClick: (e) => {
                 e.stopPropagation();
-                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);
-                }
+                openItem(doc);
               },
               className: "cursor-default select-none",
               children: renderIcon(doc.entityType, doc.label, isSelected, doc.entityId, doc.fileKind)
@@ -2554,14 +2293,11 @@ function Desktop({ profile }) {
               onContextMenu: (e) => handleFolderContextMenu(e, i),
               onDoubleClick: (e) => {
                 e.stopPropagation();
-                setOpenFolder(folder.id);
+                openDesktopFolder(folder.id);
               },
               className: "cursor-default select-none",
               children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 w-20 p-2", children: [
-                /* @__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" : ""} ${isHovered ? "rounded-lg ring-4 ring-amber-400 shadow-[0_0_20px_rgba(245,158,11,0.6)]" : ""}`, 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" })
-                ] }) }),
+                /* @__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" : ""} ${isHovered ? "rounded-lg ring-4 ring-amber-400 shadow-[0_0_20px_rgba(245,158,11,0.6)]" : ""}`, children: /* @__PURE__ */ jsx(FolderGlyph, { className: "h-12 w-12 text-amber-500 drop-shadow-[0_2px_3px_rgba(0,0,0,0.3)]" }) }),
                 renamingFolder === folder.id ? /* @__PURE__ */ jsx(
                   "input",
                   {
@@ -2788,8 +2524,7 @@ function Desktop({ profile }) {
         ] }),
         contextMenu && contextMenu.itemIdx != null && /* @__PURE__ */ jsxs(PopupMenu, { style: menuStyle(contextMenu.x, contextMenu.y), minWidth: 160, children: [
           /* @__PURE__ */ jsx(PopupMenuItem, { onClick: () => {
-            const d = desktopItems[contextMenu.itemIdx];
-            d.entityType === "page" ? openPage(d.entityId) : openEntity(d.entityType, d.entityId, null, d.label);
+            openItem(desktopItems[contextMenu.itemIdx]);
             setContextMenu(null);
           }, children: "Open" }),
           /* @__PURE__ */ jsx(PopupMenuDivider, {}),
@@ -2797,7 +2532,7 @@ function Desktop({ profile }) {
         ] }),
         contextMenu && contextMenu.folderIdx != null && /* @__PURE__ */ jsxs(PopupMenu, { style: menuStyle(contextMenu.x, contextMenu.y), minWidth: 160, children: [
           /* @__PURE__ */ jsx(PopupMenuItem, { onClick: () => {
-            setOpenFolder(folders[contextMenu.folderIdx].id);
+            openDesktopFolder(folders[contextMenu.folderIdx].id);
             setContextMenu(null);
           }, children: "Open" }),
           /* @__PURE__ */ jsx(PopupMenuItem, { onClick: () => {
@@ -2808,68 +2543,6 @@ function Desktop({ profile }) {
           /* @__PURE__ */ jsx(PopupMenuDivider, {}),
           /* @__PURE__ */ jsx(PopupMenuItem, { danger: true, onClick: () => removeFolder(contextMenu.folderIdx), children: "Delete Folder" })
         ] }),
-        openFolder && (() => {
-          const folder = folders.find((f) => f.id === openFolder);
-          if (!folder) return null;
-          return /* @__PURE__ */ jsx(
-            FolderWindow,
-            {
-              folder,
-              items: folderItems(openFolder),
-              onClose: () => setOpenFolder(null),
-              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, folderX: void 0, folderY: void 0 } : d
-                );
-                saveDocs(updated);
-              },
-              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);
-              }
-            }
-          );
-        })(),
         /* @__PURE__ */ jsx(WidgetManager, { open: widgetsOpen, onClose: () => setWidgetsOpen(false) }),
         aboutOpen && (() => {
           const version = host.productVersion ?? APP_VERSION;
@@ -3704,28 +3377,6 @@ function subscribeMobileMode(cb) {
 var MOBILE_WIDGET_ORDER_KEY = "erp_mobile_widget_order";
 var MOBILE_HOME_ORDER_KEY = "erp_mobile_home_order";
 var LONG_PRESS_MS = 400;
-var ICON_GRADIENTS = [
-  "from-blue-500 to-blue-700",
-  "from-indigo-500 to-purple-600",
-  "from-purple-500 to-pink-600",
-  "from-pink-500 to-rose-600",
-  "from-red-500 to-rose-600",
-  "from-orange-500 to-red-600",
-  "from-amber-500 to-orange-600",
-  "from-yellow-500 to-amber-500",
-  "from-lime-500 to-green-600",
-  "from-green-500 to-emerald-600",
-  "from-emerald-500 to-teal-600",
-  "from-teal-500 to-cyan-600",
-  "from-cyan-500 to-sky-600",
-  "from-sky-500 to-blue-600",
-  "from-violet-500 to-fuchsia-600"
-];
-function hashGradient(seed) {
-  let h = 0;
-  for (let i = 0; i < seed.length; i++) h = (h << 5) - h + seed.charCodeAt(i);
-  return ICON_GRADIENTS[Math.abs(h) % ICON_GRADIENTS.length];
-}
 function loadOrder(key) {
   try {
     const raw = localStorage.getItem(key);