@pascal-app/nodes 0.1.1

package/dist/solar-panel/move-tool.js

@@ -0,0 +1,257 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { emitter, sceneRegistry, useScene, } from '@pascal-app/core';
+import { consumePlacementDragRelease, EDITOR_LAYER, markToolCancelConsumed, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import * as THREE from 'three';
+import { createRelativeRoofDrag, roofSegmentLocalToBuildingLocal, snapRelativeRoofDragTarget, } from '../shared/relative-roof-drag';
+import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface';
+import { clearRoofSurfacePlacementGuides, publishRoofSurfaceNodePlacementGuides, snapRoofSurfaceNodeTarget, } from '../shared/roof-surface-placement-guides';
+// MeshBasicMaterial: avoids the WebGPU "Color target has no corresponding
+// fragment stage output / writeMask not zero" error that fires when
+// MeshStandardMaterial (which writes to the MRT normal/roughness targets)
+// is rendered in a pass whose render target lacks those attachments.
+// Same fix as skylight's glass material. Visually identical for a ghost.
+const previewMaterial = new THREE.MeshBasicMaterial({
+    color: 0x22_44_88,
+    transparent: true,
+    opacity: 0.5,
+    depthWrite: false,
+});
+export default function MoveSolarPanelTool({ node }) {
+    const exitMoveMode = useCallback(() => {
+        useEditor.getState().setMovingNode(null);
+    }, []);
+    const previewRef = useRef(null);
+    const [previewPos, setPreviewPos] = useState([0, 0, 0]);
+    // Yaw = roof.rotation + segment.rotation; applied as outer rotation-y
+    // so the surface quat (segment-local) composes correctly — same pattern
+    // as the placement tool ghost.
+    const [previewYaw, setPreviewYaw] = useState(0);
+    const [previewSurfaceQuat, setPreviewSurfaceQuat] = useState(new THREE.Quaternion());
+    const [hasHit, setHasHit] = useState(false);
+    // Compact 2×3 ghost — same size as the placement tool ghost.
+    const previewGeo = useMemo(() => {
+        const ghostRows = 2;
+        const ghostCols = 3;
+        const totalW = ghostCols * node.panelWidth + (ghostCols - 1) * node.gapX;
+        const totalH = ghostRows * node.panelHeight + (ghostRows - 1) * node.gapY;
+        const geo = new THREE.BoxGeometry(totalW, node.frameDepth, totalH);
+        geo.translate(0, node.standoffHeight + node.frameDepth / 2, 0);
+        return geo;
+    }, [
+        node.panelWidth,
+        node.panelHeight,
+        node.gapX,
+        node.gapY,
+        node.frameDepth,
+        node.standoffHeight,
+    ]);
+    useEffect(() => {
+        useScene.temporal.getState().pause();
+        const original = {
+            position: [...node.position],
+            rotation: node.rotation ?? 0,
+            roofSegmentId: node.roofSegmentId,
+            parentId: node.parentId,
+            metadata: node.metadata,
+        };
+        const meta = typeof node.metadata === 'object' && node.metadata !== null
+            ? node.metadata
+            : {};
+        const isNew = !!meta.isNew;
+        useScene.getState().updateNode(node.id, {
+            metadata: { ...meta, isTransient: true },
+        });
+        const panelObj = sceneRegistry.nodes.get(node.id);
+        if (panelObj)
+            panelObj.visible = false;
+        let lastSnapX = 0;
+        let lastSnapZ = 0;
+        let lastTarget = null;
+        let committed = false;
+        const roofDrag = createRelativeRoofDrag(original);
+        const clearTarget = () => {
+            lastTarget = null;
+            setHasHit(false);
+            clearRoofSurfacePlacementGuides();
+        };
+        const resolveSnappedTarget = (event) => {
+            const rawTarget = roofDrag.resolve(event);
+            if (!rawTarget)
+                return null;
+            return snapRoofSurfaceNodeTarget({
+                target: snapRelativeRoofDragTarget(rawTarget, event.nativeEvent?.shiftKey === true),
+                node,
+                bypass: event.nativeEvent?.shiftKey === true,
+            });
+        };
+        const updateGhost = (event) => {
+            const target = resolveSnappedTarget(event);
+            if (!target) {
+                clearTarget();
+                return;
+            }
+            lastTarget = target;
+            const sx = Math.round(target.localX * 20) / 20;
+            const sz = Math.round(target.localZ * 20) / 20;
+            if (event.nativeEvent?.shiftKey !== true && (sx !== lastSnapX || sz !== lastSnapZ)) {
+                triggerSFX('sfx:grid-snap');
+                lastSnapX = sx;
+                lastSnapZ = sz;
+            }
+            // Use the same analytical approach as the placement tool so the
+            // ghost orientation matches the committed panel exactly regardless
+            // of segment rotation. The placement tool's ghost is always correct
+            // because analytical normals are computed in segment-local space
+            // and the yaw is applied explicitly, avoiding any world-vs-local
+            // normal mismatch.
+            const segLocalNormal = getAnalyticalNormal(target.localX, target.localZ, target.segment);
+            setPreviewSurfaceQuat(surfaceQuatFromNormal(segLocalNormal, new THREE.Quaternion()));
+            setPreviewYaw((event.node.rotation ?? 0) + (target.segment.rotation ?? 0));
+            setPreviewPos(roofSegmentLocalToBuildingLocal(target.segment.id, [
+                target.localX,
+                target.localY,
+                target.localZ,
+            ]));
+            setHasHit(true);
+            publishRoofSurfaceNodePlacementGuides({
+                roof: event.node,
+                segment: target.segment,
+                center: [target.localX, target.localY, target.localZ],
+                node,
+            });
+            event.stopPropagation();
+        };
+        const onRoofClick = (event) => {
+            if (committed)
+                return;
+            const st = useScene.getState();
+            const target = lastTarget ?? resolveSnappedTarget(event);
+            if (!target)
+                return;
+            committed = true;
+            const targetSegmentId = target.segment.id;
+            // Compute segment-local normal for the committed node so the
+            // renderer's surfaceQuat + outer segment.rotation compose to
+            // the same world orientation the ghost showed.
+            const segLocalNormal = getAnalyticalNormal(target.localX, target.localZ, target.segment);
+            st.updateNode(node.id, {
+                position: original.position,
+                rotation: original.rotation,
+                roofSegmentId: original.roofSegmentId,
+                parentId: original.parentId,
+                metadata: original.metadata,
+            });
+            useScene.temporal.getState().resume();
+            st.updateNode(node.id, {
+                roofSegmentId: targetSegmentId,
+                parentId: targetSegmentId,
+                position: [target.localX, target.localY, target.localZ],
+                rotation: original.rotation,
+                // Segment-local normal — must stay consistent with getAnalyticalNormal
+                // semantics so the renderer's surfaceQuat is in the correct frame.
+                surfaceNormal: [segLocalNormal.x, segLocalNormal.y, segLocalNormal.z],
+                visible: true,
+                metadata: {},
+            });
+            if (original.roofSegmentId && original.roofSegmentId !== targetSegmentId) {
+                const oldSeg = st.nodes[original.roofSegmentId];
+                if (oldSeg) {
+                    st.updateNode(original.roofSegmentId, {
+                        children: (oldSeg.children ?? []).filter((id) => id !== node.id),
+                    });
+                }
+                const newSeg = st.nodes[targetSegmentId];
+                if (newSeg && !(newSeg.children ?? []).includes(node.id)) {
+                    st.updateNode(targetSegmentId, {
+                        children: [...(newSeg.children ?? []), node.id],
+                    });
+                }
+                st.dirtyNodes.add(original.roofSegmentId);
+            }
+            st.dirtyNodes.add(targetSegmentId);
+            st.dirtyNodes.add(node.id);
+            useScene.temporal.getState().pause();
+            const obj = sceneRegistry.nodes.get(node.id);
+            if (obj)
+                obj.visible = true;
+            triggerSFX('sfx:item-place');
+            clearRoofSurfacePlacementGuides();
+            exitMoveMode();
+            event.stopPropagation();
+        };
+        const onCancel = () => {
+            if (isNew) {
+                useScene.temporal.getState().resume();
+                const parentId = original.roofSegmentId;
+                if (parentId) {
+                    const parent = useScene.getState().nodes[parentId];
+                    if (parent) {
+                        useScene.getState().updateNode(parentId, {
+                            children: (parent.children ?? []).filter((id) => id !== node.id),
+                        });
+                    }
+                }
+                useScene.getState().deleteNode(node.id);
+                markToolCancelConsumed();
+                clearRoofSurfacePlacementGuides();
+                exitMoveMode();
+                return;
+            }
+            useScene.getState().updateNode(node.id, {
+                position: original.position,
+                rotation: original.rotation,
+                roofSegmentId: original.roofSegmentId,
+                parentId: original.parentId,
+                metadata: original.metadata,
+            });
+            if (original.roofSegmentId) {
+                useScene.getState().dirtyNodes.add(original.roofSegmentId);
+            }
+            const obj = sceneRegistry.nodes.get(node.id);
+            if (obj)
+                obj.visible = true;
+            useScene.temporal.getState().resume();
+            markToolCancelConsumed();
+            clearRoofSurfacePlacementGuides();
+            exitMoveMode();
+        };
+        const onPlacementDragPointerUp = (event) => {
+            if (!consumePlacementDragRelease(event))
+                return;
+            if (!lastTarget)
+                return;
+            onRoofClick({
+                nativeEvent: event,
+                stopPropagation: () => event.stopPropagation(),
+            });
+        };
+        emitter.on('roof:move', updateGhost);
+        emitter.on('roof:enter', updateGhost);
+        emitter.on('roof:click', onRoofClick);
+        emitter.on('roof:leave', clearTarget);
+        emitter.on('tool:cancel', onCancel);
+        window.addEventListener('pointerup', onPlacementDragPointerUp);
+        return () => {
+            emitter.off('roof:move', updateGhost);
+            emitter.off('roof:enter', updateGhost);
+            emitter.off('roof:click', onRoofClick);
+            emitter.off('roof:leave', clearTarget);
+            emitter.off('tool:cancel', onCancel);
+            window.removeEventListener('pointerup', onPlacementDragPointerUp);
+            const obj = sceneRegistry.nodes.get(node.id);
+            if (obj)
+                obj.visible = true;
+            clearRoofSurfacePlacementGuides();
+            useScene.temporal.getState().resume();
+        };
+    }, [exitMoveMode, node]);
+    // Ghost layout mirrors the placement tool exactly:
+    //   position (building-local hit point)
+    //   → rotation-y (roof.rotation + segment.rotation — explicit yaw)
+    //   → quaternion (segment-local surface tilt)
+    // This is identical to the placement ghost so drag and commit always
+    // show the same orientation.
+    return (_jsx("group", { position: previewPos, ref: previewRef, visible: hasHit, children: _jsx("group", { "rotation-y": previewYaw, children: _jsx("group", { quaternion: previewSurfaceQuat, children: _jsx("mesh", { geometry: previewGeo, layers: EDITOR_LAYER, material: previewMaterial }) }) }) }));
+}

package/dist/solar-panel/panel.d.ts

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

package/dist/solar-panel/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/solar-panel/panel.tsx"],"names":[],"mappings":"AAyDA,MAAM,CAAC,OAAO,UAAU,eAAe,uCAmUtC"}

package/dist/solar-panel/panel.js

@@ -0,0 +1,146 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SOLAR_PANEL_PRESET_LABELS, SOLAR_PANEL_PRESETS, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+import { ActionButton, ActionGroup, PanelSection, PanelWrapper, SegmentedControl, SliderControl, triggerSFX, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { LayoutGrid, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { computeAutoFit, flippedPanelDims } from './geometry';
+const cn = (...classes) => classes.filter(Boolean).join(' ');
+// Editing any of these clears panelTypePreset back to undefined ("Custom"),
+// keeping the schema invariant: a present preset always matches the table.
+const PRESET_OWNED_FIELDS = [
+    'panelWidth',
+    'panelHeight',
+    'frameThickness',
+    'frameDepth',
+];
+const PRESET_CARDS = [
+    { key: 'residential', label: SOLAR_PANEL_PRESET_LABELS.residential },
+    { key: 'residential-large', label: SOLAR_PANEL_PRESET_LABELS['residential-large'] },
+    { key: 'compact', label: SOLAR_PANEL_PRESET_LABELS.compact },
+    { key: 'frameless', label: SOLAR_PANEL_PRESET_LABELS.frameless },
+];
+function dimsTouchedByUpdate(updates) {
+    for (const field of PRESET_OWNED_FIELDS) {
+        if (field in updates)
+            return true;
+    }
+    return false;
+}
+function num(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+export default function SolarPanelPanel() {
+    const selectedId = useViewer((s) => s.selection.selectedIds[0]);
+    const setSelection = useViewer((s) => s.setSelection);
+    const updateNode = useScene((s) => s.updateNode);
+    const deleteNode = useScene((s) => s.deleteNode);
+    const storeNode = useScene((s) => selectedId ? s.nodes[selectedId] : undefined);
+    const overrides = useLiveNodeOverrides((s) => selectedId
+        ? s.get(selectedId)
+        : undefined);
+    const node = storeNode && overrides ? { ...storeNode, ...overrides } : storeNode;
+    const segment = useScene((s) => node?.roofSegmentId
+        ? s.nodes[node.roofSegmentId]
+        : undefined);
+    const [autoFitMessage, setAutoFitMessage] = useState(null);
+    useEffect(() => {
+        if (!autoFitMessage)
+            return;
+        const t = window.setTimeout(() => setAutoFitMessage(null), 3500);
+        return () => window.clearTimeout(t);
+    }, [autoFitMessage]);
+    const handleUpdate = useCallback((updates) => {
+        if (!selectedId)
+            return;
+        const next = dimsTouchedByUpdate(updates)
+            ? { ...updates, panelTypePreset: undefined }
+            : updates;
+        updateNode(selectedId, next);
+    }, [selectedId, updateNode]);
+    const previewProp = useCallback((updates) => {
+        if (!selectedId)
+            return;
+        useLiveNodeOverrides.getState().set(selectedId, updates);
+    }, [selectedId]);
+    const commitProp = useCallback((updates) => {
+        if (!selectedId)
+            return;
+        const next = dimsTouchedByUpdate(updates)
+            ? { ...updates, panelTypePreset: undefined }
+            : updates;
+        updateNode(selectedId, next);
+        useLiveNodeOverrides.getState().clear(selectedId);
+    }, [selectedId, updateNode]);
+    const handleClose = useCallback(() => {
+        setSelection({ selectedIds: [] });
+    }, [setSelection]);
+    const handleBack = useCallback(() => {
+        if (node?.roofSegmentId) {
+            setSelection({ selectedIds: [node.roofSegmentId] });
+        }
+    }, [node?.roofSegmentId, setSelection]);
+    const handlePresetChange = useCallback((key) => {
+        if (!selectedId)
+            return;
+        const dims = SOLAR_PANEL_PRESETS[key];
+        updateNode(selectedId, { panelTypePreset: key, ...dims });
+    }, [selectedId, updateNode]);
+    const handleFlip = useCallback(() => {
+        if (!(selectedId && node))
+            return;
+        updateNode(selectedId, {
+            ...flippedPanelDims(node),
+            panelTypePreset: undefined,
+        });
+    }, [selectedId, node, updateNode]);
+    const handleAutoFit = useCallback(() => {
+        if (!(selectedId && node && segment))
+            return;
+        const fit = computeAutoFit(segment, node);
+        if (!fit) {
+            setAutoFitMessage('Setbacks too large to fit a panel.');
+            return;
+        }
+        updateNode(selectedId, { rows: fit.rows, columns: fit.columns });
+        setAutoFitMessage(null);
+    }, [selectedId, node, segment, updateNode]);
+    const handleDelete = useCallback(() => {
+        if (!(selectedId && node))
+            return;
+        triggerSFX('sfx:item-delete');
+        const segmentId = node.roofSegmentId;
+        if (segmentId) {
+            const state = useScene.getState();
+            const seg = state.nodes[segmentId];
+            if (seg) {
+                state.updateNode(segmentId, {
+                    children: (seg.children ?? []).filter((id) => id !== selectedId),
+                });
+            }
+        }
+        deleteNode(selectedId);
+        if (segmentId) {
+            useScene.getState().dirtyNodes.add(segmentId);
+            setSelection({ selectedIds: [segmentId] });
+        }
+        else {
+            setSelection({ selectedIds: [] });
+        }
+    }, [selectedId, node, deleteNode, setSelection]);
+    if (!(node && node.type === 'solar-panel' && selectedId))
+        return null;
+    const activePreset = node.panelTypePreset;
+    const formatDims = (w, h) => `${w.toFixed(2)} × ${h.toFixed(2)} m`;
+    return (_jsxs(PanelWrapper, { icon: "/icons/roof.webp", onBack: node.roofSegmentId ? handleBack : undefined, onClose: handleClose, title: node.name || 'Solar Panel', width: 300, children: [_jsxs(PanelSection, { title: "Preset", children: [_jsx("div", { className: "grid grid-cols-2 gap-1.5 px-1 pt-1", children: PRESET_CARDS.map((card) => {
+                            const dims = SOLAR_PANEL_PRESETS[card.key];
+                            const isSelected = activePreset === card.key;
+                            return (_jsxs("button", { className: cn('flex min-h-14 flex-col items-start gap-0.5 rounded-lg border px-2.5 py-2 text-left text-xs transition-colors', isSelected
+                                    ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
+                                    : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground'), onClick: () => handlePresetChange(card.key), type: "button", children: [_jsxs("span", { className: "flex items-center gap-1.5 font-medium", children: [_jsx(LayoutGrid, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: card.label })] }), _jsx("span", { className: "pl-[20px] text-[10px] tabular-nums opacity-70", children: formatDims(dims.panelWidth, dims.panelHeight) })] }, card.key));
+                        }) }), !activePreset && (_jsx("p", { className: "px-1 pt-1 text-[11px] text-muted-foreground", children: "Custom \u2014 dimensions don't match any preset" }))] }), _jsxs(PanelSection, { title: "Array", children: [_jsx(SliderControl, { label: "Rows", max: 20, min: 1, onChange: (v) => previewProp({ rows: Math.round(v) }), onCommit: (v) => commitProp({ rows: Math.round(v) }), precision: 0, restoreOnCommit: false, step: 1, value: num(node.rows, 4) }), _jsx(SliderControl, { label: "Columns", max: 20, min: 1, onChange: (v) => previewProp({ columns: Math.round(v) }), onCommit: (v) => commitProp({ columns: Math.round(v) }), precision: 0, restoreOnCommit: false, step: 1, value: num(node.columns, 5) }), _jsx(SliderControl, { label: "Gap X", max: 0.2, min: 0, onChange: (v) => previewProp({ gapX: v }), onCommit: (v) => commitProp({ gapX: v }), precision: 3, restoreOnCommit: false, step: 0.005, unit: "m", value: Math.round(num(node.gapX, 0.02) * 1000) / 1000 }), _jsx(SliderControl, { label: "Gap Y", max: 0.2, min: 0, onChange: (v) => previewProp({ gapY: v }), onCommit: (v) => commitProp({ gapY: v }), precision: 3, restoreOnCommit: false, step: 0.005, unit: "m", value: Math.round(num(node.gapY, 0.02) * 1000) / 1000 }), _jsx(ActionGroup, { children: _jsx(ActionButton, { disabled: !segment, label: "Auto-fit to roof", onClick: handleAutoFit }) }), autoFitMessage ? _jsx("p", { className: "px-1 text-amber-400 text-xs", children: autoFitMessage }) : null] }), _jsxs(PanelSection, { title: "Panel", children: [_jsx(SliderControl, { label: "Width", max: 2.5, min: 0.3, onChange: (v) => previewProp({ panelWidth: v }), onCommit: (v) => commitProp({ panelWidth: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(num(node.panelWidth, 1) * 100) / 100 }), _jsx(SliderControl, { label: "Height", max: 3, min: 0.3, onChange: (v) => previewProp({ panelHeight: v }), onCommit: (v) => commitProp({ panelHeight: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(num(node.panelHeight, 1.65) * 100) / 100 }), _jsx(ActionGroup, { children: _jsx(ActionButton, { label: "Flip orientation", onClick: handleFlip }) }), _jsx(SliderControl, { label: "Frame thickness", max: 0.1, min: 0.005, onChange: (v) => previewProp({ frameThickness: v }), onCommit: (v) => commitProp({ frameThickness: v }), precision: 3, restoreOnCommit: false, step: 0.005, unit: "m", value: Math.round(num(node.frameThickness, 0.04) * 1000) / 1000 }), _jsx(SliderControl, { label: "Frame depth", max: 0.1, min: 0.005, onChange: (v) => previewProp({ frameDepth: v }), onCommit: (v) => commitProp({ frameDepth: v }), precision: 3, restoreOnCommit: false, step: 0.005, unit: "m", value: Math.round(num(node.frameDepth, 0.04) * 1000) / 1000 })] }), _jsxs(PanelSection, { title: "Mounting", children: [_jsx(SegmentedControl, { onChange: (v) => handleUpdate({ mountingType: v }), options: [
+                            { label: 'Flush', value: 'flush' },
+                            { label: 'Tilted', value: 'tilted' },
+                        ], value: node.mountingType ?? 'flush' }), node.mountingType === 'tilted' && (_jsx(SliderControl, { label: "Tilt angle", max: 45, min: 0, onChange: (v) => previewProp({ tiltAngle: v }), onCommit: (v) => commitProp({ tiltAngle: v }), precision: 0, restoreOnCommit: false, step: 1, unit: "\u00B0", value: Math.round(num(node.tiltAngle, 15)) })), _jsx(SliderControl, { label: "Standoff", max: 0.3, min: 0, onChange: (v) => previewProp({ standoffHeight: v }), onCommit: (v) => commitProp({ standoffHeight: v }), precision: 3, restoreOnCommit: false, step: 0.005, unit: "m", value: Math.round(num(node.standoffHeight, 0.05) * 1000) / 1000 })] }), _jsx(PanelSection, { title: "Actions", children: _jsx(ActionGroup, { children: _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/solar-panel/parametrics.d.ts

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

package/dist/solar-panel/parametrics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parametrics.d.ts","sourceRoot":"","sources":["../../src/solar-panel/parametrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAE9C,eAAO,MAAM,qBAAqB,EAAE,oBAAoB,CAAC,cAAc,CAmDtE,CAAA"}

package/dist/solar-panel/parametrics.js

@@ -0,0 +1,52 @@
+export const solarPanelParametrics = {
+    // Bespoke panel ported from the archive — preset cards, auto-fit,
+    // and flip orientation can't be expressed by auto-derived groups.
+    // `groups` stays declared so the MCP path keeps a structured view.
+    customPanel: () => import('./panel'),
+    groups: [
+        {
+            label: 'Grid',
+            fields: [
+                { key: 'rows', kind: 'number', min: 1, max: 20, step: 1 },
+                { key: 'columns', kind: 'number', min: 1, max: 20, step: 1 },
+            ],
+        },
+        {
+            label: 'Panel dimensions',
+            fields: [
+                { key: 'panelWidth', kind: 'number', unit: 'm', min: 0.4, max: 2, step: 0.01 },
+                { key: 'panelHeight', kind: 'number', unit: 'm', min: 0.4, max: 2.5, step: 0.01 },
+                { key: 'gapX', kind: 'number', unit: 'm', min: 0, max: 0.2, step: 0.005 },
+                { key: 'gapY', kind: 'number', unit: 'm', min: 0, max: 0.2, step: 0.005 },
+            ],
+        },
+        {
+            label: 'Mounting',
+            fields: [
+                {
+                    key: 'mountingType',
+                    kind: 'enum',
+                    options: ['flush', 'tilted'],
+                    display: 'segmented',
+                },
+                {
+                    key: 'tiltAngle',
+                    kind: 'number',
+                    unit: '°',
+                    min: 0,
+                    max: 45,
+                    step: 1,
+                    visibleIf: (n) => n.mountingType === 'tilted',
+                },
+                { key: 'standoffHeight', kind: 'number', unit: 'm', min: 0, max: 0.3, step: 0.01 },
+            ],
+        },
+        {
+            label: 'Frame',
+            fields: [
+                { key: 'frameThickness', kind: 'number', unit: 'm', min: 0, max: 0.1, step: 0.005 },
+                { key: 'frameDepth', kind: 'number', unit: 'm', min: 0.005, max: 0.1, step: 0.005 },
+            ],
+        },
+    ],
+};

package/dist/solar-panel/preview.d.ts

@@ -0,0 +1,7 @@
+import type { SolarPanelNode } from './schema';
+declare const SolarPanelPreview: ({ node, invalid }: {
+    node: SolarPanelNode;
+    invalid?: boolean;
+}) => import("react").JSX.Element | null;
+export default SolarPanelPreview;
+//# sourceMappingURL=preview.d.ts.map

package/dist/solar-panel/preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/solar-panel/preview.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAsB9C,QAAA,MAAM,iBAAiB,GAAI,mBAAmB;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,uCAgCxF,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/solar-panel/preview.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import * as THREE from 'three';
+import { INVALID_GHOST_COLOR } from '../shared/ghost-materials';
+import { buildSolarPanelGeometry } from './geometry';
+const ghostMaterial = new THREE.MeshStandardMaterial({
+    color: 0xff_ff_ff,
+    emissive: 0xff_ff_ff,
+    emissiveIntensity: 0.1,
+    roughness: 0.5,
+    transparent: true,
+    opacity: 0.5,
+    depthWrite: false,
+});
+const invalidGhostMaterial = new THREE.MeshStandardMaterial({
+    color: INVALID_GHOST_COLOR,
+    emissive: INVALID_GHOST_COLOR,
+    emissiveIntensity: 0.12,
+    roughness: 0.5,
+    transparent: true,
+    opacity: 0.4,
+    depthWrite: false,
+});
+const SolarPanelPreview = ({ node, invalid }) => {
+    const material = invalid ? invalidGhostMaterial : ghostMaterial;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: deps deliberately list the build inputs; depending on the whole object would rebuild on unrelated field changes.
+    const geometry = useMemo(() => buildSolarPanelGeometry(node), [
+        node.rows,
+        node.columns,
+        node.panelWidth,
+        node.panelHeight,
+        node.gapX,
+        node.gapY,
+        node.frameThickness,
+        node.frameDepth,
+        node.standoffHeight,
+    ]);
+    useEffect(() => () => geometry?.dispose(), [geometry]);
+    if (!geometry)
+        return null;
+    return (_jsx("mesh", { geometry: geometry, material: material, raycast: () => {
+            /* preview should not intercept the cursor */
+        } }));
+};
+export default SolarPanelPreview;

package/dist/solar-panel/renderer.d.ts

@@ -0,0 +1,26 @@
+import { type SolarPanelNode } from '@pascal-app/core';
+/**
+ * Solar panel renderer. The panel's Y and surface tilt are derived
+ * live from the parent roof-segment's finished (deck + shingle) surface
+ * on every render via `getRoofOuterSurfaceFrameAtPoint` — the same
+ * authoritative helper skylights use. Deriving rather than reading the
+ * stored `position[1]`/`surfaceNormal` snapshot is what lets the panel
+ * re-seat and re-tilt automatically when the roof's wall height or
+ * pitch changes; a cached snapshot would leave it floating or buried.
+ *
+ * The segment's live overrides are merged too, so the panel tracks the
+ * surface continuously during a wall-height/pitch drag, not just after
+ * the value commits to the scene store.
+ *
+ * The surface orientation is applied as a quaternion on an inner
+ * group computed once per render (not per frame). This matches the
+ * static-transform pattern used by the other roof accessories and
+ * gives up the legacy `useFrame` quaternion smoothing — segment yaw
+ * changes still propagate immediately through the outer `rotation-y`
+ * binding.
+ */
+declare const SolarPanelRenderer: ({ node: storeNode }: {
+    node: SolarPanelNode;
+}) => import("react").JSX.Element | null;
+export default SolarPanelRenderer;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/solar-panel/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/solar-panel/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,EAIpB,MAAM,kBAAkB,CAAA;AAoCzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,kBAAkB,GAAI,qBAAqB;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,uCAqKxE,CAAA;AAED,eAAe,kBAAkB,CAAA"}