@pascal-app/nodes 1.0.0-beta.5 → 1.0.1

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

@@ -8,9 +8,9 @@ export declare const zoneMoveVertexAffordance: import("@pascal-app/core").Floorp
     polygon: [number, number][];
     autoFromWalls: boolean;
     boundaryWallIds: `wall_${string}`[];
-    spaceRole: "generic" | "room";
+    spaceRole: "room" | "generic";
     roomNumber: string;
-    enclosureStatus: "auto" | "enclosed" | "open";
+    enclosureStatus: "auto" | "open" | "enclosed";
     floorFinish: string;
     wallFinish: string;
     ceilingFinish: string;
@@ -18,7 +18,7 @@ export declare const zoneMoveVertexAffordance: import("@pascal-app/core").Floorp
     occupancy: string;
     clearDimensionPolicy: "none" | "inside-faces" | "finish-faces";
     color: string;
-    metadata: import("zod").JSONType;
+    metadata: Record<string, unknown>;
     camera?: {
         position: [number, number, number];
         target: [number, number, number];
@@ -37,9 +37,9 @@ export declare const zoneAddVertexAffordance: import("@pascal-app/core").Floorpl
     polygon: [number, number][];
     autoFromWalls: boolean;
     boundaryWallIds: `wall_${string}`[];
-    spaceRole: "generic" | "room";
+    spaceRole: "room" | "generic";
     roomNumber: string;
-    enclosureStatus: "auto" | "enclosed" | "open";
+    enclosureStatus: "auto" | "open" | "enclosed";
     floorFinish: string;
     wallFinish: string;
     ceilingFinish: string;
@@ -47,7 +47,7 @@ export declare const zoneAddVertexAffordance: import("@pascal-app/core").Floorpl
     occupancy: string;
     clearDimensionPolicy: "none" | "inside-faces" | "finish-faces";
     color: string;
-    metadata: import("zod").JSONType;
+    metadata: Record<string, unknown>;
     camera?: {
         position: [number, number, number];
         target: [number, number, number];
@@ -66,9 +66,9 @@ export declare const zoneMoveEdgeAffordance: import("@pascal-app/core").Floorpla
     polygon: [number, number][];
     autoFromWalls: boolean;
     boundaryWallIds: `wall_${string}`[];
-    spaceRole: "generic" | "room";
+    spaceRole: "room" | "generic";
     roomNumber: string;
-    enclosureStatus: "auto" | "enclosed" | "open";
+    enclosureStatus: "auto" | "open" | "enclosed";
     floorFinish: string;
     wallFinish: string;
     ceilingFinish: string;
@@ -76,7 +76,7 @@ export declare const zoneMoveEdgeAffordance: import("@pascal-app/core").Floorpla
     occupancy: string;
     clearDimensionPolicy: "none" | "inside-faces" | "finish-faces";
     color: string;
-    metadata: import("zod").JSONType;
+    metadata: Record<string, unknown>;
     camera?: {
         position: [number, number, number];
         target: [number, number, number];
@@ -95,9 +95,9 @@ export declare const zoneDeleteVertexAffordance: import("@pascal-app/core").Floo
     polygon: [number, number][];
     autoFromWalls: boolean;
     boundaryWallIds: `wall_${string}`[];
-    spaceRole: "generic" | "room";
+    spaceRole: "room" | "generic";
     roomNumber: string;
-    enclosureStatus: "auto" | "enclosed" | "open";
+    enclosureStatus: "auto" | "open" | "enclosed";
     floorFinish: string;
     wallFinish: string;
     ceilingFinish: string;
@@ -105,7 +105,7 @@ export declare const zoneDeleteVertexAffordance: import("@pascal-app/core").Floo
     occupancy: string;
     clearDimensionPolicy: "none" | "inside-faces" | "finish-faces";
     color: string;
-    metadata: import("zod").JSONType;
+    metadata: Record<string, unknown>;
     camera?: {
         position: [number, number, number];
         target: [number, number, number];

package/dist/zone/floorplan.d.ts

@@ -1,8 +1,6 @@
 import { type FloorplanGeometry, type GeometryContext, type ZoneNode } from '@pascal-app/core';
 /**
- * Stage C floor-plan builder for zone. Zones are colored polygons —
- * fill + outline both come from `zone.color`. Selection adds an
- * accent-colored outline.
+ * Stage C floor-plan builder for zone. Zones are colored polygons.
  *
  * The zone's `name` renders as a centered text label at the polygon's
  * geometric centroid. The registry layer sorts zones before every

package/dist/zone/floorplan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"floorplan.d.ts","sourceRoot":"","sources":["../../src/zone/floorplan.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,iBAAiB,EAEtB,KAAK,eAAe,EAEpB,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAA;AAQzB;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,eAAe,GAAG,iBAAiB,GAAG,IAAI,CAqHjG"}
+{"version":3,"file":"floorplan.d.ts","sourceRoot":"","sources":["../../src/zone/floorplan.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,iBAAiB,EAEtB,KAAK,eAAe,EAEpB,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAA;AASzB;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,eAAe,GAAG,iBAAiB,GAAG,IAAI,CAmIjG"}

package/dist/zone/floorplan.js

@@ -2,10 +2,9 @@ import { resolveAutoZonePolygon, } from '@pascal-app/core';
 import { floorplanGeometryMetadata, readFloorplanContext } from '@pascal-app/editor';
 import { formatConstructionLength, } from '../shared/construction-length';
 import { buildRoomClearDimensions } from './room-clear-dimensions';
+import { owningUnitForZone } from './unit-membership';
 /**
- * Stage C floor-plan builder for zone. Zones are colored polygons —
- * fill + outline both come from `zone.color`. Selection adds an
- * accent-colored outline.
+ * Stage C floor-plan builder for zone. Zones are colored polygons.
  *
  * The zone's `name` renders as a centered text label at the polygon's
  * geometric centroid. The registry layer sorts zones before every
@@ -18,23 +17,25 @@ export function buildZoneFloorplan(node, ctx) {
         return null;
     const view = ctx.viewState;
     const floorplanContext = readFloorplanContext(ctx);
-    const palette = view?.palette;
     const isSelected = view?.selected ?? false;
     const isHighlighted = view?.highlighted ?? false;
     const showSelectedChrome = isSelected || isHighlighted;
     const points = ring.map(([x, z]) => [x, z]);
-    const stroke = showSelectedChrome && palette ? palette.selectedStroke : node.color;
+    const unit = owningUnitForZone(node, ctx.resolve);
+    const tintColor = unit?.color ?? node.color;
+    const stroke = node.color;
+    const focusOpacity = view?.focusedUnitId && !view.focusedUnitMemberIds?.includes(node.id) ? 0.35 : 1;
     const isRoom = node.spaceRole === 'room';
     const fillOpacity = isRoom ? (isSelected ? 0.12 : 0.04) : isSelected ? 0.28 : 0.16;
     const children = [
         {
             kind: 'polygon',
             points,
-            fill: node.color,
-            fillOpacity,
+            fill: tintColor,
+            fillOpacity: fillOpacity * focusOpacity,
             stroke,
             strokeWidth: showSelectedChrome ? 0.08 : 0.05,
-            strokeOpacity: showSelectedChrome ? 0.96 : 0.72,
+            strokeOpacity: (showSelectedChrome ? 0.96 : 0.72) * focusOpacity,
             strokeLinejoin: 'round',
             vectorEffect: 'non-scaling-stroke',
         },
@@ -88,44 +89,58 @@ export function buildZoneFloorplan(node, ctx) {
     const [cx, cy] = polygonCentroid(ring);
     const name = node.name?.trim();
     if (isRoom) {
-        children.push(...buildRoomLabels(node, cx, cy, view?.unit ?? 'metric', floorplanContext.purpose === 'document' ? 'document' : 'editor', floorplanContext.metricNotation, stroke));
+        children.push(...buildRoomLabels(node, cx, cy, view?.unit ?? 'metric', floorplanContext.purpose === 'document' ? 'document' : 'editor', floorplanContext.metricNotation, stroke, unit?.name));
         if (floorplanContext.automaticDimensions) {
             children.push(...buildRoomClearDimensions(node, ctx));
         }
     }
     else if (name) {
-        children.push({
-            kind: 'text',
-            x: cx,
-            y: cy,
-            text: name,
-            // Same constants the legacy `FLOORPLAN_ZONE_LABEL_FONT_SIZE` uses
-            // (0.2 plan metres ≈ readable at typical building zooms).
-            fontSize: ZONE_LABEL_FONT_SIZE,
-            fill: '#ffffff',
-            stroke: node.color,
-            strokeWidth: ZONE_LABEL_FONT_SIZE * 0.35,
-            paintOrder: 'stroke',
-            fontFamily: 'system-ui, -apple-system, sans-serif',
-            fontWeight: 500,
-            textAnchor: 'middle',
-            dominantBaseline: 'central',
-            opacity: showSelectedChrome ? 1 : 0.92,
-            upright: true,
+        const unitName = unit?.name.trim();
+        const lines = unitName
+            ? [
+                { text: name, fontSize: ZONE_LABEL_FONT_SIZE, fontWeight: 500 },
+                { text: unitName, fontSize: ZONE_UNIT_LABEL_FONT_SIZE, fontWeight: 600 },
+            ]
+            : [{ text: name, fontSize: ZONE_LABEL_FONT_SIZE, fontWeight: 500 }];
+        const startY = cy - ((lines.length - 1) * ROOM_LABEL_LINE_SPACING) / 2;
+        lines.forEach((line, index) => {
+            children.push({
+                kind: 'text',
+                x: cx,
+                y: startY + index * ROOM_LABEL_LINE_SPACING,
+                text: line.text,
+                // Same constants the legacy `FLOORPLAN_ZONE_LABEL_FONT_SIZE` uses
+                // (0.2 plan metres ≈ readable at typical building zooms).
+                fontSize: line.fontSize,
+                fill: '#ffffff',
+                stroke: node.color,
+                strokeWidth: line.fontSize * 0.35,
+                paintOrder: 'stroke',
+                fontFamily: 'system-ui, -apple-system, sans-serif',
+                fontWeight: line.fontWeight,
+                textAnchor: 'middle',
+                dominantBaseline: 'central',
+                opacity: showSelectedChrome ? 1 : 0.92,
+                upright: true,
+            });
         });
     }
     return { kind: 'group', children };
 }
 const ZONE_LABEL_FONT_SIZE = 0.2;
+const ZONE_UNIT_LABEL_FONT_SIZE = 0.13;
 const ROOM_NAME_FONT_SIZE = 0.2;
 const ROOM_NUMBER_FONT_SIZE = 0.16;
 const ROOM_DETAIL_FONT_SIZE = 0.11;
 const ROOM_LABEL_LINE_SPACING = 0.18;
-function buildRoomLabels(node, x, y, unit, profile, metricNotation, color) {
+function buildRoomLabels(node, x, y, unit, profile, metricNotation, color, unitName) {
     const lines = [];
     const name = node.name.trim();
     if (name)
         lines.push({ text: name, fontSize: ROOM_NAME_FONT_SIZE, fontWeight: 700 });
+    if (unitName?.trim()) {
+        lines.push({ text: unitName.trim(), fontSize: ROOM_NUMBER_FONT_SIZE, fontWeight: 600 });
+    }
     if (node.roomNumber) {
         lines.push({ text: node.roomNumber, fontSize: ROOM_NUMBER_FONT_SIZE, fontWeight: 600 });
     }

package/dist/zone/quantities-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quantities-panel.d.ts","sourceRoot":"","sources":["../../src/zone/quantities-panel.tsx"],"names":[],"mappings":"AA8TA,MAAM,CAAC,OAAO,UAAU,mBAAmB,uCA6F1C"}
+{"version":3,"file":"quantities-panel.d.ts","sourceRoot":"","sources":["../../src/zone/quantities-panel.tsx"],"names":[],"mappings":"AA8RA,MAAM,CAAC,OAAO,UAAU,mBAAmB,uCA8F1C"}

package/dist/zone/quantities-panel.js

@@ -3,8 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { deriveZoneQuantityReport, resolveAutoZonePolygon, useLiveNodeOverrides, useScene, } from '@pascal-app/core';
 import { formatAreaLabel, formatLinearMeasurement, formatVolumeLabel, MetricControl, PanelSection, ToggleControl, } from '@pascal-app/editor';
 import { useViewer } from '@pascal-app/viewer';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo } from 'react';
 import { useShallow } from 'zustand/react/shallow';
+import { PanelSelect, PanelTextField } from '../shared/panel-fields';
+import { buildingUnitsForZone } from './unit-membership';
 function ZonePlanSketch({ edgeLengths, metricNotation, polygon, unit, }) {
     if (polygon.length < 3) {
         return (_jsx("div", { className: "flex h-28 items-center justify-center rounded-md border border-border/50 text-muted-foreground text-xs", children: "Zone boundary unavailable" }));
@@ -44,43 +46,45 @@ function ZonePlanSketch({ edgeLengths, metricNotation, polygon, unit, }) {
 function QuantityRow({ abbreviation, format, label, quantity, }) {
     return (_jsxs("div", { className: "rounded-md border border-border/50 bg-background/35 px-2.5 py-2", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "font-mono font-semibold text-cyan-600 text-[10px]", children: abbreviation }), _jsx("span", { className: "text-muted-foreground text-xs", children: label }), _jsx("span", { className: "ml-auto font-mono font-medium text-foreground text-xs tabular-nums", children: quantity.status === 'available' ? format(quantity.value) : 'Not proven' })] }), _jsx("div", { className: "mt-1 text-[10px] text-muted-foreground leading-snug", children: quantity.status === 'available' ? quantity.note : quantity.reason })] }));
 }
-function RoomTextField({ label, onCommit, value, }) {
-    const [draft, setDraft] = useState(value);
-    const cancelRef = useRef(false);
-    useEffect(() => setDraft(value), [value]);
-    const commit = () => {
-        if (cancelRef.current) {
-            cancelRef.current = false;
-            setDraft(value);
-            return;
+function ZoneUnitPanel({ zone }) {
+    const units = useScene(useShallow((state) => buildingUnitsForZone(zone, (id) => state.nodes[id])));
+    if (units.length === 0)
+        return null;
+    const current = units.find((unit) => unit.members.includes(zone.id));
+    const handleChange = (nextId) => {
+        const { nodes, updateNodes } = useScene.getState();
+        const updates = [];
+        for (const unit of Object.values(nodes)) {
+            if (unit.type !== 'unit')
+                continue;
+            const isMember = unit.members.includes(zone.id);
+            if (unit.id === nextId && !isMember) {
+                updates.push({ id: unit.id, data: { members: [...unit.members, zone.id] } });
+            }
+            else if (unit.id !== nextId && isMember) {
+                updates.push({
+                    id: unit.id,
+                    data: { members: unit.members.filter((id) => id !== zone.id) },
+                });
+            }
         }
-        const next = draft.trim();
-        if (next !== value)
-            onCommit(next);
-        else
-            setDraft(value);
+        if (updates.length > 0)
+            updateNodes(updates);
     };
-    return (_jsxs("label", { className: "flex h-10 items-center gap-3 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm", children: [_jsx("span", { className: "shrink-0 text-muted-foreground", children: label }), _jsx("input", { className: "min-w-0 flex-1 bg-transparent text-right text-foreground outline-none selection:bg-primary/30", onBlur: commit, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
-                    if (event.key === 'Enter')
-                        event.currentTarget.blur();
-                    if (event.key === 'Escape') {
-                        cancelRef.current = true;
-                        event.currentTarget.blur();
-                    }
-                }, type: "text", value: draft })] }));
-}
-function RoomSelect({ label, onChange, options, value, }) {
-    return (_jsxs("label", { className: "flex h-10 items-center justify-between gap-3 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("select", { className: "min-w-0 rounded-md border border-border/50 bg-[#232325] px-2 py-1 text-foreground text-xs outline-none", onChange: (event) => onChange(event.target.value), value: value, children: options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })] }));
+    return (_jsx(PanelSection, { title: "Unit", children: _jsx(PanelSelect, { label: "Unit", onChange: handleChange, options: [
+                { label: 'None', value: '' },
+                ...units.map((unit) => ({ label: unit.name || 'Unit', value: unit.id })),
+            ], value: current?.id ?? '' }) }));
 }
 function RoomDocumentationPanel({ zone }) {
     const updateNode = useScene((state) => state.updateNode);
     const update = (patch) => updateNode(zone.id, patch);
     const isRoom = zone.spaceRole === 'room';
-    return (_jsxs(PanelSection, { title: "Room documentation", children: [_jsx(ToggleControl, { checked: isRoom, label: "Architectural room", onChange: (checked) => update({ spaceRole: checked ? 'room' : 'generic' }) }), isRoom ? (_jsxs(_Fragment, { children: [_jsx(RoomTextField, { label: "Room name", onCommit: (name) => update({ name }), value: zone.name }), _jsx(RoomTextField, { label: "Room number", onCommit: (roomNumber) => update({ roomNumber }), value: zone.roomNumber }), _jsx(RoomSelect, { label: "Enclosure", onChange: (enclosureStatus) => update({ enclosureStatus: enclosureStatus }), options: [
+    return (_jsxs(PanelSection, { title: "Room documentation", children: [_jsx(ToggleControl, { checked: isRoom, label: "Architectural room", onChange: (checked) => update({ spaceRole: checked ? 'room' : 'generic' }) }), isRoom ? (_jsxs(_Fragment, { children: [_jsx(PanelTextField, { label: "Room name", onCommit: (name) => update({ name }), value: zone.name }), _jsx(PanelTextField, { label: "Room number", onCommit: (roomNumber) => update({ roomNumber }), value: zone.roomNumber }), _jsx(PanelSelect, { label: "Enclosure", onChange: (enclosureStatus) => update({ enclosureStatus: enclosureStatus }), options: [
                             { label: 'Auto-detect', value: 'auto' },
                             { label: 'Enclosed', value: 'enclosed' },
                             { label: 'Open', value: 'open' },
-                        ], value: zone.enclosureStatus }), _jsx(RoomTextField, { label: "Occupancy / use", onCommit: (occupancy) => update({ occupancy }), value: zone.occupancy }), _jsx(RoomTextField, { label: "Floor finish", onCommit: (floorFinish) => update({ floorFinish }), value: zone.floorFinish }), _jsx(RoomTextField, { label: "Wall finish", onCommit: (wallFinish) => update({ wallFinish }), value: zone.wallFinish }), _jsx(RoomTextField, { label: "Ceiling finish", onCommit: (ceilingFinish) => update({ ceilingFinish }), value: zone.ceilingFinish }), _jsx(MetricControl, { label: "Ceiling height", max: 20, min: 0.1, onChange: (ceilingHeight) => update({ ceilingHeight }), precision: 2, step: 0.05, unit: "m", value: zone.ceilingHeight }), _jsx(RoomSelect, { label: "Clear dimensions", onChange: (clearDimensionPolicy) => update({
+                        ], value: zone.enclosureStatus }), _jsx(PanelTextField, { label: "Occupancy / use", onCommit: (occupancy) => update({ occupancy }), value: zone.occupancy }), _jsx(PanelTextField, { label: "Floor finish", onCommit: (floorFinish) => update({ floorFinish }), value: zone.floorFinish }), _jsx(PanelTextField, { label: "Wall finish", onCommit: (wallFinish) => update({ wallFinish }), value: zone.wallFinish }), _jsx(PanelTextField, { label: "Ceiling finish", onCommit: (ceilingFinish) => update({ ceilingFinish }), value: zone.ceilingFinish }), _jsx(MetricControl, { label: "Ceiling height", max: 20, min: 0.1, onChange: (ceilingHeight) => update({ ceilingHeight }), precision: 2, step: 0.05, unit: "m", value: zone.ceilingHeight }), _jsx(PanelSelect, { label: "Clear dimensions", onChange: (clearDimensionPolicy) => update({
                             clearDimensionPolicy: clearDimensionPolicy,
                         }), options: [
                             { label: 'None', value: 'none' },
@@ -124,5 +128,5 @@ export default function ZoneQuantitiesPanel() {
     const report = useMemo(() => (effectiveZone ? deriveZoneQuantityReport(effectiveZone, effectiveNodes) : null), [effectiveNodes, effectiveZone]);
     if (!effectiveZone || !report)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(RoomDocumentationPanel, { zone: effectiveZone }), _jsxs(PanelSection, { title: effectiveZone.spaceRole === 'room' ? 'Room quantities' : 'Zone quantities', children: [_jsxs("div", { className: "overflow-hidden rounded-md border border-cyan-950/20 bg-[#f8faf7] text-slate-950", children: [_jsxs("div", { className: "flex items-center border-cyan-950/15 border-b px-2.5 py-2", children: [_jsx("span", { className: "font-semibold text-[11px]", children: effectiveZone.name }), _jsx("span", { className: "ml-auto rounded-full border border-cyan-800/25 bg-cyan-50 px-2 py-0.5 text-cyan-900 text-[9px]", children: report.classification === 'enclosed-room' ? 'Enclosed room' : 'Footprint only' })] }), _jsxs("div", { className: "flex items-baseline gap-2 px-2.5 py-2 font-mono text-[10px]", children: [_jsx("span", { className: "text-cyan-800", children: "A" }), _jsx("span", { children: formatAreaLabel(report.footprintArea, unit, 2) }), _jsx("span", { className: "ml-auto text-slate-600", children: "P" }), _jsx("span", { children: formatLinearMeasurement(report.perimeter, unit, metricNotation) })] })] }), _jsx(ZonePlanSketch, { edgeLengths: report.edgeLengths, metricNotation: metricNotation, polygon: effectiveZone.polygon, unit: unit }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(QuantityRow, { abbreviation: "Aw", format: (value) => formatAreaLabel(value, unit, 2), label: "Wall surface", quantity: report.wallSurface }), _jsx(QuantityRow, { abbreviation: "Af", format: (value) => formatAreaLabel(value, unit, 2), label: "Floor surface", quantity: report.floorSurface }), _jsx(QuantityRow, { abbreviation: "V", format: (value) => formatVolumeLabel(value, unit, 2), label: "Volume", quantity: report.volume })] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ZoneUnitPanel, { zone: effectiveZone }), _jsx(RoomDocumentationPanel, { zone: effectiveZone }), _jsxs(PanelSection, { title: effectiveZone.spaceRole === 'room' ? 'Room quantities' : 'Zone quantities', children: [_jsxs("div", { className: "overflow-hidden rounded-md border border-cyan-950/20 bg-[#f8faf7] text-slate-950", children: [_jsxs("div", { className: "flex items-center border-cyan-950/15 border-b px-2.5 py-2", children: [_jsx("span", { className: "font-semibold text-[11px]", children: effectiveZone.name }), _jsx("span", { className: "ml-auto rounded-full border border-cyan-800/25 bg-cyan-50 px-2 py-0.5 text-cyan-900 text-[9px]", children: report.classification === 'enclosed-room' ? 'Enclosed room' : 'Footprint only' })] }), _jsxs("div", { className: "flex items-baseline gap-2 px-2.5 py-2 font-mono text-[10px]", children: [_jsx("span", { className: "text-cyan-800", children: "A" }), _jsx("span", { children: formatAreaLabel(report.footprintArea, unit, 2) }), _jsx("span", { className: "ml-auto text-slate-600", children: "P" }), _jsx("span", { children: formatLinearMeasurement(report.perimeter, unit, metricNotation) })] })] }), _jsx(ZonePlanSketch, { edgeLengths: report.edgeLengths, metricNotation: metricNotation, polygon: effectiveZone.polygon, unit: unit }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(QuantityRow, { abbreviation: "Aw", format: (value) => formatAreaLabel(value, unit, 2), label: "Wall surface", quantity: report.wallSurface }), _jsx(QuantityRow, { abbreviation: "Af", format: (value) => formatAreaLabel(value, unit, 2), label: "Floor surface", quantity: report.floorSurface }), _jsx(QuantityRow, { abbreviation: "V", format: (value) => formatVolumeLabel(value, unit, 2), label: "Volume", quantity: report.volume })] })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/zone/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAA;AAyGzB,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,uCA0LxD,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/zone/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAA;AA0GzB,eAAO,MAAM,YAAY,GAAI,UAAU;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,uCA+MxD,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/zone/renderer.js

@@ -8,6 +8,7 @@ import { BufferGeometry, Color, DoubleSide, Float32BufferAttribute, Shape } from
 import { color, float, uniform, uv } from 'three/tsl';
 import { MeshBasicNodeMaterial } from 'three/webgpu';
 import { useShallow } from 'zustand/react/shallow';
+import { owningUnitForZone } from './unit-membership';
 const Y_OFFSET = 0.01;
 const WALL_HEIGHT = 2.3;
 /**
@@ -113,6 +114,10 @@ export const ZoneRenderer = ({ node }) => {
         return override ? { ...dependency, ...override } : dependency;
     }), [dependencyIds, dependencyNodes, dependencyOverrides, node]);
     const polygon = livePolygon ?? proceduralPolygon;
+    // The selector returns the unit node itself, so only edits to that unit
+    // or its membership re-render this zone.
+    const unit = useScene((s) => owningUnitForZone(node, (id) => s.nodes[id]));
+    const tintColor = unit?.color ?? node.color;
     // Create floor shape from polygon
     const floorShape = useMemo(() => {
         if (!polygon || polygon.length < 3)
@@ -158,15 +163,15 @@ export const ZoneRenderer = ({ node }) => {
     }, [polygon]);
     // Create materials
     const floorMaterial = useMemo(() => {
-        if (!node?.color)
+        if (!tintColor)
             return null;
-        return createFloorMaterial(node.color);
-    }, [node?.color]);
+        return createFloorMaterial(tintColor);
+    }, [tintColor]);
     const wallMaterial = useMemo(() => {
-        if (!node?.color)
+        if (!node.color)
             return null;
         return createWallGradientMaterial(node.color);
-    }, [node?.color]);
+    }, [node.color]);
     const handlers = useNodeEvents(node, 'zone');
     if (!(node && floorShape && wallGeometry && floorMaterial && wallMaterial)) {
         return null;
@@ -183,7 +188,16 @@ export const ZoneRenderer = ({ node }) => {
                                     color: 'white',
                                     textShadow: `-1px -1px 0 ${node.color}, 1px -1px 0 ${node.color}, -1px 1px 0 ${node.color}, 1px 1px 0 ${node.color}`,
                                     textAlign: 'center',
-                                }, children: _jsx("span", { children: node.name }) }), _jsxs("div", { className: "label-pin", style: {
+                                }, children: _jsx("span", { children: node.name }) }), unit && (_jsx("div", { style: {
+                                    marginTop: '2px',
+                                    padding: '1px 6px',
+                                    borderRadius: '999px',
+                                    backgroundColor: tintColor,
+                                    color: 'white',
+                                    fontSize: '10px',
+                                    lineHeight: '14px',
+                                    whiteSpace: 'nowrap',
+                                }, children: unit.name })), _jsxs("div", { className: "label-pin", style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     alignItems: 'center',

package/dist/zone/unit-membership.d.ts

@@ -0,0 +1,12 @@
+import type { AnyNode, AnyNodeId, UnitNode, ZoneNode } from '@pascal-app/core';
+type ResolveNode = (id: AnyNodeId) => AnyNode | undefined;
+/**
+ * Units under the building that owns this zone's level. Units are building
+ * children, so this walks that short list instead of scanning every node
+ * the way `unitsForZone` does — cheap enough for per-zone store selectors.
+ */
+export declare function buildingUnitsForZone(zone: Pick<ZoneNode, 'parentId'>, resolve: ResolveNode): UnitNode[];
+/** The unit whose colour and name a member zone wears: the first one listing it. */
+export declare function owningUnitForZone(zone: Pick<ZoneNode, 'id' | 'parentId'>, resolve: ResolveNode): UnitNode | null;
+export {};
+//# sourceMappingURL=unit-membership.d.ts.map

package/dist/zone/unit-membership.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit-membership.d.ts","sourceRoot":"","sources":["../../src/zone/unit-membership.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAE9E,KAAK,WAAW,GAAG,CAAC,EAAE,EAAE,SAAS,KAAK,OAAO,GAAG,SAAS,CAAA;AAEzD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,EAChC,OAAO,EAAE,WAAW,GACnB,QAAQ,EAAE,CAUZ;AAED,oFAAoF;AACpF,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,UAAU,CAAC,EACvC,OAAO,EAAE,WAAW,GACnB,QAAQ,GAAG,IAAI,CAEjB"}

package/dist/zone/unit-membership.js

@@ -0,0 +1,22 @@
+/**
+ * Units under the building that owns this zone's level. Units are building
+ * children, so this walks that short list instead of scanning every node
+ * the way `unitsForZone` does — cheap enough for per-zone store selectors.
+ */
+export function buildingUnitsForZone(zone, resolve) {
+    const level = zone.parentId ? resolve(zone.parentId) : undefined;
+    const building = level?.parentId ? resolve(level.parentId) : undefined;
+    if (building?.type !== 'building')
+        return [];
+    const units = [];
+    for (const childId of building.children) {
+        const child = resolve(childId);
+        if (child?.type === 'unit')
+            units.push(child);
+    }
+    return units;
+}
+/** The unit whose colour and name a member zone wears: the first one listing it. */
+export function owningUnitForZone(zone, resolve) {
+    return buildingUnitsForZone(zone, resolve).find((unit) => unit.members.includes(zone.id)) ?? null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/nodes",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.1",
   "description": "Built-in node bundles for the Pascal 3D editor — one folder per kind, exported as `builtinPlugin`",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,6 +10,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./procedural-item": {
+      "types": "./dist/procedural-item/index.d.ts",
+      "import": "./dist/procedural-item/index.js",
+      "default": "./dist/procedural-item/index.js"
     }
   },
   "files": [
@@ -23,24 +28,27 @@
     "prepublishOnly": "bun run build && bun test"
   },
   "peerDependencies": {
-    "@pascal-app/core": "^1.0.0-beta.5",
-    "@pascal-app/editor": "^1.0.0-beta.5",
-    "@pascal-app/viewer": "^1.0.0-beta.5",
+    "@pascal-app/core": "^1.0.1",
+    "@pascal-app/editor": "^1.0.1",
+    "@pascal-app/viewer": "^1.0.1",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "lucide-react": "^1",
     "react": "^18 || ^19",
-    "three": "^0.185",
+    "react-dom": "^18 || ^19",
+    "three": "^0.186",
     "zustand": "^5"
   },
   "devDependencies": {
-    "@pascal-app/core": "^1.0.0-beta.5",
-    "@pascal-app/editor": "^1.0.0-beta.5",
-    "@pascal-app/viewer": "^1.0.0-beta.5",
+    "@pascal-app/core": "^1.0.1",
+    "@pascal-app/editor": "^1.0.1",
+    "@pascal-app/viewer": "^1.0.1",
     "@pascal/typescript-config": "*",
+    "@react-three/test-renderer": "^9.1.0",
     "@types/bun": "^1.3.0",
     "@types/node": "^22.19.12",
     "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.3",
     "@types/three": "^0.184.0",
     "typescript": "6.0.3"
   },

package/dist/dormer/panel-window-section.d.ts

@@ -1,14 +0,0 @@
-import type { DormerNode } from '@pascal-app/core';
-/**
- * The Window tab of the dormer inspector: Hung Wall, Opening, Shape
- * (with rounded/arch sub-controls), Frame, Grid, Sill. Owns local UI
- * state for the "All vs Individual" corner-radius view mode — derived
- * from tuple uniformity by default.
- */
-export declare function DormerWindowSection({ node, previewProp, commitProp, handleUpdate, }: {
-    node: DormerNode;
-    previewProp: (updates: Partial<DormerNode>) => void;
-    commitProp: (updates: Partial<DormerNode>) => void;
-    handleUpdate: (updates: Partial<DormerNode>) => void;
-}): import("react").JSX.Element;
-//# sourceMappingURL=panel-window-section.d.ts.map

package/dist/dormer/panel-window-section.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"panel-window-section.d.ts","sourceRoot":"","sources":["../../src/dormer/panel-window-section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAWlD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,WAAW,EACX,UAAU,EACV,YAAY,GACb,EAAE;IACD,IAAI,EAAE,UAAU,CAAA;IAChB,WAAW,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IACnD,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;IAClD,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;CACrD,+BA6RA"}

package/dist/dormer/panel-window-section.js

@@ -1,59 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { PanelSection, SegmentedControl, SliderControl, ToggleControl } from '@pascal-app/editor';
-import { useState } from 'react';
-function maxSharedRadius(width, height) {
-    return Math.max(0, Math.min(width / 2, height / 2));
-}
-/**
- * The Window tab of the dormer inspector: Hung Wall, Opening, Shape
- * (with rounded/arch sub-controls), Frame, Grid, Sill. Owns local UI
- * state for the "All vs Individual" corner-radius view mode — derived
- * from tuple uniformity by default.
- */
-export function DormerWindowSection({ node, previewProp, commitProp, handleUpdate, }) {
-    const [radiusViewMode, setRadiusViewMode] = useState('all');
-    const windowShape = node.windowShape;
-    const windowCornerRadii = [...node.windowCornerRadii];
-    const windowArchHeight = node.windowArchHeight;
-    const maxRadius = Math.max(0.01, maxSharedRadius(node.windowWidth, node.windowHeight));
-    const tupleIsUniform = windowCornerRadii[0] === windowCornerRadii[1] &&
-        windowCornerRadii[1] === windowCornerRadii[2] &&
-        windowCornerRadii[2] === windowCornerRadii[3];
-    const sharedRadius = windowCornerRadii[0];
-    const setCornerRadius = (index, value, commit) => {
-        const next = [...windowCornerRadii];
-        next[index] = value;
-        if (commit)
-            commitProp({ windowCornerRadii: next });
-        else
-            previewProp({ windowCornerRadii: next });
-    };
-    const setAllCornerRadii = (value, commit) => {
-        const next = [value, value, value, value];
-        if (commit)
-            commitProp({ windowCornerRadii: next });
-        else
-            previewProp({ windowCornerRadii: next });
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(PanelSection, { title: "Hung Wall", children: _jsx(SliderControl, { label: "Height", max: 6, min: 0.2, onChange: (v) => previewProp({ wallSkirtHeight: v }), onCommit: (v) => commitProp({ wallSkirtHeight: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(node.wallSkirtHeight * 100) / 100 }) }), _jsxs(PanelSection, { title: "Opening", children: [_jsx(SliderControl, { label: "Width", max: Math.max(0.5, node.width - 0.1), min: 0.2, onChange: (v) => previewProp({ windowWidth: v }), onCommit: (v) => commitProp({ windowWidth: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(node.windowWidth * 100) / 100 }), _jsx(SliderControl, { label: "Height", max: Math.max(0.2, node.wallSkirtHeight - 0.1), min: 0.2, onChange: (v) => previewProp({ windowHeight: v }), onCommit: (v) => commitProp({ windowHeight: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(node.windowHeight * 100) / 100 }), _jsx(SliderControl, { label: "Offset X", max: 1, min: -1, onChange: (v) => previewProp({ windowOffsetX: v }), onCommit: (v) => commitProp({ windowOffsetX: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(node.windowOffsetX * 100) / 100 }), _jsx(SliderControl, { label: "Offset Y", max: 2, min: 0, onChange: (v) => previewProp({ windowOffsetY: v }), onCommit: (v) => commitProp({ windowOffsetY: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(node.windowOffsetY * 100) / 100 })] }), _jsxs(PanelSection, { title: "Shape", children: [_jsx(SegmentedControl, { onChange: (v) => handleUpdate({
-                            windowShape: v,
-                            ...(v === 'rounded'
-                                ? {
-                                    windowCornerRadii: windowCornerRadii.map((r) => Math.min(r, maxRadius)),
-                                }
-                                : {}),
-                        }), options: [
-                            { value: 'rectangle', label: 'Rect' },
-                            { value: 'rounded', label: 'Rounded' },
-                            { value: 'arch', label: 'Arch' },
-                        ], value: windowShape }), windowShape === 'rounded' && (_jsxs("div", { className: "mt-2 flex flex-col gap-1", children: [_jsx(SegmentedControl, { onChange: (v) => setRadiusViewMode(v), options: [
-                                    { value: 'all', label: 'All' },
-                                    { value: 'individual', label: 'Individual' },
-                                ], value: tupleIsUniform ? radiusViewMode : 'individual' }), tupleIsUniform && radiusViewMode === 'all' ? (_jsx(SliderControl, { label: "Corner Radius", max: maxRadius, min: 0, onChange: (v) => setAllCornerRadii(v, false), onCommit: (v) => setAllCornerRadii(v, true), precision: 2, restoreOnCommit: false, step: 0.01, unit: "m", value: Math.round(sharedRadius * 100) / 100 })) : ([
-                                ['Top Left', 0],
-                                ['Top Right', 1],
-                                ['Bottom Right', 2],
-                                ['Bottom Left', 3],
-                            ].map(([label, index]) => (_jsx(SliderControl, { label: label, max: maxRadius, min: 0, onChange: (v) => setCornerRadius(index, v, false), onCommit: (v) => setCornerRadius(index, v, true), precision: 2, restoreOnCommit: false, step: 0.01, unit: "m", value: Math.round((windowCornerRadii[index] ?? 0) * 100) / 100 }, label))))] })), windowShape === 'arch' && (_jsx(SliderControl, { label: "Arch Height", max: Math.max(0.1, node.windowHeight), min: 0.1, onChange: (v) => previewProp({ windowArchHeight: v }), onCommit: (v) => commitProp({ windowArchHeight: v }), precision: 2, restoreOnCommit: false, step: 0.05, unit: "m", value: Math.round(windowArchHeight * 100) / 100 }))] }), _jsxs(PanelSection, { title: "Frame", children: [_jsx(SliderControl, { label: "Thickness", max: 0.15, min: 0.01, onChange: (v) => previewProp({ windowFrameThickness: v }), onCommit: (v) => commitProp({ windowFrameThickness: v }), precision: 3, restoreOnCommit: false, step: 0.005, unit: "m", value: Math.round(node.windowFrameThickness * 1000) / 1000 }), _jsx(SliderControl, { label: "Depth", max: 0.15, min: 0.02, onChange: (v) => previewProp({ windowFrameDepth: v }), onCommit: (v) => commitProp({ windowFrameDepth: v }), precision: 3, restoreOnCommit: false, step: 0.005, unit: "m", value: Math.round(node.windowFrameDepth * 1000) / 1000 }), _jsx(SliderControl, { label: "Divider", max: 0.06, min: 0, onChange: (v) => previewProp({ windowDividerThickness: v }), onCommit: (v) => commitProp({ windowDividerThickness: v }), precision: 3, restoreOnCommit: false, step: 0.002, unit: "m", value: Math.round(node.windowDividerThickness * 1000) / 1000 })] }), _jsxs(PanelSection, { title: "Grid", children: [_jsx(SliderControl, { label: "Columns", max: 8, min: 1, onChange: (v) => previewProp({ windowColumns: Math.max(1, Math.min(8, Math.round(v))) }), onCommit: (v) => commitProp({ windowColumns: Math.max(1, Math.min(8, Math.round(v))) }), precision: 0, restoreOnCommit: false, step: 1, value: node.windowColumns }), _jsx(SliderControl, { label: "Rows", max: 8, min: 1, onChange: (v) => previewProp({ windowRows: Math.max(1, Math.min(8, Math.round(v))) }), onCommit: (v) => commitProp({ windowRows: Math.max(1, Math.min(8, Math.round(v))) }), precision: 0, restoreOnCommit: false, step: 1, value: node.windowRows })] }), _jsxs(PanelSection, { title: "Sill", children: [_jsx(ToggleControl, { checked: node.windowSill, label: "Enable Sill", onChange: (checked) => handleUpdate({ windowSill: checked }) }), node.windowSill && (_jsxs("div", { className: "mt-1 flex flex-col gap-1", children: [_jsx(SliderControl, { label: "Depth", max: 0.3, min: 0.02, onChange: (v) => previewProp({ windowSillDepth: v }), onCommit: (v) => commitProp({ windowSillDepth: v }), precision: 3, restoreOnCommit: false, step: 0.01, unit: "m", value: Math.round(node.windowSillDepth * 1000) / 1000 }), _jsx(SliderControl, { label: "Thickness", max: 0.1, min: 0.01, onChange: (v) => previewProp({ windowSillThickness: v }), onCommit: (v) => commitProp({ windowSillThickness: v }), precision: 3, restoreOnCommit: false, step: 0.005, unit: "m", value: Math.round(node.windowSillThickness * 1000) / 1000 })] }))] })] }));
-}

package/dist/dormer/window-assembly.d.ts

@@ -1,22 +0,0 @@
-import type { DormerNode, RoofSegmentNode } from '@pascal-app/core';
-import * as THREE from 'three';
-/**
- * Renders the window opening assembly (frame bars, glass panes, sill)
- * on each exposed gable face of a dormer. Owns its geometry lifecycle
- * (build via `buildDormerWindowGeometries`, dispose on unmount) so the
- * renderer doesn't have to.
- *
- * Mounted inside the dormer's rotation group, in dormer-mesh-local
- * coordinates. The CSG cut on the wall is performed separately inside
- * the viewer's `generateDormerGeometry`; the geometry built here is
- * sized to match that cut.
- */
-declare const DormerWindowAssembly: ({ node, segment, frameMaterial, glassMaterial, dormerToSegment, }: {
-    node: DormerNode;
-    segment: RoofSegmentNode;
-    frameMaterial: THREE.Material;
-    glassMaterial: THREE.Material;
-    dormerToSegment: THREE.Matrix4;
-}) => import("react").JSX.Element;
-export default DormerWindowAssembly;
-//# sourceMappingURL=window-assembly.d.ts.map

package/dist/dormer/window-assembly.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"window-assembly.d.ts","sourceRoot":"","sources":["../../src/dormer/window-assembly.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAEnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;GAUG;AACH,QAAA,MAAM,oBAAoB,GAAI,mEAM3B;IACD,IAAI,EAAE,UAAU,CAAA;IAChB,OAAO,EAAE,eAAe,CAAA;IACxB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAA;IAC7B,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAA;IAI7B,eAAe,EAAE,KAAK,CAAC,OAAO,CAAA;CAC/B,gCA4KA,CAAA;AAED,eAAe,oBAAoB,CAAA"}