@duffcloudservices/cms 0.1.4 → 0.1.6

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.6",
+  "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

@@ -1,14 +1,25 @@
 <template>
   <Teleport to="body">
-    <div v-if="isVisible" class="dcs-ribbon-container">
+    <div
+      v-if="isVisible"
+      class="dcs-ribbon-container"
+      :class="{ 'dcs-ribbon-container--flipping': isFlipping }"
+      :style="containerStyle"
+    >
       <svg
         ref="ribbonSvgRef"
         :viewBox="`0 0 ${SVG_SIZE} ${SVG_SIZE}`"
         class="dcs-ribbon-svg"
       >
         <defs>
-          <path id="dcs-ribbon-text-path" :d="centerPath" />
-          <linearGradient id="dcs-ribbon-grad" x1="0%" y1="100%" x2="100%" y2="0%">
+          <path id="dcs-ribbon-text-path" :d="textPath" />
+          <linearGradient
+            id="dcs-ribbon-grad"
+            :x1="side === 'left' ? '0%' : '100%'"
+            y1="100%"
+            :x2="side === 'left' ? '100%' : '0%'"
+            y2="0%"
+          >
             <stop offset="0%" stop-color="#1a1a2e" />
             <stop offset="40%" stop-color="#16213e" />
             <stop offset="100%" stop-color="#0f3460" />
@@ -19,7 +30,11 @@
         </defs>
 
         <!-- Drop shadow (offset copy of band) -->
-        <path :d="bandPath" fill="rgba(0,0,0,0.2)" transform="translate(2,3)" />
+        <path
+          :d="bandPath"
+          fill="rgba(0,0,0,0.2)"
+          :transform="side === 'left' ? 'translate(2,3)' : 'translate(-2,3)'"
+        />
 
         <!-- Main ribbon band -->
         <path
@@ -110,6 +125,9 @@ const STI = 4
 /** The preview domain where the ribbon should be displayed */
 const PREVIEW_DOMAIN = 'preview.duffcloudservices.com'
 
+/** localStorage key for persisting which corner the ribbon is docked to */
+const STORAGE_KEY = 'dcs-preview-ribbon-side'
+
 /* ------------------------------------------------------------------ */
 /*  Visibility gate                                                    */
 /* ------------------------------------------------------------------ */
@@ -134,9 +152,40 @@ function shouldShow(): boolean {
   return true
 }
 
-onMounted(() => {
-  isVisible.value = shouldShow()
-})
+/* ------------------------------------------------------------------ */
+/*  Side state (which corner the ribbon is docked to, persisted)       */
+/* ------------------------------------------------------------------ */
+const side = ref<'left' | 'right'>('left')
+
+function loadSide(): 'left' | 'right' {
+  try {
+    const s = localStorage.getItem(STORAGE_KEY)
+    if (s === 'left' || s === 'right') return s
+  } catch { /* noop */ }
+  return 'left'
+}
+
+function saveSide(s: 'left' | 'right') {
+  try { localStorage.setItem(STORAGE_KEY, s) } catch { /* noop */ }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Viewport tracking                                                  */
+/* ------------------------------------------------------------------ */
+const viewportWidth = ref(1920)
+const svgSizePx = ref(260)
+
+function updateViewport() {
+  viewportWidth.value = window.innerWidth
+  svgSizePx.value = window.innerWidth <= 640 ? 200 : 260
+}
+
+function onResize() {
+  updateViewport()
+  if (!isDragging.value && !isFlipping.value) {
+    posX.value = getRestX()
+  }
+}
 
 /* ------------------------------------------------------------------ */
 /*  Version display                                                    */
@@ -147,11 +196,30 @@ const displayVersion = computed(() =>
   resolvedVersion.value ? ` v${resolvedVersion.value}` : '',
 )
 
-// Try to read the version from VITE_SITE_VERSION env var at build time
+// Sync prop changes
+watch(
+  () => props.version,
+  (v) => {
+    if (v !== null && v !== undefined) resolvedVersion.value = v
+  },
+)
+
+/* ------------------------------------------------------------------ */
+/*  Lifecycle                                                          */
+/* ------------------------------------------------------------------ */
 onMounted(async () => {
+  isVisible.value = shouldShow()
+  if (!isVisible.value) return
+
+  side.value = loadSide()
+  updateViewport()
+  posX.value = getRestX()
+
+  window.addEventListener('resize', onResize)
+
+  // Resolve version
   if (resolvedVersion.value) return
 
-  // Check Vite env first
   try {
     const envVersion = (import.meta.env as Record<string, string | undefined>)
       .VITE_SITE_VERSION
@@ -163,8 +231,6 @@ onMounted(async () => {
     /* noop */
   }
 
-  // Fallback: fetch from API (reuse useSiteVersion logic inline to avoid
-  // coupling lifecycle hooks – the ribbon may mount before Pinia is ready)
   try {
     const slug =
       (import.meta.env as Record<string, string | undefined>).VITE_SITE_SLUG ??
@@ -186,50 +252,63 @@ onMounted(async () => {
   }
 })
 
-// Sync prop changes
-watch(
-  () => props.version,
-  (v) => {
-    if (v !== null && v !== undefined) resolvedVersion.value = v
-  },
-)
-
 /* ------------------------------------------------------------------ */
-/*  Elastic stretch state (control-point displacement)                 */
+/*  Position state                                                     */
 /* ------------------------------------------------------------------ */
-const stretchX = ref(0)
-const stretchY = ref(0)
+const posX = ref(0)
+const posY = ref(0)
 const isDragging = ref(false)
+const isFlipping = ref(false)
 
-/** Effective control-point position (default + stretch offset) */
-const cpX = computed(() => CP0 + stretchX.value)
-const cpY = computed(() => CP0 + stretchY.value)
+/** Rest X position for the current side */
+function getRestX(): number {
+  if (side.value === 'left') return 0
+  return viewportWidth.value - svgSizePx.value
+}
+
+const containerStyle = computed(() => ({
+  transform: `translate(${posX.value}px, ${posY.value}px)`,
+}))
 
 /* ------------------------------------------------------------------ */
-/*  SVG path computation                                               */
+/*  SVG path computation (side-aware, X-mirrored for right)            */
 /* ------------------------------------------------------------------ */
 
-/** Quadratic bezier from left-edge (0, y0) to top-edge (x1, 0) */
-function q(y0: number, cx: number, cy: number, x1: number): string {
-  return `M 0,${y0} Q ${cx},${cy} ${x1},0`
+/**
+ * Quadratic bezier curve for stitch / helper paths.
+ * Left side: (0, y0) → (x1, 0) via (cx, cy)
+ * Right side: (SVG_SIZE, y0) → (SVG_SIZE-x1, 0) via (SVG_SIZE-cx, cy)
+ */
+function mirrorQ(y0: number, cx: number, cy: number, x1: number): string {
+  if (side.value === 'left') {
+    return `M 0,${y0} Q ${cx},${cy} ${x1},0`
+  }
+  return `M ${SVG_SIZE},${y0} Q ${SVG_SIZE - cx},${cy} ${SVG_SIZE - x1},0`
 }
 
-const centerPath = computed(() => q(EP, cpX.value, cpY.value, EP))
+/** Text center-line path. Reversed on right side so text reads naturally. */
+const textPath = computed(() => {
+  if (side.value === 'left') {
+    return `M 0,${EP} Q ${CP0},${CP0} ${EP},0`
+  }
+  // Right side: path goes from top-edge → right-edge for left-to-right text
+  return `M ${SVG_SIZE - EP},0 Q ${SVG_SIZE - CP0},${CP0} ${SVG_SIZE},${EP}`
+})
 
 const outerStitchPath = computed(() =>
-  q(
+  mirrorQ(
     EP + HW - STI,
-    cpX.value + CPO - 3,
-    cpY.value + CPO - 3,
+    CP0 + CPO - 3,
+    CP0 + CPO - 3,
     EP + HW - STI,
   ),
 )
 
 const innerStitchPath = computed(() =>
-  q(
+  mirrorQ(
     EP - HW + STI,
-    cpX.value - CPO + 3,
-    cpY.value - CPO + 3,
+    CP0 - CPO + 3,
+    CP0 - CPO + 3,
     EP - HW + STI,
   ),
 )
@@ -237,34 +316,43 @@ const innerStitchPath = computed(() =>
 const bandPath = computed(() => {
   const oY = EP + HW
   const oX = EP + HW
-  const oCx = cpX.value + CPO
-  const oCy = cpY.value + CPO
+  const oCx = CP0 + CPO
+  const oCy = CP0 + CPO
   const iY = EP - HW
   const iX = EP - HW
-  const iCx = cpX.value - CPO
-  const iCy = cpY.value - CPO
+  const iCx = CP0 - CPO
+  const iCy = CP0 - CPO
+
+  if (side.value === 'left') {
+    return [
+      `M 0,${oY} Q ${oCx},${oCy} ${oX},0`,
+      `L ${iX},0`,
+      `Q ${iCx},${iCy} 0,${iY}`,
+      `Z`,
+    ].join(' ')
+  }
 
   return [
-    // Outer curve (left-edge → top-edge)
-    `M 0,${oY} Q ${oCx},${oCy} ${oX},0`,
-    // Cap at top-edge → inner curve start
-    `L ${iX},0`,
-    // Inner curve (top-edge → left-edge, reversed direction)
-    `Q ${iCx},${iCy} 0,${iY}`,
+    `M ${SVG_SIZE},${oY} Q ${SVG_SIZE - oCx},${oCy} ${SVG_SIZE - oX},0`,
+    `L ${SVG_SIZE - iX},0`,
+    `Q ${SVG_SIZE - iCx},${iCy} ${SVG_SIZE},${iY}`,
     `Z`,
   ].join(' ')
 })
 
 /* ------------------------------------------------------------------ */
-/*  Drag: elastic ribbon stretch                                       */
+/*  Drag: translate ribbon + flip on midpoint crossing                 */
 /* ------------------------------------------------------------------ */
 const ribbonSvgRef = ref<SVGSVGElement | null>(null)
-let dragState: { startX: number; startY: number } | null = null
+let dragStart: { x: number; y: number; posX: number; posY: number } | null = null
+let capturedTarget: Element | null = null
+let lastPointerId: number | null = null
 let springRaf = 0
+let flipTimeout: ReturnType<typeof setTimeout> | null = null
 
 function onRibbonPointerDown(e: PointerEvent) {
-  const el = ribbonSvgRef.value
-  if (!el) return
+  // Don't allow interaction during flip animation
+  if (isFlipping.value) return
 
   // Cancel any in-progress spring animation
   if (springRaf) {
@@ -272,48 +360,132 @@ function onRibbonPointerDown(e: PointerEvent) {
     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
+  lastPointerId = e.pointerId
+
   isDragging.value = true
-  dragState = { startX: e.clientX, startY: e.clientY }
+  dragStart = { x: e.clientX, y: e.clientY, posX: posX.value, posY: posY.value }
   globalThis.addEventListener('pointermove', onPointerMove)
   globalThis.addEventListener('pointerup', onPointerUp)
+  globalThis.addEventListener('pointercancel', onPointerCancel)
 }
 
 function onPointerMove(e: PointerEvent) {
-  if (!dragState) return
-  stretchX.value = e.clientX - dragState.startX
-  stretchY.value = e.clientY - dragState.startY
+  if (!dragStart) return
+
+  const dx = e.clientX - dragStart.x
+  const dy = e.clientY - dragStart.y
+  posX.value = dragStart.posX + dx
+  posY.value = dragStart.posY + dy
+
+  // Check if ribbon center has crossed viewport midpoint → trigger flip
+  const ribbonCenterX = posX.value + svgSizePx.value / 2
+  const midpoint = viewportWidth.value / 2
+
+  if (side.value === 'left' && ribbonCenterX > midpoint) {
+    triggerFlip('right')
+  } else if (side.value === 'right' && ribbonCenterX < midpoint) {
+    triggerFlip('left')
+  }
 }
 
-function onPointerUp() {
+function onPointerUp(e?: PointerEvent) {
+  releasePointer(e)
   isDragging.value = false
-  dragState = null
+  dragStart = null
+  removeListeners()
+
+  // Spring back to rest position
+  animateSnapBack()
+}
+
+/** Handle browser cancelling the pointer (e.g. when native scroll takes over) */
+function onPointerCancel(e: PointerEvent) {
+  onPointerUp(e)
+}
+
+function releasePointer(e?: PointerEvent) {
+  if (capturedTarget && e) {
+    try { capturedTarget.releasePointerCapture(e.pointerId) } catch { /* already released */ }
+  }
+  capturedTarget = null
+  lastPointerId = null
+}
+
+function removeListeners() {
   globalThis.removeEventListener('pointermove', onPointerMove)
   globalThis.removeEventListener('pointerup', onPointerUp)
-  animateSnapBack()
+  globalThis.removeEventListener('pointercancel', onPointerCancel)
 }
 
-/** Spring-physics animation to snap the control point back to default */
+/**
+ * Animate the ribbon to the opposite corner.
+ * Ends the drag, toggles SVG paths, and uses a CSS transition
+ * to smoothly slide the container to its new rest position.
+ */
+function triggerFlip(newSide: 'left' | 'right') {
+  // End drag
+  isDragging.value = false
+  dragStart = null
+  removeListeners()
+
+  // Release pointer capture
+  if (capturedTarget && lastPointerId !== null) {
+    try { capturedTarget.releasePointerCapture(lastPointerId) } catch { /* noop */ }
+  }
+  capturedTarget = null
+  lastPointerId = null
+
+  // Toggle side (paths flip instantly, gradient direction updates)
+  side.value = newSide
+  saveSide(newSide)
+
+  // Enable CSS transition, then set target position.
+  // The requestAnimationFrame ensures the browser has laid out the
+  // current position before the transition target is applied.
+  isFlipping.value = true
+  requestAnimationFrame(() => {
+    posX.value = getRestX()
+    posY.value = 0
+
+    flipTimeout = setTimeout(() => {
+      isFlipping.value = false
+      flipTimeout = null
+    }, 550)
+  })
+}
+
+/** Spring-physics animation to snap the ribbon back to its rest position */
 function animateSnapBack() {
+  const targetX = getRestX()
+  const targetY = 0
   const stiffness = 0.12
   const damping = 0.72
   let vx = 0
   let vy = 0
 
   function step() {
-    vx = (vx - stiffness * stretchX.value) * damping
-    vy = (vy - stiffness * stretchY.value) * damping
-    stretchX.value += vx
-    stretchY.value += vy
+    const dxToTarget = posX.value - targetX
+    const dyToTarget = posY.value - targetY
+
+    vx = (vx - stiffness * dxToTarget) * damping
+    vy = (vy - stiffness * dyToTarget) * damping
+    posX.value += vx
+    posY.value += vy
 
     if (
-      Math.abs(stretchX.value) < 0.3 &&
-      Math.abs(stretchY.value) < 0.3 &&
+      Math.abs(dxToTarget) < 0.3 &&
+      Math.abs(dyToTarget) < 0.3 &&
       Math.abs(vx) < 0.3 &&
       Math.abs(vy) < 0.3
     ) {
-      stretchX.value = 0
-      stretchY.value = 0
+      posX.value = targetX
+      posY.value = targetY
       springRaf = 0
       return
     }
@@ -329,14 +501,17 @@ function animateSnapBack() {
 /* ------------------------------------------------------------------ */
 onBeforeUnmount(() => {
   if (springRaf) cancelAnimationFrame(springRaf)
+  if (flipTimeout) clearTimeout(flipTimeout)
   globalThis.removeEventListener('pointermove', onPointerMove)
   globalThis.removeEventListener('pointerup', onPointerUp)
+  globalThis.removeEventListener('pointercancel', onPointerCancel)
+  window.removeEventListener('resize', onResize)
 })
 </script>
 
 <style scoped>
 /* ------------------------------------------------------------------ */
-/*  Container — fixed top-left, non-blocking                           */
+/*  Container — fixed top-left, non-blocking, positioned via transform */
 /* ------------------------------------------------------------------ */
 .dcs-ribbon-container {
   position: fixed;
@@ -348,6 +523,11 @@ onBeforeUnmount(() => {
   -webkit-user-select: none;
 }
 
+/* Smooth slide transition when snapping to the opposite corner */
+.dcs-ribbon-container--flipping {
+  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
 /* ------------------------------------------------------------------ */
 /*  SVG canvas                                                         */
 /* ------------------------------------------------------------------ */
@@ -365,6 +545,7 @@ onBeforeUnmount(() => {
 .dcs-ribbon-band {
   pointer-events: auto;
   cursor: grab;
+  touch-action: none;
 }
 
 .dcs-ribbon-band--dragging {