react-os-shell 0.1.10 → 0.1.12

package/dist/index.js

@@ -5,10 +5,10 @@ export { formatDate } from './chunk-NSU7OHPC.js';
 import { toast_default } from './chunk-WIJ45SYD.js';
 export { toast_default as toast } from './chunk-WIJ45SYD.js';
 import { playStartup, soundsEnabled, getSoundConfig, SOUND_PACK_KEYS, SOUND_PACKS, SOUND_TYPES, SOUND_TYPE_LABELS, playLogout, setSoundForType, previewSound, setAllSounds } from './chunk-D7PYW2QS.js';
-import { useShellPrefs } from './chunk-TFGOLXGD.js';
-export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-TFGOLXGD.js';
-import { useWindowManager, glassStyle, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons, ModalActions, useModalActive } from './chunk-ZR2DVGZI.js';
-export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, glassStyle, isEntityEntry, isPageEntry, setShellApiClient, setShellNavIcons, setShellWindowRegistry, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-ZR2DVGZI.js';
+import { useShellPrefs } from './chunk-36VM54SC.js';
+export { ShellPrefsProvider, useLocalStoragePrefs, useShellPrefs } from './chunk-36VM54SC.js';
+import { useWindowManager, glassStyle, PopupMenu, PopupMenuLabel, PopupMenuDivider, PopupMenuItem, Modal, startMenuCategories, navSections, isSection, GLASS_INPUT_BG, navIcons, sectionIcons, ModalActions, useModalActive } from './chunk-24K73LGZ.js';
+export { CancelButton, CopyButton, DocFavStar, GLASS_DIVIDER, GLASS_INPUT_BG, Modal, ModalActions, PopupMenu, PopupMenuDivider, PopupMenuItem, PopupMenuLabel, WindowManagerProvider, WindowTitle, glassStyle, isEntityEntry, isPageEntry, setShellApiClient, setShellNavIcons, setShellWindowRegistry, useModalActive, useWidgetSettings, useWindowManager, useWindowMenuItem, useWindowTitle } from './chunk-24K73LGZ.js';
 export { ConfirmProvider, confirm, confirmDestructive } from './chunk-RFTLYCSF.js';
 import { createContext, useState, useRef, useEffect, useCallback, useLayoutEffect, useContext, isValidElement, cloneElement, useSyncExternalStore } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -643,7 +643,7 @@ function StatusBadge({ status }) {
 }
 
 // src/version.ts
-var VERSION = "0.1.10" ;
+var VERSION = "0.1.12" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -885,65 +885,129 @@ function Desktop({ profile }) {
   const desktopItems = favDocs.filter((d) => !d.folderId);
   const folderItems = (folderId) => favDocs.filter((d) => d.folderId === folderId);
   const [localPositions, setLocalPositions] = useState({});
-  const dragElRef = useRef(null);
+  const dragEntriesRef = useRef([]);
   const startDrag = (type, idx, e) => {
     if (e.button !== 0) return;
-    const items = type === "item" ? desktopItems : folders;
-    const item = items[idx];
-    const pos = type === "item" ? getItemPos(item, idx) : getFolderPos(item, idx);
-    setDragging({ type, idx, startX: e.clientX, startY: e.clientY, origX: pos.right, origY: pos.top });
-    dragElRef.current = e.target.closest("[data-desktop-icon]");
+    const primaryKey = `${type}-${idx}`;
+    const draggingMulti = selected.has(primaryKey) && selected.size > 1;
+    const keys = draggingMulti ? Array.from(selected) : [primaryKey];
+    const entries = [];
+    for (const key of keys) {
+      if (key.startsWith("item-")) {
+        const i = parseInt(key.slice(5), 10);
+        const itm = desktopItems[i];
+        if (!itm) continue;
+        const pos = getItemPos(itm, i);
+        const el = document.querySelector(`[data-desktop-icon="${key}"]`);
+        entries.push({ key, type: "item", idx: i, origX: pos.right, origY: pos.top, el });
+      } else if (key.startsWith("folder-")) {
+        const i = parseInt(key.slice(7), 10);
+        const f = folders[i];
+        if (!f) continue;
+        const pos = getFolderPos(f, i);
+        const el = document.querySelector(`[data-desktop-icon="${key}"]`);
+        entries.push({ key, type: "folder", idx: i, origX: pos.right, origY: pos.top, el });
+      }
+    }
+    dragEntriesRef.current = entries;
+    const primaryEntry = entries.find((e2) => e2.key === primaryKey) ?? entries[0];
+    if (!primaryEntry) return;
+    setDragging({ type, idx, startX: e.clientX, startY: e.clientY, origX: primaryEntry.origX, origY: primaryEntry.origY });
     e.preventDefault();
   };
   useEffect(() => {
     if (!dragging) return;
-    const el = dragElRef.current;
+    const entries = dragEntriesRef.current;
     const move = (e) => {
-      const nr = dragging.origX - (e.clientX - dragging.startX);
-      const nt = dragging.origY + e.clientY - dragging.startY;
-      if (el) {
-        el.style.right = `${nr}px`;
-        el.style.top = `${nt}px`;
-        el.style.left = "auto";
-        el.style.zIndex = "100";
-        el.style.opacity = "0.7";
+      const dx = e.clientX - dragging.startX;
+      const dy = e.clientY - dragging.startY;
+      for (const entry of entries) {
+        if (!entry.el) continue;
+        entry.el.style.right = `${entry.origX - dx}px`;
+        entry.el.style.top = `${entry.origY + dy}px`;
+        entry.el.style.left = "auto";
+        entry.el.style.zIndex = "100";
+        entry.el.style.opacity = "0.7";
       }
     };
     const up = (e) => {
-      let finalRight = dragging.origX - (e.clientX - dragging.startX);
-      let finalTop = Math.max(0, dragging.origY + e.clientY - dragging.startY);
-      if (snapEnabled) {
-        const s = snapToGrid(finalRight, finalTop);
-        finalRight = s.x;
-        finalTop = s.y;
-      }
-      finalRight = Math.max(0, finalRight);
-      if (el) {
-        el.style.zIndex = "";
-        el.style.opacity = "";
+      const dx = e.clientX - dragging.startX;
+      const dy = e.clientY - dragging.startY;
+      for (const entry of entries) {
+        if (!entry.el) continue;
+        entry.el.style.zIndex = "";
+        entry.el.style.opacity = "";
       }
-      if (dragging.type === "item") {
-        const droppedOnFolder = folders.find((f, fi) => {
-          const fp = getFolderPos(f, fi);
-          return Math.abs(finalRight - fp.right) < 40 && Math.abs(finalTop - fp.top) < 40;
-        });
+      const computedPositions = entries.map((entry) => {
+        let finalRight = entry.origX - dx;
+        let finalTop = Math.max(0, entry.origY + dy);
+        if (snapEnabled) {
+          const s = snapToGrid(finalRight, finalTop);
+          finalRight = s.x;
+          finalTop = s.y;
+        }
+        finalRight = Math.max(0, finalRight);
+        return { entry, finalRight, finalTop };
+      });
+      const itemMoves = computedPositions.filter((p) => p.entry.type === "item");
+      if (itemMoves.length > 0) {
         const updated = [...favDocs];
-        const desktopIdx = favDocs.indexOf(desktopItems[dragging.idx]);
-        if (droppedOnFolder) {
-          updated[desktopIdx] = { ...updated[desktopIdx], folderId: droppedOnFolder.id, x: void 0, y: void 0 };
-        } else {
-          updated[desktopIdx] = { ...updated[desktopIdx], x: finalRight, y: finalTop, folderId: void 0 };
-          setLocalPositions((prev) => ({ ...prev, [`item-${desktopIdx}`]: { right: finalRight, top: finalTop } }));
+        const positionsPatch = {};
+        const singleItem = itemMoves.length === 1 && entries.length === 1 ? itemMoves[0] : null;
+        const droppedOnFolder = singleItem ? folders.find((f, fi) => {
+          const fp = getFolderPos(f, fi);
+          return Math.abs(singleItem.finalRight - fp.right) < 40 && Math.abs(singleItem.finalTop - fp.top) < 40;
+        }) : void 0;
+        if (droppedOnFolder && singleItem?.entry.el) {
+          const itemEl = singleItem.entry.el;
+          const folderIdx = folders.indexOf(droppedOnFolder);
+          const folderEl = document.querySelector(`[data-desktop-icon="folder-${folderIdx}"]`);
+          if (folderEl) {
+            const ir = itemEl.getBoundingClientRect();
+            const fr = folderEl.getBoundingClientRect();
+            const dx2 = fr.left + fr.width / 2 - (ir.left + ir.width / 2);
+            const dy2 = fr.top + fr.height / 2 - (ir.top + ir.height / 2);
+            itemEl.style.transition = "transform 220ms ease-out, opacity 220ms ease-out";
+            itemEl.style.transform = `translate(${dx2}px, ${dy2}px) scale(0.2)`;
+            itemEl.style.opacity = "0";
+          }
+          folderEl?.animate(
+            [{ transform: "scale(1)" }, { transform: "scale(1.15)" }, { transform: "scale(1)" }],
+            { duration: 280, easing: "ease-out" }
+          );
+        }
+        for (const move2 of itemMoves) {
+          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 };
+          } else {
+            updated[desktopIdx] = { ...updated[desktopIdx], x: move2.finalRight, y: move2.finalTop, folderId: void 0 };
+            positionsPatch[`item-${desktopIdx}`] = { right: move2.finalRight, top: move2.finalTop };
+          }
         }
-        saveDocs(updated);
-      } else {
+        const commit = () => {
+          saveDocs(updated);
+          if (Object.keys(positionsPatch).length > 0) {
+            setLocalPositions((prev) => ({ ...prev, ...positionsPatch }));
+          }
+        };
+        if (droppedOnFolder) setTimeout(commit, 220);
+        else commit();
+      }
+      const folderMoves = computedPositions.filter((p) => p.entry.type === "folder");
+      if (folderMoves.length > 0) {
         const updated = [...folders];
-        updated[dragging.idx] = { ...updated[dragging.idx], x: finalRight, y: finalTop };
-        setLocalPositions((prev) => ({ ...prev, [`folder-${dragging.idx}`]: { right: finalRight, top: finalTop } }));
+        const positionsPatch = {};
+        for (const move2 of folderMoves) {
+          updated[move2.entry.idx] = { ...updated[move2.entry.idx], x: move2.finalRight, y: move2.finalTop };
+          positionsPatch[`folder-${move2.entry.idx}`] = { right: move2.finalRight, top: move2.finalTop };
+        }
         saveFolders(updated);
+        setLocalPositions((prev) => ({ ...prev, ...positionsPatch }));
       }
       setDragging(null);
-      dragElRef.current = null;
+      dragEntriesRef.current = [];
     };
     window.addEventListener("pointermove", move);
     window.addEventListener("pointerup", up);
@@ -1233,7 +1297,7 @@ function Desktop({ profile }) {
           return /* @__PURE__ */ jsx(
             "div",
             {
-              "data-desktop-icon": true,
+              "data-desktop-icon": `item-${i}`,
               style: { position: "absolute", right: pos.right, top: pos.top, zIndex: 1 },
               onPointerDown: (e) => {
                 e.stopPropagation();
@@ -1241,7 +1305,15 @@ function Desktop({ profile }) {
               },
               onClick: (e) => {
                 e.stopPropagation();
-                setSelected(/* @__PURE__ */ new Set([`item-${i}`]));
+                if (e.shiftKey || e.metaKey || e.ctrlKey) {
+                  setSelected((prev) => {
+                    const next = new Set(prev);
+                    next.has(`item-${i}`) ? next.delete(`item-${i}`) : next.add(`item-${i}`);
+                    return next;
+                  });
+                } else if (!selected.has(`item-${i}`)) {
+                  setSelected(/* @__PURE__ */ new Set([`item-${i}`]));
+                }
               },
               onContextMenu: (e) => handleItemContextMenu(e, i),
               onDoubleClick: (e) => {
@@ -1261,7 +1333,7 @@ function Desktop({ profile }) {
           return /* @__PURE__ */ jsx(
             "div",
             {
-              "data-desktop-icon": true,
+              "data-desktop-icon": `folder-${i}`,
               style: { position: "absolute", right: pos.right, top: pos.top, zIndex: 1 },
               onPointerDown: (e) => {
                 e.stopPropagation();
@@ -1269,7 +1341,15 @@ function Desktop({ profile }) {
               },
               onClick: (e) => {
                 e.stopPropagation();
-                setSelected(/* @__PURE__ */ new Set([`folder-${i}`]));
+                if (e.shiftKey || e.metaKey || e.ctrlKey) {
+                  setSelected((prev) => {
+                    const next = new Set(prev);
+                    next.has(`folder-${i}`) ? next.delete(`folder-${i}`) : next.add(`folder-${i}`);
+                    return next;
+                  });
+                } else if (!selected.has(`folder-${i}`)) {
+                  setSelected(/* @__PURE__ */ new Set([`folder-${i}`]));
+                }
               },
               onContextMenu: (e) => handleFolderContextMenu(e, i),
               onDoubleClick: (e) => {
@@ -1337,6 +1417,7 @@ function Desktop({ profile }) {
                       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsx(
                         "button",
                         {
+                          onPointerDown: (e) => e.stopPropagation(),
                           onClick: (e) => {
                             e.stopPropagation();
                             cycleStickyColor(note.id);
@@ -1349,6 +1430,7 @@ function Desktop({ profile }) {
                         /* @__PURE__ */ jsx(
                           "button",
                           {
+                            onPointerDown: (e) => e.stopPropagation(),
                             onClick: (e) => {
                               e.stopPropagation();
                               toggleStickyOnTop(note.id);
@@ -1364,6 +1446,7 @@ function Desktop({ profile }) {
                         /* @__PURE__ */ jsx(
                           "button",
                           {
+                            onPointerDown: (e) => e.stopPropagation(),
                             onClick: (e) => {
                               e.stopPropagation();
                               removeStickyFromDesktop(note.id);
@@ -1376,6 +1459,7 @@ function Desktop({ profile }) {
                         /* @__PURE__ */ jsx(
                           "button",
                           {
+                            onPointerDown: (e) => e.stopPropagation(),
                             onClick: (e) => {
                               e.stopPropagation();
                               deleteStickyNote(note.id);