@cat-factory/app 0.26.3 → 0.26.4

package/app/components/board/nodes/BlockNode.vue

@@ -343,8 +343,11 @@ const ITEM_ICON: Record<string, string> = {
       <div class="space-y-3 p-4">
         <!-- frame header (doubles as the drag handle for the expanded frame) -->
         <div class="flex items-start justify-between gap-2">
+          <!-- `nopan` stops Vue Flow's pane from panning on a left-drag that starts on
+               this handle (it pans via d3-zoom's mousedown, which our pointerdown
+               stopPropagation can't intercept), so the grab drives the frame move. -->
           <div
-            class="flex cursor-grab items-center gap-2 active:cursor-grabbing"
+            class="nopan flex cursor-grab items-center gap-2 active:cursor-grabbing"
             title="Drag service"
             @pointerdown="onFrameHandle"
           >
@@ -428,19 +431,21 @@ const ITEM_ICON: Record<string, string> = {
             <UIcon name="i-lucide-plus" class="h-3.5 w-3.5" /> Add the first task
           </button>
 
-          <!-- resize handles (drag the borders to resize the service, Miro-style) -->
+          <!-- resize handles (drag the borders to resize the service, Miro-style).
+               `nopan` (alongside `nodrag`) so the pane doesn't pan while resizing —
+               same reason as the header handle above. -->
           <div
-            class="nodrag absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-sky-400/20"
+            class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-sky-400/20"
             title="Drag to resize"
             @pointerdown="onResize($event, 'e')"
           />
           <div
-            class="nodrag absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-sky-400/20"
+            class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-sky-400/20"
             title="Drag to resize"
             @pointerdown="onResize($event, 's')"
           />
           <div
-            class="nodrag absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
+            class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
             title="Drag to resize"
             @pointerdown="onResize($event, 'se')"
           >

package/app/components/board/nodes/DraggableTask.vue

@@ -34,9 +34,9 @@ function onHandle(e: PointerEvent) {
         pointerEvents: draggingId === taskId ? 'none' : undefined,
       }"
     >
-      <!-- drag handle -->
+      <!-- drag handle (`nopan` so the pane doesn't pan on a left-drag from here) -->
       <div
-        class="nodrag flex cursor-grab items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing"
+        class="nodrag nopan flex cursor-grab items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing"
         title="Drag task"
         @pointerdown="onHandle"
       >

package/app/components/board/nodes/ModuleFrame.vue

@@ -48,9 +48,9 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
       zIndex: draggingId === moduleId ? 50 : 5,
     }"
   >
-    <!-- module header / drag handle -->
+    <!-- module header / drag handle (`nopan` so a left-drag moves it, not the pane) -->
     <div
-      class="nodrag flex h-[30px] cursor-grab items-center gap-1 rounded-t-xl bg-violet-500/15 px-2 active:cursor-grabbing"
+      class="nodrag nopan flex h-[30px] cursor-grab items-center gap-1 rounded-t-xl bg-violet-500/15 px-2 active:cursor-grabbing"
       @pointerdown="onHandle"
       @click.stop="ui.select(moduleId)"
     >
@@ -73,19 +73,20 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
       <DraggableTask v-for="t in tasks" :key="t.id" :task-id="t.id" />
     </div>
 
-    <!-- resize handles (drag the borders to resize the module, Miro-style) -->
+    <!-- resize handles (drag the borders to resize the module, Miro-style).
+         `nopan` (with `nodrag`) so resizing doesn't pan the pane. -->
     <div
-      class="nodrag absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-violet-400/20"
+      class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize hover:bg-violet-400/20"
       title="Drag to resize"
       @pointerdown="onResize($event, 'e')"
     />
     <div
-      class="nodrag absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-violet-400/20"
+      class="nodrag nopan absolute bottom-0 left-0 h-2 w-full cursor-ns-resize hover:bg-violet-400/20"
       title="Drag to resize"
       @pointerdown="onResize($event, 's')"
     />
     <div
-      class="nodrag absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
+      class="nodrag nopan absolute bottom-0 right-0 h-4 w-4 cursor-nwse-resize"
       title="Drag to resize"
       @pointerdown="onResize($event, 'se')"
     >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.26.3",
+  "version": "0.26.4",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",