@pascal-app/viewer 1.0.1 → 1.0.4

package/dist/components/renderers/node-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"node-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/renderers/node-renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,OAAO,EAGZ,KAAK,cAAc,EAEpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,KAAK,aAAa,EAAkB,MAAM,OAAO,CAAA;AAO1D,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,cAAc,CAAC,OAAO,CAAC,GAC9B,aAAa,CAAC;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,GAAG,IAAI,CASzC;AAED,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,uCA0BjE,CAAA"}
+{"version":3,"file":"node-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/renderers/node-renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,OAAO,EAIZ,KAAK,cAAc,EAEpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,KAAK,aAAa,EAAqD,MAAM,OAAO,CAAA;AAO7F,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,cAAc,CAAC,OAAO,CAAC,GAC9B,aAAa,CAAC;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC,GAAG,IAAI,CASzC;AAED,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,uCA+BjE,CAAA"}

package/dist/components/renderers/node-renderer.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNodeKindEnabled, nodeRegistry, useScene, } from '@pascal-app/core';
-import { lazy, Suspense } from 'react';
+import { isNodeKindEnabled, nodeRegistry, onRegistryChange, useScene, } from '@pascal-app/core';
+import { lazy, Suspense, useCallback, useSyncExternalStore } from 'react';
 import { ParametricNodeRenderer } from './parametric-node-renderer';
 // Cache lazy components by their RendererSource so React.lazy isn't re-invoked
 // on every render — that would create a new Suspense boundary each time.
@@ -21,11 +21,16 @@ export function getRegistryRenderer(source) {
 export const NodeRenderer = ({ nodeId }) => {
     const node = useScene((state) => state.nodes[nodeId]);
     const installedPlugins = useScene((state) => state.installedPlugins);
+    // Plugins register after the first mount (async discovery). Subscribe to this
+    // node's own kind only: a registration re-renders the nodes of that kind and
+    // leaves every other mounted node alone.
+    const kind = node?.type;
+    const readDefinition = useCallback(() => (kind ? nodeRegistry.get(kind) : undefined), [kind]);
+    const def = useSyncExternalStore(onRegistryChange, readDefinition, readDefinition);
     if (!node)
         return null;
     if (!isNodeKindEnabled(node.type, installedPlugins))
         return null;
-    const def = nodeRegistry.get(node.type);
     if (!def)
         return null;
     // Two-checkbox dispatch (see wiki/architecture/node-definitions.md):

package/dist/components/viewer/frame-limiter.d.ts

@@ -1,6 +1,7 @@
 type FrameLimiterProps = {
     fps?: number;
     paused?: boolean;
+    onFrameError?: (cause: unknown) => void;
 };
 export type FrameClock = {
     sample: (wallTimeMs: number, intervalMs: number) => number | null;

package/dist/components/viewer/frame-limiter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frame-limiter.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/frame-limiter.tsx"],"names":[],"mappings":"AAKA,KAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAA;IACjE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;CAClC,CAAA;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,SAAI,GAAG,UAAU,CAwB5D;AAgBD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoF7C,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"frame-limiter.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/frame-limiter.tsx"],"names":[],"mappings":"AAKA,KAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAA;IACjE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;CAClC,CAAA;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,SAAI,GAAG,UAAU,CAwB5D;AAgBD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmG7C,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/components/viewer/frame-limiter.js

@@ -40,8 +40,10 @@ const DRAW_DISABLED = typeof window !== 'undefined' &&
     new Set((new URLSearchParams(window.location.search).get('disable') ?? '')
         .split(',')
         .map((s) => s.trim())).has('draw');
-const FrameLimiter = ({ fps = 50, paused = false }) => {
-    const { advance, set, frameloop: initFrameloop } = useThree();
+const FrameLimiter = ({ fps = 50, paused = false, onFrameError }) => {
+    const { advance: advanceFrame, set, frameloop: initFrameloop } = useThree();
+    const onFrameErrorRef = useRef(onFrameError);
+    onFrameErrorRef.current = onFrameError;
     const nextFrameTimeRef = useRef(0);
     const renderer = useThree((state) => state.gl);
     const size = useThree((state) => state.size);
@@ -55,6 +57,23 @@ const FrameLimiter = ({ fps = 50, paused = false }) => {
         let raf = null;
         let timer = null;
         let sizeSynced = false;
+        // A system that throws inside useFrame runs outside React's error
+        // boundaries: report the first failure to the host and keep the loop alive.
+        let frameErrorReported = false;
+        function advance(frameTime) {
+            try {
+                advanceFrame(frameTime);
+            }
+            catch (error) {
+                if (frameErrorReported)
+                    return;
+                frameErrorReported = true;
+                if (onFrameErrorRef.current)
+                    onFrameErrorRef.current(error);
+                else
+                    console.error('[viewer] a frame callback threw', error);
+            }
+        }
         const effectiveFps = Number.isFinite(fps) && fps > 0 ? fps : 50;
         const interval = 1000 / effectiveFps;
         function syncSize() {
@@ -115,7 +134,7 @@ const FrameLimiter = ({ fps = 50, paused = false }) => {
             set({ frameloop: initFrameloop });
         };
     }, [
-        advance,
+        advanceFrame,
         dpr,
         fps,
         initFrameloop,

package/dist/components/viewer/glb-interactive.d.ts

@@ -1,5 +1,6 @@
 import { type AnyNodeId, type Interactive, type SceneGraph } from '@pascal-app/core';
-import { type AnimationAction, type Object3D } from 'three';
+import { type EvaluatedLight, type ProceduralItemNode } from '@pascal-app/core/procedural-items';
+import { type AnimationAction, type Object3D, Vector3 } from 'three';
 /** An interactive item recovered from the scene graph so the baked GLB can be
  *  re-lit / re-animated by joining on `pascalId`. The GLB carries the geometry
  *  + identity; the effects + controls live in the DB scene graph (no sidecar). */
@@ -9,17 +10,29 @@ export type GlbInteractiveItem = {
     /** Item height (world units) for placing the controls overlay above it. */
     height: number;
     interactive: Interactive;
+    /** Built from a script: its clips keep the script's names (`<pascalId>: <name>`
+     *  in the GLB) and its toggles start at their own defaults. */
+    scripted?: boolean;
+    localScale?: [number, number, number];
+    procedural?: {
+        lights: EvaluatedLight[];
+        parts: ProceduralItemNode['recipe']['parts'];
+        /** v2: the recipe's parts and joints, so non-fixed joints get controls too. */
+        recipe?: Pick<ProceduralItemNode['recipe'], 'parts' | 'joints'>;
+    };
 };
 /** A baked zone's identity node + its local floor polygon (from `extras`). */
 export type GlbZoneRef = {
     id: string;
     node: Object3D;
     polygon: [number, number][];
+    holes?: [number, number][][];
 };
 /** Pull the interactive items out of a scene graph. Only items that actually
  *  carry effects (light / animation) are returned — everything else baked
  *  faithfully and needs no runtime help. */
 export declare function buildGlbInteractiveItems(sceneGraph: SceneGraph | null | undefined): GlbInteractiveItem[];
+export declare function buildGlbLightRegs(items: GlbInteractiveItem[], identity: Map<string, Object3D>): GlbLightReg[];
 /**
  * Re-creates the item-driven interactivity the parametric viewer has — pooled
  * lights, ambient animation, and the controls overlay — on top of a baked GLB.
@@ -38,4 +51,15 @@ export declare function GlbInteractive({ items, identity, zones, actions, levelO
      *  lights when nothing is focused (mirrors the parametric level factor). */
     levelOrder: string[];
 }): import("react").JSX.Element;
+export type GlbLightReg = {
+    key: string;
+    nodeId: AnyNodeId;
+    object: Object3D;
+    color: string;
+    distance: number;
+    getWorldPosition: (out: Vector3) => void;
+    getIntensity: () => number;
+    isOn: () => boolean;
+    levelId: string | null;
+};
 //# sourceMappingURL=glb-interactive.d.ts.map

package/dist/components/viewer/glb-interactive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glb-interactive.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/glb-interactive.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,WAAW,EAGhB,KAAK,UAAU,EAGhB,MAAM,kBAAkB,CAAA;AAIzB,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,QAAQ,EAGd,MAAM,OAAO,CAAA;AAKd;;kFAEkF;AAClF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,WAAW,CAAA;CACzB,CAAA;AAED,8EAA8E;AAC9E,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAA;CAC5B,CAAA;AAED;;4CAE4C;AAC5C,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GACxC,kBAAkB,EAAE,CAuBtB;AAID;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,EACP,UAAU,GACX,EAAE;IACD,KAAK,EAAE,kBAAkB,EAAE,CAAA;IAC3B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC/B,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB;8BAC0B;IAC1B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC,CAAA;IAC/C;gFAC4E;IAC5E,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB,+BA6FA"}
+{"version":3,"file":"glb-interactive.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/glb-interactive.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAEd,KAAK,WAAW,EAGhB,KAAK,UAAU,EAOhB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,kBAAkB,EACxB,MAAM,mCAAmC,CAAA;AAI1C,OAAO,EACL,KAAK,eAAe,EAGpB,KAAK,QAAQ,EAEb,OAAO,EACR,MAAM,OAAO,CAAA;AAcd;;kFAEkF;AAClF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,WAAW,CAAA;IACxB;mEAC+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE;QACX,MAAM,EAAE,cAAc,EAAE,CAAA;QACxB,KAAK,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;QAC5C,+EAA+E;QAC/E,MAAM,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAA;KAChE,CAAA;CACF,CAAA;AAED,8EAA8E;AAC9E,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAA;IAC3B,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,EAAE,CAAA;CAC7B,CAAA;AAED;;4CAE4C;AAC5C,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GACxC,kBAAkB,EAAE,CAiEtB;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,kBAAkB,EAAE,EAC3B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,GAC9B,WAAW,EAAE,CAiFf;AAID;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,EACP,UAAU,GACX,EAAE;IACD,KAAK,EAAE,kBAAkB,EAAE,CAAA;IAC3B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC/B,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB;8BAC0B;IAC1B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC,CAAA;IAC/C;gFAC4E;IAC5E,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB,+BA0FA;AA8CD,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,SAAS,CAAA;IACjB,MAAM,EAAE,QAAQ,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,YAAY,EAAE,MAAM,MAAM,CAAA;IAC1B,IAAI,EAAE,MAAM,OAAO,CAAA;IACnB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB,CAAA"}

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

@@ -1,13 +1,19 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { pointInPolygon, useInteractive, } from '@pascal-app/core';
+import { containsPoint, isScriptedNode, scriptedOrigin, scriptedSize, scriptInteractive, useInteractive, } from '@pascal-app/core';
+import { evaluateRecipe, } from '@pascal-app/core/procedural-items';
 import { Html } from '@react-three/drei';
-import { createPortal, useFrame } from '@react-three/fiber';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal, useFrame, useThree } from '@react-three/fiber';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { LoopRepeat, MathUtils, Vector3, } from 'three';
 import { useShallow } from 'zustand/react/shallow';
+import { SCENE_LAYER } from '../../lib/layers';
+import { decorateProceduralEmission, proceduralSlotMeshes, setProceduralEmission, } from '../../lib/procedural-emission';
+import { useItemLightPool } from '../../store/use-item-light-pool';
 import useViewer from '../../store/use-viewer';
 import { ControlWidget } from '../../systems/interactive/control-widget';
+import { proceduralControlDescriptors } from '../../systems/interactive/procedural-controls';
+import { ScriptedClips } from '../../systems/interactive/scripted-clips';
 /** Pull the interactive items out of a scene graph. Only items that actually
  *  carry effects (light / animation) are returned — everything else baked
  *  faithfully and needs no runtime help. */
@@ -18,6 +24,48 @@ export function buildGlbInteractiveItems(sceneGraph) {
     const items = [];
     for (const [id, raw] of Object.entries(nodes)) {
         const node = raw;
+        if (node?.type === 'procedural-item') {
+            const procedural = raw;
+            const evaluation = evaluateRecipe(procedural.recipe, procedural.parameters);
+            if (!evaluation.lights.length && !evaluation.motions.length)
+                continue;
+            items.push({
+                pascalId: id,
+                label: procedural.name ?? id,
+                height: evaluation.max[1],
+                interactive: { controls: [], effects: [] },
+                procedural: {
+                    lights: evaluation.lights,
+                    parts: procedural.recipe.parts,
+                    recipe: procedural.recipe,
+                },
+            });
+            continue;
+        }
+        // A node built from a script: its controls come from what the script
+        // emitted, as in the editor.
+        if (isScriptedNode(raw)) {
+            const scripted = raw;
+            const interactive = scriptInteractive(scripted.source.manifest, scriptedOrigin(scripted));
+            if (!interactive)
+                continue;
+            const [, height] = scriptedSize(scripted.source.manifest);
+            items.push({
+                pascalId: id,
+                label: scripted.name ??
+                    (scripted.type === 'item'
+                        ? scripted.asset.name
+                        : `${scripted.type[0].toUpperCase()}${scripted.type.slice(1)}`),
+                // A window or door is placed by its centre, everything else by its base.
+                height: scripted.type === 'window' || scripted.type === 'door'
+                    ? height / 2
+                    : height * (scripted.type === 'item' ? (scripted.scale?.[1] ?? 1) : 1),
+                interactive,
+                scripted: true,
+                localScale: scripted.type === 'item' ? scripted.scale : [1, 1, 1],
+            });
+            continue;
+        }
         if (node?.type !== 'item')
             continue;
         const interactive = node.asset?.interactive;
@@ -34,6 +82,86 @@ export function buildGlbInteractiveItems(sceneGraph) {
     }
     return items;
 }
+export function buildGlbLightRegs(items, identity) {
+    const regs = [];
+    for (const item of items) {
+        const object = identity.get(item.pascalId);
+        if (!object)
+            continue;
+        if (item.procedural) {
+            const groups = new Map();
+            object.traverse((child) => {
+                const motion = child.userData.proceduralMotion;
+                if (motion?.groupId)
+                    groups.set(motion.groupId, child);
+            });
+            for (const light of item.procedural.lights) {
+                const motion = light.motionGroup ? groups.get(light.motionGroup) : undefined;
+                const local = new Vector3(...light.position);
+                // A nested group's position is relative to its parent group: the design-space pivot
+                // is the sum along its chain of motion groups.
+                for (let group = motion; group && group !== object; group = group.parent ?? undefined)
+                    if (group.userData.proceduralMotion)
+                        local.sub(group.position);
+                regs.push({
+                    key: `${item.pascalId}:procedural:${light.id}`,
+                    nodeId: item.pascalId,
+                    object,
+                    color: light.color,
+                    distance: light.distance,
+                    getWorldPosition: (out) => {
+                        const anchor = motion ?? object;
+                        anchor.updateWorldMatrix(true, false);
+                        out.copy(local).applyMatrix4(anchor.matrixWorld);
+                    },
+                    getIntensity: () => light.intensity,
+                    isOn: () => useInteractive.getState().procedural[item.pascalId]?.lightsOn ??
+                        useInteractive.getState().lampDefault,
+                    levelId: findLevelId(object),
+                });
+            }
+        }
+        const controls = item.interactive.controls;
+        const toggleIndex = controls.findIndex((control) => control.kind === 'toggle');
+        const sliderIndex = controls.findIndex((control) => control.kind === 'slider');
+        const slider = sliderIndex >= 0 ? controls[sliderIndex] : null;
+        item.interactive.effects.forEach((effect, index) => {
+            if (effect.kind !== 'light')
+                return;
+            regs.push({
+                key: `${item.pascalId}:${index}`,
+                nodeId: item.pascalId,
+                object,
+                color: effect.color,
+                distance: effect.distance ?? 0,
+                getWorldPosition: (out) => {
+                    object.updateWorldMatrix(true, false);
+                    if (item.scripted) {
+                        const scale = item.localScale ?? [1, 1, 1];
+                        out
+                            .set(effect.offset[0] * scale[0], effect.offset[1] * scale[1], effect.offset[2] * scale[2])
+                            .applyMatrix4(object.matrixWorld);
+                        return;
+                    }
+                    object.getWorldPosition(out);
+                    out.set(out.x + effect.offset[0], out.y + effect.offset[1], out.z + effect.offset[2]);
+                },
+                getIntensity: () => {
+                    const values = useInteractive.getState().items[item.pascalId]?.controlValues;
+                    const raw = slider ? (values?.[sliderIndex] ?? slider.min) : 1;
+                    const fraction = slider && slider.max > slider.min ? (raw - slider.min) / (slider.max - slider.min) : 1;
+                    return MathUtils.lerp(effect.intensityRange[0], effect.intensityRange[1], fraction);
+                },
+                isOn: () => {
+                    const values = useInteractive.getState().items[item.pascalId]?.controlValues;
+                    return toggleIndex < 0 || Boolean(values?.[toggleIndex]);
+                },
+                levelId: findLevelId(object),
+            });
+        });
+    }
+    return regs;
+}
 const _itemPos = new Vector3();
 /**
  * Re-creates the item-driven interactivity the parametric viewer has — pooled
@@ -43,18 +171,26 @@ const _itemPos = new Vector3();
  * the GLB itself, so the artifact stays integrator-clean.
  */
 export function GlbInteractive({ items, identity, zones, actions, levelOrder, }) {
-    // Seed control state for every interactive item. The viewer shows a baked
-    // scene "lit": toggles default ON (the editor defaults them off) and sliders
-    // to their authored default, so lamps glow and fans spin on load. Explicit
-    // overlay toggles then win. Cleared on unmount so the global store never
-    // carries state across scenes.
+    const scene = useThree((state) => state.scene);
+    useLayoutEffect(() => {
+        useItemLightPool.getState().setBakedCanvas(scene, true);
+        return () => useItemLightPool.getState().setBakedCanvas(scene, false);
+    }, [scene]);
+    // Baked catalog animation toggles start on; light toggles follow the current
+    // theme; an authored object's toggles keep their own defaults, as in the
+    // editor. Clear per-item state on unmount so it cannot carry into another scene.
     useEffect(() => {
         const store = useInteractive.getState();
         for (const item of items) {
-            store.initItem(item.pascalId, item.interactive);
-            item.interactive.controls.forEach((control, i) => {
-                if (control.kind === 'toggle')
-                    store.setControlValue(item.pascalId, i, true);
+            store.initItem(item.pascalId, item.interactive, true);
+            if (item.scripted)
+                continue;
+            const lampIndex = item.interactive.effects.some((effect) => effect.kind === 'light')
+                ? item.interactive.controls.findIndex((control) => control.kind === 'toggle')
+                : -1;
+            item.interactive.controls.forEach((control, index) => {
+                if (control.kind === 'toggle' && index !== lampIndex)
+                    store.setControlValue(item.pascalId, index, true);
             });
         }
         return () => {
@@ -64,40 +200,12 @@ export function GlbInteractive({ items, identity, zones, actions, levelOrder, })
         };
     }, [items]);
     const animationItems = useMemo(() => items.filter((item) => item.interactive.effects.some((e) => e.kind === 'animation')), [items]);
-    // Light registrations: one per item with a light effect, joined to its baked
-    // node. Fed to a fixed pool (below) rather than mounting a light per item.
-    const lightRegs = useMemo(() => {
-        const regs = [];
-        for (const item of items) {
-            const effect = item.interactive.effects.find((e) => e.kind === 'light');
-            if (!effect)
-                continue;
-            const object = identity.get(item.pascalId);
-            if (!object)
-                continue;
-            const controls = item.interactive.controls;
-            const toggleIndex = controls.findIndex((c) => c.kind === 'toggle');
-            const sliderIndex = controls.findIndex((c) => c.kind === 'slider');
-            const slider = sliderIndex >= 0 ? controls[sliderIndex] : null;
-            regs.push({
-                key: item.pascalId,
-                object,
-                effect,
-                toggleIndex,
-                sliderIndex,
-                hasSlider: !!slider,
-                sliderMin: slider?.min ?? 0,
-                sliderMax: slider?.max ?? 1,
-                levelId: findLevelId(object),
-            });
-        }
-        return regs;
-    }, [items, identity]);
+    const lightRegs = useMemo(() => buildGlbLightRegs(items, identity), [items, identity]);
     const levelIndexById = useMemo(() => new Map(levelOrder.map((id, i) => [id, i])), [levelOrder]);
-    // Controls overlay is scoped to the focused zone (matches the parametric
-    // viewer). Project the zone's baked-local polygon into world space once so an
-    // item's world position can be point-tested regardless of level stacking.
+    // Project the zone's baked-local polygon into world space so focused zone
+    // membership still works after level stacking moves its parent.
     const focusedZoneId = useViewer((s) => s.selection.zoneId);
+    const selectedIds = useViewer((s) => s.selection.selectedIds);
     const worldPolygon = useMemo(() => {
         if (!focusedZoneId)
             return null;
@@ -105,16 +213,51 @@ export function GlbInteractive({ items, identity, zones, actions, levelOrder, })
         if (!zone)
             return null;
         zone.node.updateWorldMatrix(true, false);
-        return zone.polygon.map(([x, z]) => {
+        const project = (ring) => ring.map(([x, z]) => {
             const v = new Vector3(x, 0, z).applyMatrix4(zone.node.matrixWorld);
             return [v.x, v.z];
         });
+        return { outer: project(zone.polygon), holes: (zone.holes ?? []).map(project) };
     }, [focusedZoneId, zones]);
-    return (_jsxs(_Fragment, { children: [_jsx(GlbItemLights, { levelIndexById: levelIndexById, regs: lightRegs }), animationItems.map((item) => (_jsx(GlbItemAnimation, { actions: actions, item: item }, item.pascalId))), items.map((item) => {
+    return (_jsxs(_Fragment, { children: [_jsx(GlbItemLights, { levelIndexById: levelIndexById, regs: lightRegs }), animationItems.map((item) => item.scripted ? (_jsx(GlbScriptedClips, { actions: actions, item: item }, item.pascalId)) : (_jsx(GlbItemAnimation, { actions: actions, item: item }, item.pascalId))), items
+                .filter((item) => item.procedural?.lights.length)
+                .map((item) => {
+                const object = identity.get(item.pascalId);
+                return object ? (_jsx(GlbProceduralEmission, { item: item, object: object }, item.pascalId)) : null;
+            }), items
+                .filter((item) => worldPolygon || selectedIds.includes(item.pascalId))
+                .map((item) => {
                 const object = identity.get(item.pascalId);
-                return object ? (_jsx(GlbItemControls, { item: item, object: object, worldPolygon: worldPolygon }, item.pascalId)) : null;
+                return object ? (_jsx(GlbItemControls, { isSelected: selectedIds.includes(item.pascalId), item: item, object: object, worldPolygon: worldPolygon }, item.pascalId)) : null;
             })] }));
 }
+function GlbProceduralEmission({ item, object }) {
+    useEffect(() => {
+        const lights = item.procedural?.lights ?? [];
+        const restore = decorateProceduralEmission(object, lights, true);
+        const update = () => {
+            const on = useInteractive.getState().procedural[item.pascalId]?.lightsOn ??
+                useInteractive.getState().lampDefault;
+            const slots = new Set(lights.map((light) => light.emissiveSlot).filter(Boolean));
+            for (const mesh of proceduralSlotMeshes(object, slots)) {
+                const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+                for (const material of materials)
+                    setProceduralEmission(material, on);
+            }
+        };
+        update();
+        const unsubscribe = useInteractive.subscribe((state, previous) => {
+            if (state.procedural[item.pascalId] !== previous.procedural[item.pascalId] ||
+                state.lampDefault !== previous.lampDefault)
+                update();
+        });
+        return () => {
+            unsubscribe();
+            restore();
+        };
+    }, [item, object]);
+    return null;
+}
 // ── Pooled item lights ──────────────────────────────────────────────────────
 //
 // Mirrors the parametric `ItemLightSystem`: a fixed pool of point lights is
@@ -142,15 +285,21 @@ function findLevelId(object) {
     }
     return null;
 }
-function scoreReg(reg, selectedLevelId, levelMode, levelIndexById, interactiveState) {
-    // Toggled-off lights contribute no illumination — drop them from the pool.
-    if (reg.toggleIndex >= 0 && !interactiveState.items[reg.key]?.controlValues?.[reg.toggleIndex]) {
-        return Number.POSITIVE_INFINITY;
+function isRendered(object) {
+    let current = object;
+    while (current) {
+        if (!current.visible || !current.layers.isEnabled(SCENE_LAYER))
+            return false;
+        current = current.parent;
     }
-    reg.object.getWorldPosition(_lightWorld);
-    _lightWorld.x += reg.effect.offset[0];
-    _lightWorld.y += reg.effect.offset[1];
-    _lightWorld.z += reg.effect.offset[2];
+    return true;
+}
+function scoreReg(reg, selectedLevelId, levelMode, levelIndexById) {
+    if (!reg.isOn() || !isRendered(reg.object))
+        return Number.POSITIVE_INFINITY;
+    if (selectedLevelId && reg.levelId !== selectedLevelId && levelMode === 'solo')
+        return Number.POSITIVE_INFINITY;
+    reg.getWorldPosition(_lightWorld);
     _dir.copy(_lightWorld).sub(_camPos).normalize();
     const angular = 1 - _camFwd.dot(_dir);
     const dist = _camPos.distanceTo(_lightWorld) / 200;
@@ -173,7 +322,6 @@ function GlbItemLights({ regs, levelIndexById, }) {
     const regByKey = useMemo(() => new Map(regs.map((r) => [r.key, r])), [regs]);
     useFrame(({ camera }, delta) => {
         const dt = Math.min(delta, 0.1);
-        const interactiveState = useInteractive.getState();
         camera.getWorldPosition(_camPos);
         camera.getWorldDirection(_camFwd);
         const camMoved = _camPos.distanceTo(prevCamPos.current) > CAM_MOVE_DIST ||
@@ -188,7 +336,7 @@ function GlbItemLights({ regs, levelIndexById, }) {
             const levelMode = viewer.levelMode;
             const scored = regs.map((reg) => ({
                 key: reg.key,
-                score: scoreReg(reg, selectedLevelId, levelMode, levelIndexById, interactiveState),
+                score: scoreReg(reg, selectedLevelId, levelMode, levelIndexById),
             }));
             scored.sort((a, b) => a.score - b.score);
             const scoreByKey = new Map(scored.map((s) => [s.key, s.score]));
@@ -244,8 +392,8 @@ function GlbItemLights({ regs, levelIndexById, }) {
                         const light = lightRefs.current[freeSlot];
                         const reg = regByKey.get(key);
                         if (light && reg) {
-                            light.color.set(reg.effect.color);
-                            light.distance = reg.effect.distance ?? 0;
+                            light.color.set(reg.color);
+                            light.distance = reg.distance;
                         }
                     }
                 }
@@ -283,8 +431,8 @@ function GlbItemLights({ regs, levelIndexById, }) {
                     if (slot.key) {
                         const reg = regByKey.get(slot.key);
                         if (reg) {
-                            light.color.set(reg.effect.color);
-                            light.distance = reg.effect.distance ?? 0;
+                            light.color.set(reg.color);
+                            light.distance = reg.distance;
                         }
                     }
                 }
@@ -299,24 +447,12 @@ function GlbItemLights({ regs, levelIndexById, }) {
                 slot.key = null;
                 continue;
             }
-            reg.object.getWorldPosition(_lightWorld);
-            light.position.set(_lightWorld.x + reg.effect.offset[0], _lightWorld.y + reg.effect.offset[1], _lightWorld.z + reg.effect.offset[2]);
-            const values = interactiveState.items[reg.key]?.controlValues;
-            const isOn = reg.toggleIndex >= 0 ? Boolean(values?.[reg.toggleIndex]) : true;
-            let t = 1;
-            if (reg.hasSlider) {
-                const raw = values?.[reg.sliderIndex] ?? reg.sliderMin;
-                t =
-                    reg.sliderMax > reg.sliderMin
-                        ? (raw - reg.sliderMin) / (reg.sliderMax - reg.sliderMin)
-                        : 1;
-            }
-            const targetIntensity = isOn
-                ? MathUtils.lerp(reg.effect.intensityRange[0], reg.effect.intensityRange[1], t)
-                : reg.effect.intensityRange[0];
+            reg.getWorldPosition(_lightWorld);
+            light.position.copy(_lightWorld);
+            const targetIntensity = reg.isOn() && isRendered(reg.object) ? reg.getIntensity() : 0;
             light.intensity = MathUtils.lerp(light.intensity, targetIntensity, dt * 12);
         }
-    });
+    }, 6);
     return (_jsx(_Fragment, { children: Array.from({ length: POOL_SIZE }, (_, i) => (_jsx("pointLight", { castShadow: false, intensity: 0, ref: (el) => {
                 lightRefs.current[i] = el;
             } }, i))) }));
@@ -345,16 +481,47 @@ function GlbItemAnimation({ item, actions, }) {
     }, [actions, item.pascalId, isOn]);
     return null;
 }
+/** Plays an authored object's baked clips through the shared `ScriptedClips`,
+ *  addressing each by the name the script gave it. */
+function GlbScriptedClips({ item, actions, }) {
+    // drei creates each action on first read, once the scene root is mounted, so
+    // forward reads instead of copying the actions during render.
+    const scriptActions = useMemo(() => {
+        const prefix = `${item.pascalId}: `;
+        const forwarded = {};
+        for (const name of Object.keys(actions)) {
+            if (!name.startsWith(prefix))
+                continue;
+            Object.defineProperty(forwarded, name.slice(prefix.length), {
+                enumerable: true,
+                get: () => actions[name],
+            });
+        }
+        return forwarded;
+    }, [actions, item.pascalId]);
+    return (_jsx(ScriptedClips, { actions: scriptActions, interactive: item.interactive, nodeId: item.pascalId }));
+}
 const FADE_MS = 300;
-/** Controls overlay for one item — fades in while the item sits inside the
- *  focused zone, portaled above the baked node. */
-function GlbItemControls({ item, object, worldPolygon, }) {
+/** Controls overlay for a selected item or one inside the focused zone. */
+function GlbItemControls({ item, object, worldPolygon, isSelected, }) {
     const controlValues = useInteractive(useShallow((s) => s.items[item.pascalId]?.controlValues));
+    const proceduralState = useInteractive((s) => s.procedural[item.pascalId]);
+    const lampDefault = useInteractive((s) => s.lampDefault);
     const setControlValue = useInteractive((s) => s.setControlValue);
-    let visible = false;
-    if (worldPolygon?.length) {
+    const togglePart = useInteractive((s) => s.toggleProceduralPart);
+    const toggleLights = useInteractive((s) => s.toggleProceduralLights);
+    const descriptors = item.procedural
+        ? proceduralControlDescriptors(item.procedural.recipe ?? { parts: item.procedural.parts }, proceduralState, (partId) => togglePart(item.pascalId, partId), () => toggleLights(item.pascalId), lampDefault)
+        : item.interactive.controls.map((control, index) => ({
+            key: String(index),
+            control,
+            value: controlValues?.[index] ?? false,
+            onChange: (value) => setControlValue(item.pascalId, index, value),
+        }));
+    let visible = isSelected;
+    if (worldPolygon) {
         object.getWorldPosition(_itemPos);
-        visible = pointInPolygon(_itemPos.x, _itemPos.z, worldPolygon);
+        visible = visible || containsPoint([worldPolygon], [_itemPos.x, _itemPos.z]);
     }
     // Fade in on mount and fade out before unmounting the <Html>.
     const [mounted, setMounted] = useState(false);
@@ -375,7 +542,7 @@ function GlbItemControls({ item, object, worldPolygon, }) {
         const timeout = setTimeout(() => setMounted(false), FADE_MS);
         return () => clearTimeout(timeout);
     }, [visible]);
-    if (!(mounted && controlValues))
+    if (!(mounted && descriptors.length))
         return null;
     return createPortal(_jsx(Html, { center: true, distanceFactor: 8, eps: -1, position: [0, item.height + 0.3, 0], zIndexRange: [20, 0], children: _jsx("div", { onClick: (e) => e.stopPropagation(), onPointerDown: (e) => e.stopPropagation(), onPointerUp: (e) => e.stopPropagation(), style: {
                 display: 'flex',
@@ -390,5 +557,5 @@ function GlbItemControls({ item, object, worldPolygon, }) {
                 userSelect: 'none',
                 opacity: shown ? 1 : 0,
                 transition: `opacity ${FADE_MS}ms ease`,
-            }, children: item.interactive.controls.map((control, i) => (_jsx(ControlWidget, { control: control, onChange: (v) => setControlValue(item.pascalId, i, v), value: controlValues[i] ?? false }, i))) }) }), object);
+            }, children: descriptors.map((descriptor) => (_jsx(ControlWidget, { control: descriptor.control, onChange: descriptor.onChange, value: descriptor.value }, descriptor.key))) }) }), object);
 }

package/dist/components/viewer/glb-mechanisms.d.ts

@@ -0,0 +1,10 @@
+import type { Object3D } from 'three';
+/**
+ * Baked nodes whose loop clips no other controller plays (a plugin kind's
+ * mechanism, such as an articulated asset's joints), read from the GLB alone:
+ * `pascalId` → its `: loop` clip names. `owned` holds the nodes procedural
+ * playback or the scene graph's interactive items already drive; openables
+ * keep their open/close path.
+ */
+export declare function bakedLoopMechanisms(identity: ReadonlyMap<string, Object3D>, owned: ReadonlySet<string>): Map<string, string[]>;
+//# sourceMappingURL=glb-mechanisms.d.ts.map

package/dist/components/viewer/glb-mechanisms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glb-mechanisms.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/glb-mechanisms.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAErC;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,EACvC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,GACzB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAWvB"}