@bearmenu/ui 0.8.35 → 0.8.37

package/src/components/pan-zoom-viewport.tsx

@@ -0,0 +1,727 @@
+"use client";
+
+import * as React from "react";
+import { Minus, Plus } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { ButtonGroup } from "./button-group";
+
+/**
+ * PanZoomViewport — a window onto content larger or smaller than itself, that
+ * pans and zooms: the floor plan in service and in the plan editor
+ * (floor/07-f0, floor/12-s11, seating/01-k2, registry/10-p0, registry/21-p15).
+ *
+ * The content is laid out at its natural size (`contentWidth` ×
+ * `contentHeight`, in CSS px) and moved with ONE transform —
+ * `translate(x, y) scale(s)` from its top-left corner — so what it draws is
+ * the caller's business and nothing here knows about tables.
+ *
+ * Input, all of it through the same clamp:
+ * - Drag with a mouse, a pen or one finger pans. The pan starts after 4px, so
+ *   a tap still reaches a table underneath as a click, and the click a drag
+ *   would otherwise become is swallowed. An element marked
+ *   `data-pan-zoom-ignore` never starts a pan (the plan editor's drag handles).
+ * - Two fingers pinch; a trackpad pinch (a ctrl-wheel in Chromium and
+ *   Firefox, a gesture event in Safari) and ctrl / ⌘ + wheel zoom about the
+ *   pointer. A plain wheel or two-finger scroll pans — and hands the scroll
+ *   back to the page once the content cannot move further that way, so the
+ *   viewport never traps a page scroll.
+ * - Keyboard, with the viewport focused: arrows pan (Shift for four times the
+ *   step); `+` / `-` zoom and `0` fits, from anywhere inside it. Tabbing onto
+ *   a table that sits off screen pans it into view.
+ * - The + / − / Fit controls, bottom right.
+ *
+ * The min-scale floor: `Fit` never shrinks below `minScale`. On a phone the
+ * plan would otherwise fit at a size no finger can hit, so below the floor it
+ * stops shrinking, anchors top-left, and the rest is a pan away — with a
+ * shaded edge on every side where content runs past the viewport, so the
+ * clipped tables read as "more this way", not as a broken layout.
+ *
+ * Zooms from the controls and the keyboard ease over `--duration-quick`;
+ * gestures follow the finger with no easing; `prefers-reduced-motion` drops
+ * the easing entirely. Every string is injected through `labels`: the design
+ * system holds no copy.
+ *
+ * The viewport takes its size from the caller — give it a height. It refits
+ * when the viewport resizes or the content changes size, until the user moves
+ * it; after that it keeps their view and only pulls it back inside the
+ * bounds. To start a different plan fitted (switching Inside → Terrace),
+ * give the viewport a `key` per plan, or call `apiRef.current.fit()`.
+ */
+
+export type PanZoomTransform = {
+  /** 1 is the content's natural size. */
+  scale: number;
+  /** The content's top-left corner, in viewport px. */
+  x: number;
+  y: number;
+};
+
+export type PanZoomViewportLabels = {
+  /** The viewport's accessible name — "Floor plan, Inside". */
+  viewport: string;
+  /** Read after the name — "Arrow keys move the plan; plus and minus zoom; 0 fits it." */
+  instructions?: string;
+  /** The + button — "Zoom in". */
+  zoomIn: string;
+  /** The − button — "Zoom out". */
+  zoomOut: string;
+  /** The fit button's visible text — "Fit". */
+  fit: string;
+  /** The controls group — "Zoom". */
+  controls?: string;
+  /**
+   * Announced politely after a zoom from the controls or the keyboard —
+   * `(percent) => \`${percent}%\``. Omit it and nothing is announced.
+   */
+  zoomLevel?: (percent: number) => string;
+};
+
+/** Drive the viewport from outside: a "Show T5" link, a reset on area change. */
+export type PanZoomViewportHandle = {
+  zoomIn: () => void;
+  zoomOut: () => void;
+  fit: () => void;
+  /** Zoom to `scale` about the viewport's centre. */
+  zoomTo: (scale: number) => void;
+  /** Move the content by `dx`, `dy` viewport px. */
+  panBy: (dx: number, dy: number) => void;
+  /** Bring the content point (`x`, `y`, in natural px) to the viewport's centre. */
+  centerOn: (x: number, y: number) => void;
+  getTransform: () => PanZoomTransform;
+};
+
+export type PanZoomViewportProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** The content's natural width, in CSS px. */
+  contentWidth: number;
+  /** The content's natural height, in CSS px. */
+  contentHeight: number;
+  children: React.ReactNode;
+  labels: PanZoomViewportLabels;
+  /** The floor: neither Fit nor zooming out goes below it. Default 0.5. */
+  minScale?: number;
+  /** Default 2.5. */
+  maxScale?: number;
+  /** The factor one + / − step multiplies by. Default 1.25. */
+  zoomStep?: number;
+  /** One arrow press, in viewport px. Default 48. */
+  panStep?: number;
+  /** The air Fit leaves around the content, and how far past it a pan may go. Default 24. */
+  fitPadding?: number;
+  /** Render the + / − / Fit controls. Default true. */
+  controls?: boolean;
+  /** Called with every transform — gestures included, so keep it cheap. */
+  onTransformChange?: (transform: PanZoomTransform) => void;
+  /** An imperative handle; see `PanZoomViewportHandle`. */
+  apiRef?: React.Ref<PanZoomViewportHandle>;
+  /** Classes for the transformed content layer. */
+  contentClassName?: string;
+};
+
+type Size = { width: number; height: number };
+type Point = { x: number; y: number };
+
+type Gesture =
+  | { kind: "idle" }
+  /** One pointer down, not yet past the drag threshold. */
+  | { kind: "press"; id: number; start: Point; origin: PanZoomTransform }
+  | { kind: "pan"; id: number; start: Point; origin: PanZoomTransform }
+  | { kind: "pinch"; startDistance: number; startMid: Point; origin: PanZoomTransform };
+
+/** Safari's trackpad pinch. Not in the DOM lib: it is WebKit-only. */
+type WebKitGestureEvent = UIEvent & { scale: number; clientX: number; clientY: number };
+
+const DRAG_THRESHOLD = 4;
+/** One ctrl-wheel event never zooms by more than this many delta units — a mouse wheel's 100 would jump. */
+const MAX_WHEEL_ZOOM_DELTA = 25;
+const WHEEL_ZOOM_SPEED = 0.01;
+const EPSILON = 0.001;
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+/**
+ * One axis. Content that fits (with its padding) is centred and cannot move;
+ * content that does not may pan until its far edge is `pad` inside the
+ * viewport's, and no further.
+ */
+function clampAxis(offset: number, content: number, viewport: number, pad: number) {
+  if (content + pad * 2 <= viewport) return (viewport - content) / 2;
+  return clamp(offset, viewport - content - pad, pad);
+}
+
+function distance(a: Point, b: Point) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+
+function midpoint(a: Point, b: Point): Point {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+
+function isEditable(target: EventTarget) {
+  return (
+    target instanceof HTMLElement &&
+    (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName))
+  );
+}
+
+const PanZoomViewport = React.forwardRef<HTMLDivElement, PanZoomViewportProps>(
+  (
+    {
+      contentWidth,
+      contentHeight,
+      children,
+      labels,
+      minScale = 0.5,
+      maxScale = 2.5,
+      zoomStep = 1.25,
+      panStep = 48,
+      fitPadding = 24,
+      controls = true,
+      onTransformChange,
+      apiRef,
+      className,
+      contentClassName,
+      ...props
+    },
+    ref
+  ) => {
+    const surfaceRef = React.useRef<HTMLDivElement | null>(null);
+    const [viewport, setViewport] = React.useState<Size | null>(null);
+    const [transform, setTransform] = React.useState<PanZoomTransform>({ scale: 1, x: 0, y: 0 });
+    const [animate, setAnimate] = React.useState(false);
+    const [announcement, setAnnouncement] = React.useState("");
+    const transformRef = React.useRef(transform);
+    /** Still showing the fitted view: a resize or a new plan refits instead of clamping. */
+    const fittedRef = React.useRef(true);
+    const pointers = React.useRef(new Map<number, Point>());
+    const gesture = React.useRef<Gesture>({ kind: "idle" });
+    const didDrag = React.useRef(false);
+    /** A pointer is down: the focus it causes must not pan the plan under the finger. */
+    const pressing = React.useRef(false);
+    const instructionsId = React.useId();
+
+    // Callers pass `labels` and `onTransformChange` inline, a new identity
+    // every render; read them through refs so no effect re-runs on them.
+    const onTransformChangeRef = React.useRef(onTransformChange);
+    const zoomLevelRef = React.useRef(labels.zoomLevel);
+    React.useEffect(() => {
+      onTransformChangeRef.current = onTransformChange;
+      zoomLevelRef.current = labels.zoomLevel;
+    });
+
+    const clampTransform = React.useCallback(
+      (next: PanZoomTransform): PanZoomTransform => {
+        if (!viewport || viewport.width <= 0 || viewport.height <= 0) return next;
+        const scale = clamp(next.scale, minScale, maxScale);
+        return {
+          scale,
+          x: clampAxis(next.x, contentWidth * scale, viewport.width, fitPadding),
+          y: clampAxis(next.y, contentHeight * scale, viewport.height, fitPadding),
+        };
+      },
+      [viewport, minScale, maxScale, contentWidth, contentHeight, fitPadding]
+    );
+
+    const fitted = React.useCallback((): PanZoomTransform | null => {
+      if (!viewport || viewport.width <= 0 || viewport.height <= 0) return null;
+      const scale = Math.min(
+        (viewport.width - fitPadding * 2) / contentWidth,
+        (viewport.height - fitPadding * 2) / contentHeight
+      );
+      // Start from the padded top-left: content under the floor overflows and
+      // stays anchored there; content that fits is centred by the clamp.
+      return clampTransform({ scale, x: fitPadding, y: fitPadding });
+    }, [viewport, fitPadding, contentWidth, contentHeight, clampTransform]);
+
+    const commit = React.useCallback(
+      (
+        next: PanZoomTransform,
+        options: { animate: boolean; fitted?: boolean; announce?: boolean }
+      ) => {
+        const previous = transformRef.current;
+        fittedRef.current = options.fitted ?? false;
+        setAnimate(options.animate);
+        if (
+          previous.scale === next.scale &&
+          previous.x === next.x &&
+          previous.y === next.y
+        ) {
+          return;
+        }
+        transformRef.current = next;
+        setTransform(next);
+        const zoomLevel = zoomLevelRef.current;
+        if (options.announce && zoomLevel && Math.abs(next.scale - previous.scale) > EPSILON) {
+          setAnnouncement(zoomLevel(Math.round(next.scale * 100)));
+        }
+      },
+      []
+    );
+
+    const zoomAbout = React.useCallback(
+      (scale: number, at: Point, options: { animate: boolean; announce?: boolean }) => {
+        const current = transformRef.current;
+        const nextScale = clamp(scale, minScale, maxScale);
+        const ratio = nextScale / current.scale;
+        commit(
+          clampTransform({
+            scale: nextScale,
+            x: at.x - (at.x - current.x) * ratio,
+            y: at.y - (at.y - current.y) * ratio,
+          }),
+          options
+        );
+      },
+      [commit, clampTransform, minScale, maxScale]
+    );
+
+    const centre = React.useCallback(
+      (): Point => ({ x: (viewport?.width ?? 0) / 2, y: (viewport?.height ?? 0) / 2 }),
+      [viewport]
+    );
+
+    const zoomIn = React.useCallback(
+      () => zoomAbout(transformRef.current.scale * zoomStep, centre(), { animate: true, announce: true }),
+      [zoomAbout, zoomStep, centre]
+    );
+    const zoomOut = React.useCallback(
+      () => zoomAbout(transformRef.current.scale / zoomStep, centre(), { animate: true, announce: true }),
+      [zoomAbout, zoomStep, centre]
+    );
+    const fit = React.useCallback(() => {
+      const next = fitted();
+      if (next) commit(next, { animate: true, fitted: true, announce: true });
+    }, [fitted, commit]);
+    const panBy = React.useCallback(
+      (dx: number, dy: number) => {
+        const current = transformRef.current;
+        commit(clampTransform({ ...current, x: current.x + dx, y: current.y + dy }), { animate: true });
+      },
+      [commit, clampTransform]
+    );
+
+    React.useImperativeHandle(
+      apiRef,
+      () => ({
+        zoomIn,
+        zoomOut,
+        fit,
+        zoomTo: (scale: number) => zoomAbout(scale, centre(), { animate: true, announce: true }),
+        panBy,
+        centerOn: (x: number, y: number) => {
+          const current = transformRef.current;
+          const middle = centre();
+          commit(
+            clampTransform({
+              scale: current.scale,
+              x: middle.x - x * current.scale,
+              y: middle.y - y * current.scale,
+            }),
+            { animate: true }
+          );
+        },
+        getTransform: () => transformRef.current,
+      }),
+      [zoomIn, zoomOut, fit, zoomAbout, centre, panBy, commit, clampTransform]
+    );
+
+    // Measure the viewport, and keep measuring it.
+    React.useLayoutEffect(() => {
+      const surface = surfaceRef.current;
+      if (!surface) return;
+      setViewport({ width: surface.clientWidth, height: surface.clientHeight });
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(([entry]) => {
+        if (!entry) return;
+        const { width, height } = entry.contentRect;
+        setViewport((previous) =>
+          previous && previous.width === width && previous.height === height
+            ? previous
+            : { width, height }
+        );
+      });
+      observer.observe(surface);
+      return () => observer.disconnect();
+    }, []);
+
+    // A new size or a new plan: refit while the user has not moved it, else
+    // keep their view and only pull it back inside the bounds. Layout effect,
+    // so the first painted frame is already fitted.
+    React.useLayoutEffect(() => {
+      if (fittedRef.current) {
+        const next = fitted();
+        if (next) commit(next, { animate: false, fitted: true });
+      } else {
+        commit(clampTransform(transformRef.current), { animate: false });
+      }
+    }, [fitted, clampTransform, commit]);
+
+    React.useEffect(() => {
+      onTransformChangeRef.current?.(transform);
+    }, [transform]);
+
+    // Wheel and Safari's gesture events are attached natively: React's wheel
+    // listener is passive, and a passive listener cannot keep the page from
+    // zooming or scrolling underneath.
+    React.useEffect(() => {
+      const surface = surfaceRef.current;
+      if (!surface) return;
+
+      const local = (clientX: number, clientY: number): Point => {
+        const rect = surface.getBoundingClientRect();
+        return { x: clientX - rect.left, y: clientY - rect.top };
+      };
+
+      const onWheel = (event: WheelEvent) => {
+        const unit =
+          event.deltaMode === WheelEvent.DOM_DELTA_LINE
+            ? 16
+            : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+              ? surface.clientHeight
+              : 1;
+        const current = transformRef.current;
+        if (event.ctrlKey || event.metaKey) {
+          event.preventDefault();
+          const delta = clamp(event.deltaY * unit, -MAX_WHEEL_ZOOM_DELTA, MAX_WHEEL_ZOOM_DELTA);
+          zoomAbout(current.scale * Math.exp(-delta * WHEEL_ZOOM_SPEED), local(event.clientX, event.clientY), {
+            animate: false,
+          });
+          return;
+        }
+        const next = clampTransform({
+          ...current,
+          x: current.x - event.deltaX * unit,
+          y: current.y - event.deltaY * unit,
+        });
+        // Nothing left to reveal this way: the scroll belongs to the page.
+        if (Math.abs(next.x - current.x) < 0.5 && Math.abs(next.y - current.y) < 0.5) return;
+        event.preventDefault();
+        commit(next, { animate: false });
+      };
+
+      let gestureStartScale = 1;
+      const onGestureStart = (event: Event) => {
+        event.preventDefault();
+        gestureStartScale = transformRef.current.scale;
+      };
+      const onGestureChange = (event: Event) => {
+        event.preventDefault();
+        // iOS fires these beside the pointer stream for a touch pinch, which
+        // the pointer handlers already own.
+        if (pointers.current.size >= 2) return;
+        const gestureEvent = event as WebKitGestureEvent;
+        zoomAbout(
+          gestureStartScale * gestureEvent.scale,
+          local(gestureEvent.clientX, gestureEvent.clientY),
+          { animate: false }
+        );
+      };
+
+      surface.addEventListener("wheel", onWheel, { passive: false });
+      surface.addEventListener("gesturestart", onGestureStart);
+      surface.addEventListener("gesturechange", onGestureChange);
+      return () => {
+        surface.removeEventListener("wheel", onWheel);
+        surface.removeEventListener("gesturestart", onGestureStart);
+        surface.removeEventListener("gesturechange", onGestureChange);
+      };
+    }, [zoomAbout, clampTransform, commit]);
+
+    const localPoint = (event: React.PointerEvent<HTMLDivElement>): Point => {
+      const rect = event.currentTarget.getBoundingClientRect();
+      return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    };
+
+    const capture = (element: HTMLElement, pointerId: number) => {
+      // A pointer that is already gone (a fast tap) cannot be captured.
+      try {
+        element.setPointerCapture(pointerId);
+      } catch {
+        /* nothing to capture */
+      }
+    };
+
+    const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+      if (event.pointerType === "mouse" && event.button !== 0) return;
+      if (event.target instanceof Element && event.target.closest("[data-pan-zoom-ignore]")) return;
+      pressing.current = true;
+      // A mouse press released outside before it became a drag (so before it
+      // was captured) never reports its pointerup here. There is only ever one
+      // mouse: drop the stale entry rather than read two as a pinch.
+      if (event.pointerType === "mouse") pointers.current.clear();
+      const point = localPoint(event);
+      pointers.current.set(event.pointerId, point);
+
+      if (pointers.current.size === 1) {
+        didDrag.current = false;
+        gesture.current = {
+          kind: "press",
+          id: event.pointerId,
+          start: point,
+          origin: transformRef.current,
+        };
+        return;
+      }
+
+      if (pointers.current.size === 2) {
+        const [a, b] = [...pointers.current.values()] as [Point, Point];
+        didDrag.current = true;
+        for (const id of pointers.current.keys()) capture(event.currentTarget, id);
+        gesture.current = {
+          kind: "pinch",
+          startDistance: Math.max(distance(a, b), 1),
+          startMid: midpoint(a, b),
+          origin: transformRef.current,
+        };
+      }
+    };
+
+    const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+      if (!pointers.current.has(event.pointerId)) return;
+      const point = localPoint(event);
+      pointers.current.set(event.pointerId, point);
+      const current = gesture.current;
+
+      if ((current.kind === "press" || current.kind === "pan") && current.id === event.pointerId) {
+        const dx = point.x - current.start.x;
+        const dy = point.y - current.start.y;
+        if (current.kind === "press") {
+          if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+          gesture.current = { ...current, kind: "pan" };
+          didDrag.current = true;
+          capture(event.currentTarget, event.pointerId);
+        }
+        commit(
+          clampTransform({ ...current.origin, x: current.origin.x + dx, y: current.origin.y + dy }),
+          { animate: false }
+        );
+        return;
+      }
+
+      if (current.kind === "pinch" && pointers.current.size >= 2) {
+        const [a, b] = [...pointers.current.values()] as [Point, Point];
+        const mid = midpoint(a, b);
+        const { origin } = current;
+        const scale = clamp(
+          origin.scale * (distance(a, b) / current.startDistance),
+          minScale,
+          maxScale
+        );
+        // The content point that was under the fingers stays under them.
+        const anchorX = (current.startMid.x - origin.x) / origin.scale;
+        const anchorY = (current.startMid.y - origin.y) / origin.scale;
+        commit(clampTransform({ scale, x: mid.x - anchorX * scale, y: mid.y - anchorY * scale }), {
+          animate: false,
+        });
+      }
+    };
+
+    const onPointerEnd = (event: React.PointerEvent<HTMLDivElement>) => {
+      if (!pointers.current.delete(event.pointerId)) return;
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      const remaining = [...pointers.current.entries()];
+      if (remaining.length === 1 && gesture.current.kind === "pinch") {
+        // One finger lifted from a pinch: the other carries on as a pan.
+        const [[id, point]] = remaining as [[number, Point]];
+        gesture.current = { kind: "pan", id, start: point, origin: transformRef.current };
+        return;
+      }
+      if (remaining.length === 0) {
+        gesture.current = { kind: "idle" };
+        pressing.current = false;
+      }
+    };
+
+    /** The click a drag would otherwise become, on a table under the finger. */
+    const onClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {
+      if (!didDrag.current) return;
+      event.preventDefault();
+      event.stopPropagation();
+      didDrag.current = false;
+    };
+
+    const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+      if (isEditable(event.target)) return;
+
+      if (event.key === "+" || event.key === "=") zoomIn();
+      else if (event.key === "-" || event.key === "_") zoomOut();
+      else if (event.key === "0") fit();
+      else {
+        // Arrows belong to whatever is focused inside — the plan editor
+        // nudges a table with them. Only the viewport itself pans.
+        if (event.target !== event.currentTarget) return;
+        const step = panStep * (event.shiftKey ? 4 : 1);
+        const move: Record<string, Point> = {
+          ArrowLeft: { x: step, y: 0 },
+          ArrowRight: { x: -step, y: 0 },
+          ArrowUp: { x: 0, y: step },
+          ArrowDown: { x: 0, y: -step },
+        };
+        const delta = move[event.key];
+        if (!delta) return;
+        panBy(delta.x, delta.y);
+      }
+      event.preventDefault();
+    };
+
+    /** Tabbing onto a table past the edge brings it into view. */
+    const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {
+      if (pressing.current || event.target === event.currentTarget) return;
+      const bounds = event.currentTarget.getBoundingClientRect();
+      const rect = event.target.getBoundingClientRect();
+      const margin = fitPadding;
+      let dx = 0;
+      let dy = 0;
+      if (rect.left < bounds.left + margin) dx = bounds.left + margin - rect.left;
+      else if (rect.right > bounds.right - margin) dx = bounds.right - margin - rect.right;
+      if (rect.top < bounds.top + margin) dy = bounds.top + margin - rect.top;
+      else if (rect.bottom > bounds.bottom - margin) dy = bounds.bottom - margin - rect.bottom;
+      if (dx !== 0 || dy !== 0) panBy(dx, dy);
+    };
+
+    const scaledWidth = contentWidth * transform.scale;
+    const scaledHeight = contentHeight * transform.scale;
+    const overflow = viewport
+      ? {
+          left: transform.x < -0.5,
+          right: transform.x + scaledWidth > viewport.width + 0.5,
+          top: transform.y < -0.5,
+          bottom: transform.y + scaledHeight > viewport.height + 0.5,
+        }
+      : { left: false, right: false, top: false, bottom: false };
+    const atMin = transform.scale <= minScale + EPSILON;
+    const atMax = transform.scale >= maxScale - EPSILON;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="pan-zoom-viewport"
+        className={cn("relative overflow-hidden", className)}
+        {...props}
+      >
+        <div
+          ref={surfaceRef}
+          data-slot="pan-zoom-viewport-surface"
+          role="group"
+          tabIndex={0}
+          aria-label={labels.viewport}
+          aria-describedby={labels.instructions ? instructionsId : undefined}
+          className={cn(
+            "absolute inset-0 touch-none select-none outline-none",
+            "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+            "cursor-grab active:cursor-grabbing"
+          )}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerEnd}
+          onPointerCancel={onPointerEnd}
+          onClickCapture={onClickCapture}
+          onDragStart={(event) => event.preventDefault()}
+          onKeyDown={onKeyDown}
+          onFocus={onFocus}
+        >
+          <div
+            data-slot="pan-zoom-viewport-content"
+            className={cn(
+              "absolute left-0 top-0 origin-top-left",
+              // Hidden for the one render before the first measurement, so the
+              // unfitted plan never flashes.
+              !viewport && "invisible",
+              animate &&
+                "transition-transform duration-[var(--duration-quick)] ease-[var(--ease-standard)] motion-reduce:transition-none",
+              contentClassName
+            )}
+            style={{
+              width: contentWidth,
+              height: contentHeight,
+              transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
+            }}
+          >
+            {children}
+          </div>
+        </div>
+
+        {/* "More this way": a shade on each edge the content runs past. */}
+        {(
+          [
+            ["left", "inset-y-0 left-0 w-6 bg-gradient-to-r"],
+            ["right", "inset-y-0 right-0 w-6 bg-gradient-to-l"],
+            ["top", "inset-x-0 top-0 h-6 bg-gradient-to-b"],
+            ["bottom", "inset-x-0 bottom-0 h-6 bg-gradient-to-t"],
+          ] as const
+        ).map(([edge, position]) => (
+          <div
+            key={edge}
+            aria-hidden
+            data-slot="pan-zoom-viewport-edge"
+            data-edge={edge}
+            data-visible={overflow[edge] ? "true" : "false"}
+            className={cn(
+              "pointer-events-none absolute from-foreground/10 to-transparent transition-opacity duration-[var(--duration-quick)] motion-reduce:transition-none",
+              position,
+              overflow[edge] ? "opacity-100" : "opacity-0"
+            )}
+          />
+        ))}
+
+        {controls ? (
+          <ButtonGroup
+            orientation="vertical"
+            aria-label={labels.controls}
+            data-slot="pan-zoom-viewport-controls"
+            className="absolute bottom-3 right-3 rounded-xl bg-card shadow-sm"
+          >
+            <Button
+              type="button"
+              variant="outline"
+              size="icon-sm"
+              aria-label={labels.zoomIn}
+              disabled={atMax}
+              onClick={zoomIn}
+            >
+              <Plus aria-hidden />
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon-sm"
+              aria-label={labels.zoomOut}
+              disabled={atMin}
+              onClick={zoomOut}
+            >
+              <Minus aria-hidden />
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon-sm"
+              className="text-xs font-semibold"
+              onClick={fit}
+            >
+              {labels.fit}
+            </Button>
+          </ButtonGroup>
+        ) : null}
+
+        {labels.instructions ? (
+          <span id={instructionsId} className="sr-only">
+            {labels.instructions}
+          </span>
+        ) : null}
+        {labels.zoomLevel ? (
+          <span className="sr-only" aria-live="polite">
+            {announcement}
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+);
+PanZoomViewport.displayName = "PanZoomViewport";
+
+export { PanZoomViewport };