@pascal-app/viewer 1.0.6 → 1.0.7

package/dist/systems/door/leaf-profile.d.ts

@@ -0,0 +1,11 @@
+import { BufferGeometry, Vector2 } from 'three';
+export declare function panelProfile(leafDepth: number, panelDepth: number, panelInset: number, width: number, height: number): {
+    inset: number;
+    depth: number;
+}[];
+/** One closed panel: inward sticking, a recessed field and an optional raised centre, on both faces. */
+export declare function buildPanelField(contour: Vector2[], leafDepth: number, panelDepth: number, panelInset: number, flushPullAt?: {
+    x: number;
+    y: number;
+}): BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>;
+//# sourceMappingURL=leaf-profile.d.ts.map

package/dist/systems/door/leaf-profile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"leaf-profile.d.ts","sourceRoot":"","sources":["../../../src/systems/door/leaf-profile.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAsC,OAAO,EAAW,MAAM,OAAO,CAAA;AAE5F,wBAAgB,YAAY,CAC1B,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM;;;IAyBf;AAED,wGAAwG;AACxG,wBAAgB,eAAe,CAC7B,OAAO,EAAE,OAAO,EAAE,EAClB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,WAAW,CAAC,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,kGAyGvC"}

package/dist/systems/door/leaf-profile.js

@@ -0,0 +1,140 @@
+import { BufferGeometry, Float32BufferAttribute, ShapeUtils, Vector2, Vector3 } from 'three';
+export function panelProfile(leafDepth, panelDepth, panelInset, width, height) {
+    const fieldDepth = Math.min(panelDepth > 0 ? Math.max(0.006, Math.min(0.012, panelDepth)) : Math.min(-panelDepth, 0.012), Math.max(0, (leafDepth - 0.002) / 2));
+    // Narrow custom openings must leave room for a centre instead of crossing their offset rings.
+    const stickingWidth = Math.min(Math.max(0.012, Math.min(0.02, panelInset / 2)), width / 4, height / 4);
+    const profile = [
+        { inset: 0, depth: 0 },
+        { inset: stickingWidth / 2, depth: -fieldDepth * 0.35 },
+        { inset: stickingWidth, depth: -fieldDepth },
+    ];
+    if (panelDepth > 0) {
+        const plateauDepth = Math.min(0.002, fieldDepth);
+        profile.push({
+            inset: stickingWidth + Math.min(fieldDepth - plateauDepth, stickingWidth * 0.9),
+            depth: -plateauDepth,
+        });
+    }
+    return profile;
+}
+/** One closed panel: inward sticking, a recessed field and an optional raised centre, on both faces. */
+export function buildPanelField(contour, leafDepth, panelDepth, panelInset, flushPullAt) {
+    if (contour.length > 1 && contour[0].equals(contour[contour.length - 1]))
+        contour = contour.slice(0, -1);
+    const outer = contour.filter((point, i) => {
+        const previous = contour[(i + contour.length - 1) % contour.length];
+        const next = contour[(i + 1) % contour.length];
+        return Math.abs(point.clone().sub(previous).cross(next.clone().sub(point))) > 1e-9;
+    });
+    if (ShapeUtils.isClockWise(outer))
+        outer.reverse();
+    const xs = outer.map((p) => p.x);
+    const ys = outer.map((p) => p.y);
+    const profile = panelProfile(leafDepth, panelDepth, panelInset, Math.max(...xs) - Math.min(...xs), Math.max(...ys) - Math.min(...ys));
+    const offsets = outer.map((point, i) => {
+        const incoming = point
+            .clone()
+            .sub(outer[(i + outer.length - 1) % outer.length])
+            .normalize();
+        const outgoing = outer[(i + 1) % outer.length].clone().sub(point).normalize();
+        const n1 = new Vector2(-incoming.y, incoming.x);
+        const n2 = new Vector2(-outgoing.y, outgoing.x);
+        const scale = 1 / (1 + n1.dot(n2));
+        return n1.add(n2).multiplyScalar(scale);
+    });
+    const rings = profile.map(({ inset, depth }) => ({
+        contour: outer.map((point, i) => point.clone().addScaledVector(offsets[i], inset)),
+        depth,
+    }));
+    const positions = [];
+    const uvs = [];
+    const triangle = (a, b, c, u = new Vector3(1, 0, 0), v = new Vector3(0, 1, 0)) => {
+        const polygons = flushPullAt ? outsidePull([a, b, c], flushPullAt) : [[a, b, c]];
+        for (const polygon of polygons)
+            for (let i = 1; i < polygon.length - 1; i++) {
+                const points = [polygon[0], polygon[i], polygon[i + 1]];
+                if (points[1].clone().sub(points[0]).cross(points[2].clone().sub(points[0])).lengthSq() <
+                    1e-20)
+                    continue;
+                for (const p of points) {
+                    positions.push(p.x, p.y, p.z);
+                    uvs.push(p.dot(u), p.dot(v));
+                }
+            }
+    };
+    const point3 = (p, z) => new Vector3(p.x, p.y, z);
+    for (const face of [-1, 1]) {
+        const { contour: inner, depth } = rings[rings.length - 1];
+        const z = face * (leafDepth / 2 + depth);
+        for (const [a, b, c] of ShapeUtils.triangulateShape(inner, [])) {
+            const points = [point3(inner[a], z), point3(inner[b], z), point3(inner[c], z)];
+            if (face < 0)
+                points.reverse();
+            triangle(points[0], points[1], points[2]);
+        }
+        for (let ring = 1; ring < rings.length; ring++) {
+            const outside = rings[ring - 1];
+            const inside = rings[ring];
+            for (let i = 0; i < outer.length; i++) {
+                const j = (i + 1) % outer.length;
+                const a = point3(outside.contour[i], face * (leafDepth / 2 + outside.depth));
+                const b = point3(outside.contour[j], face * (leafDepth / 2 + outside.depth));
+                const c = point3(inside.contour[j], face * (leafDepth / 2 + inside.depth));
+                const d = point3(inside.contour[i], face * (leafDepth / 2 + inside.depth));
+                const u = b.clone().sub(a).normalize();
+                const normal = b.clone().sub(a).cross(d.clone().sub(a)).normalize();
+                const v = normal.clone().cross(u);
+                if (face > 0) {
+                    triangle(a, b, c, u, v);
+                    triangle(a, c, d, u, v);
+                }
+                else {
+                    triangle(a, c, b, u, v);
+                    triangle(a, d, c, u, v);
+                }
+            }
+        }
+    }
+    for (let i = 0; i < outer.length; i++) {
+        const j = (i + 1) % outer.length;
+        const a = point3(outer[i], -leafDepth / 2);
+        const b = point3(outer[j], -leafDepth / 2);
+        const c = point3(outer[j], leafDepth / 2);
+        const d = point3(outer[i], leafDepth / 2);
+        const u = b.clone().sub(a).normalize();
+        const v = new Vector3(0, 0, 1);
+        triangle(a, b, c, u, v);
+        triangle(a, c, d, u, v);
+    }
+    const geometry = new BufferGeometry();
+    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    geometry.setAttribute('uv', new Float32BufferAttribute(uvs, 2));
+    geometry.computeVertexNormals();
+    return geometry;
+}
+// Clip each field triangle around the same through-hole the stile boxes leave for the flush cup.
+function outsidePull(triangle, pull) {
+    const clip = (polygon, axis, edge, sign) => {
+        const result = [];
+        for (let i = 0; i < polygon.length; i++) {
+            const a = polygon[i];
+            const b = polygon[(i + 1) % polygon.length];
+            const da = sign * (a[axis] - edge);
+            const db = sign * (b[axis] - edge);
+            if (da >= 0)
+                result.push(a);
+            if (da >= 0 !== db >= 0)
+                result.push(a.clone().lerp(b, da / (da - db)));
+        }
+        return result;
+    };
+    const left = pull.x - 0.02;
+    const right = pull.x + 0.02;
+    const middle = clip(clip(triangle, 'x', left, 1), 'x', right, -1);
+    return [
+        clip(triangle, 'x', left, -1),
+        clip(triangle, 'x', right, 1),
+        clip(middle, 'y', pull.y - 0.06, -1),
+        clip(middle, 'y', pull.y + 0.06, 1),
+    ];
+}

package/dist/systems/interactive/callout-actions.d.ts

@@ -0,0 +1,72 @@
+import { type AnyNode, type AnyNodeId, type ControlValue, type Interactive, type InteractiveState, type MessageDescriptor } from '@pascal-app/core';
+import { type ProceduralItemNode } from '@pascal-app/core/procedural-items';
+import type { CalloutAction, CalloutIcon, CalloutSound, CalloutText } from '../../components/viewer/selection-callout';
+export declare function hasCallout(type: string | undefined): boolean;
+export declare const SHUTTERS: MessageDescriptor;
+/**
+ * The line under the callout's name: what kind of thing it is ("Single-hung
+ * window", "Sliding door"), or the catalog name when a person renamed the item.
+ */
+export declare function calloutSubtitle(node: AnyNode | undefined, title: string): CalloutText | null;
+export declare const OPEN_SOUNDS: {
+    readonly door: {
+        readonly on: 'door-open';
+        readonly off: 'door-close';
+        readonly swing: 'door-swing';
+    };
+    readonly window: {
+        readonly on: 'window-open';
+        readonly off: 'window-close';
+        readonly swing: 'window-swing';
+    };
+    readonly garage: {
+        readonly on: 'garage';
+        readonly off: 'garage';
+    };
+    readonly shutters: {
+        readonly on: 'shutters-open';
+        readonly off: 'shutters-close';
+    };
+    readonly panel: {
+        readonly on: 'panel-open';
+        readonly off: 'panel-close';
+        readonly swing: 'panel-swing';
+    };
+    readonly drawer: {
+        readonly on: 'panel-open';
+        readonly off: 'panel-close';
+    };
+    readonly switch: {
+        readonly on: 'switch-on';
+        readonly off: 'switch-off';
+    };
+};
+/** The node fields that choose an opening's icon and sound. */
+export type CalloutActionInput = {
+    type: string;
+    doorType?: string;
+};
+export declare function openingSound(node: CalloutActionInput): {
+    readonly on: 'door-open';
+    readonly off: 'door-close';
+    readonly swing: 'door-swing';
+} | {
+    readonly on: 'window-open';
+    readonly off: 'window-close';
+    readonly swing: 'window-swing';
+} | {
+    readonly on: 'garage';
+    readonly off: 'garage';
+};
+/** A pill that flips one thing; without its own text it shows its state word. */
+export declare function calloutToggle(key: string, icon: CalloutIcon, on: boolean, name: string, sound: CalloutSound, run: () => void | Promise<void>, text?: CalloutText): CalloutAction;
+/**
+ * A catalog or scripted object's own controls: its light switch, its `open`
+ * clip, any other named toggle, and its sliders.
+ */
+export declare function interactiveActions(name: string, interactive: Interactive, values: readonly ControlValue[] | undefined, setValue: (index: number, value: ControlValue) => void, opening?: CalloutActionInput): CalloutAction[];
+/** A procedural item's moving parts, each by its own name, then its lights. */
+export declare function proceduralActions(nodeId: AnyNodeId, name: string, recipe: Pick<ProceduralItemNode['recipe'], 'parts' | 'joints'>, state: InteractiveState): CalloutAction[];
+/** Everything a live scene node can do, for the parametric viewer's callout. */
+export declare function nodeCalloutActions(node: AnyNode, name: string, state: InteractiveState): CalloutAction[];
+//# sourceMappingURL=callout-actions.d.ts.map

package/dist/systems/interactive/callout-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout-actions.d.ts","sourceRoot":"","sources":["../../../src/systems/interactive/callout-actions.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,gBAAgB,EAGrB,KAAK,iBAAiB,EAOvB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AAC1F,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACX,YAAY,EACZ,WAAW,EACZ,MAAM,2CAA2C,CAAA;AAiBlD,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAE5D;AA+CD,eAAO,MAAM,QAAQ,EAAE,iBAGtB,CAAA;AAOD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CA4B5F;AAED,eAAO,MAAM,WAAW;;iBACd,EAAE,EAAE,WAAW;iBAAE,GAAG,EAAE,YAAY;iBAAE,KAAK,EAAE,YAAY;;;iBACrD,EAAE,EAAE,aAAa;iBAAE,GAAG,EAAE,cAAc;iBAAE,KAAK,EAAE,cAAc;;;iBAC7D,EAAE,EAAE,QAAQ;iBAAE,GAAG,EAAE,QAAQ;;;iBACzB,EAAE,EAAE,eAAe;iBAAE,GAAG,EAAE,gBAAgB;;;iBAE7C,EAAE,EAAE,YAAY;iBAAE,GAAG,EAAE,aAAa;iBAAE,KAAK,EAAE,aAAa;;;iBACzD,EAAE,EAAE,YAAY;iBAAE,GAAG,EAAE,aAAa;;;iBACpC,EAAE,EAAE,WAAW;iBAAE,GAAG,EAAE,YAAY;;CACG,CAAA;AAEjD,+DAA+D;AAC/D,MAAM,MAAM,kBAAkB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEpE,wBAAgB,YAAY,CAAC,IAAI,EAAE,kBAAkB;iBAbvC,WAAW;kBAAO,YAAY;oBAAS,YAAY;;iBACjD,aAAa;kBAAO,cAAc;oBAAS,cAAc;;iBACzD,QAAQ;kBAAO,QAAQ;EActC;AAED,iFAAiF;AACjF,wBAAgB,aAAa,CAC3B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,WAAW,EACjB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,YAAY,EACnB,GAAG,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAC/B,IAAI,CAAC,EAAE,WAAW,GACjB,aAAa,CAEf;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,SAAS,YAAY,EAAE,GAAG,SAAS,EAC3C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,EACtD,OAAO,GAAE,kBAAqC,GAC7C,aAAa,EAAE,CAwCjB;AAED,+EAA+E;AAC/E,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC,EAC9D,KAAK,EAAE,gBAAgB,GACtB,aAAa,EAAE,CAiCjB;AAyCD,gFAAgF;AAChF,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,gBAAgB,GACtB,aAAa,EAAE,CAwBjB"}

package/dist/systems/interactive/callout-actions.js

@@ -0,0 +1,212 @@
+import { isScriptedNode, itemInteraction, nodeMechanism, nodeMechanismParts, scriptedInteractive, toggleMechanism, toggleMechanismPart, useInteractive, } from '@pascal-app/core';
+import { operableParts } from '@pascal-app/core/procedural-items';
+import { openingSettled, proceduralSettled } from './opening-settled';
+/** Kinds that are the building itself: the breadcrumb names them, no callout does. */
+const STRUCTURE = new Set([
+    'site',
+    'building',
+    'level',
+    'zone',
+    'wall',
+    'slab',
+    'ceiling',
+    'roof',
+    'roof-segment',
+    'fence',
+]);
+export function hasCallout(type) {
+    return Boolean(type) && !STRUCTURE.has(type);
+}
+const DOOR_DETAIL = {
+    hinged: /* i18n */ { id: 'viewer.callout.door.hinged', message: 'Hinged door' },
+    double: /* i18n */ { id: 'viewer.callout.door.double', message: 'Double door' },
+    french: /* i18n */ { id: 'viewer.callout.door.french', message: 'French door' },
+    folding: /* i18n */ { id: 'viewer.callout.door.folding', message: 'Folding door' },
+    pocket: /* i18n */ { id: 'viewer.callout.door.pocket', message: 'Pocket door' },
+    barn: /* i18n */ { id: 'viewer.callout.door.barn', message: 'Barn door' },
+    sliding: /* i18n */ { id: 'viewer.callout.door.sliding', message: 'Sliding door' },
+    'garage-sectional': /* i18n */ {
+        id: 'viewer.callout.door.garageSectional',
+        message: 'Sectional garage door',
+    },
+    'garage-rollup': /* i18n */ {
+        id: 'viewer.callout.door.garageRollup',
+        message: 'Roll-up garage door',
+    },
+    'garage-tiltup': /* i18n */ {
+        id: 'viewer.callout.door.garageTiltup',
+        message: 'Tilt-up garage door',
+    },
+};
+const WINDOW_DETAIL = {
+    fixed: /* i18n */ { id: 'viewer.callout.window.fixed', message: 'Fixed window' },
+    sliding: /* i18n */ { id: 'viewer.callout.window.sliding', message: 'Sliding window' },
+    casement: /* i18n */ { id: 'viewer.callout.window.casement', message: 'Casement window' },
+    awning: /* i18n */ { id: 'viewer.callout.window.awning', message: 'Awning window' },
+    hopper: /* i18n */ { id: 'viewer.callout.window.hopper', message: 'Hopper window' },
+    'tilt-turn': /* i18n */ { id: 'viewer.callout.window.tiltTurn', message: 'Tilt-and-turn window' },
+    'single-hung': /* i18n */ {
+        id: 'viewer.callout.window.singleHung',
+        message: 'Single-hung window',
+    },
+    'double-hung': /* i18n */ {
+        id: 'viewer.callout.window.doubleHung',
+        message: 'Double-hung window',
+    },
+    bay: /* i18n */ { id: 'viewer.callout.window.bay', message: 'Bay window' },
+    bow: /* i18n */ { id: 'viewer.callout.window.bow', message: 'Bow window' },
+    louvered: /* i18n */ { id: 'viewer.callout.window.louvered', message: 'Louvered window' },
+};
+const OPENING = /* i18n */ { id: 'viewer.callout.opening', message: 'Opening' };
+const DOOR = /* i18n */ { id: 'viewer.callout.door', message: 'Door' };
+const WINDOW = /* i18n */ { id: 'viewer.callout.window', message: 'Window' };
+export const SHUTTERS = /* i18n */ {
+    id: 'viewer.walkthrough.shutters',
+    message: 'Shutters',
+};
+function sentence(word) {
+    const spaced = word.replaceAll(/[-_]/g, ' ');
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+/**
+ * The line under the callout's name: what kind of thing it is ("Single-hung
+ * window", "Sliding door"), or the catalog name when a person renamed the item.
+ */
+export function calloutSubtitle(node, title) {
+    if (!node)
+        return null;
+    const raw = node;
+    let detail = null;
+    if (raw.type === 'door' || raw.type === 'window') {
+        const word = raw.type === 'door' ? DOOR : WINDOW;
+        if (raw.openingKind === 'opening')
+            detail = OPENING;
+        else if (raw.source)
+            detail = word;
+        else if (raw.type === 'door')
+            detail = DOOR_DETAIL[raw.doorType ?? 'hinged'] ?? word;
+        else
+            detail = WINDOW_DETAIL[raw.windowType ?? 'fixed'] ?? word;
+    }
+    else if (raw.type === 'item') {
+        detail =
+            raw.asset?.name && raw.asset.name !== title
+                ? raw.asset.name
+                : raw.asset?.category
+                    ? sentence(raw.asset.category)
+                    : null;
+    }
+    else if (raw.type !== 'procedural-item') {
+        detail = sentence(raw.type);
+    }
+    return detail && detail !== title ? detail : null;
+}
+export const OPEN_SOUNDS = {
+    door: { on: 'door-open', off: 'door-close', swing: 'door-swing' },
+    window: { on: 'window-open', off: 'window-close', swing: 'window-swing' },
+    garage: { on: 'garage', off: 'garage' },
+    shutters: { on: 'shutters-open', off: 'shutters-close' },
+    // A recipe's hinged part (a cabinet or wardrobe door, a lid) and its sliding one (a drawer).
+    panel: { on: 'panel-open', off: 'panel-close', swing: 'panel-swing' },
+    drawer: { on: 'panel-open', off: 'panel-close' },
+    switch: { on: 'switch-on', off: 'switch-off' },
+};
+export function openingSound(node) {
+    if (node.type === 'window')
+        return OPEN_SOUNDS.window;
+    return node.doorType?.startsWith('garage-') ? OPEN_SOUNDS.garage : OPEN_SOUNDS.door;
+}
+/** A pill that flips one thing; without its own text it shows its state word. */
+export function calloutToggle(key, icon, on, name, sound, run, text) {
+    return { kind: 'toggle', key, icon, on, name, text, sound, toggle: run };
+}
+/**
+ * A catalog or scripted object's own controls: its light switch, its `open`
+ * clip, any other named toggle, and its sliders.
+ */
+export function interactiveActions(name, interactive, values, setValue, opening = { type: 'item' }) {
+    const toggles = interactive.controls.flatMap((control, index) => control.kind === 'toggle' ? [index] : []);
+    const light = interactive.effects.some((effect) => effect.kind === 'light') ? toggles[0] : -1;
+    const interaction = itemInteraction(interactive);
+    const openControl = interaction.kind === 'open' ? interaction.control : -1;
+    const openIcon = opening.type === 'window' ? 'window' : 'door';
+    return interactive.controls.map((control, index) => {
+        const value = values?.[index];
+        if (control.kind === 'toggle') {
+            const on = Boolean(value);
+            const flip = () => setValue(index, !on);
+            if (index === light)
+                return calloutToggle(String(index), 'light', on, name, OPEN_SOUNDS.switch, flip);
+            if (index === openControl)
+                return calloutToggle(String(index), openIcon, on, name, openingSound(opening), flip);
+            const label = control.label;
+            return calloutToggle(String(index), label && /fan/i.test(label) ? 'fan' : 'power', on, label ?? name, OPEN_SOUNDS.switch, flip, label);
+        }
+        return {
+            kind: 'range',
+            key: String(index),
+            label: control.label,
+            value: typeof value === 'number' ? value : control.min,
+            min: control.min,
+            max: control.max,
+            step: control.kind === 'slider' ? control.step : 1,
+            unit: control.kind === 'temperature' ? `°${control.unit}` : control.unit,
+            onChange: (next) => setValue(index, next),
+        };
+    });
+}
+/** A procedural item's moving parts, each by its own name, then its lights. */
+export function proceduralActions(nodeId, name, recipe, state) {
+    const procedural = state.procedural[nodeId];
+    const actions = operableParts(recipe).map((part) => {
+        const on = procedural?.parts[part.id] ?? part.kind === 'spin';
+        return calloutToggle(part.id, part.kind === 'spin' ? 'fan' : 'door', on, part.label, part.kind === 'spin'
+            ? OPEN_SOUNDS.switch
+            : part.kind === 'slide'
+                ? OPEN_SOUNDS.drawer
+                : OPEN_SOUNDS.panel, () => {
+            useInteractive.getState().toggleProceduralPart(nodeId, part.id);
+            if (part.kind !== 'spin')
+                return proceduralSettled(nodeId);
+        }, part.label);
+    });
+    if (recipe.parts.some((part) => part.light))
+        actions.push(calloutToggle('lights', 'light', procedural?.lightsOn ?? state.lampDefault, name, OPEN_SOUNDS.switch, () => useInteractive.getState().toggleProceduralLights(nodeId)));
+    return actions;
+}
+/** A built-in door's or window's leaf, then its parts (a window's shutters). */
+function mechanismActions(node, name, state) {
+    const actions = [];
+    const mechanism = nodeMechanism(node);
+    if (mechanism?.icon)
+        actions.push(calloutToggle('mechanism', mechanism.icon, mechanism.isOn(node, state), name, openingSound(node), () => {
+            toggleMechanism(mechanism, node);
+            // Built-in leaves and sashes report when they land; a scripted one plays a clip.
+            if (!node.source)
+                return openingSettled(node);
+        }));
+    for (const part of nodeMechanismParts(node)) {
+        const on = part.isOn(node, state);
+        actions.push(calloutToggle(part.id, part.icon === 'shutters' ? 'shutters' : 'power', on, name, part.icon === 'shutters' ? OPEN_SOUNDS.shutters : OPEN_SOUNDS.switch, () => {
+            toggleMechanismPart(part, node);
+            if (part.icon === 'shutters')
+                return openingSettled(node, 'shutters');
+        }, part.icon === 'shutters' ? SHUTTERS : part.label));
+    }
+    return actions;
+}
+/** Everything a live scene node can do, for the parametric viewer's callout. */
+export function nodeCalloutActions(node, name, state) {
+    const setValue = (index, value) => useInteractive.getState().setControlValue(node.id, index, value);
+    if (isScriptedNode(node)) {
+        const interactive = scriptedInteractive(node);
+        return interactive
+            ? interactiveActions(name, interactive, state.items[node.id]?.controlValues, setValue, node)
+            : [];
+    }
+    if (node.type === 'item' && node.asset.interactive)
+        return interactiveActions(name, node.asset.interactive, state.items[node.id]?.controlValues, setValue);
+    if (node.type === 'procedural-item')
+        return proceduralActions(node.id, name, node.recipe, state);
+    return mechanismActions(node, name, state);
+}

package/dist/systems/interactive/interactive-system.d.ts

@@ -1,2 +1,6 @@
-export declare const InteractiveSystem: () => import("react").JSX.Element;
+/**
+ * The parametric viewer's callout on the one selected element: its name, what
+ * it is, and what it can do (open a door, switch a lamp, close the shutters).
+ */
+export declare const InteractiveSystem: () => import("react").JSX.Element | null;
 //# sourceMappingURL=interactive-system.d.ts.map

package/dist/systems/interactive/interactive-system.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactive-system.d.ts","sourceRoot":"","sources":["../../../src/systems/interactive/interactive-system.tsx"],"names":[],"mappings":"AAwCA,eAAO,MAAM,iBAAiB,mCAoC7B,CAAA"}
+{"version":3,"file":"interactive-system.d.ts","sourceRoot":"","sources":["../../../src/systems/interactive/interactive-system.tsx"],"names":[],"mappings":"AAwBA;;;GAGG;AACH,eAAO,MAAM,iBAAiB,0CAU7B,CAAA"}

package/dist/systems/interactive/interactive-system.js

@@ -1,129 +1,52 @@
 'use client';
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { isScriptedNode, pointInPolygon, sceneRegistry, scriptedOrigin, scriptedSize, scriptInteractive, useInteractive, useScene, } from '@pascal-app/core';
-import { evaluateRecipe, operableParts, } from '@pascal-app/core/procedural-items';
-import { Html } from '@react-three/drei';
-import { createPortal, useFrame } from '@react-three/fiber';
-import { useEffect, useMemo, useState } from 'react';
-import { Vector3 } from 'three';
-import { useShallow } from 'zustand/react/shallow';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { sceneRegistry, useInteractive, useScene, } from '@pascal-app/core';
+import { useFrame } from '@react-three/fiber';
+import { useCallback, useState } from 'react';
+import { SelectionCallout } from '../../components/viewer/selection-callout';
 import useViewer from '../../store/use-viewer';
-import { ControlWidget } from './control-widget';
-import { proceduralControlDescriptors } from './procedural-controls';
-const _tempVec = new Vector3();
-// ---- Parent: overlays for selected interactive items and the selected zone ----
-//
-// Mounting <Html> overlays unconditionally is not an option: each drei <Html>
-// repositions and re-sorts its DOM element on every camera-move frame, and
-// with `occlude` it also raycasts the entire scene per overlay per frame. On
-// large scenes (hundreds of interactive items) that starves the frame budget
-// and the display/z-index churn makes the whole DOM UI flicker.
-//
+import { calloutSubtitle, hasCallout, nodeCalloutActions } from './callout-actions';
+function calloutTitle(node) {
+    if (node.name)
+        return node.name;
+    const asset = node.asset;
+    if (asset?.name)
+        return asset.name;
+    const word = node.type.replaceAll('-', ' ');
+    return word.charAt(0).toUpperCase() + word.slice(1);
+}
+/**
+ * The parametric viewer's callout on the one selected element: its name, what
+ * it is, and what it can do (open a door, switch a lamp, close the shutters).
+ */
 export const InteractiveSystem = () => {
-    const zoneId = useViewer((s) => s.selection.zoneId);
     const selectedIds = useViewer((s) => s.selection.selectedIds);
-    const zonePolygon = useScene((s) => {
-        if (!zoneId)
-            return null;
-        const z = s.nodes[zoneId];
-        return z?.polygon ?? null;
-    });
-    const interactiveNodeIds = useScene(useShallow((state) => Object.values(state.nodes)
-        .filter((n) => (isScriptedNode(n) && scriptInteractive(n.source.manifest) != null) ||
-        (n.type === 'item' && n.asset.interactive != null) ||
-        (n.type === 'procedural-item' &&
-            (operableParts(n.recipe).length > 0 || n.recipe.parts.some((part) => part.light))))
-        .map((n) => n.id)));
-    return (_jsx(_Fragment, { children: interactiveNodeIds
-            .filter((id) => zonePolygon?.length || selectedIds.includes(id))
-            .map((id) => (_jsx(ItemControlsOverlay, { isSelected: selectedIds.includes(id), nodeId: id, zonePolygon: zonePolygon }, id))) }));
+    const walkthrough = useViewer((s) => s.walkthroughMode);
+    const node = useScene((s) => selectedIds.length === 1
+        ? s.nodes[selectedIds[0]]
+        : undefined);
+    if (walkthrough || !node || !hasCallout(node.type))
+        return null;
+    return _jsx(NodeCallout, { node: node }, node.id);
 };
-// ---- Child: polls sceneRegistry then portals controls into the item group ----
-const FADE_MS = 300;
-const ItemControlsOverlay = ({ nodeId, zonePolygon, isSelected, }) => {
-    const node = useScene((state) => state.nodes[nodeId]);
-    const [itemObj, setItemObj] = useState(null);
+function NodeCallout({ node }) {
+    const [object, setObject] = useState(null);
+    // The renderer registers the object a frame or more after selection lands,
+    // and may swap it for a new one when the element rebuilds (a sash opening).
     useFrame(() => {
-        if (itemObj)
-            return;
-        const obj = sceneRegistry.nodes.get(nodeId);
-        if (obj)
-            setItemObj(obj);
+        const registered = sceneRegistry.nodes.get(node.id) ?? null;
+        if (registered !== object)
+            setObject(registered);
     });
-    const controlValues = useInteractive(useShallow((state) => state.items[nodeId]?.controlValues));
-    const proceduralState = useInteractive((state) => state.procedural[nodeId]);
-    const lampDefault = useInteractive((state) => state.lampDefault);
-    const setControlValue = useInteractive((state) => state.setControlValue);
-    const togglePart = useInteractive((state) => state.toggleProceduralPart);
-    const toggleLights = useInteractive((state) => state.toggleProceduralLights);
-    const proceduralHeight = useMemo(() => node?.type === 'procedural-item' ? evaluateRecipe(node.recipe, node.parameters).max[1] : 0, [
-        node?.type === 'procedural-item' ? node.recipe : null,
-        node?.type === 'procedural-item' ? node.parameters : null,
-    ]);
-    let descriptors = [];
-    let height = 0;
-    const interactive = isScriptedNode(node)
-        ? scriptInteractive(node.source.manifest, scriptedOrigin(node))
-        : node?.type === 'item'
-            ? node.asset.interactive
-            : undefined;
-    if (interactive && controlValues) {
-        descriptors = interactive.controls.map((control, i) => ({
-            key: String(i),
-            control,
-            value: controlValues[i] ?? false,
-            onChange: (value) => setControlValue(nodeId, i, value),
-        }));
-        height = isScriptedNode(node)
-            ? scriptedSize(node.source.manifest)[1] + scriptedOrigin(node)[1]
-            : node?.type === 'item'
-                ? node.asset.dimensions[1]
-                : 0;
-    }
-    else if (node?.type === 'procedural-item') {
-        descriptors = proceduralControlDescriptors(node.recipe, proceduralState, (partId) => togglePart(nodeId, partId), () => toggleLights(nodeId), lampDefault);
-        height = proceduralHeight;
-    }
-    let visible = isSelected;
-    if (itemObj && zonePolygon?.length) {
-        itemObj.getWorldPosition(_tempVec);
-        visible = visible || pointInPolygon(_tempVec.x, _tempVec.z, zonePolygon);
-    }
-    // Fade in on mount and fade out before unmounting the <Html>.
-    const [mounted, setMounted] = useState(false);
-    const [shown, setShown] = useState(false);
-    useEffect(() => {
-        if (visible) {
-            setMounted(true);
-            // Double rAF: the overlay has to paint once at opacity 0 before the
-            // opacity-1 style lands, otherwise the fade-in transition is skipped.
-            let raf2 = 0;
-            const raf1 = requestAnimationFrame(() => {
-                raf2 = requestAnimationFrame(() => setShown(true));
-            });
-            return () => {
-                cancelAnimationFrame(raf1);
-                cancelAnimationFrame(raf2);
-            };
-        }
-        setShown(false);
-        const timeout = setTimeout(() => setMounted(false), FADE_MS);
-        return () => clearTimeout(timeout);
-    }, [visible]);
-    if (!(mounted && itemObj && descriptors.length))
+    const title = calloutTitle(node);
+    const interactive = useInteractive();
+    const actions = nodeCalloutActions(node, title, interactive);
+    const dismiss = useCallback(() => {
+        const { selection, setSelection } = useViewer.getState();
+        if (selection.selectedIds.includes(node.id))
+            setSelection({ selectedIds: [] });
+    }, [node.id]);
+    if (!object)
         return null;
-    return createPortal(_jsx(Html, { center: true, distanceFactor: 8, eps: -1, position: [0, height + 0.3, 0], zIndexRange: [20, 0], children: _jsx("div", { style: {
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 6,
-                background: 'rgba(0,0,0,0.75)',
-                backdropFilter: 'blur(8px)',
-                borderRadius: 8,
-                padding: '8px 12px',
-                minWidth: 120,
-                pointerEvents: visible ? 'auto' : 'none',
-                userSelect: 'none',
-                opacity: shown ? 1 : 0,
-                transition: `opacity ${FADE_MS}ms ease`,
-            }, children: descriptors.map((descriptor) => (_jsx(ControlWidget, { control: descriptor.control, onChange: descriptor.onChange, value: descriptor.value }, descriptor.key))) }) }), itemObj);
-};
+    return (_jsx(SelectionCallout, { actions: actions, object: object, onDismiss: dismiss, subtitle: calloutSubtitle(node, title), title: title }));
+}

package/dist/systems/interactive/opening-settled.d.ts

@@ -0,0 +1,16 @@
+import { type AnyNodeId } from '@pascal-app/core';
+/**
+ * Resolves when a built-in door's leaf or a window's sash (or, with `shutters`,
+ * its shutters) finishes the run just started, so the latch can sound on the
+ * frame the leaf lands.
+ */
+export declare function openingSettled(node: {
+    id: string;
+    type: string;
+}, part?: 'leaf' | 'shutters'): Promise<void>;
+/**
+ * Resolves when a procedural item's latest commanded run (a cabinet door, a
+ * drawer, a lid) has its moving parts at rest. Call it right after the toggle.
+ */
+export declare function proceduralSettled(nodeId: AnyNodeId): Promise<void>;
+//# sourceMappingURL=opening-settled.d.ts.map