@liveroom-tech/react-immersive 1.3.3 → 1.3.5

package/dist/index.js

@@ -242,7 +242,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/styles/ModelViewer.css
-styleInject('.ri-viewer--license-checking,\n.ri-viewer--license-invalid {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  background-color: #f9f9f9;\n}\n.ri-viewer {\n  --ri-font-family:\n    Inter,\n    "Segoe UI",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --ri-viewer-bg: #1c1c1d;\n  --ri-viewer-text: #111827;\n  --ri-panel-bg: #ffffff;\n  --ri-panel-border: #e5e7eb;\n  --ri-panel-title: #111827;\n  --ri-panel-muted-text: #4b5563;\n  --ri-panel-subtle-text: #9ca3af;\n  --ri-panel-surface: #f9fafb;\n  --ri-panel-surface-hover: #f3f4f6;\n  --ri-panel-surface-border: #e5e7eb;\n  --ri-panel-button-text: #1f2937;\n  --ri-panel-accent: #2563eb;\n  --ri-panel-accent-contrast: #ffffff;\n  --ri-license-overlay-bg: rgba(0, 0, 0, 0.04);\n  --ri-license-overlay-border: rgba(0, 0, 0, 0.08);\n  --ri-license-overlay-text: #888;\n  --ri-license-overlay-error-bg: rgba(192, 57, 43, 0.06);\n  --ri-license-overlay-error-border: rgba(192, 57, 43, 0.2);\n  --ri-license-overlay-error-text: #c0392b;\n  --ri-sidepanel-font-family:\n    Inter,\n    "Segoe UI",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --ri-sidepanel-bg: var(--ri-databinding-bg, #111318);\n  --ri-sidepanel-open-btn-bg: rgba(20, 20, 20, 0.82);\n  --ri-sidepanel-open-btn-bg-hover: #27282b7e;\n  --ri-sidepanel-border: rgba(255, 255, 255, 0.06);\n  --ri-sidepanel-divider: rgba(255, 255, 255, 0.04);\n  --ri-sidepanel-border-strong: rgba(255, 255, 255, 0.08);\n  --ri-sidepanel-border-active: rgba(255, 255, 255, 0.18);\n  --ri-sidepanel-shadow-left: 4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-sidepanel-shadow-right: -4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-sidepanel-text: var(--ri-databinding-text, #f1f5f9);\n  --ri-sidepanel-text-emphasis: var(--ri-databinding-text-hover, #cbd5e1);\n  --ri-sidepanel-text-muted: var(--ri-databinding-text-muted, #94a3b8);\n  --ri-sidepanel-text-subtle: var(--ri-databinding-text-subtle, #64748b);\n  --ri-sidepanel-placeholder: var(--ri-databinding-text-faint, #475569);\n  --ri-sidepanel-surface: rgba(255, 255, 255, 0.05);\n  --ri-sidepanel-surface-hover: rgba(255, 255, 255, 0.1);\n  --ri-sidepanel-accent: #3b82f6;\n  --ri-sidepanel-accent-soft: rgba(59, 130, 246, 0.12);\n  --ri-databinding-bg: #111318;\n  --ri-databinding-border: rgba(255, 255, 255, 0.06);\n  --ri-databinding-border-strong: rgba(255, 255, 255, 0.08);\n  --ri-databinding-border-hover: rgba(255, 255, 255, 0.15);\n  --ri-databinding-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-databinding-font-family:\n    "Inter",\n    "Segoe UI",\n    sans-serif;\n  --ri-databinding-mono-font-family:\n    "JetBrains Mono",\n    "Fira Code",\n    "Menlo",\n    monospace;\n  --ri-databinding-text: #f1f5f9;\n  --ri-databinding-text-muted: #94a3b8;\n  --ri-databinding-text-subtle: #64748b;\n  --ri-databinding-text-faint: #475569;\n  --ri-databinding-text-hover: #cbd5e1;\n  --ri-databinding-surface: rgba(255, 255, 255, 0.03);\n  --ri-databinding-surface-hover: rgba(255, 255, 255, 0.06);\n  --ri-databinding-accent: #93c5fd;\n  --ri-databinding-accent-glow: rgba(147, 197, 253, 0.8);\n  --ri-databinding-accent-border: rgba(96, 165, 250, 0.55);\n  --ri-databinding-accent-gradient:\n    linear-gradient(\n      \n      135deg,\n      #1e3a8a 0%,\n      #1d4ed8 60%,\n      #2563eb 100% );\n  --ri-databinding-accent-gradient-active:\n    linear-gradient(\n      \n      135deg,\n      #1e3a8a 0%,\n      #1e40af 100% );\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  background: var(--ri-viewer-bg);\n  position: relative;\n  color: var(--ri-viewer-text);\n  font-family: var(--ri-font-family);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-synthesis: none;\n}\n.ri-viewer * {\n  box-sizing: border-box;\n}\n.ri-viewerLeft {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  min-width: 0;\n  position: relative;\n}\n.ri-viewerRight {\n  display: flex;\n  flex-shrink: 0;\n  min-width: 0;\n}\n.ri-panel {\n  width: 280px;\n  min-height: 0;\n  background: var(--ri-panel-bg);\n  border-right: 1px solid var(--ri-panel-border);\n  display: flex;\n  flex-direction: column;\n  padding: 20px;\n  overflow-y: auto;\n  flex-shrink: 0;\n  transition: margin-left 0.3s ease, transform 0.3s ease;\n}\n.ri-panel--open {\n  transform: translateX(0);\n  margin-left: 0;\n}\n.ri-panel--closed {\n  transform: translateX(-100%);\n  margin-left: -280px;\n}\n.ri-panelHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 12px;\n}\n.ri-panelTitle {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--ri-panel-title);\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ri-closeButton {\n  border: 0;\n  background: transparent;\n  color: var(--ri-panel-subtle-text);\n  font-size: 22px;\n  line-height: 1;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: color 0.2s ease;\n}\n.ri-closeButton:hover {\n  color: var(--ri-panel-muted-text);\n}\n.ri-json {\n  margin: 0 0 16px;\n  padding: 12px;\n  background: var(--ri-panel-surface);\n  border: 1px solid var(--ri-panel-surface-border);\n  border-radius: 12px;\n  font-size: 12px;\n  line-height: 1.55;\n  color: var(--ri-panel-button-text);\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.ri-divider {\n  border-top: 1px solid var(--ri-panel-border);\n  margin-bottom: 12px;\n}\n.ri-sectionLabel {\n  margin-bottom: 8px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--ri-panel-subtle-text);\n  text-transform: uppercase;\n  letter-spacing: 0.16em;\n}\n.ri-actionList {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.ri-actionButton {\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid var(--ri-panel-surface-border);\n  background: var(--ri-panel-surface);\n  color: var(--ri-panel-button-text);\n  padding: 10px 12px;\n  text-align: left;\n  font-size: 14px;\n  line-height: 1.4;\n  cursor: pointer;\n  transition:\n    background-color 0.2s ease,\n    border-color 0.2s ease,\n    color 0.2s ease;\n}\n.ri-actionButton:hover {\n  background: var(--ri-panel-surface-hover);\n  border-color: var(--ri-panel-border);\n}\n.ri-actionButton--active {\n  background: var(--ri-panel-accent);\n  border-color: var(--ri-panel-accent);\n  color: var(--ri-panel-accent-contrast);\n}\n.ri-actionButton--active:hover {\n  background: var(--ri-panel-accent);\n  border-color: var(--ri-panel-accent);\n}\n.ri-canvasArea {\n  flex: 1 1 auto;\n  position: relative;\n  min-width: 0;\n}\n.ri-canvasArea--measuring {\n  cursor: crosshair;\n}\n.ri-canvasArea canvas {\n  opacity: 1;\n  transition: opacity 0.18s ease;\n}\n.ri-canvasArea--positioning canvas {\n  opacity: 0;\n  transition: none;\n}\n.ri-bindingsMismatchBanner {\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 12px 7px 10px;\n  border-radius: 8px;\n  background: rgba(30, 20, 0, 0.88);\n  border: 1px solid rgba(251, 191, 36, 0.35);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  color: rgb(251, 191, 36);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.4;\n  white-space: nowrap;\n  pointer-events: auto;\n  max-width: calc(100% - 32px);\n  white-space: normal;\n  text-align: center;\n}\n.ri-bindingsMismatchBanner__icon {\n  flex-shrink: 0;\n}\n.ri-bindingsMismatchBanner__dismiss {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 4px;\n  padding: 2px;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  color: rgba(251, 191, 36, 0.7);\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n.ri-bindingsMismatchBanner__dismiss:hover {\n  color: rgb(251, 191, 36);\n  background: rgba(251, 191, 36, 0.12);\n}\n.ri-measureTools {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-measureButton {\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  color: rgba(255, 255, 255, 0.75);\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition:\n    background 0.15s ease,\n    color 0.15s ease,\n    border-color 0.15s ease;\n}\n.ri-measureButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.25);\n}\n.ri-measureButton:active {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-measureButton--active {\n  background: #22d3ee;\n  border-color: #22d3ee;\n  color: #06343c;\n}\n.ri-measureButton--active:hover {\n  background: #38dbf0;\n  color: #06343c;\n}\n.ri-measureHint {\n  padding: 6px 10px;\n  border-radius: 8px;\n  font-size: 12px;\n  line-height: 1;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  white-space: nowrap;\n}\n.ri-explodeTools {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-explodeSlider {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 34px;\n  padding: 0 12px;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 8px;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n.ri-explodeSlider input[type=range] {\n  width: 120px;\n  accent-color: #22d3ee;\n  cursor: pointer;\n}\n.ri-cinematicTools {\n  position: absolute;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-measureDot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #22d3ee;\n  border: 2px solid #fff;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);\n  pointer-events: none;\n}\n.ri-measureLabel {\n  padding: 3px 7px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  color: #06343c;\n  background: #22d3ee;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n  pointer-events: none;\n  user-select: none;\n}\n.ri-xrTools {\n  position: absolute;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-xrButton {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 34px;\n  padding: 0 10px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.16);\n  border-radius: 8px;\n  cursor: pointer;\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n.ri-xrButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n.ri-mobileHandoffBackdrop {\n  position: absolute;\n  z-index: 30;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  padding: 20px;\n  background: rgba(2, 6, 23, 0.68);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n}\n.ri-mobileHandoffDialog {\n  position: relative;\n  display: flex;\n  width: min(100%, 300px);\n  flex-direction: column;\n  align-items: center;\n  padding: 16px;\n  text-align: center;\n  color: #e2e8f0;\n  background: #0f172a;\n  border: 1px solid rgba(148, 163, 184, 0.3);\n  border-radius: 16px;\n  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);\n}\n.ri-mobileHandoffDialog > svg {\n  color: #67e8f9;\n}\n.ri-mobileHandoffDialog h2 {\n  margin: 12px 0 0;\n  font-size: 18px;\n  line-height: 1.25;\n  color: #fff;\n}\n.ri-mobileHandoffDialog p {\n  margin: 8px 0 16px;\n  font-size: 13px;\n  line-height: 1.5;\n  color: #cbd5e1;\n}\n.ri-mobileHandoffQr {\n  display: grid;\n  place-items: center;\n  padding: 10px;\n  background: #fff;\n  border-radius: 10px;\n}\n.ri-mobileHandoffDialog a {\n  margin-top: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #a5f3fc;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n.ri-mobileHandoffClose {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  display: grid;\n  width: 30px;\n  height: 30px;\n  place-items: center;\n  padding: 0;\n  color: #cbd5e1;\n  background: transparent;\n  border: 0;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.ri-mobileHandoffClose:hover {\n  color: #fff;\n  background: rgba(255, 255, 255, 0.1);\n}\n.ri-arHintOverlay {\n  position: absolute;\n  top: 18px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  width: min(calc(100% - 32px), 360px);\n  pointer-events: none;\n}\n.ri-arHint {\n  margin: 0 auto;\n  width: fit-content;\n  max-width: 100%;\n  padding: 6px 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.2;\n  text-align: center;\n  color: rgba(255, 255, 255, 0.92);\n  background: rgba(20, 20, 20, 0.58);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 999px;\n  user-select: none;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n.ri-arOverlay {\n  position: absolute;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  width: min(calc(100% - 32px), 420px);\n  pointer-events: none;\n}\n.ri-arControls {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n}\n.ri-arStatus,\n.ri-arActionButton {\n  max-width: 100%;\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.3;\n  text-align: center;\n  white-space: nowrap;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.16);\n  border-radius: 19px;\n  user-select: none;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n.ri-arStatus {\n  pointer-events: none;\n}\n.ri-arActionButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  cursor: pointer;\n  pointer-events: auto;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background 0.15s ease,\n    border-color 0.15s ease,\n    color 0.15s ease,\n    transform 0.15s ease;\n}\n.ri-arActionButton svg {\n  flex-shrink: 0;\n}\n.ri-arActionButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n.ri-arActionButton:active {\n  transform: scale(0.98);\n}\n.ri-arActionButton--primary {\n  color: #06343c;\n  background: #22d3ee;\n  border-color: transparent;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.ri-arActionButton--primary:hover {\n  background: #67e8f9;\n  border-color: transparent;\n}\n.ri-arActionButton.ri-arActionButton--active,\n.ri-arActionButton[aria-pressed=true],\n.ri-arActionButton.ri-arActionButton--active:hover,\n.ri-arActionButton[aria-pressed=true]:hover,\n.ri-arActionButton.ri-arActionButton--active:active,\n.ri-arActionButton[aria-pressed=true]:active {\n  color: #06343c;\n  background: #22d3ee;\n  border-color: transparent;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.ri-hiddenInput {\n  display: none;\n}\n.ri-popover {\n  position: absolute;\n  z-index: 50;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 16px;\n  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);\n  color: #111827;\n}\n.ri-popover--inline {\n  position: static;\n  z-index: auto;\n  width: 100%;\n  border-radius: 10px;\n  box-shadow: none;\n}\n.ri-popover--inline .react-colorful {\n  width: 100%;\n}\n.ri-popover--inline {\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text, #f1f5f9);\n}\n.ri-popover--inline .ri-popoverHeader {\n  border-bottom-color: var( --ri-databinding-border-strong, rgba(255, 255, 255, 0.08) );\n}\n.ri-popover--inline .ri-popoverLabel {\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-colorCode {\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-secondaryButton {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text, #f1f5f9);\n}\n.ri-popover--inline .ri-secondaryButton:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n.ri-popover--inline .ri-previewFrame {\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n}\n.ri-popover--inline .ri-emptyState {\n  border-color: var(--ri-databinding-border-hover, rgba(255, 255, 255, 0.15));\n  color: var(--ri-databinding-text-subtle, #64748b);\n}\n.ri-popover--inline .ri-uploadButton {\n  background: var(--ri-databinding-accent-gradient, #2563eb);\n  color: #ffffff;\n}\n.ri-popover--inline .ri-uploadButton:hover {\n  background: var(--ri-databinding-accent-gradient-active, #1d4ed8);\n}\n.ri-popover--inline .ri-removeButton {\n  background: transparent;\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-removeButton:hover {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n}\n.ri-popover--inline .ri-formatHint {\n  color: var(--ri-databinding-text-subtle, #64748b);\n}\n.ri-popoverHeader {\n  padding: 12px 16px;\n}\n.ri-popoverLabel {\n  margin: 0 0 8px;\n  font-size: 11px;\n  font-weight: 700;\n  color: #6b7280;\n  text-transform: uppercase;\n  letter-spacing: 0.16em;\n}\n.ri-inlineRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin-top: 8px;\n}\n.ri-colorCode {\n  font-size: 12px;\n  color: #9ca3af;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  text-transform: uppercase;\n}\n.ri-secondaryButton {\n  border: 1px solid #e5e7eb;\n  background: #f3f4f6;\n  color: #374151;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-secondaryButton:hover {\n  background: #e5e7eb;\n}\n.ri-materialBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-bottom: 12px;\n}\n.ri-previewFrame {\n  position: relative;\n  height: 112px;\n  border-radius: 12px;\n  overflow: hidden;\n  border: 1px solid #e5e7eb;\n}\n.ri-previewImage {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.ri-previewCaption {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  padding: 4px 8px;\n  color: #ffffff;\n  font-size: 10px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ri-emptyState {\n  height: 112px;\n  border-radius: 12px;\n  border: 2px dashed #e5e7eb;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  color: #d1d5db;\n  text-align: center;\n}\n.ri-uploadButton {\n  width: 100%;\n  border: 0;\n  border-radius: 10px;\n  background: #111827;\n  color: #ffffff;\n  padding: 10px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-uploadButton:hover {\n  background: #374151;\n}\n.ri-removeButton {\n  width: 100%;\n  border-radius: 10px;\n  border: 1px solid #e5e7eb;\n  background: #ffffff;\n  color: #6b7280;\n  padding: 8px 12px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-removeButton:hover {\n  background: #f9fafb;\n}\n.ri-formatHint {\n  margin: 0;\n  text-align: center;\n  font-size: 10px;\n  color: #d1d5db;\n}\n.ri-buttonContainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  position: absolute;\n  bottom: 12px;\n  left: 12px;\n  right: 12px;\n  z-index: 10;\n}\n.ri-tourControls {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  flex-shrink: 0;\n}\n.ri-rightControls {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: auto;\n}\n.ri-rightControls:only-child {\n  margin-left: auto;\n}\n.ri-navButtonSingle,\n.ri-tourButton,\n.ri-resetButton,\n.ri-downloadButton {\n  height: 34px;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  color: rgba(255, 255, 255, 0.75);\n  border-radius: 8px;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  cursor: pointer;\n  transition:\n    background 0.15s ease,\n    color 0.15s ease,\n    border-color 0.15s ease,\n    transform 0.15s ease;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.ri-navButtonSingle:hover:not(:disabled),\n.ri-tourButton:hover:not(:disabled),\n.ri-resetButton:hover:not(:disabled) {\n  background: rgba(40, 40, 40, 0.92);\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.25);\n}\n.ri-navButtonSingle:active:not(:disabled),\n.ri-tourButton:active:not(:disabled),\n.ri-resetButton:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-navButtonSingle:disabled,\n.ri-tourButton:disabled,\n.ri-resetButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.ri-navButtonSingle {\n  padding: 0 16px;\n  font-size: 13px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n}\n.ri-tourButton {\n  padding: 0 12px;\n  font-size: 13px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n}\n.ri-tourButton svg {\n  width: 15px;\n  height: 15px;\n  flex-shrink: 0;\n}\n.ri-tourButton--stop {\n  border-color: rgba(255, 68, 68, 0.4);\n  color: #ff6b6b;\n}\n.ri-tourButton--stop:hover:not(:disabled) {\n  background: rgba(255, 68, 68, 0.15);\n  border-color: rgba(255, 68, 68, 0.6);\n  color: #ff6b6b;\n}\n.ri-tourButton--stop:active:not(:disabled) {\n  background: #ff4444;\n  color: #fff;\n  border-color: #ff4444;\n}\n.ri-tourButton--next {\n  border-color: rgba(56, 219, 240, 0.3);\n  color: #38dbf0;\n}\n.ri-tourButton--next:hover:not(:disabled) {\n  background: rgba(56, 219, 240, 0.12);\n  border-color: rgba(56, 219, 240, 0.5);\n  color: #38dbf0;\n}\n.ri-tourButton--next:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-resetButton {\n  width: 34px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ri-resetButton svg {\n  width: 15px;\n  height: 15px;\n  pointer-events: none;\n  flex-shrink: 0;\n}\n.ri-resetButton:focus-visible {\n  outline: 2px solid rgba(255, 255, 255, 0.5);\n  outline-offset: 2px;\n}\n.ri-downloadWrapper {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n.ri-downloadButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 0 16px;\n  font-size: 13px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n.ri-downloadButton:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.72);\n  border-color: rgba(255, 255, 255, 0.3);\n  color: #fff;\n}\n.ri-downloadButton:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-downloadButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.ri-downloadButton__spinner {\n  display: inline-block;\n  width: 13px;\n  height: 13px;\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-top-color: #fff;\n  border-radius: 50%;\n  animation: ri-spin 0.7s linear infinite;\n  flex-shrink: 0;\n}\n.ri-downloadMenu {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  right: 0;\n  min-width: 168px;\n  background: rgba(20, 20, 20, 0.92);\n  border: 1px solid rgba(255, 255, 255, 0.14);\n  border-radius: 10px;\n  overflow: hidden;\n  z-index: 100;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  animation: ri-menuReveal 0.12s ease;\n}\n@keyframes ri-menuReveal {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ri-downloadMenuItem {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  width: 100%;\n  padding: 10px 14px;\n  font-size: 13px;\n  font-weight: 400;\n  color: #fff;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.1s ease;\n}\n.ri-downloadMenuItem:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.1);\n}\n.ri-downloadMenuItem:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.ri-downloadMenuDivider {\n  height: 1px;\n  background: rgba(255, 255, 255, 0.1);\n  margin: 0 10px;\n}\n@keyframes ri-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ri-annotationMarker {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: rgba(20, 20, 20, 0.82);\n  border: 2px solid rgba(255, 255, 255, 0.9);\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 700;\n  cursor: pointer;\n  z-index: 20;\n  user-select: none;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);\n  pointer-events: auto;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.ri-annotationMarker:hover {\n  transform: scale(1.08);\n  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);\n  background: rgba(40, 40, 40, 0.92);\n}\n.ri-annotationPopup {\n  position: absolute;\n  width: min(270px, calc(100vw - 32px));\n  background: rgba(20, 20, 20, 0.85);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 16px;\n  padding: 16px;\n  z-index: 30;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}\n.ri-annotationInput,\n.ri-annotationTextarea {\n  width: 100%;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  background: rgba(255, 255, 255, 0.05);\n  color: #e5e7eb;\n  border-radius: 10px;\n  padding: 10px 12px;\n  outline: none;\n  font-family: inherit;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n.ri-annotationInput {\n  font-size: 14px;\n  font-weight: 500;\n}\n.ri-annotationTextarea {\n  font-size: 13px;\n  resize: vertical;\n  min-height: 110px;\n}\n.ri-annotationInput:focus,\n.ri-annotationTextarea:focus {\n  border-color: #38dbf0;\n  box-shadow: 0 0 0 3px rgba(56, 219, 240, 0.12);\n}\n.ri-annotationActions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.ri-annotationOkBtn {\n  border: 0;\n  border-radius: 8px;\n  background: rgba(56, 219, 240, 0.8);\n  color: #06343c;\n  padding: 8px 18px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.2s ease, opacity 0.2s ease;\n}\n.ri-annotationOkBtn:hover:not(:disabled) {\n  background: #38dbf0;\n}\n.ri-annotationOkBtn:disabled,\n.ri-annotationOkBtn.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ri-annotationCancelBtn {\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  background: transparent;\n  color: #9ca3af;\n  border-radius: 8px;\n  padding: 8px 12px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n}\n.ri-annotationCancelBtn:hover {\n  background: rgba(255, 255, 255, 0.05);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ri-annotationIcons {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: #9ca3af;\n}\n.ri-annotationIcons svg {\n  flex-shrink: 0;\n}\n.ri-viewAnnotationPopup {\n  position: relative;\n  background: rgba(20, 20, 20, 0.85);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 8px;\n  padding: 12px 16px;\n  min-width: 200px;\n  max-width: min(280px, calc(100vw - 48px));\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);\n  pointer-events: auto;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  animation: ri-viewAnnotationFadeIn 0.15s ease-out;\n  margin-left: 24px;\n  margin-top: -20px;\n  isolation: isolate;\n  z-index: 1000;\n}\n.ri-viewAnnotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n.ri-viewAnnotationTitle {\n  margin: 0;\n  color: #e2e8f0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.ri-viewAnnotationClose {\n  background: transparent;\n  border: none;\n  color: #b7bdc6;\n  cursor: pointer;\n  font-size: 18px;\n  padding: 0 4px;\n  transition: color 0.2s;\n  line-height: 1;\n}\n.ri-viewAnnotationClose:hover {\n  color: #e2e8f0;\n}\n.ri-viewAnnotationDescription {\n  margin: 0;\n  color: #cbd5e1;\n  font-size: 13px;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n@keyframes ri-viewAnnotationFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-6px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n.ri-annotationNavSingle {\n  position: absolute;\n  bottom: 120px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  pointer-events: none;\n}\n.ri-annotationNavSingle > * {\n  pointer-events: auto;\n}\n.ri-navBadge {\n  background: rgba(255, 255, 255, 0.1);\n  padding: 2px 10px;\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.7);\n}\n.ri-annotationTitleHint {\n  background: rgba(0, 0, 0, 0.7);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  color: white;\n  padding: 8px 20px;\n  border-radius: 8px;\n  font-size: 13px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  text-align: center;\n  max-width: 350px;\n  animation: slideUp 0.3s ease;\n}\n.ri-annotationHintTitle {\n  font-weight: 600;\n  color: #e5e7eb;\n}\n.ri-annotationHintDesc {\n  font-size: 12px;\n  opacity: 0.6;\n  margin-top: 2px;\n  color: #d1d5db;\n}\n@keyframes slideUp {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@media (max-width: 768px) {\n  .ri-xrTools {\n    gap: 6px;\n  }\n  .ri-xrButton {\n    height: 34px;\n    gap: 6px;\n    padding: 0 8px;\n    font-size: 11px;\n  }\n  .ri-xrButton svg {\n    width: 14px;\n    height: 14px;\n  }\n  .ri-xrButtonPrefix {\n    display: none;\n  }\n  .ri-annotationNavSingle {\n    bottom: 100px;\n  }\n  .ri-navButtonSingle {\n    padding: 8px 20px;\n    font-size: 13px;\n    min-width: 110px;\n  }\n  .ri-annotationTitleHint {\n    padding: 6px 14px;\n    font-size: 12px;\n    max-width: 250px;\n  }\n  .ri-viewAnnotationPopup {\n    min-width: 160px;\n    max-width: 220px;\n    padding: 10px 12px;\n  }\n  .ri-viewAnnotationTitle {\n    font-size: 13px;\n  }\n  .ri-viewAnnotationDescription {\n    font-size: 12px;\n  }\n  .ri-buttonContainer {\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n  .ri-tourControls {\n    flex-wrap: wrap;\n  }\n  .ri-rightControls {\n    flex-wrap: wrap;\n  }\n}\n@media (max-width: 480px) {\n  .ri-xrTools {\n    gap: 5px;\n  }\n  .ri-xrButton {\n    height: 34px;\n    gap: 5px;\n    font-size: 10px;\n  }\n  .ri-xrButton svg {\n    width: 13px;\n    height: 13px;\n  }\n  .ri-annotationNavSingle {\n    bottom: 80px;\n  }\n  .ri-navButtonSingle {\n    padding: 6px 16px;\n    font-size: 12px;\n    min-width: 90px;\n    gap: 6px;\n  }\n  .ri-annotationTitleHint {\n    padding: 4px 10px;\n    font-size: 11px;\n    max-width: 200px;\n  }\n  .ri-navBadge {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n  .ri-tourButton {\n    padding: 0 8px;\n    font-size: 12px;\n  }\n  .ri-tourButton span {\n    display: none;\n  }\n  .ri-downloadButton {\n    padding: 0 10px;\n    font-size: 12px;\n  }\n  .ri-downloadButton span {\n    display: none;\n  }\n}\n.ri-canvasArea .bb-loadingOverlay {\n  position: absolute;\n  inset: 0;\n  z-index: 12;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  padding: 24px;\n  text-align: center;\n  border-radius: 14px;\n  background: rgba(15, 23, 42, 0.46);\n  backdrop-filter: blur(1px);\n}\n.ri-canvasArea .bb-loadingSpinner {\n  width: 40px;\n  height: 40px;\n  border-radius: 999px;\n  border: 3px solid rgba(226, 232, 240, 0.24);\n  border-top-color: #93c5fd;\n  animation: bb-spin 0.8s linear infinite;\n}\n.ri-canvasArea .bb-loadingMessage {\n  max-width: 320px;\n  color: #f7f8f9;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.5;\n}\n@keyframes bb-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ri-largeModelBanner {\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 12px 7px 10px;\n  border-radius: 8px;\n  background: rgba(30, 20, 0, 0.88);\n  border: 1px solid rgba(251, 191, 36, 0.35);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  color: rgb(251, 191, 36);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.4;\n  pointer-events: auto;\n  max-width: calc(100% - 32px);\n  white-space: normal;\n  text-align: center;\n}\n.ri-largeModelBanner--offset {\n  top: 64px;\n}\n.ri-largeModelBanner__icon {\n  flex-shrink: 0;\n}\n.ri-largeModelBanner__dismiss {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 4px;\n  padding: 2px;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  color: rgba(251, 191, 36, 0.7);\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n.ri-largeModelBanner__dismiss:hover {\n  color: rgb(251, 191, 36);\n  background: rgba(251, 191, 36, 0.12);\n}\n');
+styleInject('.ri-viewer--license-checking,\n.ri-viewer--license-invalid {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  background-color: #f9f9f9;\n}\n.ri-viewer {\n  --ri-font-family:\n    Inter,\n    "Segoe UI",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --ri-viewer-bg: #1c1c1d;\n  --ri-viewer-text: #111827;\n  --ri-panel-bg: #ffffff;\n  --ri-panel-border: #e5e7eb;\n  --ri-panel-title: #111827;\n  --ri-panel-muted-text: #4b5563;\n  --ri-panel-subtle-text: #9ca3af;\n  --ri-panel-surface: #f9fafb;\n  --ri-panel-surface-hover: #f3f4f6;\n  --ri-panel-surface-border: #e5e7eb;\n  --ri-panel-button-text: #1f2937;\n  --ri-panel-accent: #2563eb;\n  --ri-panel-accent-contrast: #ffffff;\n  --ri-license-overlay-bg: rgba(0, 0, 0, 0.04);\n  --ri-license-overlay-border: rgba(0, 0, 0, 0.08);\n  --ri-license-overlay-text: #888;\n  --ri-license-overlay-error-bg: rgba(192, 57, 43, 0.06);\n  --ri-license-overlay-error-border: rgba(192, 57, 43, 0.2);\n  --ri-license-overlay-error-text: #c0392b;\n  --ri-sidepanel-font-family:\n    Inter,\n    "Segoe UI",\n    Helvetica,\n    Arial,\n    sans-serif;\n  --ri-sidepanel-bg: var(--ri-databinding-bg, #111318);\n  --ri-sidepanel-open-btn-bg: rgba(20, 20, 20, 0.82);\n  --ri-sidepanel-open-btn-bg-hover: #27282b7e;\n  --ri-sidepanel-border: rgba(255, 255, 255, 0.06);\n  --ri-sidepanel-divider: rgba(255, 255, 255, 0.04);\n  --ri-sidepanel-border-strong: rgba(255, 255, 255, 0.08);\n  --ri-sidepanel-border-active: rgba(255, 255, 255, 0.18);\n  --ri-sidepanel-shadow-left: 4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-sidepanel-shadow-right: -4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-sidepanel-text: var(--ri-databinding-text, #f1f5f9);\n  --ri-sidepanel-text-emphasis: var(--ri-databinding-text-hover, #cbd5e1);\n  --ri-sidepanel-text-muted: var(--ri-databinding-text-muted, #94a3b8);\n  --ri-sidepanel-text-subtle: var(--ri-databinding-text-subtle, #64748b);\n  --ri-sidepanel-placeholder: var(--ri-databinding-text-faint, #475569);\n  --ri-sidepanel-surface: rgba(255, 255, 255, 0.05);\n  --ri-sidepanel-surface-hover: rgba(255, 255, 255, 0.1);\n  --ri-sidepanel-accent: #3b82f6;\n  --ri-sidepanel-accent-soft: rgba(59, 130, 246, 0.12);\n  --ri-databinding-bg: #111318;\n  --ri-databinding-border: rgba(255, 255, 255, 0.06);\n  --ri-databinding-border-strong: rgba(255, 255, 255, 0.08);\n  --ri-databinding-border-hover: rgba(255, 255, 255, 0.15);\n  --ri-databinding-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);\n  --ri-databinding-font-family:\n    "Inter",\n    "Segoe UI",\n    sans-serif;\n  --ri-databinding-mono-font-family:\n    "JetBrains Mono",\n    "Fira Code",\n    "Menlo",\n    monospace;\n  --ri-databinding-text: #f1f5f9;\n  --ri-databinding-text-muted: #94a3b8;\n  --ri-databinding-text-subtle: #64748b;\n  --ri-databinding-text-faint: #475569;\n  --ri-databinding-text-hover: #cbd5e1;\n  --ri-databinding-surface: rgba(255, 255, 255, 0.03);\n  --ri-databinding-surface-hover: rgba(255, 255, 255, 0.06);\n  --ri-databinding-accent: #93c5fd;\n  --ri-databinding-accent-glow: rgba(147, 197, 253, 0.8);\n  --ri-databinding-accent-border: rgba(96, 165, 250, 0.55);\n  --ri-databinding-accent-gradient:\n    linear-gradient(\n      \n      135deg,\n      #1e3a8a 0%,\n      #1d4ed8 60%,\n      #2563eb 100% );\n  --ri-databinding-accent-gradient-active:\n    linear-gradient(\n      \n      135deg,\n      #1e3a8a 0%,\n      #1e40af 100% );\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n  background: var(--ri-viewer-bg);\n  position: relative;\n  color: var(--ri-viewer-text);\n  font-family: var(--ri-font-family);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  font-synthesis: none;\n}\n.ri-viewer * {\n  box-sizing: border-box;\n}\n.ri-viewerLeft {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  min-width: 0;\n  position: relative;\n}\n.ri-viewerRight {\n  display: flex;\n  flex-shrink: 0;\n  min-width: 0;\n}\n.ri-panel {\n  width: 280px;\n  min-height: 0;\n  background: var(--ri-panel-bg);\n  border-right: 1px solid var(--ri-panel-border);\n  display: flex;\n  flex-direction: column;\n  padding: 20px;\n  overflow-y: auto;\n  flex-shrink: 0;\n  transition: margin-left 0.3s ease, transform 0.3s ease;\n}\n.ri-panel--open {\n  transform: translateX(0);\n  margin-left: 0;\n}\n.ri-panel--closed {\n  transform: translateX(-100%);\n  margin-left: -280px;\n}\n.ri-panelHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  margin-bottom: 12px;\n}\n.ri-panelTitle {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 700;\n  color: var(--ri-panel-title);\n  line-height: 1.4;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ri-closeButton {\n  border: 0;\n  background: transparent;\n  color: var(--ri-panel-subtle-text);\n  font-size: 22px;\n  line-height: 1;\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: color 0.2s ease;\n}\n.ri-closeButton:hover {\n  color: var(--ri-panel-muted-text);\n}\n.ri-json {\n  margin: 0 0 16px;\n  padding: 12px;\n  background: var(--ri-panel-surface);\n  border: 1px solid var(--ri-panel-surface-border);\n  border-radius: 12px;\n  font-size: 12px;\n  line-height: 1.55;\n  color: var(--ri-panel-button-text);\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.ri-divider {\n  border-top: 1px solid var(--ri-panel-border);\n  margin-bottom: 12px;\n}\n.ri-sectionLabel {\n  margin-bottom: 8px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--ri-panel-subtle-text);\n  text-transform: uppercase;\n  letter-spacing: 0.16em;\n}\n.ri-actionList {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.ri-actionButton {\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid var(--ri-panel-surface-border);\n  background: var(--ri-panel-surface);\n  color: var(--ri-panel-button-text);\n  padding: 10px 12px;\n  text-align: left;\n  font-size: 14px;\n  line-height: 1.4;\n  cursor: pointer;\n  transition:\n    background-color 0.2s ease,\n    border-color 0.2s ease,\n    color 0.2s ease;\n}\n.ri-actionButton:hover {\n  background: var(--ri-panel-surface-hover);\n  border-color: var(--ri-panel-border);\n}\n.ri-actionButton--active {\n  background: var(--ri-panel-accent);\n  border-color: var(--ri-panel-accent);\n  color: var(--ri-panel-accent-contrast);\n}\n.ri-actionButton--active:hover {\n  background: var(--ri-panel-accent);\n  border-color: var(--ri-panel-accent);\n}\n.ri-canvasArea {\n  flex: 1 1 auto;\n  position: relative;\n  min-width: 0;\n}\n.ri-canvasArea--measuring {\n  cursor: crosshair;\n}\n.ri-canvasArea canvas {\n  opacity: 1;\n  transition: opacity 0.18s ease;\n}\n.ri-canvasArea--positioning canvas {\n  opacity: 0;\n  transition: none;\n}\n.ri-bindingsMismatchBanner {\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 12px 7px 10px;\n  border-radius: 8px;\n  background: rgba(30, 20, 0, 0.88);\n  border: 1px solid rgba(251, 191, 36, 0.35);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  color: rgb(251, 191, 36);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.4;\n  white-space: nowrap;\n  pointer-events: auto;\n  max-width: calc(100% - 32px);\n  white-space: normal;\n  text-align: center;\n}\n.ri-bindingsMismatchBanner__icon {\n  flex-shrink: 0;\n}\n.ri-bindingsMismatchBanner__dismiss {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 4px;\n  padding: 2px;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  color: rgba(251, 191, 36, 0.7);\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n.ri-bindingsMismatchBanner__dismiss:hover {\n  color: rgb(251, 191, 36);\n  background: rgba(251, 191, 36, 0.12);\n}\n.ri-measureTools {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-measureButton {\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  color: rgba(255, 255, 255, 0.75);\n  border-radius: 8px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition:\n    background 0.15s ease,\n    color 0.15s ease,\n    border-color 0.15s ease;\n}\n.ri-measureButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.25);\n}\n.ri-measureButton:active {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-measureButton--active {\n  background: #22d3ee;\n  border-color: #22d3ee;\n  color: #06343c;\n}\n.ri-measureButton--active:hover {\n  background: #38dbf0;\n  color: #06343c;\n}\n.ri-measureHint {\n  padding: 6px 10px;\n  border-radius: 8px;\n  font-size: 12px;\n  line-height: 1;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  white-space: nowrap;\n}\n.ri-explodeTools {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-explodeSlider {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 34px;\n  padding: 0 12px;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 8px;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n.ri-explodeSlider input[type=range] {\n  width: 120px;\n  accent-color: #22d3ee;\n  cursor: pointer;\n}\n.ri-cinematicTools {\n  position: absolute;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-measureDot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #22d3ee;\n  border: 2px solid #fff;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);\n  pointer-events: none;\n}\n.ri-measureLabel {\n  padding: 3px 7px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  color: #06343c;\n  background: #22d3ee;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n  pointer-events: none;\n  user-select: none;\n}\n.ri-xrTools {\n  position: absolute;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ri-xrButton {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: 34px;\n  padding: 0 10px;\n  font-size: 13px;\n  font-weight: 500;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.16);\n  border-radius: 8px;\n  cursor: pointer;\n  touch-action: manipulation;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n.ri-xrButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n.ri-mobileHandoffBackdrop {\n  position: absolute;\n  z-index: 30;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  padding: 20px;\n  background: rgba(2, 6, 23, 0.68);\n  backdrop-filter: blur(5px);\n  -webkit-backdrop-filter: blur(5px);\n}\n.ri-mobileHandoffDialog {\n  position: relative;\n  display: flex;\n  width: min(100%, 300px);\n  flex-direction: column;\n  align-items: center;\n  padding: 16px;\n  text-align: center;\n  color: #e2e8f0;\n  background: #0f172a;\n  border: 1px solid rgba(148, 163, 184, 0.3);\n  border-radius: 16px;\n  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);\n}\n.ri-mobileHandoffDialog > svg {\n  color: #67e8f9;\n}\n.ri-mobileHandoffDialog h2 {\n  margin: 12px 0 0;\n  font-size: 18px;\n  line-height: 1.25;\n  color: #fff;\n}\n.ri-mobileHandoffDialog p {\n  margin: 8px 0 16px;\n  font-size: 13px;\n  line-height: 1.5;\n  color: #cbd5e1;\n}\n.ri-mobileHandoffQr {\n  display: grid;\n  place-items: center;\n  padding: 10px;\n  background: #fff;\n  border-radius: 10px;\n}\n.ri-mobileHandoffDialog a {\n  margin-top: 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #a5f3fc;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n.ri-mobileHandoffClose {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  display: grid;\n  width: 30px;\n  height: 30px;\n  place-items: center;\n  padding: 0;\n  color: #cbd5e1;\n  background: transparent;\n  border: 0;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.ri-mobileHandoffClose:hover {\n  color: #fff;\n  background: rgba(255, 255, 255, 0.1);\n}\n.ri-arHintOverlay {\n  position: absolute;\n  top: 18px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  width: min(calc(100% - 32px), 360px);\n  pointer-events: none;\n}\n.ri-arHint {\n  margin: 0 auto;\n  width: fit-content;\n  max-width: 100%;\n  padding: 6px 12px;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.2;\n  text-align: center;\n  color: rgba(255, 255, 255, 0.92);\n  background: rgba(20, 20, 20, 0.58);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 999px;\n  user-select: none;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n.ri-arOverlay {\n  position: absolute;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  width: min(calc(100% - 32px), 420px);\n  pointer-events: none;\n}\n.ri-arControls {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n}\n.ri-arStatus,\n.ri-arActionButton {\n  max-width: 100%;\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.3;\n  text-align: center;\n  white-space: nowrap;\n  color: #fff;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.16);\n  border-radius: 19px;\n  user-select: none;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n.ri-arStatus {\n  pointer-events: none;\n}\n.ri-arActionButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  cursor: pointer;\n  pointer-events: auto;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background 0.15s ease,\n    border-color 0.15s ease,\n    color 0.15s ease,\n    transform 0.15s ease;\n}\n.ri-arActionButton svg {\n  flex-shrink: 0;\n}\n.ri-arActionButton:hover {\n  background: rgba(40, 40, 40, 0.92);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n.ri-arActionButton:active {\n  transform: scale(0.98);\n}\n.ri-arActionButton--primary {\n  color: #06343c;\n  background: #22d3ee;\n  border-color: transparent;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.ri-arActionButton--primary:hover {\n  background: #67e8f9;\n  border-color: transparent;\n}\n.ri-arActionButton.ri-arActionButton--active,\n.ri-arActionButton[aria-pressed=true],\n.ri-arActionButton.ri-arActionButton--active:hover,\n.ri-arActionButton[aria-pressed=true]:hover,\n.ri-arActionButton.ri-arActionButton--active:active,\n.ri-arActionButton[aria-pressed=true]:active {\n  color: #06343c;\n  background: #22d3ee;\n  border-color: transparent;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.ri-hiddenInput {\n  display: none;\n}\n.ri-popover {\n  position: absolute;\n  z-index: 50;\n  background: #ffffff;\n  border: 1px solid #e5e7eb;\n  border-radius: 16px;\n  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);\n  color: #111827;\n}\n.ri-popover--inline {\n  position: static;\n  z-index: auto;\n  width: 100%;\n  border-radius: 10px;\n  box-shadow: none;\n}\n.ri-popover--inline .react-colorful {\n  width: 100%;\n}\n.ri-popover--inline {\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text, #f1f5f9);\n}\n.ri-popover--inline .ri-popoverHeader {\n  border-bottom-color: var( --ri-databinding-border-strong, rgba(255, 255, 255, 0.08) );\n}\n.ri-popover--inline .ri-popoverLabel {\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-colorCode {\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-secondaryButton {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text, #f1f5f9);\n}\n.ri-popover--inline .ri-secondaryButton:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n.ri-popover--inline .ri-previewFrame {\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n}\n.ri-popover--inline .ri-emptyState {\n  border-color: var(--ri-databinding-border-hover, rgba(255, 255, 255, 0.15));\n  color: var(--ri-databinding-text-subtle, #64748b);\n}\n.ri-popover--inline .ri-uploadButton {\n  background: var(--ri-databinding-accent-gradient, #2563eb);\n  color: #ffffff;\n}\n.ri-popover--inline .ri-uploadButton:hover {\n  background: var(--ri-databinding-accent-gradient-active, #1d4ed8);\n}\n.ri-popover--inline .ri-removeButton {\n  background: transparent;\n  border-color: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  color: var(--ri-databinding-text-muted, #94a3b8);\n}\n.ri-popover--inline .ri-removeButton:hover {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n}\n.ri-popover--inline .ri-formatHint {\n  color: var(--ri-databinding-text-subtle, #64748b);\n}\n.ri-popoverHeader {\n  padding: 12px 16px;\n}\n.ri-popoverLabel {\n  margin: 0 0 8px;\n  font-size: 11px;\n  font-weight: 700;\n  color: #6b7280;\n  text-transform: uppercase;\n  letter-spacing: 0.16em;\n}\n.ri-inlineRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin-top: 8px;\n}\n.ri-colorCode {\n  font-size: 12px;\n  color: #9ca3af;\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    monospace;\n  text-transform: uppercase;\n}\n.ri-secondaryButton {\n  border: 1px solid #e5e7eb;\n  background: #f3f4f6;\n  color: #374151;\n  border-radius: 8px;\n  padding: 6px 10px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-secondaryButton:hover {\n  background: #e5e7eb;\n}\n.ri-materialBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding-left: 12px;\n  padding-right: 12px;\n  padding-bottom: 12px;\n}\n.ri-previewFrame {\n  position: relative;\n  height: 112px;\n  border-radius: 12px;\n  overflow: hidden;\n  border: 1px solid #e5e7eb;\n}\n.ri-previewImage {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.ri-previewCaption {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  padding: 4px 8px;\n  color: #ffffff;\n  font-size: 10px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ri-emptyState {\n  height: 112px;\n  border-radius: 12px;\n  border: 2px dashed #e5e7eb;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  color: #d1d5db;\n  text-align: center;\n}\n.ri-uploadButton {\n  width: 100%;\n  border: 0;\n  border-radius: 10px;\n  background: #111827;\n  color: #ffffff;\n  padding: 10px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-uploadButton:hover {\n  background: #374151;\n}\n.ri-removeButton {\n  width: 100%;\n  border-radius: 10px;\n  border: 1px solid #e5e7eb;\n  background: #ffffff;\n  color: #6b7280;\n  padding: 8px 12px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ri-removeButton:hover {\n  background: #f9fafb;\n}\n.ri-formatHint {\n  margin: 0;\n  text-align: center;\n  font-size: 10px;\n  color: #d1d5db;\n}\n.ri-buttonContainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  position: absolute;\n  bottom: 12px;\n  left: 12px;\n  right: 12px;\n  z-index: 10;\n}\n.ri-tourControls {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  flex-shrink: 0;\n}\n.ri-rightControls {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: auto;\n}\n.ri-rightControls:only-child {\n  margin-left: auto;\n}\n.ri-navButtonSingle,\n.ri-tourButton,\n.ri-resetButton,\n.ri-downloadButton {\n  height: 34px;\n  background: rgba(20, 20, 20, 0.82);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  color: rgba(255, 255, 255, 0.75);\n  border-radius: 8px;\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  cursor: pointer;\n  transition:\n    background 0.15s ease,\n    color 0.15s ease,\n    border-color 0.15s ease,\n    transform 0.15s ease;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.ri-navButtonSingle:hover:not(:disabled),\n.ri-tourButton:hover:not(:disabled),\n.ri-resetButton:hover:not(:disabled) {\n  background: rgba(40, 40, 40, 0.92);\n  color: #fff;\n  border-color: rgba(255, 255, 255, 0.25);\n}\n.ri-navButtonSingle:active:not(:disabled),\n.ri-tourButton:active:not(:disabled),\n.ri-resetButton:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-navButtonSingle:disabled,\n.ri-tourButton:disabled,\n.ri-resetButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.ri-navButtonSingle {\n  padding: 0 16px;\n  font-size: 13px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n}\n.ri-tourButton {\n  padding: 0 12px;\n  font-size: 13px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n}\n.ri-tourButton svg {\n  width: 15px;\n  height: 15px;\n  flex-shrink: 0;\n}\n.ri-tourButton--stop {\n  border-color: rgba(255, 68, 68, 0.4);\n  color: #ff6b6b;\n}\n.ri-tourButton--stop:hover:not(:disabled) {\n  background: rgba(255, 68, 68, 0.15);\n  border-color: rgba(255, 68, 68, 0.6);\n  color: #ff6b6b;\n}\n.ri-tourButton--stop:active:not(:disabled) {\n  background: #ff4444;\n  color: #fff;\n  border-color: #ff4444;\n}\n.ri-tourButton--next {\n  border-color: rgba(56, 219, 240, 0.3);\n  color: #38dbf0;\n}\n.ri-tourButton--next:hover:not(:disabled) {\n  background: rgba(56, 219, 240, 0.12);\n  border-color: rgba(56, 219, 240, 0.5);\n  color: #38dbf0;\n}\n.ri-tourButton--next:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-resetButton {\n  width: 34px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ri-resetButton svg {\n  width: 15px;\n  height: 15px;\n  pointer-events: none;\n  flex-shrink: 0;\n}\n.ri-resetButton:focus-visible {\n  outline: 2px solid rgba(255, 255, 255, 0.5);\n  outline-offset: 2px;\n}\n.ri-downloadWrapper {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n.ri-downloadButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 0 16px;\n  font-size: 13px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n.ri-downloadButton:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.72);\n  border-color: rgba(255, 255, 255, 0.3);\n  color: #fff;\n}\n.ri-downloadButton:active:not(:disabled) {\n  background: #38dbf0;\n  color: #06343c;\n  border-color: #38dbf0;\n}\n.ri-downloadButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.ri-downloadButton__spinner {\n  display: inline-block;\n  width: 13px;\n  height: 13px;\n  border: 2px solid rgba(255, 255, 255, 0.3);\n  border-top-color: #fff;\n  border-radius: 50%;\n  animation: ri-spin 0.7s linear infinite;\n  flex-shrink: 0;\n}\n.ri-downloadMenu {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  right: 0;\n  min-width: 168px;\n  background: rgba(20, 20, 20, 0.92);\n  border: 1px solid rgba(255, 255, 255, 0.14);\n  border-radius: 10px;\n  overflow: hidden;\n  z-index: 100;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  animation: ri-menuReveal 0.12s ease;\n}\n@keyframes ri-menuReveal {\n  from {\n    opacity: 0;\n    transform: translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ri-downloadMenuItem {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  width: 100%;\n  padding: 10px 14px;\n  font-size: 13px;\n  font-weight: 400;\n  color: #fff;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.1s ease;\n  text-wrap: nowrap;\n}\n.ri-downloadMenuItem:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.1);\n}\n.ri-downloadMenuItem:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.ri-downloadMenuDivider {\n  height: 1px;\n  background: rgba(255, 255, 255, 0.1);\n  margin: 0 10px;\n}\n.ri-downloadMenuNotice {\n  max-width: 220px;\n  padding: 8px 14px 11px;\n  color: #fca5a5;\n  font-size: 11px;\n  line-height: 1.4;\n}\n@keyframes ri-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ri-annotationMarker {\n  position: relative;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: rgba(20, 20, 20, 0.82);\n  border: 2px solid rgba(255, 255, 255, 0.9);\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  font-weight: 700;\n  cursor: pointer;\n  z-index: 20;\n  user-select: none;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);\n  pointer-events: auto;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.ri-annotationMarker:hover {\n  transform: scale(1.08);\n  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);\n  background: rgba(40, 40, 40, 0.92);\n}\n.ri-annotationPopup {\n  position: absolute;\n  width: min(270px, calc(100vw - 32px));\n  background: rgba(20, 20, 20, 0.85);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 16px;\n  padding: 16px;\n  z-index: 30;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}\n.ri-annotationInput,\n.ri-annotationTextarea {\n  width: 100%;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  background: rgba(255, 255, 255, 0.05);\n  color: #e5e7eb;\n  border-radius: 10px;\n  padding: 10px 12px;\n  outline: none;\n  font-family: inherit;\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n.ri-annotationInput {\n  font-size: 14px;\n  font-weight: 500;\n}\n.ri-annotationTextarea {\n  font-size: 13px;\n  resize: vertical;\n  min-height: 110px;\n}\n.ri-annotationInput:focus,\n.ri-annotationTextarea:focus {\n  border-color: #38dbf0;\n  box-shadow: 0 0 0 3px rgba(56, 219, 240, 0.12);\n}\n.ri-annotationActions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.ri-annotationOkBtn {\n  border: 0;\n  border-radius: 8px;\n  background: rgba(56, 219, 240, 0.8);\n  color: #06343c;\n  padding: 8px 18px;\n  font-size: 13px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.2s ease, opacity 0.2s ease;\n}\n.ri-annotationOkBtn:hover:not(:disabled) {\n  background: #38dbf0;\n}\n.ri-annotationOkBtn:disabled,\n.ri-annotationOkBtn.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ri-annotationCancelBtn {\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  background: transparent;\n  color: #9ca3af;\n  border-radius: 8px;\n  padding: 8px 12px;\n  font-size: 13px;\n  cursor: pointer;\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n}\n.ri-annotationCancelBtn:hover {\n  background: rgba(255, 255, 255, 0.05);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ri-annotationIcons {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: #9ca3af;\n}\n.ri-annotationIcons svg {\n  flex-shrink: 0;\n}\n.ri-viewAnnotationPopup {\n  position: relative;\n  background: rgba(20, 20, 20, 0.85);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 8px;\n  padding: 12px 16px;\n  min-width: 200px;\n  max-width: min(280px, calc(100vw - 48px));\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);\n  pointer-events: auto;\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  animation: ri-viewAnnotationFadeIn 0.15s ease-out;\n  margin-left: 24px;\n  margin-top: -20px;\n  isolation: isolate;\n  z-index: 1000;\n}\n.ri-viewAnnotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n.ri-viewAnnotationTitle {\n  margin: 0;\n  color: #e2e8f0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.ri-viewAnnotationClose {\n  background: transparent;\n  border: none;\n  color: #b7bdc6;\n  cursor: pointer;\n  font-size: 18px;\n  padding: 0 4px;\n  transition: color 0.2s;\n  line-height: 1;\n}\n.ri-viewAnnotationClose:hover {\n  color: #e2e8f0;\n}\n.ri-viewAnnotationDescription {\n  margin: 0;\n  color: #cbd5e1;\n  font-size: 13px;\n  line-height: 1.4;\n  word-wrap: break-word;\n}\n@keyframes ri-viewAnnotationFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-6px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n.ri-annotationNavSingle {\n  position: absolute;\n  bottom: 120px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  pointer-events: none;\n}\n.ri-annotationNavSingle > * {\n  pointer-events: auto;\n}\n.ri-navBadge {\n  background: rgba(255, 255, 255, 0.1);\n  padding: 2px 10px;\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 400;\n  color: rgba(255, 255, 255, 0.7);\n}\n.ri-annotationTitleHint {\n  background: rgba(0, 0, 0, 0.7);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n  color: white;\n  padding: 8px 20px;\n  border-radius: 8px;\n  font-size: 13px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  text-align: center;\n  max-width: 350px;\n  animation: slideUp 0.3s ease;\n}\n.ri-annotationHintTitle {\n  font-weight: 600;\n  color: #e5e7eb;\n}\n.ri-annotationHintDesc {\n  font-size: 12px;\n  opacity: 0.6;\n  margin-top: 2px;\n  color: #d1d5db;\n}\n@keyframes slideUp {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ri-canvasArea .bb-loadingOverlay {\n  position: absolute;\n  inset: 0;\n  z-index: 12;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  padding: 24px;\n  text-align: center;\n  border-radius: 14px;\n  background: rgba(15, 23, 42, 0.46);\n  backdrop-filter: blur(1px);\n}\n.ri-canvasArea .bb-loadingSpinner {\n  width: 40px;\n  height: 40px;\n  border-radius: 999px;\n  border: 3px solid rgba(226, 232, 240, 0.24);\n  border-top-color: #93c5fd;\n  animation: bb-spin 0.8s linear infinite;\n}\n.ri-canvasArea .bb-loadingMessage {\n  max-width: 320px;\n  color: #f7f8f9;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1.5;\n}\n@keyframes bb-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ri-largeModelBanner {\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 12px 7px 10px;\n  border-radius: 8px;\n  background: rgba(30, 20, 0, 0.88);\n  border: 1px solid rgba(251, 191, 36, 0.35);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n  color: rgb(251, 191, 36);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.4;\n  pointer-events: auto;\n  max-width: calc(100% - 32px);\n  white-space: normal;\n  text-align: center;\n}\n.ri-largeModelBanner--offset {\n  top: 64px;\n}\n.ri-largeModelBanner__icon {\n  flex-shrink: 0;\n}\n.ri-largeModelBanner__dismiss {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 4px;\n  padding: 2px;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  color: rgba(251, 191, 36, 0.7);\n  cursor: pointer;\n  transition: color 0.15s ease, background 0.15s ease;\n}\n.ri-largeModelBanner__dismiss:hover {\n  color: rgb(251, 191, 36);\n  background: rgba(251, 191, 36, 0.12);\n}\n@media (max-width: 768px) {\n  .ri-xrTools {\n    gap: 6px;\n  }\n  .ri-xrButton {\n    height: 34px;\n    gap: 6px;\n    padding: 0 8px;\n    font-size: 11px;\n  }\n  .ri-xrButton svg {\n    width: 14px;\n    height: 14px;\n  }\n  .ri-xrButtonPrefix {\n    display: none;\n  }\n  .ri-annotationNavSingle {\n    bottom: 100px;\n  }\n  .ri-navButtonSingle {\n    padding: 8px 20px;\n    font-size: 13px;\n    min-width: 110px;\n  }\n  .ri-annotationTitleHint {\n    padding: 6px 14px;\n    font-size: 12px;\n    max-width: 250px;\n  }\n  .ri-viewAnnotationPopup {\n    min-width: 160px;\n    max-width: 220px;\n    padding: 10px 12px;\n  }\n  .ri-viewAnnotationTitle {\n    font-size: 13px;\n  }\n  .ri-viewAnnotationDescription {\n    font-size: 12px;\n  }\n  .ri-buttonContainer {\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n  .ri-tourControls {\n    flex-wrap: wrap;\n  }\n  .ri-rightControls {\n    flex-wrap: wrap;\n  }\n}\n@media (max-width: 480px) {\n  .ri-xrTools {\n    gap: 5px;\n  }\n  .ri-xrButton {\n    height: 34px;\n    gap: 5px;\n    font-size: 10px;\n  }\n  .ri-xrButton svg {\n    width: 13px;\n    height: 13px;\n  }\n  .ri-annotationNavSingle {\n    bottom: 80px;\n  }\n  .ri-navButtonSingle {\n    padding: 6px 16px;\n    font-size: 12px;\n    min-width: 90px;\n    gap: 6px;\n  }\n  .ri-annotationTitleHint {\n    padding: 4px 10px;\n    font-size: 11px;\n    max-width: 200px;\n  }\n  .ri-navBadge {\n    font-size: 10px;\n    padding: 1px 6px;\n  }\n  .ri-tourButton {\n    padding: 0 8px;\n    font-size: 12px;\n  }\n  .ri-tourButton span {\n    display: none;\n  }\n  .ri-downloadButton {\n    padding: 0 10px;\n    font-size: 12px;\n  }\n  .ri-downloadButton span {\n    display: none;\n  }\n}\n');
 
 // src/components/LicenseOverlay.tsx
 var import_lucide_react = require("lucide-react");
@@ -367,6 +367,208 @@ function exportSceneMesh({
   });
 }
 
+// src/components/ModelViewer/internal/exportUvLayout.ts
+var import_fflate = require("fflate");
+var SVG_SIZE = 2048;
+var MESH_COLORS = [
+  "#00e5ff",
+  "#ff4fd8",
+  "#ffe45e",
+  "#7cff6b",
+  "#ff784f",
+  "#a78bfa",
+  "#38bdf8",
+  "#fb7185"
+];
+function escapeXml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&apos;");
+}
+function slugify(value, fallback) {
+  const slug = value.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return slug || fallback;
+}
+function safeFilenameStem(value) {
+  return slugify(value, "model");
+}
+function getVertexIndex(geometry, elementIndex) {
+  return geometry.index ? Math.round(geometry.index.getX(elementIndex)) : elementIndex;
+}
+function readTriangle(geometry, uv, elementIndex) {
+  const a = getVertexIndex(geometry, elementIndex);
+  const b = getVertexIndex(geometry, elementIndex + 1);
+  const c = getVertexIndex(geometry, elementIndex + 2);
+  if (a >= uv.count || b >= uv.count || c >= uv.count) return null;
+  const values = [
+    { index: a, u: uv.getX(a), v: uv.getY(a) },
+    { index: b, u: uv.getX(b), v: uv.getY(b) },
+    { index: c, u: uv.getX(c), v: uv.getY(c) }
+  ];
+  return values.every(
+    (vertex) => Number.isFinite(vertex.u) && Number.isFinite(vertex.v)
+  ) ? values : null;
+}
+function uvPointKey(vertex) {
+  return `${vertex.u.toFixed(6)},${vertex.v.toFixed(6)}`;
+}
+function addEdge(edges, start, end, indexed) {
+  let startKey;
+  let endKey;
+  if (indexed) {
+    startKey = start.index;
+    endKey = end.index;
+  } else {
+    startKey = uvPointKey(start);
+    endKey = uvPointKey(end);
+  }
+  const key = startKey < endKey ? `${startKey}|${endKey}` : `${endKey}|${startKey}`;
+  const existing = edges.get(key);
+  if (existing) {
+    existing.count += 1;
+  } else {
+    edges.set(key, { count: 1, start, end });
+  }
+}
+function addTriangleEdges(edges, triangle, indexed) {
+  addEdge(edges, triangle[0], triangle[1], indexed);
+  addEdge(edges, triangle[1], triangle[2], indexed);
+  addEdge(edges, triangle[2], triangle[0], indexed);
+}
+function materialForIndex(material, materialIndex) {
+  if (!Array.isArray(material)) return material;
+  return material[materialIndex] ?? null;
+}
+function collectUvLayouts(scene) {
+  const layouts = /* @__PURE__ */ new Map();
+  let unnamedMeshIndex = 0;
+  let unnamedMaterialIndex = 0;
+  let meshColorIndex = 0;
+  scene.traverse((node) => {
+    const mesh = node;
+    if (!mesh.isMesh || !mesh.geometry || !mesh.material) return;
+    const geometry = mesh.geometry;
+    const uv = geometry.getAttribute("uv");
+    if (!uv || uv.itemSize < 2 || uv.count < 3) return;
+    unnamedMeshIndex += 1;
+    const meshName = mesh.name || `Mesh ${unnamedMeshIndex}`;
+    const elementCount = geometry.index?.count ?? uv.count;
+    const groups = geometry.groups.length > 0 ? geometry.groups : [{ start: 0, count: elementCount, materialIndex: 0 }];
+    for (const group of groups) {
+      const materialIndex = group.materialIndex ?? 0;
+      const material = materialForIndex(mesh.material, materialIndex);
+      if (!material) continue;
+      let layout = layouts.get(material.uuid);
+      if (!layout) {
+        unnamedMaterialIndex += 1;
+        layout = {
+          name: material.name || `Material ${unnamedMaterialIndex}`,
+          layers: /* @__PURE__ */ new Map()
+        };
+        layouts.set(material.uuid, layout);
+      }
+      let layer = layout.layers.get(mesh.uuid);
+      if (!layer) {
+        layer = {
+          name: meshName,
+          color: MESH_COLORS[meshColorIndex % MESH_COLORS.length],
+          edges: /* @__PURE__ */ new Map()
+        };
+        meshColorIndex += 1;
+        layout.layers.set(mesh.uuid, layer);
+      }
+      const start = Math.max(0, group.start);
+      const end = Math.min(elementCount, start + group.count);
+      for (let elementIndex = start; elementIndex + 2 < end; elementIndex += 3) {
+        const triangle = readTriangle(geometry, uv, elementIndex);
+        if (triangle) {
+          addTriangleEdges(layer.edges, triangle, Boolean(geometry.index));
+        }
+      }
+    }
+  });
+  return [...layouts.values()].filter(
+    (layout) => [...layout.layers.values()].some((layer) => layer.edges.size > 0)
+  );
+}
+function coordinate(value) {
+  return (value * SVG_SIZE).toFixed(2);
+}
+function edgePath(edge) {
+  return `M${coordinate(edge.start.u)} ${coordinate(1 - edge.start.v)}L${coordinate(edge.end.u)} ${coordinate(1 - edge.end.v)}`;
+}
+function renderSvg(layout) {
+  const materialName = escapeXml(layout.name);
+  const layers = [...layout.layers.values()].filter((layer) => layer.edges.size > 0).map((layer, index) => {
+    const name = escapeXml(layer.name);
+    const id = `${slugify(layer.name, "mesh")}-${index + 1}`;
+    const allEdges = [...layer.edges.values()];
+    const boundaryEdges = allEdges.filter((edge) => edge.count === 1);
+    const visibleEdges = boundaryEdges.length > 0 ? boundaryEdges : allEdges;
+    const paths = visibleEdges.map(edgePath).join("");
+    return [
+      `  <g id="${id}" data-mesh="${name}" fill="none" stroke="${layer.color}"`,
+      '     stroke-width="1" stroke-linejoin="round" vector-effect="non-scaling-stroke">',
+      `    <title>${name}</title>`,
+      `    <path d="${paths}"/>`,
+      "  </g>"
+    ].join("\n");
+  }).join("\n");
+  return [
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${SVG_SIZE}" height="${SVG_SIZE}" viewBox="0 0 ${SVG_SIZE} ${SVG_SIZE}">`,
+    `  <title>${materialName} UV layout</title>`,
+    "  <desc>UV0 island-outline template exported by React Immersive. The SVG canvas maps to the complete 0\u20131 texture area.</desc>",
+    '  <rect width="2048" height="2048" fill="none" stroke="#94a3b8" stroke-width="2"/>',
+    layers,
+    "</svg>"
+  ].join("\n");
+}
+function buildUvLayoutFiles(scene, downloadFilename = "model") {
+  const layouts = collectUvLayouts(scene);
+  const stem = safeFilenameStem(downloadFilename);
+  return layouts.map((layout, index) => {
+    const materialSlug = slugify(layout.name, `material-${index + 1}`);
+    const filename = layouts.length === 1 ? `${stem}-uv-layout.svg` : `${stem}-uv-${materialSlug}-${index + 1}.svg`;
+    return {
+      filename,
+      materialName: layout.name,
+      meshCount: [...layout.layers.values()].filter(
+        (layer) => layer.edges.size > 0
+      ).length,
+      svg: renderSvg(layout)
+    };
+  });
+}
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+  URL.revokeObjectURL(url);
+}
+function downloadUvLayouts(scene, downloadFilename = "model") {
+  const files = buildUvLayoutFiles(scene, downloadFilename);
+  if (files.length === 0) return files;
+  if (files.length === 1) {
+    downloadBlob(
+      new Blob([files[0].svg], { type: "image/svg+xml;charset=utf-8" }),
+      files[0].filename
+    );
+    return files;
+  }
+  const archive = Object.fromEntries(
+    files.map((file) => [file.filename, (0, import_fflate.strToU8)(file.svg)])
+  );
+  const zipped = (0, import_fflate.zipSync)(archive, { level: 6 });
+  downloadBlob(
+    new Blob([zipped], { type: "application/zip" }),
+    `${safeFilenameStem(downloadFilename)}-uv-layouts.zip`
+  );
+  return files;
+}
+
 // src/components/ModelViewer/internal/captureImage.ts
 var import_three2 = require("three");
 function captureImage(capture, options = {}) {
@@ -3438,19 +3640,31 @@ function useCameraBiasedAnchor(annotation, worldPositionsRef) {
   });
   return anchorRef;
 }
-function AnnotationMarker3D({ annotation, occluders, worldPositionsRef, onClick, onHover }) {
+function AnnotationMarker3D({
+  annotation,
+  occluders,
+  worldPositionsRef,
+  onClick,
+  onHover,
+  showAnnotationOnHover
+}) {
   const [occluded, setOccluded] = (0, import_react12.useState)(false);
   const anchorRef = useCameraBiasedAnchor(annotation, worldPositionsRef);
   const [isHovered, setIsHovered] = (0, import_react12.useState)(false);
   const [zIndex, setZIndex] = (0, import_react12.useState)(1);
   const clickTimeoutRef = (0, import_react12.useRef)(null);
   const markerRef = (0, import_react12.useRef)(null);
+  const hoverTimeoutRef = (0, import_react12.useRef)(null);
   (0, import_react12.useEffect)(() => {
     return () => {
       if (clickTimeoutRef.current) {
         clearTimeout(clickTimeoutRef.current);
         clickTimeoutRef.current = null;
       }
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
     };
   }, []);
   const handleClick = (event) => {
@@ -3469,13 +3683,29 @@ function AnnotationMarker3D({ annotation, occluders, worldPositionsRef, onClick,
     event.stopPropagation();
     setIsHovered(true);
     setZIndex(100);
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
     onHover?.(annotation);
+    if (showAnnotationOnHover) {
+      onClick?.(annotation);
+    }
   };
   const handlePointerLeave = (event) => {
     event.stopPropagation();
     setIsHovered(false);
     setZIndex(1);
-    onHover?.(null);
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+    hoverTimeoutRef.current = window.setTimeout(() => {
+      onHover?.(null);
+      if (showAnnotationOnHover) {
+        onHover?.(null);
+      }
+      hoverTimeoutRef.current = null;
+    }, 50);
   };
   const handlePointerDown = (event) => {
     event.stopPropagation();
@@ -3600,7 +3830,8 @@ function AnnotationsLayer({
   onAnnotationClick,
   onAnnotationHover,
   onCloseAnnotation,
-  hideCloseButton = false
+  hideCloseButton = false,
+  showAnnotationOnHover = false
 }) {
   const invalidate = (0, import_fiber8.useThree)((state) => state.invalidate);
   const scene = (0, import_fiber8.useThree)((state) => state.scene);
@@ -3608,6 +3839,7 @@ function AnnotationsLayer({
   const [isLocked, setIsLocked] = (0, import_react12.useState)(false);
   const groupRef = (0, import_react12.useRef)(null);
   const invalidateFrameRef = (0, import_react12.useRef)(null);
+  const hoverCloseTimeoutRef = (0, import_react12.useRef)(null);
   const occluders = (0, import_react12.useMemo)(() => {
     const list = [];
     scene.traverse((object) => {
@@ -3638,6 +3870,9 @@ function AnnotationsLayer({
       if (invalidateFrameRef.current !== null) {
         window.cancelAnimationFrame(invalidateFrameRef.current);
       }
+      if (hoverCloseTimeoutRef.current) {
+        clearTimeout(hoverCloseTimeoutRef.current);
+      }
     };
   }, []);
   const activeAnnotationToShow = isLocked ? localActiveAnnotation : activeAnnotation || localActiveAnnotation;
@@ -3649,53 +3884,71 @@ function AnnotationsLayer({
       (annotation) => annotation.id === activeAnnotationToShow.id
     ) ?? activeAnnotationToShow;
   }, [activeAnnotationToShow, annotations]);
-  const handleAnnotationClick = (0, import_react12.useCallback)((annotation) => {
-    if (isLocked && localActiveAnnotation?.id === annotation.id) {
-      setIsLocked(false);
-      setLocalActiveAnnotation(null);
-      onCloseAnnotation?.();
-      return;
-    }
-    setIsLocked(true);
-    setLocalActiveAnnotation(annotation);
-    onAnnotationClick?.(annotation);
-  }, [isLocked, localActiveAnnotation, onAnnotationClick, onCloseAnnotation]);
-  const handleAnnotationHover = (0, import_react12.useCallback)((annotation) => {
-    if (!isLocked) {
+  const handleAnnotationClick = (0, import_react12.useCallback)(
+    (annotation) => {
+      if (isLocked && localActiveAnnotation?.id === annotation.id) {
+        setIsLocked(false);
+        setLocalActiveAnnotation(null);
+        onCloseAnnotation?.();
+        return;
+      }
+      setIsLocked(true);
+      setLocalActiveAnnotation(annotation);
+      onAnnotationClick?.(annotation);
+    },
+    [isLocked, localActiveAnnotation, onAnnotationClick, onCloseAnnotation]
+  );
+  const handleAnnotationHover = (0, import_react12.useCallback)(
+    (annotation) => {
       onAnnotationHover?.(annotation);
-      if (annotation) {
-        setLocalActiveAnnotation(annotation);
-      } else {
-        if (!isLocked) {
-          setLocalActiveAnnotation(null);
+      if (showAnnotationOnHover && !isLocked) {
+        if (hoverCloseTimeoutRef.current) {
+          clearTimeout(hoverCloseTimeoutRef.current);
+          hoverCloseTimeoutRef.current = null;
+        }
+        if (annotation) {
+          setLocalActiveAnnotation(annotation);
+        } else {
+          hoverCloseTimeoutRef.current = window.setTimeout(() => {
+            setLocalActiveAnnotation(null);
+            onCloseAnnotation?.();
+            hoverCloseTimeoutRef.current = null;
+          }, 100);
         }
       }
-    }
-  }, [isLocked, onAnnotationHover]);
+    },
+    [isLocked, onAnnotationHover, showAnnotationOnHover, onCloseAnnotation]
+  );
   const handleClose = (0, import_react12.useCallback)(() => {
     setIsLocked(false);
     setLocalActiveAnnotation(null);
     onCloseAnnotation?.();
   }, [onCloseAnnotation]);
-  const handleCanvasClick = (0, import_react12.useCallback)((event) => {
-    const target = event.target;
-    if (target.closest?.(".ri-annotationMarker") || target.closest?.(".ri-viewAnnotationPopup") || target.closest?.(".annotation-html-wrapper")) {
-      return;
-    }
-    const canvas = canvasRootRef.current;
-    if (canvas && canvas.contains(target)) {
-      setIsLocked(false);
-      setLocalActiveAnnotation(null);
-      onCloseAnnotation?.();
-    }
-  }, [canvasRootRef, onCloseAnnotation]);
-  const handleEscapeKey = (0, import_react12.useCallback)((event) => {
-    if (event.key === "Escape" && isLocked) {
-      setIsLocked(false);
-      setLocalActiveAnnotation(null);
-      onCloseAnnotation?.();
-    }
-  }, [isLocked, onCloseAnnotation]);
+  const handleCanvasClick = (0, import_react12.useCallback)(
+    (event) => {
+      const target = event.target;
+      if (target.closest?.(".ri-annotationMarker") || target.closest?.(".ri-viewAnnotationPopup") || target.closest?.(".annotation-html-wrapper")) {
+        return;
+      }
+      const canvas = canvasRootRef.current;
+      if (canvas && canvas.contains(target)) {
+        setIsLocked(false);
+        setLocalActiveAnnotation(null);
+        onCloseAnnotation?.();
+      }
+    },
+    [canvasRootRef, onCloseAnnotation]
+  );
+  const handleEscapeKey = (0, import_react12.useCallback)(
+    (event) => {
+      if (event.key === "Escape" && isLocked) {
+        setIsLocked(false);
+        setLocalActiveAnnotation(null);
+        onCloseAnnotation?.();
+      }
+    },
+    [isLocked, onCloseAnnotation]
+  );
   (0, import_react12.useEffect)(() => {
     const canvas = canvasRootRef.current;
     if (canvas) {
@@ -3745,7 +3998,8 @@ function AnnotationsLayer({
           occluders,
           worldPositionsRef,
           onClick: handleAnnotationClick,
-          onHover: handleAnnotationHover
+          onHover: handleAnnotationHover,
+          showAnnotationOnHover
         },
         stableKey
       );
@@ -4099,18 +4353,75 @@ function CinematicCamera({
   sceneRef,
   config,
   playing,
+  resetOnPlay = false,
   onFinished,
-  onUserInteract
+  onUserInteract,
+  onStop
 }) {
   const invalidate = (0, import_fiber10.useThree)((state) => state.invalidate);
   const waypoints = (0, import_react15.useMemo)(() => config.waypoints ?? [], [config.waypoints]);
   const hasPath = waypoints.length >= 2;
   const loop = config.loop ?? true;
-  const duration = config.duration ?? (hasPath ? Math.max(waypoints.length * 3.5, 8) : 24);
+  const calculatedDuration = (0, import_react15.useMemo)(() => {
+    if (waypoints.length < 2) return 24;
+    let total = 0;
+    for (let i = 0; i < waypoints.length - 1; i++) {
+      total += waypoints[i].segmentDuration ?? 3.5;
+    }
+    if (loop && waypoints.length > 1) {
+      total += waypoints[waypoints.length - 1].segmentDuration ?? 3.5;
+    }
+    return Math.max(total, 4);
+  }, [waypoints, loop]);
+  const duration = config.duration ?? calculatedDuration;
   const signature = (0, import_react15.useMemo)(
-    () => waypoints.map((w) => [...w.position, ...w.target].join(",")).join(";"),
+    () => waypoints.map(
+      (waypoint) => [
+        ...waypoint.position,
+        ...waypoint.target,
+        waypoint.azimuthAngle ?? "",
+        waypoint.polarAngle ?? "",
+        waypoint.segmentDuration ?? ""
+      ].join(",")
+    ).join(";"),
     [waypoints]
   );
+  const segmentTimes = (0, import_react15.useMemo)(() => {
+    const times = [];
+    if (waypoints.length < 2) return times;
+    let accumulated = 0;
+    for (let i = 0; i < waypoints.length - 1; i++) {
+      accumulated += waypoints[i].segmentDuration ?? 3.5;
+      times.push(accumulated);
+    }
+    if (loop && waypoints.length > 1) {
+      accumulated += waypoints[waypoints.length - 1].segmentDuration ?? 3.5;
+      times.push(accumulated);
+    }
+    return times;
+  }, [waypoints, loop]);
+  const getCurveParameter = (0, import_react15.useMemo)(() => {
+    return (elapsed) => {
+      if (waypoints.length < 2 || segmentTimes.length === 0) {
+        return elapsed / duration;
+      }
+      const segmentTotal = segmentTimes[segmentTimes.length - 1];
+      const playbackElapsed = loop ? elapsed % duration : Math.min(elapsed, duration);
+      const normalizedElapsed = duration > 0 ? playbackElapsed / duration * segmentTotal : 0;
+      for (let i = 0; i < segmentTimes.length; i++) {
+        if (normalizedElapsed <= segmentTimes[i]) {
+          const prevTime = i === 0 ? 0 : segmentTimes[i - 1];
+          const segmentDuration = segmentTimes[i] - prevTime;
+          const progress = segmentDuration > 0 ? (normalizedElapsed - prevTime) / segmentDuration : 0;
+          const totalSegments = loop ? waypoints.length : waypoints.length - 1;
+          const baseU = i / totalSegments;
+          const segmentU = 1 / totalSegments;
+          return baseU + progress * segmentU;
+        }
+      }
+      return 1;
+    };
+  }, [waypoints.length, segmentTimes, duration, loop]);
   const curves = (0, import_react15.useMemo)(() => {
     if (!hasPath) return null;
     return {
@@ -4128,29 +4439,83 @@ function CinematicCamera({
       )
     };
   }, [signature, hasPath, loop]);
+  const orbitPath = (0, import_react15.useMemo)(() => {
+    if (!hasPath || !waypoints.every(
+      (waypoint) => Number.isFinite(waypoint.azimuthAngle) && Number.isFinite(waypoint.polarAngle)
+    )) {
+      return null;
+    }
+    const points = waypoints.map((waypoint) => ({
+      azimuth: waypoint.azimuthAngle,
+      polar: waypoint.polarAngle,
+      distance: new import_three18.Vector3(...waypoint.position).distanceTo(
+        new import_three18.Vector3(...waypoint.target)
+      )
+    }));
+    for (let index = 1; index < points.length; index += 1) {
+      const previous = points[index - 1].azimuth;
+      const current = points[index].azimuth;
+      points[index].azimuth = current + Math.round((previous - current) / (Math.PI * 2)) * Math.PI * 2;
+    }
+    return points;
+  }, [signature, hasPath]);
   const elapsedRef = (0, import_react15.useRef)(0);
   const enterElapsedRef = (0, import_react15.useRef)(0);
   const enterPos = (0, import_react15.useRef)(new import_three18.Vector3());
   const enterTarget = (0, import_react15.useRef)(new import_three18.Vector3());
   const startedRef = (0, import_react15.useRef)(false);
   const pausedElapsedRef = (0, import_react15.useRef)(0);
+  const hasFinishedRef = (0, import_react15.useRef)(false);
   const orbitRef = (0, import_react15.useRef)(null);
   const tmpPos = (0, import_react15.useMemo)(() => new import_three18.Vector3(), []);
   const tmpTarget = (0, import_react15.useMemo)(() => new import_three18.Vector3(), []);
+  const tmpSpherical = (0, import_react15.useMemo)(() => new import_three18.Spherical(), []);
+  (0, import_react15.useEffect)(() => {
+    elapsedRef.current = 0;
+    pausedElapsedRef.current = 0;
+    enterElapsedRef.current = 0;
+    hasFinishedRef.current = false;
+  }, [signature, loop, duration]);
+  (0, import_react15.useEffect)(() => {
+    if (resetOnPlay) {
+      pausedElapsedRef.current = 0;
+      elapsedRef.current = 0;
+      hasFinishedRef.current = false;
+    }
+  }, [resetOnPlay]);
   (0, import_react15.useEffect)(() => {
     if (!playing) {
       startedRef.current = false;
-      if (elapsedRef.current > 0) {
+      if (elapsedRef.current > 0 && !resetOnPlay) {
         pausedElapsedRef.current = elapsedRef.current;
+      } else if (resetOnPlay) {
+        pausedElapsedRef.current = 0;
+      }
+      if (elapsedRef.current > 0 || hasFinishedRef.current) {
+        onStop?.();
       }
       return;
     }
+    if (elapsedRef.current >= duration && !loop) {
+      elapsedRef.current = 0;
+      pausedElapsedRef.current = 0;
+      hasFinishedRef.current = false;
+    }
     const controls = controlsRef.current;
     if (controls) {
       controls.getPosition(enterPos.current);
       controls.getTarget(enterTarget.current);
     }
-    elapsedRef.current = pausedElapsedRef.current || 0;
+    if (resetOnPlay || hasFinishedRef.current || pausedElapsedRef.current === 0) {
+      elapsedRef.current = 0;
+      pausedElapsedRef.current = 0;
+      hasFinishedRef.current = false;
+    } else if (pausedElapsedRef.current > 0 && pausedElapsedRef.current < duration) {
+      elapsedRef.current = pausedElapsedRef.current;
+    } else {
+      elapsedRef.current = 0;
+      pausedElapsedRef.current = 0;
+    }
     enterElapsedRef.current = 0;
     if (!hasPath) {
       const scene = sceneRef.current;
@@ -4164,12 +4529,26 @@ function CinematicCamera({
     }
     startedRef.current = true;
     invalidate();
-  }, [playing, hasPath, controlsRef, sceneRef, invalidate]);
+  }, [
+    playing,
+    hasPath,
+    controlsRef,
+    sceneRef,
+    invalidate,
+    duration,
+    loop,
+    signature,
+    resetOnPlay,
+    onStop
+  ]);
   (0, import_react15.useEffect)(() => {
     if (!playing || !onUserInteract) return;
     const controls = controlsRef.current;
     if (!controls) return;
-    const handle = () => onUserInteract();
+    const handle = () => {
+      if (hasFinishedRef.current) return;
+      onUserInteract();
+    };
     controls.addEventListener("controlstart", handle);
     return () => controls.removeEventListener("controlstart", handle);
   }, [playing, controlsRef, onUserInteract]);
@@ -4179,12 +4558,33 @@ function CinematicCamera({
     if (!controls) return;
     elapsedRef.current += delta;
     enterElapsedRef.current += delta;
-    let u = elapsedRef.current / duration;
-    const finished = !loop && u >= 1;
+    let u = getCurveParameter(elapsedRef.current);
+    const finished = !loop && elapsedRef.current >= duration;
     u = loop ? u % 1 : Math.min(u, 1);
     if (curves) {
-      curves.position.getPointAt(u, tmpPos);
-      curves.target.getPointAt(u, tmpTarget);
+      curves.target.getPoint(u, tmpTarget);
+      if (orbitPath) {
+        const segmentCount = loop ? orbitPath.length : orbitPath.length - 1;
+        const scaled = Math.min(u, 1) * segmentCount;
+        const segment = Math.min(Math.floor(scaled), segmentCount - 1);
+        const next = (segment + 1) % orbitPath.length;
+        const localT = u >= 1 ? 1 : scaled - segment;
+        const eased = localT * localT * (3 - 2 * localT);
+        const start = orbitPath[segment];
+        const end = orbitPath[next];
+        const endAzimuth = end.azimuth + Math.round((start.azimuth - end.azimuth) / (Math.PI * 2)) * Math.PI * 2;
+        const azimuth = start.azimuth + (endAzimuth - start.azimuth) * eased;
+        const polar = start.polar + (end.polar - start.polar) * eased;
+        const distance = start.distance + (end.distance - start.distance) * eased;
+        tmpSpherical.set(
+          Math.max(distance, 1e-6),
+          Math.min(Math.max(polar, 1e-6), Math.PI - 1e-6),
+          azimuth
+        );
+        tmpPos.setFromSpherical(tmpSpherical).add(tmpTarget);
+      } else {
+        curves.position.getPoint(u, tmpPos);
+      }
     } else {
       const orbit = orbitRef.current;
       if (!orbit) return;
@@ -4214,6 +4614,8 @@ function CinematicCamera({
     );
     if (finished) {
       startedRef.current = false;
+      hasFinishedRef.current = true;
+      elapsedRef.current = 0;
       pausedElapsedRef.current = 0;
       onFinished?.();
       return;
@@ -5470,7 +5872,8 @@ function ModelViewer({
   usdzUrl,
   arScaleMode = "normalized",
   mobileHandoffUrl,
-  showAnnotationNavigation = true
+  showAnnotationNavigation = true,
+  showAnnotationOnHover = false
 }) {
   const { activeTab, activeSubTab } = useBindingBuilderContext();
   const license = useLicense(licenseKey);
@@ -5540,6 +5943,7 @@ function ModelViewer({
     !modelUrl || Boolean(onAutoFit) || Boolean(camera)
   );
   const [downloadMenuOpen, setDownloadMenuOpen] = (0, import_react22.useState)(false);
+  const [uvExportError, setUvExportError] = (0, import_react22.useState)(null);
   const [modelLoaded, setModelLoaded] = (0, import_react22.useState)(false);
   const [modelLoadFailed, setModelLoadFailed] = (0, import_react22.useState)(false);
   const [bindingsMismatch, setBindingsMismatch] = (0, import_react22.useState)(false);
@@ -5594,9 +5998,11 @@ function ModelViewer({
     return { ...base ?? {}, ...cinematic };
   }, [cinematic, resolvedSceneConfig]);
   const [cinematicPlaying, setCinematicPlaying] = (0, import_react22.useState)(false);
+  const [cinematicReset, setCinematicReset] = (0, import_react22.useState)(false);
   const cinematicAutoStartedRef = (0, import_react22.useRef)(false);
   (0, import_react22.useEffect)(() => {
     setCinematicPlaying(false);
+    setCinematicReset(false);
     cinematicAutoStartedRef.current = false;
   }, [modelUrl]);
   (0, import_react22.useEffect)(() => {
@@ -5604,6 +6010,7 @@ function ModelViewer({
     if (modelLoaded && cameraPositioned && !isAutoFraming) {
       cinematicAutoStartedRef.current = true;
       setCinematicPlaying(true);
+      setCinematicReset(false);
     }
   }, [cinematicConfig, modelLoaded, cameraPositioned, isAutoFraming]);
   const xrStore = (0, import_react22.useMemo)(() => {
@@ -6728,6 +7135,17 @@ function ModelViewer({
       console.error("Screenshot failed:", err);
     });
   }, [downloadFilename]);
+  const handleDownloadUvLayout = (0, import_react22.useCallback)(() => {
+    const scene = sceneRef.current;
+    if (!scene) return;
+    const files = downloadUvLayouts(scene, downloadFilename);
+    if (files.length === 0) {
+      setUvExportError("This model does not contain UV coordinates.");
+      return;
+    }
+    setUvExportError(null);
+    setDownloadMenuOpen(false);
+  }, [downloadFilename]);
   const handleReset = (0, import_react22.useCallback)(async () => {
     if (onAutoFit) {
       await onAutoFit();
@@ -6757,6 +7175,20 @@ function ModelViewer({
       console.error("Reset camera error:", error);
     }
   }, [onAutoFit, fitScene]);
+  const handleCinematicPlay = (0, import_react22.useCallback)(() => {
+    setCinematicReset(false);
+    setCinematicPlaying(true);
+  }, []);
+  const handleCinematicPause = (0, import_react22.useCallback)(() => {
+    setCinematicPlaying(false);
+  }, []);
+  const handleCinematicStop = (0, import_react22.useCallback)(() => {
+    setCinematicPlaying(false);
+    setCinematicReset(true);
+    setTimeout(() => {
+      handleReset();
+    }, 100);
+  }, [handleReset]);
   const handleCameraChangeWithAnnotations = (0, import_react22.useCallback)(
     (cameraValue, controls) => {
       handleCameraChangeInternal(cameraValue, controls);
@@ -7054,7 +7486,8 @@ function ModelViewer({
                               modelLoaded,
                               onAnnotationClick: handleAnnotationMarkerClick,
                               onCloseAnnotation: closeViewingAnnotation,
-                              hideCloseButton: isGuidedTourActive
+                              hideCloseButton: isGuidedTourActive,
+                              showAnnotationOnHover
                             }
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -7073,8 +7506,14 @@ function ModelViewer({
                               sceneRef,
                               config: cinematicConfig,
                               playing: cinematicPlaying,
-                              onFinished: () => setCinematicPlaying(false),
-                              onUserInteract: () => setCinematicPlaying(false)
+                              resetOnPlay: cinematicReset,
+                              onFinished: () => {
+                                setCinematicPlaying(false);
+                                setCinematicReset(false);
+                              },
+                              onUserInteract: () => {
+                                setCinematicPlaying(false);
+                              }
                             }
                           ),
                           showMeasureTools && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -7302,24 +7741,43 @@ function ModelViewer({
                 ]
               }
             ),
-            cinematicConfig && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            cinematicConfig && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "div",
               {
                 className: "ri-cinematicTools",
                 style: {
                   top: `${topLeftRow((xrToolsVisible ? 1 : 0) + (showMeasureTools ? 1 : 0) + (showExplodeControls ? 1 : 0))}px`
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    className: `ri-measureButton ${cinematicPlaying ? "ri-measureButton--active" : ""}`,
-                    onClick: () => setCinematicPlaying((prev) => !prev),
-                    title: cinematicPlaying ? "Pause cinematic" : "Play cinematic",
-                    "aria-pressed": cinematicPlaying,
-                    children: cinematicPlaying ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react3.Pause, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react3.Play, { size: 16 })
-                  }
-                )
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: `ri-measureButton ${cinematicPlaying ? "ri-measureButton--active" : ""}`,
+                      onClick: () => {
+                        if (cinematicPlaying) {
+                          setCinematicPlaying(false);
+                        } else {
+                          setCinematicReset(false);
+                          setCinematicPlaying(true);
+                        }
+                      },
+                      title: cinematicPlaying ? "Pause cinematic" : "Play cinematic",
+                      "aria-pressed": cinematicPlaying,
+                      children: cinematicPlaying ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react3.Pause, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react3.Play, { size: 16 })
+                    }
+                  ),
+                  cinematicPlaying && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ri-measureButton ri-measureButton--stop",
+                      onClick: handleCinematicStop,
+                      title: "Stop cinematic and reset camera",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react3.Square, { size: 16 })
+                    }
+                  )
+                ]
               }
             ),
             (showResetButton || showDownloadButton || showAnnotationNavigation && sortedAnnotations.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ri-buttonContainer", children: [
@@ -7422,13 +7880,38 @@ function ModelViewer({
                               "Download PNG"
                             ]
                           }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ri-downloadMenuDivider" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                          "button",
+                          {
+                            className: "ri-downloadMenuItem",
+                            onClick: handleDownloadUvLayout,
+                            disabled: !sceneRef.current,
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react3.FileImage, { size: 14 }),
+                              "Download UV Layout"
+                            ]
+                          }
+                        ),
+                        uvExportError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                          "div",
+                          {
+                            className: "ri-downloadMenuNotice",
+                            role: "status",
+                            "aria-live": "polite",
+                            children: uvExportError
+                          }
                         )
                       ] }),
                       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         "button",
                         {
                           className: "ri-downloadButton",
-                          onClick: () => setDownloadMenuOpen((v) => !v),
+                          onClick: () => {
+                            setUvExportError(null);
+                            setDownloadMenuOpen((v) => !v);
+                          },
                           disabled: isDownloading || !sceneRef.current,
                           title: "Download options",
                           children: isDownloading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
@@ -7559,7 +8042,7 @@ function ModelViewer({
 }
 
 // src/components/BindingBuilder/BindingBuilder.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_lucide_react16 = require("lucide-react");
 
 // src/styles/BindingBuilder.css
@@ -7599,14 +8082,16 @@ function buildCameraState(camera, controls) {
     position: toTuple(position),
     target: toTuple(target),
     fov: "fov" in camera && typeof camera.fov === "number" ? camera.fov : null,
-    zoom: "zoom" in camera && typeof camera.zoom === "number" ? camera.zoom : 1
+    zoom: "zoom" in camera && typeof camera.zoom === "number" ? camera.zoom : 1,
+    azimuthAngle: controls.azimuthAngle,
+    polarAngle: controls.polarAngle
   };
 }
 function isSameCameraState(left, right) {
   if (!left) {
     return false;
   }
-  return left.position[0] === right.position[0] && left.position[1] === right.position[1] && left.position[2] === right.position[2] && left.target[0] === right.target[0] && left.target[1] === right.target[1] && left.target[2] === right.target[2] && left.fov === right.fov && left.zoom === right.zoom;
+  return left.position[0] === right.position[0] && left.position[1] === right.position[1] && left.position[2] === right.position[2] && left.target[0] === right.target[0] && left.target[1] === right.target[1] && left.target[2] === right.target[2] && left.fov === right.fov && left.zoom === right.zoom && left.azimuthAngle === right.azimuthAngle && left.polarAngle === right.polarAngle;
 }
 async function runSmoothCameraTransition2(controls, action, smoothTime = 0.6) {
   const originalSmoothTime = controls.smoothTime;
@@ -7761,15 +8246,27 @@ function useViewerCamera() {
       }
       try {
         markInitialAutoFitOverride(controls);
-        await controls.setLookAt(
-          state.position[0],
-          state.position[1],
-          state.position[2],
-          state.target[0],
-          state.target[1],
-          state.target[2],
-          enableTransition
-        );
+        const transitions = [
+          controls.setLookAt(
+            state.position[0],
+            state.position[1],
+            state.position[2],
+            state.target[0],
+            state.target[1],
+            state.target[2],
+            enableTransition
+          )
+        ];
+        if (state.azimuthAngle != null && state.polarAngle != null) {
+          transitions.push(
+            controls.rotateTo(
+              state.azimuthAngle,
+              state.polarAngle,
+              enableTransition
+            )
+          );
+        }
+        await Promise.all(transitions);
         const camera = controls.camera;
         let projectionChanged = false;
         if (state.fov !== null && "fov" in camera && typeof camera.fov === "number") {
@@ -7893,7 +8390,7 @@ function useViewerAnimations() {
 }
 
 // src/utils/modelFileResolver.ts
-var import_fflate = require("fflate");
+var import_fflate2 = require("fflate");
 var SUPPORTED_MODEL_EXTENSIONS = [".glb", ".gltf", ".zip"];
 var SUPPORTED_MODEL_MIME_TYPES = [
   "model/gltf-binary",
@@ -7951,7 +8448,7 @@ async function resolveStandaloneGltfFile(file) {
   };
 }
 async function resolveZippedGltfFile(file) {
-  const zip = (0, import_fflate.unzipSync)(new Uint8Array(await file.arrayBuffer()));
+  const zip = (0, import_fflate2.unzipSync)(new Uint8Array(await file.arrayBuffer()));
   const entries = /* @__PURE__ */ new Map();
   for (const [rawPath, bytes] of Object.entries(zip)) {
     const path = normalizeZipPath(rawPath);
@@ -7972,13 +8469,13 @@ async function resolveZippedGltfFile(file) {
   if (!gltfBytes) {
     throw new Error("Invalid GLTF zip: no .gltf found.");
   }
-  const gltf = parseGltfJson((0, import_fflate.strFromU8)(gltfBytes), gltfPath);
+  const gltf = parseGltfJson((0, import_fflate2.strFromU8)(gltfBytes), gltfPath);
   const rootDir = getDirname(gltfPath);
   const urlsToRevoke = [];
   try {
     rewriteZipUris(gltf.buffers, rootDir, entries, urlsToRevoke);
     rewriteZipUris(gltf.images, rootDir, entries, urlsToRevoke);
-    const gltfBlob = new Blob([(0, import_fflate.strToU8)(JSON.stringify(gltf))], {
+    const gltfBlob = new Blob([(0, import_fflate2.strToU8)(JSON.stringify(gltf))], {
       type: "model/gltf+json"
     });
     const gltfUrl = URL.createObjectURL(gltfBlob);
@@ -8077,7 +8574,7 @@ function inferMimeType(path) {
 }
 
 // src/components/BindingBuilder/SceneSettings/SceneSettingsTab.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/components/BindingBuilder/SceneSettings/GeneralSceneSettings.tsx
 var import_react27 = require("react");
@@ -8258,9 +8755,10 @@ function SliderRow({
   max,
   step,
   formatValue,
-  onChange
+  onChange,
+  disabled = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "se-field", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: `se-field ${disabled ? "se-field--disabled" : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "se-fieldLabel", children: [
       label,
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "se-fieldValue", children: formatValue ? formatValue(value) : value })
@@ -8274,7 +8772,8 @@ function SliderRow({
         max,
         step,
         value,
-        onChange: (e) => onChange(Number(e.target.value))
+        onChange: (e) => onChange(Number(e.target.value)),
+        disabled
       }
     )
   ] });
@@ -11690,6 +12189,7 @@ function AnnotationsTab({ config, onChange }) {
 }
 
 // src/components/BindingBuilder/SceneSettings/CinematicTab.tsx
+var import_react32 = require("react");
 var import_lucide_react10 = require("lucide-react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var DEFAULT_CINEMATIC = {
@@ -11698,6 +12198,7 @@ var DEFAULT_CINEMATIC = {
   loop: true,
   autoPlay: false
 };
+var DEFAULT_SEGMENT_DURATION = 3.5;
 function CinematicTab({
   config,
   onChange,
@@ -11706,31 +12207,76 @@ function CinematicTab({
 }) {
   const cinematic = config.cinematic ?? DEFAULT_CINEMATIC;
   const { waypoints } = cinematic;
-  const update = (patch) => {
+  const calculateTotalDuration = (0, import_react32.useCallback)((wps, loop) => {
+    if (wps.length < 2) return 0;
+    let total = 0;
+    for (let i = 0; i < wps.length - 1; i++) {
+      const segDur = wps[i].segmentDuration ?? DEFAULT_SEGMENT_DURATION;
+      total += segDur;
+    }
+    if (loop && wps.length > 1) {
+      total += wps[wps.length - 1].segmentDuration ?? DEFAULT_SEGMENT_DURATION;
+    }
+    return Math.max(total, 0);
+  }, []);
+  const update = (0, import_react32.useCallback)((patch) => {
     onChange({ ...config, cinematic: { ...cinematic, ...patch } });
-  };
-  const addWaypoint = () => {
+  }, [config, cinematic, onChange]);
+  const addWaypoint = (0, import_react32.useCallback)(() => {
     if (!cameraState) return;
+    const newWaypoint = {
+      position: [...cameraState.position],
+      target: [...cameraState.target],
+      ...cameraState.azimuthAngle != null ? { azimuthAngle: cameraState.azimuthAngle } : {},
+      ...cameraState.polarAngle != null ? { polarAngle: cameraState.polarAngle } : {},
+      segmentDuration: DEFAULT_SEGMENT_DURATION
+    };
+    const newWaypoints = [...waypoints, newWaypoint];
+    const newDuration = calculateTotalDuration(newWaypoints, cinematic.loop);
     update({
-      waypoints: [
-        ...waypoints,
-        {
-          position: [...cameraState.position],
-          target: [...cameraState.target]
-        }
-      ]
+      waypoints: newWaypoints,
+      duration: newDuration
     });
-  };
-  const deleteWaypoint = (index) => {
-    update({ waypoints: waypoints.filter((_, i) => i !== index) });
-  };
-  const moveWaypoint = (index, delta) => {
+  }, [cameraState, waypoints, cinematic.loop, calculateTotalDuration, update]);
+  const deleteWaypoint = (0, import_react32.useCallback)((index) => {
+    const newWaypoints = waypoints.filter((_, i) => i !== index);
+    const newDuration = calculateTotalDuration(newWaypoints, cinematic.loop);
+    update({
+      waypoints: newWaypoints,
+      duration: newDuration
+    });
+  }, [waypoints, cinematic.loop, calculateTotalDuration, update]);
+  const moveWaypoint = (0, import_react32.useCallback)((index, delta) => {
     const next = index + delta;
     if (next < 0 || next >= waypoints.length) return;
     const reordered = [...waypoints];
     [reordered[index], reordered[next]] = [reordered[next], reordered[index]];
-    update({ waypoints: reordered });
-  };
+    const newDuration = calculateTotalDuration(reordered, cinematic.loop);
+    update({
+      waypoints: reordered,
+      duration: newDuration
+    });
+  }, [waypoints, cinematic.loop, calculateTotalDuration, update]);
+  const updateWaypoint = (0, import_react32.useCallback)((index, updates) => {
+    const newWaypoints = waypoints.map((wp, i) => {
+      if (i === index) {
+        return { ...wp, ...updates };
+      }
+      return wp;
+    });
+    const newDuration = calculateTotalDuration(newWaypoints, cinematic.loop);
+    update({
+      waypoints: newWaypoints,
+      duration: newDuration
+    });
+  }, [waypoints, cinematic.loop, calculateTotalDuration, update]);
+  const [customizeDurations, setCustomizeDurations] = (0, import_react32.useState)(false);
+  const hasSegmentDurations = waypoints.some((w) => w.segmentDuration !== void 0);
+  const getDuration = (0, import_react32.useCallback)((index) => {
+    if (index >= waypoints.length - 1) return DEFAULT_SEGMENT_DURATION;
+    return waypoints[index]?.segmentDuration ?? DEFAULT_SEGMENT_DURATION;
+  }, [waypoints]);
+  const hasEnoughWaypoints = waypoints.length >= 2;
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Section, { title: "Cinematic Camera", children: [
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "se-cinematicHint", children: "Frame the model in the viewer, then capture it as a waypoint. The camera glides through the waypoints in order \u2014 enable and press play in the viewer to preview." }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
@@ -11747,62 +12293,165 @@ function CinematicTab({
         ]
       }
     ),
-    waypoints.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "bb-emptyAnnotations", children: "No waypoints yet. Position the camera and add your first one." }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "se-waypointList", children: waypoints.map((waypoint, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-waypointCard", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "se-waypointBadge", children: index + 1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-waypointBody", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-waypointCoords", children: [
-          "pos [",
-          waypoint.position.map((n) => n.toFixed(1)).join(", "),
-          "]"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-waypointCoords", children: [
-          "look [",
-          waypoint.target.map((n) => n.toFixed(1)).join(", "),
-          "]"
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-waypointActions", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-customizeToggle", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: "se-toggleLabel", children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "button",
-          {
-            className: "se-waypointAction",
-            onClick: () => onPreviewWaypoint?.(waypoint),
-            title: "Fly camera to this waypoint",
-            disabled: !onPreviewWaypoint,
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.MapPin, { size: 15 })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "button",
-          {
-            className: "se-waypointAction",
-            onClick: () => moveWaypoint(index, -1),
-            title: "Move up",
-            disabled: index === 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.ArrowUp, { size: 15 })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "button",
+          "input",
           {
-            className: "se-waypointAction",
-            onClick: () => moveWaypoint(index, 1),
-            title: "Move down",
-            disabled: index === waypoints.length - 1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.ArrowDown, { size: 15 })
+            type: "checkbox",
+            checked: customizeDurations,
+            onChange: (e) => setCustomizeDurations(e.target.checked)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "button",
-          {
-            className: "se-waypointAction se-waypointAction--delete",
-            onClick: () => deleteWaypoint(index),
-            title: "Delete waypoint",
-            children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.Trash2, { size: 15 })
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.Settings, { size: 14 }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: "Customize durations between waypoints" })
+      ] }),
+      customizeDurations && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "se-toggleHint", children: [
+        "Set duration for each segment between waypoints: 1\u21922, 2\u21923, etc. Default: ",
+        DEFAULT_SEGMENT_DURATION,
+        "s"
       ] })
-    ] }, index)) }),
+    ] }),
+    waypoints.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "bb-emptyAnnotations", children: "No waypoints yet. Position the camera and add your first one." }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "se-waypointList", children: waypoints.map((waypoint, index) => {
+        const dur = getDuration(index);
+        const isLast = index === waypoints.length - 1;
+        const isCustom = waypoint.segmentDuration !== void 0 && waypoint.segmentDuration !== DEFAULT_SEGMENT_DURATION;
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-waypointCard", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "se-waypointBadge", children: index + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-waypointBody", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-waypointCoords", children: [
+                "pos [",
+                waypoint.position.map((n) => n.toFixed(1)).join(", "),
+                "]"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-waypointCoords", children: [
+                "look [",
+                waypoint.target.map((n) => n.toFixed(1)).join(", "),
+                "]"
+              ] }),
+              customizeDurations && !isLast && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: `se-customBadge ${isCustom ? "se-customBadge--custom" : "se-customBadge--default"}`, children: [
+                dur.toFixed(1),
+                "s",
+                !isCustom && " (default)"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-waypointActions", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                "button",
+                {
+                  className: "se-waypointAction",
+                  onClick: () => onPreviewWaypoint?.(waypoint),
+                  title: "Fly camera to this waypoint",
+                  disabled: !onPreviewWaypoint,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.MapPin, { size: 15 })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                "button",
+                {
+                  className: "se-waypointAction",
+                  onClick: () => moveWaypoint(index, -1),
+                  title: "Move up",
+                  disabled: index === 0,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.ArrowUp, { size: 15 })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                "button",
+                {
+                  className: "se-waypointAction",
+                  onClick: () => moveWaypoint(index, 1),
+                  title: "Move down",
+                  disabled: isLast,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.ArrowDown, { size: 15 })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                "button",
+                {
+                  className: "se-waypointAction se-waypointAction--delete",
+                  onClick: () => deleteWaypoint(index),
+                  title: "Delete waypoint",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react10.Trash2, { size: 15 })
+                }
+              )
+            ] })
+          ] }),
+          customizeDurations && !isLast && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-segmentBetween", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-segmentLabel", children: [
+              index + 1,
+              " \u2192 ",
+              index + 2,
+              !waypoint.segmentDuration && " (default)"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-segmentControls", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "se-durationLabel", children: "Duration:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                "input",
+                {
+                  type: "range",
+                  className: "se-segmentSlider",
+                  min: 1,
+                  max: 20,
+                  step: 0.5,
+                  value: dur,
+                  onChange: (e) => {
+                    const val = parseFloat(e.target.value);
+                    updateWaypoint(index, { segmentDuration: val });
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "se-segmentValue", children: [
+                dur.toFixed(1),
+                "s"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-presetButtons", children: [
+                [2, 4, 6, 8].map((preset) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                  "button",
+                  {
+                    className: "se-presetButton",
+                    onClick: () => updateWaypoint(index, { segmentDuration: preset }),
+                    children: [
+                      preset,
+                      "s"
+                    ]
+                  },
+                  `preset-${index}-${preset}`
+                )),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  "button",
+                  {
+                    className: "se-presetButton se-presetButton--default",
+                    onClick: () => {
+                      const newWaypoints = waypoints.map((wp, i) => {
+                        if (i === index) {
+                          const { segmentDuration, ...rest } = wp;
+                          return rest;
+                        }
+                        return wp;
+                      });
+                      const newDuration = calculateTotalDuration(newWaypoints, cinematic.loop);
+                      update({
+                        waypoints: newWaypoints,
+                        duration: newDuration
+                      });
+                    },
+                    children: "Reset"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }, `waypoint-wrapper-${index}`);
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "se-totalDuration", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "se-totalLabel", children: "Total duration:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "se-totalValue", children: hasEnoughWaypoints ? (cinematic.duration ?? calculateTotalDuration(waypoints, cinematic.loop)).toFixed(1) + "s" : "-" }),
+        !hasEnoughWaypoints && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "se-totalHint", children: "(need at least 2 waypoints)" })
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       ToggleRow,
       {
@@ -11816,7 +12465,11 @@ function CinematicTab({
       {
         label: "Loop",
         checked: cinematic.loop,
-        onChange: (loop) => update({ loop })
+        onChange: (loop) => {
+          const newLoop = loop;
+          const newDuration = calculateTotalDuration(waypoints, newLoop);
+          update({ loop: newLoop, duration: newDuration });
+        }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -11827,11 +12480,11 @@ function CinematicTab({
         onChange: (autoPlay) => update({ autoPlay })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    !customizeDurations && hasEnoughWaypoints && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       SliderRow,
       {
         label: "Duration",
-        value: cinematic.duration ?? Math.max(waypoints.length * 3.5, 8),
+        value: cinematic.duration ?? calculateTotalDuration(waypoints, cinematic.loop),
         min: 4,
         max: 120,
         step: 1,
@@ -11843,7 +12496,7 @@ function CinematicTab({
 }
 
 // src/styles/SceneSettingsTab.css
-styleInject('.se-tabContent {\n  display: flex;\n  flex-direction: column;\n}\n.se-tabContent * {\n  box-sizing: border-box;\n}\n.se-subTabRow {\n  display: flex;\n  justify-content: space-between;\n  gap: 6px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n  margin-bottom: 4px;\n}\n.se-subTab {\n  padding: 8px 12px;\n  display: flex;\n  justify-items: center;\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  background: rgba(255, 255, 255, 0.04);\n  color: #b3bfd2;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition:\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    color 0.18s ease;\n}\n.se-subTab:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.32);\n}\n.se-subTab--active {\n  background: rgba(99, 102, 241, 0.18);\n  border-color: rgba(99, 102, 241, 0.4);\n  color: #f8fafc;\n}\n.se-generalContent {\n  display: flex;\n  flex-direction: column;\n  padding-top: 0;\n}\n.se-placeholder {\n  font-size: 13px;\n  color: #93a4c0;\n}\n.se-section {\n  margin-bottom: 10px;\n  border-radius: 7px;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  overflow: hidden;\n  padding: 0;\n}\n.se-section:last-child {\n  margin-bottom: 0;\n}\n.se-sectionTitle {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #c3cbdb;\n  padding: 11px 14px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n}\n.se-sectionBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 14px;\n}\n.se-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n.se-fieldInline {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n.se-fieldLabel {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: 700;\n  color: #d7dee9;\n}\n.se-fieldValue {\n  font-variant-numeric: tabular-nums;\n  font-size: 12px;\n  color: #93a4c0;\n}\n.se-slider {\n  width: 100%;\n  accent-color: #2aa8d8;\n  cursor: pointer;\n}\n.se-checkbox {\n  width: 18px;\n  height: 18px;\n  accent-color: #2aa8d8;\n  cursor: pointer;\n}\n.se-select,\n.se-textInput,\n.se-numberInput {\n  background: rgba(15, 23, 42, 0.28);\n  border: 1px solid rgba(148, 163, 184, 0.2);\n  border-radius: 7px;\n  color: #f8fafc;\n  font-size: 13px;\n  padding: 11px 13px;\n  outline: none;\n}\n.se-select:focus,\n.se-textInput:focus,\n.se-numberInput:focus {\n  outline: none;\n  border-color: rgba(42, 168, 216, 0.65);\n  box-shadow: 0 0 0 4px rgba(42, 168, 216, 0.12);\n}\n.se-select {\n  min-width: 130px;\n  text-transform: capitalize;\n}\n.se-textInput {\n  width: 100%;\n}\n.se-numberInput {\n  width: 100%;\n}\n.se-swatch {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-width: 96px;\n  height: 30px;\n  padding: 0 8px;\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.35);\n  cursor: pointer;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);\n}\n.se-swatchCode {\n  font-size: 11px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: #fff;\n  mix-blend-mode: difference;\n}\n.se-colorPicker {\n  margin-top: 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  width: fit-content;\n}\n.se-colorPicker .react-colorful {\n  width: 100%;\n  height: 140px;\n}\n.se-inlineColorPicker .react-colorful {\n  width: 100%;\n  height: 240px;\n}\n.se-colorPickerPopover {\n  z-index: 1000;\n  padding: 10px;\n  border-radius: 8px;\n  background: #1b2333;\n  border: 1px solid rgba(148, 163, 184, 0.25);\n  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);\n}\n.se-colorPickerPopover .react-colorful {\n  width: 200px;\n  height: 160px;\n}\n.se-vectorRow {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 8px;\n}\n.se-vectorAxis {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 11px;\n  color: #93a4c0;\n}\n.se-panel {\n  margin-bottom: 10px;\n  overflow: hidden;\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  border-radius: 7px;\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-panel:last-child {\n  margin-bottom: 0;\n}\n.se-panelHeader {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border: none;\n  background: rgba(255, 255, 255, 0.03);\n  padding: 11px 14px;\n  color: #e5e7eb;\n  cursor: pointer;\n  text-align: left;\n}\n.se-panelHeader:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.se-panelHeaderMain {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 8px;\n}\n.se-panelChevron {\n  flex-shrink: 0;\n  color: #8b97ab;\n  transform: rotate(-90deg);\n  transition: transform 0.18s ease;\n}\n.se-panelChevron--open {\n  transform: rotate(0deg);\n}\n.se-panelTitle {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #c3cbdb;\n}\n.se-panelHelp {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-left: 2px;\n  border-radius: 999px;\n  color: #b9c0ca;\n  cursor: help;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease,\n    transform 0.18s ease;\n}\n.se-panelHelp:hover {\n  background: rgba(255, 255, 255, 0.08);\n  color: #eef2ff;\n  transform: translateY(-0.5px);\n}\n.se-panelTrailing {\n  display: flex;\n  align-items: center;\n}\n.se-panelBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 14px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n  background: transparent;\n}\n.se-iconButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border: none;\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.08);\n  color: #d7dde8;\n  cursor: pointer;\n}\n.se-iconButton:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n.se-axisStepperGrid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 12px;\n}\n.se-axisStepper {\n  display: grid;\n  grid-template-columns: 40px 1fr 40px;\n  align-items: center;\n  min-height: 30px;\n  border-radius: 10px;\n  background: rgba(17, 24, 39, 0.62);\n  border: 1px solid rgba(255, 255, 255, 0.05);\n}\n.se-axisStepperButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  border: none;\n  background: transparent;\n  color: #f3f4f6;\n  cursor: pointer;\n}\n.se-axisStepperButton:hover {\n  background: rgba(255, 255, 255, 0.04);\n}\n.se-axisStepperLabel {\n  text-align: center;\n  font-size: 15px;\n  color: #f3f4f6;\n}\n.se-segmentedControl {\n  display: grid;\n  grid-auto-flow: column;\n  overflow: hidden;\n  border-radius: 10px;\n  background: rgba(17, 24, 39, 0.62);\n}\n.se-segmentedOption {\n  min-height: 35px;\n  border: none;\n  background: transparent;\n  color: #d1d5db;\n  font-size: 14px;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n.se-segmentedOption--active {\n  background: #2aa8d8;\n  color: #fff;\n}\n.se-helperCard {\n  padding: 32px;\n  text-align: center;\n  background: rgba(15, 23, 42, 0.44);\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  color: #94a3b8;\n  font-size: 14px;\n}\n.se-helperCard strong {\n  font-size: 14px;\n}\n.se-helperCard span {\n  font-size: 13px;\n  line-height: 1.4;\n  color: #c7d0df;\n}\n.se-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n.se-switch input[type=checkbox] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  opacity: 0;\n}\n.se-switchTrack {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.se-switchTrack::before {\n  content: "";\n  width: 36px;\n  height: 20px;\n  background: #4b5563;\n  display: inline-block;\n  border-radius: 20px;\n  transition: background-color 0.2s ease-in;\n}\n.se-switchThumb {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  left: 2px;\n  top: 2px;\n  z-index: 2;\n  background: #fff;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  transition: 0.2s ease-in;\n}\n.se-switch input[type=checkbox]:hover + .se-switchTrack .se-switchThumb {\n  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.1);\n}\n.se-switch input[type=checkbox]:checked + .se-switchTrack::before {\n  background: #376fcb;\n}\n.se-switch input[type=checkbox]:checked + .se-switchTrack .se-switchThumb {\n  background: #4285f4;\n  left: 18px;\n}\n.se-switchLabel {\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  color: #e5e7eb;\n}\n.se-switch input[type=checkbox]:checked ~ .se-switchTrack .se-switchLabel {\n  color: #2aa8d8;\n}\n.se-lightList {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.se-lightRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 10px;\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.1);\n  background: rgba(255, 255, 255, 0.03);\n  cursor: pointer;\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n}\n.se-lightRow:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.se-lightRow--active {\n  background: rgba(42, 168, 216, 0.12);\n  border-color: rgba(42, 168, 216, 0.35);\n}\n.se-lightRowLabel {\n  font-size: 13px;\n  color: #d8e0ee;\n}\n.se-lightActions {\n  display: flex;\n  gap: 8px;\n}\n.se-lightProps {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding-top: 4px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n}\n.se-animationList {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.se-animationCard {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding: 16px;\n  border-radius: 14px;\n  border: 1px solid rgba(148, 163, 184, 0.16);\n  background: rgba(15, 23, 42, 0.48);\n}\n.se-animationCard--active {\n  border-color: rgba(42, 168, 216, 0.45);\n  box-shadow: inset 0 0 0 1px rgba(42, 168, 216, 0.16);\n}\n.se-animationHeader {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n.se-animationHeading {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 6px;\n}\n.se-animationTitleRow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n.se-animationStatus,\n.se-animationBadge {\n  display: inline-flex;\n  align-items: center;\n  min-height: 22px;\n  padding: 0 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.se-animationStatus {\n  background: rgba(42, 168, 216, 0.16);\n  color: #9fe8ff;\n}\n.se-animationBadge {\n  background: rgba(99, 102, 241, 0.18);\n  color: #d9ddff;\n}\n.se-animationSource {\n  font-size: 12px;\n  color: #93a4c0;\n  word-break: break-word;\n}\n.se-animationMeta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.se-animationMeta span {\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.06);\n  padding: 4px 9px;\n  font-size: 12px;\n  color: #c6d0e2;\n}\n.se-animationDangerButton,\n.se-animationButton,\n.se-animationAutoplayButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.2);\n  border-radius: 10px;\n  background: rgba(255, 255, 255, 0.04);\n  color: #e2e8f0;\n  cursor: pointer;\n  transition:\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    color 0.18s ease;\n}\n.se-animationButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.se-animationDangerButton {\n  width: 36px;\n  height: 36px;\n  color: #fca5a5;\n}\n.se-animationDangerButton:hover,\n.se-animationButton:hover,\n.se-animationAutoplayButton:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.34);\n}\n.se-animationButtonRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.se-animationButton {\n  min-height: 36px;\n  padding: 0 14px;\n  font-size: 13px;\n  font-weight: 600;\n}\n.se-animationButton--icon {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\n  height: 38px;\n}\n.se-animationSeekRow {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.se-animationSeek {\n  flex: 1;\n  min-width: 0;\n}\n.se-animationSeekTime {\n  flex-shrink: 0;\n  min-width: 86px;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n  font-size: 12px;\n  color: #97a3b6;\n}\n.se-animationGrid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n.se-animationSpeedRow {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 88px;\n  gap: 10px;\n  align-items: center;\n}\n.se-animationSpeedInput {\n  text-align: right;\n}\n.se-animationAutoplayButton {\n  align-self: flex-start;\n  min-height: 36px;\n  padding: 0 14px;\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.se-animationAutoplayButton--active {\n  background: rgba(42, 168, 216, 0.18);\n  border-color: rgba(42, 168, 216, 0.42);\n  color: #dff8ff;\n}\n.se-removedAnimations {\n  overflow: hidden;\n  border-radius: 12px;\n  border: 1px solid rgba(148, 163, 184, 0.14);\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-removedAnimationList {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px;\n}\n.se-removedAnimationRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border-radius: 10px;\n  background: rgba(15, 23, 42, 0.42);\n  padding: 12px;\n}\n.se-removedAnimationName {\n  font-size: 13px;\n  font-weight: 600;\n  color: #e2e8f0;\n}\n@media (max-width: 900px) {\n  .se-animationGrid {\n    grid-template-columns: 1fr;\n  }\n  .se-animationSpeedRow {\n    grid-template-columns: 1fr;\n  }\n}\n.bb-viewSpotOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  backdrop-filter: blur(4px);\n  animation: bb-fadeIn 0.2s ease;\n}\n.bb-viewSpotPopup {\n  background: #1e1e20;\n  border-radius: 12px;\n  max-width: 480px;\n  width: 90%;\n  max-height: 80vh;\n  overflow-y: auto;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n  border: 1px solid #333335;\n  animation: bb-slideUp 0.25s ease;\n}\n.bb-viewSpotHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  border-bottom: 1px solid #2a2a2c;\n}\n.bb-viewSpotTitle {\n  font-size: 18px;\n  font-weight: 600;\n  color: #e8e8ea;\n  margin: 0;\n}\n.bb-viewSpotClose {\n  background: none;\n  border: none;\n  color: #888;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0 4px;\n  line-height: 1;\n  transition: color 0.2s;\n}\n.bb-viewSpotClose:hover {\n  color: #e8e8ea;\n}\n.bb-viewSpotBody {\n  padding: 24px;\n}\n.bb-viewSpotDescription {\n  color: #c8c8ca;\n  font-size: 14px;\n  line-height: 1.6;\n  margin-bottom: 20px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.bb-viewSpotPosition {\n  background: #141416;\n  border-radius: 8px;\n  padding: 12px 16px;\n  margin-bottom: 24px;\n  font-size: 13px;\n  color: #a0a0a2;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.bb-viewSpotLabel {\n  font-weight: 500;\n  color: #888;\n}\n.bb-viewSpotCode {\n  background: #0a0a0c;\n  padding: 4px 10px;\n  border-radius: 4px;\n  font-family:\n    "Monaco",\n    "Menlo",\n    monospace;\n  font-size: 12px;\n  color: #8be9fd;\n}\n.bb-viewSpotActions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  padding-top: 4px;\n}\n.bb-editAnnotationOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.bb-editAnnotationPopup {\n  background: #0f141e;\n  border-radius: 16px;\n  padding: 24px;\n  min-width: 200px;\n  max-width: 400px;\n  width: 90%;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n}\n.bb-editAnnotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding-bottom: 12px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.12);\n}\n.bb-editAnnotationTitle {\n  color: #f8fafc;\n  font-size: 18px;\n  font-weight: 600;\n  margin: 0;\n}\n.bb-editAnnotationClose {\n  background: none;\n  border: none;\n  color: #94a3b8;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0 4px;\n}\n.bb-editAnnotationClose:hover {\n  color: #f8fafc;\n}\n.bb-editAnnotationBody {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.bb-editAnnotationActions {\n  display: flex;\n  gap: 8px;\n  margin-top: 8px;\n}\n.se-cinematicHint {\n  margin: 0 0 10px;\n  font-size: 12px;\n  line-height: 1.5;\n  color: rgba(255, 255, 255, 0.55);\n}\n.bb-button.se-cinematicAdd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 100%;\n  margin-bottom: 12px;\n  background: #135bc0;\n  color: white;\n}\n.bb-button.se-cinematicAdd:hover:not(:disabled) {\n  background: #1a68d6;\n}\n.se-waypointList {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 14px;\n}\n.se-waypointCard {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-waypointBadge {\n  flex: none;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: 600;\n  color: #06343c;\n  background: #22d3ee;\n}\n.se-waypointBody {\n  flex: 1;\n  min-width: 0;\n}\n.se-waypointCoords {\n  font-size: 11px;\n  line-height: 1.4;\n  color: rgba(255, 255, 255, 0.6);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.se-waypointActions {\n  flex: none;\n  display: flex;\n  gap: 2px;\n}\n.se-waypointAction {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  transition: background 0.15s ease, color 0.15s ease;\n}\n.se-waypointAction:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.1);\n  color: #fff;\n}\n.se-waypointAction:disabled {\n  opacity: 0.35;\n  cursor: default;\n}\n.se-waypointAction--delete:hover:not(:disabled) {\n  background: rgba(248, 113, 113, 0.16);\n  color: #f87171;\n}\n.bb-cameraWaypoint {\n  align-items: flex-start;\n  margin-bottom: 8px;\n}\n.bb-cameraWaypoint .bb-cameraLiveBadge,\n.bb-cameraWaypoint .bb-cameraSavedBadge {\n  flex: none;\n}\n.bb-cameraWaypointLabel {\n  font-size: 11px;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.8);\n  margin-bottom: 2px;\n}\n.bb-cameraControls--centered {\n  justify-content: center;\n  margin: 12px 0;\n}\n');
+styleInject('.se-tabContent {\n  display: flex;\n  flex-direction: column;\n}\n.se-tabContent * {\n  box-sizing: border-box;\n}\n.se-subTabRow {\n  display: flex;\n  justify-content: space-between;\n  gap: 6px;\n  padding-bottom: 16px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n  margin-bottom: 4px;\n}\n.se-subTab {\n  padding: 8px 12px;\n  display: flex;\n  justify-items: center;\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n  background: rgba(255, 255, 255, 0.04);\n  color: #b3bfd2;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition:\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    color 0.18s ease;\n}\n.se-subTab:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.32);\n}\n.se-subTab--active {\n  background: rgba(99, 102, 241, 0.18);\n  border-color: rgba(99, 102, 241, 0.4);\n  color: #f8fafc;\n}\n.se-generalContent {\n  display: flex;\n  flex-direction: column;\n  padding-top: 0;\n}\n.se-placeholder {\n  font-size: 13px;\n  color: #93a4c0;\n}\n.se-section {\n  margin-bottom: 10px;\n  border-radius: 7px;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  overflow: hidden;\n  padding: 0;\n}\n.se-section:last-child {\n  margin-bottom: 0;\n}\n.se-sectionTitle {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #c3cbdb;\n  padding: 11px 14px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.1);\n}\n.se-sectionBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 14px;\n}\n.se-field {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n.se-fieldInline {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n.se-fieldLabel {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: 700;\n  color: #d7dee9;\n}\n.se-fieldValue {\n  font-variant-numeric: tabular-nums;\n  font-size: 12px;\n  color: #93a4c0;\n}\n.se-slider {\n  width: 100%;\n  accent-color: #2aa8d8;\n  cursor: pointer;\n}\n.se-checkbox {\n  width: 18px;\n  height: 18px;\n  accent-color: #2aa8d8;\n  cursor: pointer;\n}\n.se-select,\n.se-textInput,\n.se-numberInput {\n  background: rgba(15, 23, 42, 0.28);\n  border: 1px solid rgba(148, 163, 184, 0.2);\n  border-radius: 7px;\n  color: #f8fafc;\n  font-size: 13px;\n  padding: 11px 13px;\n  outline: none;\n}\n.se-select:focus,\n.se-textInput:focus,\n.se-numberInput:focus {\n  outline: none;\n  border-color: rgba(42, 168, 216, 0.65);\n  box-shadow: 0 0 0 4px rgba(42, 168, 216, 0.12);\n}\n.se-select {\n  min-width: 130px;\n  text-transform: capitalize;\n}\n.se-textInput {\n  width: 100%;\n}\n.se-numberInput {\n  width: 100%;\n}\n.se-swatch {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-width: 96px;\n  height: 30px;\n  padding: 0 8px;\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.35);\n  cursor: pointer;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);\n}\n.se-swatchCode {\n  font-size: 11px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  color: #fff;\n  mix-blend-mode: difference;\n}\n.se-colorPicker {\n  margin-top: 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  width: fit-content;\n}\n.se-colorPicker .react-colorful {\n  width: 100%;\n  height: 140px;\n}\n.se-inlineColorPicker .react-colorful {\n  width: 100%;\n  height: 240px;\n}\n.se-colorPickerPopover {\n  z-index: 1000;\n  padding: 10px;\n  border-radius: 8px;\n  background: #1b2333;\n  border: 1px solid rgba(148, 163, 184, 0.25);\n  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);\n}\n.se-colorPickerPopover .react-colorful {\n  width: 200px;\n  height: 160px;\n}\n.se-vectorRow {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 8px;\n}\n.se-vectorAxis {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 11px;\n  color: #93a4c0;\n}\n.se-panel {\n  margin-bottom: 10px;\n  overflow: hidden;\n  border: 1px solid rgba(148, 163, 184, 0.12);\n  border-radius: 7px;\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-panel:last-child {\n  margin-bottom: 0;\n}\n.se-panelHeader {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border: none;\n  background: rgba(255, 255, 255, 0.03);\n  padding: 11px 14px;\n  color: #e5e7eb;\n  cursor: pointer;\n  text-align: left;\n}\n.se-panelHeader:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.se-panelHeaderMain {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 8px;\n}\n.se-panelChevron {\n  flex-shrink: 0;\n  color: #8b97ab;\n  transform: rotate(-90deg);\n  transition: transform 0.18s ease;\n}\n.se-panelChevron--open {\n  transform: rotate(0deg);\n}\n.se-panelTitle {\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: #c3cbdb;\n}\n.se-panelHelp {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-left: 2px;\n  border-radius: 999px;\n  color: #b9c0ca;\n  cursor: help;\n  transition:\n    background 0.18s ease,\n    color 0.18s ease,\n    transform 0.18s ease;\n}\n.se-panelHelp:hover {\n  background: rgba(255, 255, 255, 0.08);\n  color: #eef2ff;\n  transform: translateY(-0.5px);\n}\n.se-panelTrailing {\n  display: flex;\n  align-items: center;\n}\n.se-panelBody {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 14px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n  background: transparent;\n}\n.se-iconButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border: none;\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.08);\n  color: #d7dde8;\n  cursor: pointer;\n}\n.se-iconButton:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n.se-axisStepperGrid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 12px;\n}\n.se-axisStepper {\n  display: grid;\n  grid-template-columns: 40px 1fr 40px;\n  align-items: center;\n  min-height: 30px;\n  border-radius: 10px;\n  background: rgba(17, 24, 39, 0.62);\n  border: 1px solid rgba(255, 255, 255, 0.05);\n}\n.se-axisStepperButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  border: none;\n  background: transparent;\n  color: #f3f4f6;\n  cursor: pointer;\n}\n.se-axisStepperButton:hover {\n  background: rgba(255, 255, 255, 0.04);\n}\n.se-axisStepperLabel {\n  text-align: center;\n  font-size: 15px;\n  color: #f3f4f6;\n}\n.se-segmentedControl {\n  display: grid;\n  grid-auto-flow: column;\n  overflow: hidden;\n  border-radius: 10px;\n  background: rgba(17, 24, 39, 0.62);\n}\n.se-segmentedOption {\n  min-height: 35px;\n  border: none;\n  background: transparent;\n  color: #d1d5db;\n  font-size: 14px;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n.se-segmentedOption--active {\n  background: #2aa8d8;\n  color: #fff;\n}\n.se-helperCard {\n  padding: 32px;\n  text-align: center;\n  background: rgba(15, 23, 42, 0.44);\n  border-radius: 10px;\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  color: #94a3b8;\n  font-size: 14px;\n}\n.se-helperCard strong {\n  font-size: 14px;\n}\n.se-helperCard span {\n  font-size: 13px;\n  line-height: 1.4;\n  color: #c7d0df;\n}\n.se-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n.se-switch input[type=checkbox] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 10;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  opacity: 0;\n}\n.se-switchTrack {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n.se-switchTrack::before {\n  content: "";\n  width: 36px;\n  height: 20px;\n  background: #4b5563;\n  display: inline-block;\n  border-radius: 20px;\n  transition: background-color 0.2s ease-in;\n}\n.se-switchThumb {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  left: 2px;\n  top: 2px;\n  z-index: 2;\n  background: #fff;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  transition: 0.2s ease-in;\n}\n.se-switch input[type=checkbox]:hover + .se-switchTrack .se-switchThumb {\n  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.1);\n}\n.se-switch input[type=checkbox]:checked + .se-switchTrack::before {\n  background: #376fcb;\n}\n.se-switch input[type=checkbox]:checked + .se-switchTrack .se-switchThumb {\n  background: #4285f4;\n  left: 18px;\n}\n.se-switchLabel {\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  color: #e5e7eb;\n}\n.se-switch input[type=checkbox]:checked ~ .se-switchTrack .se-switchLabel {\n  color: #2aa8d8;\n}\n.se-lightList {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.se-lightRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 10px;\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.1);\n  background: rgba(255, 255, 255, 0.03);\n  cursor: pointer;\n  transition: background-color 0.15s ease, border-color 0.15s ease;\n}\n.se-lightRow:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n.se-lightRow--active {\n  background: rgba(42, 168, 216, 0.12);\n  border-color: rgba(42, 168, 216, 0.35);\n}\n.se-lightRowLabel {\n  font-size: 13px;\n  color: #d8e0ee;\n}\n.se-lightActions {\n  display: flex;\n  gap: 8px;\n}\n.se-lightProps {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding-top: 4px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n}\n.se-animationList {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.se-animationCard {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  padding: 16px;\n  border-radius: 14px;\n  border: 1px solid rgba(148, 163, 184, 0.16);\n  background: rgba(15, 23, 42, 0.48);\n}\n.se-animationCard--active {\n  border-color: rgba(42, 168, 216, 0.45);\n  box-shadow: inset 0 0 0 1px rgba(42, 168, 216, 0.16);\n}\n.se-animationHeader {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n}\n.se-animationHeading {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  gap: 6px;\n}\n.se-animationTitleRow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n.se-animationStatus,\n.se-animationBadge {\n  display: inline-flex;\n  align-items: center;\n  min-height: 22px;\n  padding: 0 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n}\n.se-animationStatus {\n  background: rgba(42, 168, 216, 0.16);\n  color: #9fe8ff;\n}\n.se-animationBadge {\n  background: rgba(99, 102, 241, 0.18);\n  color: #d9ddff;\n}\n.se-animationSource {\n  font-size: 12px;\n  color: #93a4c0;\n  word-break: break-word;\n}\n.se-animationMeta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n.se-animationMeta span {\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.06);\n  padding: 4px 9px;\n  font-size: 12px;\n  color: #c6d0e2;\n}\n.se-animationDangerButton,\n.se-animationButton,\n.se-animationAutoplayButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.2);\n  border-radius: 10px;\n  background: rgba(255, 255, 255, 0.04);\n  color: #e2e8f0;\n  cursor: pointer;\n  transition:\n    background-color 0.18s ease,\n    border-color 0.18s ease,\n    color 0.18s ease;\n}\n.se-animationButton:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.se-animationDangerButton {\n  width: 36px;\n  height: 36px;\n  color: #fca5a5;\n}\n.se-animationDangerButton:hover,\n.se-animationButton:hover,\n.se-animationAutoplayButton:hover {\n  background: rgba(255, 255, 255, 0.08);\n  border-color: rgba(148, 163, 184, 0.34);\n}\n.se-animationButtonRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.se-animationButton {\n  min-height: 36px;\n  padding: 0 14px;\n  font-size: 13px;\n  font-weight: 600;\n}\n.se-animationButton--icon {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\n  height: 38px;\n}\n.se-animationSeekRow {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.se-animationSeek {\n  flex: 1;\n  min-width: 0;\n}\n.se-animationSeekTime {\n  flex-shrink: 0;\n  min-width: 86px;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n  font-size: 12px;\n  color: #97a3b6;\n}\n.se-animationGrid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n.se-animationSpeedRow {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 88px;\n  gap: 10px;\n  align-items: center;\n}\n.se-animationSpeedInput {\n  text-align: right;\n}\n.se-animationAutoplayButton {\n  align-self: flex-start;\n  min-height: 36px;\n  padding: 0 14px;\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.se-animationAutoplayButton--active {\n  background: rgba(42, 168, 216, 0.18);\n  border-color: rgba(42, 168, 216, 0.42);\n  color: #dff8ff;\n}\n.se-removedAnimations {\n  overflow: hidden;\n  border-radius: 12px;\n  border: 1px solid rgba(148, 163, 184, 0.14);\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-removedAnimationList {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px;\n}\n.se-removedAnimationRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border-radius: 10px;\n  background: rgba(15, 23, 42, 0.42);\n  padding: 12px;\n}\n.se-removedAnimationName {\n  font-size: 13px;\n  font-weight: 600;\n  color: #e2e8f0;\n}\n@media (max-width: 900px) {\n  .se-animationGrid {\n    grid-template-columns: 1fr;\n  }\n  .se-animationSpeedRow {\n    grid-template-columns: 1fr;\n  }\n}\n.bb-viewSpotOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  backdrop-filter: blur(4px);\n  animation: bb-fadeIn 0.2s ease;\n}\n.bb-viewSpotPopup {\n  background: #1e1e20;\n  border-radius: 12px;\n  max-width: 480px;\n  width: 90%;\n  max-height: 80vh;\n  overflow-y: auto;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n  border: 1px solid #333335;\n  animation: bb-slideUp 0.25s ease;\n}\n.bb-viewSpotHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  border-bottom: 1px solid #2a2a2c;\n}\n.bb-viewSpotTitle {\n  font-size: 18px;\n  font-weight: 600;\n  color: #e8e8ea;\n  margin: 0;\n}\n.bb-viewSpotClose {\n  background: none;\n  border: none;\n  color: #888;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0 4px;\n  line-height: 1;\n  transition: color 0.2s;\n}\n.bb-viewSpotClose:hover {\n  color: #e8e8ea;\n}\n.bb-viewSpotBody {\n  padding: 24px;\n}\n.bb-viewSpotDescription {\n  color: #c8c8ca;\n  font-size: 14px;\n  line-height: 1.6;\n  margin-bottom: 20px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.bb-viewSpotPosition {\n  background: #141416;\n  border-radius: 8px;\n  padding: 12px 16px;\n  margin-bottom: 24px;\n  font-size: 13px;\n  color: #a0a0a2;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.bb-viewSpotLabel {\n  font-weight: 500;\n  color: #888;\n}\n.bb-viewSpotCode {\n  background: #0a0a0c;\n  padding: 4px 10px;\n  border-radius: 4px;\n  font-family:\n    "Monaco",\n    "Menlo",\n    monospace;\n  font-size: 12px;\n  color: #8be9fd;\n}\n.bb-viewSpotActions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  padding-top: 4px;\n}\n.bb-editAnnotationOverlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n.bb-editAnnotationPopup {\n  background: #0f141e;\n  border-radius: 16px;\n  padding: 24px;\n  min-width: 200px;\n  max-width: 400px;\n  width: 90%;\n  border: 1px solid rgba(148, 163, 184, 0.18);\n}\n.bb-editAnnotationHeader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding-bottom: 12px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.12);\n}\n.bb-editAnnotationTitle {\n  color: #f8fafc;\n  font-size: 18px;\n  font-weight: 600;\n  margin: 0;\n}\n.bb-editAnnotationClose {\n  background: none;\n  border: none;\n  color: #94a3b8;\n  font-size: 24px;\n  cursor: pointer;\n  padding: 0 4px;\n}\n.bb-editAnnotationClose:hover {\n  color: #f8fafc;\n}\n.bb-editAnnotationBody {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n.bb-editAnnotationActions {\n  display: flex;\n  gap: 8px;\n  margin-top: 8px;\n}\n.se-cinematicHint {\n  margin: 0 0 10px;\n  font-size: 12px;\n  line-height: 1.5;\n  color: rgba(255, 255, 255, 0.55);\n}\n.bb-button.se-cinematicAdd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 100%;\n  margin-bottom: 12px;\n  background: #135bc0;\n  color: white;\n}\n.bb-button.se-cinematicAdd:hover:not(:disabled) {\n  background: #1a68d6;\n}\n.se-waypointList {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-bottom: 14px;\n}\n.se-waypointCard {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 12px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 8px;\n  background: rgba(255, 255, 255, 0.03);\n}\n.se-waypointBadge {\n  flex: none;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: 600;\n  color: #06343c;\n  background: #22d3ee;\n}\n.se-waypointBody {\n  flex: 1;\n  min-width: 0;\n}\n.se-waypointCoords {\n  font-size: 11px;\n  line-height: 1.4;\n  color: rgba(255, 255, 255, 0.5);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.se-waypointActions {\n  flex: none;\n  display: flex;\n  gap: 2px;\n}\n.se-waypointAction {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.5);\n  cursor: pointer;\n  transition: background 0.15s ease, color 0.15s ease;\n}\n.se-waypointAction:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.08);\n  color: #fff;\n}\n.se-waypointAction:disabled {\n  opacity: 0.35;\n  cursor: default;\n}\n.se-waypointAction--delete:hover:not(:disabled) {\n  background: rgba(248, 113, 113, 0.16);\n  color: #f87171;\n}\n.se-customBadge {\n  display: inline-block;\n  padding: 1px 8px;\n  border-radius: 3px;\n  background: rgba(34, 211, 238, 0.15);\n  color: #22d3ee;\n  font-size: 10px;\n  font-weight: 600;\n  margin-top: 4px;\n}\n.se-customizeToggle {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 8px 12px;\n  background: rgba(255, 255, 255, 0.03);\n  border-radius: 8px;\n  border: 1px solid rgba(148, 163, 184, 0.08);\n  margin: 8px 0 12px;\n}\n.se-toggleLabel {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #f8fafc;\n  cursor: pointer;\n  user-select: none;\n}\n.se-toggleLabel input[type=checkbox] {\n  width: 16px;\n  height: 16px;\n  accent-color: #22d3ee;\n  cursor: pointer;\n}\n.se-toggleLabel svg {\n  color: #22d3ee;\n  width: 14px;\n  height: 14px;\n}\n.se-toggleHint {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  padding-left: 28px;\n}\n.se-segmentBetween {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 14px;\n  margin: 6px 0 6px 32px;\n  background: rgba(255, 255, 255, 0.03);\n  border-radius: 6px;\n  border-left: 3px solid rgba(34, 211, 238, 0.25);\n}\n.se-segmentLabel {\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.45);\n}\n.se-segmentControls {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.se-durationLabel {\n  font-size: 10px;\n  color: rgba(255, 255, 255, 0.35);\n  font-weight: 500;\n  white-space: nowrap;\n}\n.se-segmentSlider {\n  flex: 1;\n  min-width: 80px;\n  max-width: 150px;\n  height: 4px;\n  -webkit-appearance: none;\n  appearance: none;\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 2px;\n  outline: none;\n}\n.se-segmentSlider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: #22d3ee;\n  cursor: pointer;\n  border: 2px solid rgba(255, 255, 255, 0.2);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n.se-segmentSlider::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: #22d3ee;\n  cursor: pointer;\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n.se-segmentValue {\n  font-size: 12px;\n  font-weight: 600;\n  color: #22d3ee;\n  min-width: 36px;\n  text-align: center;\n}\n.se-presetButtons {\n  display: flex;\n  gap: 4px;\n}\n.se-presetButton {\n  padding: 2px 8px;\n  background: rgba(255, 255, 255, 0.06);\n  border: 1px solid rgba(148, 163, 184, 0.15);\n  border-radius: 4px;\n  font-size: 10px;\n  color: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  font-weight: 500;\n}\n.se-presetButton:hover {\n  background: #22d3ee;\n  color: #06343c;\n  border-color: #22d3ee;\n}\n.se-totalDuration {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 4px;\n  margin: 8px 0 12px;\n  border-top: 1px solid rgba(148, 163, 184, 0.1);\n  padding-top: 12px;\n}\n.se-totalLabel {\n  font-size: 12px;\n  color: rgba(255, 255, 255, 0.5);\n  font-weight: 500;\n}\n.se-totalValue {\n  font-size: 14px;\n  font-weight: 600;\n  color: #22d3ee;\n}\n.se-totalHint {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.35);\n  font-weight: 400;\n  margin-left: 8px;\n}\n');
 
 // src/components/BindingBuilder/SceneSettings/SceneSettingsTab.tsx
 var import_lucide_react11 = require("lucide-react");
@@ -11882,13 +12535,13 @@ function SceneSettingsTab({
   animationClipDetails = [],
   animationPlayback = FALLBACK_ANIMATION_PLAYBACK
 }) {
-  const [internalActiveSubTab, setInternalActiveSubTab] = (0, import_react32.useState)("General");
+  const [internalActiveSubTab, setInternalActiveSubTab] = (0, import_react33.useState)("General");
   const activeSubTab = controlledActiveSubTab ?? internalActiveSubTab;
   const resolvedAnimationPlayback = animationPlayback ?? FALLBACK_ANIMATION_PLAYBACK;
   const { tier } = useBindingBuilderContext();
   const canUseStarterFeatures = hasTier(tier, "starter");
   const canUseGrowthFeatures = hasTier(tier, "growth");
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (controlledActiveSubTab !== void 0) {
       setInternalActiveSubTab(controlledActiveSubTab);
     }
@@ -12068,7 +12721,7 @@ function EnableToggle2({
 }
 
 // src/components/BindingBuilder/components/MaterialSection.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/ModelViewer/types/objectBinding.ts
 var MATERIAL_SIDES = ["front", "back", "double"];
@@ -12115,7 +12768,7 @@ function MaterialPanelGroup({
 }
 
 // src/components/BindingBuilder/components/MaterialFields.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_react_colorful4 = require("react-colorful");
 var import_lucide_react13 = require("lucide-react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
@@ -12125,7 +12778,7 @@ function MaterialTexturePathField({
   placeholder,
   onChange
 }) {
-  const inputRef = (0, import_react33.useRef)(null);
+  const inputRef = (0, import_react34.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "bb-field bb-field--full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { className: "bb-label", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "bb-fileField", children: [
@@ -12182,9 +12835,9 @@ function MaterialColorField({
   fallback = "#ffffff",
   onChange
 }) {
-  const [open, setOpen] = (0, import_react33.useState)(false);
+  const [open, setOpen] = (0, import_react34.useState)(false);
   const color = value || fallback;
-  const anchorRef = (0, import_react33.useRef)(null);
+  const anchorRef = (0, import_react34.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "bb-field", children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "bb-label", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "se-fieldInline", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { ref: anchorRef, style: { display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -12336,8 +12989,8 @@ function MaterialSection({
     tier: "starter",
     locked: !canUseStarterFeatures
   };
-  const [roughnessMode, setRoughnessMode] = (0, import_react34.useState)("roughness");
-  const [anisotropyMode, setAnisotropyMode] = (0, import_react34.useState)(
+  const [roughnessMode, setRoughnessMode] = (0, import_react35.useState)("roughness");
+  const [anisotropyMode, setAnisotropyMode] = (0, import_react35.useState)(
     "factor"
   );
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
@@ -13376,7 +14029,7 @@ function MaterialPresetGallery({
 }
 
 // src/components/BindingBuilder/components/ToolbarExportMenu.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_lucide_react14 = require("lucide-react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function ToolbarExportMenu({
@@ -13385,9 +14038,9 @@ function ToolbarExportMenu({
   onExportJson,
   onExportTs
 }) {
-  const [open, setOpen] = (0, import_react35.useState)(false);
-  const wrapperRef = (0, import_react35.useRef)(null);
-  (0, import_react35.useEffect)(() => {
+  const [open, setOpen] = (0, import_react36.useState)(false);
+  const wrapperRef = (0, import_react36.useRef)(null);
+  (0, import_react36.useEffect)(() => {
     if (!open) return;
     const close = (event) => {
       if (!wrapperRef.current?.contains(event.target)) {
@@ -13824,10 +14477,10 @@ function CameraPositionPanel({
 }
 
 // src/components/BindingBuilder/components/SceneNodesPanel.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/BindingBuilder/utils/bindingFactory.ts
-function slugify(value) {
+function slugify2(value) {
   return value.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[_\s]+/g, "-").replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase();
 }
 function humanizeNodeName(value) {
@@ -13873,7 +14526,7 @@ function buildDefaultActions(type) {
 function createDefaultBinding(nodeName) {
   const type = inferType(nodeName);
   return {
-    id: slugify(nodeName),
+    id: slugify2(nodeName),
     modelObjectId: nodeName,
     type,
     label: humanizeNodeName(nodeName),
@@ -13913,9 +14566,9 @@ function SceneNodesPanel({
   isOpen = true,
   onToggle
 }) {
-  const [search, setSearch] = (0, import_react36.useState)("");
-  const nodeKeys = (0, import_react36.useMemo)(() => Object.keys(bindings), [bindings]);
-  const filteredNodeKeys = (0, import_react36.useMemo)(() => {
+  const [search, setSearch] = (0, import_react37.useState)("");
+  const nodeKeys = (0, import_react37.useMemo)(() => Object.keys(bindings), [bindings]);
+  const filteredNodeKeys = (0, import_react37.useMemo)(() => {
     const query = search.trim().toLowerCase();
     if (!query) return nodeKeys;
     return nodeKeys.filter((nodeKey) => {
@@ -14058,7 +14711,7 @@ function mergeAnimationConfig(sceneConfig, animationDetails) {
 }
 
 // src/components/BindingBuilder/hooks/useUndoableState.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 var MAX_HISTORY = 100;
 function historyReducer(state, action) {
   switch (action.type) {
@@ -14097,13 +14750,13 @@ function historyReducer(state, action) {
   }
 }
 function useUndoableState(initial, coalesceWindowMs = 600) {
-  const [state, dispatch] = (0, import_react37.useReducer)(historyReducer, {
+  const [state, dispatch] = (0, import_react38.useReducer)(historyReducer, {
     past: [],
     present: initial,
     future: []
   });
-  const lastSetAt = (0, import_react37.useRef)(0);
-  const setValue = (0, import_react37.useCallback)(
+  const lastSetAt = (0, import_react38.useRef)(0);
+  const setValue = (0, import_react38.useCallback)(
     (updater) => {
       const now = Date.now();
       const coalesce = now - lastSetAt.current < coalesceWindowMs;
@@ -14112,15 +14765,15 @@ function useUndoableState(initial, coalesceWindowMs = 600) {
     },
     [coalesceWindowMs]
   );
-  const undo = (0, import_react37.useCallback)(() => {
+  const undo = (0, import_react38.useCallback)(() => {
     lastSetAt.current = 0;
     dispatch({ type: "undo" });
   }, []);
-  const redo = (0, import_react37.useCallback)(() => {
+  const redo = (0, import_react38.useCallback)(() => {
     lastSetAt.current = 0;
     dispatch({ type: "redo" });
   }, []);
-  const reset = (0, import_react37.useCallback)((value) => {
+  const reset = (0, import_react38.useCallback)((value) => {
     lastSetAt.current = 0;
     dispatch({ type: "reset", value });
   }, []);
@@ -14136,7 +14789,7 @@ function useUndoableState(initial, coalesceWindowMs = 600) {
 }
 
 // src/components/BindingBuilder/utils/exportAssets.ts
-var import_fflate2 = require("fflate");
+var import_fflate3 = require("fflate");
 
 // src/components/BindingBuilder/utils/serialization.ts
 function toBindingsJson(bindings) {
@@ -14212,11 +14865,11 @@ async function downloadExport(filename, content, mimeType, zipFilename, assets)
     downloadTextFile(filename, content, mimeType);
     return;
   }
-  const files = { [filename]: (0, import_fflate2.strToU8)(content) };
+  const files = { [filename]: (0, import_fflate3.strToU8)(content) };
   for (const asset of assets) {
     files[asset.path] = new Uint8Array(await asset.blob.arrayBuffer());
   }
-  const zipped = (0, import_fflate2.zipSync)(files, { level: 6 });
+  const zipped = (0, import_fflate3.zipSync)(files, { level: 6 });
   const blob = new Blob([zipped], { type: "application/zip" });
   const url = URL.createObjectURL(blob);
   const link = document.createElement("a");
@@ -14366,30 +15019,30 @@ function mergeSceneConfigSection(current, incoming) {
   return next;
 }
 function BindingBuilder({ licenseKey }) {
-  const modelInputRef = (0, import_react38.useRef)(null);
-  const bindingsInputRef = (0, import_react38.useRef)(null);
-  const sceneConfigInputRef = (0, import_react38.useRef)(null);
-  const [modelUrl, setModelUrl] = (0, import_react38.useState)(null);
-  const [modelName, setModelName] = (0, import_react38.useState)("");
-  const [selectedItem, setSelectedItem] = (0, import_react38.useState)(null);
+  const modelInputRef = (0, import_react39.useRef)(null);
+  const bindingsInputRef = (0, import_react39.useRef)(null);
+  const sceneConfigInputRef = (0, import_react39.useRef)(null);
+  const [modelUrl, setModelUrl] = (0, import_react39.useState)(null);
+  const [modelName, setModelName] = (0, import_react39.useState)("");
+  const [selectedItem, setSelectedItem] = (0, import_react39.useState)(null);
   const bindingsHistory = useUndoableState({});
   const bindings = bindingsHistory.value;
   const setBindings = bindingsHistory.setValue;
-  const [loading, setLoading] = (0, import_react38.useState)(false);
-  const [isExporting, setIsExporting] = (0, import_react38.useState)(false);
-  const [statusMessage, setStatusMessage] = (0, import_react38.useState)(
+  const [loading, setLoading] = (0, import_react39.useState)(false);
+  const [isExporting, setIsExporting] = (0, import_react39.useState)(false);
+  const [statusMessage, setStatusMessage] = (0, import_react39.useState)(
     "Load the demo model or upload a GLB/GLTF model to generate bindings."
   );
-  const [statusTone, setStatusTone] = (0, import_react38.useState)("default");
-  const [statusBannerVisible, setStatusBannerVisible] = (0, import_react38.useState)(false);
-  const [metricsDraft, setMetricsDraft] = (0, import_react38.useState)("{}");
-  const [metadataDraft, setMetadataDraft] = (0, import_react38.useState)("{}");
-  const [metricsError, setMetricsError] = (0, import_react38.useState)(null);
-  const [metadataError, setMetadataError] = (0, import_react38.useState)(null);
-  const [isPreviewDragActive, setIsPreviewDragActive] = (0, import_react38.useState)(false);
-  const [isEditorCollapsed, setIsEditorCollapsed] = (0, import_react38.useState)(false);
-  const [isNodesCollapsed, setIsNodesCollapsed] = (0, import_react38.useState)(false);
-  const [openObjectSections, setOpenObjectSections] = (0, import_react38.useState)({
+  const [statusTone, setStatusTone] = (0, import_react39.useState)("default");
+  const [statusBannerVisible, setStatusBannerVisible] = (0, import_react39.useState)(false);
+  const [metricsDraft, setMetricsDraft] = (0, import_react39.useState)("{}");
+  const [metadataDraft, setMetadataDraft] = (0, import_react39.useState)("{}");
+  const [metricsError, setMetricsError] = (0, import_react39.useState)(null);
+  const [metadataError, setMetadataError] = (0, import_react39.useState)(null);
+  const [isPreviewDragActive, setIsPreviewDragActive] = (0, import_react39.useState)(false);
+  const [isEditorCollapsed, setIsEditorCollapsed] = (0, import_react39.useState)(false);
+  const [isNodesCollapsed, setIsNodesCollapsed] = (0, import_react39.useState)(false);
+  const [openObjectSections, setOpenObjectSections] = (0, import_react39.useState)({
     identity: true,
     basics: true,
     material: true,
@@ -14398,7 +15051,7 @@ function BindingBuilder({ licenseKey }) {
     metrics: false,
     metadata: false
   });
-  const [openMaterialPanels, setOpenMaterialPanels] = (0, import_react38.useState)({
+  const [openMaterialPanels, setOpenMaterialPanels] = (0, import_react39.useState)({
     pbr: true,
     roughness: false,
     emission: false,
@@ -14414,27 +15067,27 @@ function BindingBuilder({ licenseKey }) {
   });
   const toggleObjectSection = (key) => setOpenObjectSections((prev) => ({ ...prev, [key]: !prev[key] }));
   const toggleMaterialPanel = (key) => setOpenMaterialPanels((prev) => ({ ...prev, [key]: !prev[key] }));
-  const [activeEditorTab, setActiveEditorTab] = (0, import_react38.useState)(
+  const [activeEditorTab, setActiveEditorTab] = (0, import_react39.useState)(
     "object"
   );
-  const [activeSubTab, setActiveSubTab] = (0, import_react38.useState)("General");
-  const [pbrWorkflow, setPbrWorkflow] = (0, import_react38.useState)("metalness");
-  const [materialPanelEnabled, setMaterialPanelEnabled] = (0, import_react38.useState)(createMaterialPanelEnabledState());
-  const materialPanelItemRef = (0, import_react38.useRef)(null);
-  const [zoomOnSelected, setZoomOnSelected] = (0, import_react38.useState)(false);
-  const [highlightOnHover, setHighlightOnHover] = (0, import_react38.useState)(true);
-  const [resetDialogOpen, setResetDialogOpen] = (0, import_react38.useState)(false);
-  const [resetTarget, setResetTarget] = (0, import_react38.useState)(
+  const [activeSubTab, setActiveSubTab] = (0, import_react39.useState)("General");
+  const [pbrWorkflow, setPbrWorkflow] = (0, import_react39.useState)("metalness");
+  const [materialPanelEnabled, setMaterialPanelEnabled] = (0, import_react39.useState)(createMaterialPanelEnabledState());
+  const materialPanelItemRef = (0, import_react39.useRef)(null);
+  const [zoomOnSelected, setZoomOnSelected] = (0, import_react39.useState)(false);
+  const [highlightOnHover, setHighlightOnHover] = (0, import_react39.useState)(true);
+  const [resetDialogOpen, setResetDialogOpen] = (0, import_react39.useState)(false);
+  const [resetTarget, setResetTarget] = (0, import_react39.useState)(
     null
   );
   const sceneConfigHistory = useUndoableState(DEFAULT_SCENE_CONFIG);
   const sceneConfig = sceneConfigHistory.value;
   const setSceneConfig = sceneConfigHistory.setValue;
-  const [activeAnnotation, setActiveAnnotation] = (0, import_react38.useState)(null);
-  const [panelHoveredBinding, setPanelHoveredBinding] = (0, import_react38.useState)(null);
+  const [activeAnnotation, setActiveAnnotation] = (0, import_react39.useState)(null);
+  const [panelHoveredBinding, setPanelHoveredBinding] = (0, import_react39.useState)(null);
   const license = useLicense(licenseKey);
   const tier = normalizeTier(license.tier);
-  const bindingBuilderContextValue = (0, import_react38.useMemo)(
+  const bindingBuilderContextValue = (0, import_react39.useMemo)(
     () => ({
       isInsideEditor: true,
       activeTab: activeEditorTab,
@@ -14443,11 +15096,11 @@ function BindingBuilder({ licenseKey }) {
     }),
     [activeEditorTab, activeSubTab, tier]
   );
-  const uploadedModelRef = (0, import_react38.useRef)(null);
-  const previewDragDepthRef = (0, import_react38.useRef)(0);
-  const loadRequestRef = (0, import_react38.useRef)(0);
-  const pendingLoadRef = (0, import_react38.useRef)(null);
-  const loadedSceneRef = (0, import_react38.useRef)(null);
+  const uploadedModelRef = (0, import_react39.useRef)(null);
+  const previewDragDepthRef = (0, import_react39.useRef)(0);
+  const loadRequestRef = (0, import_react39.useRef)(0);
+  const pendingLoadRef = (0, import_react39.useRef)(null);
+  const loadedSceneRef = (0, import_react39.useRef)(null);
   const {
     cameraState,
     resetView,
@@ -14457,14 +15110,16 @@ function BindingBuilder({ licenseKey }) {
     handleCameraChange,
     handleViewerReady
   } = useViewerCamera();
-  const handlePreviewWaypoint = (0, import_react38.useCallback)(
+  const handlePreviewWaypoint = (0, import_react39.useCallback)(
     (waypoint) => {
       setCameraState(
         {
           position: waypoint.position,
           target: waypoint.target,
           fov: cameraState?.fov ?? null,
-          zoom: cameraState?.zoom ?? 1
+          zoom: cameraState?.zoom ?? 1,
+          azimuthAngle: waypoint.azimuthAngle,
+          polarAngle: waypoint.polarAngle
         },
         true
       );
@@ -14479,7 +15134,7 @@ function BindingBuilder({ licenseKey }) {
     position: formatVector3(cameraState.position),
     target: formatVector3(cameraState.target)
   } : null;
-  const handleAnnotationsChange = (0, import_react38.useCallback)(
+  const handleAnnotationsChange = (0, import_react39.useCallback)(
     (newAnnotations) => {
       setSceneConfig((prev) => {
         const currentIds = prev.annotations.map((a) => a.id).join(",");
@@ -14495,7 +15150,7 @@ function BindingBuilder({ licenseKey }) {
     },
     []
   );
-  const handleActiveAnnotationChange = (0, import_react38.useCallback)(
+  const handleActiveAnnotationChange = (0, import_react39.useCallback)(
     (annotation) => {
       setActiveAnnotation(
         annotation ? {
@@ -14505,7 +15160,7 @@ function BindingBuilder({ licenseKey }) {
     },
     []
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!selectedBinding) {
       setMetricsDraft("{}");
       setMetadataDraft("{}");
@@ -14518,7 +15173,7 @@ function BindingBuilder({ licenseKey }) {
     setMetricsError(null);
     setMetadataError(null);
   }, [selectedBinding]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const derived = createMaterialPanelEnabledState(selectedMaterial);
     if (materialPanelItemRef.current !== selectedItem) {
       materialPanelItemRef.current = selectedItem;
@@ -14537,12 +15192,12 @@ function BindingBuilder({ licenseKey }) {
       return changed ? next : prev;
     });
   }, [selectedItem, selectedMaterial]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     return () => {
       uploadedModelRef.current?.cleanup();
     };
   }, []);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const handleKeyDown = (event) => {
       if (event.key.toLowerCase() !== "z" || !(event.metaKey || event.ctrlKey)) {
         return;
@@ -14563,7 +15218,7 @@ function BindingBuilder({ licenseKey }) {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [activeEditorTab, bindingsHistory, sceneConfigHistory]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (loading || statusTone === "default" || statusTone === "success") return;
     setStatusBannerVisible(true);
     const timeout = window.setTimeout(
@@ -14572,8 +15227,8 @@ function BindingBuilder({ licenseKey }) {
     );
     return () => window.clearTimeout(timeout);
   }, [statusMessage, statusTone, loading]);
-  const nodeKeys = (0, import_react38.useMemo)(() => Object.keys(bindings), [bindings]);
-  const idError = (0, import_react38.useMemo)(() => {
+  const nodeKeys = (0, import_react39.useMemo)(() => Object.keys(bindings), [bindings]);
+  const idError = (0, import_react39.useMemo)(() => {
     if (!selectedItem || !selectedBinding) return null;
     const trimmed = selectedBinding.id.trim();
     if (!trimmed) return "ID is required.";
@@ -14616,7 +15271,7 @@ function BindingBuilder({ licenseKey }) {
       });
     }
   };
-  const applyBindingsFromScene = (0, import_react38.useCallback)(
+  const applyBindingsFromScene = (0, import_react39.useCallback)(
     (scene, nextModelName) => {
       const nodeNames = collectNodeNames(scene);
       bindingsHistory.reset(buildBindingsFromNodes(nodeNames));
@@ -14655,7 +15310,7 @@ function BindingBuilder({ licenseKey }) {
     bindingsHistory.reset({});
     setSelectedItem(null);
   };
-  const handleViewerModelLoaded = (0, import_react38.useCallback)(
+  const handleViewerModelLoaded = (0, import_react39.useCallback)(
     (scene) => {
       const pending = pendingLoadRef.current;
       if (!pending || pending.requestId !== loadRequestRef.current) return;
@@ -14665,7 +15320,7 @@ function BindingBuilder({ licenseKey }) {
     },
     [applyBindingsFromScene]
   );
-  const handleViewerLoadError = (0, import_react38.useCallback)((error) => {
+  const handleViewerLoadError = (0, import_react39.useCallback)((error) => {
     const pending = pendingLoadRef.current;
     if (!pending || pending.requestId !== loadRequestRef.current) return;
     pendingLoadRef.current = null;
@@ -14676,7 +15331,7 @@ function BindingBuilder({ licenseKey }) {
     setStatusTone("error");
     setLoading(false);
   }, []);
-  const handleAnimationsReady = (0, import_react38.useCallback)(
+  const handleAnimationsReady = (0, import_react39.useCallback)(
     (controls) => {
       viewerAnimations.handleAnimationsReady(controls);
       const details = controls.clipDetails ?? controls.clips.map((sourceName) => ({ sourceName, duration: 0 }));
@@ -14977,7 +15632,7 @@ function BindingBuilder({ licenseKey }) {
     }));
     setError(null);
   };
-  const handleViewerSelect = (0, import_react38.useCallback)(
+  const handleViewerSelect = (0, import_react39.useCallback)(
     (binding) => {
       if (!binding) {
         setSelectedItem(null);
@@ -14990,7 +15645,7 @@ function BindingBuilder({ licenseKey }) {
     },
     [bindings]
   );
-  const handleSceneNodeSelect = (0, import_react38.useCallback)(
+  const handleSceneNodeSelect = (0, import_react39.useCallback)(
     async (nodeKey) => {
       setSelectedItem(nodeKey);
       setPanelHoveredBinding(null);
@@ -14998,7 +15653,7 @@ function BindingBuilder({ licenseKey }) {
     },
     [focusObject]
   );
-  const saveCameraPositionForSelectedObject = (0, import_react38.useCallback)(() => {
+  const saveCameraPositionForSelectedObject = (0, import_react39.useCallback)(() => {
     if (!selectedItem || !cameraState) {
       return;
     }
@@ -15013,7 +15668,7 @@ function BindingBuilder({ licenseKey }) {
       cameraState: currentCameraState
     }));
   }, [selectedItem, cameraState]);
-  const goToSavedCameraPosition = (0, import_react38.useCallback)(() => {
+  const goToSavedCameraPosition = (0, import_react39.useCallback)(() => {
     if (!savedCameraPosition?.position || !savedCameraPosition?.target) return;
     setCameraState(
       {
@@ -15025,28 +15680,28 @@ function BindingBuilder({ licenseKey }) {
       true
     );
   }, [savedCameraPosition, setCameraState, cameraState]);
-  const clearSavedCameraPosition = (0, import_react38.useCallback)(() => {
+  const clearSavedCameraPosition = (0, import_react39.useCallback)(() => {
     if (!selectedItem) return;
     updateBinding(selectedItem, (binding) => ({
       ...binding,
       cameraState: void 0
     }));
   }, [selectedItem]);
-  const handleResetView = (0, import_react38.useCallback)(async () => {
+  const handleResetView = (0, import_react39.useCallback)(async () => {
     await resetView();
   }, [resetView]);
-  const handleFitScene = (0, import_react38.useCallback)(async () => {
+  const handleFitScene = (0, import_react39.useCallback)(async () => {
     await fitScene();
   }, [fitScene]);
-  const openResetDialog = (0, import_react38.useCallback)((target) => {
+  const openResetDialog = (0, import_react39.useCallback)((target) => {
     setResetTarget(target);
     setResetDialogOpen(true);
   }, []);
-  const closeResetDialog = (0, import_react38.useCallback)(() => {
+  const closeResetDialog = (0, import_react39.useCallback)(() => {
     setResetDialogOpen(false);
     setResetTarget(null);
   }, []);
-  const executeReset = (0, import_react38.useCallback)(() => {
+  const executeReset = (0, import_react39.useCallback)(() => {
     if (resetTarget === "bindings") {
       if (!nodeKeys.length) {
         closeResetDialog();
@@ -15177,7 +15832,9 @@ function BindingBuilder({ licenseKey }) {
                     // the whole settings panel for no reason.
                     activeSubTab === "Cinematic" && cameraState ? {
                       position: cameraState.position,
-                      target: cameraState.target
+                      target: cameraState.target,
+                      azimuthAngle: cameraState.azimuthAngle,
+                      polarAngle: cameraState.polarAngle
                     } : null
                   ),
                   onPreviewWaypoint: handlePreviewWaypoint,
@@ -15602,7 +16259,7 @@ function BindingBuilder({ licenseKey }) {
 }
 
 // src/components/SimpleModelViewer/SimpleModelViewer.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_drei6 = require("@react-three/drei");
 var import_fiber12 = require("@react-three/fiber");
 var import_fiber13 = require("@react-three/fiber");
@@ -15642,7 +16299,7 @@ function applyClippingPlanes(scene, controls) {
   camera.updateProjectionMatrix();
   controls.maxDistance = size * 10;
 }
-var ModelErrorBoundary2 = class extends import_react39.Component {
+var ModelErrorBoundary2 = class extends import_react40.Component {
   constructor() {
     super(...arguments);
     this.state = { hasError: false };
@@ -15674,12 +16331,12 @@ function InnerModel({
     meshopt: true
   });
   const invalidate = (0, import_fiber12.useThree)((state) => state.invalidate);
-  const [hoveredKey, setHoveredKey] = (0, import_react39.useState)(null);
-  const scene = (0, import_react39.useMemo)(
+  const [hoveredKey, setHoveredKey] = (0, import_react40.useState)(null);
+  const scene = (0, import_react40.useMemo)(
     () => import_three_stdlib4.SkeletonUtils.clone(rawScene),
     [rawScene]
   );
-  const meshMap = (0, import_react39.useMemo)(() => {
+  const meshMap = (0, import_react40.useMemo)(() => {
     const map = {};
     scene.traverse((obj) => {
       if (!isMeshNode2(obj)) return;
@@ -15688,7 +16345,7 @@ function InnerModel({
     });
     return map;
   }, [scene]);
-  const perKeyMaterials = (0, import_react39.useMemo)(() => {
+  const perKeyMaterials = (0, import_react40.useMemo)(() => {
     const map = {};
     for (const [key, { ref }] of Object.entries(meshMap)) {
       const original = Array.isArray(ref.material) ? ref.material[0] : ref.material;
@@ -15704,14 +16361,14 @@ function InnerModel({
     }
     return map;
   }, [meshMap]);
-  (0, import_react39.useEffect)(
+  (0, import_react40.useEffect)(
     () => () => {
       Object.values(perKeyMaterials).forEach((m) => m.dispose());
     },
     [perKeyMaterials]
   );
-  const notifiedUrl = (0, import_react39.useRef)(null);
-  (0, import_react39.useEffect)(() => {
+  const notifiedUrl = (0, import_react40.useRef)(null);
+  (0, import_react40.useEffect)(() => {
     if (notifiedUrl.current === url) return;
     notifiedUrl.current = url;
     scene.updateWorldMatrix(true, true);
@@ -15719,7 +16376,7 @@ function InnerModel({
     onMeshesReady(meshMap);
     onModelLoaded(scene);
   }, [url, scene, meshMap, onMeshesReady, onModelLoaded]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const controller = new AbortController();
     void buildSceneBVH(scene, controller.signal);
     return () => {
@@ -15727,26 +16384,26 @@ function InnerModel({
       disposeSceneBVH(scene);
     };
   }, [scene]);
-  const pointerRaycastEnabled = (0, import_react39.useMemo)(
+  const pointerRaycastEnabled = (0, import_react40.useMemo)(
     () => !exceedsBvhBudget(scene),
     [scene]
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     for (const [key, { ref }] of Object.entries(meshMap)) {
       nodeRefsOut.current[key] = ref;
     }
   }, [meshMap, nodeRefsOut]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!highlightOnHover && hoveredKey !== null) {
       setHoveredKey(null);
     }
   }, [highlightOnHover, hoveredKey]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     return () => {
       document.body.style.cursor = "default";
     };
   }, []);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     for (const [key, { ref }] of Object.entries(meshMap)) {
       ref.visible = !hiddenKeys.has(key);
       const mat = perKeyMaterials[key];
@@ -15816,11 +16473,11 @@ function CameraFitter({
   refitOnResize,
   onInitialFitComplete
 }) {
-  const fitted = (0, import_react39.useRef)(false);
+  const fitted = (0, import_react40.useRef)(false);
   const invalidate = (0, import_fiber12.useThree)((state) => state.invalidate);
   const size = (0, import_fiber12.useThree)((state) => state.size);
-  const resizeTimerRef = (0, import_react39.useRef)(null);
-  (0, import_react39.useEffect)(() => {
+  const resizeTimerRef = (0, import_react40.useRef)(null);
+  (0, import_react40.useEffect)(() => {
     fitted.current = false;
     invalidate();
   }, [invalidate, scene]);
@@ -15840,7 +16497,7 @@ function CameraFitter({
     }).catch(() => {
     }).finally(onInitialFitComplete);
   });
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!refitOnResize || !fitted.current || !scene || !controlsRef.current) {
       return;
     }
@@ -15868,7 +16525,7 @@ function CameraFitter({
 function ExposureController({ exposure }) {
   const gl = (0, import_fiber12.useThree)((state) => state.gl);
   const invalidate = (0, import_fiber12.useThree)((state) => state.invalidate);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     gl.toneMappingExposure = exposure;
     invalidate();
   }, [gl, exposure, invalidate]);
@@ -15976,7 +16633,7 @@ function EnvironmentSection({
   title,
   children
 }) {
-  const [collapsed, setCollapsed] = (0, import_react39.useState)(false);
+  const [collapsed, setCollapsed] = (0, import_react40.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "env-section", children: [
     /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
       "button",
@@ -16141,8 +16798,8 @@ function SceneObjectsPanel2({
   onHover,
   onToggleVisibility
 }) {
-  const [search, setSearch] = (0, import_react39.useState)("");
-  const [rowHovered, setRowHovered] = (0, import_react39.useState)(null);
+  const [search, setSearch] = (0, import_react40.useState)("");
+  const [rowHovered, setRowHovered] = (0, import_react40.useState)(null);
   const entries = Object.values(meshKeys).filter(
     (m) => m.label.toLowerCase().includes(search.toLowerCase())
   );
@@ -16266,35 +16923,35 @@ function SimpleModelViewer({
   onModelLoaded,
   onLoadError
 }) {
-  const cameraControlsRef = (0, import_react39.useRef)(null);
-  const nodeRefsOut = (0, import_react39.useRef)({});
-  const fileInputRef = (0, import_react39.useRef)(null);
-  const uploadedModelRef = (0, import_react39.useRef)(null);
-  const dragDepthRef = (0, import_react39.useRef)(0);
-  const [loadedScene, setLoadedScene] = (0, import_react39.useState)(null);
-  const [largeModelTriangles, setLargeModelTriangles] = (0, import_react39.useState)(
+  const cameraControlsRef = (0, import_react40.useRef)(null);
+  const nodeRefsOut = (0, import_react40.useRef)({});
+  const fileInputRef = (0, import_react40.useRef)(null);
+  const uploadedModelRef = (0, import_react40.useRef)(null);
+  const dragDepthRef = (0, import_react40.useRef)(0);
+  const [loadedScene, setLoadedScene] = (0, import_react40.useState)(null);
+  const [largeModelTriangles, setLargeModelTriangles] = (0, import_react40.useState)(
     null
   );
-  const [largeModelNoticeDismissed, setLargeModelNoticeDismissed] = (0, import_react39.useState)(false);
-  const [meshKeys, setMeshKeys] = (0, import_react39.useState)({});
-  const [hiddenKeys, setHiddenKeys] = (0, import_react39.useState)(/* @__PURE__ */ new Set());
-  const [selectedKey, setSelectedKey] = (0, import_react39.useState)(null);
-  const [panelHoveredKey, setPanelHoveredKey] = (0, import_react39.useState)(null);
-  const [uploadedModelUrl, setUploadedModelUrl] = (0, import_react39.useState)(null);
-  const [uploadedModelName, setUploadedModelName] = (0, import_react39.useState)(
+  const [largeModelNoticeDismissed, setLargeModelNoticeDismissed] = (0, import_react40.useState)(false);
+  const [meshKeys, setMeshKeys] = (0, import_react40.useState)({});
+  const [hiddenKeys, setHiddenKeys] = (0, import_react40.useState)(/* @__PURE__ */ new Set());
+  const [selectedKey, setSelectedKey] = (0, import_react40.useState)(null);
+  const [panelHoveredKey, setPanelHoveredKey] = (0, import_react40.useState)(null);
+  const [uploadedModelUrl, setUploadedModelUrl] = (0, import_react40.useState)(null);
+  const [uploadedModelName, setUploadedModelName] = (0, import_react40.useState)(
     null
   );
-  const [modelLoadFailed, setModelLoadFailed] = (0, import_react39.useState)(false);
-  const [isResolvingUpload, setIsResolvingUpload] = (0, import_react39.useState)(false);
-  const [initialFitComplete, setInitialFitComplete] = (0, import_react39.useState)(false);
-  const [isDragActive, setIsDragActive] = (0, import_react39.useState)(false);
-  const [isPanelOpen, setIsPanelOpen] = (0, import_react39.useState)(
+  const [modelLoadFailed, setModelLoadFailed] = (0, import_react40.useState)(false);
+  const [isResolvingUpload, setIsResolvingUpload] = (0, import_react40.useState)(false);
+  const [initialFitComplete, setInitialFitComplete] = (0, import_react40.useState)(false);
+  const [isDragActive, setIsDragActive] = (0, import_react40.useState)(false);
+  const [isPanelOpen, setIsPanelOpen] = (0, import_react40.useState)(
     () => typeof window === "undefined" ? true : window.innerWidth > 900
   );
-  const [isEnvPanelOpen, setIsEnvPanelOpen] = (0, import_react39.useState)(
+  const [isEnvPanelOpen, setIsEnvPanelOpen] = (0, import_react40.useState)(
     () => typeof window === "undefined" ? true : window.innerWidth > 900
   );
-  const [envSettings, setEnvSettings] = (0, import_react39.useState)({
+  const [envSettings, setEnvSettings] = (0, import_react40.useState)({
     backgroundEnabled,
     backgroundColor,
     autoRotate,
@@ -16306,7 +16963,7 @@ function SimpleModelViewer({
     directionalColor
   });
   const activeModelUrl = enableModelUpload ? uploadedModelUrl : modelUrl;
-  const resetModelState = (0, import_react39.useCallback)(() => {
+  const resetModelState = (0, import_react40.useCallback)(() => {
     setLoadedScene(null);
     setLargeModelTriangles(null);
     setLargeModelNoticeDismissed(false);
@@ -16317,11 +16974,11 @@ function SimpleModelViewer({
     setModelLoadFailed(false);
     setInitialFitComplete(false);
   }, []);
-  const revokeUploadedModelUrl = (0, import_react39.useCallback)(() => {
+  const revokeUploadedModelUrl = (0, import_react40.useCallback)(() => {
     uploadedModelRef.current?.cleanup();
     uploadedModelRef.current = null;
   }, []);
-  const clearUploadedModel = (0, import_react39.useCallback)(() => {
+  const clearUploadedModel = (0, import_react40.useCallback)(() => {
     revokeUploadedModelUrl();
     setUploadedModelUrl(null);
     setUploadedModelName(null);
@@ -16350,7 +17007,7 @@ function SimpleModelViewer({
     resetModelState,
     revokeUploadedModelUrl
   ]);
-  const handleUploadedModel = (0, import_react39.useCallback)(
+  const handleUploadedModel = (0, import_react40.useCallback)(
     async (file) => {
       setIsResolvingUpload(true);
       try {
@@ -16369,7 +17026,7 @@ function SimpleModelViewer({
     },
     [onLoadError, resetModelState, revokeUploadedModelUrl]
   );
-  const handleFileSelection = (0, import_react39.useCallback)(
+  const handleFileSelection = (0, import_react40.useCallback)(
     (files) => {
       const file = files?.[0];
       if (!file) return;
@@ -16377,29 +17034,29 @@ function SimpleModelViewer({
     },
     [handleUploadedModel]
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     return () => {
       revokeUploadedModelUrl();
     };
   }, [revokeUploadedModelUrl]);
-  const handleEnvSettingChange = (0, import_react39.useCallback)(
+  const handleEnvSettingChange = (0, import_react40.useCallback)(
     (key, value) => {
       setEnvSettings((prev) => ({ ...prev, [key]: value }));
     },
     []
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     setEnvSettings((prev) => ({ ...prev, backgroundColor }));
   }, [backgroundColor]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     resetModelState();
   }, [activeModelUrl, resetModelState]);
-  const handleMeshesReady = (0, import_react39.useCallback)((meshes) => {
+  const handleMeshesReady = (0, import_react40.useCallback)((meshes) => {
     setMeshKeys(meshes);
     setHiddenKeys(/* @__PURE__ */ new Set());
     setSelectedKey(null);
   }, []);
-  const handleModelLoaded = (0, import_react39.useCallback)(
+  const handleModelLoaded = (0, import_react40.useCallback)(
     (scene) => {
       setLoadedScene(scene);
       setModelLoadFailed(false);
@@ -16410,14 +17067,14 @@ function SimpleModelViewer({
     },
     [onModelLoaded]
   );
-  const handleLoadError = (0, import_react39.useCallback)(
+  const handleLoadError = (0, import_react40.useCallback)(
     (error) => {
       setModelLoadFailed(true);
       onLoadError?.(error);
     },
     [onLoadError]
   );
-  const focusMesh = (0, import_react39.useCallback)(
+  const focusMesh = (0, import_react40.useCallback)(
     (key) => {
       setSelectedKey(key);
       if (!zoomOnSelected) return;
@@ -16433,14 +17090,14 @@ function SimpleModelViewer({
     },
     [zoomOnSelected]
   );
-  const handleToggleVisibility = (0, import_react39.useCallback)((key) => {
+  const handleToggleVisibility = (0, import_react40.useCallback)((key) => {
     setHiddenKeys((prev) => {
       const next = new Set(prev);
       next.has(key) ? next.delete(key) : next.add(key);
       return next;
     });
   }, []);
-  const handleDragEnter = (0, import_react39.useCallback)(
+  const handleDragEnter = (0, import_react40.useCallback)(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -16452,7 +17109,7 @@ function SimpleModelViewer({
     },
     [enableModelUpload]
   );
-  const handleDragOver = (0, import_react39.useCallback)(
+  const handleDragOver = (0, import_react40.useCallback)(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -16464,7 +17121,7 @@ function SimpleModelViewer({
     },
     [enableModelUpload]
   );
-  const handleDragLeave = (0, import_react39.useCallback)(
+  const handleDragLeave = (0, import_react40.useCallback)(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -16478,7 +17135,7 @@ function SimpleModelViewer({
     },
     [enableModelUpload]
   );
-  const handleDrop = (0, import_react39.useCallback)(
+  const handleDrop = (0, import_react40.useCallback)(
     (event) => {
       if (!enableModelUpload || !supportsDraggedFiles(event.dataTransfer)) {
         return;
@@ -16571,7 +17228,7 @@ function SimpleModelViewer({
               raycaster: { firstHitOnly: true },
               style: { background: envSettings.backgroundColor },
               camera: { position: [0, 0, 5], fov: 45, near: 0.1, far: 1e3 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react39.Suspense, { fallback: null, children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react40.Suspense, { fallback: null, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   "ambientLight",
                   {
@@ -16589,7 +17246,7 @@ function SimpleModelViewer({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("directionalLight", { position: [-5, 5, 5], intensity: 0.5 }),
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react39.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react40.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                   import_drei6.Environment,
                   {
                     preset: envSettings.envPreset,
@@ -16608,7 +17265,7 @@ function SimpleModelViewer({
                   ModelErrorBoundary2,
                   {
                     onLoadError: handleLoadError,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react39.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react40.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                       InnerModel,
                       {
                         url: activeModelUrl,
@@ -16707,18 +17364,18 @@ function SimpleModelViewer({
 }
 
 // src/hooks/useViewerSelection.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 function useViewerSelection(initialSelectedObjectBinding = null) {
-  const [selectedObjectBinding, setSelectedObjectBinding] = (0, import_react40.useState)(
+  const [selectedObjectBinding, setSelectedObjectBinding] = (0, import_react41.useState)(
     initialSelectedObjectBinding
   );
-  const handleObjectSelect = (0, import_react40.useCallback)(
+  const handleObjectSelect = (0, import_react41.useCallback)(
     (binding) => {
       setSelectedObjectBinding(binding);
     },
     [setSelectedObjectBinding]
   );
-  const clearSelection = (0, import_react40.useCallback)(() => {
+  const clearSelection = (0, import_react41.useCallback)(() => {
     setSelectedObjectBinding(null);
   }, []);
   return {
@@ -16730,9 +17387,9 @@ function useViewerSelection(initialSelectedObjectBinding = null) {
 }
 
 // src/hooks/useObjectBinding.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 function useObjectBinding(objectBindings, objectId) {
-  return (0, import_react41.useMemo)(() => {
+  return (0, import_react42.useMemo)(() => {
     if (!objectId) {
       return null;
     }
@@ -16747,23 +17404,23 @@ function useObjectBinding(objectBindings, objectId) {
 }
 
 // src/hooks/useObjectBindingIds.ts
-var import_react42 = require("react");
+var import_react43 = require("react");
 function useObjectBindingIds(objectBindings) {
-  return (0, import_react42.useMemo)(
+  return (0, import_react43.useMemo)(
     () => Object.values(objectBindings).map((binding) => binding.modelObjectId),
     [objectBindings]
   );
 }
 
 // src/hooks/useObjectVisibility.ts
-var import_react43 = require("react");
+var import_react44 = require("react");
 function getHiddenObjects(objectBindings) {
   return Object.fromEntries(
     Object.entries(objectBindings).filter(([, binding]) => binding.visible === false).map(([bindingKey]) => [bindingKey, true])
   );
 }
 function useObjectVisibility(objectBindings, onObjectBindingsChange) {
-  const updateVisibility = (0, import_react43.useCallback)(
+  const updateVisibility = (0, import_react44.useCallback)(
     (objectId, visible) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) return;
@@ -16779,15 +17436,15 @@ function useObjectVisibility(objectBindings, onObjectBindingsChange) {
     },
     [objectBindings, onObjectBindingsChange]
   );
-  const hideObject = (0, import_react43.useCallback)(
+  const hideObject = (0, import_react44.useCallback)(
     (objectId) => updateVisibility(objectId, false),
     [updateVisibility]
   );
-  const showObject = (0, import_react43.useCallback)(
+  const showObject = (0, import_react44.useCallback)(
     (objectId) => updateVisibility(objectId, true),
     [updateVisibility]
   );
-  const toggleObjectVisibility = (0, import_react43.useCallback)(
+  const toggleObjectVisibility = (0, import_react44.useCallback)(
     (objectId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) return;
@@ -16803,7 +17460,7 @@ function useObjectVisibility(objectBindings, onObjectBindingsChange) {
     },
     [objectBindings, onObjectBindingsChange]
   );
-  const clearHiddenObjects = (0, import_react43.useCallback)(() => {
+  const clearHiddenObjects = (0, import_react44.useCallback)(() => {
     onObjectBindingsChange(
       Object.fromEntries(
         Object.entries(objectBindings).map(([bindingKey, binding]) => [
@@ -16813,17 +17470,17 @@ function useObjectVisibility(objectBindings, onObjectBindingsChange) {
       )
     );
   }, [objectBindings, onObjectBindingsChange]);
-  const hiddenObjects = (0, import_react43.useMemo)(
+  const hiddenObjects = (0, import_react44.useMemo)(
     () => getHiddenObjects(objectBindings),
     [objectBindings]
   );
-  const hiddenObjectIds = (0, import_react43.useMemo)(
+  const hiddenObjectIds = (0, import_react44.useMemo)(
     () => Object.entries(hiddenObjects).map(
       ([bindingKey]) => objectBindings[bindingKey]?.id ?? bindingKey
     ),
     [hiddenObjects, objectBindings]
   );
-  const isObjectHidden = (0, import_react43.useCallback)(
+  const isObjectHidden = (0, import_react44.useCallback)(
     (objectId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       return bindingKey ? objectBindings[bindingKey]?.visible === false : false;
@@ -16842,10 +17499,10 @@ function useObjectVisibility(objectBindings, onObjectBindingsChange) {
 }
 
 // src/hooks/useViewerHover.ts
-var import_react44 = require("react");
+var import_react45 = require("react");
 function useViewerHover() {
-  const [hoveredObjectBinding, setHoveredObjectBinding] = (0, import_react44.useState)(null);
-  const handleHoveredObject = (0, import_react44.useCallback)(
+  const [hoveredObjectBinding, setHoveredObjectBinding] = (0, import_react45.useState)(null);
+  const handleHoveredObject = (0, import_react45.useCallback)(
     (binding) => {
       setHoveredObjectBinding(binding);
     },
@@ -16858,18 +17515,18 @@ function useViewerHover() {
 }
 
 // src/hooks/useViewerModel.ts
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_three22 = require("three");
 function toTuple2(vector) {
   return [vector.x, vector.y, vector.z];
 }
 function useViewerModel() {
-  const [isLoading, setIsLoading] = (0, import_react45.useState)(true);
-  const [isReady, setIsReady] = (0, import_react45.useState)(false);
-  const [error, setError] = (0, import_react45.useState)(null);
-  const [bounds, setBounds] = (0, import_react45.useState)(null);
-  const [objectCount, setObjectCount] = (0, import_react45.useState)(0);
-  const handleModelLoaded = (0, import_react45.useCallback)((scene) => {
+  const [isLoading, setIsLoading] = (0, import_react46.useState)(true);
+  const [isReady, setIsReady] = (0, import_react46.useState)(false);
+  const [error, setError] = (0, import_react46.useState)(null);
+  const [bounds, setBounds] = (0, import_react46.useState)(null);
+  const [objectCount, setObjectCount] = (0, import_react46.useState)(0);
+  const handleModelLoaded = (0, import_react46.useCallback)((scene) => {
     const box = new import_three22.Box3().setFromObject(scene);
     const min = box.min.clone();
     const max = box.max.clone();
@@ -16894,14 +17551,14 @@ function useViewerModel() {
     setIsLoading(false);
     setIsReady(true);
   }, []);
-  const handleLoadError = (0, import_react45.useCallback)((nextError) => {
+  const handleLoadError = (0, import_react46.useCallback)((nextError) => {
     setError(nextError);
     setBounds(null);
     setObjectCount(0);
     setIsLoading(false);
     setIsReady(false);
   }, []);
-  const resetModelState = (0, import_react45.useCallback)(() => {
+  const resetModelState = (0, import_react46.useCallback)(() => {
     setIsLoading(true);
     setIsReady(false);
     setError(null);
@@ -16921,10 +17578,10 @@ function useViewerModel() {
 }
 
 // src/hooks/useViewerActions.ts
-var import_react46 = require("react");
+var import_react47 = require("react");
 function useViewerActions(objectBindings, options = {}) {
   const { onAction, onObjectBindingsChange } = options;
-  const getActionsForObject = (0, import_react46.useCallback)(
+  const getActionsForObject = (0, import_react47.useCallback)(
     (objectId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) {
@@ -16934,7 +17591,7 @@ function useViewerActions(objectBindings, options = {}) {
     },
     [objectBindings]
   );
-  const runAction = (0, import_react46.useCallback)(
+  const runAction = (0, import_react47.useCallback)(
     (objectId, actionId) => {
       const bindingKey = resolveBindingKey(objectBindings, objectId);
       if (!bindingKey) {
@@ -16976,7 +17633,7 @@ function useViewerActions(objectBindings, options = {}) {
 }
 
 // src/hooks/useShareableViewerState.ts
-var import_react47 = require("react");
+var import_react48 = require("react");
 function serializeState(cameraState, objectBindings, selectedObjectBinding) {
   const hidden = Object.values(objectBindings).filter((binding) => binding.visible === false).map((binding) => binding.id);
   return {
@@ -16996,8 +17653,8 @@ function useShareableViewerState({
   debounceMs = 400,
   autoSync = true
 }) {
-  const lastWrittenRawRef = (0, import_react47.useRef)(null);
-  const buildHash = (0, import_react47.useCallback)(() => {
+  const lastWrittenRawRef = (0, import_react48.useRef)(null);
+  const buildHash = (0, import_react48.useCallback)(() => {
     const state = serializeState(
       cameraState,
       objectBindings,
@@ -17005,12 +17662,12 @@ function useShareableViewerState({
     );
     return `${paramKey}=${encodeURIComponent(JSON.stringify(state))}`;
   }, [cameraState, objectBindings, selectedObjectBinding, paramKey]);
-  const getShareUrl = (0, import_react47.useCallback)(() => {
+  const getShareUrl = (0, import_react48.useCallback)(() => {
     const url = new URL(window.location.href);
     url.hash = buildHash();
     return url.toString();
   }, [buildHash]);
-  const syncUrl = (0, import_react47.useCallback)(() => {
+  const syncUrl = (0, import_react48.useCallback)(() => {
     const url = new URL(window.location.href);
     url.hash = buildHash();
     window.history.replaceState(null, "", url.toString());
@@ -17018,7 +17675,7 @@ function useShareableViewerState({
       paramKey
     );
   }, [buildHash, paramKey]);
-  const latestStateRef = (0, import_react47.useRef)({
+  const latestStateRef = (0, import_react48.useRef)({
     cameraState,
     objectBindings,
     selectedObjectBinding
@@ -17028,9 +17685,9 @@ function useShareableViewerState({
     objectBindings,
     selectedObjectBinding
   };
-  const [restoreAttempted, setRestoreAttempted] = (0, import_react47.useState)(false);
-  const lastSyncedHashRef = (0, import_react47.useRef)(null);
-  (0, import_react47.useEffect)(() => {
+  const [restoreAttempted, setRestoreAttempted] = (0, import_react48.useState)(false);
+  const lastSyncedHashRef = (0, import_react48.useRef)(null);
+  (0, import_react48.useEffect)(() => {
     if (!autoSync || !restoreAttempted) return;
     const tick = () => {
       const current = latestStateRef.current;
@@ -17052,9 +17709,9 @@ function useShareableViewerState({
     const id = window.setInterval(tick, debounceMs);
     return () => window.clearInterval(id);
   }, [autoSync, restoreAttempted, debounceMs, paramKey]);
-  const lastRestoredRawRef = (0, import_react47.useRef)(null);
-  const restoringRawRef = (0, import_react47.useRef)(null);
-  const restoreFromUrl = (0, import_react47.useCallback)(async () => {
+  const lastRestoredRawRef = (0, import_react48.useRef)(null);
+  const restoringRawRef = (0, import_react48.useRef)(null);
+  const restoreFromUrl = (0, import_react48.useCallback)(async () => {
     setRestoreAttempted(true);
     const rawHash = window.location.hash.startsWith("#") ? window.location.hash.slice(1) : window.location.hash;
     const raw = new URLSearchParams(rawHash).get(paramKey);
@@ -17107,7 +17764,7 @@ function useShareableViewerState({
     setCameraState,
     setSelectedObjectBinding
   ]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const handleHashChange = () => {
       void restoreFromUrl();
     };