@clikvn/showroom-visualizer 0.2.2-dev-11 → 0.2.2-dev-13

package/EXAMPLES.md

@@ -1,967 +0,0 @@
-# Showroom Visualizer - Examples
-
-## 📚 Table of Contents
-
-1. [Basic Usage](#basic-usage)
-2. [Custom Layout Examples (Override Components)](#custom-layout-examples-override-components)
-3. [Custom Floorplan Examples](#custom-floorplan-examples)
-4. [Headless Hooks Examples](#headless-hooks-examples)
-5. [Advanced Examples](#advanced-examples)
-
----
-
-## Basic Usage
-
-### Example 1: Default UI (Không thay đổi)
-
-```tsx
-import { ShowroomVisualizer } from 'showroom-visualizer';
-
-export default function App() {
-  return (
-    <ShowroomVisualizer
-      config={{
-        tourCode: 'my-showroom-2024',
-        language: 'vi',
-      }}
-      mobile={false}
-      apiHost="https://api.clik.vn"
-    />
-  );
-}
-```
-
----
-
-## Custom Layout Examples (Override Components)
-
-**Custom layout** cho phép bạn override từng component theo cấu trúc object lồng nhau, giúp tùy chỉnh UI mà không cần thay đổi toàn bộ component.
-
----
-
-## Custom Floorplan Examples
-
-### Example 5: Basic Custom Floorplan UI
-
-Ví dụ này tạo một custom UI với Floorplan có animation và controls đơn giản:
-
-**Approach: Sử dụng `disableDefaultUI` và `useShowroomControls` hook**
-
-Khi sử dụng `useShowroomControls`, bạn sẽ nhận được `controls` object chứa:
-- Tất cả state và functions từ headless hooks (floorplan, navigation, etc.)
-- Tất cả UI components (Floorplan, PinActions, etc.)
-### Concept
-
-```
-Floorplan
-├── Map
-└── Minimap
-    ├── Marker      ← Có thể override riêng!
-    └── Polygon     ← Có thể override riêng!
-```
-
-### CustomLayoutConfig type
-
-```typescript
-import { CustomLayoutConfig } from '@clikvn/showroom-visualizer';
-
-const customLayout: CustomLayoutConfig = {
-  Floorplan: {
-    Minimap: {
-      Marker: MyCustomMarker,
-    },
-  },
-};
-```
-
-### ⚠️ IMPORTANT: Pass Component Functions, NOT React Elements!
-
-```tsx
-// ✅ ĐÚNG - Pass component function
-customLayout={{
-  Floorplan: {
-    Minimap: {
-      Marker: MyCustomMarker, // ✅ Function reference
-    },
-  },
-}}
-
-// ❌ SAI - Không pass React element
-customLayout={{
-  Floorplan: {
-    Minimap: {
-      Marker: <MyCustomMarker />, // ❌ JSX element (đã render)
-    },
-  },
-}}
-```
-
-**Lý do:**
-- Custom layout expects **component functions** để có thể render với props động
-- Nếu bạn pass `<MyCustomMarker />`, đó là **React element**, không phải component
-- Code sẽ cố gắng extract component, nhưng **best practice** là pass function trực tiếp
-
-### Example 1: Override Marker
-
-```tsx
-import { ShowroomVisualizer } from '@clikvn/showroom-visualizer';
-
-const MyCustomMarker = (props) => {
-  const { marker, active, size, invisible, onClick } = props;
-
-  return (
-    <div
-      style={{
-        width: size,
-        height: size,
-        background: active ? 'red' : 'blue',
-        borderRadius: '50%',
-        border: '3px solid white',
-        cursor: 'pointer',
-        opacity: invisible ? 0 : 1,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        fontSize: size * 0.5,
-        transform: active ? 'scale(1.2)' : 'scale(1)',
-        transition: 'all 0.3s ease',
-      }}
-      onClick={() => onClick(marker)}
-    >
-      {active ? '📍' : '📌'}
-    </div>
-  );
-};
-
-<ShowroomVisualizer
-  config={{ tourCode: 'my-tour' }}
-  customLayout={{
-    Floorplan: {
-      Minimap: {
-        Marker: MyCustomMarker,
-      },
-    },
-  }}
-/>;
-```
-
-### Example 2: Override Minimap Component (Reuse Children)
-
-Khi override component cha (như `Minimap`), bạn vẫn có thể reuse các children components mặc định:
-
-```tsx
-import {
-  ShowroomVisualizer,
-  FloorplanMinimapDefault,
-} from '@clikvn/showroom-visualizer';
-import { useState } from 'react';
-
-const MyMarker = (props) => (
-  <div
-    style={{
-      width: props.size,
-      height: props.size,
-      background: props.active ? '#ff0000' : '#0000ff',
-      borderRadius: '50%',
-    }}
-    onClick={() => props.onClick(props.marker)}
-  >
-    {props.active ? '🔴' : '🔵'}
-  </div>
-);
-
-const MyMinimap = (props) => {
-  const [showLabels, setShowLabels] = useState(false);
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <button
-        onClick={() => setShowLabels(!showLabels)}
-        style={{
-          position: 'absolute',
-          top: 10,
-          right: 10,
-          zIndex: 1000,
-        }}
-      >
-        {showLabels ? 'Hide' : 'Show'} Labels
-      </button>
-
-      {/* 
-        FloorplanMinimapDefault tự động sử dụng custom Marker từ customLayout
-        vì nó sử dụng useCustomLayout() bên trong
-      */}
-      <FloorplanMinimapDefault {...props} />
-    </div>
-  );
-};
-
-<ShowroomVisualizer
-  customLayout={{
-    Floorplan: {
-      Minimap: {
-        // Override Minimap component
-        default: MyMinimap,
-        // Override Marker (sẽ được MyMinimap sử dụng tự động)
-        Marker: MyMarker,
-      },
-    },
-  }}
-/>;
-```
-
-**Lưu ý:** `FloorplanMinimapDefault` tự động sử dụng `useCustomLayout()` để lấy `Marker` và `Polygon` từ config, nên bạn không cần truyền props `MarkerComponent` hay `PolygonsComponent`.
-
-### Example 3: TypeScript Support
-
-```tsx
-import {
-  ShowroomVisualizer,
-  CustomLayoutConfig,
-  MiniMapMarkerDefault,
-} from '@clikvn/showroom-visualizer';
-
-const MyMarker: React.ComponentType<any> = (props) => (
-  <div>My Custom Marker for {props.marker.name}</div>
-);
-
-const customLayoutConfig: CustomLayoutConfig = {
-  Floorplan: {
-    Minimap: {
-      Marker: MyMarker,
-      Polygon: MiniMapMarkerDefault, // Có thể reuse default exports
-    },
-  },
-};
-
-<ShowroomVisualizer
-  config={{ tourCode: 'my-tour' }}
-  customLayout={customLayoutConfig}
-/>;
-```
-
-### Example 4: Wrapper Component với Custom CSS (Pure CSS)
-
-Sử dụng wrapper component để override CSS mà không cần thay đổi logic:
-
-```tsx
-// MyCustomMarker.tsx
-import { FC } from 'react';
-import MiniMapMarkerDefault from '@clikvn/showroom-visualizer/dist/components/SkinLayer/Floorplan/Minimap/MiniMapMarker';
-import type { ComponentProps } from 'react';
-import './MyMarker.css'; // Import CSS file
-
-const MyCustomMarker: FC<ComponentProps<typeof MiniMapMarkerDefault>> = (props) => {
-  return (
-    <div className="my-marker-wrapper">
-      <MiniMapMarkerDefault {...props} />
-    </div>
-  );
-};
-
-export default MyCustomMarker;
-```
-
-```css
-/* MyMarker.css */
-
-/* Override marker styles */
-.my-marker-wrapper .minimap__marker {
-  border-radius: 50% !important;
-  border: 3px solid white !important;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
-}
-
-.my-marker-wrapper .minimap__marker--active {
-  transform: scale(1.2) !important;
-  box-shadow: 0 0 15px rgba(255,0,0,0.6) !important;
-}
-
-.my-marker-wrapper .marker__content {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-}
-
-/* Variant: chỉ thay đổi màu sắc */
-.my-marker-wrapper.color-only .minimap__marker--active .marker__content {
-  background: #ff0000 !important;
-}
-
-.my-marker-wrapper.color-only .minimap__marker:not(.minimap__marker--active) .marker__content {
-  background: #0000ff !important;
-}
-```
-
-Sử dụng:
-
-```tsx
-<ShowroomVisualizer
-  config={{ tourCode: 'my-tour' }}
-  customLayout={{
-    Floorplan: {
-      Minimap: {
-        Marker: MyCustomMarker,
-      },
-    },
-  }}
-/>
-```
-
-### Example 5: Wrapper Component với Tailwind CSS
-
-Sử dụng Tailwind với wrapper component:
-
-```tsx
-// MyProductDetail.tsx
-import { FC } from 'react';
-import ProductDetailDefault from '@clikvn/showroom-visualizer/dist/components/SkinLayer/PoiDetailSlideIn/Detail';
-import type { ComponentProps } from 'react';
-import './MyProductDetail.css';
-
-const MyProductDetail: FC<ComponentProps<typeof ProductDetailDefault>> = (props) => {
-  return (
-    <div className="my-product-detail-wrapper">
-      <ProductDetailDefault {...props} />
-    </div>
-  );
-};
-
-export default MyProductDetail;
-```
-
-```css
-/* MyProductDetail.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .my-product-detail-wrapper {
-    /* Override title styles */
-    @apply [&_.text-\\[18px\\]]:text-2xl;
-    @apply [&_.text-\\[18px\\]]:font-bold;
-    @apply [&_.text-card-foreground]:text-blue-600;
-    
-    /* Override price styles */
-    @apply [&_.text-\\[16px\\]]:text-lg;
-    @apply [&_.text-primary]:text-red-500;
-    @apply [&_.text-muted-foreground]:text-gray-400;
-    
-    /* Override button styles */
-    @apply [&_button]:rounded-lg;
-    @apply [&_button]:transition-colors;
-    @apply [&_button:hover]:bg-gray-100;
-  }
-  
-  /* Variant: chỉ thay đổi màu sắc */
-  .my-product-detail-wrapper.color-only {
-    @apply [&_.text-card-foreground]:text-purple-600;
-    @apply [&_.text-primary]:text-orange-500;
-  }
-  
-  /* Variant: chỉ thay đổi font */
-  .my-product-detail-wrapper.font-only {
-    @apply [&_.text-\\[18px\\]]:text-xl;
-    @apply [&_.text-\\[16px\\]]:text-base;
-    @apply [&_.font-semibold]:font-extrabold;
-  }
-}
-```
-
-**Hoặc dùng CSS thuần (không cần @apply):**
-
-```css
-/* MyProductDetail.css - Pure CSS approach */
-
-/* Override title styles */
-.my-product-detail-wrapper .text-\[18px\] {
-  font-size: 1.5rem !important; /* text-2xl */
-  font-weight: 700 !important; /* font-bold */
-  color: rgb(37 99 235) !important; /* blue-600 */
-}
-
-/* Override price styles */
-.my-product-detail-wrapper .text-\[16px\] {
-  font-size: 1.125rem !important; /* text-lg */
-}
-
-.my-product-detail-wrapper .text-primary {
-  color: rgb(239 68 68) !important; /* red-500 */
-}
-
-.my-product-detail-wrapper .text-muted-foreground {
-  color: rgb(156 163 175) !important; /* gray-400 */
-}
-
-/* Override button styles */
-.my-product-detail-wrapper button {
-  border-radius: 0.5rem !important; /* rounded-lg */
-  transition: all 0.2s !important;
-}
-
-.my-product-detail-wrapper button:hover {
-  background-color: rgb(243 244 246) !important; /* bg-gray-100 */
-}
-```
-
-**Lưu ý quan trọng:**
-- Escape brackets trong CSS: `.text-\[18px\]` (không phải `.text-[18px]`)
-- Có thể cần `!important` để override Tailwind classes
-- Dùng `[&_selector]` trong Tailwind để target nested elements
-
-### Example 6: Access từ HTML (ESM)
-
-```html
-<script type="module">
-  import { ShowroomVisualizer } from 'http://localhost:3000/dist/index.js';
-
-  const CustomMarker = (props) => {
-    const React = window.React;
-    const { marker, active, size, onClick } = props;
-
-    return React.createElement(
-      'div',
-      {
-        style: {
-          width: size + 'px',
-          height: size + 'px',
-          background: active ? 'red' : 'blue',
-          borderRadius: '50%',
-          cursor: 'pointer',
-        },
-        onClick: () => onClick(marker),
-      },
-      active ? '📍' : '📌'
-    );
-  };
-
-  ShowroomVisualizer({
-    elementId: 'tour-container',
-    customLayout: {
-      Floorplan: {
-        Minimap: {
-          Marker: CustomMarker,
-        },
-      },
-    },
-  });
-</script>
-```
-
-> ⚠️ **Không hỗ trợ trên Web Component (`dist/web.js`)** vì custom layout yêu cầu cùng React instance.
-
-### Custom Layout Best Practices
-
-1. **Start Small** - Override đúng component cần thiết
-2. **Reuse Defaults** - Import và reuse default components khi có thể
-3. **Type Safety** - Sử dụng `CustomLayoutConfig` để tránh sai sót
-4. **Test Thoroughly** - Test custom components với nhiều scenarios
-5. **Document Changes** - Comment rõ những gì đã customize
-
-### Available Components for Custom Layout
-
-```tsx
-import { CUSTOM_LAYOUT_COMPONENTS } from '@clikvn/showroom-visualizer';
-
-console.log(CUSTOM_LAYOUT_COMPONENTS);
-// {
-//   Floorplan: {
-//     path: 'src/components/SkinLayer/Floorplan/index.tsx',
-//     description: 'Main Floorplan container with bottom sheet',
-//     children: {
-//       Map: {
-//         path: 'src/components/SkinLayer/Floorplan/Map.tsx',
-//         description: 'Floorplan map wrapper with controls',
-//       },
-//       Minimap: {
-//         path: 'src/components/SkinLayer/Floorplan/Minimap/index.tsx',
-//         description: 'Interactive minimap with markers and polygons',
-//         children: {
-//           Marker: {
-//             path: 'src/components/SkinLayer/Floorplan/Minimap/MiniMapMarker.tsx',
-//             description: 'Individual marker on minimap',
-//           },
-//           Polygon: {
-//             path: 'src/components/SkinLayer/Floorplan/Minimap/MiniMapPolygons/index.tsx',
-//             description: 'Polygon areas on minimap',
-//           },
-//           Radar: {
-//             path: 'src/components/SkinLayer/Floorplan/Minimap/index.tsx',
-//             description: 'Radar element inside minimap',
-//           },
-//         },
-//       },
-//     },
-//   },
-// }
-```
-
-### Custom Layout Path Structure
-
-Cấu trúc path cho custom layout:
-
-```
-Floorplan
-├── Map                    → ['Floorplan', 'Map']
-└── Minimap                → ['Floorplan', 'Minimap']
-    ├── Marker             → ['Floorplan', 'Minimap', 'Marker']
-    ├── Polygon            → ['Floorplan', 'Minimap', 'Polygon']
-    └── Radar              → ['Floorplan', 'Minimap', 'Radar']
-```
-
-**Ví dụ override nhiều components:**
-
-```tsx
-<ShowroomVisualizer
-  customLayout={{
-    Floorplan: {
-      // Override Map component
-      Map: MyCustomMap,
-      Minimap: {
-        // Override Minimap component
-        default: MyCustomMinimap,
-        // Override Marker
-        Marker: MyCustomMarker,
-        // Override Polygon
-        Polygon: MyCustomPolygon,
-        // Radar giữ nguyên default
-      },
-    },
-  }}
-/>
-```
-
----
-
-## Headless Hooks Examples
-
-### Example 7: External Controls (UI ở ngoài)
-
-```tsx
-import { useState } from 'react';
-import { 
-  ShowroomVisualizer, 
-  useShowroomControls 
-} from 'showroom-visualizer';
-
-function ExternalDashboard() {
-  const controls = useShowroomControls();
-  
-  if (!controls.tourReady) {
-    return <div>Loading tour...</div>;
-  }
-  
-  return (
-    <div className="dashboard" style={{ padding: '20px', background: '#f0f0f0' }}>
-      <h1>Tour Dashboard</h1>
-      
-      {/* Tour Info */}
-      <div className="info-panel">
-        <p>Current Scene: <strong>{controls.activeScene?.name}</strong></p>
-        <p>Total Scenes: <strong>{controls.navigation.totalScenes}</strong></p>
-        <p>Sound: <strong>{controls.viewport.tourSoundPlaying ? 'ON' : 'OFF'}</strong></p>
-      </div>
-      
-      {/* Quick Actions */}
-      <div className="actions" style={{ marginTop: '20px' }}>
-        <button onClick={controls.toggleSound}>
-          {controls.viewport.tourSoundPlaying ? 'Mute' : 'Unmute'}
-        </button>
-        <button onClick={controls.toggleFullscreen}>
-          Fullscreen
-        </button>
-        <button onClick={controls.viewport.takeScreenshot}>
-          Screenshot
-        </button>
-      </div>
-      
-      {/* Scene Selector */}
-      <div style={{ marginTop: '20px' }}>
-        <label>Jump to Scene: </label>
-        <select onChange={(e) => controls.goToScene(e.target.value)}>
-          {controls.navigation.scenes.map(scene => (
-            <option key={scene.id} value={scene.id}>
-              {scene.name}
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  );
-}
-
-export default function App() {
-  return (
-    <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr' }}>
-      {/* External Dashboard */}
-      <ExternalDashboard />
-      
-      {/* Tour without UI */}
-      <ShowroomVisualizer
-        config={{ tourCode: 'my-tour' }}
-        disableDefaultUI={true}
-      />
-    </div>
-  );
-}
-```
-
-### Example 6: Auto-play Scenario với Progress
-
-```tsx
-import { ShowroomVisualizer, useShowroomControls } from 'showroom-visualizer';
-
-function AutoPlayController() {
-  const scenario = useScenarioControl();
-  
-  return (
-    <div style={{
-      position: 'absolute',
-      bottom: 20,
-      left: '50%',
-      transform: 'translateX(-50%)',
-      background: 'rgba(0,0,0,0.8)',
-      color: 'white',
-      padding: '15px 30px',
-      borderRadius: '30px',
-      display: 'flex',
-      alignItems: 'center',
-      gap: '15px'
-    }}>
-      {!scenario.isPlaying ? (
-        <button
-          onClick={() => scenario.playScenario('intro')}
-          style={{
-            background: '#4CAF50',
-            color: 'white',
-            border: 'none',
-            padding: '10px 20px',
-            borderRadius: '20px',
-            cursor: 'pointer',
-          }}
-        >
-          ▶ Play Guided Tour
-        </button>
-      ) : (
-        <>
-          <button onClick={scenario.pauseScenario}>⏸</button>
-          <button onClick={scenario.stopScenario}>⏹</button>
-          <div>
-            Step {scenario.scenarioCurrentStep?.step || 0}
-            {scenario.activeScenario && ` of ${scenario.activeScenario.actions.length}`}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-```
-
-### Example 7: POI Explorer
-
-```tsx
-import { ShowroomVisualizer, usePOIInteraction, useTourCore } from 'showroom-visualizer';
-
-function POIExplorer() {
-  const poi = usePOIInteraction();
-  const tour = useTourCore();
-  
-  // Get all POIs from current scene
-  const currentScenePOIs = tour.activeScene?.pois || [];
-  
-  return (
-    <div style={{
-      position: 'absolute',
-      right: 20,
-      top: 20,
-      width: '300px',
-      background: 'white',
-      borderRadius: '10px',
-      padding: '15px',
-      maxHeight: '500px',
-      overflowY: 'auto'
-    }}>
-      <h3>Points of Interest</h3>
-      
-      <button onClick={poi.toggleLabels} style={{ marginBottom: '10px' }}>
-        {poi.labelVisible ? 'Hide' : 'Show'} All Labels
-      </button>
-      
-      <ul style={{ listStyle: 'none', padding: 0 }}>
-        {currentScenePOIs.map(poiItem => (
-          <li
-            key={poiItem.id}
-            onClick={() => poi.openPoiDetail(poiItem.code)}
-            style={{
-              padding: '10px',
-              margin: '5px 0',
-              background: poi.activePoiCode === poiItem.code ? '#e3f2fd' : '#f5f5f5',
-              borderRadius: '5px',
-              cursor: 'pointer',
-              border: poi.activePoiCode === poiItem.code ? '2px solid #2196F3' : 'none'
-            }}
-          >
-            <strong>{poiItem.name}</strong>
-            <p style={{ fontSize: '12px', margin: '5px 0 0 0', color: '#666' }}>
-              {poiItem.type}
-            </p>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-```
-
----
-
-## Advanced Examples
-
-### Example 8: Complete Custom UI với Tất cả Features
-
-```tsx
-import { 
-  ShowroomVisualizer,
-  useShowroomControls,
-  Floorplan,
-  PinActions,
-} from 'showroom-visualizer';
-
-function CompleteCustomUI() {
-  const controls = useShowroomControls();
-  
-  return (
-    <>
-      {/* Top Bar */}
-      <div style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: '60px',
-        background: 'rgba(0,0,0,0.8)',
-        color: 'white',
-        display: 'flex',
-        alignItems: 'center',
-        padding: '0 20px',
-        zIndex: 1000
-      }}>
-        <h1 style={{ margin: 0, fontSize: '18px' }}>
-          {controls.activeScene?.name}
-        </h1>
-        
-        <div style={{ marginLeft: 'auto', display: 'flex', gap: '10px' }}>
-          <button onClick={controls.toggleSound}>
-            {controls.viewport.tourSoundPlaying ? '🔊' : '🔇'}
-          </button>
-          <button onClick={controls.toggleFullscreen}>
-            ⛶
-          </button>
-        </div>
-      </div>
-      
-      {/* Bottom Navigation */}
-      <div style={{
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: '80px',
-        background: 'rgba(0,0,0,0.8)',
-        color: 'white',
-        display: 'flex',
-        alignItems: 'center',
-        padding: '0 20px',
-        gap: '20px',
-        zIndex: 1000
-      }}>
-        <button
-          onClick={controls.goToPreviousScene}
-          disabled={!controls.navigation.hasPreviousScene}
-        >
-          ← Previous
-        </button>
-        
-        <div style={{ flex: 1, textAlign: 'center' }}>
-          Scene {controls.navigation.scenes.findIndex(s => s.id === controls.activeScene?.id) + 1}
-          {' '} of {controls.navigation.totalScenes}
-        </div>
-        
-        <button
-          onClick={controls.goToNextScene}
-          disabled={!controls.navigation.hasNextScene}
-        >
-          Next →
-        </button>
-      </div>
-      
-      {/* Right Sidebar - Pin Actions */}
-      <div style={{
-        position: 'absolute',
-        right: 20,
-        top: '50%',
-        transform: 'translateY(-50%)',
-        zIndex: 1000
-      }}>
-        <PinActions />
-      </div>
-      
-      {/* Minimap */}
-      {controls.showFloorplan && (
-        <div style={{
-          position: 'absolute',
-          left: 20,
-          bottom: 100,
-          width: '250px',
-          zIndex: 1000
-        }}>
-          <Floorplan />
-        </div>
-      )}
-    </>
-  );
-}
-
-export default function App() {
-  return (
-    <ShowroomVisualizer
-      config={{ tourCode: 'my-tour' }}
-      disableDefaultUI={true}
-    >
-      <CompleteCustomUI />
-    </ShowroomVisualizer>
-  );
-}
-```
-
-> **Lưu ý:** `customLayout` prop chỉ dùng cho **component override** (CustomLayoutConfig). Để tạo custom UI hoàn toàn, dùng `disableDefaultUI={true}` và render children components.
-
-### Example 9: Mobile-first Custom UI
-
-```tsx
-import { ShowroomVisualizer, useShowroomControls } from 'showroom-visualizer';
-
-function MobileUI() {
-  const controls = useShowroomControls();
-  const [menuOpen, setMenuOpen] = useState(false);
-  
-  return (
-    <>
-      {/* Hamburger Menu Button */}
-      <button
-        onClick={() => setMenuOpen(!menuOpen)}
-        style={{
-          position: 'absolute',
-          top: 10,
-          right: 10,
-          zIndex: 2000,
-          padding: '10px',
-          background: 'rgba(0,0,0,0.5)',
-          color: 'white',
-          border: 'none',
-          borderRadius: '5px',
-        }}
-      >
-        ☰
-      </button>
-      
-      {/* Slide-out Menu */}
-      {menuOpen && (
-        <div style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          width: '80%',
-          height: '100%',
-          background: 'white',
-          zIndex: 1500,
-          padding: '20px',
-          overflowY: 'auto',
-        }}>
-          <button onClick={() => setMenuOpen(false)}>✕ Close</button>
-          
-          <h2>Scenes</h2>
-          {controls.navigation.scenes.map(scene => (
-            <button
-              key={scene.id}
-              onClick={() => {
-                controls.goToScene(scene.id);
-                setMenuOpen(false);
-              }}
-              style={{
-                display: 'block',
-                width: '100%',
-                padding: '15px',
-                marginBottom: '10px',
-                background: scene.id === controls.activeScene?.id ? '#007bff' : '#f5f5f5',
-                color: scene.id === controls.activeScene?.id ? 'white' : 'black',
-                border: 'none',
-                borderRadius: '5px',
-                textAlign: 'left',
-              }}
-            >
-              {scene.name}
-            </button>
-          ))}
-        </div>
-      )}
-      
-      {/* Bottom Swipe Navigation */}
-      <div style={{
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: '60px',
-        background: 'rgba(0,0,0,0.7)',
-        color: 'white',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: '0 20px',
-        zIndex: 1000
-      }}>
-        <button
-          onClick={controls.goToPreviousScene}
-          disabled={!controls.navigation.hasPreviousScene}
-          style={{
-            padding: '10px 20px',
-            background: 'transparent',
-            color: 'white',
-            border: '1px solid white',
-            borderRadius: '20px',
-          }}
-        >
-          ←
-        </button>
-        
-        <span>{controls.activeScene?.name}</span>
-        
-        <button
-          onClick={controls.goToNextScene}
-          disabled={!controls.navigation.hasNextScene}
-          style={{
-            padding: '10px 20px',
-            background: 'transparent',
-            color: 'white',
-            border: '1px solid white',
-            borderRadius: '20px',
-          }}
-        >
-          →
-        </button>
-      </div>
-    </>
-  );
-}
-```
-
----
-
-## 🎓 Best Practices
-
-1. **Performance**: Sử dụng `useMemo` và `useCallback` khi cần
-2. **Type Safety**: Import types từ `'showroom-visualizer'`
-3. **Error Handling**: Check `tourReady` trước khi render UI
-4. **Responsive**: Test trên nhiều screen sizes
-5. **Accessibility**: Thêm ARIA labels cho custom buttons
-