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

package/dist/site-panel.mjs

@@ -0,0 +1,1413 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion.mjs";
+import { Badge } from "./badge.mjs";
+import { Button } from "./button.mjs";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./dialog.mjs";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.mjs";
+import { Input } from "./input.mjs";
+import { MONOCHROME_STYLE, styleForVilla } from "./site-image-viewer/milestone-ramp.mjs";
+import { Separator } from "./separator.mjs";
+import { CanvasNavigator } from "./canvas-navigator.mjs";
+import { ALMANAR_BATCHES, ALMANAR_PHASES, ALMANAR_VILLAS, ALMANAR_ZONES_MARKETING } from "./site-image-viewer-fixtures.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ArrowUpDown, ArrowUpRight, BarChart3, Check, ChevronLeft, ChevronRight, ChevronUp, Clock, Home, Layers, LayoutGrid, Link2, Map, Rotate3d, Ruler, Search, SlidersHorizontal, X } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/site-panel.tsx
+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";
+}
+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)
+	}));
+}
+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)
+	}));
+}
+const SEARCH_LEVELS = [
+	{
+		kind: "villa",
+		label: "Villas",
+		singular: "Villa",
+		icon: Home,
+		rows: villaRows(ALMANAR_VILLAS)
+	},
+	{
+		kind: "batch",
+		label: "Batches",
+		singular: "Batch",
+		icon: LayoutGrid,
+		rows: toRows(ALMANAR_BATCHES)
+	},
+	{
+		kind: "zone",
+		label: "Zones",
+		singular: "Zone",
+		icon: Map,
+		rows: toRows(ALMANAR_ZONES_MARKETING)
+	},
+	{
+		kind: "phase",
+		label: "Phases",
+		singular: "Phase",
+		icon: Layers,
+		rows: toRows(ALMANAR_PHASES)
+	}
+];
+const SEARCH_SORTS = [
+	{
+		id: "relevance",
+		label: "Relevance"
+	},
+	{
+		id: "alpha-asc",
+		label: "Alphabetical (A–Z)"
+	},
+	{
+		id: "alpha-desc",
+		label: "Alphabetical (Z–A)"
+	},
+	{
+		id: "progress-asc",
+		label: "Progress (low → high)"
+	},
+	{
+		id: "progress-desc",
+		label: "Progress (high → low)"
+	}
+];
+/** A villa's swatch colour for the current mode — the same resolver the map polygons + legend use. */
+function villaColor(v, mode) {
+	return styleForVilla({
+		linkedLbsItemId: 1,
+		approvedProgressPercent: v.approved,
+		plannedProgressPercent: v.planned
+	}, mode).fill;
+}
+const MILESTONES = [
+	{
+		id: "m35",
+		label: "M35",
+		actual: "Jun-26",
+		planned: "Jan-26",
+		status: "late",
+		dotClass: "wwc:bg-sky-900"
+	},
+	{
+		id: "m50",
+		label: "M50",
+		actual: "Jun-26",
+		planned: "May-26",
+		status: "late",
+		dotClass: "wwc:bg-sky-700"
+	},
+	{
+		id: "m65",
+		label: "M65",
+		actual: "Nov-26",
+		planned: "Nov-26",
+		status: "on-time",
+		dotClass: "wwc:bg-blue-500"
+	},
+	{
+		id: "m80",
+		label: "M80",
+		actual: "Mar-27",
+		planned: "Apr-27",
+		status: "early",
+		dotClass: "wwc:bg-cyan-400"
+	},
+	{
+		id: "m95",
+		label: "M95",
+		actual: "Jun-27",
+		planned: "Jul-27",
+		status: "early",
+		dotClass: "wwc:bg-green-300"
+	},
+	{
+		id: "m100",
+		label: "M100",
+		actual: "Aug-27",
+		planned: "Aug-27",
+		status: "on-time",
+		dotClass: "wwc:bg-amber-400"
+	}
+];
+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"
+	}
+];
+const EVIDENCE_TABS = [
+	{
+		value: "360",
+		label: "360°"
+	},
+	{
+		value: "drone",
+		label: "Drone"
+	},
+	{
+		value: "wir",
+		label: "WIR"
+	}
+];
+function floorBarClass(status) {
+	if (status === "ahead") return "wwc:bg-success";
+	if (status === "behind") return "wwc:bg-destructive";
+	return "wwc:bg-info";
+}
+function milestoneToneClass(status) {
+	if (status === "late") return "wwc:text-destructive";
+	if (status === "early") return "wwc:text-success";
+	return "wwc:text-foreground";
+}
+function DashboardSearchField({ value, onChange, onKeyDown, placeholder, className, inputClassName, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("wwc:overflow-hidden wwc:rounded-xl wwc:border wwc:border-border wwc:bg-card wwc:shadow-lg", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "wwc:relative",
+			children: [
+				/* @__PURE__ */ jsx(Search, { className: "wwc:pointer-events-none wwc:absolute wwc:left-3 wwc:top-1/2 wwc:size-5 wwc:-translate-y-1/2 wwc:text-muted-foreground" }),
+				/* @__PURE__ */ jsx(Input, {
+					value,
+					onChange,
+					onKeyDown,
+					placeholder,
+					className: cn("wwc:h-12 wwc:rounded-xl wwc:border-0 wwc:bg-transparent wwc:pl-11 wwc:text-base wwc:shadow-none wwc:focus-visible:ring-0", inputClassName)
+				}),
+				children
+			]
+		})
+	});
+}
+/**
+* The rail search FILTER menu — a Popover anchored to a filter button in the search field. Four collapsible
+* sections (Batch · Block · Milestone · Variance); tapping an option toggles a filter. Selection lives in the
+* host (`filters`/`onFiltersChange`) so the map, 3D and chip bar all react to the same list.
+*/
+function FilterMenu({ filters, options, onChange }) {
+	const isOn = (kind, value) => filters.some((f) => f.kind === kind && f.value === value);
+	const toggle = (kind, opt) => {
+		onChange(isOn(kind, opt.value) ? filters.filter((f) => !(f.kind === kind && f.value === opt.value)) : [...filters, {
+			kind,
+			value: opt.value,
+			label: opt.label
+		}]);
+	};
+	const sections = [
+		{
+			kind: "batch",
+			title: "Batch",
+			opts: options.batches
+		},
+		{
+			kind: "block",
+			title: "Block",
+			opts: options.blocks
+		},
+		{
+			kind: "milestone",
+			title: "Milestone",
+			opts: options.milestones
+		},
+		{
+			kind: "variance",
+			title: "Variance",
+			opts: options.variances
+		}
+	];
+	const countFor = (kind) => filters.filter((f) => f.kind === kind).length;
+	return /* @__PURE__ */ jsxs(Popover, { children: [
+		/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-label": "Filter",
+				className: "wwc:relative wwc:flex wwc:size-8 wwc:items-center wwc:justify-center wwc:rounded-lg wwc:text-muted-foreground wwc:transition-colors wwc:hover:bg-accent wwc:hover:text-foreground",
+				children: [/* @__PURE__ */ jsx(SlidersHorizontal, { className: "wwc:size-5" }), filters.length > 0 && /* @__PURE__ */ jsx("span", {
+					className: "wwc:absolute wwc:-right-0.5 wwc:-top-0.5 wwc:flex wwc:size-4 wwc:items-center wwc:justify-center wwc:rounded-full wwc:bg-primary wwc:text-[10px] wwc:font-semibold wwc:text-primary-foreground",
+					children: filters.length
+				})]
+			})
+		}),
+		/* @__PURE__ */ jsx(PopoverAnchor, { className: "wwc:pointer-events-none wwc:absolute wwc:-right-2 wwc:top-0 wwc:h-8 wwc:w-0" }),
+		/* @__PURE__ */ jsxs(PopoverContent, {
+			side: "right",
+			align: "start",
+			sideOffset: 4,
+			className: "wwc:w-72 wwc:p-0",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-center wwc:justify-between wwc:px-4 wwc:py-3",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:text-sm wwc:font-semibold",
+						children: "Filters"
+					}), filters.length > 0 && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onChange([]),
+						className: "wwc:text-xs wwc:font-medium wwc:text-muted-foreground wwc:transition-colors wwc:hover:text-foreground",
+						children: "Clear all"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, {}),
+				/* @__PURE__ */ jsx(Accordion, {
+					type: "multiple",
+					className: "wwc:max-h-80 wwc:overflow-y-auto",
+					children: sections.map((section) => /* @__PURE__ */ jsxs(AccordionItem, {
+						value: section.kind,
+						className: "wwc:border-b wwc:border-border wwc:px-4",
+						children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+							className: "wwc:py-3 wwc:text-sm wwc:font-medium",
+							children: /* @__PURE__ */ jsxs("span", {
+								className: "wwc:flex wwc:items-center wwc:gap-2",
+								children: [section.title, countFor(section.kind) > 0 && /* @__PURE__ */ jsx(Badge, {
+									variant: "secondary",
+									className: "wwc:h-5 wwc:px-1.5 wwc:text-[10px]",
+									children: countFor(section.kind)
+								})]
+							})
+						}), /* @__PURE__ */ jsx(AccordionContent, {
+							className: "wwc:pb-2",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:flex-col wwc:gap-0.5",
+								children: [section.opts.length === 0 && /* @__PURE__ */ jsx("span", {
+									className: "wwc:px-1 wwc:py-1 wwc:text-xs wwc:text-muted-foreground",
+									children: "No options."
+								}), section.opts.map((opt) => /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: () => toggle(section.kind, opt),
+									className: cn("wwc:flex wwc:items-center wwc:justify-between wwc:gap-2 wwc:rounded-md wwc:px-2 wwc:py-1.5 wwc:text-left wwc:text-sm wwc:transition-colors wwc:hover:bg-accent", isOn(section.kind, opt.value) && "wwc:bg-accent"),
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "wwc:truncate",
+										children: opt.label
+									}), isOn(section.kind, opt.value) && /* @__PURE__ */ jsx(Check, { className: "wwc:size-4 wwc:text-primary" })]
+								}, opt.value))]
+							})
+						})]
+					}, section.kind))
+				})
+			]
+		})
+	] });
+}
+/**
+* The villa detail panel's search bar — the exact same `DashboardSearchField` as the sidebar rail. It
+* animates its width open from the rail's base width (320px) to full when the panel mounts.
+*/
+function VillaDetailSearch({ value, onChange, onKeyDown, onClose, placeholder }) {
+	const [expanded, setExpanded] = useState(false);
+	useEffect(() => {
+		const id = requestAnimationFrame(() => setExpanded(true));
+		return () => cancelAnimationFrame(id);
+	}, []);
+	return /* @__PURE__ */ jsx(DashboardSearchField, {
+		value,
+		onChange,
+		onKeyDown,
+		placeholder,
+		inputClassName: "wwc:pr-12",
+		className: cn("wwc:pointer-events-auto wwc:shadow-lg wwc:transition-[width] wwc:duration-300 wwc:ease-out", expanded ? "wwc:w-full" : "wwc:w-[320px]"),
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Close villa details",
+			onClick: onClose,
+			className: "wwc:absolute wwc:right-2 wwc:top-1/2 wwc:flex wwc:size-8 wwc:-translate-y-1/2 wwc:items-center wwc:justify-center wwc:rounded-lg wwc:text-muted-foreground wwc:transition-colors wwc:hover:bg-accent wwc:hover:text-foreground",
+			children: /* @__PURE__ */ jsx(X, { className: "wwc:size-5" })
+		})
+	});
+}
+/**
+* A brief, non-interactive copy of the rail search bar that plays the shrink from the villa-details width
+* back to the rail's base width right after the villa panel closes, then removes itself.
+*/
+function RailSearchShrinkGhost({ query, searching, placeholder, onDone }) {
+	const [shrunk, setShrunk] = useState(false);
+	useEffect(() => {
+		const raf = requestAnimationFrame(() => setShrunk(true));
+		const t = window.setTimeout(onDone, 320);
+		return () => {
+			cancelAnimationFrame(raf);
+			window.clearTimeout(t);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className: "wwc:pointer-events-none wwc:absolute wwc:left-3 wwc:top-3 wwc:z-30",
+		children: /* @__PURE__ */ jsx(DashboardSearchField, {
+			value: query,
+			onChange: () => {},
+			placeholder,
+			inputClassName: "wwc:pr-20",
+			className: cn("wwc:transition-[width] wwc:duration-300 wwc:ease-out", shrunk ? "wwc:w-[320px]" : "wwc:w-[376px]"),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "wwc:absolute wwc:right-2 wwc:top-1/2 wwc:flex wwc:-translate-y-1/2 wwc:items-center wwc:gap-0.5",
+				children: [searching ? /* @__PURE__ */ jsx("span", {
+					className: "wwc:flex wwc:size-8 wwc:items-center wwc:justify-center wwc:text-muted-foreground",
+					children: /* @__PURE__ */ jsx(X, { className: "wwc:size-5" })
+				}) : null, /* @__PURE__ */ jsx("span", {
+					className: "wwc:flex wwc:size-8 wwc:items-center wwc:justify-center wwc:text-muted-foreground",
+					children: /* @__PURE__ */ jsx(ChevronUp, { className: "wwc:size-5" })
+				})]
+			})
+		})
+	});
+}
+/** Find a node by id anywhere in the navigator tree (leaves + branches). */
+function findNode(nodes, id) {
+	for (const n of nodes) {
+		if (n.id === id) return n;
+		if (n.children) {
+			const c = findNode(n.children, id);
+			if (c) return c;
+		}
+	}
+	return null;
+}
+function SitePanel(props) {
+	const { mode, level, currentLocation, locationLabel, isParent, activeRows, unitNoun, countNoun, selectedId, detailOpen, detailVilla, selectedNumber, selectedPath, mapMode, distribution, navNodes, chromeFade, maxPanelH, hideFloors, hideEvidence, hideActivities, hideMilestones, hideSearch, searchOpen, captureId, rangeLabel, onSelectVilla, onCloseDetail, onStepLocation, onOpenNavigator, onNavigate, onMapModeChange, onSearchOpenChange, onPanelResize, onOpenBlueprints, onOpenWalkthrough, onOpenProgressDetails } = props;
+	const selected = props.selected ?? activeRows.find((v) => v.id === selectedId) ?? activeRows[0];
+	const detailNumber = selectedNumber ?? selected?.name.match(/^\d+/)?.[0] ?? selected?.name ?? "";
+	const variance = (selected?.approved ?? 0) - (selected?.planned ?? 0);
+	const [queryLocal, setQueryLocal] = useState("");
+	const query = props.query ?? queryLocal;
+	const setQuery = (v) => {
+		if (props.query === void 0) setQueryLocal(v);
+		props.onQueryChange?.(v);
+	};
+	const [searchLevels, setSearchLevels] = useState([]);
+	const [searchSort, setSearchSort] = useState("relevance");
+	const [sortMenuOpen, setSortMenuOpen] = useState(false);
+	const [railCollapsed, setRailCollapsed] = useState(false);
+	const [navigatorOpen, setNavigatorOpen] = useState(false);
+	const [railGhost, setRailGhost] = useState(false);
+	const [detailTab, setDetailTab] = useState("overview");
+	const [evidenceTab, setEvidenceTab] = useState("360");
+	const [blueprintsOpen, setBlueprintsOpen] = useState(false);
+	const detailScrollRef = useRef(null);
+	const [detailScrollbar, setDetailScrollbar] = useState({
+		top: 0,
+		height: 0,
+		visible: false
+	});
+	const detailScrollbarTimer = useRef(null);
+	const pingDetailScrollbar = () => {
+		const el = detailScrollRef.current;
+		if (!el) return;
+		const { scrollTop, scrollHeight, clientHeight } = el;
+		const trackH = Math.max(0, clientHeight - 72);
+		if (scrollHeight <= clientHeight + 1 || trackH <= 0) {
+			setDetailScrollbar((s) => ({
+				...s,
+				visible: false
+			}));
+			return;
+		}
+		const thumbH = Math.max(28, clientHeight / scrollHeight * trackH);
+		const top = scrollTop / (scrollHeight - clientHeight) * (trackH - thumbH);
+		setDetailScrollbar({
+			top,
+			height: thumbH,
+			visible: true
+		});
+		if (detailScrollbarTimer.current != null) window.clearTimeout(detailScrollbarTimer.current);
+		detailScrollbarTimer.current = window.setTimeout(() => setDetailScrollbar((s) => ({
+			...s,
+			visible: false
+		})), 1e3);
+	};
+	useEffect(() => {
+		if (hideFloors && detailTab === "floors" || hideEvidence && detailTab === "evidence" || hideActivities && detailTab === "activities") setDetailTab("overview");
+	}, [
+		hideFloors,
+		hideEvidence,
+		hideActivities,
+		detailTab
+	]);
+	const zone = useMemo(() => {
+		if (!activeRows.length) return {
+			approved: 0,
+			planned: 0,
+			variance: 0
+		};
+		const approved = activeRows.reduce((s, v) => s + v.approved, 0) / activeRows.length;
+		const planned = activeRows.reduce((s, v) => s + v.planned, 0) / activeRows.length;
+		return {
+			approved,
+			planned,
+			variance: approved - planned
+		};
+	}, [activeRows]);
+	const filtered = useMemo(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return activeRows;
+		return activeRows.filter((v) => v.name.toLowerCase().includes(q) || v.meta.toLowerCase().includes(q));
+	}, [query, activeRows]);
+	const searchLevelCounts = useMemo(() => {
+		const q = query.trim().toLowerCase();
+		const counts = {
+			villa: 0,
+			batch: 0,
+			zone: 0,
+			phase: 0
+		};
+		for (const lv of SEARCH_LEVELS) counts[lv.kind] = lv.rows.filter((v) => !q || v.name.toLowerCase().includes(q) || v.meta.toLowerCase().includes(q)).length;
+		return counts;
+	}, [query]);
+	const searchResults = useMemo(() => {
+		const q = query.trim().toLowerCase();
+		if (!q && !searchLevels.length) return [];
+		const active = searchLevels.length ? searchLevels : SEARCH_LEVELS.map((l) => l.kind);
+		const out = [];
+		for (const lv of SEARCH_LEVELS) {
+			if (!active.includes(lv.kind)) continue;
+			for (const v of lv.rows) if (!q || v.name.toLowerCase().includes(q) || v.meta.toLowerCase().includes(q)) out.push({
+				...v,
+				levelLabel: lv.singular,
+				levelKind: lv.kind
+			});
+		}
+		return out;
+	}, [query, searchLevels]);
+	const resultsLabel = searchLevels.length === 1 ? `${searchResults.length} ${SEARCH_LEVELS.find((l) => l.kind === searchLevels[0])?.label.toLowerCase() ?? "results"}` : `${searchResults.length} results`;
+	const sortedResults = useMemo(() => {
+		if (searchSort === "relevance") return searchResults;
+		const nameOf = (r) => r.levelKind === "villa" ? r.name.match(/^\d+/)?.[0] ?? r.name : r.name;
+		const rows = [...searchResults];
+		switch (searchSort) {
+			case "alpha-asc": return rows.sort((a, b) => nameOf(a).localeCompare(nameOf(b), void 0, { numeric: true }));
+			case "alpha-desc": return rows.sort((a, b) => nameOf(b).localeCompare(nameOf(a), void 0, { numeric: true }));
+			case "progress-asc": return rows.sort((a, b) => a.approved - b.approved);
+			case "progress-desc": return rows.sort((a, b) => b.approved - a.approved);
+			default: return rows;
+		}
+	}, [searchResults, searchSort]);
+	const searching = query.trim().length > 0;
+	const currentLevelKind = !isParent ? "villa" : level === "block" ? "batch" : level;
+	const openSearch = (scope) => {
+		if (!searching) return;
+		setSearchLevels(scope === "level" ? [currentLevelKind] : []);
+		onSearchOpenChange(true);
+	};
+	const openLevelList = () => {
+		setQuery("");
+		setSearchLevels([currentLevelKind]);
+		onSearchOpenChange(true);
+	};
+	const closeSearch = () => {
+		onSearchOpenChange(false);
+		setSearchLevels([]);
+		setQuery("");
+	};
+	const toggleSearchLevel = (kind) => setSearchLevels((prev) => prev.includes(kind) ? prev.filter((k) => k !== kind) : [...prev, kind]);
+	const openNavigator = () => {
+		setNavigatorOpen(true);
+		onOpenNavigator?.();
+	};
+	const handleCloseDetail = () => {
+		onCloseDetail();
+		setRailGhost(true);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		navigatorOpen ? /* @__PURE__ */ jsx(CanvasNavigator, {
+			className: cn("wwc:absolute wwc:left-3 wwc:top-3 wwc:z-30 wwc:w-[320px]", chromeFade),
+			nodes: navNodes,
+			value: currentLocation,
+			size: "default",
+			expandable: false,
+			title: "ALMANAR – PHASE1",
+			collapseIcon: /* @__PURE__ */ jsx(X, { className: "wwc:size-4" }),
+			onSizeChange: (s) => {
+				if (s === "collapsed") setNavigatorOpen(false);
+			},
+			onSelect: (id) => {
+				const node = findNode(navNodes, id);
+				if (node) onNavigate(node);
+				setNavigatorOpen(false);
+			}
+		}) : searchOpen && !hideSearch ? /* @__PURE__ */ jsxs("aside", {
+			className: cn("wwc:absolute wwc:inset-y-0 wwc:left-0 wwc:z-30 wwc:flex wwc:w-[360px] wwc:flex-col wwc:overflow-hidden wwc:border-r wwc:border-border wwc:bg-card wwc:shadow-xl", chromeFade),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "wwc:shrink-0 wwc:p-3",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "wwc:relative",
+						children: [
+							/* @__PURE__ */ jsx(Search, { className: "wwc:pointer-events-none wwc:absolute wwc:left-3 wwc:top-1/2 wwc:size-4 wwc:-translate-y-1/2 wwc:text-muted-foreground" }),
+							/* @__PURE__ */ jsx(Input, {
+								autoFocus: true,
+								value: query,
+								onChange: (e) => setQuery(e.target.value),
+								onKeyDown: (e) => {
+									if (e.key === "Escape") closeSearch();
+								},
+								placeholder: "Search...",
+								className: "wwc:pl-9 wwc:pr-10"
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": "Close search",
+								onClick: closeSearch,
+								className: "wwc:absolute wwc:right-2 wwc:top-1/2 wwc:flex wwc:size-6 wwc:-translate-y-1/2 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-4" })
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:shrink-0 wwc:px-3",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:text-xs wwc:text-muted-foreground",
+						children: "Searching for"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "wwc:mt-2 wwc:flex wwc:items-stretch wwc:gap-1",
+						children: SEARCH_LEVELS.map((lv) => {
+							const on = searchLevels.includes(lv.kind);
+							const LvIcon = lv.icon;
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								"aria-pressed": on,
+								title: lv.label,
+								onClick: () => toggleSearchLevel(lv.kind),
+								className: "wwc:flex wwc:flex-1 wwc:flex-col wwc:items-center wwc:gap-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: cn("wwc:flex wwc:h-8 wwc:w-full wwc:items-center wwc:justify-center wwc:rounded-full wwc:transition-colors", on ? "wwc:bg-primary/10 wwc:text-primary" : "wwc:text-foreground wwc:hover:bg-accent"),
+									children: /* @__PURE__ */ jsx(LvIcon, { className: "wwc:size-4" })
+								}), /* @__PURE__ */ jsx("span", {
+									className: cn("wwc:text-xs", on ? "wwc:font-semibold wwc:text-foreground" : "wwc:text-muted-foreground"),
+									children: searchLevelCounts[lv.kind]
+								})]
+							}, lv.kind);
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:mt-3 wwc:flex wwc:shrink-0 wwc:items-center wwc:justify-between wwc:border-b wwc:border-border wwc:px-3 wwc:pb-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:text-base wwc:font-semibold",
+						children: "Results"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:text-sm wwc:text-muted-foreground",
+							children: resultsLabel
+						}), /* @__PURE__ */ jsxs(Popover, {
+							open: sortMenuOpen,
+							onOpenChange: setSortMenuOpen,
+							children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": "Sort results",
+									className: "wwc:flex wwc:size-7 wwc:items-center wwc:justify-center wwc:rounded-md wwc:text-muted-foreground wwc:transition-colors wwc:hover:bg-accent wwc:hover:text-foreground wwc:aria-expanded:bg-accent",
+									children: /* @__PURE__ */ jsx(ArrowUpDown, { className: "wwc:size-4" })
+								})
+							}), /* @__PURE__ */ jsx(PopoverContent, {
+								side: "bottom",
+								align: "end",
+								sideOffset: 6,
+								className: "wwc:w-48 wwc:p-1",
+								children: SEARCH_SORTS.map((s) => /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: () => {
+										setSearchSort(s.id);
+										setSortMenuOpen(false);
+									},
+									className: cn("wwc:flex wwc:w-full wwc:items-center wwc:justify-between wwc:gap-2 wwc:rounded-md wwc:px-2.5 wwc:py-2 wwc:text-left wwc:text-sm wwc:transition-colors", searchSort === s.id ? "wwc:bg-primary/10 wwc:font-medium wwc:text-primary" : "wwc:text-foreground wwc:hover:bg-accent"),
+									children: [s.label, searchSort === s.id ? /* @__PURE__ */ jsx(Check, { className: "wwc:size-4 wwc:shrink-0" }) : null]
+								}, s.id))
+							})]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "wwc:flex wwc:min-h-0 wwc:flex-1 wwc:flex-col wwc:gap-0.5 wwc:overflow-auto wwc:p-2",
+					children: sortedResults.length > 0 ? sortedResults.map((r) => /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-2.5 wwc:rounded-md wwc:px-2.5 wwc:py-2 wwc:transition-colors wwc:hover:bg-accent",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "wwc:size-2 wwc:shrink-0 wwc:rounded-full",
+								style: { backgroundColor: r.levelKind === "villa" ? villaColor(r, mapMode) : MONOCHROME_STYLE.fill }
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "wwc:min-w-0 wwc:flex-1 wwc:truncate wwc:text-sm wwc:font-medium",
+								children: r.levelKind === "villa" ? r.name.match(/^\d+/)?.[0] ?? r.name : r.name
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "wwc:shrink-0 wwc:rounded wwc:bg-muted wwc:px-1.5 wwc:py-0.5 wwc:text-[10px] wwc:font-medium wwc:uppercase wwc:tracking-wide wwc:text-muted-foreground",
+								children: r.levelLabel
+							}),
+							r.levelKind === "villa" && /* @__PURE__ */ jsxs("span", {
+								className: "wwc:w-10 wwc:shrink-0 wwc:text-right wwc:text-sm wwc:font-semibold",
+								children: [r.approved, "%"]
+							})
+						]
+					}, `${r.levelKind}-${r.id}`)) : /* @__PURE__ */ jsxs("p", {
+						className: "wwc:px-2 wwc:py-10 wwc:text-center wwc:text-sm wwc:text-muted-foreground",
+						children: [
+							"No matches for “",
+							query,
+							"”."
+						]
+					})
+				})
+			]
+		}) : detailOpen ? null : /* @__PURE__ */ jsxs("aside", {
+			ref: onPanelResize,
+			style: { maxHeight: maxPanelH },
+			className: cn("wwc:absolute wwc:left-3 wwc:top-3 wwc:z-20 wwc:flex wwc:w-[320px] wwc:flex-col wwc:gap-1 wwc:overflow-y-auto", chromeFade),
+			children: [!hideSearch && /* @__PURE__ */ jsx(DashboardSearchField, {
+				value: query,
+				onChange: (e) => {
+					setQuery(e.target.value);
+					if (e.target.value) setRailCollapsed(false);
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Enter") openSearch("level");
+					if (e.key === "Escape") closeSearch();
+				},
+				placeholder: `Search ${unitNoun}...`,
+				className: "wwc:shrink-0",
+				inputClassName: "wwc:pr-28",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "wwc:absolute wwc:right-2 wwc:top-1/2 wwc:flex wwc:-translate-y-1/2 wwc:items-center wwc:gap-0.5",
+					children: [
+						searching ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Clear search",
+							onClick: () => setQuery(""),
+							className: "wwc:flex wwc:size-8 wwc:items-center wwc:justify-center wwc:rounded-lg wwc:text-muted-foreground wwc:transition-colors wwc:hover:bg-accent wwc:hover:text-foreground",
+							children: /* @__PURE__ */ jsx(X, { className: "wwc:size-5" })
+						}) : null,
+						props.filterOptions && props.onFiltersChange ? /* @__PURE__ */ jsx(FilterMenu, {
+							filters: props.filters ?? [],
+							options: props.filterOptions,
+							onChange: props.onFiltersChange
+						}) : null,
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": railCollapsed ? "Expand sidebar" : "Collapse sidebar",
+							"aria-expanded": !railCollapsed,
+							onClick: () => setRailCollapsed((c) => !c),
+							className: "wwc:flex wwc:size-8 wwc:items-center wwc:justify-center wwc:rounded-lg wwc:text-muted-foreground wwc:transition-colors wwc:hover:bg-accent wwc:hover:text-foreground",
+							children: /* @__PURE__ */ jsx(ChevronUp, { className: cn("wwc:size-5 wwc:transition-transform", railCollapsed && "wwc:rotate-180") })
+						})
+					]
+				})
+			}), !railCollapsed && /* @__PURE__ */ jsxs(Fragment$1, { children: [searching ? /* @__PURE__ */ jsx("div", {
+				className: "wwc:shrink-0 wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:p-1 wwc:shadow-lg",
+				children: [{
+					scope: "level",
+					icon: Search,
+					label: `Search in ${unitNoun}`
+				}, {
+					scope: "all",
+					icon: Layers,
+					label: "Search all levels"
+				}].map((opt) => {
+					const OptIcon = opt.icon;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => openSearch(opt.scope),
+						className: "wwc:flex wwc:w-full wwc:items-center wwc:gap-3 wwc:rounded-md wwc:px-2 wwc:py-2.5 wwc:text-left wwc:transition-colors wwc:hover:bg-accent",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "wwc:flex wwc:size-9 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded-md wwc:bg-muted wwc:text-muted-foreground",
+								children: /* @__PURE__ */ jsx(OptIcon, { className: "wwc:size-4" })
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:flex-col",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "wwc:truncate wwc:text-sm wwc:font-semibold",
+									children: opt.label
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "wwc:truncate wwc:text-xs wwc:text-muted-foreground",
+									children: [
+										"“",
+										query,
+										"”"
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsx(ChevronRight, { className: "wwc:size-4 wwc:shrink-0 wwc:text-muted-foreground" })
+						]
+					}, opt.scope);
+				})
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2 wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:p-2 wwc:shadow-lg",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							icon: true,
+							size: "sm",
+							variant: "outline",
+							"aria-label": "Previous location",
+							className: "wwc:shrink-0 wwc:rounded-full",
+							onClick: () => onStepLocation(-1),
+							disabled: mode === "3d",
+							children: /* @__PURE__ */ jsx(ChevronLeft, { className: "wwc:size-4" })
+						}),
+						/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: openNavigator,
+							"aria-label": "Open location navigator",
+							disabled: mode === "3d",
+							className: cn("wwc:group wwc:flex wwc:min-w-0 wwc:flex-1 wwc:flex-col wwc:items-center wwc:rounded-md wwc:py-0.5 wwc:transition-colors wwc:hover:bg-accent", mode === "3d" && "wwc:pointer-events-none wwc:opacity-60 wwc:hover:bg-transparent"),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+								children: "Current location"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "wwc:truncate wwc:text-sm wwc:font-semibold wwc:transition-colors wwc:group-hover:text-primary",
+								children: locationLabel
+							})]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							icon: true,
+							size: "sm",
+							variant: "outline",
+							"aria-label": "Next location",
+							className: "wwc:shrink-0 wwc:rounded-full",
+							onClick: () => onStepLocation(1),
+							disabled: mode === "3d",
+							children: /* @__PURE__ */ jsx(ChevronRight, { className: "wwc:size-4" })
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "wwc:shrink-0 wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:shadow-lg",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "wwc:p-3",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+							children: "Zone progress"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "wwc:mt-2 wwc:flex wwc:flex-row wwc:items-end wwc:gap-4",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "wwc:flex wwc:min-w-0 wwc:flex-col",
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: "wwc:text-xl wwc:font-semibold",
+										children: [zone.approved.toFixed(2), "%"]
+									}), /* @__PURE__ */ jsx("span", {
+										className: "wwc:text-xs wwc:text-muted-foreground",
+										children: "Approved"
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "wwc:flex wwc:min-w-0 wwc:flex-col",
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: "wwc:text-xl wwc:font-semibold",
+										children: [zone.planned.toFixed(2), "%"]
+									}), /* @__PURE__ */ jsx("span", {
+										className: "wwc:text-xs wwc:text-muted-foreground",
+										children: "Planned"
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "wwc:flex wwc:min-w-0 wwc:flex-col",
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: "wwc:text-xl wwc:font-semibold wwc:text-destructive",
+										children: [zone.variance.toFixed(2), "%"]
+									}), /* @__PURE__ */ jsx("span", {
+										className: "wwc:text-xs wwc:text-muted-foreground",
+										children: "Variance"
+									})]
+								})
+							]
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:shrink-0 wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:p-3 wwc:shadow-lg",
+					children: [/* @__PURE__ */ jsx(Tabs, {
+						value: mapMode,
+						onValueChange: (v) => onMapModeChange(v),
+						children: /* @__PURE__ */ jsxs(TabsList, {
+							className: "wwc:w-full",
+							children: [/* @__PURE__ */ jsx(TabsTrigger, {
+								value: "progress",
+								className: "wwc:flex-1",
+								children: "SPA"
+							}), /* @__PURE__ */ jsx(TabsTrigger, {
+								value: "variance",
+								className: "wwc:flex-1",
+								children: "Progress"
+							})]
+						})
+					}), !(isParent && mapMode === "progress") && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:mt-3 wwc:flex wwc:items-center wwc:justify-between",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+								children: mapMode === "variance" ? "Variance distribution" : "Progress distribution"
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "wwc:text-xs wwc:text-muted-foreground",
+								children: [
+									activeRows.length,
+									" ",
+									countNoun
+								]
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "wwc:mt-2 wwc:flex wwc:h-2 wwc:w-full wwc:overflow-hidden wwc:rounded-full",
+							children: distribution.filter((d) => d.count > 0).map((d) => /* @__PURE__ */ jsx("div", {
+								className: "wwc:h-full",
+								style: {
+									flexGrow: d.count,
+									flexBasis: 0,
+									backgroundColor: d.color
+								}
+							}, d.id))
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "wwc:mt-3 wwc:flex wwc:flex-row wwc:gap-2",
+							children: distribution.map((d) => /* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:flex-col wwc:gap-1",
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "wwc:h-1 wwc:w-full wwc:rounded-full",
+										style: { backgroundColor: d.color }
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "wwc:text-sm wwc:font-semibold",
+										children: d.count
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "wwc:text-[10px] wwc:font-medium wwc:text-foreground",
+										children: d.label
+									}),
+									d.range && /* @__PURE__ */ jsx("span", {
+										className: "wwc:text-[10px] wwc:leading-tight wwc:text-muted-foreground",
+										children: d.range
+									})
+								]
+							}, d.id))
+						})
+					] })]
+				})
+			] }), /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:shrink-0 wwc:flex-col wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:shadow-lg",
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: openLevelList,
+					"aria-label": `Show all ${unitNoun} on the map`,
+					className: "wwc:flex wwc:w-full wwc:shrink-0 wwc:items-center wwc:justify-between wwc:border-b wwc:border-border wwc:px-3 wwc:py-2.5 wwc:text-left wwc:transition-colors wwc:hover:bg-accent",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+						children: isParent ? `${unitNoun[0].toUpperCase()}${unitNoun.slice(1)} on map` : "Villas on map"
+					}), /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						children: filtered.length
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:max-h-[280px] wwc:flex-col wwc:gap-1 wwc:overflow-auto wwc:p-2",
+					children: [filtered.map((v) => {
+						const active = v.id === selectedId;
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onSelectVilla(v.id),
+							className: cn("wwc:flex wwc:w-full wwc:flex-row wwc:items-center wwc:gap-2.5 wwc:rounded-md wwc:border wwc:px-2.5 wwc:py-2 wwc:text-left wwc:transition-colors", active ? "wwc:border-primary wwc:bg-primary/5" : "wwc:border-transparent wwc:hover:bg-accent"),
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "wwc:size-2 wwc:shrink-0 wwc:rounded-full",
+									style: { backgroundColor: isParent ? MONOCHROME_STYLE.fill : villaColor(v, mapMode) }
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:flex-col",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: cn("wwc:truncate wwc:text-sm wwc:font-medium", active && "wwc:text-primary"),
+										children: isParent ? v.name : v.name.match(/^\d+/)?.[0] ?? v.name
+									}), isParent && v.meta ? /* @__PURE__ */ jsx("span", {
+										className: "wwc:truncate wwc:text-xs wwc:text-muted-foreground",
+										children: v.meta
+									}) : null]
+								}),
+								!isParent && /* @__PURE__ */ jsxs("span", {
+									className: "wwc:shrink-0 wwc:text-sm wwc:font-semibold",
+									children: [v.approved, "%"]
+								})
+							]
+						}, v.id);
+					}), filtered.length === 0 && /* @__PURE__ */ jsxs("p", {
+						className: "wwc:px-2 wwc:py-6 wwc:text-center wwc:text-sm wwc:text-muted-foreground",
+						children: [
+							"No ",
+							unitNoun,
+							" match “",
+							query,
+							"”."
+						]
+					})]
+				})]
+			})] })]
+		}),
+		railGhost && !detailOpen && !searchOpen && !navigatorOpen && /* @__PURE__ */ jsx(RailSearchShrinkGhost, {
+			query,
+			searching,
+			placeholder: `Search ${unitNoun}...`,
+			onDone: () => setRailGhost(false)
+		}),
+		detailOpen && selected && /* @__PURE__ */ jsxs("aside", {
+			className: cn("wwc:absolute wwc:inset-y-0 wwc:left-0 wwc:z-30 wwc:flex wwc:w-[400px] wwc:flex-col wwc:overflow-hidden wwc:border-r wwc:border-border wwc:bg-card wwc:shadow-xl", chromeFade),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "wwc:pointer-events-none wwc:absolute wwc:inset-x-0 wwc:top-0 wwc:z-10 wwc:p-3",
+					children: /* @__PURE__ */ jsx(VillaDetailSearch, {
+						value: query,
+						onChange: (e) => setQuery(e.target.value),
+						onKeyDown: (e) => {
+							if (e.key === "Enter" && query.trim()) {
+								onCloseDetail();
+								openSearch("all");
+							}
+							if (e.key === "Escape") handleCloseDetail();
+						},
+						onClose: handleCloseDetail,
+						placeholder: "Search villas, zones, plots..."
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					ref: detailScrollRef,
+					onScroll: pingDetailScrollbar,
+					onMouseEnter: pingDetailScrollbar,
+					style: { scrollbarWidth: "none" },
+					className: "hide-native-scrollbar wwc:flex wwc:min-h-0 wwc:flex-1 wwc:flex-col wwc:overflow-auto",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:shrink-0 wwc:flex-col wwc:px-4 wwc:pb-3 wwc:pt-[85px]",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+								children: "Villa"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "wwc:truncate wwc:text-2xl wwc:font-semibold",
+								children: detailNumber
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "wwc:mt-0.5 wwc:truncate wwc:text-sm wwc:text-muted-foreground",
+								children: [
+									villaTypeLabel(selected.name),
+									" · ",
+									locationLabel
+								]
+							})
+						]
+					}), /* @__PURE__ */ jsxs(Tabs, {
+						value: detailTab,
+						onValueChange: setDetailTab,
+						variant: "underline",
+						className: "wwc:shrink-0 wwc:pb-6",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "wwc:px-4 wwc:pt-3",
+								children: /* @__PURE__ */ jsxs(TabsList, {
+									className: "wwc:w-full",
+									children: [
+										/* @__PURE__ */ jsx(TabsTrigger, {
+											value: "overview",
+											children: "Overview"
+										}),
+										!hideFloors && /* @__PURE__ */ jsx(TabsTrigger, {
+											value: "floors",
+											children: "Floors"
+										}),
+										!hideEvidence && /* @__PURE__ */ jsx(TabsTrigger, {
+											value: "evidence",
+											children: "Evidence"
+										}),
+										!hideActivities && /* @__PURE__ */ jsx(TabsTrigger, {
+											value: "activities",
+											children: "Activities"
+										})
+									]
+								})
+							}),
+							/* @__PURE__ */ jsxs(TabsContent, {
+								value: "overview",
+								className: "wwc:flex wwc:flex-col",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "wwc:grid wwc:grid-cols-3 wwc:gap-1 wwc:px-4 wwc:py-4",
+										children: [
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												onClick: () => onOpenBlueprints && detailVilla ? onOpenBlueprints(detailVilla) : setBlueprintsOpen(true),
+												"aria-label": "Blueprints",
+												className: "wwc:group wwc:w-full",
+												children: /* @__PURE__ */ jsxs("span", {
+													className: "wwc:flex wwc:aspect-square wwc:w-full wwc:flex-col wwc:items-center wwc:justify-center wwc:gap-2 wwc:rounded-lg wwc:bg-secondary wwc:px-2 wwc:text-center wwc:text-foreground wwc:transition-colors wwc:group-hover:bg-secondary/70",
+													children: [/* @__PURE__ */ jsx(Ruler, { className: "wwc:size-5" }), /* @__PURE__ */ jsx("span", {
+														className: "wwc:text-xs wwc:font-medium",
+														children: "Blueprints"
+													})]
+												})
+											}),
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												onClick: onOpenWalkthrough && detailVilla ? () => onOpenWalkthrough(detailVilla) : void 0,
+												"aria-label": "360 walkthrough",
+												className: "wwc:group wwc:w-full",
+												children: /* @__PURE__ */ jsxs("span", {
+													className: "wwc:flex wwc:aspect-square wwc:w-full wwc:flex-col wwc:items-center wwc:justify-center wwc:gap-2 wwc:rounded-lg wwc:bg-secondary wwc:px-2 wwc:text-center wwc:text-foreground wwc:transition-colors wwc:group-hover:bg-secondary/70",
+													children: [/* @__PURE__ */ jsx(Rotate3d, { className: "wwc:size-5" }), /* @__PURE__ */ jsx("span", {
+														className: "wwc:text-xs wwc:font-medium",
+														children: "360 Walkthrough"
+													})]
+												})
+											}),
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												onClick: onOpenProgressDetails && detailVilla ? () => onOpenProgressDetails(detailVilla) : void 0,
+												"aria-label": "Progress details",
+												className: "wwc:group wwc:w-full",
+												children: /* @__PURE__ */ jsxs("span", {
+													className: "wwc:flex wwc:aspect-square wwc:w-full wwc:flex-col wwc:items-center wwc:justify-center wwc:gap-2 wwc:rounded-lg wwc:bg-secondary wwc:px-2 wwc:text-center wwc:text-foreground wwc:transition-colors wwc:group-hover:bg-secondary/70",
+													children: [/* @__PURE__ */ jsx(BarChart3, { className: "wwc:size-5" }), /* @__PURE__ */ jsxs("span", {
+														className: "wwc:flex wwc:items-center wwc:gap-0.5 wwc:text-xs wwc:font-medium",
+														children: ["Progress Details", /* @__PURE__ */ jsx(ArrowUpRight, { className: "wwc:size-3.5 wwc:text-muted-foreground" })]
+													})]
+												})
+											})
+										]
+									}),
+									/* @__PURE__ */ jsx(Separator, {}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "wwc:flex wwc:flex-col wwc:gap-3 wwc:px-4 wwc:py-4",
+										children: [
+											/* @__PURE__ */ jsx(Tabs, {
+												value: mapMode,
+												onValueChange: (v) => onMapModeChange(v),
+												children: /* @__PURE__ */ jsxs(TabsList, {
+													className: "wwc:w-full",
+													children: [/* @__PURE__ */ jsx(TabsTrigger, {
+														value: "progress",
+														className: "wwc:flex-1",
+														children: "SPA"
+													}), /* @__PURE__ */ jsx(TabsTrigger, {
+														value: "variance",
+														className: "wwc:flex-1",
+														children: "Progress"
+													})]
+												})
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												className: "wwc:grid wwc:grid-cols-3 wwc:gap-2",
+												children: [
+													/* @__PURE__ */ jsxs("div", {
+														className: "wwc:rounded-lg wwc:border wwc:border-border wwc:p-3",
+														children: [/* @__PURE__ */ jsx("span", {
+															className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+															children: "Approved"
+														}), /* @__PURE__ */ jsxs("p", {
+															className: "wwc:mt-1 wwc:text-2xl wwc:font-semibold",
+															children: [selected.approved, "%"]
+														})]
+													}),
+													/* @__PURE__ */ jsxs("div", {
+														className: "wwc:rounded-lg wwc:border wwc:border-border wwc:p-3",
+														children: [/* @__PURE__ */ jsx("span", {
+															className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+															children: "Planned"
+														}), /* @__PURE__ */ jsxs("p", {
+															className: "wwc:mt-1 wwc:text-2xl wwc:font-semibold",
+															children: [selected.planned, "%"]
+														})]
+													}),
+													/* @__PURE__ */ jsxs("div", {
+														className: cn("wwc:rounded-lg wwc:border wwc:p-3", variance < 0 ? "wwc:border-destructive/40 wwc:bg-destructive/5" : "wwc:border-success/40 wwc:bg-success/5"),
+														children: [
+															/* @__PURE__ */ jsx("span", {
+																className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+																children: "Variance"
+															}),
+															/* @__PURE__ */ jsxs("p", {
+																className: cn("wwc:mt-1 wwc:text-2xl wwc:font-semibold", variance < 0 ? "wwc:text-destructive" : "wwc:text-success"),
+																children: [
+																	variance > 0 ? "+" : "",
+																	variance,
+																	"%"
+																]
+															}),
+															/* @__PURE__ */ jsx("span", {
+																className: cn("wwc:text-[11px] wwc:font-medium", variance < 0 ? "wwc:text-destructive" : "wwc:text-success"),
+																children: variance < 0 ? "Behind" : "Ahead"
+															})
+														]
+													})
+												]
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												className: "wwc:flex wwc:flex-col wwc:gap-1.5",
+												children: [/* @__PURE__ */ jsx("div", {
+													className: "wwc:h-1.5 wwc:w-full wwc:overflow-hidden wwc:rounded-full wwc:bg-muted",
+													children: /* @__PURE__ */ jsx("div", {
+														className: "wwc:h-full wwc:rounded-full wwc:bg-primary",
+														style: { width: `${selected.approved}%` }
+													})
+												}), /* @__PURE__ */ jsx("div", {
+													className: "wwc:h-1.5 wwc:w-full wwc:overflow-hidden wwc:rounded-full wwc:bg-muted",
+													children: /* @__PURE__ */ jsx("div", {
+														className: "wwc:h-full wwc:rounded-full wwc:bg-muted-foreground/50",
+														style: { width: `${selected.planned}%` }
+													})
+												})]
+											})
+										]
+									}),
+									!hideMilestones && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs("div", {
+										className: "wwc:px-4 wwc:py-4",
+										children: [/* @__PURE__ */ jsxs("span", {
+											className: "wwc:flex wwc:items-center wwc:gap-2 wwc:text-base wwc:font-semibold",
+											children: ["Milestones", /* @__PURE__ */ jsx("span", {
+												className: "wwc:text-sm wwc:font-normal wwc:text-muted-foreground",
+												children: MILESTONES.length
+											})]
+										}), /* @__PURE__ */ jsxs("div", {
+											className: "wwc:mt-3 wwc:grid wwc:grid-cols-[1fr_auto_auto] wwc:items-center wwc:gap-x-6 wwc:gap-y-2.5",
+											children: [
+												/* @__PURE__ */ jsx("span", {
+													className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+													children: "Milestone"
+												}),
+												/* @__PURE__ */ jsx("span", {
+													className: "wwc:text-right wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+													children: "Actual"
+												}),
+												/* @__PURE__ */ jsx("span", {
+													className: "wwc:text-right wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+													children: "Planned"
+												}),
+												MILESTONES.map((m) => /* @__PURE__ */ jsxs("div", {
+													className: "wwc:contents",
+													children: [
+														/* @__PURE__ */ jsxs("span", {
+															className: "wwc:flex wwc:items-center wwc:gap-2.5 wwc:text-sm wwc:font-medium",
+															children: [/* @__PURE__ */ jsx("span", { className: cn("wwc:size-2 wwc:rounded-full", m.dotClass) }), m.label]
+														}),
+														/* @__PURE__ */ jsx("span", {
+															className: cn("wwc:text-right wwc:text-sm wwc:font-medium", milestoneToneClass(m.status)),
+															children: m.actual
+														}),
+														/* @__PURE__ */ jsx("span", {
+															className: "wwc:text-right wwc:text-sm wwc:text-muted-foreground",
+															children: m.planned
+														})
+													]
+												}, m.id))
+											]
+										})]
+									})] }),
+									/* @__PURE__ */ jsx(Separator, {}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "wwc:px-4 wwc:py-4",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+											children: "Location path"
+										}), /* @__PURE__ */ jsx("p", {
+											className: "wwc:mt-1.5 wwc:break-words wwc:font-mono wwc:text-xs wwc:leading-relaxed wwc:text-foreground",
+											children: selectedPath
+										})]
+									})
+								]
+							}),
+							!hideFloors && /* @__PURE__ */ jsx(TabsContent, {
+								value: "floors",
+								className: "wwc:px-4 wwc:pt-4",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "wwc:flex wwc:flex-col wwc:gap-3",
+									children: FLOORS.map((f) => /* @__PURE__ */ jsxs("div", {
+										className: "wwc:flex wwc:flex-row wwc:items-center wwc:gap-3",
+										children: [
+											/* @__PURE__ */ jsx("span", {
+												className: "wwc:w-6 wwc:shrink-0 wwc:text-sm wwc:font-medium wwc:text-muted-foreground",
+												children: f.code
+											}),
+											/* @__PURE__ */ jsx("div", {
+												className: "wwc:h-2 wwc:min-w-0 wwc:flex-1 wwc:overflow-hidden wwc:rounded-full wwc:bg-muted",
+												children: /* @__PURE__ */ jsx("div", {
+													className: cn("wwc:h-full wwc:rounded-full", floorBarClass(f.status)),
+													style: { width: `${f.value}%` }
+												})
+											}),
+											/* @__PURE__ */ jsxs("span", {
+												className: "wwc:w-10 wwc:shrink-0 wwc:text-right wwc:text-sm wwc:font-semibold",
+												children: [f.value, "%"]
+											})
+										]
+									}, f.code))
+								})
+							}),
+							!hideEvidence && /* @__PURE__ */ jsxs(TabsContent, {
+								value: "evidence",
+								className: "wwc:px-4 wwc:pt-4",
+								children: [
+									/* @__PURE__ */ jsxs("span", {
+										className: "wwc:flex wwc:items-center wwc:gap-2 wwc:text-base wwc:font-semibold",
+										children: [/* @__PURE__ */ jsx(Link2, { className: "wwc:size-4 wwc:text-primary" }), "Evidence Chain"]
+									}),
+									/* @__PURE__ */ jsx(Tabs, {
+										value: evidenceTab,
+										onValueChange: setEvidenceTab,
+										className: "wwc:mt-3",
+										children: /* @__PURE__ */ jsx(TabsList, {
+											className: "wwc:w-full",
+											children: EVIDENCE_TABS.map((t) => /* @__PURE__ */ jsx(TabsTrigger, {
+												value: t.value,
+												className: "wwc:flex-1",
+												children: t.label
+											}, t.value))
+										})
+									}),
+									/* @__PURE__ */ jsxs("button", {
+										type: "button",
+										className: "wwc:mt-3 wwc:flex wwc:w-full wwc:flex-row wwc:items-center wwc:gap-3 wwc:rounded-lg wwc:border wwc:border-border wwc:px-3 wwc:py-2.5 wwc:text-left wwc:transition-colors wwc:hover:bg-accent",
+										children: [
+											/* @__PURE__ */ jsx("span", { className: "wwc:size-2 wwc:shrink-0 wwc:rounded-full wwc:bg-success" }),
+											/* @__PURE__ */ jsxs("span", {
+												className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:flex-col",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+													children: "Latest capture"
+												}), /* @__PURE__ */ jsx("span", {
+													className: "wwc:truncate wwc:text-sm wwc:font-medium",
+													children: "OpenSpace · 22 Aug"
+												})]
+											}),
+											/* @__PURE__ */ jsx(ChevronRight, { className: "wwc:size-4 wwc:shrink-0 wwc:text-muted-foreground" })
+										]
+									})
+								]
+							}),
+							!hideActivities && /* @__PURE__ */ jsxs(TabsContent, {
+								value: "activities",
+								className: "wwc:flex wwc:flex-col wwc:items-center wwc:justify-center wwc:gap-2 wwc:px-4 wwc:py-16 wwc:text-center",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "wwc:flex wwc:size-11 wwc:items-center wwc:justify-center wwc:rounded-full wwc:bg-muted wwc:text-muted-foreground",
+										children: /* @__PURE__ */ jsx(Clock, { className: "wwc:size-5" })
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "wwc:text-sm wwc:font-medium",
+										children: "Coming soon"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "wwc:text-xs wwc:text-muted-foreground",
+										children: "Villa activities will appear here."
+									})
+								]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "wwc:pointer-events-none wwc:absolute wwc:right-1 wwc:z-40",
+					style: {
+						top: 64,
+						bottom: 8
+					},
+					children: /* @__PURE__ */ jsx("div", {
+						className: cn("wwc:absolute wwc:right-0 wwc:w-1.5 wwc:rounded-full wwc:bg-foreground/30 wwc:transition-opacity wwc:duration-300", detailScrollbar.visible ? "wwc:opacity-100" : "wwc:opacity-0"),
+						style: {
+							top: detailScrollbar.top,
+							height: detailScrollbar.height
+						}
+					})
+				})
+			]
+		}),
+		selected && /* @__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,
+						captureId ? ` · capture ${captureId}` : "",
+						rangeLabel ? ` · ${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: () => {
+							if (detailVilla) onOpenBlueprints?.(detailVilla);
+							setBlueprintsOpen(false);
+						},
+						children: "Open in viewer"
+					})] })
+				]
+			})
+		})
+	] });
+}
+//#endregion
+export { SitePanel, SitePanel as default };
+
+//# sourceMappingURL=site-panel.mjs.map