@liveroom-tech/react-immersive 1.1.0 → 1.1.1

package/README.md

@@ -431,7 +431,7 @@ runAction("car-body", "toggle-visibility");
 Current note:
 
 - visibility-style actions (`toggle-visibility`) update binding data through `onObjectBindingsChange`
-- color/material actions still rely on `ModelViewer`'s built-in UI popovers, so `runAction` dispatches those events but does not open the internal color picker or texture upload popover by itself
+- color/material actions still rely on `ModelViewer`'s built-in UI, so `runAction` dispatches those events but does not open the built-in color picker or texture upload panel by itself
 
 ## `BindingBuilder`
 
@@ -1727,7 +1727,7 @@ Notes:
 - each `style.material` group also accepts a texture-map slot (`metalnessMap`, `roughnessMap`, `normalMap`, `aoMap`, `clearcoatMap`, etc.); color maps are decoded as sRGB and data maps as linear automatically
 - `BindingBuilder` intentionally omits exact Sketchfab glossiness, cavity, and subsurface-scattering workflows; those require preprocessing or a different material pipeline
 - `cameraState` stores a saved camera view for the object; when both `position` and `target` are set, the viewer uses that view when the object is focused or selected instead of falling back to `fitToBox`
-- `metrics` and `metadata` are displayed in the side panel JSON preview
+- `metrics` and `metadata` are displayed in the side panel as nested key/value fields (objects expand into indented child labels)
 - `ObjectBindingType` is a large union covering vehicles, rooms, furniture, characters, weapons, environment, and more
 
 ## Supported Built-In Actions
@@ -1739,9 +1739,9 @@ Action handling is currently hardcoded in `ModelViewer`.
 - `toggle-visibility`
   Hides or shows the selected mesh by setting `binding.visible` and calling `onObjectBindingsChange`
 - `change-color`
-  Opens the color picker; the chosen hex is applied as a live preview while dragging and committed into `binding.style.material.baseColor` via `onObjectBindingsChange` when the picker closes
+  Opens the color picker inline beneath the action; the chosen hex is applied as a live preview while dragging and committed into `binding.style.material.baseColor` via `onObjectBindingsChange` when the picker closes
 - `change-material`
-  Opens the texture upload popup for JPG, PNG, and WebP files; if `onTextureUpload` is provided, the file is passed to it and the returned URL is stored in `binding.style.material.texture.path`; otherwise a session-scoped blob URL is used as the fallback
+  Opens the texture upload panel inline beneath the action for JPG, PNG, and WebP files; if `onTextureUpload` is provided, the file is passed to it and the returned URL is stored in `binding.style.material.texture.path`; otherwise a session-scoped blob URL is used as the fallback
 
 ## How Rendering Works
 
@@ -1774,10 +1774,10 @@ Pass `shadows={false}` to disable shadow rendering entirely, or pass a custom `l
 The current component includes its own UI shell:
 
 - a viewer layout that fills its parent container
-- a sliding left side panel about `280px` wide
+- a sliding left side panel about `280px` wide (collapses to half-width on narrow screens so the canvas keeps its other half)
 - a canvas area that fills the remaining width
-- a floating color picker popover
-- a floating texture upload popover
+- a color picker that expands inline beneath the **Change Color** action
+- a texture upload panel that expands inline beneath the **Change Material** action
 - a right scene objects panel with search and per-object visibility toggles
 
 Because of that, it works best when mounted in a container with an explicit height.

package/dist/index.js

@@ -78,7 +78,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: #141824;\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: #f1f5f9;\n  --ri-sidepanel-text-emphasis: #ffffff;\n  --ri-sidepanel-text-muted: #94a3b8;\n  --ri-sidepanel-text-subtle: #64748b;\n  --ri-sidepanel-placeholder: #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-explodeTools--stacked {\n  top: 58px;\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  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\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: 10px;\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-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-popoverHeader {\n  padding: 12px 16px;\n  border-bottom: 1px solid #f3f4f6;\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: 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  padding: 8px 12px;\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: 30px;\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    top: 12px;\n    gap: 5px;\n  }\n  .ri-xrButton {\n    height: 28px;\n    gap: 5px;\n    padding: 0 7px;\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');
+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: #141824;\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: #f1f5f9;\n  --ri-sidepanel-text-emphasis: #ffffff;\n  --ri-sidepanel-text-muted: #94a3b8;\n  --ri-sidepanel-text-subtle: #64748b;\n  --ri-sidepanel-placeholder: #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-explodeTools--stacked {\n  top: 58px;\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  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\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: 10px;\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-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  padding: 8px 12px;\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: 30px;\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    top: 12px;\n    gap: 5px;\n  }\n  .ri-xrButton {\n    height: 28px;\n    gap: 5px;\n    padding: 0 7px;\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');
 
 // src/components/LicenseOverlay.tsx
 var import_lucide_react = require("lucide-react");
@@ -4535,13 +4535,14 @@ var ColorPicker = ({
   colorPicker,
   onClose,
   itemMaterials,
-  setItemMaterials
+  setItemMaterials,
+  inline = false
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
-      className: "ri-popover",
-      style: {
+      className: `ri-popover${inline ? " ri-popover--inline" : ""}`,
+      style: inline ? { padding: 12 } : {
         left: colorPicker.x,
         top: colorPicker.y,
         width: "min(225px, calc(100vw - 24px))",
@@ -4578,13 +4579,14 @@ var MaterialPicker = ({
   materialPopup,
   textureUrl,
   triggerFileUpload,
-  clearTexture
+  clearTexture,
+  inline = false
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
-      className: "ri-popover",
-      style: {
+      className: `ri-popover${inline ? " ri-popover--inline" : ""}`,
+      style: inline ? { overflow: "hidden" } : {
         left: materialPopup.x,
         top: materialPopup.y,
         width: "min(300px, calc(100vw - 24px))",
@@ -4650,16 +4652,71 @@ var MaterialPicker = ({
 var import_react18 = require("react");
 
 // src/styles/ObjectBindingDataPanel.css
-styleInject('.left-panel {\n  width: 280px;\n  min-height: 0;\n  background: var(--ri-databinding-bg, #111318);\n  border-right: 1px solid var(--ri-databinding-border, rgba(255, 255, 255, 0.06));\n  display: flex;\n  flex-direction: column;\n  padding: 24px 18px;\n  overflow-y: auto;\n  font-family: var( --ri-databinding-font-family, "Inter", "Segoe UI", sans-serif );\n  flex-shrink: 0;\n  transition: margin-left 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  box-shadow: var(--ri-databinding-shadow, 4px 0 24px rgba(0, 0, 0, 0.35));\n}\n.left-panel--open {\n  margin-left: 0;\n}\n.left-panel--closed {\n  margin-left: -280px;\n}\n.left-panel::-webkit-scrollbar {\n  width: 4px;\n}\n.left-panel::-webkit-scrollbar-track {\n  background: transparent;\n}\n.left-panel::-webkit-scrollbar-thumb {\n  background: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  border-radius: 4px;\n}\n.left-panel__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  padding-bottom: 14px;\n  border-bottom: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n}\n.left-panel__title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ri-databinding-text, #f1f5f9);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-right: 8px;\n  margin: 0;\n  letter-spacing: 0.02em;\n}\n.left-panel__close-btn {\n  width: 26px;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  border-radius: 6px;\n  color: var(--ri-databinding-text-subtle, #64748b);\n  font-size: 13px;\n  flex-shrink: 0;\n  cursor: pointer;\n  transition:\n    background 0.15s ease,\n    color 0.15s ease,\n    border-color 0.15s ease;\n}\n.left-panel__close-btn:hover {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n  color: var(--ri-databinding-text-hover, #cbd5e1);\n  border-color: var(--ri-databinding-border-hover, rgba(255, 255, 255, 0.15));\n}\n.left-panel__data {\n  padding: 12px 6px;\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  border-radius: 10px;\n  font-size: 11px;\n  font-family: var( --ri-databinding-mono-font-family, "JetBrains Mono", "Fira Code", "Menlo", monospace );\n  color: var(--ri-databinding-text-muted, #94a3b8);\n  line-height: 1.7;\n  overflow-x: auto;\n  margin-bottom: 18px;\n}\n.left-panel__divider {\n  border: none;\n  border-top: 1px solid var(--ri-databinding-border, rgba(255, 255, 255, 0.06));\n  margin-bottom: 16px;\n}\n.left-panel__actions-label {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--ri-databinding-text-faint, #475569);\n  text-transform: uppercase;\n  letter-spacing: 0.12em;\n  margin-bottom: 10px;\n}\n.left-panel__actions-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.left-panel__action-btn {\n  position: relative;\n  padding: 9px 14px;\n  border-radius: 8px;\n  text-align: left;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  overflow: hidden;\n  border: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  color: var(--ri-databinding-text-muted, #94a3b8);\n  letter-spacing: 0.01em;\n}\n.left-panel__action-btn:active {\n  transform: scale(0.97);\n}\n.left-panel__action-btn--active::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  top: 20%;\n  bottom: 20%;\n  width: 3px;\n  background: var(--ri-databinding-accent, #93c5fd);\n  border-radius: 0 3px 3px 0;\n  box-shadow: 0 0 8px var(--ri-databinding-accent-glow, rgba(147, 197, 253, 0.8));\n}\n.left-panel__action-btn--active:hover {\n  background: var( --ri-databinding-accent-gradient, linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 60%, #2563eb 100%) );\n  border-color: var(--ri-databinding-accent-border, rgba(96, 165, 250, 0.55));\n}\n.left-panel__action-btn--active:active {\n  transform: scale(0.97);\n  background: var( --ri-databinding-accent-gradient-active, linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) );\n}\n.left-panel__data {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 18px;\n}\n.left-panel__data-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 7px 10px;\n  border-radius: 7px;\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border: 1px solid transparent;\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n.left-panel__data-row:hover {\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}\n.left-panel__data-key {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--ri-databinding-text-faint, #475569);\n  text-transform: uppercase;\n  letter-spacing: 0.07em;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.left-panel__data-value {\n  font-size: 12px;\n  font-family: var( --ri-databinding-mono-font-family, "JetBrains Mono", "Fira Code", "Menlo", monospace );\n  text-align: right;\n  word-break: break-all;\n  max-width: 150px;\n}\n@media (max-width: 900px) {\n  .left-panel {\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: min(280px, 85vw);\n    z-index: 200;\n    min-height: 0;\n    margin-left: 0;\n    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .left-panel--open {\n    margin-left: 0;\n    transform: translateX(0);\n  }\n  .left-panel--closed {\n    margin-left: 0;\n    transform: translateX(-100%);\n  }\n}\n');
+styleInject('.left-panel {\n  width: 280px;\n  min-height: 0;\n  background: var(--ri-databinding-bg, #111318);\n  border-right: 1px solid var(--ri-databinding-border, rgba(255, 255, 255, 0.06));\n  display: flex;\n  flex-direction: column;\n  padding: 24px 18px;\n  overflow-y: auto;\n  font-family: var( --ri-databinding-font-family, "Inter", "Segoe UI", sans-serif );\n  flex-shrink: 0;\n  transition: margin-left 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  box-shadow: var(--ri-databinding-shadow, 4px 0 24px rgba(0, 0, 0, 0.35));\n}\n.left-panel--open {\n  margin-left: 0;\n}\n.left-panel--closed {\n  margin-left: -280px;\n}\n.left-panel::-webkit-scrollbar {\n  width: 4px;\n}\n.left-panel::-webkit-scrollbar-track {\n  background: transparent;\n}\n.left-panel::-webkit-scrollbar-thumb {\n  background: var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  border-radius: 4px;\n}\n.left-panel__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  padding-bottom: 14px;\n  border-bottom: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n}\n.left-panel__title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ri-databinding-text, #f1f5f9);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-right: 8px;\n  margin: 0;\n  letter-spacing: 0.02em;\n}\n.left-panel__close-btn {\n  width: 26px;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  border-radius: 6px;\n  color: var(--ri-databinding-text-subtle, #64748b);\n  font-size: 13px;\n  flex-shrink: 0;\n  cursor: pointer;\n  transition:\n    background 0.15s ease,\n    color 0.15s ease,\n    border-color 0.15s ease;\n}\n.left-panel__close-btn:hover {\n  background: var(--ri-databinding-surface-hover, rgba(255, 255, 255, 0.06));\n  color: var(--ri-databinding-text-hover, #cbd5e1);\n  border-color: var(--ri-databinding-border-hover, rgba(255, 255, 255, 0.15));\n}\n.left-panel__data {\n  padding: 12px 6px;\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  border-radius: 10px;\n  font-size: 11px;\n  font-family: var( --ri-databinding-mono-font-family, "JetBrains Mono", "Fira Code", "Menlo", monospace );\n  color: var(--ri-databinding-text-muted, #94a3b8);\n  line-height: 1.7;\n  overflow-x: auto;\n  margin-bottom: 18px;\n}\n.left-panel__divider {\n  border: none;\n  border-top: 1px solid var(--ri-databinding-border, rgba(255, 255, 255, 0.06));\n  margin-bottom: 16px;\n}\n.left-panel__actions-label {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--ri-databinding-text-faint, #475569);\n  text-transform: uppercase;\n  letter-spacing: 0.12em;\n  margin-bottom: 10px;\n}\n.left-panel__actions-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.left-panel__action-extra {\n  display: grid;\n  grid-template-rows: 0fr;\n  opacity: 0;\n  margin-top: 0;\n  transition:\n    grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.2s ease,\n    margin-top 0.28s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.left-panel__action-extra--open {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  margin-top: 4px;\n}\n.left-panel__action-extra-inner {\n  overflow: hidden;\n  min-height: 0;\n}\n.left-panel__action-btn {\n  position: relative;\n  padding: 9px 14px;\n  border-radius: 8px;\n  text-align: left;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  overflow: hidden;\n  border: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  color: var(--ri-databinding-text-muted, #94a3b8);\n  letter-spacing: 0.01em;\n}\n.left-panel__action-btn:active {\n  transform: scale(0.97);\n}\n.left-panel__action-btn--active::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  top: 20%;\n  bottom: 20%;\n  width: 3px;\n  background: var(--ri-databinding-accent, #93c5fd);\n  border-radius: 0 3px 3px 0;\n  box-shadow: 0 0 8px var(--ri-databinding-accent-glow, rgba(147, 197, 253, 0.8));\n}\n.left-panel__action-btn--active:hover {\n  background: var( --ri-databinding-accent-gradient, linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 60%, #2563eb 100%) );\n  border-color: var(--ri-databinding-accent-border, rgba(96, 165, 250, 0.55));\n}\n.left-panel__action-btn--active:active {\n  transform: scale(0.97);\n  background: var( --ri-databinding-accent-gradient-active, linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) );\n}\n.left-panel__data {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 18px;\n}\n.left-panel__data-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 7px 10px;\n  border-radius: 7px;\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border: 1px solid transparent;\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n.left-panel__data-row:hover {\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}\n.left-panel__data-key {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--ri-databinding-text-faint, #475569);\n  text-transform: uppercase;\n  letter-spacing: 0.07em;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.left-panel__data-value {\n  font-size: 12px;\n  font-family: var( --ri-databinding-mono-font-family, "JetBrains Mono", "Fira Code", "Menlo", monospace );\n  text-align: right;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n  min-width: 0;\n}\n.left-panel__data-group {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 7px 10px;\n  border-radius: 7px;\n  background: var(--ri-databinding-surface, rgba(255, 255, 255, 0.03));\n  border: 1px solid transparent;\n  transition: background 0.15s ease, border-color 0.15s ease;\n}\n.left-panel__data-group:hover {\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}\n.left-panel__data-children {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-top: 4px;\n  padding-left: 10px;\n  border-left: 1px solid var(--ri-databinding-border-strong, rgba(255, 255, 255, 0.08));\n}\n.left-panel__data-children .left-panel__data-row,\n.left-panel__data-children .left-panel__data-group {\n  padding: 3px 0;\n  background: transparent;\n  border-color: transparent;\n}\n.left-panel__data-children .left-panel__data-row:hover,\n.left-panel__data-children .left-panel__data-group:hover {\n  background: transparent;\n}\n@media (max-width: 900px) {\n  .left-panel {\n    width: 50vw;\n  }\n  .left-panel--open {\n    margin-left: 0;\n  }\n  .left-panel--closed {\n    margin-left: -50vw;\n  }\n  .left-panel {\n    padding: 18px 12px;\n  }\n  .left-panel__data-row {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 2px;\n    padding: 6px 8px;\n  }\n  .left-panel__data-group {\n    padding: 6px 8px;\n  }\n  .left-panel__data-value {\n    text-align: left;\n    font-size: 11.5px;\n  }\n  .left-panel__data-children {\n    padding-left: 8px;\n  }\n}\n');
 
 // src/components/ModelViewer/ObjectBindingDataPanel.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
+function DataEntries({ entries }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: entries.map(([key, value]) => {
+    const isObject = value !== null && typeof value === "object";
+    const childEntries = isObject ? Object.entries(value) : [];
+    if (isObject && childEntries.length > 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "left-panel__data-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "left-panel__data-key", children: key }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "left-panel__data-children", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DataEntries, { entries: childEntries }) })
+      ] }, key);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "left-panel__data-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "left-panel__data-key", children: key }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "span",
+        {
+          className: `left-panel__data-value left-panel__data-value--${typeof value}`,
+          children: isObject ? Array.isArray(value) ? "[]" : "{}" : String(value)
+        }
+      )
+    ] }, key);
+  }) });
+}
+function ActionExtra({ content }) {
+  const hasContent = content != null;
+  const [mounted, setMounted] = (0, import_react18.useState)(hasContent);
+  const [expanded, setExpanded] = (0, import_react18.useState)(hasContent);
+  const cachedRef = (0, import_react18.useRef)(content);
+  if (hasContent) cachedRef.current = content;
+  (0, import_react18.useEffect)(() => {
+    if (hasContent) {
+      setMounted(true);
+      return;
+    }
+    if (mounted) {
+      setExpanded(false);
+      const timer = setTimeout(() => setMounted(false), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [hasContent, mounted]);
+  (0, import_react18.useEffect)(() => {
+    if (mounted && hasContent) {
+      const frame = requestAnimationFrame(() => setExpanded(true));
+      return () => cancelAnimationFrame(frame);
+    }
+  }, [mounted, hasContent]);
+  if (!mounted) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: `left-panel__action-extra${expanded ? " left-panel__action-extra--open" : ""}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "left-panel__action-extra-inner", children: content ?? cachedRef.current })
+    }
+  );
+}
 function ObjectBindingDataPanel({
   isOpen,
   selectedObject,
   currentAction,
   onClose,
-  onAction
+  onAction,
+  renderActionExtra
 }) {
   const [displayedObject, setDisplayedObject] = (0, import_react18.useState)(selectedObject);
   (0, import_react18.useEffect)(() => {
@@ -4684,42 +4741,36 @@ function ObjectBindingDataPanel({
             }
           )
         ] }),
-        dataEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "left-panel__data", children: dataEntries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "left-panel__data-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "left-panel__data-key", children: key }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            "span",
-            {
-              className: `left-panel__data-value left-panel__data-value--${typeof value}`,
-              children: typeof value === "object" ? JSON.stringify(value) : String(value)
-            }
-          )
-        ] }, key)) }),
+        dataEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "left-panel__data", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DataEntries, { entries: dataEntries }) }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { className: "left-panel__divider" }),
         objectToRender.actions && objectToRender.actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "left-panel__actions-label", children: "Actions" }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "left-panel__actions-list", children: objectToRender.actions.map((action) => {
             const isActive = currentAction?.action.id === action.id && (currentAction.binding === objectToRender || currentAction.binding?.id === objectToRender.id || currentAction.binding?.modelObjectId === objectToRender.modelObjectId || currentAction.objectId === objectToRender.id || currentAction.objectId === objectToRender.modelObjectId);
-            return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              "button",
-              {
-                onClick: (e) => onAction({
-                  objectId: objectToRender.modelObjectId || objectToRender.id || "",
-                  action,
-                  binding: objectToRender,
-                  screenX: e.clientX,
-                  screenY: e.clientY
-                }),
-                className: [
-                  "left-panel__action-btn",
-                  `left-panel__action-btn--${action.id}`,
-                  isActive ? "left-panel__action-btn--active" : ""
-                ].filter(Boolean).join(" "),
-                "data-action-id": action.id,
-                "data-label": action.label,
-                children: action.label
-              },
-              action.id
-            );
+            const extra = renderActionExtra?.(action.id);
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react18.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "button",
+                {
+                  onClick: (e) => onAction({
+                    objectId: objectToRender.modelObjectId || objectToRender.id || "",
+                    action,
+                    binding: objectToRender,
+                    screenX: e.clientX,
+                    screenY: e.clientY
+                  }),
+                  className: [
+                    "left-panel__action-btn",
+                    `left-panel__action-btn--${action.id}`,
+                    isActive ? "left-panel__action-btn--active" : ""
+                  ].filter(Boolean).join(" "),
+                  "data-action-id": action.id,
+                  "data-label": action.label,
+                  children: action.label
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ActionExtra, { content: extra })
+            ] }, action.id);
           }) })
         ] })
       ] })
@@ -4735,7 +4786,7 @@ var import_lucide_react2 = require("lucide-react");
 var import_react19 = require("react");
 
 // src/styles/SceneObjectsPanel.css
-styleInject('.ri-sidepanel-wrap {\n  height: 100%;\n  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: visible;\n}\n.ri-sidepanel-wrap--open {\n  width: 300px;\n  flex-shrink: 0;\n}\n.ri-sidepanel-wrap--closed {\n  width: 0;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.ri-sidepanel__open-btn {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 7px 13px;\n  border-radius: 7px;\n  border: 1px solid var(--ri-sidepanel-border-strong, rgba(255, 255, 255, 0.08));\n  background: var(--ri-sidepanel-open-btn-bg, rgba(20, 20, 20, 0.82));\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--ri-sidepanel-text, #e2e8f0);\n  z-index: 190;\n  transition: background 0.15s;\n}\n.ri-sidepanel__open-btn:hover {\n  background: var(--ri-sidepanel-open-btn-bg-hover, #27282b7e);\n}\n.ri-sidepanel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 300px;\n  height: 100%;\n  background: var(--ri-sidepanel-bg, #141824);\n  display: flex;\n  flex-direction: column;\n  font-family: var( --ri-sidepanel-font-family, Inter, "Segoe UI", Helvetica, Arial, sans-serif );\n  transform: translateX(100%);\n  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  z-index: 200;\n  border-left: 1px solid var(--ri-sidepanel-border, rgba(255, 255, 255, 0.06));\n  box-shadow: var(--ri-sidepanel-shadow-right, -4px 0 24px rgba(0, 0, 0, 0.35));\n}\n.ri-sidepanel--open {\n  transform: translateX(0);\n}\n.ri-sidepanel--closed {\n  transform: translateX(100%);\n}\n.ri-sidepanel__header {\n  padding: 24px 20px 16px 20px;\n  border-bottom: 1px solid var(--ri-sidepanel-border-strong, rgba(255, 255, 255, 0.08));\n}\n.ri-sidepanel__header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 4px;\n}\n.ri-sidepanel__eyebrow {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  color: var(--ri-sidepanel-text-subtle, #64748b);\n  text-transform: uppercase;\n}\n.ri-sidepanel__title {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--ri-sidepanel-text, #f1f5f9);\n  margin: 0;\n  line-height: 1.2;\n}\n.ri-sidepanel__close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border-radius: 8px;\n  border: 1px solid var(--ri-sidepanel-border-strong, rgba(255, 255, 255, 0.08));\n  background: var(--ri-sidepanel-surface, rgba(255, 255, 255, 0.05));\n  cursor: pointer;\n  color: var(--ri-sidepanel-text-muted, #94a3b8);\n  transition: background 0.15s, color 0.15s;\n  flex-shrink: 0;\n}\n.ri-sidepanel__close-btn:hover {\n  background: var(--ri-sidepanel-surface-hover, rgba(255, 255, 255, 0.1));\n  color: var(--ri-sidepanel-text, #f1f5f9);\n}\n.ri-sidepanel__search-wrap {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--ri-sidepanel-border-strong, rgba(255, 255, 255, 0.08));\n}\n.ri-sidepanel__search {\n  width: 100%;\n  padding: 10px 14px;\n  border-radius: 10px;\n  border: 1px solid var(--ri-sidepanel-border-strong, rgba(255, 255, 255, 0.08));\n  background: var(--ri-sidepanel-surface, rgba(255, 255, 255, 0.05));\n  color: var(--ri-sidepanel-text, #e2e8f0);\n  font-size: 13px;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 0.15s, background 0.15s;\n}\n.ri-sidepanel__search::placeholder {\n  color: var(--ri-sidepanel-placeholder, #475569);\n}\n.ri-sidepanel__search:focus {\n  border-color: var(--ri-sidepanel-border-active, rgba(255, 255, 255, 0.18));\n  background: var(--ri-sidepanel-surface-hover, rgba(255, 255, 255, 0.08));\n}\n.ri-sidepanel__list {\n  display: flex;\n  flex-direction: column;\n  padding: 10px 0;\n  overflow-y: auto;\n  flex: 1;\n}\n.ri-sidepanel__list::-webkit-scrollbar {\n  width: 4px;\n}\n.ri-sidepanel__list::-webkit-scrollbar-track {\n  background: transparent;\n}\n.ri-sidepanel__list::-webkit-scrollbar-thumb {\n  background: var(--ri-sidepanel-surface-hover, rgba(255, 255, 255, 0.1));\n  border-radius: 4px;\n}\n.ri-sidepanel__row {\n  display: flex;\n  justify-content: space-between;\n  padding: 12px 20px;\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  appearance: none;\n  -webkit-appearance: none;\n  transition: background 0.12s;\n  border-bottom: 1px solid var(--ri-sidepanel-divider, rgba(255, 255, 255, 0.04));\n}\n.ri-sidepanel__row:hover,\n.ri-sidepanel__row--hovered {\n  background: var(--ri-sidepanel-surface, rgba(255, 255, 255, 0.05));\n}\n.ri-sidepanel__row--selected {\n  background: var(--ri-sidepanel-accent-soft, rgba(59, 130, 246, 0.12));\n}\n.ri-sidepanel__label {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ri-sidepanel-text, #e2e8f0);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ri-sidepanel__label--hovered {\n  color: var(--ri-sidepanel-text-emphasis, #ffffff);\n}\n.ri-sidepanel__label--selected {\n  color: var(--ri-sidepanel-text-emphasis, #ffffff);\n}\n.ri-sidepanel__meta {\n  font-size: 12px;\n  color: var(--ri-sidepanel-text-muted, #94a3b8);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ri-sidepanel__vis-btn {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  cursor: pointer;\n  background: none;\n  border: none;\n  padding: 0;\n  margin-left: 10px;\n}\n.ri-sidepanel__checkbox {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  border: 1.5px solid var(--ri-sidepanel-border-active, rgba(255, 255, 255, 0.2));\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s, border-color 0.15s;\n}\n.ri-sidepanel__checkbox--checked {\n  background: var(--ri-sidepanel-accent, #3b82f6);\n  border-color: var(--ri-sidepanel-accent, #3b82f6);\n}\n@media (max-width: 900px) {\n  .ri-sidepanel-wrap--open {\n    width: 0;\n  }\n  .ri-sidepanel {\n    width: min(300px, 85vw);\n  }\n}\n');
+styleInject('.ri-sidepanel-wrap {\n  height: 100%;\n  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: visible;\n}\n.ri-sidepanel-wrap--open {\n  width: 300px;\n  flex-shrink: 0;\n}\n.ri-sidepanel-wrap--closed {\n  width: 0;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n.ri-sidepanel__open-btn {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 7px 13px;\n  border-radius: 7px;\n  border: 1px solid var(--ri-sidepanel-border-strong, rgba(255, 255, 255, 0.08));\n  background: var(--ri-sidepanel-open-btn-bg, rgba(20, 20, 20, 0.82));\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--ri-sidepanel-text, #e2e8f0);\n  z-index: 190;\n  transition: background 0.15s;\n}\n.ri-sidepanel__open-btn:hover {\n  background: var(--ri-sidepanel-open-btn-bg-hover, #27282b7e);\n}\n.ri-sidepanel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 300px;\n  height: 100%;\n  background: var(--ri-sidepanel-bg, #141824);\n  display: flex;\n  flex-direction: column;\n  font-family: var( --ri-sidepanel-font-family, Inter, "Segoe UI", Helvetica, Arial, sans-serif );\n  transform: translateX(100%);\n  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  z-index: 200;\n  border-left: 1px solid var(--ri-sidepanel-border, rgba(255, 255, 255, 0.06));\n  box-shadow: var(--ri-sidepanel-shadow-right, -4px 0 24px rgba(0, 0, 0, 0.35));\n}\n.ri-sidepanel--open {\n  transform: translateX(0);\n}\n.ri-sidepanel--closed {\n  transform: translateX(100%);\n}\n.ri-sidepanel__header {\n  padding: 24px 20px 16px 20px;\n  border-bottom: 1px solid var(--ri-sidepanel-border-strong, rgba(255, 255, 255, 0.08));\n}\n.ri-sidepanel__header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 4px;\n}\n.ri-sidepanel__eyebrow {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  color: var(--ri-sidepanel-text-subtle, #64748b);\n  text-transform: uppercase;\n}\n.ri-sidepanel__title {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--ri-sidepanel-text, #f1f5f9);\n  margin: 0;\n  line-height: 1.2;\n}\n.ri-sidepanel__close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border-radius: 8px;\n  border: 1px solid var(--ri-sidepanel-border-strong, rgba(255, 255, 255, 0.08));\n  background: var(--ri-sidepanel-surface, rgba(255, 255, 255, 0.05));\n  cursor: pointer;\n  color: var(--ri-sidepanel-text-muted, #94a3b8);\n  transition: background 0.15s, color 0.15s;\n  flex-shrink: 0;\n}\n.ri-sidepanel__close-btn:hover {\n  background: var(--ri-sidepanel-surface-hover, rgba(255, 255, 255, 0.1));\n  color: var(--ri-sidepanel-text, #f1f5f9);\n}\n.ri-sidepanel__search-wrap {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--ri-sidepanel-border-strong, rgba(255, 255, 255, 0.08));\n}\n.ri-sidepanel__search {\n  width: 100%;\n  padding: 10px 14px;\n  border-radius: 10px;\n  border: 1px solid var(--ri-sidepanel-border-strong, rgba(255, 255, 255, 0.08));\n  background: var(--ri-sidepanel-surface, rgba(255, 255, 255, 0.05));\n  color: var(--ri-sidepanel-text, #e2e8f0);\n  font-size: 13px;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 0.15s, background 0.15s;\n}\n.ri-sidepanel__search::placeholder {\n  color: var(--ri-sidepanel-placeholder, #475569);\n}\n.ri-sidepanel__search:focus {\n  border-color: var(--ri-sidepanel-border-active, rgba(255, 255, 255, 0.18));\n  background: var(--ri-sidepanel-surface-hover, rgba(255, 255, 255, 0.08));\n}\n.ri-sidepanel__list {\n  display: flex;\n  flex-direction: column;\n  padding: 10px 0;\n  overflow-y: auto;\n  flex: 1;\n}\n.ri-sidepanel__list::-webkit-scrollbar {\n  width: 4px;\n}\n.ri-sidepanel__list::-webkit-scrollbar-track {\n  background: transparent;\n}\n.ri-sidepanel__list::-webkit-scrollbar-thumb {\n  background: var(--ri-sidepanel-surface-hover, rgba(255, 255, 255, 0.1));\n  border-radius: 4px;\n}\n.ri-sidepanel__row {\n  display: flex;\n  justify-content: space-between;\n  padding: 12px 20px;\n  cursor: pointer;\n  width: 100%;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  appearance: none;\n  -webkit-appearance: none;\n  transition: background 0.12s;\n  border-bottom: 1px solid var(--ri-sidepanel-divider, rgba(255, 255, 255, 0.04));\n}\n.ri-sidepanel__row:hover,\n.ri-sidepanel__row--hovered {\n  background: var(--ri-sidepanel-surface, rgba(255, 255, 255, 0.05));\n}\n.ri-sidepanel__row--selected {\n  background: var(--ri-sidepanel-accent-soft, rgba(59, 130, 246, 0.12));\n}\n.ri-sidepanel__label {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ri-sidepanel-text, #e2e8f0);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ri-sidepanel__label--hovered {\n  color: var(--ri-sidepanel-text-emphasis, #ffffff);\n}\n.ri-sidepanel__label--selected {\n  color: var(--ri-sidepanel-text-emphasis, #ffffff);\n}\n.ri-sidepanel__meta {\n  font-size: 12px;\n  color: var(--ri-sidepanel-text-muted, #94a3b8);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.ri-sidepanel__vis-btn {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  cursor: pointer;\n  background: none;\n  border: none;\n  padding: 0;\n  margin-left: 10px;\n}\n.ri-sidepanel__checkbox {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  border: 1.5px solid var(--ri-sidepanel-border-active, rgba(255, 255, 255, 0.2));\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s, border-color 0.15s;\n}\n.ri-sidepanel__checkbox--checked {\n  background: var(--ri-sidepanel-accent, #3b82f6);\n  border-color: var(--ri-sidepanel-accent, #3b82f6);\n}\n@media (max-width: 900px) {\n  .ri-sidepanel-wrap--open {\n    width: 50vw;\n  }\n  .ri-sidepanel {\n    width: 50vw;\n  }\n}\n');
 
 // src/components/shared/SearchableSidePanel.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -6531,7 +6582,34 @@ function ModelViewer({
           selectedObject: currentPanelObject,
           currentAction,
           onClose: handleClosePanel,
-          onAction: handleAction
+          onAction: handleAction,
+          renderActionExtra: (actionId) => {
+            if (actionId === "change-color" && colorPicker) {
+              return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                ColorPicker,
+                {
+                  inline: true,
+                  colorPicker,
+                  onClose: closeColorPicker,
+                  itemMaterials,
+                  setItemMaterials
+                }
+              );
+            }
+            if (actionId === "change-material" && materialPopup) {
+              return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                MaterialPicker,
+                {
+                  inline: true,
+                  triggerFileUpload,
+                  materialPopup,
+                  textureUrl: materialTextureUrl,
+                  clearTexture
+                }
+              );
+            }
+            return null;
+          }
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
@@ -7034,7 +7112,7 @@ function ModelViewer({
           ]
         }
       ),
-      colorPicker && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      customObjectBindingDataPanel && colorPicker && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         ColorPicker,
         {
           colorPicker,
@@ -7043,7 +7121,7 @@ function ModelViewer({
           setItemMaterials
         }
       ),
-      materialPopup && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      customObjectBindingDataPanel && materialPopup && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         MaterialPicker,
         {
           triggerFileUpload,