@pascal-app/nodes 0.1.1

package/dist/skylight/renderer.js

@@ -0,0 +1,303 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SKYLIGHT_TYPE_PRESETS, useInteractive, useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
+import { createMaterial, createMaterialFromPresetRef, createSurfaceRoleMaterial, getRoofOuterSurfaceFrameAtPoint, useNodeEvents, useViewer, } from '@pascal-app/viewer';
+import { useEffect, useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { surfaceQuatFromNormal } from '../shared/roof-surface';
+import { TrimClippedMesh, useSegmentTrimClippedGeometry } from '../shared/use-segment-trim-clip';
+import { buildFrameGeometry } from './frame-csg';
+import { buildLanternGlassGeometry, clamp01, paneSize } from './geometry';
+const yAxis = new THREE.Vector3(0, 1, 0);
+const defaultFrameMaterial = new THREE.MeshStandardMaterial({
+    color: 0xff_ff_ff,
+    roughness: 0.3,
+    metalness: 0.5,
+});
+// MeshBasicMaterial: only requires position (slot 0). Safe with DoubleSide
+// because Basic doesn't write to the additional MRT targets that
+// MeshStandardMaterial/Physical do, so the WebGPU "writeMask not zero"
+// error doesn't fire. Also avoids the "vertex buffer slot 1 not set" error
+// that MeshLambertNodeMaterial triggers when inline <boxGeometry> JSX
+// recreates geometry on resize — the node-material pipeline expects normals
+// in slot 1, but the new geometry instance isn't fully bound yet at draw time.
+// MeshBasicMaterial at 30% opacity gives visually identical glass without
+// those constraints.
+const defaultGlassMaterial = new THREE.MeshBasicMaterial({
+    color: 0x87_ce_eb,
+    transparent: true,
+    opacity: 0.3,
+    side: THREE.DoubleSide,
+    depthWrite: false,
+});
+function FrameBar({ end, material, radius, start, }) {
+    const transform = useMemo(() => {
+        const startPoint = new THREE.Vector3(...start);
+        const endPoint = new THREE.Vector3(...end);
+        const direction = endPoint.clone().sub(startPoint);
+        const length = direction.length();
+        const midpoint = startPoint.clone().add(endPoint).multiplyScalar(0.5);
+        const quaternion = new THREE.Quaternion();
+        if (length > 1e-6) {
+            quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction.normalize());
+        }
+        return { length, midpoint, quaternion };
+    }, [start, end]);
+    if (transform.length <= 1e-6)
+        return null;
+    return (_jsx("mesh", { castShadow: true, material: material, name: "skylight-surface", position: transform.midpoint, quaternion: transform.quaternion, receiveShadow: true, children: _jsx("cylinderGeometry", { args: [radius, radius, transform.length, 8] }) }));
+}
+function GlassPane({ glassThickness, material, name = 'skylight-glass', paneDepth, position = [0, 0, 0], rotation, width, segment, parentToSegment, }) {
+    const geometry = useMemo(() => new THREE.BoxGeometry(paneSize(width), paneSize(glassThickness), paneSize(paneDepth)), [width, glassThickness, paneDepth]);
+    useEffect(() => () => geometry.dispose(), [geometry]);
+    if (segment && parentToSegment) {
+        return (_jsx(TrimClippedMesh, { geometry: geometry, material: material, name: name, parentToSegment: parentToSegment, position: position, receiveShadow: true, rotation: rotation, segment: segment }));
+    }
+    return (_jsx("mesh", { geometry: geometry, material: material, name: name, position: position, receiveShadow: true, rotation: rotation }));
+}
+function PaneFrame({ depth, railHeight, railWidth, material, position = [0, 0, 0], width, }) {
+    const halfW = width / 2;
+    const halfD = depth / 2;
+    const y = railHeight / 2;
+    return (_jsxs("group", { position: position, children: [_jsx("mesh", { castShadow: true, material: material, name: "skylight-surface", position: [0, y, halfD], receiveShadow: true, children: _jsx("boxGeometry", { args: [paneSize(width + railWidth), railHeight, railWidth] }) }), _jsx("mesh", { castShadow: true, material: material, name: "skylight-surface", position: [0, y, -halfD], receiveShadow: true, children: _jsx("boxGeometry", { args: [paneSize(width + railWidth), railHeight, railWidth] }) }), _jsx("mesh", { castShadow: true, material: material, name: "skylight-surface", position: [-halfW, y, 0], receiveShadow: true, children: _jsx("boxGeometry", { args: [railWidth, railHeight, paneSize(depth + railWidth)] }) }), _jsx("mesh", { castShadow: true, material: material, name: "skylight-surface", position: [halfW, y, 0], receiveShadow: true, children: _jsx("boxGeometry", { args: [railWidth, railHeight, paneSize(depth + railWidth)] }) })] }));
+}
+function LanternGlass({ curbHeight, frameMaterial, glassMaterial, node, segment, parentToSegment, }) {
+    const preset = SKYLIGHT_TYPE_PRESETS.lantern;
+    const width = node.width - 0.01;
+    const depth = node.height - 0.01;
+    const height = Math.max(0.05, node.lanternHeight ?? preset.lanternHeight);
+    const topScale = clamp01(node.lanternTopScale ?? preset.lanternTopScale);
+    const baseHalfW = paneSize(width) / 2;
+    const baseHalfD = paneSize(depth) / 2;
+    const topHalfW = baseHalfW * topScale;
+    const topHalfD = baseHalfD * topScale;
+    const frameRadius = Math.max(0.008, node.frameThickness * 0.16);
+    const baseCorners = [
+        [-baseHalfW, 0, baseHalfD],
+        [baseHalfW, 0, baseHalfD],
+        [baseHalfW, 0, -baseHalfD],
+        [-baseHalfW, 0, -baseHalfD],
+    ];
+    const topCorners = topScale <= 1e-4
+        ? [
+            [0, height, 0],
+            [0, height, 0],
+            [0, height, 0],
+            [0, height, 0],
+        ]
+        : [
+            [-topHalfW, height, topHalfD],
+            [topHalfW, height, topHalfD],
+            [topHalfW, height, -topHalfD],
+            [-topHalfW, height, -topHalfD],
+        ];
+    const geometry = useMemo(() => buildLanternGlassGeometry(width, depth, height, topScale), [depth, height, topScale, width]);
+    useEffect(() => {
+        return () => {
+            geometry.dispose();
+        };
+    }, [geometry]);
+    const glassParentToSegment = segment && parentToSegment
+        ? new THREE.Matrix4()
+            .copy(parentToSegment)
+            .multiply(new THREE.Matrix4().makeTranslation(0, curbHeight, 0))
+        : undefined;
+    return (_jsxs("group", { position: [0, curbHeight, 0], children: [segment && glassParentToSegment ? (_jsx(TrimClippedMesh, { geometry: geometry, material: glassMaterial, name: "skylight-glass", parentToSegment: glassParentToSegment, receiveShadow: true, segment: segment })) : (_jsx("mesh", { geometry: geometry, material: glassMaterial, name: "skylight-glass", receiveShadow: true })), baseCorners.map((corner, index) => (_jsx(FrameBar, { end: baseCorners[(index + 1) % baseCorners.length] ?? corner, material: frameMaterial, radius: frameRadius, start: corner }, `lantern-base-${index}`))), baseCorners.map((corner, index) => (_jsx(FrameBar, { end: topCorners[index] ?? corner, material: frameMaterial, radius: frameRadius, start: corner }, `lantern-hip-${index}`))), topScale > 1e-4 &&
+                topCorners.map((corner, index) => (_jsx(FrameBar, { end: topCorners[(index + 1) % topCorners.length] ?? corner, material: frameMaterial, radius: frameRadius, start: corner }, `lantern-top-${index}`)))] }));
+}
+function getHingedPaneTransform(side, width, depth, openingAngle) {
+    if (side === 'bottom') {
+        return {
+            hingePosition: [0, 0, -depth / 2],
+            panePosition: [0, 0, depth / 2],
+            rotation: [-openingAngle, 0, 0],
+        };
+    }
+    if (side === 'left') {
+        return {
+            hingePosition: [-width / 2, 0, 0],
+            panePosition: [width / 2, 0, 0],
+            rotation: [0, 0, openingAngle],
+        };
+    }
+    if (side === 'right') {
+        return {
+            hingePosition: [width / 2, 0, 0],
+            panePosition: [-width / 2, 0, 0],
+            rotation: [0, 0, -openingAngle],
+        };
+    }
+    return {
+        hingePosition: [0, 0, depth / 2],
+        panePosition: [0, 0, -depth / 2],
+        rotation: [openingAngle, 0, 0],
+    };
+}
+function ElectricMotorHousing({ curbHeight, frameMaterial, glassThickness, node, side, }) {
+    const size = Math.max(0.03, node.motorHousingSize ?? SKYLIGHT_TYPE_PRESETS.opening.motorHousingSize);
+    const y = curbHeight + glassThickness + size / 2;
+    const isHorizontalHinge = side === 'top' || side === 'bottom';
+    return (_jsx("mesh", { castShadow: true, material: frameMaterial, name: "skylight-surface", position: [
+            side === 'left' ? -node.width / 2 : side === 'right' ? node.width / 2 : 0,
+            y,
+            side === 'top' ? node.height / 2 : side === 'bottom' ? -node.height / 2 : 0,
+        ], receiveShadow: true, children: _jsx("boxGeometry", { args: isHorizontalHinge
+                ? [paneSize(node.width), size, size]
+                : [size, size, paneSize(node.height)] }) }));
+}
+function HingedGlass({ curbHeight, frameMaterial, glassMaterial, glassThickness, hasMotorHousing, node, openAmount, segment, parentToSegment, }) {
+    const preset = SKYLIGHT_TYPE_PRESETS.opening;
+    const side = node.openingSide ?? preset.openingSide;
+    const openingAngle = Math.max(0, node.openingAngle ?? preset.openingAngle) * clamp01(openAmount);
+    const width = node.width - 0.01;
+    const depth = node.height - 0.01;
+    const transform = getHingedPaneTransform(side, width, depth, openingAngle);
+    const frameRadius = Math.max(0.006, node.frameThickness * 0.13);
+    const sashRailWidth = Math.max(0.018, node.frameThickness * 0.42);
+    const sashRailHeight = Math.max(glassThickness * 1.4, node.frameThickness * 0.2);
+    const showSupport = side === 'top' && openingAngle > 0.04;
+    const supportX = width / 2 + node.frameThickness * 0.35;
+    const supportStartZ = -depth / 2 + Math.min(0.12, depth * 0.12);
+    const supportTravel = depth * 0.78;
+    const supportEndY = curbHeight + glassThickness + Math.sin(openingAngle) * supportTravel;
+    const supportEndZ = depth / 2 - Math.cos(openingAngle) * supportTravel;
+    // The hinge group offsets + rotates the pane; compose that onto the
+    // skylight→segment matrix so the glass clips in segment-local space.
+    const hingeToSegment = segment && parentToSegment
+        ? new THREE.Matrix4()
+            .copy(parentToSegment)
+            .multiply(new THREE.Matrix4().compose(new THREE.Vector3(transform.hingePosition[0], curbHeight + glassThickness / 2, transform.hingePosition[2]), new THREE.Quaternion().setFromEuler(new THREE.Euler(transform.rotation[0], transform.rotation[1], transform.rotation[2])), new THREE.Vector3(1, 1, 1)))
+        : undefined;
+    return (_jsxs(_Fragment, { children: [_jsxs("group", { position: [
+                    transform.hingePosition[0],
+                    curbHeight + glassThickness / 2,
+                    transform.hingePosition[2],
+                ], rotation: transform.rotation, children: [_jsx(GlassPane, { glassThickness: glassThickness, material: glassMaterial, paneDepth: depth, parentToSegment: hingeToSegment, position: transform.panePosition, segment: segment, width: width }), _jsx(PaneFrame, { depth: depth, material: frameMaterial, position: transform.panePosition, railHeight: sashRailHeight, railWidth: sashRailWidth, width: width })] }), showSupport && (_jsxs(_Fragment, { children: [_jsx(FrameBar, { end: [-supportX, supportEndY, supportEndZ], material: frameMaterial, radius: frameRadius * 0.72, start: [-supportX, curbHeight + 0.018, supportStartZ] }), _jsx(FrameBar, { end: [supportX, supportEndY, supportEndZ], material: frameMaterial, radius: frameRadius * 0.72, start: [supportX, curbHeight + 0.018, supportStartZ] })] })), hasMotorHousing && (_jsx(ElectricMotorHousing, { curbHeight: curbHeight, frameMaterial: frameMaterial, glassThickness: glassThickness, node: node, side: side }))] }));
+}
+function SlidingGlass({ curbHeight, frameMaterial, glassMaterial, glassThickness, node, openAmount, segment, parentToSegment, }) {
+    const preset = SKYLIGHT_TYPE_PRESETS.sliding;
+    const slideDirection = node.slideDirection ?? preset.slideDirection;
+    const slideFraction = clamp01(openAmount);
+    const trackWidth = Math.max(0.02, node.trackWidth ?? preset.trackWidth);
+    const y = curbHeight + glassThickness / 2;
+    const railY = curbHeight + glassThickness + trackWidth / 2;
+    const sashRailWidth = Math.max(0.016, node.frameThickness * 0.36);
+    const sashRailHeight = Math.max(glassThickness * 1.25, node.frameThickness * 0.18);
+    if (slideDirection === 'x') {
+        const paneWidth = (node.width - trackWidth) / 2;
+        const fixedX = -node.width / 4;
+        const movingX = node.width / 4 - slideFraction * paneWidth;
+        const fixedPanePosition = [fixedX, y, 0];
+        const movingPanePosition = [movingX, y + glassThickness + 0.003, 0];
+        return (_jsxs(_Fragment, { children: [_jsx(GlassPane, { glassThickness: glassThickness, material: glassMaterial, paneDepth: node.height - 0.01, parentToSegment: parentToSegment, position: fixedPanePosition, segment: segment, width: paneWidth }), _jsx(PaneFrame, { depth: node.height - 0.01, material: frameMaterial, position: fixedPanePosition, railHeight: sashRailHeight, railWidth: sashRailWidth, width: paneWidth }), _jsx(GlassPane, { glassThickness: glassThickness, material: glassMaterial, paneDepth: node.height - 0.01, parentToSegment: parentToSegment, position: movingPanePosition, segment: segment, width: paneWidth }), _jsx(PaneFrame, { depth: node.height - 0.01, material: frameMaterial, position: movingPanePosition, railHeight: sashRailHeight, railWidth: sashRailWidth, width: paneWidth }), _jsx("mesh", { material: frameMaterial, name: "skylight-surface", position: [0, railY, node.height / 2], receiveShadow: true, children: _jsx("boxGeometry", { args: [paneSize(node.width + trackWidth * 2), trackWidth, trackWidth] }) }), _jsx("mesh", { material: frameMaterial, name: "skylight-surface", position: [0, railY, -node.height / 2], receiveShadow: true, children: _jsx("boxGeometry", { args: [paneSize(node.width + trackWidth * 2), trackWidth, trackWidth] }) })] }));
+    }
+    const paneDepth = (node.height - trackWidth) / 2;
+    const fixedZ = -node.height / 4;
+    const movingZ = node.height / 4 - slideFraction * paneDepth;
+    const fixedPanePosition = [0, y, fixedZ];
+    const movingPanePosition = [0, y + glassThickness + 0.003, movingZ];
+    return (_jsxs(_Fragment, { children: [_jsx(GlassPane, { glassThickness: glassThickness, material: glassMaterial, paneDepth: paneDepth, parentToSegment: parentToSegment, position: fixedPanePosition, segment: segment, width: node.width - 0.01 }), _jsx(PaneFrame, { depth: paneDepth, material: frameMaterial, position: fixedPanePosition, railHeight: sashRailHeight, railWidth: sashRailWidth, width: node.width - 0.01 }), _jsx(GlassPane, { glassThickness: glassThickness, material: glassMaterial, paneDepth: paneDepth, parentToSegment: parentToSegment, position: movingPanePosition, segment: segment, width: node.width - 0.01 }), _jsx(PaneFrame, { depth: paneDepth, material: frameMaterial, position: movingPanePosition, railHeight: sashRailHeight, railWidth: sashRailWidth, width: node.width - 0.01 }), _jsx("mesh", { material: frameMaterial, name: "skylight-surface", position: [node.width / 2, railY, 0], receiveShadow: true, children: _jsx("boxGeometry", { args: [trackWidth, trackWidth, paneSize(node.height + trackWidth * 2)] }) }), _jsx("mesh", { material: frameMaterial, name: "skylight-surface", position: [-node.width / 2, railY, 0], receiveShadow: true, children: _jsx("boxGeometry", { args: [trackWidth, trackWidth, paneSize(node.height + trackWidth * 2)] }) })] }));
+}
+const SkylightRenderer = ({ node: storeNode }) => {
+    const ref = useRef(null);
+    useRegistry(storeNode.id, 'skylight', ref);
+    const handlers = useNodeEvents(storeNode, 'skylight');
+    const shading = useViewer((s) => s.shading);
+    const textures = useViewer((s) => s.textures);
+    const colorPreset = useViewer((s) => s.colorPreset);
+    const sceneTheme = useViewer((s) => s.sceneTheme);
+    const liveOverrides = useLiveNodeOverrides((state) => state.get(storeNode.id));
+    const node = useMemo(() => (liveOverrides ? { ...storeNode, ...liveOverrides } : storeNode), [storeNode, liveOverrides]);
+    const segment = useScene((state) => node.roofSegmentId
+        ? state.nodes[node.roofSegmentId]
+        : undefined);
+    const frameGeo = useMemo(() => {
+        return buildFrameGeometry({
+            curb: node.curb,
+            curbHeight: node.curbHeight,
+            frameDepth: node.frameDepth,
+            frameThickness: node.frameThickness,
+            height: node.height,
+            width: node.width,
+        });
+    }, [node.width, node.height, node.frameThickness, node.frameDepth, node.curb, node.curbHeight]);
+    useEffect(() => {
+        return () => {
+            frameGeo?.dispose();
+        };
+    }, [frameGeo]);
+    const frameMaterial = useMemo(() => {
+        // Untextured frame (and everything in textures-off mode) takes the
+        // themed 'joinery' role colour; explicit paint shows when textures on.
+        if (!textures || (!node.material && !node.materialPreset)) {
+            return createSurfaceRoleMaterial('joinery', colorPreset, undefined, sceneTheme);
+        }
+        if (node.material)
+            return createMaterial(node.material, shading);
+        return createMaterialFromPresetRef(node.materialPreset, shading) ?? defaultFrameMaterial;
+    }, [textures, colorPreset, sceneTheme, shading, node.material, node.materialPreset]);
+    const activeType = node.skylightType ?? 'flat';
+    const typePreset = SKYLIGHT_TYPE_PRESETS[activeType];
+    const glassThickness = Math.max(0.002, node.glassThickness ?? typePreset.glassThickness);
+    const runtimeOpenAmount = useInteractive((state) => state.skylights[storeNode.id]?.operationState);
+    const openAmount = runtimeOpenAmount ?? node.operationState ?? typePreset.operationState;
+    const glassMaterial = useMemo(() => {
+        // Untextured glass (and textures-off mode) takes the themed 'glazing'
+        // role material from the shared cache, so it must not be mutated.
+        if (!textures || (!node.glassMaterial && !node.glassMaterialPreset)) {
+            return createSurfaceRoleMaterial('glazing', colorPreset, undefined, sceneTheme);
+        }
+        const mat = node.glassMaterial
+            ? createMaterial(node.glassMaterial, shading)
+            : (createMaterialFromPresetRef(node.glassMaterialPreset, shading) ??
+                defaultGlassMaterial.clone());
+        if (mat && typeof mat === 'object') {
+            if (mat instanceof THREE.MeshPhysicalMaterial) {
+                mat.thickness = glassThickness;
+            }
+        }
+        return mat;
+    }, [
+        textures,
+        colorPreset,
+        sceneTheme,
+        shading,
+        glassThickness,
+        node.glassMaterial,
+        node.glassMaterialPreset,
+    ]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: deps deliberately list the build inputs; depending on the whole object would rebuild on unrelated field changes.
+    const surfaceFrame = useMemo(() => {
+        if (!segment)
+            return { point: new THREE.Vector3(), normal: new THREE.Vector3(0, 1, 0) };
+        return getRoofOuterSurfaceFrameAtPoint(segment, node.position[0] ?? 0, node.position[2] ?? 0);
+    }, [segment, node.position[0], node.position[2], node.rotation, liveOverrides, storeNode.id]);
+    const surfaceQuat = useMemo(() => surfaceQuatFromNormal(surfaceFrame.normal, new THREE.Quaternion()), [surfaceFrame.normal]);
+    // Compose the surface tilt with the skylight's own yaw so the
+    // registered ref group below carries the complete "skylight pose in
+    // segment frame" as a single local position+quaternion. Registry
+    // handles (`portal: 'grandparent'`) read this Object3D's *local*
+    // pose, so splitting the tilt and the yaw across nested groups would
+    // leave the registered group with just the yaw and put the handles
+    // at the wrong spot.
+    const composedQuat = useMemo(() => {
+        const q = new THREE.Quaternion().copy(surfaceQuat);
+        q.multiply(new THREE.Quaternion().setFromAxisAngle(yAxis, node.rotation ?? 0));
+        return q;
+    }, [surfaceQuat, node.rotation]);
+    const hasCurb = node.curb ?? false;
+    const curbH = hasCurb ? Math.max(0, node.curbHeight ?? 0.1) : 0;
+    // Map skylight-local geometry into the host segment's local frame (where the
+    // trim cut prisms live) — the same pose the inner registered group is mounted
+    // with (position [x, surfaceY, z] + surfaceQuat·yaw). Only the structural
+    // frame is clipped; the thin glass panes live inside animated sub-components
+    // (sliding / hinged) with their own internal transforms and ride with the
+    // frame. Computed before the early return so the hook order stays stable.
+    const localToSegment = useMemo(() => new THREE.Matrix4().compose(new THREE.Vector3(node.position[0] ?? 0, surfaceFrame.point.y, node.position[2] ?? 0), composedQuat, new THREE.Vector3(1, 1, 1)), [node.position[0], node.position[2], surfaceFrame.point.y, composedQuat]);
+    const clippedFrame = useSegmentTrimClippedGeometry(frameGeo, segment, localToSegment);
+    if (!segment || !frameGeo)
+        return null;
+    const surfaceY = surfaceFrame.point.y;
+    return (_jsx("group", { position: segment.position, "rotation-y": segment.rotation, visible: node.visible, ...handlers, children: _jsxs("group", { position: [node.position[0] ?? 0, surfaceY, node.position[2] ?? 0], quaternion: composedQuat, ref: ref, children: [_jsx("mesh", { castShadow: true, geometry: clippedFrame ?? frameGeo, material: frameMaterial, name: "skylight-surface", receiveShadow: true }), activeType === 'lantern' && (_jsx(LanternGlass, { curbHeight: curbH, frameMaterial: frameMaterial, glassMaterial: glassMaterial, node: node, parentToSegment: localToSegment, segment: segment })), activeType === 'sliding' && (_jsx(SlidingGlass, { curbHeight: curbH, frameMaterial: frameMaterial, glassMaterial: glassMaterial, glassThickness: glassThickness, node: node, openAmount: openAmount, parentToSegment: localToSegment, segment: segment })), activeType === 'opening' && (_jsx(HingedGlass, { curbHeight: curbH, frameMaterial: frameMaterial, glassMaterial: glassMaterial, glassThickness: glassThickness, hasMotorHousing: node.motorHousing ?? false, node: node, openAmount: openAmount, parentToSegment: localToSegment, segment: segment })), (activeType === 'flat' || activeType === 'walk-on') && (_jsx(GlassPane, { glassThickness: glassThickness, material: glassMaterial, paneDepth: node.height + 0.004, parentToSegment: localToSegment, position: [0, curbH + glassThickness / 2, 0], segment: segment, width: node.width + 0.004 }))] }) }));
+};
+export default SkylightRenderer;

package/dist/skylight/roof-cut.d.ts

@@ -0,0 +1,21 @@
+import type { RoofSegmentNode, SkylightNode } from '@pascal-app/core';
+import * as THREE from 'three';
+/**
+ * Build the segment-local cut geometry the host roof's merge loop
+ * subtracts from its shin / deck / wall brushes so the skylight has a
+ * clean hole to poke through.
+ *
+ * The cut is a box, sized to the skylight footprint plus frame +
+ * cutout offset, oriented to the outer roof surface frame at the
+ * skylight's position (so multi-slope roofs — gambrel / mansard /
+ * dutch — cut perpendicular to the actual surface rather than world
+ * up).
+ *
+ * Returns null on degenerate input.
+ *
+ * Coordinates are SEGMENT-LOCAL. The viewer welds vertices, attaches
+ * a single material group, and wraps the result in a Brush — see
+ * `wiki/architecture/node-definitions.md` (`capabilities.roofAccessory.buildCut`).
+ */
+export declare function buildSkylightRoofCut(skylight: SkylightNode, segment: RoofSegmentNode): THREE.BufferGeometry | null;
+//# sourceMappingURL=roof-cut.d.ts.map

package/dist/skylight/roof-cut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"roof-cut.d.ts","sourceRoot":"","sources":["../../src/skylight/roof-cut.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAErE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,eAAe,GACvB,KAAK,CAAC,cAAc,GAAG,IAAI,CA8C7B"}

package/dist/skylight/roof-cut.js

@@ -0,0 +1,61 @@
+import { getRoofOuterSurfaceFrameAtPoint } from '@pascal-app/viewer';
+import * as THREE from 'three';
+/**
+ * Build the segment-local cut geometry the host roof's merge loop
+ * subtracts from its shin / deck / wall brushes so the skylight has a
+ * clean hole to poke through.
+ *
+ * The cut is a box, sized to the skylight footprint plus frame +
+ * cutout offset, oriented to the outer roof surface frame at the
+ * skylight's position (so multi-slope roofs — gambrel / mansard /
+ * dutch — cut perpendicular to the actual surface rather than world
+ * up).
+ *
+ * Returns null on degenerate input.
+ *
+ * Coordinates are SEGMENT-LOCAL. The viewer welds vertices, attaches
+ * a single material group, and wraps the result in a Brush — see
+ * `wiki/architecture/node-definitions.md` (`capabilities.roofAccessory.buildCut`).
+ */
+export function buildSkylightRoofCut(skylight, segment) {
+    const inflate = Math.max(0, skylight.cutoutOffset ?? 0.01);
+    const w = Math.max(0.05, skylight.width + 2 * skylight.frameThickness + 2 * inflate);
+    const d = Math.max(0.05, skylight.height + 2 * skylight.frameThickness + 2 * inflate);
+    const lx = skylight.position[0];
+    const lz = skylight.position[2];
+    const surfaceFrame = getRoofOuterSurfaceFrameAtPoint(segment, lx, lz);
+    const surfaceY = surfaceFrame.point.y;
+    const normal = surfaceFrame.normal;
+    const h = 2.0;
+    const geo = new THREE.BoxGeometry(w, h, d);
+    // Yaw in the box's own (un-tilted) frame so it stays a rotation
+    // about the surface normal once tilted. Yawing after the tilt twists
+    // the cutout around world-Y on sloped roofs.
+    if (Math.abs(skylight.rotation) > 1e-4) {
+        geo.rotateY(skylight.rotation);
+    }
+    if (normal.y < 0.9999) {
+        // Match the renderer's basis construction (right = up × normal, forward
+        // = right × normal). `setFromUnitVectors` would yaw the cut around the
+        // normal by ~90° on hip side faces relative to the frame, leaving a
+        // visibly rotated hole.
+        const up = new THREE.Vector3(0, 1, 0);
+        const right = new THREE.Vector3().crossVectors(up, normal);
+        if (right.lengthSq() < 1e-6)
+            right.set(1, 0, 0);
+        else
+            right.normalize();
+        const forward = new THREE.Vector3().crossVectors(right, normal).normalize();
+        const basis = new THREE.Matrix4().makeBasis(right, normal, forward);
+        const quat = new THREE.Quaternion().setFromRotationMatrix(basis);
+        geo.applyQuaternion(quat);
+    }
+    geo.translate(lx, surfaceY, lz);
+    // The viewer's merge loop welds vertices (mandatory after
+    // `applyQuaternion` on a BoxGeometry — three-bvh-csg's three-way
+    // subtraction silently no-ops on certain tilt angles when the
+    // half-edge structure is left in the un-welded state), attaches a
+    // single material group, and wraps the result in a Brush. Kinds
+    // only emit the raw shape.
+    return geo;
+}

package/dist/skylight/schema.d.ts

@@ -0,0 +1,2 @@
+export { SkylightNode } from '@pascal-app/core';
+//# sourceMappingURL=schema.d.ts.map

package/dist/skylight/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/skylight/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/skylight/schema.js

@@ -0,0 +1 @@
+export { SkylightNode } from '@pascal-app/core';

package/dist/skylight/system.d.ts

@@ -0,0 +1,3 @@
+declare const SkylightAnimationSystem: () => null;
+export default SkylightAnimationSystem;
+//# sourceMappingURL=system.d.ts.map

package/dist/skylight/system.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"system.d.ts","sourceRoot":"","sources":["../../src/skylight/system.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,uBAAuB,YAgD5B,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/dist/skylight/system.js

@@ -0,0 +1,49 @@
+'use client';
+import { useInteractive, useScene } from '@pascal-app/core';
+import { useFrame } from '@react-three/fiber';
+const easeSkylightAnimation = (value) => value * value * (3 - 2 * value);
+const SkylightAnimationSystem = () => {
+    useFrame(({ clock }) => {
+        const interactive = useInteractive.getState();
+        const entries = Object.entries(interactive.skylightAnimations);
+        if (entries.length === 0)
+            return;
+        const now = clock.getElapsedTime() * 1000;
+        for (const [skylightId, animation] of entries) {
+            const typedSkylightId = skylightId;
+            const scene = useScene.getState();
+            const node = scene.nodes[typedSkylightId];
+            if (node?.type !== 'skylight') {
+                interactive.cancelSkylightAnimation(typedSkylightId);
+                interactive.removeSkylightOpenState(typedSkylightId);
+                continue;
+            }
+            const startedAt = animation.startedAt ?? now;
+            if (animation.startedAt === null) {
+                interactive.startSkylightAnimation(typedSkylightId, { ...animation, startedAt });
+            }
+            const progress = Math.min(1, (now - startedAt) / animation.durationMs);
+            const value = animation.from + (animation.to - animation.from) * easeSkylightAnimation(progress);
+            // No scene dirty per tick — the renderer subscribes to useInteractive
+            // directly and re-renders the glass when operationState changes. Dirtying
+            // the skylight makes RoofSystem mark the parent segment dirty, which
+            // queues a full merged-roof CSG rebuild every frame. The cut geometry
+            // doesn't depend on operationState — only frame/width/curb/position do.
+            interactive.setSkylightOpenState(typedSkylightId, { [animation.field]: value });
+            if (progress < 1)
+                continue;
+            interactive.cancelSkylightAnimation(typedSkylightId);
+            if (animation.persist) {
+                // updateNode dirties the skylight via the scene store; the roof
+                // re-cut runs once at the end of the tween, not every frame.
+                scene.updateNode(typedSkylightId, { [animation.field]: animation.to });
+                interactive.removeSkylightOpenState(typedSkylightId);
+            }
+            else {
+                interactive.setSkylightOpenState(typedSkylightId, { [animation.field]: animation.to });
+            }
+        }
+    }, 2);
+    return null;
+};
+export default SkylightAnimationSystem;

package/dist/skylight/tool.d.ts

@@ -0,0 +1,3 @@
+declare const SkylightTool: () => import("react").JSX.Element;
+export default SkylightTool;
+//# sourceMappingURL=tool.d.ts.map

package/dist/skylight/tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/skylight/tool.tsx"],"names":[],"mappings":"AA4BA,QAAA,MAAM,YAAY,mCAuHjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/skylight/tool.js

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { emitter, SkylightNode, sceneRegistry, useScene, } from '@pascal-app/core';
+import { triggerSFX } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import * as THREE from 'three';
+import { RoofAttachmentFallbackPreview } from '../shared/roof-attachment-fallback-preview';
+import { resolveRoofSegmentHit } from '../shared/roof-segment-hit';
+import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface';
+import { clearRoofSurfacePlacementGuides, publishRoofSurfacePlacementGuides, roofSurfaceFootprintFromNode, } from '../shared/roof-surface-placement-guides';
+import { skylightDefinition } from './definition';
+import SkylightPreview from './preview';
+const worldPoint = new THREE.Vector3();
+const SkylightTool = () => {
+    const activeBuildingId = useViewer((s) => s.selection.buildingId);
+    const setSelection = useViewer((s) => s.setSelection);
+    const [previewPos, setPreviewPos] = useState(null);
+    const [previewYaw, setPreviewYaw] = useState(0);
+    const [previewSurfaceQuat, setPreviewSurfaceQuat] = useState(null);
+    const lastSnapRef = useRef(null);
+    const previewNode = useMemo(() => SkylightNode.parse({
+        ...skylightDefinition.defaults(),
+        name: 'Skylight',
+        position: [0, 0, 0],
+        rotation: 0,
+    }), []);
+    useEffect(() => {
+        if (!activeBuildingId)
+            return;
+        const worldToBuildingLocal = (wx, wy, wz) => {
+            const buildingObj = sceneRegistry.nodes.get(activeBuildingId);
+            if (!buildingObj)
+                return [wx, wy, wz];
+            worldPoint.set(wx, wy, wz);
+            buildingObj.worldToLocal(worldPoint);
+            return [worldPoint.x, worldPoint.y, worldPoint.z];
+        };
+        const updatePreview = (event) => {
+            const wx = event.position[0];
+            const wy = event.position[1];
+            const wz = event.position[2];
+            const sx = Math.round(wx * 20) / 20;
+            const sz = Math.round(wz * 20) / 20;
+            const prev = lastSnapRef.current;
+            if (event.nativeEvent?.shiftKey !== true && (!prev || prev[0] !== sx || prev[1] !== sz)) {
+                triggerSFX('sfx:grid-snap');
+                lastSnapRef.current = [sx, sz];
+            }
+            const hit = resolveRoofSegmentHit(event.node, wx, wy, wz);
+            if (!hit)
+                return;
+            const normal = getAnalyticalNormal(hit.localX, hit.localZ, hit.segment);
+            setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion()));
+            setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0));
+            setPreviewPos(worldToBuildingLocal(wx, wy, wz));
+            publishRoofSurfacePlacementGuides({
+                roof: event.node,
+                segment: hit.segment,
+                center: [hit.localX, hit.localY, hit.localZ],
+                footprint: roofSurfaceFootprintFromNode(previewNode),
+            });
+            event.stopPropagation();
+        };
+        const onClick = (event) => {
+            const hit = resolveRoofSegmentHit(event.node, event.position[0], event.position[1], event.position[2]);
+            if (!hit)
+                return;
+            const state = useScene.getState();
+            const skylight = SkylightNode.parse({
+                ...skylightDefinition.defaults(),
+                name: 'Skylight',
+                roofSegmentId: hit.segment.id,
+                position: [hit.localX, hit.localY, hit.localZ],
+                rotation: 0,
+            });
+            state.createNode(skylight, hit.segment.id);
+            state.dirtyNodes.add(hit.segment.id);
+            setSelection({ selectedIds: [skylight.id] });
+            triggerSFX('sfx:item-place');
+            clearRoofSurfacePlacementGuides();
+            event.stopPropagation();
+        };
+        emitter.on('roof:move', updatePreview);
+        emitter.on('roof:enter', updatePreview);
+        emitter.on('roof:click', onClick);
+        return () => {
+            emitter.off('roof:move', updatePreview);
+            emitter.off('roof:enter', updatePreview);
+            emitter.off('roof:click', onClick);
+            clearRoofSurfacePlacementGuides();
+        };
+    }, [activeBuildingId, setSelection, previewNode]);
+    return (_jsxs(_Fragment, { children: [_jsx(RoofAttachmentFallbackPreview, { activeBuildingId: activeBuildingId, ghost: _jsx(SkylightPreview, { node: previewNode, invalid: true }), onInvalidTarget: () => {
+                    setPreviewPos(null);
+                    setPreviewSurfaceQuat(null);
+                    clearRoofSurfacePlacementGuides();
+                } }), activeBuildingId && previewPos && previewSurfaceQuat && (_jsx("group", { position: previewPos, children: _jsx("group", { "rotation-y": previewYaw, children: _jsx("group", { quaternion: previewSurfaceQuat, children: _jsx(SkylightPreview, { node: previewNode }) }) }) }))] }));
+};
+export default SkylightTool;

package/dist/slab/boundary-editor.d.ts

@@ -0,0 +1,24 @@
+import { type SlabNode } from '@pascal-app/core';
+/**
+ * Phase 5 Stage D — slab boundary editor (registry-driven).
+ *
+ * Thin wrapper around the shared `PolygonEditor`. Activates when a
+ * slab is selected in structure/select mode (not currently editing a
+ * hole). The heavy lifting — vertex drag, edge slide, snap, history
+ * bracketing — lives in `PolygonEditor` itself.
+ *
+ * Mounted by ToolManager via `def.affordanceTools['boundary-edit']`.
+ *
+ * Drag flow: every pointer tick the editor hands back the in-flight
+ * polygon through `onPolygonPreview`; we mirror it onto
+ * `useLiveNodeOverrides` + `markDirty` so `GeometrySystem` rebuilds
+ * the slab mesh at pointer rate. On release the editor calls
+ * `onPolygonChange` once with the final polygon — that's the single
+ * `updateNode` tracked by undo. The follow-up `onPolygonPreview(null)`
+ * drops the override so subscribers read from the store again.
+ */
+export declare const SlabBoundaryEditor: React.FC<{
+    slabId: SlabNode['id'];
+}>;
+export default SlabBoundaryEditor;
+//# sourceMappingURL=boundary-editor.d.ts.map

package/dist/slab/boundary-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"boundary-editor.d.ts","sourceRoot":"","sources":["../../src/slab/boundary-editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,KAAK,QAAQ,EAAkC,MAAM,kBAAkB,CAAA;AAehG;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAA;CAAE,CAqInE,CAAA;AAED,eAAe,kBAAkB,CAAA"}