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

package/dist/pages/core-blueprint-viewer.mjs

@@ -0,0 +1,665 @@
+import { HoverTooltip, TooltipProvider } from "../tooltip.mjs";
+import { Button } from "../button.mjs";
+import { WeekSelector } from "../week-selector.mjs";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../breadcrumb.mjs";
+import { BuildingProgress } from "../building-progress.mjs";
+import { Toolbar, ToolbarButton } from "../toolbar.mjs";
+import { CanvasNavigator } from "../canvas-navigator.mjs";
+import { Toggle } from "../toggle.mjs";
+import { VerticalZoomTools } from "../vertical-zoom-tools.mjs";
+import { ArrowRight, LayoutGrid, Maximize2, Minimize2, PanelRight, TrendingDown, Video, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/pages/core-blueprint-viewer.tsx
+const FLOAT_SHADOW = "wwc:shadow-[0_4px_12px_rgba(0,0,0,0.06)]";
+const BUILDING_FLOORS = [
+	{
+		id: "rf",
+		label: "RF",
+		name: "Roof",
+		value: 81
+	},
+	{
+		id: "uf",
+		label: "UF",
+		name: "Upper Floor",
+		value: 31
+	},
+	{
+		id: "ff",
+		label: "FF",
+		name: "First Floor",
+		value: 61
+	},
+	{
+		id: "gf",
+		label: "GF",
+		name: "Ground Floor",
+		value: 41
+	},
+	{
+		id: "sub",
+		label: "SUB",
+		name: "Basement",
+		value: 96
+	}
+];
+const FLOOR_TABS = BUILDING_FLOORS.map((f) => ({
+	value: f.id,
+	label: f.label
+}));
+const WEEKS = [
+	{
+		value: "W109",
+		start: new Date(2026, 5, 12),
+		end: new Date(2026, 5, 18)
+	},
+	{
+		value: "W110",
+		start: new Date(2026, 5, 19),
+		end: new Date(2026, 5, 25)
+	},
+	{
+		value: "W111",
+		start: new Date(2026, 5, 26),
+		end: new Date(2026, 6, 2)
+	},
+	{
+		value: "W112",
+		start: new Date(2026, 6, 3),
+		end: new Date(2026, 6, 9)
+	},
+	{
+		value: "W113",
+		start: new Date(2026, 6, 10),
+		end: new Date(2026, 6, 16)
+	},
+	{
+		value: "W114",
+		start: new Date(2026, 6, 17),
+		end: new Date(2026, 6, 23)
+	},
+	{
+		value: "W115",
+		start: new Date(2026, 6, 24),
+		end: new Date(2026, 6, 30)
+	}
+];
+const WALK_PATH = [
+	{
+		x: 150,
+		y: 130
+	},
+	{
+		x: 150,
+		y: 350
+	},
+	{
+		x: 350,
+		y: 350
+	},
+	{
+		x: 610,
+		y: 350
+	},
+	{
+		x: 850,
+		y: 350
+	},
+	{
+		x: 850,
+		y: 500
+	}
+];
+function FloorPlan({ className, walkPath = false }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 1000 680",
+		preserveAspectRatio: "xMidYMid meet",
+		className,
+		role: "img",
+		"aria-label": "Ground floor plan",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "0",
+				y: "0",
+				width: "1000",
+				height: "680",
+				fill: "#ffffff"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "60",
+				y: "60",
+				width: "880",
+				height: "560",
+				fill: "none",
+				stroke: "#3f3f46",
+				strokeWidth: "4"
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				fill: "none",
+				stroke: "#52525b",
+				strokeWidth: "2",
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						x: "60",
+						y: "320",
+						width: "880",
+						height: "60"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "60",
+						y: "60",
+						width: "180",
+						height: "130"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "60",
+						y: "190",
+						width: "180",
+						height: "130"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "60",
+						y: "380",
+						width: "180",
+						height: "120"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "60",
+						y: "500",
+						width: "180",
+						height: "120"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "240",
+						y: "60",
+						width: "220",
+						height: "260"
+					}),
+					/* @__PURE__ */ jsx("line", {
+						x1: "350",
+						y1: "60",
+						x2: "350",
+						y2: "320"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "240",
+						y: "380",
+						width: "220",
+						height: "240"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "460",
+						y: "60",
+						width: "300",
+						height: "130"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "460",
+						y: "190",
+						width: "300",
+						height: "130"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "460",
+						y: "380",
+						width: "300",
+						height: "240"
+					}),
+					/* @__PURE__ */ jsx("line", {
+						x1: "610",
+						y1: "380",
+						x2: "610",
+						y2: "620"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "760",
+						y: "60",
+						width: "180",
+						height: "260"
+					}),
+					/* @__PURE__ */ jsx("line", {
+						x1: "760",
+						y1: "150",
+						x2: "940",
+						y2: "150"
+					}),
+					/* @__PURE__ */ jsx("line", {
+						x1: "760",
+						y1: "230",
+						x2: "940",
+						y2: "230"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: "760",
+						y: "380",
+						width: "180",
+						height: "240"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				fill: "none",
+				stroke: "#a1a1aa",
+				strokeWidth: "1.5",
+				children: [
+					/* @__PURE__ */ jsx("path", { d: "M150 320 A 30 30 0 0 1 180 350" }),
+					/* @__PURE__ */ jsx("path", { d: "M350 320 A 30 30 0 0 1 380 350" }),
+					/* @__PURE__ */ jsx("path", { d: "M610 320 A 30 30 0 0 1 640 350" }),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "850",
+						cy: "480",
+						r: "26"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: "330",
+						cy: "500",
+						r: "26"
+					})
+				]
+			}),
+			walkPath && /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("polyline", {
+				points: WALK_PATH.map((p) => `${p.x},${p.y}`).join(" "),
+				fill: "none",
+				stroke: "#2563eb",
+				strokeWidth: "4",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeDasharray: "1 16"
+			}), WALK_PATH.map((p, i) => /* @__PURE__ */ jsxs("g", {
+				className: "wwc:group wwc:cursor-pointer",
+				children: [
+					/* @__PURE__ */ jsxs("title", { children: ["Enter walk-through at point ", i + 1] }),
+					/* @__PURE__ */ jsx("circle", {
+						cx: p.x,
+						cy: p.y,
+						r: "26",
+						fill: "transparent"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: p.x,
+						cy: p.y,
+						r: "20",
+						className: "wwc:fill-blue-500/25 wwc:opacity-0 wwc:transition-opacity wwc:group-hover:opacity-100"
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx: p.x,
+						cy: p.y,
+						r: "9",
+						fill: "#2563eb",
+						stroke: "#ffffff",
+						strokeWidth: "3"
+					})
+				]
+			}, `${p.x}-${p.y}`))] })
+		]
+	});
+}
+function SplitBlueprints({ levels, zoom, pan, isPanning }) {
+	const count = levels.length;
+	const cols = count <= 1 ? 1 : count === 2 || count === 4 ? 2 : 3;
+	const scroll = count > 6;
+	const rows = Math.ceil(count / cols);
+	return /* @__PURE__ */ jsx("div", {
+		className: `wwc:absolute wwc:inset-0 wwc:grid ${scroll ? "wwc:overflow-y-auto" : ""}`,
+		style: {
+			gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+			...scroll ? { gridAutoRows: "50%" } : { gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))` }
+		},
+		children: levels.map((lvl, i) => /* @__PURE__ */ jsxs("div", {
+			className: `wwc:relative wwc:overflow-hidden ${i % cols > 0 ? "wwc:border-l wwc:border-border" : ""} ${Math.floor(i / cols) > 0 ? "wwc:border-t wwc:border-border" : ""}`,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: `wwc:h-full wwc:w-full wwc:origin-center ${isPanning ? "" : "wwc:transition-transform wwc:duration-75"}`,
+				style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` },
+				children: /* @__PURE__ */ jsx(FloorPlan, { className: "wwc:h-full wwc:w-full" })
+			}), /* @__PURE__ */ jsx("span", {
+				className: `wwc:absolute wwc:left-3 wwc:top-3 wwc:rounded-md wwc:bg-white/90 wwc:px-2 wwc:py-1 wwc:text-[11px] wwc:font-semibold wwc:text-foreground dark:wwc:bg-zinc-900/90 ${FLOAT_SHADOW}`,
+				children: lvl.label
+			})]
+		}, lvl.value))
+	});
+}
+const NAV_NODES = [{
+	id: "house-12-f0",
+	label: "HOUSE-12-F0",
+	children: BUILDING_FLOORS.map((f) => ({
+		id: f.id,
+		label: f.name
+	}))
+}];
+/**
+* Single-blueprint viewer at the lowest hierarchy level: a pan/zoom SVG floor-plan canvas with a
+* searchable floor navigator (top-left), a "Show Multiple" split view (top-center), zoom tools
+* (top-right), and a full-height Building Progress side panel.
+*
+* @deprecated Preview/demo prototype — renders built-in sample data and mock handlers. Not a
+* supported production import: compose your page from the widgets this template uses, wired to your
+* own data (see the BlueprintViewer template docs in Storybook). Slated for removal from the public API in a
+* future major.
+*/
+function BlueprintViewer() {
+	const [zoom, setZoom] = useState(1);
+	const canvasRef = useRef(null);
+	const [showMultiple, setShowMultiple] = useState(false);
+	const [showPanel, setShowPanel] = useState(true);
+	const [week, setWeek] = useState("W112");
+	const [fullScreen, setFullScreen] = useState(false);
+	const [navSize, setNavSize] = useState("default");
+	const [activeFloor, setActiveFloor] = useState("gf");
+	const activeFloorData = BUILDING_FLOORS.find((f) => f.id === activeFloor);
+	const selectFloor = (id) => {
+		setActiveFloor(id);
+		setShowMultiple(false);
+	};
+	const [pan, setPan] = useState({
+		x: 0,
+		y: 0
+	});
+	const [isPanning, setIsPanning] = useState(false);
+	const panStart = useRef(null);
+	useEffect(() => {
+		const el = canvasRef.current;
+		if (!el) return;
+		const onWheel = (event) => {
+			event.preventDefault();
+			setZoom((z) => Math.min(4, Math.max(.25, Number((z * (event.deltaY < 0 ? 1.1 : 1 / 1.1)).toFixed(3)))));
+		};
+		el.addEventListener("wheel", onWheel, { passive: false });
+		return () => el.removeEventListener("wheel", onWheel);
+	}, []);
+	useEffect(() => {
+		if (!fullScreen) return;
+		const onKey = (event) => {
+			if (event.key === "Escape") setFullScreen(false);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [fullScreen]);
+	const startPan = (event) => {
+		if (event.button !== 0) return;
+		panStart.current = {
+			pointerX: event.clientX,
+			pointerY: event.clientY,
+			panX: pan.x,
+			panY: pan.y
+		};
+		setIsPanning(true);
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+	const movePan = (event) => {
+		const start = panStart.current;
+		if (!start) return;
+		setPan({
+			x: start.panX + (event.clientX - start.pointerX),
+			y: start.panY + (event.clientY - start.pointerY)
+		});
+	};
+	const endPan = (event) => {
+		if (!panStart.current) return;
+		panStart.current = null;
+		setIsPanning(false);
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: fullScreen ? "wwc:fixed wwc:inset-0 wwc:z-50 wwc:overflow-hidden wwc:bg-background" : "wwc:h-full wwc:w-full wwc:overflow-hidden",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:h-full wwc:flex-col",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "wwc:flex wwc:min-h-12 wwc:shrink-0 wwc:items-center wwc:border-b wwc:border-border wwc:bg-background wwc:px-3",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "wwc:grid wwc:h-full wwc:min-h-12 wwc:w-full wwc:grid-cols-3 wwc:items-center wwc:gap-4",
+					children: [
+						/* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+							/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, {
+								href: "#",
+								children: "Villa 1"
+							}) }),
+							/* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+							/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, {
+								href: "#",
+								children: "HOUSE-12-F0"
+							}) }),
+							/* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+							/* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbPage, { children: activeFloorData?.name }) })
+						] }) }),
+						/* @__PURE__ */ jsx("div", { "aria-hidden": "true" }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-center wwc:justify-end wwc:gap-2",
+							children: [/* @__PURE__ */ jsx(WeekSelector, {
+								className: "wwc:shrink-0 wwc:border-0 wwc:bg-transparent wwc:px-0 wwc:py-0",
+								weeks: WEEKS,
+								value: week,
+								onValueChange: setWeek,
+								visibleCount: 4
+							}), /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "outline",
+								icon: true,
+								size: "sm",
+								"aria-label": fullScreen ? "Exit full screen" : "Full screen",
+								className: "wwc:shrink-0",
+								onClick: () => setFullScreen((v) => !v),
+								children: fullScreen ? /* @__PURE__ */ jsx(Minimize2, { className: "wwc:h-4 wwc:w-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "wwc:h-4 wwc:w-4" })
+							})]
+						})
+					]
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:min-h-0 wwc:flex-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					ref: canvasRef,
+					className: "wwc:relative wwc:flex-1 wwc:overflow-hidden wwc:bg-zinc-100 dark:wwc:bg-zinc-900",
+					children: [
+						showMultiple ? /* @__PURE__ */ jsx(SplitBlueprints, {
+							levels: FLOOR_TABS,
+							zoom,
+							pan,
+							isPanning
+						}) : /* @__PURE__ */ jsx("div", {
+							className: "wwc:absolute wwc:inset-0",
+							children: /* @__PURE__ */ jsx("div", {
+								className: `wwc:h-full wwc:w-full wwc:origin-center ${isPanning ? "" : "wwc:transition-transform wwc:duration-75"}`,
+								style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` },
+								children: /* @__PURE__ */ jsx(FloorPlan, { className: "wwc:h-full wwc:w-full" })
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: `wwc:absolute wwc:inset-0 wwc:z-0 ${isPanning ? "wwc:cursor-grabbing" : "wwc:cursor-grab"}`,
+							onPointerDown: startPan,
+							onPointerMove: movePan,
+							onPointerUp: endPan,
+							onPointerCancel: endPan
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "wwc:absolute wwc:left-[14px] wwc:top-[14px] wwc:z-10 wwc:w-64 wwc:max-w-[60%]",
+							children: /* @__PURE__ */ jsx(CanvasNavigator, {
+								className: FLOAT_SHADOW,
+								nodes: NAV_NODES,
+								searchable: true,
+								searchPlaceholder: "Search floors…",
+								expandable: false,
+								value: activeFloor,
+								onSelect: selectFloor,
+								size: navSize,
+								onSizeChange: setNavSize
+							})
+						}),
+						!showPanel && /* @__PURE__ */ jsx("div", {
+							className: "wwc:absolute wwc:left-1/2 wwc:top-[14px] wwc:z-20 wwc:-translate-x-1/2",
+							children: /* @__PURE__ */ jsxs(Toggle, {
+								variant: "outline",
+								size: "sm",
+								pressed: showMultiple,
+								onPressedChange: setShowMultiple,
+								"aria-label": "Show multiple floors",
+								className: `wwc:gap-1.5 wwc:bg-background ${FLOAT_SHADOW}`,
+								children: [/* @__PURE__ */ jsx(LayoutGrid, { className: "wwc:size-4" }), "Show Multiple"]
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:absolute wwc:right-[14px] wwc:top-[14px] wwc:z-10 wwc:flex wwc:flex-col wwc:items-end wwc:gap-2",
+							children: [
+								!showPanel && /* @__PURE__ */ jsxs(Button, {
+									type: "button",
+									variant: "outline",
+									size: "sm",
+									className: `wwc:gap-1.5 ${FLOAT_SHADOW}`,
+									onClick: () => setShowPanel(true),
+									children: [/* @__PURE__ */ jsx(PanelRight, { className: "wwc:size-4" }), "Show details"]
+								}),
+								/* @__PURE__ */ jsx(VerticalZoomTools, {
+									className: FLOAT_SHADOW,
+									zoomLevel: zoom,
+									minZoom: .25,
+									maxZoom: 4,
+									onZoomIn: () => setZoom((z) => Math.min(4, z + .25)),
+									onZoomOut: () => setZoom((z) => Math.max(.25, z - .25))
+								}),
+								!showPanel && /* @__PURE__ */ jsx(TooltipProvider, {
+									delayDuration: 200,
+									children: /* @__PURE__ */ jsx(Toolbar, {
+										orientation: "vertical",
+										"aria-label": "Walk-through",
+										className: `wwc:w-10 wwc:py-1 ${FLOAT_SHADOW}`,
+										children: /* @__PURE__ */ jsx(HoverTooltip, {
+											content: "View walk-through",
+											side: "left",
+											children: /* @__PURE__ */ jsx(ToolbarButton, {
+												icon: true,
+												label: "View walk-through",
+												children: /* @__PURE__ */ jsx(Video, { className: "wwc:h-4 wwc:w-4" })
+											})
+										})
+									})
+								})
+							]
+						})
+					]
+				}), showPanel && /* @__PURE__ */ jsxs("aside", {
+					className: `wwc:z-20 wwc:flex wwc:h-full wwc:w-72 wwc:shrink-0 wwc:flex-col wwc:border-l wwc:border-border wwc:bg-white dark:wwc:bg-zinc-950 ${FLOAT_SHADOW}`,
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-2 wwc:p-3",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "wwc:text-sm wwc:font-bold wwc:text-foreground",
+								children: "HOUSE-12-F0"
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": "Close panel",
+								className: "wwc:text-muted-foreground wwc:transition-colors wwc:hover:text-foreground wwc:focus-visible:outline-none",
+								onClick: () => setShowPanel(false),
+								children: /* @__PURE__ */ jsx(X, { className: "wwc:size-3.5" })
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", { className: "wwc:h-px wwc:w-full wwc:bg-border" }),
+						!showMultiple && /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:flex-col wwc:gap-2 wwc:p-3",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "wwc:text-[11px] wwc:text-muted-foreground",
+									children: activeFloorData?.name
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-2",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "wwc:text-xl wwc:font-bold wwc:leading-none wwc:text-foreground",
+											children: "67%"
+										}),
+										/* @__PURE__ */ jsxs("div", {
+											className: "wwc:flex wwc:items-center wwc:gap-0.5 wwc:rounded wwc:bg-destructive/10 wwc:px-1.5 wwc:py-0.5 wwc:text-destructive",
+											children: [
+												/* @__PURE__ */ jsx(TrendingDown, { className: "wwc:size-3" }),
+												/* @__PURE__ */ jsx("span", {
+													className: "wwc:text-[11px] wwc:font-semibold",
+													children: "-4%"
+												}),
+												/* @__PURE__ */ jsx("span", {
+													className: "wwc:text-[11px]",
+													children: "variance"
+												})
+											]
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "wwc:text-xl wwc:font-bold wwc:leading-none wwc:text-zinc-500",
+											children: "71%"
+										})
+									]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "wwc:flex wwc:items-center wwc:justify-between",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "wwc:flex wwc:items-center wwc:gap-1.5",
+										children: [/* @__PURE__ */ jsx("span", { className: "wwc:size-1.5 wwc:rounded-sm wwc:bg-foreground" }), /* @__PURE__ */ jsx("span", {
+											className: "wwc:text-[10px] wwc:text-foreground",
+											children: "Approved"
+										})]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "wwc:flex wwc:items-center wwc:gap-1.5",
+										children: [/* @__PURE__ */ jsx("span", { className: "wwc:size-1.5 wwc:rounded-sm wwc:bg-zinc-500" }), /* @__PURE__ */ jsx("span", {
+											className: "wwc:text-[10px] wwc:text-zinc-500",
+											children: "Planned"
+										})]
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "wwc:flex wwc:flex-col wwc:gap-0.5 wwc:py-0.5",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: "wwc:h-2 wwc:w-full wwc:overflow-hidden wwc:rounded-sm wwc:bg-muted",
+										children: /* @__PURE__ */ jsx("div", {
+											className: "wwc:h-full wwc:rounded-sm wwc:bg-foreground",
+											style: { width: "67%" }
+										})
+									}), /* @__PURE__ */ jsx("div", {
+										className: "wwc:h-2 wwc:w-full wwc:overflow-hidden wwc:rounded-sm wwc:bg-muted",
+										children: /* @__PURE__ */ jsx("div", {
+											className: "wwc:h-full wwc:rounded-sm wwc:bg-zinc-500/40",
+											style: { width: "71%" }
+										})
+									})]
+								})
+							]
+						}),
+						!showMultiple && /* @__PURE__ */ jsx("div", { className: "wwc:h-px wwc:w-full wwc:bg-border" }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:min-h-0 wwc:flex-col wwc:gap-2 wwc:p-3",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "wwc:text-[11px] wwc:font-semibold wwc:text-foreground",
+									children: "Progress by floor"
+								}),
+								/* @__PURE__ */ jsx(BuildingProgress, {
+									floors: BUILDING_FLOORS,
+									activeId: showMultiple ? void 0 : activeFloor,
+									onFloorSelect: selectFloor,
+									size: "compact"
+								}),
+								/* @__PURE__ */ jsxs(Toggle, {
+									variant: "outline",
+									pressed: showMultiple,
+									onPressedChange: setShowMultiple,
+									"aria-label": "Show multiple floors",
+									className: "wwc:mt-1 wwc:w-full wwc:gap-1.5 wwc:text-[13px]",
+									children: [/* @__PURE__ */ jsx(LayoutGrid, { className: "wwc:size-4" }), "Show multiple floors"]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("div", { className: "wwc:h-px wwc:w-full wwc:bg-border" }),
+						/* @__PURE__ */ jsx("div", {
+							className: "wwc:flex-1 wwc:p-3",
+							children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "wwc:flex wwc:h-9 wwc:w-full wwc:items-center wwc:justify-center wwc:gap-1.5 wwc:rounded-lg wwc:bg-foreground wwc:text-[13px] wwc:font-semibold wwc:text-background wwc:transition-opacity wwc:hover:opacity-90 wwc:focus-visible:outline-none",
+								children: ["View Walk-through", /* @__PURE__ */ jsx(ArrowRight, { className: "wwc:size-3.5" })]
+							})
+						})
+					]
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { BlueprintViewer };
+
+//# sourceMappingURL=core-blueprint-viewer.mjs.map