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

package/dist/canvas-navigator.mjs

@@ -0,0 +1,426 @@
+import { Button } from "./button.mjs";
+import { TreeRow } from "./tree-row.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ArrowLeft, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Loader2, Maximize2, Minimize2, Search, X } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/canvas-navigator.tsx
+/** Indent added per tree level. The shift step equals this — the gap between level 1 and level 2. */
+const INDENT_PX = 8;
+function useControllable(controlled, fallback, onChange) {
+	const [internal, setInternal] = React.useState(fallback);
+	return [controlled !== void 0 ? controlled : internal, React.useCallback((next) => {
+		if (controlled === void 0) setInternal(next);
+		onChange?.(next);
+	}, [controlled, onChange])];
+}
+function indexNodes(nodes) {
+	const byId = /* @__PURE__ */ new Map();
+	const parentById = /* @__PURE__ */ new Map();
+	const branchIds = [];
+	const walk = (list, parent) => {
+		for (const node of list) {
+			byId.set(node.id, node);
+			parentById.set(node.id, parent);
+			if (Array.isArray(node.children)) {
+				branchIds.push(node.id);
+				walk(node.children, node);
+			}
+		}
+	};
+	walk(nodes, null);
+	return {
+		byId,
+		parentById,
+		branchIds
+	};
+}
+/**
+* Flatten every node whose label matches the lowercased query into a list of hits, each carrying its
+* full label path from the root — rendered as a single-line, start-truncated breadcrumb instead of
+* the hierarchy.
+*/
+function searchResults(nodes, q) {
+	const out = [];
+	const walk = (list, trail) => {
+		for (const node of list) {
+			const path = [...trail, node.label];
+			if (node.label.toLowerCase().includes(q)) out.push({
+				node,
+				path
+			});
+			if (Array.isArray(node.children)) walk(node.children, path);
+		}
+	};
+	walk(nodes, []);
+	return out;
+}
+const CanvasNavigator = React.forwardRef(({ className, nodes, value, defaultValue, onSelect, expandedIds, defaultExpandedIds, onExpandedChange, size: sizeProp, defaultSize = "default", onSizeChange, expandable = true, collapseIcon, title = "Navigator", header = true, searchable = false, searchPlaceholder = "Search…", emptyLabel = "No items", truncate, tailChars, maxLines, compact = false, loading = false, loadingLabel = "Loading…", shiftAfterLevel, ...rest }, ref) => {
+	const rowProps = {
+		truncate,
+		tailChars,
+		maxLines,
+		indentPx: INDENT_PX,
+		textClassName: compact ? "wwc:text-xs" : void 0,
+		iconClassName: "wwc:text-muted-foreground wwc:[&_svg]:stroke-[1.5]",
+		chevronClassName: "wwc:text-muted-foreground wwc:stroke-[1.5]"
+	};
+	const textCls = compact ? "wwc:text-xs" : "wwc:text-sm";
+	const index = React.useMemo(() => indexNodes(nodes), [nodes]);
+	const [expanded, setExpanded] = useControllable(expandedIds, defaultExpandedIds ?? index.branchIds, onExpandedChange);
+	const [size, setSize] = useControllable(sizeProp, defaultSize, onSizeChange);
+	const [selected, setSelected] = useControllable(value, defaultValue ?? nodes[0]?.id, onSelect);
+	const [query, setQuery] = React.useState("");
+	const q = query.trim().toLowerCase();
+	const searching = searchable && q.length > 0;
+	const results = React.useMemo(() => searching ? searchResults(nodes, q) : [], [
+		nodes,
+		searching,
+		q
+	]);
+	const [focusedId, setFocusedId] = React.useState(null);
+	const [openLastLevels, setOpenLastLevels] = React.useState(() => /* @__PURE__ */ new Set());
+	const toggleLastLevel = (id) => {
+		setOpenLastLevels((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	};
+	const expandedSet = new Set(searching ? index.branchIds : expanded);
+	const toggleExpand = (id) => {
+		setExpanded(expandedSet.has(id) ? expanded.filter((b) => b !== id) : [...expanded, id]);
+	};
+	const isExpanded = size === "expanded";
+	const isCollapsed = size === "collapsed";
+	const valueParent = selected !== void 0 ? index.parentById.get(selected) : void 0;
+	const siblings = valueParent ? valueParent.children ?? [] : nodes;
+	const activeIndex = siblings.findIndex((n) => n.id === selected);
+	const activeNode = activeIndex >= 0 ? siblings[activeIndex] : void 0;
+	const findEnabled = (from, dir) => {
+		for (let i = from; i >= 0 && i < siblings.length; i += dir) if (!siblings[i].disabled) return i;
+		return -1;
+	};
+	const prevIndex = activeIndex >= 0 ? findEnabled(activeIndex - 1, -1) : -1;
+	const nextIndex = activeIndex >= 0 ? findEnabled(activeIndex + 1, 1) : -1;
+	const stepTo = (i) => {
+		if (i >= 0 && i < siblings.length) setSelected(siblings[i].id);
+	};
+	const isBranchNode = (node) => Array.isArray(node.children);
+	const isLeafParent = (node) => isBranchNode(node) && node.children.every((c) => !isBranchNode(c));
+	const emptyState = () => /* @__PURE__ */ jsx("div", {
+		className: cn("wwc:px-3 wwc:py-6 wwc:text-center wwc:text-muted-foreground", textCls),
+		children: emptyLabel
+	});
+	const focusedNode = focusedId ? index.byId.get(focusedId) : void 0;
+	const showFocused = !isExpanded && !isCollapsed && !searching && !!focusedNode && isLeafParent(focusedNode);
+	const goBack = () => setFocusedId(null);
+	const deepestOpenDepth = (list, depth) => {
+		let max = depth;
+		for (const node of list) {
+			if (!isBranchNode(node) || node.children.length === 0) continue;
+			if (isLeafParent(node) ? openLastLevels.has(node.id) : expandedSet.has(node.id)) max = Math.max(max, deepestOpenDepth(node.children, depth + 1));
+		}
+		return max;
+	};
+	const shiftPx = (shiftAfterLevel ? Math.max(0, deepestOpenDepth(nodes, 0) - (shiftAfterLevel - 1)) : 0) * INDENT_PX;
+	const sizeControls = /* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:items-center wwc:gap-0.5",
+		children: [expandable && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			icon: true,
+			size: "sm",
+			"aria-pressed": isExpanded,
+			"aria-label": isExpanded ? "Restore navigator size" : "Expand navigator",
+			onClick: () => setSize(isExpanded ? "default" : "expanded"),
+			children: isExpanded ? /* @__PURE__ */ jsx(Minimize2, { className: "wwc:h-4 wwc:w-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "wwc:h-4 wwc:w-4" })
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			icon: true,
+			size: "sm",
+			"aria-pressed": false,
+			"aria-label": "Collapse navigator",
+			onClick: () => setSize("collapsed"),
+			children: collapseIcon ?? /* @__PURE__ */ jsx(ChevronUp, { className: "wwc:h-4 wwc:w-4" })
+		})]
+	});
+	const selectNode = (node) => {
+		if (!node.disabled) setSelected(node.id);
+	};
+	const openLevel = (leaf) => {
+		if (leaf.disabled) return;
+		const parent = index.parentById.get(leaf.id);
+		if (parent) setFocusedId(parent.id);
+		setSelected(leaf.id);
+	};
+	const pickResult = (node) => {
+		if (node.disabled) return;
+		setSelected(node.id);
+		setFocusedId(isBranchNode(node) ? null : index.parentById.get(node.id)?.id ?? null);
+		setQuery("");
+	};
+	const renderSearchResults = () => results.map(({ node, path }) => /* @__PURE__ */ jsxs("div", {
+		role: "button",
+		tabIndex: node.disabled ? -1 : 0,
+		"aria-disabled": node.disabled || void 0,
+		onClick: () => pickResult(node),
+		onKeyDown: (e) => {
+			if (!node.disabled && (e.key === "Enter" || e.key === " ")) {
+				e.preventDefault();
+				pickResult(node);
+			}
+		},
+		className: cn("wwc:group wwc:relative wwc:flex wwc:w-full wwc:cursor-pointer wwc:items-center wwc:gap-2 wwc:rounded-md wwc:px-2 wwc:text-left wwc:transition-colors wwc:hover:bg-accent wwc:focus-visible:bg-accent wwc:focus-visible:outline-none", compact ? "wwc:py-1" : "wwc:py-1.5", node.disabled && "wwc:pointer-events-none wwc:opacity-50", node.id === selected && "wwc:bg-muted wwc:text-foreground"),
+		children: [
+			node.icon && /* @__PURE__ */ jsx("span", {
+				className: "wwc:flex wwc:size-4 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:text-muted-foreground",
+				children: node.icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				dir: "rtl",
+				className: cn("wwc:min-w-0 wwc:flex-1 wwc:truncate wwc:text-left", textCls),
+				children: /* @__PURE__ */ jsxs("bdi", { children: [path.length > 1 && /* @__PURE__ */ jsx("span", {
+					className: "wwc:text-muted-foreground",
+					children: `${path.slice(0, -1).join("/")}/`
+				}), /* @__PURE__ */ jsx("span", {
+					className: "wwc:font-normal wwc:text-foreground",
+					children: path[path.length - 1]
+				})] })
+			}),
+			!node.disabled && openHint
+		]
+	}, node.id));
+	const openHint = /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "secondary",
+		size: "sm",
+		tabIndex: -1,
+		className: "wwc:absolute wwc:right-2 wwc:top-1/2 wwc:h-auto wwc:-translate-y-1/2 wwc:px-1.5 wwc:py-0.5 wwc:text-[10px] wwc:font-bold wwc:leading-none wwc:opacity-0 wwc:transition-opacity wwc:group-hover:opacity-100 wwc:group-has-[[data-treerow-toggle]:hover]:opacity-0",
+		children: "view"
+	});
+	const leafRow = (node, level = 0, onClick, trailing = node.disabled ? void 0 : openHint) => /* @__PURE__ */ jsx(TreeRow, {
+		id: node.id,
+		level,
+		icon: node.icon,
+		label: node.label,
+		fontWeight: "wwc:font-normal",
+		variant: node.id === selected ? "neutral-selected" : "default",
+		onClick: onClick ?? (() => selectNode(node)),
+		trailing,
+		...rowProps
+	}, node.id);
+	const renderDefaultTree = (list, depth) => list.map((node) => {
+		if (!isBranchNode(node)) return leafRow(node);
+		if (isLeafParent(node)) {
+			const hasChildren = node.children.length > 0;
+			const open = openLastLevels.has(node.id);
+			return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(TreeRow, {
+				id: node.id,
+				level: depth,
+				expandable: true,
+				expanded: open,
+				icon: node.icon,
+				label: node.label,
+				fontWeight: "wwc:font-medium",
+				variant: node.id === selected ? "neutral-selected" : "default",
+				onClick: () => selectNode(node),
+				onToggle: () => toggleLastLevel(node.id),
+				trailing: node.disabled ? void 0 : openHint,
+				...rowProps
+			}), open && (hasChildren ? node.children.map((leaf) => leafRow(leaf, depth + 1, () => openLevel(leaf))) : /* @__PURE__ */ jsx("div", {
+				className: cn("wwc:py-1.5 wwc:pr-2 wwc:text-muted-foreground", textCls),
+				style: { paddingLeft: `${(depth + 1) * 8 + 22}px` },
+				children: emptyLabel
+			}))] }, node.id);
+		}
+		const open = expandedSet.has(node.id);
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(TreeRow, {
+			id: node.id,
+			level: depth,
+			expandable: true,
+			expanded: open,
+			icon: node.icon,
+			label: node.label,
+			fontWeight: "wwc:font-medium",
+			variant: node.id === selected ? "neutral-selected" : "default",
+			onClick: () => selectNode(node),
+			onToggle: () => toggleExpand(node.id),
+			trailing: node.disabled ? void 0 : openHint,
+			...rowProps
+		}), open && renderDefaultTree(node.children, depth + 1)] }, node.id);
+	});
+	const renderTree = (list, depth) => list.map((node) => {
+		const hasChildren = isBranchNode(node) && node.children.length > 0;
+		const open = expandedSet.has(node.id);
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(TreeRow, {
+			id: node.id,
+			level: depth,
+			expandable: hasChildren,
+			expanded: open,
+			icon: node.icon,
+			label: node.label,
+			fontWeight: isBranchNode(node) ? "wwc:font-medium" : "wwc:font-normal",
+			variant: node.id === selected ? "neutral-selected" : "default",
+			onClick: () => selectNode(node),
+			onToggle: hasChildren ? () => toggleExpand(node.id) : void 0,
+			trailing: node.disabled ? void 0 : openHint,
+			...rowProps
+		}), hasChildren && open && renderTree(node.children, depth + 1)] }, node.id);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:flex wwc:flex-col wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:bg-white wwc:text-card-foreground wwc:shadow-lg", isExpanded ? "wwc:h-[32rem] wwc:w-80 wwc:max-w-[90vw]" : "wwc:w-72 wwc:max-w-[80vw]", className),
+		...rest,
+		children: [
+			header && isCollapsed && /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:h-9 wwc:shrink-0 wwc:items-stretch wwc:divide-x wwc:divide-border",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "wwc:flex wwc:items-center wwc:px-0.5",
+						children: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							icon: true,
+							size: "sm",
+							"aria-label": "Back to parent level",
+							disabled: !valueParent,
+							onClick: () => valueParent && setSelected(valueParent.id),
+							children: /* @__PURE__ */ jsx(ArrowLeft, { className: "wwc:h-4 wwc:w-4" })
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:items-center wwc:gap-1 wwc:px-0.5",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								icon: true,
+								size: "sm",
+								"aria-label": "Previous item",
+								disabled: prevIndex < 0,
+								onClick: () => stepTo(prevIndex),
+								children: /* @__PURE__ */ jsx(ChevronLeft, { className: "wwc:h-4 wwc:w-4" })
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:items-baseline wwc:justify-start wwc:gap-1.5 wwc:px-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: cn("wwc:truncate wwc:font-medium", textCls),
+									children: activeNode?.label ?? title
+								}), activeIndex >= 0 && siblings.length > 0 && /* @__PURE__ */ jsxs("span", {
+									className: "wwc:shrink-0 wwc:font-mono wwc:text-xs wwc:text-muted-foreground",
+									children: [
+										activeIndex + 1,
+										"/",
+										siblings.length
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								icon: true,
+								size: "sm",
+								"aria-label": "Next item",
+								disabled: nextIndex < 0,
+								onClick: () => stepTo(nextIndex),
+								children: /* @__PURE__ */ jsx(ChevronRight, { className: "wwc:h-4 wwc:w-4" })
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "wwc:flex wwc:items-center wwc:px-0.5",
+						children: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							icon: true,
+							size: "sm",
+							"aria-pressed": true,
+							"aria-label": "Expand navigator",
+							onClick: () => setSize("default"),
+							children: /* @__PURE__ */ jsx(ChevronDown, { className: "wwc:h-4 wwc:w-4" })
+						})
+					})
+				]
+			}),
+			header && showFocused && focusedNode && /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:h-9 wwc:shrink-0 wwc:items-center wwc:justify-between wwc:gap-2 wwc:border-b wwc:px-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-1",
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						icon: true,
+						size: "sm",
+						"aria-label": "Back",
+						onClick: goBack,
+						children: /* @__PURE__ */ jsx(ChevronLeft, { className: "wwc:h-4 wwc:w-4" })
+					}), /* @__PURE__ */ jsx("span", {
+						className: cn("wwc:truncate wwc:font-medium", textCls),
+						children: focusedNode.label
+					})]
+				}), sizeControls]
+			}),
+			header && !searchable && !isCollapsed && !showFocused && /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:h-9 wwc:shrink-0 wwc:items-center wwc:justify-between wwc:gap-2 wwc:border-b wwc:px-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("wwc:truncate wwc:font-medium", textCls),
+					children: title
+				}), sizeControls]
+			}),
+			searchable && !isCollapsed && !showFocused && /* @__PURE__ */ jsxs("div", {
+				className: cn("wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2 wwc:border-b wwc:pl-3 wwc:pr-1.5", compact ? "wwc:h-9" : "wwc:h-11"),
+				children: [
+					/* @__PURE__ */ jsx(Search, { className: cn("wwc:shrink-0 wwc:text-muted-foreground", compact ? "wwc:size-4" : "wwc:size-[18px]") }),
+					/* @__PURE__ */ jsx("input", {
+						value: query,
+						onChange: (e) => setQuery(e.target.value),
+						placeholder: searchPlaceholder,
+						"aria-label": "Search",
+						className: cn("wwc:min-w-0 wwc:flex-1 wwc:bg-transparent wwc:text-foreground wwc:outline-none wwc:placeholder:text-muted-foreground", textCls)
+					}),
+					query && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						icon: true,
+						size: "sm",
+						"aria-label": "Clear search",
+						className: "wwc:h-6 wwc:w-6",
+						onClick: () => setQuery(""),
+						children: /* @__PURE__ */ jsx(X, { className: "wwc:h-3.5 wwc:w-3.5" })
+					}),
+					header && sizeControls
+				]
+			}),
+			!isCollapsed && /* @__PURE__ */ jsx("div", {
+				className: cn("wwc:overflow-auto wwc:p-1.5", isExpanded ? "wwc:min-h-0 wwc:flex-1" : "wwc:max-h-72"),
+				children: searching ? results.length > 0 ? renderSearchResults() : /* @__PURE__ */ jsxs("div", {
+					className: cn("wwc:px-3 wwc:py-6 wwc:text-center wwc:text-muted-foreground", textCls),
+					children: [
+						"No matches for “",
+						query.trim(),
+						"”"
+					]
+				}) : isExpanded ? renderTree(nodes, 0) : showFocused ? focusedNode?.children && focusedNode.children.length > 0 ? focusedNode.children.map((leaf) => leafRow(leaf)) : emptyState() : /* @__PURE__ */ jsx("div", {
+					className: "wwc:transition-transform wwc:duration-200 wwc:ease-out",
+					style: shiftPx ? { transform: `translateX(-${shiftPx}px)` } : void 0,
+					children: renderDefaultTree(nodes, 0)
+				})
+			}),
+			loading && !isCollapsed && /* @__PURE__ */ jsxs("div", {
+				className: cn("wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2 wwc:border-t wwc:border-border wwc:bg-muted wwc:text-muted-foreground", compact ? "wwc:px-3 wwc:py-2" : "wwc:px-4 wwc:py-2.5"),
+				children: [/* @__PURE__ */ jsx(Loader2, { className: cn("wwc:shrink-0 wwc:animate-spin", compact ? "wwc:size-3" : "wwc:size-3.5") }), /* @__PURE__ */ jsx("span", {
+					className: cn("wwc:truncate", textCls),
+					children: loadingLabel
+				})]
+			})
+		]
+	});
+});
+CanvasNavigator.displayName = "CanvasNavigator";
+//#endregion
+export { CanvasNavigator };
+
+//# sourceMappingURL=canvas-navigator.mjs.map

package/dist/canvas-navigator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-navigator.mjs","names":[],"sources":["../src/canvas-navigator.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {\n\tArrowLeft,\n\tChevronDown,\n\tChevronLeft,\n\tChevronRight,\n\tChevronUp,\n\tLoader2,\n\tMaximize2,\n\tMinimize2,\n\tSearch,\n\tX,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {TreeRow} from \"./tree-row\";\n\n/**\n * A node in the navigator hierarchy. A node with a `children` array is a branch (a level you can\n * drill into / expand) — even an empty array, which renders an empty state. A node without a\n * `children` property is a selectable leaf. Nest to any depth.\n */\nexport interface CanvasNavigatorNode {\n\tid: string;\n\tlabel: string;\n\t/** Leading icon for the row. */\n\ticon?: React.ReactNode;\n\tdisabled?: boolean;\n\tchildren?: CanvasNavigatorNode[];\n}\n\n/**\n * Panel size:\n * - `collapsed` — header only, body hidden.\n * - `default` — normal panel (drills one level at a time).\n * - `expanded` — enlarged (\"big\") panel showing the full tree.\n */\nexport type CanvasNavigatorSize = \"collapsed\" | \"default\" | \"expanded\";\n\nexport interface CanvasNavigatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n\t/** Hierarchical nodes (branches + leaves) shown in the navigator. */\n\tnodes: CanvasNavigatorNode[];\n\t/** Selected node id (controlled). */\n\tvalue?: string;\n\t/** Initial selected node id (uncontrolled). Defaults to the first (top-level) node. */\n\tdefaultValue?: string;\n\tonSelect?: (id: string) => void;\n\t/** Expanded branch ids in the full-tree (expanded) view. Defaults to every branch expanded. */\n\texpandedIds?: string[];\n\tdefaultExpandedIds?: string[];\n\tonExpandedChange?: (ids: string[]) => void;\n\t/** Panel size (controlled): collapse to a header, or expand to go big. */\n\tsize?: CanvasNavigatorSize;\n\tdefaultSize?: CanvasNavigatorSize;\n\tonSizeChange?: (size: CanvasNavigatorSize) => void;\n\t/** Show the expand (\"go big\") control in the header. Default true. The collapse control always shows. */\n\texpandable?: boolean;\n\t/**\n\t * Icon for the header's collapse control. Defaults to a chevron-up. Override it (e.g. with a panel\n\t * icon) when the navigator is docked as a sidebar and \"collapse\" reads as \"hide the panel\".\n\t */\n\tcollapseIcon?: React.ReactNode;\n\t/** Header title shown at the top level. */\n\ttitle?: string;\n\t/** Render the header (with collapse + expand controls). Default true. */\n\theader?: boolean;\n\t/**\n\t * Show a search bar in the header. While searching, the tree is replaced by a flat list of\n\t * matching locations, each shown as its full breadcrumb path (start-truncated to one line).\n\t */\n\tsearchable?: boolean;\n\t/** Placeholder for the search input. Default \"Search…\". */\n\tsearchPlaceholder?: string;\n\t/** Message shown when a branch has no children (e.g. a level with nothing under it). */\n\temptyLabel?: string;\n\t/**\n\t * Long-name handling for rows. Omit for plain end truncation. `\"end\"` adds a hover tooltip\n\t * with the full name when it's clipped; `\"middle\"` keeps the start + tail visible (good for\n\t * filenames like `Plan_Rev3.svg`); `\"clamp\"` wraps the name onto up to `maxLines` lines before\n\t * truncating. All add a tooltip with the full name.\n\t */\n\ttruncate?: \"end\" | \"middle\" | \"clamp\";\n\t/** For `truncate=\"middle\"`, how many trailing characters to always keep visible. Default 7. */\n\ttailChars?: number;\n\t/** For `truncate=\"clamp\"`, the maximum number of wrapped lines before truncating. Default 3. */\n\tmaxLines?: number;\n\t/** Compact density — 12px text on rows, header, search, and results, with tighter spacing. Default false. */\n\tcompact?: boolean;\n\t/** Show a loading bar docked to the bottom of the panel while locations are still loading. Default false. */\n\tloading?: boolean;\n\t/** Text shown next to the spinner in the loading bar. Default \"Loading…\". */\n\tloadingLabel?: string;\n\t/**\n\t * Deep-tree horizontal shift. When set, expanding branches past this (1-based) level slides the\n\t * default tree left by one indent step — the gap between level 1 and level 2 — for each level\n\t * revealed beyond it, so the active deep path stays in view. Collapsing a level shifts it back.\n\t * Omit to disable (the tree never shifts).\n\t */\n\tshiftAfterLevel?: number;\n}\n\n/** Indent added per tree level. The shift step equals this — the gap between level 1 and level 2. */\nconst INDENT_PX = 8;\n\nfunction useControllable<T>(controlled: T | undefined, fallback: T, onChange?: (value: T) => void) {\n\tconst [internal, setInternal] = React.useState<T>(fallback);\n\tconst value = controlled !== undefined ? controlled : internal;\n\tconst set = React.useCallback(\n\t\t(next: T) => {\n\t\t\tif (controlled === undefined) setInternal(next);\n\t\t\tonChange?.(next);\n\t\t},\n\t\t[controlled, onChange],\n\t);\n\treturn [value, set] as const;\n}\n\ninterface NodeIndex {\n\tbyId: Map<string, CanvasNavigatorNode>;\n\tparentById: Map<string, CanvasNavigatorNode | null>;\n\tbranchIds: string[];\n}\n\nfunction indexNodes(nodes: CanvasNavigatorNode[]): NodeIndex {\n\tconst byId = new Map<string, CanvasNavigatorNode>();\n\tconst parentById = new Map<string, CanvasNavigatorNode | null>();\n\tconst branchIds: string[] = [];\n\tconst walk = (list: CanvasNavigatorNode[], parent: CanvasNavigatorNode | null) => {\n\t\tfor (const node of list) {\n\t\t\tbyId.set(node.id, node);\n\t\t\tparentById.set(node.id, parent);\n\t\t\tif (Array.isArray(node.children)) {\n\t\t\t\tbranchIds.push(node.id);\n\t\t\t\twalk(node.children, node);\n\t\t\t}\n\t\t}\n\t};\n\twalk(nodes, null);\n\treturn {byId, parentById, branchIds};\n}\n\n/** A search hit: the matching node plus its full label path (ancestors first, self last). */\ninterface SearchResult {\n\tnode: CanvasNavigatorNode;\n\tpath: string[];\n}\n\n/**\n * Flatten every node whose label matches the lowercased query into a list of hits, each carrying its\n * full label path from the root — rendered as a single-line, start-truncated breadcrumb instead of\n * the hierarchy.\n */\nfunction searchResults(nodes: CanvasNavigatorNode[], q: string): SearchResult[] {\n\tconst out: SearchResult[] = [];\n\tconst walk = (list: CanvasNavigatorNode[], trail: string[]) => {\n\t\tfor (const node of list) {\n\t\t\tconst path = [...trail, node.label];\n\t\t\tif (node.label.toLowerCase().includes(q)) out.push({node, path});\n\t\t\tif (Array.isArray(node.children)) walk(node.children, path);\n\t\t}\n\t};\n\twalk(nodes, []);\n\treturn out;\n}\n\nconst CanvasNavigator = React.forwardRef<HTMLDivElement, CanvasNavigatorProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tnodes,\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonSelect,\n\t\t\texpandedIds,\n\t\t\tdefaultExpandedIds,\n\t\t\tonExpandedChange,\n\t\t\tsize: sizeProp,\n\t\t\tdefaultSize = \"default\",\n\t\t\tonSizeChange,\n\t\t\texpandable = true,\n\t\t\tcollapseIcon,\n\t\t\ttitle = \"Navigator\",\n\t\t\theader = true,\n\t\t\tsearchable = false,\n\t\t\tsearchPlaceholder = \"Search…\",\n\t\t\temptyLabel = \"No items\",\n\t\t\ttruncate,\n\t\t\ttailChars,\n\t\t\tmaxLines,\n\t\t\tcompact = false,\n\t\t\tloading = false,\n\t\t\tloadingLabel = \"Loading…\",\n\t\t\tshiftAfterLevel,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\t// Shared row props: long-name handling + a tighter 8px indent per level. Compact shrinks the\n\t\t// label to 12px (overriding TreeRow's default 14px).\n\t\tconst rowProps = {\n\t\t\ttruncate,\n\t\t\ttailChars,\n\t\t\tmaxLines,\n\t\t\tindentPx: INDENT_PX,\n\t\t\ttextClassName: compact ? \"wwc:text-xs\" : undefined,\n\t\t\ticonClassName: \"wwc:text-muted-foreground wwc:[&_svg]:stroke-[1.5]\",\n\t\t\tchevronClassName: \"wwc:text-muted-foreground wwc:stroke-[1.5]\",\n\t\t};\n\t\t// 12px vs 14px for the navigator's own chrome (header, search, breadcrumbs, empty states).\n\t\tconst textCls = compact ? \"wwc:text-xs\" : \"wwc:text-sm\";\n\t\tconst index = React.useMemo(() => indexNodes(nodes), [nodes]);\n\n\t\tconst [expanded, setExpanded] = useControllable<string[]>(\n\t\t\texpandedIds,\n\t\t\tdefaultExpandedIds ?? index.branchIds,\n\t\t\tonExpandedChange,\n\t\t);\n\t\tconst [size, setSize] = useControllable<CanvasNavigatorSize>(sizeProp, defaultSize, onSizeChange);\n\n\t\t// Selection. Uncontrolled by default so the first (top-level) node starts selected.\n\t\tconst [selected, setSelected] = useControllable(value, defaultValue ?? nodes[0]?.id, onSelect);\n\n\t\t// Search: filter the tree by label. While searching, the filtered tree is shown fully expanded\n\t\t// (overriding the drill / default view) so every match is visible.\n\t\tconst [query, setQuery] = React.useState(\"\");\n\t\tconst q = query.trim().toLowerCase();\n\t\tconst searching = searchable && q.length > 0;\n\t\tconst results = React.useMemo(() => (searching ? searchResults(nodes, q) : []), [nodes, searching, q]);\n\n\t\t// Which leaf-parent the default view is drilled into (showing only its leaves). `null` shows the\n\t\t// tree. Starts on the tree so you see the structure; drilling a last level reveals the back button.\n\t\tconst [focusedId, setFocusedId] = React.useState<string | null>(null);\n\n\t\t// Which last levels are expanded in place in the default tree (chevron toggles this). Starts\n\t\t// empty so last levels read as collapsed rows until their chevron is clicked.\n\t\tconst [openLastLevels, setOpenLastLevels] = React.useState<Set<string>>(() => new Set());\n\t\tconst toggleLastLevel = (id: string) => {\n\t\t\tsetOpenLastLevels((prev) => {\n\t\t\t\tconst next = new Set(prev);\n\t\t\t\tif (next.has(id)) next.delete(id);\n\t\t\t\telse next.add(id);\n\t\t\t\treturn next;\n\t\t\t});\n\t\t};\n\n\t\tconst expandedSet = new Set(searching ? index.branchIds : expanded);\n\t\tconst toggleExpand = (id: string) => {\n\t\t\tsetExpanded(expandedSet.has(id) ? expanded.filter((b) => b !== id) : [...expanded, id]);\n\t\t};\n\n\t\tconst isExpanded = size === \"expanded\";\n\t\tconst isCollapsed = size === \"collapsed\";\n\n\t\t// Collapsed view pages between the selected leaf's siblings (children of its parent).\n\t\tconst valueParent = selected !== undefined ? index.parentById.get(selected) : undefined;\n\t\tconst siblings = valueParent ? (valueParent.children ?? []) : nodes;\n\t\tconst activeIndex = siblings.findIndex((n) => n.id === selected);\n\t\tconst activeNode = activeIndex >= 0 ? siblings[activeIndex] : undefined;\n\t\tconst findEnabled = (from: number, dir: 1 | -1) => {\n\t\t\tfor (let i = from; i >= 0 && i < siblings.length; i += dir) {\n\t\t\t\tif (!siblings[i].disabled) return i;\n\t\t\t}\n\t\t\treturn -1;\n\t\t};\n\t\tconst prevIndex = activeIndex >= 0 ? findEnabled(activeIndex - 1, -1) : -1;\n\t\tconst nextIndex = activeIndex >= 0 ? findEnabled(activeIndex + 1, 1) : -1;\n\t\tconst stepTo = (i: number) => {\n\t\t\tif (i >= 0 && i < siblings.length) setSelected(siblings[i].id);\n\t\t};\n\n\t\t// A node with a children array (even empty) is a branch; without one it's a selectable leaf.\n\t\tconst isBranchNode = (node: CanvasNavigatorNode) => Array.isArray(node.children);\n\t\t// A branch whose children are all leaves (or none) — the deepest navigable level.\n\t\tconst isLeafParent = (node: CanvasNavigatorNode) =>\n\t\t\tisBranchNode(node) && node.children!.every((c) => !isBranchNode(c));\n\t\t// Empty state shown only when drilling into a last level that has no items.\n\t\tconst emptyState = () => (\n\t\t\t<div className={cn(\"wwc:px-3 wwc:py-6 wwc:text-center wwc:text-muted-foreground\", textCls)}>{emptyLabel}</div>\n\t\t);\n\t\t// The default view shows the tree (expanding in place) down to the leaf-parent rows; drilling a\n\t\t// leaf-parent focuses on just its leaves and reveals the back button.\n\t\tconst focusedNode = focusedId ? index.byId.get(focusedId) : undefined;\n\t\tconst showFocused = !isExpanded && !isCollapsed && !searching && !!focusedNode && isLeafParent(focusedNode);\n\t\tconst goBack = () => setFocusedId(null);\n\n\t\t// Deep-tree horizontal shift: the deepest currently-revealed row depth in the default tree. Once\n\t\t// branches open past `shiftAfterLevel`, the tree slides left one indent step per level beyond it,\n\t\t// keeping the active deep path in view; collapsing a level reduces the depth and shifts it back.\n\t\tconst deepestOpenDepth = (list: CanvasNavigatorNode[], depth: number): number => {\n\t\t\tlet max = depth;\n\t\t\tfor (const node of list) {\n\t\t\t\tif (!isBranchNode(node) || node.children!.length === 0) continue;\n\t\t\t\tconst open = isLeafParent(node) ? openLastLevels.has(node.id) : expandedSet.has(node.id);\n\t\t\t\tif (open) max = Math.max(max, deepestOpenDepth(node.children!, depth + 1));\n\t\t\t}\n\t\t\treturn max;\n\t\t};\n\t\tconst shiftSteps = shiftAfterLevel ? Math.max(0, deepestOpenDepth(nodes, 0) - (shiftAfterLevel - 1)) : 0;\n\t\tconst shiftPx = shiftSteps * INDENT_PX;\n\n\t\tconst sizeControls = (\n\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-0.5\">\n\t\t\t\t{expandable && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\ticon\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\taria-pressed={isExpanded}\n\t\t\t\t\t\taria-label={isExpanded ? \"Restore navigator size\" : \"Expand navigator\"}\n\t\t\t\t\t\tonClick={() => setSize(isExpanded ? \"default\" : \"expanded\")}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isExpanded ? <Minimize2 className=\"wwc:h-4 wwc:w-4\" /> : <Maximize2 className=\"wwc:h-4 wwc:w-4\" />}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\ticon\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\taria-pressed={false}\n\t\t\t\t\taria-label=\"Collapse navigator\"\n\t\t\t\t\tonClick={() => setSize(\"collapsed\")}\n\t\t\t\t>\n\t\t\t\t\t{collapseIcon ?? <ChevronUp className=\"wwc:h-4 wwc:w-4\" />}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t);\n\n\t\t// Selecting any node — clicking the row body (outside the label/chevron, which toggle/drill).\n\t\tconst selectNode = (node: CanvasNavigatorNode) => {\n\t\t\tif (!node.disabled) setSelected(node.id);\n\t\t};\n\n\t\t// Open \"level mode\": clicking a lowest-level item focuses its parent level (the drilled view\n\t\t// with a back button) and selects that item. The second-last level itself no longer drills —\n\t\t// it only expands in place — so entering level mode now happens from the lowest level.\n\t\tconst openLevel = (leaf: CanvasNavigatorNode) => {\n\t\t\tif (leaf.disabled) return;\n\t\t\tconst parent = index.parentById.get(leaf.id);\n\t\t\tif (parent) setFocusedId(parent.id);\n\t\t\tsetSelected(leaf.id);\n\t\t};\n\n\t\t// Picking a search result: select the location and jump to it (a leaf lands in its level view),\n\t\t// then clear the query so the navigator returns to showing that location in context.\n\t\tconst pickResult = (node: CanvasNavigatorNode) => {\n\t\t\tif (node.disabled) return;\n\t\t\tsetSelected(node.id);\n\t\t\tsetFocusedId(isBranchNode(node) ? null : (index.parentById.get(node.id)?.id ?? null));\n\t\t\tsetQuery(\"\");\n\t\t};\n\n\t\t// Flat search results: one row per matching location, its full path shown as a breadcrumb that\n\t\t// truncates from the start (ellipsis + the leaf kept visible) so it always stays on one line.\n\t\tconst renderSearchResults = () =>\n\t\t\tresults.map(({node, path}) => (\n\t\t\t\t// role=\"button\" (not <button>) so the \"view\" hint button can nest legally. The hint reveals\n\t\t\t\t// on any row hover — matching the tree's lowest-level rows.\n\t\t\t\t<div\n\t\t\t\t\tkey={node.id}\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\ttabIndex={node.disabled ? -1 : 0}\n\t\t\t\t\taria-disabled={node.disabled || undefined}\n\t\t\t\t\tonClick={() => pickResult(node)}\n\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\tif (!node.disabled && (e.key === \"Enter\" || e.key === \" \")) {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\tpickResult(node);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:group wwc:relative wwc:flex wwc:w-full wwc:cursor-pointer wwc:items-center wwc:gap-2 wwc:rounded-md wwc:px-2 wwc:text-left wwc:transition-colors wwc:hover:bg-accent wwc:focus-visible:bg-accent wwc:focus-visible:outline-none\",\n\t\t\t\t\t\tcompact ? \"wwc:py-1\" : \"wwc:py-1.5\",\n\t\t\t\t\t\tnode.disabled && \"wwc:pointer-events-none wwc:opacity-50\",\n\t\t\t\t\t\tnode.id === selected && \"wwc:bg-muted wwc:text-foreground\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{node.icon && (\n\t\t\t\t\t\t<span className=\"wwc:flex wwc:size-4 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t{node.icon}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t{/* dir=rtl puts the ellipsis at the start; the bdi keeps the path reading left-to-right. */}\n\t\t\t\t\t<span dir=\"rtl\" className={cn(\"wwc:min-w-0 wwc:flex-1 wwc:truncate wwc:text-left\", textCls)}>\n\t\t\t\t\t\t<bdi>\n\t\t\t\t\t\t\t{path.length > 1 && (\n\t\t\t\t\t\t\t\t<span className=\"wwc:text-muted-foreground\">{`${path.slice(0, -1).join(\"/\")}/`}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span className=\"wwc:font-normal wwc:text-foreground\">{path[path.length - 1]}</span>\n\t\t\t\t\t\t</bdi>\n\t\t\t\t\t</span>\n\t\t\t\t\t{!node.disabled && openHint}\n\t\t\t\t</div>\n\t\t\t));\n\n\t\t// Hover hint shown on branch rows: a real secondary button overlaid on the row's right edge —\n\t\t// absolutely positioned so it reserves no layout space and just floats over whatever is there.\n\t\t// It's fully interactive (its own hover state), and because it's nested inside the row\n\t\t// (role=\"button\"), a click bubbles to the row's onClick — the same \"open\" action as clicking\n\t\t// outside the label / chevron.\n\t\t//\n\t\t// Visibility: revealed on row hover, but hidden while the cursor is over the row's text or\n\t\t// chevron (marked `data-treerow-toggle`) — those expand rather than open, so the \"view\" hint\n\t\t// only shows over the open zone. The `group-has-…:hover` rule outranks `group-hover` on\n\t\t// specificity, so it wins when both match.\n\t\tconst openHint = (\n\t\t\t<Button\n\t\t\t\ttype=\"button\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\tsize=\"sm\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\tclassName=\"wwc:absolute wwc:right-2 wwc:top-1/2 wwc:h-auto wwc:-translate-y-1/2 wwc:px-1.5 wwc:py-0.5 wwc:text-[10px] wwc:font-bold wwc:leading-none wwc:opacity-0 wwc:transition-opacity wwc:group-hover:opacity-100 wwc:group-has-[[data-treerow-toggle]:hover]:opacity-0\"\n\t\t\t>\n\t\t\t\tview\n\t\t\t</Button>\n\t\t);\n\n\t\t// A selectable leaf row. `onClick` / `trailing` can be overridden — e.g. lowest-level rows in\n\t\t// the default tree open level mode and show the \"view\" hint; focused / expanded leaves select.\n\t\t// The \"view\" hint shows on every enabled row by default (revealed on hover over the open zone).\n\t\tconst leafRow = (\n\t\t\tnode: CanvasNavigatorNode,\n\t\t\tlevel = 0,\n\t\t\tonClick?: () => void,\n\t\t\ttrailing: React.ReactNode = node.disabled ? undefined : openHint,\n\t\t) => (\n\t\t\t<TreeRow\n\t\t\t\tkey={node.id}\n\t\t\t\tid={node.id}\n\t\t\t\tlevel={level}\n\t\t\t\ticon={node.icon}\n\t\t\t\tlabel={node.label}\n\t\t\t\tfontWeight=\"wwc:font-normal\"\n\t\t\t\tvariant={node.id === selected ? \"neutral-selected\" : \"default\"}\n\t\t\t\tonClick={onClick ?? (() => selectNode(node))}\n\t\t\t\ttrailing={trailing}\n\t\t\t\t{...rowProps}\n\t\t\t/>\n\t\t);\n\n\t\t// Default tree: expands in place through the branch levels. Branch rows — including the\n\t\t// second-last level — only expand / collapse; entering the focused \"level mode\" happens by\n\t\t// clicking a lowest-level item, which shows the \"view\" hint.\n\t\tconst renderDefaultTree = (list: CanvasNavigatorNode[], depth: number): React.ReactNode =>\n\t\t\tlist.map((node) => {\n\t\t\t\tif (!isBranchNode(node)) return leafRow(node);\n\t\t\t\tif (isLeafParent(node)) {\n\t\t\t\t\t// Second-last level: behaves like the upper branch levels — clicking the row body (or\n\t\t\t\t\t// the \"view\" hint) selects it, while the chevron / label expand it in place. Empty\n\t\t\t\t\t// levels expand to show their empty state inline.\n\t\t\t\t\tconst hasChildren = node.children!.length > 0;\n\t\t\t\t\tconst open = openLastLevels.has(node.id);\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={node.id}>\n\t\t\t\t\t\t\t<TreeRow\n\t\t\t\t\t\t\t\tid={node.id}\n\t\t\t\t\t\t\t\tlevel={depth}\n\t\t\t\t\t\t\t\texpandable\n\t\t\t\t\t\t\t\texpanded={open}\n\t\t\t\t\t\t\t\ticon={node.icon}\n\t\t\t\t\t\t\t\tlabel={node.label}\n\t\t\t\t\t\t\t\tfontWeight=\"wwc:font-medium\"\n\t\t\t\t\t\t\t\tvariant={node.id === selected ? \"neutral-selected\" : \"default\"}\n\t\t\t\t\t\t\t\tonClick={() => selectNode(node)}\n\t\t\t\t\t\t\t\tonToggle={() => toggleLastLevel(node.id)}\n\t\t\t\t\t\t\t\ttrailing={node.disabled ? undefined : openHint}\n\t\t\t\t\t\t\t\t{...rowProps}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{open &&\n\t\t\t\t\t\t\t\t(hasChildren ? (\n\t\t\t\t\t\t\t\t\tnode.children!.map((leaf) => leafRow(leaf, depth + 1, () => openLevel(leaf)))\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\"wwc:py-1.5 wwc:pr-2 wwc:text-muted-foreground\", textCls)}\n\t\t\t\t\t\t\t\t\t\tstyle={{paddingLeft: `${(depth + 1) * 8 + 22}px`}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{emptyLabel}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tconst open = expandedSet.has(node.id);\n\t\t\t\treturn (\n\t\t\t\t\t<div key={node.id}>\n\t\t\t\t\t\t<TreeRow\n\t\t\t\t\t\t\tid={node.id}\n\t\t\t\t\t\t\tlevel={depth}\n\t\t\t\t\t\t\texpandable\n\t\t\t\t\t\t\texpanded={open}\n\t\t\t\t\t\t\ticon={node.icon}\n\t\t\t\t\t\t\tlabel={node.label}\n\t\t\t\t\t\t\tfontWeight=\"wwc:font-medium\"\n\t\t\t\t\t\t\tvariant={node.id === selected ? \"neutral-selected\" : \"default\"}\n\t\t\t\t\t\t\tonClick={() => selectNode(node)}\n\t\t\t\t\t\t\tonToggle={() => toggleExpand(node.id)}\n\t\t\t\t\t\t\ttrailing={node.disabled ? undefined : openHint}\n\t\t\t\t\t\t\t{...rowProps}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{open && renderDefaultTree(node.children!, depth + 1)}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t});\n\n\t\t// Recursive full tree for the expanded view.\n\t\tconst renderTree = (list: CanvasNavigatorNode[], depth: number): React.ReactNode =>\n\t\t\tlist.map((node) => {\n\t\t\t\t// Empty branches show no chevron in the tree; their empty state appears only on drill-in.\n\t\t\t\tconst hasChildren = isBranchNode(node) && node.children!.length > 0;\n\t\t\t\tconst open = expandedSet.has(node.id);\n\t\t\t\treturn (\n\t\t\t\t\t<div key={node.id}>\n\t\t\t\t\t\t<TreeRow\n\t\t\t\t\t\t\tid={node.id}\n\t\t\t\t\t\t\tlevel={depth}\n\t\t\t\t\t\t\texpandable={hasChildren}\n\t\t\t\t\t\t\texpanded={open}\n\t\t\t\t\t\t\ticon={node.icon}\n\t\t\t\t\t\t\tlabel={node.label}\n\t\t\t\t\t\t\tfontWeight={isBranchNode(node) ? \"wwc:font-medium\" : \"wwc:font-normal\"}\n\t\t\t\t\t\t\tvariant={node.id === selected ? \"neutral-selected\" : \"default\"}\n\t\t\t\t\t\t\tonClick={() => selectNode(node)}\n\t\t\t\t\t\t\tonToggle={hasChildren ? () => toggleExpand(node.id) : undefined}\n\t\t\t\t\t\t\ttrailing={node.disabled ? undefined : openHint}\n\t\t\t\t\t\t\t{...rowProps}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{hasChildren && open && renderTree(node.children!, depth + 1)}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t});\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:flex wwc:flex-col wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:bg-white wwc:text-card-foreground wwc:shadow-lg\",\n\t\t\t\t\tisExpanded ? \"wwc:h-[32rem] wwc:w-80 wwc:max-w-[90vw]\" : \"wwc:w-72 wwc:max-w-[80vw]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{header && isCollapsed && (\n\t\t\t\t\t// Collapsed: a segmented bar — back to the parent level, a sibling pager, and expand — with\n\t\t\t\t\t// dividers between each segment.\n\t\t\t\t\t<div className=\"wwc:flex wwc:h-9 wwc:shrink-0 wwc:items-stretch wwc:divide-x wwc:divide-border\">\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:px-0.5\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\taria-label=\"Back to parent level\"\n\t\t\t\t\t\t\t\tdisabled={!valueParent}\n\t\t\t\t\t\t\t\tonClick={() => valueParent && setSelected(valueParent.id)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ArrowLeft className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{/* Sibling pager: prev + label + next as one segment (no inner dividers). */}\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:flex-1 wwc:items-center wwc:gap-1 wwc:px-0.5\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\taria-label=\"Previous item\"\n\t\t\t\t\t\t\t\tdisabled={prevIndex < 0}\n\t\t\t\t\t\t\t\tonClick={() => stepTo(prevIndex)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ChevronLeft className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<span className=\"wwc:flex wwc:min-w-0 wwc:flex-1 wwc:items-baseline wwc:justify-start wwc:gap-1.5 wwc:px-1\">\n\t\t\t\t\t\t\t\t<span className={cn(\"wwc:truncate wwc:font-medium\", textCls)}>{activeNode?.label ?? title}</span>\n\t\t\t\t\t\t\t\t{activeIndex >= 0 && siblings.length > 0 && (\n\t\t\t\t\t\t\t\t\t<span className=\"wwc:shrink-0 wwc:font-mono wwc:text-xs wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{activeIndex + 1}/{siblings.length}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\taria-label=\"Next item\"\n\t\t\t\t\t\t\t\tdisabled={nextIndex < 0}\n\t\t\t\t\t\t\t\tonClick={() => stepTo(nextIndex)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ChevronRight className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:px-0.5\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\taria-pressed={true}\n\t\t\t\t\t\t\t\taria-label=\"Expand navigator\"\n\t\t\t\t\t\t\t\tonClick={() => setSize(\"default\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ChevronDown className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{header && showFocused && focusedNode && (\n\t\t\t\t\t// Drilled into the last level: back button + the level's label.\n\t\t\t\t\t<div className=\"wwc:flex wwc:h-9 wwc:shrink-0 wwc:items-center wwc:justify-between wwc:gap-2 wwc:border-b wwc:px-2\">\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-1\">\n\t\t\t\t\t\t\t<Button type=\"button\" variant=\"ghost\" icon size=\"sm\" aria-label=\"Back\" onClick={goBack}>\n\t\t\t\t\t\t\t\t<ChevronLeft className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<span className={cn(\"wwc:truncate wwc:font-medium\", textCls)}>{focusedNode.label}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{sizeControls}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Standard header: title + size controls (non-searchable variant). */}\n\t\t\t\t{header && !searchable && !isCollapsed && !showFocused && (\n\t\t\t\t\t<div className=\"wwc:flex wwc:h-9 wwc:shrink-0 wwc:items-center wwc:justify-between wwc:gap-2 wwc:border-b wwc:px-2\">\n\t\t\t\t\t\t<span className={cn(\"wwc:truncate wwc:font-medium\", textCls)}>{title}</span>\n\t\t\t\t\t\t{sizeControls}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Search header (searchable variant): the search field is the header, controls on the right. */}\n\t\t\t\t{searchable && !isCollapsed && !showFocused && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2 wwc:border-b wwc:pl-3 wwc:pr-1.5\",\n\t\t\t\t\t\t\tcompact ? \"wwc:h-9\" : \"wwc:h-11\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Search\n\t\t\t\t\t\t\tclassName={cn(\"wwc:shrink-0 wwc:text-muted-foreground\", compact ? \"wwc:size-4\" : \"wwc:size-[18px]\")}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tvalue={query}\n\t\t\t\t\t\t\tonChange={(e) => setQuery(e.target.value)}\n\t\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\t\taria-label=\"Search\"\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"wwc:min-w-0 wwc:flex-1 wwc:bg-transparent wwc:text-foreground wwc:outline-none wwc:placeholder:text-muted-foreground\",\n\t\t\t\t\t\t\t\ttextCls,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{query && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\taria-label=\"Clear search\"\n\t\t\t\t\t\t\t\tclassName=\"wwc:h-6 wwc:w-6\"\n\t\t\t\t\t\t\t\tonClick={() => setQuery(\"\")}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<X className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{header && sizeControls}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{!isCollapsed && (\n\t\t\t\t\t<div className={cn(\"wwc:overflow-auto wwc:p-1.5\", isExpanded ? \"wwc:min-h-0 wwc:flex-1\" : \"wwc:max-h-72\")}>\n\t\t\t\t\t\t{searching ? (\n\t\t\t\t\t\t\tresults.length > 0 ? (\n\t\t\t\t\t\t\t\trenderSearchResults()\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div className={cn(\"wwc:px-3 wwc:py-6 wwc:text-center wwc:text-muted-foreground\", textCls)}>\n\t\t\t\t\t\t\t\t\tNo matches for “{query.trim()}”\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : isExpanded ? (\n\t\t\t\t\t\t\trenderTree(nodes, 0)\n\t\t\t\t\t\t) : showFocused ? (\n\t\t\t\t\t\t\tfocusedNode?.children && focusedNode.children.length > 0 ? (\n\t\t\t\t\t\t\t\tfocusedNode.children.map((leaf) => leafRow(leaf))\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\temptyState()\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t// Deep-tree shift: slide the whole tree left as levels open past `shiftAfterLevel`.\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"wwc:transition-transform wwc:duration-200 wwc:ease-out\"\n\t\t\t\t\t\t\t\tstyle={shiftPx ? {transform: `translateX(-${shiftPx}px)`} : undefined}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{renderDefaultTree(nodes, 0)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Loading bar docked to the bottom while locations stream in. */}\n\t\t\t\t{loading && !isCollapsed && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2 wwc:border-t wwc:border-border wwc:bg-muted wwc:text-muted-foreground\",\n\t\t\t\t\t\t\tcompact ? \"wwc:px-3 wwc:py-2\" : \"wwc:px-4 wwc:py-2.5\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Loader2 className={cn(\"wwc:shrink-0 wwc:animate-spin\", compact ? \"wwc:size-3\" : \"wwc:size-3.5\")} />\n\t\t\t\t\t\t<span className={cn(\"wwc:truncate\", textCls)}>{loadingLabel}</span>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nCanvasNavigator.displayName = \"CanvasNavigator\";\n\nexport {CanvasNavigator};\n"],"mappings":"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"}

package/dist/canvas-toolbar.d.mts

@@ -0,0 +1,37 @@
+import { DrawingActionsProps } from "./drawing-actions.mjs";
+import { ZoomToolsProps } from "./zoom-tools.mjs";
+import * as React from "react";
+//#region src/canvas-toolbar.d.ts
+export interface CanvasToolbarBlueprint {
+  id: string;
+  name: string;
+  disabled?: boolean;
+}
+export interface CanvasToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Blueprints available for selection in the left section. */
+  blueprints: CanvasToolbarBlueprint[];
+  /** Currently active blueprint id. */
+  activeBlueprintId: string;
+  onBlueprintChange?: (id: string) => void;
+  /** Render the blueprint picker as a searchable Combobox instead of a Select. */
+  searchableBlueprints?: boolean;
+  /** Placeholder shown inside the searchable picker's input. */
+  blueprintSearchPlaceholder?: string;
+  /** Trigger width for the blueprint picker. */
+  blueprintTriggerWidth?: number;
+  /** Number of trailing characters always kept visible in middle truncation. */
+  blueprintTailChars?: number;
+  /** 1-based current page index. When omitted (or pageCount <= 1) the pager is hidden. */
+  pageIndex?: number;
+  /** Total number of pages in the active blueprint. */
+  pageCount?: number;
+  onPageChange?: (next: number) => void;
+  /** Drawing tools props. Pass `null` to hide the middle section. */
+  drawingActions?: DrawingActionsProps | null;
+  /** Zoom tools props. Pass `null` to hide the right section. */
+  zoomTools?: ZoomToolsProps | null;
+}
+declare const CanvasToolbar: React.ForwardRefExoticComponent<CanvasToolbarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CanvasToolbar };
+//# sourceMappingURL=canvas-toolbar.d.mts.map

package/dist/canvas-toolbar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-toolbar.d.mts","names":[],"sources":["../src/canvas-toolbar.tsx"],"mappings":";;;;iBASiB;EAChB;EACA;EACA;;iBAGgB,2BAA2B,KAAK,MAAM,eAAe;;EAErE,YAAY;;EAEZ;EACA,qBAAqB;;EAErB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;EACA,gBAAgB;;EAEhB,iBAAiB;;EAEjB,YAAY;;cAMP,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA"}

package/dist/canvas-toolbar.mjs

@@ -0,0 +1,65 @@
+import { Toolbar, ToolbarGroup } from "./toolbar.mjs";
+import { CanvasFilePicker } from "./canvas-file-picker.mjs";
+import { DrawingActions } from "./drawing-actions.mjs";
+import { ToolbarPager } from "./toolbar-pager.mjs";
+import { ZoomTools } from "./zoom-tools.mjs";
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/canvas-toolbar.tsx
+/** Strip the nested section toolbars of their own chrome so the host toolbar owns it. */
+const NESTED_TOOLBAR = "wwc:h-10 wwc:border-0 wwc:bg-transparent wwc:px-0";
+const CanvasToolbar = React.forwardRef(({ className, blueprints, activeBlueprintId, onBlueprintChange, searchableBlueprints = false, blueprintSearchPlaceholder = "Search blueprints...", blueprintTriggerWidth = 180, blueprintTailChars = 7, pageIndex, pageCount, onPageChange, drawingActions, zoomTools, ...rest }, ref) => {
+	const showPager = pageCount !== void 0 && pageCount > 1 && pageIndex !== void 0;
+	const showDrawing = drawingActions !== null && drawingActions !== void 0;
+	const showZoom = zoomTools !== null && zoomTools !== void 0;
+	return /* @__PURE__ */ jsxs(Toolbar, {
+		ref,
+		fullWidth: true,
+		"aria-label": "Canvas toolbar",
+		className: cn("wwc:gap-1", className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs(ToolbarGroup, {
+				grow: true,
+				align: "start",
+				className: "wwc:gap-1.5 wwc:px-1",
+				children: [/* @__PURE__ */ jsx(CanvasFilePicker, {
+					files: blueprints,
+					activeFileId: activeBlueprintId,
+					onFileChange: onBlueprintChange,
+					searchable: searchableBlueprints,
+					searchPlaceholder: blueprintSearchPlaceholder,
+					triggerWidth: blueprintTriggerWidth,
+					tailChars: blueprintTailChars
+				}), showPager && /* @__PURE__ */ jsx(ToolbarPager, {
+					index: pageIndex,
+					count: pageCount,
+					onIndexChange: onPageChange,
+					className: "wwc:pl-1"
+				})]
+			}),
+			showDrawing && /* @__PURE__ */ jsx(ToolbarGroup, {
+				align: "center",
+				className: "wwc:shrink-0",
+				children: /* @__PURE__ */ jsx(DrawingActions, {
+					...drawingActions,
+					className: NESTED_TOOLBAR
+				})
+			}),
+			/* @__PURE__ */ jsx(ToolbarGroup, {
+				grow: true,
+				align: "end",
+				children: showZoom && /* @__PURE__ */ jsx(ZoomTools, {
+					...zoomTools,
+					className: NESTED_TOOLBAR
+				})
+			})
+		]
+	});
+});
+CanvasToolbar.displayName = "CanvasToolbar";
+//#endregion
+export { CanvasToolbar };
+
+//# sourceMappingURL=canvas-toolbar.mjs.map

package/dist/canvas-toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-toolbar.mjs","names":[],"sources":["../src/canvas-toolbar.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nimport {CanvasFilePicker} from \"./canvas-file-picker\";\nimport {DrawingActions, type DrawingActionsProps} from \"./drawing-actions\";\nimport {Toolbar, ToolbarGroup} from \"./toolbar\";\nimport {ToolbarPager} from \"./toolbar-pager\";\nimport {ZoomTools, type ZoomToolsProps} from \"./zoom-tools\";\n\nexport interface CanvasToolbarBlueprint {\n\tid: string;\n\tname: string;\n\tdisabled?: boolean;\n}\n\nexport interface CanvasToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n\t/** Blueprints available for selection in the left section. */\n\tblueprints: CanvasToolbarBlueprint[];\n\t/** Currently active blueprint id. */\n\tactiveBlueprintId: string;\n\tonBlueprintChange?: (id: string) => void;\n\t/** Render the blueprint picker as a searchable Combobox instead of a Select. */\n\tsearchableBlueprints?: boolean;\n\t/** Placeholder shown inside the searchable picker's input. */\n\tblueprintSearchPlaceholder?: string;\n\t/** Trigger width for the blueprint picker. */\n\tblueprintTriggerWidth?: number;\n\t/** Number of trailing characters always kept visible in middle truncation. */\n\tblueprintTailChars?: number;\n\t/** 1-based current page index. When omitted (or pageCount <= 1) the pager is hidden. */\n\tpageIndex?: number;\n\t/** Total number of pages in the active blueprint. */\n\tpageCount?: number;\n\tonPageChange?: (next: number) => void;\n\t/** Drawing tools props. Pass `null` to hide the middle section. */\n\tdrawingActions?: DrawingActionsProps | null;\n\t/** Zoom tools props. Pass `null` to hide the right section. */\n\tzoomTools?: ZoomToolsProps | null;\n}\n\n/** Strip the nested section toolbars of their own chrome so the host toolbar owns it. */\nconst NESTED_TOOLBAR = \"wwc:h-10 wwc:border-0 wwc:bg-transparent wwc:px-0\";\n\nconst CanvasToolbar = React.forwardRef<HTMLDivElement, CanvasToolbarProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tblueprints,\n\t\t\tactiveBlueprintId,\n\t\t\tonBlueprintChange,\n\t\t\tsearchableBlueprints = false,\n\t\t\tblueprintSearchPlaceholder = \"Search blueprints...\",\n\t\t\tblueprintTriggerWidth = 180,\n\t\t\tblueprintTailChars = 7,\n\t\t\tpageIndex,\n\t\t\tpageCount,\n\t\t\tonPageChange,\n\t\t\tdrawingActions,\n\t\t\tzoomTools,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst showPager = pageCount !== undefined && pageCount > 1 && pageIndex !== undefined;\n\t\tconst showDrawing = drawingActions !== null && drawingActions !== undefined;\n\t\tconst showZoom = zoomTools !== null && zoomTools !== undefined;\n\n\t\treturn (\n\t\t\t<Toolbar ref={ref} fullWidth aria-label=\"Canvas toolbar\" className={cn(\"wwc:gap-1\", className)} {...rest}>\n\t\t\t\t<ToolbarGroup grow align=\"start\" className=\"wwc:gap-1.5 wwc:px-1\">\n\t\t\t\t\t<CanvasFilePicker\n\t\t\t\t\t\tfiles={blueprints}\n\t\t\t\t\t\tactiveFileId={activeBlueprintId}\n\t\t\t\t\t\tonFileChange={onBlueprintChange}\n\t\t\t\t\t\tsearchable={searchableBlueprints}\n\t\t\t\t\t\tsearchPlaceholder={blueprintSearchPlaceholder}\n\t\t\t\t\t\ttriggerWidth={blueprintTriggerWidth}\n\t\t\t\t\t\ttailChars={blueprintTailChars}\n\t\t\t\t\t/>\n\t\t\t\t\t{showPager && (\n\t\t\t\t\t\t<ToolbarPager index={pageIndex} count={pageCount} onIndexChange={onPageChange} className=\"wwc:pl-1\" />\n\t\t\t\t\t)}\n\t\t\t\t</ToolbarGroup>\n\n\t\t\t\t{showDrawing && (\n\t\t\t\t\t<ToolbarGroup align=\"center\" className=\"wwc:shrink-0\">\n\t\t\t\t\t\t<DrawingActions {...drawingActions} className={NESTED_TOOLBAR} />\n\t\t\t\t\t</ToolbarGroup>\n\t\t\t\t)}\n\n\t\t\t\t<ToolbarGroup grow align=\"end\">\n\t\t\t\t\t{showZoom && <ZoomTools {...zoomTools} className={NESTED_TOOLBAR} />}\n\t\t\t\t</ToolbarGroup>\n\t\t\t</Toolbar>\n\t\t);\n\t},\n);\nCanvasToolbar.displayName = \"CanvasToolbar\";\n\nexport {CanvasToolbar};\n"],"mappings":";;;;;;;;;;AAyCA,MAAM,iBAAiB;AAEvB,MAAM,gBAAgB,MAAM,YAE1B,EACC,WACA,YACA,mBACA,mBACA,uBAAuB,OACvB,6BAA6B,wBAC7B,wBAAwB,KACxB,qBAAqB,GACrB,WACA,WACA,cACA,gBACA,WACA,GAAG,QAEJ,QACI;CACJ,MAAM,YAAY,cAAc,KAAA,KAAa,YAAY,KAAK,cAAc,KAAA;CAC5E,MAAM,cAAc,mBAAmB,QAAQ,mBAAmB,KAAA;CAClE,MAAM,WAAW,cAAc,QAAQ,cAAc,KAAA;CAErD,OACC,qBAAC,SAAD;EAAc;EAAK,WAAA;EAAU,cAAW;EAAiB,WAAW,GAAG,aAAa,SAAS;EAAG,GAAI;EAApG,UAAA;GACC,qBAAC,cAAD;IAAc,MAAA;IAAK,OAAM;IAAQ,WAAU;IAA3C,UAAA,CACC,oBAAC,kBAAD;KACC,OAAO;KACP,cAAc;KACd,cAAc;KACd,YAAY;KACZ,mBAAmB;KACnB,cAAc;KACd,WAAW;IACX,CAAA,GACA,aACA,oBAAC,cAAD;KAAc,OAAO;KAAW,OAAO;KAAW,eAAe;KAAc,WAAU;IAAY,CAAA,CAEzF;;GAEb,eACA,oBAAC,cAAD;IAAc,OAAM;IAAS,WAAU;IACtC,UAAA,oBAAC,gBAAD;KAAgB,GAAI;KAAgB,WAAW;IAAiB,CAAA;GACnD,CAAA;GAGf,oBAAC,cAAD;IAAc,MAAA;IAAK,OAAM;IACvB,UAAA,YAAY,oBAAC,WAAD;KAAW,GAAI;KAAW,WAAW;IAAiB,CAAA;GACtD,CAAA;EACN;;AAEX,CACD;AACA,cAAc,cAAc"}