@clikvn/showroom-visualizer 0.4.1-dev-02 → 0.4.1-dev-04

package/.claude/settings.local.json

@@ -16,4 +16,4 @@
     ],
     "deny": []
   }
-}
+}

package/DEVELOPMENT.md

@@ -18,6 +18,7 @@ showroom-visualizer/
 ### Workflow 1: Test trong Example App (Khuyến nghị ⭐)
 
 **Ưu điểm:**
+
 - ✅ Import trực tiếp từ source (`src/`) - không cần build
 - ✅ Hot reload cực nhanh
 - ✅ Debug dễ dàng với source maps
@@ -39,6 +40,7 @@ yarn dev
 ```
 
 **Modify và test:**
+
 - Thay đổi code trong `src/` → Auto reload
 - Thay đổi code trong `example/src/App.tsx` → Auto reload
 - Test custom layout bằng checkbox trong UI
@@ -68,15 +70,17 @@ Xem file `dist/index.html` để biết cách dùng Web Component.
 Thư viện này có **2 build outputs**:
 
 ### 1. NPM Package (`dist/index.js`)
+
 - **Dùng cho:** React/Next.js apps
 - **React:** External (dùng React của project)
 - **Hỗ trợ:** Custom layout overrides, custom components
-- **Import:** 
+- **Import:**
   ```tsx
   import { ShowroomVisualizer } from '@clikvn/showroom-visualizer';
   ```
 
 ### 2. Web Component (`dist/web.js`)
+
 - **Dùng cho:** Vanilla HTML/JS
 - **React:** Bundled (React 18 đã được bundle sẵn)
 - **Không hỗ trợ:** Custom layout overrides
@@ -96,7 +100,6 @@ Thư viện này có **2 build outputs**:
 2. Test trong `example/` app
 3. Build: `yarn build`
 
-
 ## 🐛 Troubleshooting
 
 ### Build errors
@@ -106,6 +109,7 @@ Thư viện này có **2 build outputs**:
 rm -rf dist
 yarn build
 ```
+
 ---
 
 ## ✨ Tips
@@ -117,4 +121,3 @@ yarn build
 ---
 
 Happy coding! 🚀
-

package/EXAMPLES.md

@@ -48,8 +48,10 @@ Ví dụ này tạo một custom UI với Floorplan có animation và controls
 **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
 
 ```
@@ -97,6 +99,7 @@ customLayout={{
 ```
 
 **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
@@ -251,7 +254,9 @@ import MiniMapMarkerDefault from '@clikvn/showroom-visualizer/dist/components/Sk
 import type { ComponentProps } from 'react';
 import './MyMarker.css'; // Import CSS file
 
-const MyCustomMarker: FC<ComponentProps<typeof MiniMapMarkerDefault>> = (props) => {
+const MyCustomMarker: FC<ComponentProps<typeof MiniMapMarkerDefault>> = (
+  props
+) => {
   return (
     <div className="my-marker-wrapper">
       <MiniMapMarkerDefault {...props} />
@@ -269,12 +274,12 @@ export default MyCustomMarker;
 .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;
+  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;
+  box-shadow: 0 0 15px rgba(255, 0, 0, 0.6) !important;
 }
 
 .my-marker-wrapper .marker__content {
@@ -286,7 +291,9 @@ export default MyCustomMarker;
   background: #ff0000 !important;
 }
 
-.my-marker-wrapper.color-only .minimap__marker:not(.minimap__marker--active) .marker__content {
+.my-marker-wrapper.color-only
+  .minimap__marker:not(.minimap__marker--active)
+  .marker__content {
   background: #0000ff !important;
 }
 ```
@@ -317,7 +324,9 @@ import ProductDetailDefault from '@clikvn/showroom-visualizer/dist/components/Sk
 import type { ComponentProps } from 'react';
 import './MyProductDetail.css';
 
-const MyProductDetail: FC<ComponentProps<typeof ProductDetailDefault>> = (props) => {
+const MyProductDetail: FC<ComponentProps<typeof ProductDetailDefault>> = (
+  props
+) => {
   return (
     <div className="my-product-detail-wrapper">
       <ProductDetailDefault {...props} />
@@ -340,24 +349,24 @@ export default MyProductDetail;
     @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;
@@ -404,6 +413,7 @@ export default MyProductDetail;
 ```
 
 **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
@@ -538,47 +548,50 @@ Floorplan
 
 ```tsx
 import { useState } from 'react';
-import { 
-  ShowroomVisualizer, 
-  useShowroomControls 
-} from 'showroom-visualizer';
+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' }}>
+    <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>
+        <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>
+        <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 => (
+          {controls.navigation.scenes.map((scene) => (
             <option key={scene.id} value={scene.id}>
               {scene.name}
             </option>
@@ -594,7 +607,7 @@ export default function App() {
     <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr' }}>
       {/* External Dashboard */}
       <ExternalDashboard />
-      
+
       {/* Tour without UI */}
       <ShowroomVisualizer
         config={{ tourCode: 'my-tour' }}
@@ -612,21 +625,23 @@ 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'
-    }}>
+    <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')}
@@ -647,7 +662,8 @@ function AutoPlayController() {
           <button onClick={scenario.stopScenario}>⏹</button>
           <div>
             Step {scenario.scenarioCurrentStep?.step || 0}
-            {scenario.activeScenario && ` of ${scenario.activeScenario.actions.length}`}
+            {scenario.activeScenario &&
+              ` of ${scenario.activeScenario.actions.length}`}
           </div>
         </>
       )}
@@ -659,45 +675,55 @@ function AutoPlayController() {
 ### Example 7: POI Explorer
 
 ```tsx
-import { ShowroomVisualizer, usePOIInteraction, useTourCore } from 'showroom-visualizer';
+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'
-    }}>
+    <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 => (
+        {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',
+              background:
+                poi.activePoiCode === poiItem.code ? '#e3f2fd' : '#f5f5f5',
               borderRadius: '5px',
               cursor: 'pointer',
-              border: poi.activePoiCode === poiItem.code ? '2px solid #2196F3' : 'none'
+              border:
+                poi.activePoiCode === poiItem.code
+                  ? '2px solid #2196F3'
+                  : 'none',
             }}
           >
             <strong>{poiItem.name}</strong>
@@ -719,7 +745,7 @@ function POIExplorer() {
 ### Example 8: Complete Custom UI với Tất cả Features
 
 ```tsx
-import { 
+import {
   ShowroomVisualizer,
   useShowroomControls,
   Floorplan,
@@ -728,64 +754,69 @@ import {
 
 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
-      }}>
+      <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>
+          <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
-      }}>
+      <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}
+          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}
@@ -793,27 +824,31 @@ function CompleteCustomUI() {
           Next →
         </button>
       </div>
-      
+
       {/* Right Sidebar - Pin Actions */}
-      <div style={{
-        position: 'absolute',
-        right: 20,
-        top: '50%',
-        transform: 'translateY(-50%)',
-        zIndex: 1000
-      }}>
+      <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
-        }}>
+        <div
+          style={{
+            position: 'absolute',
+            left: 20,
+            bottom: 100,
+            width: '250px',
+            zIndex: 1000,
+          }}
+        >
           <Floorplan />
         </div>
       )}
@@ -843,7 +878,7 @@ import { ShowroomVisualizer, useShowroomControls } from 'showroom-visualizer';
 function MobileUI() {
   const controls = useShowroomControls();
   const [menuOpen, setMenuOpen] = useState(false);
-  
+
   return (
     <>
       {/* Hamburger Menu Button */}
@@ -863,24 +898,26 @@ function MobileUI() {
       >
         ☰
       </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',
-        }}>
+        <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 => (
+          {controls.navigation.scenes.map((scene) => (
             <button
               key={scene.id}
               onClick={() => {
@@ -892,8 +929,10 @@ function MobileUI() {
                 width: '100%',
                 padding: '15px',
                 marginBottom: '10px',
-                background: scene.id === controls.activeScene?.id ? '#007bff' : '#f5f5f5',
-                color: scene.id === controls.activeScene?.id ? 'white' : 'black',
+                background:
+                  scene.id === controls.activeScene?.id ? '#007bff' : '#f5f5f5',
+                color:
+                  scene.id === controls.activeScene?.id ? 'white' : 'black',
                 border: 'none',
                 borderRadius: '5px',
                 textAlign: 'left',
@@ -904,22 +943,24 @@ function MobileUI() {
           ))}
         </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
-      }}>
+      <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}
@@ -933,9 +974,9 @@ function MobileUI() {
         >
           ←
         </button>
-        
+
         <span>{controls.activeScene?.name}</span>
-        
+
         <button
           onClick={controls.goToNextScene}
           disabled={!controls.navigation.hasNextScene}
@@ -964,4 +1005,3 @@ function MobileUI() {
 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
-