@leverege/tpi-viz 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leverege/tpi-viz",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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/styles/scene_viewer.css

@@ -624,7 +624,7 @@
 #step-counter {
     font-size: 12px;
     color: var(--text-2);
-    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+    font-family: var(--font-mono, ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace);
     font-variant-numeric: tabular-nums;
     min-width: 100px;
     text-align: center;
@@ -647,7 +647,7 @@
 
 .si-value {
     color: var(--accent-green);
-    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+    font-family: var(--font-mono, ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace);
     font-variant-numeric: tabular-nums;
 }
 
@@ -682,7 +682,7 @@
 
 .param-value {
     color: var(--accent-green);
-    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+    font-family: var(--font-mono, ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace);
     font-variant-numeric: tabular-nums;
 }
 
@@ -742,7 +742,7 @@
 
 .slider-label .value {
     color: var(--text-1);
-    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+    font-family: var(--font-mono, ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace);
     font-variant-numeric: tabular-nums;
     font-weight: bold;
 }
@@ -801,7 +801,7 @@
     border-radius: var(--r-sm);
     color: var(--accent-green);
     font-size: 11px;
-    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+    font-family: var(--font-mono, ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace);
     outline: none;
     transition: border-color var(--t-fast), box-shadow var(--t-fast);
 }
@@ -834,7 +834,7 @@
 #image-counter {
     font-size: 11px;
     color: var(--text-3);
-    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+    font-family: var(--font-mono, ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace);
     font-variant-numeric: tabular-nums;
     min-width: 40px;
     text-align: center;
@@ -883,7 +883,7 @@
 #lightbox-counter {
     font-size: 11px;
     color: var(--text-3);
-    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+    font-family: var(--font-mono, ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace);
     font-variant-numeric: tabular-nums;
     min-width: 40px;
 }

package/src/styles/viewer_common.css

@@ -7,16 +7,6 @@
  */
 
 :root {
-    /* Accents (semantic; theme-independent — read on both light + dark) */
-    --accent-blue:        #7a9bff;  /* elements / general info */
-    --accent-blue-soft:   #5063a8;
-    --accent-pink:        #ff95c2;  /* flows */
-    --accent-pink-soft:   #a8537a;
-    --accent-green:       #7adea0;  /* active step, success */
-    --accent-amber:       #f0c34a;  /* highlight, warning */
-    --accent-orange:      #f0844a;  /* active flow */
-    --accent-red:         #ff7878;  /* errors */
-
     /* Motion */
     --t-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
     --t-med:    200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -55,6 +45,17 @@
     --text-3: #667083;  /* secondary, counts */
     --text-4: #8891a1;  /* hints, disabled */
 
+    /* Accents — darkened so they stay legible as text/borders on light
+       surfaces (the bright dark-mode values wash out on a light background). */
+    --accent-blue:        #3b5fd6;
+    --accent-blue-soft:   #6f86d0;
+    --accent-pink:        #c43d77;
+    --accent-pink-soft:   #b05a82;
+    --accent-green:       #1f9d57;
+    --accent-amber:       #9a7a10;
+    --accent-orange:      #c85a22;
+    --accent-red:         #d33b3b;
+
     --shadow-soft: 0 2px 10px rgba(20, 28, 50, 0.10);
     --shadow-med:  0 4px 18px rgba(20, 28, 50, 0.16);
     --vignette: rgba(30, 40, 60, 0.06);  /* barely-there edge darkening on a light viewport */
@@ -79,6 +80,16 @@
     --text-3: #7b8294;
     --text-4: #6b7488;
 
+    /* Accents — original bright values, tuned for dark surfaces */
+    --accent-blue:        #7a9bff;
+    --accent-blue-soft:   #5063a8;
+    --accent-pink:        #ff95c2;
+    --accent-pink-soft:   #a8537a;
+    --accent-green:       #7adea0;
+    --accent-amber:       #f0c34a;
+    --accent-orange:      #f0844a;
+    --accent-red:         #ff7878;
+
     --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
     --shadow-med:  0 4px 18px rgba(0, 0, 0, 0.45);
     --vignette: rgba(0, 0, 0, 0.35);
@@ -153,10 +164,17 @@
     border-radius: var(--r-sm);
 }
 
-/* Layout */
-.container {
+/* Layout. #app carries class="container" — a name that collides with CSS
+   frameworks' `.container` utility (e.g. Tailwind's max-width + margins, which
+   a host app like Imaginarium bundles). Scope under .tpi-viz (higher
+   specificity) and hard-reset the width caps so the host's `.container` can't
+   box or off-center the viewer shell. */
+.tpi-viz .container {
     display: flex;
     height: 100%;
+    width: 100%;
+    max-width: none;
+    margin: 0;
 }
 
 .sidebar {
@@ -448,7 +466,7 @@
 .info-panel p { margin: 5px 0; color: var(--text-2); }
 .info-panel span {
     color: var(--accent-green);
-    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+    font-family: var(--font-mono, ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace);
     font-size: 11px;
 }
 
@@ -774,7 +792,7 @@
 
 .landing-scene-id {
     flex: 1;
-    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
+    font-family: var(--font-mono, ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace);
     font-size: 12.5px;
     overflow: hidden;
     text-overflow: ellipsis;