@leverege/tpi-viz 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leverege/tpi-viz",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "3D scene viewer for TPI manufacturing data — renders blade geometry, PTZ cameras, defects, ply layers, and flows. Exports mountViewer()/destroy() for embedding (e.g. an Imaginarium React route); also runs standalone.",
   "type": "module",
   "exports": {

package/src/main.js

@@ -2580,6 +2580,7 @@ function fmtN(v, d) {
 export async function mountViewer( container, opts = {} ) {
     if ( _alive ) { destroy(); }               // idempotent re-mount
     _container = container || document.body;
+    _container.classList.add( 'tpi-viz' );     // scopes all viewer CSS to this subtree
     if ( !_container.querySelector( '#app' ) ) { _container.innerHTML = VIEWER_SKELETON; }
     _opts = opts || {};
     _alive = true;
@@ -2612,5 +2613,5 @@ export function destroy() {
     selectedCameraIdx = -1;
     povCameraIdx = -1;
     activeFlowName = null;
-    if ( _container ) { _container.innerHTML = ''; _container = null; }
+    if ( _container ) { _container.classList.remove( 'tpi-viz' ); _container.innerHTML = ''; _container = null; }
 }

package/src/styles/scene_viewer.css

@@ -747,7 +747,7 @@
     font-weight: bold;
 }
 
-input[type="range"] {
+.tpi-viz input[type="range"] {
     width: 100%;
     height: 4px;
     appearance: none;
@@ -757,7 +757,7 @@ input[type="range"] {
     cursor: pointer;
 }
 
-input[type="range"]::-webkit-slider-thumb {
+.tpi-viz input[type="range"]::-webkit-slider-thumb {
     appearance: none;
     width: 14px;
     height: 14px;
@@ -766,7 +766,7 @@ input[type="range"]::-webkit-slider-thumb {
     cursor: pointer;
 }
 
-input[type="range"]::-moz-range-thumb {
+.tpi-viz input[type="range"]::-moz-range-thumb {
     width: 14px;
     height: 14px;
     background: var(--accent-blue);

package/src/styles/viewer_common.css

@@ -52,15 +52,17 @@
     --shadow-med:  0 4px 18px rgba(0, 0, 0, 0.45);
 }
 
-/* Reset and base */
-* { margin: 0; padding: 0; box-sizing: border-box; }
+/* Reset and base. Everything is scoped under .tpi-viz (the viewer root that
+   mountViewer adds to its container) so these rules NEVER leak into a host app
+   when the viewer is embedded — only the viewer's own subtree is affected. */
+.tpi-viz, .tpi-viz * { margin: 0; padding: 0; box-sizing: border-box; }
 
-body {
+.tpi-viz {
     font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
     font-feature-settings: 'tnum' 1, 'cv11' 1;  /* tabular numerals */
     background: var(--bg-canvas);
     color: var(--text-1);
-    height: 100vh;
+    height: 100%;        /* fill the mount container (standalone: #viewer-root @ 100vh; embedded: the host's sized div) */
     overflow: hidden;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
@@ -82,35 +84,35 @@ body {
 }
 
 /* Custom scrollbars — thin, blend with the dark surface */
-* {
+.tpi-viz, .tpi-viz * {
     scrollbar-width: thin;
     scrollbar-color: var(--border-strong) transparent;
 }
-*::-webkit-scrollbar {
+.tpi-viz ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
 }
-*::-webkit-scrollbar-track { background: transparent; }
-*::-webkit-scrollbar-thumb {
+.tpi-viz ::-webkit-scrollbar-track { background: transparent; }
+.tpi-viz ::-webkit-scrollbar-thumb {
     background: var(--border-subtle);
     border-radius: 999px;
     border: 2px solid transparent;
     background-clip: padding-box;
 }
-*::-webkit-scrollbar-thumb:hover {
+.tpi-viz ::-webkit-scrollbar-thumb:hover {
     background: var(--border-strong);
     background-clip: padding-box;
     border: 2px solid transparent;
 }
 
 /* Selection styling */
-::selection {
+.tpi-viz ::selection {
     background: rgba(122, 155, 255, 0.32);
     color: var(--text-1);
 }
 
 /* Focus ring for keyboard nav (subtle but visible) */
-:focus-visible {
+.tpi-viz :focus-visible {
     outline: 2px solid var(--accent-blue);
     outline-offset: 2px;
     border-radius: var(--r-sm);
@@ -119,7 +121,7 @@ body {
 /* Layout */
 .container {
     display: flex;
-    height: 100vh;
+    height: 100%;
 }
 
 .sidebar {