@pascal-app/nodes 1.0.6 → 1.1.0

package/dist/ceiling/floorplan-affordances.d.ts

@@ -40,6 +40,11 @@ export declare const ceilingMoveVertexAffordance: import("@pascal-app/core").Flo
             url: string;
             repeat?: [number, number] | undefined;
             scale?: number | undefined;
+            offset?: [number, number] | undefined;
+            normalMap?: string | undefined;
+            normalScale?: number | undefined;
+            bumpMap?: string | undefined;
+            bumpScale?: number | undefined;
         } | undefined;
     } | undefined;
     materialPreset?: string | undefined;
@@ -54,6 +59,29 @@ export declare const ceilingMoveVertexAffordance: import("@pascal-app/core").Flo
     }[];
     openingIds?: string[] | undefined;
     height?: number | undefined;
+    buildUp?: {
+        presetId?: string | undefined;
+        finish?: {
+            kind: "drywall" | "plaster" | "wood-plank";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+        framing?: {
+            system: "joists" | "truss-chords";
+            size: "2x10" | "2x12" | "2x4" | "2x6" | "2x8";
+            spacing: number;
+        } | undefined;
+        decking?: {
+            kind: "osb" | "plywood";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+        insulation?: {
+            kind: "batt" | "blown" | "rigid";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+    } | undefined;
     regions?: {
         id: string;
         polygon: [number, number][];
@@ -105,6 +133,11 @@ export declare const ceilingAddVertexAffordance: import("@pascal-app/core").Floo
             url: string;
             repeat?: [number, number] | undefined;
             scale?: number | undefined;
+            offset?: [number, number] | undefined;
+            normalMap?: string | undefined;
+            normalScale?: number | undefined;
+            bumpMap?: string | undefined;
+            bumpScale?: number | undefined;
         } | undefined;
     } | undefined;
     materialPreset?: string | undefined;
@@ -119,6 +152,29 @@ export declare const ceilingAddVertexAffordance: import("@pascal-app/core").Floo
     }[];
     openingIds?: string[] | undefined;
     height?: number | undefined;
+    buildUp?: {
+        presetId?: string | undefined;
+        finish?: {
+            kind: "drywall" | "plaster" | "wood-plank";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+        framing?: {
+            system: "joists" | "truss-chords";
+            size: "2x10" | "2x12" | "2x4" | "2x6" | "2x8";
+            spacing: number;
+        } | undefined;
+        decking?: {
+            kind: "osb" | "plywood";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+        insulation?: {
+            kind: "batt" | "blown" | "rigid";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+    } | undefined;
     regions?: {
         id: string;
         polygon: [number, number][];
@@ -170,6 +226,11 @@ export declare const ceilingMoveEdgeAffordance: import("@pascal-app/core").Floor
             url: string;
             repeat?: [number, number] | undefined;
             scale?: number | undefined;
+            offset?: [number, number] | undefined;
+            normalMap?: string | undefined;
+            normalScale?: number | undefined;
+            bumpMap?: string | undefined;
+            bumpScale?: number | undefined;
         } | undefined;
     } | undefined;
     materialPreset?: string | undefined;
@@ -184,6 +245,29 @@ export declare const ceilingMoveEdgeAffordance: import("@pascal-app/core").Floor
     }[];
     openingIds?: string[] | undefined;
     height?: number | undefined;
+    buildUp?: {
+        presetId?: string | undefined;
+        finish?: {
+            kind: "drywall" | "plaster" | "wood-plank";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+        framing?: {
+            system: "joists" | "truss-chords";
+            size: "2x10" | "2x12" | "2x4" | "2x6" | "2x8";
+            spacing: number;
+        } | undefined;
+        decking?: {
+            kind: "osb" | "plywood";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+        insulation?: {
+            kind: "batt" | "blown" | "rigid";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+    } | undefined;
     regions?: {
         id: string;
         polygon: [number, number][];
@@ -235,6 +319,11 @@ export declare const ceilingDeleteVertexAffordance: import("@pascal-app/core").F
             url: string;
             repeat?: [number, number] | undefined;
             scale?: number | undefined;
+            offset?: [number, number] | undefined;
+            normalMap?: string | undefined;
+            normalScale?: number | undefined;
+            bumpMap?: string | undefined;
+            bumpScale?: number | undefined;
         } | undefined;
     } | undefined;
     materialPreset?: string | undefined;
@@ -249,6 +338,29 @@ export declare const ceilingDeleteVertexAffordance: import("@pascal-app/core").F
     }[];
     openingIds?: string[] | undefined;
     height?: number | undefined;
+    buildUp?: {
+        presetId?: string | undefined;
+        finish?: {
+            kind: "drywall" | "plaster" | "wood-plank";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+        framing?: {
+            system: "joists" | "truss-chords";
+            size: "2x10" | "2x12" | "2x4" | "2x6" | "2x8";
+            spacing: number;
+        } | undefined;
+        decking?: {
+            kind: "osb" | "plywood";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+        insulation?: {
+            kind: "batt" | "blown" | "rigid";
+            thickness: number;
+            name?: string | undefined;
+        } | undefined;
+    } | undefined;
     regions?: {
         id: string;
         polygon: [number, number][];

package/dist/ceiling/floorplan-affordances.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"floorplan-affordances.d.ts","sourceRoot":"","sources":["../../src/ceiling/floorplan-affordances.ts"],"names":[],"mappings":"AAoCA,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGvC,CAAA;AACD,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGtC,CAAA;AACD,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGrC,CAAA;AACD,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGzC,CAAA"}
+{"version":3,"file":"floorplan-affordances.d.ts","sourceRoot":"","sources":["../../src/ceiling/floorplan-affordances.ts"],"names":[],"mappings":"AAoCA,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGvC,CAAA;AACD,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGtC,CAAA;AACD,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGrC,CAAA;AACD,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGzC,CAAA"}

package/dist/ceiling/materials.d.ts

@@ -7,6 +7,11 @@ export type CeilingMaterials = {
     bottomMaterial: Material;
 };
 export declare function getCeilingMaterials(color?: string, shading?: RenderShading): CeilingMaterials;
+/**
+ * The upper face, drawn while the viewer shows ceiling tops: the ceiling's colour, facing up, so
+ * the ceiling reads as solid from above.
+ */
+export declare function getCeilingCapMaterial(color: string, shading: RenderShading): Material;
 /** Resolve through the shared caches, without mutating another surface's material. */
 export declare function resolveCeilingFinish(finish: MaterialSchema | string | undefined, sceneMaterials: Record<SceneMaterialId, SceneMaterial> | undefined, shading: RenderShading): Material | null;
 /**

package/dist/ceiling/materials.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"materials.d.ts","sourceRoot":"","sources":["../../src/ceiling/materials.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAInB,KAAK,aAAa,EAClB,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAA4C,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAA;AACjG,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAuB,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAmBzE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,qBAAqB,CAAA;IAClC,cAAc,EAAE,QAAQ,CAAA;CACzB,CAAA;AAgBD,wBAAgB,mBAAmB,CACjC,KAAK,SAAY,EACjB,OAAO,GAAE,aAA0B,GAClC,gBAAgB,CAuBlB;AAED,sFAAsF;AACtF,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,SAAS,EAC3C,cAAc,EAAE,MAAM,CAAC,eAAe,EAAE,aAAa,CAAC,GAAG,SAAS,EAClE,OAAO,EAAE,aAAa,GACrB,QAAQ,GAAG,IAAI,CA6BjB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,cAAc,EAAE,MAAM,CAAC,eAAe,EAAE,aAAa,CAAC,GAAG,SAAS,GACjE,MAAM,GAAG,IAAI,CAiBf"}
+{"version":3,"file":"materials.d.ts","sourceRoot":"","sources":["../../src/ceiling/materials.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAInB,KAAK,aAAa,EAClB,KAAK,eAAe,EACrB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAA4C,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAA;AACjG,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAuB,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAmBzE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,qBAAqB,CAAA;IAClC,cAAc,EAAE,QAAQ,CAAA;CACzB,CAAA;AAgBD,wBAAgB,mBAAmB,CACjC,KAAK,SAAY,EACjB,OAAO,GAAE,aAA0B,GAClC,gBAAgB,CAuBlB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,GAAG,QAAQ,CAerF;AAED,sFAAsF;AACtF,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,cAAc,GAAG,MAAM,GAAG,SAAS,EAC3C,cAAc,EAAE,MAAM,CAAC,eAAe,EAAE,aAAa,CAAC,GAAG,SAAS,EAClE,OAAO,EAAE,aAAa,GACrB,QAAQ,GAAG,IAAI,CA6BjB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,cAAc,EAAE,MAAM,CAAC,eAAe,EAAE,aAAa,CAAC,GAAG,SAAS,GACjE,MAAM,GAAG,IAAI,CAiBf"}

package/dist/ceiling/materials.js

@@ -49,6 +49,23 @@ export function getCeilingMaterials(color = '#999999', shading = 'rendered') {
         }, shading),
     };
 }
+/**
+ * The upper face, drawn while the viewer shows ceiling tops: the ceiling's colour, facing up, so
+ * the ceiling reads as solid from above.
+ */
+export function getCeilingCapMaterial(color, shading) {
+    return createMaterial({
+        preset: 'custom',
+        properties: {
+            color,
+            roughness: 0.9,
+            metalness: 0,
+            opacity: 1,
+            transparent: false,
+            side: 'front',
+        },
+    }, shading);
+}
 /** Resolve through the shared caches, without mutating another surface's material. */
 export function resolveCeilingFinish(finish, sceneMaterials, shading) {
     if (!finish)

package/dist/ceiling/panel-model.d.ts

@@ -0,0 +1,13 @@
+import { type CeilingBuildUp, type CeilingNode } from '@pascal-app/core';
+import type { NodePanelModel } from '@pascal-app/editor';
+/** The Preset choices for the `current` value: none, the presets, and Custom while it is. */
+export declare function ceilingBuildUpPresetOptions(current: string | null): {
+    label: string;
+    value: string;
+}[];
+export declare function ceilingBuildUpPresetValue(buildUp: CeilingBuildUp | undefined): string;
+/** The patch a Preset choice writes; `null` for Custom, which is no choice. */
+export declare function ceilingBuildUpPresetPatch(id: string): Partial<CeilingNode> | null;
+/** Multi-selected ceilings take one layers preset together, in one undo step. */
+export declare const ceilingPanelModel: NodePanelModel<CeilingNode>;
+//# sourceMappingURL=panel-model.d.ts.map

package/dist/ceiling/panel-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-model.d.ts","sourceRoot":"","sources":["../../src/ceiling/panel-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,WAAW,EAGjB,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAKxD,6FAA6F;AAC7F,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;;;IAMjE;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,cAAc,GAAG,SAAS,GAAG,MAAM,CAErF;AAED,+EAA+E;AAC/E,wBAAgB,yBAAyB,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAIjF;AAED,iFAAiF;AACjF,eAAO,MAAM,iBAAiB,EAAE,cAAc,CAAC,WAAW,CA4BzD,CAAA"}

package/dist/ceiling/panel-model.js

@@ -0,0 +1,49 @@
+import { CEILING_BUILD_UP_PRESETS, runAsSingleSceneHistoryStep, useScene, } from '@pascal-app/core';
+const NONE = 'none';
+const CUSTOM = 'custom';
+/** The Preset choices for the `current` value: none, the presets, and Custom while it is. */
+export function ceilingBuildUpPresetOptions(current) {
+    return [
+        { label: 'None (a bare surface)', value: NONE },
+        ...(current === CUSTOM ? [{ label: 'Custom', value: CUSTOM }] : []),
+        ...CEILING_BUILD_UP_PRESETS.map((preset) => ({ label: preset.label, value: preset.id })),
+    ];
+}
+export function ceilingBuildUpPresetValue(buildUp) {
+    return buildUp ? (buildUp.presetId ?? CUSTOM) : NONE;
+}
+/** The patch a Preset choice writes; `null` for Custom, which is no choice. */
+export function ceilingBuildUpPresetPatch(id) {
+    if (id === NONE)
+        return { buildUp: undefined };
+    const preset = CEILING_BUILD_UP_PRESETS.find((entry) => entry.id === id);
+    return preset ? { buildUp: preset.buildUp } : null;
+}
+/** Multi-selected ceilings take one layers preset together, in one undo step. */
+export const ceilingPanelModel = {
+    rows: () => [],
+    multiControls: ({ selection }) => {
+        if (selection.length === 0)
+            return [];
+        const values = selection.map((ceiling) => ceilingBuildUpPresetValue(ceiling.buildUp));
+        const value = values.every((entry) => entry === values[0]) ? values[0] : null;
+        return [
+            {
+                id: 'ceiling-layers-preset',
+                kind: 'select',
+                section: 'Layers',
+                label: 'Preset',
+                options: ceilingBuildUpPresetOptions(value),
+                value,
+                onChange: (id) => {
+                    const patch = ceilingBuildUpPresetPatch(id);
+                    if (!patch)
+                        return;
+                    runAsSingleSceneHistoryStep(useScene, () => useScene
+                        .getState()
+                        .updateNodes(selection.map((ceiling) => ({ id: ceiling.id, data: patch }))));
+                },
+            },
+        ];
+    },
+};

package/dist/ceiling/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/ceiling/panel.tsx"],"names":[],"mappings":"AA4BA;;;;;;;GAOG;AACH,wBAAgB,YAAY,uCA2Y3B;eAEc,YAAY"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/ceiling/panel.tsx"],"names":[],"mappings":"AAuCA;;;;;;;GAOG;AACH,wBAAgB,YAAY,uCA0d3B;eAEc,YAAY"}

package/dist/ceiling/panel.js

@@ -1,10 +1,11 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { resolveCeilingHeight, useScene } from '@pascal-app/core';
-import { ActionButton, ActionGroup, exitCeilingEditToRoom, formatLinearMeasurement, holeEditScope, PanelSection, PanelWrapper, SegmentedControl, ShapeChoice, SliderControl, setCeilingHoles, startOpeningDraft, triggerSFX, useCeilingEditCeilingId, useCeilingEditSession, useEditingHole, useEditor, useInteractionScope, } from '@pascal-app/editor';
+import { formatAreaLabel, formatFixed, formatLinearMeasurement, getAreaUnitLabel, resolveCeilingHeight, squareMetersToAreaUnit, usePascalI18n, useScene, } from '@pascal-app/core';
+import { ActionButton, ActionGroup, exitCeilingEditToRoom, holeEditScope, PanelSection, PanelWrapper, SegmentedControl, ShapeChoice, SliderControl, setCeilingHoles, startOpeningDraft, triggerSFX, useCeilingEditCeilingId, useCeilingEditSession, useEditingHole, useEditor, useInteractionScope, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 import { Edit, Move, Plus, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useRef } from 'react';
+import { CeilingBuildUpSection } from './build-up-section.js';
 import { CEILING_PANEL_MIN_HEIGHT, ceilingHeightRange, clampCeilingHeight } from './height-bounds.js';
 /**
  * Phase 5 Stage E — ceiling inspector (kind-owned).
@@ -15,6 +16,7 @@ import { CEILING_PANEL_MIN_HEIGHT, ceilingHeightRange, clampCeilingHeight } from
  * panel can collapse into auto-derived groups.
  */
 export function CeilingPanel() {
+    const i18n = usePascalI18n();
     const selectedId = useViewer((s) => s.selection.selectedIds[0]);
     const unit = useViewer((s) => s.unit);
     const metricNotation = useViewer((s) => s.metricNotation);
@@ -186,38 +188,100 @@ export function CeilingPanel() {
     // for 8'0" / 8'6" / 9'0" ceilings.
     const heightPresets = unit === 'imperial'
         ? [
-            { label: 'Low (8\'0")', height: 2.4384 },
-            { label: 'Standard (8\'6")', height: 2.5908 },
-            { label: 'High (9\'0")', height: 2.7432 },
+            {
+                label: i18n._({ id: 'node.ceiling.panel.low80', message: 'Low (8\'0")' }),
+                height: 2.4384,
+            },
+            {
+                label: i18n._({ id: 'node.ceiling.panel.standard86', message: 'Standard (8\'6")' }),
+                height: 2.5908,
+            },
+            {
+                label: i18n._({ id: 'node.ceiling.panel.high90', message: 'High (9\'0")' }),
+                height: 2.7432,
+            },
         ]
         : [
-            { label: 'Low (2.4m)', height: 2.4 },
-            { label: 'Standard (2.5m)', height: 2.5 },
-            { label: 'High (3.0m)', height: 3.0 },
+            {
+                label: i18n._({ id: 'node.ceiling.panel.low24m', message: 'Low (2.4m)' }),
+                height: 2.4,
+            },
+            {
+                label: i18n._({ id: 'node.ceiling.panel.standard25m', message: 'Standard (2.5m)' }),
+                height: 2.5,
+            },
+            {
+                label: i18n._({ id: 'node.ceiling.panel.high30m', message: 'High (3.0m)' }),
+                height: 3.0,
+            },
         ];
-    return (_jsxs(PanelWrapper, { icon: "/icons/ceiling.webp", onClose: handleClose, title: node.name || 'Ceiling', width: 320, children: [_jsxs(PanelSection, { title: "Height", children: [_jsx(SegmentedControl, { onChange: handleTopModeChange, options: [
-                            { label: 'Follows level', value: 'storey' },
-                            { label: 'Custom height', value: 'custom' },
-                        ], value: isFollows ? 'storey' : 'custom' }), isFollows ? (_jsxs("div", { className: "px-1 text-[11px] text-muted-foreground", children: ["Currently ", formatLinearMeasurement(resolvedHeight, unit, metricNotation)] })) : (_jsx(SliderControl, { label: "Height", max: Math.min(1000, maxHeight), min: minHeight, onChange: handleHeightChange, precision: 3, step: 0.01, unit: "m", value: node.height ?? resolvedHeight })), _jsx("div", { className: "mt-2 grid grid-cols-3 gap-1.5 px-1 pb-1", children: heightPresets.map((preset) => {
+    return (_jsxs(PanelWrapper, { icon: "/icons/ceiling.webp", onClose: handleClose, title: node.name || i18n._({ id: 'node.ceiling.panel.ceiling', message: 'Ceiling' }), width: 320, children: [_jsxs(PanelSection, { title: i18n._({ id: 'node.ceiling.panel.height', message: 'Height' }), children: [_jsx(SegmentedControl, { onChange: handleTopModeChange, options: [
+                            {
+                                label: i18n._({ id: 'node.ceiling.panel.followsLevel', message: 'Follows level' }),
+                                value: 'storey',
+                            },
+                            {
+                                label: i18n._({ id: 'node.ceiling.panel.customHeight', message: 'Custom height' }),
+                                value: 'custom',
+                            },
+                        ], value: isFollows ? 'storey' : 'custom' }), isFollows ? (_jsx("div", { className: "px-1 text-[11px] text-muted-foreground", children: i18n._({
+                            id: 'node.panel.currently',
+                            message: 'Currently {value}',
+                            values: { value: formatLinearMeasurement(resolvedHeight, unit, metricNotation) },
+                        }) })) : (_jsx(SliderControl, { label: i18n._({ id: 'node.ceiling.panel.height', message: 'Height' }), max: Math.min(1000, maxHeight), min: minHeight, onChange: handleHeightChange, precision: 3, step: 0.01, unit: "m", value: node.height ?? resolvedHeight })), _jsx("div", { className: "mt-2 grid grid-cols-3 gap-1.5 px-1 pb-1", children: heightPresets.map((preset) => {
                             const fits = preset.height <= maxHeight;
                             return (_jsx(ActionButton, { className: fits ? undefined : 'cursor-not-allowed opacity-40', disabled: !fits, label: preset.label, onClick: () => handleHeightChange(preset.height), title: fits
                                     ? undefined
-                                    : `Taller than this level (${formatLinearMeasurement(maxHeight, unit, metricNotation)} available). Raise the level height first.` }, preset.label));
-                        }) }), Number.isFinite(maxHeight) && (_jsxs("div", { className: "px-1 pb-1 text-[11px] text-muted-foreground", children: ["Limited by the level to ", formatLinearMeasurement(maxHeight, unit, metricNotation), " \u2014 raise the level height for a taller ceiling."] }))] }), _jsx(PanelSection, { title: "Info", children: _jsxs("div", { className: "flex items-center justify-between px-2 py-1 text-muted-foreground text-sm", children: [_jsx("span", { children: "Area" }), _jsxs("span", { className: "font-mono text-foreground dark:text-white", children: [area.toFixed(2), " m\u00B2"] })] }) }), _jsxs(PanelSection, { title: "Holes", children: [node.holes && node.holes.length > 0 ? (_jsx("div", { className: "flex flex-col gap-1 pb-2", children: node.holes.map((hole, index) => {
+                                    : i18n._({
+                                        id: 'node.ceiling.panel.tallerThanLevel',
+                                        message: 'Taller than this level ({available} available). Raise the level height first.',
+                                        values: {
+                                            available: formatLinearMeasurement(maxHeight, unit, metricNotation),
+                                        },
+                                    }) }, preset.label));
+                        }) }), Number.isFinite(maxHeight) && (_jsx("div", { className: "px-1 pb-1 text-[11px] text-muted-foreground", children: i18n._({
+                            id: 'node.ceiling.panel.limitedByLevel',
+                            message: 'Limited by the level to {height} — raise the level height for a taller ceiling.',
+                            values: { height: formatLinearMeasurement(maxHeight, unit, metricNotation) },
+                        }) }))] }), _jsx(CeilingBuildUpSection, { node: node, onUpdate: handleUpdate, unit: unit }), _jsx(PanelSection, { title: i18n._({ id: 'node.ceiling.panel.info', message: 'Info' }), children: _jsxs("div", { className: "flex items-center justify-between px-2 py-1 text-muted-foreground text-sm", children: [_jsx("span", { children: i18n._({ id: 'node.ceiling.panel.area', message: 'Area' }) }), _jsx("span", { className: "font-mono text-foreground dark:text-white", children: formatAreaLabel(area, unit, 2) })] }) }), _jsxs(PanelSection, { title: i18n._({ id: 'node.ceiling.panel.holes', message: 'Holes' }), children: [node.holes && node.holes.length > 0 ? (_jsx("div", { className: "flex flex-col gap-1 pb-2", children: node.holes.map((hole, index) => {
                             const holeArea = calculateArea(hole);
                             const isEditing = editingHole?.nodeId === selectedId && editingHole?.holeIndex === index;
                             const source = node.holeMetadata?.[index]?.source ?? 'manual';
                             const isAutoHole = source !== 'manual';
-                            const autoLabel = source === 'elevator' ? 'Auto elevator cutout' : 'Auto stair cutout';
+                            const autoLabel = source === 'elevator'
+                                ? i18n._({ id: 'node.cutout.autoElevator', message: 'Auto elevator cutout' })
+                                : i18n._({ id: 'node.cutout.autoStair', message: 'Auto stair cutout' });
                             return (_jsxs("div", { className: `flex items-center justify-between rounded-lg border p-2 transition-colors ${isEditing
                                     ? 'border-primary/50 bg-primary/10'
-                                    : 'border-transparent hover:bg-accent/30'}`, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("p", { className: `font-medium text-xs ${isEditing ? 'text-primary' : 'text-foreground dark:text-white'}`, children: ["Hole ", index + 1, " ", isEditing && '(Editing)'] }), _jsxs("p", { className: "text-[10px] text-muted-foreground", children: [holeArea.toFixed(2), " m\u00B2 \u00B7 ", hole.length, " pts \u00B7", ' ', isAutoHole ? autoLabel : 'Manual'] })] }), _jsx("div", { className: "flex items-center gap-1", children: isEditing ? (_jsx(ActionButton, { className: "h-7 bg-primary text-primary-foreground hover:bg-primary/90", label: "Done", onClick: () => {
+                                    : 'border-transparent hover:bg-accent/30'}`, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: `font-medium text-xs ${isEditing ? 'text-primary' : 'text-foreground dark:text-white'}`, children: isEditing
+                                                    ? i18n._({
+                                                        id: 'node.holeEditing',
+                                                        message: 'Hole {number} (Editing)',
+                                                        values: { number: index + 1 },
+                                                    })
+                                                    : i18n._({
+                                                        id: 'node.holeNumber',
+                                                        message: 'Hole {number}',
+                                                        values: { number: index + 1 },
+                                                    }) }), _jsx("p", { className: "text-[10px] text-muted-foreground", children: i18n._({
+                                                    id: 'node.holeSummary',
+                                                    message: '{area} {unit} · {count, plural, one {{points} pt} other {{points} pts}} · {source}',
+                                                    values: {
+                                                        area: formatFixed(squareMetersToAreaUnit(holeArea, unit), 2, i18n.getLocale()),
+                                                        unit: getAreaUnitLabel(unit),
+                                                        count: hole.length,
+                                                        points: String(hole.length),
+                                                        source: isAutoHole
+                                                            ? autoLabel
+                                                            : i18n._({ id: 'node.hole.manual', message: 'Manual' }),
+                                                    },
+                                                }) })] }), _jsx("div", { className: "flex items-center gap-1", children: isEditing ? (_jsx(ActionButton, { className: "h-7 bg-primary text-primary-foreground hover:bg-primary/90", label: i18n._({ id: 'node.ceiling.panel.done', message: 'Done' }), onClick: () => {
                                                 useInteractionScope
                                                     .getState()
                                                     .endIf((scope) => scope.kind === 'reshaping' && scope.reshape === 'hole');
                                                 // A finished opening is a completed action: back to the room.
                                                 exitCeilingEditToRoom();
-                                            } })) : isAutoHole ? (_jsx("div", { className: "rounded-md bg-black/4 dark:bg-[#2C2C2E] px-2 py-1 text-[10px] text-muted-foreground", children: "Auto" })) : canEditHoles ? (_jsxs(_Fragment, { children: [_jsx("button", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground", onClick: () => handleEditHole(index), type: "button", children: _jsx(Edit, { className: "h-3.5 w-3.5" }) }), _jsx("button", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 hover:text-red-700 dark:hover:text-red-300", onClick: () => handleDeleteHole(index), type: "button", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })) : null })] }, index));
-                        }) })) : (_jsx("div", { className: "px-2 py-3 text-center text-muted-foreground text-xs", children: "No holes" })), _jsx("div", { className: "px-1 pt-1 pb-1", children: roomZoneId ? (_jsx(ShapeChoice, { className: "px-1 text-muted-foreground text-xs", disabled: !canEditHoles, label: "Cut opening", onPick: (shape) => startOpeningDraft(roomZoneId, 'ceiling', shape) })) : (_jsx(ActionButton, { className: "w-full", disabled: !canEditHoles || editingHole?.nodeId === selectedId, icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: "Add Hole", onClick: handleAddHole })) })] }), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Move, { className: "h-3.5 w-3.5" }), label: "Move", onClick: handleMove }) })] }));
+                                            } })) : isAutoHole ? (_jsx("div", { className: "rounded-md bg-black/4 dark:bg-[#2C2C2E] px-2 py-1 text-[10px] text-muted-foreground", children: i18n._({ id: 'node.ceiling.panel.auto', message: 'Auto' }) })) : canEditHoles ? (_jsxs(_Fragment, { children: [_jsx("button", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-black/4 dark:bg-[#2C2C2E] text-muted-foreground hover:bg-black/8 dark:hover:bg-[#3e3e3e] hover:text-foreground", onClick: () => handleEditHole(index), type: "button", children: _jsx(Edit, { className: "h-3.5 w-3.5" }) }), _jsx("button", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 hover:text-red-700 dark:hover:text-red-300", onClick: () => handleDeleteHole(index), type: "button", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })) : null })] }, index));
+                        }) })) : (_jsx("div", { className: "px-2 py-3 text-center text-muted-foreground text-xs", children: i18n._({ id: 'node.ceiling.panel.noHoles', message: 'No holes' }) })), _jsx("div", { className: "px-1 pt-1 pb-1", children: roomZoneId ? (_jsx(ShapeChoice, { className: "px-1 text-muted-foreground text-xs", disabled: !canEditHoles, label: i18n._({ id: 'node.ceiling.panel.cutOpening', message: 'Cut opening' }), onPick: (shape) => startOpeningDraft(roomZoneId, 'ceiling', shape) })) : (_jsx(ActionButton, { className: "w-full", disabled: !canEditHoles || editingHole?.nodeId === selectedId, icon: _jsx(Plus, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.ceiling.panel.addHole', message: 'Add Hole' }), onClick: handleAddHole })) })] }), _jsx(ActionGroup, { children: _jsx(ActionButton, { icon: _jsx(Move, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.ceiling.panel.move', message: 'Move' }), onClick: handleMove }) })] }));
 }
 export default CeilingPanel;

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

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/ceiling/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,WAAW,EAOjB,MAAM,kBAAkB,CAAA;AAoBzB,eAAO,MAAM,eAAe,aAAc;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,gCAiJ9D,CAAA;eAEc,eAAe"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/ceiling/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,WAAW,EAOjB,MAAM,kBAAkB,CAAA;AA6BzB,eAAO,MAAM,eAAe,aAAc;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,gCA6J9D,CAAA;eAEc,eAAe"}

package/dist/ceiling/renderer.js

@@ -1,14 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CEILING_DRAW_OFFSET, CEILING_SLOT_DEFAULT_COLOR, ceilingPaintRegions, resolveCeilingHeight, resolveMaterial, useLiveTransforms, useRegistry, useScene, } from '@pascal-app/core';
-import { CEILING_REGION_MESH, createSurfaceRoleMaterial, NodeRenderer, resolveSurfaceColor, useLibraryMaterialsVersion, useNodeEvents, useViewer, } from '@pascal-app/viewer';
+import { CEILING_CAP_MESH, CEILING_REGION_MESH, createSurfaceRoleMaterial, NodeRenderer, resolveSurfaceColor, useLibraryMaterialsVersion, useNodeEvents, useViewer, } from '@pascal-app/viewer';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
-import { BackSide } from 'three/webgpu';
+import { BackSide, FrontSide } from 'three/webgpu';
 import { createPlaceholderGeometry } from '../shared/placeholder-geometry.js';
-import { ceilingColorFromRef, getCeilingMaterials, resolveCeilingFinish } from './materials.js';
+import { ceilingColorFromRef, getCeilingCapMaterial, getCeilingMaterials, resolveCeilingFinish, } from './materials.js';
 function createEmptyGeometry() {
     return createPlaceholderGeometry();
 }
+// The cap is only seen: a click from above still reaches what it reached without it.
+const noopRaycast = () => { };
 export const CeilingRenderer = ({ node }) => {
     const ref = useRef(null);
     const handlers = useNodeEvents(node, 'ceiling');
@@ -29,6 +31,7 @@ export const CeilingRenderer = ({ node }) => {
     const libraryMaterialsVersion = useLibraryMaterialsVersion();
     const colorPreset = useViewer((s) => s.colorPreset);
     const sceneTheme = useViewer((s) => s.sceneTheme);
+    const showTop = useViewer((s) => s.showCeilingTops);
     // Subscribe to the scene-material library so editing a `scene:` material the
     // ceiling slot references re-tints it live.
     const sceneMaterials = useScene((s) => s.materials);
@@ -57,11 +60,13 @@ export const CeilingRenderer = ({ node }) => {
         // revealed (placing a ceiling-hosted item, or selecting one of its
         // children). Without that the top mesh would ship an opaque surface-role
         // material and a top-down camera would lose everything under the ceiling.
+        // The opaque top is the cap's, drawn only while the viewer shows ceiling tops.
         if (!textures) {
             const ceilingColor = resolveSurfaceColor('ceiling', colorPreset, sceneTheme);
             return {
                 topMaterial: getCeilingMaterials(ceilingColor).topMaterial,
                 bottomMaterial: createSurfaceRoleMaterial('ceiling', colorPreset, BackSide, sceneTheme),
+                capMaterial: createSurfaceRoleMaterial('ceiling', colorPreset, FrontSide, sceneTheme),
             };
         }
         // The grid remains transparent from above; only the room-facing material
@@ -72,6 +77,7 @@ export const CeilingRenderer = ({ node }) => {
         const fallback = getCeilingMaterials(gridColor, shading);
         return {
             topMaterial: fallback.topMaterial,
+            capMaterial: getCeilingCapMaterial(gridColor, shading),
             bottomMaterial: resolveCeilingFinish(node.slots?.surface, sceneMaterials, shading) ??
                 resolveCeilingFinish(node.materialPreset, sceneMaterials, shading) ??
                 resolveCeilingFinish(node.material, sceneMaterials, shading) ??
@@ -122,6 +128,6 @@ export const CeilingRenderer = ({ node }) => {
         builtRegionsKey.current = regionsKey;
         useScene.getState().markDirty(node.id);
     }, [node.id, regionsKey]);
-    return (_jsxs("mesh", { castShadow: true, receiveShadow: true, geometry: placeholderGeometry, material: materials.bottomMaterial, position: position, ref: ref, visible: node.visible !== false, ...handlers, children: [_jsx("mesh", { geometry: gridPlaceholderGeometry, material: materials.topMaterial, name: "ceiling-grid", scale: 0, visible: false }), (node.children ?? []).map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId)))] }));
+    return (_jsxs("mesh", { castShadow: true, receiveShadow: true, geometry: placeholderGeometry, material: materials.bottomMaterial, position: position, ref: ref, visible: node.visible !== false, ...handlers, children: [_jsx("mesh", { geometry: gridPlaceholderGeometry, material: materials.topMaterial, name: "ceiling-grid", scale: 0, visible: false }), _jsx("mesh", { geometry: gridPlaceholderGeometry, material: materials.capMaterial, name: CEILING_CAP_MESH, raycast: noopRaycast, receiveShadow: true, visible: showTop }), (node.children ?? []).map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId)))] }));
 };
 export default CeilingRenderer;

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

@@ -1 +1 @@
-{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/ceiling/tool.tsx"],"names":[],"mappings":"AAqDA,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAuW/B,CAAA;eAEc,WAAW"}
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../../src/ceiling/tool.tsx"],"names":[],"mappings":"AAsDA,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA2X/B,CAAA;eAEc,WAAW"}

package/dist/ceiling/tool.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DEFAULT_ANGLE_STEP, emitter, snapPointAlongAngleRay, snapPointToGrid, useScene, } from '@pascal-app/core';
-import { CursorSphere, clearCeilingSnapFeedback, EDITOR_LAYER, isAngleSnapActive, isGridSnapActive, markToolCancelConsumed, resolveCeilingPlanPointSnap, triggerSFX, useEditor, useFloorplanDraftPreview, } from '@pascal-app/editor';
+import { CursorSphere, clearCeilingSnapFeedback, EDITOR_LAYER, isAngleSnapActive, isGridSnapActive, markToolCancelConsumed, resolveCeilingPlanPointSnap, triggerSFX, useEditor, useFloorplanDraftPreview, visibleScene, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { BufferGeometry, DoubleSide, Shape, Vector3 } from 'three';
@@ -62,6 +62,22 @@ export const CeilingTool = () => {
         }
         draftPreview.setCursorPoint(null);
     }, []);
+    // The plan keeps its own copy of the corners, started empty on every view change, and finishes a
+    // polygon in 2D-only view without this tool. Corners kept here once the plan shows (from split
+    // or 3D-only view) would close a different polygon than the one the plan draws.
+    useEffect(() => {
+        let shownScene = visibleScene(useEditor.getState());
+        return useEditor.subscribe((state) => {
+            const nextScene = visibleScene(state);
+            if (nextScene === shownScene)
+                return;
+            shownScene = nextScene;
+            if (nextScene === '3d')
+                return;
+            setPoints([]);
+            clearCeilingSnapFeedback();
+        });
+    }, []);
     const verticalGeo = useMemo(() => new BufferGeometry().setFromPoints([
         new Vector3(0, 0, 0),
         new Vector3(0, CEILING_HEIGHT - GRID_OFFSET, 0),
@@ -70,8 +86,12 @@ export const CeilingTool = () => {
     useEffect(() => {
         if (!currentLevelId)
             return;
+        // In 2D-only view the plan drafts and commits the ceiling; this tool, mounted behind the
+        // hidden canvas from an earlier visit, still hears the plan's grid events, so it stands aside
+        // (it made every ceiling twice).
+        const planOwnsInput = () => visibleScene(useEditor.getState()) === '2d';
         const onGridMove = (event) => {
-            if (!(cursorRef.current && gridCursorRef.current))
+            if (!(cursorRef.current && gridCursorRef.current) || planOwnsInput())
                 return;
             const rawPoint = [event.localPosition[0], event.localPosition[2]];
             // Honour the active snapping mode: grid lattice + 15° angle lock are each
@@ -107,7 +127,7 @@ export const CeilingTool = () => {
             }
         };
         const onGridClick = (_event) => {
-            if (!currentLevelId)
+            if (!currentLevelId || planOwnsInput())
                 return;
             const clickPoint = previousSnappedPointRef.current ?? cursorPosition;
             const firstPoint = points[0];
@@ -128,7 +148,7 @@ export const CeilingTool = () => {
             }
         };
         const onGridDoubleClick = (_event) => {
-            if (!currentLevelId)
+            if (!currentLevelId || planOwnsInput())
                 return;
             if (points.length >= 3) {
                 const ceilingId = commitCeilingDrawing(currentLevelId, points);