@mmmmzxe/react-360-viewer 0.1.13 → 0.1.14

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 maryemmostafa24
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mmmmzxe/react-360-viewer",
-    "version": "0.1.13",
+    "version": "0.1.14",
     "description": "A standalone, configurable 360° image viewer for React with drag rotation, zoom, hotspots, and auto-rotate support.",
     "license": "MIT",
     "type": "module",
@@ -26,8 +26,8 @@
     ],
     "files": [
         "dist",
-        "src",
-        "README.md"
+        "README.md",
+        "LICENSE"
     ],
     "scripts": {
         "build": "tsup && npm run build:css && node scripts/bundle-inject-styles.mjs",

package/src/components/ui/Badge/index.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import type { JSX } from 'react';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Slot } from 'radix-ui';
-
-import { cn } from '@/components/utils';
-
-const badgeVariants = cva(
-    'h-5 gap-1 rounded-full 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:
-                    'rounded-full border-transparent bg-amber-500 px-2.5 text-white shadow-none [a]:hover:bg-amber-600 [&>svg]:text-white',
-                success: 'bg-green-600 text-white hover:bg-green-700',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-        },
-    }
-);
-
-function Badge({
-    className,
-    variant = 'default',
-    asChild = false,
-    ...props
-}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }): JSX.Element {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const Comp = asChild ? Slot.Root : 'span';
-
-    return <Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

package/src/components/ui/Button/index.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import type { JSX } from 'react';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Slot } from 'radix-ui';
-
-import { cn } from '@/components/utils';
-
-const buttonVariants = cva(
-    '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-lg 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-md 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-md 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-md in-data-[slot=button-group]:rounded-md',
-                'icon-sm': 'size-8 rounded-md 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
-}: React.ComponentProps<'button'> &
-    VariantProps<typeof buttonVariants> & {
-        asChild?: boolean;
-    }): JSX.Element {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const Comp = asChild ? Slot.Root : 'button';
-
-    return (
-        <Comp
-            data-slot="button"
-            data-variant={variant}
-            data-size={size}
-            className={cn(buttonVariants({ variant, size, className }))}
-            {...props}
-        />
-    );
-}
-
-export { Button, buttonVariants };

package/src/components/ui/Card/index.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import type { JSX } from 'react';
-
-import { cn } from '@/components/utils';
-
-function Card({ className, size = 'default', ...props }: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }): JSX.Element {
-    return (
-        <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 CardHeader({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {
-    return (
-        <div
-            data-slot="card-header"
-            className={cn(
-                'gap-0.5 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]',
-                className
-            )}
-            {...props}
-        />
-    );
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {
-    return (
-        <div
-            data-slot="card-title"
-            className={cn('text-lg leading-normal font-semibold group-data-[size=sm]/card:text-sm', className)}
-            {...props}
-        />
-    );
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {
-    return <div data-slot="card-description" className={cn('text-muted-foreground text-xs font-medium', className)} {...props} />;
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {
-    return (
-        <div
-            data-slot="card-action"
-            className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
-            {...props}
-        />
-    );
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {
-    return <div data-slot="card-content" className={cn('px-6 group-data-[size=sm]/card:px-4', className)} {...props} />;
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {
-    return (
-        <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}
-        />
-    );
-}
-
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/src/components/ui/Item/index.tsx

@@ -1,136 +0,0 @@
-import * as React from 'react';
-import type { JSX } from 'react';
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Slot } from 'radix-ui';
-
-import { Separator } from '@/components/ui/Separator';
-import { cn } from '@/components/utils';
-
-function ItemGroup({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {
-    return (
-        <div
-            role="list"
-            data-slot="item-group"
-            className={cn('gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col', className)}
-            {...props}
-        />
-    );
-}
-
-function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): JSX.Element {
-    return <Separator data-slot="item-separator" orientation="horizontal" className={cn('my-2', className)} {...props} />;
-}
-
-const itemVariants = cva(
-    '[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
-}: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & { asChild?: boolean }): JSX.Element {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const Comp = asChild ? Slot.Root : 'div';
-    return (
-        <Comp
-            data-slot="item"
-            data-variant={variant}
-            data-size={size}
-            className={cn(itemVariants({ variant, size, className }))}
-            {...props}
-        />
-    );
-}
-
-const itemMediaVariants = cva(
-    '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 ItemMedia({
-    className,
-    variant = 'default',
-    ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>): JSX.Element {
-    return <div data-slot="item-media" data-variant={variant} className={cn(itemMediaVariants({ variant, className }))} {...props} />;
-}
-
-function ItemContent({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {
-    return (
-        <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 }: React.ComponentProps<'div'>): JSX.Element {
-    return (
-        <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 }: React.ComponentProps<'p'>): JSX.Element {
-    return (
-        <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 }: React.ComponentProps<'div'>): JSX.Element {
-    return <div data-slot="item-actions" className={cn('gap-2 flex items-center', className)} {...props} />;
-}
-
-function ItemHeader({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {
-    return <div data-slot="item-header" className={cn('gap-2 flex basis-full items-center justify-between', className)} {...props} />;
-}
-
-function ItemFooter({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {
-    return <div data-slot="item-footer" className={cn('gap-2 flex basis-full items-center justify-between', className)} {...props} />;
-}
-
-export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter };

package/src/components/ui/Label/index.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { cn } from '@/components/utils';
-
-function Label({ className, ...props }: React.ComponentProps<'label'>): React.ReactNode {
-    return (
-        <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}
-        />
-    );
-}
-
-export { Label };

package/src/components/ui/Popover/index.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import type { JSX } from 'react';
-
-import { Popover as PopoverPrimitive } from 'radix-ui';
-
-import { cn } from '@/components/utils';
-
-function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): JSX.Element {
-    return <PopoverPrimitive.Root data-slot="popover" {...props} />;
-}
-
-function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): JSX.Element {
-    return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
-}
-
-function PopoverContent({
-    className,
-    align = 'center',
-    sideOffset = 4,
-    ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>): JSX.Element {
-    return (
-        <PopoverPrimitive.Portal>
-            <PopoverPrimitive.Content
-                data-slot="popover-content"
-                align={align}
-                sideOffset={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}
-            />
-        </PopoverPrimitive.Portal>
-    );
-}
-
-function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): JSX.Element {
-    return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
-}
-
-function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>): JSX.Element {
-    return <div data-slot="popover-header" className={cn('flex flex-col gap-1 text-sm', className)} {...props} />;
-}
-
-function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>): JSX.Element {
-    return <div data-slot="popover-title" className={cn('font-medium', className)} {...props} />;
-}
-
-function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>): JSX.Element {
-    return <p data-slot="popover-description" className={cn('text-muted-foreground', className)} {...props} />;
-}
-
-export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/src/components/ui/Separator/index.tsx

@@ -1,30 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import type { JSX } from 'react';
-
-import { Separator as SeparatorPrimitive } from 'radix-ui';
-
-import { cn } from '@/components/utils';
-
-function Separator({
-    className,
-    orientation = 'horizontal',
-    decorative = true,
-    ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>): JSX.Element {
-    return (
-        <SeparatorPrimitive.Root
-            data-slot="separator"
-            decorative={decorative}
-            orientation={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}
-        />
-    );
-}
-
-export { Separator };

package/src/components/ui/Spinner/index.tsx

@@ -1,11 +0,0 @@
-import type { JSX } from 'react';
-
-import { Loader2Icon } from 'lucide-react';
-
-import { cn } from '@/components/utils';
-
-function Spinner({ className, ...props }: React.ComponentProps<'svg'>): JSX.Element {
-    return <Loader2Icon role="status" aria-label="Loading" className={cn('size-4 animate-spin', className)} {...props} />;
-}
-
-export { Spinner };

package/src/components/utils/index.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
-}

package/src/constants/viewer360ClassNames.ts

@@ -1,42 +0,0 @@
-import type { Viewer360ClassNames } from '../types/Viewer360Props';
-import type { Viewer360MarkerPinClassNames } from '../types/Viewer360Marker';
-
-export const viewer360ClassNames: Required<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 whitespace-nowrap',
-    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',
-};
-
-export const viewer360MarkerPinClassNames: Required<Viewer360MarkerPinClassNames> = {
-    root: 'pointer-events-auto absolute z-30 -translate-x-1/2 -translate-y-1/2',
-    ping: 'pointer-events-none absolute inset-0 inline-flex animate-ping rounded-full bg-destructive opacity-75',
-    dot: 'relative z-10 inline-flex size-4 min-h-4 min-w-4 shrink-0 rounded-full border-2 border-background bg-destructive p-0 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: '',
-};
-
-/** @deprecated Use `viewer360ClassNames` */
-export const defaultViewer360ClassNames = viewer360ClassNames;
-
-/** @deprecated Use `viewer360MarkerPinClassNames` */
-export const defaultViewer360MarkerPinClassNames = viewer360MarkerPinClassNames;

package/src/constants/viewer360Config.ts

@@ -1,11 +0,0 @@
-export const viewer360Config = {
-    minZoom: 1,
-    maxZoom: 3,
-    zoomStep: 0.15,
-    dragSensitivity: 8,
-    autoRotate: false,
-    autoRotateIntervalMs: 100,
-    autoRotateDirection: 'forward' as const,
-};
-
-export const defaultViewer360Config = viewer360Config;

package/src/constants/viewer360Labels.ts

@@ -1,14 +0,0 @@
-import type { Viewer360Labels } from '../types/Viewer360Props';
-
-export const defaultViewer360Labels: Required<Viewer360Labels> = {
-    loading: 'Loading images…',
-    dragHint: 'Drag to rotate • 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',
-};

package/src/constants/viewer360MarkerLabels.ts

@@ -1,3 +0,0 @@
-export const defaultViewer360MarkerPinLabels = {
-    delete: 'Remove marker',
-} as const;

package/src/feature/Viewer360.test.tsx

@@ -1,47 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import { Viewer360 } from './Viewer360';
-import type { Viewer360Frame } from '../types';
-
-const frames: Viewer360Frame[] = [
-    { id: '1', src: 'https://example.com/1.jpg', label: 'Front' },
-    { id: '2', src: 'https://example.com/2.jpg', label: 'Side' },
-];
-
-describe('Viewer360', () => {
-    it('renders loading state and toolbar labels', () => {
-        render(
-            <Viewer360
-                frames={frames}
-                labels={{
-                    loading: 'Loading test frames',
-                    dragHint: 'Drag test hint',
-                }}
-            />
-        );
-
-        expect(screen.getByText('Loading test frames')).toBeInTheDocument();
-        expect(screen.getByText('Drag test hint')).toBeInTheDocument();
-    });
-
-    it('calls onFrameChange from auto-rotate when enabled', () => {
-        vi.useFakeTimers();
-
-        const onFrameChange = vi.fn();
-
-        render(
-            <Viewer360
-                frames={frames}
-                currentFrameIndex={0}
-                onFrameChange={onFrameChange}
-                config={{ autoRotate: true, autoRotateIntervalMs: 50 }}
-            />
-        );
-
-        vi.advanceTimersByTime(60);
-        expect(onFrameChange).toHaveBeenCalledWith(1);
-
-        vi.useRealTimers();
-    });
-});