@pascal-app/nodes 1.0.0 → 1.0.1

package/dist/procedural-item/geometry.d.ts

@@ -0,0 +1,31 @@
+import { type Evaluation, type ProceduralItemNode } from '@pascal-app/core/procedural-items';
+import { type BufferGeometry } from 'three';
+export type Batch = {
+    slot: string;
+    geometry: BufferGeometry;
+    ranges: {
+        end: number;
+        partId: string;
+        shapeId: string;
+    }[];
+};
+export type BuiltItem = {
+    batches: Batch[];
+    evaluation: Evaluation;
+    milliseconds: number;
+    triangles: number;
+};
+export declare const proceduralMetrics: {
+    builds: number;
+    cacheHits: number;
+    lastBuildMs: number;
+    liveEntries: number;
+};
+export declare const geometrySignature: (node: ProceduralItemNode) => string;
+export declare function buildProceduralGeometry(node: ProceduralItemNode): BuiltItem;
+export declare function acquireProceduralGeometry(node: ProceduralItemNode): {
+    value: BuiltItem;
+    release: () => void;
+};
+export declare function partAtFace(ranges: Batch['ranges'], face: number): string | null;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/procedural-item/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../src/procedural-item/geometry.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EAEf,KAAK,kBAAkB,EACxB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAEL,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAA;AAGd,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,cAAc,CAAA;IACxB,MAAM,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC3D,CAAA;AACD,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,EAAE,KAAK,EAAE,CAAA;IAChB,UAAU,EAAE,UAAU,CAAA;IACtB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,eAAO,MAAM,iBAAiB;;;;;CAA8D,CAAA;AAE5F,eAAO,MAAM,iBAAiB,GAAI,MAAM,kBAAkB,WACV,CAAA;AAChD,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,kBAAkB,GAAG,SAAS,CA8D3E;AACD,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,kBAAkB;;;EAwBjE;AACD,wBAAgB,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,iBAE/D"}

package/dist/procedural-item/geometry.js

@@ -0,0 +1,88 @@
+import { evaluateRecipe, } from '@pascal-app/core/procedural-items';
+import { BoxGeometry, CylinderGeometry, Euler, Matrix4, Quaternion, Vector3, } from 'three';
+import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
+import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';
+export const proceduralMetrics = { builds: 0, cacheHits: 0, lastBuildMs: 0, liveEntries: 0 };
+const cache = new Map();
+export const geometrySignature = (node) => JSON.stringify([node.recipe, node.parameters]);
+export function buildProceduralGeometry(node) {
+    const start = performance.now(), evaluation = evaluateRecipe(node.recipe, node.parameters);
+    const bySlot = new Map();
+    for (const shape of evaluation.shapes) {
+        const [w, h, d] = shape.size;
+        const source = shape.primitive === 'roundedBox'
+            ? new RoundedBoxGeometry(w, h, d, 2, shape.radius)
+            : shape.primitive === 'cylinder'
+                ? new CylinderGeometry(0.5, 0.5, 1, 24, 1)
+                : new BoxGeometry(w, h, d);
+        if (shape.primitive === 'cylinder')
+            source.scale(w, h, d);
+        const geometry = source.index ? source.toNonIndexed() : source;
+        if (geometry !== source)
+            source.dispose();
+        geometry.clearGroups();
+        const vertices = geometry.getAttribute('position'), normals = geometry.getAttribute('normal'), uv = geometry.getAttribute('uv');
+        for (let i = 0; i < vertices.count; i++) {
+            const x = vertices.getX(i), y = vertices.getY(i), z = vertices.getZ(i);
+            const nx = Math.abs(normals.getX(i)), ny = Math.abs(normals.getY(i)), nz = Math.abs(normals.getZ(i));
+            uv.setXY(i, nx > ny && nx > nz ? z : x, ny > nx && ny > nz ? z : y);
+        }
+        geometry.applyMatrix4(new Matrix4().compose(new Vector3(...shape.position), new Quaternion().setFromEuler(new Euler(...shape.rotation)), new Vector3(1, 1, 1)));
+        const entry = bySlot.get(shape.slot) ?? { geometries: [], ranges: [], faces: 0 };
+        entry.geometries.push(geometry);
+        entry.faces += geometry.getAttribute('position').count / 3;
+        entry.ranges.push({ end: entry.faces, partId: shape.partId, shapeId: shape.id });
+        bySlot.set(shape.slot, entry);
+    }
+    const batches = [];
+    for (const [slot, entry] of bySlot) {
+        const geometry = mergeGeometries(entry.geometries, false);
+        for (const g of entry.geometries)
+            g.dispose();
+        if (!geometry)
+            throw new Error('Unable to batch procedural geometry');
+        geometry.computeBoundingBox();
+        geometry.computeBoundingSphere();
+        batches.push({ slot, geometry, ranges: entry.ranges });
+    }
+    const milliseconds = performance.now() - start;
+    proceduralMetrics.builds++;
+    proceduralMetrics.lastBuildMs = milliseconds;
+    return {
+        batches,
+        evaluation,
+        milliseconds,
+        triangles: batches.reduce((n, b) => n + b.geometry.getAttribute('position').count / 3, 0),
+    };
+}
+export function acquireProceduralGeometry(node) {
+    const key = geometrySignature(node);
+    let entry = cache.get(key);
+    if (entry)
+        proceduralMetrics.cacheHits++;
+    else {
+        entry = { value: buildProceduralGeometry(node), users: 0 };
+        cache.set(key, entry);
+    }
+    entry.users++;
+    proceduralMetrics.liveEntries = cache.size;
+    let released = false;
+    return {
+        value: entry.value,
+        release: () => {
+            if (released)
+                return;
+            released = true;
+            const current = cache.get(key);
+            if (current && --current.users === 0) {
+                for (const batch of current.value.batches)
+                    batch.geometry.dispose();
+                cache.delete(key);
+            }
+            proceduralMetrics.liveEntries = cache.size;
+        },
+    };
+}
+export function partAtFace(ranges, face) {
+    return ranges.find((r) => face < r.end)?.partId ?? null;
+}

package/dist/procedural-item/index.d.ts

@@ -0,0 +1,3 @@
+export { proceduralItemDefinition } from './definition';
+export { acquireProceduralGeometry, buildProceduralGeometry, geometrySignature, partAtFace, proceduralMetrics, } from './geometry';
+//# sourceMappingURL=index.d.ts.map

package/dist/procedural-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/procedural-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AACvD,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACvB,iBAAiB,EACjB,UAAU,EACV,iBAAiB,GAClB,MAAM,YAAY,CAAA"}

package/dist/procedural-item/index.js

@@ -0,0 +1,2 @@
+export { proceduralItemDefinition } from './definition';
+export { acquireProceduralGeometry, buildProceduralGeometry, geometrySignature, partAtFace, proceduralMetrics, } from './geometry';

package/dist/procedural-item/move-session.d.ts

@@ -0,0 +1,15 @@
+import { type AnyNodeId, type CeilingNode, type FloorplanMoveTarget, type FloorplanMoveTargetSession, type WallNode } from '@pascal-app/core';
+import { type ProceduralItemNode } from '@pascal-app/core/procedural-items';
+export declare const createProceduralWallMoveSession: typeof createProceduralMountedMoveSession;
+export declare const createProceduralCeilingMoveSession: typeof createProceduralMountedMoveSession;
+declare function createProceduralMountedMoveSession(node: ProceduralItemNode, levelId: AnyNodeId): FloorplanMoveTargetSession & {
+    wall(wall: WallNode, x: number, y: number, side: "front" | "back", alt: boolean): void;
+    ceiling(ceiling: CeilingNode, x: number, z: number, alt: boolean): void;
+    rotate(direction: number): void;
+    free(point: readonly [number, number]): void;
+    commit(): void;
+    readonly candidate: ProceduralItemNode | null;
+};
+export declare const proceduralFloorplanMoveTarget: FloorplanMoveTarget<ProceduralItemNode>;
+export {};
+//# sourceMappingURL=move-session.d.ts.map

package/dist/procedural-item/move-session.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-session.d.ts","sourceRoot":"","sources":["../../src/procedural-item/move-session.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,EAI/B,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAML,KAAK,kBAAkB,EAOxB,MAAM,mCAAmC,CAAA;AA0B1C,eAAO,MAAM,+BAA+B,2CAAqC,CAAA;AACjF,eAAO,MAAM,kCAAkC,2CAAqC,CAAA;AAEpF,iBAAS,kCAAkC,CAAC,IAAI,EAAE,kBAAkB,EAAE,OAAO,EAAE,SAAS;eA4BzE,QAAQ,KAAK,MAAM,KAAK,MAAM,QAAQ,OAAO,GAAG,MAAM,OAAO,OAAO,GAAG,IAAI;qBACrE,WAAW,KAAK,MAAM,KAAK,MAAM,OAAO,OAAO,GAAG,IAAI;sBACrD,MAAM,GAAG,IAAI;gBACnB,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;cAClC,IAAI;wBACM,kBAAkB,GAAG,IAAI;EAiKhD;AAED,eAAO,MAAM,6BAA6B,EAAE,mBAAmB,CAAC,kBAAkB,CAqBjF,CAAA"}

package/dist/procedural-item/move-session.js

@@ -0,0 +1,197 @@
+import { useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+import { attachmentBounds, boundsOf, boxCorners, evaluateRecipe, frame, proceduralLocalPose, resolveProceduralCeilingPlacement, resolveProceduralWallPlacement, transformPoint, validateProceduralRelations, } from '@pascal-app/core/procedural-items';
+import { isGridSnapActive, isMagneticSnapActive, snapToHalf, triggerSFX, useEditor, usePlacementPreview, } from '@pascal-app/editor';
+import { findContainingSurface, itemFloorplanMoveTarget } from '../item/floorplan-move';
+import { findClosestWallInPlan, hasWallChildOverlap, snapLocalXToNeighbors, } from '../shared/wall-attach-target';
+function mountedBounds(node, nodes) {
+    const e = evaluateRecipe(node.recipe, node.parameters);
+    const pose = proceduralLocalPose(node, nodes);
+    return boundsOf(boxCorners(e.min, e.max).map((point) => transformPoint(frame(pose.position, pose.rotation), point)));
+}
+export const createProceduralWallMoveSession = createProceduralMountedMoveSession;
+export const createProceduralCeilingMoveSession = createProceduralMountedMoveSession;
+function createProceduralMountedMoveSession(node, levelId) {
+    const ceilingMounted = node.recipe.mounting?.attachTo === 'ceiling';
+    let yaw = node.rotation[1];
+    const e = evaluateRecipe(node.recipe, node.parameters);
+    let candidate = null;
+    let flipped = false;
+    let force = false;
+    let last = null;
+    let onHost = false;
+    let stepKey = '';
+    const id = node.id;
+    const show = (next) => {
+        const key = next.position
+            .map((v) => Math.round(v / (isGridSnapActive() ? useEditor.getState().gridSnapStep : 0.1)))
+            .join(':');
+        if (key !== stepKey) {
+            stepKey = key;
+            triggerSFX('sfx:grid-snap');
+        }
+        useLiveNodeOverrides.getState().set(id, { visible: false });
+        usePlacementPreview
+            .getState()
+            .set(next, next.parentId ? useScene.getState().nodes[next.parentId] : null);
+    };
+    const session = {
+        affectedIds: [id],
+        get candidate() {
+            return candidate;
+        },
+        flipSide() {
+            if (ceilingMounted) {
+                session.rotate(1);
+                return;
+            }
+            flipped = !flipped;
+            triggerSFX('sfx:item-rotate');
+            last?.();
+        },
+        rotate(direction) {
+            yaw = (Math.round(yaw / (Math.PI / 4)) + direction) * (Math.PI / 4);
+            triggerSFX('sfx:item-rotate');
+            last?.();
+        },
+        ceiling(ceiling, x, z, alt) {
+            if (!ceilingMounted || ceiling.parentId !== levelId)
+                return;
+            last = () => session.ceiling(ceiling, x, z, alt);
+            force = alt;
+            candidate = resolveProceduralCeilingPlacement(node, ceiling, alt ? x : snapToHalf(x), alt ? z : snapToHalf(z), yaw);
+            if (!onHost)
+                triggerSFX('sfx:item-pick');
+            onHost = true;
+            show(candidate);
+        },
+        free(point) {
+            last = () => session.free(point);
+            candidate = null;
+            onHost = false;
+            show({
+                ...node,
+                wallId: undefined,
+                side: undefined,
+                supportSlabId: undefined,
+                parentId: levelId,
+                position: [snapToHalf(point[0]), node.position[1] || 1.2, snapToHalf(point[1])],
+                rotation: [0, ceilingMounted ? yaw : flipped ? Math.PI : 0, 0],
+                visible: true,
+            });
+        },
+        wall(wall, x, y, side, alt) {
+            if (ceilingMounted || wall.parentId !== levelId)
+                return;
+            last = () => session.wall(wall, x, y, side, alt);
+            force = alt;
+            const nodes = useScene.getState().nodes;
+            const aligned = isMagneticSnapActive() && !alt
+                ? snapLocalXToNeighbors({ wall, localX: x, width: e.dimensions[0], selfId: id, nodes })
+                : null;
+            candidate = resolveProceduralWallPlacement(node, wall, aligned ?? (alt ? x : snapToHalf(x)), alt ? y : snapToHalf(y), flipped ? (side === 'front' ? 'back' : 'front') : side, nodes);
+            if (!candidate) {
+                session.free([wall.start[0], wall.start[1]]);
+                return;
+            }
+            if (!onHost)
+                triggerSFX('sfx:item-pick');
+            onHost = true;
+            show(candidate);
+        },
+        apply({ planPoint, modifiers }) {
+            if (ceilingMounted) {
+                const ceiling = findContainingSurface(planPoint, useScene.getState().nodes, levelId, 'ceiling');
+                if (ceiling)
+                    session.ceiling(ceiling, planPoint[0], planPoint[1], modifiers.altKey);
+                else
+                    session.free(planPoint);
+                return;
+            }
+            const hit = findClosestWallInPlan(planPoint, useScene.getState().nodes, levelId);
+            if (hit)
+                session.wall(hit.wall, hit.localX, node.position[1] || 1.2, hit.side, modifiers.altKey);
+            else
+                session.free(planPoint);
+        },
+        canCommit() {
+            if (!candidate || useScene.getState().readOnly)
+                return false;
+            const nodes = useScene.getState().nodes;
+            try {
+                validateProceduralRelations(candidate, nodes);
+            }
+            catch {
+                return false;
+            }
+            if (force)
+                return true;
+            if (ceilingMounted) {
+                const own = mountedBounds(candidate, nodes);
+                return !Object.values(nodes).some((other) => {
+                    if (other.id === id || other.parentId !== candidate.parentId)
+                        return false;
+                    const box = other.type === 'procedural-item'
+                        ? mountedBounds(other, nodes)
+                        : other.type === 'item'
+                            ? attachmentBounds(other)
+                            : null;
+                    return (box &&
+                        own.min[0] < box.max[0] - 1e-6 &&
+                        own.max[0] > box.min[0] + 1e-6 &&
+                        own.min[2] < box.max[2] - 1e-6 &&
+                        own.max[2] > box.min[2] + 1e-6);
+                });
+            }
+            const b = mountedBounds(candidate, nodes);
+            const centerX = (b.min[0] + b.max[0]) / 2;
+            const centerY = (b.min[1] + b.max[1]) / 2;
+            if (hasWallChildOverlap(candidate.wallId, nodes, centerX, centerY, b.dimensions[0], b.dimensions[1], id))
+                return false;
+            const own = b;
+            return !Object.values(nodes).some((other) => {
+                if (other.type !== 'procedural-item' || other.id === id)
+                    return false;
+                const p = other;
+                if (p.wallId !== candidate.wallId || p.side !== candidate.side)
+                    return false;
+                const box = mountedBounds(p, nodes);
+                return own.min.every((v, i) => v < box.max[i] - 1e-6 && own.max[i] > box.min[i] + 1e-6);
+            });
+        },
+        commit() {
+            if (!candidate || !session.canCommit())
+                return;
+            useLiveNodeOverrides.getState().clear(id);
+            const { parentId, wallId, position, rotation, side, visible, supportSlabId } = candidate;
+            useScene.getState().updateNode(id, {
+                parentId,
+                wallId,
+                position,
+                rotation,
+                side,
+                visible,
+                supportSlabId,
+            });
+            usePlacementPreview.getState().clear();
+        },
+    };
+    return session;
+}
+export const proceduralFloorplanMoveTarget = ({ node, nodes, sceneApi, }) => {
+    if (!node.recipe.mounting) {
+        const e = evaluateRecipe(node.recipe, node.parameters);
+        return itemFloorplanMoveTarget({
+            node: {
+                ...node,
+                asset: { dimensions: e.dimensions },
+                scale: [1, 1, 1],
+            },
+            nodes,
+            sceneApi,
+        });
+    }
+    let parent = node.parentId ? nodes[node.parentId] : undefined;
+    while (parent && parent.type !== 'level')
+        parent = parent.parentId ? nodes[parent.parentId] : undefined;
+    return createProceduralMountedMoveSession(node, parent?.id);
+};

package/dist/procedural-item/move-tool.d.ts

@@ -0,0 +1,5 @@
+import { type ProceduralItemNode } from '@pascal-app/core/procedural-items';
+export default function MoveProceduralItem({ node }: {
+    node: ProceduralItemNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=move-tool.d.ts.map

package/dist/procedural-item/move-tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-tool.d.ts","sourceRoot":"","sources":["../../src/procedural-item/move-tool.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,kBAAkB,EAAuB,MAAM,mCAAmC,CAAA;AAsBhG,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,kBAAkB,CAAA;CAAE,+BAMhF"}

package/dist/procedural-item/move-tool.js

@@ -0,0 +1,193 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { emitter, holdHiddenWallPointerEvents, sceneRegistry, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+import { queryProceduralItem } from '@pascal-app/core/procedural-items';
+import { clearPlacementSurface, commitFreshPlacementSubtree, consumePlacementDragRelease, getSideFromNormal, isFreshPlacementMetadata, isValidWallSideFace, MoveRegistryNodeTool, publishPlacementSurface, triggerSFX, useEditor, usePlacementPreview, useRegistryToolContext, } from '@pascal-app/editor';
+import { useEffect, useMemo, useState } from 'react';
+import { Vector3 } from 'three';
+import { MeshBasicNodeMaterial } from 'three/webgpu';
+import { beginOpeningMoveHistorySession } from '../shared/opening-move-history';
+import { acquireProceduralGeometry } from './geometry';
+import { createProceduralCeilingMoveSession, createProceduralWallMoveSession } from './move-session';
+export default function MoveProceduralItem({ node }) {
+    return node.recipe.mounting ? (_jsx(MountedMove, { node: node })) : (_jsx(MoveRegistryNodeTool, { node: node }));
+}
+function MountedMove({ node }) {
+    const { activeLevelId, isCameraDragging, selectNode } = useRegistryToolContext();
+    const [valid, setValid] = useState(false);
+    useEffect(() => {
+        if (!activeLevelId)
+            return;
+        const ceilingMounted = node.recipe.mounting?.attachTo === 'ceiling';
+        const session = (ceilingMounted ? createProceduralCeilingMoveSession : createProceduralWallMoveSession)(node, activeLevelId);
+        const releaseWallEvents = holdHiddenWallPointerEvents();
+        let wallAt = -Infinity;
+        let finished = false;
+        const onWall = (event) => {
+            if (ceilingMounted ||
+                useEditor.getState().isFloorplanHovered ||
+                !isValidWallSideFace(event.normal))
+                return;
+            wallAt = performance.now();
+            session.wall(event.node, event.localPosition[0], event.localPosition[1], getSideFromNormal(event.normal), event.nativeEvent.altKey);
+            setValid(session.canCommit());
+            const normal = new Vector3(...(event.normal ?? [0, 0, 1]));
+            const wall = sceneRegistry.nodes.get(event.node.id);
+            if (wall)
+                normal.transformDirection(wall.matrixWorld);
+            publishPlacementSurface(new Vector3(...event.position), normal);
+        };
+        const onCeiling = (event) => {
+            if (!ceilingMounted || useEditor.getState().isFloorplanHovered)
+                return;
+            wallAt = performance.now();
+            session.ceiling(event.node, event.localPosition[0], event.localPosition[2], event.nativeEvent.altKey);
+            setValid(session.canCommit());
+            publishPlacementSurface(new Vector3(...event.position), new Vector3(0, -1, 0));
+        };
+        const onGrid = (event) => {
+            if (useEditor.getState().isFloorplanHovered || performance.now() - wallAt < 64)
+                return;
+            if (ceilingMounted)
+                session.free([event.position[0], event.position[2]]);
+            else
+                session.apply({
+                    planPoint: [event.position[0], event.position[2]],
+                    modifiers: event.nativeEvent,
+                });
+            setValid(session.canCommit());
+            if (!session.candidate)
+                clearPlacementSurface();
+        };
+        const commit = () => {
+            if (finished || isCameraDragging() || !session.canCommit())
+                return;
+            const history = beginOpeningMoveHistorySession();
+            let id = node.id;
+            try {
+                if (isFreshPlacementMetadata(node.metadata)) {
+                    session.commit();
+                    id = commitFreshPlacementSubtree(node.id, { visible: true });
+                }
+                else
+                    history.commitStep(() => session.commit());
+                finished = true;
+            }
+            finally {
+                history.end();
+            }
+            if (id)
+                selectNode(id);
+            triggerSFX('sfx:item-place');
+            useEditor.getState().setMovingNode(null);
+        };
+        const clickWall = (event) => {
+            if (ceilingMounted)
+                return;
+            onWall(event);
+            if (session.canCommit()) {
+                event.stopPropagation();
+                commit();
+            }
+        };
+        const clickCeiling = (event) => {
+            if (!ceilingMounted)
+                return;
+            onCeiling(event);
+            if (session.canCommit()) {
+                event.stopPropagation();
+                commit();
+            }
+        };
+        const leaveCeiling = (event) => {
+            if (!ceilingMounted || useEditor.getState().isFloorplanHovered)
+                return;
+            wallAt = -Infinity;
+            session.free([event.position[0], event.position[2]]);
+            setValid(false);
+            clearPlacementSurface();
+        };
+        const clickGrid = (event) => {
+            onGrid(event);
+            commit();
+        };
+        const cancel = () => {
+            usePlacementPreview.getState().clear();
+            useLiveNodeOverrides.getState().clear(node.id);
+            useEditor.getState().setMovingNode(null);
+        };
+        const release = (event) => {
+            if (consumePlacementDragRelease(event))
+                commit();
+        };
+        const key = (event) => {
+            if (useEditor.getState().isFloorplanHovered || event.repeat || event.metaKey || event.ctrlKey)
+                return;
+            if (event.target?.closest('input,textarea,[contenteditable="true"]'))
+                return;
+            if (event.key.toLowerCase() === 'r' || (ceilingMounted && event.key.toLowerCase() === 't')) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                if (ceilingMounted)
+                    session.rotate(event.key.toLowerCase() === 't' ? -1 : 1);
+                else
+                    session.flipSide?.();
+                setValid(session.canCommit());
+            }
+        };
+        emitter.on('ceiling:enter', onCeiling);
+        emitter.on('ceiling:move', onCeiling);
+        emitter.on('ceiling:click', clickCeiling);
+        emitter.on('ceiling:leave', leaveCeiling);
+        emitter.on('wall:enter', onWall);
+        emitter.on('wall:move', onWall);
+        emitter.on('wall:click', clickWall);
+        emitter.on('grid:move', onGrid);
+        emitter.on('grid:click', clickGrid);
+        emitter.on('tool:cancel', cancel);
+        window.addEventListener('pointerup', release);
+        window.addEventListener('keydown', key, true);
+        return () => {
+            emitter.off('ceiling:enter', onCeiling);
+            emitter.off('ceiling:move', onCeiling);
+            emitter.off('ceiling:click', clickCeiling);
+            emitter.off('ceiling:leave', leaveCeiling);
+            emitter.off('wall:enter', onWall);
+            emitter.off('wall:move', onWall);
+            emitter.off('wall:click', clickWall);
+            emitter.off('grid:move', onGrid);
+            emitter.off('grid:click', clickGrid);
+            emitter.off('tool:cancel', cancel);
+            window.removeEventListener('pointerup', release);
+            window.removeEventListener('keydown', key, true);
+            useLiveNodeOverrides.getState().clear(node.id);
+            usePlacementPreview.getState().clear();
+            clearPlacementSurface();
+            releaseWallEvents();
+        };
+    }, [node, activeLevelId, isCameraDragging, selectNode]);
+    return _jsx(MountedGhost, { node: node, valid: valid, levelId: activeLevelId });
+}
+function MountedGhost({ node, valid, levelId, }) {
+    const preview = usePlacementPreview((s) => s.node?.id === node.id ? s.node : null);
+    const [built, setBuilt] = useState(null);
+    useEffect(() => {
+        const lease = acquireProceduralGeometry(node);
+        setBuilt(lease.value);
+        return lease.release;
+    }, [node.recipe, node.parameters, node]);
+    const material = useMemo(() => new MeshBasicNodeMaterial({
+        color: valid ? '#86efac' : '#f87171',
+        transparent: true,
+        opacity: 0.65,
+        depthWrite: false,
+    }), [valid]);
+    useEffect(() => () => material.dispose(), [material]);
+    if (!preview || !built)
+        return null;
+    const { frame } = queryProceduralItem(preview, useScene.getState().nodes);
+    const position = [...frame.position];
+    position[1] += levelId ? (sceneRegistry.nodes.get(levelId)?.position.y ?? 0) : 0;
+    const yaw = Math.atan2(frame.axes[2][0], frame.axes[2][2]);
+    return (_jsx("group", { position: position, "rotation-y": yaw, children: built.batches.map((batch) => (_jsx("mesh", { geometry: batch.geometry, material: material, dispose: null, raycast: () => { } }, batch.slot))) }));
+}

package/dist/procedural-item/renderer.d.ts

@@ -0,0 +1,5 @@
+import { type ProceduralItemNode } from '@pascal-app/core/procedural-items';
+export default function ProceduralRenderer({ node }: {
+    node: ProceduralItemNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/procedural-item/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/procedural-item/renderer.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,kBAAkB,EAAuB,MAAM,mCAAmC,CAAA;AAahG,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,kBAAkB,CAAA;CAAE,+BA8FhF"}

package/dist/procedural-item/renderer.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLiveNodeOverrides, useLiveTransforms, useRegistry, useScene, } from '@pascal-app/core';
+import { proceduralLocalPose } from '@pascal-app/core/procedural-items';
+import { createSurfaceRoleMaterial, NodeRenderer, resolveMaterialRef, resolveSlotDefaultMaterial, useLibraryMaterialsVersion, useNodeEvents, useViewer, } from '@pascal-app/viewer';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Mesh } from 'three';
+import { acquireProceduralGeometry, geometrySignature } from './geometry';
+export default function ProceduralRenderer({ node }) {
+    const ref = useRef(null);
+    const overrides = useLiveNodeOverrides((s) => s.overrides.get(node.id));
+    const live = useLiveTransforms((s) => s.get(node.id));
+    const effective = { ...node, ...overrides };
+    const host = useScene((s) => (node.parentId ? s.nodes[node.parentId] : undefined));
+    const hostOverride = useLiveNodeOverrides((s) => node.parentId ? s.overrides.get(node.parentId) : undefined);
+    const pose = proceduralLocalPose(effective, host ? { [host.id]: { ...host, ...hostOverride } } : {});
+    const sceneMaterials = useScene((s) => s.materials);
+    const shading = useViewer((s) => s.shading), textures = useViewer((s) => s.textures), colorPreset = useViewer((s) => s.colorPreset), sceneTheme = useViewer((s) => s.sceneTheme);
+    const libraryVersion = useLibraryMaterialsVersion();
+    const key = geometrySignature(effective);
+    const [built, setBuilt] = useState(null);
+    const handlers = useNodeEvents(node, 'procedural-item');
+    useRegistry(node.id, 'procedural-item', ref);
+    useLayoutEffect(() => {
+        // React can restore base Y after the previous frame consumed the elevation mark.
+        useScene.getState().markDirty(node.id);
+    });
+    useLayoutEffect(() => {
+        const [recipe, parameters] = JSON.parse(key);
+        const lease = acquireProceduralGeometry({ recipe, parameters });
+        setBuilt(lease.value);
+        return lease.release;
+    }, [key]);
+    const materialKey = JSON.stringify([effective.recipe.slots, effective.slots, libraryVersion]);
+    const materials = useMemo(() => {
+        const [slots, overrides] = JSON.parse(materialKey);
+        return new Map(slots.map((s) => {
+            const ref = overrides[s.id];
+            const material = textures
+                ? (resolveMaterialRef(ref, sceneMaterials, shading) ??
+                    resolveSlotDefaultMaterial(ref?.startsWith('#') ? ref : s.color, shading, 0.75))
+                : createSurfaceRoleMaterial('furnishing', colorPreset, undefined, sceneTheme);
+            return [s.id, material];
+        }));
+    }, [materialKey, sceneMaterials, shading, textures, colorPreset, sceneTheme]);
+    useLayoutEffect(() => () => {
+        for (const material of materials.values())
+            if (!material.userData.__pascalCachedMaterial)
+                material.dispose();
+    }, [materials]);
+    const meshes = useMemo(() => built?.batches.map((batch) => {
+        const mesh = new Mesh(batch.geometry, materials.get(batch.slot));
+        mesh.name = `slot_${batch.slot}`;
+        mesh.userData = { slotId: batch.slot, proceduralRanges: batch.ranges };
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        return mesh;
+    }) ?? [], [built, materials]);
+    const rotation = live?.rotation === undefined
+        ? pose.rotation
+        : [pose.rotation[0], live.rotation, pose.rotation[2]];
+    return (_jsxs("group", { ref: ref, position: live?.position ?? pose.position, rotation: rotation, visible: effective.visible, ...handlers, children: [meshes.map((mesh) => (_jsx("primitive", { object: mesh, dispose: null }, mesh.uuid))), effective.children.map((id) => {
+                const surface = built?.evaluation.surfaces.find((s) => s.id === effective.attachments[id]);
+                return (_jsx("group", { position: surface?.position ?? [0, 0, 0], rotation: surface?.rotation, children: _jsx(NodeRenderer, { nodeId: id }) }, id));
+            })] }));
+}