@pascal-app/nodes 0.1.1

package/dist/roof-segment/floorplan.js

@@ -0,0 +1,265 @@
+import { getDutchRoofMetrics, } from '@pascal-app/core';
+/**
+ * Stage C floor-plan builder for roof segment. Renders the segment as a
+ * proper architectural roof plan: the footprint outline plus the
+ * ridge / hip / break linework (and a downslope arrow for sheds) that
+ * makes each roof shape — hip, gable, shed, gambrel, dutch, mansard,
+ * flat — read distinctly, rather than as a bare rectangle.
+ *
+ * All linework is derived in segment-local space, mirroring the faces the
+ * 3D builder (`getModuleFaces` in the roof system) generates per type, so
+ * the plan and the model agree. Everything is composed into world coords
+ * via the parent roof's position + rotation and the segment's own.
+ */
+export function buildRoofSegmentFloorplan(node, ctx) {
+    const roof = ctx.parent;
+    if (roof?.type !== 'roof')
+        return null;
+    // Segment center in world coords. Floor-plan plots at `-rotation` so
+    // SVG's CW-with-y-down `rotate` direction ends up matching Three.js
+    // Y-rotation (CCW from top-down). The standard math rotation matrix
+    // applied to (localX, localZ) with `+rotation` gives screen-CW in
+    // SVG; negating the rotation gives screen-CCW = matches Three.js.
+    const planRoofRotation = -roof.rotation;
+    const cosRoof = Math.cos(planRoofRotation);
+    const sinRoof = Math.sin(planRoofRotation);
+    const localX = node.position[0];
+    const localZ = node.position[2];
+    const cx = roof.position[0] + localX * cosRoof - localZ * sinRoof;
+    const cz = roof.position[2] + localX * sinRoof + localZ * cosRoof;
+    const rotation = -(roof.rotation + node.rotation);
+    const cos = Math.cos(rotation);
+    const sin = Math.sin(rotation);
+    const halfWidth = node.width / 2;
+    const halfDepth = node.depth / 2;
+    // Map a segment-local point (lx = width axis, lz = depth axis) into
+    // world plan coords — the same rotation + translation the footprint
+    // corners use. Shared by the per-type ridge/hip linework below.
+    const toPlan = (lx, lz) => [
+        cx + lx * cos - lz * sin,
+        cz + lx * sin + lz * cos,
+    ];
+    const corners = [
+        [-halfWidth, -halfDepth],
+        [halfWidth, -halfDepth],
+        [halfWidth, halfDepth],
+        [-halfWidth, halfDepth],
+    ];
+    const points = corners.map(([x, y]) => toPlan(x, y));
+    const view = ctx.viewState;
+    const palette = view?.palette;
+    const isSelected = view?.selected ?? false;
+    const isHighlighted = view?.highlighted ?? false;
+    const showSelectedChrome = isSelected || isHighlighted;
+    // Black architectural outline by default; palette accent on select.
+    // Mirrors the elevator / column style so all structural elements read
+    // the same in the floor plan.
+    const baseInk = '#111111';
+    const stroke = showSelectedChrome && palette ? palette.selectedStroke : baseInk;
+    const children = [
+        // Invisible hit-target — full footprint, transparent fill, captures
+        // clicks across the entire roof rectangle (so the user doesn't need
+        // to pixel-hunt the outline strokes).
+        {
+            kind: 'polygon',
+            points,
+            fill: stroke,
+            fillOpacity: 0,
+            stroke: 'none',
+            strokeWidth: 0,
+            pointerEvents: 'all',
+        },
+    ];
+    // The segment's own rectangle outline + fill render ONLY while it's
+    // selected / highlighted — that highlights which sub-plane is active
+    // (including its interior edges shared with neighbours). When unselected
+    // the eaves come from the parent roof's merged outline
+    // (`buildRoofFloorplan`), so overlapping segments read as one combined
+    // shape instead of stacked rectangles. Ridges/hips below always draw.
+    if (showSelectedChrome) {
+        children.push({
+            kind: 'polygon',
+            points,
+            fill: '#fed7aa',
+            fillOpacity: 0.55,
+            stroke,
+            strokeWidth: 0.035,
+            strokeLinejoin: 'miter',
+        });
+    }
+    // NOTE: the ridge / hip / break / slope linework is NOT drawn here — the
+    // parent roof's builder (`buildRoofFloorplan`) draws it for every segment,
+    // clipped against the merged-roof valleys so a segment's ridge stops at
+    // the junction instead of running on into a neighbour it overlaps. This
+    // builder owns only the per-segment interaction chrome below. The shape
+    // math lives in `getRoofSegmentPlanLinework` (exported for the roof
+    // builder to consume).
+    // Selection chrome — orange move-handle dot at the centre, four
+    // perpendicular side resize-arrows (width on X, depth on Z), and a
+    // rotate-arrow at the +X/+Z corner. Sister to the 3D handles in
+    // `definition.ts`. Resize/rotate route through the matching
+    // `floorplanAffordances`; the dot drives body-move via
+    // `def.floorplanMoveTarget`.
+    if (isSelected) {
+        children.push({
+            kind: 'move-handle',
+            point: [cx, cz],
+        });
+        const sideArrowOffset = 0.12;
+        const rotateCornerOffset = 0.22;
+        const halfW = node.width / 2;
+        const halfD = node.depth / 2;
+        // Effective rotation = parent roof rotation + segment-local rotation.
+        // Reuse `cos` / `sin` from the corner computation above (they were
+        // computed for the same `rotation` value).
+        const rotateLocal = (lx, ly) => [
+            lx * cos - ly * sin,
+            lx * sin + ly * cos,
+        ];
+        const sides = [
+            { local: [halfW + sideArrowOffset, 0], localAngle: 0, axis: 'x', side: 1 },
+            { local: [-(halfW + sideArrowOffset), 0], localAngle: Math.PI, axis: 'x', side: -1 },
+            { local: [0, halfD + sideArrowOffset], localAngle: Math.PI / 2, axis: 'z', side: 1 },
+            { local: [0, -(halfD + sideArrowOffset)], localAngle: -Math.PI / 2, axis: 'z', side: -1 },
+        ];
+        for (const s of sides) {
+            const [ox, oz] = rotateLocal(s.local[0], s.local[1]);
+            const [tx, tz] = rotateLocal(Math.cos(s.localAngle), Math.sin(s.localAngle));
+            children.push({
+                kind: 'move-arrow',
+                point: [cx + ox, cz + oz],
+                angle: Math.atan2(tz, tx),
+                affordance: 'roof-segment-resize',
+                payload: { axis: s.axis, side: s.side },
+            });
+        }
+        // Rotate-arrow at the +X / +Z corner. Local angle π/4 puts the
+        // curved arrow's bow at the diagonal corner so it reads as a
+        // rotation gizmo around the segment centre.
+        const [cornerX, cornerZ] = rotateLocal(halfW + rotateCornerOffset, halfD + rotateCornerOffset);
+        const [radialX, radialZ] = rotateLocal(1, 1);
+        children.push({
+            kind: 'rotate-arrow',
+            point: [cx + cornerX, cz + cornerZ],
+            angle: Math.atan2(radialZ, radialX),
+            affordance: 'roof-segment-rotate',
+            pivot: [cx, cz],
+        });
+    }
+    return { kind: 'group', children };
+}
+/**
+ * Ridge / hip / break linework for a roof segment in segment-local space
+ * (lx = width axis, lz = depth axis), mirroring the faces the 3D builder
+ * (`getModuleFaces`) generates for each roof type. The floor-plan builder
+ * maps these to world coords. `slope`, when set, is a shed roof's downhill
+ * fall direction (tail = high eave, head = low eave).
+ *
+ * - ridge: peak line(s) where opposite slopes meet
+ * - hip:   diagonal from an eave corner up to a ridge end / peak
+ * - break: horizontal fold where the slope angle changes (gambrel kink,
+ *          mansard/dutch waist)
+ *
+ * Exported so the roof-level builder can reuse it to terminate the valley
+ * diagonals it draws at merged-roof junctions against the segments' ridges.
+ */
+export function getRoofSegmentPlanLinework(node) {
+    const hw = node.width / 2;
+    const hd = node.depth / 2;
+    const ridges = [];
+    const hips = [];
+    const breaks = [];
+    let slope = null;
+    // Eave corners, matching e1..e4 in the 3D `getModuleFaces` builder.
+    const e1 = [-hw, hd];
+    const e2 = [hw, hd];
+    const e3 = [hw, -hd];
+    const e4 = [-hw, -hd];
+    // Hip linework shared by `hip` and the collapsed-waist mansard/dutch
+    // fallbacks: ridge along the longer axis, four hips from the eave
+    // corners to the nearer ridge end — or a single peak when square.
+    const pushHip = () => {
+        if (Math.abs(node.width - node.depth) < 0.01) {
+            const peak = [0, 0];
+            hips.push([e1, peak], [e2, peak], [e3, peak], [e4, peak]);
+        }
+        else if (node.width >= node.depth) {
+            const r1 = [-hw + hd, 0];
+            const r2 = [hw - hd, 0];
+            ridges.push([r1, r2]);
+            hips.push([e1, r1], [e4, r1], [e2, r2], [e3, r2]);
+        }
+        else {
+            const r1 = [0, hd - hw];
+            const r2 = [0, -hd + hw];
+            ridges.push([r1, r2]);
+            hips.push([e1, r1], [e2, r1], [e3, r2], [e4, r2]);
+        }
+    };
+    switch (node.roofType) {
+        case 'flat':
+            break;
+        case 'gable':
+            // Single ridge down the middle along the width axis.
+            ridges.push([
+                [-hw, 0],
+                [hw, 0],
+            ]);
+            break;
+        case 'shed':
+            // 3D builder slopes from the high eave (lz = -hd) down to lz = +hd.
+            slope = { tail: [0, -hd * 0.55], head: [0, hd * 0.55] };
+            break;
+        case 'hip':
+            pushHip();
+            break;
+        case 'gambrel': {
+            // Ridge + two kink lines parallel to it.
+            const mz = hd * node.gambrelLowerWidthRatio;
+            ridges.push([
+                [-hw, 0],
+                [hw, 0],
+            ]);
+            breaks.push([
+                [-hw, mz],
+                [hw, mz],
+            ], [
+                [-hw, -mz],
+                [hw, -mz],
+            ]);
+            break;
+        }
+        case 'mansard': {
+            // Inner waist rectangle + four corner hips from the eaves to it.
+            const i = Math.min(node.width, node.depth) * node.mansardSteepWidthRatio;
+            if (hw - i > 0.02 && hd - i > 0.02) {
+                const w1 = [-hw + i, hd - i];
+                const w2 = [hw - i, hd - i];
+                const w3 = [hw - i, -hd + i];
+                const w4 = [-hw + i, -hd + i];
+                breaks.push([w1, w2], [w2, w3], [w3, w4], [w4, w1]);
+                hips.push([e1, w1], [e2, w2], [e3, w3], [e4, w4]);
+            }
+            else {
+                pushHip();
+            }
+            break;
+        }
+        case 'dutch': {
+            const metrics = getDutchRoofMetrics(node);
+            if (!(metrics.waistHalfX > 0.02 && metrics.waistHalfZ > 0.02)) {
+                pushHip();
+                break;
+            }
+            const w1 = [-metrics.waistHalfX, metrics.waistHalfZ];
+            const w2 = [metrics.waistHalfX, metrics.waistHalfZ];
+            const w3 = [metrics.waistHalfX, -metrics.waistHalfZ];
+            const w4 = [-metrics.waistHalfX, -metrics.waistHalfZ];
+            hips.push([e1, w1], [e2, w2], [e3, w3], [e4, w4]);
+            breaks.push([w1, w2], [w2, w3], [w3, w4], [w4, w1]);
+            ridges.push([metrics.ridgeStart, metrics.ridgeEnd]);
+            break;
+        }
+    }
+    return { ridges, hips, breaks, slope };
+}

package/dist/roof-segment/index.d.ts

@@ -0,0 +1,2 @@
+export { roofSegmentDefinition } from './definition';
+//# sourceMappingURL=index.d.ts.map

package/dist/roof-segment/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/roof-segment/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA"}

package/dist/roof-segment/index.js

@@ -0,0 +1 @@
+export { roofSegmentDefinition } from './definition';

package/dist/roof-segment/measurement.d.ts

@@ -0,0 +1,4 @@
+import { type MeasurementFeature, type MeasurementFeatureBinding, type RoofNode, type RoofSegmentNode } from '@pascal-app/core';
+export declare function roofSegmentMeasurementFeatures(node: RoofSegmentNode, roof: RoofNode | null): MeasurementFeature[];
+export declare function matchRoofSegmentMeasurementFeature(node: RoofSegmentNode, roof: RoofNode | null, hit: [number, number, number], maxDistance: number): MeasurementFeatureBinding | null;
+//# sourceMappingURL=measurement.d.ts.map

package/dist/roof-segment/measurement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measurement.d.ts","sourceRoot":"","sources":["../../src/roof-segment/measurement.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,yBAAyB,EAC9B,KAAK,QAAQ,EACb,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAA;AAsCzB,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,eAAe,EACrB,IAAI,EAAE,QAAQ,GAAG,IAAI,GACpB,kBAAkB,EAAE,CActB;AAED,wBAAgB,kCAAkC,CAChD,IAAI,EAAE,eAAe,EACrB,IAAI,EAAE,QAAQ,GAAG,IAAI,EACrB,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAC7B,WAAW,EAAE,MAAM,GAClB,yBAAyB,GAAG,IAAI,CA+BlC"}

package/dist/roof-segment/measurement.js

@@ -0,0 +1,64 @@
+import { getRoofSegmentSurfaceY, } from '@pascal-app/core';
+import { getRoofSegmentPlanLinework } from './floorplan';
+function transformPoint(node, roof, [x, z]) {
+    const segmentCos = Math.cos(node.rotation);
+    const segmentSin = Math.sin(node.rotation);
+    const segmentX = node.position[0] + x * segmentCos + z * segmentSin;
+    const segmentZ = node.position[2] - x * segmentSin + z * segmentCos;
+    const roofCos = Math.cos(roof.rotation);
+    const roofSin = Math.sin(roof.rotation);
+    return [
+        roof.position[0] + segmentX * roofCos + segmentZ * roofSin,
+        roof.position[1] + node.position[1] + getRoofSegmentSurfaceY(node, x, z),
+        roof.position[2] - segmentX * roofSin + segmentZ * roofCos,
+    ];
+}
+function segmentFeature(node, roof, id, label, snapKind, segment) {
+    return {
+        id,
+        label,
+        snapKind,
+        priority: snapKind === 'ridge' ? 100 : 75,
+        geometry: {
+            kind: 'segment',
+            start: transformPoint(node, roof, segment[0]),
+            end: transformPoint(node, roof, segment[1]),
+        },
+    };
+}
+export function roofSegmentMeasurementFeatures(node, roof) {
+    if (roof?.type !== 'roof')
+        return [];
+    const linework = getRoofSegmentPlanLinework(node);
+    return [
+        ...linework.ridges.map((segment, index) => segmentFeature(node, roof, `roof:ridge:${index}`, 'Roof ridge', 'ridge', segment)),
+        ...linework.hips.map((segment, index) => segmentFeature(node, roof, `roof:hip:${index}`, 'Roof hip', 'edge', segment)),
+        ...linework.breaks.map((segment, index) => segmentFeature(node, roof, `roof:break:${index}`, 'Roof break', 'edge', segment)),
+    ];
+}
+export function matchRoofSegmentMeasurementFeature(node, roof, hit, maxDistance) {
+    let best = null;
+    for (const feature of roofSegmentMeasurementFeatures(node, roof)) {
+        if (feature.geometry.kind !== 'segment')
+            continue;
+        const { start, end } = feature.geometry;
+        const dx = end[0] - start[0];
+        const dy = end[1] - start[1];
+        const dz = end[2] - start[2];
+        const lengthSquared = dx * dx + dy * dy + dz * dz;
+        const t = lengthSquared <= 1e-12
+            ? 0
+            : Math.max(0, Math.min(1, ((hit[0] - start[0]) * dx + (hit[1] - start[1]) * dy + (hit[2] - start[2]) * dz) /
+                lengthSquared));
+        const point = [
+            start[0] + dx * t,
+            start[1] + dy * t,
+            start[2] + dz * t,
+        ];
+        const distance = Math.hypot(hit[0] - point[0], hit[1] - point[1], hit[2] - point[2]);
+        if (distance <= maxDistance && (!best || distance < best.distance)) {
+            best = { featureId: feature.id, point, parameters: { t }, distance };
+        }
+    }
+    return best;
+}

package/dist/roof-segment/panel.d.ts

@@ -0,0 +1,2 @@
+export default function RoofSegmentPanel(): import("react").JSX.Element | null;
+//# sourceMappingURL=panel.d.ts.map

package/dist/roof-segment/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/roof-segment/panel.tsx"],"names":[],"mappings":"AA8DA,MAAM,CAAC,OAAO,UAAU,gBAAgB,uCAgfvC"}

package/dist/roof-segment/panel.js

@@ -0,0 +1,180 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createDefaultRidgeVentsForSegment, isAutoRidgeVentEnabled, isDefaultRidgeVentNode, ROOF_SHAPE_DEFAULTS, RoofSegmentNode as RoofSegmentNodeSchema, useScene, } from '@pascal-app/core';
+import { ActionButton, ActionGroup, PanelSection, PanelWrapper, SegmentedControl, SliderControl, ToggleControl, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { Copy, Move, Trash2 } from 'lucide-react';
+import { useCallback } from 'react';
+const ROOF_TYPE_OPTIONS = [
+    { label: 'Hip', value: 'hip' },
+    { label: 'Gable', value: 'gable' },
+    { label: 'Shed', value: 'shed' },
+];
+const ROOF_TYPE_OPTIONS_2 = [
+    { label: 'Flat', value: 'flat' },
+    { label: 'Gambrel', value: 'gambrel' },
+    { label: 'Dutch', value: 'dutch' },
+    { label: 'Mansard', value: 'mansard' },
+];
+// Carpenter / roofer convention: rise over a 12" run, converted to degrees.
+// atan(3/12) ≈ 14.04°, atan(6/12) ≈ 26.57°, atan(9/12) ≈ 36.87°, atan(12/12) = 45°.
+const PITCH_PRESETS = [
+    { label: '3/12', deg: 14.04 },
+    { label: '6/12', deg: 26.57 },
+    { label: '9/12', deg: 36.87 },
+    { label: '12/12', deg: 45 },
+];
+function shouldShowTrimPlanes(metadata) {
+    return metadataRecord(metadata).showTrimPlanes === true;
+}
+function metadataRecord(metadata) {
+    if (typeof metadata === 'object' && metadata !== null && !Array.isArray(metadata)) {
+        return metadata;
+    }
+    return {};
+}
+export default function RoofSegmentPanel() {
+    const selectedId = useViewer((s) => s.selection.selectedIds[0]);
+    const setSelection = useViewer((s) => s.setSelection);
+    const updateNode = useScene((s) => s.updateNode);
+    const setMovingNode = useEditor((s) => s.setMovingNode);
+    const setRoofHostDragArmedId = useEditor((s) => s.setRoofHostDragArmedId);
+    const node = useScene((s) => selectedId ? s.nodes[selectedId] : undefined);
+    const autoRidgeVentEnabled = useScene((s) => {
+        const current = selectedId
+            ? s.nodes[selectedId]
+            : undefined;
+        if (current?.type !== 'roof-segment')
+            return false;
+        return isAutoRidgeVentEnabled(current, s.nodes);
+    });
+    const handleUpdate = useCallback((updates) => {
+        if (!selectedId)
+            return;
+        updateNode(selectedId, updates);
+    }, [selectedId, updateNode]);
+    const handleRoofTypeChange = useCallback((roofType) => {
+        // Switching to Dutch resets the shape parameters to their defaults so the
+        // gablet is well-formed regardless of the leftover values from the
+        // previous roof type.
+        handleUpdate(roofType === 'dutch'
+            ? {
+                roofType,
+                dutchHipWidthRatio: ROOF_SHAPE_DEFAULTS.dutchHipWidthRatio,
+                dutchHipHeightRatio: ROOF_SHAPE_DEFAULTS.dutchHipHeightRatio,
+                dutchWaistLengthRatio: ROOF_SHAPE_DEFAULTS.dutchWaistLengthRatio,
+                dutchGabletRake: ROOF_SHAPE_DEFAULTS.dutchGabletRake,
+                dutchTopRakeThickness: ROOF_SHAPE_DEFAULTS.dutchTopRakeThickness,
+            }
+            : { roofType });
+    }, [handleUpdate]);
+    const handleClose = useCallback(() => {
+        setSelection({ selectedIds: [] });
+    }, [setSelection]);
+    const handleBack = useCallback(() => {
+        if (node?.parentId) {
+            setRoofHostDragArmedId(node.parentId);
+            setSelection({ selectedIds: [node.parentId] });
+        }
+    }, [node?.parentId, setRoofHostDragArmedId, setSelection]);
+    const handleDuplicate = useCallback(() => {
+        if (!node?.parentId)
+            return;
+        triggerSFX('sfx:item-pick');
+        let duplicateInfo = structuredClone(node);
+        delete duplicateInfo.id;
+        duplicateInfo.metadata = { ...duplicateInfo.metadata, isNew: true };
+        // Offset slightly so it's visible
+        duplicateInfo.position = [
+            duplicateInfo.position[0] + 1,
+            duplicateInfo.position[1],
+            duplicateInfo.position[2] + 1,
+        ];
+        try {
+            const duplicate = RoofSegmentNodeSchema.parse(duplicateInfo);
+            useScene.getState().createNode(duplicate, duplicate.parentId);
+            setSelection({ selectedIds: [] });
+            setMovingNode(duplicate);
+        }
+        catch (e) {
+            console.error('Failed to duplicate roof segment', e);
+        }
+    }, [node, setSelection, setMovingNode]);
+    const handleMove = useCallback(() => {
+        if (node) {
+            triggerSFX('sfx:item-pick');
+            setMovingNode(node);
+            setSelection({ selectedIds: [] });
+        }
+    }, [node, setMovingNode, setSelection]);
+    const handleDelete = useCallback(() => {
+        if (!(selectedId && node))
+            return;
+        triggerSFX('sfx:item-delete');
+        const parentId = node.parentId;
+        useScene.getState().deleteNode(selectedId);
+        if (parentId) {
+            useScene.getState().dirtyNodes.add(parentId);
+            setSelection({ selectedIds: [parentId] });
+        }
+        else {
+            setSelection({ selectedIds: [] });
+        }
+    }, [selectedId, node, setSelection]);
+    const handleAutoRidgeVentToggle = useCallback((checked) => {
+        if (!selectedId)
+            return;
+        const scene = useScene.getState();
+        const current = scene.nodes[selectedId];
+        if (current?.type !== 'roof-segment')
+            return;
+        scene.updateNode(selectedId, {
+            metadata: { ...metadataRecord(current.metadata), autoRidgeVent: checked },
+        });
+        const latest = useScene.getState().nodes[selectedId];
+        if (latest?.type !== 'roof-segment')
+            return;
+        const defaultVentIds = (latest.children ?? []).filter((childId) => isDefaultRidgeVentNode(useScene.getState().nodes[childId], latest.id));
+        if (!checked) {
+            if (defaultVentIds.length > 0) {
+                useScene.getState().deleteNodes(defaultVentIds);
+            }
+            return;
+        }
+        if (defaultVentIds.length > 0)
+            return;
+        const ridgeVents = createDefaultRidgeVentsForSegment(latest);
+        if (ridgeVents.length === 0)
+            return;
+        scene.createNodes(ridgeVents.map((ridgeVent) => ({
+            node: ridgeVent,
+            parentId: latest.id,
+        })));
+    }, [selectedId]);
+    if (!(node && node.type === 'roof-segment' && selectedId))
+        return null;
+    const showTrimPlanes = shouldShowTrimPlanes(node.metadata);
+    return (_jsxs(PanelWrapper, { icon: "/icons/roof.webp", onBack: handleBack, onClose: handleClose, title: node.name || 'Roof Segment', width: 300, children: [_jsxs(PanelSection, { title: "Roof Type", children: [_jsx(SegmentedControl, { onChange: (v) => handleRoofTypeChange(v), options: ROOF_TYPE_OPTIONS, value: node.roofType }), _jsx(SegmentedControl, { onChange: (v) => handleRoofTypeChange(v), options: ROOF_TYPE_OPTIONS_2, value: node.roofType })] }), _jsxs(PanelSection, { title: "Trim", children: [_jsx(ToggleControl, { checked: showTrimPlanes, label: "Show trim planes", onChange: (checked) => handleUpdate({
+                            metadata: { ...metadataRecord(node.metadata), showTrimPlanes: checked },
+                        }) }), node.roofType !== 'shed' && node.roofType !== 'flat' && (_jsx(ToggleControl, { checked: autoRidgeVentEnabled, label: "Auto ridge vent", onChange: handleAutoRidgeVentToggle }))] }), _jsxs(PanelSection, { title: "Footprint", children: [_jsx(SliderControl, { label: "Width", max: 25, min: 0.5, onChange: (v) => handleUpdate({ width: v }), precision: 2, step: 0.5, unit: "m", value: Math.round(node.width * 100) / 100 }), _jsx(SliderControl, { label: "Depth", max: 25, min: 0.5, onChange: (v) => handleUpdate({ depth: v }), precision: 2, step: 0.5, unit: "m", value: Math.round(node.depth * 100) / 100 })] }), _jsx(PanelSection, { title: "Wall Height", children: _jsx(SliderControl, { label: "Wall", max: 5, min: 0, onChange: (v) => handleUpdate({ wallHeight: v }), precision: 2, step: 0.1, unit: "m", value: Math.round(node.wallHeight * 100) / 100 }) }), _jsxs(PanelSection, { title: "Pitch", children: [_jsx(SliderControl, { label: "Angle", max: 60, min: 0, onChange: (v) => handleUpdate({ pitch: v }), precision: 0, step: 1, unit: "\u00B0", value: Math.round(node.pitch) }), _jsx("div", { className: "flex gap-1.5 px-1 pt-2 pb-1", children: PITCH_PRESETS.map((preset) => (_jsx(ActionButton, { label: preset.label, onClick: () => handleUpdate({ pitch: preset.deg }) }, preset.label))) })] }), node.roofType === 'gambrel' && (_jsxs(PanelSection, { title: "Shape", children: [_jsx(SliderControl, { label: "Kink Depth", max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ gambrelLowerWidthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.gambrelLowerWidthRatio * 100) / 100 }), _jsx(SliderControl, { label: "Kink Height", max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ gambrelLowerHeightRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.gambrelLowerHeightRatio * 100) / 100 })] })), node.roofType === 'mansard' && (_jsxs(PanelSection, { title: "Shape", children: [_jsx(SliderControl, { label: "Waist Width", max: 0.45, min: 0.05, onChange: (v) => handleUpdate({ mansardSteepWidthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.mansardSteepWidthRatio * 100) / 100 }), _jsx(SliderControl, { label: "Waist Height", max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ mansardSteepHeightRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.mansardSteepHeightRatio * 100) / 100 })] })), node.roofType === 'dutch' && (_jsxs(PanelSection, { title: "Shape", children: [_jsx(SliderControl, { label: "Waist Width", max: 0.45, min: 0.05, onChange: (v) => handleUpdate({ dutchHipWidthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.dutchHipWidthRatio * 100) / 100 }), _jsx(SliderControl, { label: "Waist Height", max: 0.9, min: 0.1, onChange: (v) => handleUpdate({ dutchHipHeightRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round(node.dutchHipHeightRatio * 100) / 100 }), _jsx(SliderControl, { label: "Waist Length", max: 1, min: 0.1, onChange: (v) => handleUpdate({ dutchWaistLengthRatio: v }), precision: 2, step: 0.01, unit: "", value: Math.round((node.dutchWaistLengthRatio ?? ROOF_SHAPE_DEFAULTS.dutchWaistLengthRatio) * 100) / 100 }), _jsx(SliderControl, { label: "Top Rake Thick.", max: 0.5, min: 0.01, onChange: (v) => handleUpdate({ dutchTopRakeThickness: v }), precision: 2, step: 0.01, unit: "m", value: Math.round((node.dutchTopRakeThickness ?? ROOF_SHAPE_DEFAULTS.dutchTopRakeThickness) * 100) / 100 }), _jsx(SliderControl, { label: "Top Rake Length", max: 3, min: 0, onChange: (v) => handleUpdate({ dutchGabletRake: v }), precision: 2, step: 0.01, unit: "m", value: Math.round((node.dutchGabletRake ?? ROOF_SHAPE_DEFAULTS.dutchGabletRake) * 100) / 100 })] })), _jsxs(PanelSection, { title: "Structure", children: [_jsx(SliderControl, { label: "Wall Thick.", max: 1, min: 0.05, onChange: (v) => handleUpdate({ wallThickness: v }), precision: 2, step: 0.05, unit: "m", value: Math.round(node.wallThickness * 100) / 100 }), _jsx(SliderControl, { label: "Deck Thick.", max: 0.3, min: 0.04, onChange: (v) => handleUpdate({ deckThickness: v }), precision: 2, step: 0.01, unit: "m", value: Math.round(node.deckThickness * 100) / 100 }), _jsx(SliderControl, { label: "Overhang", max: 1, min: 0, onChange: (v) => handleUpdate({ overhang: v }), precision: 2, step: 0.05, unit: "m", value: Math.round(node.overhang * 100) / 100 }), _jsx(SliderControl, { label: "Shingle Thick.", max: 0.3, min: 0.02, onChange: (v) => handleUpdate({ shingleThickness: v }), precision: 2, step: 0.01, unit: "m", value: Math.round(node.shingleThickness * 100) / 100 })] }), _jsxs(PanelSection, { title: "Position", children: [_jsx(SliderControl, { label: "X", max: 50, min: -50, onChange: (v) => {
+                            const pos = [...node.position];
+                            pos[0] = v;
+                            handleUpdate({ position: pos });
+                        }, precision: 2, step: 0.05, unit: "m", value: Math.round(node.position[0] * 100) / 100 }), _jsx(SliderControl, { label: "Y", max: 50, min: -50, onChange: (v) => {
+                            const pos = [...node.position];
+                            pos[1] = v;
+                            handleUpdate({ position: pos });
+                        }, precision: 2, step: 0.05, unit: "m", value: Math.round(node.position[1] * 100) / 100 }), _jsx(SliderControl, { label: "Z", max: 50, min: -50, onChange: (v) => {
+                            const pos = [...node.position];
+                            pos[2] = v;
+                            handleUpdate({ position: pos });
+                        }, precision: 2, step: 0.05, unit: "m", value: Math.round(node.position[2] * 100) / 100 }), _jsx(SliderControl, { label: "Rotation", max: 180, min: -180, onChange: (degrees) => {
+                            handleUpdate({ rotation: (degrees * Math.PI) / 180 });
+                        }, precision: 0, step: 1, unit: "\u00B0", value: Math.round((node.rotation * 180) / Math.PI) }), _jsxs("div", { className: "flex gap-1.5 px-1 pt-2 pb-1", children: [_jsx(ActionButton, { label: "-45\u00B0", onClick: () => {
+                                    triggerSFX('sfx:item-rotate');
+                                    handleUpdate({ rotation: node.rotation - Math.PI / 4 });
+                                } }), _jsx(ActionButton, { label: "+45\u00B0", onClick: () => {
+                                    triggerSFX('sfx:item-rotate');
+                                    handleUpdate({ rotation: node.rotation + Math.PI / 4 });
+                                } })] })] }), _jsx(PanelSection, { title: "Actions", children: _jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: _jsx(Move, { className: "h-3.5 w-3.5" }), label: "Move", onClick: handleMove }), _jsx(ActionButton, { icon: _jsx(Copy, { className: "h-3.5 w-3.5" }), label: "Duplicate", onClick: handleDuplicate }), _jsx(ActionButton, { className: "hover:bg-red-500/20", icon: _jsx(Trash2, { className: "h-3.5 w-3.5 text-red-400" }), label: "Delete", onClick: handleDelete })] }) })] }));
+}

package/dist/roof-segment/parametrics.d.ts

@@ -0,0 +1,3 @@
+import type { ParametricDescriptor, RoofSegmentNode } from '@pascal-app/core';
+export declare const roofSegmentParametrics: ParametricDescriptor<RoofSegmentNode>;
+//# sourceMappingURL=parametrics.d.ts.map

package/dist/roof-segment/parametrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parametrics.d.ts","sourceRoot":"","sources":["../../src/roof-segment/parametrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAE7E,eAAO,MAAM,sBAAsB,EAAE,oBAAoB,CAAC,eAAe,CAGxE,CAAA"}

package/dist/roof-segment/parametrics.js

@@ -0,0 +1,4 @@
+export const roofSegmentParametrics = {
+    groups: [],
+    customPanel: () => import('./panel'),
+};

package/dist/roof-segment/renderer.d.ts

@@ -0,0 +1,6 @@
+import { type RoofSegmentNode } from '@pascal-app/core';
+export declare const RoofSegmentRenderer: ({ node }: {
+    node: RoofSegmentNode;
+}) => import("react").JSX.Element;
+export default RoofSegmentRenderer;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/roof-segment/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/roof-segment/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,eAAe,EAIrB,MAAM,kBAAkB,CAAA;AAazB,eAAO,MAAM,mBAAmB,GAAI,UAAU;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,gCAsGtE,CAAA;AAED,eAAe,mBAAmB,CAAA"}