@duffcloudservices/cms 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duffcloudservices/cms",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Vue 3 composables and Vite plugins for DCS CMS integration",
   "type": "module",
   "exports": {

package/src/components/PreviewRibbon.vue

@@ -1,14 +1,19 @@
 <template>
   <Teleport to="body">
-    <div v-if="isVisible" class="dcs-ribbon-container">
+    <div v-if="isVisible" :class="['dcs-ribbon-container', `dcs-ribbon-container--${side}`]">
       <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 +24,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
@@ -27,8 +36,7 @@
           fill="url(#dcs-ribbon-grad)"
           stroke="rgba(255,255,255,0.08)"
           stroke-width="1"
-          :class="['dcs-ribbon-band', { 'dcs-ribbon-band--dragging': isDragging }]"
-          @pointerdown.stop.prevent="onRibbonPointerDown"
+          class="dcs-ribbon-band"
         />
 
         <!-- Decorative stitched borders -->
@@ -57,6 +65,20 @@
           </textPath>
         </text>
       </svg>
+
+      <!--
+        Touch overlay: transparent HTML <div> sitting on top of the SVG.
+        Android Chrome ignores touch-action: none on SVG <path> elements
+        because the compositor only checks HTML elements in the hit chain.
+        This HTML div with clip-path creates a reliable touch-action: none
+        hit area over the ribbon band that works on all mobile browsers.
+      -->
+      <div
+        ref="touchOverlayRef"
+        :class="['dcs-ribbon-touch', { 'dcs-ribbon-touch--dragging': isDragging }]"
+        :style="touchClipStyle"
+        @pointerdown.stop.prevent="onPointerDown"
+      />
     </div>
   </Teleport>
 </template>
@@ -110,6 +132,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 +159,22 @@ 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 */ }
+}
 
 /* ------------------------------------------------------------------ */
 /*  Version display                                                    */
@@ -147,11 +185,26 @@ 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()
+
+  // 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 +216,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,14 +237,6 @@ onMounted(async () => {
   }
 })
 
-// Sync prop changes
-watch(
-  () => props.version,
-  (v) => {
-    if (v !== null && v !== undefined) resolvedVersion.value = v
-  },
-)
-
 /* ------------------------------------------------------------------ */
 /*  Elastic stretch state (control-point displacement)                 */
 /* ------------------------------------------------------------------ */
@@ -201,111 +244,203 @@ const stretchX = ref(0)
 const stretchY = ref(0)
 const isDragging = ref(false)
 
-/** Effective control-point position (default + stretch offset) */
-const cpX = computed(() => CP0 + stretchX.value)
-const cpY = computed(() => CP0 + stretchY.value)
+/**
+ * Absolute SVG-space control point for the band center-line.
+ * Left side default: (CP0, CP0) = (90, 90)
+ * Right side default: (SVG_SIZE - CP0, CP0) = (170, 90)
+ * stretchX/Y displace the control point in screen-mapped SVG units.
+ */
+const cx = computed(() =>
+  side.value === 'left'
+    ? CP0 + stretchX.value
+    : SVG_SIZE - CP0 + stretchX.value,
+)
+const cy = computed(() => CP0 + stretchY.value)
+
+/**
+ * Perpendicular sign: for left-side ribbon the outward perpendicular
+ * direction is (+1, +1); for right-side it is (-1, +1).
+ * This determines how CPO is applied to get outer/inner band edges.
+ */
+const ps = computed(() => (side.value === 'left' ? 1 : -1))
 
 /* ------------------------------------------------------------------ */
-/*  SVG path computation                                               */
+/*  SVG path computation (side-aware, with elastic control-point)      */
 /* ------------------------------------------------------------------ */
 
-/** 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`
-}
-
-const centerPath = computed(() => q(EP, cpX.value, cpY.value, EP))
-
-const outerStitchPath = computed(() =>
-  q(
-    EP + HW - STI,
-    cpX.value + CPO - 3,
-    cpY.value + CPO - 3,
-    EP + HW - STI,
-  ),
-)
-
-const innerStitchPath = computed(() =>
-  q(
-    EP - HW + STI,
-    cpX.value - CPO + 3,
-    cpY.value - CPO + 3,
-    EP - HW + STI,
-  ),
-)
+/**
+ * Text center-line. On the right side the path direction is reversed
+ * so that textPath renders left-to-right (readable).
+ */
+const textPath = computed(() => {
+  if (side.value === 'left') {
+    return `M 0,${EP} Q ${cx.value},${cy.value} ${EP},0`
+  }
+  return `M ${SVG_SIZE - EP},0 Q ${cx.value},${cy.value} ${SVG_SIZE},${EP}`
+})
 
 const bandPath = computed(() => {
-  const oY = EP + HW
-  const oX = EP + HW
-  const oCx = cpX.value + CPO
-  const oCy = cpY.value + CPO
-  const iY = EP - HW
-  const iX = EP - HW
-  const iCx = cpX.value - CPO
-  const iCy = cpY.value - CPO
+  const p = ps.value
+  // Outer edge control point (further from corner)
+  const ocx = cx.value + p * CPO
+  const ocy = cy.value + CPO
+  // Inner edge control point (closer to corner)
+  const icx = cx.value - p * CPO
+  const icy = cy.value - CPO
+
+  if (side.value === 'left') {
+    return [
+      `M 0,${EP + HW} Q ${ocx},${ocy} ${EP + HW},0`,
+      `L ${EP - HW},0`,
+      `Q ${icx},${icy} 0,${EP - HW}`,
+      `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},${EP + HW} Q ${ocx},${ocy} ${SVG_SIZE - EP - HW},0`,
+    `L ${SVG_SIZE - EP + HW},0`,
+    `Q ${icx},${icy} ${SVG_SIZE},${EP - HW}`,
     `Z`,
   ].join(' ')
 })
 
+const outerStitchPath = computed(() => {
+  const p = ps.value
+  const scx = cx.value + p * (CPO - 3)
+  const scy = cy.value + (CPO - 3)
+  const d = EP + HW - STI
+
+  if (side.value === 'left') {
+    return `M 0,${d} Q ${scx},${scy} ${d},0`
+  }
+  return `M ${SVG_SIZE},${d} Q ${scx},${scy} ${SVG_SIZE - d},0`
+})
+
+const innerStitchPath = computed(() => {
+  const p = ps.value
+  const scx = cx.value - p * (CPO - 3)
+  const scy = cy.value - (CPO - 3)
+  const d = EP - HW + STI
+
+  if (side.value === 'left') {
+    return `M 0,${d} Q ${scx},${scy} ${d},0`
+  }
+  return `M ${SVG_SIZE},${d} Q ${scx},${scy} ${SVG_SIZE - d},0`
+})
+
+/* ------------------------------------------------------------------ */
+/*  Touch overlay clip-path                                            */
 /* ------------------------------------------------------------------ */
-/*  Drag: elastic ribbon stretch                                       */
+
+/**
+ * Clip-path polygon that creates an invisible hit area over the ribbon
+ * band, wider than the visible band for comfortable touch targeting.
+ * This is on an HTML <div>, so touch-action: none is guaranteed to work
+ * on Android Chrome (unlike SVG <path> elements).
+ */
+const touchClipStyle = computed(() => {
+  if (side.value === 'left') {
+    // Quadrilateral covering the band diagonal: bottom-left → top-right
+    return { clipPath: 'polygon(0% 100%, 100% 0%, 65% 0%, 0% 65%)' }
+  }
+  // Right side: mirrored
+  return { clipPath: 'polygon(100% 100%, 0% 0%, 35% 0%, 100% 65%)' }
+})
+
 /* ------------------------------------------------------------------ */
-const ribbonSvgRef = ref<SVGSVGElement | null>(null)
-let dragState: { startX: number; startY: number } | null = null
+/*  Drag: elastic control-point stretch + flip on midpoint crossing    */
+/* ------------------------------------------------------------------ */
+const touchOverlayRef = ref<HTMLDivElement | null>(null)
+let dragStart: { x: number; y: number } | null = null
 let springRaf = 0
-let capturedTarget: Element | null = null
 
-function onRibbonPointerDown(e: PointerEvent) {
+/**
+ * Get the rendered pixel size of the SVG element.
+ * Used to convert screen-space drag deltas to SVG-space units.
+ */
+function getSvgPixelSize(): number {
+  return window.innerWidth <= 640 ? 200 : 260
+}
+
+function onPointerDown(e: PointerEvent) {
   // Cancel any in-progress spring animation
   if (springRaf) {
     cancelAnimationFrame(springRaf)
     springRaf = 0
   }
 
-  // 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
+  // Capture the pointer on the HTML overlay div.
+  // Unlike SVG <path> elements, HTML elements reliably support
+  // setPointerCapture on Android Chrome, ensuring all subsequent
+  // pointer events are delivered even when the finger moves outside.
+  const target = e.currentTarget as HTMLElement
   target.setPointerCapture(e.pointerId)
-  capturedTarget = target
 
   isDragging.value = true
-  dragState = { startX: e.clientX, startY: e.clientY }
+  dragStart = { x: e.clientX, y: e.clientY }
+
   globalThis.addEventListener('pointermove', onPointerMove)
   globalThis.addEventListener('pointerup', onPointerUp)
-  globalThis.addEventListener('pointercancel', onPointerCancel)
+  globalThis.addEventListener('pointercancel', onPointerUp)
 }
 
 function onPointerMove(e: PointerEvent) {
-  if (!dragState) return
-  stretchX.value = e.clientX - dragState.startX
-  stretchY.value = e.clientY - dragState.startY
+  if (!dragStart) return
+
+  // Convert screen-space drag delta to SVG-space units
+  const scale = SVG_SIZE / getSvgPixelSize()
+  stretchX.value = (e.clientX - dragStart.x) * scale
+  stretchY.value = (e.clientY - dragStart.y) * scale
+
+  // Flip when the pointer crosses the viewport midpoint
+  const mid = window.innerWidth / 2
+  if (side.value === 'left' && e.clientX > mid) {
+    triggerFlip('right', e)
+  } else if (side.value === 'right' && e.clientX < mid) {
+    triggerFlip('left', e)
+  }
 }
 
-function onPointerUp(e?: PointerEvent) {
-  if (capturedTarget && e) {
-    try { capturedTarget.releasePointerCapture(e.pointerId) } catch { /* already released */ }
+function onPointerUp(e: PointerEvent) {
+  if (touchOverlayRef.value) {
+    try { touchOverlayRef.value.releasePointerCapture(e.pointerId) } catch { /* already released */ }
   }
-  capturedTarget = null
   isDragging.value = false
-  dragState = null
+  dragStart = null
+  removeListeners()
+  animateSnapBack()
+}
+
+function removeListeners() {
   globalThis.removeEventListener('pointermove', onPointerMove)
   globalThis.removeEventListener('pointerup', onPointerUp)
-  globalThis.removeEventListener('pointercancel', onPointerCancel)
-  animateSnapBack()
+  globalThis.removeEventListener('pointercancel', onPointerUp)
 }
 
-/** Handle browser cancelling the pointer (e.g. when native scroll takes over) */
-function onPointerCancel(e: PointerEvent) {
-  onPointerUp(e)
+/**
+ * Snap the ribbon to the opposite corner when the pointer crosses
+ * the viewport midpoint. Resets the elastic stretch, switches side,
+ * and persists the user's preference.
+ */
+function triggerFlip(newSide: 'left' | 'right', e: PointerEvent) {
+  // Reset stretch to default shape
+  stretchX.value = 0
+  stretchY.value = 0
+
+  // End drag
+  isDragging.value = false
+  dragStart = null
+  removeListeners()
+
+  // Release pointer capture
+  if (touchOverlayRef.value) {
+    try { touchOverlayRef.value.releasePointerCapture(e.pointerId) } catch { /* noop */ }
+  }
+
+  // Switch to the new side
+  side.value = newSide
+  saveSide(newSide)
 }
 
 /** Spring-physics animation to snap the control point back to default */
@@ -344,26 +479,33 @@ function animateSnapBack() {
 /* ------------------------------------------------------------------ */
 onBeforeUnmount(() => {
   if (springRaf) cancelAnimationFrame(springRaf)
-  globalThis.removeEventListener('pointermove', onPointerMove)
-  globalThis.removeEventListener('pointerup', onPointerUp)
-  globalThis.removeEventListener('pointercancel', onPointerCancel)
+  removeListeners()
 })
 </script>
 
 <style scoped>
 /* ------------------------------------------------------------------ */
-/*  Container — fixed top-left, non-blocking                           */
+/*  Container — fixed in corner, non-blocking                          */
 /* ------------------------------------------------------------------ */
 .dcs-ribbon-container {
   position: fixed;
   top: 0;
-  left: 0;
   z-index: 2147483647;
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;
 }
 
+.dcs-ribbon-container--left {
+  left: 0;
+  right: auto;
+}
+
+.dcs-ribbon-container--right {
+  right: 0;
+  left: auto;
+}
+
 /* ------------------------------------------------------------------ */
 /*  SVG canvas                                                         */
 /* ------------------------------------------------------------------ */
@@ -376,16 +518,10 @@ onBeforeUnmount(() => {
 }
 
 /* ------------------------------------------------------------------ */
-/*  Band (interactive)                                                 */
+/*  Band (visual only — touch handled by overlay div)                  */
 /* ------------------------------------------------------------------ */
 .dcs-ribbon-band {
-  pointer-events: auto;
-  cursor: grab;
-  touch-action: none;
-}
-
-.dcs-ribbon-band--dragging {
-  cursor: grabbing;
+  pointer-events: none;
 }
 
 /* ------------------------------------------------------------------ */
@@ -420,12 +556,41 @@ onBeforeUnmount(() => {
   display: none;
 }
 
+/* ------------------------------------------------------------------ */
+/*  Touch overlay — transparent HTML div for reliable mobile touch     */
+/*                                                                     */
+/*  Android Chrome ignores touch-action on SVG <path> elements because */
+/*  the compositor only walks HTML elements. This HTML <div> with      */
+/*  clip-path creates a shaped, invisible hit area where touch-action  */
+/*  is guaranteed to work.                                             */
+/* ------------------------------------------------------------------ */
+.dcs-ribbon-touch {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 260px;
+  height: 260px;
+  touch-action: none;
+  pointer-events: auto;
+  cursor: grab;
+  -webkit-tap-highlight-color: transparent;
+  /* clip-path set via :style binding for left/right side */
+}
+
+.dcs-ribbon-touch--dragging {
+  cursor: grabbing;
+}
+
 /* Compact label for narrow screens */
 @media (max-width: 640px) {
   .dcs-ribbon-svg {
     width: 200px;
     height: 200px;
   }
+  .dcs-ribbon-touch {
+    width: 200px;
+    height: 200px;
+  }
   .dcs-ribbon-text--full {
     display: none;
   }