@pascal-app/nodes 1.0.6 → 1.1.0

package/dist/wall/panel.js

@@ -1,18 +1,22 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { assemblyThickness, BRICK_AIR_SPACE, BRICK_VENEER, FIBER_CEMENT, GROUND_SUPPORT_ID, GYPSUM_HALF, GYPSUM_SHEATHING, getClampedWallCurveOffset, getMaxWallCurveOffset, getWallAssemblyPreset, getWallCurveLength, normalizeWallCurveOffset, resolveWallAssembly, runAsSingleSceneHistoryStep, SIDING_LAP, STONE_VENEER_UNVERIFIED, STUCCO_3_COAT, terrainSupportLift, useLiveNodeOverrides, useScene, WALL_ASSEMBLY_PRESETS, WALL_CHAIR_RAIL_DEFAULT, WALL_CROWN_DEFAULT, WALL_SKIRTING_DEFAULT, WSP_SHEATHING, wallAssemblyFromLegacy, wallAssemblyPatch, wallAssemblyToLegacy, wallAssemblyUnverifiedNote, wallTrimPatch, } from '@pascal-app/core';
+import { assemblyThickness, FRAMING_SPACINGS, formatLinearMeasurement, GROUND_SUPPORT_ID, GYPSUM_HALF, GYPSUM_SHEATHING, getClampedWallCurveOffset, getLinearUnitLabel, getMaxWallCurveOffset, getWallAssemblyPreset, getWallCurveLength, linearControlValueToMeters, metersToLinearUnit, normalizeWallCurveOffset, resolveWallAssembly, runAsSingleSceneHistoryStep, terrainSupportLift, useLiveNodeOverrides, usePascalI18n, useScene, WALL_ASSEMBLY_PRESETS, WALL_CHAIR_RAIL_DEFAULT, WALL_CROWN_DEFAULT, WALL_SKIRTING_DEFAULT, WSP_SHEATHING, wallAssemblyFromLegacy, wallAssemblyPatch, wallAssemblyToLegacy, wallAssemblyUnverifiedNote, wallTrimPatch, } from '@pascal-app/core';
 import { setWallFaceScript } from '@pascal-app/core/agent-operations';
-import { ActionButton, ActionGroup, curveReshapeScope, finishScriptCode, formatLinearMeasurement, getLinearUnitLabel, linearControlValueToMeters, metersToLinearUnit, PanelSection, PanelWrapper, SegmentedControl, SliderControl, triggerSFX, useInteractionScope, WallPaintRegionList, } from '@pascal-app/editor';
+import { ActionButton, ActionGroup, curveReshapeScope, finishScriptCode, PanelSection, PanelWrapper, SegmentedControl, SliderControl, triggerSFX, useInteractionScope, useProjectWallTypes, WallPaintRegionList, WallTypeMenu, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 import { Spline } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
+import { formatSpacing } from '../shared/build-up-controls.js';
+import { formatLayerThickness, parseLayerThickness } from '../shared/layer-thickness.js';
 import { resolveWallOpeningCeiling } from '../shared/wall-opening-ceiling.js';
 import { CurtainWallPanel } from './curtain-wall-panel.js';
 import { hasWallCurveBlockingChildren } from './curve-eligibility.js';
 import { buildWallLengthPatch } from './length-patch.js';
-import { wallReferenceModel } from './panel-model.js';
+import { EXTERIOR_FINISH_DEFAULT, EXTERIOR_FINISH_OPTIONS, wallReferenceModel, } from './panel-model.js';
 import { createWallPropertyPreview } from './property-preview.js';
+import { RailingWallPanel } from './railing-wall-panel.js';
+import { railingWallTypePatch } from './railing-wall-panel-model.js';
 /**
  * Base half of the plane-bound repair: a stamped draft offset goes, and a
  * ground host is dropped unless sculpted terrain actually supports it — a
@@ -29,30 +33,50 @@ function wallBaseRepairPatch(n) {
             : {}),
     };
 }
+const WALL_REFERENCE_LABELS = {
+    outside: /* i18n */ { id: 'node.wall.reference.outside', message: 'Outside face' },
+    center: /* i18n */ { id: 'node.wall.reference.center', message: 'Center' },
+    inside: /* i18n */ { id: 'node.wall.reference.inside', message: 'Inside face' },
+    left: /* i18n */ { id: 'node.wall.reference.left', message: 'Left' },
+    right: /* i18n */ { id: 'node.wall.reference.right', message: 'Right' },
+};
 const WALL_TRIM_PROFILE_OPTIONS = {
     skirting: [
-        { label: 'Flat', value: 'flat' },
-        { label: 'Modern', value: 'base-modern' },
-        { label: 'Colonial', value: 'base-colonial' },
-        { label: 'Shoe', value: 'base-shoe' },
-        { label: 'Ogee', value: 'base-ogee' },
+        { label: /* i18n */ { id: 'node.wall.panel.flat', message: 'Flat' }, value: 'flat' },
+        { label: /* i18n */ { id: 'node.wall.panel.modern', message: 'Modern' }, value: 'base-modern' },
+        {
+            label: /* i18n */ { id: 'node.wall.panel.colonial', message: 'Colonial' },
+            value: 'base-colonial',
+        },
+        { label: /* i18n */ { id: 'node.wall.panel.shoe', message: 'Shoe' }, value: 'base-shoe' },
+        { label: /* i18n */ { id: 'node.wall.panel.ogee', message: 'Ogee' }, value: 'base-ogee' },
     ],
     crown: [
-        { label: 'Flat', value: 'flat' },
-        { label: 'Cove', value: 'crown-cove' },
-        { label: 'Ogee', value: 'crown-ogee' },
-        { label: 'Craft', value: 'crown-craftsman' },
-        { label: 'Layered', value: 'crown-layered' },
+        { label: /* i18n */ { id: 'node.wall.panel.flat', message: 'Flat' }, value: 'flat' },
+        { label: /* i18n */ { id: 'node.wall.panel.cove', message: 'Cove' }, value: 'crown-cove' },
+        { label: /* i18n */ { id: 'node.wall.panel.ogee', message: 'Ogee' }, value: 'crown-ogee' },
+        {
+            label: /* i18n */ { id: 'node.wall.panel.craft', message: 'Craft' },
+            value: 'crown-craftsman',
+        },
+        {
+            label: /* i18n */ { id: 'node.wall.panel.layered', message: 'Layered' },
+            value: 'crown-layered',
+        },
     ],
     chairRail: [
-        { label: 'Flat', value: 'flat' },
-        { label: 'Round', value: 'rail-rounded' },
-        { label: 'Ogee', value: 'rail-ogee' },
-        { label: 'Picture', value: 'rail-picture' },
-        { label: 'Step', value: 'rail-stepped' },
+        { label: /* i18n */ { id: 'node.wall.panel.flat', message: 'Flat' }, value: 'flat' },
+        { label: /* i18n */ { id: 'node.wall.panel.round', message: 'Round' }, value: 'rail-rounded' },
+        { label: /* i18n */ { id: 'node.wall.panel.ogee', message: 'Ogee' }, value: 'rail-ogee' },
+        {
+            label: /* i18n */ { id: 'node.wall.panel.picture', message: 'Picture' },
+            value: 'rail-picture',
+        },
+        { label: /* i18n */ { id: 'node.wall.panel.step', message: 'Step' }, value: 'rail-stepped' },
     ],
 };
 export default function WallPanel() {
+    const i18n = usePascalI18n();
     const selectedId = useViewer((s) => s.selection.selectedIds[0]);
     const unit = useViewer((s) => s.unit);
     const setSelection = useViewer((s) => s.setSelection);
@@ -86,7 +110,7 @@ export default function WallPanel() {
         const wall = selectedId ? s.nodes[selectedId] : undefined;
         if (wall?.type !== 'wall')
             return undefined;
-        return resolveWallOpeningCeiling(wall, s.nodes);
+        return resolveWallOpeningCeiling(wall, s.nodes, 0);
     });
     const sceneNodes = useScene((s) => s.nodes);
     const reference = useMemo(() => (node ? wallReferenceModel([node], sceneNodes) : null), [node, sceneNodes]);
@@ -118,7 +142,7 @@ export default function WallPanel() {
         if (mode === 'custom' && !isCustom) {
             // Seed from the current effective height so the geometry doesn't
             // jump at the moment of detaching from the storey plane.
-            const seeded = resolveWallOpeningCeiling(n, useScene.getState().nodes);
+            const seeded = resolveWallOpeningCeiling(n, useScene.getState().nodes, 0);
             handleUpdate({ height: Math.max(0.1, seeded) });
         }
         else if (mode === 'storey' && isCustom) {
@@ -158,48 +182,102 @@ export default function WallPanel() {
     const followsTerrain = node.fillToTerrain === true;
     const isPlaneBound = node.height == null;
     const height = node.height ?? resolvedHeightMeters ?? 2.5;
+    const endHeightOffset = node.endHeightOffset ?? 0;
     const thickness = node.thickness ?? 0.1;
     const curveOffset = getClampedWallCurveOffset(node);
     const maxCurveOffset = getMaxWallCurveOffset(node);
     const unitLabel = getLinearUnitLabel(unit);
     const displayLength = metersToLinearUnit(length, unit);
     const displayHeight = metersToLinearUnit(height, unit);
+    const displayEndHeightOffset = metersToLinearUnit(endHeightOffset, unit);
     const displayThickness = metersToLinearUnit(thickness, unit);
     const displayCurveOffset = metersToLinearUnit(curveOffset, unit);
     const displayMaxCurveOffset = metersToLinearUnit(maxCurveOffset, unit);
     const curveOffsetLimit = Math.max(0.01, maxCurveOffset);
-    const wallHeightMeters = height;
+    const wallHeightMeters = resolvedHeightMeters ?? height;
     const skirting = { ...WALL_SKIRTING_DEFAULT, ...(node.skirting ?? {}) };
     const crown = { ...WALL_CROWN_DEFAULT, ...(node.crown ?? {}) };
     const chairRail = { ...WALL_CHAIR_RAIL_DEFAULT, ...(node.chairRail ?? {}) };
-    return (_jsxs(PanelWrapper, { icon: "/icons/wall.webp", onClose: handleClose, title: node.name || 'Wall', width: 280, children: [_jsx(PanelSection, { title: "Wall type", children: _jsx(SegmentedControl, { onChange: (wallType) => handleUpdate({ wallType }), options: [
-                        { label: 'Standard', value: 'standard' },
-                        { label: 'Curtain wall', value: 'curtain' },
-                    ], value: node.wallType ?? 'standard' }) }), _jsxs(PanelSection, { title: "Dimensions", children: [_jsx(SliderControl, { onCommit: handleCommit, onCancel: handleCancel, restoreOnCommit: false, previewWhileTyping: true, label: "Length", max: metersToLinearUnit(1000, unit), min: metersToLinearUnit(0.1, unit), onChange: (value) => handleUpdateLength(linearControlValueToMeters(value, unit, { maxMeters: 1000, minMeters: 0.1 })), precision: 2, step: unit === 'imperial' ? 0.1 : 0.01, unit: unitLabel, value: displayLength }), _jsx("div", { className: "px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: "Top" }), _jsx(SegmentedControl, { onChange: handleTopModeChange, options: [
-                            { label: 'Follows level', value: 'storey' },
-                            { label: 'Custom height', value: 'custom' },
-                        ], value: isPlaneBound ? 'storey' : 'custom' }), isPlaneBound ? (_jsxs("div", { className: "px-1 text-[11px] text-muted-foreground", children: ["Currently ", formatLinearMeasurement(height, unit)] })) : (_jsx(SliderControl, { onCommit: handleCommit, onCancel: handleCancel, restoreOnCommit: false, previewWhileTyping: true, label: "Height", max: metersToLinearUnit(1000, unit), min: metersToLinearUnit(0.1, unit), onChange: (v) => handlePreview({
-                            height: linearControlValueToMeters(v, unit, { maxMeters: 1000, minMeters: 0.1 }),
-                        }), precision: 2, step: 0.1, unit: unitLabel, value: Math.round(displayHeight * 100) / 100 })), _jsx("div", { className: "px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: "Bottom" }), _jsx(SegmentedControl, { onChange: handleInfillChange, options: [
-                            { label: 'Auto', value: 'auto' },
-                            { label: 'Fill to terrain', value: 'terrain' },
-                        ], value: followsTerrain ? 'terrain' : 'auto' }), followsTerrain && (_jsx("div", { className: "px-1 text-[11px] text-muted-foreground", children: "Extends downward to meet the terrain. Height and top stay unchanged." })), node.assembly && node.wallType !== 'curtain' ? (_jsxs("div", { className: "flex items-center justify-between px-2 py-1.5", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground uppercase tracking-wider", children: "Thickness" }), _jsxs("span", { className: "text-[11px] text-muted-foreground tabular-nums", children: [formatLinearMeasurement(thickness, unit), " \u00B7 from assembly"] })] })) : (_jsx(SliderControl, { onCommit: handleCommit, onCancel: handleCancel, restoreOnCommit: false, previewWhileTyping: true, label: node.wallType === 'curtain' ? 'Frame depth' : 'Thickness', max: metersToLinearUnit(1000, unit), min: metersToLinearUnit(0.05, unit), onChange: (v) => handlePreview({
-                            thickness: linearControlValueToMeters(v, unit, {
-                                maxMeters: 1000,
-                                minMeters: 0.05,
-                            }),
-                        }), precision: 3, step: 0.01, unit: unitLabel, value: Math.round(displayThickness * 1000) / 1000 })), _jsx("div", { className: "px-1 font-medium text-[10px] text-muted-foreground/80", children: "Reference" }), reference && (_jsx(SegmentedControl, { mixed: reference.value === null, onChange: (value) => reference.apply(value), options: reference.options, value: reference.value ?? 'center' })), !hasWallChildrenBlockingCurve && (_jsx(SliderControl, { onCommit: handleCommit, onCancel: handleCancel, restoreOnCommit: false, previewWhileTyping: true, label: "Curve", max: Math.max(metersToLinearUnit(0.01, unit), displayMaxCurveOffset), min: -Math.max(metersToLinearUnit(0.01, unit), displayMaxCurveOffset), onChange: (v) => handlePreview({
+    // A railing keeps its own height, its posts set its thickness, and it has no assembly or faces:
+    // the Railing section holds its controls instead.
+    const railing = node.wallType === 'railing';
+    return (_jsxs(PanelWrapper, { icon: "/icons/wall.webp", onClose: handleClose, title: node.name || i18n._({ id: 'node.wall.panel.wall', message: 'Wall' }), width: 280, children: [_jsx(PanelSection, { title: i18n._({ id: 'node.wall.panel.wallType', message: 'Wall type' }), children: _jsx(SegmentedControl, { onChange: (wallType) => handleUpdate(wallType === 'railing' ? railingWallTypePatch(node) : { wallType }), options: [
+                        {
+                            label: i18n._({ id: 'node.wall.panel.standard', message: 'Standard' }),
+                            value: 'standard',
+                        },
+                        {
+                            label: i18n._({ id: 'node.wall.panel.curtainWall', message: 'Curtain wall' }),
+                            value: 'curtain',
+                        },
+                        {
+                            label: i18n._({ id: 'node.wall.panel.railing', message: 'Railing' }),
+                            value: 'railing',
+                        },
+                    ], value: node.wallType ?? 'standard' }) }), node.wallType !== 'curtain' && !railing && (_jsx(WallAssemblySection, { node: node, onUpdate: handleUpdate, unit: unit })), _jsxs(PanelSection, { title: i18n._({ id: 'node.wall.panel.dimensions', message: 'Dimensions' }), children: [_jsx(SliderControl, { onCommit: handleCommit, onCancel: handleCancel, restoreOnCommit: false, previewWhileTyping: true, label: i18n._({ id: 'node.wall.panel.length', message: 'Length' }), max: metersToLinearUnit(1000, unit), min: metersToLinearUnit(0.1, unit), onChange: (value) => handleUpdateLength(linearControlValueToMeters(value, unit, { maxMeters: 1000, minMeters: 0.1 })), precision: 2, step: unit === 'imperial' ? 0.1 : 0.01, unit: unitLabel, value: displayLength }), !railing && (_jsxs(_Fragment, { children: [_jsx("div", { className: "px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: i18n._({ id: 'node.wall.panel.top', message: 'Top' }) }), _jsx(SegmentedControl, { onChange: handleTopModeChange, options: [
+                                    {
+                                        label: i18n._({ id: 'node.wall.panel.followsLevel', message: 'Follows level' }),
+                                        value: 'storey',
+                                    },
+                                    {
+                                        label: i18n._({ id: 'node.wall.panel.customHeight', message: 'Custom height' }),
+                                        value: 'custom',
+                                    },
+                                ], value: isPlaneBound ? 'storey' : 'custom' }), isPlaneBound ? (_jsx("div", { className: "px-1 text-[11px] text-muted-foreground", children: i18n._({
+                                    id: 'node.panel.currently',
+                                    message: 'Currently {value}',
+                                    values: { value: formatLinearMeasurement(height, unit) },
+                                }) })) : (_jsx(SliderControl, { onCommit: handleCommit, onCancel: handleCancel, restoreOnCommit: false, previewWhileTyping: true, label: i18n._({ id: 'node.wall.panel.height', message: 'Height' }), max: metersToLinearUnit(1000, unit), min: metersToLinearUnit(0.1, unit), onChange: (v) => handlePreview({
+                                    height: linearControlValueToMeters(v, unit, {
+                                        maxMeters: 1000,
+                                        minMeters: 0.1,
+                                    }),
+                                }), precision: 2, step: 0.1, unit: unitLabel, value: Math.round(displayHeight * 100) / 100 })), _jsx(SliderControl, { onCommit: handleCommit, onCancel: handleCancel, restoreOnCommit: false, previewWhileTyping: true, label: i18n._({
+                                    id: 'node.wall.panel.endHeightOffset',
+                                    message: 'End height offset',
+                                }), min: metersToLinearUnit(-(wallHeightMeters - 0.01), unit), onChange: (v) => handlePreview({
+                                    endHeightOffset: linearControlValueToMeters(v, unit, {
+                                        minMeters: -(wallHeightMeters - 0.01),
+                                    }),
+                                }), precision: 2, step: 0.1, unit: unitLabel, value: Math.round(displayEndHeightOffset * 100) / 100 }), _jsx("div", { className: "px-1 font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider", children: i18n._({ id: 'node.wall.panel.bottom', message: 'Bottom' }) }), _jsx(SegmentedControl, { onChange: handleInfillChange, options: [
+                                    { label: i18n._({ id: 'node.wall.panel.auto', message: 'Auto' }), value: 'auto' },
+                                    {
+                                        label: i18n._({
+                                            id: 'node.wall.panel.fillToTerrain',
+                                            message: 'Fill to terrain',
+                                        }),
+                                        value: 'terrain',
+                                    },
+                                ], value: followsTerrain ? 'terrain' : 'auto' }), followsTerrain && (_jsx("div", { className: "px-1 text-[11px] text-muted-foreground", children: i18n._({
+                                    id: 'node.wall.panel.extendsDownwardToMeetTheTerrain',
+                                    message: 'Extends downward to meet the terrain. Height and top stay unchanged.',
+                                }) })), node.assembly && node.wallType !== 'curtain' ? (_jsxs("div", { className: "flex items-center justify-between px-2 py-1.5", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground uppercase tracking-wider", children: i18n._({ id: 'node.wall.panel.thickness', message: 'Thickness' }) }), _jsx("span", { className: "text-[11px] text-muted-foreground tabular-nums", children: i18n._({
+                                            id: 'node.wall.panel.thicknessFromAssembly',
+                                            message: '{thickness} · from assembly',
+                                            values: { thickness: formatLinearMeasurement(thickness, unit) },
+                                        }) })] })) : (_jsx(SliderControl, { onCommit: handleCommit, onCancel: handleCancel, restoreOnCommit: false, previewWhileTyping: true, label: node.wallType === 'curtain'
+                                    ? i18n._({ id: 'node.wall.panel.frameDepth', message: 'Frame depth' })
+                                    : i18n._({ id: 'node.wall.panel.thickness', message: 'Thickness' }), max: metersToLinearUnit(1000, unit), min: metersToLinearUnit(0.05, unit), onChange: (v) => handlePreview({
+                                    thickness: linearControlValueToMeters(v, unit, {
+                                        maxMeters: 1000,
+                                        minMeters: 0.05,
+                                    }),
+                                }), precision: 3, step: 0.01, unit: unitLabel, value: Math.round(displayThickness * 1000) / 1000 }))] })), _jsx("div", { className: "px-1 font-medium text-[10px] text-muted-foreground/80", children: i18n._({ id: 'node.wall.panel.reference', message: 'Reference' }) }), reference && (_jsx(SegmentedControl, { mixed: reference.value === null, onChange: (value) => reference.apply(value), options: reference.options.map((option) => ({
+                            ...option,
+                            label: i18n._(WALL_REFERENCE_LABELS[option.value]),
+                        })), value: reference.value ?? 'center' })), !hasWallChildrenBlockingCurve && (_jsx(SliderControl, { onCommit: handleCommit, onCancel: handleCancel, restoreOnCommit: false, previewWhileTyping: true, label: i18n._({ id: 'node.wall.panel.curve', message: 'Curve' }), max: Math.max(metersToLinearUnit(0.01, unit), displayMaxCurveOffset), min: -Math.max(metersToLinearUnit(0.01, unit), displayMaxCurveOffset), onChange: (v) => handlePreview({
                             curveOffset: normalizeWallCurveOffset(node, linearControlValueToMeters(v, unit, {
                                 maxMeters: curveOffsetLimit,
                                 minMeters: -curveOffsetLimit,
                             })),
-                        }), precision: 2, step: 0.1, unit: unitLabel, value: Math.round(displayCurveOffset * 100) / 100 }))] }), node.wallType === 'curtain' ? (_jsx(CurtainWallPanel, { height: height, node: node, onUpdate: handleUpdate, onPreview: handlePreview, onCommit: handleCommit, onCancel: handleCancel, unit: unit }, node.id)) : (_jsxs(_Fragment, { children: [_jsx(WallAssemblySection, { node: node, onUpdate: handleUpdate, unit: unit }), _jsx(WallPaintRegionList, { wallId: node.id }), _jsx(WallFaceScriptSection, { wallId: node.id }), _jsx(WallTrimSection, { node: node, onUpdate: handleUpdate, title: "Skirting", trimKey: "skirting", trimValue: skirting, unit: unit, unitLabel: unitLabel, wallHeightMeters: wallHeightMeters }), _jsx(WallTrimSection, { node: node, onUpdate: handleUpdate, title: "Crown molding", trimKey: "crown", trimValue: crown, unit: unit, unitLabel: unitLabel, wallHeightMeters: wallHeightMeters }), _jsx(WallTrimSection, { node: node, onUpdate: handleUpdate, title: "Chair rail", trimKey: "chairRail", trimValue: chairRail, unit: unit, unitLabel: unitLabel, wallHeightMeters: wallHeightMeters })] })), !hasWallChildrenBlockingCurve && (_jsx(PanelSection, { title: "Actions", children: _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Spline, { className: "h-3.5 w-3.5" }), label: "Curve", onClick: handleCurve }) }) }))] }));
+                        }), precision: 2, step: 0.1, unit: unitLabel, value: Math.round(displayCurveOffset * 100) / 100 }))] }), node.wallType === 'curtain' ? (_jsx(CurtainWallPanel, { height: height, node: node, onUpdate: handleUpdate, onPreview: handlePreview, onCommit: handleCommit, onCancel: handleCancel, unit: unit }, node.id)) : railing ? (_jsx(RailingWallPanel, { node: node, onUpdate: handleUpdate, onPreview: handlePreview, onCommit: handleCommit, onCancel: handleCancel, unit: unit }, node.id)) : (_jsxs(_Fragment, { children: [_jsx(WallPaintRegionList, { wallId: node.id }), _jsx(WallFaceScriptSection, { wallId: node.id }), _jsx(WallTrimSection, { node: node, onUpdate: handleUpdate, title: i18n._({ id: 'node.wall.panel.skirting', message: 'Skirting' }), trimKey: "skirting", trimValue: skirting, unit: unit, unitLabel: unitLabel, wallHeightMeters: wallHeightMeters }), _jsx(WallTrimSection, { node: node, onUpdate: handleUpdate, title: i18n._({ id: 'node.wall.panel.crownMolding', message: 'Crown molding' }), trimKey: "crown", trimValue: crown, unit: unit, unitLabel: unitLabel, wallHeightMeters: wallHeightMeters }), _jsx(WallTrimSection, { node: node, onUpdate: handleUpdate, title: i18n._({ id: 'node.wall.panel.chairRail', message: 'Chair rail' }), trimKey: "chairRail", trimValue: chairRail, unit: unit, unitLabel: unitLabel, wallHeightMeters: wallHeightMeters })] })), !hasWallChildrenBlockingCurve && (_jsx(PanelSection, { title: i18n._({ id: 'node.wall.panel.actions', message: 'Actions' }), children: _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Spline, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.wall.panel.curve', message: 'Curve' }), onClick: handleCurve }) }) }))] }));
 }
 /**
  * "Scripted finish": a face a script builds (it owns that face's colours, so Paint leaves it), with
  * its code to read and a way to take it off, back to the face's own finish.
  */
 function WallFaceScriptSection({ wallId }) {
+    const i18n = usePascalI18n();
     const shas = useScene(useShallow((scene) => {
         const wall = scene.nodes[wallId];
         return wall?.type === 'wall'
@@ -208,19 +286,24 @@ function WallFaceScriptSection({ wallId }) {
     }));
     if (!(shas[0] || shas[1]))
         return null;
-    return (_jsx(PanelSection, { title: "Scripted finish", children: ['a', 'b'].map((face, index) => {
+    return (_jsx(PanelSection, { title: i18n._({ id: 'node.wall.panel.scriptedFinish', message: 'Scripted finish' }), children: ['a', 'b'].map((face, index) => {
             const sha = shas[index];
             return sha ? _jsx(WallFaceScriptRow, { face: face, sha: sha, wallId: wallId }, face) : null;
         }) }));
 }
 function WallFaceScriptRow({ face, sha, wallId }) {
+    const i18n = usePascalI18n();
     const [code, setCode] = useState(null);
     const [open, setOpen] = useState(false);
+    const unreadable = i18n._({
+        id: 'editor.panels.scriptUnreadable',
+        message: 'The script could not be read.',
+    });
     const toggleCode = () => {
         setOpen((shown) => !shown);
         if (code?.sha === sha)
             return;
-        finishScriptCode(sha).then((text) => setCode({ sha, text: text ?? 'The script could not be read.' }), () => setCode({ sha, text: 'The script could not be read.' }));
+        finishScriptCode(sha).then((text) => setCode({ sha, text: text ?? unreadable }), () => setCode({ sha, text: unreadable }));
     };
     const remove = () => {
         const { changes } = setWallFaceScript(useScene.getState().nodes, { wallId, face, remove: true }, { activeLevelId: null });
@@ -229,33 +312,52 @@ function WallFaceScriptRow({ face, sha, wallId }) {
                 useScene.getState().updateNode(id, data);
         });
     };
-    return (_jsxs("div", { className: "flex flex-col gap-2", "data-wall-face-script": face, children: [_jsxs("div", { className: "flex min-h-8 items-center justify-between gap-3", children: [_jsxs("span", { className: "text-muted-foreground text-xs", children: ["Side ", face.toUpperCase()] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { className: "rounded-full border border-border/50 px-2.5 py-0.5 text-xs transition-colors hover:bg-accent", onClick: toggleCode, type: "button", children: open ? 'Hide code' : 'View code' }), _jsx("button", { className: "rounded-full border border-border/50 px-2.5 py-0.5 text-xs transition-colors hover:bg-accent", onClick: remove, type: "button", children: "Remove" })] })] }), open && (_jsx("pre", { className: "max-h-60 overflow-auto whitespace-pre rounded-lg border border-border/50 p-2 font-mono text-[11px] text-foreground", children: code?.sha === sha ? code.text : 'Loading…' }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-2", "data-wall-face-script": face, children: [_jsxs("div", { className: "flex min-h-8 items-center justify-between gap-3", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: i18n._({
+                            id: 'node.wall.panel.sideFace',
+                            message: 'Side {face}',
+                            values: { face: face.toUpperCase() },
+                        }) }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { className: "rounded-full border border-border/50 px-2.5 py-0.5 text-xs transition-colors hover:bg-accent", onClick: toggleCode, type: "button", children: open
+                                    ? i18n._({ id: 'node.wall.panel.hideCode', message: 'Hide code' })
+                                    : i18n._({ id: 'node.wall.panel.viewCode', message: 'View code' }) }), _jsx("button", { className: "rounded-full border border-border/50 px-2.5 py-0.5 text-xs transition-colors hover:bg-accent", onClick: remove, type: "button", children: i18n._({ id: 'node.wall.panel.remove', message: 'Remove' }) })] })] }), open && (_jsx("pre", { className: "max-h-60 overflow-auto whitespace-pre rounded-lg border border-border/50 p-2 font-mono text-[11px] text-foreground", children: code?.sha === sha
+                    ? code.text
+                    : i18n._({ id: 'node.wall.panel.loading', message: 'Loading…' }) }))] }));
 }
 function WallTrimSection({ node, onUpdate, title, trimKey, trimValue, unit, unitLabel, wallHeightMeters, }) {
+    const i18n = usePascalI18n();
     const updateTrim = (patch) => onUpdate(wallTrimPatch(node, trimKey, patch));
     const profileOptions = WALL_TRIM_PROFILE_OPTIONS[trimKey];
     const selectedProfile = profileOptions.some((option) => option.value === trimValue.profile)
         ? trimValue.profile
         : profileOptions[0].value;
-    return (_jsxs(PanelSection, { title: title, children: [_jsx(ActionGroup, { children: _jsx(ActionButton, { label: trimValue.enabled ? `Hide ${title.toLowerCase()}` : `Show ${title.toLowerCase()}`, onClick: () => updateTrim({ enabled: !trimValue.enabled }) }) }), trimValue.enabled && (_jsxs(_Fragment, { children: [_jsx(SegmentedControl, { onChange: (next) => updateTrim({ sides: next }), options: [
-                            { label: 'Side A', value: 'a' },
-                            { label: 'Side B', value: 'b' },
-                            { label: 'Both', value: 'both' },
+    return (_jsxs(PanelSection, { title: title, children: [_jsx(ActionGroup, { children: _jsx(ActionButton, { label: trimValue.enabled
+                        ? i18n._({
+                            id: 'node.wall.trim.hide',
+                            message: '{trim, select, skirting {Hide skirting} crown {Hide crown molding} other {Hide chair rail}}',
+                            values: { trim: trimKey },
+                        })
+                        : i18n._({
+                            id: 'node.wall.trim.show',
+                            message: '{trim, select, skirting {Show skirting} crown {Show crown molding} other {Show chair rail}}',
+                            values: { trim: trimKey },
+                        }), onClick: () => updateTrim({ enabled: !trimValue.enabled }) }) }), trimValue.enabled && (_jsxs(_Fragment, { children: [_jsx(SegmentedControl, { onChange: (next) => updateTrim({ sides: next }), options: [
+                            { label: i18n._({ id: 'node.wall.panel.sideA', message: 'Side A' }), value: 'a' },
+                            { label: i18n._({ id: 'node.wall.panel.sideB', message: 'Side B' }), value: 'b' },
+                            { label: i18n._({ id: 'node.wall.panel.both', message: 'Both' }), value: 'both' },
                         ], value: trimValue.sides === 'interior'
                             ? 'a'
                             : trimValue.sides === 'exterior'
                                 ? 'b'
-                                : trimValue.sides }), _jsx(SegmentedControl, { onChange: (next) => updateTrim({ profile: next }), options: profileOptions, value: selectedProfile }), _jsx(SliderControl, { label: "Height", max: metersToLinearUnit(Math.max(0.05, wallHeightMeters), unit), min: metersToLinearUnit(0.01, unit), onChange: (value) => updateTrim({
+                                : trimValue.sides }), _jsx(SegmentedControl, { onChange: (next) => updateTrim({ profile: next }), options: profileOptions.map((option) => ({ ...option, label: i18n._(option.label) })), value: selectedProfile }), _jsx(SliderControl, { label: i18n._({ id: 'node.wall.panel.height', message: 'Height' }), max: metersToLinearUnit(Math.max(0.05, wallHeightMeters), unit), min: metersToLinearUnit(0.01, unit), onChange: (value) => updateTrim({
                             height: linearControlValueToMeters(value, unit, {
                                 maxMeters: Math.max(0.05, wallHeightMeters),
                                 minMeters: 0.01,
                             }),
-                        }), precision: 2, step: 0.01, unit: unitLabel, value: metersToLinearUnit(trimValue.height, unit) }), _jsx(SliderControl, { label: "Depth", max: metersToLinearUnit(0.2, unit), min: metersToLinearUnit(0.001, unit), onChange: (value) => updateTrim({
+                        }), precision: 2, step: 0.01, unit: unitLabel, value: metersToLinearUnit(trimValue.height, unit) }), _jsx(SliderControl, { label: i18n._({ id: 'node.wall.panel.depth', message: 'Depth' }), max: metersToLinearUnit(0.2, unit), min: metersToLinearUnit(0.001, unit), onChange: (value) => updateTrim({
                             proud: linearControlValueToMeters(value, unit, {
                                 maxMeters: 0.2,
                                 minMeters: 0.001,
                             }),
-                        }), precision: 3, step: 0.005, unit: unitLabel, value: metersToLinearUnit(trimValue.proud, unit) }), trimKey === 'chairRail' && (_jsx(SliderControl, { label: "Offset", max: metersToLinearUnit(Math.max(0.05, wallHeightMeters - trimValue.height), unit), min: metersToLinearUnit(0, unit), onChange: (value) => updateTrim({
+                        }), precision: 3, step: 0.005, unit: unitLabel, value: metersToLinearUnit(trimValue.proud, unit) }), trimKey === 'chairRail' && (_jsx(SliderControl, { label: i18n._({ id: 'node.wall.panel.offset', message: 'Offset' }), max: metersToLinearUnit(Math.max(0.05, wallHeightMeters - trimValue.height), unit), min: metersToLinearUnit(0, unit), onChange: (value) => updateTrim({
                             offsetY: linearControlValueToMeters(value, unit, {
                                 maxMeters: Math.max(0.05, wallHeightMeters - trimValue.height),
                                 minMeters: 0,
@@ -270,70 +372,6 @@ function WallTrimSection({ node, onUpdate, title, trimKey, trimValue, unit, unit
 // here goes through `wallAssemblyPatch`, which writes the layer stack AND the
 // re-derived total in one `updateNode` call, so the 2D plan and the 3D wall
 // both move on the same store tick.
-const METRES_PER_INCH = 0.0254;
-/**
- * Imperial-friendly thickness input. Accepts `5/8`, `5/8"`, `7/16 in`,
- * `1-1/4"`, `1 1/2"`, `12mm`, `0.012m`. A bare number means INCHES in imperial
- * display and MILLIMETRES in metric — wall layers are millimetre-scale and
- * typing `0.0127` for half-inch board is nobody's idea of usable.
- */
-function parseLayerThickness(raw, unit) {
-    const text = raw.trim().toLowerCase().replace(/["”]/g, ' in ');
-    if (!text)
-        return null;
-    const explicit = /(mm|cm|m|in|ft|')\s*$/.exec(text);
-    const suffix = explicit?.[1];
-    const body = (suffix ? text.slice(0, explicit?.index) : text).trim();
-    // `1-1/4` / `1 1/2` / `5/8` / `0.4375`
-    const mixed = /^(\d+(?:\.\d+)?)[\s-]+(\d+)\s*\/\s*(\d+)$/.exec(body);
-    const fraction = /^(\d+)\s*\/\s*(\d+)$/.exec(body);
-    let value;
-    if (mixed) {
-        value = Number(mixed[1]) + Number(mixed[2]) / Number(mixed[3]);
-    }
-    else if (fraction) {
-        value = Number(fraction[1]) / Number(fraction[2]);
-    }
-    else {
-        value = Number(body);
-    }
-    if (!Number.isFinite(value) || value < 0)
-        return null;
-    switch (suffix) {
-        case 'mm':
-            return value / 1000;
-        case 'cm':
-            return value / 100;
-        case 'm':
-            return value;
-        case 'in':
-            return value * METRES_PER_INCH;
-        case 'ft':
-        case "'":
-            return value * 12 * METRES_PER_INCH;
-        default:
-            return unit === 'imperial' ? value * METRES_PER_INCH : value / 1000;
-    }
-}
-/** Nearest common fraction of an inch, so 0.0111 m reads back as `7/16"`. */
-function formatLayerThickness(metres, unit) {
-    if (unit !== 'imperial')
-        return `${Math.round(metres * 1000 * 10) / 10} mm`;
-    const inchValue = metres / METRES_PER_INCH;
-    const sixteenths = Math.round(inchValue * 16);
-    if (Math.abs(inchValue * 16 - sixteenths) > 1e-6)
-        return `${Math.round(inchValue * 1000) / 1000}"`;
-    const whole = Math.floor(sixteenths / 16);
-    let numerator = sixteenths % 16;
-    let denominator = 16;
-    while (numerator % 2 === 0 && numerator > 0) {
-        numerator /= 2;
-        denominator /= 2;
-    }
-    if (numerator === 0)
-        return `${whole}"`;
-    return whole > 0 ? `${whole}-${numerator}/${denominator}"` : `${numerator}/${denominator}"`;
-}
 const SELECT_CLASS = 'h-7 w-full rounded border border-border bg-background px-2 text-[11px] text-foreground outline-none focus:border-primary';
 const INPUT_CLASS = 'h-7 w-full rounded border border-border bg-background px-2 text-[11px] text-foreground outline-none focus:border-primary';
 const ROW_LABEL_CLASS = 'w-[68px] shrink-0 text-[10px] text-muted-foreground uppercase tracking-wide';
@@ -359,47 +397,62 @@ function ThicknessInput({ metres, onCommit, unit, }) {
             }
         }, spellCheck: false, value: display }));
 }
-const EXTERIOR_FINISH_OPTIONS = [
-    { value: 'none', label: 'None' },
-    { value: 'siding', label: 'Lap siding' },
-    { value: 'fiber-cement', label: 'Fiber cement' },
-    { value: 'stucco', label: 'Stucco' },
-    { value: 'brick', label: 'Brick veneer' },
-    { value: 'stone', label: 'Stone veneer' },
-];
+/**
+ * The Exterior select's names for the finishes of the list it shares with the
+ * multi-selection controls (`EXTERIOR_FINISH_OPTIONS`, in `panel-model`).
+ */
+const EXTERIOR_FINISH_LABELS = {
+    none: /* i18n */ { id: 'node.wall.panel.none', message: 'None' },
+    siding: /* i18n */ { id: 'node.wall.panel.lapSiding', message: 'Lap siding' },
+    'fiber-cement': /* i18n */ { id: 'node.wall.panel.fiberCement', message: 'Fiber cement' },
+    stucco: /* i18n */ { id: 'node.wall.panel.stucco', message: 'Stucco' },
+    brick: /* i18n */ { id: 'node.wall.panel.brickVeneer', message: 'Brick veneer' },
+    stone: /* i18n */ { id: 'node.wall.panel.stoneVeneer', message: 'Stone veneer' },
+};
 const SHEATHING_OPTIONS = [
-    { value: 'none', label: 'None' },
-    { value: 'osb', label: 'OSB' },
-    { value: 'plywood', label: 'Plywood' },
-    { value: 'gypsum', label: 'Gypsum' },
+    { value: 'none', label: /* i18n */ { id: 'node.wall.panel.none', message: 'None' } },
+    { value: 'osb', label: /* i18n */ { id: 'node.wall.panel.osb', message: 'OSB' } },
+    { value: 'plywood', label: /* i18n */ { id: 'node.wall.panel.plywood', message: 'Plywood' } },
+    { value: 'gypsum', label: /* i18n */ { id: 'node.wall.panel.gypsum', message: 'Gypsum' } },
 ];
 const FRAMING_OPTIONS = [
-    { value: 'wood', label: 'Wood studs' },
-    { value: 'lgs', label: 'Steel studs' },
-    { value: 'cmu', label: 'CMU' },
-    { value: 'icf', label: 'ICF' },
+    { value: 'wood', label: /* i18n */ { id: 'node.wall.panel.woodStuds', message: 'Wood studs' } },
+    { value: 'lgs', label: /* i18n */ { id: 'node.wall.panel.steelStuds', message: 'Steel studs' } },
+    { value: 'cmu', label: /* i18n */ { id: 'node.wall.panel.cmu', message: 'CMU' } },
+    { value: 'icf', label: /* i18n */ { id: 'node.wall.panel.icf', message: 'ICF' } },
 ];
+const spacingKey = (metres) => metres.toFixed(6);
+/**
+ * The stud spacings to pick from, the framing list roofs and ceilings use, keeping a stored one
+ * off the list; and the one stored (null for the framer's default).
+ */
+export function studSpacingChoices(stored) {
+    const listed = FRAMING_SPACINGS.find((size) => stored !== undefined && Math.abs(size - stored) < 1e-6);
+    const current = stored === undefined ? null : (listed ?? stored);
+    return {
+        sizes: current === null || listed !== undefined ? FRAMING_SPACINGS : [current, ...FRAMING_SPACINGS],
+        current,
+    };
+}
 const INTERIOR_FINISH_OPTIONS = [
-    { value: 'none', label: 'None' },
-    { value: 'drywall', label: 'Drywall' },
-    { value: 'plaster', label: 'Plaster' },
+    { value: 'none', label: /* i18n */ { id: 'node.wall.panel.none', message: 'None' } },
+    { value: 'drywall', label: /* i18n */ { id: 'node.wall.panel.drywall', message: 'Drywall' } },
+    { value: 'plaster', label: /* i18n */ { id: 'node.wall.panel.plaster', message: 'Plaster' } },
 ];
-/** Cited default thickness for a finish the user just switched to. */
-const EXTERIOR_FINISH_DEFAULT = {
-    none: 0,
-    siding: SIDING_LAP,
-    'fiber-cement': FIBER_CEMENT,
-    stucco: STUCCO_3_COAT,
-    brick: BRICK_VENEER + BRICK_AIR_SPACE,
-    stone: STONE_VENEER_UNVERIFIED,
-};
 function WallAssemblySection({ node, onUpdate, unit, }) {
+    const i18n = usePascalI18n();
     const stack = node.assembly;
     // The cladding / sheathing / framing / interior editor works on the WS5 view
     // of the F2 stack; a stack it cannot express is listed read-only.
     const assembly = stack ? (wallAssemblyToLegacy(stack) ?? undefined) : undefined;
+    const studSpacing = studSpacingChoices(assembly?.framing.spacing);
     const resolved = resolveWallAssembly(node);
     const presetNote = wallAssemblyUnverifiedNote(node);
+    // The project's own wall types sit beside the presets and apply the same way.
+    const projectTypes = useProjectWallTypes();
+    const presetId = stack?.presetId;
+    const knownPreset = !!presetId &&
+        (!!getWallAssemblyPreset(presetId) || projectTypes.some((type) => type.id === presetId));
     // Every write goes through wallAssemblyPatch so `thickness` is re-derived.
     // Changing any layer clears `preset` — the stack is no longer that preset.
     const apply = (next) => onUpdate(wallAssemblyPatch(wallAssemblyFromLegacy(next)));
@@ -409,25 +462,27 @@ function WallAssemblySection({ node, onUpdate, unit, }) {
         const next = mutate({ ...assembly });
         apply({ ...next, preset: undefined });
     };
-    return (_jsxs(PanelSection, { title: "Assembly", children: [_jsx(LayerRow, { label: "Preset", children: _jsxs("select", { className: SELECT_CLASS, onChange: (event) => {
-                        const id = event.target.value;
-                        if (!id) {
-                            onUpdate({ assembly: undefined });
-                            return;
-                        }
-                        const preset = getWallAssemblyPreset(id);
-                        if (preset)
-                            onUpdate(wallAssemblyPatch(preset.assembly));
-                    }, value: stack?.presetId ?? '', children: [_jsx("option", { value: "", children: stack ? 'Custom' : 'None (single layer)' }), WALL_ASSEMBLY_PRESETS.map((preset) => (_jsx("option", { value: preset.id, children: preset.label }, preset.id)))] }) }), assembly && (_jsxs(_Fragment, { children: [_jsxs(LayerRow, { label: "Exterior", children: [_jsx("select", { className: SELECT_CLASS, onChange: (event) => {
+    return (_jsxs(PanelSection, { title: i18n._({ id: 'node.wall.panel.assembly', message: 'Assembly' }), children: [_jsxs(LayerRow, { label: i18n._({ id: 'node.wall.panel.preset', message: 'Preset' }), children: [_jsxs("select", { className: SELECT_CLASS, onChange: (event) => {
+                            const id = event.target.value;
+                            if (!id) {
+                                onUpdate({ assembly: undefined });
+                                return;
+                            }
+                            const preset = getWallAssemblyPreset(id) ?? projectTypes.find((type) => type.id === id);
+                            if (preset)
+                                onUpdate(wallAssemblyPatch(structuredClone(preset.assembly)));
+                        }, value: knownPreset ? presetId : '', children: [_jsx("option", { value: "", children: stack
+                                    ? i18n._({ id: 'node.wall.panel.custom', message: 'Custom' })
+                                    : i18n._({ id: 'node.wall.panel.noneSingleLayer', message: 'None (single layer)' }) }), WALL_ASSEMBLY_PRESETS.map((preset) => (_jsx("option", { value: preset.id, children: preset.label }, preset.id))), projectTypes.length > 0 ? (_jsx("optgroup", { label: i18n._({ id: 'node.wall.panel.thisProject', message: 'This project' }), children: projectTypes.map((type) => (_jsx("option", { value: type.id, children: type.label }, type.id))) })) : null] }), _jsx(WallTypeMenu, { assembly: stack, onApply: (type) => onUpdate(wallAssemblyPatch(structuredClone(type.assembly))), placement: node.frontSide === 'exterior' || node.backSide === 'exterior' ? 'exterior' : 'interior' })] }), assembly && (_jsxs(_Fragment, { children: [_jsxs(LayerRow, { label: i18n._({ id: 'node.wall.panel.exterior', message: 'Exterior' }), children: [_jsx("select", { className: SELECT_CLASS, onChange: (event) => {
                                     const finish = event.target.value;
                                     edit((draft) => ({
                                         ...draft,
                                         exterior: { finish, thickness: EXTERIOR_FINISH_DEFAULT[finish] },
                                     }));
-                                }, value: assembly.exterior?.finish ?? 'none', children: EXTERIOR_FINISH_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), assembly.exterior && assembly.exterior.finish !== 'none' && (_jsx(ThicknessInput, { metres: assembly.exterior.thickness, onCommit: (thickness) => edit((draft) => ({
+                                }, value: assembly.exterior?.finish ?? 'none', children: EXTERIOR_FINISH_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: i18n._(EXTERIOR_FINISH_LABELS[option.value]) }, option.value))) }), assembly.exterior && assembly.exterior.finish !== 'none' && (_jsx(ThicknessInput, { metres: assembly.exterior.thickness, onCommit: (thickness) => edit((draft) => ({
                                     ...draft,
                                     exterior: { finish: draft.exterior?.finish ?? 'siding', thickness },
-                                })), unit: unit }))] }), _jsxs(LayerRow, { label: "Sheathing", children: [_jsx("select", { className: SELECT_CLASS, onChange: (event) => {
+                                })), unit: unit }))] }), _jsxs(LayerRow, { label: i18n._({ id: 'node.wall.panel.sheathing', message: 'Sheathing' }), children: [_jsx("select", { className: SELECT_CLASS, onChange: (event) => {
                                     const material = event.target.value;
                                     edit((draft) => ({
                                         ...draft,
@@ -440,16 +495,29 @@ function WallAssemblySection({ node, onUpdate, unit, }) {
                                                     : WSP_SHEATHING,
                                         },
                                     }));
-                                }, value: assembly.sheathing?.material ?? 'none', children: SHEATHING_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), assembly.sheathing && assembly.sheathing.material !== 'none' && (_jsx(ThicknessInput, { metres: assembly.sheathing.thickness, onCommit: (thickness) => edit((draft) => ({
+                                }, value: assembly.sheathing?.material ?? 'none', children: SHEATHING_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: i18n._(option.label) }, option.value))) }), assembly.sheathing && assembly.sheathing.material !== 'none' && (_jsx(ThicknessInput, { metres: assembly.sheathing.thickness, onCommit: (thickness) => edit((draft) => ({
                                     ...draft,
                                     sheathing: { material: draft.sheathing?.material ?? 'osb', thickness },
-                                })), unit: unit }))] }), _jsxs(LayerRow, { label: "Framing", children: [_jsx("select", { className: SELECT_CLASS, onChange: (event) => edit((draft) => ({
+                                })), unit: unit }))] }), _jsxs(LayerRow, { label: i18n._({ id: 'node.wall.panel.framing', message: 'Framing' }), children: [_jsx("select", { className: SELECT_CLASS, onChange: (event) => edit((draft) => {
+                                    const kind = event.target.value;
+                                    // Block and ICF have no studs to space.
+                                    const studs = kind === 'wood' || kind === 'lgs';
+                                    const { spacing, ...framing } = draft.framing;
+                                    return {
+                                        ...draft,
+                                        framing: { ...framing, kind, ...(studs && spacing ? { spacing } : {}) },
+                                    };
+                                }), value: assembly.framing.kind, children: FRAMING_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: i18n._(option.label) }, option.value))) }), _jsx(ThicknessInput, { metres: assembly.framing.depth, onCommit: (depth) => edit((draft) => ({ ...draft, framing: { ...draft.framing, depth } })), unit: unit })] }), (assembly.framing.kind === 'wood' || assembly.framing.kind === 'lgs') && (_jsx(LayerRow, { label: i18n._({ id: 'node.wall.panel.studs', message: 'Studs' }), children: _jsxs("select", { className: SELECT_CLASS, onChange: (event) => {
+                                const spacing = studSpacing.sizes.find((size) => spacingKey(size) === event.target.value);
+                                edit((draft) => ({
                                     ...draft,
                                     framing: {
-                                        kind: event.target.value,
+                                        kind: draft.framing.kind,
                                         depth: draft.framing.depth,
+                                        ...(spacing !== undefined ? { spacing } : {}),
                                     },
-                                })), value: assembly.framing.kind, children: FRAMING_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), _jsx(ThicknessInput, { metres: assembly.framing.depth, onCommit: (depth) => edit((draft) => ({ ...draft, framing: { kind: draft.framing.kind, depth } })), unit: unit })] }), _jsxs(LayerRow, { label: "Interior", children: [_jsx("select", { className: SELECT_CLASS, onChange: (event) => {
+                                }));
+                            }, value: studSpacing.current === null ? '' : spacingKey(studSpacing.current), children: [_jsx("option", { value: "", children: i18n._({ id: 'node.wall.panel.framersDefault', message: "Framer's default" }) }), studSpacing.sizes.map((spacing) => (_jsx("option", { value: spacingKey(spacing), children: formatSpacing(spacing, unit, i18n) }, spacingKey(spacing))))] }) })), _jsxs(LayerRow, { label: i18n._({ id: 'node.wall.panel.interior', message: 'Interior' }), children: [_jsx("select", { className: SELECT_CLASS, onChange: (event) => {
                                     const finish = event.target.value;
                                     edit((draft) => ({
                                         ...draft,
@@ -458,8 +526,21 @@ function WallAssemblySection({ node, onUpdate, unit, }) {
                                             thickness: finish === 'none' ? 0 : (draft.interior?.thickness ?? GYPSUM_HALF),
                                         },
                                     }));
-                                }, value: assembly.interior?.finish ?? 'none', children: INTERIOR_FINISH_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), assembly.interior && assembly.interior.finish !== 'none' && (_jsx(ThicknessInput, { metres: assembly.interior.thickness, onCommit: (thickness) => edit((draft) => ({
+                                }, value: assembly.interior?.finish ?? 'none', children: INTERIOR_FINISH_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: i18n._(option.label) }, option.value))) }), assembly.interior && assembly.interior.finish !== 'none' && (_jsx(ThicknessInput, { metres: assembly.interior.thickness, onCommit: (thickness) => edit((draft) => ({
                                     ...draft,
                                     interior: { finish: draft.interior?.finish ?? 'drywall', thickness },
-                                })), unit: unit }))] }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground uppercase tracking-wide", children: "Total thickness" }), _jsx("span", { className: "font-medium text-[11px] text-foreground tabular-nums", children: formatLayerThickness(assemblyThickness(stack), unit) })] }), resolved.kind === 'partition' && (_jsx("div", { className: "px-2 pb-1.5 text-[10px] text-muted-foreground", children: "Partition: the interior finish is applied to both faces." })), resolved.kind === 'envelope' && resolved.exteriorSide == null && (_jsx("div", { className: "px-2 pb-1.5 text-[10px] text-muted-foreground", children: "Which face is outside is undetermined (no room detected on either side) \u2014 the exterior layers are drawn on side B." })), presetNote && (_jsxs("div", { className: "px-2 pb-2 text-[10px] text-amber-600 dark:text-amber-400", children: ["Unverified: ", presetNote] })), _jsx("div", { className: "px-2 pb-2 text-[10px] text-muted-foreground", children: "Layer thicknesses follow the 2021 IRC assembly data. Drafting aid, not engineering \u2014 verify with the authority having jurisdiction." })] })), stack && !assembly && (_jsxs(_Fragment, { children: [resolved.layers.map((layer, index) => (_jsx(LayerRow, { label: layer.material, children: _jsx("span", { className: "text-[11px] text-muted-foreground tabular-nums", children: formatLayerThickness(layer.thickness, unit) }) }, `${layer.role}-${index}`))), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground uppercase tracking-wide", children: "Total thickness" }), _jsx("span", { className: "font-medium text-[11px] text-foreground tabular-nums", children: formatLayerThickness(assemblyThickness(stack), unit) })] })] }))] }));
+                                })), unit: unit }))] }), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground uppercase tracking-wide", children: i18n._({ id: 'node.wall.panel.totalThickness', message: 'Total thickness' }) }), _jsx("span", { className: "font-medium text-[11px] text-foreground tabular-nums", children: formatLayerThickness(assemblyThickness(stack), unit) })] }), resolved.kind === 'partition' && (_jsx("div", { className: "px-2 pb-1.5 text-[10px] text-muted-foreground", children: i18n._({
+                            id: 'node.wall.panel.partitionTheInteriorFinishIsApplied',
+                            message: 'Partition: the interior finish is applied to both faces.',
+                        }) })), resolved.kind === 'envelope' && resolved.exteriorSide == null && (_jsx("div", { className: "px-2 pb-1.5 text-[10px] text-muted-foreground", children: i18n._({
+                            id: 'node.wall.panel.whichFaceIsOutsideIsUndetermined',
+                            message: 'Which face is outside is undetermined (no room detected on either side) — the exterior layers are drawn on side B.',
+                        }) })), presetNote && (_jsx("div", { className: "px-2 pb-2 text-[10px] text-amber-600 dark:text-amber-400", children: i18n._({
+                            id: 'node.wall.panel.unverifiedPresetnote',
+                            message: 'Unverified: {presetNote}',
+                            values: { presetNote },
+                        }) })), _jsx("div", { className: "px-2 pb-2 text-[10px] text-muted-foreground", children: i18n._({
+                            id: 'node.wall.panel.layerThicknessesFollowThe2021Irc',
+                            message: 'Layer thicknesses follow the 2021 IRC assembly data. Drafting aid, not engineering — verify with the authority having jurisdiction.',
+                        }) })] })), stack && !assembly && (_jsxs(_Fragment, { children: [resolved.layers.map((layer, index) => (_jsx(LayerRow, { label: layer.material, children: _jsx("span", { className: "text-[11px] text-muted-foreground tabular-nums", children: formatLayerThickness(layer.thickness, unit) }) }, `${layer.role}-${index}`))), _jsxs("div", { className: "flex items-center justify-between px-2 py-1.5", children: [_jsx("span", { className: "font-medium text-[10px] text-muted-foreground uppercase tracking-wide", children: i18n._({ id: 'node.wall.panel.totalThickness', message: 'Total thickness' }) }), _jsx("span", { className: "font-medium text-[11px] text-foreground tabular-nums", children: formatLayerThickness(assemblyThickness(stack), unit) })] })] }))] }));
 }