@pascal-app/nodes 1.0.3 → 1.0.5

package/dist/door/panel.js

@@ -1,98 +1,22 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DoorNode, useInteractive, useScene } from '@pascal-app/core';
-import { ActionButton, ActionGroup, cn, PanelSection, PanelWrapper, SegmentedControl, SliderControl, ToggleControl, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { scriptImages, useInteractive, useScene, } from '@pascal-app/core';
+import { DOOR_STYLE_LABELS, DOOR_STYLES, doorStyleLook, doorStylesOf, doorTypeChange, } from '@pascal-app/core/building';
+import { ActionButton, ActionGroup, cn, duplicateNodeAndPickUp, PanelSection, PanelWrapper, SegmentedControl, SliderControl, ToggleControl, triggerSFX, useEditor, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 import { Copy, DoorOpen, FlipHorizontal2, Move, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo } from 'react';
-import { constrainCurtainOpening, curtainOpeningLimits } from '../shared/curtain-opening-limits';
-import { createOpeningPropertyPreview } from '../shared/opening-property-preview';
-import { openingPropertyPreviewHost } from '../shared/opening-property-preview-host';
-import { scaleHandleHeight } from './door-math';
-const doorTypeOptions = [
-    { label: 'Hinged', value: 'hinged', available: true },
-    { label: 'Double', value: 'double', available: true },
-    { label: 'French', value: 'french', available: true },
-    { label: 'Folding', value: 'folding', available: true },
-    { label: 'Pocket', value: 'pocket', available: true },
-    { label: 'Barn', value: 'barn', available: true },
-    { label: 'Sliding', value: 'sliding', available: true },
-];
+import { AuthoredParams } from '../item/authored-params.js';
+import { constrainCurtainOpening, curtainOpeningLimits } from '../shared/curtain-opening-limits.js';
+import { createOpeningPropertyPreview } from '../shared/opening-property-preview.js';
+import { openingPropertyPreviewHost } from '../shared/opening-property-preview-host.js';
+import { scaleHandleHeight } from './door-math.js';
+import { doorTypeOptions } from './placement.js';
 const garageDoorTypeOptions = [
     { label: 'Sectional', value: 'garage-sectional', available: true },
     { label: 'Roll-up', value: 'garage-rollup', available: true },
     { label: 'Tilt-up', value: 'garage-tiltup', available: true },
 ];
-const frenchDoorSegments = [
-    {
-        type: 'glass',
-        heightRatio: 0.76,
-        columnRatios: [1, 1],
-        dividerThickness: 0.025,
-        panelDepth: 0.01,
-        panelInset: 0.04,
-    },
-    {
-        type: 'panel',
-        heightRatio: 0.24,
-        columnRatios: [1],
-        dividerThickness: 0.03,
-        panelDepth: 0.012,
-        panelInset: 0.035,
-    },
-];
-const foldingDoorSegments = [
-    {
-        type: 'panel',
-        heightRatio: 1,
-        columnRatios: [1],
-        dividerThickness: 0.02,
-        panelDepth: 0.008,
-        panelInset: 0.025,
-    },
-];
-const hingedDoorSegments = [
-    {
-        type: 'panel',
-        heightRatio: 0.4,
-        columnRatios: [1],
-        dividerThickness: 0.03,
-        panelDepth: 0.01,
-        panelInset: 0.04,
-    },
-    {
-        type: 'panel',
-        heightRatio: 0.6,
-        columnRatios: [1],
-        dividerThickness: 0.03,
-        panelDepth: 0.01,
-        panelInset: 0.04,
-    },
-];
-const defaultDoorDimensions = {
-    hinged: { width: 0.9, height: 2.1 },
-    double: { width: 1.5, height: 2.1 },
-    french: { width: 1.5, height: 2.1 },
-    folding: { width: 1.8, height: 2.1 },
-    pocket: { width: 0.9, height: 2.1 },
-    barn: { width: 1, height: 2.1 },
-    sliding: { width: 1.5, height: 2.1 },
-    'garage-sectional': { width: 2.7, height: 2.4 },
-    'garage-rollup': { width: 2.7, height: 2.4 },
-    'garage-tiltup': { width: 2.7, height: 2.4 },
-};
-const defaultDoorSegmentsByType = {
-    hinged: hingedDoorSegments,
-    double: hingedDoorSegments,
-    french: frenchDoorSegments,
-    folding: foldingDoorSegments,
-    pocket: foldingDoorSegments,
-    barn: foldingDoorSegments,
-    sliding: frenchDoorSegments,
-    'garage-sectional': foldingDoorSegments,
-    'garage-rollup': foldingDoorSegments,
-    'garage-tiltup': foldingDoorSegments,
-};
 function isSameDoorValue(current, next) {
     if (typeof current === 'number' && typeof next === 'number') {
         return Math.abs(current - next) < 1e-6;
@@ -113,8 +37,8 @@ export default function DoorPanel() {
         : null, [selectedId]);
     useEffect(() => () => preview?.cancel(), [preview]);
     const node = useScene((s) => selectedId ? s.nodes[selectedId] : undefined);
-    // Panel slider-drag fix recipe (plans/editor-node-registry.md). Without
-    // it, the 29+ SliderControls in this panel would loop on drag.
+    // Stable handler refs ("Custom panels" in wiki/architecture/node-definitions.md).
+    // Without them, the 29+ SliderControls in this panel would loop on drag.
     const handleUpdate = useCallback((updates) => {
         if (!selectedId)
             return;
@@ -167,19 +91,9 @@ export default function DoorPanel() {
         setSelection({ selectedIds: [] });
     }, [selectedId, node, deleteNode, setSelection]);
     const handleDuplicate = useCallback(() => {
-        if (!node?.parentId)
-            return;
-        triggerSFX('sfx:item-pick');
-        useScene.temporal.getState().pause();
-        const cloned = structuredClone(node);
-        delete cloned.id;
-        delete cloned.mark;
-        cloned.metadata = { ...cloned.metadata, isNew: true };
-        const duplicate = DoorNode.parse(cloned);
-        useScene.getState().createNode(duplicate, node.parentId);
-        setMovingNode(duplicate);
-        setSelection({ selectedIds: [] });
-    }, [node, setMovingNode, setSelection]);
+        if (node)
+            duplicateNodeAndPickUp(node);
+    }, [node]);
     const setSegmentHeightRatio = (segIdx, newVal) => {
         if (!node)
             return;
@@ -234,6 +148,8 @@ export default function DoorPanel() {
     const hSum = node.segments.reduce((s, seg) => s + seg.heightRatio, 0);
     const normHeights = node.segments.map((seg) => seg.heightRatio / hSum);
     const isOpening = node.openingKind === 'opening';
+    // Built from a script: its params replace the parametric leaf's fields, as on an authored item.
+    const scripted = Boolean(node.source);
     const openingShape = node.openingShape ?? 'rectangle';
     const doorShape = openingShape === 'arch' || openingShape === 'rounded' ? openingShape : 'rectangle';
     const openingRadiusMode = node.openingRadiusMode ?? 'all';
@@ -244,6 +160,7 @@ export default function DoorPanel() {
     const maxRoundedRadius = Math.max(0.01, Math.min(node.width / 2, node.height));
     const doorType = node.doorType ?? 'hinged';
     const isGarageDoor = node.doorCategory === 'garage' || doorType.startsWith('garage-');
+    const doorStyles = doorStylesOf(node);
     const isSwingDoor = doorType === 'hinged' || doorType === 'double' || doorType === 'french';
     const isSlideFoldDoor = doorType === 'folding' || doorType === 'pocket' || doorType === 'barn' || doorType === 'sliding';
     const isSlidingDoor = doorType === 'pocket' || doorType === 'barn' || doorType === 'sliding';
@@ -257,18 +174,20 @@ export default function DoorPanel() {
     const supportsHandleSide = doorType === 'hinged';
     const supportsTopShape = isSwingDoor;
     const showFlipSide = !isCutoutOnly;
-    const showFoldSection = isFoldingDoor && !isCutoutOnly;
-    const showSlideSection = isSlidingDoor && !isCutoutOnly;
-    const showGarageSection = (isSectionalGarageDoor || isRollupGarageDoor || isTiltupGarageDoor) && !isCutoutOnly;
-    const showOpeningShapeSection = isCutoutOnly;
-    const showDoorShapeSection = !isCutoutOnly && supportsTopShape;
-    const showFrameSection = !isCutoutOnly;
-    const showContentPaddingSection = !isCutoutOnly && !isGarageDoor;
-    const showSwingSection = isSwingDoor;
-    const showThresholdSection = isSwingDoor;
-    const showHandleSection = isSwingDoor;
-    const showHardwareSection = isSwingDoor;
-    const showSegmentsSection = !isCutoutOnly && !isGarageDoor;
+    const showFoldSection = !scripted && isFoldingDoor && !isCutoutOnly;
+    const showSlideSection = !scripted && isSlidingDoor && !isCutoutOnly;
+    const showGarageSection = !scripted &&
+        (isSectionalGarageDoor || isRollupGarageDoor || isTiltupGarageDoor) &&
+        !isCutoutOnly;
+    const showOpeningShapeSection = !scripted && isCutoutOnly;
+    const showDoorShapeSection = !scripted && !isCutoutOnly && supportsTopShape;
+    const showFrameSection = !scripted && !isCutoutOnly;
+    const showContentPaddingSection = !scripted && !isCutoutOnly && !isGarageDoor;
+    const showSwingSection = !scripted && isSwingDoor;
+    const showThresholdSection = !scripted && isSwingDoor;
+    const showHandleSection = !scripted && isSwingDoor;
+    const showHardwareSection = !scripted && isSwingDoor;
+    const showSegmentsSection = !scripted && !isCutoutOnly && !isGarageDoor;
     const maxDoorWidth = isGarageDoor ? 6 : 3;
     const setOpeningTopRadius = (index, value, commit = false) => {
         const next = [...openingTopRadii];
@@ -280,154 +199,8 @@ export default function DoorPanel() {
             previewDoorUpdate('openingTopRadii', next);
         }
     };
-    const getDoorTypeUpdates = (nextDoorType) => {
-        const dimensions = defaultDoorDimensions[nextDoorType];
-        const segments = structuredClone(defaultDoorSegmentsByType[nextDoorType]);
-        const dimensionUpdates = {
-            width: dimensions.width,
-            height: dimensions.height,
-            position: [node.position[0], dimensions.height / 2, node.position[2]],
-        };
-        if (nextDoorType === 'double' || nextDoorType === 'french') {
-            return {
-                doorCategory: 'interior',
-                doorType: nextDoorType,
-                leafCount: 2,
-                ...dimensionUpdates,
-                handleSide: 'right',
-                segments,
-                ...(nextDoorType === 'french'
-                    ? {
-                        contentPadding: [0.045, 0.055],
-                    }
-                    : {}),
-            };
-        }
-        if (nextDoorType === 'folding') {
-            return {
-                doorCategory: 'interior',
-                doorType: nextDoorType,
-                leafCount: 4,
-                ...dimensionUpdates,
-                openingShape: 'rectangle',
-                handle: true,
-                handleSide: 'right',
-                trackStyle: 'visible',
-                operationState: Math.max(node.operationState ?? 0, 0.65),
-                threshold: false,
-                contentPadding: [0.03, 0.04],
-                segments,
-            };
-        }
-        if (nextDoorType === 'pocket') {
-            return {
-                doorCategory: 'interior',
-                doorType: nextDoorType,
-                leafCount: 1,
-                ...dimensionUpdates,
-                openingShape: 'rectangle',
-                handle: true,
-                handleSide: 'right',
-                trackStyle: 'pocket',
-                slideDirection: node.slideDirection ?? 'left',
-                operationState: node.operationState ?? 0,
-                threshold: false,
-                contentPadding: [0.035, 0.045],
-                segments,
-            };
-        }
-        if (nextDoorType === 'barn') {
-            return {
-                doorCategory: 'interior',
-                doorType: nextDoorType,
-                leafCount: 1,
-                ...dimensionUpdates,
-                openingShape: 'rectangle',
-                handle: true,
-                handleSide: 'right',
-                trackStyle: 'visible',
-                slideDirection: node.slideDirection ?? 'left',
-                operationState: node.operationState ?? 0,
-                threshold: false,
-                contentPadding: [0.035, 0.045],
-                segments,
-            };
-        }
-        if (nextDoorType === 'sliding') {
-            return {
-                doorCategory: 'interior',
-                doorType: nextDoorType,
-                leafCount: 2,
-                ...dimensionUpdates,
-                openingShape: 'rectangle',
-                handle: true,
-                handleSide: 'right',
-                trackStyle: 'visible',
-                slideDirection: node.slideDirection ?? 'left',
-                operationState: node.operationState ?? 0,
-                threshold: false,
-                contentPadding: [0.03, 0.04],
-                segments,
-            };
-        }
-        if (nextDoorType === 'garage-sectional') {
-            return {
-                doorCategory: 'garage',
-                doorType: nextDoorType,
-                leafCount: 1,
-                ...dimensionUpdates,
-                handle: false,
-                threshold: false,
-                openingShape: 'rectangle',
-                trackStyle: 'overhead',
-                operationState: 0,
-                garagePanelCount: Math.max(3, Math.min(8, node.garagePanelCount ?? 4)),
-                contentPadding: [0.04, 0.04],
-                segments,
-            };
-        }
-        if (nextDoorType === 'garage-rollup') {
-            return {
-                doorCategory: 'garage',
-                doorType: nextDoorType,
-                leafCount: 1,
-                ...dimensionUpdates,
-                handle: false,
-                threshold: false,
-                openingShape: 'rectangle',
-                trackStyle: 'overhead',
-                operationState: 0,
-                garagePanelCount: 4,
-                contentPadding: [0.04, 0.04],
-                segments,
-            };
-        }
-        if (nextDoorType === 'garage-tiltup') {
-            return {
-                doorCategory: 'garage',
-                doorType: nextDoorType,
-                leafCount: 1,
-                ...dimensionUpdates,
-                handle: false,
-                threshold: false,
-                openingShape: 'rectangle',
-                trackStyle: 'overhead',
-                operationState: 0,
-                garagePanelCount: 4,
-                contentPadding: [0.04, 0.04],
-                segments,
-            };
-        }
-        return {
-            doorCategory: 'interior',
-            doorType: nextDoorType,
-            leafCount: 1,
-            ...dimensionUpdates,
-            segments,
-            threshold: true,
-        };
-    };
-    return (_jsxs(PanelWrapper, { icon: "/icons/door.webp", onClose: handleClose, title: node.name || 'Door', width: 320, children: [_jsxs(PanelSection, { title: "Type", children: [_jsx("div", { className: "flex flex-col gap-2 px-1 pb-1", children: _jsx(SegmentedControl, { onChange: (v) => handleUpdate(v === 'opening'
+    const getDoorTypeUpdates = (nextDoorType) => doorTypeChange(node, nextDoorType);
+    return (_jsxs(PanelWrapper, { icon: scriptImages(node)?.thumbnail ?? '/icons/door.webp', onClose: handleClose, title: node.name || 'Door', width: 320, children: [!scripted && (_jsxs(PanelSection, { title: "Type", children: [_jsx("div", { className: "flex flex-col gap-2 px-1 pb-1", children: _jsx(SegmentedControl, { onChange: (v) => handleUpdate(v === 'opening'
                                 ? {
                                     openingKind: v,
                                     openingShape,
@@ -453,15 +226,17 @@ export default function DoorPanel() {
                             const isSelected = doorType === option.value;
                             return (_jsxs("button", { className: cn('flex min-h-12 items-center gap-2.5 rounded-lg border px-3 py-2.5 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', !option.available &&
-                                    'cursor-not-allowed opacity-45 hover:bg-[#2C2C2E] hover:text-muted-foreground'), disabled: !option.available, onClick: () => handleUpdate(getDoorTypeUpdates(option.value)), type: "button", children: [_jsx(DoorOpen, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate font-medium", children: option.label })] }, option.value));
-                        }) }))] }), _jsxs(PanelSection, { title: "Position", children: [_jsx(SliderControl, { label: _jsxs(_Fragment, { children: ["X", _jsx("sub", { className: "ml-[1px] text-[11px] opacity-70", children: "wall" })] }), max: 10, min: -10, onChange: (v) => handleUpdate({ position: [v, node.position[1], node.position[2]] }), precision: 2, step: 0.1, unit: "m", value: node.position[0] }), showFlipSide && (_jsx("div", { className: "px-1 pt-2 pb-1", children: _jsx(ActionButton, { className: "w-full", icon: _jsx(FlipHorizontal2, { className: "h-4 w-4" }), label: "Flip Side", onClick: handleFlip }) }))] }), showFoldSection && (_jsxs(PanelSection, { title: "Fold", children: [_jsx("div", { className: "flex flex-col gap-2 px-1 pb-1", children: _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: "Panels" }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ leafCount: v === '2' ? 2 : 4 }), options: [
+                                    : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground', !option.available &&
+                                    'cursor-not-allowed opacity-45 hover:bg-black/4 dark:hover:bg-[#2C2C2E] hover:text-muted-foreground'), disabled: !option.available, onClick: () => handleUpdate(getDoorTypeUpdates(option.value)), type: "button", children: [_jsx(DoorOpen, { className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate font-medium", children: option.label })] }, option.value));
+                        }) }))] })), !scripted && !isOpening && !isGarageDoor && (_jsxs(PanelSection, { title: "Style", children: [_jsx("div", { className: "grid grid-cols-2 gap-2 px-1 pt-1", children: DOOR_STYLES.map((style) => (_jsx("button", { "aria-pressed": doorStyles.includes(style), className: cn('flex min-h-10 items-center rounded-lg border px-3 py-2 text-left text-xs transition-colors', doorStyles.includes(style)
+                                ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
+                                : 'border-border/50 bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground'), onClick: () => handleUpdate(doorStyleLook(style)), type: "button", children: _jsx("span", { className: "truncate font-medium", children: DOOR_STYLE_LABELS[style] }) }, style))) }), !doorStyles.length && (_jsx("p", { className: "px-1 pt-2 text-muted-foreground text-xs", children: "Custom: the segments match no style." }))] })), _jsxs(PanelSection, { title: "Position", children: [_jsx(SliderControl, { label: _jsxs(_Fragment, { children: ["X", _jsx("sub", { className: "ml-[1px] text-[11px] opacity-70", children: "wall" })] }), max: 10, min: -10, onChange: (v) => handleUpdate({ position: [v, node.position[1], node.position[2]] }), precision: 2, step: 0.1, unit: "m", value: node.position[0] }), showFlipSide && (_jsx("div", { className: "px-1 pt-2 pb-1", children: _jsx(ActionButton, { className: "w-full", icon: _jsx(FlipHorizontal2, { className: "h-4 w-4" }), label: "Flip Side", onClick: handleFlip }) }))] }), showFoldSection && (_jsxs(PanelSection, { title: "Fold", children: [_jsx("div", { className: "flex flex-col gap-2 px-1 pb-1", children: _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: "Panels" }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ leafCount: v === '2' ? 2 : 4 }), options: [
                                         { label: '2', value: '2' },
                                         { label: '4', value: '4' },
                                     ], value: node.leafCount === 2 ? '2' : '4' })] }) }), _jsx(SliderControl, { label: "Open", max: 100, min: 0, onChange: (v) => handleUpdate({ operationState: v / 100 }), precision: 0, restoreOnCommit: false, step: 5, unit: "%", value: Math.round((node.operationState ?? 0) * 100) })] })), showSlideSection && (_jsxs(PanelSection, { title: "Slide", children: [_jsx("div", { className: "flex flex-col gap-2 px-1 pb-1", children: _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: doorType === 'pocket' ? 'Pocket' : doorType === 'barn' ? 'Rail' : 'Panel' }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ slideDirection: v }), options: [
                                         { label: 'Left', value: 'left' },
                                         { label: 'Right', value: 'right' },
-                                    ], value: node.slideDirection ?? 'left' })] }) }), _jsx(SliderControl, { label: "Open", max: 100, min: 0, onChange: (v) => handleUpdate({ operationState: v / 100 }), precision: 0, restoreOnCommit: false, step: 5, unit: "%", value: Math.round((node.operationState ?? 0) * 100) })] })), showGarageSection && (_jsxs(PanelSection, { title: "Garage", children: [_jsx(SliderControl, { label: "Open", max: 100, min: 0, onChange: (v) => handleUpdate({ operationState: v / 100 }), precision: 0, restoreOnCommit: false, step: 5, unit: "%", value: Math.round((node.operationState ?? 0) * 100) }), isSectionalGarageDoor && (_jsx(SliderControl, { label: "Panels", max: 8, min: 3, onChange: (v) => handleUpdate({ garagePanelCount: Math.round(v) }), precision: 0, restoreOnCommit: false, step: 1, value: node.garagePanelCount ?? 4 }))] })), _jsxs(PanelSection, { title: "Dimensions", children: [limits && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: "Size is limited to the wall, including clearance for the opening frame." })), _jsx(SliderControl, { label: "Width", max: Math.min(maxDoorWidth, limits?.width ?? Infinity), min: Math.min(0.5, limits?.width ?? 0.5), onChange: (v) => previewDoorUpdate('width', v), onCommit: (v) => commitDoorPreview('width', v), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.01, unit: "m", value: node.width }), _jsx(SliderControl, { label: "Height", max: limits?.height ?? 1000, min: Math.min(1, limits?.height ?? 1), onChange: (v) => preview?.preview(heightUpdates(v)), onCommit: (v) => preview?.commit(heightUpdates(v)), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.01, unit: "m", value: node.height })] }), showDoorShapeSection && (_jsxs(PanelSection, { title: "Top Shape", children: [_jsx("div", { className: "flex flex-col gap-2 px-1 pb-1", children: _jsx(SegmentedControl, { onChange: (v) => handleUpdate({
+                                    ], value: node.slideDirection ?? 'left' })] }) }), _jsx(SliderControl, { label: "Open", max: 100, min: 0, onChange: (v) => handleUpdate({ operationState: v / 100 }), precision: 0, restoreOnCommit: false, step: 5, unit: "%", value: Math.round((node.operationState ?? 0) * 100) })] })), showGarageSection && (_jsxs(PanelSection, { title: "Garage", children: [_jsx(SliderControl, { label: "Open", max: 100, min: 0, onChange: (v) => handleUpdate({ operationState: v / 100 }), precision: 0, restoreOnCommit: false, step: 5, unit: "%", value: Math.round((node.operationState ?? 0) * 100) }), isSectionalGarageDoor && (_jsx(SliderControl, { label: "Panels", max: 8, min: 3, onChange: (v) => handleUpdate({ garagePanelCount: Math.round(v) }), precision: 0, restoreOnCommit: false, step: 1, value: node.garagePanelCount ?? 4 }))] })), scripted && _jsx(AuthoredParams, { node: node }), !scripted && (_jsxs(PanelSection, { title: "Dimensions", children: [limits && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: "Size is limited to the wall, including clearance for the opening frame." })), _jsx(SliderControl, { label: "Width", max: Math.min(maxDoorWidth, limits?.width ?? Infinity), min: Math.min(0.5, limits?.width ?? 0.5), onChange: (v) => previewDoorUpdate('width', v), onCommit: (v) => commitDoorPreview('width', v), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.01, unit: "m", value: node.width }), _jsx(SliderControl, { label: "Height", max: limits?.height ?? 1000, min: Math.min(1, limits?.height ?? 1), onChange: (v) => preview?.preview(heightUpdates(v)), onCommit: (v) => preview?.commit(heightUpdates(v)), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.01, unit: "m", value: node.height })] })), showDoorShapeSection && (_jsxs(PanelSection, { title: "Top Shape", children: [_jsx("div", { className: "flex flex-col gap-2 px-1 pb-1", children: _jsx(SegmentedControl, { onChange: (v) => handleUpdate({
                                 openingShape: v,
                                 ...(v === 'rounded'
                                     ? {
@@ -498,7 +273,7 @@ export default function DoorPanel() {
                                     ], value: openingRadiusMode }) }), openingRadiusMode === 'all' ? (_jsx(SliderControl, { label: "Corner Radius", max: maxRoundedRadius, min: 0, onChange: (v) => previewDoorUpdate('cornerRadius', v), onCommit: (v) => commitDoorPreview('cornerRadius', v), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 2, step: 0.05, unit: "m", value: cornerRadius })) : (_jsx(_Fragment, { children: [
                                     ['Top Left', 0],
                                     ['Top Right', 1],
-                                ].map(([label, index]) => (_jsx(SliderControl, { label: label, max: maxRoundedRadius, min: 0, onChange: (v) => setOpeningTopRadius(index, v), onCommit: (v) => setOpeningTopRadius(index, v, true), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 2, step: 0.05, unit: "m", value: openingTopRadii[index] ?? 0 }, label))) })), _jsx(SliderControl, { label: "Reveal Radius", max: 0.08, min: 0, onChange: (v) => previewDoorUpdate('openingRevealRadius', v), onCommit: (v) => commitDoorPreview('openingRevealRadius', v), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 3, step: 0.005, unit: "m", value: openingRevealRadius })] })), openingShape === 'arch' && (_jsx(SliderControl, { label: "Arch Height", max: node.height, min: 0.05, onChange: (v) => previewDoorUpdate('archHeight', v), onCommit: (v) => commitDoorPreview('archHeight', v), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: archHeight }))] })), !isCutoutOnly && (_jsxs(_Fragment, { children: [showFrameSection && (_jsxs(PanelSection, { title: "Frame", children: [_jsx(SliderControl, { label: "Thickness", max: 0.2, min: 0.01, onChange: (v) => handleUpdate({ frameThickness: v }), precision: 3, step: 0.01, unit: "m", value: node.frameThickness }), _jsx(SliderControl, { label: "Depth", max: 0.3, min: 0.01, onChange: (v) => handleUpdate({ frameDepth: v }), precision: 3, step: 0.01, unit: "m", value: node.frameDepth })] })), showContentPaddingSection && (_jsxs(PanelSection, { title: "Content Padding", children: [_jsx(SliderControl, { label: "Horizontal", max: 0.2, min: 0, onChange: (v) => handleUpdate({ contentPadding: [v, node.contentPadding[1]] }), precision: 3, step: 0.005, unit: "m", value: node.contentPadding[0] }), _jsx(SliderControl, { label: "Vertical", max: 0.2, min: 0, onChange: (v) => handleUpdate({ contentPadding: [node.contentPadding[0], v] }), precision: 3, step: 0.005, unit: "m", value: node.contentPadding[1] })] })), showSwingSection && (_jsx(PanelSection, { title: "Swing", children: _jsxs("div", { className: "flex flex-col gap-2 px-1 pb-1", children: [supportsHingeSide && (_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: "Hinges Side" }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ hingesSide: v }), options: [
+                                ].map(([label, index]) => (_jsx(SliderControl, { label: label, max: maxRoundedRadius, min: 0, onChange: (v) => setOpeningTopRadius(index, v), onCommit: (v) => setOpeningTopRadius(index, v, true), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 2, step: 0.05, unit: "m", value: openingTopRadii[index] ?? 0 }, label))) })), _jsx(SliderControl, { label: "Reveal Radius", max: 0.08, min: 0, onChange: (v) => previewDoorUpdate('openingRevealRadius', v), onCommit: (v) => commitDoorPreview('openingRevealRadius', v), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 3, step: 0.005, unit: "m", value: openingRevealRadius })] })), openingShape === 'arch' && (_jsx(SliderControl, { label: "Arch Height", max: node.height, min: 0.05, onChange: (v) => previewDoorUpdate('archHeight', v), onCommit: (v) => commitDoorPreview('archHeight', v), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: archHeight }))] })), !isCutoutOnly && !scripted && (_jsxs(_Fragment, { children: [showFrameSection && (_jsxs(PanelSection, { title: "Frame", children: [_jsx(SliderControl, { label: "Thickness", max: 0.2, min: 0.01, onChange: (v) => handleUpdate({ frameThickness: v }), precision: 3, step: 0.01, unit: "m", value: node.frameThickness }), _jsx(SliderControl, { label: "Depth", max: 0.3, min: 0.01, onChange: (v) => handleUpdate({ frameDepth: v }), precision: 3, step: 0.01, unit: "m", value: node.frameDepth })] })), showContentPaddingSection && (_jsxs(PanelSection, { title: "Content Padding", children: [_jsx(SliderControl, { label: "Horizontal", max: 0.2, min: 0, onChange: (v) => handleUpdate({ contentPadding: [v, node.contentPadding[1]] }), precision: 3, step: 0.005, unit: "m", value: node.contentPadding[0] }), _jsx(SliderControl, { label: "Vertical", max: 0.2, min: 0, onChange: (v) => handleUpdate({ contentPadding: [node.contentPadding[0], v] }), precision: 3, step: 0.005, unit: "m", value: node.contentPadding[1] })] })), showSwingSection && (_jsx(PanelSection, { title: "Swing", children: _jsxs("div", { className: "flex flex-col gap-2 px-1 pb-1", children: [supportsHingeSide && (_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: "Hinges Side" }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ hingesSide: v }), options: [
                                                 { label: 'Left', value: 'left' },
                                                 { label: 'Right', value: 'right' },
                                             ], value: node.hingesSide })] })), _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: "Direction" }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ swingDirection: v }), options: [
@@ -511,7 +286,7 @@ export default function DoorPanel() {
                                 const numCols = seg.columnRatios.length;
                                 const colSum = seg.columnRatios.reduce((a, b) => a + b, 0);
                                 const normCols = seg.columnRatios.map((r) => r / colSum);
-                                return (_jsxs("div", { className: "mb-2 flex flex-col gap-1", children: [_jsx("div", { className: "flex items-center justify-between pb-1", children: _jsxs("span", { className: "font-medium text-white/80 text-xs", children: ["Segment ", i + 1] }) }), _jsx(SegmentedControl, { onChange: (t) => {
+                                return (_jsxs("div", { className: "mb-2 flex flex-col gap-1", children: [_jsx("div", { className: "flex items-center justify-between pb-1", children: _jsxs("span", { className: "font-medium text-foreground/80 dark:text-white/80 text-xs", children: ["Segment ", i + 1] }) }), _jsx(SegmentedControl, { onChange: (t) => {
                                                 const updated = node.segments.map((s, idx) => idx === i ? { ...s, type: t } : s);
                                                 handleUpdate({ segments: updated });
                                             }, options: [
@@ -545,5 +320,5 @@ export default function DoorPanel() {
                                                 },
                                             ];
                                             handleUpdate({ segments: updated });
-                                        } }), node.segments.length > 1 && (_jsx(ActionButton, { className: "text-white/60 hover:text-white", label: "- Remove", onClick: () => handleUpdate({ segments: node.segments.slice(0, -1) }) }))] })] }))] })), _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 })] }) })] }));
+                                        } }), node.segments.length > 1 && (_jsx(ActionButton, { className: "text-foreground/60 hover:text-foreground dark:text-white/60 dark:hover:text-white", label: "- Remove", onClick: () => handleUpdate({ segments: node.segments.slice(0, -1) }) }))] })] }))] })), _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-600 dark:text-red-400" }), label: "Delete", onClick: handleDelete })] }) })] }));
 }

package/dist/door/parametrics.d.ts

@@ -1,5 +1,5 @@
 import type { ParametricDescriptor } from '@pascal-app/core';
-import type { DoorNode } from './schema';
+import type { DoorNode } from './schema.js';
 /**
  * Stage E inspector for door. Mounts the kind-owned panel
  * (`panel.tsx`) via `customPanel` — door has 29+ controls (segments,

package/dist/door/parametrics.js

@@ -23,5 +23,5 @@ export const doorParametrics = {
             ],
         },
     ],
-    customPanel: () => import('./panel'),
+    customPanel: () => import('./panel.js'),
 };

package/dist/door/placement.d.ts

@@ -0,0 +1,45 @@
+import type { DoorNode, ToolHint } from '@pascal-app/core';
+import { type DoorStyle } from '@pascal-app/core/building';
+/** The door panel's Type row and the tool's Type chip (garage types live under the panel's Garage). */
+export declare const doorTypeOptions: ({
+    label: string;
+    value: "hinged";
+    available: true;
+} | {
+    label: string;
+    value: "double";
+    available: true;
+} | {
+    label: string;
+    value: "french";
+    available: true;
+} | {
+    label: string;
+    value: "folding";
+    available: true;
+} | {
+    label: string;
+    value: "pocket";
+    available: true;
+} | {
+    label: string;
+    value: "barn";
+    available: true;
+} | {
+    label: string;
+    value: "sliding";
+    available: true;
+})[];
+type PlacedDoorType = (typeof doorTypeOptions)[number]['value'];
+type DoorPlacementState = {
+    type: PlacedDoorType;
+    style: DoorStyle;
+    cycleType(): void;
+    cycleStyle(): void;
+};
+export declare const useDoorPlacement: import("zustand").UseBoundStore<import("zustand").StoreApi<DoorPlacementState>>;
+/** The door the tool places: the chips' type and style, written as add_door and the panel write them. */
+export declare function placedDoorFields(): Partial<DoorNode>;
+export declare const DOOR_PLACEMENT_HINTS: ToolHint[];
+export {};
+//# sourceMappingURL=placement.d.ts.map

package/dist/door/placement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.d.ts","sourceRoot":"","sources":["../../src/door/placement.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAIL,KAAK,SAAS,EAGf,MAAM,2BAA2B,CAAA;AAGlC,uGAAuG;AACvG,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAYzB,CAAA;AAEH,KAAK,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAE/D,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,cAAc,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB,SAAS,IAAI,IAAI,CAAA;IACjB,UAAU,IAAI,IAAI,CAAA;CACnB,CAAA;AAID,eAAO,MAAM,gBAAgB,iFAW1B,CAAA;AAEH,yGAAyG;AACzG,wBAAgB,gBAAgB,IAAI,OAAO,CAAC,QAAQ,CAAC,CAGpD;AAED,eAAO,MAAM,oBAAoB,EAAE,QAAQ,EA2B1C,CAAA"}

package/dist/door/placement.js

@@ -0,0 +1,51 @@
+// The door tool's placement choices: the chips [O] Type and [L] Style.
+import { DOOR_STYLE_LABELS, DOOR_STYLES, DOOR_TYPE_SIZES, doorStyleLook, doorTypeFields, } from '@pascal-app/core/building';
+import { create } from 'zustand';
+/** The door panel's Type row and the tool's Type chip (garage types live under the panel's Garage). */
+export const doorTypeOptions = [
+    { label: 'Hinged', value: 'hinged', available: true },
+    { label: 'Double', value: 'double', available: true },
+    { label: 'French', value: 'french', available: true },
+    { label: 'Folding', value: 'folding', available: true },
+    { label: 'Pocket', value: 'pocket', available: true },
+    { label: 'Barn', value: 'barn', available: true },
+    { label: 'Sliding', value: 'sliding', available: true },
+];
+const next = (list, value) => list[(list.indexOf(value) + 1) % list.length];
+export const useDoorPlacement = create((set, get) => ({
+    type: 'hinged',
+    style: 'panel',
+    cycleType: () => set({
+        type: next(doorTypeOptions.map((option) => option.value), get().type),
+    }),
+    cycleStyle: () => set({ style: next(DOOR_STYLES, get().style) }),
+}));
+/** The door the tool places: the chips' type and style, written as add_door and the panel write them. */
+export function placedDoorFields() {
+    const { type, style } = useDoorPlacement.getState();
+    return { ...doorTypeFields(type), ...DOOR_TYPE_SIZES[type], ...doorStyleLook(style) };
+}
+export const DOOR_PLACEMENT_HINTS = [
+    {
+        key: 'O',
+        label: 'Type',
+        chip: {
+            subscribe: (onChange) => useDoorPlacement.subscribe(onChange),
+            value: () => useDoorPlacement.getState().type,
+            cycle: () => useDoorPlacement.getState().cycleType(),
+            labels: Object.fromEntries(doorTypeOptions.map((option) => [option.value, `Type: ${option.label}`])),
+            tooltip: 'Door type — click or press O to cycle',
+        },
+    },
+    {
+        key: 'L',
+        label: 'Style',
+        chip: {
+            subscribe: (onChange) => useDoorPlacement.subscribe(onChange),
+            value: () => useDoorPlacement.getState().style,
+            cycle: () => useDoorPlacement.getState().cycleStyle(),
+            labels: Object.fromEntries(DOOR_STYLES.map((style) => [style, `Style: ${DOOR_STYLE_LABELS[style]}`])),
+            tooltip: 'Door style — click or press L to cycle',
+        },
+    },
+];

package/dist/door/preview.d.ts

@@ -1,4 +1,4 @@
-import type { DoorNode } from './schema';
+import type { DoorNode } from './schema.js';
 /**
  * Translucent preview of a door — used by the placement tool's floating ghost.
  *

package/dist/door/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/door/preview.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAExC;;;;;;;;;GASG;AACH,QAAA,MAAM,WAAW,GAAI,2BAIlB;IACD,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,gCAwBA,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/door/preview.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAExC;;;;;;;;;GASG;AACH,QAAA,MAAM,WAAW,8BAId;IACD,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,gCA0BA,CAAA;eAEc,WAAW"}

package/dist/door/preview.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { EDITOR_LAYER } from '@pascal-app/editor';
 import { buildDoorPreviewMesh } from '@pascal-app/viewer';
 import { useEffect, useMemo } from 'react';
-import { applyGhost } from '../shared/ghost-materials';
+import { applyGhost } from '../shared/ghost-materials.js';
 /**
  * Translucent preview of a door — used by the placement tool's floating ghost.
  *
@@ -17,6 +17,8 @@ import { applyGhost } from '../shared/ghost-materials';
 const DoorPreview = ({ node, invalid, valid, }) => {
     const mesh = useMemo(() => {
         const m = buildDoorPreviewMesh(node);
+        // The placement parent already applies the body offset; keep host context for depth.
+        m.position.z = node.position[2];
         m.layers.set(EDITOR_LAYER);
         return m;
     }, [node]);

package/dist/door/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/door/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,QAAQ,EAA+C,MAAM,kBAAkB,CAAA;AAQ7F,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,gCAmCxD,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/door/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,QAAQ,EAA+C,MAAM,kBAAkB,CAAA;AAS7F,eAAO,MAAM,YAAY,aAAc;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,gCAoCxD,CAAA;eAEc,YAAY"}

package/dist/door/renderer.js

@@ -1,10 +1,11 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLiveNodeOverrides, useRegistry, useScene } from '@pascal-app/core';
 import { useNodeEvents } from '@pascal-app/viewer';
 import { useLayoutEffect, useRef } from 'react';
 import { MeshBasicMaterial } from 'three';
-import { RoofFaceHostFrame } from '../shared/roof-face-host';
+import { RoofFaceHostFrame } from '../shared/roof-face-host.js';
+import { ScriptedOpeningModel } from '../shared/scripted-opening.js';
 const doorHitboxMaterial = new MeshBasicMaterial({ visible: false });
 export const DoorRenderer = ({ node }) => {
     const ref = useRef(null);
@@ -18,7 +19,7 @@ export const DoorRenderer = ({ node }) => {
         return typeof visible === 'boolean' ? visible : undefined;
     });
     const isTransient = !!node.metadata?.isTransient;
-    const mesh = (_jsx("mesh", { castShadow: true, material: doorHitboxMaterial, position: node.position, receiveShadow: true, ref: ref, rotation: node.rotation, visible: liveVisible ?? node.visible, ...(isTransient ? {} : handlers), children: _jsx("boxGeometry", { args: [0, 0, 0] }) }));
+    const mesh = (_jsxs("mesh", { castShadow: true, material: doorHitboxMaterial, position: node.position, receiveShadow: true, ref: ref, rotation: node.rotation, visible: liveVisible ?? node.visible, ...(isTransient ? {} : handlers), children: [_jsx("boxGeometry", { args: [0, 0, 0] }), node.source && _jsx(ScriptedOpeningModel, { node: node })] }));
     if (!node.roofSegmentId)
         return mesh;
     return (_jsx(RoofFaceHostFrame, { roofFace: node.roofFace, roofSegmentId: node.roofSegmentId, children: mesh }));

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

@@ -1 +1 @@
-{"version":3,"file":"system.d.ts","sourceRoot":"","sources":["../../src/door/system.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,WAAW,mCAOhB,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"system.d.ts","sourceRoot":"","sources":["../../src/door/system.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,WAAW,mCAOhB,CAAA;eAEc,WAAW"}

package/dist/door/system.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DoorAnimationSystem, DoorSystem } from '@pascal-app/viewer';
 /**
  * Registry-driven door system bundle.

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

@@ -1 +1 @@
-{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/door/tool.tsx"],"names":[],"mappings":"AAqEA;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAwtBrB,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/door/tool.tsx"],"names":[],"mappings":"AAuEA;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAsxBrB,CAAA;eAEc,QAAQ"}