@mmmmzxe/react-360-viewer 0.1.0

package/dist/index.js

@@ -0,0 +1,1237 @@
+"use client";
+
+// src/feature/Viewer360.tsx
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/constants/viewer360Labels.ts
+var defaultViewer360Labels = {
+  loading: "Loading images\u2026",
+  dragHint: "Drag to rotate \u2022 Scroll to zoom",
+  frameIndicator: ({ current, total, label }) => label ? `${label} (${current}/${total})` : `${current} / ${total}`,
+  zoom: (percent) => `${percent}%`,
+  hotspotModeActive: "Click on the image to place a hotspot",
+  addHotspot: "Add hotspot",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  resetView: "Reset view",
+  deleteMarker: "Remove marker"
+};
+
+// src/constants/viewer360ClassNames.ts
+var viewer360ClassNames = {
+  root: "overflow-hidden rounded-lg border bg-card text-card-foreground",
+  viewport: "relative aspect-[16/10] w-full touch-none select-none bg-muted",
+  canvas: "absolute inset-0 size-full",
+  overlay: "pointer-events-none absolute inset-0 overflow-hidden",
+  loading: "absolute inset-0 flex items-center justify-center bg-muted/80",
+  loadingText: "text-sm text-muted-foreground",
+  frameIndicator: "pointer-events-none absolute bottom-4 start-1/2 z-20 -translate-x-1/2 rounded-full border bg-background px-4 py-1.5 text-xs font-medium shadow-sm",
+  hotspotModeBanner: "pointer-events-none absolute top-4 start-1/2 z-20 -translate-x-1/2 rounded-full border border-amber-200 bg-amber-50 px-4 py-1.5 text-xs font-medium text-amber-800 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-400",
+  toolbar: "flex flex-wrap items-center justify-between gap-2 border-t px-4 py-3",
+  dragHint: "hidden text-xs text-muted-foreground sm:block",
+  controls: "ms-auto flex items-center gap-1.5",
+  controlButton: "",
+  controlButtonActive: "",
+  controlButtonDisabled: "",
+  zoomDisplay: "flex min-w-[3rem] items-center justify-center gap-1 rounded-md border bg-background px-2 py-1 text-xs font-medium",
+  divider: "mx-1 h-6 w-px bg-border"
+};
+var viewer360MarkerPinClassNames = {
+  root: "pointer-events-auto absolute z-30 -translate-x-1/2 -translate-y-1/2",
+  ping: "absolute inline-flex size-6 -translate-x-1/4 -translate-y-1/4 animate-ping rounded-full bg-destructive opacity-60",
+  dot: "relative flex size-4 items-center justify-center rounded-full border-2 border-background bg-destructive shadow-md transition-transform duration-200 hover:scale-125 focus:outline-none",
+  tooltip: "absolute bottom-6 left-1/2 z-40 w-64 -translate-x-1/2 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md",
+  tooltipHeader: "flex items-start justify-between gap-2",
+  tooltipBody: "flex min-w-0 flex-col gap-1",
+  tooltipTitle: "text-sm font-medium",
+  tooltipDescription: "mt-2 line-clamp-3 text-xs text-muted-foreground",
+  deleteButton: ""
+};
+var defaultViewer360ClassNames = viewer360ClassNames;
+var defaultViewer360MarkerPinClassNames = viewer360MarkerPinClassNames;
+
+// src/components/utils/index.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/helpers/viewer360PropsHelpers.ts
+function mergeViewer360Labels(labels) {
+  return {
+    loading: labels?.loading ?? defaultViewer360Labels.loading,
+    dragHint: labels?.dragHint ?? defaultViewer360Labels.dragHint,
+    frameIndicator: labels?.frameIndicator ?? defaultViewer360Labels.frameIndicator,
+    zoom: labels?.zoom ?? defaultViewer360Labels.zoom,
+    hotspotModeActive: labels?.hotspotModeActive ?? defaultViewer360Labels.hotspotModeActive,
+    addHotspot: labels?.addHotspot ?? defaultViewer360Labels.addHotspot,
+    zoomIn: labels?.zoomIn ?? defaultViewer360Labels.zoomIn,
+    zoomOut: labels?.zoomOut ?? defaultViewer360Labels.zoomOut,
+    resetView: labels?.resetView ?? defaultViewer360Labels.resetView,
+    deleteMarker: labels?.deleteMarker ?? defaultViewer360Labels.deleteMarker
+  };
+}
+function mergeViewer360ClassNames(classNames) {
+  return {
+    root: cn(viewer360ClassNames.root, classNames?.root),
+    viewport: cn(viewer360ClassNames.viewport, classNames?.viewport),
+    canvas: cn(viewer360ClassNames.canvas, classNames?.canvas),
+    overlay: cn(viewer360ClassNames.overlay, classNames?.overlay),
+    loading: cn(viewer360ClassNames.loading, classNames?.loading),
+    loadingText: cn(viewer360ClassNames.loadingText, classNames?.loadingText),
+    frameIndicator: cn(viewer360ClassNames.frameIndicator, classNames?.frameIndicator),
+    hotspotModeBanner: cn(viewer360ClassNames.hotspotModeBanner, classNames?.hotspotModeBanner),
+    toolbar: cn(viewer360ClassNames.toolbar, classNames?.toolbar),
+    dragHint: cn(viewer360ClassNames.dragHint, classNames?.dragHint),
+    controls: cn(viewer360ClassNames.controls, classNames?.controls),
+    controlButton: cn(viewer360ClassNames.controlButton, classNames?.controlButton),
+    controlButtonActive: cn(viewer360ClassNames.controlButtonActive, classNames?.controlButtonActive),
+    controlButtonDisabled: cn(viewer360ClassNames.controlButtonDisabled, classNames?.controlButtonDisabled),
+    zoomDisplay: cn(viewer360ClassNames.zoomDisplay, classNames?.zoomDisplay),
+    divider: cn(viewer360ClassNames.divider, classNames?.divider)
+  };
+}
+function buildViewer360ThemeStyle(theme) {
+  return theme ? theme : {};
+}
+
+// src/hooks/useViewer360.ts
+import { useEffect, useMemo, useRef, useState } from "react";
+
+// src/helpers/adjustViewerZoom.ts
+function resolveViewer360Config(config) {
+  return {
+    minZoom: config?.minZoom ?? 1,
+    maxZoom: config?.maxZoom ?? 3,
+    zoomStep: config?.zoomStep ?? 0.15,
+    dragSensitivity: config?.dragSensitivity ?? 8,
+    autoRotate: config?.autoRotate ?? false,
+    autoRotateIntervalMs: config?.autoRotateIntervalMs ?? 100,
+    autoRotateDirection: config?.autoRotateDirection ?? "forward"
+  };
+}
+function clampZoom(zoom, config) {
+  return Math.min(config.maxZoom, Math.max(config.minZoom, zoom));
+}
+function applyWheelZoom(currentZoom, deltaY, currentPan, config) {
+  const delta = deltaY > 0 ? -config.zoomStep : config.zoomStep;
+  const zoom = clampZoom(currentZoom + delta, config);
+  return {
+    zoom,
+    pan: zoom === config.minZoom ? { panX: 0, panY: 0 } : currentPan
+  };
+}
+function stepZoomIn(currentZoom, config) {
+  return clampZoom(currentZoom + config.zoomStep, config);
+}
+function stepZoomOut(currentZoom, currentPan, config) {
+  const zoom = clampZoom(currentZoom - config.zoomStep, config);
+  return {
+    zoom,
+    pan: zoom === config.minZoom ? { panX: 0, panY: 0 } : currentPan
+  };
+}
+function isResetDisabled(zoom, pan, config) {
+  return zoom === config.minZoom && pan.panX === 0 && pan.panY === 0;
+}
+function getViewerCursorClass(isHotspotMode, zoom, isDragging, minZoom) {
+  if (isHotspotMode) return "cursor-crosshair";
+  if (isDragging) return "cursor-grabbing";
+  if (zoom > minZoom) return "cursor-grab";
+  return "cursor-ew-resize";
+}
+
+// src/helpers/computeDragFrameIndex.ts
+function clampFrameIndex(index, frameCount) {
+  if (frameCount === 0) return 0;
+  return (index % frameCount + frameCount) % frameCount;
+}
+function computeDragFrameIndex(dragStart, clientX, frameCount, dragSensitivity) {
+  const deltaX = clientX - dragStart.pointerX;
+  const frameDelta = Math.round(-deltaX / dragSensitivity);
+  if (frameDelta === 0) return null;
+  return clampFrameIndex(dragStart.frameIndex + frameDelta, frameCount);
+}
+
+// src/helpers/computeViewerImageLayout.ts
+function computeViewerImageLayout({
+  containerWidth,
+  containerHeight,
+  imageWidth,
+  imageHeight,
+  pan = { panX: 0, panY: 0 }
+}) {
+  const imgAspect = imageWidth / imageHeight;
+  const containerAspect = containerWidth / containerHeight;
+  let drawWidth;
+  let drawHeight;
+  if (imgAspect > containerAspect) {
+    drawWidth = containerWidth;
+    drawHeight = containerWidth / imgAspect;
+  } else {
+    drawHeight = containerHeight;
+    drawWidth = containerHeight * imgAspect;
+  }
+  const offsetX = (containerWidth - drawWidth) / 2 + pan.panX;
+  const offsetY = (containerHeight - drawHeight) / 2 + pan.panY;
+  return {
+    width: containerWidth,
+    height: containerHeight,
+    centerX: containerWidth / 2,
+    centerY: containerHeight / 2,
+    drawWidth,
+    drawHeight,
+    offsetX,
+    offsetY
+  };
+}
+function computeHotspotScreenPosition(hotspotX, hotspotY, layout, zoom) {
+  const baseOffsetX = (layout.width - layout.drawWidth) / 2;
+  const baseOffsetY = (layout.height - layout.drawHeight) / 2;
+  const containerX = hotspotX / 100 * layout.width;
+  const containerY = hotspotY / 100 * layout.height;
+  const imageLocalX = (containerX - baseOffsetX) / layout.drawWidth;
+  const imageLocalY = (containerY - baseOffsetY) / layout.drawHeight;
+  const imagePointX = layout.offsetX + imageLocalX * layout.drawWidth;
+  const imagePointY = layout.offsetY + imageLocalY * layout.drawHeight;
+  const screenX = layout.centerX + zoom * (imagePointX - layout.centerX);
+  const screenY = layout.centerY + zoom * (imagePointY - layout.centerY);
+  return {
+    leftPercent: screenX / layout.width * 100,
+    topPercent: screenY / layout.height * 100
+  };
+}
+function computeHotspotPositionFromClick(clientX, clientY, containerRect, layout, zoom) {
+  const clickX = clientX - containerRect.left;
+  const clickY = clientY - containerRect.top;
+  const unzoomedX = layout.centerX + (clickX - layout.centerX) / zoom;
+  const unzoomedY = layout.centerY + (clickY - layout.centerY) / zoom;
+  const baseOffsetX = (layout.width - layout.drawWidth) / 2;
+  const baseOffsetY = (layout.height - layout.drawHeight) / 2;
+  const imageLocalX = Math.min(1, Math.max(0, (unzoomedX - layout.offsetX) / layout.drawWidth));
+  const imageLocalY = Math.min(1, Math.max(0, (unzoomedY - layout.offsetY) / layout.drawHeight));
+  const storedX = baseOffsetX + imageLocalX * layout.drawWidth;
+  const storedY = baseOffsetY + imageLocalY * layout.drawHeight;
+  return {
+    positionX: Math.min(100, Math.max(0, storedX / layout.width * 100)),
+    positionY: Math.min(100, Math.max(0, storedY / layout.height * 100))
+  };
+}
+
+// src/helpers/computeViewerPanOffset.ts
+function computeViewerPanOffset(panStart, clientX, clientY) {
+  const deltaX = clientX - panStart.pointerX;
+  const deltaY = clientY - panStart.pointerY;
+  return {
+    panX: panStart.panX + deltaX,
+    panY: panStart.panY + deltaY
+  };
+}
+
+// src/helpers/viewerHelpers.ts
+function drawFrameOnCanvas({ canvas, container, image, zoom, pan }) {
+  if (!image.complete || !image.naturalWidth) return;
+  const rect = container.getBoundingClientRect();
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  canvas.style.width = `${rect.width}px`;
+  canvas.style.height = `${rect.height}px`;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, rect.width, rect.height);
+  const layout = computeViewerImageLayout({
+    containerWidth: rect.width,
+    containerHeight: rect.height,
+    imageWidth: image.naturalWidth,
+    imageHeight: image.naturalHeight,
+    pan
+  });
+  ctx.save();
+  ctx.translate(layout.centerX, layout.centerY);
+  ctx.scale(zoom, zoom);
+  ctx.translate(-layout.centerX, -layout.centerY);
+  ctx.drawImage(image, layout.offsetX, layout.offsetY, layout.drawWidth, layout.drawHeight);
+  ctx.restore();
+}
+function getFramesSignature(frames) {
+  return frames.map((frame) => frame.id).join("-");
+}
+function preloadFrameImage(frame) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error(`Failed to load frame: ${frame.src}`));
+    img.src = frame.src;
+  });
+}
+async function preloadViewerFrames(frames) {
+  const results = await Promise.allSettled(frames.map(preloadFrameImage));
+  return results.map((result) => result.status === "fulfilled" ? result.value : new Image());
+}
+function hasLoadedViewerFrame(images) {
+  return images.some((image) => image.complete && image.naturalWidth > 0);
+}
+function filterHotspotsByFrame(hotspots, frameIndex) {
+  return hotspots.filter((hotspot) => hotspot.frameIndex === frameIndex);
+}
+
+// src/hooks/useViewer360.ts
+function useViewer360({
+  frames,
+  hotspots = [],
+  currentFrameIndex,
+  onFrameChange,
+  config,
+  hotspotMode: hotspotModeProp = false,
+  onHotspotAdd
+}) {
+  const resolvedConfig = useMemo(() => resolveViewer360Config(config), [config]);
+  const { minZoom, maxZoom } = resolvedConfig;
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const imagesRef = useRef([]);
+  const dragStartRef = useRef(null);
+  const panStartRef = useRef(null);
+  const framesSignature = getFramesSignature(frames);
+  const [loadedSignature, setLoadedSignature] = useState(null);
+  const [zoom, setZoom] = useState(minZoom);
+  const [pan, setPan] = useState({ panX: 0, panY: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const isHotspotMode = hotspotModeProp;
+  const imagesLoaded = loadedSignature === framesSignature;
+  const currentFrameHotspots = filterHotspotsByFrame(hotspots, currentFrameIndex);
+  const currentFrame = frames[currentFrameIndex];
+  const viewerCursorClass = getViewerCursorClass(isHotspotMode, zoom, isDragging, minZoom);
+  const resetDisabled = isResetDisabled(zoom, pan, resolvedConfig);
+  useEffect(() => {
+    let cancelled = false;
+    imagesRef.current = [];
+    async function loadFrames() {
+      const loadedImages = await preloadViewerFrames(frames);
+      if (!cancelled && hasLoadedViewerFrame(loadedImages)) {
+        imagesRef.current = loadedImages;
+        setLoadedSignature(framesSignature);
+      }
+    }
+    void loadFrames();
+    return () => {
+      cancelled = true;
+    };
+  }, [frames, framesSignature]);
+  useEffect(() => {
+    if (!imagesLoaded) return;
+    function renderFrame() {
+      const canvas = canvasRef.current;
+      const container = containerRef.current;
+      const img = imagesRef.current[currentFrameIndex];
+      if (!canvas || !container) return;
+      drawFrameOnCanvas({ canvas, container, image: img, zoom, pan });
+    }
+    renderFrame();
+    window.addEventListener("resize", renderFrame);
+    return () => window.removeEventListener("resize", renderFrame);
+  }, [imagesLoaded, currentFrameIndex, zoom, pan]);
+  useEffect(() => {
+    if (!resolvedConfig.autoRotate || frames.length <= 1 || isDragging || isHotspotMode || zoom > minZoom) {
+      return;
+    }
+    const direction = resolvedConfig.autoRotateDirection === "backward" ? -1 : 1;
+    const interval = window.setInterval(() => {
+      onFrameChange((currentFrameIndex + direction + frames.length) % frames.length);
+    }, resolvedConfig.autoRotateIntervalMs);
+    return () => window.clearInterval(interval);
+  }, [
+    resolvedConfig.autoRotate,
+    resolvedConfig.autoRotateDirection,
+    resolvedConfig.autoRotateIntervalMs,
+    frames.length,
+    currentFrameIndex,
+    isDragging,
+    isHotspotMode,
+    zoom,
+    minZoom,
+    onFrameChange
+  ]);
+  function getCurrentImageLayout() {
+    const container = containerRef.current;
+    const image = imagesRef.current[currentFrameIndex];
+    if (!container || !image || !image.complete || !image.naturalWidth) return null;
+    const rect = container.getBoundingClientRect();
+    return computeViewerImageLayout({
+      containerWidth: rect.width,
+      containerHeight: rect.height,
+      imageWidth: image.naturalWidth,
+      imageHeight: image.naturalHeight,
+      pan
+    });
+  }
+  function getHotspotScreenPosition(hotspot) {
+    const layout = getCurrentImageLayout();
+    if (!layout) {
+      return { leftPercent: hotspot.positionX, topPercent: hotspot.positionY };
+    }
+    return computeHotspotScreenPosition(hotspot.positionX, hotspot.positionY, layout, zoom);
+  }
+  function handlePointerDown(event) {
+    if (isHotspotMode) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    if (zoom > minZoom) {
+      panStartRef.current = { pointerX: event.clientX, pointerY: event.clientY, panX: pan.panX, panY: pan.panY };
+    } else {
+      dragStartRef.current = { pointerX: event.clientX, frameIndex: currentFrameIndex };
+    }
+    setIsDragging(true);
+  }
+  function handlePointerMove(event) {
+    if (!isDragging) return;
+    if (panStartRef.current && zoom > minZoom) {
+      setPan(computeViewerPanOffset(panStartRef.current, event.clientX, event.clientY));
+      return;
+    }
+    if (dragStartRef.current && zoom <= minZoom) {
+      const nextFrameIndex = computeDragFrameIndex(
+        dragStartRef.current,
+        event.clientX,
+        frames.length,
+        resolvedConfig.dragSensitivity
+      );
+      if (nextFrameIndex !== null) {
+        onFrameChange(nextFrameIndex);
+      }
+    }
+  }
+  function handlePointerUp(event) {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    dragStartRef.current = null;
+    panStartRef.current = null;
+    setIsDragging(false);
+  }
+  function handleWheel(event) {
+    event.preventDefault();
+    const { zoom: nextZoom, pan: nextPan } = applyWheelZoom(zoom, event.deltaY, pan, resolvedConfig);
+    setZoom(nextZoom);
+    setPan(nextPan);
+  }
+  function handleCanvasClick(event) {
+    if (!isHotspotMode || isDragging || !onHotspotAdd) return;
+    const frame = frames[currentFrameIndex];
+    if (!frame) return;
+    const layout = getCurrentImageLayout();
+    if (!layout) return;
+    const { positionX, positionY } = computeHotspotPositionFromClick(
+      event.clientX,
+      event.clientY,
+      event.currentTarget.getBoundingClientRect(),
+      layout,
+      zoom
+    );
+    onHotspotAdd({
+      frameIndex: currentFrameIndex,
+      frameId: frame.id,
+      positionX,
+      positionY
+    });
+  }
+  function handleResetView() {
+    setZoom(minZoom);
+    setPan({ panX: 0, panY: 0 });
+  }
+  function handleZoomIn() {
+    setZoom(stepZoomIn(zoom, resolvedConfig));
+  }
+  function handleZoomOut() {
+    const { zoom: nextZoom, pan: nextPan } = stepZoomOut(zoom, pan, resolvedConfig);
+    setZoom(nextZoom);
+    setPan(nextPan);
+  }
+  return {
+    canvasRef,
+    containerRef,
+    currentFrame,
+    currentFrameHotspots,
+    imagesLoaded,
+    isHotspotMode,
+    isResetDisabled: resetDisabled,
+    maxZoom,
+    minZoom,
+    viewerCursorClass,
+    zoom,
+    getCurrentImageLayout,
+    getHotspotScreenPosition,
+    handleCanvasClick,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handleResetView,
+    handleWheel,
+    handleZoomIn,
+    handleZoomOut
+  };
+}
+
+// src/components/ui/Card/index.tsx
+import { jsx } from "react/jsx-runtime";
+function Card({ className, size = "default", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      "data-size": size,
+      className: cn(
+        "ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn(
+        "rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/Badge/index.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        info: "bg-blue-500 text-white hover:bg-blue-600",
+        warning: "bg-amber-500 text-white hover:bg-amber-600",
+        success: "bg-green-600 text-white hover:bg-green-700"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "span";
+  return /* @__PURE__ */ jsx2(Comp, { "data-slot": "badge", "data-variant": variant, className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/feature/Viewer360AddModeBanner.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Viewer360AddModeBanner({ className, label }) {
+  return /* @__PURE__ */ jsx3(Badge, { variant: "outline", className: cn("pointer-events-none", className), children: label });
+}
+
+// src/feature/Viewer360FrameIndicator.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Viewer360FrameIndicator({ className, label }) {
+  return /* @__PURE__ */ jsx4(Badge, { variant: "outline", className: cn("pointer-events-none shadow-sm", className), children: label });
+}
+
+// src/helpers/markerHelpers.ts
+function hotspotToViewer360Marker(hotspot) {
+  const data = hotspot.data;
+  if (data && typeof data === "object" && "title" in data && typeof data.title === "string") {
+    const marker = data;
+    return {
+      id: marker.id ?? hotspot.id,
+      title: marker.title,
+      description: marker.description
+    };
+  }
+  return {
+    id: hotspot.id,
+    title: hotspot.id
+  };
+}
+function toViewer360Hotspots(markers, mapData) {
+  return markers.map((marker) => ({
+    id: marker.id,
+    frameIndex: marker.frameIndex,
+    positionX: marker.positionX,
+    positionY: marker.positionY,
+    data: mapData ? mapData(marker) : marker
+  }));
+}
+
+// src/components/ui/Button/index.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { Slot as Slot2 } from "radix-ui";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md",
+        "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "button";
+  return /* @__PURE__ */ jsx5(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/Item/index.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { Slot as Slot3 } from "radix-ui";
+
+// src/components/ui/Separator/index.tsx
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/Item/index.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var itemVariants = cva3(
+  "[a]:hover:bg-muted rounded-md border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50 border-transparent"
+      },
+      size: {
+        default: "gap-3.5 px-4 py-3.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot3.Root : "div";
+  return /* @__PURE__ */ jsx7(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = cva3(
+  "gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg]:size-4",
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: cn("gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none", className),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn("gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className),
+      ...props
+    }
+  );
+}
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(
+        "text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx7("div", { "data-slot": "item-actions", className: cn("gap-2 flex items-center", className), ...props });
+}
+
+// src/feature/Viewer360MarkerPin.tsx
+import { useState as useState2 } from "react";
+import { Trash2 } from "lucide-react";
+
+// src/constants/viewer360MarkerLabels.ts
+var defaultViewer360MarkerPinLabels = {
+  delete: "Remove marker"
+};
+
+// src/components/ui/Popover/index.tsx
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx8(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx8(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=start]:slide-in-from-end-2 data-[side=end]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--radix-popover-content-transform-origin) outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+// src/feature/Viewer360MarkerPin.tsx
+import { jsx as jsx9, jsxs } from "react/jsx-runtime";
+function Viewer360MarkerPin({
+  marker,
+  hotspot,
+  leftPercent,
+  topPercent,
+  onDelete,
+  isDeletePending = false,
+  renderTag,
+  classNames,
+  labels
+}) {
+  const [isOpen, setIsOpen] = useState2(false);
+  const deleteLabel = labels?.delete ?? defaultViewer360MarkerPinLabels.delete;
+  return /* @__PURE__ */ jsx9(Popover, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs(
+    Item,
+    {
+      size: "xs",
+      variant: "default",
+      className: cn(viewer360MarkerPinClassNames.root, classNames?.root, "w-auto border-transparent p-0"),
+      style: { left: `${leftPercent}%`, top: `${topPercent}%` },
+      onMouseEnter: () => setIsOpen(true),
+      onMouseLeave: () => setIsOpen(false),
+      children: [
+        /* @__PURE__ */ jsx9(
+          Badge,
+          {
+            variant: "destructive",
+            className: cn(viewer360MarkerPinClassNames.ping, classNames?.ping, "absolute size-6 border-0 bg-destructive opacity-60"),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx9(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+          Button,
+          {
+            type: "button",
+            variant: "destructive",
+            size: "icon-xs",
+            className: cn(
+              viewer360MarkerPinClassNames.dot,
+              classNames?.dot,
+              "size-4 min-h-4 min-w-4 rounded-full border-2 border-background bg-destructive p-0 shadow-md hover:scale-125 hover:bg-destructive"
+            ),
+            "aria-label": marker.title
+          }
+        ) }),
+        /* @__PURE__ */ jsx9(
+          PopoverContent,
+          {
+            className: cn(viewer360MarkerPinClassNames.tooltip, classNames?.tooltip, "w-64 p-0"),
+            side: "top",
+            align: "center",
+            onOpenAutoFocus: (event) => event.preventDefault(),
+            children: /* @__PURE__ */ jsxs(
+              Item,
+              {
+                size: "sm",
+                variant: "default",
+                className: cn(viewer360MarkerPinClassNames.tooltipHeader, classNames?.tooltipHeader, "w-full border-transparent"),
+                children: [
+                  /* @__PURE__ */ jsxs(ItemContent, { className: cn(viewer360MarkerPinClassNames.tooltipBody, classNames?.tooltipBody), children: [
+                    /* @__PURE__ */ jsx9(ItemTitle, { className: cn(viewer360MarkerPinClassNames.tooltipTitle, classNames?.tooltipTitle), children: marker.title }),
+                    renderTag?.({ marker, hotspot }),
+                    marker.description && /* @__PURE__ */ jsx9(ItemDescription, { className: cn(viewer360MarkerPinClassNames.tooltipDescription, classNames?.tooltipDescription), children: marker.description })
+                  ] }),
+                  onDelete && /* @__PURE__ */ jsx9(ItemActions, { children: /* @__PURE__ */ jsx9(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      className: classNames?.deleteButton,
+                      disabled: isDeletePending,
+                      "aria-label": deleteLabel,
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        onDelete(marker.id);
+                      },
+                      children: /* @__PURE__ */ jsx9(Trash2, { className: "size-4" })
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/feature/Viewer360HotspotOverlay.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Viewer360HotspotOverlay({
+  hotspot,
+  leftPercent,
+  topPercent,
+  hotspotPin,
+  renderHotspot,
+  onHotspotClick
+}) {
+  if (renderHotspot) {
+    return /* @__PURE__ */ jsx10(Item, { size: "xs", variant: "default", className: "pointer-events-auto w-auto border-transparent p-0", children: renderHotspot({ hotspot, leftPercent, topPercent }) });
+  }
+  if (hotspotPin) {
+    const marker = hotspotPin.getMarker?.(hotspot) ?? hotspotToViewer360Marker(hotspot);
+    return /* @__PURE__ */ jsx10(
+      Viewer360MarkerPin,
+      {
+        marker,
+        hotspot,
+        leftPercent,
+        topPercent,
+        onDelete: hotspotPin.onDelete,
+        isDeletePending: hotspotPin.deletingMarkerId === hotspot.id,
+        renderTag: hotspotPin.renderTag,
+        classNames: hotspotPin.classNames,
+        labels: hotspotPin.labels
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx10(
+    Button,
+    {
+      type: "button",
+      variant: "destructive",
+      size: "icon-xs",
+      className: cn(
+        "pointer-events-auto absolute z-30 size-4 min-h-4 min-w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background bg-destructive p-0 shadow-md hover:bg-destructive"
+      ),
+      style: { left: `${leftPercent}%`, top: `${topPercent}%` },
+      "aria-label": `Hotspot ${hotspot.id}`,
+      onClick: (event) => onHotspotClick?.(hotspot, event)
+    }
+  );
+}
+
+// src/components/ui/Label/index.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx11(
+    "label",
+    {
+      "data-slot": "label",
+      className: cn(
+        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/Spinner/index.tsx
+import { Loader2Icon } from "lucide-react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx12(Loader2Icon, { role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props });
+}
+
+// src/feature/Viewer360LoadingOverlay.tsx
+import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
+function Viewer360LoadingOverlay({ className, textClassName, label }) {
+  return /* @__PURE__ */ jsxs2(
+    Item,
+    {
+      size: "sm",
+      variant: "muted",
+      className: cn("pointer-events-none w-auto justify-center border-transparent bg-muted/80", className),
+      children: [
+        /* @__PURE__ */ jsx13(Spinner, { className: "size-5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx13(Label, { className: cn("font-normal text-muted-foreground", textClassName), children: label })
+      ]
+    }
+  );
+}
+
+// src/feature/Viewer360Toolbar.tsx
+import { Crosshair, Minus, Plus, RotateCcw, ZoomIn } from "lucide-react";
+import { Fragment, jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
+function Viewer360Toolbar({
+  showDragHint,
+  showHotspotModeControl,
+  showZoomControls,
+  showResetControl,
+  labels,
+  isHotspotMode,
+  zoom,
+  minZoom,
+  maxZoom,
+  isResetDisabled: isResetDisabled2,
+  onHotspotModeChange,
+  onZoomIn,
+  onZoomOut,
+  onResetView
+}) {
+  return /* @__PURE__ */ jsxs3(CardFooter, { className: cn(viewer360ClassNames.toolbar, "gap-2 border-t px-4 py-3 pt-3"), children: [
+    showDragHint && /* @__PURE__ */ jsx14(Label, { className: cn(viewer360ClassNames.dragHint, "font-normal text-muted-foreground"), children: labels.dragHint }),
+    /* @__PURE__ */ jsxs3("div", { className: viewer360ClassNames.controls, children: [
+      showHotspotModeControl && /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsxs3(Button, { variant: isHotspotMode ? "default" : "outline", size: "sm", onClick: () => onHotspotModeChange(!isHotspotMode), children: [
+          /* @__PURE__ */ jsx14(Crosshair, { className: "me-1.5 size-4" }),
+          labels.addHotspot
+        ] }),
+        /* @__PURE__ */ jsx14(Separator, { orientation: "vertical", className: cn(viewer360ClassNames.divider, "h-6") })
+      ] }),
+      showZoomControls && /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx14(Button, { variant: "outline", size: "icon-sm", disabled: zoom <= minZoom, "aria-label": labels.zoomOut, onClick: onZoomOut, children: /* @__PURE__ */ jsx14(Minus, { className: "size-4" }) }),
+        /* @__PURE__ */ jsxs3(Badge, { variant: "outline", className: cn(viewer360ClassNames.zoomDisplay, "h-8 gap-1 px-2 py-1"), children: [
+          /* @__PURE__ */ jsx14(ZoomIn, { className: "size-3 text-muted-foreground" }),
+          labels.zoom(Math.round(zoom * 100))
+        ] }),
+        /* @__PURE__ */ jsx14(Button, { variant: "outline", size: "icon-sm", disabled: zoom >= maxZoom, "aria-label": labels.zoomIn, onClick: onZoomIn, children: /* @__PURE__ */ jsx14(Plus, { className: "size-4" }) })
+      ] }),
+      showResetControl && /* @__PURE__ */ jsx14(Button, { variant: "outline", size: "icon-sm", disabled: isResetDisabled2, "aria-label": labels.resetView, onClick: onResetView, children: /* @__PURE__ */ jsx14(RotateCcw, { className: "size-4" }) })
+    ] })
+  ] });
+}
+
+// src/feature/Viewer360.tsx
+import { jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
+function Viewer360({
+  frames,
+  currentFrameIndex: controlledFrameIndex,
+  defaultFrameIndex = 0,
+  onFrameChange,
+  config,
+  className,
+  classNames,
+  style,
+  theme,
+  labels,
+  aspectRatio = "16 / 10",
+  showZoomControls = true,
+  showResetControl = true,
+  showFrameIndicator = true,
+  showDragHint = true,
+  showHotspotModeControl = false,
+  hotspotPin,
+  hotspots = [],
+  renderHotspot,
+  renderLoading,
+  renderFrameIndicator,
+  renderHotspotModeBanner,
+  renderToolbar,
+  onHotspotClick,
+  hotspotMode: controlledHotspotMode,
+  defaultHotspotMode = false,
+  onHotspotModeChange,
+  onHotspotAdd,
+  children
+}) {
+  const mergedLabels = useMemo2(() => mergeViewer360Labels(labels), [labels]);
+  const mergedClassNames = useMemo2(() => mergeViewer360ClassNames(classNames), [classNames]);
+  const themeStyle = useMemo2(() => buildViewer360ThemeStyle(theme), [theme]);
+  const [internalFrameIndex, setInternalFrameIndex] = useState3(defaultFrameIndex);
+  const [internalHotspotMode, setInternalHotspotMode] = useState3(defaultHotspotMode);
+  const currentFrameIndex = controlledFrameIndex ?? internalFrameIndex;
+  const hotspotMode = controlledHotspotMode ?? internalHotspotMode;
+  function handleFrameChange(index) {
+    if (controlledFrameIndex === void 0) {
+      setInternalFrameIndex(index);
+    }
+    onFrameChange?.(index);
+  }
+  function handleHotspotModeChange(active) {
+    if (controlledHotspotMode === void 0) {
+      setInternalHotspotMode(active);
+    }
+    onHotspotModeChange?.(active);
+  }
+  const {
+    canvasRef,
+    containerRef,
+    currentFrame,
+    currentFrameHotspots,
+    imagesLoaded,
+    isHotspotMode,
+    isResetDisabled: isResetDisabled2,
+    maxZoom,
+    minZoom,
+    viewerCursorClass,
+    zoom,
+    getHotspotScreenPosition,
+    handleCanvasClick,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handleWheel,
+    handleResetView,
+    handleZoomIn,
+    handleZoomOut
+  } = useViewer360({
+    frames,
+    hotspots,
+    currentFrameIndex,
+    onFrameChange: handleFrameChange,
+    config,
+    hotspotMode,
+    onHotspotAdd
+  });
+  useEffect2(() => {
+    if (controlledHotspotMode === void 0) return;
+    if (controlledHotspotMode !== internalHotspotMode) {
+      setInternalHotspotMode(controlledHotspotMode);
+    }
+  }, [controlledHotspotMode, internalHotspotMode]);
+  const frameLabel = currentFrame?.label ?? frames[currentFrameIndex]?.label;
+  const overlayProps = {
+    currentFrameIndex,
+    frameCount: frames.length,
+    frameLabel,
+    isHotspotMode,
+    labels: mergedLabels
+  };
+  const toolbarProps = {
+    zoom,
+    minZoom,
+    maxZoom,
+    isResetDisabled: isResetDisabled2,
+    isHotspotMode,
+    showHotspotModeControl,
+    showZoomControls,
+    showResetControl,
+    showDragHint,
+    labels: mergedLabels,
+    onZoomIn: handleZoomIn,
+    onZoomOut: handleZoomOut,
+    onResetView: handleResetView,
+    onHotspotModeChange: handleHotspotModeChange
+  };
+  const showDefaultToolbar = showZoomControls || showResetControl || showHotspotModeControl || showDragHint;
+  return /* @__PURE__ */ jsxs4(Card, { className: cn(mergedClassNames.root, "gap-0 py-0 shadow-none ring-0", className), style: { ...themeStyle, ...style }, children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref: containerRef,
+        className: cn(mergedClassNames.viewport, viewerCursorClass),
+        style: { aspectRatio },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerUp,
+        onWheel: handleWheel,
+        onClick: handleCanvasClick,
+        children: [
+          /* @__PURE__ */ jsx15("canvas", { ref: canvasRef, className: mergedClassNames.canvas }),
+          /* @__PURE__ */ jsxs4("div", { className: mergedClassNames.overlay, children: [
+            currentFrameHotspots.map((hotspot) => {
+              const position = getHotspotScreenPosition(hotspot);
+              return /* @__PURE__ */ jsx15(
+                Viewer360HotspotOverlay,
+                {
+                  hotspot,
+                  leftPercent: position.leftPercent,
+                  topPercent: position.topPercent,
+                  hotspotPin,
+                  renderHotspot,
+                  onHotspotClick
+                },
+                hotspot.id
+              );
+            }),
+            children
+          ] }),
+          !imagesLoaded && (renderLoading ? renderLoading() : /* @__PURE__ */ jsx15(
+            Viewer360LoadingOverlay,
+            {
+              className: mergedClassNames.loading,
+              textClassName: mergedClassNames.loadingText,
+              label: mergedLabels.loading
+            }
+          )),
+          showFrameIndicator && frames.length > 0 && (renderFrameIndicator ? renderFrameIndicator(overlayProps) : /* @__PURE__ */ jsx15(
+            Viewer360FrameIndicator,
+            {
+              className: mergedClassNames.frameIndicator,
+              label: mergedLabels.frameIndicator({
+                current: currentFrameIndex + 1,
+                total: frames.length,
+                label: frameLabel
+              })
+            }
+          )),
+          isHotspotMode && onHotspotAdd && (renderHotspotModeBanner ? renderHotspotModeBanner({ labels: mergedLabels }) : /* @__PURE__ */ jsx15(Viewer360AddModeBanner, { className: mergedClassNames.hotspotModeBanner, label: mergedLabels.hotspotModeActive }))
+        ]
+      }
+    ),
+    renderToolbar ? renderToolbar(toolbarProps) : showDefaultToolbar ? /* @__PURE__ */ jsx15(Viewer360Toolbar, { ...toolbarProps }) : null
+  ] });
+}
+
+// src/constants/viewer360Config.ts
+var viewer360Config = {
+  minZoom: 1,
+  maxZoom: 3,
+  zoomStep: 0.15,
+  dragSensitivity: 8,
+  autoRotate: false,
+  autoRotateIntervalMs: 100,
+  autoRotateDirection: "forward"
+};
+var defaultViewer360Config = viewer360Config;
+export {
+  Button,
+  Viewer360,
+  Viewer360AddModeBanner,
+  Viewer360FrameIndicator,
+  Viewer360LoadingOverlay,
+  Viewer360MarkerPin,
+  Viewer360Toolbar,
+  applyWheelZoom,
+  buttonVariants,
+  clampFrameIndex,
+  clampZoom,
+  cn,
+  computeDragFrameIndex,
+  computeHotspotPositionFromClick,
+  computeHotspotScreenPosition,
+  computeViewerImageLayout,
+  computeViewerPanOffset,
+  defaultViewer360ClassNames,
+  defaultViewer360Config,
+  defaultViewer360Labels,
+  defaultViewer360MarkerPinClassNames,
+  defaultViewer360MarkerPinLabels,
+  drawFrameOnCanvas,
+  filterHotspotsByFrame,
+  getFramesSignature,
+  getViewerCursorClass,
+  hasLoadedViewerFrame,
+  hotspotToViewer360Marker,
+  isResetDisabled,
+  preloadFrameImage,
+  preloadViewerFrames,
+  resolveViewer360Config,
+  stepZoomIn,
+  stepZoomOut,
+  toViewer360Hotspots,
+  useViewer360,
+  viewer360ClassNames,
+  viewer360MarkerPinClassNames
+};
+//# sourceMappingURL=index.js.map