@pascal-app/nodes 1.0.6 → 1.1.0

package/dist/beam/geometry.d.ts

@@ -0,0 +1,19 @@
+import { type BeamNode } from '@pascal-app/core';
+import { type BufferGeometry } from 'three';
+/**
+ * Where a beam's box sits in its level, level-local: its centre, its turn about Y (local X runs
+ * start → end) and its size along, up and across. Null for a beam of no length.
+ */
+export type BeamBox = {
+    position: [number, number, number];
+    rotationY: number;
+    size: [number, number, number];
+};
+export declare function beamBox(beam: Pick<BeamNode, 'start' | 'end' | 'width' | 'depth'>, top: number): BeamBox | null;
+/**
+ * The beam's solid about its own centre, local X along it: one block for a solid timber, glulam
+ * or a single LVL; its plies side by side with a hairline between for a built-up beam; a W shape's
+ * two flanges and web for steel. UVs run a metre to the texture repeat, the grain along the beam.
+ */
+export declare function buildBeamGeometry(beam: Pick<BeamNode, 'width' | 'depth' | 'plies' | 'material'>, length: number): BufferGeometry;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/beam/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../src/beam/geometry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAOxD;;;GAGG;AACH,MAAM,MAAM,OAAO,GAAG;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;CAC/B,CAAA;AAED,wBAAgB,OAAO,CACrB,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,CAAC,EACzD,GAAG,EAAE,MAAM,GACV,OAAO,GAAG,IAAI,CAahB;AAQD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC,EAC9D,MAAM,EAAE,MAAM,GACb,cAAc,CA6BhB"}

package/dist/beam/geometry.js

@@ -0,0 +1,63 @@
+import { beamPlan } from '@pascal-app/core';
+import { BoxGeometry } from 'three';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { applyPlanarWorldUvs, copyUvToSecondaryChannel } from '../shared/primitive-uv.js';
+/** The seam left between the plies of a built-up beam, so a (2) 2x10 reads as two boards. */
+const PLY_SEAM = 0.0015;
+export function beamBox(beam, top) {
+    const plan = beamPlan(beam);
+    if (plan.length < 1e-6)
+        return null;
+    return {
+        position: [
+            (plan.start[0] + plan.end[0]) / 2,
+            top - beam.depth / 2,
+            (plan.start[1] + plan.end[1]) / 2,
+        ],
+        // Three.js turns local +X to (cos θ, 0, −sin θ): θ = −atan2(dz, dx) runs it along the beam.
+        rotationY: -Math.atan2(plan.direction[1], plan.direction[0]),
+        size: [plan.length, beam.depth, beam.width],
+    };
+}
+function box(length, height, across, y, z) {
+    const geometry = new BoxGeometry(length, height, across).toNonIndexed();
+    geometry.translate(0, y, z);
+    return geometry;
+}
+/**
+ * The beam's solid about its own centre, local X along it: one block for a solid timber, glulam
+ * or a single LVL; its plies side by side with a hairline between for a built-up beam; a W shape's
+ * two flanges and web for steel. UVs run a metre to the texture repeat, the grain along the beam.
+ */
+export function buildBeamGeometry(beam, length) {
+    const { width, depth } = beam;
+    let parts;
+    if (beam.material === 'steel') {
+        // A W8x10's flanges are 0.205 in, its web 0.17 in: the same proportions at any size.
+        const flange = Math.max(0.004, depth * 0.026);
+        const web = Math.max(0.003, width * 0.043);
+        parts = [
+            box(length, flange, width, depth / 2 - flange / 2, 0),
+            box(length, flange, width, -depth / 2 + flange / 2, 0),
+            box(length, depth - flange * 2, web, 0, 0),
+        ];
+    }
+    else if (beam.plies > 1) {
+        // The seams fall between the plies; the outer faces stay the beam's.
+        const seam = Math.min(PLY_SEAM, width / beam.plies / 2);
+        const ply = (width - seam * (beam.plies - 1)) / beam.plies;
+        parts = Array.from({ length: beam.plies }, (_, index) => box(length, depth, ply, 0, -width / 2 + ply / 2 + index * (ply + seam)));
+    }
+    else {
+        parts = [box(length, depth, width, 0, 0)];
+    }
+    const merged = parts.length === 1 ? parts[0] : (mergeGeometries(parts) ?? parts[0]);
+    if (merged !== parts[0])
+        for (const part of parts)
+            part.dispose();
+    applyPlanarWorldUvs(merged);
+    copyUvToSecondaryChannel(merged);
+    merged.computeBoundingBox();
+    merged.computeBoundingSphere();
+    return merged;
+}

package/dist/beam/index.d.ts

@@ -0,0 +1,3 @@
+export { BeamNode } from '@pascal-app/core';
+export { beamDefinition } from './definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/beam/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/beam/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA"}

package/dist/beam/index.js

@@ -0,0 +1,2 @@
+export { BeamNode } from '@pascal-app/core';
+export { beamDefinition } from './definition.js';

package/dist/beam/move-endpoint-tool.d.ts

@@ -0,0 +1,21 @@
+import { type AnyNode } from '@pascal-app/core';
+/**
+ * The reshaped node and which end: the tool manager builds it from the endpoint scope, naming a
+ * kind it has no slot for under `wall`.
+ */
+export type MovingBeamEndpoint = {
+    wall?: AnyNode;
+    fence?: AnyNode;
+    beam?: AnyNode;
+    endpoint: 'start' | 'end';
+};
+/**
+ * A beam's end dragged in 3D: the thin wrapper around `moveBeamEndpointDragAction`, which owns
+ * the snapping and the single undo step. Shows the cursor at the moving end and the beam's height,
+ * length and width while it runs. Mounted by the tool manager from `move-endpoint`.
+ */
+export declare const MoveBeamEndpointTool: React.FC<{
+    target: MovingBeamEndpoint;
+}>;
+export default MoveBeamEndpointTool;
+//# sourceMappingURL=move-endpoint-tool.d.ts.map

package/dist/beam/move-endpoint-tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-endpoint-tool.d.ts","sourceRoot":"","sources":["../../src/beam/move-endpoint-tool.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,OAAO,EAKb,MAAM,kBAAkB,CAAA;AAazB;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAA;CAC1B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,MAAM,EAAE,kBAAkB,CAAA;CAAE,CAqDzE,CAAA;eAEc,oBAAoB"}

package/dist/beam/move-endpoint-tool.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { beamTopElevation, sceneRegistry, useScene, } from '@pascal-app/core';
+import { CursorSphere, MeasurementPill, triggerSFX, useDragAction, useInteractionScope, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { Html } from '@react-three/drei';
+import { createPortal } from '@react-three/fiber';
+import { moveBeamEndpointDragAction } from './actions/move-endpoint.js';
+/**
+ * A beam's end dragged in 3D: the thin wrapper around `moveBeamEndpointDragAction`, which owns
+ * the snapping and the single undo step. Shows the cursor at the moving end and the beam's height,
+ * length and width while it runs. Mounted by the tool manager from `move-endpoint`.
+ */
+export const MoveBeamEndpointTool = ({ target }) => {
+    const initial = (target.beam ?? target.wall ?? target.fence);
+    const unit = useViewer((state) => state.unit);
+    const beamId = initial?.id;
+    const live = useScene((state) => (beamId ? state.nodes[beamId] : undefined));
+    const beam = live?.type === 'beam' ? live : initial;
+    const top = useScene((state) => (beam ? beamTopElevation(state.nodes, beam) : 0));
+    const exit = (committed) => {
+        if (committed)
+            triggerSFX('sfx:item-place');
+        if (beamId)
+            useViewer.getState().setSelection({ selectedIds: [beamId] });
+        useInteractionScope
+            .getState()
+            .endIf((scope) => scope.kind === 'reshaping' && scope.reshape === 'endpoint');
+    };
+    useDragAction({
+        active: initial?.type === 'beam',
+        action: moveBeamEndpointDragAction,
+        initial: {
+            node: initial,
+            handleId: target.endpoint,
+            point: initial ? initial[target.endpoint] : [0, 0],
+        },
+        onCommit: () => exit(true),
+        onCancel: () => exit(false),
+    });
+    const level = beam?.parentId ? sceneRegistry.nodes.get(beam.parentId) : undefined;
+    if (!(beam?.type === 'beam' && level))
+        return null;
+    const moving = beam[target.endpoint];
+    const length = Math.hypot(beam.end[0] - beam.start[0], beam.end[1] - beam.start[1]);
+    // In the beam's level, where its top is measured.
+    return createPortal(_jsxs("group", { children: [_jsx(CursorSphere, { position: [moving[0], top, moving[1]], showTooltip: false }), _jsx(Html, { center: true, position: [(beam.start[0] + beam.end[0]) / 2, top + 0.3, (beam.start[1] + beam.end[1]) / 2], style: { pointerEvents: 'none', touchAction: 'none' }, zIndexRange: [100, 0], children: _jsx(MeasurementPill, { height: beam.depth, length: length, primary: "length", thickness: beam.width, unit: unit }) })] }), level);
+};
+export default MoveBeamEndpointTool;

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

@@ -0,0 +1,12 @@
+import { type BeamNode } from '@pascal-app/core';
+/**
+ * A beam moved in 3D, both ends together: its start follows the pointer, snapped as the beam tool
+ * snaps (wall faces and ends, other beams, post centres, the grid; Alt free), the run keeping its
+ * length and angle. Previews through live overrides and writes once on the click, one undo step;
+ * Esc puts it back. Mounted by the move dispatcher from `affordanceTools.move`.
+ */
+export declare const MoveBeamTool: React.FC<{
+    node: BeamNode;
+}>;
+export default MoveBeamTool;
+//# sourceMappingURL=move-tool.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"move-tool.d.ts","sourceRoot":"","sources":["../../src/beam/move-tool.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,QAAQ,EAOd,MAAM,kBAAkB,CAAA;AAiBzB;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,CAuGrD,CAAA;eAEc,YAAY"}

package/dist/beam/move-tool.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { beamTopElevation, emitter, sceneRegistry, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+import { CursorSphere, consumePlacementDragRelease, isFreshPlacementMetadata, markToolCancelConsumed, stripPlacementMetadataFlags, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { createPortal } from '@react-three/fiber';
+import { useEffect, useRef, useState } from 'react';
+import { snapBeamPoint } from './drafting.js';
+import { movedBeamEnds } from './floorplan-move.js';
+/**
+ * A beam moved in 3D, both ends together: its start follows the pointer, snapped as the beam tool
+ * snaps (wall faces and ends, other beams, post centres, the grid; Alt free), the run keeping its
+ * length and angle. Previews through live overrides and writes once on the click, one undo step;
+ * Esc puts it back. Mounted by the move dispatcher from `affordanceTools.move`.
+ */
+export const MoveBeamTool = ({ node }) => {
+    const activatedAt = useRef(Date.now());
+    const [cursor, setCursor] = useState(null);
+    const top = useScene((state) => beamTopElevation(state.nodes, node));
+    useEffect(() => {
+        const id = node.id;
+        const origin = [node.start[0], node.start[1]];
+        const fresh = isFreshPlacementMetadata(node.metadata);
+        let anchor = null;
+        let delta = [0, 0];
+        let committed = false;
+        const exit = () => useEditor.getState().setMovingNode(null);
+        const preview = () => {
+            useLiveNodeOverrides.getState().set(id, movedBeamEnds(node, delta));
+            useScene.getState().markDirty(id);
+        };
+        const onGridMove = (event) => {
+            const raw = [event.localPosition[0], event.localPosition[2]];
+            anchor ??= raw;
+            const at = node.parentId
+                ? snapBeamPoint({
+                    point: [origin[0] + raw[0] - anchor[0], origin[1] + raw[1] - anchor[1]],
+                    nodes: useScene.getState().nodes,
+                    levelId: node.parentId,
+                    ignoreIds: [node.id],
+                    free: event.nativeEvent?.altKey === true,
+                }).point
+                : origin;
+            const next = [at[0] - origin[0], at[1] - origin[1]];
+            if (next[0] === delta[0] && next[1] === delta[1])
+                return;
+            delta = next;
+            triggerSFX('sfx:grid-snap');
+            const moved = movedBeamEnds(node, delta);
+            setCursor([(moved.start[0] + moved.end[0]) / 2, 0, (moved.start[1] + moved.end[1]) / 2]);
+            preview();
+        };
+        const onGridClick = (event) => {
+            if (committed)
+                return;
+            if (Date.now() - activatedAt.current < 150) {
+                event.nativeEvent?.stopPropagation?.();
+                return;
+            }
+            committed = true;
+            const moved = movedBeamEnds(node, delta);
+            useScene.getState().updateNodes([
+                {
+                    id,
+                    data: fresh
+                        ? {
+                            ...moved,
+                            metadata: stripPlacementMetadataFlags(node.metadata),
+                        }
+                        : moved,
+                },
+            ]);
+            useLiveNodeOverrides.getState().clear(id);
+            triggerSFX('sfx:item-place');
+            useViewer.getState().setSelection({ selectedIds: [id] });
+            exit();
+            event.nativeEvent?.stopPropagation?.();
+        };
+        const onPlacementDragPointerUp = (event) => {
+            if (!consumePlacementDragRelease(event))
+                return;
+            activatedAt.current = 0;
+            onGridClick({ nativeEvent: event });
+        };
+        const onCancel = () => {
+            useLiveNodeOverrides.getState().clear(id);
+            useScene.getState().markDirty(id);
+            useViewer.getState().setSelection({ selectedIds: [id] });
+            markToolCancelConsumed();
+            // This tool owns the teardown: the 2D overlay leaves the beam to it.
+            useEditor.getState().setMovingNodeOrigin('3d');
+            exit();
+        };
+        emitter.on('grid:move', onGridMove);
+        emitter.on('grid:click', onGridClick);
+        emitter.on('tool:cancel', onCancel);
+        window.addEventListener('pointerup', onPlacementDragPointerUp);
+        return () => {
+            // Only the live preview is ever undone here: a move the 2D overlay committed is in the
+            // scene already, and an override is never the scene.
+            if (!committed)
+                useLiveNodeOverrides.getState().clear(id);
+            emitter.off('grid:move', onGridMove);
+            emitter.off('grid:click', onGridClick);
+            emitter.off('tool:cancel', onCancel);
+            window.removeEventListener('pointerup', onPlacementDragPointerUp);
+        };
+    }, [node]);
+    const level = node.parentId ? sceneRegistry.nodes.get(node.parentId) : undefined;
+    if (!(cursor && level))
+        return null;
+    return createPortal(_jsx(CursorSphere, { position: [cursor[0], top, cursor[2]], showTooltip: false }), level);
+};
+export default MoveBeamTool;

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

@@ -0,0 +1,28 @@
+import { type AnyNode, type AnyNodeId, type BeamNode } from '@pascal-app/core';
+import type { NodePanelModel } from '@pascal-app/editor';
+type Nodes = Record<AnyNodeId, AnyNode>;
+/** The Size choices: every stock size, and Custom while the beam is no stock size. */
+export declare function beamSizeOptions(current: string | null): {
+    label: string;
+    value: string;
+}[];
+/** Which Size choice a beam is: its stock size, or Custom. */
+export declare function beamSizeValue(beam: BeamNode): string;
+export declare const BEAM_MATERIAL_OPTIONS: {
+    label: string;
+    value: "glulam" | "lvl" | "pressure-treated" | "sawn" | "steel";
+}[];
+/** The Top choices: the references, and Custom while the top is typed in. */
+export declare function beamTopOptions(current: string | null): {
+    label: string;
+    value: string;
+}[];
+export declare function beamTopValue(nodes: Nodes, beam: BeamNode): string;
+/**
+ * The beam's settings as panel rows (the XR wand's panel) and as controls the multi-selection
+ * inspector applies to every selected beam at once: size, material, top. A porch's beams take a
+ * new size together.
+ */
+export declare const beamPanelModel: NodePanelModel<BeamNode>;
+export {};
+//# sourceMappingURL=panel-model.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel-model.d.ts","sourceRoot":"","sources":["../../src/beam/panel-model.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,SAAS,EAMd,KAAK,QAAQ,EAQd,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAExD,KAAK,KAAK,GAAG,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;AAIvC,sFAAsF;AACtF,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;;;IAKrD;AAED,8DAA8D;AAC9D,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAEpD;AAED,eAAO,MAAM,qBAAqB;;;GAEjC,CAAA;AAED,6EAA6E;AAC7E,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;;;IAKpD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,CAEjE;AAsBD;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAAC,QAAQ,CA+EnD,CAAA"}

package/dist/beam/panel-model.js

@@ -0,0 +1,123 @@
+import { BEAM_MATERIAL_LABELS, BEAM_SIZE_PRESETS, BEAM_TOP_REFERENCE_LABELS, BEAM_TOP_REFERENCES, beamSizePresetPatch, beamTopReferenceOf, beamTopReferencePatch, matchBeamSizePreset, runAsSingleSceneHistoryStep, useScene, } from '@pascal-app/core';
+const CUSTOM = 'custom';
+/** The Size choices: every stock size, and Custom while the beam is no stock size. */
+export function beamSizeOptions(current) {
+    return [
+        ...(current === CUSTOM ? [{ label: 'Custom', value: CUSTOM }] : []),
+        ...BEAM_SIZE_PRESETS.map((preset) => ({ label: preset.label, value: preset.id })),
+    ];
+}
+/** Which Size choice a beam is: its stock size, or Custom. */
+export function beamSizeValue(beam) {
+    return matchBeamSizePreset(beam)?.id ?? CUSTOM;
+}
+export const BEAM_MATERIAL_OPTIONS = Object.keys(BEAM_MATERIAL_LABELS).map((material) => ({ label: BEAM_MATERIAL_LABELS[material], value: material }));
+/** The Top choices: the references, and Custom while the top is typed in. */
+export function beamTopOptions(current) {
+    return [
+        ...BEAM_TOP_REFERENCES.map((top) => ({ label: BEAM_TOP_REFERENCE_LABELS[top], value: top })),
+        ...(current === CUSTOM ? [{ label: 'Custom', value: CUSTOM }] : []),
+    ];
+}
+export function beamTopValue(nodes, beam) {
+    return beamTopReferenceOf(nodes, beam) ?? CUSTOM;
+}
+/** The one value every beam shares, or null for a mixed selection. */
+function shared(values) {
+    return values.every((value) => value === values[0]) ? (values[0] ?? null) : null;
+}
+/** Writes one patch per beam in a single undo step. */
+function updateAll(beams, patch) {
+    runAsSingleSceneHistoryStep(useScene, () => useScene
+        .getState()
+        .updateNodes(beams.map((beam) => ({ id: beam.id, data: patch(beam) }))));
+}
+/** Steps through a list of choices, wrapping round. */
+function cycle(list, current, step) {
+    const index = list.indexOf(current);
+    return list[(index + step + list.length) % list.length];
+}
+/**
+ * The beam's settings as panel rows (the XR wand's panel) and as controls the multi-selection
+ * inspector applies to every selected beam at once: size, material, top. A porch's beams take a
+ * new size together.
+ */
+export const beamPanelModel = {
+    rows: ({ node, nodes, update }) => {
+        const sizes = BEAM_SIZE_PRESETS.map((preset) => preset.id);
+        const materials = BEAM_MATERIAL_OPTIONS.map((option) => option.value);
+        const size = beamSizeValue(node);
+        const top = beamTopValue(nodes, node);
+        return [
+            {
+                id: 'beam-size',
+                kind: 'cycle',
+                section: 'Beam',
+                label: 'Size',
+                value: BEAM_SIZE_PRESETS.find((preset) => preset.id === size)?.label ?? 'Custom',
+                next: () => update(beamSizePresetPatch(node, cycle(sizes, size, 1))),
+                previous: () => update(beamSizePresetPatch(node, cycle(sizes, size, -1))),
+            },
+            {
+                id: 'beam-material',
+                kind: 'cycle',
+                section: 'Beam',
+                label: 'Material',
+                value: BEAM_MATERIAL_LABELS[node.material],
+                next: () => update({ material: cycle(materials, node.material, 1) }),
+                previous: () => update({ material: cycle(materials, node.material, -1) }),
+            },
+            {
+                id: 'beam-top',
+                kind: 'cycle',
+                section: 'Beam',
+                label: 'Top',
+                value: top === CUSTOM ? 'Custom' : BEAM_TOP_REFERENCE_LABELS[top],
+                next: () => update(beamTopReferencePatch(nodes, node, cycle(BEAM_TOP_REFERENCES, top, 1))),
+                previous: () => update(beamTopReferencePatch(nodes, node, cycle(BEAM_TOP_REFERENCES, top, -1))),
+            },
+        ];
+    },
+    multiControls: ({ selection, nodes }) => {
+        if (selection.length === 0)
+            return [];
+        const size = shared(selection.map(beamSizeValue));
+        const top = shared(selection.map((beam) => beamTopValue(nodes, beam)));
+        return [
+            {
+                id: 'beam-size',
+                kind: 'select',
+                section: 'Beam',
+                label: 'Size',
+                options: beamSizeOptions(size),
+                value: size,
+                onChange: (id) => {
+                    if (id !== CUSTOM)
+                        updateAll(selection, (beam) => beamSizePresetPatch(beam, id));
+                },
+            },
+            {
+                id: 'beam-material',
+                kind: 'select',
+                section: 'Beam',
+                label: 'Material',
+                options: BEAM_MATERIAL_OPTIONS,
+                value: shared(selection.map((beam) => beam.material)),
+                onChange: (material) => updateAll(selection, () => ({ material: material })),
+            },
+            {
+                id: 'beam-top',
+                kind: 'select',
+                section: 'Beam',
+                label: 'Top',
+                options: beamTopOptions(top),
+                value: top,
+                onChange: (reference) => {
+                    if (reference === CUSTOM)
+                        return;
+                    updateAll(selection, (beam) => beamTopReferencePatch(nodes, beam, reference));
+                },
+            },
+        ];
+    },
+};

package/dist/beam/panel.d.ts

@@ -0,0 +1,13 @@
+import { type BeamNode } from '@pascal-app/core';
+/** The fields a ply count writes: as many plies of the same board, the width growing with them. */
+export declare function beamPliesPatch(beam: Pick<BeamNode, 'width' | 'plies'>, plies: number): {
+    plies: number;
+    width: number;
+};
+/**
+ * A beam's panel: its size (a stock size, or a width, depth and plies of its own), what it is made
+ * of, how the joists meet it and where its top is, with its length and underside; Move, Delete,
+ * and posts under it at each end and every 8 ft.
+ */
+export default function BeamPanel(): import("react").JSX.Element | null;
+//# sourceMappingURL=panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/beam/panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,QAAQ,EAad,MAAM,kBAAkB,CAAA;AA2DzB,mGAAmG;AACnG,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM;;;EAEpF;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,uCA4KhC"}

package/dist/beam/panel.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { beamCeilingPlane, beamPlan, beamSizeLabel, beamSizePresetPatch, beamTopElevation, beamTopReferencePatch, DEFAULT_FRAMING_POST_SIZE, formatLinearMeasurement, usePascalI18n, useScene, } from '@pascal-app/core';
+import { ActionButton, ActionGroup, MetricControl, PanelSection, PanelWrapper, SegmentedControl, SelectControl, triggerSFX, useEditor, } from '@pascal-app/editor';
+import { useViewer } from '@pascal-app/viewer';
+import { Columns2, Move, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { electedPostFoot, framingPostsUnderBeam } from '../column/post-placement.js';
+import { BEAM_MATERIAL_OPTIONS, beamSizeOptions, beamSizeValue, beamTopOptions, beamTopValue, } from './panel-model.js';
+const IN = 0.0254;
+const CUSTOM = 'custom';
+/** A section size in metres, shown in inches on an imperial plan (feet would show 7-1/2 in as 0.63). */
+function InchField({ label, value, onCommit, }) {
+    const [draft, setDraft] = useState(null);
+    const imperial = useViewer((state) => state.unit) === 'imperial';
+    const toShown = (meters) => (imperial ? meters / IN : meters);
+    return (_jsx(MetricControl, { className: "h-9 text-xs", label: label, min: toShown(0.01), onChange: (next) => setDraft(next), onCommit: (next) => {
+            setDraft(null);
+            onCommit(imperial ? next * IN : next);
+        }, precision: imperial ? 3 : 4, restoreOnCommit: false, step: imperial ? 0.25 : 0.005, unit: imperial ? 'in' : 'm', value: draft ?? toShown(value) }));
+}
+/** The fields a ply count writes: as many plies of the same board, the width growing with them. */
+export function beamPliesPatch(beam, plies) {
+    return { plies, width: (beam.width / beam.plies) * plies };
+}
+/**
+ * A beam's panel: its size (a stock size, or a width, depth and plies of its own), what it is made
+ * of, how the joists meet it and where its top is, with its length and underside; Move, Delete,
+ * and posts under it at each end and every 8 ft.
+ */
+export default function BeamPanel() {
+    const i18n = usePascalI18n();
+    const selectedId = useViewer((state) => state.selection.selectedIds[0]);
+    const setSelection = useViewer((state) => state.setSelection);
+    const unit = useViewer((state) => state.unit);
+    const metricNotation = useViewer((state) => state.metricNotation);
+    const nodes = useScene((state) => state.nodes);
+    const beam = selectedId ? nodes[selectedId] : undefined;
+    if (beam?.type !== 'beam')
+        return null;
+    const update = (patch) => useScene.getState().updateNode(beam.id, patch);
+    const length = (meters) => formatLinearMeasurement(meters, unit, metricNotation);
+    const size = beamSizeValue(beam);
+    const top = beamTopValue(nodes, beam);
+    const topY = beamTopElevation(nodes, beam);
+    const plane = beamCeilingPlane(nodes, beam);
+    return (_jsxs(PanelWrapper, { icon: "/icons/beam.svg", onClose: () => setSelection({ selectedIds: [] }), title: beam.name ?? i18n._({ id: 'node.beam.panel.beam', message: 'Beam' }), width: 300, children: [_jsxs(PanelSection, { title: i18n._({
+                    id: 'node.beam.panel.beamSize',
+                    message: 'Beam {size}',
+                    values: { size: beamSizeLabel(beam) },
+                }), children: [_jsx(SelectControl, { label: i18n._({ id: 'node.beam.panel.size', message: 'Size' }), onChange: (id) => {
+                            if (id !== CUSTOM)
+                                update(beamSizePresetPatch(beam, id));
+                        }, options: beamSizeOptions(size), value: size }), _jsx(SelectControl, { label: i18n._({ id: 'node.beam.panel.material', message: 'Material' }), onChange: (material) => update({ material: material }), options: BEAM_MATERIAL_OPTIONS, value: beam.material }), _jsx(InchField, { label: i18n._({ id: 'node.beam.panel.width', message: 'Width' }), onCommit: (width) => update({ width, size: undefined }), value: beam.width }), _jsx(InchField, { label: i18n._({ id: 'node.beam.panel.depth', message: 'Depth' }), onCommit: (depth) => update({ depth, size: undefined }), value: beam.depth }), _jsx(SegmentedControl, { onChange: (plies) => update(beamPliesPatch(beam, Number(plies))), options: ['1', '2', '3', '4'].map((plies) => ({
+                            label: plies === '1'
+                                ? i18n._({ id: 'node.beam.panel.n1Ply', message: '1 ply' })
+                                : i18n._({
+                                    id: 'node.beam.panel.pliesPlies',
+                                    message: '{plies} plies',
+                                    values: { plies },
+                                }),
+                            value: plies,
+                        })), value: String(beam.plies) })] }), _jsxs(PanelSection, { title: i18n._({ id: 'node.beam.panel.placement', message: 'Placement' }), children: [_jsx(SegmentedControl, { onChange: (placement) => update({ placement }), options: [
+                            {
+                                label: i18n._({ id: 'node.beam.panel.dropped', message: 'Dropped' }),
+                                value: 'dropped',
+                            },
+                            { label: i18n._({ id: 'node.beam.panel.flush', message: 'Flush' }), value: 'flush' },
+                        ], value: beam.placement }), _jsx(SelectControl, { label: i18n._({ id: 'node.beam.panel.top', message: 'Top' }), onChange: (reference) => {
+                            if (reference !== CUSTOM)
+                                update(beamTopReferencePatch(nodes, beam, reference));
+                        }, options: beamTopOptions(top), value: top }), _jsx(MetricControl, { label: i18n._({ id: 'node.beam.panel.topElevation', message: 'Top elevation' }), onChange: (value) => update({ topElevation: value }), precision: 3, step: 0.01, unit: "m", value: topY }), _jsx("p", { className: "px-0.5 text-muted-foreground text-xs", "data-beam-readout": true, children: i18n._({
+                            id: 'node.beam.panel.lengthLongItsUnderside',
+                            message: '{length} long; its underside {underside} over the floor, the ceiling plane {plane}.',
+                            values: {
+                                length: length(beamPlan(beam).length),
+                                underside: length(topY - beam.depth),
+                                plane: length(plane),
+                            },
+                        }) }), beam.topElevation !== undefined && (_jsx("button", { className: "self-start rounded-full border border-border/50 px-3 py-1 text-muted-foreground text-xs hover:text-foreground", onClick: () => update({ topElevation: undefined }), type: "button", children: i18n._({
+                            id: 'node.beam.panel.followTheCeilingPlane',
+                            message: 'Follow the ceiling plane',
+                        }) }))] }), _jsx(PanelSection, { title: i18n._({ id: 'node.beam.panel.actions', message: 'Actions' }), children: _jsxs(ActionGroup, { children: [_jsx(ActionButton, { icon: _jsx(Columns2, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.beam.panel.addPosts', message: 'Add posts' }), onClick: () => {
+                                const posts = beam.parentId
+                                    ? framingPostsUnderBeam({
+                                        nodes,
+                                        beam,
+                                        choices: { size: DEFAULT_FRAMING_POST_SIZE, base: 'none' },
+                                        foot: electedPostFoot(nodes, beam.parentId),
+                                    })
+                                    : [];
+                                if (posts.length === 0)
+                                    return;
+                                const standing = Object.values(nodes).filter((node) => node.type === 'column' && node.role === 'post').length;
+                                useScene.getState().createNodes(posts.map((post, index) => ({
+                                    node: { ...post, name: `Post ${standing + index + 1}` },
+                                    parentId: beam.parentId,
+                                })));
+                                triggerSFX('sfx:structure-build');
+                            } }), _jsx(ActionButton, { icon: _jsx(Move, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.beam.panel.move', message: 'Move' }), onClick: () => {
+                                triggerSFX('sfx:item-pick');
+                                useEditor.getState().setMovingNode(beam);
+                            } }), _jsx(ActionButton, { icon: _jsx(Trash2, { className: "h-3.5 w-3.5" }), label: i18n._({ id: 'node.beam.panel.delete', message: 'Delete' }), onClick: () => {
+                                useScene.getState().deleteNode(beam.id);
+                                setSelection({ selectedIds: [] });
+                            } })] }) })] }));
+}

package/dist/beam/parametrics.d.ts

@@ -0,0 +1,3 @@
+import type { BeamNode, ParametricDescriptor } from '@pascal-app/core';
+export declare const beamParametrics: ParametricDescriptor<BeamNode>;
+//# sourceMappingURL=parametrics.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parametrics.d.ts","sourceRoot":"","sources":["../../src/beam/parametrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAEtE,eAAO,MAAM,eAAe,EAAE,oBAAoB,CAAC,QAAQ,CAG1D,CAAA"}

package/dist/beam/parametrics.js

@@ -0,0 +1,4 @@
+export const beamParametrics = {
+    groups: [],
+    customPanel: () => import('./panel.js'),
+};

package/dist/beam/renderer.d.ts

@@ -0,0 +1,13 @@
+import { type BeamNode } from '@pascal-app/core';
+import type { Material } from 'three';
+/** How a beam of `material` looks: its library material, or the plain surface colour when textures are off. */
+export declare function useBeamMaterial(material: BeamNode['material']): Material;
+/**
+ * A beam: its solid laid along the centreline in its level, the top where the beam's top resolves
+ * (`beamTopElevation`: its own, else the ceiling plane over it). Reads live overrides, so a drag
+ * in either view moves it at once.
+ */
+export default function BeamRenderer({ node: stored }: {
+    node: BeamNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/beam/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,QAAQ,EAKd,MAAM,kBAAkB,CAAA;AAQzB,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,OAAO,CAAA;AAG5C,+GAA+G;AAC/G,wBAAgB,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,QAAQ,CAWxE;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,+BAqCxE"}