@pascal-app/nodes 1.0.6 → 1.1.0

package/dist/window/panel.js

@@ -1,14 +1,17 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cornerPair, fusesAtCorner, runAsSingleSceneHistoryStep, scriptImages, useInteractive, useScene, } from '@pascal-app/core';
+import { cornerPair, fusesAtCorner, isAutoFrameDepth, openingExteriorFace, openingHostFacing, resolveHostedOpeningFrameDepth, resolveOpeningCasingHost, runAsSingleSceneHistoryStep, scriptImages, useInteractive, usePascalI18n, useScene, } from '@pascal-app/core';
 import { isAgentRefusal } from '@pascal-app/core/agent-tools';
-import { cornerPartnerUpdates, cornerSideWidth, getWindowStyleOverrides, SHAPED_WINDOW_TYPES, SILLLESS_WINDOW_TYPES, unwrapCorner, WINDOW_STYLE_CHOICES, WINDOW_STYLE_LABELS, windowStylesOf, windowTakesStyle, windowTypeChange, wrapCorner, } from '@pascal-app/core/building';
-import { ActionButton, ActionGroup, cn, duplicateNodeAndPickUp, PanelSection, PanelWrapper, SegmentedControl, SliderControl, ToggleControl, triggerSFX, useEditor, writeWindowChanges, } from '@pascal-app/editor';
+import { cornerPartnerUpdates, cornerSideWidth, getWindowStyleOverrides, SHAPED_WINDOW_TYPES, SILLLESS_WINDOW_TYPES, unwrapCorner, WINDOW_STYLE_CHOICES, windowStylesOf, windowTakesStyle, windowTypeChange, wrapCorner, } from '@pascal-app/core/building';
+import { ActionButton, ActionGroup, cn, duplicateNodeAndPickUp, FinishSwatch, PanelSection, PanelWrapper, SegmentedControl, SliderControl, ToggleControl, triggerSFX, useEditor, writeWindowChanges, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 import { Copy, 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 { WINDOW_STYLE_MESSAGES, WINDOW_TYPE_MESSAGES } from '../shared/opening-labels.js';
 import { createOpeningPropertyPreview } from '../shared/opening-property-preview.js';
 import { openingPropertyPreviewHost } from '../shared/opening-property-preview-host.js';
 import { windowTypeOptions } from './placement.js';
@@ -32,6 +35,50 @@ function normalizeWindowCornerRadii(radii, width, height) {
         return next;
     return next.map((radius) => radius * scale);
 }
+const INCH = 0.0254;
+const MIN_SHUTTER_WIDTH = 0.15;
+const MIN_ROLLER_BOX_HEIGHT = 0.12;
+const MAX_ROLLER_BOX_HEIGHT = 0.35;
+const DEFAULT_ROLLER_BOX_HEIGHT = 0.18;
+// What the viewer draws for an inside sill without its own sizes (window-system `addWindowDetails`).
+const INSIDE_SILL_DEPTH = 0.06;
+const INSIDE_SILL_THICKNESS = 0.03;
+const INSIDE_SILL_OVERHANG = 0.015;
+// The declared slot defaults (packages/core/src/node-slots/window.ts), shown as "Default". The
+// hardware follows the frame until it is painted.
+const FRAME_FINISH_DEFAULT = 'library:preset-softwhite';
+const SHUTTERS_FINISH_DEFAULT = 'library:preset-charcoal';
+// What the viewer draws (window-system `addWindowDetails`): the handle and hinges on these sashes,
+// the per-sash grid in these types, neither on a corner window.
+const SASH_HARDWARE_TYPES = new Set([
+    'casement',
+    'awning',
+    'hopper',
+    'tilt-turn',
+]);
+const SASH_GRID_TYPES = new Set([
+    'casement',
+    'sliding',
+    'single-hung',
+    'double-hung',
+    'awning',
+    'hopper',
+    'tilt-turn',
+]);
+/**
+ * Which way a casement or awning sash without `openingDirection` opens today: toward the face it
+ * was placed from (window-pose `poseWindowMovingParts`; an awning hinged at the bottom the other
+ * way), read against the exterior face.
+ */
+function legacyOpeningDirection(node, nodes) {
+    const exterior = (openingExteriorFace(node, nodes) === 'a' ? 1 : -1) * openingHostFacing(node);
+    const placed = node.windowType === 'awning' && node.awningDirection === 'down' ? -1 : 1;
+    return placed * exterior > 0 ? 'outward' : 'inward';
+}
+/** A small caption over a row, as the door panel's Hinges side. */
+function Captioned({ label, children }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: label }), children] }));
+}
 /** The Corner section's pill buttons: a token hover, the press, the keyboard focus ring. */
 const CORNER_BUTTON = 'outline-hidden transition-[background-color,scale] duration-150 hover:bg-foreground/[0.06] focus-visible:outline-2 focus-visible:outline-foreground/50 focus-visible:outline-offset-2 motion-safe:active:scale-[0.96]';
 /** A change to one side of a corner window that both share, made on its partner too. */
@@ -49,6 +96,7 @@ function syncCornerPartner(windowId, updates) {
         scene.dirtyNodes.add(parentId);
 }
 export default function WindowPanel() {
+    const i18n = usePascalI18n();
     const selectedId = useViewer((s) => s.selection.selectedIds[0]);
     const setSelection = useViewer((s) => s.setSelection);
     const deleteNode = useScene((s) => s.deleteNode);
@@ -58,6 +106,15 @@ export default function WindowPanel() {
         : 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));
+    // Shutters hang where casing can: not on a curtain wall, a dormer or a script's unit; nor on a
+    // roof's gable face or a corner window, where the second shutter has no wall beside it.
+    const takesShutters = useScene((s) => node?.type === 'window' &&
+        !node.roofSegmentId &&
+        !node.corner &&
+        resolveOpeningCasingHost(node, s.nodes) !== null);
+    const imperial = useViewer((s) => s.unit) === 'imperial';
     // Stable handler refs ("Custom panels" in wiki/architecture/node-definitions.md).
     // Without them, the 15+ SliderControls in this panel would loop on drag.
     const handleUpdate = useCallback((updates) => {
@@ -210,10 +267,17 @@ export default function WindowPanel() {
     const isOperableSashWindow = windowType === 'casement' ||
         windowType === 'awning' ||
         windowType === 'hopper' ||
+        windowType === 'tilt-turn' ||
         windowType === 'louvered';
     const isOperableWindow = isTrackSashWindow || isOperableSashWindow;
     const supportsWindowShape = SHAPED_WINDOW_TYPES.has(node.windowType ?? 'fixed');
-    const supportsGrid = isFixedWindow;
+    const hasSashHardware = !node.corner && SASH_HARDWARE_TYPES.has(windowType);
+    // Curved sashes take no grid: the viewer draws it in rectangular ones only.
+    const takesSashGrid = !node.corner &&
+        SASH_GRID_TYPES.has(windowType) &&
+        (openingShape === 'rectangle' || !SHAPED_WINDOW_TYPES.has(windowType));
+    const supportsGrid = isFixedWindow || takesSashGrid;
+    const showGridDivisions = isFixedWindow || node.sashGrid === true;
     const supportsSill = !SILLLESS_WINDOW_TYPES.has(node.windowType);
     const showWindowTypeSection = !scripted && !isOpening;
     const windowStyles = windowStylesOf(node);
@@ -223,24 +287,46 @@ export default function WindowPanel() {
     const showGridSection = !scripted && !isOpening && supportsGrid;
     const showStyleSection = !scripted && !isOpening && windowTakesStyle(node.windowType);
     const showSillSection = !scripted && !isOpening && supportsSill;
+    const showHardwareSection = !scripted && !isOpening && hasSashHardware;
+    const showShuttersSection = !scripted && !isOpening && takesShutters;
+    const shutters = node.shutters ?? 'none';
+    const rollerShutter = node.rollerShutter ?? 'none';
+    // One shutter per side shares the window's width; a single shutter covers all of it.
+    const shutterWidth = node.shutterWidth ?? ((node.shutterSides ?? 'both') === 'both' ? node.width / 2 : node.width);
+    const maxShutterWidth = Math.max(node.width, MIN_SHUTTER_WIDTH);
+    const toShownLength = (meters) => (imperial ? meters / INCH : meters);
     const showOperationSection = !scripted && !isOpening && isOperableWindow;
     const showAwningDirectionSection = !scripted && !isOpening && displayedWindowType === 'awning';
     const showCasementSection = !scripted && !isOpening && windowType === 'casement';
+    const showTiltTurnSection = !scripted && !isOpening && windowType === 'tilt-turn';
+    // Casement and awning sashes open outward or inward; a saved window without the field keeps the
+    // way it opens today, toward the face it was placed from.
+    const showOpensRow = !scripted && !isOpening && (windowType === 'casement' || windowType === 'awning');
+    const openingDirection = node.openingDirection ?? legacyOpeningDirection(node, useScene.getState().nodes);
     const showFlipSide = !isOpening;
     const operationLabel = isTrackSashWindow
         ? windowType === 'sliding'
-            ? 'Slide'
-            : 'Raise'
-        : windowType === 'casement'
-            ? 'Swing'
-            : windowType === 'louvered'
-                ? 'Slats'
-                : 'Tilt';
+            ? i18n._({ id: 'node.window.operation.slide', message: 'Slide' })
+            : i18n._({ id: 'node.window.operation.raise', message: 'Raise' })
+        : windowType === 'tilt-turn'
+            ? i18n._(WINDOW_TYPE_MESSAGES['tilt-turn'])
+            : windowType === 'casement'
+                ? i18n._({ id: 'node.window.operation.swing', message: 'Swing' })
+                : windowType === 'louvered'
+                    ? i18n._({ id: 'node.window.operation.slats', message: 'Slats' })
+                    : i18n._({ id: 'node.window.operation.tilt', message: 'Tilt' });
     const setOperationState = (value) => {
-        useInteractive.getState().cancelWindowAnimation(node.id);
-        useInteractive.getState().removeWindowOpenState(node.id);
+        useInteractive.getState().cancelWindowAnimation(node.id, 'operationState');
+        useInteractive.getState().removeWindowOpenState(node.id, 'operationState');
         handleUpdate({ operationState: Math.max(0, Math.min(1, value)) });
     };
+    const setShutterState = (field, value) => {
+        const interactive = useInteractive.getState();
+        interactive.cancelWindowAnimation(node.id, field);
+        interactive.removeWindowOpenState(node.id, field);
+        interactive.removeMechanismPart(node.id, 'shutters');
+        handleUpdate({ [field]: Math.max(0, Math.min(100, value)) / 100 });
+    };
     const getDimensionUpdates = (updates) => {
         const nextWidth = updates.width ?? node.width;
         const nextHeight = updates.height ?? node.height;
@@ -299,7 +385,7 @@ export default function WindowPanel() {
         });
         handleUpdate({ rowRatios: newRatios });
     };
-    return (_jsxs(PanelWrapper, { icon: scriptImages(node)?.thumbnail ?? '/icons/window.webp', onClose: handleClose, title: node.name || 'Window', width: 320, children: [!scripted && (_jsx(PanelSection, { title: "Type", children: _jsx(SegmentedControl, { onChange: (value) => handleUpdate({
+    return (_jsxs(PanelWrapper, { icon: scriptImages(node)?.thumbnail ?? '/icons/window.webp', onClose: handleClose, title: node.name || i18n._({ id: 'node.window.panel.window', message: 'Window' }), width: 320, children: [!scripted && (_jsx(PanelSection, { title: i18n._({ id: 'node.window.panel.type', message: 'Type' }), children: _jsx(SegmentedControl, { onChange: (value) => handleUpdate({
                         openingKind: value,
                         ...(value === 'opening'
                             ? {
@@ -312,34 +398,58 @@ export default function WindowPanel() {
                             }
                             : {}),
                     }), options: [
-                        { value: 'window', label: 'Window' },
-                        { value: 'opening', label: 'Opening' },
-                    ], value: node.openingKind ?? 'window' }) })), showWindowTypeSection && (_jsxs(PanelSection, { title: "Window Type", children: [_jsx("div", { className: "grid grid-cols-2 gap-2 px-1 pt-1", children: windowTypeOptions.map((option) => {
-                            const isSelected = displayedWindowType === option.value;
-                            return (_jsx("button", { className: cn('flex min-h-12 items-center 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'), onClick: () => handleUpdate({
-                                    ...windowTypeChange(node, option.value),
-                                    ...(option.value === 'awning' ? { awningDirection } : {}),
-                                }), type: "button", children: _jsx("span", { className: "truncate font-medium", children: option.label }) }, option.value));
-                        }) }), showAwningDirectionSection && (_jsx("div", { className: "mt-2", children: _jsx(SegmentedControl, { onChange: (value) => handleUpdate({
-                                windowType: 'awning',
-                                awningDirection: value,
-                            }), options: [
-                                { value: 'up', label: 'Up' },
-                                { value: 'down', label: 'Down' },
-                            ], value: awningDirection }) })), showCasementSection && (_jsxs("div", { className: "mt-2 space-y-2", children: [_jsx(SegmentedControl, { onChange: (value) => handleUpdate({ casementStyle: value }), options: [
-                                    { value: 'single', label: 'Single' },
-                                    { value: 'french', label: 'French' },
-                                ], value: node.casementStyle ?? 'single' }), (node.casementStyle ?? 'single') === 'single' && (_jsx(SegmentedControl, { onChange: (value) => handleUpdate({ hingesSide: value }), options: [
-                                    { value: 'left', label: 'Left' },
-                                    { value: 'right', label: 'Right' },
-                                ], value: node.hingesSide ?? 'left' }))] })), showOperationSection && (_jsx("div", { className: "mt-2", children: _jsx(SliderControl, { label: operationLabel, max: 1, min: 0, onChange: setOperationState, precision: 2, restoreOnCommit: false, step: 0.05, value: Math.round((node.operationState ?? 0) * 100) / 100 }) }))] })), showStyleSection && (_jsxs(PanelSection, { title: "Style", children: [_jsx("div", { className: "grid grid-cols-2 gap-2 px-1 pt-1", children: WINDOW_STYLE_CHOICES.map((style) => (_jsx("button", { "aria-pressed": windowStyles.includes(style), className: cn('flex min-h-10 items-center rounded-lg border px-3 py-2 text-left text-xs transition-colors', windowStyles.includes(style)
+                        {
+                            value: 'window',
+                            label: i18n._({ id: 'node.window.panel.window', message: 'Window' }),
+                        },
+                        {
+                            value: 'opening',
+                            label: i18n._({ id: 'node.window.panel.opening', message: 'Opening' }),
+                        },
+                    ], value: node.openingKind ?? 'window' }) })), showWindowTypeSection && (_jsx(PanelSection, { title: i18n._({ id: 'node.window.panel.windowType', message: 'Window type' }), children: _jsx("div", { className: "grid grid-cols-2 gap-2 px-1 pt-1", children: windowTypeOptions.map((option) => {
+                        const isSelected = displayedWindowType === option.value;
+                        return (_jsx("button", { className: cn('flex min-h-12 items-center 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'), onClick: () => handleUpdate(getWindowStyleOverrides(style)), type: "button", children: _jsx("span", { className: "truncate font-medium", children: WINDOW_STYLE_LABELS[style] }) }, style))) }), !windowStyles.length && (_jsx("p", { className: "px-1 pt-2 text-muted-foreground text-xs", children: "Custom: the panes match no style." }))] })), corner && (_jsx(PanelSection, { title: "Corner", children: corner.paired ? (_jsxs("div", { className: "flex flex-col gap-2 px-1 pb-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-xs", children: [_jsxs("span", { className: "text-muted-foreground", children: ["Wraps the corner with ", corner.partner.name || 'its partner'] }), _jsx("button", { className: cn('rounded-full border border-border/50 px-3 py-1 text-xs', CORNER_BUTTON), onClick: () => selectedId && writeWindows(unwrapCorner(useScene.getState().nodes, selectedId)), type: "button", children: "Unwrap" })] }), _jsx(SliderControl, { label: "This side", min: 0.1, onChange: (v) => selectedId && setCornerWidth(selectedId, v), precision: 2, step: 0.05, unit: "m", value: node.width }), _jsx(SliderControl, { label: "Other side", min: 0.1, onChange: (v) => setCornerWidth(corner.partner.id, v), precision: 2, step: 0.05, unit: "m", value: corner.partner.width }), fusesAtCorner(node) && (_jsx(SegmentedControl, { onChange: setCornerPost, options: [
-                                { label: 'Fused glass', value: 'none' },
-                                { label: 'Corner post', value: 'post' },
-                            ], value: node.corner?.post ?? 'none' }))] })) : (_jsx("div", { className: "px-1 pb-1", children: _jsx("button", { className: cn('w-full rounded-full border border-border/50 px-3 py-2 text-xs', CORNER_BUTTON), onClick: wrapTheCorner, type: "button", children: "Wrap the corner" }) })) })), _jsxs(PanelSection, { title: "Position", children: [!corner?.paired && (_jsx(SliderControl, { label: _jsxs(_Fragment, { children: ["X", _jsx("sub", { className: "ml-[1px] text-[11px] opacity-70", children: "pos" })] }), onChange: (v) => handleUpdate({ position: [v, node.position[1], node.position[2]] }), precision: 2, step: 0.1, unit: "m", value: node.position[0] })), _jsx(SliderControl, { label: _jsxs(_Fragment, { children: ["Y", _jsx("sub", { className: "ml-[1px] text-[11px] opacity-70", children: "pos" })] }), onChange: (v) => handleUpdate({ position: [node.position[0], v, node.position[2]] }), precision: 2, step: 0.1, unit: "m", value: node.position[1] }), 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 }) }))] }), 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." })), !corner?.paired && (_jsx(SliderControl, { label: "Width", max: limits?.width, min: 0.01, onChange: (v) => preview?.preview(getDimensionUpdates({ width: v })), onCommit: (v) => preview?.commit(getDimensionUpdates({ 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, min: 0.01, onChange: (v) => preview?.preview(getDimensionUpdates({ height: v })), onCommit: (v) => commitPreview(getDimensionUpdates({ height: v })), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.01, unit: "m", value: node.height })] })), showWindowShapeSection && (_jsxs(PanelSection, { title: "Top Shape", children: [_jsx(SegmentedControl, { onChange: (value) => 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({
+                                ...windowTypeChange(node, option.value),
+                                ...(option.value === 'awning' ? { awningDirection } : {}),
+                            }), type: "button", children: _jsx("span", { className: "truncate font-medium", children: i18n._(WINDOW_TYPE_MESSAGES[option.value]) }) }, option.value));
+                    }) }) })), showStyleSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.window.panel.style', message: 'Style' }), children: [_jsx("div", { className: "grid grid-cols-2 gap-2 px-1 pt-1", children: WINDOW_STYLE_CHOICES.map((style) => (_jsx("button", { "aria-pressed": windowStyles.includes(style), className: cn('flex min-h-10 items-center rounded-lg border px-3 py-2 text-left text-xs transition-colors', windowStyles.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(getWindowStyleOverrides(style)), type: "button", children: _jsx("span", { className: "truncate font-medium", children: i18n._(WINDOW_STYLE_MESSAGES[style]) }) }, style))) }), !windowStyles.length && (_jsx("p", { className: "px-1 pt-2 text-muted-foreground text-xs", children: i18n._({
+                            id: 'node.window.panel.customThePanesMatchNoStyle',
+                            message: 'Custom: the panes match no style.',
+                        }) }))] })), !scripted && (_jsxs(PanelSection, { title: i18n._({ id: 'node.window.panel.dimensions', message: 'Dimensions' }), children: [limits && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: i18n._({
+                            id: 'node.window.panel.sizeIsLimitedToTheWall',
+                            message: 'Size is limited to the wall, including clearance for the opening frame.',
+                        }) })), !corner?.paired && (_jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.width', message: 'Width' }), max: limits?.width, min: 0.01, onChange: (v) => preview?.preview(getDimensionUpdates({ width: v })), onCommit: (v) => preview?.commit(getDimensionUpdates({ 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.window.panel.height', message: 'Height' }), max: limits?.height, min: 0.01, onChange: (v) => preview?.preview(getDimensionUpdates({ height: v })), onCommit: (v) => commitPreview(getDimensionUpdates({ height: v })), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.01, unit: "m", value: node.height })] })), _jsxs(PanelSection, { title: i18n._({ id: 'node.window.panel.position', message: 'Position' }), children: [!corner?.paired && (_jsx(SliderControl, { label: _jsxs(_Fragment, { children: ["X", _jsx("sub", { className: "ml-[1px] text-[11px] opacity-70", children: i18n._({ id: 'node.window.panel.pos', message: 'pos' }) })] }), onChange: (v) => handleUpdate({ position: [v, node.position[1], node.position[2]] }), precision: 2, step: 0.1, unit: "m", value: node.position[0] })), _jsx(SliderControl, { label: _jsxs(_Fragment, { children: ["Y", _jsx("sub", { className: "ml-[1px] text-[11px] opacity-70", children: i18n._({ id: 'node.window.panel.pos', message: 'pos' }) })] }), onChange: (v) => handleUpdate({ position: [node.position[0], v, node.position[2]] }), precision: 2, step: 0.1, unit: "m", value: node.position[1] }), 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.window.panel.flipSide', message: 'Flip side' }), onClick: handleFlip }) }))] }), scripted && _jsx(AuthoredParams, { node: node }), showGridSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.window.panel.grid', message: 'Grid' }), children: [!isFixedWindow && (_jsx(ToggleControl, { checked: node.sashGrid === true, label: i18n._({
+                            id: 'node.window.panel.divideEachSash',
+                            message: 'Divide each sash',
+                        }), onChange: (checked) => handleUpdate({ sashGrid: checked }) })), showGridDivisions && (_jsxs(_Fragment, { children: [_jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.columns', message: 'Columns' }), max: 8, min: 1, onChange: (v) => {
+                                    const n = Math.max(1, Math.min(8, Math.round(v)));
+                                    handleUpdate({ columnRatios: Array(n).fill(1 / n) });
+                                }, precision: 0, step: 1, value: numCols }), _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.rows', message: 'Rows' }), max: 8, min: 1, onChange: (v) => {
+                                    const n = Math.max(1, Math.min(8, Math.round(v)));
+                                    handleUpdate({ rowRatios: Array(n).fill(1 / n) });
+                                }, precision: 0, step: 1, value: numRows }), numCols > 1 && (_jsxs("div", { className: "mt-2 flex flex-col gap-1", children: [_jsx("div", { className: "mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: i18n._({ id: 'node.window.panel.colWidths', message: 'Column widths' }) }), normCols.map((ratio, i) => (_jsx(SliderControl, { label: `C${i + 1}`, max: 95, min: 5, onChange: (v) => setColumnRatio(i, v / 100), precision: 1, step: 1, unit: "%", value: Math.round(ratio * 100 * 10) / 10 }, `c-${i}`))), _jsx("div", { className: "mt-1 border-border/50 border-t pt-1", children: _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.divider', message: 'Divider' }), max: 0.1, min: 0.005, onChange: (v) => handleUpdate({ columnDividerThickness: v }), precision: 3, step: 0.01, unit: "m", value: node.columnDividerThickness ?? 0.03 }) })] })), numRows > 1 && (_jsxs("div", { className: "mt-2 flex flex-col gap-1", children: [_jsx("div", { className: "mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: i18n._({ id: 'node.window.panel.rowHeights', message: 'Row heights' }) }), normRows.map((ratio, i) => (_jsx(SliderControl, { label: `R${i + 1}`, max: 95, min: 5, onChange: (v) => setRowRatio(i, v / 100), precision: 1, step: 1, unit: "%", value: Math.round(ratio * 100 * 10) / 10 }, `r-${i}`))), _jsx("div", { className: "mt-1 border-border/50 border-t pt-1", children: _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.divider', message: 'Divider' }), max: 0.1, min: 0.005, onChange: (v) => handleUpdate({ rowDividerThickness: v }), precision: 3, step: 0.01, unit: "m", value: node.rowDividerThickness ?? 0.03 }) })] }))] }))] })), corner && (_jsx(PanelSection, { title: i18n._({ id: 'node.window.panel.corner', message: 'Corner' }), children: corner.paired ? (_jsxs("div", { className: "flex flex-col gap-2 px-1 pb-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: corner.partner.name
+                                        ? i18n._({
+                                            id: 'node.window.panel.wrapsTheCornerWithNamed',
+                                            message: 'Wraps the corner with {partner}',
+                                            values: { partner: corner.partner.name },
+                                        })
+                                        : i18n._({
+                                            id: 'node.window.panel.wrapsTheCornerWithPartner',
+                                            message: 'Wraps the corner with its partner',
+                                        }) }), _jsx("button", { className: cn('rounded-full border border-border/50 px-3 py-1 text-xs', CORNER_BUTTON), onClick: () => selectedId && writeWindows(unwrapCorner(useScene.getState().nodes, selectedId)), type: "button", children: i18n._({ id: 'node.window.panel.unwrap', message: 'Unwrap' }) })] }), _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.thisSide', message: 'This side' }), min: 0.1, onChange: (v) => selectedId && setCornerWidth(selectedId, v), precision: 2, step: 0.05, unit: "m", value: node.width }), _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.otherSide', message: 'Other side' }), min: 0.1, onChange: (v) => setCornerWidth(corner.partner.id, v), precision: 2, step: 0.05, unit: "m", value: corner.partner.width }), fusesAtCorner(node) && (_jsx(SegmentedControl, { onChange: setCornerPost, options: [
+                                {
+                                    label: i18n._({ id: 'node.window.panel.fusedGlass', message: 'Fused glass' }),
+                                    value: 'none',
+                                },
+                                {
+                                    label: i18n._({ id: 'node.window.panel.cornerPost', message: 'Corner post' }),
+                                    value: 'post',
+                                },
+                            ], value: node.corner?.post ?? 'none' }))] })) : (_jsx("div", { className: "px-1 pb-1", children: _jsx("button", { className: cn('w-full rounded-full border border-border/50 px-3 py-2 text-xs', CORNER_BUTTON), onClick: wrapTheCorner, type: "button", children: i18n._({ id: 'node.window.panel.wrapTheCorner', message: 'Wrap the corner' }) }) })) })), showWindowShapeSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.window.panel.topShape', message: 'Top shape' }), children: [_jsx(SegmentedControl, { onChange: (value) => handleUpdate({
                             openingShape: value,
                             ...(value === 'rounded'
                                 ? {
@@ -352,34 +462,166 @@ export default function WindowPanel() {
                                 : {}),
                             ...(value === 'arch' ? { archHeight } : {}),
                         }), options: [
-                            { value: 'rectangle', label: 'Rect' },
-                            { value: 'rounded', label: 'Rounded' },
-                            { value: 'arch', label: 'Arch' },
+                            {
+                                value: 'rectangle',
+                                label: i18n._({ id: 'node.window.panel.rect', message: 'Rect' }),
+                            },
+                            {
+                                value: 'rounded',
+                                label: i18n._({ id: 'node.window.panel.rounded', message: 'Rounded' }),
+                            },
+                            { value: 'arch', label: i18n._({ id: 'node.window.panel.arch', message: 'Arch' }) },
                         ], value: windowShape }), windowShape === 'rounded' && (_jsxs("div", { className: "mt-2 flex flex-col gap-1", children: [_jsx(SegmentedControl, { onChange: (value) => handleUpdate({ openingRadiusMode: value }), options: [
-                                    { value: 'all', label: 'All' },
-                                    { value: 'individual', label: 'Individual' },
-                                ], value: openingRadiusMode }), openingRadiusMode === 'all' ? (_jsx(SliderControl, { label: "Corner Radius", max: maxRoundedRadius, min: 0, onChange: (value) => previewWindowUpdate('cornerRadius', value), onCommit: (value) => commitWindowPreview('cornerRadius', value), 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],
-                                    ['Bottom Right', 2],
-                                    ['Bottom Left', 3],
-                                ].map(([label, index]) => (_jsx(SliderControl, { label: label, max: maxRoundedRadius, min: 0, onChange: (value) => setOpeningCornerRadius(index, value), onCommit: (value) => setOpeningCornerRadius(index, value, true), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 2, step: 0.05, unit: "m", value: openingCornerRadii[index] ?? 0 }, label))) })), _jsx(SliderControl, { label: "Reveal Radius", max: 0.08, min: 0, onChange: (value) => previewWindowUpdate('openingRevealRadius', value), onCommit: (value) => commitWindowPreview('openingRevealRadius', value), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 3, step: 0.005, unit: "m", value: openingRevealRadius })] })), windowShape === 'arch' && (_jsx("div", { className: "mt-2 flex flex-col gap-1", children: _jsx(SliderControl, { label: "Arch Height", max: Math.max(0.05, node.height), min: 0.05, onChange: (value) => previewWindowUpdate('archHeight', value), onCommit: (value) => commitWindowPreview('archHeight', value), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: archHeight }) }))] })), showOpeningShapeSection && (_jsxs(PanelSection, { title: "Opening Shape", children: [_jsx(SegmentedControl, { onChange: (value) => handleUpdate({ openingShape: value }), options: [
-                            { value: 'rectangle', label: 'Rect' },
-                            { value: 'rounded', label: 'Rounded' },
-                            { value: 'arch', label: 'Arch' },
+                                    { value: 'all', label: i18n._({ id: 'node.window.panel.all', message: 'All' }) },
+                                    {
+                                        value: 'individual',
+                                        label: i18n._({ id: 'node.window.panel.individual', message: 'Individual' }),
+                                    },
+                                ], value: openingRadiusMode }), openingRadiusMode === 'all' ? (_jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.cornerRadius', message: 'Corner radius' }), max: maxRoundedRadius, min: 0, onChange: (value) => previewWindowUpdate('cornerRadius', value), onCommit: (value) => commitWindowPreview('cornerRadius', value), 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],
+                                    [i18n._({ id: 'node.cornerRadius.bottomRight', message: 'Bottom right' }), 2],
+                                    [i18n._({ id: 'node.cornerRadius.bottomLeft', message: 'Bottom left' }), 3],
+                                ].map(([label, index]) => (_jsx(SliderControl, { label: label, max: maxRoundedRadius, min: 0, onChange: (value) => setOpeningCornerRadius(index, value), onCommit: (value) => setOpeningCornerRadius(index, value, true), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 2, step: 0.05, unit: "m", value: openingCornerRadii[index] ?? 0 }, label))) })), _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.revealRadius', message: 'Reveal radius' }), max: 0.08, min: 0, onChange: (value) => previewWindowUpdate('openingRevealRadius', value), onCommit: (value) => commitWindowPreview('openingRevealRadius', value), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 3, step: 0.005, unit: "m", value: openingRevealRadius })] })), windowShape === 'arch' && (_jsx("div", { className: "mt-2 flex flex-col gap-1", children: _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.archHeight', message: 'Arch height' }), max: Math.max(0.05, node.height), min: 0.05, onChange: (value) => previewWindowUpdate('archHeight', value), onCommit: (value) => commitWindowPreview('archHeight', value), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: archHeight }) }))] })), showOpeningShapeSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.window.panel.openingShape', message: 'Opening shape' }), children: [_jsx(SegmentedControl, { onChange: (value) => handleUpdate({ openingShape: value }), options: [
+                            {
+                                value: 'rectangle',
+                                label: i18n._({ id: 'node.window.panel.rect', message: 'Rect' }),
+                            },
+                            {
+                                value: 'rounded',
+                                label: i18n._({ id: 'node.window.panel.rounded', message: 'Rounded' }),
+                            },
+                            { value: 'arch', label: i18n._({ id: 'node.window.panel.arch', message: 'Arch' }) },
                         ], value: openingShape }), openingShape === 'rounded' && (_jsxs("div", { className: "mt-2 flex flex-col gap-1", children: [_jsx(SegmentedControl, { onChange: (value) => handleUpdate({ openingRadiusMode: value }), options: [
-                                    { value: 'all', label: 'All' },
-                                    { value: 'individual', label: 'Individual' },
-                                ], value: openingRadiusMode }), openingRadiusMode === 'all' ? (_jsx(SliderControl, { label: "Corner Radius", max: maxRoundedRadius, min: 0, onChange: (value) => previewWindowUpdate('cornerRadius', value), onCommit: (value) => commitWindowPreview('cornerRadius', value), 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],
-                                    ['Bottom Right', 2],
-                                    ['Bottom Left', 3],
-                                ].map(([label, index]) => (_jsx(SliderControl, { label: label, max: maxRoundedRadius, min: 0, onChange: (value) => setOpeningCornerRadius(index, value), onCommit: (value) => setOpeningCornerRadius(index, value, true), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 2, step: 0.05, unit: "m", value: openingCornerRadii[index] ?? 0 }, label))) })), _jsx(SliderControl, { label: "Reveal Radius", max: 0.08, min: 0, onChange: (value) => previewWindowUpdate('openingRevealRadius', value), onCommit: (value) => commitWindowPreview('openingRevealRadius', value), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 3, step: 0.005, unit: "m", value: openingRevealRadius })] })), openingShape === 'arch' && (_jsx("div", { className: "mt-2 flex flex-col gap-1", children: _jsx(SliderControl, { label: "Arch Height", max: Math.max(0.05, node.height), min: 0.05, onChange: (value) => previewWindowUpdate('archHeight', value), onCommit: (value) => commitWindowPreview('archHeight', value), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: archHeight }) }))] })), !isOpening && !scripted && (_jsxs(_Fragment, { children: [showFrameSection && (_jsxs(PanelSection, { title: "Frame", children: [_jsx(SliderControl, { label: "Thickness", min: 0, onChange: (v) => previewWindowUpdate('frameThickness', v), onCommit: (v) => commitWindowPreview('frameThickness', v), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 3, step: 0.01, unit: "m", value: node.frameThickness }), _jsx(SliderControl, { label: "Depth", min: 0, onChange: (v) => previewWindowUpdate('frameDepth', v), onCommit: (v) => commitWindowPreview('frameDepth', v), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 3, step: 0.01, unit: "m", value: node.frameDepth })] })), showGridSection && (_jsxs(PanelSection, { title: "Grid", children: [_jsx(SliderControl, { label: "Columns", max: 8, min: 1, onChange: (v) => {
-                                    const n = Math.max(1, Math.min(8, Math.round(v)));
-                                    handleUpdate({ columnRatios: Array(n).fill(1 / n) });
-                                }, precision: 0, step: 1, value: numCols }), _jsx(SliderControl, { label: "Rows", max: 8, min: 1, onChange: (v) => {
-                                    const n = Math.max(1, Math.min(8, Math.round(v)));
-                                    handleUpdate({ rowRatios: Array(n).fill(1 / n) });
-                                }, precision: 0, step: 1, value: numRows }), numCols > 1 && (_jsxs("div", { className: "mt-2 flex flex-col gap-1", children: [_jsx("div", { className: "mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: "Col Widths" }), normCols.map((ratio, i) => (_jsx(SliderControl, { label: `C${i + 1}`, max: 95, min: 5, onChange: (v) => setColumnRatio(i, v / 100), precision: 1, step: 1, unit: "%", value: Math.round(ratio * 100 * 10) / 10 }, `c-${i}`))), _jsx("div", { className: "mt-1 border-border/50 border-t pt-1", children: _jsx(SliderControl, { label: "Divider", max: 0.1, min: 0.005, onChange: (v) => handleUpdate({ columnDividerThickness: v }), precision: 3, step: 0.01, unit: "m", value: node.columnDividerThickness ?? 0.03 }) })] })), numRows > 1 && (_jsxs("div", { className: "mt-2 flex flex-col gap-1", children: [_jsx("div", { className: "mb-1 px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: "Row Heights" }), normRows.map((ratio, i) => (_jsx(SliderControl, { label: `R${i + 1}`, max: 95, min: 5, onChange: (v) => setRowRatio(i, v / 100), precision: 1, step: 1, unit: "%", value: Math.round(ratio * 100 * 10) / 10 }, `r-${i}`))), _jsx("div", { className: "mt-1 border-border/50 border-t pt-1", children: _jsx(SliderControl, { label: "Divider", max: 0.1, min: 0.005, onChange: (v) => handleUpdate({ rowDividerThickness: v }), precision: 3, step: 0.01, unit: "m", value: node.rowDividerThickness ?? 0.03 }) })] }))] })), showSillSection && (_jsxs(PanelSection, { title: "Sill", children: [_jsx(ToggleControl, { checked: node.sill, label: "Enable Sill", onChange: (checked) => handleUpdate({ sill: checked }) }), node.sill && (_jsxs("div", { className: "mt-1 flex flex-col gap-1", children: [_jsx(SliderControl, { label: "Depth", min: 0, onChange: (v) => handleUpdate({ sillDepth: v }), precision: 3, step: 0.01, unit: "m", value: node.sillDepth }), _jsx(SliderControl, { label: "Thickness", min: 0, onChange: (v) => handleUpdate({ sillThickness: v }), precision: 3, step: 0.01, unit: "m", value: node.sillThickness })] }))] }))] })), _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 })] }) })] }));
+                                    { value: 'all', label: i18n._({ id: 'node.window.panel.all', message: 'All' }) },
+                                    {
+                                        value: 'individual',
+                                        label: i18n._({ id: 'node.window.panel.individual', message: 'Individual' }),
+                                    },
+                                ], value: openingRadiusMode }), openingRadiusMode === 'all' ? (_jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.cornerRadius', message: 'Corner radius' }), max: maxRoundedRadius, min: 0, onChange: (value) => previewWindowUpdate('cornerRadius', value), onCommit: (value) => commitWindowPreview('cornerRadius', value), 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],
+                                    [i18n._({ id: 'node.cornerRadius.bottomRight', message: 'Bottom right' }), 2],
+                                    [i18n._({ id: 'node.cornerRadius.bottomLeft', message: 'Bottom left' }), 3],
+                                ].map(([label, index]) => (_jsx(SliderControl, { label: label, max: maxRoundedRadius, min: 0, onChange: (value) => setOpeningCornerRadius(index, value), onCommit: (value) => setOpeningCornerRadius(index, value, true), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 2, step: 0.05, unit: "m", value: openingCornerRadii[index] ?? 0 }, label))) })), _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.revealRadius', message: 'Reveal radius' }), max: 0.08, min: 0, onChange: (value) => previewWindowUpdate('openingRevealRadius', value), onCommit: (value) => commitWindowPreview('openingRevealRadius', value), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 3, step: 0.005, unit: "m", value: openingRevealRadius })] })), openingShape === 'arch' && (_jsx("div", { className: "mt-2 flex flex-col gap-1", children: _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.archHeight', message: 'Arch height' }), max: Math.max(0.05, node.height), min: 0.05, onChange: (value) => previewWindowUpdate('archHeight', value), onCommit: (value) => commitWindowPreview('archHeight', value), onCancel: () => preview?.cancel(), previewWhileTyping: true, precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: archHeight }) }))] })), (showOperationSection || showAwningDirectionSection || showCasementSection) && (_jsx(PanelSection, { title: operationLabel, children: _jsxs("div", { className: "flex flex-col gap-2", children: [showAwningDirectionSection && (_jsx("div", { children: _jsx(SegmentedControl, { onChange: (value) => handleUpdate({
+                                    windowType: 'awning',
+                                    awningDirection: value,
+                                }), options: [
+                                    { value: 'up', label: i18n._({ id: 'node.window.panel.up', message: 'Up' }) },
+                                    {
+                                        value: 'down',
+                                        label: i18n._({ id: 'node.window.panel.down', message: 'Down' }),
+                                    },
+                                ], value: awningDirection }) })), showCasementSection && (_jsxs("div", { className: "space-y-2", children: [_jsx(SegmentedControl, { onChange: (value) => handleUpdate({ casementStyle: value }), options: [
+                                        {
+                                            value: 'single',
+                                            label: i18n._({ id: 'node.window.panel.single', message: 'Single' }),
+                                        },
+                                        {
+                                            value: 'french',
+                                            label: i18n._({ id: 'node.window.panel.french', message: 'French' }),
+                                        },
+                                    ], value: node.casementStyle ?? 'single' }), (node.casementStyle ?? 'single') === 'single' && (_jsx(SegmentedControl, { onChange: (value) => handleUpdate({ hingesSide: value }), options: [
+                                        {
+                                            value: 'left',
+                                            label: i18n._({ id: 'node.window.panel.left', message: 'Left' }),
+                                        },
+                                        {
+                                            value: 'right',
+                                            label: i18n._({ id: 'node.window.panel.right', message: 'Right' }),
+                                        },
+                                    ], value: node.hingesSide ?? 'left' }))] })), showTiltTurnSection && (_jsxs(_Fragment, { children: [_jsx(Captioned, { label: i18n._({ id: 'node.window.panel.tiltTurnMode', message: 'Mode' }), children: _jsx(SegmentedControl, { onChange: (value) => handleUpdate({ tiltTurnMode: value }), options: [
+                                            {
+                                                value: 'tilt',
+                                                label: i18n._({ id: 'node.window.panel.tiltTurnTilt', message: 'Tilt' }),
+                                            },
+                                            {
+                                                value: 'turn',
+                                                label: i18n._({ id: 'node.window.panel.tiltTurnTurn', message: 'Turn' }),
+                                            },
+                                        ], value: node.tiltTurnMode ?? 'tilt' }) }), node.tiltTurnMode === 'turn' && (_jsx(Captioned, { label: i18n._({ id: 'node.window.panel.hingesSide', message: 'Hinges side' }), children: _jsx(SegmentedControl, { onChange: (value) => handleUpdate({ hingesSide: value }), options: [
+                                            {
+                                                value: 'left',
+                                                label: i18n._({ id: 'node.window.panel.left', message: 'Left' }),
+                                            },
+                                            {
+                                                value: 'right',
+                                                label: i18n._({ id: 'node.window.panel.right', message: 'Right' }),
+                                            },
+                                        ], value: node.hingesSide ?? 'left' }) }))] })), showOpensRow && (_jsx(Captioned, { label: i18n._({ id: 'node.window.panel.opens', message: 'Opens' }), children: _jsx(SegmentedControl, { onChange: (value) => handleUpdate({ openingDirection: value }), options: [
+                                    {
+                                        value: 'outward',
+                                        label: i18n._({ id: 'node.window.panel.outward', message: 'Outward' }),
+                                    },
+                                    {
+                                        value: 'inward',
+                                        label: i18n._({ id: 'node.window.panel.inward', message: 'Inward' }),
+                                    },
+                                ], value: openingDirection }) })), showOperationSection && (_jsx("div", { children: _jsx(SliderControl, { label: showTiltTurnSection
+                                    ? i18n._({ id: 'node.window.panel.open', message: 'Open' })
+                                    : operationLabel, max: 1, min: 0, onChange: setOperationState, precision: 2, restoreOnCommit: false, step: 0.05, value: Math.round((node.operationState ?? 0) * 100) / 100 }) }))] }) })), showFrameSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.window.panel.frame', message: 'Frame' }), children: [_jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.thickness', message: 'Thickness' }), min: 0, onChange: (v) => previewWindowUpdate('frameThickness', v), onCommit: (v) => commitWindowPreview('frameThickness', v), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, precision: 3, step: 0.01, unit: "m", value: node.frameThickness }), _jsx(SliderControl, { label: isAutoFrameDepth(node)
+                            ? i18n._({ id: 'node.window.panel.frameDepthAuto', message: 'Depth (auto)' })
+                            : i18n._({ id: 'node.window.panel.depth', message: 'Depth' }), min: 0, onChange: (v) => previewWindowUpdate('frameDepth', v), onCommit: (v) => commitWindowPreview('frameDepth', v), onCancel: () => preview?.cancel(), previewWhileTyping: true, restoreOnCommit: false, 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.window.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.window.panel.auto', message: 'Auto' }) })] })), _jsx(OpeningDepthPositionControl, { node: node, onUpdate: handleUpdate })] })), showSillSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.window.panel.sill', message: 'Sill' }), children: [_jsx(ToggleControl, { checked: node.sill, label: i18n._({ id: 'node.window.panel.enableSill', message: 'Enable sill' }), onChange: (checked) => handleUpdate({ sill: checked }) }), node.sill && (_jsxs("div", { className: "mt-1 flex flex-col gap-1", children: [_jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.depth', message: 'Depth' }), min: 0, onChange: (v) => handleUpdate({ sillDepth: v }), precision: 3, step: 0.01, unit: "m", value: node.sillDepth }), _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.thickness', message: 'Thickness' }), min: 0, onChange: (v) => handleUpdate({ sillThickness: v }), precision: 3, step: 0.01, unit: "m", value: node.sillThickness }), _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.overhang', message: 'Overhang' }), max: 0.15, min: 0, onChange: (v) => handleUpdate({ sillOverhang: Math.max(0, Math.min(0.15, v)) }), precision: 3, step: 0.005, unit: "m", value: node.sillOverhang ?? node.sillDepth * 0.4 })] })), _jsx(ToggleControl, { checked: node.sillInterior === true, label: i18n._({ id: 'node.window.panel.insideSill', message: 'Inside sill' }), onChange: (checked) => handleUpdate({ sillInterior: checked }) }), node.sillInterior === true && (_jsxs("div", { className: "mt-1 flex flex-col gap-1", children: [_jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.depth', message: 'Depth' }), max: 0.3, min: 0.02, onChange: (v) => handleUpdate({ sillInteriorDepth: Math.max(0.02, Math.min(0.3, v)) }), precision: 3, step: 0.005, unit: "m", value: node.sillInteriorDepth ?? INSIDE_SILL_DEPTH }), _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.thickness', message: 'Thickness' }), max: 0.05, min: 0.015, onChange: (v) => handleUpdate({ sillInteriorThickness: Math.max(0.015, Math.min(0.05, v)) }), precision: 3, step: 0.005, unit: "m", value: node.sillInteriorThickness ?? INSIDE_SILL_THICKNESS }), _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.overhang', message: 'Overhang' }), max: 0.15, min: 0, onChange: (v) => handleUpdate({ sillInteriorOverhang: Math.max(0, Math.min(0.15, v)) }), precision: 3, step: 0.005, unit: "m", value: node.sillInteriorOverhang ?? INSIDE_SILL_OVERHANG })] })), (node.sill || node.sillInterior === true) && (_jsx("div", { className: "mt-1 border-border/50 border-t pt-1", children: _jsx(FinishSwatch, { fallback: node.slots?.frame ?? FRAME_FINISH_DEFAULT, label: i18n._({ id: 'node.window.panel.finish', message: 'Finish' }), node: node, paintRole: "sill", value: node.slots?.sill }) }))] })), _jsx(OpeningCasingSection, { node: node, onUpdate: handleUpdate }), showShuttersSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.window.panel.shutters', message: 'Shutters' }), children: [_jsx(SegmentedControl, { onChange: (value) => handleUpdate({ shutters: value }), options: [
+                            {
+                                value: 'none',
+                                label: i18n._({ id: 'node.window.panel.shuttersNone', message: 'None' }),
+                            },
+                            {
+                                value: 'louvered',
+                                label: i18n._({ id: 'node.window.panel.shuttersLouvered', message: 'Louvered' }),
+                            },
+                            {
+                                value: 'panel',
+                                label: i18n._({ id: 'node.window.panel.shuttersPanel', message: 'Panel' }),
+                            },
+                            {
+                                value: 'board-batten',
+                                label: i18n._({
+                                    id: 'node.window.panel.shuttersBoardBatten',
+                                    message: 'Board and batten',
+                                }),
+                            },
+                        ], value: shutters }), shutters !== 'none' && (_jsxs("div", { className: "mt-1 flex flex-col gap-1", children: [_jsx(Captioned, { label: i18n._({ id: 'node.window.panel.shutterSides', message: 'Sides' }), children: _jsx(SegmentedControl, { onChange: (value) => handleUpdate({ shutterSides: value }), options: [
+                                        {
+                                            value: 'both',
+                                            label: i18n._({ id: 'node.window.panel.shutterSidesBoth', message: 'Both' }),
+                                        },
+                                        {
+                                            value: 'left',
+                                            label: i18n._({ id: 'node.window.panel.left', message: 'Left' }),
+                                        },
+                                        {
+                                            value: 'right',
+                                            label: i18n._({ id: 'node.window.panel.right', message: 'Right' }),
+                                        },
+                                    ], value: node.shutterSides ?? 'both' }) }), _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.width', message: 'Width' }), max: toShownLength(maxShutterWidth), min: toShownLength(MIN_SHUTTER_WIDTH), onChange: (value) => {
+                                    const meters = imperial ? value * INCH : value;
+                                    handleUpdate({
+                                        shutterWidth: Math.min(Math.max(meters, MIN_SHUTTER_WIDTH), maxShutterWidth),
+                                    });
+                                }, precision: imperial ? 1 : 2, step: imperial ? 0.5 : 0.01, unit: imperial ? 'in' : 'm', value: toShownLength(shutterWidth) }), _jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.open', message: 'Open' }), max: 100, min: 0, onChange: (v) => setShutterState('shutterOpen', v), precision: 0, restoreOnCommit: false, step: 5, unit: "%", value: Math.round((node.shutterOpen ?? 1) * 100) })] })), _jsxs("div", { className: "mt-1 flex flex-col gap-1 border-border/50 border-t pt-1", children: [_jsx(Captioned, { label: i18n._({ id: 'node.window.panel.rollerShutter', message: 'Roller shutter' }), children: _jsx(SegmentedControl, { onChange: (value) => handleUpdate({ rollerShutter: value }), options: [
+                                        {
+                                            value: 'none',
+                                            label: i18n._({ id: 'node.window.panel.rollerShutterNone', message: 'None' }),
+                                        },
+                                        {
+                                            value: 'box',
+                                            label: i18n._({ id: 'node.window.panel.rollerShutterBox', message: 'Box' }),
+                                        },
+                                        {
+                                            value: 'concealed',
+                                            label: i18n._({
+                                                id: 'node.window.panel.rollerShutterConcealed',
+                                                message: 'Concealed',
+                                            }),
+                                        },
+                                    ], value: rollerShutter }) }), rollerShutter === 'box' && (_jsx(SliderControl, { label: i18n._({
+                                    id: 'node.window.panel.rollerShutterBoxHeight',
+                                    message: 'Box height',
+                                }), max: MAX_ROLLER_BOX_HEIGHT, min: MIN_ROLLER_BOX_HEIGHT, onChange: (value) => handleUpdate({
+                                    rollerShutterBoxHeight: Math.min(Math.max(value, MIN_ROLLER_BOX_HEIGHT), MAX_ROLLER_BOX_HEIGHT),
+                                }), precision: 2, step: 0.01, unit: "m", value: node.rollerShutterBoxHeight ?? DEFAULT_ROLLER_BOX_HEIGHT })), rollerShutter !== 'none' && (_jsx(SliderControl, { label: i18n._({ id: 'node.window.panel.open', message: 'Open' }), max: 100, min: 0, onChange: (v) => setShutterState('rollerShutterOpen', v), precision: 0, restoreOnCommit: false, step: 5, unit: "%", value: Math.round((node.rollerShutterOpen ?? 1) * 100) }))] }), (shutters !== 'none' || rollerShutter !== 'none') && (_jsx("div", { className: "mt-1 border-border/50 border-t pt-1", children: _jsx(FinishSwatch, { fallback: SHUTTERS_FINISH_DEFAULT, label: i18n._({ id: 'node.window.panel.finish', message: 'Finish' }), node: node, paintRole: "shutters", value: node.slots?.shutters }) }))] })), showHardwareSection && (_jsxs(PanelSection, { title: i18n._({ id: 'node.window.panel.hardware', message: 'Hardware' }), children: [_jsx(ToggleControl, { checked: node.windowHandle !== false, label: i18n._({ id: 'node.window.panel.handle', message: 'Handle' }), onChange: (checked) => handleUpdate({ windowHandle: checked }) }), _jsx(FinishSwatch, { fallback: node.slots?.frame ?? FRAME_FINISH_DEFAULT, label: i18n._({ id: 'node.window.panel.finish', message: 'Finish' }), node: node, paintRole: "hardware", value: node.slots?.hardware })] })), _jsx(PanelSection, { title: i18n._({ id: 'node.window.panel.actions', message: 'Actions' }), children: _jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: _jsx(Move, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.window.panel.move', message: 'Move' }), onClick: handleMove }), _jsx(ActionButton, { icon: _jsx(Copy, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.window.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.window.panel.delete', message: 'Delete' }), onClick: handleDelete })] }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"placement.d.ts","sourceRoot":"","sources":["../../src/window/placement.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAqB,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC/E,OAAO,EAKL,KAAK,WAAW,EAGjB,MAAM,2BAA2B,CAAA;AASlC,mEAAmE;AACnE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,CAAC,YAAY,CAAC,CAAA;CAAE,CAUvF,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,UAAU,CAAC,YAAY,CAAC,CAAA;IAC9B,KAAK,EAAE,WAAW,CAAA;IAClB,SAAS,IAAI,IAAI,CAAA;IACjB,UAAU,IAAI,IAAI,CAAA;CACnB,CAAA;AAID,eAAO,MAAM,kBAAkB,mFAW5B,CAAA;AAEH;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAAC,UAAU,CAAC,CAOxD;AAED,eAAO,MAAM,sBAAsB,EAAE,QAAQ,EAgC5C,CAAA;AAYD,iGAAiG;AACjG,eAAO,MAAM,0BAA0B;IACrC,SAAS,aAAa,MAAM,IAAI;IAChC,KAAK;CAIN,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,QAAQ,EASzC,CAAA"}
+{"version":3,"file":"placement.d.ts","sourceRoot":"","sources":["../../src/window/placement.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAqB,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC/E,OAAO,EAML,KAAK,WAAW,EAGjB,MAAM,2BAA2B,CAAA;AASlC,mEAAmE;AACnE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,UAAU,CAAC,YAAY,CAAC,CAAA;CAAE,CAWvF,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,UAAU,CAAC,YAAY,CAAC,CAAA;IAC9B,KAAK,EAAE,WAAW,CAAA;IAClB,SAAS,IAAI,IAAI,CAAA;IACjB,UAAU,IAAI,IAAI,CAAA;CACnB,CAAA;AAID,eAAO,MAAM,kBAAkB,mFAW5B,CAAA;AAEH;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAAC,UAAU,CAAC,CAUxD;AAED,eAAO,MAAM,sBAAsB,EAAE,QAAQ,EAgC5C,CAAA;AAYD,iGAAiG;AACjG,eAAO,MAAM,0BAA0B;IACrC,SAAS,aAAa,MAAM,IAAI;IAChC,KAAK;CAIN,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,QAAQ,EASzC,CAAA"}

package/dist/window/placement.js

@@ -1,5 +1,5 @@
 // The window tool's placement choices: the chips [O] Type and [L] Style.
-import { getWindowStyleOverrides, SILLLESS_WINDOW_TYPES, WINDOW_STYLE_CHOICES, WINDOW_STYLE_LABELS, windowTakesStyle, windowTypeFields, } from '@pascal-app/core/building';
+import { getWindowStyleOverrides, NEW_WINDOW_FRAME_THICKNESS, SILLLESS_WINDOW_TYPES, WINDOW_STYLE_CHOICES, WINDOW_STYLE_LABELS, windowTakesStyle, windowTypeFields, } from '@pascal-app/core/building';
 import { CORNER_BLOCK_NOTES, cornerHintRows, useCornerSnapHint, } from '@pascal-app/editor';
 import { create } from 'zustand';
 /** The window panel's Window Type row and the tool's Type chip. */
@@ -8,6 +8,7 @@ export const windowTypeOptions = [
     { label: 'Sliding', value: 'sliding' },
     { label: 'Casement', value: 'casement' },
     { label: 'Awning', value: 'awning' },
+    { label: 'Tilt and Turn', value: 'tilt-turn' },
     { label: 'Single Hung', value: 'single-hung' },
     { label: 'Double Hung', value: 'double-hung' },
     { label: 'Bay', value: 'bay' },
@@ -31,6 +32,9 @@ export const useWindowPlacement = create((set, get) => ({
 export function placedWindowFields() {
     const { type, style } = useWindowPlacement.getState();
     return {
+        frameThickness: NEW_WINDOW_FRAME_THICKNESS,
+        casingFaceA: true,
+        casingFaceB: true,
         ...windowTypeFields(type),
         sill: !SILLLESS_WINDOW_TYPES.has(type),
         ...(windowTakesStyle(type) ? getWindowStyleOverrides(style) : {}),

package/dist/window/swing.d.ts

@@ -0,0 +1,13 @@
+import type { WindowNode } from '@pascal-app/core';
+type HingedWindow = Pick<WindowNode, 'windowType' | 'casementStyle' | 'hingesSide'> & Partial<Pick<WindowNode, 'openingKind' | 'source'>>;
+/**
+ * Whether a window hangs one sash from a side jamb, so its hinge side can be swapped: a single
+ * casement. A French casement hinges on both jambs; awning and hopper sashes hinge on the head
+ * or the sill, and every other type slides, pivots or stays fixed. A window has no inward or
+ * outward setting, so there is no swing side to swap.
+ */
+export declare function canSwapWindowHinge(node: HingedWindow): boolean;
+/** The sash hung from the other jamb. */
+export declare function swapWindowHingePatch(node: HingedWindow): Partial<WindowNode>;
+export {};
+//# sourceMappingURL=swing.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"swing.d.ts","sourceRoot":"","sources":["../../src/window/swing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAElD,KAAK,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,eAAe,GAAG,YAAY,CAAC,GACjF,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAA;AAErD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAO9D;AAED,yCAAyC;AACzC,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,UAAU,CAAC,CAE5E"}

package/dist/window/swing.js

@@ -0,0 +1,16 @@
+/**
+ * Whether a window hangs one sash from a side jamb, so its hinge side can be swapped: a single
+ * casement. A French casement hinges on both jambs; awning and hopper sashes hinge on the head
+ * or the sill, and every other type slides, pivots or stays fixed. A window has no inward or
+ * outward setting, so there is no swing side to swap.
+ */
+export function canSwapWindowHinge(node) {
+    return (!node.source &&
+        node.openingKind !== 'opening' &&
+        node.windowType === 'casement' &&
+        (node.casementStyle ?? 'single') === 'single');
+}
+/** The sash hung from the other jamb. */
+export function swapWindowHingePatch(node) {
+    return { hingesSide: node.hingesSide === 'right' ? 'left' : 'right' };
+}