@pascal-app/nodes 0.1.1

package/dist/downspout/geometry.js

@@ -0,0 +1,204 @@
+import * as THREE from 'three';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { computeDownspoutPath, downspoutPipeDims, effectiveWallJog, } from './routing';
+/**
+ * Downspout pipe builder. The pipe follows a real downspout's path —
+ * a short DROP out of the collar, an OFFSET ELBOW back to the wall, the
+ * VERTICAL RUN down the wall, and a bottom KICKOUT — plus the hardware
+ * that makes it read real: WALL STRAPS clamping the run to the wall,
+ * an open (hollow) mouth at the kickout, and a SPLASH BLOCK on the
+ * ground under the mouth.
+ *
+ * Mesh frame is centred on the outlet: local Y = 0 is the gutter floor,
+ * −Y is down, −Z is toward the wall (+Z is outward over the eave). The
+ * path lives in the local Y/Z plane; X is the gutter-length axis.
+ *
+ * Cross-section follows the host gutter's profile: round on half-round,
+ * rectangular on k-style / box. Straight legs are solid cylinders /
+ * boxes welded at the corners with a small joint; the kickout leg is a
+ * hollow tube so the open mouth reads through.
+ *
+ * Pure: no React, no scene access.
+ */
+const RADIAL_SEGMENTS = 16;
+const JOINT_SEGMENTS = 12;
+const FWD = new THREE.Vector3(0, 0, 1);
+const UP = new THREE.Vector3(0, 1, 0);
+// Pipe wall thickness for the hollow (open-mouth) kickout leg.
+const PIPE_WALL = 0.004;
+// Wall straps — a thin band clamps the run to the wall, set in a margin
+// from each end (spacing comes from the node).
+const STRAP_END_MARGIN = 0.3;
+const STRAP_THICKNESS = 0.022;
+const STRAP_OVERHANG = 0.014;
+// Splash block — a tilted slab on the ground under the mouth that
+// carries water away from the foundation.
+const SPLASH_WIDTH = 0.22;
+const SPLASH_LENGTH = 0.34;
+const SPLASH_THICKNESS = 0.05;
+const SPLASH_TILT = 0.1;
+export function buildDownspoutGeometry(node, routing) {
+    const dims = downspoutPipeDims(node, routing);
+    const terminal = node.terminal ?? 'splash';
+    // 'straight' runs the pipe to grade with no kickout leg.
+    const pathData = computeDownspoutPath(node.length, effectiveWallJog(node, routing), terminal !== 'straight');
+    // Drop consecutive duplicates (jog == 0 collapses the elbow; no kick
+    // collapses the bottom two) so we never build a zero-length segment.
+    const path = [];
+    for (const [x, y, z] of pathData.points) {
+        const p = new THREE.Vector3(x, y, z);
+        const last = path.at(-1);
+        if (!last || last.distanceTo(p) > 1e-4)
+            path.push(p);
+    }
+    const pieces = [];
+    const lastLeg = path.length - 2;
+    for (let i = 0; i < path.length - 1; i++) {
+        // The final leg (the kickout mouth) is a hollow tube so you can see
+        // up the open end; the rest stay solid (their outer surface reads
+        // identically, and they're capped by the collar / joints anyway).
+        pieces.push(i === lastLeg
+            ? ringTube(path[i], path[i + 1], dims)
+            : segmentBetween(path[i], path[i + 1], dims));
+        if (i > 0)
+            pieces.push(jointAt(path[i], path[i - 1], path[i + 1], dims));
+    }
+    if ((node.strapStyle ?? 'band') !== 'none') {
+        for (const strap of buildStraps(pathData, dims, node.strapSpacing ?? 1.8))
+            pieces.push(strap);
+    }
+    if (terminal === 'splash') {
+        const splash = buildSplash(pathData);
+        if (splash)
+            pieces.push(splash);
+    }
+    const merged = pieces.length === 1 ? pieces[0] : (mergeGeometries(pieces, false) ?? pieces[0]);
+    if (merged !== pieces[0]) {
+        for (const p of pieces)
+            p.dispose();
+    }
+    merged.computeVertexNormals();
+    return merged;
+}
+/**
+ * Solid segment spanning two points. Round → a cylinder; rect → a box
+ * (2·halfX wide along the gutter length, 2·halfZ deep outward). The
+ * orient-onto-direction rotation is purely about X for our planar path,
+ * so the box's width stays aligned with the gutter length axis.
+ */
+function segmentBetween(a, b, dims) {
+    const dir = new THREE.Vector3().subVectors(b, a);
+    const len = dir.length();
+    const geo = dims.shape === 'round'
+        ? new THREE.CylinderGeometry(dims.halfX, dims.halfX, len, RADIAL_SEGMENTS).toNonIndexed()
+        : new THREE.BoxGeometry(2 * dims.halfX, len, 2 * dims.halfZ).toNonIndexed();
+    // The primitive runs along +Y centred at origin; rotate +Y onto the
+    // segment direction, then drop it on the midpoint.
+    geo.applyQuaternion(new THREE.Quaternion().setFromUnitVectors(UP, dir.normalize()));
+    geo.translate((a.x + b.x) / 2, (a.y + b.y) / 2, (a.z + b.z) / 2);
+    return geo;
+}
+/**
+ * Hollow tube spanning two points — a ring (round) / rectangular-ring
+ * cross-section extruded along the leg, so both ends are open and the
+ * bore reads through. Used for the kickout mouth.
+ */
+function ringTube(a, b, dims) {
+    const dir = new THREE.Vector3().subVectors(b, a);
+    const len = dir.length();
+    const shape = new THREE.Shape();
+    const hole = new THREE.Path();
+    if (dims.shape === 'round') {
+        shape.absarc(0, 0, dims.halfX, 0, Math.PI * 2, false);
+        hole.absarc(0, 0, Math.max(0.002, dims.halfX - PIPE_WALL), 0, Math.PI * 2, true);
+    }
+    else {
+        const ox = dims.halfX;
+        const oz = dims.halfZ;
+        const ix = Math.max(0.002, ox - PIPE_WALL);
+        const iz = Math.max(0.002, oz - PIPE_WALL);
+        shape.moveTo(-ox, -oz);
+        shape.lineTo(ox, -oz);
+        shape.lineTo(ox, oz);
+        shape.lineTo(-ox, oz);
+        shape.closePath();
+        hole.moveTo(-ix, -iz);
+        hole.lineTo(-ix, iz);
+        hole.lineTo(ix, iz);
+        hole.lineTo(ix, -iz);
+        hole.closePath();
+    }
+    shape.holes.push(hole);
+    // ExtrudeGeometry runs the shape (in XY) along +Z from 0 to depth;
+    // orient +Z onto the leg direction, then move the z=0 end to `a`.
+    // ExtrudeGeometry is already non-indexed, matching the merge set.
+    const geo = new THREE.ExtrudeGeometry(shape, {
+        depth: len,
+        bevelEnabled: false,
+        steps: 1,
+        curveSegments: RADIAL_SEGMENTS,
+    });
+    geo.applyQuaternion(new THREE.Quaternion().setFromUnitVectors(FWD, dir.normalize()));
+    geo.translate(a.x, a.y, a.z);
+    return geo;
+}
+/**
+ * Corner joint at `p` between the segments (prev→p) and (p→next). Round
+ * → a sphere; rect → a box aligned to the bend bisector so it bridges
+ * the wedge the two box ends leave open at the outer corner.
+ */
+function jointAt(p, prev, next, dims) {
+    if (dims.shape === 'round') {
+        const geo = new THREE.SphereGeometry(dims.halfX, JOINT_SEGMENTS, JOINT_SEGMENTS).toNonIndexed();
+        geo.translate(p.x, p.y, p.z);
+        return geo;
+    }
+    const dirIn = new THREE.Vector3().subVectors(p, prev).normalize();
+    const dirOut = new THREE.Vector3().subVectors(next, p).normalize();
+    const bis = new THREE.Vector3().addVectors(dirIn, dirOut);
+    if (bis.lengthSq() < 1e-8)
+        bis.copy(dirOut); // straight-through; degenerate
+    bis.normalize();
+    const geo = new THREE.BoxGeometry(2 * dims.halfX, 2 * dims.halfZ, 2 * dims.halfZ).toNonIndexed();
+    geo.applyQuaternion(new THREE.Quaternion().setFromUnitVectors(UP, bis));
+    geo.translate(p.x, p.y, p.z);
+    return geo;
+}
+/**
+ * Thin bands clamping the wall run to the wall, ~`STRAP_SPACING` apart
+ * and set in from each end. Each is a flat box a touch proud of the
+ * pipe so it reads as a strap wrapping the run.
+ */
+function buildStraps(path, dims, spacing) {
+    const top = path.wallRunTopY;
+    const bottom = path.wallRunBottomY;
+    const z = path.wallRunZ;
+    const runLen = top - bottom;
+    if (runLen < STRAP_END_MARGIN * 2 + 0.05)
+        return [];
+    const usable = runLen - STRAP_END_MARGIN * 2;
+    const count = Math.max(1, Math.floor(usable / Math.max(0.2, spacing)) + 1);
+    const stride = count > 1 ? usable / (count - 1) : 0;
+    const w = 2 * dims.halfX + 2 * STRAP_OVERHANG;
+    const d = 2 * dims.halfZ + 2 * STRAP_OVERHANG;
+    const straps = [];
+    for (let i = 0; i < count; i++) {
+        const y = count > 1 ? top - STRAP_END_MARGIN - i * stride : (top + bottom) / 2;
+        const band = new THREE.BoxGeometry(w, STRAP_THICKNESS, d).toNonIndexed();
+        band.translate(0, y, z);
+        straps.push(band);
+    }
+    return straps;
+}
+/**
+ * Tilted slab on the ground under the mouth, extending outward (+Z,
+ * away from the wall) so it carries water off from the foundation.
+ */
+function buildSplash(path) {
+    const [bx, by, bz] = path.bottom;
+    const slab = new THREE.BoxGeometry(SPLASH_WIDTH, SPLASH_THICKNESS, SPLASH_LENGTH).toNonIndexed();
+    // Tilt the far (+Z) end down so it slopes away from the wall.
+    slab.rotateX(SPLASH_TILT);
+    slab.translate(bx, by - SPLASH_THICKNESS / 2, bz + SPLASH_LENGTH / 2);
+    return slab;
+}

package/dist/downspout/index.d.ts

@@ -0,0 +1,4 @@
+export { downspoutDefinition } from './definition';
+export { buildDownspoutGeometry } from './geometry';
+export { DownspoutNode } from './schema';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/downspout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA"}

package/dist/downspout/index.js

@@ -0,0 +1,3 @@
+export { downspoutDefinition } from './definition';
+export { buildDownspoutGeometry } from './geometry';
+export { DownspoutNode } from './schema';

package/dist/downspout/inspector-editors.d.ts

@@ -0,0 +1,25 @@
+import { type DownspoutNode } from '@pascal-app/core';
+/**
+ * Position-along-the-eave editor for a downspout. The downspout's spot
+ * is owned by its outlet on the host gutter (`gutter.outlets[].offset`),
+ * not by the downspout itself — so this slider reads + writes that
+ * outlet on the gutter rather than patching the downspout.
+ *
+ * Mesh-first commit (same shape as the in-world handle drags):
+ *  - `onChange` (live, every drag tick) publishes the new outlets to the
+ *    gutter's `useLiveNodeOverrides`. The gutter renderer rebuilds its
+ *    mesh from that override and the downspout renderer re-reads its
+ *    outlet — both move immediately, with NO write to the scene store /
+ *    history. The slider also reads the override back so its number
+ *    tracks during the drag.
+ *  - `onCommit` (on release) writes the final outlets to the store once
+ *    (the single undoable change — `SliderControl` resumes history
+ *    first) and drops the override so the renderers read the store again.
+ *
+ * Wired via `parametrics.fields[].kind: 'custom'`; hidden when the
+ * downspout isn't linked to an outlet.
+ */
+export declare function DownspoutPositionEditor({ node }: {
+    node: DownspoutNode;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=inspector-editors.d.ts.map

package/dist/downspout/inspector-editors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector-editors.d.ts","sourceRoot":"","sources":["../../src/downspout/inspector-editors.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,aAAa,EAKnB,MAAM,kBAAkB,CAAA;AAGzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,sCAyDxE"}

package/dist/downspout/inspector-editors.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLiveNodeOverrides, useScene, } from '@pascal-app/core';
+import { SliderControl } from '@pascal-app/editor';
+/**
+ * Position-along-the-eave editor for a downspout. The downspout's spot
+ * is owned by its outlet on the host gutter (`gutter.outlets[].offset`),
+ * not by the downspout itself — so this slider reads + writes that
+ * outlet on the gutter rather than patching the downspout.
+ *
+ * Mesh-first commit (same shape as the in-world handle drags):
+ *  - `onChange` (live, every drag tick) publishes the new outlets to the
+ *    gutter's `useLiveNodeOverrides`. The gutter renderer rebuilds its
+ *    mesh from that override and the downspout renderer re-reads its
+ *    outlet — both move immediately, with NO write to the scene store /
+ *    history. The slider also reads the override back so its number
+ *    tracks during the drag.
+ *  - `onCommit` (on release) writes the final outlets to the store once
+ *    (the single undoable change — `SliderControl` resumes history
+ *    first) and drops the override so the renderers read the store again.
+ *
+ * Wired via `parametrics.fields[].kind: 'custom'`; hidden when the
+ * downspout isn't linked to an outlet.
+ */
+export function DownspoutPositionEditor({ node }) {
+    const gutter = useScene((s) => node.gutterId ? s.nodes[node.gutterId] : undefined);
+    // Live override on the gutter, so the readout tracks the in-flight drag.
+    const override = useLiveNodeOverrides((s) => node.gutterId
+        ? s.get(node.gutterId)
+        : undefined);
+    if (gutter?.type !== 'gutter')
+        return null;
+    const storeOutlets = gutter.outlets ?? [];
+    const effectiveOutlets = override?.outlets ?? storeOutlets;
+    const outlet = effectiveOutlets.find((o) => o.id === node.outletId);
+    if (!outlet)
+        return null;
+    // Usable half-span — keep the outlet a hair inside each end so the
+    // collar never lands on a cap. The geometry clamps too; this just
+    // keeps the slider honest.
+    const bound = Math.max(0.05, Math.max(0.05, gutter.length) / 2 - 0.1);
+    const gutterId = gutter.id;
+    // Set the dragged outlet's offset on a copy of the STORE outlets (the
+    // canonical base — the slider hands an absolute value each tick).
+    const withOffset = (offset) => storeOutlets.map((o) => (o.id === node.outletId ? { ...o, offset } : o));
+    const handleChange = (offset) => {
+        // Mesh-first: publish to the gutter override, no store write.
+        useLiveNodeOverrides.getState().set(gutterId, { outlets: withOffset(offset) });
+    };
+    const handleCommit = (offset) => {
+        // Commit once to the store, then drop the override.
+        const state = useScene.getState();
+        state.updateNode(gutterId, { outlets: withOffset(offset) });
+        useLiveNodeOverrides.getState().clear(gutterId);
+        state.markDirty(gutterId);
+    };
+    return (_jsx(SliderControl, { label: "Position", max: bound, min: -bound, onChange: handleChange, onCommit: handleCommit, precision: 2, 
+        // onChange only touches the override, so there's nothing in the
+        // store to restore on release — skip the restore-then-reapply dance.
+        restoreOnCommit: false, step: 0.05, unit: "m", value: Math.max(-bound, Math.min(bound, outlet.offset ?? 0)) }));
+}

package/dist/downspout/parametrics.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"parametrics.d.ts","sourceRoot":"","sources":["../../src/downspout/parametrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7C,eAAO,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,aAAa,CAgEpE,CAAA"}

package/dist/downspout/parametrics.js

@@ -0,0 +1,66 @@
+import { DownspoutPositionEditor } from './inspector-editors';
+export const downspoutParametrics = {
+    groups: [
+        {
+            label: 'Dimensions',
+            fields: [
+                { key: 'length', kind: 'number', unit: 'm', min: 0.1, max: 8, step: 0.05 },
+                { key: 'diameter', kind: 'number', unit: 'm', min: 0.02, max: 0.15, step: 0.005 },
+                // Cross-section: follow the gutter profile, or force round / rect.
+                {
+                    key: 'shape',
+                    kind: 'enum',
+                    options: ['auto', 'round', 'rect'],
+                    display: 'segmented',
+                },
+            ],
+        },
+        {
+            label: 'Hardware',
+            fields: [
+                // Wall straps clamping the run, like the gutter's hangers.
+                {
+                    key: 'strapStyle',
+                    kind: 'enum',
+                    options: ['band', 'none'],
+                    display: 'segmented',
+                },
+                {
+                    key: 'strapSpacing',
+                    kind: 'number',
+                    unit: 'm',
+                    min: 0.3,
+                    max: 3,
+                    step: 0.1,
+                    visibleIf: (n) => (n.strapStyle ?? 'band') !== 'none',
+                },
+                // Bottom treatment: splash block, kickout only, or straight to grade.
+                {
+                    key: 'terminal',
+                    kind: 'enum',
+                    options: ['splash', 'kickout', 'straight'],
+                    display: 'segmented',
+                },
+            ],
+        },
+        {
+            label: 'Placement',
+            fields: [
+                // Slide the outlet (and so this downspout) along the eave. Edits
+                // the linked outlet's offset on the host gutter — the only way to
+                // reposition a drop after placing it. Hidden when unlinked.
+                {
+                    key: 'outletPosition',
+                    kind: 'custom',
+                    component: DownspoutPositionEditor,
+                    visibleIf: (n) => Boolean(n.outletId),
+                },
+                // How far proud of the wall the pipe sits. Crank it up if the
+                // auto-routed run buries into the wall (the wall isn't where the
+                // roof overhang implies); 0 puts the pipe surface on the wall
+                // face; large values pull the run back out toward the eave.
+                { key: 'standoff', kind: 'number', unit: 'm', min: 0, max: 0.6, step: 0.01 },
+            ],
+        },
+    ],
+};

package/dist/downspout/preview.d.ts

@@ -0,0 +1,19 @@
+import type { DownspoutRouting } from './routing';
+import type { DownspoutNode } from './schema';
+/**
+ * Translucent ghost of a downspout — same geometry as the committed
+ * pipe so the placement ghost matches what lands on click. No
+ * internal transform wrapper; the placement tool nests this under
+ * the gutter / outlet chain so the position math stays in one place.
+ *
+ * `routing` mirrors the renderer's — when the tool resolves the host
+ * gutter it feeds the same wall-jog so the ghost already shows the
+ * elbowed path, not a straight drop.
+ */
+declare const DownspoutPreview: ({ node, routing, invalid, }: {
+    node: DownspoutNode;
+    routing?: DownspoutRouting | null;
+    invalid?: boolean;
+}) => import("react").JSX.Element;
+export default DownspoutPreview;
+//# sourceMappingURL=preview.d.ts.map

package/dist/downspout/preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/downspout/preview.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7C;;;;;;;;;GASG;AACH,QAAA,MAAM,gBAAgB,GAAI,6BAIvB;IACD,IAAI,EAAE,aAAa,CAAA;IACnB,OAAO,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,gCAmDA,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/downspout/preview.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import * as THREE from 'three';
+import { INVALID_GHOST_COLOR } from '../shared/ghost-materials';
+import { buildDownspoutGeometry } from './geometry';
+/**
+ * Translucent ghost of a downspout — same geometry as the committed
+ * pipe so the placement ghost matches what lands on click. No
+ * internal transform wrapper; the placement tool nests this under
+ * the gutter / outlet chain so the position math stays in one place.
+ *
+ * `routing` mirrors the renderer's — when the tool resolves the host
+ * gutter it feeds the same wall-jog so the ghost already shows the
+ * elbowed path, not a straight drop.
+ */
+const DownspoutPreview = ({ node, routing, invalid, }) => {
+    // biome-ignore lint/correctness/useExhaustiveDependencies: deps deliberately list the build inputs; depending on the whole object would rebuild on unrelated field changes.
+    const geometry = useMemo(() => buildDownspoutGeometry(node, routing), [
+        node.length,
+        node.diameter,
+        node.standoff,
+        node.shape,
+        node.strapStyle,
+        node.strapSpacing,
+        node.terminal,
+        routing,
+    ]);
+    const material = useMemo(() => new THREE.MeshStandardMaterial({
+        color: invalid ? INVALID_GHOST_COLOR : 0xff_ff_ff,
+        emissive: invalid ? INVALID_GHOST_COLOR : 0xff_ff_ff,
+        emissiveIntensity: 0.12,
+        roughness: 0.7,
+        metalness: 0.2,
+        transparent: true,
+        opacity: invalid ? 0.4 : 0.55,
+        depthWrite: false,
+        side: THREE.FrontSide,
+    }), [invalid]);
+    const edgesGeometry = useMemo(() => new THREE.EdgesGeometry(geometry, 25), [geometry]);
+    useEffect(() => () => {
+        geometry.dispose();
+        edgesGeometry.dispose();
+        material.dispose();
+    }, [geometry, edgesGeometry, material]);
+    return (_jsxs(_Fragment, { children: [_jsx("mesh", { geometry: geometry, material: material, raycast: () => { } }), _jsx("lineSegments", { geometry: edgesGeometry, renderOrder: 1000, children: _jsx("lineBasicMaterial", { color: 0x6c_a3_ff, depthTest: false, opacity: 0.9, transparent: true }) })] }));
+};
+export default DownspoutPreview;

package/dist/downspout/renderer.d.ts

@@ -0,0 +1,22 @@
+import { type DownspoutNode } from '@pascal-app/core';
+/**
+ * Downspout renderer. Mount chain mirrors the gutter's, then nests
+ * one level deeper into the outlet position in gutter-mesh-local:
+ *
+ *   segment.position → segment.rotation (Y)
+ *     → [gutter.position[0], computeEaveY(segment), gutter.position[2]]
+ *     → gutter.rotation (Y)
+ *     → [outlet.x, outlet.y, outlet.z]
+ *     → mesh (pipe descends from Y = 0)
+ *
+ * Pulling the gutter's eave Y from `computeEaveY(effectiveSegment)`
+ * means the downspout follows wallHeight / overhang / pitch changes
+ * live, on the same frame as the gutter. The gutter and segment also
+ * subscribe to `useLiveNodeOverrides` so drag-in-flight changes flow
+ * through too.
+ */
+declare const DownspoutRenderer: ({ node: storeNode }: {
+    node: DownspoutNode;
+}) => import("react").JSX.Element | null;
+export default DownspoutRenderer;
+//# sourceMappingURL=renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/downspout/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,aAAa,EAMnB,MAAM,kBAAkB,CAAA;AAuBzB;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,iBAAiB,GAAI,qBAAqB;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,uCAqKtE,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/downspout/renderer.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core';
+import { createMaterial, createMaterialFromPresetRef, createSurfaceRoleMaterial, useNodeEvents, useViewer, } from '@pascal-app/viewer';
+import { useEffect, useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { computeEaveY } from '../gutter/eave-snap';
+import { resolveGutterOutletById } from '../gutter/outlet-lookup';
+import { useSegmentTrimClippedGeometry } from '../shared/use-segment-trim-clip';
+import { buildDownspoutGeometry } from './geometry';
+import { computeDownspoutRouting } from './routing';
+const defaultMaterial = new THREE.MeshStandardMaterial({
+    color: 0xff_ff_ff,
+    roughness: 0.7,
+    metalness: 0.25,
+});
+/**
+ * Downspout renderer. Mount chain mirrors the gutter's, then nests
+ * one level deeper into the outlet position in gutter-mesh-local:
+ *
+ *   segment.position → segment.rotation (Y)
+ *     → [gutter.position[0], computeEaveY(segment), gutter.position[2]]
+ *     → gutter.rotation (Y)
+ *     → [outlet.x, outlet.y, outlet.z]
+ *     → mesh (pipe descends from Y = 0)
+ *
+ * Pulling the gutter's eave Y from `computeEaveY(effectiveSegment)`
+ * means the downspout follows wallHeight / overhang / pitch changes
+ * live, on the same frame as the gutter. The gutter and segment also
+ * subscribe to `useLiveNodeOverrides` so drag-in-flight changes flow
+ * through too.
+ */
+const DownspoutRenderer = ({ node: storeNode }) => {
+    const ref = useRef(null);
+    useRegistry(storeNode.id, 'downspout', ref);
+    const handlers = useNodeEvents(storeNode, 'downspout');
+    const shading = useViewer((s) => s.shading);
+    const textures = useViewer((s) => s.textures);
+    const colorPreset = useViewer((s) => s.colorPreset);
+    const sceneTheme = useViewer((s) => s.sceneTheme);
+    const overrides = useLiveNodeOverrides((s) => s.get(storeNode.id));
+    const node = overrides
+        ? { ...storeNode, ...overrides }
+        : storeNode;
+    // Host gutter — both scene + live overrides so drag-in-flight gutter
+    // moves (length / position) reposition the downspout immediately.
+    const gutter = useScene((s) => node.gutterId ? s.nodes[node.gutterId] : undefined);
+    const gutterOverrides = useLiveNodeOverrides((s) => node.gutterId
+        ? s.get(node.gutterId)
+        : undefined);
+    const effectiveGutter = gutter
+        ? gutterOverrides
+            ? { ...gutter, ...gutterOverrides }
+            : gutter
+        : undefined;
+    // Segment of the host gutter (the downspout's own scene-graph parent
+    // is the same segment — same as roof accessories — so the chain
+    // segment → gutter-mesh-local is what we need to reach the outlet).
+    const segment = useScene((s) => effectiveGutter?.roofSegmentId
+        ? s.nodes[effectiveGutter.roofSegmentId]
+        : undefined);
+    const segmentOverrides = useLiveNodeOverrides((s) => effectiveGutter?.roofSegmentId
+        ? s.get(effectiveGutter.roofSegmentId)
+        : undefined);
+    const effectiveSegment = segment
+        ? segmentOverrides
+            ? { ...segment, ...segmentOverrides }
+            : segment
+        : undefined;
+    // Routing back to the wall — memoised on the gutter/segment values
+    // that actually move the jog or the collar bore, so the pipe geometry
+    // only rebuilds when one of those changes (not on every override-merge
+    // render). Resolves to null when the gutter has no outlet.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: deps deliberately list the build inputs; depending on the whole object would rebuild on unrelated field changes.
+    const routing = useMemo(() => effectiveGutter && effectiveSegment
+        ? computeDownspoutRouting(effectiveGutter, effectiveSegment, node.outletId)
+        : null, [
+        effectiveGutter?.profile,
+        effectiveGutter?.size,
+        // The outlets array — its referenced entry's diameter / offset
+        // drives the collar bore + nesting.
+        effectiveGutter ? JSON.stringify(effectiveGutter.outlets) : undefined,
+        effectiveSegment?.overhang,
+        node.outletId,
+    ]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: deps deliberately list the build inputs; depending on the whole object would rebuild on unrelated field changes.
+    const geometry = useMemo(() => buildDownspoutGeometry(node, routing), [
+        node.length,
+        node.diameter,
+        node.standoff,
+        node.shape,
+        node.strapStyle,
+        node.strapSpacing,
+        node.terminal,
+        routing,
+    ]);
+    useEffect(() => () => geometry.dispose(), [geometry]);
+    const material = useMemo(() => {
+        if (!textures || (!node.material && !node.materialPreset)) {
+            return createSurfaceRoleMaterial('roof', colorPreset, THREE.FrontSide, sceneTheme);
+        }
+        return node.material
+            ? createMaterial(node.material, shading)
+            : (createMaterialFromPresetRef(node.materialPreset, shading) ?? defaultMaterial);
+    }, [textures, colorPreset, sceneTheme, shading, node.material, node.materialPreset]);
+    // Map downspout-local geometry into the host segment's local frame (where the
+    // trim cut prisms live). Recompose the same outlet pose the inner mesh group
+    // is mounted with (gutter offset + rotation → outlet → eave Y). Computed
+    // before the early returns so the hook order stays stable.
+    const localToSegment = useMemo(() => {
+        if (!effectiveGutter || !effectiveSegment)
+            return new THREE.Matrix4();
+        const outlet = resolveGutterOutletById(effectiveGutter, node.outletId);
+        if (!outlet)
+            return new THREE.Matrix4();
+        const liveEaveY = computeEaveY(effectiveSegment);
+        const gutterRotY = effectiveGutter.rotation ?? 0;
+        const gutterX = effectiveGutter.position[0] ?? 0;
+        const gutterZ = effectiveGutter.position[2] ?? 0;
+        const cos = Math.cos(gutterRotY);
+        const sin = Math.sin(gutterRotY);
+        const outletSegX = gutterX + (outlet.x * cos + outlet.z * sin);
+        const outletSegZ = gutterZ + (-outlet.x * sin + outlet.z * cos);
+        const outletSegY = liveEaveY + outlet.y;
+        return new THREE.Matrix4().compose(new THREE.Vector3(outletSegX, outletSegY, outletSegZ), new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), gutterRotY), new THREE.Vector3(1, 1, 1));
+    }, [effectiveGutter, effectiveSegment, node.outletId]);
+    const clippedGeometry = useSegmentTrimClippedGeometry(geometry, effectiveSegment, localToSegment);
+    if (!effectiveGutter || !effectiveSegment)
+        return null;
+    const outlet = resolveGutterOutletById(effectiveGutter, node.outletId);
+    if (!outlet)
+        return null;
+    const segPos = effectiveSegment.position ?? [0, 0, 0];
+    const segRotY = effectiveSegment.rotation ?? 0;
+    const liveEaveY = computeEaveY(effectiveSegment);
+    const gutterRotY = effectiveGutter.rotation ?? 0;
+    // Bake the gutter's position + Y-rotation into the registered ref so it
+    // sits as a DIRECT child of the segment-transform group — its local
+    // pose is the outlet's full segment-local placement. `NodeArrowHandles`
+    // copies the registered object's LOCAL transform into the segment's
+    // object (it assumes a flat node → scene-parent chain); with the old
+    // nested segment → gutter → outlet groups it only saw the innermost
+    // `[outlet.x …]` offset and the handles landed at the roof centre.
+    const gutterX = effectiveGutter.position[0] ?? 0;
+    const gutterZ = effectiveGutter.position[2] ?? 0;
+    const cos = Math.cos(gutterRotY);
+    const sin = Math.sin(gutterRotY);
+    const outletSegX = gutterX + (outlet.x * cos + outlet.z * sin);
+    const outletSegZ = gutterZ + (-outlet.x * sin + outlet.z * cos);
+    const outletSegY = liveEaveY + outlet.y;
+    return (_jsx("group", { position: segPos, "rotation-y": segRotY, children: _jsx("group", { position: [outletSegX, outletSegY, outletSegZ], ref: ref, "rotation-y": gutterRotY, visible: node.visible, children: _jsx("mesh", { castShadow: true, geometry: clippedGeometry ?? geometry, material: material, name: "downspout-surface", receiveShadow: true, ...handlers }) }) }));
+};
+export default DownspoutRenderer;