@pascal-app/viewer 1.0.7 → 1.1.1

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

@@ -1,4 +1,4 @@
-import { buildWallFinishLayout, containsPoint, cornerPair, DEFAULT_LEVEL_HEIGHT, getAdjacentWallIds, getDoorOpeningSize, getEffectiveNode, getOpeningWallCut, getWallBodyCenterOffset, getWallCurveFrameAt, getWallCurveLength, getWallFaceOffsets, getWallLevelZones, getWallMiterBoundaryPoints, getWallPlaneTop, getWallPlanFootprint, getWallSurfacePolygon, getWallThickness, isCurvedWall, isCutterName, openingHostFacing, pointToKey, resolveCutterHost, resolveLevelId, resolveWallFaceBottom, resolveWallFinish, resolveWallTop, sceneRegistry, spatialGridManager, terrainSupportLift, useLiveNodeOverrides, useLiveTransforms, useScene, WALL_SURFACE_SLOT_DEFAULTS, wallFinishMaterialIndex, zoneHasWallFinish, } from '@pascal-app/core';
+import { buildWallFinishLayout, clampWallEndHeightOffset, containsPoint, cornerPair, DEFAULT_LEVEL_HEIGHT, getAdjacentWallIds, getDoorOpeningSize, getEffectiveNode, getOpeningWallCut, getWallBodyCenterOffset, getWallCurveFrameAt, getWallCurveLength, getWallFaceOffsets, getWallLevelZones, getWallMiterBoundaryPoints, getWallPlaneTop, getWallPlanFootprint, getWallSurfacePolygon, getWallThickness, isCurvedWall, isCutterName, MIN_WALL_END_HEIGHT, openingHostFacing, pointToKey, resolveCutterHost, resolveLevelId, resolveWallFaceBottom, resolveWallFinish, resolveWallTop, sceneRegistry, spatialGridManager, terrainSupportLift, useLiveNodeOverrides, useLiveTransforms, useScene, WALL_SURFACE_SLOT_DEFAULTS, wallFinishMaterialIndex, zoneHasWallFinish, } from '@pascal-app/core';
 import { useFrame } from '@react-three/fiber';
 import { useEffect } from 'react';
 import * as THREE from 'three';
@@ -1227,6 +1227,41 @@ function buildWallFinishContext(wall, layout, faceBase, slabElevation) {
         .sort((left, right) => left.start - right.start);
     return { layout, faceBase: { a: runs(faceBase.a), b: runs(faceBase.b) }, refs, foundation };
 }
+/**
+ * Wall-local Y of the sloped top at `x`. Mitered corners sample `x` outside
+ * [0, L], where the line can fall below the wall base; the top never drops
+ * under {@link MIN_WALL_END_HEIGHT} (or the flat height, if lower).
+ */
+export function wallTopYAt(wallTop, x) {
+    const { height, slope } = wallTop;
+    if (slope === 0)
+        return height;
+    return Math.max(height + slope * x, Math.min(height, MIN_WALL_END_HEIGHT));
+}
+/**
+ * Tilts a wall's top edge along its length so the `end` side sits taller (or
+ * shorter) than the `start` side — e.g. a knee wall following a single-pitch
+ * roof slope — instead of requiring a non-rectangular footprint. Only
+ * vertices sitting exactly at the flat extruded top (`topY`) move.
+ *
+ * Evaluates the linear plane equation `slope * localX` continuously across
+ * all top vertices (including mitered corner vertices extending beyond [0, L])
+ * so the extruded top face remains a single coplanar surface without corner
+ * creases or triangulation folds — except where {@link wallTopYAt} holds an
+ * extended miter vertex above the base.
+ */
+function applyWallEndHeightSlope(geometry, wallTop) {
+    const { height: topY, slope } = wallTop;
+    if (slope === 0)
+        return;
+    const position = geometry.getAttribute('position');
+    for (let i = 0; i < position.count; i++) {
+        if (Math.abs(position.getY(i) - topY) > 1e-4)
+            continue;
+        position.setY(i, wallTopYAt(wallTop, position.getX(i)));
+    }
+    position.needsUpdate = true;
+}
 export function generateExtrudedWall(wallNode, childrenNodes, miterData, slabElevation = 0, baseElevation = slabElevation, baseSegments = [
     { start: 0, end: 1, elevation: baseElevation },
 ], storeyHeight = DEFAULT_LEVEL_HEIGHT, terrainBottomAt, faceBase, finishLayout = buildWallFinishLayout(wallNode, []), sceneNodes = useScene.getState().nodes) {
@@ -1236,6 +1271,7 @@ export function generateExtrudedWall(wallNode, childrenNodes, miterData, slabEle
     const level = sceneNodes[levelId];
     const authoredStoreyHeight = level?.type === 'level' ? (level.height ?? null) : null;
     const topElevation = resolveWallTop(wallNode, storeyHeight, slabElevation, authoredStoreyHeight);
+    const effectiveWallHeight = topElevation - slabElevation;
     const faceDatum = faceBase;
     if (faceBase)
         faceBase = {
@@ -1266,6 +1302,10 @@ export function generateExtrudedWall(wallNode, childrenNodes, miterData, slabEle
     if (L < 1e-9) {
         return new THREE.BufferGeometry();
     }
+    const wallTop = {
+        height: effectiveWallHeight,
+        slope: clampWallEndHeightOffset(wallNode.endHeightOffset, effectiveWallHeight) / L,
+    };
     const boundaryPoints = getWallMiterBoundaryPoints(wallNode, miterData);
     const polyPoints = isCurvedWall(wallNode)
         ? getWallSurfacePolygon(wallNode, 24, insetCurvedWallBoundaryPointsFor3D(wallNode, boundaryPoints, miterData) ?? undefined)
@@ -1312,10 +1352,10 @@ export function generateExtrudedWall(wallNode, childrenNodes, miterData, slabEle
         depth: height,
         bevelEnabled: false,
     });
-    // Rotate so extrusion direction (Z) becomes height direction (Y)
     geometry.rotateX(-Math.PI / 2);
     if (Math.abs(localBottom) > 1e-9)
         geometry.translate(0, localBottom, 0);
+    applyWallEndHeightSlope(geometry, wallTop);
     geometry.computeVertexNormals();
     assignWallMaterialGroups(geometry, wallNode, boundaryEdges, finish);
     ensureRenderableGeometryAttributes(geometry);
@@ -1431,7 +1471,7 @@ export function generateExtrudedWall(wallNode, childrenNodes, miterData, slabEle
     }
     const cutoutBrushes = [
         ...baseProfileCutouts,
-        ...collectCutoutBrushes(wallNode, childrenNodes, thickness, faceDatum, slabElevation, sceneNodes, baseSegments),
+        ...collectCutoutBrushes(wallNode, childrenNodes, thickness, wallTop, faceDatum, slabElevation, sceneNodes, baseSegments),
     ];
     if (cutoutBrushes.length === 0) {
         const splitGeometry = finishWallFaces(splitGeometryAtPlanes(geometry, finishPlanes.y, finishPlanes.x), wallNode, boundaryEdges, finish);
@@ -1527,7 +1567,7 @@ function authoredCutoutBrush(cutoutMesh, wallMatrixInverse, wallThickness, wallN
     computeGeometryBoundsTree(geometry);
     return new Brush(geometry);
 }
-function collectCutoutBrushes(wallNode, childrenNodes, wallThickness, faceBase, elevation = 0, sceneNodes = useScene.getState().nodes, baseSegments = [{ start: 0, end: 1, elevation }]) {
+function collectCutoutBrushes(wallNode, childrenNodes, wallThickness, wallTop, faceBase, elevation = 0, sceneNodes = useScene.getState().nodes, baseSegments = [{ start: 0, end: 1, elevation }]) {
     const brushes = [];
     const wallMesh = sceneRegistry.nodes.get(wallNode.id);
     if (!wallMesh)
@@ -1584,7 +1624,7 @@ function collectCutoutBrushes(wallNode, childrenNodes, wallThickness, faceBase,
                         child.position[1] + cut.datum - elevation,
                         child.position[2],
                     ],
-                }, wallThickness, getWallBodyCenterOffset(wallNode), cut.bottom - elevation, child.type === 'window' ? cornerPair(sceneNodes, child)?.end : undefined));
+                }, wallThickness, getWallBodyCenterOffset(wallNode), cut.bottom - elevation, child.type === 'window' ? cornerPair(sceneNodes, child)?.end : undefined, wallTop));
                 continue;
             }
             if (cut.band.length < 3)
@@ -1595,8 +1635,9 @@ function collectCutoutBrushes(wallNode, childrenNodes, wallThickness, faceBase,
                 return new THREE.Vector2(dx * Math.cos(angle) + dz * Math.sin(angle), dx * Math.sin(angle) - dz * Math.cos(angle));
             });
             const padding = getOpeningCutoutBottomPadding(child, cut.bottom - elevation);
+            const top = Math.min(cut.top - elevation, Math.min(...points.map((point) => wallTopYAt(wallTop, point.x))));
             const geometry = new THREE.ExtrudeGeometry(new THREE.Shape(points), {
-                depth: cut.top - cut.bottom + padding,
+                depth: top - (cut.bottom - elevation) + padding,
                 bevelEnabled: false,
             });
             geometry.rotateX(-Math.PI / 2);
@@ -1681,18 +1722,23 @@ function collectCutoutBrushes(wallNode, childrenNodes, wallThickness, faceBase,
  * cut only takes this wall's own geometry, so running past it touches nothing else.
  */
 const CORNER_CUT_REACH = 6;
-function createOpeningCutoutBrush(opening, wallThickness, centerOffset, cutBottom, cornerEnd) {
+function createOpeningCutoutBrush(opening, wallThickness, centerOffset, cutBottom, cornerEnd, wallTop) {
     const size = getDoorOpeningSize(opening);
     const centerX = opening.position[0] - size.leafOffsetX * openingHostFacing(opening);
     const halfWidth = size.width / 2;
     const bottom = cutBottom ?? opening.position[1] - opening.height / 2;
     const bottomPadding = getOpeningCutoutBottomPadding(opening, bottom);
     const reach = CORNER_CUT_REACH * wallThickness;
+    const left = centerX - halfWidth;
+    const right = centerX + halfWidth;
+    const openingTop = opening.position[1] - opening.height / 2 + size.height;
     const geometry = buildOpeningCutoutGeometry(opening, {
-        left: centerX - halfWidth - (cornerEnd === 'start' ? reach : 0),
-        right: centerX + halfWidth + (cornerEnd === 'end' ? reach : 0),
+        left: left - (cornerEnd === 'start' ? reach : 0),
+        right: right + (cornerEnd === 'end' ? reach : 0),
         bottom: bottom - bottomPadding,
-        top: opening.position[1] - opening.height / 2 + size.height,
+        top: wallTop
+            ? Math.min(openingTop, wallTopYAt(wallTop, wallTop.slope > 0 ? left : right))
+            : openingTop,
     }, wallThickness * 2, wallThickness);
     if (centerOffset !== 0)
         geometry.translate(0, 0, centerOffset);

package/dist/ui/components/action-button.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Button } from '../primitives/button';
+interface ActionButtonProps extends React.ComponentProps<typeof Button> {
+    label: string;
+    shortcut?: string;
+    isActive?: boolean;
+    tooltipContent?: React.ReactNode;
+    tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
+    /** The tooltip portals to `<body>`, so a button in a themed scope passes the scope here. */
+    tooltipClassName?: string;
+}
+export declare const ActionButton: React.ForwardRefExoticComponent<Omit<ActionButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=action-button.d.ts.map

package/dist/ui/components/action-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-button.d.ts","sourceRoot":"","sources":["../../../src/ui/components/action-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAI7C,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjD,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,YAAY,0GAkExB,CAAA"}

package/dist/ui/components/action-button.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { playSound } from '../../sfx/player';
+import { cn } from '../lib/cn';
+import { Button } from '../primitives/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip';
+import { useActionMenuPopupSide } from './action-menu-placement';
+export const ActionButton = React.forwardRef(({ className, children, label, shortcut, isActive, tooltipContent, tooltipSide, tooltipClassName, onClick, onMouseEnter, ...props }, ref) => {
+    const popupSide = useActionMenuPopupSide();
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button
+                // These are toggles, not commands: the armed/unarmed state has to be
+                // readable without decoding the active-state styling.
+                , { "aria-pressed": isActive, "aria-label": label, className: cn('relative h-11 w-11 transition-all', className), onClick: (event) => {
+                        playSound('menuClick');
+                        onClick?.(event);
+                    }, onMouseEnter: (event) => {
+                        playSound('menuHover');
+                        onMouseEnter?.(event);
+                    }, ref: ref, ...props, children: [_jsx("div", { className: cn('flex h-full w-full items-center justify-center transition-transform', shortcut && '-translate-x-0.5 -translate-y-0.5'), children: children }), shortcut && (_jsx("div", { className: "absolute right-1 bottom-1 rounded border border-border/40 bg-background/40 px-1 py-[2px] backdrop-blur-md", children: _jsx("span", { className: "block font-medium font-mono text-[9px] text-muted-foreground/70 leading-none", children: shortcut }) }))] }) }), _jsx(TooltipContent, { className: tooltipClassName, side: tooltipSide ?? popupSide, children: tooltipContent || (_jsxs("p", { children: [label, " ", shortcut && `(${shortcut})`] })) })] }));
+});
+ActionButton.displayName = 'ActionButton';

package/dist/ui/components/action-menu-placement.d.ts

@@ -0,0 +1,7 @@
+/** Viewport edge the action menu docks to. */
+export type ActionMenuPlacement = 'bottom' | 'top';
+export declare const ActionMenuPlacementProvider: import("react").Provider<ActionMenuPlacement>;
+export declare function useActionMenuPlacement(): ActionMenuPlacement;
+/** Side tooltips and popovers open toward, away from the docked edge. */
+export declare function useActionMenuPopupSide(): 'top' | 'bottom';
+//# sourceMappingURL=action-menu-placement.d.ts.map

package/dist/ui/components/action-menu-placement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-menu-placement.d.ts","sourceRoot":"","sources":["../../../src/ui/components/action-menu-placement.ts"],"names":[],"mappings":"AAEA,8CAA8C;AAC9C,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,KAAK,CAAA;AAIlD,eAAO,MAAM,2BAA2B,+CAAsC,CAAA;AAE9E,wBAAgB,sBAAsB,IAAI,mBAAmB,CAE5D;AAED,yEAAyE;AACzE,wBAAgB,sBAAsB,IAAI,KAAK,GAAG,QAAQ,CAEzD"}

package/dist/ui/components/action-menu-placement.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+const ActionMenuPlacementContext = createContext('bottom');
+export const ActionMenuPlacementProvider = ActionMenuPlacementContext.Provider;
+export function useActionMenuPlacement() {
+    return useContext(ActionMenuPlacementContext);
+}
+/** Side tooltips and popovers open toward, away from the docked edge. */
+export function useActionMenuPopupSide() {
+    return useActionMenuPlacement() === 'top' ? 'bottom' : 'top';
+}

package/dist/ui/components/floorplan-compass-button.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+export type FloorplanCompassButtonProps = {
+    northRotationDeg: number;
+    onAlignNorth: () => void;
+    needleRef?: React.RefObject<SVGSVGElement | null>;
+    /** Horizontal anchor; defaults to the bottom-left corner. */
+    style?: React.CSSProperties;
+};
+export declare function FloorplanCompassButton({ northRotationDeg, onAlignNorth, needleRef, style, }: FloorplanCompassButtonProps): React.JSX.Element;
+//# sourceMappingURL=floorplan-compass-button.d.ts.map

package/dist/ui/components/floorplan-compass-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floorplan-compass-button.d.ts","sourceRoot":"","sources":["../../../src/ui/components/floorplan-compass-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,2BAA2B,GAAG;IACxC,gBAAgB,EAAE,MAAM,CAAA;IACxB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAA;IACjD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,wBAAgB,sBAAsB,CAAC,EACrC,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,KAAK,GACN,EAAE,2BAA2B,qBA6C7B"}

package/dist/ui/components/floorplan-compass-button.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePascalI18n } from '@pascal-app/core';
+import { cn } from '../lib/cn';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip';
+import { SKY_COMPASS_BOTTOM, useSkyPanel } from './sky-control';
+export function FloorplanCompassButton({ northRotationDeg, onAlignNorth, needleRef, style, }) {
+    const i18n = usePascalI18n();
+    // Beside the sky chip (not when moved to the plan's right corner), centre on the docks' row.
+    const besideSky = useSkyPanel((s) => s.hosts > 0) && style?.right === undefined;
+    const label = i18n._({
+        id: 'viewer.floorplan.alignNorth',
+        message: 'Align view to north',
+    });
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": label, className: cn('group pointer-events-auto absolute bottom-3 z-30 flex h-8 w-8 items-center justify-center rounded-full border border-black/10 bg-white/85 shadow-sm backdrop-blur-md transition hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-neutral-900/85 dark:hover:bg-neutral-900', !style && 'left-3'), style: besideSky ? { bottom: SKY_COMPASS_BOTTOM, ...style } : style, onClick: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onAlignNorth();
+                    }, onPointerDown: (event) => {
+                        event.stopPropagation();
+                    }, type: "button", children: _jsx("span", { className: "relative flex h-6 w-6 items-center justify-center rounded-full bg-[#b8b8b8] shadow-inner dark:bg-neutral-700", children: _jsxs("svg", { "aria-hidden": "true", className: "h-6 w-6", ref: needleRef, style: { transform: `rotate(${northRotationDeg}deg)` }, viewBox: "0 0 48 48", children: [_jsx("path", { d: "M24 4.5 31.5 25 24 21.5 16.5 25Z", fill: "#f15b5b" }), _jsx("path", { d: "M24 43.5 16.5 23 24 26.5 31.5 23Z", fill: "#ffffff" })] }) }) }) }), _jsx(TooltipContent, { side: "right", children: label })] }));
+}

package/dist/ui/components/follow-pascal-toggle.d.ts

@@ -0,0 +1,6 @@
+/** The toolbar's switch for Follow Pascal: the camera follows what the agent builds. */
+export declare function FollowPascalToggle({ className, tooltipClassName, }: {
+    className?: string;
+    tooltipClassName?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=follow-pascal-toggle.d.ts.map

package/dist/ui/components/follow-pascal-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"follow-pascal-toggle.d.ts","sourceRoot":"","sources":["../../../src/ui/components/follow-pascal-toggle.tsx"],"names":[],"mappings":"AAQA,wFAAwF;AACxF,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,gBAAgB,GACjB,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,+BA6BA"}

package/dist/ui/components/follow-pascal-toggle.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePascalI18n } from '@pascal-app/core';
+import { Video } from 'lucide-react';
+import { cn } from '../lib/cn';
+import { useFollowPascal } from '../store/use-follow-pascal';
+import { ActionButton } from './action-button';
+/** The toolbar's switch for Follow Pascal: the camera follows what the agent builds. */
+export function FollowPascalToggle({ className, tooltipClassName, }) {
+    const i18n = usePascalI18n();
+    const on = useFollowPascal((state) => state.on);
+    const setOn = useFollowPascal((state) => state.setOn);
+    return (_jsx(ActionButton, { "aria-pressed": on, className: cn(on
+            ? 'bg-violet-500/20 text-violet-600 dark:text-violet-300 dark:hover:text-accent-foreground'
+            : 'hover:bg-black/4 hover:text-violet-600 dark:hover:text-violet-300', className), label: on
+            ? i18n._({ id: 'editor.actionMenu.followPascalToggle.on', message: 'Follow Pascal: On' })
+            : i18n._({
+                id: 'editor.actionMenu.followPascalToggle.off',
+                message: 'Follow Pascal: Off',
+            }), onClick: () => setOn(!on), size: "icon", tooltipClassName: tooltipClassName, variant: "ghost", children: _jsx(Video, { className: "h-6 w-6" }) }));
+}

package/dist/ui/components/localized-html.d.ts

@@ -0,0 +1,9 @@
+/**
+ * drei's `Html`, keeping the surrounding i18n scope. `Html` renders its
+ * children in a separate React root, which sees none of the surrounding
+ * context, so a component inside it would translate and format with the
+ * default (English) scope instead of the host's (the editor's `?lang=` or
+ * `<Editor locale>` one).
+ */
+export declare const LocalizedHtml: import("react").ForwardRefExoticComponent<Omit<import("@react-three/drei/web/Html").HtmlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=localized-html.d.ts.map

package/dist/ui/components/localized-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localized-html.d.ts","sourceRoot":"","sources":["../../../src/ui/components/localized-html.tsx"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,wMAUxB,CAAA"}

package/dist/ui/components/localized-html.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PascalI18nProvider, usePascalI18n } from '@pascal-app/core';
+import { Html as DreiHtml } from '@react-three/drei';
+import { forwardRef } from 'react';
+/**
+ * drei's `Html`, keeping the surrounding i18n scope. `Html` renders its
+ * children in a separate React root, which sees none of the surrounding
+ * context, so a component inside it would translate and format with the
+ * default (English) scope instead of the host's (the editor's `?lang=` or
+ * `<Editor locale>` one).
+ */
+export const LocalizedHtml = forwardRef(function LocalizedHtml({ children, ...props }, ref) {
+    const i18n = usePascalI18n();
+    return (_jsx(DreiHtml, { ...props, ref: ref, children: _jsx(PascalI18nProvider, { i18n: i18n, children: children }) }));
+});

package/dist/ui/components/render-settings-menu.d.ts

@@ -0,0 +1,9 @@
+export declare function QualityMenu({ subContentClassName, }: {
+    subContentClassName?: string;
+}): import("react").JSX.Element;
+export declare function DaylightMenu({ subContentClassName, }: {
+    subContentClassName?: string;
+}): import("react").JSX.Element;
+/** Ink edges on (soft) or off. The menu stays open on toggle. */
+export declare function EdgesToggleItem(): import("react").JSX.Element;
+//# sourceMappingURL=render-settings-menu.d.ts.map

package/dist/ui/components/render-settings-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-settings-menu.d.ts","sourceRoot":"","sources":["../../../src/ui/components/render-settings-menu.tsx"],"names":[],"mappings":"AAuGA,wBAAgB,WAAW,CAAC,EAC1B,mBAAqC,GACtC,EAAE;IACD,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,+BA6CA;AAED,wBAAgB,YAAY,CAAC,EAC3B,mBAAqC,GACtC,EAAE;IACD,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,+BA6GA;AAED,iEAAiE;AACjE,wBAAgB,eAAe,gCAmB9B"}

package/dist/ui/components/render-settings-menu.js

@@ -0,0 +1,145 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePascalI18n, useScene } from '@pascal-app/core';
+import { ArrowDownLeft, Check, Cloud, CloudSun, Gauge, LocateFixed, Moon, PenLine, Sun, Sunrise, Sunset, } from 'lucide-react';
+import { useState } from 'react';
+import { requestDeviceLocation, resolveLocation } from '../../lib/daylight/location';
+import useViewer, {} from '../../store/use-viewer';
+import { DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, } from '../primitives/dropdown-menu';
+import { openSkyPanel, useSkyPanel, weatherIcon } from './sky-control';
+/**
+ * Render settings shared by every display dropdown:
+ * - `QualityMenu` (both appearances): Low / Medium / High.
+ * - `DaylightMenu` (colored): time-of-day and weather presets, plus "Use my location" when the
+ *   site has no geocoded point — or, while the sky chip is in the viewport, a row opening it.
+ * - `EdgesToggleItem` (monochrome): ink edges on or off.
+ */
+function timeOptions(i18n) {
+    return [
+        {
+            id: 'golden',
+            icon: Sunrise,
+            name: i18n._({ id: 'viewer.daylight.time.golden', message: 'Golden hour' }),
+        },
+        {
+            id: 'midday',
+            icon: Sun,
+            name: i18n._({ id: 'viewer.daylight.time.midday', message: 'Midday' }),
+        },
+        {
+            id: 'blue',
+            icon: Sunset,
+            name: i18n._({ id: 'viewer.daylight.time.blue', message: 'Blue hour' }),
+        },
+        {
+            id: 'night',
+            icon: Moon,
+            name: i18n._({ id: 'viewer.daylight.time.night', message: 'Night' }),
+        },
+    ];
+}
+function weatherOptions(i18n) {
+    return [
+        { id: 'clear', name: i18n._({ id: 'viewer.daylight.weather.clear', message: 'Clear' }) },
+        { id: 'fair', name: i18n._({ id: 'viewer.daylight.weather.fair', message: 'Fair' }) },
+        { id: 'cloudy', name: i18n._({ id: 'viewer.daylight.weather.cloudy', message: 'Cloudy' }) },
+        {
+            id: 'overcast',
+            name: i18n._({ id: 'viewer.daylight.weather.overcast', message: 'Overcast' }),
+        },
+    ];
+}
+function qualityOptions(i18n) {
+    return [
+        {
+            id: 'low',
+            name: i18n._({ id: 'viewer.daylight.quality.low', message: 'Low' }),
+            detail: i18n._({
+                id: 'viewer.daylight.quality.lowDetail',
+                message: 'Fastest — no ambient occlusion or bloom',
+            }),
+        },
+        {
+            id: 'medium',
+            name: i18n._({ id: 'viewer.daylight.quality.medium', message: 'Medium' }),
+            detail: i18n._({
+                id: 'viewer.daylight.quality.mediumDetail',
+                message: 'Half-resolution ambient occlusion',
+            }),
+        },
+        {
+            id: 'high',
+            name: i18n._({ id: 'viewer.daylight.quality.high', message: 'High' }),
+            detail: i18n._({
+                id: 'viewer.daylight.quality.highDetail',
+                message: 'Lighting-aware ambient occlusion and bloom',
+            }),
+        },
+    ];
+}
+export function QualityMenu({ subContentClassName = 'dark min-w-56', }) {
+    const i18n = usePascalI18n();
+    const quality = useViewer((s) => s.renderQuality);
+    const choice = useViewer((s) => s.renderQualityChoice);
+    const qualities = qualityOptions(i18n);
+    const active = qualities.find((o) => o.id === quality) ?? qualities[2];
+    const autoName = i18n._({ id: 'viewer.daylight.quality.auto', message: 'Auto' });
+    return (_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(Gauge, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.daylight.quality.title', message: 'Quality' }) }), _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: choice === 'auto' ? `${autoName} (${active.name})` : active.name })] }), _jsxs(DropdownMenuSubContent, { className: subContentClassName, children: [_jsxs(DropdownMenuItem, { onSelect: () => useViewer.getState().setRenderQuality('auto'), children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-foreground", children: autoName }), _jsx("span", { className: "text-muted-foreground text-xs", children: i18n._({
+                                            id: 'viewer.daylight.quality.autoDetail',
+                                            message: 'Picked for this device: {tier}',
+                                            values: { tier: active.name },
+                                        }) })] }), choice === 'auto' ? _jsx(Check, { className: "ml-auto h-4 w-4 text-foreground" }) : null] }), qualities.map((option) => (_jsxs(DropdownMenuItem, { onSelect: () => useViewer.getState().setRenderQuality(option.id), children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-foreground", children: option.name }), _jsx("span", { className: "text-muted-foreground text-xs", children: option.detail })] }), choice === option.id ? _jsx(Check, { className: "ml-auto h-4 w-4 text-foreground" }) : null] }, option.id)))] })] }));
+}
+export function DaylightMenu({ subContentClassName = 'dark min-w-48', }) {
+    const i18n = usePascalI18n();
+    const timeOfDay = useViewer((s) => s.timeOfDay);
+    const weather = useViewer((s) => s.weather);
+    const deviceLocation = useViewer((s) => s.deviceLocation);
+    const siteHasLocation = useScene((state) => {
+        for (const id of state.rootNodeIds) {
+            const node = state.nodes[id];
+            if (node?.type === 'site')
+                return Boolean(node.parcel?.originLngLat || node.dossier?.point);
+        }
+        return false;
+    });
+    const [locating, setLocating] = useState(false);
+    // The sky chip beside the compass carries time and weather wherever it is mounted.
+    const skyChip = useSkyPanel((s) => s.hosts > 0);
+    const times = timeOptions(i18n);
+    const weathers = weatherOptions(i18n);
+    const activeTime = times.find((o) => o.id === timeOfDay) ?? times[1];
+    const activeWeather = weathers.find((o) => o.id === weather) ?? weathers[1];
+    const source = siteHasLocation ? 'site' : resolveLocation(null, deviceLocation).source;
+    if (skyChip) {
+        const WeatherIcon = weatherIcon(weather);
+        return (_jsxs(DropdownMenuItem, { onSelect: openSkyPanel, children: [_jsx(WeatherIcon, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.daylight.sky.menuItem', message: 'Time & weather' }) }), _jsxs("span", { className: "ml-auto flex items-center gap-1 text-violet-600 text-xs dark:text-violet-300", children: [i18n._({ id: 'viewer.daylight.sky.inViewport', message: 'In viewport' }), _jsx(ArrowDownLeft, { className: "h-3.5 w-3.5" })] })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(activeTime.icon, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.daylight.time.title', message: 'Time of day' }) }), _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: activeTime.name })] }), _jsxs(DropdownMenuSubContent, { className: subContentClassName, children: [times.map((option) => (_jsxs(DropdownMenuItem, { onSelect: () => useViewer.getState().setTimeOfDay(option.id), children: [_jsx(option.icon, { className: "h-4 w-4" }), _jsx("span", { children: option.name }), timeOfDay === option.id ? _jsx(Check, { className: "ml-auto h-4 w-4" }) : null] }, option.id))), source !== 'site' ? (_jsxs(DropdownMenuItem, { disabled: locating, onSelect: (event) => {
+                                    event.preventDefault();
+                                    setLocating(true);
+                                    requestDeviceLocation()
+                                        .then((location) => useViewer.getState().setDeviceLocation(location))
+                                        .catch(() => { })
+                                        .finally(() => setLocating(false));
+                                }, children: [_jsx(LocateFixed, { className: "h-4 w-4" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: i18n._({ id: 'viewer.daylight.location.use', message: 'Use my location' }) }), _jsx("span", { className: "text-muted-foreground text-xs", children: source === 'device'
+                                                    ? i18n._({
+                                                        id: 'viewer.daylight.location.device',
+                                                        message: 'Sun follows your location',
+                                                    })
+                                                    : i18n._({
+                                                        id: 'viewer.daylight.location.approximate',
+                                                        message: 'Sun position is approximate',
+                                                    }) })] })] })) : null] })] }), _jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [weather === 'clear' ? _jsx(CloudSun, { className: "h-4 w-4" }) : _jsx(Cloud, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.daylight.weather.title', message: 'Weather' }) }), _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: activeWeather.name })] }), _jsx(DropdownMenuSubContent, { className: subContentClassName, children: weathers.map((option) => (_jsxs(DropdownMenuItem, { onSelect: () => useViewer.getState().setWeather(option.id), children: [_jsx("span", { children: option.name }), weather === option.id ? _jsx(Check, { className: "ml-auto h-4 w-4" }) : null] }, option.id))) })] })] }));
+}
+/** Ink edges on (soft) or off. The menu stays open on toggle. */
+export function EdgesToggleItem() {
+    const i18n = usePascalI18n();
+    const on = useViewer((s) => s.edges !== 'off');
+    return (_jsxs(DropdownMenuItem, { onSelect: (event) => {
+            event.preventDefault();
+            useViewer.getState().setEdges(on ? 'off' : 'soft');
+        }, children: [_jsx(PenLine, { className: "h-4 w-4" }), _jsx("span", { children: i18n._({ id: 'viewer.display.edges.title', message: 'Edges' }) }), _jsx("span", { className: "ml-auto text-muted-foreground text-xs", children: on
+                    ? i18n._({ id: 'viewer.common.on', message: 'On' })
+                    : i18n._({ id: 'viewer.common.off', message: 'Off' }) })] }));
+}

package/dist/ui/components/rooms/room-highlight.d.ts

@@ -0,0 +1,10 @@
+import { type Object3D } from 'three';
+import { type RoomAssemblyHeights } from '../../lib/room-assembly-overlay';
+import type { RoomSelectionRecord } from '../../lib/room-selection';
+/** A room's floor, wall faces and outline in the highlight colour, riding its level's object. */
+export declare function RoomAssemblyMesh({ room, heights, levelObject, }: {
+    room: RoomSelectionRecord;
+    heights: RoomAssemblyHeights;
+    levelObject: () => Object3D | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=room-highlight.d.ts.map

package/dist/ui/components/rooms/room-highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"room-highlight.d.ts","sourceRoot":"","sources":["../../../../src/ui/components/rooms/room-highlight.tsx"],"names":[],"mappings":"AAIA,OAAO,EAKL,KAAK,QAAQ,EACd,MAAM,OAAO,CAAA;AAGd,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AAC3F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AA2BnE,iGAAiG;AACjG,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,WAAW,GACZ,EAAE;IACD,IAAI,EAAE,mBAAmB,CAAA;IACzB,OAAO,EAAE,mBAAmB,CAAA;IAC5B,WAAW,EAAE,MAAM,QAAQ,GAAG,SAAS,CAAA;CACxC,+BAqDA"}

package/dist/ui/components/rooms/room-highlight.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrame } from '@react-three/fiber';
+import { useEffect, useMemo, useRef } from 'react';
+import { BufferGeometry, DoubleSide, Float32BufferAttribute, } from 'three';
+import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu';
+import { OVERLAY_LAYER } from '../../../lib/layers';
+import { getRoomAssembly } from '../../lib/room-assembly-overlay';
+const noRaycast = () => { };
+const outlineMaterial = new LineBasicNodeMaterial({
+    color: '#818cf8',
+    depthTest: false,
+    depthWrite: false,
+});
+const fillMaterial = (opacity) => new MeshBasicNodeMaterial({
+    color: '#818cf8',
+    depthTest: false,
+    depthWrite: false,
+    opacity,
+    side: DoubleSide,
+    transparent: true,
+});
+const floorMaterial = fillMaterial(0.18);
+// Walls and the ceiling stack over the floor when seen from above.
+const surfaceMaterial = fillMaterial(0.1);
+function positions(array) {
+    const geometry = new BufferGeometry();
+    geometry.setAttribute('position', new Float32BufferAttribute(array, 3));
+    return geometry;
+}
+/** A room's floor, wall faces and outline in the highlight colour, riding its level's object. */
+export function RoomAssemblyMesh({ room, heights, levelObject, }) {
+    const ref = useRef(null);
+    const assembly = useMemo(() => getRoomAssembly(room.geometry, heights), [room, heights]);
+    const geometry = useMemo(() => ({
+        floor: positions(assembly.floor),
+        surfaces: positions(assembly.surfaces),
+        outline: positions(assembly.outline),
+    }), [assembly]);
+    useEffect(() => () => {
+        geometry.floor.dispose();
+        geometry.surfaces.dispose();
+        geometry.outline.dispose();
+    }, [geometry]);
+    useFrame(() => {
+        const level = levelObject();
+        if (!ref.current)
+            return;
+        ref.current.visible = !!level;
+        if (level) {
+            level.updateWorldMatrix(true, false);
+            ref.current.matrix.copy(level.matrixWorld);
+        }
+    });
+    return (_jsxs("group", { matrixAutoUpdate: false, ref: ref, children: [_jsx("mesh", { geometry: geometry.floor, layers: OVERLAY_LAYER, material: floorMaterial, raycast: noRaycast, renderOrder: 100 }), _jsx("mesh", { geometry: geometry.surfaces, layers: OVERLAY_LAYER, material: surfaceMaterial, raycast: noRaycast, renderOrder: 100 }), _jsx("lineSegments", { geometry: geometry.outline, layers: OVERLAY_LAYER, material: outlineMaterial, raycast: noRaycast, renderOrder: 101 })] }));
+}