### Complete PanoramaViewer Configuration with Hotspots

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/usage-guide.md

This example shows a comprehensive setup including various hotspot types (info, scene, poi) and detailed viewer properties. Ensure all necessary props and hotspot configurations are correctly defined.

```typescript
import React from 'react';
import PanoramaViewer, { HotspotProps, PanoramaViewerProps } from 'react-pannellum-next';

function CompleteExample() {
  const hotspots: HotspotProps[] = [
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Front View',
      cssClass: 'primary-hotspot',
      onClick: () => console.log('Front hotspot clicked'),
    },
    {
      pitch: 45,
      yaw: 90,
      type: 'scene',
      text: 'Next Scene',
      cssClass: 'secondary-hotspot',
      URL: '/scene2.jpg',
    },
    {
      pitch: -30,
      yaw: 180,
      type: 'poi',
      text: 'Point of Interest',
      cssClass: 'poi-hotspot',
    },
  ];

  const viewerProps: PanoramaViewerProps = {
    imagePath: '/panorama.jpg',
    hotSpots: hotspots,
    autoLoad: true,
    autoRotate: 1.5,
    compass: true,
    showControls: true,
    width: '100%',
    height: '600px',
    hotSpotDebug: false,
  };

  return <PanoramaViewer {...viewerProps} />;
}

export default CompleteExample;
```

--------------------------------

### Install react-pannellum-next with npm

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/readme.md

Install the react-pannellum-next package using npm.

```bash
npm install --save react-pannellum-next
```

--------------------------------

### Install react-pannellum-next with yarn

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/readme.md

Install the react-pannellum-next package using yarn.

```bash
yarn add react-pannellum-next
```

--------------------------------

### Run Development Server

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/REFERENCE-SUMMARY.md

Starts the development server with hot-reloading enabled for rapid development.

```bash
npm run dev
```

--------------------------------

### Install react-pannellum-next

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/integration-guide.md

Install the package using npm, yarn, or pnpm. Ensure React 18.2.0+ and React DOM 18.2.0+ are installed as peer dependencies.

```bash
# Using npm
npm install react-pannellum-next

# Using yarn
yarn add react-pannellum-next

# Using pnpm
pnpm add react-pannellum-next
```

--------------------------------

### Create Custom Hotspot Tooltips

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/usage-guide.md

This example shows how to create custom tooltips for hotspots using the `createTooltipFunc` prop. This allows for advanced styling and dynamic content within tooltips.

```typescript
import PanoramaViewer, { HotspotProps } from 'react-pannellum-next';

function CustomTooltipExample() {
  const hotspots: HotspotProps[] = [
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Default tooltip',
      createTooltipFunc: undefined, // Use default
    },
    {
      pitch: 30,
      yaw: 90,
      type: 'info',
      text: 'Custom tooltip',
      createTooltipFunc: (hotspot) => {
        const div = document.createElement('div');
        div.style.cssText = `
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          padding: 12px 16px;
          border-radius: 8px;
          font-weight: bold;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        `;
        div.textContent = hotspot.text || 'Custom Hotspot';
        return div;
      },
    },
  ];

  return (
    <PanoramaViewer
      imagePath="/panorama.jpg"
      hotSpots={hotspots}
      autoLoad={true}
      width="100%"
      height="600px"
    />
  );
}

export default CustomTooltipExample;
```

--------------------------------

### Minimal PanoramaViewer Setup

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/usage-guide.md

Use this snippet for the simplest implementation, requiring only an image path. It enables default settings like autoload, visible compass, zoom controls, and keyboard shortcuts.

```typescript
import PanoramaViewer from 'react-pannellum-next';

function MyApp() {
  return (
    <PanoramaViewer imagePath="/path/to/panorama.jpg" />
  );
}
```

--------------------------------

### Example PanoramaViewer Usage

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/module-reference.md

Demonstrates how to use the PanoramaViewer component with an equirectangular image, configured hotspots, debug mode, and click handlers.

```typescript
import React from 'react';
import image from './images/alma.jpg';
import PanoramaViewer from './PanoramaViewer';

const App: React.FC = () => {
  return <PanoramaViewer
    autoLoad
    imagePath={image}
    hotSpotDebug
    hotSpots={[
      {
        yaw: -50,
        pitch: 4,
        type: 'info',
        cssClass: 'custom-hotspot',
        onClick: () => console.log('Hotspot clicked!')
      }
    ]}
  />;
};

export default App;
```

--------------------------------

### Example Hotspot Configuration

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/configuration.md

Defines an array of hotspot objects, each with specific properties for type, position, and display information. Includes examples for 'info', 'scene', and 'poi' types.

```typescript
const hotspots: HotspotProps[] = [
  {
    pitch: 0,
    yaw: 0,
    type: 'info',
    text: 'Starting location',
    cssClass: 'highlight',
    onClick: () => console.log('Hotspot clicked'),
  },
  {
    pitch: 30,
    yaw: 90,
    type: 'scene',
    URL: '/next-scene.jpg',
    text: 'Click to view next scene',
  },
  {
    pitch: -45,
    yaw: 180,
    type: 'poi',
    text: 'Point of interest',
    createTooltipFunc: (hotspot) => {
      const el = document.createElement('div');
      el.innerHTML = '<strong>Custom Tooltip</strong>';
      return el;
    },
  },
];
```

--------------------------------

### Basic React App Setup

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/QUICK-START.md

Integrate the PanoramaViewer component into a basic React application. Set the image path and enable auto-loading.

```typescript
import PanoramaViewer from 'react-pannellum-next';

function App() {
  return (
    <PanoramaViewer
      imagePath="/my-panorama.jpg"
      autoLoad={true}
      width="100%"
      height="100vh"
    />
  );
}
```

--------------------------------

### Example Hotspot Array

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/types.md

Illustrates how to create an array of `HotspotProps` objects for use with the `PanoramaViewer` component. Includes examples of basic and scene-type hotspots with custom styling and click handlers.

```typescript
const hotspots: HotspotProps[] = [
  {
    pitch: 0,
    yaw: 0,
    type: 'info',
    text: 'Starting point',
    cssClass: 'custom-hotspot',
    onClick: () => console.log('Clicked!'),
  },
  {
    pitch: 45,
    yaw: 180,
    type: 'scene',
    URL: '/scene2.jpg',
    text: 'Go to next scene',
  },
];
```

--------------------------------

### Example Usage of PanoramaViewer Component

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/types.md

Demonstrates how to import and use the PanoramaViewer component with various props in a React functional component. Ensure 'react-pannellum-next' is installed and imported correctly.

```typescript
import React from 'react';
import PanoramaViewer, { PanoramaViewerProps, HotspotProps } from 'react-pannellum-next';

const MyViewer: React.FC<PanoramaViewerProps> = () => {
  const props: PanoramaViewerProps = {
    imagePath: '/panorama.jpg',
    hotSpots: [
      {
        pitch: 0,
        yaw: 0,
        type: 'info',
        text: 'Welcome',
      },
    ],
    autoLoad: true,
    autoRotate: 2,
    compass: true,
    showControls: true,
    width: '100%',
    height: '600px',
    hotSpotDebug: false,
  };

  return <PanoramaViewer {...props} />;
};

export default MyViewer;
```

--------------------------------

### Next.js (App Router) Setup

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/QUICK-START.md

Use dynamic import with 'use client' directive for the PanoramaViewer in Next.js App Router to ensure client-side rendering. Set ssr to false.

```typescript
'use client';

import dynamic from 'next/dynamic';

const PanoramaViewer = dynamic(
  () => import('react-pannellum-next'),
  { ssr: false }
);

export default function Page() {
  return <PanoramaViewer imagePath="/panorama.jpg" />;
}
```

--------------------------------

### Next.js App Router Integration

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/usage-guide.md

This example shows integration with the Next.js App Router. It also uses dynamic import and configures a hotspot with an onClick handler and custom CSS class.

```typescript
// app/panorama/page.tsx
'use client';

import dynamic from 'next/dynamic';
import { HotspotProps } from 'react-pannellum-next';

const PanoramaViewer = dynamic(
  () => import('react-pannellum-next'),
  { ssr: false }
);

export default function PanoramaPage() {
  const hotspots: HotspotProps[] = [
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Gallery entrance',
      cssClass: 'entrance-hotspot',
      onClick: () => console.log('Entered gallery'),
    },
  ];

  return (
    <main style={{ width: '100%', height: '100vh' }}>
      <PanoramaViewer
        imagePath="/images/gallery.jpg"
        hotSpots={hotspots}
        autoLoad={true}
        compass={true}
        width="100%"
        height="100%"
      />
    </main>
  );
}
```

--------------------------------

### Implement Error Handling for Missing Images

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/usage-guide.md

This example demonstrates how to handle errors when an invalid or missing image path is provided. It includes input validation for image formats and conditional rendering of the panorama viewer.

```typescript
import React, { useState } from 'react';
import PanoramaViewer, { HotspotProps } from 'react-pannellum-next';

function ErrorHandlingExample() {
  const [imagePath, setImagePath] = useState<string>('/panorama.jpg');
  const [error, setError] = useState<string | null>(null);

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const path = e.target.value;
    if (path && !path.endsWith('.jpg') && !path.endsWith('.png')) {
      setError('Invalid image format. Please use JPG or PNG.');
    } else {
      setError(null);
      setImagePath(path);
    }
  };

  const hotspots: HotspotProps[] = [
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'View point',
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <input
          type="text"
          placeholder="Enter panorama image path"
          value={imagePath}
          onChange={handleImageChange}
          style={{ width: '300px', padding: '8px' }}
        />
      </div>

      {error && (
        <div style={{ color: 'red', marginBottom: '20px' }}>
          Error: {error}
        </div>
      )}

      {!error && (
        <PanoramaViewer
          imagePath={imagePath}
          hotSpots={hotspots}
          autoLoad={true}
          width="100%"
          height="600px"
        />
      )}
    </div>
  );
}

export default ErrorHandlingExample;
```

--------------------------------

### Panorama Viewer with Autorotation and Hotspot Debugging

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/api-reference/PanoramaViewer.md

Configures the panorama viewer with autorotation enabled and hotspot debugging turned on. This example uses viewport units for width and height, making the viewer responsive to the viewport size.

```typescript
import PanoramaViewer from 'react-pannellum-next';

const DebugViewer: React.FC = () => {
  return (
    <PanoramaViewer
      imagePath="/images/my-panorama.jpg"
      autoLoad={true}
      autoRotate={1.5}
      hotSpotDebug={true}
      hotSpots={[
        {
          pitch: 0,
          yaw: 45,
          type: 'info',
          text: 'Debug visible',
          cssClass: 'highlight',
        },
      ]}
      width="100vw"
      height="100vh"
    />
  );
};

export default DebugViewer;
```

--------------------------------

### Next.js Pages Router Integration

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/usage-guide.md

Use this example for integrating the panorama viewer in the Next.js Pages Router. It dynamically imports the component to prevent server-side rendering issues and sets up basic hotspots.

```typescript
// pages/panorama.tsx (or app/panorama/page.tsx for app router)
import dynamic from 'next/dynamic';
import { HotspotProps } from 'react-pannellum-next';

const PanoramaViewer = dynamic(
  () => import('react-pannellum-next'),
  { ssr: false }
);

export default function PanoramaPage() {
  const hotspots: HotspotProps[] = [
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Welcome to the Next.js panorama viewer',
    },
    {
      pitch: 45,
      yaw: 90,
      type: 'scene',
      text: 'View the gallery',
      URL: '/gallery',
    },
  ];

  return (
    <div style={{ height: '100vh' }}>
      <PanoramaViewer
        imagePath="/panorama.jpg"
        hotSpots={hotspots}
        autoLoad={true}
        compass={true}
        showControls={true}
        width="100%"
        height="100%"
      />
    </div>
  );
}
```

--------------------------------

### Modal Panorama Viewer

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/integration-guide.md

Display the panorama viewer within a modal dialog. This example uses React's useState hook to manage the modal's visibility and includes close functionality.

```typescript
import { useState } from 'react';
import PanoramaViewer from 'react-pannellum-next';

export default function ModalViewer() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Open Panorama
      </button>
      {isOpen && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'rgba(0,0,0,0.8)',
            zIndex: 1000,
          }}
        >
          <button
            onClick={() => setIsOpen(false)}
            style={{ position: 'absolute', top: 10, right: 10, zIndex: 1001 }}
          >
            Close
          </button>
          <PanoramaViewer
            imagePath="/panorama.jpg"
            autoLoad={true}
            width="100%"
            height="100%"
          />
        </div>
      )}
    </>
  );
}
```

--------------------------------

### Using Zustand State in Panorama Component

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/integration-guide.md

Integrate the PanoramaViewer component with a Zustand store to access and update panorama state. This example demonstrates using the `usePanoramaStore` hook to select state values.

```typescript
import PanoramaViewer from 'react-pannellum-next';
import { usePanoramaStore } from './store/panoramaStore';

function PanoramaContainer() {
  const imagePath = usePanoramaStore((state) => state.imagePath);
  const hotspots = usePanoramaStore((state) => state.hotspots);
  const autoRotateSpeed = usePanoramaStore((state) => state.autoRotateSpeed);

  return (
    <PanoramaViewer
      imagePath={imagePath}
      hotSpots={hotspots}
      autoRotate={autoRotateSpeed}
      autoLoad={true}
    />
  );
}
```

--------------------------------

### Dynamically Update Hotspots

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/usage-guide.md

Add and remove hotspots from a panorama viewer in real-time. This example shows how to manage a list of hotspots using React state and provides buttons to add new hotspots or clear all existing ones.

```typescript
import React, { useState } from 'react';
import PanoramaViewer, { HotspotProps } from 'react-pannellum-next';

function DynamicHotspotsExample() {
  const [hotspots, setHotspots] = useState<HotspotProps[]>([
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Initial hotspot',
    },
  ]);

  const addHotspot = () => {
    const newHotspot: HotspotProps = {
      pitch: Math.random() * 180 - 90,
      yaw: Math.random() * 360,
      type: 'info',
      text: `Hotspot ${hotspots.length + 1}`,
      cssClass: 'dynamic-hotspot',
      onClick: () => alert(`Hotspot ${hotspots.length + 1} clicked`),
    };
    setHotspots([...hotspots, newHotspot]);
  };

  const clearHotspots = () => {
    setHotspots([]);
  };

  return (
    <div>
      <button onClick={addHotspot} style={{ marginRight: '10px' }}>
        Add Hotspot
      </button>
      <button onClick={clearHotspots}>Clear All</button>
      <div style={{ marginTop: '20px' }}>
        <PanoramaViewer
          imagePath="/panorama.jpg"
          hotSpots={hotspots}
          autoLoad={true}
          compass={true}
          width="100%"
          height="600px"
        />
      </div>
      <p>Total hotspots: {hotspots.length}</p>
    </div>
  );
}

export default DynamicHotspotsExample;
```

--------------------------------

### Project Architecture Overview

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/README.md

Illustrates the directory structure of the react-pannellum-next project, highlighting key files and their roles.

```tree
react-pannellum-next
├── src/
│   ├── PanoramaViewer.tsx       # Main React component
│   ├── index.ts                 # Entry point (re-exports PanoramaViewer)
│   ├── index.d.ts              # TypeScript type definitions
│   ├── index.tsx               # Example app entry point (for testing)
│   ├── App.tsx                 # Example component demonstrating usage
│   ├── styles.css              # Custom hotspot styling examples
│   └── pannellum/              # Pannellum library files (JS/CSS/assets)
├── package.json                # Project metadata and dependencies
└── tsconfig.json              # TypeScript configuration
```

--------------------------------

### Create Production Build

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/REFERENCE-SUMMARY.md

Generates an optimized production build of the project.

```bash
npm run build
```

--------------------------------

### Demo Application Entry Point

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/module-reference.md

The entry point for the example/demo application, handling compatibility for React 18 and earlier versions for rendering the root component.

```typescript
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import App from './App';

if (React.version >= "18") {
  const root = createRoot(document.getElementById('root')!);
  root.render(<App />);
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}
```

--------------------------------

### Project File Structure

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/REFERENCE-SUMMARY.md

Overview of the directory structure for the React Pannellum Next project. This helps in understanding where different types of documentation and code reside.

```bash
output/
├── README.md                      # Project overview and quick start
├── REFERENCE-SUMMARY.md          # This file
├── types.md                       # Type definitions
├── configuration.md              # Configuration reference
├── module-reference.md           # Module structure and exports
├── usage-guide.md                # Practical usage examples
├── integration-guide.md          # Integration instructions
└── api-reference/
    └── PanoramaViewer.md         # Component reference
```

--------------------------------

### Configure Panorama Autorotation

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/usage-guide.md

Control the speed of the panorama's automatic rotation. This example uses a range input to adjust the `autoRotate` prop of the `PanoramaViewer` component.

```typescript
import React, { useState } from 'react';
import PanoramaViewer, { HotspotProps } from 'react-pannellum-next';

function AutorotationExample() {
  const [autoRotateSpeed, setAutoRotateSpeed] = useState<number>(2);

  const hotspots: HotspotProps[] = [
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Rotating view at ' + autoRotateSpeed + '°/sec',
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <label>
          Autorotation Speed (degrees/sec):
          <input
            type="range"
            min="0"
            max="10"
            step="0.5"
            value={autoRotateSpeed}
            onChange={(e) => setAutoRotateSpeed(parseFloat(e.target.value))}
            style={{ marginLeft: '10px' }}
          />
        </label>
        <span style={{ marginLeft: '10px' }}>{autoRotateSpeed.toFixed(1)}°/sec</span>
      </div>

      <PanoramaViewer
        imagePath="/panorama.jpg"
        autoRotate={autoRotateSpeed}
        autoLoad={true}
        compass={true}
        width="100%"
        height="600px"
      />
    </div>
  );
}

export default AutorotationExample;
```

--------------------------------

### Development and Build Scripts

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/README.md

Use these npm scripts to manage the development server and build the library for distribution.

```bash
npm run dev      # Start development server with file watching
npm run build    # Build the library for distribution
```

--------------------------------

### Module Graph Explanation

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/README.md

Details the entry point of the library and how the main PanoramaViewer component interacts with the Pannellum library and React hooks.

```text
Package Export (index.ts/index.d.ts)
    │
    └─→ PanoramaViewer (default export)
            │
            ├─→ Uses: pannellum.viewer() global function
            ├─→ Uses: React hooks (useEffect, useRef)
            └─→ Imports: Pannellum CSS/JS/styles
```

--------------------------------

### Using Redux State in Panorama Component

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/integration-guide.md

Connect a React component to the Redux store to display panorama data. This example shows how to use `useSelector` to retrieve state and `useDispatch` to dispatch actions.

```typescript
import { useSelector, useDispatch } from 'react-redux';
import PanoramaViewer from 'react-pannellum-next';

function PanoramaContainer() {
  const dispatch = useDispatch();
  const { imagePath, hotspots, autoRotateSpeed } = useSelector(
    (state: RootState) => state.panorama
  );

  return (
    <PanoramaViewer
      imagePath={imagePath}
      hotSpots={hotspots}
      autoRotate={autoRotateSpeed}
      autoLoad={true}
    />
  );
}
```

--------------------------------

### Basic PanoramaViewer Usage

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/readme.md

Demonstrates how to use the PanoramaViewer component with an image path and an array of hotspots. Ensure you import the necessary types.

```tsx
import React from 'react';
import { PanoramaViewer, HotspotProps } from 'react-pannellum';

const App: React.FC = () => {
  const hotSpots: HotspotProps[] = [
    { pitch: 0, yaw: 0, type: 'info', text: 'Welcome!' },
    // Add more hotspots here
  ];

  return (
    <div>
      <h1>My Panorama Viewer</h1>
      <PanoramaViewer imagePath="/path/to/panorama.jpg" hotSpots={hotSpots} />
    </div>
  );
};

export default App;
```

--------------------------------

### Import PanoramaViewer Component

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/README.md

Demonstrates how to import the PanoramaViewer component and its associated types from the library.

```typescript
import PanoramaViewer from 'react-pannellum-next';
// or
import PanoramaViewer, { HotspotProps, PanoramaViewerProps } from 'react-pannellum-next';
```

--------------------------------

### Pannellum Global API Viewer Initialization

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/module-reference.md

Illustrates the expected signature for initializing the Pannellum viewer using its global API. This method is not directly exported by the library but is required for the component's functionality.

```typescript
pannellum.viewer(containerElement, configObject): viewer
```

--------------------------------

### Redux Slice for Panorama State

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/integration-guide.md

Define a Redux Toolkit slice to manage panorama image path, hotspots, and auto-rotate speed. This setup is ideal for applications already using Redux for state management.

```typescript
// slices/panoramaSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { HotspotProps } from 'react-pannellum-next';

interface PanoramaState {
  imagePath: string;
  hotspots: HotspotProps[];
  autoRotateSpeed: number;
}

const initialState: PanoramaState = {
  imagePath: '/default-panorama.jpg',
  hotspots: [],
  autoRotateSpeed: 0,
};

const panoramaSlice = createSlice({
  name: 'panorama',
  initialState,
  reducers: {
    setImagePath: (state, action: PayloadAction<string>) => {
      state.imagePath = action.payload;
    },
    setHotspots: (state, action: PayloadAction<HotspotProps[]>) => {
      state.hotspots = action.payload;
    },
    addHotspot: (state, action: PayloadAction<HotspotProps>) => {
      state.hotspots.push(action.payload);
    },
    setAutoRotateSpeed: (state, action: PayloadAction<number>) => {
      state.autoRotateSpeed = action.payload;
    },
  },
});

export const { setImagePath, setHotspots, addHotspot, setAutoRotateSpeed } = 
  panoramaSlice.actions;
export default panoramaSlice.reducer;
```

--------------------------------

### React Pannellum Next Build Output Structure

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/module-reference.md

Details the file structure generated after building the react-pannellum-next project using 'npm run build'.

```text
dist/
├─ index.js              # CommonJS build (main entry)
├─ index.d.ts           # TypeScript type definitions
├─ module.js            # ES module build
└─ (additional files)   # Assets, sourcemaps, etc.
```

--------------------------------

### Custom Hotspot Styling with CSS

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/configuration.md

Demonstrates how to apply custom CSS classes to hotspots for unique styling. Includes component usage and corresponding CSS rules for a pulsating hotspot effect.

```typescript
// Component usage
<PanoramaViewer
  imagePath="/panorama.jpg"
  hotSpots={[
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Custom styled hotspot',
      cssClass: 'custom-hotspot',
    },
  ]} 
/>
```

```css
// CSS (in your stylesheet)
.custom-hotspot {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  animation: pulsate 1.5s infinite;
}

.custom-hotspot:hover {
  background-color: aqua;
}
```

--------------------------------

### Implement Responsive Panorama Viewer

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/usage-guide.md

Create a responsive panorama viewer that adjusts its height based on screen width. The viewer uses `100vh` on mobile devices (below 768px) and a fixed `600px` on larger screens.

```typescript
import React, { useEffect, useState } from 'react';
import PanoramaViewer, { HotspotProps } from 'react-pannellum-next';

function ResponsiveExample() {
  const [height, setHeight] = useState<string>('600px');

  useEffect(() => {
    const handleResize = () => {
      // Use full viewport height on mobile
      if (window.innerWidth < 768) {
        setHeight('100vh');
      } else {
        setHeight('600px');
      }
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const hotspots: HotspotProps[] = [
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Responsive hotspot',
    },
  ];

  return (
    <PanoramaViewer
      imagePath="/panorama.jpg"
      hotSpots={hotspots}
      autoLoad={true}
      width="100%"
      height={height}
      compass={true}
    />
  );
}

export default ResponsiveExample;
```

--------------------------------

### TypeScript Configuration and Usage

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/QUICK-START.md

Utilize TypeScript for type safety with PanoramaViewer. Import necessary types and configure props using interfaces.

```typescript
import PanoramaViewer, {
  HotspotProps,
  PanoramaViewerProps,
} from 'react-pannellum-next';

const config: PanoramaViewerProps = {
  imagePath: '/panorama.jpg',
  hotSpots: [
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Typed hotspot',
    },
  ] as HotspotProps[],
  autoLoad: true,
};

<PanoramaViewer {...config} />
```

--------------------------------

### Import PanoramaViewer Component

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/REFERENCE-SUMMARY.md

Demonstrates different ways to import the PanoramaViewer component, including default import, with types, and for Next.js applications using dynamic import.

```typescript
import PanoramaViewer from 'react-pannellum-next';
```

```typescript
import PanoramaViewer, { HotspotProps, PanoramaViewerProps } from 'react-pannellum-next';
```

```typescript
import dynamic from 'next/dynamic';
const PanoramaViewer = dynamic(
  () => import('react-pannellum-next'),
  { ssr: false }
);
```

--------------------------------

### Global CSS Styling for Panorama Viewer

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/integration-guide.md

Import global CSS styles to set up basic box-sizing, font family, and a container for the panorama viewer.

```css
/* src/index.css (or your global styles file) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Container for panorama viewer */
.panorama-container {
  width: 100%;
  height: 100%;
  background-color: #000;
}
```

--------------------------------

### Defining Different Hotspot Types

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/usage-guide.md

Demonstrates how to define and use various hotspot types like 'info', 'scene', and 'custom-marker' with associated text and CSS classes. This is useful for styling and behavioral differentiation.

```typescript
import PanoramaViewer, { HotspotProps } from 'react-pannellum-next';

function HotspotTypesExample() {
  const hotspots: HotspotProps[] = [
    // Info hotspot - displays information
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Building Information',
      cssClass: 'info-hotspot',
    },

    // Scene hotspot - links to another panorama
    {
      pitch: 30,
      yaw: 90,
      type: 'scene',
      text: 'View Next Room',
      cssClass: 'scene-hotspot',
      URL: '/room2.jpg',
    },

    // Custom type for differentiation
    {
      pitch: -45,
      yaw: 180,
      type: 'custom-marker',
      text: 'Custom Point',
      cssClass: 'custom-hotspot',
      onClick: () => alert('Custom hotspot interaction'),
    },
  ];

  return (
    <PanoramaViewer
      imagePath="/panorama.jpg"
      hotSpots={hotspots}
      autoLoad={true}
    />
  );
}

export default HotspotTypesExample;
```

--------------------------------

### PanoramaViewer with Hotspots

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/README.md

Demonstrates how to configure and display hotspots within the PanoramaViewer. Hotspots can be of type 'info' or 'scene' and can trigger actions or link to other scenes.

```typescript
import React from 'react';
import PanoramaViewer, { HotspotProps } from 'react-pannellum-next';

const App: React.FC = () => {
  const hotspots: HotspotProps[] = [
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Welcome to the panorama!',
      onClick: () => alert('Welcome!'),
    },
    {
      pitch: 30,
      yaw: 90,
      type: 'scene',
      text: 'View another scene',
      URL: '/scene2.jpg',
    },
  ];

  return (
    <PanoramaViewer
      imagePath="/panorama.jpg"
      hotSpots={hotspots}
      autoLoad={true}
    />
  );
};

export default App;
```

--------------------------------

### Package Entry Point Resolution

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/module-reference.md

Defines the main, module, and source entry points for package consumers. CommonJS, ES module, and TypeScript/development imports are resolved based on these fields.

```json
{
  "main": "dist/index.js",
  "module": "dist/module.js",
  "source": "src/PanoramaViewer.tsx"
}
```

--------------------------------

### Minimal PanoramaViewer Usage

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/REFERENCE-SUMMARY.md

Shows the most basic way to render the PanoramaViewer component, requiring only the imagePath prop.

```jsx
<PanoramaViewer imagePath="/panorama.jpg" />
```

--------------------------------

### Basic PanoramaViewer Usage

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/README.md

Shows a basic implementation of the PanoramaViewer component with essential props like imagePath and autoLoad.

```typescript
import React from 'react';
import PanoramaViewer from 'react-pannellum-next';

const App: React.FC = () => {
  return (
    <PanoramaViewer
      imagePath="/path/to/panorama.jpg"
      autoLoad={true}
      compass={true}
      showControls={true}
      width="100%"
      height="600px"
    />
  );
};

export default App;
```

--------------------------------

### React Pannellum Next Export Re-export Chain

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/module-reference.md

Illustrates the flow of exports from the package consumer down to the implementation source files within react-pannellum-next.

```text
Package Consumer
    │
    └─> react-pannellum-next (main: dist/index.js, module: dist/module.js)
            │
            └─> src/index.ts (source, re-exports PanoramaViewer)
                    │
                    └─> src/PanoramaViewer.tsx (implementation)
                            │
                            ├─> Exports: PanoramaViewer component
                            ├─> Exports: PanoramaViewerProps interface
                            └─> Exports: HotspotProps interface
```

--------------------------------

### Client Component for App Router

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/integration-guide.md

Create a client component for the App Router that dynamically imports the panorama viewer. This component accepts props to configure the viewer.

```typescript
// app/components/PanoramaViewer.tsx
'use client';

import dynamic from 'next/dynamic';
import { HotspotProps } from 'react-pannellum-next';

const PanoramaViewerComponent = dynamic(
  () => import('react-pannellum-next'),
  { ssr: false }
);

interface PanoramaViewerProps {
  imagePath: string;
  hotSpots?: HotspotProps[];
  autoLoad?: boolean;
  autoRotate?: number;
  compass?: boolean;
  showControls?: boolean;
}

export default function PanoramaViewerWrapper(props: PanoramaViewerProps) {
  return (
    <PanoramaViewerComponent
      {...props}
      width="100%"
      height="100%"
    />
  );
}
```

--------------------------------

### Importing PanoramaViewer Component

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/module-reference.md

Demonstrates equivalent import statements for the PanoramaViewer component from the react-pannellum-next package.

```typescript
// All of these are equivalent:
import PanoramaViewer from 'react-pannellum-next';
import PanoramaViewer from 'react-pannellum-next/dist/index.js';
import PanoramaViewer from 'react-pannellum-next/dist/module.js';
```

--------------------------------

### Import Pannellum Assets

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/README.md

Imports necessary CSS and JavaScript files for Pannellum integration. The `pannellum` global object is expected to be available after these scripts load.

```typescript
import "./pannellum/css/pannellum.css";
import "./pannellum/css/style-textInfo.css";
import "./pannellum/js/libpannellum.js";
import "./pannellum/js/pannellum.js";
import "./pannellum/js/RequestAnimationFrame";
```

--------------------------------

### Basic Panorama Viewer Component

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/api-reference/PanoramaViewer.md

Renders a basic panorama viewer with specified image path and hotspots. Ensure the image path is correct and hotspots are properly defined.

```typescript
import React from 'react';
import PanoramaViewer, { HotspotProps } from 'react-pannellum-next';

const MyViewer: React.FC = () => {
  const hotspots: HotspotProps[] = [
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Welcome to the panorama!',
    },
    {
      pitch: 30,
      yaw: 90,
      type: 'info',
      text: 'Point of interest',
      cssClass: 'custom-hotspot',
    },
  ];

  return (
    <PanoramaViewer
      imagePath="/images/panorama.jpg"
      hotSpots={hotspots}
      autoLoad={true}
      compass={true}
      showControls={true}
      width="100%"
      height="600px"
    />
  );
};

export default MyViewer;
```

--------------------------------

### Dynamic Import Wrapper for Pages Router

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/integration-guide.md

Create a dynamic import wrapper for the panorama viewer to ensure it's only loaded on the client-side. This prevents server-side rendering errors.

```typescript
// lib/PanoramaViewerWrapper.tsx
import dynamic from 'next/dynamic';
import { ReactNode } from 'react';

const PanoramaViewer = dynamic(
  () => import('react-pannellum-next'),
  {
    ssr: false,
    loading: () => <div>Loading panorama viewer...</div>,
  }
);

export default PanoramaViewer;
```

--------------------------------

### React Pannellum Next Dependency Tree

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/module-reference.md

Outlines the dependency structure of the react-pannellum-next package, including peer dependencies, development dependencies, and runtime dependencies.

```text
react-pannellum-next (package root)
│
├─ Peer Dependencies:
│  ├─ react@^18.2.0
│  └─ react-dom@^18.2.0
│
├─ Dev Dependencies:
│  ├─ @parcel/transformer-typescript-tsc@^2.9.3
│  ├─ @types/react@^18.2.28
│  ├─ @types/react-dom@^18.2.13
│  ├─ parcel@^2.9.3
│  └─ typescript@^5.2.2
│
└─ Runtime Dependencies:
   └─ Pannellum (bundled as static assets)
```

--------------------------------

### Optimize Panorama Images with Modern Formats

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/integration-guide.md

Use modern image formats like WebP in production for better performance, with a fallback to JPEG for development environments.

```typescript
import PanoramaViewer from 'react-pannellum-next';

function OptimizedPanorama() {
  // Use modern image formats with fallbacks
  const imageSource = process.env.NODE_ENV === 'production'
    ? '/panorama.webp' // Modern format for production
    : '/panorama.jpg'; // Standard format for development

  return (
    <PanoramaViewer
      imagePath={imageSource}
      autoLoad={true}
      width="100%"
      height="100%"
    />
  );
}
```

--------------------------------

### Package.json Build Scripts

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/configuration.md

Standard build scripts for the project using Parcel, including development, build, and pre-publish commands.

```json
{
  "scripts": {
    "dev": "parcel watch",
    "build": "parcel build",
    "prepublishOnly": "npm run build"
  }
}
```

--------------------------------

### ViewerOptions Interface Definition

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/types.md

Defines the structure for configuring a Pannellum viewer instance. Use this interface to pass options when initializing the viewer.

```typescript
interface ViewerOptions {
  type: string;
  panorama: string;
  autoLoad?: boolean;
  autoRotate?: number;
  hotSpotDebug?: boolean;
  yaw?: number;
  pitch?: number;
  hfov?: number;
  vaov?: number;
  minHfov?: number;
  maxHfov?: number;
  minPitch?: number;
  maxPitch?: number;
  showControls?: boolean;
  showZoomCtrl?: boolean;
  keyboardZoom?: boolean;
  mouseZoom?: boolean;
  showFullscreenCtrl?: boolean;
  compass?: boolean;
  compassOffset?: [number, number];
  hotSpots?: PanenellumHotSpot[];
}
```

--------------------------------

### Zustand Store for Panorama State

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/integration-guide.md

Implement a Zustand store to manage panorama state, including image path, hotspots, and auto-rotate speed. This is a lightweight alternative for simpler state management needs.

```typescript
// store/panoramaStore.ts
import create from 'zustand';
import { HotspotProps } from 'react-pannellum-next';

interface PanoramaStore {
  imagePath: string;
  hotspots: HotspotProps[];
  autoRotateSpeed: number;
  setImagePath: (path: string) => void;
  setHotspots: (hotspots: HotspotProps[]) => void;
  setAutoRotateSpeed: (speed: number) => void;
}

export const usePanoramaStore = create<PanoramaStore>((set) => ({
  imagePath: '/default-panorama.jpg',
  hotspots: [],
  autoRotateSpeed: 0,
  setImagePath: (path) => set({ imagePath: path }),
  setHotspots: (hotspots) => set({ hotspots }),
  setAutoRotateSpeed: (speed) => set({ autoRotateSpeed: speed }),
}));
```

--------------------------------

### Custom Hotspot Styling with CSS

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/QUICK-START.md

Apply custom CSS classes to hotspots for unique visual appearances. Ensure your CSS file is imported into your project.

```css
/* MyStyles.css */
.highlight {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.7);
}

.highlight:hover {
  background: rgba(255, 0, 0, 1);
}
```

```typescript
<PanoramaViewer
  imagePath="/panorama.jpg"
  hotSpots={[
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'Styled hotspot',
      cssClass: 'highlight',
    },
  ]}
/>
```

--------------------------------

### App Router Server Component

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/integration-guide.md

Use the client component in a Next.js App Router page to display a panorama. Configure metadata and layout for optimal viewing.

```typescript
// app/panorama/page.tsx
import PanoramaViewer from '../components/PanoramaViewer';
import { HotspotProps } from 'react-pannellum-next';

export const metadata = {
  title: 'Panorama Viewer',
};

export default function PanoramaPage() {
  const hotspots: HotspotProps[] = [
    {
      pitch: 0,
      yaw: 0,
      type: 'info',
      text: 'App Router Example',
    },
  ];

  return (
    <main style={{ width: '100%', height: '100vh' }}>
      <PanoramaViewer
        imagePath="/panorama.jpg"
        hotSpots={hotspots}
        autoLoad={true}
        compass={true}
      />
    </main>
  );
}
```

--------------------------------

### Default Pannellum Configuration Object

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/REFERENCE-SUMMARY.md

This object represents the default configuration settings for the Pannellum viewer. Adjust these values to customize the behavior and appearance of the panorama.

```javascript
type: 'equirectangular'
hfov: 100° (horizontal field of view)
vaov: 75° (vertical angle of view)
minHfov: 50°
maxHfov: 120°
minPitch: -90°
maxPitch: 90°
yaw: 0°
pitch: 0°
compass: true
compassOffset: [10, 10]
showZoomCtrl: true
keyboardZoom: true
mouseZoom: true
showFullscreenCtrl: true
autoLoad: true
autoRotate: 0
hotSpotDebug: false
```

--------------------------------

### Standard React Import

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/module-reference.md

Import the default export (PanoramaViewer component) and named exports (HotspotProps, PanoramaViewerProps) for full component and type access.

```typescript
import PanoramaViewer, { HotspotProps, PanoramaViewerProps } from 'react-pannellum-next';
```

--------------------------------

### Memoizing Hotspots for Performance

Source: https://github.com/kamicodaxe/react-pannellum-next/blob/main/_autodocs/usage-guide.md

Use `useMemo` to prevent unnecessary re-renders of the hotspot array, improving performance, especially in dynamic Next.js applications.

```typescript
import React, { useMemo } from 'react';
import PanoramaViewer, { HotspotProps } from 'react-pannellum-next';

function PerformanceExample() {
  const hotspots = useMemo<HotspotProps[]>(
    () => [
      {
        pitch: 0,
        yaw: 0,
        type: 'info',
        text: 'Memoized hotspot',
      },
    ],
    []
  );

  return (
    <PanoramaViewer
      imagePath="/panorama.jpg"
      hotSpots={hotspots}
      autoLoad={true}
    />
  );
}

export default PerformanceExample;
```