@bearmenu/ui 0.8.34 → 0.8.36

package/dist/components/pan-zoom-viewport.d.ts

@@ -0,0 +1,137 @@
+import * as React from 'react';
+
+/**
+ * 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()`.
+ */
+type PanZoomTransform = {
+    /** 1 is the content's natural size. */
+    scale: number;
+    /** The content's top-left corner, in viewport px. */
+    x: number;
+    y: number;
+};
+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. */
+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;
+};
+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;
+};
+declare const PanZoomViewport: React.ForwardRefExoticComponent<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;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { type PanZoomTransform, PanZoomViewport, type PanZoomViewportHandle, type PanZoomViewportLabels, type PanZoomViewportProps };

package/dist/components/pan-zoom-viewport.js

@@ -0,0 +1,531 @@
+import { ButtonGroup } from '../chunk-EGU6EG73.js';
+import { Button } from '../chunk-5SGKGFMN.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { Plus, Minus } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DRAG_THRESHOLD = 4;
+var MAX_WHEEL_ZOOM_DELTA = 25;
+var WHEEL_ZOOM_SPEED = 0.01;
+var EPSILON = 1e-3;
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function clampAxis(offset, content, viewport, pad) {
+  if (content + pad * 2 <= viewport) return (viewport - content) / 2;
+  return clamp(offset, viewport - content - pad, pad);
+}
+function distance(a, b) {
+  return Math.hypot(a.x - b.x, a.y - b.y);
+}
+function midpoint(a, b) {
+  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+}
+function isEditable(target) {
+  return target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
+}
+var PanZoomViewport = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      contentWidth,
+      contentHeight,
+      children,
+      labels,
+      minScale = 0.5,
+      maxScale = 2.5,
+      zoomStep = 1.25,
+      panStep = 48,
+      fitPadding = 24,
+      controls = true,
+      onTransformChange,
+      apiRef,
+      className,
+      contentClassName
+    } = _b, props = __objRest(_b, [
+      "contentWidth",
+      "contentHeight",
+      "children",
+      "labels",
+      "minScale",
+      "maxScale",
+      "zoomStep",
+      "panStep",
+      "fitPadding",
+      "controls",
+      "onTransformChange",
+      "apiRef",
+      "className",
+      "contentClassName"
+    ]);
+    const surfaceRef = React.useRef(null);
+    const [viewport, setViewport] = React.useState(null);
+    const [transform, setTransform] = React.useState({ scale: 1, x: 0, y: 0 });
+    const [animate, setAnimate] = React.useState(false);
+    const [announcement, setAnnouncement] = React.useState("");
+    const transformRef = React.useRef(transform);
+    const fittedRef = React.useRef(true);
+    const pointers = React.useRef(/* @__PURE__ */ new Map());
+    const gesture = React.useRef({ kind: "idle" });
+    const didDrag = React.useRef(false);
+    const pressing = React.useRef(false);
+    const instructionsId = React.useId();
+    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) => {
+        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(() => {
+      if (!viewport || viewport.width <= 0 || viewport.height <= 0) return null;
+      const scale = Math.min(
+        (viewport.width - fitPadding * 2) / contentWidth,
+        (viewport.height - fitPadding * 2) / contentHeight
+      );
+      return clampTransform({ scale, x: fitPadding, y: fitPadding });
+    }, [viewport, fitPadding, contentWidth, contentHeight, clampTransform]);
+    const commit = React.useCallback(
+      (next, options) => {
+        var _a2;
+        const previous = transformRef.current;
+        fittedRef.current = (_a2 = options.fitted) != null ? _a2 : 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, at, options) => {
+        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(
+      () => {
+        var _a2, _b2;
+        return { x: ((_a2 = viewport == null ? void 0 : viewport.width) != null ? _a2 : 0) / 2, y: ((_b2 = viewport == null ? void 0 : viewport.height) != null ? _b2 : 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, dy) => {
+        const current = transformRef.current;
+        commit(clampTransform(__spreadProps(__spreadValues({}, current), { x: current.x + dx, y: current.y + dy })), { animate: true });
+      },
+      [commit, clampTransform]
+    );
+    React.useImperativeHandle(
+      apiRef,
+      () => ({
+        zoomIn,
+        zoomOut,
+        fit,
+        zoomTo: (scale) => zoomAbout(scale, centre(), { animate: true, announce: true }),
+        panBy,
+        centerOn: (x, y) => {
+          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]
+    );
+    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();
+    }, []);
+    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(() => {
+      var _a2;
+      (_a2 = onTransformChangeRef.current) == null ? void 0 : _a2.call(onTransformChangeRef, transform);
+    }, [transform]);
+    React.useEffect(() => {
+      const surface = surfaceRef.current;
+      if (!surface) return;
+      const local = (clientX, clientY) => {
+        const rect = surface.getBoundingClientRect();
+        return { x: clientX - rect.left, y: clientY - rect.top };
+      };
+      const onWheel = (event) => {
+        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(__spreadProps(__spreadValues({}, current), {
+          x: current.x - event.deltaX * unit,
+          y: current.y - event.deltaY * unit
+        }));
+        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.preventDefault();
+        gestureStartScale = transformRef.current.scale;
+      };
+      const onGestureChange = (event) => {
+        event.preventDefault();
+        if (pointers.current.size >= 2) return;
+        const gestureEvent = event;
+        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) => {
+      const rect = event.currentTarget.getBoundingClientRect();
+      return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+    };
+    const capture = (element, pointerId) => {
+      try {
+        element.setPointerCapture(pointerId);
+      } catch (e) {
+      }
+    };
+    const onPointerDown = (event) => {
+      if (event.pointerType === "mouse" && event.button !== 0) return;
+      if (event.target instanceof Element && event.target.closest("[data-pan-zoom-ignore]")) return;
+      pressing.current = true;
+      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()];
+        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) => {
+      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 = __spreadProps(__spreadValues({}, current), { kind: "pan" });
+          didDrag.current = true;
+          capture(event.currentTarget, event.pointerId);
+        }
+        commit(
+          clampTransform(__spreadProps(__spreadValues({}, 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()];
+        const mid = midpoint(a, b);
+        const { origin } = current;
+        const scale = clamp(
+          origin.scale * (distance(a, b) / current.startDistance),
+          minScale,
+          maxScale
+        );
+        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) => {
+      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") {
+        const [[id, point]] = remaining;
+        gesture.current = { kind: "pan", id, start: point, origin: transformRef.current };
+        return;
+      }
+      if (remaining.length === 0) {
+        gesture.current = { kind: "idle" };
+        pressing.current = false;
+      }
+    };
+    const onClickCapture = (event) => {
+      if (!didDrag.current) return;
+      event.preventDefault();
+      event.stopPropagation();
+      didDrag.current = false;
+    };
+    const onKeyDown = (event) => {
+      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 {
+        if (event.target !== event.currentTarget) return;
+        const step = panStep * (event.shiftKey ? 4 : 1);
+        const move = {
+          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();
+    };
+    const onFocus = (event) => {
+      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 /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "pan-zoom-viewport",
+        className: cn("relative overflow-hidden", className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: surfaceRef,
+              "data-slot": "pan-zoom-viewport-surface",
+              role: "group",
+              tabIndex: 0,
+              "aria-label": labels.viewport,
+              "aria-describedby": labels.instructions ? instructionsId : void 0,
+              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,
+              onPointerMove,
+              onPointerUp: onPointerEnd,
+              onPointerCancel: onPointerEnd,
+              onClickCapture,
+              onDragStart: (event) => event.preventDefault(),
+              onKeyDown,
+              onFocus,
+              children: /* @__PURE__ */ jsx(
+                "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
+                }
+              )
+            }
+          ),
+          [
+            ["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"]
+          ].map(([edge, position]) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              "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"
+              )
+            },
+            edge
+          )),
+          controls ? /* @__PURE__ */ jsxs(
+            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",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size: "icon-sm",
+                    "aria-label": labels.zoomIn,
+                    disabled: atMax,
+                    onClick: zoomIn,
+                    children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": true })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size: "icon-sm",
+                    "aria-label": labels.zoomOut,
+                    disabled: atMin,
+                    onClick: zoomOut,
+                    children: /* @__PURE__ */ jsx(Minus, { "aria-hidden": true })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    size: "icon-sm",
+                    className: "text-xs font-semibold",
+                    onClick: fit,
+                    children: labels.fit
+                  }
+                )
+              ]
+            }
+          ) : null,
+          labels.instructions ? /* @__PURE__ */ jsx("span", { id: instructionsId, className: "sr-only", children: labels.instructions }) : null,
+          labels.zoomLevel ? /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: announcement }) : null
+        ]
+      })
+    );
+  }
+);
+PanZoomViewport.displayName = "PanZoomViewport";
+
+export { PanZoomViewport };

package/dist/components/place-card.js

@@ -1,12 +1,12 @@
+import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
 import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
 import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_GROUP } from '../chunk-XCB3F6SF.js';
-import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
 import { GradeAtom } from '../chunk-YE4ZQUTI.js';
 import { showsGradeAtom } from '../chunk-I5V446BX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { springSnappy } from '../chunk-OIV7B44M.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Badge } from '../chunk-NIAL4ZU2.js';
+import { Badge } from '../chunk-FQAIYKAS.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { forwardRef, memo, useState, useMemo } from 'react';

package/dist/components/place-details-mobile.js

@@ -3,7 +3,7 @@ import '../chunk-FMTJGO76.js';
 import '../chunk-MWB7S54O.js';
 import '../chunk-NWZGSLPU.js';
 import { Text } from '../chunk-ZLMRVBD7.js';
-import { Badge } from '../chunk-NIAL4ZU2.js';
+import { Badge } from '../chunk-FQAIYKAS.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { useState } from 'react';