@mmmmzxe/react-360-viewer 0.1.2 → 0.1.4

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { ReactNode, CSSProperties, MouseEvent, JSX, RefObject, PointerEvent, WheelEvent } from 'react';
+import { ReactNode, MouseEvent, CSSProperties, JSX, RefObject, PointerEvent, WheelEvent } from 'react';
 import { ClassValue } from 'clsx';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -104,6 +104,7 @@ type Viewer360MarkerPinProps<TData = unknown> = {
     topPercent: number;
     onDelete?: (id: string) => void;
     isDeletePending?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     renderTag?: (props: Viewer360MarkerPinRenderProps<TData>) => ReactNode;
     classNames?: Viewer360MarkerPinClassNames;
     labels?: Viewer360MarkerPinLabels;
@@ -230,7 +231,7 @@ type Viewer360LoadingOverlayProps = {
 };
 declare function Viewer360LoadingOverlay({ className, textClassName, label }: Viewer360LoadingOverlayProps): JSX.Element;
 
-declare function Viewer360MarkerPin<TData = unknown>({ marker, hotspot, leftPercent, topPercent, onDelete, isDeletePending, renderTag, classNames, labels, }: Viewer360MarkerPinProps<TData>): JSX.Element;
+declare function Viewer360MarkerPin<TData = unknown>({ marker, hotspot, leftPercent, topPercent, onDelete, isDeletePending, onClick, renderTag, classNames, labels, }: Viewer360MarkerPinProps<TData>): JSX.Element;
 
 type Viewer360ToolbarProps = Viewer360ToolbarRenderProps;
 declare function Viewer360Toolbar({ showDragHint, showHotspotModeControl, showZoomControls, showResetControl, labels, isHotspotMode, zoom, minZoom, maxZoom, isResetDisabled, onHotspotModeChange, onZoomIn, onZoomOut, onResetView, }: Viewer360ToolbarProps): JSX.Element;

package/dist/index.js

@@ -1,13 +1,13 @@
 "use client";
 
 // src/feature/Viewer360.tsx
-import { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } 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}`,
+  frameIndicator: ({ current, total, label }) => label ? `${label} \xB7 ${current} / ${total}` : `${current} / ${total}`,
   zoom: (percent) => `${percent}%`,
   hotspotModeActive: "Click on the image to place a hotspot",
   addHotspot: "Add hotspot",
@@ -25,7 +25,7 @@ var viewer360ClassNames = {
   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",
+  frameIndicator: "pointer-events-none absolute bottom-4 start-4 z-20 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",
@@ -577,73 +577,20 @@ function toViewer360Hotspots(markers, mapData) {
   }));
 }
 
-// src/components/ui/Button/index.tsx
+// src/components/ui/Item/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";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Separator({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     SeparatorPrimitive.Root,
     {
       "data-slot": "separator",
@@ -659,8 +606,8 @@ function Separator({
 }
 
 // src/components/ui/Item/index.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-var itemVariants = cva3(
+import { jsx as jsx6 } from "react/jsx-runtime";
+var itemVariants = cva2(
   "[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: {
@@ -688,8 +635,8 @@ function Item({
   asChild = false,
   ...props
 }) {
-  const Comp = asChild ? Slot3.Root : "div";
-  return /* @__PURE__ */ jsx7(
+  const Comp = asChild ? Slot2.Root : "div";
+  return /* @__PURE__ */ jsx6(
     Comp,
     {
       "data-slot": "item",
@@ -700,7 +647,7 @@ function Item({
     }
   );
 }
-var itemMediaVariants = cva3(
+var itemMediaVariants = cva2(
   "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: {
@@ -716,7 +663,7 @@ var itemMediaVariants = cva3(
   }
 );
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "item-content",
@@ -726,7 +673,7 @@ function ItemContent({ className, ...props }) {
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "item-title",
@@ -736,7 +683,7 @@ function ItemTitle({ className, ...props }) {
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "p",
     {
       "data-slot": "item-description",
@@ -749,11 +696,10 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ jsx7("div", { "data-slot": "item-actions", className: cn("gap-2 flex items-center", className), ...props });
+  return /* @__PURE__ */ jsx6("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
@@ -761,38 +707,61 @@ 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({
+// src/components/ui/Button/index.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { Slot as Slot3 } from "radix-ui";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var buttonVariants = cva3(
+  "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,
-  align = "center",
-  sideOffset = 4,
+  variant = "default",
+  size = "default",
+  asChild = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
-    PopoverPrimitive.Content,
+  const Comp = asChild ? Slot3.Root : "button";
+  return /* @__PURE__ */ jsx7(
+    Comp,
     {
-      "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
-      ),
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
       ...props
     }
-  ) });
+  );
 }
 
 // src/feature/Viewer360MarkerPin.tsx
-import { jsx as jsx9, jsxs } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
 function Viewer360MarkerPin({
   marker,
   hotspot,
@@ -800,23 +769,26 @@ function Viewer360MarkerPin({
   topPercent,
   onDelete,
   isDeletePending = false,
+  onClick,
   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(
+  const showTooltip = Boolean(marker.title || marker.description || onDelete || renderTag);
+  return /* @__PURE__ */ jsxs(
     Item,
     {
       size: "xs",
       variant: "default",
-      className: cn(viewer360MarkerPinClassNames.root, classNames?.root, "w-auto border-transparent p-0"),
+      className: cn(
+        viewer360MarkerPinClassNames.root,
+        classNames?.root,
+        "group/marker w-auto border-transparent p-0"
+      ),
       style: { left: `${leftPercent}%`, top: `${topPercent}%` },
-      onMouseEnter: () => setIsOpen(true),
-      onMouseLeave: () => setIsOpen(false),
       children: [
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx8(
           Badge,
           {
             variant: "destructive",
@@ -824,7 +796,7 @@ function Viewer360MarkerPin({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx9(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx8(
           Button,
           {
             type: "button",
@@ -835,16 +807,18 @@ function Viewer360MarkerPin({
               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
+            "aria-label": marker.title,
+            onClick
           }
-        ) }),
-        /* @__PURE__ */ jsx9(
-          PopoverContent,
+        ),
+        showTooltip && /* @__PURE__ */ jsx8(
+          "div",
           {
-            className: cn(viewer360MarkerPinClassNames.tooltip, classNames?.tooltip, "w-64 p-0"),
-            side: "top",
-            align: "center",
-            onOpenAutoFocus: (event) => event.preventDefault(),
+            className: cn(
+              viewer360MarkerPinClassNames.tooltip,
+              classNames?.tooltip,
+              "pointer-events-none opacity-0 transition-opacity duration-150 group-hover/marker:pointer-events-auto group-hover/marker:opacity-100 group-focus-within/marker:pointer-events-auto group-focus-within/marker:opacity-100"
+            ),
             children: /* @__PURE__ */ jsxs(
               Item,
               {
@@ -853,11 +827,11 @@ function Viewer360MarkerPin({
                 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 }),
+                    /* @__PURE__ */ jsx8(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 })
+                    marker.description && /* @__PURE__ */ jsx8(ItemDescription, { className: cn(viewer360MarkerPinClassNames.tooltipDescription, classNames?.tooltipDescription), children: marker.description })
                   ] }),
-                  onDelete && /* @__PURE__ */ jsx9(ItemActions, { children: /* @__PURE__ */ jsx9(
+                  onDelete && /* @__PURE__ */ jsx8(ItemActions, { children: /* @__PURE__ */ jsx8(
                     Button,
                     {
                       variant: "ghost",
@@ -869,7 +843,7 @@ function Viewer360MarkerPin({
                         event.stopPropagation();
                         onDelete(marker.id);
                       },
-                      children: /* @__PURE__ */ jsx9(Trash2, { className: "size-4" })
+                      children: /* @__PURE__ */ jsx8(Trash2, { className: "size-4" })
                     }
                   ) })
                 ]
@@ -879,11 +853,11 @@ function Viewer360MarkerPin({
         )
       ]
     }
-  ) });
+  );
 }
 
 // src/feature/Viewer360HotspotOverlay.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Viewer360HotspotOverlay({
   hotspot,
   leftPercent,
@@ -893,45 +867,30 @@ function Viewer360HotspotOverlay({
   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__ */ jsx9(Item, { size: "xs", variant: "default", className: "pointer-events-auto w-auto border-transparent p-0", children: renderHotspot({ hotspot, leftPercent, topPercent }) });
   }
-  return /* @__PURE__ */ jsx10(
-    Button,
+  const marker = hotspotPin?.getMarker?.(hotspot) ?? hotspotToViewer360Marker(hotspot);
+  return /* @__PURE__ */ jsx9(
+    Viewer360MarkerPin,
     {
-      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)
+      marker,
+      hotspot,
+      leftPercent,
+      topPercent,
+      onDelete: hotspotPin?.onDelete,
+      isDeletePending: hotspotPin?.deletingMarkerId === hotspot.id,
+      renderTag: hotspotPin?.renderTag,
+      classNames: hotspotPin?.classNames,
+      labels: hotspotPin?.labels,
+      onClick: onHotspotClick ? (event) => onHotspotClick(hotspot, event) : void 0
     }
   );
 }
 
 // src/components/ui/Label/index.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(
     "label",
     {
       "data-slot": "label",
@@ -946,13 +905,13 @@ function Label({ className, ...props }) {
 
 // src/components/ui/Spinner/index.tsx
 import { Loader2Icon } from "lucide-react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } 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 });
+  return /* @__PURE__ */ jsx11(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";
+import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
 function Viewer360LoadingOverlay({ className, textClassName, label }) {
   return /* @__PURE__ */ jsxs2(
     Item,
@@ -961,8 +920,8 @@ function Viewer360LoadingOverlay({ className, textClassName, label }) {
       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 })
+        /* @__PURE__ */ jsx12(Spinner, { className: "size-5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx12(Label, { className: cn("font-normal text-muted-foreground", textClassName), children: label })
       ]
     }
   );
@@ -970,7 +929,7 @@ function Viewer360LoadingOverlay({ className, textClassName, 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";
+import { Fragment, jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
 function Viewer360Toolbar({
   showDragHint,
   showHotspotModeControl,
@@ -988,30 +947,30 @@ function Viewer360Toolbar({
   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 }),
+    showDragHint && /* @__PURE__ */ jsx13(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" }),
+          /* @__PURE__ */ jsx13(Crosshair, { className: "me-1.5 size-4" }),
           labels.addHotspot
         ] }),
-        /* @__PURE__ */ jsx14(Separator, { orientation: "vertical", className: cn(viewer360ClassNames.divider, "h-6") })
+        /* @__PURE__ */ jsx13(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__ */ jsx13(Button, { variant: "outline", size: "icon-sm", disabled: zoom <= minZoom, "aria-label": labels.zoomOut, onClick: onZoomOut, children: /* @__PURE__ */ jsx13(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" }),
+          /* @__PURE__ */ jsx13(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" }) })
+        /* @__PURE__ */ jsx13(Button, { variant: "outline", size: "icon-sm", disabled: zoom >= maxZoom, "aria-label": labels.zoomIn, onClick: onZoomIn, children: /* @__PURE__ */ jsx13(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" }) })
+      showResetControl && /* @__PURE__ */ jsx13(Button, { variant: "outline", size: "icon-sm", disabled: isResetDisabled2, "aria-label": labels.resetView, onClick: onResetView, children: /* @__PURE__ */ jsx13(RotateCcw, { className: "size-4" }) })
     ] })
   ] });
 }
 
 // src/feature/Viewer360.tsx
-import { jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 function Viewer360({
   frames,
   currentFrameIndex: controlledFrameIndex,
@@ -1046,8 +1005,8 @@ function Viewer360({
   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 [internalFrameIndex, setInternalFrameIndex] = useState2(defaultFrameIndex);
+  const [internalHotspotMode, setInternalHotspotMode] = useState2(defaultHotspotMode);
   const currentFrameIndex = controlledFrameIndex ?? internalFrameIndex;
   const hotspotMode = controlledHotspotMode ?? internalHotspotMode;
   function handleFrameChange(index) {
@@ -1137,11 +1096,11 @@ function Viewer360({
         onWheel: handleWheel,
         onClick: handleCanvasClick,
         children: [
-          /* @__PURE__ */ jsx15("canvas", { ref: canvasRef, className: mergedClassNames.canvas }),
+          /* @__PURE__ */ jsx14("canvas", { ref: canvasRef, className: mergedClassNames.canvas }),
           /* @__PURE__ */ jsxs4("div", { className: mergedClassNames.overlay, children: [
             currentFrameHotspots.map((hotspot) => {
               const position = getHotspotScreenPosition(hotspot);
-              return /* @__PURE__ */ jsx15(
+              return /* @__PURE__ */ jsx14(
                 Viewer360HotspotOverlay,
                 {
                   hotspot,
@@ -1156,7 +1115,7 @@ function Viewer360({
             }),
             children
           ] }),
-          !imagesLoaded && (renderLoading ? renderLoading() : /* @__PURE__ */ jsx15(
+          !imagesLoaded && (renderLoading ? renderLoading() : /* @__PURE__ */ jsx14(
             Viewer360LoadingOverlay,
             {
               className: mergedClassNames.loading,
@@ -1164,7 +1123,7 @@ function Viewer360({
               label: mergedLabels.loading
             }
           )),
-          showFrameIndicator && frames.length > 0 && (renderFrameIndicator ? renderFrameIndicator(overlayProps) : /* @__PURE__ */ jsx15(
+          showFrameIndicator && frames.length > 0 && (renderFrameIndicator ? renderFrameIndicator(overlayProps) : /* @__PURE__ */ jsx14(
             Viewer360FrameIndicator,
             {
               className: mergedClassNames.frameIndicator,
@@ -1175,11 +1134,11 @@ function Viewer360({
               })
             }
           )),
-          isHotspotMode && onHotspotAdd && (renderHotspotModeBanner ? renderHotspotModeBanner({ labels: mergedLabels }) : /* @__PURE__ */ jsx15(Viewer360AddModeBanner, { className: mergedClassNames.hotspotModeBanner, label: mergedLabels.hotspotModeActive }))
+          isHotspotMode && onHotspotAdd && (renderHotspotModeBanner ? renderHotspotModeBanner({ labels: mergedLabels }) : /* @__PURE__ */ jsx14(Viewer360AddModeBanner, { className: mergedClassNames.hotspotModeBanner, label: mergedLabels.hotspotModeActive }))
         ]
       }
     ),
-    renderToolbar ? renderToolbar(toolbarProps) : showDefaultToolbar ? /* @__PURE__ */ jsx15(Viewer360Toolbar, { ...toolbarProps }) : null
+    renderToolbar ? renderToolbar(toolbarProps) : showDefaultToolbar ? /* @__PURE__ */ jsx14(Viewer360Toolbar, { ...toolbarProps }) : null
   ] });
 }