@pascal-app/nodes 0.1.1

package/dist/site/renderer.js

@@ -0,0 +1,196 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
+import { backdropGradient, deepSkyColor, getSceneTheme, horizonHazeColor, NodeRenderer, unionPolygons, useNodeEvents, useViewer, } from '@pascal-app/viewer';
+import { useEffect, useMemo, useRef } from 'react';
+import { BufferGeometry, Float32BufferAttribute, Path, Shape, ShapeGeometry, } from 'three';
+import { cameraPosition, color, float, mix, positionWorld, smoothstep, vec2 } from 'three/tsl';
+import { MeshLambertNodeMaterial } from 'three/webgpu';
+import { getRecessedSlabGroundHoles } from './recessed-slab-ground-holes';
+const Y_OFFSET = 0.01;
+// The horizon disc is presentation-only — clicks must fall through to the
+// real site polygon / grid, so its raycast is a no-op.
+const noopRaycast = () => { };
+/**
+ * Creates simple line geometry for site boundary
+ * Single horizontal line at ground level
+ */
+const createBoundaryLineGeometry = (points) => {
+    const geometry = new BufferGeometry();
+    if (points.length < 2)
+        return geometry;
+    const positions = [];
+    const uvs = [];
+    // Create a simple line loop at ground level
+    points.forEach(([x, z], index) => {
+        positions.push(x ?? 0, Y_OFFSET, z ?? 0);
+        uvs.push(points.length > 1 ? index / (points.length - 1) : 0, 0);
+    });
+    // Close the loop
+    positions.push(points[0]?.[0] ?? 0, Y_OFFSET, points[0]?.[1] ?? 0);
+    uvs.push(1, 0);
+    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    geometry.setAttribute('uv', new Float32BufferAttribute(uvs, 2));
+    return geometry;
+};
+function polygonsMatch(a, b) {
+    return (a.length === b.length &&
+        a.every((polygon, polygonIndex) => polygon.length === b[polygonIndex]?.length &&
+            polygon.every((point, pointIndex) => point[0] === b[polygonIndex]?.[pointIndex]?.[0] &&
+                point[1] === b[polygonIndex]?.[pointIndex]?.[1])));
+}
+function addSlabHoles(shape, slabPolygons, originX = 0, originZ = 0) {
+    const localPolygons = slabPolygons.map((polygon) => polygon.map(([x, z]) => [x - originX, -(z - originZ)]));
+    for (const ring of unionPolygons(localPolygons)) {
+        if (ring.length < 3)
+            continue;
+        const hole = new Path();
+        hole.moveTo(ring[0][0], ring[0][1]);
+        for (let index = 1; index < ring.length; index += 1) {
+            hole.lineTo(ring[index][0], ring[index][1]);
+        }
+        hole.closePath();
+        shape.holes.push(hole);
+    }
+}
+export const SiteRenderer = ({ node }) => {
+    const ref = useRef(null);
+    useRegistry(node.id, 'site', ref);
+    const bgColor = useViewer((state) => getSceneTheme(state.sceneTheme).ground);
+    const backgroundColor = useViewer((state) => getSceneTheme(state.sceneTheme).background);
+    const skyColor = useViewer((state) => {
+        const theme = getSceneTheme(state.sceneTheme);
+        return theme.backgroundSky ?? theme.background;
+    });
+    const appearance = useViewer((state) => getSceneTheme(state.sceneTheme).appearance);
+    const maxLightIntensity = useViewer((state) => Math.max(1, ...getSceneTheme(state.sceneTheme).lights.map((light) => light.intensity)));
+    const livePolygon = useLiveNodeOverrides((state) => state.overrides.get(node.id)?.polygon ?? null);
+    const polygonPoints = livePolygon?.points ?? node.polygon?.points;
+    // Centroid + radius of the lot polygon, for the presentation fade below.
+    const fadeBounds = useMemo(() => {
+        if (!polygonPoints || polygonPoints.length < 3)
+            return null;
+        let cx = 0;
+        let cz = 0;
+        for (const [x, z] of polygonPoints) {
+            cx += x ?? 0;
+            cz += z ?? 0;
+        }
+        cx /= polygonPoints.length;
+        cz /= polygonPoints.length;
+        let radius = 0;
+        for (const [x, z] of polygonPoints) {
+            radius = Math.max(radius, Math.hypot((x ?? 0) - cx, (z ?? 0) - cz));
+        }
+        return { cx, cz, radius };
+    }, [polygonPoints]);
+    // Lit (not Basic) so the site ground receives the directional shadow — Basic
+    // is unlit, which is why shadows used to stop dead at the slab edge. polygonOffset
+    // keeps it tucked behind the grid/slab as before.
+    const groundMaterial = useMemo(() => {
+        const material = new MeshLambertNodeMaterial({ color: bgColor });
+        material.polygonOffset = true;
+        material.polygonOffsetFactor = 1;
+        material.polygonOffsetUnits = 1;
+        return material;
+    }, [bgColor]);
+    // Presentation horizon: a large ground disc under the lot, in the same
+    // theme ground colour, fading radially into the theme background so the
+    // scene sits on an "infinite" plane that dissolves into the sky instead of
+    // a hard-edged plate floating on the backdrop. Never pickable.
+    const horizonMaterial = useMemo(() => {
+        if (!fadeBounds)
+            return null;
+        const material = new MeshLambertNodeMaterial({ color: bgColor });
+        const center = vec2(fadeBounds.cx, fadeBounds.cz);
+        const dist = positionWorld.xz.sub(center).length();
+        const fade = smoothstep(float(fadeBounds.radius * 1.05), float(fadeBounds.radius * 5), dist);
+        // Contact vignette: a soft darkening that hugs the lot so the parcel
+        // reads as sitting on the ground instead of floating on an even field.
+        // The linear cut competes with the tone mapper's shoulder — bright themes
+        // (studio's key light runs at intensity 4) compress a fixed 15% to almost
+        // nothing — so the strength scales with the theme's strongest light.
+        const vignetteStrength = Math.min(0.45, 0.13 * maxLightIntensity);
+        const halo = float(1)
+            .sub(smoothstep(float(fadeBounds.radius * 0.95), float(fadeBounds.radius * 2.6), dist))
+            .mul(vignetteStrength);
+        const haloFactor = float(1).sub(halo);
+        material.colorNode = mix(color(bgColor), color('#000000'), fade).mul(haloFactor);
+        // Dissolve, not tint: the albedo (lighting response, incl. shadows) fades
+        // to black while an emissive term fades up to the backdrop gradient — the
+        // exact formula the post pipeline composites (viewer lib/backdrop.ts),
+        // evaluated with this fragment's view direction, so the far end is
+        // literally the backdrop (incl. the horizon haze) from any camera pose.
+        const viewDirY = positionWorld.sub(cameraPosition).normalize().y;
+        const backdrop = backdropGradient({
+            dirY: viewDirY,
+            background: color(backgroundColor),
+            haze: color(horizonHazeColor(skyColor, appearance)),
+            sky: color(skyColor),
+            skyDeep: color(deepSkyColor(skyColor)),
+        });
+        material.emissiveNode = mix(color('#000000'), backdrop, fade).mul(haloFactor);
+        material.polygonOffset = true;
+        material.polygonOffsetFactor = 2;
+        material.polygonOffsetUnits = 2;
+        return material;
+    }, [bgColor, backgroundColor, skyColor, appearance, maxLightIntensity, fadeBounds]);
+    // Cache computed polygons to keep the selector stable across unrelated store updates.
+    const slabPolygonsCache = useRef([]);
+    const slabPolygons = useScene((state) => {
+        const next = getRecessedSlabGroundHoles(state.nodes);
+        const prev = slabPolygonsCache.current;
+        if (polygonsMatch(next, prev))
+            return prev;
+        slabPolygonsCache.current = next;
+        return next;
+    });
+    // Ground shape: site polygon with slab footprints punched as holes
+    const groundShape = useMemo(() => {
+        if (!polygonPoints || polygonPoints.length < 3)
+            return null;
+        const pts = polygonPoints;
+        const shape = new Shape();
+        shape.moveTo(pts[0][0], -pts[0][1]);
+        for (let i = 1; i < pts.length; i++)
+            shape.lineTo(pts[i][0], -pts[i][1]);
+        shape.closePath();
+        addSlabHoles(shape, slabPolygons);
+        return shape;
+    }, [polygonPoints, slabPolygons]);
+    const horizonGeometry = useMemo(() => {
+        if (!fadeBounds)
+            return null;
+        const radius = Math.max(fadeBounds.radius * 8, 400);
+        const shape = new Shape();
+        const segments = 64;
+        shape.moveTo(radius, 0);
+        for (let index = 1; index <= segments; index += 1) {
+            const angle = (index / segments) * Math.PI * 2;
+            shape.lineTo(Math.cos(angle) * radius, Math.sin(angle) * radius);
+        }
+        shape.closePath();
+        addSlabHoles(shape, slabPolygons, fadeBounds.cx, fadeBounds.cz);
+        return new ShapeGeometry(shape);
+    }, [fadeBounds, slabPolygons]);
+    useEffect(() => () => horizonGeometry?.dispose(), [horizonGeometry]);
+    // Create boundary line geometry
+    const lineGeometry = useMemo(() => {
+        if (!polygonPoints || polygonPoints.length < 2)
+            return null;
+        return createBoundaryLineGeometry(polygonPoints);
+    }, [polygonPoints]);
+    useEffect(() => () => lineGeometry?.dispose(), [lineGeometry]);
+    const groundGeometry = useMemo(() => {
+        if (!groundShape)
+            return null;
+        return new ShapeGeometry(groundShape);
+    }, [groundShape]);
+    useEffect(() => () => groundGeometry?.dispose(), [groundGeometry]);
+    const handlers = useNodeEvents(node, 'site');
+    if (!(node && lineGeometry)) {
+        return null;
+    }
+    return (_jsxs("group", { ref: ref, ...handlers, children: [(node.children ?? []).map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId))), groundGeometry && (_jsx("mesh", { geometry: groundGeometry, material: groundMaterial, position: [0, -0.05, 0], receiveShadow: true, rotation: [-Math.PI / 2, 0, 0] })), horizonGeometry && horizonMaterial && fadeBounds && (_jsx("mesh", { geometry: horizonGeometry, material: horizonMaterial, position: [fadeBounds.cx, -0.07, fadeBounds.cz], raycast: noopRaycast, receiveShadow: true, rotation: [-Math.PI / 2, 0, 0] })), _jsx("line", { frustumCulled: false, geometry: lineGeometry, renderOrder: 9, children: _jsx("lineBasicMaterial", { color: "#f59e0b", linewidth: 2, opacity: 0.6, transparent: true }) })] }));
+};
+export default SiteRenderer;

package/dist/site/schema.d.ts

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

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

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

package/dist/site/schema.js

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

package/dist/skylight/definition.d.ts

@@ -0,0 +1,10 @@
+import { type NodeDefinition } from '@pascal-app/core';
+import { SkylightNode } from './schema';
+/**
+ * Skylight — a framed glass opening hosted on a roof segment. All five
+ * type variants (flat / walk-on / lantern / opening / sliding) render
+ * with the archive's full geometry; the animation system advances
+ * `operationState` via `useInteractive.skylightAnimations`.
+ */
+export declare const skylightDefinition: NodeDefinition<typeof SkylightNode>;
+//# sourceMappingURL=definition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.d.ts","sourceRoot":"","sources":["../../src/skylight/definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAIpB,MAAM,kBAAkB,CAAA;AASzB,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAoMvC;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAC,OAAO,YAAY,CAgFlE,CAAA"}

package/dist/skylight/definition.js

@@ -0,0 +1,268 @@
+import { SkylightNode as SkylightNodeSchema, } from '@pascal-app/core';
+import { buildSkylightFloorplan } from './floorplan';
+import { closeSkylightOpenState, isOperableSkylightNode, toggleSkylightOpenState, } from './interaction';
+import { skylightParametrics } from './parametrics';
+import { buildSkylightRoofCut } from './roof-cut';
+import { SkylightNode } from './schema';
+// In-world handle constants. Offsets are measured from the skylight's
+// edge to the arrow's CENTER, so they need to clear half the chevron's
+// own length (~13 cm at default scale) plus the frame's outward depth
+// before there's any visible gap. 0.35 m leaves ~15 cm of clear space
+// between the chevron's tail and the skylight frame for a typical
+// flat / opening skylight; rotate gizmo gets a matching cushion.
+const SIDE_HANDLE_OFFSET = 0.35;
+const ROTATE_CORNER_OFFSET = 0.35;
+// Small +X bump so the rotate gizmo reads as sitting *beside* the corner
+// instead of perched on its edge — visually separates it from the
+// width chevron that shares the +X side.
+const ROTATE_CORNER_X_OFFSET = 0.2;
+// Lift the rotate gizmo a little off the surface so it floats above the
+// frame instead of sinking into the curb / shingles around the corner.
+const ROTATE_CORNER_Y_OFFSET = 0.18;
+const ROTATE_RING_OFFSET = 0.06;
+// Curb arrow sits a small distance above the current curb top so it stays
+// grabbable when the curb collapses to zero (flat / walk-on look) and
+// doesn't sink into the frame for tall lantern curbs.
+const CURB_HANDLE_OFFSET = 0.18;
+const MIN_SKYLIGHT_DIM = 0.2;
+const MIN_FRAME_THICKNESS = 0.005;
+// Width arrows live on ±X (left / right edges of the skylight footprint).
+// Asymmetric resize: each arrow only moves its own edge, the opposite
+// edge stays put — same pattern as the door and the roof-segment width
+// handles. `position` is in segment-surface-tangent coords, so after
+// changing width we recenter `position` by half the delta along the
+// skylight's own +X axis (rotated by `node.rotation` since the inner
+// rotation-y group puts skylight-local X at an angle relative to
+// segment-local X).
+function skylightWidthHandle(side) {
+    const sign = side === 'right' ? 1 : -1;
+    return {
+        kind: 'linear-resize',
+        axis: 'x',
+        anchor: side === 'right' ? 'min' : 'max',
+        min: MIN_SKYLIGHT_DIM,
+        currentValue: (n) => n.width,
+        apply: (initial, newWidth) => {
+            const rotY = initial.rotation ?? 0;
+            const armX = Math.cos(rotY);
+            const armZ = -Math.sin(rotY);
+            const anchorX = initial.position[0] - sign * (initial.width / 2) * armX;
+            const anchorZ = initial.position[2] - sign * (initial.width / 2) * armZ;
+            const newCenterX = anchorX + sign * (newWidth / 2) * armX;
+            const newCenterZ = anchorZ + sign * (newWidth / 2) * armZ;
+            return {
+                width: newWidth,
+                position: [newCenterX, initial.position[1], newCenterZ],
+            };
+        },
+        placement: {
+            position: (n) => [sign * (n.width / 2 + SIDE_HANDLE_OFFSET), 0, 0],
+            rotationY: () => (side === 'right' ? 0 : Math.PI),
+        },
+        // Grandparent so handles render inside the roof (visible) instead of
+        // the segment mesh, which lives inside the roof renderer's
+        // `<group visible={false}>` segments wrapper. See skylight/renderer
+        // for the matching composed-transform group that backs this.
+        portal: 'grandparent',
+    };
+}
+// Height arrows on ±Z. Skylight `height` is the dimension along the
+// roof's slope direction (X is across-slope). Same asymmetric pattern as
+// width — anchored edge stays world-fixed, position recenters by half
+// delta along the skylight's own +Z axis (rotated by `node.rotation`).
+function skylightHeightHandle(side) {
+    const sign = side === 'top' ? 1 : -1;
+    return {
+        kind: 'linear-resize',
+        axis: 'z',
+        anchor: side === 'top' ? 'min' : 'max',
+        min: MIN_SKYLIGHT_DIM,
+        currentValue: (n) => n.height,
+        apply: (initial, newHeight) => {
+            const rotY = initial.rotation ?? 0;
+            // Skylight-local +Z projects onto segment-surface +X / +Z as
+            // (sin r, cos r) — orthogonal to the (cos r, -sin r) basis used
+            // for the +X axis above.
+            const armX = Math.sin(rotY);
+            const armZ = Math.cos(rotY);
+            const anchorX = initial.position[0] - sign * (initial.height / 2) * armX;
+            const anchorZ = initial.position[2] - sign * (initial.height / 2) * armZ;
+            const newCenterX = anchorX + sign * (newHeight / 2) * armX;
+            const newCenterZ = anchorZ + sign * (newHeight / 2) * armZ;
+            return {
+                height: newHeight,
+                position: [newCenterX, initial.position[1], newCenterZ],
+            };
+        },
+        placement: {
+            position: (n) => [0, 0, sign * (n.height / 2 + SIDE_HANDLE_OFFSET)],
+            // The +Z chevron points along +Z by default (axis 'z' auto-rotates
+            // -π/2 in LinearArrow). For the -Z handle, add +π so it flips.
+            rotationY: () => (side === 'top' ? 0 : Math.PI),
+        },
+        portal: 'grandparent',
+    };
+}
+// Rotate gizmo at the +X+Z corner of the footprint, with a ring guide
+// traced around the corner-diagonal radius — same idiom as the roof-
+// segment / column / elevator rotate gizmos. Negate the cursor delta to
+// match three.js Y-rotation handedness.
+function skylightRotateHandle() {
+    return {
+        kind: 'arc-resize',
+        axis: 'angular',
+        shape: 'rotate',
+        apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }),
+        placement: {
+            position: (n) => {
+                const halfX = n.width / 2;
+                const halfZ = n.height / 2;
+                return [
+                    halfX + ROTATE_CORNER_X_OFFSET,
+                    ROTATE_CORNER_Y_OFFSET,
+                    halfZ + ROTATE_CORNER_OFFSET,
+                ];
+            },
+            rotationY: () => -Math.PI / 4,
+        },
+        decoration: {
+            kind: 'ring',
+            radius: (n) => Math.hypot(n.width / 2, n.height / 2) + ROTATE_RING_OFFSET,
+            y: () => 0,
+        },
+        portal: 'grandparent',
+    };
+}
+// Curb-height arrow — vertical chevron above the skylight, dragged up
+// to raise the curb. Auto-enables `curb: true` when the user grows from
+// zero so the geometry actually has a curb to show; preserves `curb`
+// flag once it's been set. Placement floats just above the curb top so
+// it tracks the value as the user drags and stays above the frame for
+// tall lantern curbs.
+function skylightCurbHeightHandle() {
+    return {
+        kind: 'linear-resize',
+        axis: 'y',
+        anchor: 'min',
+        min: 0,
+        currentValue: (n) => n.curbHeight ?? 0,
+        apply: (initial, newValue) => ({
+            curbHeight: newValue,
+            // Without this, dragging the arrow on a walk-on (curb: false)
+            // skylight would change `curbHeight` invisibly because the
+            // geometry path ignores it when `curb` is false.
+            curb: initial.curb || newValue > 0,
+        }),
+        placement: {
+            position: (n) => [0, (n.curbHeight ?? 0) + CURB_HANDLE_OFFSET, 0],
+        },
+        portal: 'grandparent',
+    };
+}
+// Frame-thickness arrow — diagonal chevron at the -X+Z (top-left) corner,
+// pointing outward along the corner bisector. Lives on the opposite
+// corner from the rotate gizmo so they don't compete. axis='z' (instead
+// of 'x') so dragging outward toward +Z grows the value 1:1; LinearArrow
+// auto-rotates a 'z'-axis chevron by -π/2 (so it points +Z), and the
+// extra -π/4 here swings the chevron to -X+Z. The X+Z offsets match
+// SIDE_HANDLE_OFFSET on each axis, so the arrow sits the same visual
+// distance from the corner that the side chevrons sit from their edges.
+function skylightFrameThicknessHandle() {
+    return {
+        kind: 'linear-resize',
+        axis: 'z',
+        anchor: 'min',
+        min: MIN_FRAME_THICKNESS,
+        currentValue: (n) => n.frameThickness ?? 0.05,
+        apply: (_n, newValue) => ({ frameThickness: newValue }),
+        placement: {
+            position: (n) => [-(n.width / 2) - SIDE_HANDLE_OFFSET, 0, n.height / 2 + SIDE_HANDLE_OFFSET],
+            rotationY: () => -Math.PI / 4,
+        },
+        portal: 'grandparent',
+    };
+}
+const skylightHandles = [
+    skylightWidthHandle('right'),
+    skylightWidthHandle('left'),
+    skylightHeightHandle('top'),
+    skylightHeightHandle('bottom'),
+    skylightCurbHeightHandle(),
+    skylightFrameThicknessHandle(),
+    skylightRotateHandle(),
+];
+/**
+ * Skylight — a framed glass opening hosted on a roof segment. All five
+ * type variants (flat / walk-on / lantern / opening / sliding) render
+ * with the archive's full geometry; the animation system advances
+ * `operationState` via `useInteractive.skylightAnimations`.
+ */
+export const skylightDefinition = {
+    kind: 'skylight',
+    schemaVersion: 1,
+    schema: SkylightNode,
+    category: 'structure',
+    surfaceRole: 'glazing',
+    defaults: () => {
+        const stub = SkylightNodeSchema.parse({
+            id: 'skylight_default',
+            type: 'skylight',
+        });
+        const { id: _id, type: _type, ...rest } = stub;
+        return rest;
+    },
+    capabilities: {
+        selectable: { hitVolume: 'bbox' },
+        duplicable: true,
+        deletable: true,
+        // Mounts on a roof segment via `roofSegmentId`. Dirty marks
+        // cascade to the host segment's parent roof so its merged shell
+        // re-CSGs with the new cut. `buildCut` returns the segment-local
+        // box that's subtracted from shin / deck / wall.
+        roofAccessory: {
+            buildCut: (node, hostSegment) => buildSkylightRoofCut(node, hostSegment),
+        },
+    },
+    parametrics: skylightParametrics,
+    handles: skylightHandles,
+    floorplan: buildSkylightFloorplan,
+    renderer: {
+        kind: 'parametric',
+        module: () => import('./renderer'),
+    },
+    system: {
+        module: () => import('./system'),
+        priority: 3,
+    },
+    tool: () => import('./tool'),
+    affordanceTools: {
+        move: () => import('./move-tool'),
+    },
+    toolHints: [
+        { key: 'Left click', label: 'Place skylight on roof' },
+        { key: 'Esc', label: 'Cancel' },
+    ],
+    presentation: {
+        label: 'Skylight',
+        description: 'Framed glass opening on a roof segment.',
+        icon: { kind: 'url', src: '/icons/roof.webp' },
+        paletteSection: 'structure',
+        paletteOrder: 124,
+    },
+    mcp: {
+        description: 'A skylight on a roof segment. Five type variants (flat / walk-on / lantern / opening / sliding) — geometry beyond box stub coming later.',
+    },
+    // R toggles open ↔ closed on operable types (opening / sliding); T
+    // forces close. The animation runs through `useInteractive` and the
+    // skylight system; see `./interaction.ts`.
+    keyboardActions: {
+        r: {
+            appliesTo: (node) => node.type === 'skylight' && isOperableSkylightNode(node),
+            run: (node) => toggleSkylightOpenState(node.id),
+        },
+        t: {
+            appliesTo: (node) => node.type === 'skylight' && isOperableSkylightNode(node),
+            run: (node) => closeSkylightOpenState(node.id),
+        },
+    },
+};

package/dist/skylight/floorplan.d.ts

@@ -0,0 +1,16 @@
+import type { FloorplanGeometry, GeometryContext, SkylightNode } from '@pascal-app/core';
+/**
+ * Floor-plan builder for a skylight — a glazed opening set into the roof
+ * slope. Seen from above it's the classic skylight symbol: an outer frame
+ * rectangle, an inset glass pane, and a diagonal cross over the glass.
+ *
+ * Coordinate frame mirrors the 3D transform stack
+ * (roof → roof-segment → skylight), same as the chimney builder.
+ * `position` is segment-local (X = width across slope, Z = height down
+ * slope; Y ignored — anchored to the slope). `rotation` is yaw. Rotations
+ * negated for the floor plan's y-down convention. The frame extends
+ * outward by `frameThickness` past the `width × height` glass opening
+ * (matching `frame-csg.ts`).
+ */
+export declare function buildSkylightFloorplan(node: SkylightNode, ctx: GeometryContext): FloorplanGeometry | null;
+//# sourceMappingURL=floorplan.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"floorplan.d.ts","sourceRoot":"","sources":["../../src/skylight/floorplan.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,iBAAiB,EAEjB,eAAe,EAGf,YAAY,EACb,MAAM,kBAAkB,CAAA;AAEzB;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,YAAY,EAClB,GAAG,EAAE,eAAe,GACnB,iBAAiB,GAAG,IAAI,CA+H1B"}

package/dist/skylight/floorplan.js

@@ -0,0 +1,129 @@
+/**
+ * Floor-plan builder for a skylight — a glazed opening set into the roof
+ * slope. Seen from above it's the classic skylight symbol: an outer frame
+ * rectangle, an inset glass pane, and a diagonal cross over the glass.
+ *
+ * Coordinate frame mirrors the 3D transform stack
+ * (roof → roof-segment → skylight), same as the chimney builder.
+ * `position` is segment-local (X = width across slope, Z = height down
+ * slope; Y ignored — anchored to the slope). `rotation` is yaw. Rotations
+ * negated for the floor plan's y-down convention. The frame extends
+ * outward by `frameThickness` past the `width × height` glass opening
+ * (matching `frame-csg.ts`).
+ */
+export function buildSkylightFloorplan(node, ctx) {
+    const segment = ctx.parent;
+    if (segment?.type !== 'roof-segment')
+        return null;
+    const roofId = segment.parentId;
+    const roof = roofId ? ctx.resolve(roofId) : undefined;
+    if (roof?.type !== 'roof')
+        return null;
+    const cosR = Math.cos(-roof.rotation);
+    const sinR = Math.sin(-roof.rotation);
+    const segCx = roof.position[0] + segment.position[0] * cosR - segment.position[2] * sinR;
+    const segCz = roof.position[2] + segment.position[0] * sinR + segment.position[2] * cosR;
+    const segRot = -(roof.rotation + segment.rotation);
+    const cosS = Math.cos(segRot);
+    const sinS = Math.sin(segRot);
+    const cx = segCx + node.position[0] * cosS - node.position[2] * sinS;
+    const cz = segCz + node.position[0] * sinS + node.position[2] * cosS;
+    const rot = -(roof.rotation + segment.rotation + node.rotation);
+    const cos = Math.cos(rot);
+    const sin = Math.sin(rot);
+    const toPlan = (lx, lz) => [
+        cx + lx * cos - lz * sin,
+        cz + lx * sin + lz * cos,
+    ];
+    const view = ctx.viewState;
+    const palette = view?.palette;
+    const isSelected = view?.selected ?? false;
+    const isHighlighted = view?.highlighted ?? false;
+    const isHovered = view?.hovered ?? false;
+    const showSelectedChrome = isSelected || isHighlighted;
+    const baseInk = '#475569';
+    const stroke = showSelectedChrome && palette
+        ? palette.selectedStroke
+        : isHovered && palette
+            ? palette.wallHoverStroke
+            : baseInk;
+    const frameFill = showSelectedChrome ? '#fed7aa' : '#e2e8f0';
+    const glassFill = showSelectedChrome ? '#fed7aa' : '#dbeafe';
+    const frameFillOpacity = showSelectedChrome ? 0.55 : 0.7;
+    const glassFillOpacity = showSelectedChrome ? 0.45 : 0.55;
+    const lineWidth = showSelectedChrome ? 0.03 : 0.02;
+    const hw = Math.max(node.width, 0.1) / 2;
+    const hh = Math.max(node.height, 0.1) / 2;
+    const ft = Math.max(0, node.frameThickness ?? 0.05);
+    const outerHX = hw + ft;
+    const outerHZ = hh + ft;
+    const rect = (halfX, halfZ) => [
+        toPlan(-halfX, -halfZ),
+        toPlan(halfX, -halfZ),
+        toPlan(halfX, halfZ),
+        toPlan(-halfX, halfZ),
+    ];
+    const children = [
+        // Transparent hit-target over the outer frame.
+        {
+            kind: 'polygon',
+            points: rect(outerHX, outerHZ),
+            fill: stroke,
+            fillOpacity: 0,
+            stroke: 'none',
+            strokeWidth: 0,
+            pointerEvents: 'all',
+        },
+        // Outer frame / curb.
+        {
+            kind: 'polygon',
+            points: rect(outerHX, outerHZ),
+            fill: frameFill,
+            fillOpacity: frameFillOpacity,
+            stroke,
+            strokeWidth: lineWidth,
+            strokeLinejoin: 'miter',
+            pointerEvents: 'none',
+        },
+        // Inset glass pane.
+        {
+            kind: 'polygon',
+            points: rect(hw, hh),
+            fill: glassFill,
+            fillOpacity: glassFillOpacity,
+            stroke,
+            strokeWidth: lineWidth * 0.8,
+            strokeLinejoin: 'miter',
+            pointerEvents: 'none',
+        },
+    ];
+    // Diagonal glazing cross over the pane — the standard skylight symbol.
+    const tl = toPlan(-hw, -hh);
+    const tr = toPlan(hw, -hh);
+    const bl = toPlan(-hw, hh);
+    const br = toPlan(hw, hh);
+    children.push({
+        kind: 'line',
+        x1: tl[0],
+        y1: tl[1],
+        x2: br[0],
+        y2: br[1],
+        stroke,
+        strokeWidth: lineWidth * 0.7,
+        strokeOpacity: 0.7,
+        strokeLinecap: 'round',
+        pointerEvents: 'none',
+    }, {
+        kind: 'line',
+        x1: tr[0],
+        y1: tr[1],
+        x2: bl[0],
+        y2: bl[1],
+        stroke,
+        strokeWidth: lineWidth * 0.7,
+        strokeOpacity: 0.7,
+        strokeLinecap: 'round',
+        pointerEvents: 'none',
+    });
+    return { kind: 'group', children };
+}

package/dist/skylight/frame-csg.d.ts

@@ -0,0 +1,4 @@
+import type { SkylightNode } from '@pascal-app/core';
+import * as THREE from 'three';
+export declare function buildFrameGeometry({ curb, curbHeight, frameDepth, frameThickness, height, width, }: Pick<SkylightNode, 'curb' | 'curbHeight' | 'frameDepth' | 'frameThickness' | 'height' | 'width'>): THREE.BufferGeometry | null;
+//# sourceMappingURL=frame-csg.d.ts.map

package/dist/skylight/frame-csg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-csg.d.ts","sourceRoot":"","sources":["../../src/skylight/frame-csg.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAQpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,UAAU,EACV,cAAc,EACd,MAAM,EACN,KAAK,GACN,EAAE,IAAI,CACL,YAAY,EACZ,MAAM,GAAG,YAAY,GAAG,YAAY,GAAG,gBAAgB,GAAG,QAAQ,GAAG,OAAO,CAC7E,GAAG,KAAK,CAAC,cAAc,GAAG,IAAI,CAgD9B"}