@pascal-app/nodes 1.0.6 → 1.1.0

package/dist/door/panel.js

@@ -1,21 +1,70 @@
 'use client';
 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 { doorHandleStyle, doorPositionForFacing, isAutoFrameDepth, resolveHostedOpeningFrameDepth, scriptImages, useInteractive, usePascalI18n, useScene, } from '@pascal-app/core';
+import { DOOR_STYLES, doorStyleLook, doorStylesOf, doorTypeChange } from '@pascal-app/core/building';
+import { ActionButton, ActionGroup, cn, duplicateNodeAndPickUp, FinishSwatch, 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 { AuthoredParams } from '../item/authored-params.js';
 import { constrainCurtainOpening, curtainOpeningLimits } from '../shared/curtain-opening-limits.js';
+import { OpeningCasingSection } from '../shared/opening-casing-section.js';
+import { OpeningDepthPositionControl } from '../shared/opening-depth-position.js';
+import { DOOR_STYLE_MESSAGES } from '../shared/opening-labels.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';
+import { hingesSidePatch } from './swing.js';
+/** The type cards' names; `doorTypeOptions` keeps English for the placement chips. */
+const DOOR_TYPE_LABELS = {
+    hinged: /* i18n */ { id: 'node.door.type.hinged', message: 'Hinged' },
+    double: /* i18n */ { id: 'node.door.type.double', message: 'Double' },
+    french: /* i18n */ { id: 'node.door.type.french', message: 'French' },
+    folding: /* i18n */ { id: 'node.door.type.folding', message: 'Folding' },
+    pocket: /* i18n */ { id: 'node.door.type.pocket', message: 'Pocket' },
+    barn: /* i18n */ { id: 'node.door.type.barn', message: 'Barn' },
+    sliding: /* i18n */ { id: 'node.door.type.sliding', message: 'Sliding' },
+    'garage-sectional': /* i18n */ { id: 'node.door.type.garageSectional', message: 'Sectional' },
+    'garage-rollup': /* i18n */ { id: 'node.door.type.garageRollup', message: 'Roll-up' },
+    'garage-tiltup': /* i18n */ { id: 'node.door.type.garageTiltup', message: 'Tilt-up' },
+};
+const HANDLE_STYLE_LABELS = {
+    lever: /* i18n */ { id: 'node.door.panel.handleLever', message: 'Lever' },
+    'lever-curved': /* i18n */ {
+        id: 'node.door.panel.handleLeverCurved',
+        message: 'Curved lever',
+    },
+    knob: /* i18n */ { id: 'node.door.panel.handleKnob', message: 'Knob' },
+    bar: /* i18n */ { id: 'node.door.panel.handleBar', message: 'Bar' },
+    plate: /* i18n */ { id: 'node.door.panel.handlePlate', message: 'Plate' },
+};
+const HANDLE_STYLES = Object.keys(HANDLE_STYLE_LABELS);
+// The leaf profile clamps a raised or recessed field to 12 mm (viewer door/leaf-profile.ts); below
+// zero the field is recessed.
+const PANEL_DEPTH_MAX = 0.012;
+// Fixed lights beside and above a swing door's leaf; 0 is none.
+const SIDELIGHT_MAX = 0.6;
+// The hardware slot's declared default (packages/core/src/node-slots/door.ts), shown as "Default".
+const HARDWARE_FINISH_DEFAULT = 'library:metal-chrome';
+// What the viewer draws for each stored leaf count (door-system `slidingPanels`, folding chain).
+const FOLDING_PANEL_COUNTS = [2, 4, 6, 8];
+const SLIDING_PANEL_COUNTS = [2, 3, 4];
+const foldingPanelCount = (leafCount) => leafCount >= 6 ? leafCount : leafCount === 2 ? 2 : 4;
+const slidingPanelCount = (leafCount) => Math.max(2, Math.min(4, leafCount));
 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 },
+    {
+        value: 'garage-sectional',
+        available: true,
+    },
+    {
+        value: 'garage-rollup',
+        available: true,
+    },
+    {
+        value: 'garage-tiltup',
+        available: true,
+    },
 ];
 function isSameDoorValue(current, next) {
     if (typeof current === 'number' && typeof next === 'number') {
@@ -28,6 +77,7 @@ function isSameDoorValue(current, next) {
     return Object.is(current, next);
 }
 export default function DoorPanel() {
+    const i18n = usePascalI18n();
     const selectedId = useViewer((s) => s.selection.selectedIds[0]);
     const setSelection = useViewer((s) => s.setSelection);
     const deleteNode = useScene((s) => s.deleteNode);
@@ -37,6 +87,8 @@ export default function DoorPanel() {
         : null, [selectedId]);
     useEffect(() => () => preview?.cancel(), [preview]);
     const node = useScene((s) => selectedId ? s.nodes[selectedId] : undefined);
+    // The depth the frame renders at: explicit, or the host wall's thickness plus the lip.
+    const frameDepth = useScene((s) => (node ? resolveHostedOpeningFrameDepth(node, s.nodes) : 0));
     // 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) => {
@@ -72,6 +124,11 @@ export default function DoorPanel() {
         handleUpdate({
             side: node.side === 'front' ? 'back' : 'front',
             rotation: [node.rotation[0], node.rotation[1] + Math.PI, node.rotation[2]],
+            position: doorPositionForFacing(node, [
+                node.rotation[0],
+                node.rotation[1] + Math.PI,
+                node.rotation[2],
+            ]),
         });
     }, [node, handleUpdate]);
     const handleMove = useCallback(() => {
@@ -171,7 +228,6 @@ export default function DoorPanel() {
     const isCutoutOnly = isOpening;
     const typeMode = isCutoutOnly ? 'opening' : isGarageDoor ? 'garage' : 'door';
     const supportsHingeSide = doorType === 'hinged';
-    const supportsHandleSide = doorType === 'hinged';
     const supportsTopShape = isSwingDoor;
     const showFlipSide = !isCutoutOnly;
     const showFoldSection = !scripted && isFoldingDoor && !isCutoutOnly;
@@ -182,11 +238,16 @@ export default function DoorPanel() {
     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;
+    // A plain passage (`openingKind: 'opening'`) has no leaf: no swing, threshold or hardware. Its
+    // Casing section stays, so the casing is not gated with these.
+    const showSwingSection = !scripted && !isCutoutOnly && isSwingDoor;
+    // Fixed lights only frame a swing leaf (getDoorOpeningSize ignores them on other types).
+    const showSidelights = !scripted && !isCutoutOnly && isSwingDoor;
+    const showThresholdSection = !scripted && !isCutoutOnly && isSwingDoor;
+    // Pocket, sliding, folding and barn doors draw their pulls, rails and rollers in the hardware
+    // slot: only its finish is theirs.
+    const showHardwareSection = !scripted && !isCutoutOnly && (isSwingDoor || isSlideFoldDoor);
+    // The segments and their leaf border; folded away while the leaf matches a style card.
     const showSegmentsSection = !scripted && !isCutoutOnly && !isGarageDoor;
     const maxDoorWidth = isGarageDoor ? 6 : 3;
     const setOpeningTopRadius = (index, value, commit = false) => {
@@ -200,7 +261,7 @@ export default function DoorPanel() {
         }
     };
     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'
+    return (_jsxs(PanelWrapper, { icon: scriptImages(node)?.thumbnail ?? '/icons/door.webp', onClose: handleClose, title: node.name || i18n._({ id: 'node.door.panel.door', message: 'Door' }), width: 320, children: [!scripted && (_jsxs(PanelSection, { title: i18n._({ id: 'node.door.panel.type', message: '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,
@@ -219,24 +280,81 @@ export default function DoorPanel() {
                                         openingKind: 'door',
                                         ...(isGarageDoor ? getDoorTypeUpdates('hinged') : {}),
                                     }), options: [
-                                { label: 'Door', value: 'door' },
-                                { label: 'Opening', value: 'opening' },
-                                { label: 'Garage', value: 'garage' },
+                                { label: i18n._({ id: 'node.door.panel.door', message: 'Door' }), value: 'door' },
+                                {
+                                    label: i18n._({ id: 'node.door.panel.opening', message: 'Opening' }),
+                                    value: 'opening',
+                                },
+                                {
+                                    label: i18n._({ id: 'node.door.panel.garage', message: 'Garage' }),
+                                    value: 'garage',
+                                },
                             ], value: typeMode }) }), !isOpening && (_jsx("div", { className: "grid grid-cols-2 gap-2 px-1 pt-1", children: (isGarageDoor ? garageDoorTypeOptions : doorTypeOptions).map((option) => {
                             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-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)
+                                    '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: i18n._(DOOR_TYPE_LABELS[option.value]) })] }, option.value));
+                        }) }))] })), !scripted && !isOpening && !isGarageDoor && (_jsxs(PanelSection, { title: i18n._({ id: 'node.door.panel.style', message: '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 }))] })), 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({
+                                : '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: i18n._(DOOR_STYLE_MESSAGES[style]) }) }, style))) }), !doorStyles.length && (_jsx("p", { className: "px-1 pt-2 text-muted-foreground text-xs", children: i18n._({
+                            id: 'node.door.panel.customTheSegmentsMatchNoStyle',
+                            message: 'Custom: the segments match no style.',
+                        }) }))] })), !scripted && (_jsxs(PanelSection, { title: i18n._({ id: 'node.door.panel.dimensions', message: 'Dimensions' }), children: [limits && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: i18n._({
+                            id: 'node.door.panel.sizeIsLimitedToTheWall',
+                            message: 'Size is limited to the wall, including clearance for the opening frame.',
+                        }) })), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.width', message: '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: i18n._({ id: 'node.door.panel.height', message: '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 }), showSidelights && (_jsxs("div", { className: "mt-1 flex flex-col gap-1 border-border/50 border-t pt-1", children: [_jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.leftSidelight', message: 'Left sidelight' }), max: SIDELIGHT_MAX, min: 0, onChange: (v) => handleUpdate({ sidelightLeft: v > 0 ? v : undefined }), precision: 2, step: 0.01, unit: "m", value: node.sidelightLeft ?? 0 }), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.rightSidelight', message: 'Right sidelight' }), max: SIDELIGHT_MAX, min: 0, onChange: (v) => handleUpdate({ sidelightRight: v > 0 ? v : undefined }), precision: 2, step: 0.01, unit: "m", value: node.sidelightRight ?? 0 }), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.transom', message: 'Transom' }), max: SIDELIGHT_MAX, min: 0, onChange: (v) => handleUpdate({ transomHeight: v > 0 ? v : undefined }), precision: 2, step: 0.01, unit: "m", value: node.transomHeight ?? 0 })] }))] })), _jsxs(PanelSection, { title: i18n._({ id: 'node.door.panel.position', message: 'Position' }), children: [_jsx(SliderControl, { label: _jsxs(_Fragment, { children: ["X", _jsx("sub", { className: "ml-[1px] text-[11px] opacity-70", children: i18n._({ id: 'node.door.panel.wall', message: '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: i18n._({ id: 'node.door.panel.flipSide', message: 'Flip side' }), onClick: handleFlip }) }))] }), scripted && _jsx(AuthoredParams, { node: node }), showSegmentsSection && (_jsxs(PanelSection, { defaultExpanded: doorStyles.length === 0, title: i18n._({ id: 'node.door.panel.segments', message: 'Segments' }), children: [node.segments.map((seg, i) => {
+                        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: _jsx("span", { className: "font-medium text-foreground/80 dark:text-white/80 text-xs", children: i18n._({
+                                            id: 'node.segmentNumber',
+                                            message: 'Segment {number}',
+                                            values: { number: i + 1 },
+                                        }) }) }), _jsx(SegmentedControl, { onChange: (t) => {
+                                        const updated = node.segments.map((s, idx) => idx === i ? { ...s, type: t } : s);
+                                        handleUpdate({ segments: updated });
+                                    }, options: [
+                                        {
+                                            label: i18n._({ id: 'node.door.panel.panel', message: 'Panel' }),
+                                            value: 'panel',
+                                        },
+                                        {
+                                            label: i18n._({ id: 'node.door.panel.glass', message: 'Glass' }),
+                                            value: 'glass',
+                                        },
+                                        {
+                                            label: i18n._({ id: 'node.door.panel.empty', message: 'Empty' }),
+                                            value: 'empty',
+                                        },
+                                    ], value: seg.type }), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.height', message: 'Height' }), max: 95, min: 5, onChange: (v) => setSegmentHeightRatio(i, v / 100), precision: 1, step: 1, unit: "%", value: Math.round(normHeights[i] * 100 * 10) / 10 }), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.columns', message: 'Columns' }), max: 8, min: 1, onChange: (v) => {
+                                        const n = Math.max(1, Math.min(8, Math.round(v)));
+                                        const updated = node.segments.map((s, idx) => idx === i ? { ...s, columnRatios: Array(n).fill(1 / n) } : s);
+                                        handleUpdate({ segments: updated });
+                                    }, precision: 0, step: 1, value: numCols }), numCols > 1 && (_jsxs("div", { className: "mt-1 border-border/50 border-t pt-1", children: [normCols.map((ratio, ci) => (_jsx(SliderControl, { label: `C${ci + 1}`, max: 95, min: 5, onChange: (v) => setSegmentColumnRatio(i, ci, v / 100), precision: 1, step: 1, unit: "%", value: Math.round(ratio * 100 * 10) / 10 }, `c-${ci}`))), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.divider', message: 'Divider' }), max: 0.1, min: 0.005, onChange: (v) => {
+                                                const updated = node.segments.map((s, idx) => idx === i ? { ...s, dividerThickness: v } : s);
+                                                handleUpdate({ segments: updated });
+                                            }, precision: 3, step: 0.005, unit: "m", value: seg.dividerThickness })] })), seg.type === 'panel' && (_jsxs("div", { className: "mt-1 border-border/50 border-t pt-1", children: [_jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.inset', message: 'Inset' }), max: 0.1, min: 0, onChange: (v) => {
+                                                const updated = node.segments.map((s, idx) => idx === i ? { ...s, panelInset: v } : s);
+                                                handleUpdate({ segments: updated });
+                                            }, precision: 3, step: 0.005, unit: "m", value: seg.panelInset }), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.depth', message: 'Depth' }), max: PANEL_DEPTH_MAX, min: -PANEL_DEPTH_MAX, onChange: (v) => {
+                                                const updated = node.segments.map((s, idx) => idx === i ? { ...s, panelDepth: v } : s);
+                                                handleUpdate({ segments: updated });
+                                            }, precision: 3, step: 0.001, unit: "m", value: seg.panelDepth })] }))] }, i));
+                    }), _jsxs("div", { className: "flex gap-1.5 px-1 pt-1", children: [_jsx(ActionButton, { label: i18n._({ id: 'node.door.panel.addSegment', message: '+ Add segment' }), onClick: () => {
+                                    const updated = [
+                                        ...node.segments,
+                                        {
+                                            type: 'panel',
+                                            heightRatio: 1,
+                                            columnRatios: [1],
+                                            dividerThickness: 0.03,
+                                            panelDepth: 0.01,
+                                            panelInset: 0.04,
+                                        },
+                                    ];
+                                    handleUpdate({ segments: updated });
+                                } }), node.segments.length > 1 && (_jsx(ActionButton, { className: "text-foreground/60 hover:text-foreground dark:text-white/60 dark:hover:text-white", label: i18n._({ id: 'node.door.panel.remove', message: '- Remove' }), onClick: () => handleUpdate({ segments: node.segments.slice(0, -1) }) }))] }), _jsxs("div", { className: "mt-2 flex flex-col gap-1 border-border/50 border-t pt-2", children: [_jsx("span", { className: "px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: i18n._({ id: 'node.door.panel.contentPadding', message: 'Leaf border' }) }), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.horizontal', message: '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: i18n._({ id: 'node.door.panel.vertical', message: '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] })] })] }, selectedId)), showDoorShapeSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.door.panel.topShape', message: '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'
                                     ? {
@@ -248,77 +366,111 @@ export default function DoorPanel() {
                                     : {}),
                                 ...(v === 'arch' ? { archHeight } : {}),
                             }), options: [
-                                { label: 'Rect', value: 'rectangle' },
-                                { label: 'Rounded', value: 'rounded' },
-                                { label: 'Arch', value: 'arch' },
+                                {
+                                    label: i18n._({ id: 'node.door.panel.rect', message: 'Rect' }),
+                                    value: 'rectangle',
+                                },
+                                {
+                                    label: i18n._({ id: 'node.door.panel.rounded', message: 'Rounded' }),
+                                    value: 'rounded',
+                                },
+                                { label: i18n._({ id: 'node.door.panel.arch', message: 'Arch' }), value: 'arch' },
                             ], value: doorShape }) }), doorShape === 'rounded' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-col gap-2 px-1 pb-1", children: _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ openingRadiusMode: v }), options: [
-                                        { label: 'All', value: 'all' },
-                                        { label: 'Individual', value: 'individual' },
-                                    ], 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 })] })), doorShape === '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 }))] })), showOpeningShapeSection && (_jsxs(PanelSection, { title: "Opening Shape", children: [_jsx("div", { className: "flex flex-col gap-2 px-1 pb-1", children: _jsx(SegmentedControl, { onChange: (v) => handleUpdate({
+                                        { label: i18n._({ id: 'node.door.panel.all', message: 'All' }), value: 'all' },
+                                        {
+                                            label: i18n._({ id: 'node.door.panel.individual', message: 'Individual' }),
+                                            value: 'individual',
+                                        },
+                                    ], value: openingRadiusMode }) }), openingRadiusMode === 'all' ? (_jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.cornerRadius', message: '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: [
+                                    [i18n._({ id: 'node.cornerRadius.topLeft', message: 'Top left' }), 0],
+                                    [i18n._({ id: 'node.cornerRadius.topRight', message: '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: i18n._({ id: 'node.door.panel.revealRadius', message: '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 })] })), doorShape === 'arch' && (_jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.archHeight', message: '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 }))] })), showOpeningShapeSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.door.panel.openingShape', message: 'Opening shape' }), children: [_jsx("div", { className: "flex flex-col gap-2 px-1 pb-1", children: _jsx(SegmentedControl, { onChange: (v) => handleUpdate({
                                 openingShape: v,
                                 ...(v === 'rounded'
                                     ? { openingRadiusMode, openingTopRadii, cornerRadius, openingRevealRadius }
                                     : {}),
                                 ...(v === 'arch' ? { archHeight } : {}),
                             }), options: [
-                                { label: 'Rect', value: 'rectangle' },
-                                { label: 'Rounded', value: 'rounded' },
-                                { label: 'Arch', value: 'arch' },
+                                {
+                                    label: i18n._({ id: 'node.door.panel.rect', message: 'Rect' }),
+                                    value: 'rectangle',
+                                },
+                                {
+                                    label: i18n._({ id: 'node.door.panel.rounded', message: 'Rounded' }),
+                                    value: 'rounded',
+                                },
+                                { label: i18n._({ id: 'node.door.panel.arch', message: 'Arch' }), value: 'arch' },
                             ], value: openingShape }) }), openingShape === 'rounded' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-col gap-2 px-1 pb-1", children: _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ openingRadiusMode: v }), options: [
-                                        { label: 'All', value: 'all' },
-                                        { label: 'Individual', value: 'individual' },
-                                    ], 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 && !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: [
-                                                { label: 'Inward', value: 'inward' },
-                                                { label: 'Outward', value: 'outward' },
-                                            ], value: node.swingDirection })] })] }) })), showThresholdSection && (_jsxs(PanelSection, { title: "Threshold", children: [_jsx(ToggleControl, { checked: node.threshold, label: "Enable Threshold", onChange: (checked) => handleUpdate({ threshold: checked }) }), node.threshold && (_jsx("div", { className: "mt-1 flex flex-col gap-1", children: _jsx(SliderControl, { label: "Height", max: 0.1, min: 0.005, onChange: (v) => handleUpdate({ thresholdHeight: v }), precision: 3, step: 0.005, unit: "m", value: node.thresholdHeight }) }))] })), showHandleSection && (_jsxs(PanelSection, { title: "Handle", children: [isSwingDoor && (_jsx(ToggleControl, { checked: node.handle, label: "Enable Handle", onChange: (checked) => handleUpdate({ handle: checked }) })), (node.handle || !isSwingDoor) && (_jsxs("div", { className: "mt-1 flex flex-col gap-1", children: [_jsx(SliderControl, { label: "Height", max: node.height - 0.1, min: 0.5, onChange: (v) => handleUpdate({ handleHeight: v }), precision: 2, step: 0.05, unit: "m", value: node.handleHeight }), supportsHandleSide && (_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: "Handle Side" }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ handleSide: v }), options: [
-                                                    { label: 'Left', value: 'left' },
-                                                    { label: 'Right', value: 'right' },
-                                                ], value: node.handleSide })] }))] }))] })), showHardwareSection && (_jsxs(PanelSection, { title: "Hardware", children: [_jsx(ToggleControl, { checked: node.doorCloser, label: "Door Closer", onChange: (checked) => handleUpdate({ doorCloser: checked }) }), _jsx(ToggleControl, { checked: node.panicBar, label: "Panic Bar", onChange: (checked) => handleUpdate({ panicBar: checked }) }), node.panicBar && (_jsx("div", { className: "mt-1 flex flex-col gap-1", children: _jsx(SliderControl, { label: "Bar Height", max: node.height - 0.1, min: 0.5, onChange: (v) => handleUpdate({ panicBarHeight: v }), precision: 2, step: 0.05, unit: "m", value: node.panicBarHeight }) }))] })), showSegmentsSection && (_jsxs(PanelSection, { title: "Segments", children: [node.segments.map((seg, i) => {
-                                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-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: [
-                                                { label: 'Panel', value: 'panel' },
-                                                { label: 'Glass', value: 'glass' },
-                                                { label: 'Empty', value: 'empty' },
-                                            ], value: seg.type }), _jsx(SliderControl, { label: "Height", max: 95, min: 5, onChange: (v) => setSegmentHeightRatio(i, v / 100), precision: 1, step: 1, unit: "%", value: Math.round(normHeights[i] * 100 * 10) / 10 }), _jsx(SliderControl, { label: "Columns", max: 8, min: 1, onChange: (v) => {
-                                                const n = Math.max(1, Math.min(8, Math.round(v)));
-                                                const updated = node.segments.map((s, idx) => idx === i ? { ...s, columnRatios: Array(n).fill(1 / n) } : s);
-                                                handleUpdate({ segments: updated });
-                                            }, precision: 0, step: 1, value: numCols }), numCols > 1 && (_jsxs("div", { className: "mt-1 border-border/50 border-t pt-1", children: [normCols.map((ratio, ci) => (_jsx(SliderControl, { label: `C${ci + 1}`, max: 95, min: 5, onChange: (v) => setSegmentColumnRatio(i, ci, v / 100), precision: 1, step: 1, unit: "%", value: Math.round(ratio * 100 * 10) / 10 }, `c-${ci}`))), _jsx(SliderControl, { label: "Divider", max: 0.1, min: 0.005, onChange: (v) => {
-                                                        const updated = node.segments.map((s, idx) => idx === i ? { ...s, dividerThickness: v } : s);
-                                                        handleUpdate({ segments: updated });
-                                                    }, precision: 3, step: 0.005, unit: "m", value: seg.dividerThickness })] })), seg.type === 'panel' && (_jsxs("div", { className: "mt-1 border-border/50 border-t pt-1", children: [_jsx(SliderControl, { label: "Inset", max: 0.1, min: 0, onChange: (v) => {
-                                                        const updated = node.segments.map((s, idx) => idx === i ? { ...s, panelInset: v } : s);
-                                                        handleUpdate({ segments: updated });
-                                                    }, precision: 3, step: 0.005, unit: "m", value: seg.panelInset }), _jsx(SliderControl, { label: "Depth", max: 0.1, min: 0, onChange: (v) => {
-                                                        const updated = node.segments.map((s, idx) => idx === i ? { ...s, panelDepth: v } : s);
-                                                        handleUpdate({ segments: updated });
-                                                    }, precision: 3, step: 0.005, unit: "m", value: seg.panelDepth })] }))] }, i));
-                            }), _jsxs("div", { className: "flex gap-1.5 px-1 pt-1", children: [_jsx(ActionButton, { label: "+ Add Segment", onClick: () => {
-                                            const updated = [
-                                                ...node.segments,
-                                                {
-                                                    type: 'panel',
-                                                    heightRatio: 1,
-                                                    columnRatios: [1],
-                                                    dividerThickness: 0.03,
-                                                    panelDepth: 0.01,
-                                                    panelInset: 0.04,
-                                                },
-                                            ];
-                                            handleUpdate({ segments: updated });
-                                        } }), 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 })] }) })] }));
+                                        { label: i18n._({ id: 'node.door.panel.all', message: 'All' }), value: 'all' },
+                                        {
+                                            label: i18n._({ id: 'node.door.panel.individual', message: 'Individual' }),
+                                            value: 'individual',
+                                        },
+                                    ], value: openingRadiusMode }) }), openingRadiusMode === 'all' ? (_jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.cornerRadius', message: '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: [
+                                    [i18n._({ id: 'node.cornerRadius.topLeft', message: 'Top left' }), 0],
+                                    [i18n._({ id: 'node.cornerRadius.topRight', message: '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: i18n._({ id: 'node.door.panel.revealRadius', message: '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: i18n._({ id: 'node.door.panel.archHeight', message: '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 }))] })), showSwingSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.door.panel.swing', message: '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: i18n._({ id: 'node.door.panel.hingesSide', message: 'Hinges side' }) }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate(hingesSidePatch(v)), options: [
+                                            {
+                                                label: i18n._({ id: 'node.door.panel.left', message: 'Left' }),
+                                                value: 'left',
+                                            },
+                                            {
+                                                label: i18n._({ id: 'node.door.panel.right', message: '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: i18n._({ id: 'node.door.panel.direction', message: 'Direction' }) }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ swingDirection: v }), options: [
+                                            {
+                                                label: i18n._({ id: 'node.door.panel.inward', message: 'Inward' }),
+                                                value: 'inward',
+                                            },
+                                            {
+                                                label: i18n._({ id: 'node.door.panel.outward', message: 'Outward' }),
+                                                value: 'outward',
+                                            },
+                                        ], value: node.swingDirection })] })] }), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.open', message: 'Open' }), max: 90, min: 0, onChange: (v) => handleUpdate({ swingAngle: (Math.max(0, Math.min(90, v)) * Math.PI) / 180 }), precision: 0, restoreOnCommit: false, step: 5, unit: "\u00B0", value: Math.round(((node.swingAngle ?? 0) * 180) / Math.PI) })] })), showFoldSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.door.panel.fold', message: '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: i18n._({ id: 'node.door.panel.panels', message: 'Panels' }) }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ leafCount: Number(v) }), options: FOLDING_PANEL_COUNTS.map((count) => ({
+                                        label: String(count),
+                                        value: String(count),
+                                    })), value: String(foldingPanelCount(node.leafCount)) })] }) }), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.open', message: '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: i18n._({ id: 'node.door.panel.slide', message: 'Slide' }), children: [_jsxs("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'
+                                            ? i18n._({ id: 'node.door.panel.pocket', message: 'Pocket' })
+                                            : doorType === 'barn'
+                                                ? i18n._({ id: 'node.door.panel.rail', message: 'Rail' })
+                                                : i18n._({ id: 'node.door.panel.panel', message: 'Panel' }) }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ slideDirection: v }), options: [
+                                            { label: i18n._({ id: 'node.door.panel.left', message: 'Left' }), value: 'left' },
+                                            {
+                                                label: i18n._({ id: 'node.door.panel.right', message: 'Right' }),
+                                                value: 'right',
+                                            },
+                                        ], value: node.slideDirection ?? 'left' })] }), doorType === 'sliding' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: i18n._({ id: 'node.door.panel.slidingLayout', message: 'Layout' }) }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ slidingStyle: v }), options: [
+                                                    {
+                                                        label: i18n._({ id: 'node.door.panel.slidingPatio', message: 'Patio' }),
+                                                        value: 'patio',
+                                                    },
+                                                    {
+                                                        label: i18n._({ id: 'node.door.panel.slidingBypass', message: 'Bypass' }),
+                                                        value: 'bypass',
+                                                    },
+                                                ], value: node.slidingStyle ?? 'patio' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: i18n._({ id: 'node.door.panel.panels', message: 'Panels' }) }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ leafCount: Number(v) }), options: SLIDING_PANEL_COUNTS.map((count) => ({
+                                                    label: String(count),
+                                                    value: String(count),
+                                                })), value: String(slidingPanelCount(node.leafCount)) })] })] }))] }), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.open', message: '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: i18n._({ id: 'node.door.panel.garage', message: 'Garage' }), children: [_jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.open', message: '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: i18n._({ id: 'node.door.panel.panels', message: 'Panels' }), max: 8, min: 3, onChange: (v) => handleUpdate({ garagePanelCount: Math.round(v) }), precision: 0, restoreOnCommit: false, step: 1, value: node.garagePanelCount ?? 4 }))] })), showFrameSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.door.panel.frame', message: 'Frame' }), children: [_jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.thickness', message: '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: isAutoFrameDepth(node)
+                            ? i18n._({ id: 'node.door.panel.frameDepthAuto', message: 'Depth (auto)' })
+                            : i18n._({ id: 'node.door.panel.depth', message: 'Depth' }), max: 0.5, min: 0.01, onChange: (v) => handleUpdate({ frameDepth: v }), precision: 3, step: 0.01, unit: "m", value: frameDepth }), !isAutoFrameDepth(node) && (_jsxs("div", { className: "flex items-center justify-between px-2 text-muted-foreground text-xs", children: [_jsx("span", { children: i18n._({
+                                    id: 'node.door.panel.autoFollowsTheWall',
+                                    message: 'Auto follows the wall',
+                                }) }), _jsx("button", { className: "rounded-full border border-border/50 px-2.5 py-0.5 transition-colors hover:bg-accent", onClick: () => handleUpdate({ frameDepth: undefined }), type: "button", children: i18n._({ id: 'node.door.panel.auto', message: 'Auto' }) })] })), _jsx(OpeningDepthPositionControl, { node: node, onUpdate: handleUpdate })] })), showThresholdSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.door.panel.threshold', message: 'Threshold' }), children: [_jsx(ToggleControl, { checked: node.threshold, label: i18n._({
+                            id: 'node.door.panel.enableThreshold',
+                            message: 'Enable threshold',
+                        }), onChange: (checked) => handleUpdate({ threshold: checked }) }), node.threshold && (_jsx("div", { className: "mt-1 flex flex-col gap-1", children: _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.height', message: 'Height' }), max: 0.1, min: 0.005, onChange: (v) => handleUpdate({ thresholdHeight: v }), precision: 3, step: 0.005, unit: "m", value: node.thresholdHeight }) }))] })), _jsx(OpeningCasingSection, { node: node, onUpdate: handleUpdate }), showHardwareSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.door.panel.hardware', message: 'Hardware' }), children: [isSwingDoor && (_jsxs(_Fragment, { children: [_jsx(ToggleControl, { checked: node.handle, label: i18n._({ id: 'node.door.panel.enableHandle', message: 'Enable handle' }), onChange: (checked) => handleUpdate({ handle: checked }) }), node.handle && (_jsxs("div", { className: "mt-1 flex flex-col gap-1", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: i18n._({ id: 'node.door.panel.handleStyle', message: 'Style' }) }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ handleStyle: v }), options: HANDLE_STYLES.map((style) => ({
+                                                    label: i18n._(HANDLE_STYLE_LABELS[style]),
+                                                    value: style,
+                                                })), value: doorHandleStyle(node) })] }), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.height', message: 'Height' }), max: node.height - 0.1, min: 0.5, onChange: (v) => handleUpdate({ handleHeight: v }), precision: 2, step: 0.05, unit: "m", value: node.handleHeight })] })), _jsxs("div", { className: "mt-1 flex flex-col gap-1.5 border-border/50 border-t pt-2", children: [_jsx(ToggleControl, { checked: node.doorCloser, label: i18n._({ id: 'node.door.panel.doorCloser', message: 'Door closer' }), onChange: (checked) => handleUpdate({ doorCloser: checked }) }), _jsx(ToggleControl, { checked: node.panicBar, label: i18n._({ id: 'node.door.panel.panicBar', message: 'Panic bar' }), onChange: (checked) => handleUpdate({ panicBar: checked }) }), node.panicBar && (_jsxs("div", { className: "mt-1 flex flex-col gap-1", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: i18n._({ id: 'node.door.panel.panicBarStyle', message: 'Style' }) }), _jsx(SegmentedControl, { onChange: (v) => handleUpdate({ panicBarStyle: v }), options: [
+                                                            {
+                                                                label: i18n._({ id: 'node.door.panel.crossbar', message: 'Crossbar' }),
+                                                                value: 'crossbar',
+                                                            },
+                                                            {
+                                                                label: i18n._({ id: 'node.door.panel.touchbar', message: 'Touchbar' }),
+                                                                value: 'touchbar',
+                                                            },
+                                                        ], value: node.panicBarStyle })] }), _jsx(ToggleControl, { checked: node.panicBarRods, label: i18n._({ id: 'node.door.panel.latchRods', message: 'Latch rods' }), onChange: (checked) => handleUpdate({ panicBarRods: checked }) }), _jsx(SliderControl, { label: i18n._({ id: 'node.door.panel.barHeight', message: 'Bar height' }), max: node.height - 0.1, min: 0.5, onChange: (v) => handleUpdate({ panicBarHeight: v }), precision: 2, step: 0.05, unit: "m", value: node.panicBarHeight })] }))] })] })), _jsx("div", { className: cn(isSwingDoor && 'mt-1 border-border/50 border-t pt-1'), children: _jsx(FinishSwatch, { fallback: HARDWARE_FINISH_DEFAULT, label: i18n._({ id: 'node.door.panel.finish', message: 'Finish' }), node: node, paintRole: "hardware", value: node.slots?.hardware }) })] })), _jsx(PanelSection, { title: i18n._({ id: 'node.door.panel.actions', message: 'Actions' }), children: _jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: _jsx(Move, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.door.panel.move', message: 'Move' }), onClick: handleMove }), _jsx(ActionButton, { icon: _jsx(Copy, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.door.panel.duplicate', message: '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: i18n._({ id: 'node.door.panel.delete', message: 'Delete' }), onClick: handleDelete })] }) })] }));
 }

package/dist/door/parametrics.js

@@ -19,7 +19,7 @@ export const doorParametrics = {
             label: 'Frame',
             fields: [
                 { key: 'frameThickness', kind: 'number', unit: 'm', min: 0.01, max: 0.2, step: 0.005 },
-                { key: 'frameDepth', kind: 'number', unit: 'm', min: 0.01, max: 0.3, step: 0.005 },
+                { key: 'frameDepth', kind: 'number', unit: 'm', min: 0.01, max: 0.5, step: 0.005 },
             ],
         },
     ],

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

@@ -1 +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"}
+{"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,EAIf,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,CAUpD;AAED,eAAO,MAAM,oBAAoB,EAAE,QAAQ,EA2B1C,CAAA"}

package/dist/door/placement.js

@@ -1,5 +1,5 @@
 // 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 { DOOR_STYLE_LABELS, DOOR_STYLES, DOOR_TYPE_SIZES, doorStyleLook, doorTypeFields, NEW_DOOR_FRAME_THICKNESS, } 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 = [
@@ -23,7 +23,14 @@ export const useDoorPlacement = create((set, get) => ({
 /** 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) };
+    return {
+        frameThickness: NEW_DOOR_FRAME_THICKNESS,
+        casingFaceA: true,
+        casingFaceB: true,
+        ...doorTypeFields(type),
+        ...DOOR_TYPE_SIZES[type],
+        ...doorStyleLook(style),
+    };
 }
 export const DOOR_PLACEMENT_HINTS = [
     {

package/dist/door/swing.d.ts

@@ -0,0 +1,22 @@
+import type { DoorNode } from '@pascal-app/core';
+type SwingDoor = Pick<DoorNode, 'doorType' | 'hingesSide' | 'handleSide' | 'swingDirection'> & Partial<Pick<DoorNode, 'openingKind' | 'source'>>;
+/** Whether a door swings on hinges (the panel's Swing section), so its swing can be swapped. */
+export declare function canSwapDoorSwing(door: SwingDoor): boolean;
+/** Whether a door has one hinge side to swap: a single hinged leaf. */
+export declare function canSwapDoorHinge(door: SwingDoor): boolean;
+/** The leaf hung from `side`'s jamb, with its handle on the free edge opposite the hinges. */
+export declare function hingesSidePatch(side: 'left' | 'right'): Partial<DoorNode>;
+/** The leaf hung from the other jamb: hinges and handle trade sides, so the handle stays on the free edge. */
+export declare function swapDoorHingePatch(door: SwingDoor): Partial<DoorNode>;
+/** The leaf swinging into the other side of the wall. */
+export declare function swapDoorSwingPatch(door: SwingDoor): Partial<DoorNode>;
+/**
+ * The swing that opens a door's leaf toward `side` of its wall: the face under the cursor while
+ * placing, so the door swings into the side it is placed from (R flips it to the other side). An
+ * inward door opens toward the face it is hung facing (`rotationY` 0 faces front, π back), so a
+ * door facing that side swings inward and one facing away swings outward. A garage door has no
+ * swing and keeps its own.
+ */
+export declare function placementSwing(door: Pick<DoorNode, 'doorType' | 'swingDirection'>, rotationY: number, side: 'front' | 'back'): DoorNode['swingDirection'];
+export {};
+//# sourceMappingURL=swing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"swing.d.ts","sourceRoot":"","sources":["../../src/door/swing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEhD,KAAK,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,gBAAgB,CAAC,GAC1F,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAA;AAInD,gGAAgG;AAChG,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAMzD;AAED,uEAAuE;AACvE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAEzD;AAED,8FAA8F;AAC9F,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,CAEzE;AAED,8GAA8G;AAC9G,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC,CAErE;AAED,yDAAyD;AACzD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC,CAErE;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,gBAAgB,CAAC,EACnD,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,QAAQ,CAAC,gBAAgB,CAAC,CAI5B"}