@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/building-viewer.mjs

@@ -0,0 +1,567 @@
+import { Spinner } from "./spinner.mjs";
+import { HoverTooltip, TooltipProvider } from "./tooltip.mjs";
+import { Button } from "./button.mjs";
+import { Switch } from "./switch.mjs";
+import { styleForVilla } from "./site-image-viewer/milestone-ramp.mjs";
+import { SiteImageViewer } from "./site-image-viewer.mjs";
+import { Slider } from "./slider.mjs";
+import { Toolbar, ToolbarButton, ToolbarSeparator } from "./toolbar.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Box, Hand, Layers, LayoutGrid, Minus, Plus, Rotate3d, Satellite, Scan, SlidersHorizontal, Tag, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/building-viewer.tsx
+/**
+* BuildingViewer — the CONTROLLED map/canvas region of CaptureUiEnhanced.
+*
+* Extracted verbatim (JSX + logic) from `pages/capture-ui-enhanced.tsx` (map wrapper 3026–3274 minus the
+* top-centre SiteToolbar, plus the Layers overlay 3646–3767 and the `RealityMeshCanvas` child 488–745).
+* It owns NO shared/business state — every value it renders arrives as a prop and every change it wants is
+* requested through an `on*` callback (the host runs the navigation reducer). Its only local state is the
+* Layers-overlay open flag and the canvas child's own DOM/interaction state.
+*
+* ============================ INTERACTIONS THIS WIDGET OWNS ============================
+*  3D reality canvas (RealityMeshCanvas — internal, canvas-only child):
+*   • Footprint CLICK → `onSelectVilla(plot)`  (host resolves villaByPlot, hops zone, openVilla)
+*   • Footprint HOVER → local `hoverCode` → hover chip (code · zone · batch · %)  [local only]
+*   • 3D-tools toolbar: Zoom in / Zoom out / Reset view / Satellite (top-down) → imperative viewer calls
+*   • 3D-tools Pan / Orbit → local `navMode` + `viewer.setInteractionMode(...)`  [local only]
+*   • Camera reactions: `selectedPlot` change → fitVilla; entering Reality w/o selection → resetView;
+*     a villa pre-selected in Plan is carried in via `selectedPlot`
+*   • Lazy `import("./footprint-viewer")` → `createFootprintViewer`; the created API is surfaced through
+*     `onViewerReady(api)` (host stores it in realityViewerRef; ST reads isZoomedIn there, not here)
+*   • Layer syncing: mesh/model visibility, model opacity, labels, colour mode all pushed to the viewer
+*     from the corresponding props via effects
+*  2D SiteImageViewer (plan / satellite branch):
+*   • Polygon CLICK → leaf: `onSelectVilla(id)` · parent (isParent): `onDrillDown(id)`
+*   • Internal SPA/Construction legend toggle → `onMapModeChange(m)`
+*  Layers overlay (belongs to the viewer, not the reports sheet):
+*   • Layers button → toggle local `layersOpen`; overlay X → close it  [local only]
+*   • 3D body switches/slider → `onMesh3dOnChange` / `onModel3dOnChange` / `onModel3dOpacityChange`
+*     / `onProgressColoursChange` / `onShowLabelsChange`
+*   • 2D body switches → `onShowPolygonsChange` / `onShowLabelsChange` (+ read-only Satellite/Drone rows)
+*
+* ============================= ANIMATIONS THIS WIDGET OWNS =============================
+*   • Map wrapper parallax: `translateY(-reportScrollY)` while `chromeHidden` (reportsOpen)  ← reportScrollY
+*   • 3D layer wrapper: `transition-all duration-500 ease-in-out` + `scale-[0.95] rounded-[25.26px]
+*     overflow-hidden` (mapScaledOut) + `blur-sm` (mapBlurred), `hidden` when `mode!=="3d"`
+*   • Plan-image backdrop `<img>`: per-frame opacity/blur/scale driven by the camera (`onBackdrop`, willChange)
+*   • Static radial vignette
+*   • Centre spinner while `showSpinner` (mapPhase==="out" || mapLoading)
+*   • Jump toast enter/leave: `animate-in fade-in slide-in-from-top-4` / `animate-out fade-out
+*     slide-out-to-top-4 fill-mode-forwards`, `duration-300 ease-out` (host owns the timers → jumpToastLeaving)
+*   • Chrome fade: `chromeFade` (opacity 500 + pointer-events-none while reportsOpen) on toast + Layers control
+*   • Layers control follow: `transition-[left] duration-300 ease-in-out` driven by `layersOffsetLeft`
+*/
+/**
+* The 3D view — the headless projected-footprints viewer (`createFootprintViewer`): the DroneDeploy
+* reality-capture mesh (Cesium 3D Tiles) with every villa's ground footprint painted DOWN onto the mesh
+* surface, coloured by construction progress (no IFC fragment). Mounts the WebGL canvas into a container and
+* disposes on unmount. Assets are served from the app's public dir (`/footprints.json`, `/house-progress.json`,
+* `/house-progress-IMA.json`, `/worker.mjs`, `/reality-mesh/…`). Villa code (`${model}-${plot}`) is the
+* identity; hover surfaces its zone + batch via `getVillaRecord`. Canvas-only: three/@thatopen are reached
+* solely through the lazy `import("./footprint-viewer")`; the created API is opaque and surfaced via `onReady`.
+*/
+function RealityMeshCanvas({ active, meshOn, meshOpacity, modelOn, modelOpacity, progressColours, mapMode, showLabels, selectedPlot, visiblePlots, onSelectVilla, onReady }) {
+	const ref = useRef(null);
+	const bgRef = useRef(null);
+	const viewerRef = useRef(null);
+	const plotToCode = useRef(/* @__PURE__ */ new Map());
+	const onSelectRef = useRef(onSelectVilla);
+	onSelectRef.current = onSelectVilla;
+	const onReadyRef = useRef(onReady);
+	onReadyRef.current = onReady;
+	const selectedPlotRef = useRef(selectedPlot);
+	selectedPlotRef.current = selectedPlot;
+	const visiblePlotsRef = useRef(visiblePlots);
+	visiblePlotsRef.current = visiblePlots;
+	const plotsToCodes = (plots) => plots.map((p) => plotToCode.current.get(p)).filter((c) => Boolean(c));
+	const [error, setError] = useState(false);
+	const [hoverCode, setHoverCode] = useState(null);
+	const applyColours = () => {
+		const v = viewerRef.current;
+		if (!v || !progressColours) return;
+		const map = {};
+		for (const code of v.getVillaCodes()) {
+			const r = v.getVillaRecord(code);
+			if (!r) continue;
+			map[code] = styleForVilla({
+				linkedLbsItemId: 1,
+				approvedProgressPercent: r.actual ?? null,
+				plannedProgressPercent: r.planned ?? null
+			}, mapMode).fill;
+		}
+		v.setVillaColours(map);
+	};
+	useEffect(() => {
+		const container = ref.current;
+		if (!container) return;
+		let disposed = false;
+		import("./footprint-viewer.mjs").then(({ createFootprintViewer }) => createFootprintViewer(container, {
+			meshOpacity,
+			projectionStrength: modelOpacity,
+			colorMode: progressColours ? "progress" : "off",
+			transparent: true,
+			onSelect: (code) => {
+				if (code) onSelectRef.current?.(code.split("-").pop() ?? code);
+			},
+			onHover: (code) => setHoverCode(code),
+			onBackdrop: ({ opacity, blurPx, scale }) => {
+				const el = bgRef.current;
+				if (!el) return;
+				el.style.opacity = String(opacity);
+				el.style.filter = `blur(${blurPx}px)`;
+				el.style.transform = `scale(${scale})`;
+			}
+		})).then((v) => {
+			if (disposed) {
+				v.dispose();
+				return;
+			}
+			viewerRef.current = v;
+			onReadyRef.current?.(v);
+			window.__realityViewer = v;
+			v.setMeshVisible(meshOn);
+			v.setModelVisible(modelOn);
+			for (const code of v.getVillaCodes()) plotToCode.current.set(code.split("-").pop() ?? code, code);
+			applyColours();
+			const preCode = selectedPlotRef.current ? plotToCode.current.get(selectedPlotRef.current) ?? null : null;
+			if (preCode) {
+				v.selectVilla(preCode);
+				v.fitVilla(preCode);
+			}
+			const preVisible = visiblePlotsRef.current;
+			if (preVisible) v.setVisibleVillas(plotsToCodes(preVisible));
+		}).catch((err) => {
+			console.error("Footprint viewer failed to start:", err);
+			setError(true);
+		});
+		return () => {
+			disposed = true;
+			viewerRef.current?.dispose();
+			viewerRef.current = null;
+		};
+	}, []);
+	useEffect(() => void viewerRef.current?.setMeshVisible(meshOn), [meshOn]);
+	useEffect(() => void viewerRef.current?.setMeshOpacity(meshOpacity), [meshOpacity]);
+	useEffect(() => void viewerRef.current?.setModelVisible(modelOn), [modelOn]);
+	useEffect(() => void viewerRef.current?.setModelOpacity(modelOpacity), [modelOpacity]);
+	useEffect(() => void viewerRef.current?.setLabelsVisible(showLabels), [showLabels]);
+	const visibleKey = visiblePlots ? visiblePlots.join("|") : null;
+	useEffect(() => {
+		const v = viewerRef.current;
+		if (!v) return;
+		v.setVisibleVillas(visiblePlots ? plotsToCodes(visiblePlots) : null);
+	}, [visibleKey]);
+	useEffect(() => {
+		viewerRef.current?.setColourMode(progressColours ? "progress" : "material");
+		applyColours();
+	}, [progressColours, mapMode]);
+	useEffect(() => {
+		const v = viewerRef.current;
+		if (!v) return;
+		const code = selectedPlot ? plotToCode.current.get(selectedPlot) ?? null : null;
+		if (v.getSelectedVilla() !== code) v.selectVilla(code);
+		if (code) v.fitVilla(code);
+	}, [selectedPlot, active]);
+	useEffect(() => {
+		if (active && !selectedPlot) viewerRef.current?.resetView();
+	}, [active]);
+	const hoverRec = hoverCode && viewerRef.current ? viewerRef.current.getVillaRecord(hoverCode) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:absolute wwc:inset-0 wwc:size-full",
+		children: [
+			/* @__PURE__ */ jsx("img", {
+				ref: bgRef,
+				src: "/phase-blueprint.webp",
+				alt: "",
+				className: "wwc:pointer-events-none wwc:absolute wwc:inset-0 wwc:size-full wwc:object-cover",
+				style: {
+					opacity: 1,
+					filter: "blur(4px)",
+					transform: "scale(1)",
+					transformOrigin: "center",
+					willChange: "opacity, filter, transform"
+				}
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref,
+				className: "wwc:absolute wwc:inset-0 wwc:size-full"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "wwc:pointer-events-none wwc:absolute wwc:inset-0",
+				style: { background: "radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%)" }
+			}),
+			hoverRec ? /* @__PURE__ */ jsxs("div", {
+				className: "wwc:pointer-events-none wwc:absolute wwc:left-1/2 wwc:top-3 wwc:z-10 wwc:flex wwc:-translate-x-1/2 wwc:items-center wwc:gap-2 wwc:rounded-md wwc:bg-black/80 wwc:px-2.5 wwc:py-1 wwc:text-xs wwc:font-medium wwc:text-white wwc:shadow-lg wwc:backdrop-blur-sm",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "wwc:font-semibold",
+						children: hoverRec.code
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "wwc:text-white/60",
+						children: ["Zone ", hoverRec.zone ?? "—"]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "wwc:text-white/60",
+						children: ["Batch ", hoverRec.batch ?? "—"]
+					}),
+					hoverRec.actual != null ? /* @__PURE__ */ jsxs("span", {
+						className: "wwc:text-white/60",
+						children: [hoverRec.actual, "%"]
+					}) : null
+				]
+			}) : null,
+			error ? /* @__PURE__ */ jsx("div", {
+				className: "wwc:absolute wwc:inset-0 wwc:flex wwc:items-center wwc:justify-center wwc:bg-zinc-900 wwc:text-sm wwc:text-white/60",
+				children: "3D model unavailable"
+			}) : null
+		]
+	});
+}
+function BuildingViewer({ mode, view, level, isParent, map, satelliteBasemap, selectedVillaId, selectedPlot, visiblePlots, mapMode, mesh3dOn, mesh3dOpacity, model3dOn, model3dOpacity, progressColours, showLabels, showPolygons, keep3dMounted, mapScaledOut, mapBlurred, showSpinner, chromeHidden, chromeFade, reportScrollY, jumpToast, jumpToastLeaving, layersOffsetLeft, polyNoun, hide3dLayers, onSelectVilla, onDrillDown, onMapModeChange, onViewerReady, onMesh3dOnChange, onModel3dOnChange, onModel3dOpacityChange, onProgressColoursChange, onShowLabelsChange, onShowPolygonsChange }) {
+	const [layersOpen, setLayersOpen] = useState(false);
+	const realityViewerRef = useRef(null);
+	const [navMode, setNavMode] = useState("orbit");
+	const showSatellite = mode === "satellite" && satelliteBasemap != null;
+	const show3dLayers = hide3dLayers != null ? !hide3dLayers && mode === "3d" : mode === "3d";
+	const twoDLayers = showSatellite ? [{
+		id: "basemap",
+		label: "Satellite basemap",
+		icon: Satellite,
+		checked: true
+	}] : [
+		{
+			id: "polygons",
+			label: `${polyNoun} polygons`,
+			icon: LayoutGrid,
+			checked: showPolygons,
+			onToggle: onShowPolygonsChange
+		},
+		{
+			id: "labels",
+			label: `${polyNoun} labels`,
+			icon: Tag,
+			checked: showLabels,
+			onToggle: onShowLabelsChange
+		},
+		{
+			id: "ortho",
+			label: "Drone ortho",
+			icon: Layers,
+			checked: true
+		}
+	];
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "wwc:relative wwc:flex wwc:min-w-0 wwc:flex-1 wwc:overflow-hidden wwc:bg-zinc-800",
+		style: chromeHidden ? { transform: `translateY(${-reportScrollY}px)` } : void 0,
+		children: [
+			keep3dMounted && /* @__PURE__ */ jsx("div", {
+				className: cn("wwc:absolute wwc:inset-0 wwc:origin-center wwc:transition-all wwc:duration-500 wwc:ease-in-out", mode !== "3d" && "wwc:hidden", mapScaledOut && "wwc:scale-[0.95] wwc:overflow-hidden wwc:rounded-[25.26px]", mapBlurred && "wwc:blur-sm"),
+				children: /* @__PURE__ */ jsx(RealityMeshCanvas, {
+					active: mode === "3d",
+					onReady: (api) => {
+						realityViewerRef.current = api;
+						onViewerReady(api);
+					},
+					meshOn: mesh3dOn,
+					meshOpacity: mesh3dOpacity,
+					modelOn: model3dOn,
+					modelOpacity: model3dOpacity,
+					progressColours,
+					mapMode,
+					showLabels,
+					selectedPlot,
+					visiblePlots,
+					onSelectVilla: (plot) => onSelectVilla(plot)
+				})
+			}),
+			mode === "3d" && /* @__PURE__ */ jsx(TooltipProvider, {
+				delayDuration: 200,
+				children: /* @__PURE__ */ jsxs(Toolbar, {
+					orientation: "vertical",
+					"aria-label": "3D tools",
+					className: cn("wwc:absolute wwc:right-3 wwc:top-3 wwc:z-20 wwc:w-10 wwc:gap-0 wwc:py-1 wwc:transition-opacity", chromeFade),
+					children: [
+						/* @__PURE__ */ jsx(HoverTooltip, {
+							content: "Zoom in",
+							side: "left",
+							children: /* @__PURE__ */ jsx(ToolbarButton, {
+								icon: true,
+								label: "Zoom in",
+								onClick: () => realityViewerRef.current?.zoomIn(),
+								children: /* @__PURE__ */ jsx(Plus, { className: "wwc:size-4" })
+							})
+						}),
+						/* @__PURE__ */ jsx(ToolbarSeparator, {
+							orientation: "horizontal",
+							className: "wwc:mx-0 wwc:my-0.5 wwc:w-full"
+						}),
+						/* @__PURE__ */ jsx(HoverTooltip, {
+							content: "Zoom out",
+							side: "left",
+							children: /* @__PURE__ */ jsx(ToolbarButton, {
+								icon: true,
+								label: "Zoom out",
+								onClick: () => realityViewerRef.current?.zoomOut(),
+								children: /* @__PURE__ */ jsx(Minus, { className: "wwc:size-4" })
+							})
+						}),
+						/* @__PURE__ */ jsx(ToolbarSeparator, {
+							orientation: "horizontal",
+							className: "wwc:mx-0 wwc:my-0.5 wwc:w-full"
+						}),
+						/* @__PURE__ */ jsx(HoverTooltip, {
+							content: "Reset view",
+							side: "left",
+							children: /* @__PURE__ */ jsx(ToolbarButton, {
+								icon: true,
+								label: "Reset view",
+								onClick: () => realityViewerRef.current?.resetView(),
+								children: /* @__PURE__ */ jsx(Scan, { className: "wwc:size-4" })
+							})
+						}),
+						/* @__PURE__ */ jsx(HoverTooltip, {
+							content: "Satellite (top-down)",
+							side: "left",
+							children: /* @__PURE__ */ jsx(ToolbarButton, {
+								icon: true,
+								label: "Satellite view",
+								onClick: () => realityViewerRef.current?.topDownView(),
+								children: /* @__PURE__ */ jsx(Satellite, { className: "wwc:size-4" })
+							})
+						}),
+						/* @__PURE__ */ jsx(ToolbarSeparator, {
+							orientation: "horizontal",
+							className: "wwc:mx-0 wwc:my-1 wwc:w-full"
+						}),
+						/* @__PURE__ */ jsx(HoverTooltip, {
+							content: "Pan",
+							side: "left",
+							children: /* @__PURE__ */ jsx(ToolbarButton, {
+								icon: true,
+								label: "Pan",
+								active: navMode === "pan",
+								onClick: () => {
+									setNavMode("pan");
+									realityViewerRef.current?.setInteractionMode("pan");
+								},
+								children: /* @__PURE__ */ jsx(Hand, { className: "wwc:size-4" })
+							})
+						}),
+						/* @__PURE__ */ jsx(HoverTooltip, {
+							content: "Orbit",
+							side: "left",
+							children: /* @__PURE__ */ jsx(ToolbarButton, {
+								icon: true,
+								label: "Orbit",
+								active: navMode === "orbit",
+								onClick: () => {
+									setNavMode("orbit");
+									realityViewerRef.current?.setInteractionMode("orbit");
+								},
+								children: /* @__PURE__ */ jsx(Rotate3d, { className: "wwc:size-4" })
+							})
+						})
+					]
+				})
+			}),
+			mode === "3d" ? null : showSatellite && satelliteBasemap ? /* @__PURE__ */ jsx(SiteImageViewer, {
+				className: "wwc:size-full",
+				backgroundUrl: satelliteBasemap.backgroundUrl,
+				villas: satelliteBasemap.villas,
+				imageWidth: satelliteBasemap.imageWidth,
+				imageHeight: satelliteBasemap.imageHeight,
+				mapMode,
+				onMapModeChange,
+				onSelectVilla: isParent ? (id) => onDrillDown(String(id)) : (id) => onSelectVilla(String(id)),
+				focusOnSelect: !isParent,
+				selectedVillaId,
+				onRefresh: () => {},
+				refreshLabel: "Updated 14 min ago",
+				monochrome: isParent,
+				mapScaledOut,
+				mapBlurred,
+				chromeHidden
+			}, `sat-${view}-${level}`) : /* @__PURE__ */ jsx(SiteImageViewer, {
+				className: "wwc:size-full",
+				backgroundUrl: map.backgroundUrl,
+				villas: map.villas,
+				blocks: isParent ? void 0 : map.blocks,
+				imageWidth: map.imageWidth,
+				imageHeight: map.imageHeight,
+				mapMode,
+				onMapModeChange,
+				onSelectVilla: isParent ? (id) => onDrillDown(String(id)) : (id) => onSelectVilla(String(id)),
+				focusOnSelect: !isParent,
+				selectedVillaId,
+				onRefresh: () => {},
+				refreshLabel: "Updated 14 min ago",
+				showPolygons,
+				monochrome: isParent,
+				showLabels,
+				mapScaledOut,
+				mapBlurred,
+				chromeHidden
+			}, map.contentKey),
+			showSpinner && /* @__PURE__ */ jsx("div", {
+				className: "wwc:pointer-events-none wwc:absolute wwc:inset-0 wwc:z-30 wwc:flex wwc:items-center wwc:justify-center",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "wwc:flex wwc:size-12 wwc:items-center wwc:justify-center wwc:rounded-full wwc:bg-card/90 wwc:shadow-lg wwc:backdrop-blur-sm",
+					children: /* @__PURE__ */ jsx(Spinner, { className: "wwc:size-6 wwc:text-primary" })
+				})
+			}),
+			jumpToast ? /* @__PURE__ */ jsx("div", {
+				className: cn("wwc:absolute wwc:left-1/2 wwc:top-[84px] wwc:z-20 wwc:-translate-x-1/2", chromeFade),
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("wwc:duration-300 wwc:ease-out", jumpToastLeaving ? "wwc:animate-out wwc:fade-out wwc:slide-out-to-top-4 wwc:fill-mode-forwards" : "wwc:animate-in wwc:fade-in wwc:slide-in-from-top-4"),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "wwc:whitespace-nowrap wwc:rounded-full wwc:border wwc:border-border wwc:bg-card/95 wwc:px-3.5 wwc:py-1.5 wwc:text-sm wwc:font-medium wwc:shadow-lg wwc:backdrop-blur-sm",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:text-muted-foreground",
+							children: "Jumped to "
+						}), /* @__PURE__ */ jsx("span", {
+							className: "wwc:text-foreground",
+							children: jumpToast
+						})]
+					})
+				})
+			}) : null
+		]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "wwc:absolute wwc:bottom-3 wwc:z-30 wwc:transition-[left] wwc:duration-300 wwc:ease-in-out",
+		style: { left: layersOffsetLeft },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: chromeFade,
+			children: [layersOpen && /* @__PURE__ */ jsxs("div", {
+				className: "wwc:absolute wwc:bottom-full wwc:left-0 wwc:mb-2 wwc:w-[300px] wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:shadow-xl",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-center wwc:justify-between wwc:border-b wwc:border-border wwc:px-3 wwc:py-2.5",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "wwc:flex wwc:items-center wwc:gap-2 wwc:text-sm wwc:font-semibold",
+						children: [/* @__PURE__ */ jsx(Layers, { className: "wwc:size-4 wwc:text-muted-foreground" }), "Map layers"]
+					}), /* @__PURE__ */ jsx(Button, {
+						icon: true,
+						size: "sm",
+						variant: "ghost",
+						"aria-label": "Close map layers",
+						onClick: () => setLayersOpen(false),
+						children: /* @__PURE__ */ jsx(X, { className: "wwc:size-4" })
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "wwc:flex wwc:flex-col wwc:gap-1 wwc:p-2",
+					children: show3dLayers ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-center wwc:gap-2.5 wwc:rounded-md wwc:px-2 wwc:py-2",
+							children: [
+								/* @__PURE__ */ jsx(Box, { className: "wwc:size-4 wwc:shrink-0 wwc:text-muted-foreground" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "wwc:min-w-0 wwc:flex-1 wwc:truncate wwc:text-sm",
+									children: "Reality mesh"
+								}),
+								/* @__PURE__ */ jsx(Switch, {
+									checked: mesh3dOn,
+									onCheckedChange: onMesh3dOnChange,
+									"aria-label": "Reality mesh"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:flex-col wwc:gap-2 wwc:rounded-md wwc:px-2 wwc:py-2",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:items-center wwc:gap-2.5",
+								children: [
+									/* @__PURE__ */ jsx(LayoutGrid, { className: "wwc:size-4 wwc:shrink-0 wwc:text-muted-foreground" }),
+									/* @__PURE__ */ jsx("span", {
+										className: "wwc:min-w-0 wwc:flex-1 wwc:truncate wwc:text-sm",
+										children: "Progress model"
+									}),
+									/* @__PURE__ */ jsx(Switch, {
+										checked: model3dOn,
+										onCheckedChange: onModel3dOnChange,
+										"aria-label": "Progress model"
+									})
+								]
+							}), model3dOn ? /* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:items-center wwc:gap-2 wwc:pl-6",
+								children: [/* @__PURE__ */ jsx(Slider, {
+									value: [Math.round(model3dOpacity * 100)],
+									max: 100,
+									step: 5,
+									onValueChange: (v) => onModel3dOpacityChange((v[0] ?? 0) / 100),
+									"aria-label": "Progress model opacity",
+									className: "wwc:flex-1"
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "wwc:w-9 wwc:shrink-0 wwc:text-right wwc:text-[11px] wwc:tabular-nums wwc:text-muted-foreground",
+									children: [Math.round(model3dOpacity * 100), "%"]
+								})]
+							}) : null]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-center wwc:gap-2.5 wwc:rounded-md wwc:px-2 wwc:py-2",
+							children: [
+								/* @__PURE__ */ jsx(Tag, { className: "wwc:size-4 wwc:shrink-0 wwc:text-muted-foreground" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "wwc:min-w-0 wwc:flex-1 wwc:truncate wwc:text-sm",
+									children: "Progress colours"
+								}),
+								/* @__PURE__ */ jsx(Switch, {
+									checked: progressColours,
+									disabled: !model3dOn,
+									onCheckedChange: onProgressColoursChange,
+									"aria-label": "Progress colours"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-center wwc:gap-2.5 wwc:rounded-md wwc:px-2 wwc:py-2",
+							children: [
+								/* @__PURE__ */ jsx(Tag, { className: "wwc:size-4 wwc:shrink-0 wwc:text-muted-foreground" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "wwc:min-w-0 wwc:flex-1 wwc:truncate wwc:text-sm",
+									children: "Villa labels"
+								}),
+								/* @__PURE__ */ jsx(Switch, {
+									checked: showLabels,
+									onCheckedChange: onShowLabelsChange,
+									"aria-label": "Villa labels"
+								})
+							]
+						})
+					] }) : twoDLayers.map((row) => {
+						const Icon = row.icon;
+						const readOnly = !row.onToggle;
+						return /* @__PURE__ */ jsxs("div", {
+							className: cn("wwc:flex wwc:flex-row wwc:items-center wwc:gap-2.5 wwc:rounded-md wwc:px-2 wwc:py-2", readOnly && "wwc:opacity-60"),
+							children: [
+								/* @__PURE__ */ jsx(Icon, { className: "wwc:size-4 wwc:shrink-0 wwc:text-muted-foreground" }),
+								/* @__PURE__ */ jsx("span", {
+									className: "wwc:min-w-0 wwc:flex-1 wwc:truncate wwc:text-sm",
+									children: row.label
+								}),
+								/* @__PURE__ */ jsx(Switch, {
+									checked: row.checked,
+									disabled: readOnly,
+									onCheckedChange: (checked) => row.onToggle?.(checked),
+									"aria-label": row.label
+								})
+							]
+						}, row.id);
+					})
+				})]
+			}), /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-label": "Map layers",
+				"aria-expanded": layersOpen,
+				onClick: () => setLayersOpen((o) => !o),
+				className: cn("wwc:flex wwc:items-center wwc:gap-2 wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card/95 wwc:px-3 wwc:py-2 wwc:text-sm wwc:font-medium wwc:shadow-lg wwc:backdrop-blur-sm wwc:transition-colors wwc:hover:bg-accent", layersOpen && "wwc:border-primary wwc:text-primary"),
+				children: [/* @__PURE__ */ jsx(SlidersHorizontal, { className: "wwc:size-4" }), "Layers"]
+			})]
+		})
+	})] });
+}
+//#endregion
+export { BuildingViewer, BuildingViewer as default };
+
+//# sourceMappingURL=building-viewer.mjs.map