brepjs-viewer 0.1.0

package/dist/brepjs-viewer.js

@@ -0,0 +1,1156 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import * as THREE from "three";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Canvas, useThree } from "@react-three/fiber";
+import { OrbitControls, OrthographicCamera } from "@react-three/drei";
+//#region src/geometry.ts
+function buildGeometry(data) {
+	const geo = new THREE.BufferGeometry();
+	geo.setAttribute("position", new THREE.BufferAttribute(data.position, 3));
+	geo.setAttribute("normal", new THREE.BufferAttribute(data.normal, 3));
+	geo.setIndex(new THREE.BufferAttribute(data.index, 1));
+	return geo;
+}
+function meshBounds(data) {
+	const p = data.position;
+	if (p.length < 3) return {
+		min: [
+			0,
+			0,
+			0
+		],
+		max: [
+			0,
+			0,
+			0
+		]
+	};
+	let minX = Infinity, minY = Infinity, minZ = Infinity;
+	let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity;
+	for (let i = 0; i + 2 < p.length; i += 3) {
+		const x = p[i];
+		const y = p[i + 1];
+		const z = p[i + 2];
+		if (x < minX) minX = x;
+		if (x > maxX) maxX = x;
+		if (y < minY) minY = y;
+		if (y > maxY) maxY = y;
+		if (z < minZ) minZ = z;
+		if (z > maxZ) maxZ = z;
+	}
+	return {
+		min: [
+			minX,
+			minY,
+			minZ
+		],
+		max: [
+			maxX,
+			maxY,
+			maxZ
+		]
+	};
+}
+function meshSize(data) {
+	const { min, max } = meshBounds(data);
+	return [
+		max[0] - min[0],
+		max[1] - min[1],
+		max[2] - min[2]
+	];
+}
+function sectionPlane(axis, position, flip = false) {
+	const normal = new THREE.Vector3(axis === "x" ? 1 : 0, axis === "y" ? 1 : 0, axis === "z" ? 1 : 0);
+	if (flip) normal.negate();
+	const point = new THREE.Vector3(axis === "x" ? position : 0, axis === "y" ? position : 0, axis === "z" ? position : 0);
+	return new THREE.Plane(normal, -normal.dot(point));
+}
+function findFaceGroupAt(groups, triangleIndex) {
+	const off = triangleIndex * 3;
+	let lo = 0;
+	let hi = groups.length - 1;
+	while (lo <= hi) {
+		const mid = lo + hi >>> 1;
+		const g = groups[mid];
+		if (!g) break;
+		if (off < g.start) hi = mid - 1;
+		else if (off >= g.start + g.count) lo = mid + 1;
+		else return g;
+	}
+	return null;
+}
+//#endregion
+//#region src/Renderer.tsx
+function Renderer({ data, viewMode = "solid", clippingPlanes, onFacePick, onFaceHover, onFaceContextMenu }) {
+	const pickable = Boolean(data.faceGroups && data.faceInfos && (onFacePick || onFaceHover || onFaceContextMenu));
+	const geometry = useMemo(() => buildGeometry(data), [
+		data.position,
+		data.normal,
+		data.index
+	]);
+	useEffect(() => () => geometry.dispose(), [geometry]);
+	useEffect(() => () => {
+		document.body.style.cursor = "";
+	}, []);
+	const faceInfoById = useMemo(() => {
+		if (!data.faceInfos) return null;
+		const m = /* @__PURE__ */ new Map();
+		for (const i of data.faceInfos) m.set(i.faceId, i);
+		return m;
+	}, [data.faceInfos]);
+	const resolveFace = useCallback((e) => {
+		if (!data.faceGroups || !faceInfoById) return null;
+		const t = e.faceIndex;
+		if (t === void 0 || t === null) return null;
+		const g = findFaceGroupAt(data.faceGroups, t);
+		return g ? faceInfoById.get(g.faceId) ?? null : null;
+	}, [data.faceGroups, faceInfoById]);
+	const onClick = useCallback((e) => {
+		const info = resolveFace(e);
+		if (!info) return;
+		e.stopPropagation();
+		onFacePick?.(info, e.shiftKey, {
+			x: e.clientX,
+			y: e.clientY
+		});
+	}, [resolveFace, onFacePick]);
+	const onCtx = useCallback((e) => {
+		const info = resolveFace(e);
+		if (!info) return;
+		e.stopPropagation();
+		e.nativeEvent.preventDefault();
+		onFaceContextMenu?.(info, {
+			x: e.clientX,
+			y: e.clientY
+		});
+	}, [resolveFace, onFaceContextMenu]);
+	const onMove = useCallback((e) => {
+		const info = resolveFace(e);
+		if (!info) return;
+		onFaceHover?.(info, {
+			x: e.clientX,
+			y: e.clientY
+		});
+	}, [resolveFace, onFaceHover]);
+	const onOver = useCallback(() => {
+		document.body.style.cursor = "pointer";
+	}, []);
+	const onOut = useCallback(() => {
+		document.body.style.cursor = "";
+		onFaceHover?.(null);
+	}, [onFaceHover]);
+	return /* @__PURE__ */ jsx("mesh", {
+		geometry,
+		...pickable ? {
+			onClick,
+			onContextMenu: onCtx,
+			onPointerOver: onOver,
+			onPointerOut: onOut,
+			onPointerMove: onMove
+		} : {},
+		children: /* @__PURE__ */ jsx("meshStandardMaterial", {
+			color: data.color ?? "#d4d8dc",
+			metalness: 0,
+			roughness: .45,
+			emissive: data.color ?? "#d4d8dc",
+			emissiveIntensity: .08,
+			side: viewMode === "solid" ? THREE.FrontSide : THREE.DoubleSide,
+			polygonOffset: true,
+			polygonOffsetFactor: 1,
+			polygonOffsetUnits: 1,
+			wireframe: viewMode === "wireframe",
+			transparent: viewMode === "xray",
+			opacity: viewMode === "xray" ? .35 : 1,
+			depthWrite: viewMode !== "xray",
+			clippingPlanes: clippingPlanes ?? null
+		})
+	});
+}
+//#endregion
+//#region src/EdgeRenderer.tsx
+function findGroupAt(groups, vertexIndex) {
+	let lo = 0;
+	let hi = groups.length - 1;
+	while (lo <= hi) {
+		const mid = lo + hi >>> 1;
+		const group = groups[mid];
+		if (!group) break;
+		if (vertexIndex < group.start) hi = mid - 1;
+		else if (vertexIndex >= group.start + group.count) lo = mid + 1;
+		else return group;
+	}
+	return null;
+}
+function EdgeRenderer({ edges, edgeGroups, edgeInfos, clippingPlanes, onEdgePick, onEdgeHover, onEdgeContextMenu }) {
+	const pickable = Boolean(edgeGroups && edgeInfos && (onEdgePick || onEdgeHover || onEdgeContextMenu));
+	const viewportHeight = useThree((s) => s.size.height);
+	const viewportHeightRef = useRef(viewportHeight);
+	viewportHeightRef.current = viewportHeight;
+	const lastEdgeId = useRef(null);
+	const geometry = useMemo(() => {
+		const geo = new THREE.BufferGeometry();
+		geo.setAttribute("position", new THREE.BufferAttribute(edges, 3));
+		return geo;
+	}, [edges]);
+	useEffect(() => {
+		return () => {
+			geometry.dispose();
+		};
+	}, [geometry]);
+	const edgeInfoById = useMemo(() => {
+		if (!edgeInfos) return null;
+		const byId = /* @__PURE__ */ new Map();
+		for (const info of edgeInfos) byId.set(info.edgeId, info);
+		return byId;
+	}, [edgeInfos]);
+	const resolveEdge = useCallback((event) => {
+		if (!edgeGroups || !edgeInfoById) return null;
+		const vertexIndex = event.index;
+		if (vertexIndex === void 0) return null;
+		const group = findGroupAt(edgeGroups, vertexIndex);
+		if (!group) return null;
+		return edgeInfoById.get(group.edgeId) ?? null;
+	}, [edgeGroups, edgeInfoById]);
+	const handleClick = useCallback((event) => {
+		const info = resolveEdge(event);
+		if (!info) return;
+		event.stopPropagation();
+		onEdgePick?.(info, event.shiftKey, {
+			x: event.clientX,
+			y: event.clientY
+		});
+	}, [resolveEdge, onEdgePick]);
+	const handleContextMenu = useCallback((event) => {
+		const info = resolveEdge(event);
+		if (!info) return;
+		event.stopPropagation();
+		event.nativeEvent.preventDefault();
+		onEdgeContextMenu?.(info, {
+			x: event.clientX,
+			y: event.clientY
+		});
+	}, [resolveEdge, onEdgeContextMenu]);
+	const handlePointerOver = useCallback(() => {
+		document.body.style.cursor = "pointer";
+	}, []);
+	const handlePointerOut = useCallback(() => {
+		document.body.style.cursor = "";
+		onEdgeHover?.(null);
+		lastEdgeId.current = null;
+	}, [onEdgeHover]);
+	const handlePointerMove = useCallback((event) => {
+		const info = resolveEdge(event);
+		if (!info) return;
+		event.stopPropagation();
+		lastEdgeId.current = info.edgeId;
+		onEdgeHover?.(info, {
+			x: event.clientX,
+			y: event.clientY
+		});
+	}, [resolveEdge, onEdgeHover]);
+	useEffect(() => {
+		return () => {
+			document.body.style.cursor = "";
+			onEdgeHover?.(null);
+		};
+	}, [onEdgeHover]);
+	return /* @__PURE__ */ jsx("lineSegments", {
+		geometry,
+		renderOrder: 1,
+		raycast: useCallback(function(raycaster, intersects) {
+			const lineParams = raycaster.params.Line;
+			if (!lineParams) {
+				THREE.LineSegments.prototype.raycast.call(this, raycaster, intersects);
+				return;
+			}
+			const previousThreshold = lineParams.threshold;
+			lineParams.threshold = computeWorldThreshold(this, raycaster, viewportHeightRef.current);
+			THREE.LineSegments.prototype.raycast.call(this, raycaster, intersects);
+			lineParams.threshold = previousThreshold;
+		}, []),
+		...pickable ? {
+			onClick: handleClick,
+			onContextMenu: handleContextMenu,
+			onPointerOver: handlePointerOver,
+			onPointerOut: handlePointerOut,
+			onPointerMove: handlePointerMove
+		} : {},
+		children: /* @__PURE__ */ jsx("lineBasicMaterial", {
+			color: "#000000",
+			depthTest: true,
+			linewidth: 2,
+			clippingPlanes: clippingPlanes ?? null
+		})
+	});
+}
+var PICK_THRESHOLD_PX = 6;
+var FALLBACK_WORLD_THRESHOLD = .15;
+function computeWorldThreshold(lines, raycaster, viewportHeight) {
+	const camera = raycaster.camera;
+	if (!camera || viewportHeight <= 0) return FALLBACK_WORLD_THRESHOLD;
+	if (camera.isPerspectiveCamera) {
+		const persp = camera;
+		if (!lines.geometry.boundingSphere) lines.geometry.computeBoundingSphere();
+		const sphere = lines.geometry.boundingSphere;
+		if (!sphere) return FALLBACK_WORLD_THRESHOLD;
+		const center = new THREE.Vector3().copy(sphere.center).applyMatrix4(lines.matrixWorld);
+		const distance = persp.position.distanceTo(center);
+		const fovRad = persp.fov * Math.PI / 180;
+		return 2 * distance * Math.tan(fovRad / 2) / viewportHeight * PICK_THRESHOLD_PX;
+	}
+	if (camera.isOrthographicCamera) {
+		const ortho = camera;
+		return (ortho.top - ortho.bottom) / ortho.zoom / viewportHeight * PICK_THRESHOLD_PX;
+	}
+	return FALLBACK_WORLD_THRESHOLD;
+}
+//#endregion
+//#region src/SelectionHighlight.tsx
+var FACE_COLOR = "#4ACECC";
+var EDGE_COLOR = "#fbbf24";
+function buildFaceHighlightGeometry(data, faceIds) {
+	if (faceIds.length === 0 || !data.faceGroups || !data.index) return null;
+	const groupById = new Map(data.faceGroups.map((g) => [g.faceId, g]));
+	let total = 0;
+	const ranges = [];
+	for (const id of faceIds) {
+		const g = groupById.get(id);
+		if (g) {
+			ranges.push({
+				start: g.start,
+				count: g.count
+			});
+			total += g.count;
+		}
+	}
+	if (total === 0) return null;
+	const newIndex = new Uint32Array(total);
+	let off = 0;
+	for (const r of ranges) {
+		newIndex.set(data.index.subarray(r.start, r.start + r.count), off);
+		off += r.count;
+	}
+	const geo = new THREE.BufferGeometry();
+	geo.setAttribute("position", new THREE.BufferAttribute(data.position, 3));
+	geo.setAttribute("normal", new THREE.BufferAttribute(data.normal, 3));
+	geo.setIndex(new THREE.BufferAttribute(newIndex, 1));
+	return geo;
+}
+function buildEdgeHighlightGeometry(data, edgeIds) {
+	if (edgeIds.length === 0 || !data.edgeGroups) return null;
+	const groupById = new Map(data.edgeGroups.map((g) => [g.edgeId, g]));
+	let totalVerts = 0;
+	const ranges = [];
+	for (const id of edgeIds) {
+		const g = groupById.get(id);
+		if (g) {
+			ranges.push({
+				start: g.start,
+				count: g.count
+			});
+			totalVerts += g.count;
+		}
+	}
+	if (totalVerts === 0) return null;
+	const newPos = new Float32Array(totalVerts * 3);
+	let off = 0;
+	for (const r of ranges) {
+		newPos.set(data.edges.subarray(r.start * 3, (r.start + r.count) * 3), off);
+		off += r.count * 3;
+	}
+	const geo = new THREE.BufferGeometry();
+	geo.setAttribute("position", new THREE.BufferAttribute(newPos, 3));
+	return geo;
+}
+function SelectionHighlight({ data, selectedFaceIds = [], selectedEdgeIds = [], hoverFaceId = null, hoverEdgeId = null }) {
+	const selectedFaceKey = selectedFaceIds.join(",");
+	const selectedEdgeKey = selectedEdgeIds.join(",");
+	const faceIds = useMemo(() => selectedFaceIds.filter((id) => data.faceGroups?.some((g) => g.faceId === id)), [data, selectedFaceKey]);
+	const edgeIds = useMemo(() => selectedEdgeIds.filter((id) => data.edgeGroups?.some((g) => g.edgeId === id)), [data, selectedEdgeKey]);
+	const faceKey = faceIds.join(",");
+	const edgeKey = edgeIds.join(",");
+	const faceGeometry = useMemo(() => buildFaceHighlightGeometry(data, faceIds), [data, faceKey]);
+	const edgeGeometry = useMemo(() => buildEdgeHighlightGeometry(data, edgeIds), [data, edgeKey]);
+	const resolvedHoverFaceId = useMemo(() => {
+		if (hoverFaceId === null) return null;
+		if (!data.faceGroups?.some((g) => g.faceId === hoverFaceId)) return null;
+		return hoverFaceId;
+	}, [hoverFaceId, data.faceGroups]);
+	const resolvedHoverEdgeId = useMemo(() => {
+		if (hoverEdgeId === null) return null;
+		if (!data.edgeGroups?.some((g) => g.edgeId === hoverEdgeId)) return null;
+		return hoverEdgeId;
+	}, [hoverEdgeId, data.edgeGroups]);
+	const hoverFaceGeometry = useMemo(() => resolvedHoverFaceId !== null ? buildFaceHighlightGeometry(data, [resolvedHoverFaceId]) : null, [data, resolvedHoverFaceId]);
+	const hoverEdgeGeometry = useMemo(() => resolvedHoverEdgeId !== null ? buildEdgeHighlightGeometry(data, [resolvedHoverEdgeId]) : null, [data, resolvedHoverEdgeId]);
+	const shouldRenderHoverFace = resolvedHoverFaceId !== null && !faceIds.includes(resolvedHoverFaceId);
+	const shouldRenderHoverEdge = resolvedHoverEdgeId !== null && !edgeIds.includes(resolvedHoverEdgeId);
+	useEffect(() => {
+		return () => {
+			faceGeometry?.dispose();
+		};
+	}, [faceGeometry]);
+	useEffect(() => {
+		return () => {
+			edgeGeometry?.dispose();
+		};
+	}, [edgeGeometry]);
+	useEffect(() => {
+		return () => {
+			hoverFaceGeometry?.dispose();
+		};
+	}, [hoverFaceGeometry]);
+	useEffect(() => {
+		return () => {
+			hoverEdgeGeometry?.dispose();
+		};
+	}, [hoverEdgeGeometry]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		faceGeometry && /* @__PURE__ */ jsx("mesh", {
+			geometry: faceGeometry,
+			raycast: skipRaycast,
+			renderOrder: 2,
+			children: /* @__PURE__ */ jsx("meshStandardMaterial", {
+				color: FACE_COLOR,
+				emissive: FACE_COLOR,
+				emissiveIntensity: .6,
+				metalness: 0,
+				roughness: .3,
+				side: THREE.DoubleSide,
+				transparent: true,
+				opacity: .55,
+				depthWrite: false,
+				polygonOffset: true,
+				polygonOffsetFactor: -2,
+				polygonOffsetUnits: -2
+			})
+		}),
+		edgeGeometry && /* @__PURE__ */ jsx("lineSegments", {
+			geometry: edgeGeometry,
+			raycast: skipRaycast,
+			renderOrder: 3,
+			children: /* @__PURE__ */ jsx("lineBasicMaterial", {
+				color: EDGE_COLOR,
+				depthTest: false,
+				transparent: true
+			})
+		}),
+		hoverFaceGeometry && shouldRenderHoverFace && /* @__PURE__ */ jsx("mesh", {
+			geometry: hoverFaceGeometry,
+			raycast: skipRaycast,
+			renderOrder: 1,
+			children: /* @__PURE__ */ jsx("meshStandardMaterial", {
+				color: FACE_COLOR,
+				emissive: FACE_COLOR,
+				emissiveIntensity: .35,
+				metalness: 0,
+				roughness: .3,
+				side: THREE.DoubleSide,
+				transparent: true,
+				opacity: .22,
+				depthWrite: false,
+				polygonOffset: true,
+				polygonOffsetFactor: -2,
+				polygonOffsetUnits: -2
+			})
+		}),
+		hoverEdgeGeometry && shouldRenderHoverEdge && /* @__PURE__ */ jsx("lineSegments", {
+			geometry: hoverEdgeGeometry,
+			raycast: skipRaycast,
+			renderOrder: 2,
+			children: /* @__PURE__ */ jsx("lineBasicMaterial", {
+				color: EDGE_COLOR,
+				depthTest: false,
+				transparent: true,
+				opacity: .55
+			})
+		})
+	] });
+}
+function skipRaycast() {}
+//#endregion
+//#region src/GradientBackground.tsx
+var vertexShader$1 = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = vec4(position.xy, 0.9999, 1.0);
+  }
+`;
+var fragmentShader$1 = `
+  uniform vec3 colorTop;
+  uniform vec3 colorBottom;
+  varying vec2 vUv;
+  void main() {
+    gl_FragColor = vec4(mix(colorBottom, colorTop, vUv.y), 1.0);
+  }
+`;
+function GradientBackground({ colorTop = "#2a2a3e", colorBottom = "#2a2a3e" }) {
+	const matRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			matRef.current?.dispose();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("mesh", {
+		renderOrder: -1,
+		frustumCulled: false,
+		children: [/* @__PURE__ */ jsx("planeGeometry", { args: [2, 2] }), /* @__PURE__ */ jsx("shaderMaterial", {
+			ref: matRef,
+			vertexShader: vertexShader$1,
+			fragmentShader: fragmentShader$1,
+			uniforms: {
+				colorTop: { value: new THREE.Color(colorTop) },
+				colorBottom: { value: new THREE.Color(colorBottom) }
+			},
+			depthWrite: false,
+			depthTest: false
+		})]
+	});
+}
+//#endregion
+//#region src/InfiniteGrid.tsx
+var vertexShader = `
+  varying vec2 vWorldPos;
+  void main() {
+    vec4 worldPos = modelMatrix * vec4(position, 1.0);
+    vWorldPos = worldPos.xz;
+    gl_Position = projectionMatrix * viewMatrix * worldPos;
+  }
+`;
+var fragmentShader = `
+  uniform float cellSize;
+  uniform vec3 lineColor;
+  uniform float lineOpacity;
+  uniform float fadeStart;
+  uniform float fadeEnd;
+
+  varying vec2 vWorldPos;
+
+  void main() {
+    vec2 coord = vWorldPos / cellSize;
+    vec2 grid = abs(fract(coord - 0.5) - 0.5);
+    vec2 line = fwidth(coord);
+    vec2 gridAA = smoothstep(line * 0.5, line * 1.5, grid);
+    float gridLine = 1.0 - min(gridAA.x, gridAA.y);
+
+    float dist = length(vWorldPos);
+    float fade = 1.0 - smoothstep(fadeStart, fadeEnd, dist);
+
+    float alpha = gridLine * lineOpacity * fade;
+    if (alpha < 0.001) discard;
+
+    gl_FragColor = vec4(lineColor, alpha);
+  }
+`;
+function InfiniteGrid({ cellSize = 10, lineColor = "#888898", lineOpacity = .1, fadeStart = 50, fadeEnd = 200 }) {
+	const matRef = useRef(null);
+	const planeSize = fadeEnd * 2.5;
+	useEffect(() => {
+		return () => {
+			matRef.current?.dispose();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("mesh", {
+		rotation: [
+			-Math.PI / 2,
+			0,
+			0
+		],
+		position: [
+			0,
+			-.01,
+			0
+		],
+		children: [/* @__PURE__ */ jsx("planeGeometry", { args: [planeSize, planeSize] }), /* @__PURE__ */ jsx("shaderMaterial", {
+			ref: matRef,
+			vertexShader,
+			fragmentShader,
+			uniforms: {
+				cellSize: { value: cellSize },
+				lineColor: { value: new THREE.Color(lineColor) },
+				lineOpacity: { value: lineOpacity },
+				fadeStart: { value: fadeStart },
+				fadeEnd: { value: fadeEnd }
+			},
+			transparent: true,
+			depthWrite: false,
+			side: THREE.DoubleSide,
+			polygonOffset: true,
+			polygonOffsetFactor: 1,
+			polygonOffsetUnits: 1
+		})]
+	});
+}
+//#endregion
+//#region src/SceneLighting.tsx
+function SceneLighting() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("hemisphereLight", { args: [
+			"#ffffff",
+			"#1a1a2e",
+			.65
+		] }),
+		/* @__PURE__ */ jsx("directionalLight", {
+			position: [
+				-50,
+				60,
+				80
+			],
+			intensity: .85,
+			color: "#fff8f0"
+		}),
+		/* @__PURE__ */ jsx("directionalLight", {
+			position: [
+				40,
+				-40,
+				30
+			],
+			intensity: .15,
+			color: "#e0e8ff"
+		})
+	] });
+}
+//#endregion
+//#region src/SceneSetup.tsx
+function SceneSetup({ autoRotate = false, target, gridVisible = true, gridProps, controlsProps, controlsRef, onControlsStart }) {
+	const optionalControls = {
+		...controlsRef ? { ref: controlsRef } : {},
+		...target ? { target } : {},
+		...onControlsStart ? { onStart: onControlsStart } : {}
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(SceneLighting, {}),
+		/* @__PURE__ */ jsx(GradientBackground, {}),
+		/* @__PURE__ */ jsx(OrbitControls, {
+			makeDefault: true,
+			autoRotate,
+			autoRotateSpeed: 1.5,
+			...optionalControls,
+			...controlsProps
+		}),
+		gridVisible && /* @__PURE__ */ jsx(InfiniteGrid, { ...gridProps })
+	] });
+}
+//#endregion
+//#region src/ViewerCanvas.tsx
+var VIEW_DIR = {
+	iso: new THREE.Vector3(.6, .5, .6),
+	front: new THREE.Vector3(0, .3, 1),
+	top: new THREE.Vector3(0, 1, -.01),
+	right: new THREE.Vector3(1, .3, 0)
+};
+function Framing({ data, view, fitSignal, projection, onFirstFrame }) {
+	const camera = useThree((s) => s.camera);
+	const invalidate = useThree((s) => s.invalidate);
+	const fired = useRef(false);
+	const onFirstFrameRef = useRef(onFirstFrame);
+	onFirstFrameRef.current = onFirstFrame;
+	const { center, radius } = useMemo(() => {
+		const g = buildGeometry(data);
+		g.computeBoundingSphere();
+		const s = g.boundingSphere ?? new THREE.Sphere(new THREE.Vector3(), 1);
+		const result = {
+			center: s.center.clone(),
+			radius: s.radius || 1
+		};
+		g.dispose();
+		return result;
+	}, [data]);
+	useEffect(() => {
+		const dir = VIEW_DIR[view].clone().normalize();
+		camera.position.copy(center).addScaledVector(dir, radius * 3);
+		camera.near = radius / 100;
+		camera.far = radius * 100;
+		const ortho = camera;
+		if (ortho.isOrthographicCamera) {
+			const viewSize = Math.min(ortho.right - ortho.left, ortho.top - ortho.bottom);
+			if (viewSize > 0 && radius > 0) ortho.zoom = viewSize / (radius * 2.4);
+		}
+		camera.lookAt(center);
+		camera.updateProjectionMatrix();
+		invalidate();
+		if (!fired.current) {
+			fired.current = true;
+			onFirstFrameRef.current?.();
+		}
+	}, [
+		camera,
+		invalidate,
+		center,
+		radius,
+		view,
+		fitSignal,
+		projection
+	]);
+	return null;
+}
+function OrthoCamera() {
+	const camera = useThree((s) => s.camera);
+	return /* @__PURE__ */ jsx(OrthographicCamera, {
+		makeDefault: true,
+		position: useRef([
+			camera.position.x,
+			camera.position.y,
+			camera.position.z
+		]).current,
+		zoom: 20,
+		near: .1,
+		far: 2e3
+	});
+}
+function LocalClipping() {
+	const gl = useThree((s) => s.gl);
+	useEffect(() => {
+		gl.localClippingEnabled = true;
+		return () => {
+			gl.localClippingEnabled = false;
+		};
+	}, [gl]);
+	return null;
+}
+function ViewerCanvas({ data, view = "iso", fitSignal, autoRotate = false, gridVisible = true, projection = "perspective", onFirstFrame, children }) {
+	return /* @__PURE__ */ jsxs(Canvas, {
+		frameloop: autoRotate ? "always" : "demand",
+		gl: { preserveDrawingBuffer: true },
+		children: [
+			/* @__PURE__ */ jsx(LocalClipping, {}),
+			projection === "orthographic" && /* @__PURE__ */ jsx(OrthoCamera, {}),
+			/* @__PURE__ */ jsx(SceneSetup, {
+				autoRotate,
+				gridVisible
+			}),
+			/* @__PURE__ */ jsx(Framing, {
+				data,
+				view,
+				fitSignal,
+				projection,
+				onFirstFrame
+			}),
+			children
+		]
+	});
+}
+//#endregion
+//#region src/types.ts
+var VIEW_NAMES = [
+	"iso",
+	"front",
+	"top",
+	"right"
+];
+//#endregion
+//#region src/ViewerControls.tsx
+var MODE_LABELS = {
+	solid: "Solid",
+	wireframe: "Wire",
+	xray: "X-ray"
+};
+var VIEW_LABELS = {
+	iso: "Iso",
+	front: "Front",
+	top: "Top",
+	right: "Right"
+};
+function ViewerControls({ viewMode, onViewModeChange, showEdges, onToggleEdges, showGrid, onToggleGrid, autoRotate, onToggleAutoRotate, projection, onToggleProjection, activeView, onView, onFit, onScreenshot, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: className ? void 0 : containerStyle$3,
+		children: [
+			(onFit || onScreenshot) && /* @__PURE__ */ jsxs(Group, { children: [onFit && /* @__PURE__ */ jsx(Btn$1, {
+				label: "Fit",
+				onClick: onFit
+			}), onScreenshot && /* @__PURE__ */ jsx(Btn$1, {
+				label: "Snap",
+				onClick: onScreenshot
+			})] }),
+			viewMode && onViewModeChange && /* @__PURE__ */ jsx(Group, { children: Object.keys(MODE_LABELS).map((mode) => /* @__PURE__ */ jsx(Btn$1, {
+				label: MODE_LABELS[mode],
+				active: viewMode === mode,
+				onClick: () => {
+					onViewModeChange(mode);
+				}
+			}, mode)) }),
+			(onToggleEdges || onToggleGrid || onToggleAutoRotate || onToggleProjection) && /* @__PURE__ */ jsxs(Group, { children: [
+				onToggleEdges && /* @__PURE__ */ jsx(Btn$1, {
+					label: "Edges",
+					active: showEdges,
+					onClick: onToggleEdges
+				}),
+				onToggleGrid && /* @__PURE__ */ jsx(Btn$1, {
+					label: "Grid",
+					active: showGrid,
+					onClick: onToggleGrid
+				}),
+				onToggleAutoRotate && /* @__PURE__ */ jsx(Btn$1, {
+					label: "Spin",
+					active: autoRotate,
+					onClick: onToggleAutoRotate
+				}),
+				onToggleProjection && /* @__PURE__ */ jsx(Btn$1, {
+					label: projection === "orthographic" ? "Ortho" : "Persp",
+					active: projection === "orthographic",
+					onClick: onToggleProjection
+				})
+			] }),
+			onView && /* @__PURE__ */ jsx(Group, { children: VIEW_NAMES.map((view) => /* @__PURE__ */ jsx(Btn$1, {
+				label: VIEW_LABELS[view],
+				active: activeView === view,
+				onClick: () => {
+					onView(view);
+				}
+			}, view)) })
+		]
+	});
+}
+function Group({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: groupStyle,
+		children
+	});
+}
+function Btn$1({ label, active, onClick }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		"aria-pressed": active,
+		style: {
+			...buttonStyle$1,
+			...active ? activeButtonStyle$1 : null
+		},
+		children: label
+	});
+}
+var containerStyle$3 = {
+	position: "absolute",
+	top: 12,
+	right: 12,
+	zIndex: 10,
+	display: "flex",
+	flexDirection: "column",
+	gap: 6,
+	pointerEvents: "none",
+	fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
+};
+var groupStyle = {
+	display: "flex",
+	flexDirection: "column",
+	gap: 4,
+	padding: 4,
+	borderRadius: 8,
+	background: "rgba(26, 29, 33, 0.7)",
+	backdropFilter: "blur(6px)",
+	border: "1px solid rgba(255, 255, 255, 0.08)"
+};
+var buttonStyle$1 = {
+	cursor: "pointer",
+	pointerEvents: "auto",
+	padding: "4px 10px",
+	borderRadius: 5,
+	fontSize: 12,
+	fontWeight: 500,
+	lineHeight: 1.2,
+	color: "#9aa3ad",
+	background: "rgba(255, 255, 255, 0.04)",
+	border: "1px solid transparent",
+	transition: "color 120ms, background 120ms"
+};
+var activeButtonStyle$1 = {
+	color: "#6ee7d7",
+	background: "rgba(45, 212, 191, 0.16)",
+	borderColor: "rgba(45, 212, 191, 0.3)"
+};
+//#endregion
+//#region src/ViewerInfoPanel.tsx
+function ViewerInfoPanel({ dims, volume, area, triangles, valid, unit, className }) {
+	const u = unit ? ` ${unit}` : "";
+	const rows = [];
+	if (dims) rows.push(/* @__PURE__ */ jsx(Row$1, {
+		label: "Size",
+		value: `${fmt$1(dims[0])} × ${fmt$1(dims[1])} × ${fmt$1(dims[2])}${u}`
+	}, "size"));
+	if (volume !== void 0) rows.push(/* @__PURE__ */ jsx(Row$1, {
+		label: "Volume",
+		value: `${fmt$1(volume)}${unit ? ` ${unit}³` : ""}`
+	}, "vol"));
+	if (area !== void 0) rows.push(/* @__PURE__ */ jsx(Row$1, {
+		label: "Area",
+		value: `${fmt$1(area)}${unit ? ` ${unit}²` : ""}`
+	}, "area"));
+	if (triangles !== void 0) rows.push(/* @__PURE__ */ jsx(Row$1, {
+		label: "Triangles",
+		value: triangles.toLocaleString()
+	}, "tris"));
+	if (valid !== void 0) rows.push(/* @__PURE__ */ jsx(Row$1, {
+		label: "Validity",
+		value: valid ? "valid" : "invalid",
+		valueColor: valid ? "#6ee7d7" : "#f0a0a0"
+	}, "valid"));
+	if (rows.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		style: className ? void 0 : containerStyle$2,
+		children: rows
+	});
+}
+function Row$1({ label, value, valueColor }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: rowStyle$1,
+		children: [/* @__PURE__ */ jsx("span", {
+			style: labelStyle$1,
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			style: {
+				...valueStyle$1,
+				...valueColor ? { color: valueColor } : null
+			},
+			children: value
+		})]
+	});
+}
+function fmt$1(n) {
+	if (!Number.isFinite(n)) return "—";
+	if (Number.isInteger(n)) return n.toLocaleString();
+	return Number(n.toFixed(2)).toLocaleString();
+}
+var containerStyle$2 = {
+	position: "absolute",
+	left: 12,
+	bottom: 12,
+	zIndex: 10,
+	display: "flex",
+	flexDirection: "column",
+	gap: 2,
+	padding: "8px 10px",
+	borderRadius: 8,
+	minWidth: 150,
+	background: "rgba(26, 29, 33, 0.7)",
+	backdropFilter: "blur(6px)",
+	border: "1px solid rgba(255, 255, 255, 0.08)",
+	fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
+};
+var rowStyle$1 = {
+	display: "flex",
+	justifyContent: "space-between",
+	gap: 16,
+	fontSize: 12,
+	lineHeight: 1.5
+};
+var labelStyle$1 = { color: "#7b8591" };
+var valueStyle$1 = {
+	color: "#c8cdd3",
+	fontVariantNumeric: "tabular-nums"
+};
+//#endregion
+//#region src/ViewerSelectionPanel.tsx
+var SURFACE_LABELS = {
+	PLANE: "Planar",
+	CYLINDER: "Cylindrical",
+	CONE: "Conical",
+	SPHERE: "Spherical",
+	TORUS: "Toroidal",
+	BEZIER_SURFACE: "Bézier",
+	BSPLINE_SURFACE: "B-spline",
+	REVOLUTION_SURFACE: "Revolved",
+	EXTRUSION_SURFACE: "Extruded",
+	OFFSET_SURFACE: "Offset",
+	OTHER_SURFACE: "Surface"
+};
+function surfaceLabel(t) {
+	return SURFACE_LABELS[t] ?? "Surface";
+}
+function fmt(n) {
+	if (!Number.isFinite(n)) return "—";
+	if (Number.isInteger(n)) return n.toLocaleString();
+	return Number(n.toFixed(2)).toLocaleString();
+}
+function ViewerSelectionPanel({ face, onClear, unit, className }) {
+	if (!face) return null;
+	const [nx, ny, nz] = face.normal;
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: className ? void 0 : containerStyle$1,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: headerStyle,
+				children: [/* @__PURE__ */ jsxs("span", {
+					style: titleStyle,
+					children: [surfaceLabel(face.surfaceType), " face"]
+				}), onClear && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onClear,
+					"aria-label": "Clear selection",
+					style: closeStyle,
+					children: "✕"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Row, {
+				label: "Area",
+				value: `${fmt(face.area)}${unit ? ` ${unit}²` : ""}`
+			}),
+			/* @__PURE__ */ jsx(Row, {
+				label: "Normal",
+				value: `${fmt(nx)}, ${fmt(ny)}, ${fmt(nz)}`
+			})
+		]
+	});
+}
+function Row({ label, value }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: rowStyle,
+		children: [/* @__PURE__ */ jsx("span", {
+			style: labelStyle,
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			style: valueStyle,
+			children: value
+		})]
+	});
+}
+var containerStyle$1 = {
+	position: "absolute",
+	left: 12,
+	top: 12,
+	zIndex: 10,
+	display: "flex",
+	flexDirection: "column",
+	gap: 2,
+	padding: "8px 10px",
+	borderRadius: 8,
+	minWidth: 170,
+	background: "rgba(26, 29, 33, 0.7)",
+	backdropFilter: "blur(6px)",
+	border: "1px solid rgba(74, 206, 204, 0.3)",
+	fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
+};
+var headerStyle = {
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	gap: 12,
+	marginBottom: 2
+};
+var titleStyle = {
+	color: "#6ee7d7",
+	fontSize: 12,
+	fontWeight: 600
+};
+var closeStyle = {
+	cursor: "pointer",
+	border: "none",
+	background: "transparent",
+	color: "#7b8591",
+	fontSize: 12,
+	lineHeight: 1,
+	padding: 0
+};
+var rowStyle = {
+	display: "flex",
+	justifyContent: "space-between",
+	gap: 16,
+	fontSize: 12,
+	lineHeight: 1.5
+};
+var labelStyle = { color: "#7b8591" };
+var valueStyle = {
+	color: "#c8cdd3",
+	fontVariantNumeric: "tabular-nums"
+};
+//#endregion
+//#region src/ViewerSectionControls.tsx
+var AXES = [
+	"x",
+	"y",
+	"z"
+];
+function ViewerSectionControls({ enabled, onToggle, axis, onAxisChange, position, min, max, onPositionChange, flip, onToggleFlip, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: className ? void 0 : containerStyle,
+		children: [/* @__PURE__ */ jsx(Btn, {
+			label: "Section",
+			active: enabled,
+			onClick: onToggle
+		}), enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+			AXES.map((a) => /* @__PURE__ */ jsx(Btn, {
+				label: a.toUpperCase(),
+				active: axis === a,
+				onClick: () => {
+					onAxisChange(a);
+				}
+			}, a)),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				min,
+				max,
+				step: (max - min) / 200 || .01,
+				value: position,
+				disabled: min === max,
+				onChange: (e) => {
+					onPositionChange(Number(e.target.value));
+				},
+				"aria-label": "Section position",
+				style: {
+					...sliderStyle,
+					...min === max ? { opacity: .4 } : null
+				}
+			}),
+			/* @__PURE__ */ jsx(Btn, {
+				label: "Flip",
+				active: flip,
+				onClick: onToggleFlip
+			})
+		] })]
+	});
+}
+function Btn({ label, active, onClick }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		"aria-pressed": active,
+		style: {
+			...buttonStyle,
+			...active ? activeButtonStyle : null
+		},
+		children: label
+	});
+}
+var containerStyle = {
+	position: "absolute",
+	bottom: 12,
+	left: "50%",
+	transform: "translateX(-50%)",
+	zIndex: 10,
+	display: "flex",
+	alignItems: "center",
+	gap: 4,
+	padding: 4,
+	borderRadius: 8,
+	background: "rgba(26, 29, 33, 0.7)",
+	backdropFilter: "blur(6px)",
+	border: "1px solid rgba(255, 255, 255, 0.08)",
+	fontFamily: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
+};
+var buttonStyle = {
+	cursor: "pointer",
+	padding: "4px 10px",
+	borderRadius: 5,
+	fontSize: 12,
+	fontWeight: 500,
+	lineHeight: 1.2,
+	color: "#9aa3ad",
+	background: "rgba(255, 255, 255, 0.04)",
+	border: "1px solid transparent"
+};
+var activeButtonStyle = {
+	color: "#6ee7d7",
+	background: "rgba(45, 212, 191, 0.16)",
+	borderColor: "rgba(45, 212, 191, 0.3)"
+};
+var sliderStyle = {
+	width: 160,
+	accentColor: "#4ACECC",
+	margin: "0 4px"
+};
+//#endregion
+export { EdgeRenderer, Renderer, SceneSetup, SelectionHighlight, VIEW_NAMES, ViewerCanvas, ViewerControls, ViewerInfoPanel, ViewerSectionControls, ViewerSelectionPanel, buildGeometry, findFaceGroupAt, meshBounds, meshSize, sectionPlane };