@rslsp1/fa-app-tools 10.0.1 → 10.3.2

package/dist/StageEngine-3MOBM2WX.mjs

@@ -0,0 +1,590 @@
+import {
+  clampZoom,
+  fitPlaneView,
+  gridStep,
+  nudgePosition,
+  planeAxes,
+  screenToPlane,
+  snapPosition,
+  stageFrame,
+  vector3,
+  zoomPlaneView
+} from "./chunk-TFWIMFNF.mjs";
+
+// src/features/szenen/areas/StageEngine.tsx
+import React, { useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var radians = (v) => v.map((x) => THREE.MathUtils.degToRad(x));
+function geometry(node) {
+  const [x, y, z] = node.dimensions;
+  if (node.primitive === "sphere") return new THREE.SphereGeometry(0.5, 16, 10).scale(x, y, z);
+  if (node.primitive === "cylinder") return new THREE.CylinderGeometry(0.5, 0.5, 1, 16).rotateX(Math.PI / 2).scale(x, y, z);
+  return new THREE.BoxGeometry(x, y, z);
+}
+function anchor(frame, target) {
+  const t = target;
+  const node = frame.nodes.find((n) => n.node_id === t?.node_ref);
+  if (!node) throw new Error("Das Kamera-Blickziel ist nicht platziert oder ausgeblendet.");
+  const key = t.anchor ?? "center";
+  const explicit = node.anchors?.[key];
+  if (!explicit && key !== "center" && key !== "base") throw new Error(`Anker \u201E${key}\u201C an \u201E${node.node_id}\u201C ben\xF6tigt eine explizite lokale Position.`);
+  const local = new THREE.Vector3(...vector3(explicit ?? (key === "base" ? [0, 0, -node.dimensions[2] / 2] : [0, 0, 0]), "Anker"));
+  local.multiply(new THREE.Vector3(...node.scale)).applyEuler(new THREE.Euler(...radians(node.rotation), "XYZ"));
+  return local.add(new THREE.Vector3(...node.position));
+}
+function cameraFor(frame) {
+  const c = frame.camera;
+  const camera = new THREE.PerspectiveCamera(c.vertical_fov_deg, c.aspect, 0.01, 1e4);
+  camera.position.set(...c.position);
+  camera.up.set(0, 0, 1);
+  if (c.orientation.mode === "explicit") camera.rotation.set(...radians(vector3(c.orientation.rotation_euler_deg, "Kameraausrichtung")), "XYZ");
+  else {
+    const target = anchor(frame, c.orientation.target);
+    const direction = target.clone().sub(camera.position);
+    if (direction.lengthSq() < 1e-12) throw new Error("Kamera und Blickziel liegen am selben Punkt.");
+    if (Math.abs(direction.normalize().dot(camera.up)) > 0.9999) {
+      if (!c.orientation.up_hint) throw new Error("F\xFCr diese senkrechte Blickrichtung bitte up_hint festlegen.");
+      camera.up.set(...vector3(c.orientation.up_hint, "Kamera-Up"));
+      if (camera.up.lengthSq() < 1e-12 || Math.abs(direction.dot(camera.up.clone().normalize())) > 0.9999) throw new Error("Kamera-Up und Blickrichtung m\xFCssen verschiedene Achsen bilden.");
+    }
+    camera.lookAt(target);
+    if (typeof c.orientation.roll_deg === "number") camera.rotateZ(THREE.MathUtils.degToRad(c.orientation.roll_deg));
+  }
+  camera.updateMatrixWorld();
+  return camera;
+}
+var SNAP = 0.05;
+var CAMERA_COLOR = "#60a5fa";
+var AXIS_COLOR = ["#f87171", "#4ade80", "#60a5fa"];
+var meters = (v) => v.toLocaleString("de-DE", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+function corners(node, position = node.position) {
+  const m = new THREE.Matrix4().compose(new THREE.Vector3(...position), new THREE.Quaternion().setFromEuler(new THREE.Euler(...radians(node.rotation), "XYZ")), new THREE.Vector3(...node.scale));
+  const [x, y, z] = node.dimensions.map((d) => d / 2);
+  return [-1, 1].flatMap((a) => [-1, 1].flatMap((b) => [-1, 1].map((c) => new THREE.Vector3(a * x, b * y, c * z).applyMatrix4(m))));
+}
+function withDrag(frame, drag) {
+  if (!drag) return frame;
+  if (drag.kind === "camera") return { ...frame, camera: { ...frame.camera, position: drag.position } };
+  return { ...frame, nodes: frame.nodes.map((n) => n.node_id === drag.id ? { ...n, position: drag.position } : n) };
+}
+function lineGeometry(points) {
+  return new THREE.BufferGeometry().setFromPoints(points);
+}
+function disposeScene(scene) {
+  const geometries = /* @__PURE__ */ new Set(), materials = /* @__PURE__ */ new Set();
+  scene.traverse((object) => {
+    const drawable = object;
+    if (drawable.geometry) geometries.add(drawable.geometry);
+    if (drawable.material) for (const m of Array.isArray(drawable.material) ? drawable.material : [drawable.material]) materials.add(m);
+  });
+  geometries.forEach((g) => g.dispose());
+  materials.forEach((m) => m.dispose());
+}
+function proxyMesh(node, position = node.position) {
+  const mesh = new THREE.Mesh(geometry(node), new THREE.MeshBasicMaterial({ color: node.preview_color.hex }));
+  mesh.position.set(...position);
+  mesh.rotation.set(...radians(node.rotation), "XYZ");
+  mesh.scale.set(...node.scale);
+  mesh.userData.nodeId = node.node_id;
+  return mesh;
+}
+function addGrid(scene, plane, view, width, height) {
+  const step = gridStep(view.zoom), major = gridStep(view.zoom, 72);
+  const span = Math.max(width, height) / view.zoom;
+  const [cu, cv] = view.center.map((c) => Math.round(c / (major * 4)) * major * 4);
+  const point = (u, v) => plane === "top" ? new THREE.Vector3(u, v, 0) : new THREE.Vector3(u, 0, v);
+  const reach = Math.ceil(span / major + 4) * major;
+  const minor = [], strong = [];
+  const isMajor = (x) => Math.abs(x / major - Math.round(x / major)) < 1e-6;
+  for (let i = Math.floor((cu - reach) / step); i <= Math.ceil((cu + reach) / step); i++) {
+    const u = i * step;
+    if (Math.abs(u) < 1e-9) continue;
+    (isMajor(u) ? strong : minor).push(point(u, cv - reach), point(u, cv + reach));
+  }
+  for (let i = Math.floor((cv - reach) / step); i <= Math.ceil((cv + reach) / step); i++) {
+    const v = i * step;
+    if (Math.abs(v) < 1e-9) continue;
+    (isMajor(v) ? strong : minor).push(point(cu - reach, v), point(cu + reach, v));
+  }
+  const flat = { depthTest: false, depthWrite: false, transparent: true };
+  const line = (points, tint, opacity, order) => {
+    const object = new THREE.LineSegments(lineGeometry(points), new THREE.LineBasicMaterial({ color: tint, opacity, ...flat }));
+    object.renderOrder = order;
+    scene.add(object);
+  };
+  if (plane === "side") {
+    const ground = new THREE.Mesh(
+      new THREE.PlaneGeometry(reach * 2, reach).rotateX(Math.PI / 2).translate(cu, 0, -reach / 2),
+      new THREE.MeshBasicMaterial({ color: "#000000", opacity: 0.35, ...flat, side: THREE.DoubleSide })
+    );
+    ground.renderOrder = -3;
+    scene.add(ground);
+  }
+  line(minor, "#ffffff", 0.05, -2);
+  line(strong, "#ffffff", 0.12, -2);
+  line([point(cu - reach, 0), point(cu + reach, 0)], AXIS_COLOR[0], 0.55, -1);
+  line([point(0, cv - reach), point(0, cv + reach)], AXIS_COLOR[plane === "top" ? 1 : 2], 0.55, -1);
+}
+function addCameraGlyph(scene, camera, length, pixel, active) {
+  const origin = camera.position.clone(), forward = camera.getWorldDirection(new THREE.Vector3());
+  const ends = [[-1, -1], [1, -1], [1, 1], [-1, 1]].map(([x, y]) => {
+    const dir = new THREE.Vector3(x, y, 0.5).unproject(camera).sub(origin).normalize();
+    return origin.clone().add(dir.multiplyScalar(length / dir.dot(forward)));
+  });
+  const flat = { depthWrite: false, transparent: true };
+  const faces = new THREE.Mesh(
+    lineGeometry(ends.flatMap((c, i) => [origin, c, ends[(i + 1) % 4]])),
+    new THREE.MeshBasicMaterial({ color: CAMERA_COLOR, opacity: 0.05, side: THREE.DoubleSide, ...flat })
+  );
+  faces.renderOrder = 1;
+  scene.add(faces);
+  const edges = new THREE.LineSegments(
+    lineGeometry(ends.flatMap((c, i) => [origin, c, c, ends[(i + 1) % 4]])),
+    new THREE.LineBasicMaterial({ color: CAMERA_COLOR, opacity: active ? 0.9 : 0.4, ...flat })
+  );
+  edges.renderOrder = 2;
+  scene.add(edges);
+  const axis = new THREE.LineSegments(
+    lineGeometry([origin, origin.clone().add(forward.multiplyScalar(length))]),
+    new THREE.LineBasicMaterial({ color: CAMERA_COLOR, opacity: 0.3, ...flat })
+  );
+  axis.renderOrder = 2;
+  scene.add(axis);
+  for (const [radius, tint, order] of [[active ? 9 : 7, active ? "#ffffff" : CAMERA_COLOR, 3], [4, active ? CAMERA_COLOR : "#0b1220", 4]]) {
+    const dot = new THREE.Mesh(
+      new THREE.SphereGeometry(radius * pixel, 20, 12),
+      new THREE.MeshBasicMaterial({ color: tint, depthTest: false, transparent: true })
+    );
+    dot.position.copy(origin);
+    dot.renderOrder = order;
+    scene.add(dot);
+  }
+}
+function StageSurface({ frame, perspective, view, planeView, selected, hovered, frustum, world, cameraActive }) {
+  const canvas = useRef(null);
+  const renderer = useRef(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    const el = canvas.current;
+    let gl;
+    try {
+      gl = new THREE.WebGLRenderer({ canvas: el, antialias: true });
+      gl.outputColorSpace = THREE.SRGBColorSpace;
+      gl.toneMapping = THREE.NoToneMapping;
+      renderer.current = gl;
+    } catch {
+      setError("Die 3D-B\xFChne ben\xF6tigt WebGL 2. Bitte Browser und Grafikunterst\xFCtzung pr\xFCfen.");
+      return;
+    }
+    const lost = (event) => {
+      event.preventDefault();
+      setError("Der WebGL-Kontext der 3D-B\xFChne wurde verloren. Bitte die B\xFChne erneut \xF6ffnen.");
+    };
+    el.addEventListener("webglcontextlost", lost);
+    const observer = new ResizeObserver(([entry]) => setSize({ width: entry.contentRect.width, height: entry.contentRect.height }));
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      el.removeEventListener("webglcontextlost", lost);
+      renderer.current = null;
+      world.camera = null;
+      world.meshes.clear();
+      gl.dispose();
+      gl.forceContextLoss();
+    };
+  }, [world]);
+  React.useLayoutEffect(() => {
+    const gl = renderer.current;
+    if (!gl || !size.width || !size.height) return;
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(view === "camera" ? "#eef0f3" : "#0d0f12");
+    const pixel = view === "camera" || !planeView ? 0.01 : 1 / planeView.zoom;
+    let camera = perspective;
+    try {
+      world.meshes.clear();
+      if (view !== "camera") {
+        if (!planeView) return;
+        const [u, v] = planeView.center;
+        const ortho = new THREE.OrthographicCamera(-size.width / 2, size.width / 2, size.height / 2, -size.height / 2, 0.1, 4e3);
+        ortho.zoom = planeView.zoom;
+        if (view === "top") {
+          ortho.position.set(u, v, 1e3);
+          ortho.up.set(0, 1, 0);
+          ortho.lookAt(u, v, 0);
+        } else {
+          ortho.position.set(u, -1e3, v);
+          ortho.up.set(0, 0, 1);
+          ortho.lookAt(u, 0, v);
+        }
+        ortho.updateProjectionMatrix();
+        ortho.updateMatrixWorld();
+        camera = ortho;
+        addGrid(scene, view, planeView, size.width, size.height);
+        addCameraGlyph(scene, perspective, frustum, pixel, cameraActive);
+      }
+      for (const node of frame.nodes) {
+        const mesh = proxyMesh(node);
+        const editor = view !== "camera", active = selected === node.node_id, hover = hovered === node.node_id;
+        mesh.material.transparent = editor;
+        mesh.material.opacity = editor ? active || hover ? 0.95 : 0.78 : 1;
+        if (editor || active) mesh.add(new THREE.LineSegments(
+          new THREE.EdgesGeometry(mesh.geometry, 15),
+          new THREE.LineBasicMaterial({ color: active ? "#ffffff" : hover ? "#f5f5f5" : node.preview_color.hex })
+        ));
+        scene.add(mesh);
+        world.meshes.set(node.node_id, mesh);
+        if (editor && active) {
+          const halo = new THREE.Mesh(mesh.geometry, new THREE.MeshBasicMaterial({ color: "#ffffff", transparent: true, opacity: 0.14, depthWrite: false }));
+          halo.position.copy(mesh.position);
+          halo.rotation.copy(mesh.rotation);
+          halo.scale.set(...node.dimensions.map((d, i) => node.scale[i] + 2 * 5 * pixel / d));
+          halo.renderOrder = -1;
+          scene.add(halo);
+        }
+      }
+      world.camera = camera;
+      scene.updateMatrixWorld(true);
+      gl.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
+      gl.setSize(size.width, size.height, false);
+      gl.render(scene, camera);
+    } catch (cause) {
+      setError(`Die 3D-B\xFChne konnte nicht gerendert werden: ${cause instanceof Error ? cause.message : String(cause)}`);
+    }
+    return () => {
+      world.meshes.clear();
+      world.camera = null;
+      disposeScene(scene);
+    };
+  }, [frame, perspective, view, planeView, selected, hovered, frustum, world, cameraActive, size]);
+  if (error) throw new Error(error);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvas, className: "szenen-3d__canvas", "aria-label": "3D-Rendering" });
+}
+function StageEngine(props) {
+  const { view, selected, onSelect, onMove, onMoveCamera } = props;
+  const labels = props.labels ?? {};
+  const frame = React.useMemo(() => stageFrame(props.input), [props.input]);
+  const savedCamera = React.useMemo(() => cameraFor(frame), [frame]);
+  const [drag, setDrag] = useState(null);
+  const [hovered, setHovered] = useState(null);
+  const [views, setViews] = useState({ top: null, side: null });
+  const [box, setBox] = useState({ width: 0, height: 0 });
+  const viewport = useRef(null);
+  const surface = useRef(null);
+  const gesture = useRef(null);
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const pinch = useRef(null);
+  const world = React.useMemo(() => ({ camera: null, meshes: /* @__PURE__ */ new Map() }), []);
+  const live = React.useMemo(() => withDrag(frame, drag), [frame, drag]);
+  const perspective = React.useMemo(() => {
+    if (live === frame) return savedCamera;
+    try {
+      return cameraFor(live);
+    } catch {
+      return savedCamera;
+    }
+  }, [live, frame, savedCamera]);
+  const plane = view === "camera" ? null : view;
+  const planeView = plane ? views[plane] : null;
+  const points = React.useMemo(() => [...frame.nodes.flatMap((n) => corners(n).map((c) => c.toArray())), frame.camera.position], [frame]);
+  const frustum = React.useMemo(() => {
+    const forward = perspective.getWorldDirection(new THREE.Vector3());
+    const depth = Math.max(0, ...live.nodes.flatMap((n) => corners(n)).map((c) => c.sub(perspective.position).dot(forward)));
+    return Math.max(1, depth + 0.5);
+  }, [live, perspective]);
+  const fit = React.useCallback(() => {
+    if (!plane || !box.width) return;
+    setViews((v) => ({ ...v, [plane]: fitPlaneView(points, plane, Math.max(1, box.width - 32), Math.max(1, box.height - 2 * 56)) }));
+  }, [plane, box, points]);
+  useEffect(() => {
+    if (plane && !views[plane] && box.width) fit();
+  }, [plane, views, box, fit]);
+  useEffect(() => {
+    const el = surface.current;
+    if (!el) return;
+    const observer = new ResizeObserver(([entry]) => setBox({ width: entry.contentRect.width, height: entry.contentRect.height }));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const zoomBy = React.useCallback((factor, dx = 0, dy = 0) => {
+    if (!plane) return;
+    setViews((v) => v[plane] ? { ...v, [plane]: zoomPlaneView(v[plane], factor, dx, dy) } : v);
+  }, [plane]);
+  useEffect(() => {
+    const el = surface.current;
+    if (!el || !plane) return;
+    const wheel = (event) => {
+      event.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const delta = event.deltaY * (event.deltaMode === 1 ? 16 : 1);
+      zoomBy(Math.exp(-delta * 15e-4), event.clientX - rect.left - rect.width / 2, event.clientY - rect.top - rect.height / 2);
+    };
+    el.addEventListener("wheel", wheel, { passive: false });
+    return () => el.removeEventListener("wheel", wheel);
+  }, [plane, zoomBy]);
+  function pick(clientX, clientY, touch = false) {
+    const el = surface.current, camera = world.camera;
+    if (!el || !camera) return null;
+    const rect = el.getBoundingClientRect();
+    const ndc = new THREE.Vector2((clientX - rect.left) / rect.width * 2 - 1, -(clientY - rect.top) / rect.height * 2 + 1);
+    if (plane) {
+      const c = perspective.position.clone().project(camera);
+      if (Math.hypot((c.x - ndc.x) * rect.width / 2, (c.y - ndc.y) * rect.height / 2) <= (touch ? 24 : 14)) return { kind: "camera", id: "camera" };
+    }
+    const raycaster = new THREE.Raycaster();
+    raycaster.setFromCamera(ndc, camera);
+    const hit = raycaster.intersectObjects([...world.meshes.values()], false)[0];
+    if (hit) return { kind: "node", id: hit.object.userData.nodeId };
+    if (!touch) return null;
+    const px = clientX - rect.left, py = clientY - rect.top;
+    let best = null;
+    for (const node of live.nodes) {
+      const screen = corners(node).map((c) => c.project(camera)).map((c) => [(c.x + 1) / 2 * rect.width, (1 - c.y) / 2 * rect.height]);
+      const xs = screen.map((p) => p[0]), ys = screen.map((p) => p[1]);
+      const distance = Math.hypot(Math.max(Math.min(...xs) - px, 0, px - Math.max(...xs)), Math.max(Math.min(...ys) - py, 0, py - Math.max(...ys)));
+      if (distance <= 20 && (!best || distance < best.distance)) best = { id: node.node_id, distance };
+    }
+    return best ? { kind: "node", id: best.id } : null;
+  }
+  const local = (x, y) => {
+    const rect = surface.current.getBoundingClientRect();
+    return [x - rect.left - rect.width / 2, y - rect.top - rect.height / 2];
+  };
+  function onPointerDown(event) {
+    pointers.current.set(event.pointerId, [event.clientX, event.clientY]);
+    event.currentTarget.setPointerCapture(event.pointerId);
+    if (pointers.current.size === 2 && plane && planeView) {
+      const [[ax, ay], [bx, by]] = [...pointers.current.values()];
+      gesture.current = null;
+      setDrag(null);
+      pinch.current = { distance: Math.max(1, Math.hypot(ax - bx, ay - by)), mid: local((ax + bx) / 2, (ay + by) / 2), view: planeView };
+      return;
+    }
+    if (gesture.current || pinch.current) return;
+    viewport.current?.focus({ preventScroll: true });
+    const hit = event.button === 0 ? pick(event.clientX, event.clientY, event.pointerType !== "mouse") : null;
+    const node = hit?.kind === "node" ? live.nodes.find((n) => n.node_id === hit.id) : null;
+    const kind = !plane ? hit ? hit.kind : "none" : hit ? hit.kind : "pan";
+    gesture.current = {
+      pointer: event.pointerId,
+      kind,
+      id: hit?.id ?? "",
+      x: event.clientX,
+      y: event.clientY,
+      view: planeView,
+      moved: false,
+      start: hit?.kind === "camera" ? live.camera.position : node?.position ?? [0, 0, 0],
+      threshold: event.pointerType === "mouse" ? 3 : 8
+    };
+    if (hit?.kind === "node") onSelect(hit.id);
+  }
+  function onPointerMove(event) {
+    if (pointers.current.has(event.pointerId)) pointers.current.set(event.pointerId, [event.clientX, event.clientY]);
+    const p = pinch.current;
+    if (p && plane) {
+      const [[ax, ay], [bx, by]] = [...pointers.current.values()];
+      const zoom2 = clampZoom(p.view.zoom * Math.hypot(ax - bx, ay - by) / p.distance);
+      const [mx, my] = local((ax + bx) / 2, (ay + by) / 2);
+      const [u, v] = screenToPlane(p.view, p.mid[0], p.mid[1]);
+      setViews((vs) => ({ ...vs, [plane]: { zoom: zoom2, center: [u - mx / zoom2, v + my / zoom2] } }));
+      return;
+    }
+    const g = gesture.current;
+    if (!g) {
+      if (event.pointerType !== "mouse") return;
+      const hit = pick(event.clientX, event.clientY);
+      const id = hit ? hit.kind === "camera" ? "#camera" : hit.id : null;
+      if (id !== hovered) setHovered(id);
+      return;
+    }
+    if (g.pointer !== event.pointerId) return;
+    const dx = event.clientX - g.x, dy = event.clientY - g.y;
+    if (!g.moved && Math.hypot(dx, dy) < g.threshold) return;
+    g.moved = true;
+    if (!plane || !g.view) return;
+    const zoom = g.view.zoom;
+    if (g.kind === "pan") {
+      const [u, v] = g.view.center;
+      setViews((vs) => ({ ...vs, [plane]: { zoom, center: [u - dx / zoom, v + dy / zoom] } }));
+    } else if (g.kind === "node" || g.kind === "camera" && onMoveCamera) {
+      const moved = nudgePosition(g.start, plane, dx / zoom, -dy / zoom);
+      setDrag({ kind: g.kind, id: g.id, position: event.shiftKey ? moved : snapPosition(moved, plane, SNAP) });
+    }
+  }
+  function finish(event, save) {
+    pointers.current.delete(event.pointerId);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+    if (pinch.current) {
+      if (!pointers.current.size) pinch.current = null;
+      return;
+    }
+    const g = gesture.current;
+    if (!g || g.pointer !== event.pointerId) return;
+    gesture.current = null;
+    if (save && g.moved && drag) {
+      if (drag.kind === "node") onMove(drag.id, drag.position);
+      else onMoveCamera?.(drag.position);
+    }
+    if (save && !g.moved && g.kind === "pan") onSelect(null);
+    setDrag(null);
+  }
+  function onKeyDown(event) {
+    const arrows = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, 1], ArrowDown: [0, -1] };
+    const node = live.nodes.find((n) => n.node_id === selected);
+    if (arrows[event.key] && plane && node) {
+      const step = event.shiftKey ? 0.5 : SNAP;
+      onMove(node.node_id, nudgePosition(node.position, plane, arrows[event.key][0] * step, arrows[event.key][1] * step));
+    } else if (event.key === "Escape" && selected) onSelect(null);
+    else if ((event.key === "f" || event.key === "F") && plane) fit();
+    else if ((event.key === "+" || event.key === "=") && plane) zoomBy(1.25);
+    else if (event.key === "-" && plane) zoomBy(0.8);
+    else return;
+    event.preventDefault();
+  }
+  const axes = plane ? planeAxes(plane) : null;
+  const toScreen = (u, v) => planeView ? [box.width / 2 + (u - planeView.center[0]) * planeView.zoom, box.height / 2 - (v - planeView.center[1]) * planeView.zoom] : [0, 0];
+  const target = drag ? drag.kind === "camera" ? "#camera" : drag.id : hovered;
+  const name = (id) => id === "#camera" ? frame.camera.name ?? "Kamera" : labels[id] ?? id;
+  const position = drag?.position ?? (target === "#camera" ? live.camera.position : live.nodes.find((n) => n.node_id === target)?.position);
+  const cursor = !plane ? hovered ? "pointer" : "default" : drag || gesture.current?.kind === "pan" && gesture.current.moved ? "grabbing" : hovered && (hovered !== "#camera" || onMoveCamera) ? "grab" : "default";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: viewport,
+      className: "szenen-3d__viewport",
+      "data-view": view,
+      tabIndex: 0,
+      onKeyDown,
+      "aria-label": `3D-B\xFChne, ${view === "top" ? "Draufsicht" : view === "side" ? "Seitenansicht" : "Kameraansicht"}. Ziehen verschiebt, Pfeiltasten verschieben das gew\xE4hlte Element.`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: surface,
+            className: "szenen-3d__surface",
+            style: { cursor, ...view === "camera" ? { ["--seitenverhaeltnis"]: String(frame.camera.aspect) } : {} },
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: (e) => finish(e, true),
+            onPointerCancel: (e) => finish(e, false),
+            onPointerLeave: () => {
+              if (!gesture.current && hovered) setHovered(null);
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                StageSurface,
+                {
+                  frame: live,
+                  perspective,
+                  view,
+                  planeView,
+                  selected,
+                  hovered,
+                  frustum,
+                  world,
+                  cameraActive: target === "#camera"
+                }
+              ),
+              plane && planeView && /* @__PURE__ */ jsxs("div", { className: "szenen-3d__labels", "aria-hidden": "true", children: [
+                live.nodes.map((n) => {
+                  const [u, v] = planeAxes(plane);
+                  const edge = plane === "top" ? Math.min(...corners(n).map((c) => c.getComponent(v))) : Math.max(...corners(n).map((c) => c.getComponent(v)));
+                  const [x, y] = toScreen(n.position[u], edge);
+                  return /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `szenen-3d__label szenen-3d__label--${plane}${selected === n.node_id ? " is-selected" : ""}`,
+                      style: { left: x, top: y, ["--farbe"]: n.preview_color.hex },
+                      children: labels[n.node_id] ?? n.node_id
+                    },
+                    n.node_id
+                  );
+                }),
+                (() => {
+                  const [x, y] = toScreen(live.camera.position[planeAxes(plane)[0]], live.camera.position[planeAxes(plane)[1]]);
+                  return /* @__PURE__ */ jsx("span", { className: `szenen-3d__label szenen-3d__label--kamera${x > box.width - 160 ? " is-links" : ""}`, style: { left: x, top: y }, children: frame.camera.name ?? "Kamera" });
+                })()
+              ] })
+            ]
+          }
+        ),
+        plane ? /* @__PURE__ */ jsxs("div", { className: "szenen-3d__hud szenen-3d__hud--werkzeuge", role: "group", "aria-label": "Ansicht steuern", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => zoomBy(1 / 1.25), "aria-label": "Verkleinern", title: "Verkleinern (\u2212)", children: "\u2212" }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => zoomBy(1.25), "aria-label": "Vergr\xF6\xDFern", title: "Vergr\xF6\xDFern (+)", children: "+" }),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: fit, title: "Alles einpassen (F)", children: "Einpassen" })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "szenen-3d__hud szenen-3d__hud--kamera", children: [
+          frame.camera.name ?? "Kamera",
+          " \xB7 ",
+          frame.camera.aspect_ratio,
+          " \xB7 ",
+          meters(frame.camera.focal_length_mm).replace(/,00$/, ""),
+          " mm"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "szenen-3d__hud szenen-3d__hud--info", "aria-live": "polite", children: target && position ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("strong", { children: name(target) }),
+          (axes ?? [0, 1, 2]).map((a) => /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx("i", { style: { color: AXIS_COLOR[a] }, children: "XYZ"[a] }),
+            " ",
+            meters(position[a])
+          ] }, a)),
+          /* @__PURE__ */ jsx("span", { children: "m" })
+        ] }) : plane ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "szenen-3d__nur-maus", children: "Ziehen verschiebt \xB7 Mausrad zoomt \xB7 Shift ohne Raster" }),
+          /* @__PURE__ */ jsx("span", { className: "szenen-3d__nur-touch", children: "Ziehen verschiebt \xB7 zwei Finger zoomen" })
+        ] }) : /* @__PURE__ */ jsx("span", { children: "So sieht das Kamera-Preview aus" }) }),
+        axes && /* @__PURE__ */ jsxs("div", { className: "szenen-3d__hud szenen-3d__hud--achsen", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs("span", { style: { color: AXIS_COLOR[axes[0]] }, children: [
+            "XYZ"[axes[0]],
+            " \u2192"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { style: { color: AXIS_COLOR[axes[1]] }, children: [
+            "XYZ"[axes[1]],
+            " \u2191"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+async function renderCameraPreview(input) {
+  const frame = stageFrame(input);
+  const [rw, rh] = frame.camera.aspect_ratio.split(":").map(Number);
+  const scale = 768 / Math.max(rw, rh);
+  const width = Math.round(rw * scale), height = Math.round(rh * scale);
+  if (Math.abs(width / height - frame.camera.aspect) > 1e-9) throw new Error("Dieses Kameraformat l\xE4sst sich mit der Preview-Aufl\xF6sung nicht exakt abbilden. Bitte ein Format-Preset w\xE4hlen.");
+  const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
+  const scene = new THREE.Scene();
+  scene.background = new THREE.Color("#eef0f3");
+  try {
+    renderer.setSize(width, height, false);
+    renderer.setPixelRatio(1);
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    renderer.toneMapping = THREE.NoToneMapping;
+    for (const node of frame.nodes) {
+      scene.add(proxyMesh(node));
+    }
+    renderer.render(scene, cameraFor(frame));
+    const gl = renderer.getContext();
+    const rgba = new Uint8Array(width * height * 4);
+    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, rgba);
+    const solid_color_pixels = Object.fromEntries(frame.nodes.map((n) => [n.node_id, 0]));
+    const lookup = new Map(frame.nodes.map((n) => [parseInt(n.preview_color.hex.slice(1), 16), n.node_id]));
+    for (let i = 0; i < rgba.length; i += 4) {
+      const id = lookup.get(rgba[i] << 16 | rgba[i + 1] << 8 | rgba[i + 2]);
+      if (id) solid_color_pixels[id]++;
+    }
+    const data = renderer.domElement.toDataURL("image/png").split(",")[1];
+    const bytes = Uint8Array.from(atob(data), (c) => c.charCodeAt(0));
+    const digest = await crypto.subtle.digest("SHA-256", bytes);
+    return { data, solid_color_pixels, mime_type: "image/png", width, height, camera_id: frame.camera.camera_id, sha256: Array.from(new Uint8Array(digest), (v) => v.toString(16).padStart(2, "0")).join("") };
+  } finally {
+    disposeScene(scene);
+    renderer.dispose();
+    renderer.forceContextLoss();
+  }
+}
+export {
+  StageEngine,
+  renderCameraPreview
+};