three-cad-viewer 4.3.8 → 5.0.0

package/dist/rendering/light-detection.d.ts

@@ -3,8 +3,8 @@
  *
  * Analyzes equirectangular HDR pixel data to find dominant light sources
  * (softboxes in studio HDRs, sun in outdoor HDRs). Returns direction,
- * intensity, and color for up to 2 lights, used to create shadow-casting
- * DirectionalLights in Studio mode.
+ * intensity, and color for up to MAX_LIGHTS (currently 1), used to create the
+ * shadow-casting DirectionalLight in Studio mode.
  *
  * Algorithm: downsample to 128x64 luminance grid → threshold at 10x median
  * → flood-fill cluster → convert centroids to 3D direction vectors.
@@ -32,7 +32,7 @@ export interface LightDetectionResult {
  * @param data - Raw pixel data (Uint16Array for HalfFloat, or Float32Array)
  * @param width - HDR image width in pixels
  * @param height - HDR image height in pixels
- * @returns Detection result with up to 2 lights
+ * @returns Detection result with up to MAX_LIGHTS (currently 1) lights
  */
 export declare function detectDominantLights(data: Uint16Array | Float32Array, width: number, height: number): LightDetectionResult;
 /**

package/dist/rendering/material-factory.d.ts

@@ -117,12 +117,12 @@ declare class MaterialFactory {
      * Create a standard material for back faces with PBR properties.
      * Used for polygon rendering where back faces need full shading.
      */
-    createBackFaceStandardMaterial({ color, alpha, polygonOffsetUnits, visible }: BackFaceMaterialOptions, label?: string): THREE.MeshStandardMaterial;
+    createBackFaceStandardMaterial({ color, alpha, polygonOffsetUnits, visible, }: BackFaceMaterialOptions, label?: string): THREE.MeshStandardMaterial;
     /**
      * Create a basic material for back faces (no lighting/PBR).
      * Used for shape rendering where back faces are simple fills.
      */
-    createBackFaceBasicMaterial({ color, alpha, polygonOffsetUnits, visible }: BackFaceMaterialOptions, label?: string): THREE.MeshBasicMaterial;
+    createBackFaceBasicMaterial({ color, alpha, polygonOffsetUnits, visible, }: BackFaceMaterialOptions, label?: string): THREE.MeshBasicMaterial;
     /**
      * Create a basic front face material (no PBR, for simple shapes).
      */
@@ -130,7 +130,7 @@ declare class MaterialFactory {
     /**
      * Create a fat line material (LineMaterial from Three.js examples).
      */
-    createEdgeMaterial({ lineWidth, color, vertexColors, visible, resolution }: EdgeMaterialOptions, label?: string): LineMaterial;
+    createEdgeMaterial({ lineWidth, color, vertexColors, visible, resolution, }: EdgeMaterialOptions, label?: string): LineMaterial;
     /**
      * Create a basic line material for simple edges (e.g., polygon outlines).
      */
@@ -156,22 +156,26 @@ declare class MaterialFactory {
      * @param label - Optional label for GPU tracking
      * @returns Configured MeshPhysicalMaterial (or MeshBasicMaterial if unlit)
      */
-    createStudioMaterial({ materialDef, fallbackColor, fallbackAlpha, textureCache }: StudioMaterialOptions, label?: string): Promise<THREE.MeshPhysicalMaterial | THREE.MeshBasicMaterial>;
+    createStudioMaterial({ materialDef, fallbackColor, fallbackAlpha, textureCache, }: StudioMaterialOptions, label?: string): Promise<THREE.MeshPhysicalMaterial | THREE.MeshBasicMaterial>;
     /**
      * Create a Studio mode material from a threejs-materials format entry.
      *
      * threejs-materials `properties` uses simplified property names (e.g., "color",
      * "roughness", "normal") where each entry has an optional `value` (scalar or
-     * [r,g,b] array in **linear RGB**) and/or `texture` (inline data URI).
+     * [r,g,b] color array) and/or `texture` (inline data URI). Color arrays follow
+     * a per-key color-space convention: `color` is sRGB, the other color keys are
+     * linear (see the COLOR_ARRAY_KEYS handling in the values loop below).
      *
      * @param values - Scalar PBR values from threejs-materials
      * @param textures - Texture map references from threejs-materials
      * @param textureRepeat - Optional [u, v] texture tiling applied to all loaded textures
+     * @param textureRotation - Optional texture rotation in radians (counterclockwise),
+     *                          pivoting around the texture center (0.5, 0.5)
      * @param textureCache - TextureCache for resolving data URI textures
      * @param label - Optional label for GPU tracking
      * @returns Configured MeshPhysicalMaterial
      */
-    createStudioMaterialFromMaterialX(values: Record<string, unknown>, textures: Record<string, string>, textureRepeat: [number, number] | undefined, textureCache: TextureCacheInterface | null, label?: string): Promise<THREE.MeshPhysicalMaterial>;
+    createStudioMaterialFromMaterialX(values: Record<string, unknown>, textures: Record<string, string>, textureRepeat: [number, number] | undefined, textureRotation: number | undefined, textureCache: TextureCacheInterface | null, label?: string): Promise<THREE.MeshPhysicalMaterial>;
     /**
      * Apply alpha mode settings to a material.
      *
@@ -201,4 +205,4 @@ declare class MaterialFactory {
     update(options: UpdateOptions): void;
 }
 export { MaterialFactory };
-export type { MaterialFactoryOptions, UpdateOptions, StudioMaterialOptions, TextureCacheInterface };
+export type { MaterialFactoryOptions, UpdateOptions, StudioMaterialOptions, TextureCacheInterface, };

package/dist/rendering/picked.d.ts

@@ -0,0 +1,55 @@
+import type * as THREE from "three";
+import type { ComponentInfo, TopoType } from "./id-picking.js";
+import type { HighlightController } from "./highlight.js";
+/**
+ * A picked component, so the viewer's selection state and the measure/select
+ * tools consume ONE interface. {@link IdPicked} wraps a registry `ComponentInfo`
+ * + the shader `HighlightController` (the GPU id-pick path) — NO dependency on the
+ * exploded scene graph.
+ */
+export interface PickedComponent {
+    /** Canonical "/"-path sent to the backend (component path, or solid path when
+     *  {@link fromSolid}). Replaces measure's `getId` + tree-sync name munging. */
+    readonly backendId: string;
+    /** Leaf name, e.g. "faces_3" — source for select.ts's numeric sub-index. */
+    readonly name: string;
+    /** Topology type of the resolved component. */
+    readonly topo: TopoType;
+    /** Solid-selection mode (the topo filter is "solid"). */
+    readonly fromSolid: boolean;
+    /** World-space hit point, when the backend provides one (else null). */
+    readonly point: THREE.Vector3 | null;
+    /** Show the hover highlight (`true`) — selection is via {@link toggleSelection}. */
+    highlight(asHover: boolean): void;
+    /** Remove the hover highlight; `keepSelected` preserves the selected state. */
+    unhighlight(keepSelected: boolean): void;
+    /** Toggle the persistent selected highlight. */
+    toggleSelection(): void;
+    /** Clear all highlight (hover + selected) for this component. */
+    clearHighlights(): void;
+    /** Identity equality (same component / same solid), for hover + isNewObject dedup. */
+    equals(other: PickedComponent | null): boolean;
+}
+/**
+ * `PickedComponent` over a GPU id-pick result. Drives the shader
+ * `HighlightController` by `componentId` (faces of a solid via `*Solid`), with no
+ * per-component `ObjectGroup` and no exploded graph.
+ */
+export declare class IdPicked implements PickedComponent {
+    readonly info: ComponentInfo;
+    readonly fromSolid: boolean;
+    readonly point: THREE.Vector3 | null;
+    private readonly highlightCtl;
+    constructor(info: ComponentInfo, fromSolid: boolean, point: THREE.Vector3 | null, highlightCtl: HighlightController);
+    /** Whether to act on the whole solid (faces) rather than the single component. */
+    private get asSolid();
+    get backendId(): string;
+    get name(): string;
+    get topo(): TopoType;
+    highlight(asHover: boolean): void;
+    unhighlight(keepSelected: boolean): void;
+    toggleSelection(): void;
+    clearHighlights(): void;
+    private _setSelected;
+    equals(other: PickedComponent | null): boolean;
+}

package/dist/rendering/studio-composer.d.ts

@@ -4,7 +4,7 @@
  * Wraps the pmndrs EffectComposer to provide:
  * - Scene rendering (RenderPass)
  * - Screen-space ambient occlusion (N8AOPostPass)
- * - Screen-space shadow mask (BasicShadowMap + KawaseBlurPass)
+ * - Screen-space shadow mask (PCFShadowMap + KawaseBlurPass)
  * - Tone mapping + sRGB output + antialiasing (ToneMappingEffect + SMAAEffect)
  *
  * Tone mapping is handled by the postprocessing ToneMappingEffect, which uses
@@ -18,7 +18,7 @@
  * transparent, and the EffectPass alpha-blends its output onto a pre-cleared
  * canvas that already has the correct background color.
  *
- * Shadow mask: BasicShadowMap produces sharp shadow boundaries at 4096×4096.
+ * Shadow mask: PCFShadowMap produces sharp shadow boundaries at 4096×4096.
  * A half-resolution ShadowMaterial override pass captures the mask, which is
  * then blurred via KawaseBlurPass and composited by ShadowMaskEffect before
  * tone mapping. The floor keeps its own ShadowMaterial reading the shadow map
@@ -61,7 +61,7 @@ declare class StudioComposer {
      * @param width    - Canvas width in pixels
      * @param height   - Canvas height in pixels
      */
-    constructor(renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera, width: number, height: number);
+    constructor(renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera, width: number, height: number, onSmaaReady?: () => void);
     /**
      * Enable or disable solid-background protection.
      *

package/dist/rendering/tree-model.d.ts

@@ -7,7 +7,7 @@ declare const States: {
     readonly mixed: 2;
     readonly disabled: 3;
 };
-type StateValue = typeof States[keyof typeof States];
+type StateValue = (typeof States)[keyof typeof States];
 /** Icon index: 0 for shapes, 1 for edges */
 type IconIndex = 0 | 1;
 /**

package/dist/scene/clipping.d.ts

@@ -2,6 +2,18 @@ import * as THREE from "three";
 import type { Vector3Tuple } from "three";
 import { ObjectGroup } from "./nestedgroup.js";
 import type { Theme, ClipIndex } from "../core/types";
+/**
+ * Cap-culling thresholds (see {@link Clipping.cull}). The per-solid stencil + cap
+ * meshes are correct but O(N) in draw calls; on a large assembly (~1300 solids ×
+ * 3 planes × 3 meshes ≈ 12000 draws/frame) a zoomed-out clip+rotate overruns the
+ * GPU watchdog → context loss. Culling bounds the per-frame work:
+ * - `CAP_CULL_MIN_PX`: skip a solid's caps when its projected screen radius is
+ *   below this (sub-pixel solids contribute nothing visible zoomed out).
+ * - `CAP_CULL_BUDGET`: hard cap on the number of capped solids (largest-first);
+ *   the real crash guard for pathologically dense views. Tune on a real GPU.
+ */
+export declare const CAP_CULL_MIN_PX = 3;
+export declare const CAP_CULL_BUDGET = 400;
 /**
  * A THREE.Plane that maintains a constant relative to a center point.
  */
@@ -103,6 +115,17 @@ declare class Clipping extends THREE.Group {
     objectColorCaps: boolean;
     planeHelpers: PlaneMeshGroup | null;
     private _planeMeshGroup;
+    /** Per-solid stencil/cap units, the unit of screen-size culling. */
+    private _capUnits;
+    /**
+     * Whether {@link cull} last ran with clipping active. Lets the inactive path
+     * gate stencils/caps off exactly once, then early-return on later still frames.
+     * Starts `true` so the first inactive call performs the initial gate-off (the
+     * meshes default to `visible:true`).
+     */
+    private _cullActive;
+    /** Reused buffer for the budget threshold sort (no per-frame alloc). */
+    private _radiiScratch;
     /**
      * Create a Clipping instance.
      * @param center - The center point [x, y, z].
@@ -168,6 +191,36 @@ declare class Clipping extends THREE.Group {
      * @param flag - True to show, false to hide.
      */
     setVisible: (flag: boolean) => void;
+    /**
+     * Bound the per-frame stencil/cap draw work to keep large assemblies from
+     * overrunning the GPU watchdog on clip+rotate (see {@link CAP_CULL_MIN_PX}).
+     *
+     * Toggles each unit's `Object3D.visible` (NOT material.visible), which composes
+     * by AND with the existing material-level toggles — `setShapeVisible` (per-solid
+     * hide) and `setVisible` (clip-tab on/off) — so a unit renders only when it is
+     * un-culled AND its solid is shown AND the clip tab is active. Render order and
+     * the per-solid `clearStencil` isolation are untouched (removing a whole solid's
+     * units never affects the remaining solids' cap correctness).
+     *
+     * @param camera - The active camera (ortho or perspective).
+     * @param width - Canvas width in CSS px.
+     * @param height - Canvas height in CSS px.
+     * @param clipActive - `renderer.localClippingEnabled` (clip tab selected).
+     */
+    cull(camera: THREE.Camera, width: number, height: number, clipActive: boolean): void;
+    /**
+     * World-space AABB of a solid (local bounding box transformed by the front
+     * mesh's world matrix, which folds in GDS z-scale). Returns a shared scratch
+     * Box3 (valid only until the next call) or `null` when geometry is missing.
+     */
+    private _solidWorldBox;
+    /**
+     * Projected screen radius (px) of a solid's bounding sphere. Projects the world
+     * sphere center and a point one world-radius along the camera-right axis, and
+     * measures their screen-space separation — correct for both ortho and
+     * perspective. Returns `Infinity` (never cull) when geometry is missing.
+     */
+    private _solidScreenRadius;
     /**
      * Save the current clipping state for later restoration.
      * Captures plane positions, helper visibility, and stencil plane visibility.

package/dist/scene/nestedgroup.d.ts

@@ -2,6 +2,9 @@ import * as THREE from "three";
 import { BoundingBox } from "./bbox.js";
 import { ObjectGroup, isObjectGroup } from "./objectgroup.js";
 import { MaterialFactory } from "../rendering/material-factory.js";
+import { ComponentRegistry } from "../rendering/id-picking.js";
+import { HighlightController } from "../rendering/highlight.js";
+import { MeshGeometrySource } from "../tools/cad_tools/mesh-measure.js";
 import type { ZebraColorScheme, ZebraMappingMode, StudioTextureMapping, Shapes, ColorValue, MaterialAppearance, MaterialXMaterial } from "../core/types";
 interface ShapeData {
     vertices: Float32Array | number[][];
@@ -9,9 +12,16 @@ interface ShapeData {
     triangles: Uint32Array | number[][];
     edges?: Float32Array | number[][];
     uvs?: Float32Array | number[];
+    triangles_per_face?: number[] | Uint32Array;
+    segments_per_edge?: number[] | Uint32Array;
+    obj_vertices?: Float32Array | number[];
+    face_types?: number[] | Uint32Array;
+    edge_types?: number[] | Uint8Array | Uint32Array;
 }
 interface EdgeData {
     edges: Float32Array | number[][];
+    segments_per_edge?: number[] | Uint32Array;
+    obj_vertices?: Float32Array | number[];
 }
 interface VertexData {
     obj_vertices: Float32Array | number[];
@@ -37,7 +47,6 @@ interface ShapeEntry {
     state: number[];
     loc?: [[number, number, number], [number, number, number, number]];
     renderback?: boolean;
-    exploded?: boolean;
     geomtype?: number | null;
     subtype?: string | null;
     texture?: {
@@ -77,6 +86,24 @@ declare class NestedGroup {
     bbox: BoundingBox | null;
     bsphere: THREE.Sphere | null;
     groups: GroupsMap;
+    /**
+     * id-based-picking component registry: maps each per-vertex `componentId` to its
+     * `ComponentInfo` for the GPU picker (populated when `assignIds === true`).
+     */
+    registry: ComponentRegistry;
+    /** Whether to assign component ids while rendering. */
+    assignIds: boolean;
+    /**
+     * Component-level shader highlight: patches visual materials to tint/widen by
+     * `componentId` (created when `assignIds`).
+     */
+    highlight: HighlightController | null;
+    /**
+     * Per-node mesh geometry for the internal (TypeScript) measurement backend.
+     * Populated for the compact group only (`assignIds`), keyed by node path like the
+     * {@link registry}; lets measurements be computed without the Python backend.
+     */
+    meshGeometry: MeshGeometrySource;
     clipPlanes: THREE.Plane[] | null;
     materialFactory: MaterialFactory;
     materialsTable: Record<string, string | MaterialXMaterial | MaterialAppearance> | null;
@@ -159,10 +186,25 @@ declare class NestedGroup {
     /**
      * Render a tessellated 3D shape with front/back faces and optional edges.
      */
-    renderShape(shape: ShapeData, color: ColorValue, alpha: number | null, renderback: boolean, exploded: boolean, path: string, name: string, states: number[], geomtype?: {
+    renderShape(shape: ShapeData, color: ColorValue, alpha: number | null, renderback: boolean, path: string, name: string, states: number[], geomtype?: {
         topo: string;
         geomtype: number | string | null;
     } | null, subtype?: string | null, texture_data?: TextureData | null, texture_width?: number | null, texture_height?: number | null): ObjectGroup;
+    /**
+     * Build the pick-only B-rep-corner cloud (+ a selection-marker highlight Points) for a
+     * node carrying `obj_vertices` — a solid, a standalone face, or a standalone edge — so
+     * its corners are selectable via id-picking.
+     *
+     * The pick cloud lives on the VERTEX pick layer ONLY (NOT visual layer 0), so the visual
+     * camera never draws it; its material stays `visible:true` because three drops
+     * `material.visible===false` objects before `overrideMaterial` applies. Its pick-buffer
+     * visibility is kept in sync with the owning group (`setPickVertices`) so a hidden shape
+     * stops contributing corner ids.
+     *
+     * `subtype` is "solid" for a solid (→ the corner ids carry the owning `solidPath`, so the
+     * pick gates on faces||edges) and null for standalone faces/edges (→ own-node corners).
+     */
+    private _addPickVertices;
     /**
      * Create edge geometry from extruded polygons.
      */
@@ -170,14 +212,14 @@ declare class NestedGroup {
     /**
      * Render extruded 2D polygons (GDS format) as 3D geometry.
      */
-    renderPolygons(shape: PolygonShape, minZ: number, color: ColorValue, alpha: number, renderback: boolean, _exploded: boolean, path: string, name: string, states: number[], geomtype?: {
+    renderPolygons(shape: PolygonShape, minZ: number, color: ColorValue, alpha: number, renderback: boolean, path: string, name: string, states: number[], geomtype?: {
         topo: string;
         geomtype: number | string | null;
     } | null, subtype?: string | null): ObjectGroup;
     /**
      * Recursively render all shapes in the shape tree.
      * Note: The shapes parameter uses the public Shapes type but internally
-     * contains ShapeEntry/ShapeTree data after decomposition by viewer._decompose()
+     * contains ShapeEntry/ShapeTree data.
      */
     renderLoop(shapes: Shapes): THREE.Group;
     /**

package/dist/scene/objectgroup.d.ts

@@ -61,6 +61,13 @@ declare class ObjectGroup extends THREE.Group {
     edges: Edges | null;
     edgeMaterial: EdgeMaterial | null;
     vertices: VertexPoints | null;
+    /**
+     * Pick-only `obj_vertices` cloud for a solid's B-rep corners (vertex pick layer,
+     * off the visual layer). Has its own always-visible material, so it is NOT covered by
+     * {@link setShapeVisible}/{@link setEdgesVisible} — its pick-buffer visibility is kept
+     * in sync explicitly so a hidden solid's corners don't keep stealing hover picks.
+     */
+    pickVertices: VertexPoints | null;
     clipping: Map<number, THREE.Group>;
     isSelected: boolean;
     originalColor: THREE.Color | null;
@@ -120,6 +127,16 @@ declare class ObjectGroup extends THREE.Group {
      * Set the vertices points.
      */
     setVertices(points: VertexPoints): void;
+    /**
+     * Register the pick-only B-rep-corner cloud (vertex pick layer). Its pick-buffer
+     * visibility is then kept in sync with the solid's overall visibility so a hidden
+     * solid stops contributing vertex ids to the pick buffer (otherwise its corners win
+     * the vertex>face priority over a visible face behind them → hover flicker).
+     */
+    setPickVertices(points: VertexPoints): void;
+    /** Sync the pick-only vertex cloud's visibility with the group's (pickable iff the
+     *  front faces or edges are visible — matches the picker's hidden-component gate). */
+    private _syncPickVertices;
     /**
      * Add a clipping group for a plane index.
      */

package/dist/scene/render-shape.d.ts

@@ -1,5 +1,5 @@
 /**
- * Shape tessellation and decomposition for rendering CAD objects.
+ * Shape tessellation for rendering CAD objects.
  */
 import { NestedGroup } from "./nestedgroup.js";
 import { BoundingBox } from "./bbox.js";
@@ -32,7 +32,7 @@ interface ShapeRenderConfig {
     normalLen: number;
 }
 /**
- * Handles tessellation and decomposition of CAD shapes for rendering.
+ * Handles tessellation of CAD shapes for rendering.
  */
 declare class ShapeRenderer {
     private config;
@@ -58,28 +58,12 @@ declare class ShapeRenderer {
      * @returns The navigation tree object.
      */
     private _getTree;
-    /**
-     * Decompose a CAD object into faces, edges and vertices.
-     * @param part - The part to decompose.
-     * @returns A decomposed part object.
-     */
-    private _decompose;
-    /**
-     * Convert Shape arrays to TypedArrays for efficient rendering.
-     * Note: This mutates the shape in place.
-     */
-    private _convertArrays;
-    /**
-     * Recursively process shapes, converting arrays and decomposing parts.
-     */
-    private _processShapes;
     /**
      * Render the shapes of the CAD object.
-     * @param exploded - Whether to render the compact or exploded version
      * @param shapes - The Shapes object.
      * @returns A nested THREE.Group object and navigation tree.
      */
-    render(exploded: boolean, shapes: Shapes): RenderResult;
+    render(shapes: Shapes): RenderResult;
 }
 export { ShapeRenderer };
 export type { ShapeTreeData, RenderResult, ShapeRenderConfig };

package/dist/three-cad-viewer.css

@@ -258,7 +258,6 @@ input[type="radio"] {
   background-image: var(--tcv-icon-nav_closed);
 } */
 
-
 .tcv_cad_viewer {
   --tcv-ui-row-gap: 8px;
   margin: 0;
@@ -288,6 +287,30 @@ input[type="radio"] {
   margin: 2px;
 }
 
+/* Hover preselection readout: a rounded overlay badge in a FIXED row directly
+   below the grid-size badge (.tcv_tick_size at bottom:22px), so the grid badge
+   never moves when this appears/vanishes. Left:84px clears the 80px orientation
+   marker — keep in sync with OrientationMarker(80,80) in viewer.ts. JS hides it
+   (display:none) when empty. Pure overlay — never intercepts pointer events. */
+.tcv_status_line {
+  position: absolute;
+  bottom: 4px;
+  left: 84px;
+  max-width: calc(100% - 88px);
+  font-size: 12px;
+  line-height: 14px;
+  font-family: sans-serif;
+  color: var(--tcv-font-color);
+  background-color: var(--tcv-bg-overlay-rest-color);
+  border-radius: 4px;
+  padding: 1px 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  z-index: 100;
+}
+
 .tcv_cad_view_glass {
   position: absolute !important;
   left: 4px;
@@ -326,7 +349,7 @@ input[type="radio"] {
   font-family: sans-serif;
   font-size: 12px;
   overflow: hidden;
-  user-select:text;
+  user-select: text;
 }
 
 .tcv_cad_info_wrapper {
@@ -418,7 +441,7 @@ input[type="radio"] {
   line-height: 14px;
 }
 
-.tcv_small_table_row>td,
+.tcv_small_table_row > td,
 th {
   padding-left: 6px;
 }
@@ -856,7 +879,6 @@ input[type="button"] {
   margin-right: 0;
 }
 
-
 .tcv_zebra_radio {
   margin-bottom: var(--tcv-ui-row-gap);
   margin-left: -3px;
@@ -1107,7 +1129,7 @@ input[type="button"] {
   max-width: 80%;
   text-align: center;
   pointer-events: auto;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
 
 .tcv_studio_spinner {
@@ -1124,7 +1146,9 @@ input[type="button"] {
 }
 
 @keyframes tcv_spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .tcv_filter_menu {
@@ -1144,10 +1168,13 @@ input[type="button"] {
   color: var(--tcv-font-color);
   font-size: 13px;
   border: none;
-  float: right;
   position: absolute;
-  right: 0px;
-  width: auto;
+  right: -4px;
+  top: -3px;
+  /* Fixed width so the trigger pill and the option list share one right-anchored
+     box — their right borders coincide (and line up with the panel edge). Wide
+     enough for the longest option ("Vertex"). */
+  width: 5em;
 }
 
 .tcv_shape_filter:hover {
@@ -1161,9 +1188,9 @@ input[type="button"] {
 }
 
 .tcv_filter_value {
-  width: 3em;
+  flex: 1;
+  text-align: left;
   padding-left: 3px;
-  display: inline-block;
 }
 
 .tcv_filter_dropdown_active {
@@ -1180,22 +1207,29 @@ input[type="button"] {
 }
 
 .tcv_filter_content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   background-color: var(--tcv-bg-overlay-color);
 }
 
-.tcv_tick_size{
-  background-color: var(--tcv-bg-overlay-color);
+/* Grid-size badge: FIXED bottom-left row, just above the status readout. Stays
+   put whether or not the status line is shown (no jumping). */
+.tcv_tick_size {
+  position: absolute;
+  bottom: 22px;
+  left: 84px;
+  background-color: var(--tcv-bg-overlay-rest-color);
   border-radius: 4px;
-  padding:2px;
-  width:fit-content;
+  padding: 1px 4px;
+  width: fit-content;
   font-size: 12px;
-  margin-left:100px;
-  margin-top: -24px;
-  z-index: 1000;
+  line-height: 14px;
+  z-index: 100;
 }
 
-.tcv_tick_size_value{
-  padding:3px;
+.tcv_tick_size_value {
+  padding: 3px;
 }