@pascal-app/nodes 0.1.1

package/dist/ceiling/move-tool.d.ts

@@ -0,0 +1,6 @@
+import { type CeilingNode } from '@pascal-app/core';
+export declare const MoveCeilingTool: React.FC<{
+    node: CeilingNode;
+}>;
+export default MoveCeilingTool;
+//# sourceMappingURL=move-tool.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"move-tool.d.ts","sourceRoot":"","sources":["../../src/ceiling/move-tool.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,WAAW,EAUjB,MAAM,kBAAkB,CAAA;AAgFzB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAuK3D,CAAA;AAiHD,eAAe,eAAe,CAAA"}

package/dist/ceiling/move-tool.js

@@ -0,0 +1,264 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { collectAlignmentAnchors, emitter, polygonAnchors, resolveAlignment, sceneRegistry, snapScalar, useLiveTransforms, useScene, } from '@pascal-app/core';
+import { CursorSphere, consumePlacementDragRelease, isAlignmentGuideActive, isMagneticSnapActive, markToolCancelConsumed, triggerSFX, useAlignmentGuides, useEditor, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { BufferGeometry, DoubleSide, Path, Shape, ShapeGeometry, Vector3 } from 'three';
+/**
+ * Phase 5 Stage D — ceiling whole-move tool.
+ *
+ * Live-drag pattern: translate the ceiling MESH visually via
+ * `sceneRegistry.nodes.get(id).position` + a mirror in
+ * `useLiveTransforms`. No `scene.update` during the drag — polygon CSG
+ * with holes isn't rebuilt per tick. On commit we write the translated
+ * polygon to the scene once; the legacy `CeilingSystem` resets the
+ * mesh's X/Z position on rebuild (`mesh.position.x = 0`,
+ * `mesh.position.z = 0`) so the visual transitions smoothly.
+ *
+ * Snaps to the editor's configured grid step.
+ */
+function snap(value) {
+    return snapScalar(value, useEditor.getState().gridSnapStep);
+}
+/** Figma-style alignment-snap threshold (meters), matching the other tools. */
+const ALIGNMENT_THRESHOLD_M = 0.08;
+function translatePolygon(polygon, deltaX, deltaZ) {
+    return polygon.map(([x, z]) => [x + deltaX, z + deltaZ]);
+}
+function getPolygonCenter(polygon) {
+    if (polygon.length === 0)
+        return [0, 0];
+    let sumX = 0;
+    let sumZ = 0;
+    for (const [x, z] of polygon) {
+        sumX += x;
+        sumZ += z;
+    }
+    return [sumX / polygon.length, sumZ / polygon.length];
+}
+function setMeshOffset(id, deltaX, deltaZ, height) {
+    const mesh = sceneRegistry.nodes.get(id);
+    // CeilingSystem positions the mesh at height−0.01 on rebuild; we
+    // preserve the Y while offsetting X/Z during the drag.
+    if (mesh)
+        mesh.position.set(deltaX, height - 0.01, deltaZ);
+}
+/**
+ * Distinguish 3D-canvas grid events (this tool) from 2D floor-plan
+ * grid events (`ceilingFloorplanMoveTarget` + `FloorplanRegistryMoveOverlay`
+ * Path 1). See the equivalent helper in `slab/move-tool.tsx` for the
+ * full rationale.
+ */
+function isFloorplanSourcedEvent(event) {
+    const native = event.nativeEvent;
+    const candidate = native ?? null;
+    const target = candidate?.target ??
+        candidate?.nativeEvent?.target ??
+        null;
+    if (!target || typeof target.closest !== 'function')
+        return false;
+    return target.closest('[data-floorplan-scene]') != null;
+}
+export const MoveCeilingTool = ({ node }) => {
+    const activatedAtRef = useRef(Date.now());
+    const originalPolygonRef = useRef(node.polygon.map(([x, z]) => [x, z]));
+    const originalHolesRef = useRef((node.holes ?? []).map((hole) => hole.map(([x, z]) => [x, z])));
+    const originalCenterRef = useRef(getPolygonCenter(originalPolygonRef.current));
+    const heightRef = useRef(node.height ?? 2.5);
+    const dragAnchorRef = useRef(null);
+    const previousGridPosRef = useRef(null);
+    const deltaRef = useRef([0, 0]);
+    const [cursorLocalPos, setCursorLocalPos] = useState(() => {
+        const c = originalCenterRef.current;
+        return [c[0], heightRef.current, c[1]];
+    });
+    const exitMoveMode = useCallback(() => {
+        useEditor.getState().setMovingNode(null);
+    }, []);
+    useEffect(() => {
+        const originalPolygon = originalPolygonRef.current;
+        const originalHoles = originalHolesRef.current;
+        const originalCenter = originalCenterRef.current;
+        const height = heightRef.current;
+        const ceilingId = node.id;
+        // Alignment candidates — every other alignable object's anchors,
+        // gathered once (the scene graph is stable during the drag).
+        const alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, ceilingId);
+        let wasCommitted = false;
+        const applyPreview = (deltaX, deltaZ) => {
+            deltaRef.current = [deltaX, deltaZ];
+            setMeshOffset(ceilingId, deltaX, deltaZ, height);
+            // Aligned with slab/fence: the delta matches the direct mesh
+            // mutation. CeilingRenderer also consumes this store so external
+            // movers can preview ceilings without rebuilding the polygon.
+            useLiveTransforms.getState().set(ceilingId, {
+                position: [deltaX, 0, deltaZ],
+                rotation: 0,
+            });
+            setCursorLocalPos([originalCenter[0] + deltaX, height, originalCenter[1] + deltaZ]);
+        };
+        const clearPreview = () => {
+            const mesh = sceneRegistry.nodes.get(ceilingId);
+            if (mesh) {
+                mesh.position.x = 0;
+                mesh.position.z = 0;
+                // Leave Y at whatever the CeilingSystem set it to.
+            }
+            useLiveTransforms.getState().clear(ceilingId);
+        };
+        const onGridMove = (event) => {
+            if (isFloorplanSourcedEvent(event))
+                return;
+            const localX = snap(event.localPosition[0]);
+            const localZ = snap(event.localPosition[2]);
+            if (previousGridPosRef.current &&
+                (localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])) {
+                triggerSFX('sfx:grid-snap');
+            }
+            previousGridPosRef.current = [localX, localZ];
+            const anchor = dragAnchorRef.current ?? [localX, localZ];
+            dragAnchorRef.current = anchor;
+            let deltaX = localX - anchor[0];
+            let deltaZ = localZ - anchor[1];
+            // Figma-style alignment snap: align the ceiling's translated polygon
+            // vertices to other objects' anchors and publish a guide. Guides are
+            // DISPLAYED in every snapping mode (isAlignmentGuideActive); the magnetic
+            // pull into the delta applies only in 'lines' mode (isMagneticSnapActive).
+            if (isAlignmentGuideActive() && alignmentCandidates.length > 0) {
+                const result = resolveAlignment({
+                    moving: polygonAnchors(ceilingId, translatePolygon(originalPolygon, deltaX, deltaZ)),
+                    candidates: alignmentCandidates,
+                    threshold: ALIGNMENT_THRESHOLD_M,
+                });
+                if (result.snap && isMagneticSnapActive()) {
+                    deltaX += result.snap.dx;
+                    deltaZ += result.snap.dz;
+                }
+                useAlignmentGuides.getState().set(result.guides);
+            }
+            else {
+                useAlignmentGuides.getState().clear();
+            }
+            applyPreview(deltaX, deltaZ);
+        };
+        const onGridClick = (event) => {
+            if (wasCommitted)
+                return;
+            if (isFloorplanSourcedEvent(event))
+                return;
+            if (Date.now() - activatedAtRef.current < 150) {
+                event.nativeEvent?.stopPropagation?.();
+                return;
+            }
+            const [deltaX, deltaZ] = deltaRef.current;
+            wasCommitted = true;
+            if (deltaX !== 0 || deltaZ !== 0) {
+                useScene.getState().updateNode(ceilingId, {
+                    polygon: translatePolygon(originalPolygon, deltaX, deltaZ),
+                    holes: originalHoles.map((h) => translatePolygon(h, deltaX, deltaZ)),
+                });
+                useScene.getState().markDirty(ceilingId);
+            }
+            useLiveTransforms.getState().clear(ceilingId);
+            useAlignmentGuides.getState().clear();
+            triggerSFX('sfx:item-place');
+            useViewer.getState().setSelection({ selectedIds: [ceilingId] });
+            exitMoveMode();
+            event.nativeEvent?.stopPropagation?.();
+        };
+        const onPlacementDragPointerUp = (event) => {
+            if (!consumePlacementDragRelease(event))
+                return;
+            activatedAtRef.current = 0;
+            onGridClick({ nativeEvent: event });
+        };
+        const onCancel = () => {
+            clearPreview();
+            useAlignmentGuides.getState().clear();
+            useViewer.getState().setSelection({ selectedIds: [ceilingId] });
+            markToolCancelConsumed();
+            exitMoveMode();
+        };
+        emitter.on('grid:move', onGridMove);
+        emitter.on('grid:click', onGridClick);
+        emitter.on('tool:cancel', onCancel);
+        window.addEventListener('pointerup', onPlacementDragPointerUp);
+        return () => {
+            useAlignmentGuides.getState().clear();
+            if (!wasCommitted) {
+                clearPreview();
+            }
+            else {
+                useLiveTransforms.getState().clear(ceilingId);
+            }
+            emitter.off('grid:move', onGridMove);
+            emitter.off('grid:click', onGridClick);
+            emitter.off('tool:cancel', onCancel);
+            window.removeEventListener('pointerup', onPlacementDragPointerUp);
+        };
+    }, [exitMoveMode, node.id]);
+    return (_jsx(CeilingMovePreview, { ceilingId: node.id, cursorLocalPos: cursorLocalPos, height: node.height ?? 2.5, originalHoles: originalHolesRef.current, originalPolygon: originalPolygonRef.current }));
+};
+/**
+ * Translucent fill + bright outline showing where the ceiling will land
+ * during the drag. Mirrors the legacy `MoveCeilingTool` overlay so the
+ * 3D viewer has a visible cue from above (the ceiling's child grid mesh
+ * is hidden by default — without this preview the only mesh that shows
+ * from above is the (translated) translucent ceiling itself, which is
+ * easy to miss). Works for both the 3D `grid:move` path (this tool
+ * writes `useLiveTransforms.position = [Δx, 0, Δz]` directly) and the
+ * 2D floor-plan move path (`slab/ceiling/floorplan-move.ts` writes the
+ * same value); we subscribe to that store so the preview tracks the
+ * current delta regardless of which mover is driving it.
+ */
+function CeilingMovePreview({ ceilingId, cursorLocalPos, height, originalHoles, originalPolygon, }) {
+    const live = useLiveTransforms((s) => s.get(ceilingId));
+    const dx = live?.position[0] ?? 0;
+    const dz = live?.position[2] ?? 0;
+    const previewPolygon = useMemo(() => originalPolygon.map(([x, z]) => [x + dx, z + dz]), [originalPolygon, dx, dz]);
+    const previewHoles = useMemo(() => originalHoles.map((hole) => hole.map(([x, z]) => [x + dx, z + dz])), [originalHoles, dx, dz]);
+    const previewFillGeometry = useMemo(() => createCeilingPreviewGeometry(previewPolygon, previewHoles), [previewPolygon, previewHoles]);
+    const previewOutlineGeometry = useMemo(() => createCeilingOutlineGeometry(previewPolygon), [previewPolygon]);
+    return (_jsxs("group", { children: [_jsx("mesh", { geometry: previewFillGeometry, position: [0, height + 0.012, 0], children: _jsx("meshBasicMaterial", { color: "#f5f5f4", depthWrite: false, opacity: 0.3, side: DoubleSide, transparent: true }) }), _jsx("line", { geometry: previewOutlineGeometry, position: [0, height + 0.02, 0], children: _jsx("lineBasicMaterial", { color: "#ffffff", depthWrite: false, opacity: 0.95, transparent: true }) }), _jsx(CursorSphere, { position: cursorLocalPos, showTooltip: false })] }));
+}
+function createCeilingPreviewGeometry(polygon, holes) {
+    if (polygon.length < 3)
+        return new BufferGeometry();
+    const shape = new Shape();
+    const first = polygon[0];
+    shape.moveTo(first[0], -first[1]);
+    for (let i = 1; i < polygon.length; i++) {
+        const pt = polygon[i];
+        shape.lineTo(pt[0], -pt[1]);
+    }
+    shape.closePath();
+    for (const holePolygon of holes) {
+        if (holePolygon.length < 3)
+            continue;
+        const hole = new Path();
+        const hf = holePolygon[0];
+        hole.moveTo(hf[0], -hf[1]);
+        for (let i = 1; i < holePolygon.length; i++) {
+            const pt = holePolygon[i];
+            hole.lineTo(pt[0], -pt[1]);
+        }
+        hole.closePath();
+        shape.holes.push(hole);
+    }
+    const geometry = new ShapeGeometry(shape);
+    geometry.rotateX(-Math.PI / 2);
+    geometry.computeVertexNormals();
+    return geometry;
+}
+function createCeilingOutlineGeometry(polygon) {
+    const geometry = new BufferGeometry();
+    if (polygon.length < 2)
+        return geometry;
+    const points = polygon.map(([x, z]) => new Vector3(x, 0, z));
+    const first = polygon[0];
+    points.push(new Vector3(first[0], 0, first[1]));
+    geometry.setFromPoints(points);
+    return geometry;
+}
+export default MoveCeilingTool;

package/dist/ceiling/paint.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Ceiling paint on the unified slot model. A ceiling has one paintable surface,
+ * so every hit resolves to `surface`; commit writes `node.slots.surface`. The
+ * preview swaps the registered underside mesh to the ceiling's own flat-tinted
+ * material (built `BackSide`, the way it renders), so the hover preview matches
+ * the committed result — a generic PBR preview would be invisible from below.
+ */
+export declare const ceilingPaint: import("@pascal-app/core").PaintCapability;
+//# sourceMappingURL=paint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paint.d.ts","sourceRoot":"","sources":["../../src/ceiling/paint.ts"],"names":[],"mappings":"AAUA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,4CAwBvB,CAAA"}

package/dist/ceiling/paint.js

@@ -0,0 +1,37 @@
+import { getMaterialPresetByRef, resolveMaterial, } from '@pascal-app/core';
+import { createSlotPaintCapability } from '../shared/slot-paint';
+import { getCeilingMaterials } from './materials';
+/**
+ * Ceiling paint on the unified slot model. A ceiling has one paintable surface,
+ * so every hit resolves to `surface`; commit writes `node.slots.surface`. The
+ * preview swaps the registered underside mesh to the ceiling's own flat-tinted
+ * material (built `BackSide`, the way it renders), so the hover preview matches
+ * the committed result — a generic PBR preview would be invisible from below.
+ */
+export const ceilingPaint = createSlotPaintCapability({
+    resolveRole: () => 'surface',
+    applyPreview: ({ material, materialPreset, root }) => {
+        const color = materialPreset
+            ? (getMaterialPresetByRef(materialPreset)?.mapProperties.color ?? null)
+            : material
+                ? (resolveMaterial(material).color ?? null)
+                : null;
+        if (!color)
+            return () => { };
+        const mesh = root;
+        if (!mesh.isMesh)
+            return null;
+        const previous = mesh.material;
+        mesh.material = getCeilingMaterials(color).bottomMaterial;
+        return () => {
+            mesh.material = previous;
+        };
+    },
+    legacyEffective: (node) => {
+        const ceiling = node;
+        if (ceiling.materialPreset || ceiling.material) {
+            return { material: ceiling.material, materialPreset: ceiling.materialPreset };
+        }
+        return null;
+    },
+});

package/dist/ceiling/panel.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Phase 5 Stage E — ceiling inspector (kind-owned).
+ *
+ * 1:1 port of the legacy `CeilingPanel`. Mounted via
+ * `parametrics.customPanel`. Same rationale as slab/panel.tsx — the
+ * holes list + height presets need richer field kinds before this
+ * panel can collapse into auto-derived groups.
+ */
+export declare function CeilingPanel(): import("react").JSX.Element | null;
+export default CeilingPanel;
+//# sourceMappingURL=panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/ceiling/panel.tsx"],"names":[],"mappings":"AAmBA;;;;;;;GAOG;AACH,wBAAgB,YAAY,uCA+P3B;AAED,eAAe,YAAY,CAAA"}

package/dist/ceiling/panel.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useScene } from '@pascal-app/core';
+import { ActionButton, ActionGroup, holeEditScope, PanelSection, PanelWrapper, SliderControl, triggerSFX, 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';
+/**
+ * Phase 5 Stage E — ceiling inspector (kind-owned).
+ *
+ * 1:1 port of the legacy `CeilingPanel`. Mounted via
+ * `parametrics.customPanel`. Same rationale as slab/panel.tsx — the
+ * holes list + height presets need richer field kinds before this
+ * panel can collapse into auto-derived groups.
+ */
+export function CeilingPanel() {
+    const selectedId = useViewer((s) => s.selection.selectedIds[0]);
+    const setSelection = useViewer((s) => s.setSelection);
+    const editingHole = useEditingHole();
+    const setMovingNode = useEditor((s) => s.setMovingNode);
+    const node = useScene((s) => selectedId ? s.nodes[selectedId] : undefined);
+    // Panel slider-drag fix recipe (plans/editor-node-registry.md): stable
+    // handler refs so slider drags don't trigger Maximum update depth.
+    const nodeRef = useRef(node);
+    nodeRef.current = node;
+    const handleUpdate = useCallback((updates) => {
+        if (!selectedId)
+            return;
+        useScene.getState().updateNode(selectedId, updates);
+    }, [selectedId]);
+    const handleClose = useCallback(() => {
+        setSelection({ selectedIds: [] });
+        useInteractionScope
+            .getState()
+            .endIf((scope) => scope.kind === 'reshaping' && scope.reshape === 'hole');
+    }, [setSelection]);
+    useEffect(() => {
+        if (!node) {
+            useInteractionScope
+                .getState()
+                .endIf((scope) => scope.kind === 'reshaping' && scope.reshape === 'hole');
+        }
+    }, [node]);
+    useEffect(() => {
+        return () => {
+            useInteractionScope
+                .getState()
+                .endIf((scope) => scope.kind === 'reshaping' && scope.reshape === 'hole');
+        };
+    }, []);
+    const handleAddHole = useCallback(() => {
+        if (!(node && selectedId))
+            return;
+        const polygon = node.polygon;
+        let cx = 0;
+        let cz = 0;
+        for (const [x, z] of polygon) {
+            cx += x;
+            cz += z;
+        }
+        cx /= polygon.length;
+        cz /= polygon.length;
+        const holeSize = 0.5;
+        const newHole = [
+            [cx - holeSize, cz - holeSize],
+            [cx + holeSize, cz - holeSize],
+            [cx + holeSize, cz + holeSize],
+            [cx - holeSize, cz + holeSize],
+        ];
+        const currentHoles = node?.holes || [];
+        const currentMetadata = currentHoles.map((_, index) => node?.holeMetadata?.[index] ?? { source: 'manual' });
+        handleUpdate({
+            holes: [...currentHoles, newHole],
+            holeMetadata: [...currentMetadata, { source: 'manual' }],
+        });
+        useInteractionScope
+            .getState()
+            .begin(holeEditScope({ nodeId: selectedId, holeIndex: currentHoles.length }));
+    }, [node, selectedId, handleUpdate]);
+    const handleEditHole = useCallback((index) => {
+        if (!selectedId)
+            return;
+        useInteractionScope.getState().begin(holeEditScope({ nodeId: selectedId, holeIndex: index }));
+    }, [selectedId]);
+    const handleDeleteHole = useCallback((index) => {
+        if (!selectedId)
+            return;
+        const currentHoles = node?.holes || [];
+        if ((node?.holeMetadata?.[index]?.source ?? 'manual') !== 'manual')
+            return;
+        const newHoles = currentHoles.filter((_, i) => i !== index);
+        const currentMetadata = currentHoles.map((_, metadataIndex) => node?.holeMetadata?.[metadataIndex] ?? { source: 'manual' });
+        const newMetadata = currentMetadata.filter((_, i) => i !== index);
+        handleUpdate({ holes: newHoles, holeMetadata: newMetadata });
+        if (editingHole?.nodeId === selectedId && editingHole?.holeIndex === index) {
+            useInteractionScope
+                .getState()
+                .endIf((scope) => scope.kind === 'reshaping' && scope.reshape === 'hole');
+        }
+    }, [selectedId, node?.holes, node?.holeMetadata, handleUpdate, editingHole]);
+    const handleMove = useCallback(() => {
+        if (!node)
+            return;
+        triggerSFX('sfx:item-pick');
+        setMovingNode(node);
+        setSelection({ selectedIds: [] });
+    }, [node, setMovingNode, setSelection]);
+    if (!(node && node.type === 'ceiling' && selectedId))
+        return null;
+    const calculateArea = (polygon) => {
+        if (polygon.length < 3)
+            return 0;
+        let area = 0;
+        const n = polygon.length;
+        for (let i = 0; i < n; i++) {
+            const j = (i + 1) % n;
+            const current = polygon[i];
+            const next = polygon[j];
+            area += current[0] * next[1];
+            area -= next[0] * current[1];
+        }
+        return Math.abs(area) / 2;
+    };
+    const area = calculateArea(node.polygon);
+    return (_jsxs(PanelWrapper, { icon: "/icons/ceiling.webp", onClose: handleClose, title: node.name || 'Ceiling', width: 320, children: [_jsxs(PanelSection, { title: "Height", children: [_jsx(SliderControl, { label: "Height", max: 6, min: 0, onChange: (v) => handleUpdate({ height: v }), precision: 3, step: 0.01, unit: "m", value: Math.round(node.height * 1000) / 1000 }), _jsxs("div", { className: "mt-2 grid grid-cols-3 gap-1.5 px-1 pb-1", children: [_jsx(ActionButton, { label: "Low (2.4m)", onClick: () => handleUpdate({ height: 2.4 }) }), _jsx(ActionButton, { label: "Standard (2.5m)", onClick: () => handleUpdate({ height: 2.5 }) }), _jsx(ActionButton, { label: "High (3.0m)", onClick: () => handleUpdate({ height: 3.0 }) })] })] }), _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-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) => {
+                            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';
+                            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-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: () => useInteractionScope
+                                                .getState()
+                                                .endIf((scope) => scope.kind === 'reshaping' && scope.reshape === 'hole') })) : isAutoHole ? (_jsx("div", { className: "rounded-md bg-[#2C2C2E] px-2 py-1 text-[10px] text-muted-foreground", children: "Auto" })) : (_jsxs(_Fragment, { children: [_jsx("button", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground 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-400 hover:bg-red-500/20 hover:text-red-300", onClick: () => handleDeleteHole(index), type: "button", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })) })] }, 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: _jsx(ActionButton, { className: "w-full", disabled: 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 }) })] }));
+}
+export default CeilingPanel;

package/dist/ceiling/parametrics.d.ts

@@ -0,0 +1,11 @@
+import type { ParametricDescriptor } from '@pascal-app/core';
+import type { CeilingNode } from './schema';
+/**
+ * Inspector descriptor for ceiling.
+ *
+ * Mounts the kind-owned `<CeilingPanel>` via `customPanel` — same
+ * rationale as slab (holes list + height presets need richer field
+ * kinds before this can collapse into pure parametrics).
+ */
+export declare const ceilingParametrics: ParametricDescriptor<CeilingNode>;
+//# sourceMappingURL=parametrics.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parametrics.d.ts","sourceRoot":"","sources":["../../src/ceiling/parametrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,oBAAoB,CAAC,WAAW,CAQhE,CAAA"}

package/dist/ceiling/parametrics.js

@@ -0,0 +1,16 @@
+/**
+ * Inspector descriptor for ceiling.
+ *
+ * Mounts the kind-owned `<CeilingPanel>` via `customPanel` — same
+ * rationale as slab (holes list + height presets need richer field
+ * kinds before this can collapse into pure parametrics).
+ */
+export const ceilingParametrics = {
+    groups: [
+        {
+            label: 'Dimensions',
+            fields: [{ key: 'height', kind: 'number', unit: 'm', min: 1.5, max: 6, step: 0.05 }],
+        },
+    ],
+    customPanel: () => import('./panel'),
+};

package/dist/ceiling/renderer.d.ts

@@ -0,0 +1,6 @@
+import { type CeilingNode } from '@pascal-app/core';
+export declare const CeilingRenderer: ({ node }: {
+    node: CeilingNode;
+}) => import("react").JSX.Element;
+export default CeilingRenderer;
+//# sourceMappingURL=renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/ceiling/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,WAAW,EAMjB,MAAM,kBAAkB,CAAA;AAiBzB,eAAO,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,gCAoG9D,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/ceiling/renderer.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getMaterialPresetByRef, resolveMaterial, useLiveTransforms, useRegistry, useScene, } from '@pascal-app/core';
+import { createSurfaceRoleMaterial, NodeRenderer, resolveSurfaceColor, useViewer, } from '@pascal-app/viewer';
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { BackSide } from 'three/webgpu';
+import { createPlaceholderGeometry } from '../shared/placeholder-geometry';
+import { ceilingColorFromRef, getCeilingMaterials } from './materials';
+import { CEILING_SLOT_DEFAULT_COLOR } from './slots';
+function createEmptyGeometry() {
+    return createPlaceholderGeometry();
+}
+export const CeilingRenderer = ({ node }) => {
+    const ref = useRef(null);
+    const placeholderGeometry = useMemo(createEmptyGeometry, []);
+    const gridPlaceholderGeometry = useMemo(createEmptyGeometry, []);
+    useRegistry(node.id, 'ceiling', ref);
+    // Build the real geometry on mount instead of relying on a child item to
+    // mark us dirty (CeilingSystem only rebuilds dirty ceilings). Ceiling-hosted
+    // items are async GLB loads, so without this the ceiling holds its
+    // placeholder geometry until the first child finishes downloading — and a
+    // childless ceiling would never build at all. Mirrors WallRenderer /
+    // RoofRenderer.
+    useLayoutEffect(() => {
+        useScene.getState().markDirty(node.id);
+    }, [node.id]);
+    const textures = useViewer((s) => s.textures);
+    const colorPreset = useViewer((s) => s.colorPreset);
+    const sceneTheme = useViewer((s) => s.sceneTheme);
+    // 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);
+    const liveTransform = useLiveTransforms((s) => s.get(node.id));
+    const ceilingY = (node.height ?? 2.5) - 0.01 + (liveTransform?.position[1] ?? 0);
+    const position = [
+        liveTransform?.position[0] ?? 0,
+        ceilingY,
+        liveTransform?.position[2] ?? 0,
+    ];
+    useEffect(() => () => {
+        placeholderGeometry.dispose();
+        gridPlaceholderGeometry.dispose();
+    }, [gridPlaceholderGeometry, placeholderGeometry]);
+    const materials = useMemo(() => {
+        // Textures-off mode takes the themed 'ceiling' role colour — the guaranteed
+        // escape hatch, independent of any slot override. The bottom (seen from
+        // inside the room, looking up) stays opaque so the ceiling reads as a solid
+        // surface; the top keeps the transparent grid material so a top-down camera
+        // can see through the ceiling whenever the `ceiling-grid` overlay is
+        // 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.
+        if (!textures) {
+            const ceilingColor = resolveSurfaceColor('ceiling', colorPreset, sceneTheme);
+            return {
+                topMaterial: getCeilingMaterials(ceilingColor).topMaterial,
+                bottomMaterial: createSurfaceRoleMaterial('ceiling', colorPreset, BackSide, sceneTheme),
+            };
+        }
+        // Unified slot override — shared scene material or catalog `library:` finish
+        // (resolved to its base colour; a ceiling renders flat-tinted, not mapped).
+        const slotColor = ceilingColorFromRef(node.slots?.surface, sceneMaterials);
+        if (slotColor)
+            return getCeilingMaterials(slotColor);
+        // Legacy inline material / preset (scenes painted before the slot model).
+        if (node.materialPreset || node.material) {
+            const preset = getMaterialPresetByRef(node.materialPreset);
+            const props = preset?.mapProperties ?? resolveMaterial(node.material);
+            return getCeilingMaterials(props.color || '#999999');
+        }
+        // Declared slot default.
+        return getCeilingMaterials(CEILING_SLOT_DEFAULT_COLOR);
+    }, [
+        textures,
+        colorPreset,
+        sceneTheme,
+        sceneMaterials,
+        node.slots,
+        node.materialPreset,
+        node.material,
+        node.material?.preset,
+        node.material?.properties,
+        node.material?.texture,
+    ]);
+    return (_jsxs("mesh", { geometry: placeholderGeometry, material: materials.bottomMaterial, position: position, ref: ref, children: [_jsx("mesh", { geometry: gridPlaceholderGeometry, material: materials.topMaterial, name: "ceiling-grid", scale: 0, visible: false }), (node.children ?? []).map((childId) => (_jsx(NodeRenderer, { nodeId: childId }, childId)))] }));
+};
+export default CeilingRenderer;

package/dist/ceiling/schema.d.ts

@@ -0,0 +1,2 @@
+export { CeilingNode } from '@pascal-app/core';
+//# sourceMappingURL=schema.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../src/ceiling/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/ceiling/schema.js

@@ -0,0 +1 @@
+export { CeilingNode } from '@pascal-app/core';

package/dist/ceiling/slots.d.ts

@@ -0,0 +1,6 @@
+import type { SlotDeclaration } from '@pascal-app/core';
+export type CeilingSlotId = 'surface';
+export declare const CEILING_SLOT_DEFAULT_COLOR = "#f2eee6";
+/** A ceiling exposes a single paintable underside surface. */
+export declare function ceilingSlots(): SlotDeclaration[];
+//# sourceMappingURL=slots.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slots.d.ts","sourceRoot":"","sources":["../../src/ceiling/slots.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEvD,MAAM,MAAM,aAAa,GAAG,SAAS,CAAA;AAIrC,eAAO,MAAM,0BAA0B,YAAY,CAAA;AAEnD,8DAA8D;AAC9D,wBAAgB,YAAY,IAAI,eAAe,EAAE,CAEhD"}

package/dist/ceiling/slots.js

@@ -0,0 +1,7 @@
+// Soft white — the default underside colour for an unpainted ceiling. (A
+// ceiling renders flat-tinted, so this is a colour, not a `library:` finish.)
+export const CEILING_SLOT_DEFAULT_COLOR = '#f2eee6';
+/** A ceiling exposes a single paintable underside surface. */
+export function ceilingSlots() {
+    return [{ slotId: 'surface', label: 'Surface', default: CEILING_SLOT_DEFAULT_COLOR }];
+}