react-os-shell 0.12.1 → 0.13.0

package/dist/index.js

@@ -627,8 +627,8 @@ function SidebarLayout({
         onPointerDown: startDrag,
         onDoubleClick: () => setWidth(clamp(defaultWidth, minWidth, maxWidth)),
         title: "Drag to resize \xB7 double-click to reset",
-        className: `group absolute inset-y-0 ${edge} z-10 w-2 cursor-col-resize`,
-        children: /* @__PURE__ */ jsx("div", { className: `absolute inset-y-0 ${edge} w-px bg-transparent transition-colors group-hover:bg-blue-400` })
+        className: `group/resize absolute inset-y-0 ${edge} z-10 w-2 cursor-col-resize`,
+        children: /* @__PURE__ */ jsx("div", { className: `absolute inset-y-0 ${edge} w-px bg-transparent transition-colors group-hover/resize:bg-[var(--accent-500,#3b82f6)]` })
       }
     )
   ] });
@@ -1481,7 +1481,7 @@ function WidgetManager({ open, onClose }) {
 }
 
 // src/version.ts
-var VERSION = "0.12.1" ;
+var VERSION = "0.13.0" ;
 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;
@@ -6433,6 +6473,7 @@ function Kanban({
                     /* @__PURE__ */ jsx(
                       "div",
                       {
+                        "data-kanban-card": id,
                         draggable: true,
                         onDragStart: (e) => {
                           setDragId(id);