brep-io-kernel 1.0.0

package/src/UI/viewer.js

@@ -0,0 +1,4228 @@
+// ES6 module
+// Requires three and ArcballControls from three/examples:
+//   import * as THREE from 'three';
+//   import { ArcballControls } from 'three/examples/jsm/controls/ArcballControls.js';
+
+import * as THREE from 'three';
+import { ArcballControls } from 'three/examples/jsm/controls/ArcballControls.js';
+import { SVGRenderer } from 'three/examples/jsm/renderers/SVGRenderer.js';
+// Use custom combined translate+rotate gizmo (drop-in for three/examples TransformControls)
+import { CombinedTransformControls } from './controls/CombinedTransformControls.js';
+import { SceneListing } from './SceneListing.js';
+import { CADmaterials, CADmaterialWidget } from './CADmaterials.js';
+import { AccordionWidget } from './AccordionWidget.js';
+import { OrthoCameraIdle } from './OrthoCameraIdle.js';
+import { HistoryWidget } from './HistoryWidget.js';
+import { AssemblyConstraintsWidget } from './assembly/AssemblyConstraintsWidget.js';
+import { PartHistory } from '../PartHistory.js';
+import { SelectionFilter } from './SelectionFilter.js';
+import './expressionsManager.js'
+import { expressionsManager } from './expressionsManager.js';
+import { MainToolbar } from './MainToolbar.js';
+import { registerDefaultToolbarButtons } from './toolbarButtons/registerDefaultButtons.js';
+import { FileManagerWidget } from './fileManagerWidget.js';
+import './mobile.js';
+import { SketchMode3D } from './sketcher/SketchMode3D.js';
+import { ViewCube } from './ViewCube.js';
+import { FloatingWindow } from './FloatingWindow.js';
+import { TriangleDebuggerWindow } from './triangleDebuggerWindow.js';
+import { generateObjectUI } from './objectDump.js';
+import { PluginsWidget } from './PluginsWidget.js';
+import { localStorage as LS } from '../idbStorage.js';
+import { loadSavedPlugins } from '../plugins/pluginManager.js';
+import { PMIViewsWidget } from './pmi/PMIViewsWidget.js';
+import { PMIMode } from './pmi/PMIMode.js';
+import { annotationRegistry } from './pmi/AnnotationRegistry.js';
+import { SchemaForm } from './featureDialogs.js';
+import './dialogs.js';
+import { BREP } from '../BREP/BREP.js';
+import { createAxisHelperGroup, DEFAULT_AXIS_HELPER_PX } from '../utils/axisHelpers.js';
+
+const ASSEMBLY_CONSTRAINTS_TITLE = 'Assembly Constraints';
+
+function ensureSelectionPickerStyles() {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById('selection-picker-styles')) return;
+    const style = document.createElement('style');
+    style.id = 'selection-picker-styles';
+    style.textContent = `
+        :root {
+            --sfw-bg: #121519;
+            --sfw-border: #1c2128;
+            --sfw-shadow: rgba(0,0,0,0.35);
+            --sfw-text: #d6dde6;
+            --sfw-accent: #7aa2f7;
+            --sfw-muted: #8b98a5;
+            --sfw-control-height: 25px;
+        }
+        .selection-picker {
+            position: fixed;
+            min-width: 240px;
+            max-width: 500px;
+            max-height: 260px;
+            overflow: hidden;
+            background: linear-gradient(180deg, rgba(18,21,25,0.96), rgba(18,21,25,0.90));
+            border: 1px solid var(--sfw-border);
+            border-radius: 10px;
+            box-shadow: 0 12px 30px var(--sfw-shadow);
+            color: var(--sfw-text);
+            padding: 10px;
+            z-index: 1200;
+            backdrop-filter: blur(6px);
+            opacity: 0.8;
+            transition: opacity .15s ease, transform .08s ease;
+        }
+        .selection-picker.is-hovered,
+        .selection-picker.dragging {
+            opacity: 1;
+        }
+        .selection-picker.dragging {
+            cursor: grabbing;
+        }
+        .selection-picker__title {
+            font-weight: 700;
+            color: var(--sfw-muted);
+            letter-spacing: .3px;
+            cursor: grab;
+            user-select: none;
+            border: 1px solid var(--sfw-border);
+            border-radius: 8px;
+            padding: 0 10px;
+            background: rgba(255,255,255,0.05);
+            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+            flex: 1 1 auto;
+            min-height: var(--sfw-control-height);
+            display: flex;
+            align-items: center;
+        }
+        .selection-picker__header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 6px;
+        }
+        .selection-picker__clear {
+            flex: 0 0 auto;
+            border-radius: 8px;
+            border: 1px solid var(--sfw-border);
+            background: rgba(255,255,255,0.08);
+            color: var(--sfw-text);
+            font-weight: 700;
+            padding: 0 12px;
+            cursor: pointer;
+            transition: background .12s ease, border-color .12s ease, transform .05s ease;
+            min-height: var(--sfw-control-height);
+            display: flex;
+            align-items: center;
+        }
+        .selection-picker__clear:hover {
+            background: rgba(122,162,247,0.12);
+            border-color: var(--sfw-accent);
+        }
+        .selection-picker__clear:active {
+            transform: translateY(1px);
+        }
+        .selection-picker__list {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            max-height: 100px;
+            overflow: auto;
+            padding-top: 3px;
+            padding-right: 4px;
+        }
+        .selection-picker__item {
+            width: 100%;
+            text-align: left;
+            border: 1px solid var(--sfw-border);
+            background: rgba(255,255,255,0.04);
+            color: var(--sfw-text);
+            border-radius: 8px;
+            padding: 8px 10px;
+            cursor: pointer;
+            transition: border-color .12s ease, transform .08s ease, background .12s ease;
+        }
+        .selection-picker__item:hover {
+            border-color: var(--sfw-accent);
+            background: rgba(122,162,247,0.10);
+            transform: translateY(-1px);
+        }
+        .selection-picker__item-label { font-weight: 700; }
+        .selection-picker__line {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            overflow: hidden;
+        }
+        .selection-picker__type {
+            font-weight: 700;
+            color: var(--sfw-muted);
+            flex: 0 0 auto;
+        }
+        .selection-picker__name {
+            flex: 1 1 auto;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    `;
+    document.head.appendChild(style);
+}
+
+function ensureSidebarResizerStyles() {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById('sidebar-resizer-styles')) return;
+    const style = document.createElement('style');
+    style.id = 'sidebar-resizer-styles';
+    style.textContent = `
+        #sidebar-resizer {
+            position: fixed;
+            top: 0;
+            width: 10px;
+            height: 100%;
+            cursor: ew-resize;
+            z-index: 8;
+            touch-action: none;
+        }
+        #sidebar-resizer::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 2px;
+            height: 100%;
+            transform: translateX(-50%);
+            background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.3), rgba(255,255,255,0.05));
+            opacity: 0.5;
+        }
+        #sidebar-resizer.is-active::after,
+        #sidebar-resizer:hover::after {
+            opacity: 0.9;
+        }
+    `;
+    document.head.appendChild(style);
+}
+
+function ensureSidebarDockStyles() {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById('sidebar-dock-styles')) return;
+    const style = document.createElement('style');
+    style.id = 'sidebar-dock-styles';
+    style.textContent = `
+        #sidebar-hover-strip {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 10px;
+            height: 100%;
+            z-index: 8;
+            opacity: 0;
+            pointer-events: none;
+            background: linear-gradient(90deg, rgba(122,162,247,0.16), rgba(122,162,247,0.00));
+            transition: opacity .12s ease;
+        }
+        #sidebar-hover-strip.is-active {
+            opacity: 0.5;
+            pointer-events: auto;
+        }
+        #sidebar-pin-tab {
+            position: fixed;
+            top: 72px;
+            left: 0;
+            width: 45px;
+            height: 45px;
+            border: 1px solid #364053;
+            border-left: none;
+            border-radius: 0 8px 8px 0;
+            background: rgba(20,24,30,.92);
+            color: #d6dde6;
+            font: 22px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+            cursor: pointer;
+            z-index: 9;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            user-select: none;
+            writing-mode: vertical-rl;
+            text-orientation: mixed;
+        }
+        #sidebar-pin-tab.is-pinned {
+            border-color: #6ea8fe;
+            color: #e9f0ff;
+            box-shadow: 0 0 0 1px rgba(110,168,254,.18) inset;
+        }
+        #sidebar-pin-tab:active {
+            transform: translateY(1px);
+        }
+    `;
+    document.head.appendChild(style);
+}
+
+export class Viewer {
+    /**
+     * @param {Object} opts
+     * @param {HTMLElement} opts.container - DOM node to mount the canvas
+     * @param {number} [opts.viewSize=10] - Ortho half-height at zoom=1 (world units)
+     * @param {number} [opts.near=-1000]
+     * @param {number} [opts.far=1000]
+     * @param {number} [opts.pixelRatio=window.devicePixelRatio || 1]
+     * @param {THREE.Color | number | string} [opts.clearColor=0x0b0d10] - base clear color (alpha set separately)
+     * @param {number} [opts.clearAlpha=0] - clear alpha for transparent captures
+     */
+    constructor({
+        container,
+        viewSize = 10,
+        near = -10000000,
+        far = 10000000,
+        pixelRatio = (window.devicePixelRatio || 1),
+        clearColor = 0x0b0d10,
+        clearAlpha = 0,
+        sidebar = null,
+        partHistory = new PartHistory(),
+
+    }) {
+        if (!container) throw new Error('Viewer requires { container }');
+        this.BREP = BREP;
+
+        this.partHistory = partHistory instanceof PartHistory ? partHistory : new PartHistory();
+        this._triangleDebugger = null;
+        this._lastInspectorTarget = null;
+        this._lastInspectorSolid = null;
+
+
+
+
+        // Core
+        this.container = container;
+        this.sidebar = sidebar;
+        this._sidebarResizer = null;
+        this._sidebarResizerCleanup = null;
+        this._sidebarPinned = true;
+        this._sidebarHoverVisible = false;
+        this._sidebarAutoHideSuspended = false;
+        this._sidebarPinTab = null;
+        this._sidebarHoverStrip = null;
+        this._sidebarDockCleanup = null;
+        this._sidebarHoverTargets = null;
+        this._sidebarStoredDisplay = null;
+        this._sidebarStoredVisibility = null;
+        this._sidebarStoredTransform = null;
+        this._sidebarStoredPointerEvents = null;
+        this._sidebarLastPointer = null;
+        this._sidebarOffscreen = false;
+        this.scene = partHistory instanceof PartHistory ? partHistory.scene : new THREE.Scene();
+        this._axisHelpers = new Set();
+        this._axisHelpersDirty = true;
+        this._axisHelperPx = DEFAULT_AXIS_HELPER_PX;
+        try {
+            this._worldAxisHelper = createAxisHelperGroup({
+                name: "__WORLD_AXES__",
+                selectable: false,
+                axisHelperPx: this._axisHelperPx,
+            });
+            this._worldAxisHelper.userData = this._worldAxisHelper.userData || {};
+            this._worldAxisHelper.userData.preventRemove = true;
+            this.scene.add(this._worldAxisHelper);
+        } catch { /* ignore axis helper failures */ }
+        ensureSelectionPickerStyles();
+
+        // Apply persisted sidebar width early (before building UI)
+        try {
+            if (this.sidebar) {
+                const raw = LS.getItem('__CAD_MATERIAL_SETTINGS__');
+                if (raw) {
+                    try {
+                        const obj = JSON.parse(raw);
+                        const w = parseInt(obj && obj['__SIDEBAR_WIDTH__']);
+                        if (Number.isFinite(w) && w > 0) this.sidebar.style.width = `${w}px`;
+                    } catch { /* ignore parse errors */ }
+                }
+            }
+        } catch { /* ignore */ }
+
+        this._setupSidebarResizer();
+        this._setupSidebarDock();
+
+        // Renderer
+        this.pixelRatio = pixelRatio; // persist for future resizes
+        this._clearColor = new THREE.Color(clearColor);
+        this._clearAlpha = clearAlpha;
+        this._rendererMode = 'webgl';
+        this._svgRenderer = null;
+        this._webglRenderer = null;
+        this.renderer = this._createWebGLRenderer();
+        this._webglRenderer = this.renderer;
+        this.container.appendChild(this.renderer.domElement);
+
+
+
+
+
+        // Camera (Orthographic)
+        this.viewSize = viewSize;
+        const { width, height } = this._getContainerSize();
+        const aspect = width / height || 1;
+        this.camera = new OrthoCameraIdle(
+            -viewSize * aspect,
+            viewSize * aspect,
+            viewSize,
+            -viewSize,
+            near,
+            far
+        );
+        this._defaultNear = near;
+        this._defaultFar = far;
+
+
+
+
+        // Camera-anchored light rig: four evenly bright point lights + ambient to keep surfaces lit at any zoom
+        const lightIntensity = 5;
+        const baseLightRadius = Math.max(15, viewSize * 1.4);
+        const ambientLight = new THREE.AmbientLight(0xffffff, 1);
+        const hemiLight = new THREE.HemisphereLight(0xffffff, 0x333333, 0.25);
+        const lightDirections = [
+            [-20, -20, -20],
+            [-1, 1, -1],
+            [1, -1, -1],
+            [-1, -1, 1],
+        ];
+        const pointLights = lightDirections.map(([x, y, z]) => {
+            const light = new THREE.PointLight(0xffffff, lightIntensity);
+            // No distance attenuation so brightness stays consistent with huge scenes
+            light.distance = 0;
+            light.decay = 0;
+            return light;
+        });
+        pointLights.forEach((light) => this.camera.add(light));
+        this.camera.add(ambientLight);
+        this.camera.add(hemiLight);
+        this._cameraLightRig = { pointLights, lightDirections, baseLightRadius };
+        this._updateCameraLightRig();
+
+
+
+
+
+
+
+
+        // Ensure the camera (and its light) participate in the scene graph for lighting calculations
+        try { this.camera.userData = { ...(this.camera.userData || {}), preventRemove: true }; } catch { /* ignore */ }
+        if (this.camera.parent !== this.scene) {
+            try { this.scene.add(this.camera); } catch { /* ignore */ }
+        }
+        try { this.partHistory.camera = this.camera; } catch { /* ignore */ }
+
+
+
+
+
+
+
+
+
+        // Nice default vantage
+        this.camera.position.set(15, 12, 15);
+        this.camera.up.set(0, 1, 0);
+        this.camera.lookAt(0, 0, 0);
+
+        // Controls (Arcball)
+        this.controls = new ArcballControls(this.camera, this.renderer.domElement, this.scene);
+        this.controls.enableAnimations = false;
+        this.controls.setGizmosVisible(false);
+        this.controls.minDistance = 0.01; // relevant when switching to perspective; harmless here
+
+
+        this.camera.enableIdleCallbacks({
+            controls: this.controls,
+            idleMs: 300,
+            onMove: () => {
+                // hide sidebar when moving
+                if (this.sidebar) {
+                    this.sidebar.style.opacity = .9;
+                }
+                this._cameraMoving = true;
+                this._updateDepthRange();
+                // (quiet) camera moving
+            },
+            onIdle: () => {
+                // show sidebar when idle
+                if (this.sidebar) {
+                    this.sidebar.style.opacity = .9;
+                }
+                this._cameraMoving = false;
+
+                // recompute bounding spheres for all geometries (Mesh, Line/Line2, Points)
+                this.scene.traverse((object) => {
+                    const g = object && object.geometry;
+                    if (g && typeof g.computeBoundingSphere === 'function') {
+                        try { g.computeBoundingSphere(); } catch (_) { /* noop */ }
+                    }
+                });
+                this._updateDepthRange();
+            }
+        })
+
+
+
+
+        // State for interaction
+        this._pointerDown = false;
+        this._downButton = 0;           // 0 left, 2 right
+        this._downPos = { x: 0, y: 0 };
+        this._dragThreshold = 5;        // pixels
+        this._raf = null;
+        this._disposed = false;
+        this._sketchMode = null;
+        this._splineMode = null;
+        this._imageEditorActive = false;
+        this._cameraMoving = false;
+        this._sceneBoundsCache = null;
+        this._lastPointerEvent = null;
+        this._lastDashWpp = null;
+        this._selectionOverlay = null;
+        this._cubeActive = false;
+        // Inspector panel state
+        this._inspectorOpen = false;
+        this._inspectorEl = null;
+        this._inspectorContent = null;
+        // Plugin-related state
+        this._pendingToolbarButtons = [];
+        // Component transform gizmo session state
+        this._componentTransformSession = null;
+        // Assembly constraints accordion visibility state
+        this._assemblyConstraintsVisible = null;
+
+        // Raycaster for picking
+        this.raycaster = new THREE.Raycaster();
+        this.raycaster.near = 0;
+        this.raycaster.far = Infinity;
+        // Initialize params containers; thresholds set per-pick for stability
+        try { this.raycaster.params.Line = this.raycaster.params.Line || {}; } catch { }
+        try { this.raycaster.params.Line2 = this.raycaster.params.Line2 || {}; } catch { }
+
+        this._lastCanvasPointerDownAt = 0;
+        this._selectionOverlayTimer = null;
+        this._pendingSelectionOverlay = null;
+        // Bindings
+        this._onPointerMove = this._onPointerMove.bind(this);
+        this._onPointerDown = this._onPointerDown.bind(this);
+        this._onPointerUp = this._onPointerUp.bind(this);
+        this._onContextMenu = this._onContextMenu.bind(this);
+        this._onResize = this._onResize.bind(this);
+        this._onControlsChange = this._onControlsChange.bind(this);
+        this._loop = this._loop.bind(this);
+        this._updateHover = this._updateHover.bind(this);
+        this._selectAt = this._selectAt.bind(this);
+        this._onDoubleClick = this._onDoubleClick.bind(this);
+        this._onGlobalDoubleClick = this._onGlobalDoubleClick.bind(this);
+        this._onPointerLeave = () => {
+            try { SelectionFilter.clearHover(); } catch (_) { }
+            this._lastPointerEvent = null;
+        };
+        this._onPointerEnter = (ev) => { this._lastPointerEvent = ev; };
+
+        // Events
+        const el = this.renderer.domElement;
+        this._attachRendererEvents(el);
+
+        SelectionFilter.viewer = this;
+        // Use capture on pointerup to ensure we end interactions even if pointerup fires off-element
+        window.addEventListener('pointerup', this._onPointerUp, { passive: false, capture: true });
+        document.addEventListener('dblclick', this._onGlobalDoubleClick, { passive: false, capture: true });
+        window.addEventListener('resize', this._onResize);
+        this._onKeyDown = this._onKeyDown.bind(this);
+        window.addEventListener('keydown', this._onKeyDown, { passive: false });
+        // Keep camera updates; no picking to sync
+        this.controls.addEventListener('change', this._onControlsChange);
+
+        this.SelectionFilter = SelectionFilter;
+
+        // Expose annotation registry for PMI modules and plugins
+        this.annotationRegistry = annotationRegistry;
+
+        // View cube overlay
+        this._ensureViewCube();
+
+        // Initial sizing + start
+        this._resizeRendererToDisplaySize();
+        this._loop();
+        this.setupAccordion();
+    }
+
+    _createWebGLRenderer() {
+        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, preserveDrawingBuffer: true });
+        renderer.setClearColor(this._clearColor, this._clearAlpha);
+        renderer.setPixelRatio(this.pixelRatio || 1);
+        this._applyRendererElementStyles(renderer);
+        return renderer;
+    }
+
+    _createSvgRenderer() {
+        const renderer = new SVGRenderer();
+        renderer.setQuality('high');
+        renderer.setClearColor(this._clearColor);
+        this._applyRendererElementStyles(renderer);
+        return renderer;
+    }
+
+    _applyRendererElementStyles(renderer) {
+        const el = renderer?.domElement;
+        if (!el) return;
+        el.style.display = 'block';
+        el.style.outline = 'none';
+        el.style.userSelect = 'none';
+        el.style.width = '100%';
+        el.style.height = '100%';
+        el.style.background = this._clearAlpha === 0 ? 'transparent' : this._clearColor.getStyle();
+    }
+
+    _attachRendererEvents(el) {
+        if (!el) return;
+        el.addEventListener('pointermove', this._onPointerMove, { passive: true });
+        el.addEventListener('pointerleave', this._onPointerLeave, { passive: true });
+        el.addEventListener('pointerenter', this._onPointerEnter, { passive: true });
+        el.addEventListener('pointerdown', this._onPointerDown, { passive: false });
+        el.addEventListener('dblclick', this._onDoubleClick, { passive: false });
+        el.addEventListener('contextmenu', this._onContextMenu);
+    }
+
+    _detachRendererEvents(el) {
+        if (!el) return;
+        el.removeEventListener('pointermove', this._onPointerMove);
+        el.removeEventListener('pointerleave', this._onPointerLeave);
+        el.removeEventListener('pointerenter', this._onPointerEnter);
+        el.removeEventListener('pointerdown', this._onPointerDown);
+        el.removeEventListener('dblclick', this._onDoubleClick);
+        el.removeEventListener('contextmenu', this._onContextMenu);
+    }
+
+    _rebuildControls(domElement) {
+        const prev = this.controls;
+        const prevState = prev ? {
+            target: prev.target ? prev.target.clone() : null,
+            enabled: prev.enabled,
+            minDistance: prev.minDistance,
+            maxDistance: prev.maxDistance,
+            enableAnimations: prev.enableAnimations
+        } : null;
+        try { prev?.removeEventListener?.('change', this._onControlsChange); } catch { }
+        try { prev?.dispose?.(); } catch { }
+
+        const controls = new ArcballControls(this.camera, domElement, this.scene);
+        controls.enableAnimations = prevState ? !!prevState.enableAnimations : false;
+        controls.setGizmosVisible(false);
+        controls.minDistance = prevState && Number.isFinite(prevState.minDistance) ? prevState.minDistance : 0.01;
+        if (prevState && Number.isFinite(prevState.maxDistance)) controls.maxDistance = prevState.maxDistance;
+        if (prevState?.target) controls.target.copy(prevState.target);
+        if (typeof prevState?.enabled === 'boolean') controls.enabled = prevState.enabled;
+        this.controls = controls;
+    }
+
+    _ensureViewCube() {
+        if (this.viewCube && this.viewCube.renderer === this.renderer) return;
+        this.viewCube = new ViewCube({
+            renderer: this.renderer,
+            targetCamera: this.camera,
+            controls: this.controls,
+            size: 120,
+            margin: 12,
+        });
+    }
+
+    setRendererMode(mode) {
+        const nextMode = mode === 'svg' ? 'svg' : 'webgl';
+        if (nextMode === this._rendererMode && this.renderer) return;
+        this._rendererMode = nextMode;
+
+        try { this._stopComponentTransformSession?.(); } catch { }
+
+        const prevEl = this.renderer?.domElement;
+        this._detachRendererEvents(prevEl);
+        if (prevEl && prevEl.parentNode) prevEl.parentNode.removeChild(prevEl);
+
+        let nextRenderer = null;
+        if (nextMode === 'svg') {
+            if (!this._svgRenderer) this._svgRenderer = this._createSvgRenderer();
+            nextRenderer = this._svgRenderer;
+        } else {
+            if (!this._webglRenderer) this._webglRenderer = this._createWebGLRenderer();
+            nextRenderer = this._webglRenderer;
+        }
+
+        this.renderer = nextRenderer;
+        this._applyRendererElementStyles(this.renderer);
+        this.container.appendChild(this.renderer.domElement);
+        this._attachRendererEvents(this.renderer.domElement);
+        this._rebuildControls(this.renderer.domElement);
+        try { this.controls?.addEventListener?.('change', this._onControlsChange); } catch { }
+        try { this.camera?.attachControls?.(this.controls); } catch { }
+
+        if (nextMode === 'webgl') {
+            this._ensureViewCube();
+        } else {
+            this.viewCube = null;
+        }
+
+        try { this.renderer.domElement.style.marginTop = '0px'; } catch { }
+        this._resizeRendererToDisplaySize();
+        this.render();
+    }
+
+    _setupSidebarResizer() {
+        if (!this.sidebar || this._sidebarResizer) return;
+        if (typeof document === 'undefined' || !document.body) return;
+        ensureSidebarResizerStyles();
+        try {
+            const existing = document.getElementById('sidebar-resizer');
+            if (existing && existing.parentNode) existing.parentNode.removeChild(existing);
+        } catch { /* ignore */ }
+
+        const resizer = document.createElement('div');
+        resizer.id = 'sidebar-resizer';
+        resizer.title = 'Drag to resize sidebar';
+        resizer.setAttribute('aria-hidden', 'true');
+        document.body.appendChild(resizer);
+        this._sidebarResizer = resizer;
+
+        const handleWidth = 10;
+        resizer.style.width = `${handleWidth}px`;
+
+        const updatePosition = () => {
+            if (!this.sidebar) return;
+            const rect = this.sidebar.getBoundingClientRect();
+            const hidden = !this._isSidebarVisible();
+            if (hidden || rect.width <= 0 || rect.height <= 0) {
+                resizer.style.display = 'none';
+                return;
+            }
+            resizer.style.display = '';
+            resizer.style.left = `${Math.round(rect.right - handleWidth / 2)}px`;
+            resizer.style.top = `${Math.round(rect.top)}px`;
+            resizer.style.height = `${Math.round(rect.height)}px`;
+            try { this._positionSidebarPinTab?.(); } catch { /* ignore */ }
+        };
+
+        const clampWidth = (value) => {
+            let v = Number(value);
+            if (!Number.isFinite(v)) return 200;
+            const input = this.cadMaterialsUi?._widthInput;
+            const min = Number(input?.min) || 200;
+            const max = Number(input?.max) || 600;
+            if (v < min) v = min; else if (v > max) v = max;
+            return Math.round(v);
+        };
+
+        const persistWidthFallback = (value) => {
+            try {
+                const raw = LS.getItem('__CAD_MATERIAL_SETTINGS__');
+                const settings = raw ? JSON.parse(raw) : {};
+                settings['__SIDEBAR_WIDTH__'] = value;
+                LS.setItem('__CAD_MATERIAL_SETTINGS__', JSON.stringify(settings, null, 2));
+            } catch { /* ignore */ }
+        };
+
+        const applyWidth = (value, { persist = false } = {}) => {
+            const next = clampWidth(value);
+            if (this.cadMaterialsUi && typeof this.cadMaterialsUi.setSidebarWidth === 'function') {
+                this.cadMaterialsUi.setSidebarWidth(next, { persist });
+            } else if (this.sidebar) {
+                this.sidebar.style.width = `${next}px`;
+                if (persist) persistWidthFallback(next);
+            }
+            updatePosition();
+            return next;
+        };
+
+        const dragState = {
+            active: false,
+            startX: 0,
+            startWidth: 0,
+            lastWidth: 0,
+            pointerId: null,
+            prevCursor: '',
+            prevUserSelect: '',
+        };
+
+        const startDrag = (ev) => {
+            if (ev.button !== 0 || !this.sidebar) return;
+            ev.preventDefault();
+            dragState.active = true;
+            dragState.startX = ev.clientX;
+            dragState.startWidth = this.sidebar.getBoundingClientRect().width;
+            dragState.lastWidth = dragState.startWidth;
+            dragState.pointerId = ev.pointerId;
+            dragState.prevCursor = document.body.style.cursor;
+            dragState.prevUserSelect = document.body.style.userSelect;
+            document.body.style.cursor = 'ew-resize';
+            document.body.style.userSelect = 'none';
+            resizer.classList.add('is-active');
+            try { resizer.setPointerCapture(ev.pointerId); } catch { /* ignore */ }
+        };
+
+        const onDragMove = (ev) => {
+            if (!dragState.active) return;
+            const delta = ev.clientX - dragState.startX;
+            dragState.lastWidth = applyWidth(dragState.startWidth + delta);
+        };
+
+        const stopDrag = (persist = true) => {
+            if (!dragState.active) return;
+            dragState.active = false;
+            resizer.classList.remove('is-active');
+            document.body.style.cursor = dragState.prevCursor || '';
+            document.body.style.userSelect = dragState.prevUserSelect || '';
+            const finalWidth = Number.isFinite(dragState.lastWidth) ? dragState.lastWidth : dragState.startWidth;
+            applyWidth(finalWidth, { persist });
+            if (dragState.pointerId != null) {
+                try { resizer.releasePointerCapture(dragState.pointerId); } catch { /* ignore */ }
+            }
+            dragState.pointerId = null;
+        };
+
+        const onPointerUp = () => stopDrag(true);
+        const onPointerCancel = () => stopDrag(false);
+        const onWindowPointerUp = () => stopDrag(true);
+        const onWindowResize = () => updatePosition();
+
+        resizer.addEventListener('pointerdown', startDrag);
+        resizer.addEventListener('pointermove', onDragMove);
+        resizer.addEventListener('pointerup', onPointerUp);
+        resizer.addEventListener('pointercancel', onPointerCancel);
+        window.addEventListener('pointerup', onWindowPointerUp, { capture: true });
+        window.addEventListener('resize', onWindowResize);
+
+        let ro = null;
+        try {
+            if (window.ResizeObserver) {
+                ro = new ResizeObserver(() => updatePosition());
+                ro.observe(this.sidebar);
+            }
+        } catch { /* ignore */ }
+
+        let mo = null;
+        try {
+            if (window.MutationObserver) {
+                mo = new MutationObserver(() => updatePosition());
+                mo.observe(this.sidebar, { attributes: true, attributeFilter: ['style', 'hidden', 'class'] });
+            }
+        } catch { /* ignore */ }
+
+        updatePosition();
+
+        this._sidebarResizerCleanup = () => {
+            try { stopDrag(false); } catch { /* ignore */ }
+            resizer.removeEventListener('pointerdown', startDrag);
+            resizer.removeEventListener('pointermove', onDragMove);
+            resizer.removeEventListener('pointerup', onPointerUp);
+            resizer.removeEventListener('pointercancel', onPointerCancel);
+            window.removeEventListener('pointerup', onWindowPointerUp, { capture: true });
+            window.removeEventListener('resize', onWindowResize);
+            try { ro && ro.disconnect(); } catch { /* ignore */ }
+            try { mo && mo.disconnect(); } catch { /* ignore */ }
+            if (resizer.parentNode) resizer.parentNode.removeChild(resizer);
+            if (this._sidebarResizer === resizer) this._sidebarResizer = null;
+        };
+    }
+
+    _setupSidebarDock() {
+        if (!this.sidebar || this._sidebarPinTab) return;
+        if (typeof document === 'undefined' || !document.body) return;
+        ensureSidebarDockStyles();
+        try {
+            const existingTab = document.getElementById('sidebar-pin-tab');
+            if (existingTab && existingTab.parentNode) existingTab.parentNode.removeChild(existingTab);
+        } catch { /* ignore */ }
+        try {
+            const existingStrip = document.getElementById('sidebar-hover-strip');
+            if (existingStrip && existingStrip.parentNode) existingStrip.parentNode.removeChild(existingStrip);
+        } catch { /* ignore */ }
+
+        const hoverStrip = document.createElement('div');
+        hoverStrip.id = 'sidebar-hover-strip';
+        hoverStrip.setAttribute('aria-hidden', 'true');
+        document.body.appendChild(hoverStrip);
+        this._sidebarHoverStrip = hoverStrip;
+
+        const pinTab = document.createElement('button');
+        pinTab.id = 'sidebar-pin-tab';
+        pinTab.type = 'button';
+        pinTab.textContent = '📌';
+        pinTab.setAttribute('aria-pressed', 'true');
+        pinTab.title = 'Collapse sidebar';
+        document.body.appendChild(pinTab);
+        this._sidebarPinTab = pinTab;
+
+        const hoverTargets = new Set();
+        this._sidebarHoverTargets = hoverTargets;
+        let hoverUpdateRaf = null;
+        const scheduleHoverUpdate = () => {
+            if (this._sidebarPinned || this._sidebarAutoHideSuspended) return;
+            if (hoverUpdateRaf != null) cancelAnimationFrame(hoverUpdateRaf);
+            hoverUpdateRaf = requestAnimationFrame(() => {
+                hoverUpdateRaf = null;
+                if (this._sidebarPinned || this._sidebarAutoHideSuspended) return;
+                this._setSidebarHoverVisible(hoverTargets.size > 0);
+            });
+        };
+        const bindHover = (el, { captureSidebarOnLeave = false, capturePinOnLeave = false, requireSidebarVisible = false } = {}) => {
+            const onEnter = () => {
+                if (requireSidebarVisible && !this._isSidebarVisible()) return;
+                hoverTargets.add(el);
+                scheduleHoverUpdate();
+            };
+            const onLeave = (ev) => {
+                hoverTargets.delete(el);
+                const pinTabEl = this._sidebarPinTab;
+                if (capturePinOnLeave && pinTabEl) {
+                    const related = ev?.relatedTarget;
+                    if (related === pinTabEl || (pinTabEl.contains && pinTabEl.contains(related))) {
+                        hoverTargets.add(pinTabEl);
+                        scheduleHoverUpdate();
+                        return;
+                    }
+                }
+                if (capturePinOnLeave && pinTabEl && this._isSidebarVisible()) {
+                    const rect = pinTabEl.getBoundingClientRect();
+                    if (rect
+                        && ev
+                        && ev.clientX >= rect.left
+                        && ev.clientX <= rect.right
+                        && ev.clientY >= rect.top
+                        && ev.clientY <= rect.bottom) {
+                        hoverTargets.add(pinTabEl);
+                        scheduleHoverUpdate();
+                        return;
+                    }
+                }
+                if (captureSidebarOnLeave && this.sidebar && this._isSidebarVisible()) {
+                    const rect = this.sidebar.getBoundingClientRect();
+                    if (rect
+                        && ev
+                        && ev.clientX >= rect.left
+                        && ev.clientX <= rect.right
+                        && ev.clientY >= rect.top
+                        && ev.clientY <= rect.bottom) {
+                        hoverTargets.add(this.sidebar);
+                    }
+                }
+                scheduleHoverUpdate();
+            };
+            el.addEventListener('pointerenter', onEnter);
+            el.addEventListener('pointerleave', onLeave);
+            return () => {
+                el.removeEventListener('pointerenter', onEnter);
+                el.removeEventListener('pointerleave', onLeave);
+            };
+        };
+
+        const cleanup = [];
+        cleanup.push(bindHover(hoverStrip, { captureSidebarOnLeave: true }));
+        cleanup.push(bindHover(pinTab, { captureSidebarOnLeave: true, requireSidebarVisible: true }));
+        cleanup.push(bindHover(this.sidebar, { capturePinOnLeave: true }));
+        if (this._sidebarResizer) {
+            cleanup.push(bindHover(this._sidebarResizer, { captureSidebarOnLeave: true, capturePinOnLeave: true }));
+        }
+        cleanup.push(() => {
+            if (hoverUpdateRaf != null) cancelAnimationFrame(hoverUpdateRaf);
+            hoverUpdateRaf = null;
+        });
+
+        const onPointerMove = (ev) => {
+            this._sidebarLastPointer = { x: ev.clientX, y: ev.clientY };
+        };
+        window.addEventListener('pointermove', onPointerMove, { passive: true });
+        cleanup.push(() => window.removeEventListener('pointermove', onPointerMove));
+
+        const onTabClick = (ev) => {
+            try { ev.preventDefault(); ev.stopPropagation(); } catch { }
+            this._setSidebarPinned(!this._sidebarPinned);
+        };
+        pinTab.addEventListener('click', onTabClick);
+        cleanup.push(() => pinTab.removeEventListener('click', onTabClick));
+
+        const positionTab = () => this._positionSidebarPinTab();
+        window.addEventListener('resize', positionTab);
+        cleanup.push(() => window.removeEventListener('resize', positionTab));
+
+        let ro = null;
+        try {
+            if (window.ResizeObserver) {
+                ro = new ResizeObserver(() => positionTab());
+                ro.observe(this.sidebar);
+            }
+        } catch { /* ignore */ }
+        let mo = null;
+        try {
+            if (window.MutationObserver) {
+                mo = new MutationObserver(() => positionTab());
+                mo.observe(this.sidebar, { attributes: true, attributeFilter: ['style', 'hidden', 'class'] });
+            }
+        } catch { /* ignore */ }
+        cleanup.push(() => { try { ro && ro.disconnect(); } catch { } });
+        cleanup.push(() => { try { mo && mo.disconnect(); } catch { } });
+
+        this._sidebarDockCleanup = () => {
+            cleanup.forEach((fn) => { try { fn(); } catch { } });
+            cleanup.length = 0;
+            try { if (hoverStrip.parentNode) hoverStrip.parentNode.removeChild(hoverStrip); } catch { }
+            try { if (pinTab.parentNode) pinTab.parentNode.removeChild(pinTab); } catch { }
+            if (this._sidebarHoverStrip === hoverStrip) this._sidebarHoverStrip = null;
+            if (this._sidebarPinTab === pinTab) this._sidebarPinTab = null;
+            this._sidebarHoverTargets = null;
+        };
+
+        this._syncSidebarVisibility();
+    }
+
+    _setSidebarAutoHideSuspended(suspended) {
+        const next = !!suspended;
+        if (this._sidebarAutoHideSuspended === next) return;
+        this._sidebarAutoHideSuspended = next;
+        this._syncSidebarVisibility();
+    }
+
+    _setSidebarPinned(pinned) {
+        const next = !!pinned;
+        if (this._sidebarPinned === next) return;
+        this._sidebarPinned = next;
+        if (!next && this._sidebarAutoHideSuspended) {
+            // Allow explicit user collapse even when auto-hide is suspended (e.g. sketch mode).
+            this._sidebarAutoHideSuspended = false;
+        }
+        if (next) {
+            this._sidebarHoverVisible = false;
+        } else {
+            if (this._sidebarHoverTargets) this._sidebarHoverTargets.clear();
+            this._sidebarHoverVisible = false;
+        }
+        this._syncSidebarVisibility();
+    }
+
+    _setSidebarHoverVisible(visible) {
+        const next = !!visible;
+        if (this._sidebarHoverVisible === next) return;
+        this._sidebarHoverVisible = next;
+        this._syncSidebarVisibility();
+    }
+
+    _refreshSidebarHoverTargetsFromPointer() {
+        const targets = this._sidebarHoverTargets;
+        const pos = this._sidebarLastPointer;
+        if (!targets || !pos) return;
+        targets.clear();
+        const { x, y } = pos;
+        const addIfHit = (el, requireVisible = false) => {
+            if (!el) return;
+            if (requireVisible && !this._isSidebarVisible()) return;
+            const rect = el.getBoundingClientRect ? el.getBoundingClientRect() : null;
+            if (!rect || rect.width <= 0 || rect.height <= 0) return;
+            if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+                targets.add(el);
+            }
+        };
+        addIfHit(this._sidebarHoverStrip);
+        addIfHit(this._sidebarPinTab, true);
+        addIfHit(this.sidebar, true);
+        addIfHit(this._sidebarResizer, true);
+    }
+
+    _getSidebarShouldShow() {
+        if (!this.sidebar) return false;
+        if (this._sidebarAutoHideSuspended) return true;
+        if (this._sidebarPinned) return true;
+        return !!this._sidebarHoverVisible;
+    }
+
+    _isSidebarVisible() {
+        if (!this.sidebar) return false;
+        return !this._sidebarOffscreen
+            && !this.sidebar.hidden
+            && this.sidebar.style.display !== 'none'
+            && this.sidebar.style.visibility !== 'hidden';
+    }
+
+    _setSidebarElementVisible(visible) {
+        if (!this.sidebar) return;
+        const isVisible = this._isSidebarVisible();
+        // Ensure the sidebar stays in the render tree even when collapsed.
+        try { if (this.sidebar.hidden) this.sidebar.hidden = false; } catch { }
+        if (this.sidebar.style.display === 'none') {
+            if (this._sidebarStoredDisplay != null) {
+                this.sidebar.style.display = this._sidebarStoredDisplay;
+            } else {
+                try { this.sidebar.style.removeProperty('display'); } catch { }
+                this.sidebar.style.display = this.sidebar.style.display || '';
+            }
+        }
+        if (this.sidebar.style.visibility === 'hidden') {
+            const visibility = this._sidebarStoredVisibility;
+            this.sidebar.style.visibility = visibility && visibility !== 'hidden' ? visibility : 'visible';
+        }
+        if (visible) {
+            if (!isVisible) {
+                if (this._sidebarStoredTransform != null) {
+                    this.sidebar.style.transform = this._sidebarStoredTransform;
+                } else {
+                    try { this.sidebar.style.removeProperty('transform'); } catch { }
+                    this.sidebar.style.transform = this.sidebar.style.transform || '';
+                }
+                if (this._sidebarStoredPointerEvents != null) {
+                    this.sidebar.style.pointerEvents = this._sidebarStoredPointerEvents;
+                } else {
+                    try { this.sidebar.style.removeProperty('pointer-events'); } catch { }
+                    this.sidebar.style.pointerEvents = this.sidebar.style.pointerEvents || '';
+                }
+            }
+            this.sidebar.style.opacity = .9;
+            this.sidebar.style.zIndex = String(7);
+            this._sidebarOffscreen = false;
+        } else {
+            if (!this._sidebarOffscreen) {
+                this._sidebarStoredDisplay = this.sidebar.style.display || '';
+                this._sidebarStoredVisibility = this.sidebar.style.visibility || '';
+                this._sidebarStoredTransform = this.sidebar.style.transform || '';
+                this._sidebarStoredPointerEvents = this.sidebar.style.pointerEvents || '';
+            }
+            this.sidebar.style.transform = 'translateX(calc(-100% - 12px))';
+            this.sidebar.style.pointerEvents = 'none';
+            this._sidebarOffscreen = true;
+        }
+        try { this.mainToolbar?._positionWithSidebar?.(); } catch { }
+    }
+
+    _updateSidebarDockUI() {
+        const tab = this._sidebarPinTab;
+        const strip = this._sidebarHoverStrip;
+        const pinned = !!this._sidebarPinned;
+        const hoverActive = !pinned && !this._sidebarAutoHideSuspended;
+        if (tab) {
+            tab.classList.toggle('is-pinned', pinned);
+            tab.setAttribute('aria-pressed', pinned ? 'true' : 'false');
+            tab.textContent = '📌';
+            tab.title = pinned ? 'Collapse sidebar' : 'Pin sidebar';
+        }
+        if (strip) {
+            strip.classList.toggle('is-active', hoverActive);
+            strip.style.pointerEvents = hoverActive ? 'auto' : 'none';
+        }
+        this._positionSidebarPinTab();
+    }
+
+    _positionSidebarPinTab() {
+        const tab = this._sidebarPinTab;
+        if (!tab) return;
+        let left = 0;
+        let top = 72;
+        const rect = this.sidebar?.getBoundingClientRect?.();
+        if (rect && rect.width > 0) {
+            left = Math.max(0, Math.round(rect.right - 1));
+        }
+        if (rect && rect.height > 0) {
+            const tabHeight = tab.getBoundingClientRect ? tab.getBoundingClientRect().height : tab.offsetHeight;
+            const nextTop = rect.top + (rect.height - (tabHeight || 0)) / 2;
+            if (Number.isFinite(nextTop)) top = Math.max(0, Math.round(nextTop));
+        }
+        tab.style.left = `${left}px`;
+        tab.style.top = `${top}px`;
+    }
+
+    _syncSidebarVisibility() {
+        const shouldShow = this._getSidebarShouldShow();
+        this._setSidebarElementVisible(shouldShow);
+        this._updateSidebarDockUI();
+    }
+
+
+    async setupAccordion() {
+        // Setup accordion
+        this.accordion = await new AccordionWidget();
+        await this.sidebar.appendChild(this.accordion.uiElement);
+
+
+        // Load saved plugins early (before File Manager autoloads last model)
+        // Defer rendering of plugin side panels until proper placement later.
+        try {
+            await loadSavedPlugins(this);
+        } catch (e) { console.warn('Plugin auto-load failed:', e); }
+
+        const fm = new FileManagerWidget(this);
+        const fmSection = await this.accordion.addSection('File Manager');
+        fmSection.uiElement.appendChild(fm.uiElement);
+        // Expose for toolbar Save button
+        this.fileManagerWidget = fm;
+
+        // Setup historyWidget
+        this.historyWidget = await new HistoryWidget(this);
+        this.partHistory.callbacks.run = async (featureID) => {
+            //await this.historyWidget.renderHistory(featureID);
+        };
+        this.partHistory.callbacks.reset = async () => {
+            //await this.historyWidget.reset();
+        };
+        this.partHistory.callbacks.afterRunHistory = () => {
+            this._refreshAssemblyConstraintsPanelVisibility();
+            this.applyMetadataColors();
+            this._axisHelpersDirty = true;
+        };
+        this.partHistory.callbacks.afterReset = () => {
+            this._refreshAssemblyConstraintsPanelVisibility();
+            this.applyMetadataColors();
+            this._axisHelpersDirty = true;
+        };
+        const historySection = await this.accordion.addSection("History");
+        await historySection.uiElement.appendChild(await this.historyWidget.uiElement);
+
+        this.assemblyConstraintsWidget = new AssemblyConstraintsWidget(this);
+        this._assemblyConstraintsSection = await this.accordion.addSection(ASSEMBLY_CONSTRAINTS_TITLE);
+        this._assemblyConstraintsSection.uiElement.appendChild(this.assemblyConstraintsWidget.uiElement);
+
+        // setup expressions
+        this.expressionsManager = await new expressionsManager(this);
+        const expressionsSection = await this.accordion.addSection("Expressions");
+        await expressionsSection.uiElement.appendChild(await this.expressionsManager.uiElement);
+
+        // Setup sceneManagerUi
+        this.sceneManagerUi = await new SceneListing(this.scene, {
+            onSelection: (obj) => this._applySelectionTarget(obj, { triggerOnClick: false, allowDiagnostics: false }),
+        });
+        const sceneSection = await this.accordion.addSection("Scene Manager");
+        await sceneSection.uiElement.appendChild(this.sceneManagerUi.uiElement);
+
+        // PMI Views (saved camera snapshots)
+        this.pmiViewsWidget = new PMIViewsWidget(this);
+        const pmiViewsSection = await this.accordion.addSection("PMI Views");
+        pmiViewsSection.uiElement.appendChild(this.pmiViewsWidget.uiElement);
+
+        // CADmaterials (Settings panel)
+        this.cadMaterialsUi = await new CADmaterialWidget(this);
+        const displaySection = await this.accordion.addSection("Display Settings");
+        await displaySection.uiElement.appendChild(this.cadMaterialsUi.uiElement);
+
+        // From this point on, plugin UI can be added immediately,
+        // and should be inserted just before the "Display Settings" panel.
+        this._pluginUiReady = true;
+
+        // Drain any queued plugin side panels so they appear immediately before settings
+        try {
+            const q = Array.isArray(this._pendingSidePanels) ? this._pendingSidePanels : [];
+            this._pendingSidePanels = [];
+            for (const it of q) {
+                try { await this._applyPluginSidePanel(it); } catch { }
+            }
+        } catch { }
+
+        // Plugin setup panel (after settings)
+        const pluginsSection = await this.accordion.addSection('Plugins');
+        const pluginsWidget = new PluginsWidget(this);
+        pluginsSection.uiElement.appendChild(pluginsWidget.uiElement);
+
+        await this.accordion.collapseAll();
+        await this.accordion.expandSection("Scene Manager");
+
+        await this.accordion.expandSection("History");
+        const hasAssemblyComponents = !!this.partHistory?.hasAssemblyComponents?.();
+        if (hasAssemblyComponents) {
+            await this.accordion.expandSection(ASSEMBLY_CONSTRAINTS_TITLE);
+        }
+        await this.accordion.expandSection("PMI Views");
+
+        this._refreshAssemblyConstraintsPanelVisibility();
+
+
+        // Mount the main toolbar (layout only; buttons registered externally)
+        this.mainToolbar = new MainToolbar(this);
+        // Register core/default toolbar buttons via the public API
+        try { registerDefaultToolbarButtons(this); } catch { }
+        // Drain any queued custom toolbar buttons from early plugin registration
+        try {
+            const q = Array.isArray(this._pendingToolbarButtons) ? this._pendingToolbarButtons : [];
+            this._pendingToolbarButtons = [];
+            for (const it of q) {
+                try { this.mainToolbar.addCustomButton(it); } catch { }
+            }
+        } catch { }
+
+        // Ensure toolbar sits above the canvas and doesn't block controls when not hovered
+        try { this.renderer.domElement.style.marginTop = '0px'; } catch { }
+    }
+
+    // Public: allow plugins to add toolbar buttons even before MainToolbar is constructed
+    addToolbarButton(label, title, onClick) {
+        const item = { label, title, onClick };
+        if (this.mainToolbar && typeof this.mainToolbar.addCustomButton === 'function') {
+            try { return this.mainToolbar.addCustomButton(item); } catch { return null; }
+        }
+        this._pendingToolbarButtons = this._pendingToolbarButtons || [];
+        this._pendingToolbarButtons.push(item);
+        return null;
+    }
+
+    _syncHistoryUiAfterUndoRedo() {
+        try {
+            if (this.expressionsManager?.textArea) {
+                this.expressionsManager.textArea.value = this.partHistory?.expressions || '';
+            }
+        } catch { }
+        try {
+            if (this.pmiViewsWidget) {
+                this.pmiViewsWidget.refreshFromHistory?.();
+                this.pmiViewsWidget._renderList?.();
+            }
+        } catch { }
+        try { this.historyWidget?.render?.(); } catch { }
+    }
+
+    async _runFeatureHistoryUndoRedo(direction) {
+        const ph = this.partHistory;
+        if (!ph) return false;
+        let changed = false;
+        try {
+            if (direction === 'redo') changed = await ph.redoFeatureHistory();
+            else changed = await ph.undoFeatureHistory();
+        } catch { }
+        try { this._syncHistoryUiAfterUndoRedo(); } catch { }
+        return changed;
+    }
+
+    // Apply a single queued plugin side panel entry
+    async _applyPluginSidePanel({ title, content }) {
+        if (!this.accordion || typeof this.accordion.addSection !== 'function') return null;
+        const t = String(title || 'Plugin');
+        const sec = await this.accordion.addSection(t);
+        if (!sec) return null;
+        try {
+            if (typeof content === 'function') {
+                const el = await content();
+                if (el) sec.uiElement.appendChild(el);
+            } else if (content instanceof HTMLElement) {
+                sec.uiElement.appendChild(content);
+            } else if (content != null) {
+                const pre = document.createElement('pre');
+                pre.textContent = String(content);
+                sec.uiElement.appendChild(pre);
+            }
+            // Reposition this plugin section to immediately before the Display Settings panel, if present
+            try {
+                const root = this.accordion.uiElement;
+                const targetTitle = root.querySelector('.accordion-title[name="accordion-title-Display Settings"]');
+                if (targetTitle) {
+                    const secTitle = root.querySelector(`.accordion-title[name="accordion-title-${t}"]`);
+                    if (secTitle && sec.uiElement && secTitle !== targetTitle) {
+                        root.insertBefore(secTitle, targetTitle);
+                        root.insertBefore(sec.uiElement, targetTitle);
+                    }
+                }
+            } catch { }
+        } catch { }
+        return sec;
+    }
+
+    // Public: allow plugins to register side panels; queued until core UI/toolbar are ready
+    async addPluginSidePanel(title, content) {
+        const item = { title, content };
+        if (this._pluginUiReady) {
+            try { return await this._applyPluginSidePanel(item); } catch { return null; }
+        }
+        this._pendingSidePanels = this._pendingSidePanels || [];
+        this._pendingSidePanels.push(item);
+        return null;
+    }
+
+    _refreshAssemblyConstraintsPanelVisibility() {
+        if (!this.accordion || !this.accordion.uiElement) return;
+        const shouldShow = !!this.partHistory?.hasAssemblyComponents?.();
+        const prevVisible = this._assemblyConstraintsVisible;
+        this._assemblyConstraintsVisible = shouldShow;
+
+        if (shouldShow) {
+            this.accordion.showSection?.(ASSEMBLY_CONSTRAINTS_TITLE);
+            if (prevVisible === false) {
+                try { this.accordion.expandSection?.(ASSEMBLY_CONSTRAINTS_TITLE); } catch { /* ignore */ }
+            }
+        } else {
+            const applied = this.accordion.hideSection?.(ASSEMBLY_CONSTRAINTS_TITLE);
+            if (!applied) {
+                // Retry once after next paint in case the nodes weren't available yet.
+                setTimeout(() => {
+                    try { this.accordion.hideSection?.(ASSEMBLY_CONSTRAINTS_TITLE); } catch { /* ignore */ }
+                }, 0);
+            }
+        }
+
+        if (prevVisible !== shouldShow) {
+            // No-op; kept for future hooks
+        }
+    }
+
+    // ----------------------------------------
+    // Public API
+    // ----------------------------------------
+    dispose() {
+        if (this._disposed) return;
+        this._disposed = true;
+        cancelAnimationFrame(this._raf);
+        try { this._stopComponentTransformSession(); } catch { }
+        try { this._sidebarResizerCleanup?.(); } catch { }
+        try { this._sidebarDockCleanup?.(); } catch { }
+        const el = this.renderer?.domElement;
+        this._detachRendererEvents(el);
+        window.removeEventListener('pointerup', this._onPointerUp, { capture: true });
+        document.removeEventListener('dblclick', this._onGlobalDoubleClick, { capture: true });
+        window.removeEventListener('resize', this._onResize);
+        window.removeEventListener('keydown', this._onKeyDown, { passive: false });
+        this.controls?.dispose?.();
+        this.renderer?.dispose?.();
+        if (this._webglRenderer && this._webglRenderer !== this.renderer) {
+            try { this._webglRenderer.dispose(); } catch { }
+        }
+        try { if (this._sketchMode) this._sketchMode.dispose(); } catch { }
+        try { if (this._splineMode) this._splineMode.dispose(); } catch { }
+        if (el && el.parentNode) el.parentNode.removeChild(el);
+    }
+
+    // ----------------------------------------
+    // Sketch Mode API
+    // ----------------------------------------
+    startSketchMode(featureID) {
+        // Hide the sketch in the scene if it exists
+        try {
+            const ph = this.partHistory.getObjectByName(featureID);
+            if (ph) ph.visible = false;
+        } catch (e) {
+            debugLog(e);
+            debugLog(this.viewer);
+        }
+
+        debugLog('Starting Sketch Mode for featureID:', featureID);
+        debugLog(this.partHistory.scene);
+        debugLog(this.partHistory);
+        debugLog(this);
+
+        try { if (this._sketchMode) this._sketchMode.dispose(); } catch { }
+        this._setSidebarAutoHideSuspended(true);
+        this._sketchMode = new SketchMode3D(this, featureID);
+        this._sketchMode.open();
+
+
+    }
+
+    onSketchFinished(featureID, sketchObject) {
+        const ph = this.partHistory;
+        if (!ph || !featureID) return;
+        // Always restore normal UI first
+        this.endSketchMode();
+        const f = Array.isArray(ph.features) ? ph.features.find(x => x?.inputParams?.featureID === featureID) : null;
+        if (!f) return;
+        f.lastRunInputParams = {};
+        f.timestamp = 0;
+        f.dirty = true;
+        f.persistentData = f.persistentData || {};
+        f.persistentData.sketch = sketchObject || {};
+        // re-run to keep downstream in sync (even if SketchFeature.run has no output yet)
+        try {
+            const runPromise = ph.runHistory();
+            if (runPromise && typeof runPromise.then === 'function') {
+                runPromise.then(() => ph.queueHistorySnapshot?.({ debounceMs: 0, reason: 'sketch' }));
+            } else {
+                ph.queueHistorySnapshot?.({ debounceMs: 0, reason: 'sketch' });
+            }
+        } catch { }
+    }
+
+    onSketchCancelled(_featureID) {
+        this.endSketchMode();
+    }
+
+    endSketchMode() {
+        try { if (this._sketchMode) this._sketchMode.close(); } catch { }
+        this._sketchMode = null;
+        // Ensure core UI is visible and controls enabled
+        try { this._setSidebarAutoHideSuspended(false); } catch { }
+        try { if (this.controls) this.controls.enabled = true; } catch { }
+
+        // Clean up any legacy overlays that might still be mounted (from old 2D mode)
+        try {
+            const c = this.container;
+            if (c && typeof c.querySelectorAll === 'function') {
+                const leftovers = c.querySelectorAll('.sketch-overlay');
+                leftovers.forEach(el => { try { el.parentNode && el.parentNode.removeChild(el); } catch { } });
+            }
+        } catch { }
+    }
+
+    // ----------------------------------------
+    // Spline Mode API
+    // ----------------------------------------
+    startSplineMode(splineSession) {
+        debugLog('Starting Spline Mode for session:', splineSession);
+        this._splineMode = splineSession;
+    }
+
+    endSplineMode() {
+        debugLog('Ending Spline Mode');
+        this._splineMode = null;
+    }
+
+    // ----------------------------------------
+    // PMI Edit Mode API
+    // ----------------------------------------
+    startPMIMode(viewEntry, viewIndex, widget = this.pmiViewsWidget) {
+        const alreadyActive = !!this._pmiMode;
+        if (!alreadyActive) {
+            try { this.assemblyConstraintsWidget?.onPMIModeEnter?.(); } catch { }
+        }
+        try { if (this._pmiMode) this._pmiMode.dispose(); } catch { }
+        try {
+            if (!alreadyActive) this._setSidebarAutoHideSuspended(true);
+            this._pmiMode = new PMIMode(this, viewEntry, viewIndex, widget);
+            this._pmiMode.open();
+        } catch (error) {
+            this._pmiMode = null;
+            if (!alreadyActive) {
+                try { this.assemblyConstraintsWidget?.onPMIModeExit?.(); } catch { }
+                try { this._setSidebarAutoHideSuspended(false); } catch { }
+            }
+            throw error;
+        }
+    }
+
+    onPMIFinished(_updatedView) {
+        this.endPMIMode();
+    }
+
+    onPMICancelled() {
+        this.endPMIMode();
+    }
+
+    endPMIMode() {
+        const hadMode = !!this._pmiMode;
+        try { if (this._pmiMode) this._pmiMode.dispose(); } catch { }
+        this._pmiMode = null;
+        if (hadMode) {
+            try { this.assemblyConstraintsWidget?.onPMIModeExit?.(); } catch { }
+        }
+        // Robustly restore core UI similar to endSketchMode
+        try { this._setSidebarAutoHideSuspended(false); } catch { }
+        try { if (this.controls) this.controls.enabled = true; } catch { }
+    }
+
+    render() {
+        // Keep the camera (and its attached light) anchored in the scene
+        if (this.camera && this.camera.parent !== this.scene) {
+            try { this.scene.add(this.camera); } catch { /* ignore add errors */ }
+        }
+        this._updateAxisHelpers();
+        this._updateCameraLightRig();
+        this._updateDepthRange();
+        if (this._rendererMode === 'svg') {
+            this._renderSvgScene();
+        } else {
+            this.renderer.render(this.scene, this.camera);
+            try { this.viewCube && this.viewCube.render(); } catch { }
+        }
+    }
+
+    _renderSvgScene() {
+        if (!this.renderer || !this.scene || !this.camera) return;
+        const el = this.renderer.domElement;
+        if (!el) return;
+        try { this.scene.updateMatrixWorld(true); } catch { }
+        try { this.camera.updateMatrixWorld?.(); } catch { }
+        this._resizeRendererToDisplaySize();
+
+        const rect = el.getBoundingClientRect();
+        const width = Math.max(1, Math.floor(rect.width || this.container?.clientWidth || 0));
+        const height = Math.max(1, Math.floor(rect.height || this.container?.clientHeight || 0));
+        if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 1 || height <= 1) return;
+
+        try {
+            if (typeof this.renderer.setClearColor === 'function') {
+                this.renderer.setClearColor(this._clearColor);
+            }
+        } catch { }
+
+        const pointAdjustments = [];
+        const sideAdjustments = [];
+        const tempLines = [];
+        const tempGroup = new THREE.Group();
+        const hiddenLines = [];
+        try {
+            if (this.camera?.isOrthographicCamera) {
+                const span = (Number(this.camera.right) - Number(this.camera.left)) || 0;
+                if (Number.isFinite(span) && span > 0) {
+                    const scaleFactor = span / width;
+                    this.scene.traverse((obj) => {
+                        if (!obj?.isPoints) return;
+                        const mat = obj.material;
+                        if (Array.isArray(mat)) {
+                            for (const m of mat) {
+                                if (!m?.isPointsMaterial || !Number.isFinite(m.size)) continue;
+                                pointAdjustments.push([m, m.size]);
+                                m.size = m.size * scaleFactor;
+                            }
+                        } else if (mat?.isPointsMaterial && Number.isFinite(mat.size)) {
+                            pointAdjustments.push([mat, mat.size]);
+                            mat.size = mat.size * scaleFactor;
+                        }
+                    });
+                }
+            }
+
+            const occluders = this._collectSvgOccluders(sideAdjustments);
+            const raycaster = this._svgRaycaster || new THREE.Raycaster();
+            this._svgRaycaster = raycaster;
+            const occlusionEps = this._computeSvgOcclusionEps();
+
+            this.scene.traverse((obj) => {
+                if (!obj?.visible) return;
+                if (!obj.isLine2 && !obj.isLineSegments2) return;
+                const line = this._buildSvgLineFromLine2(obj, {
+                    camera: this.camera,
+                    occluders,
+                    raycaster,
+                    occlusionEps,
+                });
+                if (!line) return;
+                tempLines.push(line);
+                tempGroup.add(line);
+                hiddenLines.push([obj, obj.visible]);
+                obj.visible = false;
+            });
+            if (tempLines.length) {
+                this.scene.add(tempGroup);
+            }
+
+            this._restoreSvgMaterialSides(sideAdjustments);
+
+            this.renderer.render(this.scene, this.camera);
+            try { el.style.background = this._clearAlpha === 0 ? 'transparent' : this._clearColor.getStyle(); } catch { }
+        } catch { } finally {
+            try {
+                if (tempLines.length) {
+                    this.scene.remove(tempGroup);
+                    for (const line of tempLines) {
+                        try { line.geometry?.dispose?.(); } catch { }
+                        try { line.material?.dispose?.(); } catch { }
+                    }
+                }
+            } catch { }
+            for (const [obj, wasVisible] of hiddenLines) {
+                try { obj.visible = wasVisible; } catch { }
+            }
+            this._restoreSvgMaterialSides(sideAdjustments);
+            for (const [mat, size] of pointAdjustments) {
+                try { mat.size = size; } catch { }
+            }
+        }
+    }
+
+    _buildSvgLineFromLine2(obj, { camera, occluders, raycaster, occlusionEps } = {}) {
+        const geom = obj.geometry;
+        const start = geom?.attributes?.instanceStart;
+        const end = geom?.attributes?.instanceEnd;
+        let positions = null;
+        if (start && end && Number.isFinite(start.count) && start.count > 0) {
+            const count = Math.min(start.count, end.count);
+            positions = new Float32Array(count * 6);
+            for (let i = 0; i < count; i += 1) {
+                positions[i * 6] = start.getX(i);
+                positions[i * 6 + 1] = start.getY(i);
+                positions[i * 6 + 2] = start.getZ(i);
+                positions[i * 6 + 3] = end.getX(i);
+                positions[i * 6 + 4] = end.getY(i);
+                positions[i * 6 + 5] = end.getZ(i);
+            }
+        } else if (geom?.attributes?.position?.count >= 2) {
+            const pos = geom.attributes.position;
+            const segCount = pos.count - 1;
+            positions = new Float32Array(segCount * 6);
+            for (let i = 0; i < segCount; i += 1) {
+                positions[i * 6] = pos.getX(i);
+                positions[i * 6 + 1] = pos.getY(i);
+                positions[i * 6 + 2] = pos.getZ(i);
+                positions[i * 6 + 3] = pos.getX(i + 1);
+                positions[i * 6 + 4] = pos.getY(i + 1);
+                positions[i * 6 + 5] = pos.getZ(i + 1);
+            }
+        }
+
+        if (!positions || positions.length < 6) return null;
+
+        const material = Array.isArray(obj.material) ? obj.material[0] : obj.material;
+        const wantsOcclusion = material?.depthTest !== false
+            && obj?.type === 'EDGE'
+            && Array.isArray(occluders)
+            && occluders.length
+            && camera
+            && raycaster;
+
+        if (wantsOcclusion) {
+            const edgeFaces = Array.isArray(obj.faces) ? new Set(obj.faces) : null;
+            const w1 = this._svgTmpVecA || (this._svgTmpVecA = new THREE.Vector3());
+            const w2 = this._svgTmpVecB || (this._svgTmpVecB = new THREE.Vector3());
+            const visible = [];
+            for (let i = 0; i < positions.length; i += 6) {
+                w1.set(positions[i], positions[i + 1], positions[i + 2]).applyMatrix4(obj.matrixWorld);
+                w2.set(positions[i + 3], positions[i + 4], positions[i + 5]).applyMatrix4(obj.matrixWorld);
+                if (this._isSvgSegmentVisible(w1, w2, camera, raycaster, occluders, edgeFaces, occlusionEps)) {
+                    visible.push(
+                        positions[i], positions[i + 1], positions[i + 2],
+                        positions[i + 3], positions[i + 4], positions[i + 5]
+                    );
+                }
+            }
+            if (!visible.length) return null;
+            positions = new Float32Array(visible);
+        }
+
+        const geomOut = new THREE.BufferGeometry();
+        geomOut.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+
+        const color = material?.color ? material.color : new THREE.Color('#ffffff');
+        const opacity = Number.isFinite(material?.opacity) ? material.opacity : 1;
+        const transparent = Boolean(material?.transparent) || opacity < 1;
+        const linewidth = Number.isFinite(material?.linewidth) ? material.linewidth : 1;
+        let matOut = null;
+
+        if (material?.dashed || material?.isLineDashedMaterial) {
+            matOut = new THREE.LineDashedMaterial({
+                color,
+                linewidth,
+                transparent,
+                opacity,
+                dashSize: Number.isFinite(material?.dashSize) ? material.dashSize : 0.5,
+                gapSize: Number.isFinite(material?.gapSize) ? material.gapSize : 0.5,
+            });
+        } else {
+            matOut = new THREE.LineBasicMaterial({
+                color,
+                linewidth,
+                transparent,
+                opacity,
+            });
+        }
+
+        const line = new THREE.LineSegments(geomOut, matOut);
+        line.matrixAutoUpdate = false;
+        try { line.matrix.copy(obj.matrixWorld); } catch { }
+        try { line.matrixWorld.copy(obj.matrixWorld); } catch { }
+        line.renderOrder = 2;
+        line.visible = true;
+        if (matOut.isLineDashedMaterial) {
+            try { line.computeLineDistances(); } catch { }
+        }
+        return line;
+    }
+
+    _collectSvgOccluders(sideAdjustments) {
+        const occluders = [];
+        try {
+            this.scene.traverse((obj) => {
+                if (!obj?.visible || !obj.isMesh) return;
+                if (obj.type && obj.type !== 'FACE') return;
+                const mat = obj.material;
+                const mats = Array.isArray(mat) ? mat : [mat];
+                if (!mats.some((m) => m && m.opacity !== 0)) return;
+                if (Array.isArray(sideAdjustments)) {
+                    for (const m of mats) {
+                        if (!m || m.side === THREE.DoubleSide) continue;
+                        sideAdjustments.push([m, m.side]);
+                        m.side = THREE.DoubleSide;
+                    }
+                }
+                occluders.push(obj);
+            });
+        } catch { }
+        return occluders;
+    }
+
+    _restoreSvgMaterialSides(sideAdjustments) {
+        if (!Array.isArray(sideAdjustments) || !sideAdjustments.length) return;
+        for (const [mat, side] of sideAdjustments) {
+            if (!mat) continue;
+            try { mat.side = side; } catch { }
+        }
+        sideAdjustments.length = 0;
+    }
+
+    _computeSvgOcclusionEps() {
+        const cam = this.camera;
+        if (!cam) return 1e-4;
+        if (cam.isOrthographicCamera) {
+            const span = Math.abs(Number(cam.right) - Number(cam.left)) || 0;
+            return Math.max(1e-4, span * 1e-4);
+        }
+        const target = this.controls?.target;
+        const dist = (target && cam.position?.distanceTo?.(target)) || cam.position?.length?.() || 1;
+        return Math.max(1e-4, dist * 1e-4);
+    }
+
+    _isSvgSegmentVisible(a, b, camera, raycaster, occluders, edgeFaces, eps) {
+        if (!camera || !raycaster || !Array.isArray(occluders) || !occluders.length) return true;
+        const samples = this._svgEdgeSamples || (this._svgEdgeSamples = [0.2, 0.5, 0.8]);
+        const p = this._svgTmpVecC || (this._svgTmpVecC = new THREE.Vector3());
+        for (const t of samples) {
+            p.lerpVectors(a, b, t);
+            if (!this._isSvgPointOccluded(p, camera, raycaster, occluders, edgeFaces, eps)) return true;
+        }
+        return false;
+    }
+
+    _isSvgPointOccluded(point, camera, raycaster, occluders, edgeFaces, eps) {
+        const ndc = this._svgTmpVecD || (this._svgTmpVecD = new THREE.Vector3());
+        ndc.copy(point).project(camera);
+        if (!Number.isFinite(ndc.x) || !Number.isFinite(ndc.y) || !Number.isFinite(ndc.z)) return false;
+        if (ndc.z < -1 || ndc.z > 1) return true;
+        raycaster.setFromCamera({ x: ndc.x, y: ndc.y }, camera);
+        const dist = raycaster.ray.origin.distanceTo(point);
+        const pad = Number.isFinite(eps) ? eps : 1e-4;
+        raycaster.near = 0;
+        raycaster.far = Math.max(0, dist - pad);
+        const hits = raycaster.intersectObjects(occluders, true);
+        if (!hits.length) return false;
+        if (edgeFaces && edgeFaces.size) {
+            for (const hit of hits) {
+                if (!this._isSvgHitFromEdgeFace(hit, edgeFaces)) return true;
+            }
+            return false;
+        }
+        return true;
+    }
+
+    _isSvgHitFromEdgeFace(hit, edgeFaces) {
+        let obj = hit?.object || null;
+        for (let i = 0; i < 3 && obj; i += 1) {
+            if (edgeFaces.has(obj)) return true;
+            obj = obj.parent || null;
+        }
+        return false;
+    }
+
+    _updateCameraLightRig() {
+        if (!this._cameraLightRig || !this.camera || !this.renderer) return;
+        const { pointLights, lightDirections, baseLightRadius } = this._cameraLightRig;
+        if (!pointLights?.length || !lightDirections?.length) return;
+        const sizeVec = this.renderer.getSize ? this.renderer.getSize(new THREE.Vector2()) : null;
+        const width = sizeVec?.width || this.renderer?.domElement?.clientWidth || 0;
+        const height = sizeVec?.height || this.renderer?.domElement?.clientHeight || 0;
+        if (!width || !height) return;
+
+        const wpp = this._worldPerPixel(this.camera, width, height);
+        const screenDiagonal = Math.sqrt(width * width + height * height);
+        // Scale radius with visible span so lights spread further when zoomed out and stay even when zoomed in
+        const radius = Math.max(baseLightRadius, wpp * screenDiagonal * 1.4);
+
+        pointLights.forEach((light, idx) => {
+            const dir = lightDirections[idx] || [0, 0, 0];
+            light.position.set(dir[0] * radius, dir[1] * radius, dir[2] * radius);
+        });
+    }
+
+    _collectAxisHelpers() {
+        this._axisHelpers = new Set();
+        if (!this.scene || typeof this.scene.traverse !== 'function') {
+            this._axisHelpersDirty = false;
+            return;
+        }
+        this.scene.traverse((obj) => {
+            if (obj?.userData?.axisHelper) this._axisHelpers.add(obj);
+        });
+        this._axisHelpersDirty = false;
+    }
+
+    _updateAxisHelpers() {
+        if (!this.camera || !this.scene) return;
+        if (this._axisHelpersDirty) this._collectAxisHelpers();
+        if (!this._axisHelpers || this._axisHelpers.size === 0) return;
+
+        const { width, height } = this._getContainerSize();
+        const wpp = this._worldPerPixel(this.camera, width, height);
+        if (!Number.isFinite(wpp) || wpp <= 0) return;
+
+        const parentScale = new THREE.Vector3(1, 1, 1);
+        const eps = 1e-9;
+        const setRes = (mat) => {
+            if (mat?.resolution && typeof mat.resolution.set === 'function') {
+                mat.resolution.set(width, height);
+            }
+        };
+
+        for (const helper of this._axisHelpers) {
+            if (!helper || !helper.isObject3D) continue;
+            const px = Number(helper.userData?.axisHelperPx);
+            const axisPx = Number.isFinite(px) ? px : (this._axisHelperPx || DEFAULT_AXIS_HELPER_PX);
+            const axisLen = wpp * axisPx;
+
+            let sx = axisLen;
+            let sy = axisLen;
+            let sz = axisLen;
+            const compensate = helper.userData?.axisHelperCompensateScale !== false;
+            if (compensate && helper.parent && typeof helper.parent.getWorldScale === 'function') {
+                try { helper.parent.updateMatrixWorld?.(true); } catch { }
+                helper.parent.getWorldScale(parentScale);
+                const safe = (v) => (Math.abs(v) < eps ? 1 : Math.abs(v));
+                sx /= safe(parentScale.x);
+                sy /= safe(parentScale.y);
+                sz /= safe(parentScale.z);
+            }
+
+            const last = helper.userData._axisHelperScale;
+            if (!last
+                || Math.abs(last.x - sx) > 1e-6
+                || Math.abs(last.y - sy) > 1e-6
+                || Math.abs(last.z - sz) > 1e-6) {
+                helper.scale.set(sx, sy, sz);
+                helper.userData._axisHelperScale = { x: sx, y: sy, z: sz };
+            }
+
+            helper.traverse?.((node) => {
+                const mat = node?.material;
+                if (!mat) return;
+                if (Array.isArray(mat)) mat.forEach(setRes);
+                else setRes(mat);
+            });
+        }
+    }
+
+    _computeSceneBounds({ reuse = false, includeExcluded = false } = {}) {
+        if (reuse && this._sceneBoundsCache) return this._sceneBoundsCache;
+        const box = new THREE.Box3();
+        const tmp = new THREE.Box3();
+        let hasBounds = false;
+        if (!this.scene) return null;
+        try { this.scene.updateMatrixWorld(true); } catch { }
+
+        const shouldSkip = (obj) => {
+            const ud = obj?.userData;
+            if (ud?.axisHelper) return true;
+            if (!includeExcluded && ud?.excludeFromFit) return true;
+            return false;
+        };
+        const visit = (obj, skipParent) => {
+            if (!obj) return;
+            const skip = skipParent || shouldSkip(obj);
+            if (!skip) {
+                const geom = obj.geometry;
+                if (geom) {
+                    let bbox = null;
+                    if (obj.boundingBox !== undefined) {
+                        if (obj.boundingBox == null && typeof obj.computeBoundingBox === 'function') {
+                            try { obj.computeBoundingBox(); } catch { }
+                        }
+                        bbox = obj.boundingBox;
+                    } else {
+                        if (geom.boundingBox == null && typeof geom.computeBoundingBox === 'function') {
+                            try { geom.computeBoundingBox(); } catch { }
+                        }
+                        bbox = geom.boundingBox;
+                    }
+                    if (bbox) {
+                        tmp.copy(bbox);
+                        tmp.applyMatrix4(obj.matrixWorld);
+                        box.union(tmp);
+                        hasBounds = true;
+                    }
+                }
+            }
+            const children = obj.children || [];
+            for (const child of children) visit(child, skip);
+        };
+        visit(this.scene, false);
+
+        if (!hasBounds || box.isEmpty()) return null;
+        this._sceneBoundsCache = box;
+        return box;
+    }
+
+    _updateDepthRange({ reuseBounds = false } = {}) {
+        if (!this.camera) return false;
+        const box = this._computeSceneBounds({ reuse: reuseBounds, includeExcluded: true });
+        if (!box) return false;
+        try { this.camera.updateMatrixWorld(true); } catch { /* ignore */ }
+
+        const corners = [
+            new THREE.Vector3(box.min.x, box.min.y, box.min.z),
+            new THREE.Vector3(box.min.x, box.min.y, box.max.z),
+            new THREE.Vector3(box.min.x, box.max.y, box.min.z),
+            new THREE.Vector3(box.min.x, box.max.y, box.max.z),
+            new THREE.Vector3(box.max.x, box.min.y, box.min.z),
+            new THREE.Vector3(box.max.x, box.min.y, box.max.z),
+            new THREE.Vector3(box.max.x, box.max.y, box.min.z),
+            new THREE.Vector3(box.max.x, box.max.y, box.max.z),
+        ];
+        const inv = new THREE.Matrix4().copy(this.camera.matrixWorld).invert();
+        let minZ = Infinity;
+        let maxZ = -Infinity;
+        for (const p of corners) {
+            p.applyMatrix4(inv);
+            if (p.z < minZ) minZ = p.z;
+            if (p.z > maxZ) maxZ = p.z;
+        }
+        if (!Number.isFinite(minZ) || !Number.isFinite(maxZ)) return false;
+
+        const range = Math.max(1e-6, maxZ - minZ);
+        const diag = box.min.distanceTo(box.max);
+        const pad = Math.max(range * 0.1, diag * 0.1, 0.5);
+        if (maxZ > (-pad + 1e-6)) {
+            const dir = new THREE.Vector3();
+            try { this.camera.getWorldDirection(dir); } catch { dir.set(0, 0, -1); }
+            if (dir.lengthSq() > 0) {
+                const shift = maxZ + pad;
+                dir.normalize();
+                this.camera.position.addScaledVector(dir, -shift);
+                minZ -= shift;
+                maxZ -= shift;
+                try { this.camera.updateMatrixWorld(true); } catch { /* ignore */ }
+                try { this.controls?.updateMatrixState?.(); } catch { /* ignore */ }
+            }
+        }
+
+        const near = 0;
+        let far = Math.max(1, -minZ + pad);
+        if (!Number.isFinite(far)) return false;
+
+        const nearChanged = Math.abs((this.camera.near || 0) - near) > 1e-6;
+        const farChanged = Math.abs((this.camera.far || 0) - far) > 1e-6;
+        if (nearChanged || farChanged) {
+            this.camera.near = near;
+            this.camera.far = far;
+            try { this.camera.updateProjectionMatrix(); } catch { /* ignore */ }
+        }
+        return true;
+    }
+
+    // Zoom-to-fit using only ArcballControls operations (pan + zoom).
+    // Does not alter camera orientation or frustum parameters (left/right/top/bottom).
+    zoomToFit(margin = 1.1) {
+        try {
+            const c = this.controls;
+            if (!c) return;
+
+            const box = this._computeSceneBounds();
+            if (!box) return;
+
+            // Ensure matrices are current
+            this.camera.updateMatrixWorld(true);
+
+            // Compute extents in camera space (preserve orientation)
+            const corners = [
+                new THREE.Vector3(box.min.x, box.min.y, box.min.z),
+                new THREE.Vector3(box.min.x, box.min.y, box.max.z),
+                new THREE.Vector3(box.min.x, box.max.y, box.min.z),
+                new THREE.Vector3(box.min.x, box.max.y, box.max.z),
+                new THREE.Vector3(box.max.x, box.min.y, box.min.z),
+                new THREE.Vector3(box.max.x, box.min.y, box.max.z),
+                new THREE.Vector3(box.max.x, box.max.y, box.min.z),
+                new THREE.Vector3(box.max.x, box.max.y, box.max.z),
+            ];
+            const inv = new THREE.Matrix4().copy(this.camera.matrixWorld).invert();
+            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+            for (const p of corners) {
+                p.applyMatrix4(inv);
+                if (p.x < minX) minX = p.x; if (p.x > maxX) maxX = p.x;
+                if (p.y < minY) minY = p.y; if (p.y > maxY) maxY = p.y;
+            }
+            const camWidth = Math.max(1e-6, (maxX - minX));
+            const camHeight = Math.max(1e-6, (maxY - minY));
+
+            // Compute target zoom for orthographic camera using current frustum and viewport aspect.
+            const { width, height } = this._getContainerSize();
+            const aspect = Math.max(1e-6, width / height);
+            const v = this.viewSize; // current half-height before zoom scaling
+            const halfW = camWidth / 2 * Math.max(1, margin);
+            const halfH = camHeight / 2 * Math.max(1, margin);
+            const maxZoomByHeight = v / halfH;
+            const maxZoomByWidth = (v * aspect) / halfW;
+            const targetZoom = Math.min(maxZoomByHeight, maxZoomByWidth);
+            const currentZoom = this.camera.zoom || 1;
+            const sizeFactor = Math.max(1e-6, targetZoom / currentZoom);
+
+            // Compute world center of the box
+            const center = box.getCenter(new THREE.Vector3());
+
+            // Perform pan+zoom via ArcballControls only
+            try { c.updateMatrixState && c.updateMatrixState(); } catch { }
+            c.focus(center, sizeFactor);
+
+            // Sync and render
+            try { c.update && c.update(); } catch { }
+            this.render();
+        } catch { /* noop */ }
+    }
+
+    // Wireframe toggle for all materials
+    setWireframe(enabled) {
+        this._wireframeEnabled = !!enabled;
+        try {
+            this.scene.traverse((obj) => {
+                if (!obj) return;
+                // Exclude transform gizmo hierarchy from wireframe toggling
+                try {
+                    let p = obj;
+                    while (p) {
+                        if (p.isTransformGizmo) return;
+                        p = p.parent;
+                    }
+                } catch { }
+                // Exclude edge/loop/line objects from wireframe toggling
+                if (obj.type === 'EDGE' || obj.type === 'LOOP' || obj.isLine || obj.isLine2 || obj.isLineSegments || obj.isLineLoop) return;
+
+                const apply = (mat) => { if (mat && 'wireframe' in mat) mat.wireframe = !!enabled; };
+                if (obj.material) {
+                    if (Array.isArray(obj.material)) obj.material.forEach(apply); else apply(obj.material);
+                }
+            });
+        } catch { /* ignore */ }
+        this.render();
+    }
+    toggleWireframe() { this.setWireframe(!this._wireframeEnabled); }
+
+    applyMetadataColors(target = null) {
+        const metadataManager = this.partHistory?.metadataManager;
+        const scene = this.partHistory?.scene || this.scene;
+        if (!metadataManager || !scene) return;
+
+        const size = this.renderer?.getSize?.(new THREE.Vector2()) || null;
+        const width = Math.max(1, size?.width || this.renderer?.domElement?.clientWidth || 1);
+        const height = Math.max(1, size?.height || this.renderer?.domElement?.clientHeight || 1);
+
+        const solidKeys = ['solidColor', 'color'];
+        const faceKeys = ['faceColor', 'color'];
+        const edgeKeys = ['edgeColor', 'color'];
+        const solidEdgeKeys = ['edgeColor'];
+
+        const pickColorValue = (meta, keys) => {
+            if (!meta || typeof meta !== 'object') return null;
+            for (const key of keys) {
+                if (!Object.prototype.hasOwnProperty.call(meta, key)) continue;
+                const raw = meta[key];
+                if (raw == null) continue;
+                if (typeof raw === 'string' && raw.trim() === '') continue;
+                return raw;
+            }
+            return null;
+        };
+
+        const parseColor = (raw) => {
+            if (raw == null) return null;
+            if (raw?.isColor) {
+                try { return typeof raw.clone === 'function' ? raw.clone() : raw; } catch { return raw; }
+            }
+            if (typeof raw === 'number' && Number.isFinite(raw)) {
+                try { return new THREE.Color(raw); } catch { return null; }
+            }
+            if (typeof raw === 'string') {
+                const v = raw.trim();
+                if (!v) return null;
+                const lower = v.toLowerCase();
+                const isHex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/.test(lower);
+                const isHex0x = /^0x[0-9a-f]{6}$/.test(lower);
+                const isFunc = /^(rgb|rgba|hsl|hsla)\(/.test(lower);
+                if (!isHex && !isHex0x && !isFunc) return null;
+                if (isHex0x) {
+                    const num = Number(v);
+                    if (Number.isFinite(num)) {
+                        try { return new THREE.Color(num); } catch { return null; }
+                    }
+                }
+                try { return new THREE.Color(v); } catch { return null; }
+            }
+            if (Array.isArray(raw) && raw.length >= 3) {
+                const r = Number(raw[0]);
+                const g = Number(raw[1]);
+                const b = Number(raw[2]);
+                if (![r, g, b].every(Number.isFinite)) return null;
+                const max = Math.max(r, g, b);
+                try {
+                    if (max > 1) return new THREE.Color(r / 255, g / 255, b / 255);
+                    return new THREE.Color(r, g, b);
+                } catch { return null; }
+            }
+            if (typeof raw === 'object') {
+                const r = Number(raw.r);
+                const g = Number(raw.g);
+                const b = Number(raw.b);
+                if ([r, g, b].every(Number.isFinite)) {
+                    const max = Math.max(r, g, b);
+                    try {
+                        if (max > 1) return new THREE.Color(r / 255, g / 255, b / 255);
+                        return new THREE.Color(r, g, b);
+                    } catch { return null; }
+                }
+            }
+            return null;
+        };
+
+        const getMeta = (name) => {
+            if (!name || typeof metadataManager.getMetadata !== 'function') return null;
+            try { return metadataManager.getMetadata(name); } catch { return null; }
+        };
+
+        const applyMaterial = (obj, baseMaterial, color) => {
+            if (!obj || !baseMaterial) return;
+            if (!obj.userData) obj.userData = {};
+            const ud = obj.userData;
+            const defaultMaterial = ud.__defaultMaterial ?? baseMaterial;
+            if (!ud.__defaultMaterial) ud.__defaultMaterial = baseMaterial;
+            const isHovered = !!ud.__hoverMatApplied;
+            const isSelected = obj.selected === true;
+
+            const applyBase = (mat) => {
+                ud.__baseMaterial = mat;
+                if (isHovered) {
+                    ud.__hoverOrigMat = mat;
+                } else if (!isSelected && mat) {
+                    obj.material = mat;
+                }
+            };
+
+            if (!color) {
+                if (ud.__metadataMaterial && ud.__metadataMaterial !== defaultMaterial) {
+                    try { ud.__metadataMaterial.dispose?.(); } catch { }
+                }
+                try { delete ud.__metadataMaterial; } catch { }
+                try { delete ud.__metadataColor; } catch { }
+                applyBase(defaultMaterial);
+                return;
+            }
+
+            const colorHex = color.getHexString();
+            if (ud.__metadataColor === colorHex && ud.__metadataMaterial) {
+                applyBase(ud.__metadataMaterial);
+                return;
+            }
+
+            let nextMat = null;
+            try { nextMat = typeof baseMaterial.clone === 'function' ? baseMaterial.clone() : null; } catch { nextMat = null; }
+            if (!nextMat) return;
+            try {
+                if (nextMat.color && typeof nextMat.color.set === 'function') nextMat.color.set(color);
+            } catch { }
+            try {
+                if (nextMat.resolution && typeof nextMat.resolution.set === 'function') {
+                    nextMat.resolution.set(width, height);
+                }
+            } catch { }
+            try { nextMat.needsUpdate = true; } catch { }
+
+            if (ud.__metadataMaterial && ud.__metadataMaterial !== defaultMaterial) {
+                try { ud.__metadataMaterial.dispose?.(); } catch { }
+            }
+            ud.__metadataColor = colorHex;
+            ud.__metadataMaterial = nextMat;
+            applyBase(nextMat);
+        };
+
+        const applyToSolid = (solid) => {
+            if (!solid || solid.type !== 'SOLID') return;
+            const solidMeta = getMeta(solid.name);
+            const solidUserMeta = solid?.userData?.metadata || null;
+            const solidColor = parseColor(
+                pickColorValue(solidMeta, solidKeys)
+                ?? pickColorValue(solidUserMeta, solidKeys)
+            );
+            const solidEdgeColor = parseColor(
+                pickColorValue(solidMeta, solidEdgeKeys)
+                ?? pickColorValue(solidUserMeta, solidEdgeKeys)
+            );
+            const children = Array.isArray(solid.children) ? solid.children : [];
+
+            for (const child of children) {
+                if (!child) continue;
+                if (child.type === 'FACE') {
+                    const faceName = child.name || child.userData?.faceName || null;
+                    const managerMeta = faceName ? getMeta(faceName) : null;
+                    let faceMeta = null;
+                    if (faceName && typeof solid.getFaceMetadata === 'function') {
+                        try { faceMeta = solid.getFaceMetadata(faceName); } catch { faceMeta = null; }
+                    }
+                    const faceColor = parseColor(
+                        pickColorValue(managerMeta, faceKeys)
+                        ?? pickColorValue(faceMeta, faceKeys)
+                    ) || solidColor;
+                    const baseFace = CADmaterials.FACE?.BASE ?? child.material;
+                    applyMaterial(child, baseFace, faceColor);
+                } else if (child.type === 'EDGE') {
+                    const edgeName = child.name || null;
+                    const managerMeta = edgeName ? getMeta(edgeName) : null;
+                    let edgeMeta = null;
+                    if (edgeName && typeof solid.getEdgeMetadata === 'function') {
+                        try { edgeMeta = solid.getEdgeMetadata(edgeName); } catch { edgeMeta = null; }
+                    }
+                    let edgeColor = parseColor(
+                        pickColorValue(managerMeta, edgeKeys)
+                        ?? pickColorValue(edgeMeta, edgeKeys)
+                    );
+                    if (!edgeColor && solidEdgeColor) edgeColor = solidEdgeColor;
+
+                    const isBoundary = !!(child.userData?.faceA || child.userData?.faceB);
+                    const baseEdge = isBoundary ? (CADmaterials.EDGE?.BASE ?? child.material)
+                        : (child.userData?.__defaultMaterial ?? child.material);
+                    applyMaterial(child, baseEdge, edgeColor);
+                }
+            }
+        };
+
+        const resolveSolid = (obj) => {
+            if (!obj) return null;
+            if (obj.type === 'SOLID') return obj;
+            if (obj.parentSolid) return obj.parentSolid;
+            let current = obj.parent;
+            while (current) {
+                if (current.type === 'SOLID') return current;
+                current = current.parent;
+            }
+            return null;
+        };
+
+        if (target) {
+            let obj = target;
+            if (typeof obj === 'string') {
+                try { obj = scene.getObjectByName(obj); } catch { obj = null; }
+            }
+            const solid = resolveSolid(obj);
+            if (solid) {
+                applyToSolid(solid);
+            } else if (obj && (obj.type === 'FACE' || obj.type === 'EDGE')) {
+                const name = obj.name || null;
+                const managerMeta = name ? getMeta(name) : null;
+                const keys = obj.type === 'FACE' ? faceKeys : edgeKeys;
+                const color = parseColor(pickColorValue(managerMeta, keys));
+                const baseMat = obj.type === 'FACE'
+                    ? (CADmaterials.FACE?.BASE ?? obj.material)
+                    : (CADmaterials.EDGE?.BASE ?? obj.material);
+                applyMaterial(obj, baseMat, color);
+            }
+        } else {
+            scene.traverse((obj) => {
+                if (obj && obj.type === 'SOLID') applyToSolid(obj);
+            });
+        }
+
+        try { this.render(); } catch { }
+    }
+
+    // ----------------------------------------
+    // Internal: Animation Loop
+    // ----------------------------------------
+    _loop() {
+        this._raf = requestAnimationFrame(this._loop);
+        this.controls.update();
+        try {
+            const ax = (typeof window !== 'undefined') ? (window.__BREP_activeXform || null) : null;
+            const tc = ax && ax.controls;
+            if (tc) {
+                if (typeof tc.update === 'function') tc.update();
+                else tc.updateMatrixWorld(true);
+            }
+        } catch { }
+        this.render();
+    }
+
+    // ----------------------------------------
+    // Internal: Picking helpers
+    // ----------------------------------------
+    _getPointerNDC(event) {
+        const rect = this.renderer.domElement.getBoundingClientRect();
+        const x = (event.clientX - rect.left) / rect.width;
+        const y = (event.clientY - rect.top) / rect.height;
+        // Convert to NDC (-1..1)
+        return new THREE.Vector2(x * 2 - 1, -(y * 2 - 1));
+    }
+
+    _isEventOverRenderer(event) {
+        if (!event || !this.renderer?.domElement) return false;
+        const rect = this.renderer.domElement.getBoundingClientRect();
+        const x = event.clientX;
+        const y = event.clientY;
+        return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+    }
+
+    _mapIntersectionToTarget(intersection, options = {}) {
+        if (!intersection || !intersection.object) return null;
+        const { allowAnyAllowedType = false, ignoreSelectionFilter = false } = options;
+        const isAllowed = (type) => {
+            if (!type) return false;
+            if (ignoreSelectionFilter) return true;
+            if (allowAnyAllowedType && typeof SelectionFilter.matchesAllowedType === 'function') {
+                return SelectionFilter.matchesAllowedType(type);
+            }
+            if (typeof SelectionFilter.IsAllowed === 'function') {
+                return SelectionFilter.IsAllowed(type);
+            }
+            return true;
+        };
+
+        // Prefer the intersected object if it is clickable
+        let obj = intersection.object;
+
+        // If the object (or its ancestors) doesn't expose onClick, climb to one that does
+        let target = obj;
+        while (target && typeof target.onClick !== 'function' && target.visible) target = target.parent;
+        if (!target) return null;
+
+        // Respect selection filter: ensure target is a permitted type, or ALL
+        if (typeof isAllowed === 'function') {
+            // Allow selecting already-selected items regardless (toggle off), consistent with SceneListing
+            if (!isAllowed(target.type) && !target.selected) {
+                // Try to find a closer ancestor/descendant of allowed type that is clickable
+                // Ascend first (e.g., FACE hit while EDGE is active should try parent SOLID only if allowed)
+                let t = target.parent;
+                while (t && typeof t.onClick === 'function' && !isAllowed(t.type)) t = t.parent;
+                if (t && typeof t.onClick === 'function' && isAllowed(t.type)) target = t;
+                else return null;
+            }
+        }
+        return target;
+    }
+
+    _pickAtEvent(event, options = {}) {
+        const { collectAll = false, allowAnyAllowedType = false, ignoreSelectionFilter = false } = options;
+        // While Sketch Mode is active, suppress normal scene picking
+        // SketchMode3D manages its own picking for sketch points/curves and model edges.
+        if (this._sketchMode) return collectAll ? { hit: null, target: null, candidates: [] } : { hit: null, target: null };
+
+        // Auto-clear stale spline mode so normal picking resumes after leaving the spline dialog
+        if (this._splineMode) {
+            try {
+                const validSession = typeof this._splineMode.isActive === 'function';
+                const stillActive = validSession ? this._splineMode.isActive() : false;
+                if (!validSession || !stillActive) {
+                    this.endSplineMode();
+                }
+            } catch {
+                this.endSplineMode();
+            }
+        }
+
+        // In spline mode, allow picking only spline vertices, suppress other scene picking
+        if (this._splineMode) {
+            if (!event) return collectAll ? { hit: null, target: null, candidates: [] } : { hit: null, target: null };
+            const ndc = this._getPointerNDC(event);
+            this.raycaster.setFromCamera(ndc, this.camera);
+            // Set up raycaster params for vertex picking
+            try {
+                const rect = this.renderer.domElement.getBoundingClientRect();
+                const wpp = this._worldPerPixel(this.camera, rect.width, rect.height);
+                this.raycaster.params.Points = this.raycaster.params.Points || {};
+                this.raycaster.params.Points.threshold = Math.max(0.05, wpp * 6);
+            } catch { }
+
+            // Only intersect spline vertices
+            const intersects = this._withDoubleSidedPicking(() => this.raycaster.intersectObjects(this.scene.children, true));
+
+            for (const it of intersects) {
+                if (!it || !it.object) continue;
+
+                // Check if this is a spline vertex by looking at userData
+                if (it.object.userData?.isSplineVertex || it.object.userData?.isSplineWeight) {
+                    const target = it.object;
+                    if (typeof target.onClick === 'function') {
+                        return { hit: it, target };
+                    } else {
+                    }
+                }
+            }
+            return collectAll ? { hit: null, target: null, candidates: [] } : { hit: null, target: null };
+        }
+
+        if (!event) return collectAll ? { hit: null, target: null, candidates: [] } : { hit: null, target: null };
+        const ndc = this._getPointerNDC(event);
+        try { this.camera.updateMatrixWorld(true); } catch { /* ignore */ }
+        this.raycaster.setFromCamera(ndc, this.camera);
+        // Tune line picking thresholds per-frame based on zoom and DPI
+        try {
+            const rect = this.renderer.domElement.getBoundingClientRect();
+            const wpp = this._worldPerPixel(this.camera, rect.width, rect.height);
+            this.raycaster.params.Line = this.raycaster.params.Line || {};
+            this.raycaster.params.Line.threshold = Math.max(0.05, wpp * 6);
+            const dpr = (window.devicePixelRatio || 1);
+            this.raycaster.params.Line2 = this.raycaster.params.Line2 || {};
+            this.raycaster.params.Line2.threshold = Math.max(1, 2 * dpr);
+            // Improve point picking tolerance using world-units per pixel
+            this.raycaster.params.Points = this.raycaster.params.Points || {};
+            this.raycaster.params.Points.threshold = Math.max(0.05, wpp * 6);
+        } catch { }
+        // Fix ray origin - ensure it starts from behind the camera for large scenes
+        try {
+            const ray = this.raycaster.ray;
+            const dir = ray.direction.clone().normalize();
+            const span = Math.max(
+                1,
+                Math.abs(this.camera.far || 0),
+                Math.abs(this.camera.near || 0),
+                this.viewSize * 40
+            );
+            ray.origin.addScaledVector(dir, -span);
+        } catch { }
+        // Intersect everything; raycaster will skip non-geometry nodes
+        const intersects = this._withDoubleSidedPicking(() => this.raycaster.intersectObjects(this.scene.children, true));
+
+        // DEBUG: Log all objects under mouse pointer in normal mode
+        if (intersects.length > 0) {
+            debugLog(`NORMAL MODE CLICK DEBUG:`);
+            debugLog(`- Mouse NDC: (${ndc.x.toFixed(3)}, ${ndc.y.toFixed(3)})`);
+            debugLog(`- Total intersections found: ${intersects.length}`);
+        }
+
+        const candidates = [];
+        for (const it of intersects) {
+            // skip entities that are not visible (or have invisible parents)
+            if (!it || !it.object) continue;
+            const testVisible = (obj) => {
+                if (obj.parent === null) {
+                    return true;
+                }
+                if (obj.visible === false) return false;
+                return testVisible(obj.parent);
+            }
+
+            const visibleResult = testVisible(it.object);
+
+            if (visibleResult) {
+
+                const target = this._mapIntersectionToTarget(it, { allowAnyAllowedType, ignoreSelectionFilter });
+                if (target) {
+                    if (collectAll) {
+                        candidates.push({ hit: it, target, distance: it.distance ?? Infinity });
+                        continue;
+                    }
+                    return { hit: it, target };
+                }
+            }
+
+
+
+        }
+        if (collectAll) {
+            return {
+                hit: candidates[0]?.hit || null,
+                target: candidates[0]?.target || null,
+                candidates,
+            };
+        }
+        return { hit: null, target: null };
+    }
+
+    // Temporarily make FrontSide materials DoubleSide for picking without changing render appearance.
+    _withDoubleSidedPicking(fn) {
+        if (!fn) return null;
+        const touched = new Set();
+        const markMaterial = (mat) => {
+            if (!mat || typeof mat.side === 'undefined') return;
+            if (mat.side === THREE.FrontSide) {
+                touched.add(mat);
+                mat.side = THREE.DoubleSide;
+            }
+        };
+        try {
+            if (this.scene && typeof this.scene.traverse === 'function') {
+                this.scene.traverse((obj) => {
+                    if (!obj) return;
+                    const m = obj.material;
+                    if (Array.isArray(m)) m.forEach(markMaterial); else markMaterial(m);
+                });
+            }
+            return fn();
+        } finally {
+            for (const mat of touched) {
+                try { mat.side = THREE.FrontSide; } catch { /* ignore */ }
+            }
+        }
+    }
+
+    _updateHover(event) {
+        const { primary } = this._collectSelectionCandidates(event);
+        if (primary) {
+            try { SelectionFilter.setHoverObject(primary); } catch { }
+        } else {
+            try { SelectionFilter.clearHover(); } catch { }
+        }
+    }
+
+    _collectSelectionCandidates(event) {
+        const allowedTypes = (() => {
+            try {
+                const list = SelectionFilter.getAvailableTypes?.() || [];
+                if (Array.isArray(list) && list.length > 0) return list;
+                if (Array.isArray(SelectionFilter.TYPES)) return SelectionFilter.TYPES.filter(t => t !== SelectionFilter.ALL);
+            } catch { }
+            return [];
+        })();
+        const normType = (t) => String(t || '').toUpperCase();
+        const allowedSet = new Set(allowedTypes.map(normType));
+        const priorityOrder = [
+            SelectionFilter.VERTEX,
+            SelectionFilter.EDGE,
+            SelectionFilter.FACE,
+            SelectionFilter.PLANE,
+            SelectionFilter.SOLID,
+            SelectionFilter.COMPONENT,
+        ].map(t => normType(t));
+        const getPriority = (type) => {
+            const idx = priorityOrder.indexOf(normType(type));
+            return idx === -1 ? priorityOrder.length : idx;
+        };
+        const isAllowedType = (type) => {
+            if (allowedSet.size === 0) return true;
+            return allowedSet.has(normType(type));
+        };
+
+        const { target, candidates = [] } = this._pickAtEvent(event, { collectAll: true, allowAnyAllowedType: true });
+        const deduped = [];
+        const seen = new Set();
+        const normalizeTarget = (obj) => {
+            if (!obj) return null;
+            let o = obj;
+            const nt = normType(o.type);
+            if (nt === 'POINTS' && o.parent && normType(o.parent.type) === normType(SelectionFilter.VERTEX)) {
+                o = o.parent;
+            }
+            if (!isAllowedType(o.type) && o.parent && isAllowedType(o.parent.type)) {
+                o = o.parent;
+            }
+            return o;
+        };
+        const addEntry = (obj, distance) => {
+            const normalized = normalizeTarget(obj);
+            if (!normalized) return;
+            if (!isAllowedType(normalized.type)) return;
+            const key = normalized.uuid || normalized.name || `${normalized.type}-${seen.size}`;
+            if (seen.has(key)) return;
+            seen.add(key);
+            deduped.push({
+                target: normalized,
+                distance: Number.isFinite(distance) ? distance : Infinity,
+                label: this._describeSelectionCandidate(normalized),
+            });
+        };
+        for (const entry of candidates) {
+            const obj = entry?.target;
+            if (!obj) continue;
+            const distance = Number.isFinite(entry?.distance) ? entry.distance : (entry?.hit?.distance ?? Infinity);
+            addEntry(obj, distance);
+        }
+        deduped.sort((a, b) => a.distance - b.distance);
+
+        // When all types are allowed, also include ancestor SOLID/COMPONENT entries at the end
+        const extras = [];
+        const addExtra = (obj, distance) => {
+            const normalized = normalizeTarget(obj);
+            if (!normalized) return;
+            if (!isAllowedType(normalized.type)) return;
+            const key = normalized.uuid || normalized.name || `${normalized.type}-${seen.size}`;
+            if (seen.has(key)) return;
+            seen.add(key);
+            extras.push({
+                target: normalized,
+                distance: Number.isFinite(distance) ? distance : Infinity,
+                label: this._describeSelectionCandidate(normalized),
+            });
+        };
+        const findAncestorOfType = (obj, type) => {
+            let cur = obj?.parent || null;
+            while (cur) {
+                if (normType(cur.type) === normType(type)) return cur;
+                cur = cur.parent || null;
+            }
+            return null;
+        };
+        for (const entry of deduped.slice()) {
+            const obj = entry.target;
+            const dist = entry.distance;
+            const solid = findAncestorOfType(obj, SelectionFilter.SOLID);
+            const component = findAncestorOfType(obj, SelectionFilter.COMPONENT);
+            addExtra(component, dist);
+            addExtra(solid, dist);
+        }
+        extras.sort((a, b) => a.distance - b.distance);
+        const ordered = deduped.concat(extras);
+        ordered.sort((a, b) => {
+            const pa = getPriority(a?.target?.type);
+            const pb = getPriority(b?.target?.type);
+            if (pa !== pb) return pa - pb;
+            return (a?.distance ?? Infinity) - (b?.distance ?? Infinity);
+        });
+        const primary = ordered[0]?.target || target || null;
+        return { ordered, primary };
+    }
+
+    _selectAt(event) {
+        const { ordered, primary } = this._collectSelectionCandidates(event);
+        if (!primary) {
+            return;
+        }
+
+        if (ordered.length > 1) {
+            this._scheduleSelectionOverlay(event, ordered);
+            return;
+        }
+
+        this._hideSelectionOverlay();
+        this._applySelectionTarget(primary);
+    }
+
+    _applySelectionTarget(target, options = {}) {
+        if (!target) return;
+        this._lastInspectorTarget = target;
+        this._lastInspectorSolid = this._findParentSolid(target);
+        if (this._triangleDebugger && this._triangleDebugger.isOpen && this._triangleDebugger.isOpen()) {
+            try { this._triangleDebugger.refreshTarget(target); } catch { }
+        }
+        const {
+            triggerOnClick = true,
+            allowDiagnostics = true,
+        } = options;
+        // One-shot diagnostic inspector
+        if (allowDiagnostics && this._diagPickOnce) {
+            this._diagPickOnce = false;
+            try { this._showDiagnosticsFor(target); } catch (e) { try { console.warn('Diagnostics failed:', e); } catch { } }
+            // Restore selection filter if we changed it
+            if (this._diagRestoreFilter) {
+                try { SelectionFilter.restoreAllowedSelectionTypes && SelectionFilter.restoreAllowedSelectionTypes(); } catch { }
+                this._diagRestoreFilter = false;
+            }
+        }
+        // If inspector panel is open, update it immediately for the clicked object
+        if (this._inspectorOpen) {
+            try { this._updateInspectorFor(target); } catch (e) { try { console.warn('Inspector update failed:', e); } catch { } }
+        }
+        const metadataPanel = this.__metadataPanelController;
+        if (metadataPanel && typeof metadataPanel.handleSelection === 'function') {
+            try { metadataPanel.handleSelection(target); }
+            catch (e) { try { console.warn('Metadata panel update failed:', e); } catch { } }
+        }
+        if (triggerOnClick && typeof target.onClick === 'function') {
+            try { target.onClick(); } catch { }
+        }
+    }
+
+    _clearSelectionOverlayTimer() {
+        if (this._selectionOverlayTimer) {
+            clearTimeout(this._selectionOverlayTimer);
+            this._selectionOverlayTimer = null;
+        }
+        this._pendingSelectionOverlay = null;
+    }
+
+    _isAssemblyChildSelection(obj) {
+        if (!obj) return false;
+        const type = (obj.type || '').toUpperCase();
+        const isRefType = type === SelectionFilter.FACE || type === SelectionFilter.EDGE || type === SelectionFilter.VERTEX || type === 'POINTS';
+        if (!isRefType) return false;
+        const findAncestorOfType = (node, targetType) => {
+            const norm = (t) => (t || '').toUpperCase();
+            let cur = node?.parent || null;
+            while (cur) {
+                if (norm(cur.type) === norm(targetType)) return cur;
+                cur = cur.parent || null;
+            }
+            return null;
+        };
+        const solid = findAncestorOfType(obj, SelectionFilter.SOLID);
+        if (!solid) return false;
+        const parent = solid.parent || null;
+        if (!parent) return false;
+        const normParentType = (parent.type || '').toUpperCase();
+        const isComponent = normParentType === SelectionFilter.COMPONENT || normParentType === 'COMPONENT' || parent.isAssemblyComponent;
+        return !!isComponent;
+    }
+
+    _shouldDelaySelectionOverlay(candidates = []) {
+        try {
+            const sfAll = SelectionFilter.allowedSelectionTypes === SelectionFilter.ALL;
+            if (!sfAll) return false;
+            const top = Array.isArray(candidates) && candidates.length ? candidates[0].target : null;
+            return this._isAssemblyChildSelection(top);
+        } catch {
+            return false;
+        }
+    }
+
+    _scheduleSelectionOverlay(event, candidates) {
+        this._clearSelectionOverlayTimer();
+        const shouldDelay = this._shouldDelaySelectionOverlay(candidates);
+        if (!shouldDelay) {
+            this._showSelectionOverlay(event, candidates);
+            return;
+        }
+        const eventSnapshot = event ? { clientX: event.clientX, clientY: event.clientY } : null;
+        this._pendingSelectionOverlay = { event: eventSnapshot, candidates };
+        this._selectionOverlayTimer = setTimeout(() => {
+            this._selectionOverlayTimer = null;
+            const pending = this._pendingSelectionOverlay;
+            this._pendingSelectionOverlay = null;
+            if (pending) this._showSelectionOverlay(pending.event, pending.candidates);
+        }, 300);
+    }
+
+    _describeSelectionCandidate(obj) {
+        if (!obj) return 'Selection';
+        const name = (obj.name && String(obj.name).trim()) ? String(obj.name).trim() : null;
+        const type = obj.type || 'object';
+        return name || type;
+    }
+
+    _showSelectionOverlay(event, candidates) {
+        this._clearSelectionOverlayTimer();
+        this._hideSelectionOverlay();
+        if (!Array.isArray(candidates) || candidates.length === 0) return;
+
+        const wrap = document.createElement('div');
+        wrap.className = 'selection-picker';
+        wrap.classList.add('is-hovered');
+        const title = document.createElement('div');
+        title.className = 'selection-picker__title selection-picker__handle';
+        title.textContent = 'Select an object';
+        const headerRow = document.createElement('div');
+        headerRow.className = 'selection-picker__header';
+        headerRow.appendChild(title);
+        const clearBtn = document.createElement('button');
+        clearBtn.type = 'button';
+        clearBtn.textContent = 'Clear Selection';
+        clearBtn.className = 'selection-picker__clear';
+        clearBtn.addEventListener('click', (ev) => {
+            ev.stopPropagation();
+            ev.preventDefault();
+            try {
+                const scene = this.partHistory?.scene || this.scene;
+                if (scene) SelectionFilter.unselectAll(scene);
+            } catch { }
+            this._hideSelectionOverlay();
+        });
+        headerRow.appendChild(clearBtn);
+        wrap.appendChild(headerRow);
+
+        const overlayState = { wrap, drag: { active: false }, peekTimer: null };
+        const triggerPeek = () => {
+            if (overlayState.peekTimer) {
+                clearTimeout(overlayState.peekTimer);
+                overlayState.peekTimer = null;
+            }
+            try { wrap.style.opacity = '0.8'; } catch { }
+            overlayState.peekTimer = setTimeout(() => {
+                try { wrap.style.opacity = ''; } catch { }
+                overlayState.peekTimer = null;
+            }, 500);
+        };
+
+        const list = document.createElement('div');
+        list.className = 'selection-picker__list';
+        const listMetrics = { itemHeight: 0, gap: 0, paddingTop: 0 };
+        const readListStyles = () => {
+            try {
+                const styles = getComputedStyle(list);
+                const gap = parseFloat(styles.rowGap || styles.gap || '0') || 0;
+                const paddingTop = parseFloat(styles.paddingTop || '0') || 0;
+                listMetrics.gap = gap;
+                listMetrics.paddingTop = paddingTop;
+            } catch { }
+        };
+        const ensureItemMetrics = () => {
+            if (!listMetrics.gap && !listMetrics.paddingTop) readListStyles();
+            if (listMetrics.itemHeight) return listMetrics.itemHeight;
+            const first = list.querySelector('.selection-picker__item');
+            if (!first) return 0;
+            const rect = first.getBoundingClientRect();
+            listMetrics.itemHeight = rect.height || first.offsetHeight || 0;
+            return listMetrics.itemHeight;
+        };
+        const updateListPadding = () => {
+            readListStyles();
+            const first = list.querySelector('.selection-picker__item');
+            if (!first) return;
+            const listRect = list.getBoundingClientRect();
+            const rect = first.getBoundingClientRect();
+            listMetrics.itemHeight = rect.height || listMetrics.itemHeight || 0;
+            const padding = Math.max(0, Math.round(listRect.height - listMetrics.paddingTop - rect.height));
+            list.style.paddingBottom = `${padding}px`;
+        };
+        candidates.forEach((entry) => {
+            if (!entry?.target) return;
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'selection-picker__item';
+            const line = document.createElement('div');
+            line.className = 'selection-picker__line';
+            const typeSpan = document.createElement('div');
+            typeSpan.className = 'selection-picker__type';
+            typeSpan.textContent = String(entry.target.type || '').toUpperCase() || 'OBJECT';
+            const nameSpan = document.createElement('div');
+            nameSpan.className = 'selection-picker__name';
+            nameSpan.textContent = entry.label;
+            line.appendChild(typeSpan);
+            line.appendChild(nameSpan);
+            btn.appendChild(line);
+            btn.addEventListener('mouseenter', () => {
+                triggerPeek();
+                try { SelectionFilter.setHoverObject(entry.target, { ignoreFilter: true }); } catch { }
+            });
+            btn.addEventListener('mouseleave', () => {
+                try { SelectionFilter.clearHover(); } catch { }
+            });
+            btn.addEventListener('click', (ev) => {
+                ev.stopPropagation();
+                ev.preventDefault?.();
+                try {
+                    console.log('Selection picker selected:', {
+                        type: entry.target?.type,
+                        label: entry.label,
+                        target: entry.target,
+                    });
+                } catch { /* ignore */ }
+                this._hideSelectionOverlay();
+                this._applySelectionTarget(entry.target);
+            });
+            list.appendChild(btn);
+        });
+        const onWheelSnapScroll = (ev) => {
+            try { ev.preventDefault(); ev.stopPropagation(); } catch { }
+            if (!list || list.children.length === 0) return;
+            const dir = Math.sign(ev.deltaY || 0);
+            if (!dir) return;
+            const itemHeight = ensureItemMetrics();
+            if (!itemHeight) return;
+            const step = Math.max(1, Math.round(itemHeight + listMetrics.gap));
+            const maxScroll = Math.max(0, list.scrollHeight - list.clientHeight);
+            const next = Math.min(maxScroll, Math.max(0, list.scrollTop + (dir * step)));
+            list.scrollTo({ top: next });
+        };
+        list.addEventListener('wheel', onWheelSnapScroll, { passive: false });
+        wrap.appendChild(list);
+
+        const startX = event?.clientX ?? (window.innerWidth / 2);
+        const startY = event?.clientY ?? (window.innerHeight / 2);
+        wrap.style.left = `${startX}px`;
+        wrap.style.top = `${startY}px`;
+
+        document.body.appendChild(wrap);
+
+        const adjustWithinViewport = () => {
+            const bounds = wrap.getBoundingClientRect();
+            const firstItem = wrap.querySelector('.selection-picker__item');
+            let nextLeft = startX;
+            let nextTop = startY;
+            if (firstItem) {
+                const firstBounds = firstItem.getBoundingClientRect();
+                // Align pointer roughly to the center of the first item so the cursor is directly on it.
+                const offsetX = (firstBounds.left - bounds.left) + (firstBounds.width / 2);
+                const offsetY = (firstBounds.top - bounds.top) + (firstBounds.height / 2);
+                nextLeft = startX - offsetX;
+                nextTop = startY - offsetY;
+            }
+            const margin = 12;
+            const width = bounds.width;
+            const height = bounds.height;
+            if (nextLeft + width > window.innerWidth - margin) nextLeft = Math.max(margin, window.innerWidth - width - margin);
+            if (nextTop + height > window.innerHeight - margin) nextTop = Math.max(margin, window.innerHeight - height - margin);
+            if (nextLeft < margin) nextLeft = margin;
+            if (nextTop < margin) nextTop = margin;
+            wrap.style.left = `${nextLeft}px`;
+            wrap.style.top = `${nextTop}px`;
+        };
+        // Wait a frame so layout is accurate before aligning and padding the list.
+        requestAnimationFrame(() => {
+            updateListPadding();
+            adjustWithinViewport();
+        });
+
+        const onEnter = () => {
+            wrap.classList.add('is-hovered');
+        };
+        const onLeave = () => {
+            if (!overlayState.drag.active) wrap.classList.remove('is-hovered');
+        };
+
+        const onDragMove = (ev) => {
+            if (!overlayState.drag.active) return;
+            const margin = 12;
+            const bounds = wrap.getBoundingClientRect();
+            const width = bounds.width;
+            const height = bounds.height;
+            let nextLeft = ev.clientX - overlayState.drag.offsetX;
+            let nextTop = ev.clientY - overlayState.drag.offsetY;
+            if (nextLeft + width > window.innerWidth - margin) nextLeft = Math.max(margin, window.innerWidth - width - margin);
+            if (nextTop + height > window.innerHeight - margin) nextTop = Math.max(margin, window.innerHeight - height - margin);
+            if (nextLeft < margin) nextLeft = margin;
+            if (nextTop < margin) nextTop = margin;
+            wrap.style.left = `${nextLeft}px`;
+            wrap.style.top = `${nextTop}px`;
+        };
+
+        const stopDrag = (ev) => {
+            if (!overlayState.drag.active) return;
+            overlayState.drag.active = false;
+            wrap.classList.remove('dragging');
+            if (!wrap.matches(':hover')) wrap.classList.remove('is-hovered');
+            window.removeEventListener('pointermove', onDragMove, { passive: true });
+            window.removeEventListener('pointerup', stopDrag, { passive: true, capture: true });
+            if (ev) { try { ev.stopPropagation(); } catch { } }
+        };
+
+        const onDragStart = (ev) => {
+            if (ev.button !== 0) return;
+            ev.preventDefault();
+            ev.stopPropagation();
+            const rect = wrap.getBoundingClientRect();
+            overlayState.drag.active = true;
+            overlayState.drag.offsetX = ev.clientX - rect.left;
+            overlayState.drag.offsetY = ev.clientY - rect.top;
+            wrap.classList.add('dragging');
+            wrap.classList.add('is-hovered');
+            window.addEventListener('pointermove', onDragMove, { passive: true });
+            window.addEventListener('pointerup', stopDrag, { passive: true, capture: true });
+        };
+
+        title.addEventListener('pointerdown', onDragStart);
+        wrap.addEventListener('pointerenter', onEnter);
+        wrap.addEventListener('pointerleave', onLeave);
+
+        const onPointerDown = (ev) => {
+            if (!wrap.contains(ev.target)) this._hideSelectionOverlay();
+        };
+        const onKey = (ev) => {
+            if (ev.key === 'Escape') this._hideSelectionOverlay();
+        };
+        document.addEventListener('pointerdown', onPointerDown, true);
+        document.addEventListener('keydown', onKey, true);
+
+        this._selectionOverlay = {
+            wrap,
+            onPointerDown,
+            onKey,
+            onEnter,
+            onLeave,
+            onDragStart,
+            onDragMove,
+            stopDrag,
+            onWheelRotate: onWheelSnapScroll,
+            list,
+            overlayState,
+        };
+    }
+
+    _hideSelectionOverlay() {
+        const overlay = this._selectionOverlay;
+        if (!overlay) return;
+        this._clearSelectionOverlayTimer();
+        try { overlay.stopDrag?.(); } catch { }
+        document.removeEventListener('pointerdown', overlay.onPointerDown, true);
+        document.removeEventListener('keydown', overlay.onKey, true);
+        try { overlay.wrap.removeEventListener('pointerenter', overlay.onEnter); } catch { }
+        try { overlay.wrap.removeEventListener('pointerleave', overlay.onLeave); } catch { }
+        try { overlay.wrap.querySelector('.selection-picker__handle')?.removeEventListener('pointerdown', overlay.onDragStart); } catch { }
+        try { window.removeEventListener('pointermove', overlay.onDragMove, { passive: true }); } catch { }
+        try { window.removeEventListener('pointerup', overlay.stopDrag, { passive: true, capture: true }); } catch { }
+        try { overlay.list?.removeEventListener('wheel', overlay.onWheelRotate, { passive: false }); } catch { }
+        try {
+            if (overlay.overlayState?.peekTimer) {
+                clearTimeout(overlay.overlayState.peekTimer);
+                overlay.overlayState.peekTimer = null;
+            }
+        } catch { }
+        try { overlay.wrap.style.opacity = ''; } catch { }
+        try { overlay.wrap.remove(); } catch { }
+        this._selectionOverlay = null;
+        try { SelectionFilter.clearHover(); } catch { }
+        // Restore hover state based on the last pointer position on the canvas
+        try {
+            if (this._lastPointerEvent) this._updateHover(this._lastPointerEvent);
+        } catch { }
+    }
+
+    // ----------------------------------------
+    // Internal: Event Handlers
+    // ----------------------------------------
+    _onPointerMove(event) {
+        if (this._disposed) return;
+        // Keep last pointer position and refresh hover
+        this._lastPointerEvent = event;
+        // If hovering over the view cube, avoid main-scene hover
+        try {
+            if (this.viewCube && this.viewCube.isEventInside(event)) return;
+        } catch { }
+        // If hovering TransformControls gizmo, skip scene hover handling
+        try {
+            const ax = (typeof window !== 'undefined') ? (window.__BREP_activeXform || null) : null;
+            if (ax && typeof ax.isOver === 'function' && ax.isOver(event)) return;
+        } catch { }
+        this._updateHover(event);
+    }
+
+    _onPointerDown(event) {
+        if (this._disposed) return;
+        this._hideSelectionOverlay();
+        // If pointer is over TransformControls gizmo, let it handle the interaction
+        try {
+            const ax = (typeof window !== 'undefined') ? (window.__BREP_activeXform || null) : null;
+            if (ax && typeof ax.isOver === 'function' && ax.isOver(event)) { try { event.preventDefault(); } catch { }; return; }
+        } catch { }
+        this._clearSelectionOverlayTimer();
+        try {
+            if (this._isEventOverRenderer(event)) {
+                this._lastCanvasPointerDownAt = Date.now();
+            }
+        } catch { }
+        // If pressing in the view cube region, disable controls for this gesture
+        try {
+            this._cubeActive = !!(this.viewCube && this.viewCube.isEventInside(event));
+        } catch { this._cubeActive = false; }
+        this._pointerDown = true;
+        this._downButton = event.button;
+        this._downPos.x = event.clientX;
+        this._downPos.y = event.clientY;
+        this.controls.enabled = !this._cubeActive;
+        // Prevent default to avoid unwanted text selection/scroll on drag
+        try { event.preventDefault(); } catch { }
+    }
+
+    _onPointerUp(event) {
+        if (this._disposed) return;
+        // If releasing over TransformControls gizmo, skip scene selection
+        try {
+            const ax = (typeof window !== 'undefined') ? (window.__BREP_activeXform || null) : null;
+            if (ax && typeof ax.isOver === 'function' && ax.isOver(event)) { try { event.preventDefault(); } catch { }; return; }
+        } catch { }
+        // If the gesture began in the cube, handle click there exclusively
+        if (this._cubeActive) {
+            try { if (this.viewCube && this.viewCube.handleClick(event)) { this._cubeActive = false; return; } } catch { }
+            this._cubeActive = false;
+        }
+        // Click selection if within drag threshold and left button
+        const dx = Math.abs(event.clientX - this._downPos.x);
+        const dy = Math.abs(event.clientY - this._downPos.y);
+        const moved = (dx + dy) > this._dragThreshold;
+        if (this._pointerDown && this._downButton === 0 && !moved) {
+            this._selectAt(event);
+        }
+        // Reset flags and keep controls enabled
+        this._pointerDown = false;
+        this.controls.enabled = true;
+        void event;
+    }
+
+    _onContextMenu(event) {
+        // No interactive targets; allow default context menu
+        void event;
+    }
+
+    _onKeyDown(event) {
+        if (this._disposed) return;
+        const target = event?.target || null;
+        const tag = target?.tagName ? String(target.tagName).toLowerCase() : '';
+        const isEditable = !!(
+            target
+            && (target.isContentEditable
+                || tag === 'input'
+                || tag === 'textarea'
+                || tag === 'select')
+        );
+        const key = (event?.key || '').toLowerCase();
+        const isMod = !!(event?.ctrlKey || event?.metaKey);
+        const isUndo = isMod && !event?.altKey && key === 'z' && !event?.shiftKey;
+        const isRedo = isMod && !event?.altKey && (key === 'y' || (event?.shiftKey && key === 'z'));
+        if ((isUndo || isRedo) && !isEditable) {
+            if (this._imageEditorActive) return;
+            try {
+                if (this._sketchMode && typeof this._sketchMode.undo === 'function' && typeof this._sketchMode.redo === 'function') {
+                    if (isUndo) this._sketchMode.undo();
+                    else this._sketchMode.redo();
+                } else if (this.partHistory) {
+                    void this._runFeatureHistoryUndoRedo(isRedo ? 'redo' : 'undo');
+                }
+                try { event.preventDefault(); } catch { }
+                try { event.stopImmediatePropagation(); } catch { }
+            } catch { }
+            return;
+        }
+        const k = event?.key || event?.code || '';
+        if (k === 'Escape' || k === 'Esc') {
+            try { this._hideSelectionOverlay(); } catch { }
+            try {
+                const scene = this.partHistory?.scene || this.scene;
+                if (scene) {
+                    SelectionFilter.unselectAll(scene);
+                    SelectionFilter.restoreAllowedSelectionTypes();
+                }
+            } catch { }
+        }
+    }
+
+    _findOwningComponent(obj) {
+        let cur = obj;
+        while (cur) {
+            if (cur.isAssemblyComponent || cur.type === SelectionFilter.COMPONENT || cur.type === 'COMPONENT') {
+                return cur;
+            }
+            cur = cur.parent;
+        }
+        return null;
+    }
+
+    _stopComponentTransformSession() {
+        const session = this._componentTransformSession;
+        if (!session) return;
+        const { controls, helper, target, changeHandler, dragHandler, objectChangeHandler, globalState } = session;
+
+        try { controls?.removeEventListener('change', changeHandler); } catch { }
+        try { controls?.removeEventListener('dragging-changed', dragHandler); } catch { }
+        try { controls?.removeEventListener('objectChange', objectChangeHandler); } catch { }
+
+        try { controls?.detach?.(); } catch { }
+
+        if (this.scene) {
+            try { if (controls && controls.isObject3D) this.scene.remove(controls); } catch { }
+            try { if (helper && helper.isObject3D) this.scene.remove(helper); } catch { }
+            try { if (target && target.isObject3D) this.scene.remove(target); } catch { }
+        }
+
+        try { controls?.dispose?.(); } catch { }
+
+        try {
+            if (window.__BREP_activeXform === globalState) {
+                window.__BREP_activeXform = null;
+            }
+        } catch { }
+
+        this._componentTransformSession = null;
+        try { if (this.controls) this.controls.enabled = true; } catch { }
+        try { this.render(); } catch { }
+    }
+
+    _activateComponentTransform(component) {
+        if (!component) return;
+        if (component.fixed) return;
+        const TCctor = CombinedTransformControls;
+        if (!TCctor) {
+            console.warn('[Viewer] TransformControls unavailable; cannot activate component gizmo.');
+            return;
+        }
+
+        this._stopComponentTransformSession();
+        try { if (SchemaForm && typeof SchemaForm.__stopGlobalActiveXform === 'function') SchemaForm.__stopGlobalActiveXform(); } catch { }
+
+        const controls = new TCctor(this.camera, this.renderer.domElement);
+        const initialMode = 'translate';
+        try { controls.setMode(initialMode); } catch { controls.mode = initialMode; }
+        try { controls.showX = controls.showY = controls.showZ = true; } catch { }
+
+        const target = new THREE.Object3D();
+        target.name = `ComponentTransformTarget:${component.name || component.uuid || ''}`;
+
+        try { this.scene.updateMatrixWorld?.(true); } catch { }
+        try { component.updateMatrixWorld?.(true); } catch { }
+
+        const box = new THREE.Box3();
+        const center = box.setFromObject(component).isEmpty()
+            ? component.getWorldPosition(new THREE.Vector3())
+            : box.getCenter(new THREE.Vector3());
+        target.position.copy(center);
+
+        const componentWorldQuat = component.getWorldQuaternion(new THREE.Quaternion());
+        target.quaternion.copy(componentWorldQuat);
+
+        const parent = component.parent || this.scene;
+        try { parent?.updateMatrixWorld?.(true); } catch { }
+
+        const offsetLocal = component.getWorldPosition(new THREE.Vector3()).sub(center);
+        const initialTargetQuatInv = componentWorldQuat.clone().invert();
+        offsetLocal.applyQuaternion(initialTargetQuatInv);
+
+        const parentInverse = new THREE.Matrix4();
+        if (parent && parent.isObject3D) {
+            parentInverse.copy(parent.matrixWorld).invert();
+        } else {
+            parentInverse.identity();
+        }
+
+        this.scene.add(target);
+        try { controls.attach(target); } catch { }
+        try {
+            controls.userData = controls.userData || {};
+            controls.userData.excludeFromFit = true;
+            this.scene.add(controls);
+        } catch { }
+
+        let helper = null;
+        try {
+            helper = typeof controls.getHelper === 'function' ? controls.getHelper() : null;
+            if (helper && helper.isObject3D) {
+                helper.userData = helper.userData || {};
+                helper.userData.excludeFromFit = true;
+                this.scene.add(helper);
+            }
+        } catch { helper = null; }
+
+        const markOverlay = (obj) => {
+            if (!obj || !obj.isObject3D) return;
+            const apply = (node) => {
+                if (!node || !node.isObject3D) return;
+                const ud = node.userData || (node.userData = {});
+                if (ud.__brepOverlayHook) return;
+                const prev = node.onBeforeRender;
+                node.onBeforeRender = function (renderer, scene, camera, geometry, material, group) {
+                    try { renderer.clearDepth(); } catch { }
+                    if (typeof prev === 'function') {
+                        prev.call(this, renderer, scene, camera, geometry, material, group);
+                    }
+                };
+                ud.__brepOverlayHook = true;
+            };
+            apply(obj);
+            try { obj.traverse((child) => apply(child)); } catch { }
+        };
+        try { markOverlay(controls); } catch { }
+        try { markOverlay(helper); } catch { }
+        try { markOverlay(controls?._gizmo); } catch { }
+        try { markOverlay(controls?.gizmo); } catch { }
+
+        const scratchTargetWorld = new THREE.Vector3();
+        const scratchComponentWorld = new THREE.Vector3();
+        const scratchLocal = new THREE.Vector3();
+        const scratchRotatedOffset = new THREE.Vector3();
+        const scratchTargetQuat = new THREE.Quaternion();
+        const scratchParentQuat = new THREE.Quaternion();
+        const scratchParentQuatInv = new THREE.Quaternion();
+        const scratchComponentQuat = new THREE.Quaternion();
+
+        const updateComponentTransform = (commit = false) => {
+            try {
+                try { this.scene.updateMatrixWorld?.(true); } catch { }
+                try { target.updateMatrixWorld?.(true); } catch { }
+                if (parent && parent.isObject3D) {
+                    try { parent.updateMatrixWorld?.(true); } catch { }
+                    parentInverse.copy(parent.matrixWorld).invert();
+                    parent.getWorldQuaternion(scratchParentQuat);
+                    scratchParentQuatInv.copy(scratchParentQuat).invert();
+                } else {
+                    parentInverse.identity();
+                    scratchParentQuat.set(0, 0, 0, 1);
+                    scratchParentQuatInv.copy(scratchParentQuat);
+                }
+
+                target.getWorldPosition(scratchTargetWorld);
+                target.getWorldQuaternion(scratchTargetQuat);
+
+                scratchRotatedOffset.copy(offsetLocal).applyQuaternion(scratchTargetQuat);
+                scratchComponentWorld.copy(scratchTargetWorld).add(scratchRotatedOffset);
+                scratchLocal.copy(scratchComponentWorld);
+                if (parent && parent.isObject3D) {
+                    scratchLocal.applyMatrix4(parentInverse);
+                }
+                component.position.copy(scratchLocal);
+                if (parent && parent.isObject3D) {
+                    scratchComponentQuat.copy(scratchParentQuatInv).multiply(scratchTargetQuat);
+                    component.quaternion.copy(scratchComponentQuat);
+                } else {
+                    component.quaternion.copy(scratchTargetQuat);
+                }
+                component.updateMatrixWorld?.(true);
+                this.render();
+                if (commit && this.partHistory && typeof this.partHistory.syncAssemblyComponentTransforms === 'function') {
+                    this.partHistory.syncAssemblyComponentTransforms();
+                }
+            } catch (err) {
+                console.warn('[Viewer] Failed to apply transform to component:', err);
+            }
+        };
+
+        const changeHandler = () => { updateComponentTransform(false); };
+        const dragHandler = (ev) => {
+            const dragging = !!(ev && ev.value);
+            try { if (this.controls) this.controls.enabled = !dragging; } catch { }
+            if (!dragging) updateComponentTransform(true);
+        };
+        const objectChangeHandler = () => {
+            if (!controls || controls.dragging) return;
+            updateComponentTransform(true);
+        };
+
+        controls.addEventListener('change', changeHandler);
+        controls.addEventListener('dragging-changed', dragHandler);
+        try { controls.addEventListener('objectChange', objectChangeHandler); } catch { }
+
+        const isOver = (ev) => {
+            try {
+                if (!ev) return false;
+                const ndc = this._getPointerNDC(ev);
+                this.raycaster.setFromCamera(ndc, this.camera);
+                const mode = (typeof controls.getMode === 'function') ? controls.getMode() : (controls.mode || 'translate');
+                const giz = controls._gizmo || controls.gizmo || null;
+                const pickRoot = (giz && giz.picker) ? (giz.picker[mode] || giz.picker.translate || giz.picker.rotate || giz.picker.scale) : giz;
+                const root = pickRoot || giz || helper || controls;
+                if (!root) return false;
+                const hits = this.raycaster.intersectObject(root, true) || [];
+                return hits.length > 0;
+            } catch { return false; }
+        };
+
+        const updateForCamera = () => {
+            try {
+                if (typeof controls.update === 'function') controls.update();
+                else controls.updateMatrixWorld(true);
+            } catch { }
+        };
+
+        const globalState = {
+            controls,
+            viewer: this,
+            target,
+            isOver,
+            updateForCamera,
+        };
+        try { window.__BREP_activeXform = globalState; } catch { }
+
+        const sessionMode = (typeof controls.getMode === 'function') ? controls.getMode() : (controls.mode || initialMode);
+
+        this._componentTransformSession = {
+            component,
+            controls,
+            helper,
+            target,
+            changeHandler,
+            dragHandler,
+            objectChangeHandler,
+            globalState,
+            mode: sessionMode,
+        };
+
+        updateComponentTransform(false);
+        this.render();
+    }
+
+    _onGlobalDoubleClick(event) {
+        if (this._disposed) return;
+        const lastDownAge = Date.now() - (this._lastCanvasPointerDownAt || 0);
+        // Only honor double-clicks that are closely preceded by a canvas pointerdown,
+        // even if the second click lands on the selection popover.
+        if (!Number.isFinite(lastDownAge) || lastDownAge > 750) return;
+        this._clearSelectionOverlayTimer();
+        this._onDoubleClick(event);
+    }
+
+    _onDoubleClick(event) {
+        if (this._disposed) return;
+        if (event && event.__brepHandledDblclick) return;
+        if (event) event.__brepHandledDblclick = true;
+        try { event?.preventDefault?.(); } catch { }
+        try {
+            this._clearSelectionOverlayTimer();
+            this._hideSelectionOverlay();
+        } catch { }
+        try {
+            const ax = window.__BREP_activeXform;
+            if (ax && typeof ax.isOver === 'function' && ax.isOver(event)) return;
+        } catch { }
+
+        const pick = this._pickAtEvent(event, { ignoreSelectionFilter: true, allowAnyAllowedType: true });
+        const component = pick && pick.target ? this._findOwningComponent(pick.target) : null;
+
+        if (!component) {
+            this._stopComponentTransformSession();
+            return;
+        }
+
+        if (component.fixed) {
+            try {
+                if (typeof this._toast === 'function') this._toast('Component is fixed and cannot be moved.');
+            } catch { }
+            return;
+        }
+
+        const session = this._componentTransformSession;
+        if (session && session.component === component) {
+            const controls = session.controls;
+            const currentMode = (typeof controls?.getMode === 'function') ? controls.getMode() : (controls?.mode || session.mode || 'translate');
+            if (currentMode === 'translate') {
+                const nextMode = 'rotate';
+                try { controls?.setMode(nextMode); } catch { if (controls) controls.mode = nextMode; }
+                session.mode = nextMode;
+                try { session.globalState?.updateForCamera?.(); } catch { }
+                try { this.render(); } catch { }
+                return;
+            }
+            if (currentMode === 'rotate') {
+                this._stopComponentTransformSession();
+                return;
+            }
+            this._stopComponentTransformSession();
+            return;
+        }
+
+        this._activateComponentTransform(component);
+    }
+
+    // ----------------------------------------
+    // Diagnostics (one‑shot picker)
+    // ----------------------------------------
+    enableDiagnosticPick() {
+        this._diagPickOnce = true;
+        // Do not modify the SelectionFilter; inspect will honor the current filter.
+        try { this._toast('Click an item to inspect'); } catch { }
+    }
+
+    // ----------------------------------------
+    // Inspector panel (toggle + update-on-click)
+    // ----------------------------------------
+    toggleInspectorPanel() { this._inspectorOpen ? this._closeInspectorPanel() : this._openInspectorPanel(); }
+    _openInspectorPanel() {
+        if (this._inspectorOpen) return;
+        this._ensureInspectorPanel();
+        this._inspectorEl.style.display = 'flex';
+        this._inspectorOpen = true;
+        // Placeholder message until user clicks an object
+        try {
+            this._setInspectorPlaceholder('Click an object in the scene to inspect.');
+        } catch { }
+    }
+    _closeInspectorPanel() {
+        if (!this._inspectorOpen) return;
+        this._inspectorOpen = false;
+        try { this._inspectorEl.style.display = 'none'; } catch { }
+    }
+    _ensureInspectorPanel() {
+        if (this._inspectorEl) return;
+        // Create a floating window anchored bottom-left, resizable and draggable
+        const height = Math.max(260, Math.floor((window?.innerHeight || 800) * 0.7));
+        const fw = new FloatingWindow({
+            title: 'Inspector',
+            width: 520,
+            height,
+            x: 12,
+            bottom: 12,
+            shaded: false,
+            onClose: () => this._closeInspectorPanel(),
+        });
+        // Header actions
+        const btnTriangles = document.createElement('button');
+        btnTriangles.className = 'fw-btn';
+        btnTriangles.textContent = 'Triangle Debugger';
+        btnTriangles.title = 'Open triangle debugger for the current selection';
+        btnTriangles.addEventListener('click', () => {
+            try { this._openTriangleDebugger(); }
+            catch (e) { try { console.warn('Triangle debugger failed:', e); } catch { } }
+        });
+        fw.addHeaderAction(btnTriangles);
+
+        const btnDownload = document.createElement('button');
+        btnDownload.className = 'fw-btn';
+        btnDownload.textContent = 'Download JSON';
+        btnDownload.addEventListener('click', () => {
+            try {
+                const json = this._lastInspectorDownload ? this._lastInspectorDownload() : (this._lastInspectorJSON || '{}');
+                const blob = new Blob([json], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a'); a.href = url; a.download = 'diagnostics.json'; document.body.appendChild(a); a.click();
+                setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 0);
+            } catch { }
+        });
+        fw.addHeaderAction(btnDownload);
+
+        // Wire content area
+        const content = document.createElement('div');
+        content.style.display = 'block';
+        content.style.width = '100%';
+        content.style.height = '100%';
+        fw.content.appendChild(content);
+
+        this._inspectorFW = fw;
+        this._inspectorEl = fw.root;
+        this._inspectorContent = content;
+        this._lastInspectorDownload = null;
+        this._lastInspectorJSON = '{}';
+    }
+    _setInspectorPlaceholder(msg) {
+        if (!this._inspectorContent) return;
+        this._inspectorContent.innerHTML = '';
+        const p = document.createElement('div');
+        p.textContent = msg || '';
+        p.style.color = '#9aa4b2';
+        p.style.font = '12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+        p.style.opacity = '0.9';
+        this._inspectorContent.appendChild(p);
+        this._lastInspectorDownload = null;
+        this._lastInspectorJSON = '{}';
+    }
+    _updateInspectorFor(target) {
+        this._ensureInspectorPanel();
+        this._lastInspectorTarget = target || null;
+        this._lastInspectorSolid = this._findParentSolid(target);
+        if (this._triangleDebugger && this._triangleDebugger.isOpen && this._triangleDebugger.isOpen()) {
+            try { this._triangleDebugger.refreshTarget(target); } catch { }
+        }
+        if (!target) { this._setInspectorPlaceholder('Nothing selected.'); return; }
+        try {
+            const { out, downloadFactory } = this._buildDiagnostics(target);
+            this._inspectorContent.innerHTML = '';
+            // Attach object UI tree
+            const ui = generateObjectUI(out, { title: 'Object Inspector', showTypes: true, collapseChildren: true });
+            this._inspectorContent.appendChild(ui);
+            // Persist download factory and raw JSON for header button
+            this._lastInspectorDownload = downloadFactory;
+            this._lastInspectorJSON = JSON.stringify(out, null, 2);
+        } catch (e) {
+            console.warn(e);
+            this._setInspectorPlaceholder('Inspector failed. See console.');
+        }
+    }
+
+    _getTriangleDebugger() {
+        if (!this._triangleDebugger) {
+            this._triangleDebugger = new TriangleDebuggerWindow({ viewer: this });
+        }
+        return this._triangleDebugger;
+    }
+
+    _openTriangleDebugger() {
+        try {
+            const dbg = this._getTriangleDebugger();
+            dbg.openFor(this._lastInspectorTarget || this._lastInspectorSolid || null);
+        } catch (e) {
+            try { console.warn('Triangle debugger open failed:', e); } catch { }
+        }
+    }
+
+    _findParentSolid(obj) {
+        const isSolid = (node) => node && (String(node.type || '').toUpperCase() === 'SOLID');
+        let cur = obj || null;
+        if (cur && cur.parentSolid && isSolid(cur.parentSolid)) return cur.parentSolid;
+        if (cur && cur.userData && cur.userData.parentSolid && isSolid(cur.userData.parentSolid)) return cur.userData.parentSolid;
+        while (cur) {
+            if (isSolid(cur)) return cur;
+            if (cur.parentSolid && isSolid(cur.parentSolid)) return cur.parentSolid;
+            if (cur.userData && cur.userData.parentSolid && isSolid(cur.userData.parentSolid)) return cur.userData.parentSolid;
+            cur = cur.parent || null;
+        }
+        return null;
+    }
+
+    _round(n) { return Math.abs(n) < 1e-12 ? 0 : Number(n.toFixed(6)); }
+
+    _edgePointsWorld(edge) {
+        const pts = [];
+        const v = new THREE.Vector3();
+        const local = edge?.userData?.polylineLocal;
+        const isWorld = !!(edge?.userData?.polylineWorld);
+        if (Array.isArray(local) && local.length >= 2) {
+            if (isWorld) {
+                for (const p of local) pts.push([this._round(p[0]), this._round(p[1]), this._round(p[2])]);
+            } else {
+                for (const p of local) { v.set(p[0], p[1], p[2]).applyMatrix4(edge.matrixWorld); pts.push([this._round(v.x), this._round(v.y), this._round(v.z)]); }
+            }
+        } else {
+            const pos = edge?.geometry?.getAttribute?.('position');
+            if (pos && pos.itemSize === 3) {
+                for (let i = 0; i < pos.count; i++) { v.set(pos.getX(i), pos.getY(i), pos.getZ(i)).applyMatrix4(edge.matrixWorld); pts.push([this._round(v.x), this._round(v.y), this._round(v.z)]); }
+            }
+        }
+        return pts;
+    }
+
+    _buildDiagnostics(target) {
+        const out = { type: target?.type || String(target?.constructor?.name || 'Object'), name: target?.name || null };
+        let downloadFactory = null; // optional closure that returns full JSON text for download
+
+        // Add owning feature information if available
+        try {
+            if (target.owningFeatureID) {
+                out.owningFeatureID = target.owningFeatureID;
+                out._owningFeatureFormatted = `Created by: ${target.owningFeatureID}`;
+            } else if (target.parentSolid && target.parentSolid.owningFeatureID) {
+                out.owningFeatureID = target.parentSolid.owningFeatureID;
+                out._owningFeatureFormatted = `Created by: ${target.parentSolid.owningFeatureID}`;
+            }
+        } catch { }
+
+        if (target.type === 'FACE') {
+            // Triangles via Solid API to ensure correct grouping
+            let solid = target.parent; while (solid && solid.type !== 'SOLID') solid = solid.parent;
+            const faceName = target.userData?.faceName || target.name;
+            try {
+                if (solid && typeof solid.getFace === 'function' && faceName) {
+                    const tris = solid.getFace(faceName) || [];
+                    const mapTri = (t) => ({
+                        indices: Array.isArray(t.indices) ? t.indices : undefined,
+                        p1: t.p1.map(this._round), p2: t.p2.map(this._round), p3: t.p3.map(this._round),
+                        normal: (() => { const a = t.p1, b = t.p2, c = t.p3; const ux = b[0] - a[0], uy = b[1] - a[1], uz = b[2] - a[2]; const vx = c[0] - a[0], vy = c[1] - a[1], vz = c[2] - a[2]; const nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx; const len = Math.hypot(nx, ny, nz) || 1; return [this._round(nx / len), this._round(ny / len), this._round(nz / len)]; })(),
+                        area: (() => { const a = t.p1, b = t.p2, c = t.p3; const ux = b[0] - a[0], uy = b[1] - a[1], uz = b[2] - a[2]; const vx = c[0] - a[0], vy = c[1] - a[1], vz = c[2] - a[2]; const cx = uy * vz - uz * vy, cy = uz * vx - ux * vz, cz = ux * vy - uy * vx; return this._round(0.5 * Math.hypot(cx, cy, cz)); })()
+                    });
+                    const triFull = tris.map(mapTri);
+                    try {
+                        let triMax = 5000; // preview cap
+                        if (typeof window !== 'undefined' && Number.isFinite(window.BREP_DIAG_TRI_MAX_FACE)) triMax = window.BREP_DIAG_TRI_MAX_FACE | 0;
+                        if (triMax < 0) triMax = triFull.length;
+                        const count = Math.min(triFull.length, triMax);
+                        // Make triangles lazy-loaded for performance
+                        out._trianglesSummary = `${triFull.length} triangles (click to expand)`;
+                        out._lazyTriangles = () => triFull.slice(0, count);
+                        if (count < triFull.length) { out.trianglesTruncated = true; out.trianglesTotal = triFull.length; out.trianglesLimit = triMax; }
+                    } catch {
+                        out._trianglesSummary = `${triFull.length} triangles (click to expand)`;
+                        out._lazyTriangles = () => triFull;
+                    }
+                    // Full JSON factory for download
+                    downloadFactory = () => {
+                        const full = JSON.parse(JSON.stringify(out));
+                        full.triangles = triFull;
+                        delete full.trianglesTruncated; delete full.trianglesLimit; delete full.trianglesTotal;
+                        return JSON.stringify(full, null, 2);
+                    };
+                } else {
+                    // Fallback: read triangles from the face geometry
+                    const pos = target.geometry?.getAttribute?.('position');
+                    if (pos) {
+                        const v = new THREE.Vector3();
+                        const triCount = (pos.count / 3) | 0;
+                        const triFull = new Array(triCount);
+                        for (let i = 0; i < triCount; i++) {
+                            v.set(pos.getX(3 * i + 0), pos.getY(3 * i + 0), pos.getZ(3 * i + 0)).applyMatrix4(target.matrixWorld);
+                            const p0 = [this._round(v.x), this._round(v.y), this._round(v.z)];
+                            v.set(pos.getX(3 * i + 1), pos.getY(3 * i + 1), pos.getZ(3 * i + 1)).applyMatrix4(target.matrixWorld);
+                            const p1 = [this._round(v.x), this._round(v.y), this._round(v.z)];
+                            v.set(pos.getX(3 * i + 2), pos.getY(3 * i + 2), pos.getZ(3 * i + 2)).applyMatrix4(target.matrixWorld);
+                            const p2 = [this._round(v.x), this._round(v.y), this._round(v.z)];
+                            const ux = p1[0] - p0[0], uy = p1[1] - p0[1], uz = p1[2] - p0[2];
+                            const vx = p2[0] - p0[0], vy = p2[1] - p0[1], vz = p2[2] - p0[2];
+                            const cx = uy * vz - uz * vy, cy = uz * vx - ux * vz, cz = ux * vy - uy * vx; const len = Math.hypot(cx, cy, cz) || 1;
+                            triFull[i] = { p1: p0, p2: p1, p3: p2, normal: [this._round(cx / len), this._round(cy / len), this._round(cz / len)], area: this._round(0.5 * Math.hypot(cx, cy, cz)) };
+                        }
+                        try {
+                            let triMax = 5000; // preview cap for UI
+                            if (typeof window !== 'undefined' && Number.isFinite(window.BREP_DIAG_TRI_MAX_FACE)) triMax = window.BREP_DIAG_TRI_MAX_FACE | 0;
+                            if (triMax < 0) triMax = triFull.length;
+                            const count = Math.min(triFull.length, triMax);
+                            out.triangles = triFull.slice(0, count);
+                            if (count < triFull.length) { out.trianglesTruncated = true; out.trianglesTotal = triFull.length; out.trianglesLimit = triMax; }
+                        } catch { out.triangles = triFull; }
+                        downloadFactory = () => {
+                            const full = JSON.parse(JSON.stringify(out));
+                            full.triangles = triFull;
+                            delete full.trianglesTruncated; delete full.trianglesLimit; delete full.trianglesTotal;
+                            return JSON.stringify(full, null, 2);
+                        };
+                    }
+                }
+            } catch { }
+
+            // Edges connected to this face
+            try {
+                const edges = Array.isArray(target.edges) ? target.edges : [];
+                out.edges = edges.map(e => ({ name: e.name || null, faces: (Array.isArray(e.faces) ? e.faces.map(f => f?.name || f?.userData?.faceName || null) : []), closedLoop: !!e.closedLoop, length: (typeof e.length === 'function' ? this._round(e.length()) : undefined), points: this._edgePointsWorld(e) }));
+            } catch { out.edges = []; }
+
+            // Lazy-load unique vertices to improve performance
+            try {
+                out._lazyUniqueVertices = () => {
+                    const triangles = (out._lazyTriangles && typeof out._lazyTriangles === 'function') ? out._lazyTriangles() : [];
+                    const uniq = new Map();
+                    for (const tri of triangles) {
+                        for (const P of [tri.p1, tri.p2, tri.p3]) {
+                            const k = `${P[0]},${P[1]},${P[2]}`;
+                            if (!uniq.has(k)) uniq.set(k, P);
+                        }
+                    }
+                    return Array.from(uniq.values());
+                };
+            } catch { }
+
+            // Basic metrics and orientation hints
+            try { const n = target.getAverageNormal?.(); if (n) out.averageNormal = [this._round(n.x), this._round(n.y), this._round(n.z)]; } catch { }
+            try {
+                const a = target.surfaceArea?.();
+                if (Number.isFinite(a)) {
+                    out.surfaceArea = this._round(a);
+                    // Make face area more prominent for easy reference
+                    out._faceAreaFormatted = `${this._round(a)} units²`;
+                }
+            } catch { }
+            try {
+                // Bounding box in world coords from triangle points (lazy-loaded)
+                out._lazyBbox = () => {
+                    const pts = []; for (const tri of out.triangles || []) { pts.push(tri.p1, tri.p2, tri.p3); }
+                    if (pts.length) {
+                        let min = [+Infinity, +Infinity, +Infinity], max = [-Infinity, -Infinity, -Infinity];
+                        for (const p of pts) { if (p[0] < min[0]) min[0] = p[0]; if (p[1] < min[1]) min[1] = p[1]; if (p[2] < min[2]) min[2] = p[2]; if (p[0] > max[0]) max[0] = p[0]; if (p[1] > max[1]) max[1] = p[1]; if (p[2] > max[2]) max[2] = p[2]; }
+                        return { min, max };
+                    }
+                    return null;
+                };
+            } catch { }
+
+            // Neighbor face names
+            try {
+                const faceName = target?.name || target?.userData?.faceName || null;
+                let neighbors = new Set();
+                const solid = target?.parentSolid || target?.userData?.parentSolid || null;
+                if (solid && typeof solid.getBoundaryEdgePolylines === 'function' && faceName) {
+                    const boundaries = solid.getBoundaryEdgePolylines() || [];
+                    for (const poly of boundaries) {
+                        const a = poly?.faceA;
+                        const b = poly?.faceB;
+                        if (a === faceName && b) neighbors.add(b);
+                        else if (b === faceName && a) neighbors.add(a);
+                    }
+                }
+                if (neighbors.size === 0 && solid && Array.isArray(solid.children)) {
+                    // Fallback: use the face's edges to gather neighbor faces in the current scene graph
+                    for (const edge of (target.edges || [])) {
+                        if (!edge || !Array.isArray(edge.faces)) continue;
+                        for (const f of edge.faces) {
+                            const n = f?.name || f?.userData?.faceName || null;
+                            if (n) neighbors.add(n);
+                        }
+                    }
+                }
+                if (faceName) neighbors.delete(faceName);
+                out.neighbors = Array.from(neighbors);
+            } catch { }
+
+            // Boundary loops if available from metadata
+            try {
+                const loops = target.userData?.boundaryLoopsWorld;
+                if (Array.isArray(loops) && loops.length) {
+                    out.boundaryLoops = loops.map(l => ({ isHole: !!l.isHole, pts: (Array.isArray(l.pts) ? l.pts : l).map(p => [this._round(p[0]), this._round(p[1]), this._round(p[2])]) }));
+                }
+            } catch { }
+        } else if (target.type === 'EDGE') {
+            out.closedLoop = !!target.closedLoop;
+            // Lazy-load points to improve performance
+            out._lazyPoints = () => this._edgePointsWorld(target);
+            try {
+                const len = target.length();
+                if (Number.isFinite(len)) {
+                    out.length = this._round(len);
+                    out._edgeLengthFormatted = `${this._round(len)} units`;
+                }
+            } catch { }
+            try { out.faces = (Array.isArray(target.faces) ? target.faces.map(f => f?.name || f?.userData?.faceName || null) : []); } catch { }
+        } else if (target.type === 'SOLID') {
+            try {
+                const faces = target.getFaces?.(false) || [];
+                out.faceCount = faces.length;
+                out.faces = faces.slice(0, 10).map(f => ({ faceName: f.faceName, triangles: (f.triangles || []).length }));
+                if (faces.length > 10) out.facesTruncated = true;
+            } catch { }
+            // Gather geometry arrays (prefer manifold mesh, fallback to authoring arrays)
+            let arrays = null; let usedAuthoring = false;
+            try {
+                const mesh = target.getMesh?.();
+                if (mesh && mesh.vertProperties && mesh.triVerts) {
+                    arrays = { vp: Array.from(mesh.vertProperties), tv: Array.from(mesh.triVerts), ids: Array.isArray(mesh.faceID) ? Array.from(mesh.faceID) : [] };
+                }
+            } catch { }
+            if (!arrays) {
+                try {
+                    const vp = Array.isArray(target._vertProperties) ? target._vertProperties.slice() : [];
+                    const tv = Array.isArray(target._triVerts) ? target._triVerts.slice() : [];
+                    const ids = Array.isArray(target._triIDs) ? target._triIDs.slice() : [];
+                    arrays = { vp, tv, ids }; usedAuthoring = true;
+                } catch { }
+            }
+
+            if (arrays) {
+                const { vp, tv, ids } = arrays;
+                out.meshStats = { vertices: (vp.length / 3) | 0, triangles: (tv.length / 3) | 0, source: usedAuthoring ? 'authoring' : 'manifold' };
+                // BBox
+                let min = [+Infinity, +Infinity, +Infinity], max = [-Infinity, -Infinity, -Infinity];
+                for (let i = 0; i < vp.length; i += 3) { const x = this._round(vp[i]), y = this._round(vp[i + 1]), z = this._round(vp[i + 2]); if (x < min[0]) min[0] = x; if (y < min[1]) min[1] = y; if (z < min[2]) min[2] = z; if (x > max[0]) max[0] = x; if (y > max[1]) max[1] = y; if (z > max[2]) max[2] = z; }
+                if (min[0] !== Infinity) out.bbox = { min, max };
+
+                // Triangles with points (cap output size in preview; full list available via Download)
+                try {
+                    const triCount = (tv.length / 3) | 0;
+                    let triMax = 5000; // sane default for UI
+                    try { if (typeof window !== 'undefined' && Number.isFinite(window.BREP_DIAG_TRI_MAX)) triMax = window.BREP_DIAG_TRI_MAX | 0; } catch { }
+                    if (triMax < 0) triMax = triCount; // -1 => no cap
+                    const count = Math.min(triCount, triMax);
+                    const tris = new Array(count);
+                    const nameOf = (id) => (target._idToFaceName && target._idToFaceName.get) ? target._idToFaceName.get(id) : undefined;
+                    for (let t = 0; t < count; t++) {
+                        const i0 = tv[3 * t + 0] >>> 0, i1 = tv[3 * t + 1] >>> 0, i2 = tv[3 * t + 2] >>> 0;
+                        const p0 = [this._round(vp[3 * i0 + 0]), this._round(vp[3 * i0 + 1]), this._round(vp[3 * i0 + 2])];
+                        const p1 = [this._round(vp[3 * i1 + 0]), this._round(vp[3 * i1 + 1]), this._round(vp[3 * i1 + 2])];
+                        const p2 = [this._round(vp[3 * i2 + 0]), this._round(vp[3 * i2 + 1]), this._round(vp[3 * i2 + 2])];
+                        let faceID = (Array.isArray(ids) && ids.length === triCount) ? ids[t] : undefined;
+                        const ux = p1[0] - p0[0], uy = p1[1] - p0[1], uz = p1[2] - p0[2];
+                        const vx = p2[0] - p0[0], vy = p2[1] - p0[1], vz = p2[2] - p0[2];
+                        const nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx; const nlen = Math.hypot(nx, ny, nz) || 1;
+                        tris[t] = {
+                            index: t,
+                            faceID: faceID,
+                            faceName: faceID !== undefined ? (nameOf(faceID) || null) : null,
+                            p1: p0, p2: p1, p3: p2,
+                            normal: [this._round(nx / nlen), this._round(ny / nlen), this._round(nz / nlen)],
+                            area: this._round(0.5 * nlen)
+                        };
+                    }
+                    // Make triangles lazy-loaded for performance
+                    out._trianglesSummary = `${triCount} triangles (click to expand)`;
+                    out._lazyTriangles = () => tris;
+                    if (count < triCount) { out.trianglesTruncated = true; out.trianglesTotal = triCount; out.trianglesLimit = triMax; }
+                    // Build full JSON on demand
+                    downloadFactory = () => {
+                        const trisFull = new Array(triCount);
+                        const nameOf = (id) => (target._idToFaceName && target._idToFaceName.get) ? target._idToFaceName.get(id) : undefined;
+                        for (let t = 0; t < triCount; t++) {
+                            const i0 = tv[3 * t + 0] >>> 0, i1 = tv[3 * t + 1] >>> 0, i2 = tv[3 * t + 2] >>> 0;
+                            const p0 = [this._round(vp[3 * i0 + 0]), this._round(vp[3 * i0 + 1]), this._round(vp[3 * i0 + 2])];
+                            const p1 = [this._round(vp[3 * i1 + 0]), this._round(vp[3 * i1 + 1]), this._round(vp[3 * i1 + 2])];
+                            const p2 = [this._round(vp[3 * i2 + 0]), this._round(vp[3 * i2 + 1]), this._round(vp[3 * i2 + 2])];
+                            let faceID = (Array.isArray(ids) && ids.length === triCount) ? ids[t] : undefined;
+                            const ux = p1[0] - p0[0], uy = p1[1] - p0[1], uz = p1[2] - p0[2];
+                            const vx = p2[0] - p0[0], vy = p2[1] - p0[1], vz = p2[2] - p0[2];
+                            const nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx; const nlen = Math.hypot(nx, ny, nz) || 1;
+                            trisFull[t] = {
+                                index: t,
+                                faceID: faceID,
+                                faceName: faceID !== undefined ? (nameOf(faceID) || null) : null,
+                                p1: p0, p2: p1, p3: p2,
+                                normal: [this._round(nx / nlen), this._round(ny / nlen), this._round(nz / nlen)],
+                                area: this._round(0.5 * nlen)
+                            };
+                        }
+                        const full = JSON.parse(JSON.stringify(out));
+                        full.triangles = trisFull; delete full.trianglesTruncated; delete full.trianglesLimit; delete full.trianglesTotal;
+                        return JSON.stringify(full, null, 2);
+                    };
+                } catch { }
+
+                // Non-manifold / topology diagnostics (undirected edge uses)
+                try {
+                    const nv = (vp.length / 3) | 0; const NV = BigInt(Math.max(1, nv));
+                    const eKey = (a, b) => { const A = BigInt(a), B = BigInt(b); return A < B ? A * NV + B : B * NV + A; };
+                    const e2c = new Map();
+                    const triCount = (tv.length / 3) | 0;
+                    const degenerate = []; const used = new Uint8Array(nv);
+                    for (let t = 0; t < triCount; t++) {
+                        const i0 = tv[3 * t + 0] >>> 0, i1 = tv[3 * t + 1] >>> 0, i2 = tv[3 * t + 2] >>> 0;
+                        used[i0] = 1; used[i1] = 1; used[i2] = 1;
+                        const ax = vp[3 * i0 + 0], ay = vp[3 * i0 + 1], az = vp[3 * i0 + 2];
+                        const bx = vp[3 * i1 + 0], by = vp[3 * i1 + 1], bz = vp[3 * i1 + 2];
+                        const cx = vp[3 * i2 + 0], cy = vp[3 * i2 + 1], cz = vp[3 * i2 + 2];
+                        const ux = bx - ax, uy = by - ay, uz = bz - az; const vx = cx - ax, vy = cy - ay, vz = cz - az;
+                        const nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx; const area2 = nx * nx + ny * ny + nz * nz;
+                        if (area2 <= 1e-30) degenerate.push(t);
+                        const add = (a, b) => { const k = eKey(Math.min(a, b), Math.max(a, b)); e2c.set(k, (e2c.get(k) || 0) + 1); };
+                        add(i0, i1); add(i1, i2); add(i2, i0);
+                    }
+                    let gt2 = 0, lt2 = 0, eq1 = 0; const exGT = [], exLT = [], exB = [];
+                    for (const [k, c] of e2c.entries()) {
+                        if (c > 2) { gt2++; if (exGT.length < 12) exGT.push({ edge: k.toString(), uses: c }); }
+                        else if (c < 2) { lt2++; if (c === 1) { eq1++; if (exB.length < 12) exB.push({ edge: k.toString(), uses: c }); } else { if (exLT.length < 12) exLT.push({ edge: k.toString(), uses: c }); } }
+                    }
+                    let isolated = 0; for (let i = 0; i < nv; i++) if (!used[i]) isolated++;
+                    const isClosed = (eq1 === 0);
+                    const hasNonManifoldEdges = (gt2 > 0);
+                    const isManifold = isClosed && !hasNonManifoldEdges;
+                    out.topology = {
+                        isManifold,
+                        closed: isClosed,
+                        nonManifoldEdges: hasNonManifoldEdges ? gt2 : 0,
+                        degenerateTriangles: { count: degenerate.length, examples: degenerate.slice(0, 12) },
+                        edges: { gt2, lt2, boundary: eq1, examples_gt2: exGT, examples_lt2: exLT, examples_boundary: exB },
+                        isolatedVertices: isolated
+                    };
+                    // Expose quick boolean at root for easy scanning
+                    out.isManifold = isManifold;
+                } catch { }
+
+                // Faces fallback from authoring arrays when manifold faces unavailable
+                if (!out.faceCount || !Array.isArray(out.faces)) {
+                    try {
+                        const nameOf = (id) => (target._idToFaceName && target._idToFaceName.get) ? target._idToFaceName.get(id) : String(id);
+                        const nameToTris = new Map();
+                        const triCount = (tv.length / 3) | 0;
+                        for (let t = 0; t < triCount; t++) {
+                            const id = Array.isArray(ids) ? ids[t] : undefined;
+                            const name = nameOf(id);
+                            if (!name) continue;
+                            let arr = nameToTris.get(name); if (!arr) { arr = []; nameToTris.set(name, arr); }
+                            arr.push(t);
+                        }
+                        const facesRaw = [];
+                        for (const [faceName, trisIdx] of nameToTris.entries()) facesRaw.push({ faceName, triangles: trisIdx.length });
+                        facesRaw.sort((a, b) => b.triangles - a.triangles);
+                        out.faceCount = facesRaw.length;
+                        out.faces = facesRaw.slice(0, 20);
+                        if (facesRaw.length > 20) out.facesTruncated = true;
+                    } catch { }
+                }
+            }
+
+            try { const vol = target.volume?.(); if (Number.isFinite(vol)) out.volume = this._round(vol); } catch { }
+            try { const area = target.surfaceArea?.(); if (Number.isFinite(area)) out.surfaceArea = this._round(area); } catch { }
+        }
+
+        return { out, downloadFactory: downloadFactory || (() => JSON.stringify(out, null, 2)) };
+    }
+
+    _showDiagnosticsFor(target) {
+        const { out, downloadFactory } = this._buildDiagnostics(target);
+        const json = JSON.stringify(out, null, 2);
+        this._showModal('Selection Diagnostics', json, { onDownload: downloadFactory });
+    }
+
+    _toast(msg, ms = 1200) {
+        try {
+            const el = document.createElement('div');
+            el.textContent = msg;
+            el.style.cssText = 'position:fixed;top:48px;left:50%;transform:translateX(-50%);background:#111c;backdrop-filter:blur(6px);color:#e5e7eb;padding:6px 10px;border:1px solid #2a3442;border-radius:8px;z-index:7;font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;';
+            document.body.appendChild(el);
+            setTimeout(() => { try { el.parentNode && el.parentNode.removeChild(el); } catch { } }, ms);
+        } catch { }
+    }
+
+    _showModal(title, text, opts = {}) {
+        const mask = document.createElement('div');
+        mask.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);z-index:7;display:flex;align-items:center;justify-content:center;';
+        const box = document.createElement('div');
+        box.style.cssText = 'width:min(980px,90vw);height:min(70vh,720px);background:#0b0d10;border:1px solid #2a3442;border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden;';
+        const header = document.createElement('div');
+        header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #1e2430;color:#e5e7eb;font:600 13px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;';
+        header.textContent = title || 'Diagnostics';
+        const close = document.createElement('button');
+        close.textContent = '✕';
+        close.title = 'Close';
+        close.style.cssText = 'margin-left:auto;background:transparent;border:0;color:#9aa4b2;cursor:pointer;font:700 14px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;padding:4px;';
+        const pre = document.createElement('textarea');
+        pre.readOnly = true;
+        pre.value = text || '';
+        pre.style.cssText = 'flex:1;resize:none;background:#0f141a;color:#e5e7eb;border:0;padding:10px 12px;font:12px/1.3 ui-monospace,Menlo,Consolas,monospace;white-space:pre;';
+        const foot = document.createElement('div');
+        foot.style.cssText = 'display:flex;gap:8px;justify-content:flex-end;padding:8px 12px;border-top:1px solid #1e2430;';
+        const copyBtn = document.createElement('button');
+        copyBtn.className = 'mtb-btn';
+        copyBtn.textContent = 'Copy JSON';
+        copyBtn.style.cssText = 'background:#1b2433;border:1px solid #334155;color:#e5e7eb;padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:700;font-size:12px;';
+        copyBtn.addEventListener('click', async () => { try { await navigator.clipboard.writeText(pre.value); copyBtn.textContent = 'Copied!'; setTimeout(() => copyBtn.textContent = 'Copy JSON', 900); } catch { } });
+        const dlBtn = document.createElement('button');
+        dlBtn.className = 'mtb-btn';
+        dlBtn.textContent = 'Download';
+        dlBtn.style.cssText = copyBtn.style.cssText;
+        dlBtn.addEventListener('click', () => {
+            try {
+                const content = (opts && typeof opts.onDownload === 'function') ? opts.onDownload() : pre.value;
+                const blob = new Blob([content], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url; a.download = 'diagnostics.json'; document.body.appendChild(a); a.click();
+                setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 0);
+            } catch { }
+        });
+
+        close.addEventListener('click', () => { try { document.body.removeChild(mask); } catch { } });
+        mask.addEventListener('click', (e) => { if (e.target === mask) { try { document.body.removeChild(mask); } catch { } } });
+
+        header.appendChild(close);
+        box.appendChild(header);
+        box.appendChild(pre);
+        foot.appendChild(copyBtn);
+        foot.appendChild(dlBtn);
+        box.appendChild(foot);
+        mask.appendChild(box);
+        document.body.appendChild(mask);
+    }
+
+    // ----------------------------------------
+    // Internal: Resize & Camera Frustum
+    // ----------------------------------------
+    _getContainerSize() {
+        // Prefer clientWidth/Height so we get the laid-out CSS size.
+        // Fallback to window size if the container hasn't been laid out yet.
+        const w = this.container.clientWidth || window.innerWidth || 1;
+        const h = this.container.clientHeight || window.innerHeight || 1;
+        return { width: Math.max(1, w), height: Math.max(1, h) };
+    }
+
+    // REPLACE: _resizeRendererToDisplaySize()
+    _resizeRendererToDisplaySize() {
+        const { width, height } = this._getContainerSize();
+
+        const isWebGL = !!this.renderer?.isWebGLRenderer;
+        let targetPR = 1;
+        if (isWebGL && typeof this.renderer.getPixelRatio === 'function' && typeof this.renderer.setPixelRatio === 'function') {
+            // Keep DPR current (handles moving across monitors)
+            const dpr = window.devicePixelRatio || 1;
+            targetPR = Math.max(1, Math.min(this.pixelRatio || dpr, dpr));
+            if (this.renderer.getPixelRatio() !== targetPR) {
+                this.renderer.setPixelRatio(targetPR);
+            }
+        }
+
+        if (isWebGL) {
+            // Ensure canvas CSS size matches container (use updateStyle=true)
+            const canvas = this.renderer.domElement;
+            const needResize =
+                canvas.width !== Math.floor(width * targetPR) ||
+                canvas.height !== Math.floor(height * targetPR);
+
+            if (needResize) {
+                this.renderer.setSize(width, height, true);
+            }
+        } else if (this.renderer && typeof this.renderer.setSize === 'function') {
+            this.renderer.setSize(width, height);
+            try {
+                const el = this.renderer.domElement;
+                if (el) {
+                    el.style.width = '100%';
+                    el.style.height = '100%';
+                }
+            } catch { }
+        }
+
+        // Keep fat-line materials in sync with canvas resolution
+        try {
+            const setRes = (mat) => mat && mat.resolution && typeof mat.resolution.set === 'function' && mat.resolution.set(width, height);
+            if (CADmaterials?.EDGE) {
+                setRes(CADmaterials.EDGE.BASE);
+                setRes(CADmaterials.EDGE.SELECTED);
+                if (CADmaterials.EDGE.OVERLAY) setRes(CADmaterials.EDGE.OVERLAY);
+                if (CADmaterials.EDGE.THREAD_SYMBOLIC_MAJOR) setRes(CADmaterials.EDGE.THREAD_SYMBOLIC_MAJOR);
+            }
+            if (CADmaterials?.LOOP) {
+                setRes(CADmaterials.LOOP.BASE);
+                setRes(CADmaterials.LOOP.SELECTED);
+            }
+        } catch { }
+        // Ensure any per-object line materials stay in sync (metadata color clones, etc.)
+        try {
+            const scene = this.partHistory?.scene || this.scene;
+            if (scene) {
+                scene.traverse((obj) => {
+                    const mat = obj?.material;
+                    if (!mat) return;
+                    const apply = (m) => {
+                        if (m?.resolution && typeof m.resolution.set === 'function') {
+                            m.resolution.set(width, height);
+                        }
+                    };
+                    if (Array.isArray(mat)) mat.forEach(apply);
+                    else apply(mat);
+                });
+            }
+        } catch { }
+        // Keep dashed overlays visually consistent in screen space
+        this._updateOverlayDashSpacing(width, height);
+
+        // Update orthographic frustum for new aspect
+        const aspect = width / height || 1;
+        if (this.camera.isOrthographicCamera) {
+            const spanYRaw = Number.isFinite(this.camera.top) && Number.isFinite(this.camera.bottom)
+                ? this.camera.top - this.camera.bottom
+                : (this.viewSize * 2);
+            const spanY = Math.abs(spanYRaw) > 1e-6 ? spanYRaw : (this.viewSize * 2);
+            const centerY = (Number.isFinite(this.camera.top) && Number.isFinite(this.camera.bottom))
+                ? (this.camera.top + this.camera.bottom) * 0.5
+                : 0;
+            const centerX = (Number.isFinite(this.camera.left) && Number.isFinite(this.camera.right))
+                ? (this.camera.left + this.camera.right) * 0.5
+                : 0;
+            const halfHeight = Math.abs(spanY) * 0.5;
+            const halfWidth = halfHeight * aspect;
+            const signY = spanY >= 0 ? 1 : -1;
+            this.camera.top = centerY + halfHeight * signY;
+            this.camera.bottom = centerY - halfHeight * signY;
+            this.camera.left = centerX - halfWidth;
+            this.camera.right = centerX + halfWidth;
+        } else {
+            const v = this.viewSize;
+            this.camera.left = -v * aspect;
+            this.camera.right = v * aspect;
+            this.camera.top = v;
+            this.camera.bottom = -v;
+        }
+        this.camera.updateProjectionMatrix();
+
+        // Optional: let controls know something changed
+        if (this.controls && typeof this.controls.update === 'function') {
+            this.controls.update();
+        }
+    }
+
+    // REPLACE: _onResize()
+    _onResize() {
+        // Coalesce rapid resize events to one rAF
+        if (this._resizeScheduled) return;
+        this._resizeScheduled = true;
+        requestAnimationFrame(() => {
+            this._resizeScheduled = false;
+            this._resizeRendererToDisplaySize();
+            this.render();
+            // Keep overlayed labels/leaders in sync with new viewport
+            try { this._sketchMode?.onCameraChanged?.(); } catch { }
+        });
+    }
+
+    // Re-evaluate hover while the camera animates/moves (e.g., orbiting)
+    _onControlsChange() {
+        if (this._disposed) return;
+        // Re-evaluate hover while camera moves (if we have a last pointer)
+        if (this._lastPointerEvent) this._updateHover(this._lastPointerEvent);
+        // Keep dash lengths stable while zooming/panning/orbiting
+        try {
+            const size = this.renderer?.getSize?.(new THREE.Vector2()) || null;
+            const w = size?.width || this.renderer?.domElement?.clientWidth || 0;
+            const h = size?.height || this.renderer?.domElement?.clientHeight || 0;
+            if (w && h) this._updateOverlayDashSpacing(w, h);
+        } catch { }
+        // While orbiting/panning/zooming, reposition dimension labels/leaders
+        try { this._sketchMode?.onCameraChanged?.(); } catch { }
+    }
+
+    // Compute world-units per screen pixel for current camera and viewport
+    _worldPerPixel(camera, width, height) {
+        if (camera && camera.isOrthographicCamera) {
+            const zoom = (typeof camera.zoom === 'number' && camera.zoom > 0) ? camera.zoom : 1;
+            const wppX = (camera.right - camera.left) / (width * zoom);
+            const wppY = (camera.top - camera.bottom) / (height * zoom);
+            return Math.max(wppX, wppY);
+        }
+        const dist = camera.position.length();
+        const fovRad = (camera.fov * Math.PI) / 180;
+        return (2 * Math.tan(fovRad / 2) * dist) / height;
+    }
+
+    _updateOverlayDashSpacing(width, height) {
+        if (!this.camera || !this.renderer) return;
+        const w = width || this.renderer.domElement?.clientWidth || 0;
+        const h = height || this.renderer.domElement?.clientHeight || 0;
+        if (!w || !h) return;
+        let wpp = null;
+        try { wpp = this._worldPerPixel(this.camera, w, h); } catch { wpp = null; }
+        if (!Number.isFinite(wpp) || wpp <= 0) return;
+        if (this._lastDashWpp && Math.abs(this._lastDashWpp - wpp) < (this._lastDashWpp * 0.0005)) return;
+        this._lastDashWpp = wpp;
+        const dashPx = 10; // desired dash length in pixels
+        const gapPx = 8;  // desired gap length in pixels
+        const setDash = (mat) => {
+            if (!mat) return;
+            try {
+                mat.dashSize = dashPx * wpp;
+                mat.gapSize = gapPx * wpp;
+                mat.needsUpdate = true;
+            } catch { }
+        };
+        try {
+            const edges = CADmaterials?.EDGE || {};
+            setDash(edges.OVERLAY);
+            setDash(edges.THREAD_SYMBOLIC_MAJOR);
+        } catch { }
+    }
+}
+
+
+
+window.DEBUG_MODE = false;
+
+// function for debug logging that checks if we are in debug mode 
+function debugLog(...args) {
+    if (window.DEBUG_MODE) {
+        console.log(...args);
+    }
+}