Pinch Zoom

`<pura-pinch-zoom>` is the missing mobile gesture in the interaction suite: an image or content viewer you pinch to zoom, drag to pan, and double tap (or double click) to toggle between fit and a closer scale. Two-pointer Pointer Events drive the scale from the distance between the fingers and apply a clamped `translate() scale()` on the stage, so the content never leaves the frame. Desktop gets the same feel via ctrl + scroll (the trackpad pinch equivalent) plus keyboard support (+ / - to zoom, arrows to pan, 0 to reset). `min`, `max` and `double-tap-scale` bound the gesture, and a `zoom` event fires when a gesture settles on a new scale. At rest the frame keeps `touch-action: pan-y`, so the page still scrolls; once zoomed it switches to `touch-action: none` and the gesture owns the surface. SSR and pre-JS render the media normally at scale 1; reduced motion snaps programmatic zooms while gestures keep following the pointers 1:1. Each instance registers in `window.__puraPinchZooms` by `data-pura-id` with `{ min, max, zoomTo, reset }`, and `data-pura-pz-scale` mirrors the live scale.

Preview

<!-- product photo viewer: pinch to zoom, drag to pan, double tap to toggle -->
<pura-pinch-zoom style="height: 60vh;">
  <img src="/photos/product.jpg" alt="Product detail" />
</pura-pinch-zoom>

<!-- tighter limits, plus reacting to scale changes -->
<pura-pinch-zoom id="viewer" max="6" double-tap-scale="3" style="height: 420px;">
  <img src="/photos/floor-plan.png" alt="Floor plan" />
</pura-pinch-zoom>
<script>
  document.querySelector("#viewer").addEventListener("zoom", (e) => {
    console.log("scale is now", e.detail.scale);
  });
</script>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/pinch-zoom.js"></script>

import "./pura/lib/pinch-zoom.js";