@embeddr/react-ui 0.1.3 → 0.1.4

package/dist/ui/lightbox/LightboxViewer.js

@@ -1,114 +1,52 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useState as h, useRef as y, useEffect as v } from "react";
-import { Button as f } from "../button.js";
-import { PannableImage as I } from "./PannableImage.js";
-import { ImageThumbnailStrip as C } from "./ImageThumbnailStrip.js";
-import { GalleryPicker as S } from "./GalleryPicker.js";
-import V from "../../node_modules/.pnpm/lucide-react@0.562.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/pause.js";
-import B from "../../node_modules/.pnpm/lucide-react@0.562.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/play.js";
-import G from "../../node_modules/.pnpm/lucide-react@0.562.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/loader-circle.js";
-import L from "../../node_modules/.pnpm/lucide-react@0.562.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js";
-const J = ({
-  imageSrc: m,
-  gallery: r,
-  imageIndex: s,
-  onGalleryChange: g,
-  onImageChange: l,
-  isOpen: n,
-  actions: x = [],
-  isLoading: N,
-  onClose: d,
-  showGalleryPicker: k = !1,
-  showThumbnailStrip: p = !1
-}) => {
-  const [o, b] = h(!1), [a, w] = h(!1), c = y(null);
-  v(() => (o && (c.current = setInterval(() => {
-    l(s + 1);
-  }, 2500)), () => {
-    c.current && clearInterval(c.current);
-  }), [o, s, l]), v(() => {
-    n || b(!1);
-  }, [n]);
-  const z = async (t) => {
-    r && await l(t);
-  }, u = r?.images[s], P = u ? x.filter((t) => !t.isVisible || t.isVisible(u)).map((t) => ({
-    icon: t.icon,
-    label: t.label,
-    onClick: () => t.onClick(u)
-  })) : [], j = p ? a ? 180 : 80 : 16;
-  return /* @__PURE__ */ i("div", { className: "flex flex-col w-full h-full relative min-h-max flex-1 focus:outline-none", children: [
-    k && /* @__PURE__ */ e("div", { className: "absolute top-0 left-0 right-0 z-20 pointer-events-none", children: /* @__PURE__ */ e("div", { className: "pointer-events-auto", children: /* @__PURE__ */ e(
-      S,
-      {
-        currentGalleryId: r?.id,
-        onGalleryChange: g
-      }
-    ) }) }),
-    /* @__PURE__ */ i("div", { className: "absolute top-2 right-10 z-30 pointer-events-auto flex gap-2", children: [
-      /* @__PURE__ */ i(
-        f,
-        {
-          size: "sm",
-          variant: "outline",
-          disabled: !0,
-          className: "px-4  flex items-center justify-center text-sm font-medium text-muted-foreground  backdrop-blur-sm",
-          children: [
-            s + 1,
-            " /",
-            " ",
-            r?.totalImages || r?.images.length || 0
-          ]
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Loader2, Pause, Play, X } from "lucide-react";
+import { Button } from "../button";
+import { PannableImage } from "./PannableImage";
+import { ImageThumbnailStrip } from "./ImageThumbnailStrip";
+import { GalleryPicker } from "./GalleryPicker";
+export const LightboxViewer = ({ imageSrc, gallery, imageIndex, onGalleryChange, onImageChange, isOpen, actions = [], isLoading, onClose, showGalleryPicker = false, showThumbnailStrip = false, }) => {
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [isStripOpen, setIsStripOpen] = useState(false);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        if (isPlaying) {
+            timerRef.current = setInterval(() => {
+                onImageChange(imageIndex + 1);
+            }, 2500);
         }
-      ),
-      /* @__PURE__ */ e(
-        f,
-        {
-          variant: "outline",
-          size: "icon-sm",
-          onClick: () => b(!o),
-          className: " rounded-none bg-background/90 hover:bg-secondary/20 text-muted-foreground hover:text-foreground border-b border-l border-border backdrop-blur-sm",
-          title: o ? "Pause slideshow" : "Start slideshow",
-          children: o ? /* @__PURE__ */ e(V, { className: "h-4 w-4" }) : /* @__PURE__ */ e(B, { className: "h-4 w-4" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ i("div", { className: "flex-1 flex items-center justify-center relative w-full h-full  min-h-full", children: [
-      N && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-[1px]", children: /* @__PURE__ */ e(G, { className: "w-10 h-10 text-white animate-spin" }) }),
-      m && /* @__PURE__ */ e(
-        I,
-        {
-          src: m,
-          className: "w-full h-full",
-          isOpen: n,
-          actions: P,
-          controlsBottomOffset: j
-        }
-      )
-    ] }),
-    d && /* @__PURE__ */ e(
-      f,
-      {
-        variant: "outline",
-        size: "icon-sm",
-        onClick: d,
-        className: "cursor-pointer hover:bg-secondary/20 fixed top-2 right-1.5 z-50  flex items-center justify-center group",
-        "aria-label": "Close dialog",
-        children: /* @__PURE__ */ e(L, { className: " text-muted-foreground group-hover:text-foreground transition-colors" })
-      }
-    ),
-    p && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-0 right-0 z-20 select-none focus-visible:outline-none focus:ring-0 focus:ring-transparent", children: r && /* @__PURE__ */ e(
-      C,
-      {
-        gallery: r,
-        currentIndex: s,
-        onImageChange: z,
-        isOpen: a,
-        onToggle: () => w(!a)
-      }
-    ) })
-  ] });
-};
-export {
-  J as LightboxViewer
+        return () => {
+            if (timerRef.current)
+                clearInterval(timerRef.current);
+        };
+    }, [isPlaying, imageIndex, onImageChange]);
+    // Stop playing if dialog closes
+    useEffect(() => {
+        if (!isOpen)
+            setIsPlaying(false);
+    }, [isOpen]);
+    const handleImageChange = async (index) => {
+        if (!gallery)
+            return;
+        await onImageChange(index);
+    };
+    // Prepare actions for PannableImage
+    const currentImage = gallery?.images[imageIndex];
+    const pannableActions = currentImage
+        ? actions
+            .filter((action) => !action.isVisible || action.isVisible(currentImage))
+            .map((action) => ({
+            icon: action.icon,
+            label: action.label,
+            onClick: () => action.onClick(currentImage),
+        }))
+        : [];
+    // Calculate bottom offset for controls based on strip state
+    const controlsBottomOffset = showThumbnailStrip
+        ? isStripOpen
+            ? 180 // Strip open height + padding
+            : 80 // Strip closed height + padding
+        : 16; // Default padding
+    return (_jsxs("div", { className: "flex flex-col w-full h-full relative min-h-max flex-1 focus:outline-none", children: [showGalleryPicker && (_jsx("div", { className: "absolute top-0 left-0 right-0 z-20 pointer-events-none", children: _jsx("div", { className: "pointer-events-auto", children: _jsx(GalleryPicker, { currentGalleryId: gallery?.id, onGalleryChange: onGalleryChange }) }) })), _jsxs("div", { className: "absolute top-2 right-10 z-30 pointer-events-auto flex gap-2", children: [_jsxs(Button, { size: "sm", variant: "outline", disabled: true, className: "px-4  flex items-center justify-center text-sm font-medium text-muted-foreground  backdrop-blur-sm", children: [imageIndex + 1, " /", " ", gallery?.totalImages || gallery?.images.length || 0] }), _jsx(Button, { variant: "outline", size: "icon-sm", onClick: () => setIsPlaying(!isPlaying), className: " rounded-none bg-background/90 hover:bg-secondary/20 text-muted-foreground hover:text-foreground border-b border-l border-border backdrop-blur-sm", title: isPlaying ? "Pause slideshow" : "Start slideshow", children: isPlaying ? (_jsx(Pause, { className: "h-4 w-4" })) : (_jsx(Play, { className: "h-4 w-4" })) })] }), _jsxs("div", { className: "flex-1 flex items-center justify-center relative w-full h-full  min-h-full", children: [isLoading && (_jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-[1px]", children: _jsx(Loader2, { className: "w-10 h-10 text-white animate-spin" }) })), imageSrc && (_jsx(PannableImage, { src: imageSrc, mediaType: currentImage?.media_type === "video" ? "video" : "image", className: "w-full h-full", isOpen: isOpen, actions: pannableActions, controlsBottomOffset: controlsBottomOffset }))] }), onClose && (_jsx(Button, { variant: "outline", size: "icon-sm", onClick: onClose, className: "cursor-pointer hover:bg-secondary/20 fixed top-2 right-1.5 z-50  flex items-center justify-center group", "aria-label": "Close dialog", children: _jsx(X, { className: " text-muted-foreground group-hover:text-foreground transition-colors" }) })), showThumbnailStrip && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 z-20 select-none focus-visible:outline-none focus:ring-0 focus:ring-transparent", children: gallery && (_jsx(ImageThumbnailStrip, { gallery: gallery, currentIndex: imageIndex, onImageChange: handleImageChange, isOpen: isStripOpen, onToggle: () => setIsStripOpen(!isStripOpen) })) }))] }));
 };
-//# sourceMappingURL=LightboxViewer.js.map
+//# sourceMappingURL=LightboxViewer.js.map

package/dist/ui/lightbox/LightboxViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightboxViewer.js","sources":["../../../src/ui/lightbox/LightboxViewer.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Loader2, Pause, Play, X } from \"lucide-react\";\nimport { Button } from \"../button\";\nimport { PannableImage } from \"./PannableImage\";\nimport { ImageThumbnailStrip } from \"./ImageThumbnailStrip\";\nimport { GalleryPicker } from \"./GalleryPicker\";\nimport type { Gallery, ImageAction } from \"../../types/gallery\";\n\ninterface LightboxViewerProps {\n  imageSrc?: string | null;\n  gallery: Gallery | null;\n  imageIndex: number;\n  onGalleryChange: (galleryId: string) => void;\n  onImageChange: (index: number) => void;\n  isOpen?: boolean;\n  actions?: Array<ImageAction>;\n  isLoading?: boolean;\n  onClose?: () => void;\n  showGalleryPicker?: boolean;\n  showThumbnailStrip?: boolean;\n}\n\nexport const LightboxViewer = ({\n  imageSrc,\n  gallery,\n  imageIndex,\n  onGalleryChange,\n  onImageChange,\n  isOpen,\n  actions = [],\n  isLoading,\n  onClose,\n  showGalleryPicker = false,\n  showThumbnailStrip = false,\n}: LightboxViewerProps) => {\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [isStripOpen, setIsStripOpen] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (isPlaying) {\n      timerRef.current = setInterval(() => {\n        onImageChange(imageIndex + 1);\n      }, 2500);\n    }\n    return () => {\n      if (timerRef.current) clearInterval(timerRef.current);\n    };\n  }, [isPlaying, imageIndex, onImageChange]);\n\n  // Stop playing if dialog closes\n  useEffect(() => {\n    if (!isOpen) setIsPlaying(false);\n  }, [isOpen]);\n\n  const handleImageChange = async (index: number) => {\n    if (!gallery) return;\n    await onImageChange(index);\n  };\n\n  // Prepare actions for PannableImage\n  const currentImage = gallery?.images[imageIndex];\n  const pannableActions = currentImage\n    ? actions\n        .filter((action) => !action.isVisible || action.isVisible(currentImage))\n        .map((action) => ({\n          icon: action.icon,\n          label: action.label,\n          onClick: () => action.onClick(currentImage),\n        }))\n    : [];\n\n  // Calculate bottom offset for controls based on strip state\n  const controlsBottomOffset = showThumbnailStrip\n    ? isStripOpen\n      ? 180 // Strip open height + padding\n      : 80 // Strip closed height + padding\n    : 16; // Default padding\n\n  return (\n    <div className=\"flex flex-col w-full h-full relative min-h-max flex-1 focus:outline-none\">\n      {/* Top Gallery Picker */}\n      {showGalleryPicker && (\n        <div className=\"absolute top-0 left-0 right-0 z-20 pointer-events-none\">\n          <div className=\"pointer-events-auto\">\n            <GalleryPicker\n              currentGalleryId={gallery?.id}\n              onGalleryChange={onGalleryChange}\n            />\n          </div>\n        </div>\n      )}\n\n      <div className=\"absolute top-2 right-10 z-30 pointer-events-auto flex gap-2\">\n        <Button\n          size=\"sm\"\n          variant=\"outline\"\n          disabled\n          className=\"px-4  flex items-center justify-center text-sm font-medium text-muted-foreground  backdrop-blur-sm\"\n        >\n          {imageIndex + 1} /{\" \"}\n          {gallery?.totalImages || gallery?.images.length || 0}\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon-sm\"\n          onClick={() => setIsPlaying(!isPlaying)}\n          className=\" rounded-none bg-background/90 hover:bg-secondary/20 text-muted-foreground hover:text-foreground border-b border-l border-border backdrop-blur-sm\"\n          title={isPlaying ? \"Pause slideshow\" : \"Start slideshow\"}\n        >\n          {isPlaying ? (\n            <Pause className=\"h-4 w-4\" />\n          ) : (\n            <Play className=\"h-4 w-4\" />\n          )}\n        </Button>\n      </div>\n\n      {/* Main Image - Pannable Canvas */}\n      <div className=\"flex-1 flex items-center justify-center relative w-full h-full  min-h-full\">\n        {isLoading && (\n          <div className=\"absolute inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-[1px]\">\n            <Loader2 className=\"w-10 h-10 text-white animate-spin\" />\n          </div>\n        )}\n        {imageSrc && (\n          <PannableImage\n            src={imageSrc}\n            className=\"w-full h-full\"\n            isOpen={isOpen}\n            actions={pannableActions}\n            controlsBottomOffset={controlsBottomOffset}\n          />\n        )}\n      </div>\n\n      {/* Close Button - positioned over content */}\n      {onClose && (\n        <Button\n          variant=\"outline\"\n          size=\"icon-sm\"\n          onClick={onClose}\n          className=\"cursor-pointer hover:bg-secondary/20 fixed top-2 right-1.5 z-50  flex items-center justify-center group\"\n          aria-label=\"Close dialog\"\n        >\n          <X className=\" text-muted-foreground group-hover:text-foreground transition-colors\" />\n        </Button>\n      )}\n\n      {/* Bottom Image Strip */}\n      {showThumbnailStrip && (\n        <div className=\"absolute bottom-0 left-0 right-0 z-20 select-none focus-visible:outline-none focus:ring-0 focus:ring-transparent\">\n          {gallery && (\n            <ImageThumbnailStrip\n              gallery={gallery}\n              currentIndex={imageIndex}\n              onImageChange={handleImageChange}\n              isOpen={isStripOpen}\n              onToggle={() => setIsStripOpen(!isStripOpen)}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["LightboxViewer","imageSrc","gallery","imageIndex","onGalleryChange","onImageChange","isOpen","actions","isLoading","onClose","showGalleryPicker","showThumbnailStrip","isPlaying","setIsPlaying","useState","isStripOpen","setIsStripOpen","timerRef","useRef","useEffect","handleImageChange","index","currentImage","pannableActions","action","controlsBottomOffset","jsxs","jsx","GalleryPicker","Button","Pause","Play","Loader2","PannableImage","X","ImageThumbnailStrip"],"mappings":"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"}
+{"version":3,"file":"LightboxViewer.js","sourceRoot":"","sources":["../../../src/ui/lightbox/LightboxViewer.tsx"],"names":[],"mappings":"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"}

package/dist/ui/lightbox/MediaCanvas.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { PannableImageAction } from "./PannableImage";
+export interface MediaCanvasProps {
+    mode: "single" | "compare";
+    primaryImage: string;
+    secondaryImage?: string;
+    className?: string;
+    pannableActions?: Array<PannableImageAction>;
+    children?: React.ReactNode;
+    mediaType?: "image" | "video";
+}
+export declare function MediaCanvas({ mode, primaryImage, secondaryImage, className, pannableActions, children, mediaType, }: MediaCanvasProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaCanvas.d.ts.map

package/dist/ui/lightbox/MediaCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCanvas.d.ts","sourceRoot":"","sources":["../../../src/ui/lightbox/MediaCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,iBAAiB,CAAC;AAEzD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC/B;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,2CAuClB"}

package/dist/ui/lightbox/MediaCanvas.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "../../lib/utils";
+import { PannableImage } from "./PannableImage";
+import { PannableVideo } from "./PannableVideo";
+import { ComparisonSlider } from "./ComparisonSlider";
+export function MediaCanvas({ mode, primaryImage, secondaryImage, className, pannableActions, children, mediaType, }) {
+    const isVideo = (src) => {
+        if (mediaType === "video")
+            return true;
+        if (mediaType === "image")
+            return false;
+        return src && /\.(mp4|webm|mov|mkv)$/i.test(src);
+    };
+    return (_jsxs("div", { className: cn("w-full h-full relative overflow-hidden bg-muted/20", className), children: [mode === "single" &&
+                (isVideo(primaryImage) ? (_jsx(PannableVideo, { src: primaryImage, className: "w-full h-full", isOpen: true })) : (_jsx(PannableImage, { src: primaryImage, className: "w-full h-full", isOpen: true, actions: pannableActions }))), mode === "compare" && secondaryImage && (_jsx(ComparisonSlider, { before: secondaryImage, after: primaryImage, className: "w-full h-full" })), children] }));
+}
+//# sourceMappingURL=MediaCanvas.js.map

package/dist/ui/lightbox/MediaCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaCanvas.js","sourceRoot":"","sources":["../../../src/ui/lightbox/MediaCanvas.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAG,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAatD,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,cAAc,EACd,SAAS,EACT,eAAe,EACf,QAAQ,EACR,SAAS,GACQ;IACjB,MAAM,OAAO,GAAG,CAAC,GAAY,EAAE,EAAE;QAC/B,IAAI,SAAS,KAAK,OAAO;YAAE,OAAO,IAAI,CAAC;QACvC,IAAI,SAAS,KAAK,OAAO;YAAE,OAAO,KAAK,CAAC;QACxC,OAAO,GAAG,IAAI,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACnD,CAAC,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,aAEA,IAAI,KAAK,QAAQ;gBAChB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CACvB,KAAC,aAAa,IACZ,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,eAAe,EACzB,MAAM,EAAE,IAAI,GACZ,CACH,CAAC,CAAC,CAAC,CACF,KAAC,aAAa,IACZ,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,eAAe,EACzB,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,eAAe,GACxB,CACH,CAAC,EACH,IAAI,KAAK,SAAS,IAAI,cAAc,IAAI,CACvC,KAAC,gBAAgB,IACf,MAAM,EAAE,cAAc,EACtB,KAAK,EAAE,YAAY,EACnB,SAAS,EAAC,eAAe,GACzB,CACH,EACA,QAAQ,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/ui/lightbox/PannableImage.d.ts

@@ -1,16 +1,17 @@
 import type { ReactNode } from "react";
-interface PannableImageAction {
+export interface PannableImageAction {
     icon: ReactNode;
     label: string;
     onClick: () => void;
 }
 interface PannableImageProps {
     src: string;
+    mediaType?: "image" | "video";
     className?: string;
     isOpen?: boolean;
     actions?: Array<PannableImageAction>;
     controlsBottomOffset?: number;
 }
-export declare const PannableImage: ({ src, className, isOpen, actions, controlsBottomOffset, }: PannableImageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PannableImage: ({ src, mediaType, className, isOpen, actions, controlsBottomOffset, }: PannableImageProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=PannableImage.d.ts.map

package/dist/ui/lightbox/PannableImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PannableImage.d.ts","sourceRoot":"","sources":["../../../src/ui/lightbox/PannableImage.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,UAAU,mBAAmB;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,aAAa,GAAI,4DAM3B,kBAAkB,4CAuZpB,CAAC"}
+{"version":3,"file":"PannableImage.d.ts","sourceRoot":"","sources":["../../../src/ui/lightbox/PannableImage.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,aAAa,GAAI,uEAO3B,kBAAkB,4CAudpB,CAAC"}