@embeddr/react-ui 0.1.3 → 0.1.4

package/dist/ui/lightbox/PannableImage.js

@@ -1,224 +1,329 @@
-import { jsxs as a, jsx as i } from "react/jsx-runtime";
-import { useRef as v, useState as d, useCallback as c, useEffect as N } from "react";
-import { Button as H } from "../button.js";
-import se from "../../node_modules/.pnpm/lucide-react@0.562.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/rotate-ccw.js";
-import ce from "../../node_modules/.pnpm/lucide-react@0.562.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/rotate-cw.js";
-const me = ({
-  src: q,
-  className: V,
-  isOpen: W,
-  actions: _ = [],
-  controlsBottomOffset: B = 16
-}) => {
-  const s = v(null), u = v(null), I = v(null), [b, P] = d(!1), [j, Y] = d(1), h = v(1), [U, x] = d({ x: 0, y: 0 }), m = v({ x: 0, y: 0 }), [G, C] = d(0), $ = v(0), [g, X] = d({ x: 0, y: 0 }), [ee, J] = d(!1), [te, K] = d(!1), D = c(() => {
-    if (!s.current || !I.current) return;
-    const e = s.current, t = e.getContext("2d");
-    if (!t || e.width === 0 || e.height === 0) return;
-    const n = window.devicePixelRatio || 1, r = I.current;
-    t.clearRect(0, 0, e.width, e.height);
-    const o = $.current, l = o / 90 % 2 !== 0, L = e.width / e.height, p = l ? r.height / r.width : r.width / r.height;
-    let y = e.width, k = e.height;
-    p > L ? k = e.width / p : y = e.height * p;
-    const z = h.current, R = m.current, M = (l ? k : y) * z, S = (l ? y : k) * z;
-    t.save(), t.translate(e.width / 2 + R.x * n, e.height / 2 + R.y * n), t.rotate(o * Math.PI / 180), t.drawImage(r, -M / 2, -S / 2, M, S), t.restore();
-  }, []), w = c(() => {
-    if (!u.current || !s.current) return;
-    const e = window.devicePixelRatio || 1;
-    let t = 0;
-    const n = 60, r = () => {
-      if (!u.current || !s.current) return;
-      const o = u.current.getBoundingClientRect();
-      o.width > 0 && o.height > 0 ? (s.current.width = o.width * e, s.current.height = o.height * e, s.current.style.width = `${o.width}px`, s.current.style.height = `${o.height}px`, D()) : t < n && (t++, requestAnimationFrame(r));
-    };
-    requestAnimationFrame(r);
-  }, [D]), f = c(() => {
-    w();
-  }, [w]);
-  N(() => {
-    W && (setTimeout(w, 50), setTimeout(w, 200));
-  }, [W, w]), N(() => {
-    J(!1);
-    const e = new Image();
-    e.src = q, e.onload = () => {
-      I.current = e, J(!0), h.current = 1, Y(1), m.current = { x: 0, y: 0 }, x({ x: 0, y: 0 }), $.current = 0, C(0), f();
-    };
-  }, [q, f]), N(() => {
-    window.addEventListener("resize", f);
-    const e = new ResizeObserver(() => f());
-    return u.current && e.observe(u.current), () => {
-      window.removeEventListener("resize", f), e.disconnect();
-    };
-  }, [f]), N(() => {
-    h.current = j, m.current = U, $.current = G, requestAnimationFrame(D);
-  }, [j, U, G, D]);
-  const A = c((e) => {
-    e.preventDefault();
-    const t = window.devicePixelRatio || 1, n = s.current;
-    if (!n) return;
-    const r = n.getBoundingClientRect(), o = (e.clientX - r.left) * t, l = (e.clientY - r.top) * t, L = n.width / 2, p = n.height / 2, y = o - L - m.current.x * t, k = l - p - m.current.y * t, z = -Math.sign(e.deltaY) * 0.1, R = Math.max(0.1, Math.min(10, h.current + z)), M = R / h.current, S = (o - L - y * M) / t, ie = (l - p - k * M) / t;
-    Y(R), x({ x: S, y: ie });
-  }, []), [E, O] = d(null), T = c((e) => {
-    if (e.touches.length === 2) {
-      e.preventDefault();
-      const t = e.touches[0], n = e.touches[1], r = Math.hypot(t.clientX - n.clientX, t.clientY - n.clientY), o = (t.clientX + n.clientX) / 2, l = (t.clientY + n.clientY) / 2;
-      O({
-        isPinching: !0,
-        initialDistance: r,
-        initialZoom: h.current,
-        initialPan: { ...m.current },
-        midPoint: { x: o, y: l }
-      });
-    } else if (e.touches.length === 1) {
-      const t = e.touches[0];
-      X({ x: t.clientX, y: t.clientY }), P(!0);
-    }
-  }, []), Z = c(
-    (e) => {
-      if (e.touches.length === 2 && E?.isPinching) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { RotateCcw, RotateCw } from "lucide-react";
+import { Button } from "../button";
+export const PannableImage = ({ src, mediaType = "image", className, isOpen, actions = [], controlsBottomOffset = 16, }) => {
+    const canvasRef = useRef(null);
+    const containerRef = useRef(null);
+    const imageRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [zoom, setZoom] = useState(1);
+    const zoomRef = useRef(1);
+    const [pan, setPan] = useState({ x: 0, y: 0 });
+    const panRef = useRef({ x: 0, y: 0 });
+    const [rotation, setRotation] = useState(0);
+    const rotationRef = useRef(0);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const [isImageLoaded, setIsImageLoaded] = useState(false);
+    const [showHelp, setShowHelp] = useState(false);
+    // Draw image on canvas
+    const drawImage = useCallback(() => {
+        if (!canvasRef.current || !imageRef.current)
+            return;
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext("2d");
+        if (!ctx || canvas.width === 0 || canvas.height === 0)
+            return;
+        const dpr = window.devicePixelRatio || 1;
+        const img = imageRef.current;
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // Calculate fit dimensions
+        const r = rotationRef.current;
+        const isRotated = (r / 90) % 2 !== 0;
+        // Handle video dimensions
+        const naturalWidth = img instanceof HTMLVideoElement ? img.videoWidth : img.width;
+        const naturalHeight = img instanceof HTMLVideoElement ? img.videoHeight : img.height;
+        if (!naturalWidth || !naturalHeight)
+            return;
+        const canvasAspect = canvas.width / canvas.height;
+        const imageAspect = isRotated
+            ? naturalHeight / naturalWidth
+            : naturalWidth / naturalHeight;
+        let fitWidth = canvas.width;
+        let fitHeight = canvas.height;
+        if (imageAspect > canvasAspect) {
+            // Image is wider than canvas (relative to aspect)
+            fitHeight = canvas.width / imageAspect;
+        }
+        else {
+            // Image is taller than canvas
+            fitWidth = canvas.height * imageAspect;
+        }
+        // Apply zoom
+        const z = zoomRef.current;
+        const p = panRef.current;
+        // The dimensions of the image as it will be drawn (unrotated)
+        const drawWidth = (isRotated ? fitHeight : fitWidth) * z;
+        const drawHeight = (isRotated ? fitWidth : fitHeight) * z;
+        ctx.save();
+        // Move to center of canvas + pan
+        ctx.translate(canvas.width / 2 + p.x * dpr, canvas.height / 2 + p.y * dpr);
+        ctx.rotate((r * Math.PI) / 180);
+        // Draw image centered at 0,0
+        ctx.drawImage(img, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight);
+        ctx.restore();
+    }, []);
+    // Ensure canvas gets sized correctly once layout stabilizes.
+    const ensureCanvasSize = useCallback(() => {
+        if (!containerRef.current || !canvasRef.current)
+            return;
+        const dpr = window.devicePixelRatio || 1;
+        let attempts = 0;
+        const maxAttempts = 60;
+        const trySet = () => {
+            if (!containerRef.current || !canvasRef.current)
+                return;
+            const rect = containerRef.current.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0) {
+                canvasRef.current.width = rect.width * dpr;
+                canvasRef.current.height = rect.height * dpr;
+                canvasRef.current.style.width = `${rect.width}px`;
+                canvasRef.current.style.height = `${rect.height}px`;
+                drawImage();
+            }
+            else if (attempts < maxAttempts) {
+                attempts++;
+                requestAnimationFrame(trySet);
+            }
+        };
+        requestAnimationFrame(trySet);
+    }, [drawImage]);
+    // Resize handler
+    const handleResize = useCallback(() => {
+        ensureCanvasSize();
+    }, [ensureCanvasSize]);
+    // Trigger ensureCanvasSize when dialog is opened
+    useEffect(() => {
+        if (isOpen) {
+            // Small delay to allow dialog animation/layout to settle
+            setTimeout(ensureCanvasSize, 50);
+            setTimeout(ensureCanvasSize, 200);
+        }
+    }, [isOpen, ensureCanvasSize]);
+    // Load image or video
+    useEffect(() => {
+        setIsImageLoaded(false);
+        // Cleanup previous media
+        if (imageRef.current instanceof HTMLVideoElement) {
+            imageRef.current.pause();
+            imageRef.current.src = "";
+            imageRef.current.load();
+        }
+        imageRef.current = null;
+        if (mediaType === "video") {
+            const vid = document.createElement("video");
+            vid.src = src;
+            vid.loop = true;
+            vid.muted = true;
+            vid.playsInline = true;
+            vid.autoplay = true;
+            vid.onloadedmetadata = () => {
+                imageRef.current = vid;
+                setIsImageLoaded(true);
+                // Reset zoom/pan on new media
+                zoomRef.current = 1;
+                setZoom(1);
+                panRef.current = { x: 0, y: 0 };
+                setPan({ x: 0, y: 0 });
+                rotationRef.current = 0;
+                setRotation(0);
+                handleResize();
+                vid.play().catch((e) => console.error("Auto-play failed", e));
+            };
+        }
+        else {
+            const img = new Image();
+            img.src = src;
+            img.onload = () => {
+                imageRef.current = img;
+                setIsImageLoaded(true);
+                // Reset zoom/pan on new image
+                zoomRef.current = 1;
+                setZoom(1);
+                panRef.current = { x: 0, y: 0 };
+                setPan({ x: 0, y: 0 });
+                rotationRef.current = 0;
+                setRotation(0);
+                handleResize();
+            };
+        }
+    }, [src, mediaType, handleResize]);
+    // Animation loop for video
+    useEffect(() => {
+        let animationFrameId;
+        const render = () => {
+            if (mediaType === "video" && isImageLoaded) {
+                drawImage();
+                animationFrameId = requestAnimationFrame(render);
+            }
+        };
+        if (mediaType === "video" && isImageLoaded) {
+            render();
+        }
+        return () => {
+            if (animationFrameId)
+                cancelAnimationFrame(animationFrameId);
+        };
+    }, [mediaType, isImageLoaded, drawImage]);
+    // Setup resize observer and window listener
+    useEffect(() => {
+        window.addEventListener("resize", handleResize);
+        const resizeObserver = new ResizeObserver(() => handleResize());
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            window.removeEventListener("resize", handleResize);
+            resizeObserver.disconnect();
+        };
+    }, [handleResize]);
+    // Redraw when zoom or pan changes
+    useEffect(() => {
+        zoomRef.current = zoom;
+        panRef.current = pan;
+        rotationRef.current = rotation;
+        requestAnimationFrame(drawImage);
+    }, [zoom, pan, rotation, drawImage]);
+    // Mouse wheel zoom (with pivot at cursor)
+    const handleWheel = useCallback((e) => {
         e.preventDefault();
-        const t = e.touches[0], n = e.touches[1], o = Math.hypot(
-          t.clientX - n.clientX,
-          t.clientY - n.clientY
-        ) / E.initialDistance;
-        Y(Math.max(0.1, Math.min(10, E.initialZoom * o)));
-      } else if (e.touches.length === 1 && b) {
-        e.preventDefault();
-        const t = e.touches[0], n = t.clientX - g.x, r = t.clientY - g.y;
-        x((o) => ({ x: o.x + n, y: o.y + r })), X({ x: t.clientX, y: t.clientY });
-      }
-    },
-    [E, b, g]
-  ), F = c(() => {
-    O(null), P(!1);
-  }, []), ne = c((e) => {
-    X({ x: e.clientX, y: e.clientY }), P(!0);
-  }, []), re = c(
-    (e) => {
-      if (b) {
-        const t = e.clientX - g.x, n = e.clientY - g.y;
-        x((r) => ({ x: r.x + t, y: r.y + n })), X({ x: e.clientX, y: e.clientY });
-      }
-    },
-    [b, g]
-  ), Q = c(() => {
-    P(!1);
-  }, []), oe = c(() => {
-    Y(1), x({ x: 0, y: 0 }), C(0);
-  }, []);
-  return N(() => {
-    const e = s.current;
-    if (e)
-      return e.addEventListener("wheel", A, { passive: !1 }), e.addEventListener("touchstart", T, { passive: !1 }), e.addEventListener("touchmove", Z, { passive: !1 }), e.addEventListener("touchend", F), () => {
-        e.removeEventListener("wheel", A), e.removeEventListener("touchstart", T), e.removeEventListener("touchmove", Z), e.removeEventListener("touchend", F);
-      };
-  }, [A, T, Z, F]), /* @__PURE__ */ a(
-    "div",
-    {
-      ref: u,
-      className: `${V} relative h-full w-full overflow-hidden`,
-      children: [
-        /* @__PURE__ */ i(
-          "canvas",
-          {
-            ref: s,
-            onMouseDown: ne,
-            onMouseMove: re,
-            onMouseUp: Q,
-            onMouseLeave: Q,
-            onDoubleClick: oe,
-            className: `w-[100dvw] h-[100dvh] transition-opacity duration-200 ${ee ? "opacity-100" : "opacity-0"} ${b ? "cursor-grabbing" : "cursor-grab"} touch-none`
-          }
-        ),
-        /* @__PURE__ */ a(
-          "div",
-          {
-            className: "absolute left-2 flex items-center gap-2 opacity-0 hover:opacity-100 transition-opacity duration-200 transition-all duration-300 ease-in-out",
-            style: { bottom: `${B}px` },
-            children: [
-              /* @__PURE__ */ i(
-                H,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation(), C((t) => (t - 90) % 360);
-                  },
-                  className: "h-8 w-8 bg-background/90 backdrop-blur-sm border border-border/50 flex items-center justify-center hover:bg-primary/20 transition-all duration-200",
-                  title: "Rotate Counter-clockwise",
-                  children: /* @__PURE__ */ i(se, { className: "w-4 h-4 text-muted-foreground" })
-                }
-              ),
-              /* @__PURE__ */ i(
-                H,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation(), C((t) => (t + 90) % 360);
-                  },
-                  className: "h-8 w-8 bg-background/90 backdrop-blur-sm border border-border/50 flex items-center justify-center hover:bg-primary/20 transition-all duration-200",
-                  title: "Rotate Clockwise",
-                  children: /* @__PURE__ */ i(ce, { className: "w-4 h-4 text-muted-foreground" })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ a(
-          "div",
-          {
-            className: "absolute right-2 flex items-center gap-2 transition-all duration-300 ease-in-out",
-            style: { bottom: `${B}px` },
-            children: [
-              _.map((e, t) => /* @__PURE__ */ i(
-                H,
-                {
-                  onClick: (n) => {
-                    n.stopPropagation(), e.onClick();
-                  },
-                  className: "h-8 w-8 bg-background/90 backdrop-blur-sm border border-border/50 flex items-center justify-center hover:bg-primary/20 transition-all duration-200",
-                  title: e.label,
-                  children: e.icon
-                },
-                t
-              )),
-              /* @__PURE__ */ a("div", { className: "h-8 ring-1 ring-foreground/10 bg-background/90 backdrop-blur-sm px-3 py-1.5  text-xs text-muted-foreground pointer-events-none border border-border/50 transition-opacity duration-0 items-center justify-center flex", children: [
-                Math.round(j * 100),
-                "%"
-              ] }),
-              /* @__PURE__ */ a("div", { className: "relative", children: [
-                /* @__PURE__ */ i(
-                  "div",
-                  {
-                    onMouseEnter: () => K(!0),
-                    onMouseLeave: () => K(!1),
-                    className: "w-8 h-8 ring-1 ring-foreground/10 bg-background/90 backdrop-blur-sm  border border-border/50 flex items-center justify-center cursor-help transition-all duration-0 hover:bg-primary/20",
-                    children: /* @__PURE__ */ i("span", { className: "text-xs text-muted-foreground font-medium", children: "?" })
-                  }
-                ),
-                te && /* @__PURE__ */ i("div", { className: "absolute bottom-full right-0 mb-2 w-64 bg-background/95 backdrop-blur-sm border border-border  p-3 text-xs text-muted-foreground shadow-lg", children: /* @__PURE__ */ a("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ a("div", { children: [
-                    /* @__PURE__ */ i("span", { className: "text-foreground", children: "Scroll/Pinch:" }),
-                    " Zoom in/out"
-                  ] }),
-                  /* @__PURE__ */ a("div", { children: [
-                    /* @__PURE__ */ i("span", { className: "text-foreground", children: "Drag:" }),
-                    " Pan around image"
-                  ] }),
-                  /* @__PURE__ */ a("div", { children: [
-                    /* @__PURE__ */ i("span", { className: "text-foreground", children: "Double-click:" }),
-                    " Reset view"
-                  ] }),
-                  /* @__PURE__ */ a("div", { children: [
-                    /* @__PURE__ */ i("span", { className: "text-foreground", children: "Escape:" }),
-                    " Close dialog"
-                  ] })
-                ] }) })
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  me as PannableImage
+        const dpr = window.devicePixelRatio || 1;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const mouseX = (e.clientX - rect.left) * dpr;
+        const mouseY = (e.clientY - rect.top) * dpr;
+        // Center of canvas
+        const cx = canvas.width / 2;
+        const cy = canvas.height / 2;
+        // Mouse position relative to center (before zoom)
+        const rx = mouseX - cx - panRef.current.x * dpr;
+        const ry = mouseY - cy - panRef.current.y * dpr;
+        const delta = -Math.sign(e.deltaY) * 0.1;
+        const newZoom = Math.max(0.1, Math.min(10, zoomRef.current + delta));
+        const zoomFactor = newZoom / zoomRef.current;
+        // Adjust pan to keep mouse over same point
+        // newRx = rx * zoomFactor
+        // newRx = mouseX - cx - newPanX
+        // => newPanX = mouseX - cx - rx * zoomFactor
+        const newPanX = (mouseX - cx - rx * zoomFactor) / dpr;
+        const newPanY = (mouseY - cy - ry * zoomFactor) / dpr;
+        setZoom(newZoom);
+        setPan({ x: newPanX, y: newPanY });
+    }, []);
+    // Touch handling
+    const [touchState, setTouchState] = useState(null);
+    const handleTouchStart = useCallback((e) => {
+        if (e.touches.length === 2) {
+            e.preventDefault();
+            const t1 = e.touches[0];
+            const t2 = e.touches[1];
+            if (!t1 || !t2)
+                return;
+            const dist = Math.hypot(t1.clientX - t2.clientX, t1.clientY - t2.clientY);
+            const midX = (t1.clientX + t2.clientX) / 2;
+            const midY = (t1.clientY + t2.clientY) / 2;
+            setTouchState({
+                isPinching: true,
+                initialDistance: dist,
+                initialZoom: zoomRef.current,
+                initialPan: { ...panRef.current },
+                midPoint: { x: midX, y: midY },
+            });
+        }
+        else if (e.touches.length === 1) {
+            const t = e.touches[0];
+            if (!t)
+                return;
+            setDragStart({ x: t.clientX, y: t.clientY });
+            setIsDragging(true);
+        }
+    }, []);
+    const handleTouchMove = useCallback((e) => {
+        if (e.touches.length === 2 && touchState?.isPinching) {
+            e.preventDefault();
+            const t1 = e.touches[0];
+            const t2 = e.touches[1];
+            if (!t1 || !t2)
+                return;
+            const dist = Math.hypot(t1.clientX - t2.clientX, t1.clientY - t2.clientY);
+            const scale = dist / touchState.initialDistance;
+            setZoom(Math.max(0.1, Math.min(10, touchState.initialZoom * scale)));
+            // Optional: Handle pan during pinch (using midpoint delta)
+            // const midX = (t1.clientX + t2.clientX) / 2;
+            // const midY = (t1.clientY + t2.clientY) / 2;
+            // const dx = midX - touchState.midPoint.x;
+            // const dy = midY - touchState.midPoint.y;
+            // setPan({
+            //   x: touchState.initialPan.x + dx,
+            //   y: touchState.initialPan.y + dy
+            // });
+        }
+        else if (e.touches.length === 1 && isDragging) {
+            e.preventDefault(); // Prevent scrolling
+            const t = e.touches[0];
+            if (!t)
+                return;
+            const dx = t.clientX - dragStart.x;
+            const dy = t.clientY - dragStart.y;
+            setPan((p) => ({ x: p.x + dx, y: p.y + dy }));
+            setDragStart({ x: t.clientX, y: t.clientY });
+        }
+    }, [touchState, isDragging, dragStart]);
+    const handleTouchEnd = useCallback(() => {
+        setTouchState(null);
+        setIsDragging(false);
+    }, []);
+    // Mouse drag
+    const handleMouseDown = useCallback((e) => {
+        setDragStart({ x: e.clientX, y: e.clientY });
+        setIsDragging(true);
+    }, []);
+    const handleMouseMove = useCallback((e) => {
+        if (isDragging) {
+            const dx = e.clientX - dragStart.x;
+            const dy = e.clientY - dragStart.y;
+            setPan((p) => ({ x: p.x + dx, y: p.y + dy }));
+            setDragStart({ x: e.clientX, y: e.clientY });
+        }
+    }, [isDragging, dragStart]);
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+    // Reset view on double click
+    const handleDoubleClick = useCallback(() => {
+        setZoom(1);
+        setPan({ x: 0, y: 0 });
+        setRotation(0);
+    }, []);
+    // Attach event listeners
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        // Passive: false is important for preventing default scroll on touch
+        canvas.addEventListener("wheel", handleWheel, { passive: false });
+        canvas.addEventListener("touchstart", handleTouchStart, { passive: false });
+        canvas.addEventListener("touchmove", handleTouchMove, { passive: false });
+        canvas.addEventListener("touchend", handleTouchEnd);
+        return () => {
+            canvas.removeEventListener("wheel", handleWheel);
+            canvas.removeEventListener("touchstart", handleTouchStart);
+            canvas.removeEventListener("touchmove", handleTouchMove);
+            canvas.removeEventListener("touchend", handleTouchEnd);
+        };
+    }, [handleWheel, handleTouchStart, handleTouchMove, handleTouchEnd]);
+    return (_jsxs("div", { ref: containerRef, className: `${className} relative h-full w-full overflow-hidden`, children: [_jsx("canvas", { ref: canvasRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onDoubleClick: handleDoubleClick, className: `w-[100dvw] h-[100dvh] transition-opacity duration-500 ${isImageLoaded ? "opacity-100" : "opacity-0"} ${isDragging ? "cursor-grabbing" : "cursor-grab"} touch-none` }), _jsxs("div", { className: "absolute left-2 flex items-center gap-2 opacity-0 hover:opacity-100 transition-opacity duration-200 transition-all duration-300 ease-in-out", style: { bottom: `${controlsBottomOffset}px` }, children: [_jsx(Button, { onClick: (e) => {
+                            e.stopPropagation();
+                            setRotation((prev) => (prev - 90) % 360);
+                        }, className: "h-8 w-8 bg-background/90 backdrop-blur-sm border border-border/50 flex items-center justify-center hover:bg-primary/20 transition-all duration-200", title: "Rotate Counter-clockwise", children: _jsx(RotateCcw, { className: "w-4 h-4 text-muted-foreground" }) }), _jsx(Button, { onClick: (e) => {
+                            e.stopPropagation();
+                            setRotation((prev) => (prev + 90) % 360);
+                        }, className: "h-8 w-8 bg-background/90 backdrop-blur-sm border border-border/50 flex items-center justify-center hover:bg-primary/20 transition-all duration-200", title: "Rotate Clockwise", children: _jsx(RotateCw, { className: "w-4 h-4 text-muted-foreground" }) })] }), _jsxs("div", { className: "absolute right-2 flex items-center gap-2 transition-all duration-300 ease-in-out", style: { bottom: `${controlsBottomOffset}px` }, children: [actions.map((action, idx) => (_jsx(Button, { onClick: (e) => {
+                            e.stopPropagation();
+                            action.onClick();
+                        }, className: "h-8 w-8 bg-background/90 backdrop-blur-sm border border-border/50 flex items-center justify-center hover:bg-primary/20 transition-all duration-200", title: action.label, children: action.icon }, idx))), _jsxs("div", { className: "h-8 ring-1 ring-foreground/10 bg-background/90 backdrop-blur-sm px-3 py-1.5  text-xs text-muted-foreground pointer-events-none border border-border/50 transition-opacity duration-0 items-center justify-center flex", children: [Math.round(zoom * 100), "%"] }), _jsxs("div", { className: "relative", children: [_jsx("div", { onMouseEnter: () => setShowHelp(true), onMouseLeave: () => setShowHelp(false), className: "w-8 h-8 ring-1 ring-foreground/10 bg-background/90 backdrop-blur-sm  border border-border/50 flex items-center justify-center cursor-help transition-all duration-0 hover:bg-primary/20", children: _jsx("span", { className: "text-xs text-muted-foreground font-medium", children: "?" }) }), showHelp && (_jsx("div", { className: "absolute bottom-full right-0 mb-2 w-64 bg-background/95 backdrop-blur-sm border border-border  p-3 text-xs text-muted-foreground shadow-lg", children: _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { children: [_jsx("span", { className: "text-foreground", children: "Scroll/Pinch:" }), " Zoom in/out"] }), _jsxs("div", { children: [_jsx("span", { className: "text-foreground", children: "Drag:" }), " Pan around image"] }), _jsxs("div", { children: [_jsx("span", { className: "text-foreground", children: "Double-click:" }), " Reset view"] }), _jsxs("div", { children: [_jsx("span", { className: "text-foreground", children: "Escape:" }), " Close dialog"] })] }) }))] })] })] }));
 };
-//# sourceMappingURL=PannableImage.js.map
+//# sourceMappingURL=PannableImage.js.map