@duffcloudservices/cms 0.1.4 → 0.1.5

package/package.json

@@ -1,76 +1,77 @@
-{
-  "name": "@duffcloudservices/cms",
-  "version": "0.1.4",
-  "description": "Vue 3 composables and Vite plugins for DCS CMS integration",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./plugins": {
-      "types": "./dist/plugins/index.d.ts",
-      "import": "./dist/plugins/index.js"
-    },
-    "./editor": {
-      "types": "./dist/editor/editorBridge.d.ts",
-      "import": "./dist/editor/editorBridge.js"
-    },
-    "./components": {
-      "import": "./src/components/PreviewRibbon.vue"
-    }
-  },
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src/components"
-  ],
-  "peerDependencies": {
-    "vue": "^3.4.0",
-    "@unhead/vue": "^1.9.0"
-  },
-  "dependencies": {
-    "js-yaml": "^4.1.0"
-  },
-  "devDependencies": {
-    "@types/js-yaml": "^4.0.9",
-    "@types/node": "^20.11.0",
-    "@vue/test-utils": "^2.4.0",
-    "tsup": "^8.0.0",
-    "typescript": "~5.6.3",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.3",
-    "vue": "^3.5.16",
-    "@unhead/vue": "^2.0.5"
-  },
-  "keywords": [
-    "vue",
-    "vitepress",
-    "cms",
-    "dcs",
-    "composables",
-    "duff-cloud-services"
-  ],
-  "author": "Duff Cloud Services",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/duffn/dcs"
-  },
-  "homepage": "https://portal.duffcloudservices.com",
-  "bugs": {
-    "url": "https://github.com/duffn/dcs/issues"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint src --ext .ts"
-  }
-}
+{
+  "name": "@duffcloudservices/cms",
+  "version": "0.1.5",
+  "description": "Vue 3 composables and Vite plugins for DCS CMS integration",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./plugins": {
+      "types": "./dist/plugins/index.d.ts",
+      "import": "./dist/plugins/index.js"
+    },
+    "./editor": {
+      "types": "./dist/editor/editorBridge.d.ts",
+      "import": "./dist/editor/editorBridge.js"
+    },
+    "./components": {
+      "import": "./src/components/PreviewRibbon.vue"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/components"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts",
+    "prepublishOnly": "pnpm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0",
+    "@unhead/vue": "^1.9.0"
+  },
+  "dependencies": {
+    "js-yaml": "^4.1.0"
+  },
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^20.11.0",
+    "@vue/test-utils": "^2.4.0",
+    "tsup": "^8.0.0",
+    "typescript": "~5.6.3",
+    "vite": "^6.3.5",
+    "vitest": "^3.2.3",
+    "vue": "^3.5.16",
+    "@unhead/vue": "^2.0.5"
+  },
+  "keywords": [
+    "vue",
+    "vitepress",
+    "cms",
+    "dcs",
+    "composables",
+    "duff-cloud-services"
+  ],
+  "author": "Duff Cloud Services",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/duffn/dcs"
+  },
+  "homepage": "https://portal.duffcloudservices.com",
+  "bugs": {
+    "url": "https://github.com/duffn/dcs/issues"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/src/components/PreviewRibbon.vue

@@ -261,22 +261,27 @@ const bandPath = computed(() => {
 const ribbonSvgRef = ref<SVGSVGElement | null>(null)
 let dragState: { startX: number; startY: number } | null = null
 let springRaf = 0
+let capturedTarget: Element | null = null
 
 function onRibbonPointerDown(e: PointerEvent) {
-  const el = ribbonSvgRef.value
-  if (!el) return
-
   // Cancel any in-progress spring animation
   if (springRaf) {
     cancelAnimationFrame(springRaf)
     springRaf = 0
   }
 
-  el.setPointerCapture(e.pointerId)
+  // Capture the pointer on the element that received the event (the band path).
+  // This ensures all subsequent pointer events are delivered to this element,
+  // preventing the browser from cancelling the pointer sequence for scrolling.
+  const target = e.currentTarget as Element
+  target.setPointerCapture(e.pointerId)
+  capturedTarget = target
+
   isDragging.value = true
   dragState = { startX: e.clientX, startY: e.clientY }
   globalThis.addEventListener('pointermove', onPointerMove)
   globalThis.addEventListener('pointerup', onPointerUp)
+  globalThis.addEventListener('pointercancel', onPointerCancel)
 }
 
 function onPointerMove(e: PointerEvent) {
@@ -285,14 +290,24 @@ function onPointerMove(e: PointerEvent) {
   stretchY.value = e.clientY - dragState.startY
 }
 
-function onPointerUp() {
+function onPointerUp(e?: PointerEvent) {
+  if (capturedTarget && e) {
+    try { capturedTarget.releasePointerCapture(e.pointerId) } catch { /* already released */ }
+  }
+  capturedTarget = null
   isDragging.value = false
   dragState = null
   globalThis.removeEventListener('pointermove', onPointerMove)
   globalThis.removeEventListener('pointerup', onPointerUp)
+  globalThis.removeEventListener('pointercancel', onPointerCancel)
   animateSnapBack()
 }
 
+/** Handle browser cancelling the pointer (e.g. when native scroll takes over) */
+function onPointerCancel(e: PointerEvent) {
+  onPointerUp(e)
+}
+
 /** Spring-physics animation to snap the control point back to default */
 function animateSnapBack() {
   const stiffness = 0.12
@@ -331,6 +346,7 @@ onBeforeUnmount(() => {
   if (springRaf) cancelAnimationFrame(springRaf)
   globalThis.removeEventListener('pointermove', onPointerMove)
   globalThis.removeEventListener('pointerup', onPointerUp)
+  globalThis.removeEventListener('pointercancel', onPointerCancel)
 })
 </script>
 
@@ -365,6 +381,7 @@ onBeforeUnmount(() => {
 .dcs-ribbon-band {
   pointer-events: auto;
   cursor: grab;
+  touch-action: none;
 }
 
 .dcs-ribbon-band--dragging {