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

package/dist/pages/capture-ui-enhanced.mjs

@@ -0,0 +1,915 @@
+import { Badge } from "../badge.mjs";
+import { Button } from "../button.mjs";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../dialog.mjs";
+import { useMapTransition } from "../map-transition.mjs";
+import { approvedProgressToBucket, classifyVariance } from "../site-image-viewer/milestone-ramp.mjs";
+import { PROGRESS_LEGEND_ITEMS, VARIANCE_LEGEND_ITEMS } from "../site-image-viewer/legend-items.mjs";
+import { BuildingViewer } from "../building-viewer.mjs";
+import { ProgressSheet } from "../progress-sheet.mjs";
+import { ALMANAR_BATCHES, ALMANAR_PHASES, ALMANAR_PHASE_META, ALMANAR_SITE_META, ALMANAR_VILLAS, ALMANAR_ZONES, ALMANAR_ZONES_MARKETING, ALMANAR_ZONE_A_BLOCKS, ALMANAR_ZONE_B_BLOCKS, ALMANAR_ZONE_B_META, ALMANAR_ZONE_B_VILLAS, ALMANAR_ZONE_MARKETING_META, ALMANAR_ZONE_META } from "../site-image-viewer-fixtures.mjs";
+import { SitePanel } from "../site-panel.mjs";
+import { SiteToolbar } from "../site-toolbar.mjs";
+import { ALMANAR_VILLA_BLOCK } from "./almanar-blocks-data.mjs";
+import { ALMANAR_HIERARCHY } from "./almanar-hierarchy-data.mjs";
+import { ALMANAR_BATCHES_BY_ZONE, ALMANAR_BLOCKS_BY_ZONE, ALMANAR_VILLA_BATCH, ALMANAR_VILLA_BLOCK_NAME } from "./almanar-villa-taxonomy.mjs";
+import { DRONE_THUMB, PLAN_THUMB } from "./view-mode-thumbs.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Box, Boxes, Home, Layers, LayoutGrid, Map as Map$1, X } from "lucide-react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/pages/capture-ui-enhanced.tsx
+const MONTHS = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+const fmtDate = (d) => `${MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+/**
+* Weekly reality-capture runs — one tick per week. Week 122 is the current Sep 5–11, 2026 window. Dates
+* are generated from that anchor so month boundaries (the first week that starts a new month) can be
+* flagged; those ticks render the month name in place of the week number.
+*/
+const TIMELINE_WEEKS_DEFAULT = (() => {
+	const anchor = new Date(2026, 8, 5);
+	const anchorNum = 122;
+	const DAY = 864e5;
+	const raw = [];
+	for (let n = 88; n <= 123; n++) {
+		const start = new Date(anchor.getTime() + (n - anchorNum) * 7 * DAY);
+		raw.push({
+			value: String(n),
+			num: n,
+			start,
+			end: new Date(start.getTime() + 6 * DAY)
+		});
+	}
+	return raw.map((w, i) => ({
+		...w,
+		monthStart: i > 0 && w.start.getMonth() !== raw[i - 1].start.getMonth(),
+		monthLabel: MONTHS[w.start.getMonth()]
+	}));
+})();
+/** Map a villa name's type code to a human label (e.g. "2279 VL6-L" → "Villa"). */
+const VILLA_TYPE_LABELS = {
+	TH: "Townhouse",
+	DT: "Detached",
+	VL: "Villa",
+	VD: "Villa Duplex",
+	DP: "Duplex"
+};
+function villaTypeLabel(name) {
+	const code = name.match(/[A-Z]{2}/)?.[0];
+	return code && VILLA_TYPE_LABELS[code] || "Unit";
+}
+/** Map SiteImageViewer villa footprints to the left-rail row shape, so the list matches what's drawn. */
+function villaRows(villas) {
+	return villas.map((v) => ({
+		id: String(v.id),
+		name: v.name,
+		meta: `${villaTypeLabel(v.name)} · Plot ${v.plotNumber}`,
+		approved: Math.round(v.approvedProgressPercent ?? 0),
+		planned: Math.round(v.plannedProgressPercent ?? 0)
+	}));
+}
+/** Zone 1-A's 301 villas over the drone aerial (the default villa view). */
+const VILLAS = villaRows(ALMANAR_VILLAS);
+/**
+* A blank view used when a host supplies a data prop but has no entry for the requested key. Renders no
+* polygons and a neutral (empty) background/label — never bundled fixture content.
+*/
+const EMPTY_VIEW = {
+	villas: [],
+	rows: [],
+	backgroundUrl: "",
+	imageWidth: 0,
+	imageHeight: 0
+};
+const ZONE_VILLA_VIEWS_DEFAULT = {
+	"zone-1-a": {
+		villas: ALMANAR_VILLAS,
+		rows: VILLAS,
+		backgroundUrl: "/site-background.webp",
+		imageWidth: ALMANAR_SITE_META.imageWidth,
+		imageHeight: ALMANAR_SITE_META.imageHeight
+	},
+	"zone-1-b": {
+		villas: ALMANAR_ZONE_B_VILLAS,
+		rows: villaRows(ALMANAR_ZONE_B_VILLAS),
+		backgroundUrl: "/zone1b-villa-blueprint.webp",
+		imageWidth: ALMANAR_ZONE_B_META.imageWidth,
+		imageHeight: ALMANAR_ZONE_B_META.imageHeight
+	}
+};
+/** Every villa across both zones (301 + 432 = 733) — the Reports grid draws one coloured block per villa. */
+const ALL_VILLAS_DEFAULT = [...ALMANAR_VILLAS, ...ALMANAR_ZONE_B_VILLAS];
+/** Map a level's polygons to the left-rail row shape. */
+function toRows(polys) {
+	return polys.map((b) => ({
+		id: String(b.linkedLbsItemId ?? b.id),
+		name: b.name,
+		meta: b.plotNumber ? `${b.plotNumber} units` : "",
+		approved: Math.round(b.approvedProgressPercent ?? 0),
+		planned: Math.round(b.plannedProgressPercent ?? 0)
+	}));
+}
+/**
+* The parent LBS levels for the "Batch" slot. Each level draws its own polygons over its own Capture
+* blueprint image (Batch reuses the villa aerial; Zone/Phase have their own images at their own sizes).
+* `block` is NOT here — it's location-aware (per zone), resolved from BLOCK_VIEWS_DEFAULT below.
+*/
+const LEVEL_VIEW_DEFAULT = {
+	batch: {
+		villas: ALMANAR_BATCHES,
+		rows: toRows(ALMANAR_BATCHES),
+		backgroundUrl: "/site-background.webp",
+		imageWidth: ALMANAR_SITE_META.imageWidth,
+		imageHeight: ALMANAR_SITE_META.imageHeight
+	},
+	zone: {
+		villas: ALMANAR_ZONES_MARKETING,
+		rows: toRows(ALMANAR_ZONES_MARKETING),
+		backgroundUrl: "/zone-marketing-blueprint.webp",
+		imageWidth: ALMANAR_ZONE_MARKETING_META.imageWidth,
+		imageHeight: ALMANAR_ZONE_MARKETING_META.imageHeight
+	},
+	phase: {
+		villas: ALMANAR_PHASES,
+		rows: toRows(ALMANAR_PHASES),
+		backgroundUrl: "/phase-blueprint.webp",
+		imageWidth: ALMANAR_PHASE_META.imageWidth,
+		imageHeight: ALMANAR_PHASE_META.imageHeight
+	}
+};
+/**
+* Block level — the ROSHN Batch → BLOCK grouping, ONE hull polygon per block. The block hulls are authored in
+* the SAME 4096×4096 pixel space as each zone's villa footprints (the marketing render, blueprint 6363/6364),
+* so the block level reuses the EXACT SAME background image as that zone's villa view (`site-background.webp`
+* for Zone 1-A, `zone1b-villa-blueprint.webp` for Zone 1-B). Same URL + dims ⇒ switching villa/batch ↔ block
+* only swaps the polygons, never reloads the image. Location-aware: the stepper picks which zone's blocks show.
+*/
+const BLOCK_VIEWS_DEFAULT = {
+	"zone-1-a": {
+		villas: ALMANAR_ZONE_A_BLOCKS,
+		rows: toRows(ALMANAR_ZONE_A_BLOCKS),
+		backgroundUrl: ZONE_VILLA_VIEWS_DEFAULT["zone-1-a"].backgroundUrl,
+		imageWidth: ZONE_VILLA_VIEWS_DEFAULT["zone-1-a"].imageWidth,
+		imageHeight: ZONE_VILLA_VIEWS_DEFAULT["zone-1-a"].imageHeight
+	},
+	"zone-1-b": {
+		villas: ALMANAR_ZONE_B_BLOCKS,
+		rows: toRows(ALMANAR_ZONE_B_BLOCKS),
+		backgroundUrl: ZONE_VILLA_VIEWS_DEFAULT["zone-1-b"].backgroundUrl,
+		imageWidth: ZONE_VILLA_VIEWS_DEFAULT["zone-1-b"].imageWidth,
+		imageHeight: ZONE_VILLA_VIEWS_DEFAULT["zone-1-b"].imageHeight
+	}
+};
+const VILLA_SATELLITE_DEFAULT = {
+	backgroundUrl: "/villa-satellite-blueprint.webp",
+	villas: [],
+	imageWidth: 895,
+	imageHeight: 756
+};
+const ZONE_SATELLITE_DEFAULT = {
+	backgroundUrl: "/zone-blueprint.webp",
+	villas: ALMANAR_ZONES,
+	imageWidth: ALMANAR_ZONE_META.imageWidth,
+	imageHeight: ALMANAR_ZONE_META.imageHeight
+};
+/**
+* Distribution over the SiteImageViewer's ramps — the same buckets, labels, and colours the map polygons
+* + legend use, with each bucket's real count for the given rows. SPA = milestone ramp (M35…M100 by
+* approved %), Construction = variance (behind / on-track / ahead of plan). Works for either level.
+*/
+function distributionFor(rows, mode) {
+	if (mode === "variance") return VARIANCE_LEGEND_ITEMS.filter((item) => [
+		"behind",
+		"onTrack",
+		"ahead"
+	].includes(item.id)).map((b) => ({
+		id: b.id,
+		label: b.label,
+		range: b.description,
+		color: b.color,
+		count: rows.filter((v) => classifyVariance(v.approved, v.planned) === b.id).length
+	}));
+	return PROGRESS_LEGEND_ITEMS.filter((item) => item.id.startsWith("ms")).map((b) => ({
+		id: b.id,
+		label: b.label,
+		range: b.description,
+		color: b.color,
+		count: rows.filter((v) => approvedProgressToBucket(v.approved) === b.id).length
+	}));
+}
+const FLOORS = [
+	{
+		code: "RF",
+		value: 76,
+		status: "ahead"
+	},
+	{
+		code: "UF",
+		value: 22,
+		status: "behind"
+	},
+	{
+		code: "FF",
+		value: 54,
+		status: "on-track"
+	},
+	{
+		code: "GF",
+		value: 39,
+		status: "behind"
+	},
+	{
+		code: "SS",
+		value: 94,
+		status: "ahead"
+	}
+];
+/** The zones under Phase 1 — the current-location stepper cycles between them (prev/next arrows). Each has
+*  its own villa overlay (see `ZONE_VILLA_VIEWS`). */
+const LOCATIONS = [{
+	id: "zone-1-a",
+	label: "Zone 1 – A"
+}, {
+	id: "zone-1-b",
+	label: "Zone 1 – B"
+}];
+/**
+* The site tree for the CanvasNavigator — the real Al Manar hierarchy from `almanar-hierarchy-data`:
+* Phase 1 (the header) → Zone → Batch → Villa (blocks + construction systems collapsed away). Villa leaves
+* resolve to their app row id so selecting one opens that villa; `NAV_VILLA_ZONE` records each leaf's zone.
+*/
+const rowByNumber = (villas) => {
+	const m = /* @__PURE__ */ new Map();
+	for (const v of villas) {
+		const n = v.name.match(/^\d+/)?.[0];
+		if (n && !m.has(n)) m.set(n, v);
+	}
+	return m;
+};
+const ROW_BY_NUMBER = {
+	"zone-1-a": rowByNumber(ALMANAR_VILLAS),
+	"zone-1-b": rowByNumber(ALMANAR_ZONE_B_VILLAS)
+};
+/** Villa row id → its zone, so the navigator's onSelect can switch to the right zone before opening it. */
+const NAV_VILLA_ZONE_DEFAULT = /* @__PURE__ */ new Map();
+function blockNodesForBatch(loc, batchName, villaNumbers) {
+	const groups = /* @__PURE__ */ new Map();
+	const order = [];
+	for (const num of villaNumbers) {
+		const v = ROW_BY_NUMBER[loc]?.get(num);
+		if (!v) continue;
+		const id = String(v.id);
+		NAV_VILLA_ZONE_DEFAULT.set(id, loc);
+		const block = ALMANAR_VILLA_BLOCK[num] ?? "";
+		const key = block || "unassigned";
+		let group = groups.get(key);
+		if (!group) {
+			group = {
+				block,
+				villas: []
+			};
+			groups.set(key, group);
+			order.push(key);
+		}
+		group.villas.push({
+			id,
+			label: v.name,
+			icon: /* @__PURE__ */ jsx(Home, { className: "wwc:size-4" })
+		});
+	}
+	order.sort((a, b) => {
+		if (a === "unassigned") return 1;
+		if (b === "unassigned") return -1;
+		return Number(a) - Number(b);
+	});
+	return order.map((key) => {
+		const group = groups.get(key) ?? {
+			block: "",
+			villas: []
+		};
+		return {
+			id: `block::${loc}::${batchName}::${key}`,
+			label: group.block ? `Block ${group.block}` : "Unassigned",
+			icon: /* @__PURE__ */ jsx(Boxes, { className: "wwc:size-4" }),
+			children: group.villas
+		};
+	});
+}
+const NAV_NODES_DEFAULT = LOCATIONS.map((loc) => ({
+	id: loc.id,
+	label: loc.label,
+	icon: /* @__PURE__ */ jsx(Map$1, { className: "wwc:size-4" }),
+	children: (ALMANAR_HIERARCHY[loc.id] ?? []).map((batch) => ({
+		id: `batch::${loc.id}::${batch.name}`,
+		label: batch.units ? `${batch.name} · ${batch.units} units` : batch.name,
+		icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "wwc:size-4" }),
+		children: blockNodesForBatch(loc.id, batch.name, batch.villaNumbers)
+	}))
+}));
+/**
+* Map a zone polygon's `id` → its `ZONE_VILLA_VIEWS` location, so clicking a zone on the map drills into the
+* matching zone's villas (not always Zone 1-A). Built from every zone-level dataset (marketing + satellite),
+* keyed on the same id the rows use; the trailing "A"/"B" of the name picks the location.
+*/
+const ZONE_LOCATION_BY_ID = {};
+for (const z of [...ALMANAR_ZONES_MARKETING, ...ALMANAR_ZONES]) {
+	const last = z.name.trim().slice(-1).toLowerCase();
+	const loc = last === "a" ? "zone-1-a" : last === "b" ? "zone-1-b" : null;
+	if (loc) ZONE_LOCATION_BY_ID[String(z.linkedLbsItemId ?? z.id)] = loc;
+}
+/** Right toolbar group — view modes, each shown as a thumbnail button (Layers-button visual). The thumbnails
+*  are bundled into the design system (inline data-URIs in `./view-mode-thumbs`), so they're a constant of
+*  the template and need no host-served public files. */
+const MODE_TABS = [{
+	id: "3d",
+	label: "Reality",
+	icon: Box,
+	thumb: DRONE_THUMB
+}, {
+	id: "plan",
+	label: "Plan",
+	icon: Map$1,
+	thumb: PLAN_THUMB
+}];
+/** Grouping levels for the "Batch" slot — a hover dropdown swaps the slot's label + icon. Ordered finest →
+*  coarsest: Block → Batch → Zone → Phase. */
+const LEVELS = [
+	{
+		id: "block",
+		label: "Block",
+		noun: "blocks",
+		icon: Boxes
+	},
+	{
+		id: "batch",
+		label: "Batch",
+		noun: "batches",
+		icon: LayoutGrid
+	},
+	{
+		id: "zone",
+		label: "Zone",
+		noun: "zones",
+		icon: Map$1
+	},
+	{
+		id: "phase",
+		label: "Phase",
+		noun: "phases",
+		icon: Layers
+	}
+];
+/** Prefix shown on each filter chip so the value reads in context (e.g. "Block: Block-02", "Milestone: M50"). */
+const FILTER_KIND_LABEL = {
+	batch: "Batch",
+	block: "Block",
+	milestone: "Milestone",
+	variance: "Variance"
+};
+function CaptureUiEnhanced(props = {}) {
+	const ZONE_VILLA_VIEWS = props.zoneViews ?? ZONE_VILLA_VIEWS_DEFAULT;
+	const ALL_VILLAS = props.allVillas ?? ALL_VILLAS_DEFAULT;
+	const villaByPlot = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const [location, view] of Object.entries(ZONE_VILLA_VIEWS)) for (const r of view.rows) {
+			const plot = r.name.match(/^\d+/)?.[0];
+			if (plot && !m.has(plot)) m.set(plot, {
+				location,
+				id: r.id
+			});
+		}
+		return m;
+	}, [ZONE_VILLA_VIEWS]);
+	const LEVEL_VIEW = props.levelViews ?? LEVEL_VIEW_DEFAULT;
+	const BLOCK_VIEWS = props.blockViews ?? BLOCK_VIEWS_DEFAULT;
+	const VILLA_SATELLITE = props.satelliteViews ? props.satelliteViews.villa ?? null : VILLA_SATELLITE_DEFAULT;
+	const ZONE_SATELLITE = props.satelliteViews ? props.satelliteViews.zone ?? null : ZONE_SATELLITE_DEFAULT;
+	const NAV_NODES = props.navNodes ?? NAV_NODES_DEFAULT;
+	const NAV_VILLA_ZONE = props.villaZoneById ?? NAV_VILLA_ZONE_DEFAULT;
+	const TIMELINE_WEEKS = props.timeline && props.timeline.length > 0 ? props.timeline : TIMELINE_WEEKS_DEFAULT;
+	const [screen] = useState("screen-1");
+	const [query, setQuery] = useState("");
+	const [filters, setFilters] = useState([]);
+	const [searchOpen, setSearchOpen] = useState(false);
+	const [selectedId, setSelectedId] = useState("");
+	const [mapMode, setMapMode] = useState("progress");
+	const [view, setView] = useState("villa");
+	const [mode, setMode] = useState("3d");
+	const [level, setLevel] = useState("batch");
+	const activeLevel = LEVELS.find((l) => l.id === level) ?? LEVELS[0];
+	const [currentLocation, setCurrentLocation] = useState("zone-1-a");
+	const locationIndex = Math.max(0, LOCATIONS.findIndex((l) => l.id === currentLocation));
+	const currentLoc = LOCATIONS[locationIndex] ?? LOCATIONS[0];
+	const realityViewerRef = useRef(null);
+	const [mesh3dOn, setMesh3dOn] = useState(true);
+	const mesh3dOpacity = 1;
+	const [model3dOn, setModel3dOn] = useState(true);
+	const [model3dOpacity, setModel3dOpacity] = useState(.85);
+	const [progressColours, setProgressColours] = useState(true);
+	const [threeDLoaded, setThreeDLoaded] = useState(true);
+	const [jumpToast, setJumpToast] = useState(null);
+	const [jumpToastLeaving, setJumpToastLeaving] = useState(false);
+	const jumpToastTimers = useRef([]);
+	const showJumpToast = (label) => {
+		jumpToastTimers.current.forEach((t) => window.clearTimeout(t));
+		setJumpToast(label);
+		setJumpToastLeaving(false);
+		jumpToastTimers.current = [window.setTimeout(() => setJumpToastLeaving(true), 2200), window.setTimeout(() => {
+			setJumpToast(null);
+			setJumpToastLeaving(false);
+		}, 2500)];
+	};
+	const mapTx = useMapTransition();
+	const selectView = (id) => {
+		if (id === view && mode !== "3d") return;
+		if (id === "villa" && view === "batch" && level !== "batch" && level !== "block") showJumpToast(currentLoc.label);
+		const apply = () => {
+			setView(id);
+			if (id === "villa" && level !== "batch" && level !== "block") setLevel("batch");
+			setSelectedId("");
+			setDetailOpen(false);
+			if (mode === "3d") setMode("plan");
+		};
+		if (mode === "3d") mapTx.run(apply);
+		else apply();
+	};
+	const toVillaLevel = () => {
+		setView("villa");
+		if (level !== "batch" && level !== "block") setLevel("batch");
+	};
+	const toSiteLevel = () => {
+		setView("batch");
+		setLevel("phase");
+		setSelectedId("");
+		setDetailOpen(false);
+	};
+	const selectMode = (m) => {
+		if (m === mode) return;
+		if (m === "satellite" && !satelliteBasemap) return;
+		const leaving3d = mode === "3d";
+		const entering3d = m === "3d";
+		const villaSelected = !!(selectedId && detailOpen);
+		const apply = () => {
+			setMode(m);
+			if (entering3d) {
+				setMapMode("progress");
+				setThreeDLoaded(true);
+				toVillaLevel();
+			} else if (leaving3d) {
+				const zoomedIn = realityViewerRef.current?.isZoomedIn() ?? false;
+				if (villaSelected || zoomedIn) toVillaLevel();
+				else toSiteLevel();
+			}
+		};
+		if (entering3d || leaving3d) mapTx.run(apply);
+		else apply();
+	};
+	const selectLevel = (id) => {
+		if (id === level && view === "batch" && mode !== "3d") return;
+		const apply = () => {
+			setLevel(id);
+			setView("batch");
+			setSelectedId("");
+			setDetailOpen(false);
+			if (mode === "3d") setMode("plan");
+		};
+		if ((id === "batch" || id === "block") && mode !== "3d") apply();
+		else mapTx.run(apply);
+	};
+	const stepLocation = (delta) => {
+		const next = LOCATIONS[(locationIndex + delta + LOCATIONS.length) % LOCATIONS.length].id;
+		if (next === currentLocation) return;
+		mapTx.run(() => setCurrentLocation(next));
+	};
+	const mapScaledOut = mapTx.scaledOut || !!props.mapLoading;
+	const mapBlurred = mapTx.blurred || !!props.mapLoading;
+	const keep3dMounted = mode === "3d" || threeDLoaded;
+	const [detailOpen, setDetailOpen] = useState(false);
+	const closeDetail = () => {
+		setDetailOpen(false);
+	};
+	const [capture, setCapture] = useState(props.initialWeek ?? TIMELINE_WEEKS[TIMELINE_WEEKS.length - 1]?.value ?? "122");
+	useEffect(() => {
+		if (props.initialWeek) setCapture(props.initialWeek);
+	}, [props.initialWeek]);
+	const [detailTab, setDetailTab] = useState("overview");
+	const selectedWeek = TIMELINE_WEEKS[Math.max(0, TIMELINE_WEEKS.findIndex((w) => w.value === capture))] ?? TIMELINE_WEEKS[TIMELINE_WEEKS.length - 1];
+	const rangeLabel = `${fmtDate(selectedWeek.start)} – ${fmtDate(selectedWeek.end)}`;
+	const [reportsOpen, setReportsOpen] = useState(false);
+	const chromeFade = cn("wwc:transition-opacity wwc:duration-500", reportsOpen && "wwc:pointer-events-none wwc:opacity-0");
+	const [reportScrollY, setReportScrollY] = useState(0);
+	useEffect(() => {
+		if (level !== "batch" && level !== "block") setThreeDLoaded(false);
+	}, [level]);
+	const firstWeek = TIMELINE_WEEKS[0];
+	const lastWeek = TIMELINE_WEEKS[TIMELINE_WEEKS.length - 1];
+	const [blueprintsOpen, setBlueprintsOpen] = useState(false);
+	const bodyRef = useRef(null);
+	const panelRef = useRef(null);
+	const [sidebarFull, setSidebarFull] = useState(false);
+	const [maxPanelH, setMaxPanelH] = useState(void 0);
+	useLayoutEffect(() => {
+		const measure = () => {
+			const body = bodyRef.current;
+			const panel = panelRef.current;
+			if (!body || !panel) return;
+			const avail = body.clientHeight - 24;
+			setMaxPanelH(avail);
+			setSidebarFull(panel.scrollHeight > avail + 2);
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		if (bodyRef.current) ro.observe(bodyRef.current);
+		if (panelRef.current) ro.observe(panelRef.current);
+		window.addEventListener("resize", measure);
+		return () => {
+			ro.disconnect();
+			window.removeEventListener("resize", measure);
+		};
+	}, [
+		currentLocation,
+		detailOpen,
+		query
+	]);
+	const [showPolygons, setShowPolygons] = useState(true);
+	const [showLabels, setShowLabels] = useState(true);
+	const isParent = view === "batch";
+	const locationLabel = level === "batch" || level === "block" ? currentLoc.label : level === "zone" ? "Phase 1" : "Almanar";
+	const levelView = level === "block" ? BLOCK_VIEWS[currentLocation] ?? BLOCK_VIEWS["zone-1-a"] ?? Object.values(BLOCK_VIEWS)[0] ?? EMPTY_VIEW : LEVEL_VIEW[level] ?? EMPTY_VIEW;
+	const zoneVilla = ZONE_VILLA_VIEWS[currentLocation] ?? ZONE_VILLA_VIEWS["zone-1-a"] ?? Object.values(ZONE_VILLA_VIEWS)[0] ?? EMPTY_VIEW;
+	const activeRowsFull = isParent ? levelView.rows : zoneVilla.rows;
+	const drawnVillas = isParent ? levelView.villas : zoneVilla.villas;
+	const q = query.trim().toLowerCase();
+	const filtersByKind = useMemo(() => {
+		const m = {
+			batch: [],
+			block: [],
+			milestone: [],
+			variance: []
+		};
+		for (const f of filters) m[f.kind].push(f.value);
+		return m;
+	}, [filters]);
+	const rowMatchesFilters = (r) => {
+		const plot = r.name.match(/^\d+/)?.[0];
+		if (filtersByKind.milestone.length && !filtersByKind.milestone.includes(approvedProgressToBucket(r.approved))) return false;
+		if (filtersByKind.variance.length && !filtersByKind.variance.includes(classifyVariance(r.approved, r.planned))) return false;
+		if (plot && filtersByKind.batch.length && !filtersByKind.batch.includes(ALMANAR_VILLA_BATCH[plot])) return false;
+		if (plot && filtersByKind.block.length && !filtersByKind.block.includes(ALMANAR_VILLA_BLOCK_NAME[plot])) return false;
+		return true;
+	};
+	const rowVisible = (r) => (!q || r.name.toLowerCase().includes(q) || r.meta.toLowerCase().includes(q)) && rowMatchesFilters(r);
+	const filterActive = q.length > 0 || filters.length > 0;
+	const visibleRows = filterActive ? activeRowsFull.filter(rowVisible) : activeRowsFull;
+	const villaRowId = (v) => isParent ? String(v.linkedLbsItemId ?? v.id) : String(v.id);
+	const visibleRowIds = useMemo(() => new Set(visibleRows.map((r) => r.id)), [visibleRows]);
+	const visibleVillas = filterActive ? drawnVillas.filter((v) => visibleRowIds.has(villaRowId(v))) : drawnVillas;
+	const visiblePlots = filterActive ? visibleVillas.map((v) => v.name.match(/^\d+/)?.[0] ?? v.plotNumber).filter((p) => Boolean(p)) : null;
+	const unitNoun = isParent ? activeLevel.noun : "villas";
+	const unitNounSingular = isParent ? activeLevel.label.toLowerCase() : "villa";
+	const countNoun = visibleRows.length === 1 ? unitNounSingular : unitNoun;
+	const filterOptions = useMemo(() => ({
+		batches: (ALMANAR_BATCHES_BY_ZONE[currentLocation] ?? []).map((name) => ({
+			value: name,
+			label: name
+		})),
+		blocks: (ALMANAR_BLOCKS_BY_ZONE[currentLocation] ?? []).map((name) => ({
+			value: name,
+			label: name
+		})),
+		milestones: PROGRESS_LEGEND_ITEMS.filter((i) => i.id.startsWith("ms")).map((i) => ({
+			value: i.id,
+			label: i.label
+		})),
+		variances: VARIANCE_LEGEND_ITEMS.filter((i) => [
+			"behind",
+			"onTrack",
+			"ahead"
+		].includes(i.id)).map((i) => ({
+			value: i.id,
+			label: i.label
+		}))
+	}), [currentLocation]);
+	const satelliteBasemap = view === "villa" && currentLocation === "zone-1-a" ? VILLA_SATELLITE : view === "batch" && level === "zone" ? ZONE_SATELLITE : null;
+	const hasSatellite = satelliteBasemap !== null;
+	const polyNoun = view === "villa" ? "Villa" : activeLevel.label;
+	const selected = activeRowsFull.find((v) => v.id === selectedId) ?? activeRowsFull[0];
+	const selectedNumber = selected.name.match(/^\d+/)?.[0] ?? selected.name;
+	const selectedBatch = (ALMANAR_HIERARCHY[currentLocation] ?? []).find((b) => b.villaNumbers.includes(selectedNumber));
+	const selectedBlock = ALMANAR_VILLA_BLOCK[selectedNumber];
+	const selectedPath = [
+		"Phase 1",
+		currentLoc.label,
+		selectedBatch?.name,
+		selectedBlock ? `Block ${selectedBlock}` : void 0,
+		selected.name
+	].filter(Boolean).join(" / ");
+	const distribution = useMemo(() => distributionFor(visibleRows, mapMode), [visibleRows, mapMode]);
+	const selectedSiteVilla = zoneVilla?.villas.find((v) => String(v.id) === selected.id);
+	const detailVilla = {
+		id: selected.id,
+		lbsItemId: selectedSiteVilla?.linkedLbsItemId ?? null,
+		name: selected.name,
+		plotNumber: selectedSiteVilla?.plotNumber ?? ""
+	};
+	useEffect(() => {
+		if (props.hideFloors && detailTab === "floors" || props.hideEvidence && detailTab === "evidence" || props.hideActivities && detailTab === "activities") setDetailTab("overview");
+	}, [
+		props.hideFloors,
+		props.hideEvidence,
+		props.hideActivities,
+		detailTab
+	]);
+	useEffect(() => {
+		if (props.hide3d && mode === "3d") setMode("plan");
+	}, [props.hide3d, mode]);
+	const openVilla = (id) => {
+		setSelectedId(id);
+		setDetailOpen(true);
+	};
+	const handleSelectVilla = (idOrPlot) => {
+		const hit = villaByPlot.get(idOrPlot);
+		if (hit) {
+			if (hit.location !== currentLocation) setCurrentLocation(hit.location);
+			openVilla(hit.id);
+			return;
+		}
+		openVilla(idOrPlot);
+	};
+	const handleViewerReady = (api) => {
+		realityViewerRef.current = api;
+	};
+	const handleNavigate = (node) => {
+		const id = node.id;
+		if (LOCATIONS.some((l) => l.id === id)) {
+			if (id !== currentLocation || view !== "villa") mapTx.run(() => {
+				setCurrentLocation(id);
+				setView("villa");
+				setLevel("batch");
+			});
+			return;
+		}
+		if (id.startsWith("batch::") || id.startsWith("block::")) {
+			const zoneOfGroup = id.split("::")[1];
+			mapTx.run(() => {
+				setCurrentLocation(zoneOfGroup);
+				setView("villa");
+				setLevel("batch");
+			});
+			return;
+		}
+		const zoneOfVilla = NAV_VILLA_ZONE.get(id);
+		if (zoneOfVilla) mapTx.run(() => {
+			setCurrentLocation(zoneOfVilla);
+			setView("villa");
+			setLevel("batch");
+			setSelectedId(id);
+			setDetailOpen(true);
+		});
+	};
+	const drillDownLevel = (id) => {
+		if (level === "block") {
+			const name = levelView.rows.find((r) => r.id === id)?.name;
+			setView("villa");
+			if (name) setFilters((prev) => prev.some((f) => f.kind === "block" && f.value === name) ? prev : [...prev, {
+				kind: "block",
+				value: name,
+				label: name
+			}]);
+			return;
+		}
+		if (level === "phase") {
+			mapTx.run(() => setLevel("zone"));
+			return;
+		}
+		const loc = ZONE_LOCATION_BY_ID[id];
+		mapTx.run(() => {
+			if (loc) setCurrentLocation(loc);
+			setView("villa");
+			setLevel("batch");
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:h-full wwc:w-full wwc:flex-col wwc:overflow-hidden wwc:bg-background wwc:text-foreground",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: bodyRef,
+			className: "wwc:relative wwc:flex wwc:min-h-0 wwc:flex-1 wwc:flex-row wwc:overflow-hidden",
+			children: screen === "screen-1" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(SitePanel, {
+					view,
+					mode,
+					level,
+					activeLevel,
+					currentLocation,
+					locationLabel,
+					locationIndex,
+					isParent,
+					activeRows: visibleRows,
+					unitNoun,
+					unitNounSingular,
+					countNoun,
+					selectedId,
+					detailOpen,
+					detailVilla,
+					selected,
+					selectedNumber,
+					selectedPath,
+					mapMode,
+					distribution,
+					navNodes: NAV_NODES,
+					chromeFade,
+					maxPanelH,
+					hideFloors: props.hideFloors,
+					hideEvidence: props.hideEvidence,
+					hideActivities: props.hideActivities,
+					hideMilestones: props.hideMilestones,
+					hideSearch: props.hideSearch,
+					searchOpen,
+					query,
+					onQueryChange: setQuery,
+					filters,
+					onFiltersChange: setFilters,
+					filterOptions,
+					captureId: capture,
+					rangeLabel,
+					onSelectVilla: openVilla,
+					onCloseDetail: closeDetail,
+					onStepLocation: stepLocation,
+					onNavigate: handleNavigate,
+					onDrillDown: drillDownLevel,
+					onMapModeChange: setMapMode,
+					onSearchOpenChange: setSearchOpen,
+					onPanelResize: (el) => {
+						panelRef.current = el;
+					},
+					onOpenBlueprints: props.onOpenBlueprints,
+					onOpenWalkthrough: props.onOpenWalkthrough,
+					onOpenProgressDetails: props.onOpenProgressDetails
+				}),
+				/* @__PURE__ */ jsx(BuildingViewer, {
+					mode,
+					view,
+					level,
+					currentLocation,
+					isParent,
+					map: {
+						villas: visibleVillas,
+						blocks: BLOCK_VIEWS[currentLocation]?.villas,
+						backgroundUrl: isParent ? levelView.backgroundUrl : zoneVilla.backgroundUrl,
+						imageWidth: isParent ? levelView.imageWidth : zoneVilla.imageWidth,
+						imageHeight: isParent ? levelView.imageHeight : zoneVilla.imageHeight,
+						contentKey: isParent && level !== "block" ? level : `villa-${currentLocation}`
+					},
+					satelliteBasemap,
+					selectedVillaId: detailOpen && !isParent ? selectedId : void 0,
+					selectedPlot: detailOpen && selectedId ? selectedNumber : void 0,
+					visiblePlots,
+					mapMode,
+					mesh3dOn,
+					mesh3dOpacity,
+					model3dOn,
+					model3dOpacity,
+					progressColours,
+					showLabels,
+					showPolygons,
+					keep3dMounted,
+					mapScaledOut,
+					mapBlurred,
+					showSpinner: mapTx.showSpinner || !!props.mapLoading,
+					chromeHidden: reportsOpen,
+					chromeFade,
+					reportScrollY,
+					jumpToast,
+					jumpToastLeaving,
+					layersOffsetLeft: detailOpen ? 412 : searchOpen ? 372 : sidebarFull ? 340 : 12,
+					polyNoun,
+					onSelectVilla: handleSelectVilla,
+					onDrillDown: drillDownLevel,
+					onMapModeChange: setMapMode,
+					onViewerReady: handleViewerReady,
+					onMesh3dOnChange: setMesh3dOn,
+					onModel3dOnChange: setModel3dOn,
+					onModel3dOpacityChange: setModel3dOpacity,
+					onProgressColoursChange: setProgressColours,
+					onShowLabelsChange: setShowLabels,
+					onShowPolygonsChange: setShowPolygons
+				}),
+				/* @__PURE__ */ jsx(SiteToolbar, {
+					view,
+					mode,
+					level,
+					activeLevel,
+					levels: LEVELS,
+					modeTabs: MODE_TABS,
+					hasSatellite,
+					hide3d: props.hide3d,
+					chromeFade,
+					onSelectView: selectView,
+					onSelectLevel: selectLevel,
+					onSelectMode: selectMode
+				}),
+				filters.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: cn("wwc:pointer-events-none wwc:absolute wwc:left-1/2 wwc:top-20 wwc:z-20 wwc:flex wwc:max-w-[70%] wwc:-translate-x-1/2 wwc:flex-wrap wwc:items-center wwc:justify-center wwc:gap-2", chromeFade),
+					children: filters.map((f) => /* @__PURE__ */ jsxs("span", {
+						className: "wwc:pointer-events-auto wwc:flex wwc:items-center wwc:gap-1.5 wwc:rounded-full wwc:border wwc:border-border wwc:bg-card wwc:py-1 wwc:pl-3 wwc:pr-1.5 wwc:text-xs wwc:font-medium wwc:text-foreground wwc:shadow-md",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "wwc:text-muted-foreground",
+								children: [FILTER_KIND_LABEL[f.kind], ":"]
+							}),
+							f.label,
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": `Remove ${FILTER_KIND_LABEL[f.kind]} ${f.label} filter`,
+								onClick: () => setFilters(filters.filter((x) => !(x.kind === f.kind && x.value === f.value))),
+								className: "wwc:flex wwc:size-4 wwc:items-center wwc:justify-center wwc:rounded-full wwc:text-muted-foreground wwc:transition-colors wwc:hover:bg-accent wwc:hover:text-foreground",
+								children: /* @__PURE__ */ jsx(X, { className: "wwc:size-3" })
+							})
+						]
+					}, `${f.kind}:${f.value}`))
+				}),
+				/* @__PURE__ */ jsx(ProgressSheet, {
+					capture,
+					timeline: TIMELINE_WEEKS,
+					selectedWeek,
+					rangeLabel,
+					firstWeek,
+					lastWeek,
+					reportsOpen,
+					showOnlyProgressionReport: props.showOnlyProgressionReport,
+					chromeFade,
+					allVillas: ALL_VILLAS,
+					progressionData: props.progressionData,
+					onCaptureChange: setCapture,
+					onReportsOpenChange: setReportsOpen,
+					onReportScroll: setReportScrollY
+				})
+			] })
+		}), /* @__PURE__ */ jsx(Dialog, {
+			open: blueprintsOpen,
+			onOpenChange: setBlueprintsOpen,
+			children: /* @__PURE__ */ jsxs(DialogContent, {
+				className: "wwc:max-w-2xl",
+				children: [
+					/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, { children: ["Blueprints — ", selected.name] }), /* @__PURE__ */ jsxs(DialogDescription, { children: [
+						selected.meta,
+						" · capture ",
+						capture,
+						" · ",
+						rangeLabel
+					] })] }),
+					/* @__PURE__ */ jsx("div", {
+						className: "wwc:grid wwc:grid-cols-2 wwc:gap-3",
+						children: FLOORS.map((f) => /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:flex-col wwc:gap-2 wwc:rounded-lg wwc:border wwc:border-border wwc:p-3",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:items-center wwc:justify-between",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "wwc:text-sm wwc:font-medium",
+									children: ["Level ", f.code]
+								}), /* @__PURE__ */ jsxs(Badge, {
+									variant: "secondary",
+									children: [f.value, "%"]
+								})]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:h-24 wwc:items-center wwc:justify-center wwc:rounded-md wwc:bg-muted wwc:text-xs wwc:text-muted-foreground",
+								children: [
+									"Sheet A-",
+									f.code,
+									"-01"
+								]
+							})]
+						}, f.code))
+					}),
+					/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: () => setBlueprintsOpen(false),
+						children: "Close"
+					}), /* @__PURE__ */ jsx(Button, {
+						onClick: () => {
+							props.onOpenBlueprints?.(detailVilla);
+							setBlueprintsOpen(false);
+						},
+						children: "Open in viewer"
+					})] })
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { CaptureUiEnhanced };
+
+//# sourceMappingURL=capture-ui-enhanced.mjs.map