react-os-shell 0.12.2 → 0.13.1

package/dist/index.js

@@ -1481,7 +1481,7 @@ function WidgetManager({ open, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "0.12.2" ;
+var VERSION = "0.13.1" ;
 var APP_VERSION = VERSION;
 
 // src/changelog.ts
@@ -6375,6 +6375,46 @@ function Kanban({
     setDragId(null);
     setOver(null);
   };
+  const boardRef = useRef(null);
+  const prevRects = useRef(/* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    if (dragId !== null) return;
+    const board = boardRef.current;
+    if (!board) return;
+    const next = /* @__PURE__ */ new Map();
+    const moved = [];
+    board.querySelectorAll("[data-kanban-card]").forEach((el) => {
+      const id = el.dataset.kanbanCard;
+      const rect = el.getBoundingClientRect();
+      next.set(id, rect);
+      const prev = prevRects.current.get(id);
+      if (prev) {
+        const dx = prev.left - rect.left;
+        const dy = prev.top - rect.top;
+        if (dx || dy) moved.push([el, dx, dy]);
+      }
+    });
+    prevRects.current = next;
+    if (!moved.length) return;
+    for (const [el, dx, dy] of moved) {
+      el.style.transition = "none";
+      el.style.transform = `translate(${dx}px, ${dy}px)`;
+    }
+    requestAnimationFrame(() => {
+      for (const [el] of moved) {
+        el.style.transition = "transform 200ms cubic-bezier(0.2, 0, 0, 1)";
+        el.style.transform = "";
+        el.addEventListener(
+          "transitionend",
+          () => {
+            el.style.transition = "";
+            el.style.transform = "";
+          },
+          { once: true }
+        );
+      }
+    });
+  }, [grouped, dragId]);
   const commitMove = (col) => {
     if (dragId && over && over.col === col) {
       const colItems = grouped[col] ?? [];
@@ -6392,7 +6432,7 @@ function Kanban({
   if (items.length === 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: emptyState ?? /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 p-4", children: "No items." }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto grid-scroll", children: /* @__PURE__ */ jsx("div", { className: "flex gap-3 h-full min-w-max pb-2", children: columns.map((col) => {
+  return /* @__PURE__ */ jsx("div", { ref: boardRef, className: "flex-1 overflow-x-auto grid-scroll", children: /* @__PURE__ */ jsx("div", { className: "flex gap-3 h-full min-w-max pb-2", children: columns.map((col) => {
     const colItems = grouped[col.value] ?? [];
     const isOver = over !== null && over.col === col.value;
     const dp = dragId !== null ? colItems.findIndex((it) => getId(it) === dragId) : -1;
@@ -6401,8 +6441,17 @@ function Kanban({
       "div",
       {
         className: `flex flex-col w-72 shrink-0 rounded-xl bg-gray-50 border transition-colors ${isOver ? "border-blue-400 ring-2 ring-blue-300/60" : "border-gray-200"}`,
-        onDragOver: (e) => e.preventDefault(),
-        onDrop: () => commitMove(col.value),
+        onDragOver: (e) => {
+          e.preventDefault();
+          try {
+            e.dataTransfer.dropEffect = "move";
+          } catch {
+          }
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          commitMove(col.value);
+        },
         children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -6433,6 +6482,7 @@ function Kanban({
                     /* @__PURE__ */ jsx(
                       "div",
                       {
+                        "data-kanban-card": id,
                         draggable: true,
                         onDragStart: (e) => {
                           setDragId(id);