@duffcloudservices/cms 0.1.6 → 0.2.0

package/src/components/PreviewRibbon.vue

@@ -1,13 +1,7 @@
 <template>
   <Teleport to="body">
-    <div
-      v-if="isVisible"
-      class="dcs-ribbon-container"
-      :class="{ 'dcs-ribbon-container--flipping': isFlipping }"
-      :style="containerStyle"
-    >
+    <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"
       >
@@ -42,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 -->
@@ -72,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>
@@ -125,6 +132,13 @@ const STI = 4
 /** The preview domain where the ribbon should be displayed */
 const PREVIEW_DOMAIN = 'preview.duffcloudservices.com'
 
+/**
+ * Query string parameter that suppresses the preview ribbon.
+ * Used by GitHub Actions snapshot capture so screenshots don't include the ribbon overlay.
+ * Example: https://preview.duffcloudservices.com/kept/?dcs-hide-ribbon
+ */
+const HIDE_RIBBON_PARAM = 'dcs-hide-ribbon'
+
 /** localStorage key for persisting which corner the ribbon is docked to */
 const STORAGE_KEY = 'dcs-preview-ribbon-side'
 
@@ -149,6 +163,10 @@ function shouldShow(): boolean {
     return false
   }
 
+  // Allow suppression via query parameter (for automated screenshot capture)
+  const params = new URLSearchParams(globalThis.location.search)
+  if (params.has(HIDE_RIBBON_PARAM)) return false
+
   return true
 }
 
@@ -169,24 +187,6 @@ 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                                                    */
 /* ------------------------------------------------------------------ */
@@ -212,10 +212,6 @@ onMounted(async () => {
   if (!isVisible.value) return
 
   side.value = loadSide()
-  updateViewport()
-  posX.value = getRestX()
-
-  window.addEventListener('resize', onResize)
 
   // Resolve version
   if (resolvedVersion.value) return
@@ -253,239 +249,232 @@ onMounted(async () => {
 })
 
 /* ------------------------------------------------------------------ */
-/*  Position state                                                     */
+/*  Elastic stretch state (control-point displacement)                 */
 /* ------------------------------------------------------------------ */
-const posX = ref(0)
-const posY = ref(0)
+const stretchX = ref(0)
+const stretchY = ref(0)
 const isDragging = ref(false)
-const isFlipping = ref(false)
 
-/** Rest X position for the current side */
-function getRestX(): number {
-  if (side.value === 'left') return 0
-  return viewportWidth.value - svgSizePx.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)
 
-const containerStyle = computed(() => ({
-  transform: `translate(${posX.value}px, ${posY.value}px)`,
-}))
+/**
+ * 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 (side-aware, X-mirrored for right)            */
+/*  SVG path computation (side-aware, with elastic control-point)      */
 /* ------------------------------------------------------------------ */
 
 /**
- * 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)
+ * Text center-line. On the right side the path direction is reversed
+ * so that textPath renders left-to-right (readable).
  */
-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`
-}
-
-/** 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`
+    return `M 0,${EP} Q ${cx.value},${cy.value} ${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}`
+  return `M ${SVG_SIZE - EP},0 Q ${cx.value},${cy.value} ${SVG_SIZE},${EP}`
 })
 
-const outerStitchPath = computed(() =>
-  mirrorQ(
-    EP + HW - STI,
-    CP0 + CPO - 3,
-    CP0 + CPO - 3,
-    EP + HW - STI,
-  ),
-)
-
-const innerStitchPath = computed(() =>
-  mirrorQ(
-    EP - HW + STI,
-    CP0 - CPO + 3,
-    CP0 - CPO + 3,
-    EP - HW + STI,
-  ),
-)
-
 const bandPath = computed(() => {
-  const oY = EP + HW
-  const oX = EP + HW
-  const oCx = CP0 + CPO
-  const oCy = CP0 + CPO
-  const iY = EP - HW
-  const iX = EP - HW
-  const iCx = CP0 - CPO
-  const iCy = CP0 - 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,${oY} Q ${oCx},${oCy} ${oX},0`,
-      `L ${iX},0`,
-      `Q ${iCx},${iCy} 0,${iY}`,
+      `M 0,${EP + HW} Q ${ocx},${ocy} ${EP + HW},0`,
+      `L ${EP - HW},0`,
+      `Q ${icx},${icy} 0,${EP - HW}`,
       `Z`,
     ].join(' ')
   }
 
   return [
-    `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}`,
+    `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                                            */
+/* ------------------------------------------------------------------ */
+
+/**
+ * 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%)' }
+})
+
 /* ------------------------------------------------------------------ */
-/*  Drag: translate ribbon + flip on midpoint crossing                 */
+/*  Drag: elastic control-point stretch + flip on midpoint crossing    */
 /* ------------------------------------------------------------------ */
-const ribbonSvgRef = ref<SVGSVGElement | null>(null)
-let dragStart: { x: number; y: number; posX: number; posY: number } | null = null
-let capturedTarget: Element | null = null
-let lastPointerId: number | null = null
+const touchOverlayRef = ref<HTMLDivElement | null>(null)
+let dragStart: { x: number; y: number } | null = null
 let springRaf = 0
-let flipTimeout: ReturnType<typeof setTimeout> | null = null
 
-function onRibbonPointerDown(e: PointerEvent) {
-  // Don't allow interaction during flip animation
-  if (isFlipping.value) return
+/**
+ * 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
-  lastPointerId = e.pointerId
 
   isDragging.value = true
-  dragStart = { x: e.clientX, y: e.clientY, posX: posX.value, posY: posY.value }
+  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 (!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')
+  // 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) {
-  releasePointer(e)
+function onPointerUp(e: PointerEvent) {
+  if (touchOverlayRef.value) {
+    try { touchOverlayRef.value.releasePointerCapture(e.pointerId) } catch { /* already released */ }
+  }
   isDragging.value = false
   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)
-  globalThis.removeEventListener('pointercancel', onPointerCancel)
+  globalThis.removeEventListener('pointercancel', onPointerUp)
 }
 
 /**
- * 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.
+ * 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') {
+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 (capturedTarget && lastPointerId !== null) {
-    try { capturedTarget.releasePointerCapture(lastPointerId) } catch { /* noop */ }
+  if (touchOverlayRef.value) {
+    try { touchOverlayRef.value.releasePointerCapture(e.pointerId) } catch { /* noop */ }
   }
-  capturedTarget = null
-  lastPointerId = null
 
-  // Toggle side (paths flip instantly, gradient direction updates)
+  // Switch to the new side
   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 */
+/** Spring-physics animation to snap the control point back to default */
 function animateSnapBack() {
-  const targetX = getRestX()
-  const targetY = 0
   const stiffness = 0.12
   const damping = 0.72
   let vx = 0
   let vy = 0
 
   function step() {
-    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
+    vx = (vx - stiffness * stretchX.value) * damping
+    vy = (vy - stiffness * stretchY.value) * damping
+    stretchX.value += vx
+    stretchY.value += vy
 
     if (
-      Math.abs(dxToTarget) < 0.3 &&
-      Math.abs(dyToTarget) < 0.3 &&
+      Math.abs(stretchX.value) < 0.3 &&
+      Math.abs(stretchY.value) < 0.3 &&
       Math.abs(vx) < 0.3 &&
       Math.abs(vy) < 0.3
     ) {
-      posX.value = targetX
-      posY.value = targetY
+      stretchX.value = 0
+      stretchY.value = 0
       springRaf = 0
       return
     }
@@ -501,31 +490,31 @@ 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)
+  removeListeners()
 })
 </script>
 
 <style scoped>
 /* ------------------------------------------------------------------ */
-/*  Container — fixed top-left, non-blocking, positioned via transform */
+/*  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;
 }
 
-/* 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);
+.dcs-ribbon-container--left {
+  left: 0;
+  right: auto;
+}
+
+.dcs-ribbon-container--right {
+  right: 0;
+  left: auto;
 }
 
 /* ------------------------------------------------------------------ */
@@ -540,16 +529,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;
 }
 
 /* ------------------------------------------------------------------ */
@@ -584,12 +567,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;
   }

package/src/components/ResponsiveImage.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+/**
+ * Convenience component that renders a responsive `<picture>` element for
+ * DCS CDN-hosted images. For non-CDN images it falls back to a plain `<img>`.
+ *
+ * @example
+ * ```vue
+ * <ResponsiveImage
+ *   src="https://files.duffcloudservices.com/kept/assets/hero/abc-123.jpg"
+ *   alt="Hero banner"
+ *   context="hero"
+ *   class="w-full h-full object-cover"
+ * />
+ * ```
+ */
+import { useResponsiveImage } from '../composables/useResponsiveImage'
+import type { ImageContext } from '@duffcloudservices/cms-core'
+
+const props = defineProps<{
+  /** Image source URL (original CDN URL or local path). */
+  src: string
+  /** Alt text for accessibility. */
+  alt: string
+  /** Sizing context — determines which variants to include. */
+  context?: ImageContext
+  /** CSS class(es) applied to the `<img>` element. */
+  class?: string
+  /** Optional `sizes` attribute override. */
+  sizes?: string
+  /** Skip responsive variants and use the original URL only. */
+  original?: boolean
+}>()
+
+const image = useResponsiveImage({
+  src: () => props.src,
+  alt: () => props.alt,
+  context: () => props.context ?? 'content',
+  sizes: () => props.sizes,
+  original: () => props.original,
+})
+</script>
+
+<template>
+  <picture v-if="image.hasVariants && !original">
+    <source
+      v-for="source in image.sources"
+      :key="source.type"
+      :srcset="source.srcset"
+      :type="source.type"
+      :sizes="source.sizes"
+    />
+    <img v-bind="image.imgProps" :class="props.class" />
+  </picture>
+  <img v-else v-bind="image.imgProps" :class="props.class" />
+</template>