@pascal-app/viewer 1.0.3 → 1.0.5

package/dist/components/viewer/glb-scene.js

@@ -1,24 +1,22 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { bakePolicyOf } from '@pascal-app/core';
-import { Html, useAnimations } from '@react-three/drei';
+import { bakePolicyOf, containsPoint, distanceToBoundary, EXPLODED_GAP, itemInteraction, itemPrompt, operateItem, polygonInteriorPoint, useInteractive, } from '@pascal-app/core';
+import { operableParts, ProceduralMotionController, } from '@pascal-app/core/procedural-items';
 import { useFrame, useThree } from '@react-three/fiber';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { lerp } from 'three/src/math/MathUtils.js';
-import { color, float, uniform, uv } from 'three/tsl';
-import { MeshBasicNodeMaterial } from 'three/webgpu';
 import { acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh';
 import { useGLTFKTX2 } from '../../hooks/use-gltf-ktx2';
-import { ZONE_LAYER } from '../../lib/layers';
 import { createSurfaceRoleMaterial } from '../../lib/materials';
 import { applyShadowOnly, clearShadowOnly } from '../../lib/shadow-only';
 import useViewer from '../../store/use-viewer';
+import { useClipActions } from '../../systems/interactive/scripted-clips';
+import { resolveLevelVisibility } from '../../systems/level/level-utils';
 import { GlbInteractive } from './glb-interactive';
+import { bakedLoopMechanisms } from './glb-mechanisms';
 import { GlbReferenceNodes } from './glb-reference-nodes';
 import { GlbReplaceInstances } from './glb-replace-instances';
-/** Vertical gap added per floor in `exploded` level mode (matches LevelSystem). */
-const EXPLODED_GAP = 5;
 /** Baked `kind` → surface role, so monochrome can recolor by role like the
  *  parametric viewer (textures-off collapses each face to its themed clay). */
 const ROLE_BY_KIND = {
@@ -32,6 +30,8 @@ const ROLE_BY_KIND = {
     door: 'joinery',
     item: 'furnishing',
 };
+/** Kinds a pointer passes through to what lies behind (they frame, they don't get picked). */
+const PASS_THROUGH_KINDS = new Set(['site', 'building', 'level', 'zone', 'ceiling', 'spawn']);
 function findIdentityAncestor(object) {
     let current = object;
     while (current) {
@@ -41,6 +41,16 @@ function findIdentityAncestor(object) {
     }
     return null;
 }
+function findProceduralMotionAncestor(object) {
+    let current = object;
+    while (current) {
+        const motion = current.userData.proceduralMotion;
+        if (motion)
+            return motion;
+        current = current.parent;
+    }
+    return undefined;
+}
 function findAncestorLevelId(object) {
     let current = object.parent;
     while (current) {
@@ -52,150 +62,142 @@ function findAncestorLevelId(object) {
     return null;
 }
 const _local = new THREE.Vector3();
-const _floorHit = new THREE.Vector3();
-const _floorPlanePoint = new THREE.Vector3();
-const _floorPlane = new THREE.Plane();
-const _up = new THREE.Vector3(0, 1, 0);
-const _bounds = new THREE.Box3();
-const _boundsCenter = new THREE.Vector3();
-const _sample = new THREE.Vector3();
 const _camBox = new THREE.Box3();
 const _camCenter = new THREE.Vector3();
 const _camSize = new THREE.Vector3();
-const _camPoint = new THREE.Vector3();
 const _walkPos = new THREE.Vector3();
 const _reticleNdc = new THREE.Vector2(0, 0);
 const _reticleRaycaster = new THREE.Raycaster();
-/** How far ahead (metres) a door/window counts as "in view" for activation. */
+/** How far ahead (metres) an interactive part counts as "in view" for activation. */
 const WALK_REACH = 3;
 const ZONE_FOOTPRINT_EPSILON = 0.05;
-const NO_RAYCAST = () => { };
-/** Ray-cast point-in-polygon (polygon is a list of [x, z] in the test frame). */
-function pointInPolygon(x, z, polygon) {
-    let inside = false;
-    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-        const [xi, zi] = polygon[i];
-        const [xj, zj] = polygon[j];
-        if (zi > z !== zj > z && x < ((xj - xi) * (z - zi)) / (zj - zi) + xi)
-            inside = !inside;
-    }
-    return inside;
-}
-function pointOnSegment(x, z, ax, az, bx, bz) {
-    const dx = bx - ax;
-    const dz = bz - az;
-    const lengthSq = dx * dx + dz * dz;
-    if (lengthSq === 0)
-        return Math.hypot(x - ax, z - az) <= ZONE_FOOTPRINT_EPSILON;
-    const t = Math.max(0, Math.min(1, ((x - ax) * dx + (z - az) * dz) / lengthSq));
-    const px = ax + t * dx;
-    const pz = az + t * dz;
-    return Math.hypot(x - px, z - pz) <= ZONE_FOOTPRINT_EPSILON;
-}
-function pointInPolygonInclusive(x, z, polygon) {
-    if (pointInPolygon(x, z, polygon))
-        return true;
-    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-        const [xi, zi] = polygon[i];
-        const [xj, zj] = polygon[j];
-        if (pointOnSegment(x, z, xi, zi, xj, zj))
-            return true;
-    }
-    return false;
-}
-function worldPointInZoneFootprint(worldPoint, zone) {
-    _local.copy(worldPoint);
-    zone.node.worldToLocal(_local);
-    return pointInPolygonInclusive(_local.x, _local.z, zone.polygon);
-}
-function objectFootprintTouchesZone(object, zone) {
-    _bounds.setFromObject(object);
-    if (_bounds.isEmpty()) {
-        object.getWorldPosition(_sample);
-        return worldPointInZoneFootprint(_sample, zone);
-    }
-    _bounds.getCenter(_boundsCenter);
-    const y = _bounds.min.y;
-    const samples = [
-        [_boundsCenter.x, _boundsCenter.z],
-        [_bounds.min.x, _bounds.min.z],
-        [_bounds.min.x, _bounds.max.z],
-        [_bounds.max.x, _bounds.min.z],
-        [_bounds.max.x, _bounds.max.z],
-    ];
-    for (const [x, z] of samples) {
-        _sample.set(x, y, z);
-        if (worldPointInZoneFootprint(_sample, zone))
-            return true;
+/**
+ * The baked node under a pointer that a click can land on: the nearest hit
+ * whose identity is not a kind that only frames (site, building, level, zone,
+ * ceiling) and is not on a hidden floor, with the hit in its level's local XZ.
+ */
+export function resolveGlbPick(hits, identity) {
+    for (const hit of hits) {
+        const node = findIdentityAncestor(hit.object);
+        const extras = node?.userData;
+        if (!(node && extras?.pascalId) || PASS_THROUGH_KINDS.has(extras.kind ?? ''))
+            continue;
+        const levelId = findAncestorLevelId(node);
+        const level = levelId ? identity.get(levelId) : undefined;
+        if (level && !level.visible)
+            continue;
+        let point = null;
+        if (level) {
+            level.updateWorldMatrix(true, false);
+            _local.copy(hit.point);
+            level.worldToLocal(_local);
+            point = [_local.x, _local.z];
+        }
+        return { nodeId: extras.pascalId, point, hitObject: hit.object };
     }
-    return false;
+    return null;
 }
-const Y_OFFSET = 0.01;
-const ZONE_WALL_HEIGHT = 2.3;
-/** Floor fill — flat 0.25 tint scaled by the fade uniform (matches the editor). */
-function createZoneFloorMaterial(zoneColor) {
-    const o = uniform(0);
-    const material = new MeshBasicNodeMaterial({
-        colorNode: color(new THREE.Color(zoneColor)),
-        depthTest: false,
-        depthWrite: false,
-        opacityNode: float(0.25).mul(o),
-        side: THREE.DoubleSide,
-        transparent: true,
-    });
-    material.userData.uOpacity = o;
-    return material;
-}
-/** Vertical border — color at the base fading to transparent at the top. */
-function createZoneWallMaterial(zoneColor) {
-    const o = uniform(0);
-    const material = new MeshBasicNodeMaterial({
-        colorNode: color(new THREE.Color(zoneColor)),
-        depthTest: false,
-        depthWrite: false,
-        opacityNode: float(0.6).mul(float(1).sub(uv().y)).mul(o),
-        side: THREE.DoubleSide,
-        transparent: true,
-    });
-    material.userData.uOpacity = o;
-    return material;
-}
-/** Vertical quads along each polygon edge (UV.y 0 at the floor, 1 at the top). */
-function createZoneWallGeometry(polygon) {
-    const positions = [];
-    const uvs = [];
-    const indices = [];
-    for (let i = 0; i < polygon.length; i++) {
-        const [cx, cz] = polygon[i];
-        const [nx, nz] = polygon[(i + 1) % polygon.length];
-        const base = i * 4;
-        positions.push(cx, Y_OFFSET, cz, nx, Y_OFFSET, nz, nx, Y_OFFSET + ZONE_WALL_HEIGHT, nz, cx, Y_OFFSET + ZONE_WALL_HEIGHT, cz);
-        uvs.push(0, 0, 1, 0, 1, 1, 0, 1);
-        indices.push(base, base + 1, base + 2, base, base + 2, base + 3);
-    }
-    const geometry = new THREE.BufferGeometry();
-    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
-    geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
-    geometry.setIndex(indices);
-    geometry.computeVertexNormals();
-    return geometry;
+function pointInZone(x, z, zone) {
+    const polygon = [{ outer: zone.polygon, holes: zone.holes }];
+    return (containsPoint(polygon, [x, z]) || distanceToBoundary(polygon, [x, z]) <= ZONE_FOOTPRINT_EPSILON);
 }
 /**
- * GLB-consuming viewer scene (plan phase 2). Loads a baked artifact and drives
- * the editor's presentation/interaction with no parametric scene graph. Hover
- * and click resolve through the drill hierarchy (building → level → zone →
- * object): the cursor targets the floor in the building view, the room or
- * structure in a level, and items/structure inside a room. Selection feeds the
- * existing outline post-FX, openables play their baked clips, and the shared
- * `useViewer.selection` (with its hierarchy guard) holds the drill state. The
- * host disables the parametric `SelectionManager` (`selectionManager="custom"`).
+ * GLB-consuming viewer scene. Loads a baked artifact and drives the viewer's
+ * presentation and interaction with no parametric scene graph. A pointer
+ * becomes a `GlbPickEvent` the host runs through its selection rules (the
+ * same rules as the parametric viewer); the shared `useViewer.selection` and
+ * `hoveredId` then drive the outline, and openables play their baked clips
+ * when clicked. The host disables the parametric `SelectionManager`
+ * (`selectionManager="custom"`).
  */
-export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes, onLevelsChange, onIdentityChange, onHoverChange, onWalkthroughChange, }) {
+export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes, onObjectsChange, onPick, onWalkthroughChange, }) {
     const gltf = useGLTFKTX2(url);
     const rootRef = useRef(null);
-    const { actions } = useAnimations(gltf.animations, rootRef);
+    const actions = useClipActions(gltf.animations, rootRef);
+    const proceduralPlayback = useMemo(() => {
+        const byNode = new Map();
+        gltf.scene.traverse((object) => {
+            const extras = object.userData;
+            if (extras.kind === 'procedural-item' && extras.pascalId && !byNode.has(extras.pascalId))
+                byNode.set(extras.pascalId, { motions: [], clips: new Map() });
+            const motion = extras.proceduralMotion;
+            if (!motion?.clip)
+                return;
+            const clip = gltf.animations.find((entry) => entry.name === motion.clip);
+            if (!clip)
+                return;
+            const entry = byNode.get(motion.nodeId) ?? { motions: [], clips: new Map() };
+            if (motion.kind === 'spin') {
+                entry.motions.push({
+                    id: motion.groupId,
+                    partId: motion.partId,
+                    kind: 'spin',
+                    axis: 'y',
+                    pivot: [0, 0, 0],
+                    amount: (2 * Math.PI) / clip.duration,
+                    delay: 0,
+                    duration: 0,
+                    easing: 'linear',
+                });
+                entry.clips.set(motion.clip, {
+                    partId: motion.partId,
+                    kind: 'spin',
+                    groupId: entry.clips.get(motion.clip)?.groupId ?? motion.groupId,
+                });
+            }
+            else if (motion.activeWindow &&
+                !entry.motions.some((item) => item.partId === motion.partId)) {
+                entry.motions.push({
+                    id: motion.groupId,
+                    partId: motion.partId,
+                    kind: 'hinge',
+                    axis: 'y',
+                    pivot: [0, 0, 0],
+                    amount: 1,
+                    delay: motion.activeWindow[0],
+                    duration: motion.activeWindow[1] - motion.activeWindow[0],
+                    easing: 'linear',
+                });
+                entry.clips.set(motion.clip, {
+                    partId: motion.partId,
+                    kind: 'finite',
+                    groupId: motion.groupId,
+                });
+            }
+            byNode.set(motion.nodeId, entry);
+        });
+        // Procedural actions need a separate mixer so drei cannot advance their assigned times.
+        const mixer = new THREE.AnimationMixer(gltf.scene);
+        const entries = new Map([...byNode].map(([nodeId, entry]) => {
+            const spinParts = [
+                ...new Set(entry.motions.filter((motion) => motion.kind === 'spin').map((motion) => motion.partId)),
+            ];
+            const initial = Object.fromEntries(spinParts.map((partId) => [partId, true]));
+            return [
+                nodeId,
+                {
+                    controller: new ProceduralMotionController(entry.motions, initial),
+                    clips: entry.clips,
+                    spinParts,
+                    sequence: 0,
+                },
+            ];
+        }));
+        const proceduralActions = new Map(gltf.animations
+            .filter((clip) => [...entries.values()].some((entry) => entry.clips.has(clip.name)))
+            .map((clip) => {
+            const action = mixer.clipAction(clip);
+            action.enabled = true;
+            action.paused = true;
+            action.loop = clip.name.endsWith(': loop') ? THREE.LoopRepeat : THREE.LoopOnce;
+            action.clampWhenFinished = true;
+            action.setEffectiveWeight(1);
+            action.play();
+            return [clip.name, action];
+        }));
+        return { entries, mixer, actions: proceduralActions };
+    }, [gltf.scene, gltf.animations]);
     const camera = useThree((state) => state.camera);
-    const raycaster = useThree((state) => state.raycaster);
     const controls = useThree((state) => state.controls);
     const walkthroughMode = useViewer((s) => s.walkthroughMode);
     const textures = useViewer((s) => s.textures);
@@ -211,7 +213,7 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
                 return;
             object.traverse((child) => {
                 const mesh = child;
-                if (!mesh.isMesh || mesh.layers.isEnabled(ZONE_LAYER))
+                if (!mesh.isMesh)
                     return;
                 const ud = mesh.userData;
                 if (!ud.__bakedMaterial)
@@ -312,15 +314,14 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
             }
             if (extras.kind === 'zone' && extras.polygon && extras.polygon.length >= 3) {
                 const polygon = extras.polygon;
-                const centroid = [
-                    polygon.reduce((sum, [x]) => sum + x, 0) / polygon.length,
-                    polygon.reduce((sum, [, z]) => sum + z, 0) / polygon.length,
-                ];
+                const holes = extras.holes ?? [];
+                const centroid = polygonInteriorPoint({ polygon, holes });
                 zoneList.push({
                     id: extras.pascalId,
                     node: object,
                     levelId: findAncestorLevelId(object),
                     polygon,
+                    holes,
                     label: extras.label ?? extras.pascalId,
                     color: extras.color ?? '#3b82f6',
                     centroid,
@@ -338,9 +339,14 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
             levelsWithZones: new Set(zoneList.map((zone) => zone.levelId)),
         };
     }, [gltf.scene]);
-    const zoneById = useMemo(() => new Map(zoneEntries.map((zone) => [zone.id, zone])), [zoneEntries]);
     // Level pascalIds bottom-to-top, for the interactive light pool's level factor.
     const levelOrder = useMemo(() => levels.map((entry) => entry.id), [levels]);
+    // Loop clips no other controller plays (a plugin kind's mechanism) run on
+    // click and E. As in the editor they start stopped and never persist.
+    const loopMechanisms = useMemo(() => bakedLoopMechanisms(identity, new Set([
+        ...proceduralPlayback.entries.keys(),
+        ...(interactiveItems ?? []).map((item) => item.pascalId),
+    ])), [identity, proceduralPlayback, interactiveItems]);
     // The dollhouse hides ceilings/roof — but only their OWN geometry. Items hosted
     // on a ceiling (lamps, fans, recessed lights) are child identity nodes; hiding
     // the whole occluder node would hide them too, so collect just the occluder's
@@ -363,71 +369,20 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
         }
         return meshes;
     }, [occluders]);
-    // Move the camera to match the drill depth: a saved bookmark (extras.camera)
-    // wins; otherwise fit to the target's bounds (the object, the room's polygon
-    // footprint for empty zone nodes, the level, or the whole building). Mirrors
-    // the parametric viewer's selection framing so the GLB path feels identical.
-    const focusLevelId = useViewer((s) => s.selection.levelId);
-    const focusZoneId = useViewer((s) => s.selection.zoneId);
-    const focusSelectedId = useViewer((s) => s.selection.selectedIds[0] ?? null);
+    // Open on the building: its saved view, else a fit of its bounds. Later moves
+    // belong to the host's navigation (`camera-controls:frame`), never to a click.
     useEffect(() => {
         if (!controls)
             return;
-        const flyToBookmark = (bookmark) => {
+        const bookmark = rootNode?.userData?.camera;
+        if (bookmark) {
             const { position: p, target: t } = bookmark;
             controls.setLookAt(p[0], p[1], p[2], t[0], t[1], t[2], true);
             controls.normalizeRotations?.();
-        };
-        // Item selection happens inside a room, where we're already at a good angle:
-        // fly to the item's own bookmark if it has one, otherwise just pan to it
-        // (keep the current orbit angle + distance) rather than reframing the camera.
-        if (focusSelectedId) {
-            const object = identity.get(focusSelectedId);
-            if (!object)
-                return;
-            const itemBookmark = object.userData.camera;
-            if (itemBookmark) {
-                flyToBookmark(itemBookmark);
-                return;
-            }
-            _camBox.makeEmpty();
-            _camBox.setFromObject(object);
-            if (_camBox.isEmpty())
-                return;
-            _camBox.getCenter(_camCenter);
-            controls.moveTo?.(_camCenter.x, _camCenter.y, _camCenter.z, true);
             return;
         }
-        let bookmarkNode = null;
         _camBox.makeEmpty();
-        if (focusZoneId) {
-            const zone = zoneById.get(focusZoneId);
-            if (!zone)
-                return;
-            bookmarkNode = zone.node;
-            // Zone identity nodes carry no mesh — bound the room from its polygon.
-            zone.node.updateWorldMatrix(true, false);
-            for (const [x, z] of zone.polygon) {
-                _camBox.expandByPoint(_camPoint.set(x, 0, z).applyMatrix4(zone.node.matrixWorld));
-                _camBox.expandByPoint(_camPoint.set(x, ZONE_WALL_HEIGHT, z).applyMatrix4(zone.node.matrixWorld));
-            }
-        }
-        else if (focusLevelId) {
-            const object = identity.get(focusLevelId);
-            if (!object)
-                return;
-            bookmarkNode = object;
-            _camBox.setFromObject(object);
-        }
-        else {
-            bookmarkNode = rootNode;
-            _camBox.setFromObject(rootNode ?? gltf.scene);
-        }
-        const bookmark = bookmarkNode?.userData?.camera;
-        if (bookmark) {
-            flyToBookmark(bookmark);
-            return;
-        }
+        _camBox.setFromObject(rootNode ?? gltf.scene);
         if (_camBox.isEmpty())
             return;
         _camBox.getCenter(_camCenter);
@@ -435,47 +390,21 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
         const distance = Math.max(Math.max(_camSize.x, _camSize.y, _camSize.z) * 2, 15);
         controls.setLookAt(_camCenter.x + distance * 0.7, _camCenter.y + distance * 0.5, _camCenter.z + distance * 0.7, _camCenter.x, _camCenter.y, _camCenter.z, true);
         controls.normalizeRotations?.();
-    }, [
-        controls,
-        focusSelectedId,
-        focusZoneId,
-        focusLevelId,
-        identity,
-        zoneById,
-        rootNode,
-        gltf.scene,
-    ]);
-    useEffect(() => {
-        const cameraMask = camera.layers.mask;
-        const raycasterMask = raycaster.layers.mask;
-        camera.layers.enable(ZONE_LAYER);
-        raycaster.layers.disable(ZONE_LAYER);
-        return () => {
-            camera.layers.mask = cameraMask;
-            raycaster.layers.mask = raycasterMask;
-        };
-    }, [camera, raycaster]);
+    }, [controls, rootNode, gltf.scene]);
     useEffect(() => {
-        onLevelsChange?.(levels.map(({ id, node }) => ({ id, label: node.userData.label ?? id })));
-        const labels = {};
-        identity.forEach((object, id) => {
-            const extras = object.userData;
-            labels[id] = { kind: extras.kind ?? 'node', label: extras.label ?? id };
-        });
-        onIdentityChange?.(labels);
-        return () => {
-            onLevelsChange?.([]);
-            onIdentityChange?.({});
-        };
-    }, [levels, identity, onLevelsChange, onIdentityChange]);
-    // Apply the editor's level modes to the baked floors each frame. Walkthrough
-    // always shows the full stacked building (you're standing inside it) — and the
-    // first-person collider is built from the visible meshes, so a hidden solo
-    // floor would otherwise drop the player through the world.
+        onObjectsChange?.(identity);
+        return () => onObjectsChange?.(new Map());
+    }, [identity, onObjectsChange]);
+    // Apply the viewer's level display to the baked floors each frame, by the
+    // parametric LevelSystem's rule (solo, and the levels above the current one
+    // hidden when the host asks). Walkthrough always shows the full stacked
+    // building (you're standing inside it) — and the first-person collider is
+    // built from the visible meshes, so a hidden floor would otherwise drop the
+    // player through the world.
     useFrame((_, delta) => {
         if (levels.length === 0)
             return;
-        const { levelMode, selection, walkthroughMode } = useViewer.getState();
+        const { levelMode, hideLevelsAboveSelection, selection, walkthroughMode } = useViewer.getState();
         const selectedLevel = selection.levelId;
         const selectedIdx = selectedLevel ? levels.findIndex((l) => l.id === selectedLevel) : -1;
         levels.forEach(({ id, node, baseY }, index) => {
@@ -486,77 +415,72 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
             node.position.y = walkthroughMode
                 ? targetY
                 : lerp(node.position.y, targetY, Math.min(1, delta * 12));
-            // Solo: hidden levels above the soloed one keep casting shadows
-            // (shadow-caster-only); below-levels can't block the sun, so plain-hide.
-            const hidden = !walkthroughMode && levelMode === 'solo' && Boolean(selectedLevel) && id !== selectedLevel;
-            const castsWhileHidden = hidden && selectedIdx >= 0 && index > selectedIdx;
-            if (castsWhileHidden) {
+            const { visible, shadowOnly } = walkthroughMode
+                ? { visible: true, shadowOnly: false }
+                : resolveLevelVisibility({
+                    levelMode,
+                    hideAbove: hideLevelsAboveSelection,
+                    hasSelectedLevel: selectedIdx >= 0,
+                    isSelected: id === selectedLevel,
+                    index,
+                    selectedIndex: selectedIdx >= 0 ? selectedIdx : undefined,
+                    nodeVisible: true,
+                    revealing: false,
+                });
+            if (shadowOnly)
                 applyShadowOnly(node);
-                node.visible = true;
-            }
-            else {
+            else
                 clearShadowOnly(node);
-                node.visible = !hidden;
-            }
+            node.visible = visible;
         });
     }, 5);
-    const zoneFills = useRef([]);
     useEffect(() => {
-        const built = [];
-        for (const entry of zoneEntries) {
-            const shape = new THREE.Shape();
-            entry.polygon.forEach(([x, z], i) => {
-                if (i === 0)
-                    shape.moveTo(x, -z);
-                else
-                    shape.lineTo(x, -z);
-            });
-            shape.closePath();
-            const floorMaterial = createZoneFloorMaterial(entry.color);
-            const floor = new THREE.Mesh(new THREE.ShapeGeometry(shape), floorMaterial);
-            floor.rotation.x = -Math.PI / 2;
-            floor.position.y = 0.02;
-            const wallMaterial = createZoneWallMaterial(entry.color);
-            const walls = new THREE.Mesh(createZoneWallGeometry(entry.polygon), wallMaterial);
-            const meshes = [floor, walls];
-            for (const mesh of meshes) {
-                mesh.visible = false;
-                mesh.layers.set(ZONE_LAYER);
-                // Visual helpers only — never participate in picking. Hover/selection
-                // resolves against the real building geometry + point-in-polygon, so the
-                // tall wall helpers can't occlude items or fight at shared boundaries.
-                mesh.raycast = NO_RAYCAST;
-                entry.node.add(mesh);
-            }
-            built.push({
-                id: entry.id,
-                levelId: entry.levelId,
-                meshes,
-                uniforms: [
-                    floorMaterial.userData.uOpacity,
-                    wallMaterial.userData.uOpacity,
-                ],
-            });
-        }
-        zoneFills.current = built;
+        for (const [nodeId, entry] of proceduralPlayback.entries)
+            useInteractive
+                .getState()
+                .initProcedural(nodeId, [...new Set(entry.controller.motions.map((motion) => motion.partId))], entry.spinParts);
         return () => {
-            for (const { meshes } of built) {
-                for (const mesh of meshes) {
-                    mesh.removeFromParent();
-                    mesh.geometry.dispose();
-                    mesh.material.dispose();
+            for (const nodeId of proceduralPlayback.entries.keys())
+                useInteractive.getState().removeProcedural(nodeId);
+            proceduralPlayback.mixer.stopAllAction();
+        };
+    }, [proceduralPlayback]);
+    useFrame((_, delta) => {
+        for (const [nodeId, entry] of proceduralPlayback.entries) {
+            const command = useInteractive.getState().procedural[nodeId]?.motionCommand;
+            if (command && command.sequence > entry.sequence) {
+                entry.controller.command(command);
+                entry.sequence = command.sequence;
+            }
+            const frame = entry.controller.tick(delta);
+            for (const [clipName, binding] of entry.clips) {
+                const action = proceduralPlayback.actions.get(clipName);
+                if (!action)
+                    continue;
+                if (binding.kind === 'finite')
+                    action.time = frame.times[binding.partId] ?? 0;
+                else {
+                    const motion = entry.controller.motions.find((item) => item.id === binding.groupId);
+                    if (motion)
+                        action.time =
+                            ((frame.spins[motion.id]?.phase ?? 0) / (2 * Math.PI)) * action.getClip().duration;
                 }
             }
-            zoneFills.current = [];
-        };
-    }, [zoneEntries]);
+        }
+        proceduralPlayback.mixer.update(0);
+    }, -1);
     useEffect(() => {
+        const scriptedPrefixes = (interactiveItems ?? [])
+            .filter((item) => item.scripted)
+            .map((item) => `${item.pascalId}: `);
         for (const [name, action] of Object.entries(actions)) {
             if (!action)
                 continue;
-            // Ambient item loops (a fan's spin, `<id>: loop`) repeat; door/window
-            // open clips play once and hold their end pose. GlbInteractive plays the
-            // loops, gated on the item's toggle.
+            if (proceduralPlayback.actions.has(name))
+                continue;
+            // ScriptedClips owns each authored clip's playback mode.
+            if (scriptedPrefixes.some((prefix) => name.startsWith(prefix)))
+                continue;
             if (name.endsWith(': loop')) {
                 action.loop = THREE.LoopRepeat;
                 action.clampWhenFinished = false;
@@ -566,11 +490,87 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
                 action.clampWhenFinished = true;
             }
         }
-    }, [actions]);
+    }, [actions, proceduralPlayback, interactiveItems]);
+    useEffect(() => {
+        if (loopMechanisms.size === 0)
+            return;
+        const apply = (running) => {
+            for (const [id, clips] of loopMechanisms) {
+                for (const name of clips) {
+                    const action = actions[name];
+                    if (!action)
+                        continue;
+                    if (running[id]) {
+                        action.enabled = true;
+                        action.paused = false;
+                        if (!action.isRunning())
+                            action.play();
+                    }
+                    else {
+                        action.stop();
+                    }
+                }
+            }
+        };
+        apply(useInteractive.getState().mechanisms);
+        const unsubscribe = useInteractive.subscribe((state, previous) => {
+            if (state.mechanisms !== previous.mechanisms)
+                apply(state.mechanisms);
+        });
+        return () => {
+            unsubscribe();
+            for (const id of loopMechanisms.keys())
+                useInteractive.getState().removeMechanism(id);
+        };
+    }, [actions, loopMechanisms]);
+    // Items the walkthrough operates through their toggles; others fall through to loop clips.
+    const toggleableItem = useCallback((pascalId) => interactiveItems?.find((item) => item.pascalId === pascalId &&
+        item.interactive.controls.some((control) => control.kind === 'toggle')), [interactiveItems]);
+    // A click opens and closes an item with an `open` clip (an authored object,
+    // a scripted window or door), like a door.
+    const toggleOpenControl = useCallback((identityNode) => {
+        const item = toggleableItem(identityNode.userData.pascalId);
+        if (!item || itemInteraction(item.interactive).kind !== 'open')
+            return false;
+        operateItem(item.pascalId, item.interactive);
+        return true;
+    }, [toggleableItem]);
+    const toggleLoopMechanism = useCallback((identityNode) => {
+        const id = identityNode.userData.pascalId;
+        if (!(id && loopMechanisms.has(id)))
+            return false;
+        const state = useInteractive.getState();
+        state.setMechanism(id, !state.mechanisms[id]);
+        return true;
+    }, [loopMechanisms]);
     const openIds = useRef(new Set());
+    const toggleProcedural = useCallback((hit, identityNode) => {
+        const extras = identityNode.userData;
+        if (extras.kind !== 'procedural-item')
+            return false;
+        const part = findProceduralMotionAncestor(hit);
+        if (part?.clip) {
+            useInteractive.getState().toggleProceduralPart(part.nodeId, part.partId);
+            return true;
+        }
+        const nodeId = extras.pascalId;
+        const entry = proceduralPlayback.entries.get(nodeId);
+        if (!entry)
+            return false;
+        const parts = [...new Set(entry.controller.motions.map((motion) => motion.partId))];
+        if (parts.length === 0) {
+            useInteractive.getState().toggleProceduralLights(nodeId);
+            return true;
+        }
+        const active = useInteractive.getState().procedural[nodeId]?.parts;
+        useInteractive
+            .getState()
+            .setProceduralParts(nodeId, parts, !parts.some((partId) => active?.[partId]));
+        return true;
+    }, [proceduralPlayback]);
     const toggleOpenable = useCallback((node) => {
         const extras = node.userData;
-        const clipName = extras.clips?.[0];
+        const clipName = extras.clips?.find((name) => name.endsWith(': open'));
         if (!extras.openable || !clipName)
             return;
         const action = actions[clipName];
@@ -598,100 +598,24 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
                 continue;
             _local.copy(worldPoint);
             entry.node.worldToLocal(_local);
-            if (pointInPolygonInclusive(_local.x, _local.z, entry.polygon))
+            if (pointInZone(_local.x, _local.z, entry))
                 return entry;
         }
         return null;
     }, [zoneEntries]);
-    // The room the cursor points at, found by intersecting the pointer ray with the
-    // level's floor plane — independent of what 3D object the ray actually hits.
-    // This is the editor's model: zone helpers and walls are ignored, so adjacent
-    // rooms never fight and an item against a wall still maps to its own room.
-    const zoneAtRay = useCallback((ray, levelId) => {
-        const levelNode = identity.get(levelId);
-        const floorY = levelNode ? levelNode.getWorldPosition(_floorPlanePoint).y : 0;
-        _floorPlane.setFromNormalAndCoplanarPoint(_up, _floorPlanePoint.set(0, floorY, 0));
-        if (!ray.intersectPlane(_floorPlane, _floorHit))
-            return null;
-        return zoneAtPoint(_floorHit, levelId);
-    }, [identity, zoneAtPoint]);
-    // Resolve a pointer ray to the unit the current drill depth acts on:
-    //  - building view → the floor the hit object belongs to
-    //  - level view    → the room the cursor points at on the floor
-    //  - zone view     → the first hit node whose hit/footprint is inside the room
-    const resolveTarget = useCallback((hits, ray) => {
-        const firstNode = hits.length > 0 ? findIdentityAncestor(hits[0].object) : null;
-        const toTarget = (object, tid) => {
-            const e = object.userData;
-            return { object, id: tid, kind: e.kind ?? 'node', label: e.label ?? tid };
-        };
-        const { selection } = useViewer.getState();
-        // Building view → drill to the floor the hit object belongs to.
-        if (!selection.levelId) {
-            if (!firstNode)
-                return null;
-            const extras = firstNode.userData;
-            const levelId = extras.kind === 'level' ? extras.pascalId : findAncestorLevelId(firstNode);
-            const levelObject = levelId ? identity.get(levelId) : undefined;
-            return levelObject && levelId ? toTarget(levelObject, levelId) : null;
-        }
-        // Level view → the room the cursor is over (floor-plane intersection).
-        if (!selection.zoneId) {
-            const zone = zoneAtRay(ray, selection.levelId);
-            return zone ? toTarget(zone.node, zone.id) : null;
-        }
-        // Zone view → scan through all R3F intersections so room helpers or slabs
-        // can't hide a selectable item/structure behind the first hit.
-        const activeZone = zoneById.get(selection.zoneId);
-        if (!activeZone)
-            return null;
-        const seen = new Set();
-        for (const hit of hits) {
-            const node = findIdentityAncestor(hit.object);
-            if (!node)
-                continue;
-            const extras = node.userData;
-            const id = extras.pascalId;
-            if (!id || seen.has(id))
-                continue;
-            seen.add(id);
-            const kind = extras.kind ?? 'node';
-            if (kind === 'site' || kind === 'building' || kind === 'level' || kind === 'zone') {
-                continue;
-            }
-            const hitLevel = findAncestorLevelId(node);
-            if (hitLevel !== selection.levelId)
-                continue;
-            if (hit.point && worldPointInZoneFootprint(hit.point, activeZone)) {
-                return toTarget(node, id);
-            }
-            if (objectFootprintTouchesZone(node, activeZone)) {
-                return toTarget(node, id);
-            }
-        }
-        return null;
-    }, [identity, zoneAtRay, zoneById]);
-    // DOM nodes for each zone's floating room label, plus a group whose transform
-    // tracks the zone node so the label rides level stacking.
-    const labelGroups = useRef(new Map());
-    const labelDivs = useRef(new Map());
-    // Per-frame: fade a level's rooms in/out (hidden once a zone is entered, like
-    // the editor) with a brightness bump on the hovered room, keep room labels
-    // positioned + faded with them, and sync the outline post-FX from the shared
-    // selection + local hover.
-    const hoveredTarget = useRef(null);
-    useFrame((_, delta) => {
+    // Per-frame: hide the focused floor's ceilings and roof when it has rooms
+    // (dollhouse), and sync the outline post-FX from the shared selection and
+    // hover. Rooms highlight through the host's room layer, not the outline.
+    useFrame(() => {
         const state = useViewer.getState();
         const { selection, outliner } = state;
-        const t = Math.min(1, delta * 8);
-        const hoveredZoneId = hoveredTarget.current?.kind === 'zone' ? hoveredTarget.current.id : null;
-        // Walkthrough is a first-person tour: no zone tints, no dollhouse cutaway,
-        // no selection outline — you're standing inside the real building.
+        // Walkthrough is a first-person tour: no dollhouse cutaway, no selection
+        // outline — you're standing inside the real building.
         const walk = state.walkthroughMode;
-        // Dollhouse: hide ceilings + roof so the rooms (and their zone tint) are
-        // visible from above and the ray reaches their contents — but only when the
-        // focused level actually has rooms. Focusing a zone-less floor keeps the
-        // building intact (otherwise its roof would just vanish with nothing to show).
+        // Dollhouse: hide ceilings + roof so the rooms are visible from above and
+        // the ray reaches their contents — but only when the focused level actually
+        // has rooms. Focusing a zone-less floor keeps the building intact
+        // (otherwise its roof would just vanish with nothing to show).
         const revealing = !walk && selection.levelId != null && levelsWithZones.has(selection.levelId);
         // Shadow-caster-only: hidden roof/ceiling meshes keep casting sun shadows
         // so interiors show window light patches instead of uniform sun flood.
@@ -701,47 +625,23 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
             else
                 clearShadowOnly(mesh);
         }
-        for (const { id, levelId, meshes, uniforms } of zoneFills.current) {
-            const show = !walk && selection.levelId != null && levelId === selection.levelId && !selection.zoneId;
-            const target = !show ? 0 : id === hoveredZoneId ? 1 : 0.65;
-            let visible = false;
-            for (const u of uniforms) {
-                u.value = lerp(u.value, target, t);
-                if (u.value > 0.01)
-                    visible = true;
-            }
-            for (const mesh of meshes)
-                mesh.visible = visible;
-            const group = labelGroups.current.get(id);
-            const zoneNode = identity.get(id);
-            if (group && zoneNode) {
-                group.matrixAutoUpdate = false;
-                group.matrix.copy(zoneNode.matrixWorld);
-                group.visible = visible;
-            }
-            const div = labelDivs.current.get(id);
-            if (div) {
-                div.style.opacity = show ? '1' : '0';
-                // Small by default, smoothly zooming up when its room is hovered.
-                div.style.transform = `scale(${id === hoveredZoneId ? 1 : 0.82})`;
-            }
-        }
         outliner.selectedObjects.length = 0;
         outliner.hoveredObjects.length = 0;
         if (walk)
             return;
-        const selectedObject = selection.selectedIds[0]
-            ? (identity.get(selection.selectedIds[0]) ?? null)
-            : null;
-        if (selectedObject)
-            outliner.selectedObjects.push(selectedObject);
-        // Rooms show hover via the fill brightness; everything else uses the outline.
-        const hover = hoveredTarget.current;
-        if (hover && hover.kind !== 'zone' && hover.object !== selectedObject) {
-            outliner.hoveredObjects.push(hover.object);
+        for (const id of selection.selectedIds) {
+            const object = identity.get(id);
+            if (object)
+                outliner.selectedObjects.push(object);
+        }
+        const hovered = state.hoveredId ? identity.get(state.hoveredId) : undefined;
+        if (hovered &&
+            hovered.userData.kind !== 'zone' &&
+            !outliner.selectedObjects.includes(hovered)) {
+            outliner.hoveredObjects.push(hovered);
         }
     });
-    // ── Walkthrough: first-person HUD + door/window interaction ────────────────
+    // ── Walkthrough: first-person HUD + interaction ────────────────────────────
     const walkDoorRef = useRef(null);
     const lastWalkKey = useRef(null);
     // Each frame in walkthrough, report the floor + room the camera stands in and
@@ -769,11 +669,51 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
         if (hit) {
             const node = findIdentityAncestor(hit.object);
             const extras = node?.userData;
-            if (node && extras?.openable && extras.clips?.length) {
-                doorNode = node;
+            const lightOnly = extras?.pascalId &&
+                interactiveItems?.some((item) => item.pascalId === extras.pascalId &&
+                    item.procedural?.lights.length &&
+                    operableParts(item.procedural.recipe ?? { parts: item.procedural.parts }).length === 0);
+            const item = toggleableItem(extras?.pascalId);
+            if (node && extras?.kind === 'procedural-item' && (extras.clips?.length || lightOnly)) {
+                doorNode = { hit: hit.object, node };
+                const part = findProceduralMotionAncestor(hit.object);
+                const state = useInteractive.getState().procedural[extras.pascalId];
+                const isOpen = lightOnly
+                    ? (state?.lightsOn ?? useInteractive.getState().lampDefault)
+                    : part
+                        ? Boolean(state?.parts[part.partId])
+                        : Object.values(state?.parts ?? {}).some(Boolean);
+                const clips = part?.clip ? [part.clip] : extras.clips;
+                const isSpin = part
+                    ? part.kind === 'spin'
+                    : (clips?.every((clip) => clip.endsWith(': loop')) ?? false);
+                const label = lightOnly
+                    ? (extras.label ?? 'Lights')
+                    : (part?.partId.replaceAll('_', ' ') ?? extras.label ?? 'Item');
+                door = {
+                    label,
+                    isOpen,
+                    verb: lightOnly || isSpin ? (isOpen ? 'turn off' : 'turn on') : isOpen ? 'close' : 'open',
+                };
+                doorId = `${extras.pascalId}:${part?.partId ?? 'all'}`;
+            }
+            else if (node && item) {
+                doorNode = { hit: hit.object, node };
+                doorId = item.pascalId;
+                const prompt = itemPrompt(item.pascalId, item.label, item.interactive);
+                door = { label: prompt.label, isOpen: prompt.isOn, verb: prompt.verb };
+            }
+            else if (node && extras?.openable && extras.clips?.length) {
+                doorNode = { hit: hit.object, node };
                 doorId = extras.pascalId;
                 door = { label: extras.label ?? 'Door', isOpen: openIds.current.has(doorId) };
             }
+            else if (node && extras?.pascalId && loopMechanisms.has(extras.pascalId)) {
+                doorNode = { hit: hit.object, node };
+                doorId = extras.pascalId;
+                const isOpen = Boolean(useInteractive.getState().mechanisms[doorId]);
+                door = { label: extras.label ?? 'Item', isOpen, verb: isOpen ? 'turn off' : 'turn on' };
+            }
         }
         walkDoorRef.current = doorNode;
         const key = `${floor?.id ?? ''}|${zone?.id ?? ''}|${door ? `${doorId}:${door.isOpen}` : ''}`;
@@ -785,9 +725,17 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
     // E or click activates the openable in view. The click also re-locks the
     // pointer through the walkthrough controller; no selection happens.
     const activateWalkDoor = useCallback(() => {
-        if (walkDoorRef.current)
-            toggleOpenable(walkDoorRef.current);
-    }, [toggleOpenable]);
+        const target = walkDoorRef.current;
+        if (!target)
+            return;
+        const item = toggleableItem(target.node.userData.pascalId);
+        if (item) {
+            operateItem(item.pascalId, item.interactive);
+            return;
+        }
+        if (!(toggleProcedural(target.hit, target.node) || toggleLoopMechanism(target.node)))
+            toggleOpenable(target.node);
+    }, [toggleableItem, toggleLoopMechanism, toggleOpenable, toggleProcedural]);
     useEffect(() => {
         if (!walkthroughMode)
             return;
@@ -814,83 +762,57 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
     const lastHover = useRef(null);
     const handlePointerMove = useCallback((event) => {
         event.stopPropagation();
-        if (walkthroughMode)
+        if (walkthroughMode || !onPick)
             return;
-        const target = resolveTarget(event.intersections.map((hit) => ({ object: hit.object, point: hit.point })), event.ray);
-        hoveredTarget.current = target;
-        document.body.style.cursor = target ? 'pointer' : 'auto';
-        const key = target ? `${target.kind}:${target.id}` : null;
-        if (key !== lastHover.current) {
-            lastHover.current = key;
-            onHoverChange?.(target ? { kind: target.kind, label: target.label } : null);
-        }
-    }, [resolveTarget, onHoverChange, walkthroughMode]);
+        const pick = resolveGlbPick(event.intersections, identity);
+        document.body.style.cursor = pick ? 'pointer' : 'auto';
+        const key = pick ? `${pick.nodeId}:${pick.point?.join(',') ?? ''}` : null;
+        if (key === lastHover.current)
+            return;
+        lastHover.current = key;
+        onPick({ type: 'hover', pick, modifiers: modifiersOf(event.nativeEvent) });
+    }, [identity, onPick, walkthroughMode]);
     const handlePointerOut = useCallback(() => {
-        hoveredTarget.current = null;
         document.body.style.cursor = 'auto';
-        if (lastHover.current !== null) {
-            lastHover.current = null;
-            onHoverChange?.(null);
-        }
-    }, [onHoverChange]);
-    // Drill the building → level → zone → object hierarchy, deselecting back up
-    // when the click lands outside the current scope. setSelection's hierarchy
-    // guard clears deeper selections automatically when a parent changes.
+        if (lastHover.current === null)
+            return;
+        lastHover.current = null;
+        onPick?.({ type: 'hover', pick: null, modifiers: NO_MODIFIERS });
+    }, [onPick]);
+    // The host's rules decide the selection; an openable the click selects (a
+    // door, a window, an item with an `open` clip, a mechanism) also plays.
     const handleClick = useCallback((event) => {
         event.stopPropagation();
         // Walkthrough handles its own door activation (E / canvas click) and never
-        // selects — leave the drill hierarchy untouched.
-        if (walkthroughMode)
+        // selects.
+        if (walkthroughMode || !onPick)
             return;
-        const target = resolveTarget(event.intersections.map((hit) => ({ object: hit.object, point: hit.point })), event.ray);
-        const { selection, setSelection, setLevelMode } = useViewer.getState();
-        // Building view → drill into the clicked floor.
-        if (!selection.levelId) {
-            if (target) {
-                setLevelMode('solo');
-                setSelection({ levelId: target.id });
-            }
+        const pick = resolveGlbPick(event.intersections, identity);
+        onPick({ type: 'click', pick, modifiers: modifiersOf(event.nativeEvent) });
+        if (!pick || !useViewer.getState().selection.selectedIds.includes(pick.nodeId))
             return;
-        }
-        // Level view → enter the clicked room; clicking outside any room exits to
-        // the building.
-        if (!selection.zoneId) {
-            if (target) {
-                setSelection({ zoneId: target.id });
-            }
-            else {
-                setLevelMode('stacked');
-                setSelection({ levelId: null });
-            }
+        const object = identity.get(pick.nodeId);
+        if (!object)
             return;
-        }
-        // Zone view → select the clicked node; clicking outside the room exits to
-        // the level.
-        if (target) {
-            setSelection({ selectedIds: [target.id] });
-            toggleOpenable(target.object);
-        }
-        else {
-            setSelection({ zoneId: null });
-        }
-    }, [resolveTarget, toggleOpenable, walkthroughMode]);
-    // A click that hits nothing (empty space) steps one level back up the drill
-    // hierarchy, like the legacy viewer.
-    const handlePointerMissed = useCallback(() => {
-        if (useViewer.getState().walkthroughMode)
+        if (!(toggleOpenControl(object) ||
+            toggleProcedural(pick.hitObject, object) ||
+            toggleLoopMechanism(object)))
+            toggleOpenable(object);
+    }, [
+        identity,
+        onPick,
+        toggleLoopMechanism,
+        toggleOpenControl,
+        toggleOpenable,
+        toggleProcedural,
+        walkthroughMode,
+    ]);
+    // A click on empty space clears the room and the element (the floor stays).
+    const handlePointerMissed = useCallback((event) => {
+        if (useViewer.getState().walkthroughMode || !onPick)
             return;
-        const { selection, setSelection, setLevelMode } = useViewer.getState();
-        if (selection.selectedIds.length > 0) {
-            setSelection({ selectedIds: [] });
-        }
-        else if (selection.zoneId) {
-            setSelection({ zoneId: null });
-        }
-        else if (selection.levelId) {
-            setLevelMode('stacked');
-            setSelection({ levelId: null });
-        }
-    }, []);
+        onPick({ type: 'click', pick: null, modifiers: modifiersOf(event) });
+    }, [onPick]);
     useEffect(() => () => {
         const { outliner } = useViewer.getState();
         outliner.selectedObjects.length = 0;
@@ -900,23 +822,14 @@ export function GlbScene({ url, interactiveItems, referenceNodes, replaceNodes,
         for (const mesh of occluderOwnMeshes)
             clearShadowOnly(mesh);
     }, [occluderOwnMeshes]);
-    return (_jsxs("group", { ref: rootRef, children: [_jsx("primitive", { object: gltf.scene, onClick: handleClick, onPointerMissed: handlePointerMissed, onPointerMove: handlePointerMove, onPointerOut: handlePointerOut }), interactiveItems?.length ? (_jsx(GlbInteractive, { actions: actions, identity: identity, items: interactiveItems, levelOrder: levelOrder, zones: zoneEntries })) : null, referenceNodes?.length ? (_jsx(GlbReferenceNodes, { identity: identity, nodes: referenceNodes })) : null, replaceNodes?.length ? (_jsx(GlbReplaceInstances, { identity: identity, nodes: replaceNodes })) : null, zoneEntries.map((zone) => (_jsx("group", { ref: (group) => {
-                    if (group)
-                        labelGroups.current.set(zone.id, group);
-                    else
-                        labelGroups.current.delete(zone.id);
-                }, children: _jsx(Html, { center: true, position: [zone.centroid[0], 1, zone.centroid[1]], style: { pointerEvents: 'none', userSelect: 'none' }, zIndexRange: [10, 0], children: _jsx("div", { ref: (div) => {
-                            if (div)
-                                labelDivs.current.set(zone.id, div);
-                            else
-                                labelDivs.current.delete(zone.id);
-                        }, style: {
-                            color: 'white',
-                            opacity: 0,
-                            textShadow: `-1px -1px 0 ${zone.color}, 1px -1px 0 ${zone.color}, -1px 1px 0 ${zone.color}, 1px 1px 0 ${zone.color}`,
-                            transform: 'scale(0.82)',
-                            transformOrigin: 'center',
-                            transition: 'opacity 0.3s ease-in-out, transform 0.2s ease-out',
-                            whiteSpace: 'nowrap',
-                        }, children: zone.label }) }) }, zone.id)))] }));
+    return (_jsxs("group", { ref: rootRef, children: [_jsx("primitive", { object: gltf.scene, onClick: handleClick, onPointerMissed: handlePointerMissed, onPointerMove: handlePointerMove, onPointerOut: handlePointerOut }), interactiveItems?.length ? (_jsx(GlbInteractive, { actions: actions, identity: identity, items: interactiveItems, levelOrder: levelOrder, zones: zoneEntries })) : null, referenceNodes?.length ? (_jsx(GlbReferenceNodes, { identity: identity, nodes: referenceNodes })) : null, replaceNodes?.length ? (_jsx(GlbReplaceInstances, { identity: identity, nodes: replaceNodes })) : null] }));
+}
+const NO_MODIFIERS = {
+    alt: false,
+    ctrl: false,
+    meta: false,
+    shift: false,
+};
+function modifiersOf(event) {
+    return { alt: event.altKey, ctrl: event.ctrlKey, meta: event.metaKey, shift: event.shiftKey };
 }