@deltarobotics/uhd-viewer 0.2.0 → 0.2.1

package/dist/components/index.js

@@ -1,6 +1,6 @@
-import { Component, StrictMode, createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { Component, Fragment, StrictMode, createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import { createRoot } from "react-dom/client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Background, BackgroundVariant, BaseEdge, ConnectionMode, EdgeLabelRenderer, Handle, Position, ReactFlow, ReactFlowProvider, useNodesInitialized, useReactFlow, useStore } from "@xyflow/react";
 import * as Radix from "@radix-ui/react-scroll-area";
 import { icons } from "lucide-react";
@@ -7417,6 +7417,16 @@ function systemDiagnostics(root, lookup) {
 	return out;
 }
 //#endregion
+//#region src/model/level.ts
+/**
+* The modules a level draws: its nodes less what is not a module of its own
+* (the drilled-into module's boundary ports, a board's net junctions and
+* their taps). A level with none is empty, whatever ports it shows.
+*/
+function levelModules(nodes) {
+	return nodes.filter((n) => !n.sheetPort && !n.net && !n.tapOf);
+}
+//#endregion
 //#region src/model/classification.ts
 var CLASSIFICATIONS = [
 	{
@@ -7487,64 +7497,76 @@ function classKey(item, mode) {
 var DRC_LEGEND = [
 	{
 		key: "configured",
-		label: "CONFIGURED",
+		label: "Configured",
+		meaning: "No findings",
 		color: DRC_COLORS.configured
 	},
 	{
 		key: "partial",
-		label: "PARTIAL",
+		label: "Partial",
+		meaning: "Warnings",
 		color: DRC_COLORS.partial
 	},
 	{
 		key: "incompatible",
-		label: "INCOMPATIBLE",
+		label: "Incompatible",
+		meaning: "Errors",
 		color: DRC_COLORS.incompatible
 	},
 	{
 		key: "unconfigured",
-		label: "NOT CONFIGURED",
+		label: "Not configured",
+		meaning: "Nothing linked",
 		color: DRC_COLORS.unconfigured
 	}
 ];
 var SIGNAL_LEGEND = [
 	{
 		key: "power",
-		label: "POWER",
+		label: "Power",
+		meaning: "Supply rails",
 		color: SIGNAL_COLORS.power
 	},
 	{
 		key: "ground",
-		label: "GROUND",
+		label: "Ground",
+		meaning: "Return paths",
 		color: SIGNAL_COLORS.ground
 	},
 	{
 		key: "phase",
-		label: "MOTOR PHASE",
+		label: "Motor phase",
+		meaning: "ESC to motor windings",
 		color: SIGNAL_COLORS.bldc_3phase
 	},
 	{
 		key: "pwm",
-		label: "DSHOT / ESC",
+		label: "DShot / ESC",
+		meaning: "Motor control",
 		color: SIGNAL_COLORS.dshot
 	},
 	{
 		key: "uart",
 		label: "UART / CRSF",
+		meaning: "Serial links",
 		color: SIGNAL_COLORS.uart
 	},
 	{
 		key: "i2c",
 		label: "I2C",
+		meaning: "Sensor bus",
 		color: SIGNAL_COLORS.i2c
 	},
 	{
 		key: "rf",
 		label: "RF",
+		meaning: "Antenna feeds",
 		color: SIGNAL_COLORS.rf
 	},
 	{
 		key: "other-domains",
-		label: "OTHER DOMAINS",
+		label: "Other domains",
+		meaning: "Not electrical",
 		color: "var(--uhd-domain-other)"
 	}
 ];
@@ -7553,68 +7575,81 @@ var SIGNAL_EXTRA = [
 	{
 		key: "spi",
 		label: "SPI",
+		meaning: "Peripheral bus",
 		color: SIGNAL_COLORS.spi
 	},
 	{
 		key: "analog",
-		label: "ANALOG",
+		label: "Analog",
+		meaning: "Analog signals",
 		color: SIGNAL_COLORS.analog
 	},
 	{
 		key: "digital",
-		label: "DIGITAL",
+		label: "Digital",
+		meaning: "Logic I/O",
 		color: SIGNAL_COLORS.digital
 	},
 	{
 		key: "can",
 		label: "CAN",
+		meaning: "Field bus",
 		color: SIGNAL_COLORS.can
 	},
 	{
 		key: "other",
-		label: "OTHER SIGNALS",
+		label: "Other signals",
+		meaning: "Unclassified protocols",
 		color: "var(--uhd-signal-other)"
 	}
 ];
 var DOMAIN_LEGEND = [
 	{
 		key: "electrical",
-		label: "ELECTRICAL",
+		label: "Electrical",
+		meaning: "Power and signals",
 		color: DOMAIN_COLORS.electrical
 	},
 	{
 		key: "mechanical",
-		label: "MECHANICAL",
+		label: "Mechanical",
+		meaning: "Mounts and fasteners",
 		color: DOMAIN_COLORS.mechanical
 	},
 	{
 		key: "pneumatic",
-		label: "PNEUMATIC",
+		label: "Pneumatic",
+		meaning: "Air lines",
 		color: DOMAIN_COLORS.pneumatic
 	},
 	{
 		key: "hydraulic",
-		label: "HYDRAULIC",
+		label: "Hydraulic",
+		meaning: "Fluid lines",
 		color: DOMAIN_COLORS.hydraulic
 	},
 	{
 		key: "thermal",
-		label: "THERMAL",
+		label: "Thermal",
+		meaning: "Heat paths",
 		color: DOMAIN_COLORS.thermal
 	},
 	{
 		key: "network",
-		label: "NETWORK",
+		label: "Network",
+		meaning: "Data links",
 		color: DOMAIN_COLORS.network
 	}
 ];
 var DOMAIN_EXTRA = [{
 	key: "software",
-	label: "SOFTWARE",
+	label: "Software",
+	meaning: "Software interfaces",
 	color: DOMAIN_COLORS.software
 }, {
 	key: "other",
-	label: "OTHER",
+	label: "Other",
+	meaning: "Other domains",
 	color: "var(--uhd-signal-other)"
 }];
 /**
@@ -10619,12 +10654,12 @@ var rightRelease = (press) => press.panning ? "pan" : "menu";
 var TOOL_OPTIONS = [{
 	id: "select",
 	icon: "mouse-pointer-2",
-	label: "Select: drag on the canvas to select several",
+	label: "Select",
 	shortcut: "V"
 }, {
 	id: "pan",
 	icon: "hand",
-	label: "Pan: drag to move the view",
+	label: "Pan",
 	shortcut: "H"
 }];
 var ARROWS = {
@@ -12454,7 +12489,7 @@ function PairPreview({ vm, link, mode, onOpen }) {
 				}), /* @__PURE__ */ jsx(IconButton, {
 					icon: "git-compare-arrows",
 					size: "sm",
-					label: "Open the pair view: every link between these two modules",
+					label: "Pair view",
 					onClick: onOpen
 				})]
 			}),
@@ -12663,6 +12698,36 @@ function selectableLink(vm, id) {
 		id: line.linkId
 	} : null;
 }
+/**
+* The lines a harness is drawn along on this level, when it has no card of
+* its own: a cable between two parts is one line with the harness as a region
+* along it, and the links that name a harness carry its region too. Empty for
+* a harness drawn as a card (and for anything else).
+*/
+function harnessLines(vm, id) {
+	if (vm.nodes.some((n) => n.id === id)) return [];
+	return vm.links.filter((l) => l.run?.id === id);
+}
+/**
+* A module selection as the diagram can show it: a harness drawn along its
+* lines (no card of its own) is selected as the line that carries its name
+* tab, so a row of the hierarchy or a host's focus on it selects and frames
+* something drawn. Anything else as it is.
+*/
+function drawnSelection(vm, selection) {
+	if (selection?.kind !== "node") return selection;
+	const lines = harnessLines(vm, selection.id);
+	const line = lines.find((l) => l.run?.tab) ?? lines[0];
+	return line ? {
+		kind: "link",
+		id: line.linkId
+	} : selection;
+}
+/** The harness a selected line runs through (its path on the level), if any: its row in the hierarchy. */
+function selectedHarness(vm, selection) {
+	if (selection?.kind !== "link") return void 0;
+	return vm.links.find((l) => (l.linkId === selection.id || l.id === selection.id) && l.run)?.run?.id;
+}
 /** `id` relative to the level at `drill`: itself, and without the level's path when it starts with it. */
 function relative(id, drill) {
 	const at = drill.join("/");
@@ -12687,6 +12752,10 @@ function selectTarget(vm, drill, ids) {
 				kind: "node",
 				id: c
 			};
+			if (kind !== "link" && harnessLines(vm, c).length) return drawnSelection(vm, {
+				kind: "node",
+				id: c
+			});
 			if (kind !== "node") {
 				const link = selectableLink(vm, c);
 				if (link) return link;
@@ -13142,13 +13211,20 @@ function useViewerController(source, options, host) {
 		menu: Boolean(menu)
 	};
 	const seq = useRef(0);
+	const viewAt = (at) => at.join("/") === drill.join("/") ? vm : buildView(system, scenario.lookup, at, {
+		expanded,
+		overrides,
+		diagnostics,
+		grounds: showGrounds
+	});
 	const latest = useRef({
 		system,
 		lookup: scenario.lookup,
 		drill,
 		expanded,
 		vm,
-		view
+		view,
+		viewAt
 	});
 	latest.current = {
 		system,
@@ -13156,7 +13232,28 @@ function useViewerController(source, options, host) {
 		drill,
 		expanded,
 		vm,
-		view
+		view,
+		viewAt
+	};
+	/**
+	* A focus on a module (a row of the hierarchy, a host's focus, a finding's Locate), as the diagram shows it at
+	* `at`: the module selected and framed; a harness drawn along its lines (no card of its own) selected as the
+	* line with its name tab, and its lines framed.
+	*/
+	const focusOn = (at, target, n) => {
+		if (target?.kind !== "node") return target;
+		const levelVm = latest.current.viewAt(at);
+		const shown = drawnSelection(levelVm, target);
+		const lines = shown?.kind === "link" ? harnessLines(levelVm, target.id).map((l) => l.id) : void 0;
+		setCentre(lines?.length ? {
+			id: target.id,
+			seq: n,
+			lines
+		} : {
+			id: target.id,
+			seq: n
+		});
+		return shown;
 	};
 	useEffect(() => {
 		if (!host) return;
@@ -13175,32 +13272,36 @@ function useViewerController(source, options, host) {
 						drill: d,
 						expanded: ex
 					});
+					const n = ++seq.current;
 					setDrill(sameDrill(t.drill));
-					setSelection(t.selection);
+					setSelection(focusOn(t.drill, t.selection, n));
 					setPairLink(null);
 					setPanel((p) => p ?? "hierarchy");
-					if (t.selection) {
-						const n = ++seq.current;
-						setCentre({
-							id: t.selection.id,
-							seq: n
-						});
-						setCadFocus({
-							path: fullId(t.drill, t.selection.id),
-							seq: n
-						});
-					}
+					if (t.selection) setCadFocus({
+						path: fullId(t.drill, t.selection.id),
+						seq: n
+					});
 					return;
 				}
 				case "uhd-viewer:select": {
 					const sel = selectTarget(v, d, m.ids);
 					if (sel !== void 0) setSelection(sel);
-					if (sel && m.reveal !== false && shownView !== "3d") setReveal({
+					const run = selectedHarness(v, sel ?? null);
+					const named = run !== void 0 && m.ids.some((id) => [run, fullId(d, run)].includes(id.replace(/^node:/, "")));
+					if (sel && named && m.reveal !== false && shownView !== "3d") setCentre({
+						id: run,
+						seq: ++seq.current,
+						lines: harnessLines(v, run).map((l) => l.id)
+					});
+					else if (sel && m.reveal !== false && shownView !== "3d") setReveal({
 						selection: sel,
 						seq: ++seq.current
 					});
 					if (shownView === "3d") {
-						const t = cadSelectTarget(sys, lookup, d, sel, m.ids);
+						const t = named ? {
+							kind: "node",
+							path: fullId(d, run)
+						} : cadSelectTarget(sys, lookup, d, sel, m.ids);
 						if (t) setCadFocus({
 							...t,
 							seq: ++seq.current,
@@ -13289,11 +13390,7 @@ function useViewerController(source, options, host) {
 			expanded: ex
 		});
 		setDrill((cur) => cur.join("/") === t.drill.join("/") ? cur : t.drill);
-		setSelection(t.selection);
-		if (t.selection) setCentre({
-			id: t.selection.id,
-			seq: n
-		});
+		setSelection(focusOn(t.drill, t.selection, n));
 	}, [setSelection]);
 	const focusRef = useRef(focusPath);
 	focusRef.current = focusPath;
@@ -13350,57 +13447,85 @@ function useViewerController(source, options, host) {
 		y
 	}), []);
 	const menuNode = menu?.id ? vm.nodes.find((n) => n.id === menu.id) : void 0;
+	/** What a module's menu offers about it: inspect, open, its source, copy its path. */
+	const nodeItems = (node) => {
+		const items = [];
+		if (node.sheetPort) return items;
+		const path = fullId(drill, node.tapOf ?? node.id);
+		const { defId } = node;
+		items.push({
+			label: "Inspect",
+			icon: "scan-search",
+			run: () => hostActions.inspect ? hostActions.inspect(path, defId) : setPanel("hierarchy")
+		});
+		if (openAction(node, Boolean(hostActions.openModule)) === "open") {
+			const at = fullId(drill, node.id);
+			items.push({
+				label: "Open in new tab",
+				icon: "square-arrow-out-up-right",
+				run: () => hostActions.openModule(at)
+			});
+		}
+		if (defId && hostActions.openSource) items.push({
+			label: "Open source",
+			icon: "file-code",
+			run: () => hostActions.openSource(defId, fullId(drill, node.id))
+		});
+		if (typeof navigator !== "undefined" && navigator.clipboard) items.push({
+			label: "Copy path",
+			icon: "copy",
+			run: () => void navigator.clipboard.writeText(path).catch(() => void 0)
+		});
+		return items;
+	};
 	const menuItems = [];
 	if (menu && !menu.id) {
 		menuItems.push({
-			label: "FIT VIEW",
+			label: "Fit view",
+			icon: "maximize",
+			shortcut: "F",
 			run: () => viewDo("fit")
 		});
 		if (drawn.nodes.length > 1) menuItems.push({
-			label: "SELECT ALL",
+			label: "Select all",
+			icon: "square-dashed",
+			shortcut: "Ctrl+A",
 			run: onSelectAll
 		});
 		menuItems.push(interaction.tool === "pan" ? {
-			label: "SELECT TOOL",
+			label: "Select tool",
+			icon: "mouse-pointer-2",
+			shortcut: "V",
 			run: () => setTool("select")
 		} : {
-			label: "PAN TOOL",
+			label: "Pan tool",
+			icon: "hand",
+			shortcut: "H",
 			run: () => setTool("pan")
 		});
 		if (isolated.size) menuItems.push({
-			label: "SHOW EVERYTHING",
+			label: "Show all",
+			icon: "eye",
+			shortcut: "Esc",
 			run: clearIsolated
 		});
+		const chosen = selection?.kind === "node" && group.length <= 1 ? levelModules(vm.nodes).find((n) => n.id === selection.id) : void 0;
+		(chosen ? nodeItems(chosen) : []).forEach((it, i) => menuItems.push(i === 0 ? {
+			...it,
+			separator: true
+		} : it));
 	}
-	if (menuNode && !menuNode.sheetPort) {
-		const path = fullId(drill, menuNode.tapOf ?? menuNode.id);
-		const { defId } = menuNode;
-		menuItems.push({
-			label: "INSPECT",
-			run: () => hostActions.inspect ? hostActions.inspect(path, defId) : setPanel("hierarchy")
-		});
-	}
-	if (menuNode && openAction(menuNode, Boolean(hostActions.openModule)) === "open") {
-		const path = fullId(drill, menuNode.id);
-		menuItems.push({
-			label: "OPEN IN NEW TAB",
-			run: () => hostActions.openModule(path)
-		});
-	}
-	if (menuNode?.defId && hostActions.openSource) {
-		const { defId } = menuNode;
-		menuItems.push({
-			label: "OPEN SOURCE",
-			run: () => hostActions.openSource(defId, fullId(drill, menuNode.id))
-		});
-	}
+	if (menuNode) menuItems.push(...nodeItems(menuNode));
 	if (menuNode?.childCount) {
 		menuItems.push({
-			label: menuNode.expanded ? "COLLAPSE" : "EXPAND IN PLACE",
+			label: menuNode.expanded ? "Collapse" : "Expand in place",
+			icon: menuNode.expanded ? "chevrons-down-up" : "chevrons-up-down",
+			separator: true,
 			run: () => onToggleExpand(menuNode.id)
 		});
 		menuItems.push({
-			label: "OPEN AS CANVAS",
+			label: "Open as canvas",
+			icon: "layers",
 			run: () => onDrill(menuNode.id)
 		});
 	}
@@ -13675,7 +13800,7 @@ function Port({ placed, x, y, color, faded, exported, label, ground, selected, d
 	const mechanical = placed.port.domain === "mechanical";
 	const size = exported ? 11 : 9;
 	const id = `p:${placed.port.id}`;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(Handle, {
 			type: "source",
 			id,
@@ -13767,7 +13892,7 @@ function Ports({ data, labels, border = 2 }) {
 	const { box, ports, mode, showGrounds, selectedPorts, node } = data;
 	const perSide = (side) => ports.filter((q) => q.side === side).length;
 	const widthFor = (p) => p.side === "left" || p.side === "right" ? sideLabelWidth(box.w) : Math.max(30, Math.min(160, (box.w - 32) / (perSide(p.side) + 1) - 4));
-	return /* @__PURE__ */ jsx(Fragment, { children: ports.map((p) => {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: ports.map((p) => {
 		const onlyGround = p.links.every((l) => l.ground);
 		return /* @__PURE__ */ jsx(Port, {
 			placed: p,
@@ -14751,7 +14876,7 @@ function LinkEdge({ id, data, selected }) {
 		]
 	}, `${kind}${index}`);
 	const anchor = geo.anchor;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		geo.region && /* @__PURE__ */ jsx("path", {
 			d: geo.region,
 			fill: "color-mix(in oklab, var(--uhd-text) 5%, transparent)",
@@ -14908,22 +15033,57 @@ function selectionBounds(vm, layout, selection) {
 		y1: Math.max(...ys)
 	};
 }
-/**
-* The viewport that shows `rect` clear of the floating chrome (the inspector
-* too, when open), or undefined when it is in view already. It keeps the zoom
-* and pans, zooming out only as far as the selection needs; never in.
-*/
-function revealViewport(rect, viewport, pane, inspector, minZoom = .2) {
+/** Where several lines are drawn together (a harness along the lines that carry it), in flow coordinates. */
+function linesBounds(layout, lineIds) {
+	const pts = lineIds.flatMap((id) => layout.routes[id] ?? []);
+	if (!pts.length) return void 0;
+	const xs = pts.map((p) => p[0]);
+	const ys = pts.map((p) => p[1]);
+	return {
+		x0: Math.min(...xs),
+		y0: Math.min(...ys),
+		x1: Math.max(...xs),
+		y1: Math.max(...ys)
+	};
+}
+/** The part of the pane clear of the floating chrome (the inspector too, when open). */
+function clearView(pane, inspector) {
 	const left = 64;
 	const top = 56;
 	const bottom = 72;
 	const right = inspector ? Math.max(64, Math.min(376, pane.width - left - 160)) : 64;
-	const view = {
+	return {
 		x0: left,
 		y0: top,
 		x1: pane.width - right,
 		y1: pane.height - bottom
 	};
+}
+/**
+* The viewport that frames `rect`, as a module is framed when it is focused:
+* centred in the view clear of the floating chrome, zoomed to fit it, never
+* past `maxZoom`.
+*/
+function frameViewport(rect, pane, inspector, { maxZoom = 1, minZoom = .2 } = {}) {
+	const view = clearView(pane, inspector);
+	const w = Math.max(1, view.x1 - view.x0 - 48);
+	const h = Math.max(1, view.y1 - view.y0 - 48);
+	const zoom = Math.max(minZoom, Math.min(maxZoom, w / Math.max(1, rect.x1 - rect.x0), h / Math.max(1, rect.y1 - rect.y0)));
+	const cx = (rect.x0 + rect.x1) / 2;
+	const cy = (rect.y0 + rect.y1) / 2;
+	return {
+		x: (view.x0 + view.x1) / 2 - cx * zoom,
+		y: (view.y0 + view.y1) / 2 - cy * zoom,
+		zoom
+	};
+}
+/**
+* The viewport that shows `rect` clear of the floating chrome (the inspector
+* too, when open), or undefined when it is in view already. It keeps the zoom
+* and pans, zooming out only as far as the selection needs; never in.
+*/
+function revealViewport(rect, viewport, pane, inspector, minZoom = .2) {
+	const view = clearView(pane, inspector);
 	const z = viewport.zoom;
 	const on = {
 		x0: rect.x0 * z + viewport.x,
@@ -15303,8 +15463,24 @@ function Canvas(props) {
 	const moved = useRef(false);
 	const centred = useRef(0);
 	const { centre, inspector } = props;
+	const paneWidth = useStore((s) => s.width);
+	const paneHeight = useStore((s) => s.height);
 	useEffect(() => {
-		if (!centre || !drawn || centred.current === centre.seq || !nodes.some((n) => n.id === centre.id)) return;
+		if (!centre || !drawn || centred.current === centre.seq) return;
+		if (centre.lines) {
+			const rect = linesBounds(layout, centre.lines);
+			if (!rect || !paneWidth || !paneHeight) return;
+			const t = setTimeout(() => {
+				centred.current = centre.seq;
+				moved.current = true;
+				flow.setViewport(frameViewport(rect, {
+					width: paneWidth,
+					height: paneHeight
+				}, inspector ?? false), { duration: 300 });
+			}, 60);
+			return () => clearTimeout(t);
+		}
+		if (!nodes.some((n) => n.id === centre.id)) return;
 		const t = setTimeout(() => {
 			centred.current = centre.seq;
 			moved.current = true;
@@ -15320,13 +15496,14 @@ function Canvas(props) {
 		centre,
 		drawn,
 		nodes,
+		layout,
 		flow,
-		inspector
+		inspector,
+		paneWidth,
+		paneHeight
 	]);
 	const revealed = useRef(0);
 	const { reveal } = props;
-	const paneWidth = useStore((s) => s.width);
-	const paneHeight = useStore((s) => s.height);
 	useEffect(() => {
 		if (!reveal || !drawn || revealed.current === reveal.seq || !paneWidth || !paneHeight) return;
 		const rect = selectionBounds(vm, layout, reveal.selection);
@@ -16242,7 +16419,7 @@ function PackageSection({ def, titled = true }) {
 	const pkg = def ? partPackage(def) : void 0;
 	if (!pkg) return null;
 	const s = pkg.size_mm;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [titled && /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [titled && /* @__PURE__ */ jsx("div", {
 		className: "section-title",
 		children: "PACKAGE"
 	}), /* @__PURE__ */ jsxs("div", {
@@ -16322,7 +16499,7 @@ function PinTable({ def, node, vm, titled = true }) {
 		return m;
 	}, [vm, node]);
 	if (!pins.length) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [titled && /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [titled && /* @__PURE__ */ jsxs("div", {
 		className: "section-title",
 		children: [
 			"PINS · ",
@@ -16364,7 +16541,7 @@ function PinTable({ def, node, vm, titled = true }) {
 /** Functional links derived over nets, listed by name. */
 function DerivedList({ items, title, onSelect, titled = true }) {
 	if (!items.length) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [titled && /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [titled && /* @__PURE__ */ jsxs("div", {
 		className: "section-title",
 		children: [
 			title,
@@ -16518,7 +16695,7 @@ function DerivedDetails({ d, vm, onSelect, bare }) {
 					children: label(n)
 				}, n))
 			}),
-			d.children.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			d.children.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 				className: "section-title",
 				children: ["CONDUCTORS · ", d.children.length]
 			}), /* @__PURE__ */ jsx("table", {
@@ -16537,7 +16714,7 @@ function DerivedDetails({ d, vm, onSelect, bare }) {
 					})
 				] }, i)) })
 			})] }),
-			d.diagnostics.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			d.diagnostics.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 				className: "section-title",
 				children: "DIAGNOSTICS"
 			}), d.diagnostics.map((m) => /* @__PURE__ */ jsx("p", {
@@ -16610,7 +16787,7 @@ function BoardViews({ def, lookup, resolve, highlight, onPick, drawings = true }
 	].filter((a) => Boolean(a));
 	const shown = new Set(files);
 	const sample = files.some((a) => a?.tags?.includes("sample"));
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "section-title",
 			children: /* @__PURE__ */ jsxs("span", { children: ["BOARD OUTPUTS", sample && /* @__PURE__ */ jsx("span", {
@@ -16618,7 +16795,7 @@ function BoardViews({ def, lookup, resolve, highlight, onPick, drawings = true }
 				children: "SAMPLE"
 			})] })
 		}),
-		drawings && current && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		drawings && current && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 			className: "artifact-parts board-tabs",
 			children: tabs.map((t) => /* @__PURE__ */ jsx("button", {
 				className: `mini${t.id === current ? " on" : ""}`,
@@ -17245,62 +17422,6 @@ function ArtifactLink({ defId, artifactId, href, title, children }) {
 	});
 }
 var urlOf = (def, a, resolve) => a.url ?? (a.filePath ? resolve(def.id, a.filePath) : void 0);
-var hasArtifacts = (def) => Boolean(thumbnailOf(def) || glbFor(def));
-/**
-* An assembly (FC + ESC stack, an arm) usually has no CAD of its own: show its
-* parts' artifacts instead, one part at a time, picked from a row of names.
-*/
-function AssemblyArtifacts({ def, lookup, resolve, appearance, titled = true }) {
-	const [pick, setPick] = useState(0);
-	if (!def) return null;
-	if (hasArtifacts(def)) return /* @__PURE__ */ jsx(ArtifactsSection, {
-		def,
-		resolve,
-		appearance: appearance?.[def.id],
-		titled
-	});
-	const parts = [];
-	const seen = /* @__PURE__ */ new Set();
-	const walk = (d, depth) => {
-		for (const ref of d.children ?? []) {
-			const c = lookup(ref.moduleDefId);
-			if (!c || seen.has(c.id)) continue;
-			seen.add(c.id);
-			if (hasArtifacts(c)) parts.push({
-				name: ref.name ?? c.name,
-				def: c
-			});
-			else if (depth < 3) walk(c, depth + 1);
-		}
-	};
-	walk(def, 0);
-	const cur = parts[Math.min(pick, parts.length - 1)];
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ArtifactsSection, {
-		def,
-		resolve,
-		appearance: appearance?.[def.id],
-		titled
-	}), cur && /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx("div", {
-			className: "section-title",
-			children: "ARTIFACTS · PARTS"
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "artifact-parts",
-			children: parts.map((p, i) => /* @__PURE__ */ jsx("button", {
-				className: `mini${p === cur ? " on" : ""}`,
-				onClick: () => setPick(i),
-				children: p.name.toUpperCase()
-			}, p.def.id))
-		}),
-		/* @__PURE__ */ jsx(ArtifactsSection, {
-			def: cur.def,
-			resolve,
-			appearance: appearance?.[cur.def.id],
-			titled: false
-		})
-	] })] });
-}
 /**
 * A definition's artifacts: its picture, its body model (turning in a small
 * 3D preview, unless the host shows models as cards), and every artifact as
@@ -17324,7 +17445,7 @@ function ArtifactsSection({ def, resolve, appearance, titled = true }) {
 		sources: files?.sources
 	});
 	if (!thumb && !glb && !cards.length) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		titled && /* @__PURE__ */ jsxs("div", {
 			className: "section-title",
 			children: ["ARTIFACTS · ", (def.artifacts ?? []).filter((a) => (a.filePath || a.url) && !board.has(a) && !isInternalArtifact(a)).length]
@@ -17491,7 +17612,7 @@ function EvidenceSection({ def, titled = true, performance = true }) {
 	if (!def || !ev || !hasEvidence(ev, performance)) return null;
 	const v = ev.verification;
 	const named = (v?.assumptions ?? []).map(text).filter((a) => !ev.assumptions.some((t) => t.field === a));
-	return /* @__PURE__ */ jsxs(Fragment, { children: [titled && /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [titled && /* @__PURE__ */ jsx("div", {
 		className: "section-title",
 		children: "EVIDENCE"
 	}), /* @__PURE__ */ jsxs("div", {
@@ -17813,19 +17934,23 @@ function interfaceSlots(node, vm, opts) {
 		const mine = lines.filter((l) => l.source.node === node.id && l.source.port === port || l.target.node === node.id && l.target.port === port);
 		return mine.filter((l, i) => mine.findIndex((m) => m.linkId === l.linkId) === i);
 	};
-	const linkedIds = new Set(node.ports.filter((p) => linksOf(p.id).length).map((p) => p.id));
+	const drawn = new Set(node.ports.map((p) => p.id));
+	const ports = [...node.ports, ...def && node.kind !== "harness" ? def.interfaces.filter((i) => !drawn.has(i.id)).map((i) => toPort(i, def)) : []];
+	const boundInto = /* @__PURE__ */ new Map();
+	for (const i of def?.interfaces ?? []) for (const profile of i.profiles ?? []) for (const v of Object.values(profile.bindings)) for (const id of Array.isArray(v) ? v : [v]) if (id !== i.id && !boundInto.has(id)) boundInto.set(id, i.name && i.name !== i.id ? i.name : humanize(i.id));
+	const linkedIds = new Set(ports.filter((p) => linksOf(p.id).length).map((p) => p.id));
 	const exportedAs = /* @__PURE__ */ new Map();
 	for (const l of vm.links) if (l.passThrough && l.target.node === node.id && !exportedAs.has(l.target.port)) exportedAs.set(l.target.port, l.name);
 	const usedBy = /* @__PURE__ */ new Map();
-	for (const p of node.ports) if (linkedIds.has(p.id)) {
+	for (const p of ports) if (linkedIds.has(p.id)) {
 		for (const c of p.children) if (c.leafId && !usedBy.has(c.leafId)) usedBy.set(c.leafId, p.name === p.id ? humanize(p.id) : p.name);
 	}
-	for (const p of node.ports) {
+	for (const p of ports) {
 		if (linkedIds.has(p.id) || usedBy.has(p.id)) continue;
 		const via = p.children.map((c) => c.leafId && usedBy.get(c.leafId)).find(Boolean);
 		if (via) usedBy.set(p.id, via);
 	}
-	const slots = node.ports.map((port) => {
+	const slots = ports.map((port) => {
 		const iface = findInterface(def, port.id, lookup);
 		const leaves = port.children.map((c) => c.leafId ? findInterface(def, c.leafId, lookup) : void 0);
 		const links = linksOf(port.id);
@@ -17963,9 +18088,10 @@ function interfaceSlots(node, vm, opts) {
 			...role ? { role } : {},
 			pins,
 			linked: linked.filter((x, i) => linked.findIndex((y) => y.module === x.module && y.via === x.via) === i),
-			open: !links.length && !usedBy.has(port.id) && !exportedAs.has(port.id) && !vm.derived.some((d) => d.a.node === node.id && d.a.iface === port.id || d.b.node === node.id && d.b.iface === port.id),
+			open: !links.length && !usedBy.has(port.id) && !exportedAs.has(port.id) && !(!drawn.has(port.id) && boundInto.has(port.id)) && !vm.derived.some((d) => d.a.node === node.id && d.a.iface === port.id || d.b.node === node.id && d.b.iface === port.id),
 			...!links.length && usedBy.has(port.id) ? { usedBy: usedBy.get(port.id) } : {},
 			...!links.length && !usedBy.has(port.id) && exportedAs.has(port.id) ? { exportedAs: exportedAs.get(port.id) } : {},
+			...!links.length && !usedBy.has(port.id) && !exportedAs.has(port.id) && !drawn.has(port.id) && boundInto.has(port.id) ? { partOf: boundInto.get(port.id) } : {},
 			...state ? { state } : {},
 			pinMap,
 			params,
@@ -17976,7 +18102,7 @@ function interfaceSlots(node, vm, opts) {
 			refs: [...refs]
 		};
 	});
-	const order = (s) => s.linked.length || s.links.length ? s.kind === "mechanical" ? 3 : s.kind === "power" ? 0 : 1 : s.open ? 2 : 4;
+	const order = (s) => s.linked.length || s.links.length ? s.kind === "mechanical" ? 3 : s.kind === "power" ? 0 : 1 : s.open ? 2 : s.partOf ? 5 : 4;
 	return groupSlots(slots.map((s, i) => ({
 		s,
 		i
@@ -18005,7 +18131,7 @@ var shape = (name) => name.replace(/\d+/g, "#");
 */
 function groupSlots(slots) {
 	const out = [];
-	const key = (s) => `${shape(s.name)}|${s.kind}|${s.protocol}|${s.linked.length ? "linked" : s.open ? "open" : s.exportedAs ? "exported" : "used"}`;
+	const key = (s) => `${shape(s.name)}|${s.kind}|${s.protocol}|${s.linked.length ? "linked" : s.open ? "open" : s.exportedAs ? "exported" : s.partOf ? `part of ${s.partOf}` : "used"}`;
 	for (const s of slots) {
 		if (!/\d/.test(s.name)) {
 			out.push(s);
@@ -18316,7 +18442,122 @@ function KeyValues({ rows, limit }) {
 		})]
 	}, `${r.key}-${i}`)) });
 }
-/** A section's rows shown in part, and the header action that shows them all. */
+/** How many rows of a long list are shown at first, and how many more each "Show more" adds (PB-1088). */
+var LIST_STEP = 10;
+var MORE_LOOK = {
+	row: "flex min-h-6 items-center gap-3 pt-1",
+	button: "inline-flex h-6 cursor-pointer items-center gap-1 rounded-[3px] px-1 -mx-1 text-[11px] leading-none text-fg-muted hover:text-fg focus-visible:outline focus-visible:outline-1 focus-visible:outline-focus"
+};
+/**
+* A long list shown `step` rows at a time (PB-1088): "Show 10 more" under the
+* rows adds the next ones, "Show fewer" goes back to the first `step`.
+* `keep`: rows that must stay shown (an expanded card), counted from the top.
+*/
+function useLoadMore(total, step = 10, keep = 0) {
+	const [shown, setShown] = useState(step);
+	const limit = Math.min(total, Math.max(shown, keep));
+	if (total <= step) return {
+		limit: total,
+		footer: null
+	};
+	const next = Math.min(step, total - limit);
+	return {
+		limit,
+		footer: /* @__PURE__ */ jsxs("div", {
+			className: MORE_LOOK.row,
+			"data-load-more": "",
+			children: [next > 0 && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-nav": "",
+				onKeyDown: onNavKey,
+				className: MORE_LOOK.button,
+				onClick: () => setShown(limit + next),
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						name: "chevron-down",
+						size: 12,
+						strokeWidth: 1.75,
+						"aria-hidden": true,
+						className: "shrink-0"
+					}),
+					"Show ",
+					next,
+					" more"
+				]
+			}), limit > step && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-nav": "",
+				onKeyDown: onNavKey,
+				className: cx(MORE_LOOK.button, next > 0 && "ml-auto"),
+				onClick: () => setShown(step),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "chevron-up",
+					size: 12,
+					strokeWidth: 1.75,
+					"aria-hidden": true,
+					className: "shrink-0"
+				}), "Show fewer"]
+			})]
+		})
+	};
+}
+/**
+* A long free text (a module's description) cut to `lines` lines, with "More"
+* to read it all and "Less" to cut it again (PB-1088). The toggle shows only
+* when the text is cut.
+*/
+function ClampedText({ text, lines = 5, className }) {
+	const [open, setOpen] = useState(false);
+	const [cut, setCut] = useState(() => text.length > lines * 60);
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el || open) return;
+		const measure = () => {
+			setCut(el.clientHeight > 0 ? el.scrollHeight > el.clientHeight + 1 : text.length > lines * 60);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [
+		text,
+		lines,
+		open
+	]);
+	const id = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pb-1.5",
+		children: [/* @__PURE__ */ jsx("p", {
+			ref,
+			id,
+			"data-clamped": !open && cut ? "" : void 0,
+			className: cx("m-0 [overflow-wrap:anywhere] whitespace-pre-line", className),
+			style: open ? void 0 : {
+				display: "-webkit-box",
+				WebkitBoxOrient: "vertical",
+				WebkitLineClamp: lines,
+				overflow: "hidden"
+			},
+			children: text
+		}), (cut || open) && /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			"aria-controls": id,
+			className: cx(MORE_LOOK.button, "mt-0.5"),
+			onClick: () => setOpen(!open),
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: open ? "chevron-up" : "chevron-down",
+				size: 12,
+				strokeWidth: 1.75,
+				"aria-hidden": true,
+				className: "shrink-0"
+			}), open ? "Less" : "More"]
+		})]
+	});
+}
+/** A section's rows shown in part, and the header action that shows them all. Lists use `useLoadMore` (PB-1088). */
 function useShowAll(total, limit) {
 	const [all, setAll] = useState(false);
 	if (total <= limit) return {
@@ -18360,6 +18601,16 @@ var CARD_LOOK = {
 	toggle: "min-w-0 truncate text-left text-[12px] leading-[18px] text-fg outline-none after:absolute after:inset-0 after:content-[''] cursor-pointer",
 	chip: "inline-flex h-[18px] shrink-0 items-center rounded-[4px] bg-[color-mix(in_oklab,var(--uhd-text)_8%,transparent)] px-1.5 text-[10px] leading-none text-fg-muted",
 	pin: "inline-flex h-4 shrink-0 items-center rounded-[4px] border border-line px-1 text-[10px] leading-none text-fg-muted",
+	/**
+	* The pin mapping's columns, shared by its rows: the pin as wide as the widest (at least 44 px, its cell's
+	* minimum; at most 40 % of the card), the leaf (when any pin binds one) at most 30 %, and what it meets in the rest.
+	*/
+	pinMap: "grid gap-x-2 gap-y-[3px] text-[11px] leading-none",
+	pinMapPins: "grid-cols-[fit-content(40%)_minmax(0,1fr)]",
+	pinMapLeaves: "grid-cols-[fit-content(40%)_fit-content(30%)_minmax(0,1fr)]",
+	pinRow: "col-span-full grid min-h-5 grid-cols-subgrid items-center",
+	/** A pin in the mapping: a chip that ends in an ellipsis when the column is narrower than its name. */
+	pinName: "inline-block h-4 max-w-full truncate rounded-[4px] border border-line px-1 align-middle text-[10px] leading-[14px] text-fg-muted",
 	meta: "mt-[5px] flex min-w-0 items-center gap-1",
 	role: "ml-auto shrink-0 text-[10px] leading-none text-fg-faint",
 	linked: "mt-[5px] flex min-w-0 items-center gap-1.5 text-[11px] leading-[16px]",
@@ -18434,6 +18685,61 @@ function Group({ title, children }) {
 		}), children]
 	});
 }
+/**
+* The pin mapping: one row per pin, in columns shared by every row (the pin,
+* the leaf it binds when it is not the pin itself, and what it meets across
+* the link). Every column fits the card: a pin or name too long for it ends
+* in an ellipsis and says itself in full in its tooltip, so nothing runs over
+* the next column or the next line in a narrow Inspector.
+*/
+function PinMap({ pins }) {
+	const leaves = pins.some((p) => p.leaf);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(CARD_LOOK.pinMap, leaves ? CARD_LOOK.pinMapLeaves : CARD_LOOK.pinMapPins),
+		children: pins.map((p, i) => /* @__PURE__ */ jsxs("div", {
+			className: CARD_LOOK.pinRow,
+			"data-pin": p.pin,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-11",
+					children: /* @__PURE__ */ jsx("span", {
+						className: CARD_LOOK.pinName,
+						"data-tooltip": p.pin.length > 6 ? p.pin : void 0,
+						children: p.pin
+					})
+				}),
+				leaves && /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate text-fg-muted",
+					"data-tooltip": p.leaf,
+					children: p.leaf ?? ""
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-fg",
+							"aria-label": p.dir === "←" ? "from" : p.dir === "→" ? "to" : p.dir === "—" ? "shared with" : "with",
+							children: p.dir
+						}),
+						p.other ? /* @__PURE__ */ jsx("span", {
+							className: "max-w-[60%] min-w-0 shrink-0 truncate text-fg",
+							"data-tooltip": p.other.length > 12 ? p.other : void 0,
+							children: p.other
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-fg-faint",
+							children: p.otherModule ? "" : "not linked"
+						}),
+						p.otherModule && /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate text-fg-faint",
+							"data-tooltip": p.otherModule.length > 12 ? p.otherModule : void 0,
+							children: p.otherModule
+						})
+					]
+				})
+			]
+		}, `${p.pin}-${i}`))
+	});
+}
 /** What an expanded card shows below its summary. */
 function CardDetail({ slot, actions }) {
 	return /* @__PURE__ */ jsxs("div", {
@@ -18442,46 +18748,7 @@ function CardDetail({ slot, actions }) {
 		children: [
 			slot.pinMap.length > 0 && /* @__PURE__ */ jsx(Group, {
 				title: "Pin mapping",
-				children: slot.pinMap.map((p, i) => /* @__PURE__ */ jsxs("div", {
-					className: "flex min-h-5 min-w-0 items-center gap-2 text-[11px] leading-none",
-					"data-pin": p.pin,
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "w-11 shrink-0",
-							children: /* @__PURE__ */ jsx("span", {
-								className: CARD_LOOK.pin,
-								children: p.pin
-							})
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "w-[88px] shrink-0 truncate text-fg-muted",
-							"data-tooltip": p.leaf,
-							children: p.leaf ?? ""
-						}),
-						/* @__PURE__ */ jsxs("span", {
-							className: "flex min-w-0 flex-1 items-center gap-1.5",
-							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: "shrink-0 text-fg",
-									"aria-label": p.dir === "←" ? "from" : p.dir === "→" ? "to" : p.dir === "—" ? "shared with" : "with",
-									children: p.dir
-								}),
-								p.other ? /* @__PURE__ */ jsx("span", {
-									className: "max-w-[60%] min-w-0 shrink-0 truncate text-fg",
-									"data-tooltip": p.other.length > 12 ? p.other : void 0,
-									children: p.other
-								}) : /* @__PURE__ */ jsx("span", {
-									className: "text-fg-faint",
-									children: p.otherModule ? "" : "not linked"
-								}),
-								p.otherModule && /* @__PURE__ */ jsx("span", {
-									className: "min-w-0 truncate text-fg-faint",
-									children: p.otherModule
-								})
-							]
-						})
-					]
-				}, `${p.pin}-${i}`))
+				children: /* @__PURE__ */ jsx(PinMap, { pins: slot.pinMap })
 			}),
 			(slot.protocol || slot.params.length > 0) && /* @__PURE__ */ jsxs(Group, {
 				title: "Protocol and parameters",
@@ -18799,6 +19066,18 @@ function InterfaceCard({ slot, open, onToggle, actions }) {
 						className: "min-w-0 truncate text-fg-faint",
 						children: ["in use through ", slot.usedBy]
 					})]
+				}) : slot.partOf ? /* @__PURE__ */ jsxs("div", {
+					className: CARD_LOOK.linked,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: "corner-down-right",
+						size: 12,
+						strokeWidth: 1.75,
+						"aria-hidden": true,
+						className: "shrink-0 text-fg-faint"
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "min-w-0 truncate text-fg-faint",
+						children: ["part of ", slot.partOf]
+					})]
 				}) : null
 			]
 		}), /* @__PURE__ */ jsx("div", {
@@ -18811,46 +19090,20 @@ function InterfaceCard({ slot, open, onToggle, actions }) {
 		})]
 	});
 }
-/** The cards, the first few shown; "N more · names" opens the rest. */
-function InterfaceCards({ slots, actions, first = 4 }) {
+/** The cards, ten at a time (PB-1088): "Show 10 more" adds the next ten, "Show fewer" goes back to the first ten. */
+function InterfaceCards({ slots, actions, first = 10 }) {
 	const [expanded, toggle] = useExpandedCards();
-	const [all, setAll] = useState(false);
 	const lastOpen = slots.reduce((m, s, i) => expanded.has(s.id) ? i : m, -1);
-	const cut = all ? slots.length : Math.max(first, lastOpen + 1);
-	const shown = slots.slice(0, cut);
-	const rest = slots.slice(cut);
+	const more = useLoadMore(slots.length, first, lastOpen + 1);
 	return /* @__PURE__ */ jsxs("div", {
 		className: CARD_LOOK.list,
 		"data-interface-cards": "",
-		children: [shown.map((s) => /* @__PURE__ */ jsx(InterfaceCard, {
+		children: [slots.slice(0, more.limit).map((s) => /* @__PURE__ */ jsx(InterfaceCard, {
 			slot: s,
 			open: expanded.has(s.id),
 			onToggle: () => toggle(s.id),
 			actions
-		}, s.id)), rest.length > 0 && /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"data-nav": "",
-			onKeyDown: onNavKey,
-			className: CARD_LOOK.more,
-			"aria-expanded": false,
-			onClick: () => setAll(true),
-			"data-tooltip": rest.map((s) => s.name).join(", "),
-			"data-tooltip-clamp": "4",
-			children: [/* @__PURE__ */ jsx(Icon, {
-				name: "chevron-right",
-				size: 12,
-				strokeWidth: 1.75,
-				"aria-hidden": true,
-				className: "shrink-0"
-			}), /* @__PURE__ */ jsxs("span", {
-				className: "min-w-0 truncate",
-				children: [
-					rest.length,
-					" more · ",
-					rest.map((s) => s.name).join(", ")
-				]
-			})]
-		})]
+		}, s.id)), more.footer]
 	});
 }
 //#endregion
@@ -18862,25 +19115,18 @@ function factRows(rows) {
 		value
 	}));
 }
-/** "24 models · 2 docs · 1 evidence": what a definition's artifacts, and its parts', are, by group. */
-function artifactSummary(def, lookup) {
+/**
+* "4 models · 2 docs · 1 evidence": what a definition's own artifacts are, by group. A parent's are its own only
+* (PB-1088): its children's are theirs, a selection away.
+*/
+function artifactSummary(def, _lookup) {
 	if (!def) return {
 		count: 0,
 		text: ""
 	};
-	const defs = [def];
-	const seen = /* @__PURE__ */ new Set([def.id]);
-	const walk = (d, depth) => {
-		for (const ref of d.children ?? []) {
-			const c = lookup(ref.moduleDefId);
-			if (!c || seen.has(c.id)) continue;
-			seen.add(c.id);
-			defs.push(c);
-			if (depth < 3) walk(c, depth + 1);
-		}
-	};
-	walk(def, 0);
-	const cards = defs.flatMap((d) => artifactCards(d, () => void 0));
+	const outs = circuitOutputs(def);
+	const board = new Set(outs ? Object.values(outs).filter(Boolean) : []);
+	const cards = artifactCards(def, () => void 0, { skip: (a) => board.has(a) });
 	const WORD = {
 		images: ["image", "images"],
 		models: ["model", "models"],
@@ -18953,7 +19199,7 @@ function ModuleDetails({ node, vm, def, onDrill, onToggleExpand, onSelect, artif
 		["Part number", node.partNumber],
 		["Path", node.id || void 0]
 	]), ...performance];
-	const showAll = useShowAll(params.length, 5);
+	const more = useLoadMore(params.length);
 	const slots = useMemo(() => node.kind === "harness" ? [] : interfaceSlots(node, vm, {
 		lookup: (id) => find(id),
 		drill,
@@ -18970,7 +19216,6 @@ function ModuleDetails({ node, vm, def, onDrill, onToggleExpand, onSelect, artif
 		findings
 	]);
 	const summary = slotSummary(slots);
-	const firstCards = Math.min(12, Math.max(4, slots.filter((s) => s.links.length && s.kind !== "mechanical" || s.open).length));
 	const arts = artifactSummary(def, find);
 	const derived = vm.derived.filter((d) => d.a.node === node.id || d.b.node === node.id);
 	const pins = (def?.interfaces ?? []).filter((i) => i.pin !== void 0).length;
@@ -19009,14 +19254,18 @@ function ModuleDetails({ node, vm, def, onDrill, onToggleExpand, onSelect, artif
 					/* @__PURE__ */ jsxs(DetailsSection, {
 						id: "parameters",
 						title: "Parameters",
-						aside: showAll.aside,
-						children: [node.description && /* @__PURE__ */ jsx("p", {
-							className: "m-0 pb-1.5 text-[11px] leading-[1.5] text-fg-muted",
-							children: node.description
-						}), /* @__PURE__ */ jsx(KeyValues, {
-							rows: params,
-							limit: showAll.limit
-						})]
+						children: [
+							node.description && /* @__PURE__ */ jsx(ClampedText, {
+								text: node.description,
+								lines: 5,
+								className: "text-[11px] leading-[1.5] text-fg-muted"
+							}, node.description),
+							/* @__PURE__ */ jsx(KeyValues, {
+								rows: params,
+								limit: more.limit
+							}),
+							more.footer
+						]
 					}),
 					board && /* @__PURE__ */ jsx(DetailsSection, {
 						id: "board",
@@ -19030,12 +19279,12 @@ function ModuleDetails({ node, vm, def, onDrill, onToggleExpand, onSelect, artif
 						summary: summary.text,
 						children: /* @__PURE__ */ jsx(InterfaceCards, {
 							slots,
-							first: firstCards,
+							first: 10,
 							actions: cardActions ?? { selectLink: (id) => onSelect({
 								kind: "link",
 								id
 							}) }
-						})
+						}, node.id)
 					}),
 					artifacts && arts.count > 0 && /* @__PURE__ */ jsx(DetailsSection, {
 						id: "artifacts",
@@ -19297,7 +19546,7 @@ function Hierarchy({ vm, selection, onSelect, board, onContext }) {
 				children: ["MODULES · ", vm.nodes.filter((n) => !n.sheetPort && n.kind !== "net").length]
 			}),
 			roots.map((n) => item(n, 0)),
-			nets.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			nets.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 				className: "section-title",
 				children: ["NETS · ", nets.length]
 			}), nets.map((n) => /* @__PURE__ */ jsxs("button", {
@@ -19601,11 +19850,10 @@ function InspectorView(props) {
 					onSelect: props.onSelect,
 					board: boardFor(node),
 					onOpenSource: host.openSource && node.defId ? () => host.openSource(node.defId, fullId(props.drill, node.id)) : void 0,
-					artifacts: /* @__PURE__ */ jsx(AssemblyArtifacts, {
+					artifacts: /* @__PURE__ */ jsx(ArtifactsSection, {
 						def: props.defFor(node.defId),
-						lookup: props.defFor,
 						resolve: props.resolveArtifact,
-						appearance: props.appearance,
+						appearance: node.defId ? props.appearance?.[node.defId] : void 0,
 						titled: false
 					}, node.id),
 					lookup: props.defFor,
@@ -19709,8 +19957,9 @@ function NodeMenu({ x, y, items, onClose }) {
 		};
 	}, [onClose]);
 	if (!items.length) return null;
-	const left = Math.min(x, window.innerWidth - 180);
-	const top = Math.min(y, window.innerHeight - 12 - items.length * 30);
+	const rules = items.filter((it, i) => it.separator && i > 0).length;
+	const left = Math.min(x, window.innerWidth - 228);
+	const top = Math.max(4, Math.min(y, window.innerHeight - 12 - items.length * 28 - rules * 9));
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: "context-menu",
@@ -19719,14 +19968,36 @@ function NodeMenu({ x, y, items, onClose }) {
 			top
 		},
 		role: "menu",
-		children: items.map((it) => /* @__PURE__ */ jsx("button", {
+		children: items.map((it, i) => /* @__PURE__ */ jsxs(Fragment, { children: [it.separator && i > 0 && /* @__PURE__ */ jsx("div", {
+			role: "separator",
+			className: "context-menu-rule"
+		}), /* @__PURE__ */ jsxs("button", {
+			type: "button",
 			role: "menuitem",
 			onClick: () => {
 				onClose();
 				it.run();
 			},
-			children: it.label
-		}, it.label))
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "context-menu-icon",
+					"aria-hidden": true,
+					children: it.icon && /* @__PURE__ */ jsx(Icon, {
+						name: it.icon,
+						size: 14,
+						strokeWidth: 1.75
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "context-menu-label",
+					children: it.label
+				}),
+				it.shortcut && /* @__PURE__ */ jsx("kbd", {
+					className: "context-menu-key",
+					children: it.shortcut
+				})
+			]
+		})] }, it.label))
 	});
 }
 /** Memoised: re-renders only when its props change, not on every frame of a canvas drag. */
@@ -20296,7 +20567,7 @@ function vscodeThemeAdapter(doc = typeof document === "undefined" ? void 0 : doc
 * component, and the tooltip lives inside the themed root, so it keeps the
 * host's tokens.
 */
-var OPEN_DELAY = 350;
+var OPEN_DELAY = 250;
 /** Moving from one control to the next within this time shows the next tip at once. */
 var SKIP_DELAY = 300;
 /** Where to put the tip for a target: below it unless it says otherwise, kept inside the root. */
@@ -20390,7 +20661,7 @@ function Tooltips({ root }) {
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		role: "tooltip",
-		className: `uhd-tooltip pointer-events-none absolute z-[1000] flex items-center gap-2 rounded-md border border-line bg-raised px-2 py-1 font-ui text-[11px] leading-4 text-fg shadow-float outline outline-1 -outline-offset-1 outline-contrast ${tip.clamp ? "w-max max-w-[min(300px,calc(100%-12px))] whitespace-normal" : "whitespace-nowrap"}`,
+		className: `uhd-tooltip pointer-events-none absolute select-none z-[1000] flex items-center gap-2 rounded-md border border-line bg-raised px-2 py-1 font-ui text-[11px] leading-4 text-fg shadow-float outline outline-1 -outline-offset-1 outline-contrast ${tip.clamp ? "w-max max-w-[min(300px,calc(100%-12px))] whitespace-normal" : "whitespace-nowrap"}`,
 		style: {
 			left: tip.x + nudge,
 			top: tip.y,
@@ -22433,10 +22704,12 @@ function CadView({ system, lookup, source, diagnostics = [], hostDiagnostics = [
 		const h = handle.current;
 		const recs = selectionRecs(sel.body);
 		const rec = recs.length === 1 && sel.body !== void 0 ? bodies.current.get(sel.body) : void 0;
-		if (!h || !recs.length) return;
-		if (!sel.iface || !rec) {
+		const wire = sel.body === void 0 && sel.harness !== void 0 ? harnessObjs.current.get(sel.harness) : void 0;
+		const objs = wire ? [wire] : recs.map((r) => r.obj);
+		if (!h || !objs.length) return;
+		if (wire || !sel.iface || !rec) {
 			const box = new THREE.Box3();
-			for (const r of recs) box.expandByObject(r.obj);
+			for (const o of objs) box.expandByObject(o);
 			if (box.isEmpty()) return;
 			const size = box.getSize(new THREE.Vector3());
 			const grow = Math.max(size.length() * .5, 40);
@@ -22518,6 +22791,11 @@ function CadView({ system, lookup, source, diagnostics = [], hostDiagnostics = [
 			if (model.assembly.mates.some((m) => m.linkId === key)) setSel({ mate: key });
 			return;
 		}
+		if (model.assembly.harnesses.some((hp) => hp.key === key)) {
+			setSel({ harness: key });
+			look.current = focusOn.look !== false && harnessObjs.current.has(key);
+			return;
+		}
 		const has = (k) => model.bodies.some((b) => b.key === k);
 		const holder = model.within.get(key);
 		const parts = key.split("/");
@@ -22532,7 +22810,8 @@ function CadView({ system, lookup, source, diagnostics = [], hostDiagnostics = [
 		look.current = focusOn.look !== false;
 	}, [focusOn, model]);
 	useEffect(() => {
-		if (!look.current || sel.body === void 0 || !selectionRecs(sel.body).length) return;
+		if (!look.current) return;
+		if (!(sel.body === void 0 && sel.harness !== void 0 && harnessObjs.current.has(sel.harness)) && (sel.body === void 0 || !selectionRecs(sel.body).length)) return;
 		look.current = false;
 		focus();
 		handle.current?.renderOnce();
@@ -22571,11 +22850,11 @@ function CadView({ system, lookup, source, diagnostics = [], hostDiagnostics = [
 							options: [{
 								id: "assembled",
 								icon: "box",
-								label: "Assembled: every module where its links put it"
+								label: "Assembled"
 							}, {
 								id: "exploded",
 								icon: "layers",
-								label: "Exploded: apart in assembly order, bottom to top"
+								label: "Exploded"
 							}],
 							value: exploded ? "exploded" : "assembled",
 							onChange: (v) => toggleExploded(v === "exploded")
@@ -22629,7 +22908,7 @@ function CadView({ system, lookup, source, diagnostics = [], hostDiagnostics = [
 						}),
 						(model?.assembly.hardware.length ?? 0) > 0 && /* @__PURE__ */ jsx(IconButton, {
 							icon: "wrench",
-							label: "Mounting hardware from the harnesses' fastener stacks",
+							label: "Mounting hardware",
 							tooltipSide: "top",
 							pressed: showHardware,
 							onClick: () => setShowHardware(!showHardware)
@@ -22654,7 +22933,7 @@ function CadView({ system, lookup, source, diagnostics = [], hostDiagnostics = [
 							children: [
 								/* @__PURE__ */ jsx(IconButton, {
 									icon: "scissors",
-									label: "Section: cut the model with a plane",
+									label: "Section",
 									tooltipSide: "top",
 									pressed: Boolean(section),
 									onClick: () => setSection(section ? null : {
@@ -22728,7 +23007,7 @@ function CadView({ system, lookup, source, diagnostics = [], hostDiagnostics = [
 						}),
 						/* @__PURE__ */ jsx(IconButton, {
 							icon: "scan-eye",
-							label: shells ? "X-ray: see through bodies that hold others" : "X-ray: nothing to see through here (no body holds another)",
+							label: shells ? "X-ray" : "X-ray: nothing to see through",
 							tooltipSide: "top",
 							pressed: xray && shells > 0,
 							"aria-disabled": !shells || void 0,
@@ -22764,7 +23043,7 @@ function CadView({ system, lookup, source, diagnostics = [], hostDiagnostics = [
 						}),
 						/* @__PURE__ */ jsx(IconButton, {
 							icon: "crosshair",
-							label: "Look along the selected interface's normal",
+							label: "Look along normal",
 							tooltipSide: "top",
 							disabled: !sel.body,
 							onClick: focus
@@ -22814,7 +23093,7 @@ function CadView({ system, lookup, source, diagnostics = [], hostDiagnostics = [
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "cad-caption-brand",
 						children: [/* @__PURE__ */ jsx("span", { children: "UHD" }), " VIEWER · 5-INCH 6S QUADCOPTER"]
-					}), caption && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					}), caption && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 						className: "cad-caption-title",
 						children: caption[0]
 					}), caption[1] && /* @__PURE__ */ jsx("div", {
@@ -22879,7 +23158,7 @@ function FrameTable({ frame }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "kv-grid",
 		children: [
-			frame.artifact && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			frame.artifact && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 				className: "k",
 				children: "body"
 			}), /* @__PURE__ */ jsx("span", {
@@ -22949,7 +23228,7 @@ function CadInspector({ model, sel, onSel, direction, findings, resolve }) {
 		}), /* @__PURE__ */ jsx(ScrollArea, {
 			className: "inspector-scroll",
 			contentClassName: "inspector-body",
-			children: body ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: body ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("h3", {
 					className: "cad-title",
 					children: body.def.name
@@ -22960,7 +23239,7 @@ function CadInspector({ model, sel, onSel, direction, findings, resolve }) {
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "cad-sub",
-					children: body.via ? /* @__PURE__ */ jsxs(Fragment, { children: ["placed by link ", /* @__PURE__ */ jsx("button", {
+					children: body.via ? /* @__PURE__ */ jsxs(Fragment$1, { children: ["placed by link ", /* @__PURE__ */ jsx("button", {
 						className: "linklike",
 						onClick: () => onSel({ mate: body.via }),
 						children: body.via
@@ -23024,7 +23303,7 @@ function CadInspector({ model, sel, onSel, direction, findings, resolve }) {
 						]
 					}, a.id))
 				})
-			] }) : harness ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			] }) : harness ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("h3", {
 					className: "cad-title",
 					children: harness.def.name
@@ -23048,7 +23327,7 @@ function CadInspector({ model, sel, onSel, direction, findings, resolve }) {
 							className: "v",
 							children: cableSummary(harness, hm)
 						}),
-						hm && /* @__PURE__ */ jsxs(Fragment, { children: [
+						hm && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 							/* @__PURE__ */ jsx("span", {
 								className: "k",
 								children: "routed"
@@ -23134,7 +23413,7 @@ function CadInspector({ model, sel, onSel, direction, findings, resolve }) {
 						]
 					}, a.id))
 				})
-			] }) : mate ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			] }) : mate ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("h3", {
 					className: "cad-title",
 					children: mate.linkId
@@ -23180,7 +23459,7 @@ function CadInspector({ model, sel, onSel, direction, findings, resolve }) {
 						})
 					]
 				})
-			] }) : route ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			] }) : route ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("h3", {
 					className: "cad-title",
 					children: route.linkId
@@ -23212,7 +23491,7 @@ function CadInspector({ model, sel, onSel, direction, findings, resolve }) {
 						")"
 					]
 				})
-			] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "section-title",
 					children: ["PLACED FROM LINKS · ", model.assembly.placements.length]
@@ -23231,7 +23510,7 @@ function CadInspector({ model, sel, onSel, direction, findings, resolve }) {
 						})]
 					}, b.key))
 				}),
-				findings.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				findings.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 					className: "section-title",
 					children: ["FINDINGS ON THE MODEL · ", findings.length]
 				}), findings.map((f) => /* @__PURE__ */ jsxs("button", {
@@ -23309,7 +23588,7 @@ function CadInspector({ model, sel, onSel, direction, findings, resolve }) {
 						]
 					})]
 				}, r.linkId)),
-				unrouted.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				unrouted.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 					className: "section-title",
 					children: ["UNROUTED · ", unrouted.length]
 				}), /* @__PURE__ */ jsxs("div", {
@@ -23336,8 +23615,8 @@ function BodyContents({ model, body, sel, onSel, resolve }) {
 	const named = Object.entries(manifest?.bodies ?? {});
 	const cad = cadOutputs(body.def);
 	const circuit = circuitOutputs(body.def);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		components.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		components.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "section-title",
 			children: ["COMPONENTS · ", components.length]
 		}), /* @__PURE__ */ jsx("div", {
@@ -23357,7 +23636,7 @@ function BodyContents({ model, body, sel, onSel, resolve }) {
 				})]
 			}, c.id))
 		})] }),
-		named.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+		named.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "section-title",
 				children: ["BODIES · ", named.length]
@@ -23380,7 +23659,7 @@ function BodyContents({ model, body, sel, onSel, resolve }) {
 				children: "Exploding separates them along the line between their centres."
 			})
 		] }),
-		cad && cad.exports.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		cad && cad.exports.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "section-title",
 			children: ["MANUFACTURING EXPORTS · ", cad.exports.length]
 		}), /* @__PURE__ */ jsx("div", {
@@ -23477,13 +23756,27 @@ function Legend({ title, children, className, compact, ...rest }) {
 		}), children]
 	});
 }
-function LegendItem({ color, label, shape = "line", onSelect, pressed, dimmed, absent, hint, hintShortcut, compact }) {
+function LegendItem({ color, label, shape = "line", onSelect, pressed, dimmed, absent, hint, hintShortcut, compact, meaning }) {
+	const two = !compact && !!meaning;
 	const swatch = /* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
-		className: cx("shrink-0", shape === "dot" ? "size-2 rounded-full" : "h-[3px] w-4 rounded-sm"),
+		className: cx("shrink-0", shape === "dot" ? "size-2 rounded-full" : two ? "h-1 w-[18px] rounded-sm" : "h-[3px] w-4 rounded-sm"),
 		style: shape === "dash" ? { background: `repeating-linear-gradient(90deg, ${color} 0 4px, transparent 4px 7px)` } : { background: color }
 	});
 	const name = typeof label === "string" ? label : void 0;
+	const text = two ? /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate text-[11.5px] leading-[15px] text-fg",
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate text-[10px] leading-[13px] text-fg-muted",
+			children: meaning
+		})]
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 flex-1 truncate",
+		children: label
+	});
 	if (!onSelect) {
 		if (compact) return /* @__PURE__ */ jsx("span", {
 			role: "img",
@@ -23493,8 +23786,8 @@ function LegendItem({ color, label, shape = "line", onSelect, pressed, dimmed, a
 			children: swatch
 		});
 		return /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 text-[9.5px] text-fg-muted",
-			children: [swatch, /* @__PURE__ */ jsx("span", { children: label })]
+			className: cx("flex items-center text-[9.5px] text-fg-muted", two ? "gap-2.5" : "gap-2"),
+			children: [swatch, text]
 		});
 	}
 	return /* @__PURE__ */ jsxs("button", {
@@ -23504,13 +23797,10 @@ function LegendItem({ color, label, shape = "line", onSelect, pressed, dimmed, a
 		"aria-label": compact ? name : void 0,
 		"data-tooltip": compact ? name : hint,
 		"data-tooltip-shortcut": hintShortcut,
-		"data-tooltip-side": compact ? "top" : "right",
+		"data-tooltip-side": compact ? "top" : "left",
 		onClick: (e) => !absent && onSelect(e.shiftKey || e.ctrlKey || e.metaKey),
-		className: cx("uhd-legend-item flex min-h-[18px] items-center rounded-sm border-0 bg-transparent font-ui text-[9.5px] text-fg-muted transition-[opacity,background-color]", compact ? "h-[18px] w-6 justify-center p-0" : "-mx-1.5 -my-0.5 gap-2 px-1.5 py-0.5 text-left", "focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-focus", absent ? "cursor-default opacity-40" : "cursor-pointer hover:bg-hover hover:text-fg", pressed && "bg-accent-tint text-fg outline outline-1 -outline-offset-1 outline-contrast-active", dimmed && !absent && "opacity-55"),
-		children: [swatch, !compact && /* @__PURE__ */ jsx("span", {
-			className: "min-w-0 flex-1 truncate",
-			children: label
-		})]
+		className: cx("uhd-legend-item flex min-h-[18px] items-center rounded-sm border-0 bg-transparent font-ui text-[9.5px] text-fg-muted transition-[opacity,background-color]", compact ? "h-[18px] w-6 justify-center p-0" : two ? "-mx-1.5 gap-2.5 px-1.5 py-1 text-left" : "-mx-1.5 -my-0.5 gap-2 px-1.5 py-0.5 text-left", "focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-focus", absent ? "cursor-default opacity-40" : "cursor-pointer hover:bg-hover hover:text-fg", pressed && "bg-accent-tint text-fg outline outline-1 -outline-offset-1 outline-contrast-active", dimmed && !absent && "opacity-55"),
+		children: [swatch, !compact && text]
 	});
 }
 /** Compact items side by side, `columns` to a row: a legend as narrow as its swatches. */
@@ -23524,22 +23814,49 @@ function LegendSwatches({ columns = 3, children, label }) {
 	});
 }
 /**
-* The room the legend has before the toolbar (px): from its left edge to
-* the toolbar's, less the gap. The toolbar is centred, so its button for the
-* legend moves its left edge by half the button: that half is given back,
-* and the room is the same whether or not the button is in it.
+* A folded legend: a narrow tab at the right edge, a chevron and the
+* colours it explains as dots. A click opens the legend; its label names it.
+*/
+function LegendTab({ dots, className, ...rest }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		...rest,
+		className: cx("uhd-legend-tab group flex w-9 cursor-pointer flex-col items-center gap-3 rounded-l-panel border border-r-0 border-line bg-surface px-0 py-3 text-fg-muted shadow-panel outline outline-1 -outline-offset-1 outline-contrast transition-colors", "hover:text-fg hover:outline-contrast-active focus-visible:outline-focus", className),
+		children: [/* @__PURE__ */ jsx(Icon, {
+			name: "chevron-left",
+			size: 16,
+			strokeWidth: 1.75,
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "flex flex-col items-center gap-1.5",
+			children: dots.map((d) => /* @__PURE__ */ jsx("span", {
+				className: cx("size-1.5 rounded-full transition-opacity", d.dimmed && "opacity-35"),
+				style: { background: d.color }
+			}, d.key))
+		})]
+	});
+}
+/** Below this canvas height (px) the legend folds by itself: open, it would cover much of the drawing. */
+var LEGEND_SHORT = 500;
+/**
+* The room the legend has before the toolbar (px): from the toolbar's right
+* edge to the legend's, less the gap. The toolbar is centred, so its button
+* for the legend moves its right edge by half the button: that half is taken
+* back, and the room is the same whether or not the button is in it.
 */
 function legendRoom(m) {
 	if (!m.toolbar) return Infinity;
-	return m.toolbar.left + (m.slot ?? 0) / 2 - m.left - 8;
+	return m.right - (m.toolbar.right - (m.slot ?? 0) / 2) - 8;
 }
 var overlapsY = (a, b) => a.top < b.bottom && b.top < a.bottom;
 /**
 * The largest form that does not run into the toolbar. A form fits when it is
 * clear of the toolbar's height, or narrower than the room. Moving up to a
-* larger form than `current` takes `LEGEND_HYSTERESIS` more.
+* larger form than `current` takes `LEGEND_HYSTERESIS` more. Folded
+* (`folded`), the tab is the only form: "full" while it fits, else "button".
 */
-function legendStage(m, current = "full") {
+function legendStage(m, current = "full", folded = false) {
 	const room = legendRoom(m);
 	const order = [
 		"full",
@@ -23547,16 +23864,25 @@ function legendStage(m, current = "full") {
 		"button"
 	];
 	const at = order.indexOf(current);
-	const fits = (stage) => {
-		const box = m[stage];
+	const fits = (box, stage) => {
 		if (!m.toolbar || !overlapsY(box, m.toolbar)) return true;
 		const spare = order.indexOf(stage) < at ? 6 : 0;
 		return box.right - box.left + spare <= room;
 	};
-	if (fits("full")) return "full";
-	if (fits("compact")) return "compact";
+	if (folded) return !m.tab || fits(m.tab, "full") ? "full" : "button";
+	if (fits(m.full, "full")) return "full";
+	if (fits(m.compact, "compact")) return "compact";
 	return "button";
 }
+/**
+* Whether the legend shows folded: the user folded it, or the canvas is
+* shorter than `LEGEND_SHORT` and the user has not opened it since it became
+* so (`peek`).
+*/
+function legendFolded(open, canvasHeight, peek) {
+	if (!open) return true;
+	return canvasHeight > 0 && canvasHeight < 500 && !peek;
+}
 //#endregion
 //#region src/viewer/views.tsx
 /**
@@ -23566,7 +23892,7 @@ function legendStage(m, current = "full") {
 * none of them is app chrome.
 */
 /** The diagram of the current level: modules, interfaces, links and harnesses. */
-function DiagramCanvas({ toolbar = true, legend = true, coveredRight, missingHint, className }) {
+function DiagramCanvas({ toolbar = true, legend = true, coveredRight, missingHint, emptyAction, className }) {
 	const c = useViewer();
 	const covered = coveredRight ?? Boolean(c.panel);
 	return /* @__PURE__ */ jsxs("main", {
@@ -23608,16 +23934,38 @@ function DiagramCanvas({ toolbar = true, legend = true, coveredRight, missingHin
 				viewport: c.viewport,
 				onViewport: c.onViewport
 			}, `${c.scenario.id}/${c.levelKey}/${c.viewportsSeq}`),
-			c.drawn.nodes.length === 0 && /* @__PURE__ */ jsxs("div", {
+			levelModules(c.vm.nodes).length === 0 && (emptyAction ? /* @__PURE__ */ jsx("div", {
+				className: cx("canvas-empty", covered && "covered-right"),
+				role: "status",
+				"aria-label": `${c.levelDef.name}: no modules`,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "canvas-empty-add",
+					"data-add-part": "",
+					onClick: emptyAction.onClick,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "canvas-empty-box",
+						"aria-hidden": true,
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "plus",
+							size: 48,
+							strokeWidth: 1.5
+						})
+					}), /* @__PURE__ */ jsx("span", {
+						className: "canvas-empty-label",
+						children: emptyAction.label
+					})]
+				})
+			}) : /* @__PURE__ */ jsxs("div", {
 				className: cx("canvas-empty", covered && "covered-right"),
 				role: "status",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "canvas-empty-title",
 					children: [c.levelDef.name, " has no modules yet"]
 				}), /* @__PURE__ */ jsx("p", { children: "Add child modules to its definition to see them here." })]
-			}),
+			})),
 			toolbar && /* @__PURE__ */ jsx(DiagramToolbar, { coveredRight: covered }),
-			legend && /* @__PURE__ */ jsx(DiagramLegend, {}),
+			legend && /* @__PURE__ */ jsx(DiagramLegend, { coveredRight: covered }),
 			c.pair && /* @__PURE__ */ jsx(PairView, {
 				vm: c.vm,
 				link: c.pair,
@@ -23708,7 +24056,7 @@ function MissingNotice({ hint, className }) {
 				icon: "x",
 				size: "sm",
 				tooltipSide: "bottom",
-				label: "Hide this notice",
+				label: "Hide",
 				onClick: () => setDismissed(key),
 				className: "size-6 shrink-0"
 			})
@@ -23736,11 +24084,11 @@ var CLASSIFICATION_OPTIONS = [
 var DETAIL_OPTIONS = [{
 	id: "bundled",
 	icon: "minus",
-	label: "Basic: one line per link"
+	label: "One line per link"
 }, {
 	id: "conductors",
 	icon: "rows-3",
-	label: "Ribbon: every conductor"
+	label: "Every conductor"
 }];
 /**
 * The pointer's tool: select (a drag on the empty canvas draws a selection
@@ -23782,7 +24130,7 @@ function ViewButtons({ tooltipSide = "top" }) {
 	});
 }
 function ViewButtonsView({ onFit, onZoomIn, onZoomOut, tooltipSide }) {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(IconButton, {
 			icon: "maximize",
 			label: "Fit view",
@@ -23818,7 +24166,7 @@ var DiagramToolbarView = memo(function DiagramToolbarView(p) {
 				tooltipSide: "top"
 			}),
 			/* @__PURE__ */ jsx(ToolbarSeparator, {}),
-			p.controls && /* @__PURE__ */ jsxs(Fragment, { children: [
+			p.controls && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(ToggleGroup, {
 					label: "Classification",
 					tooltipSide: "top",
@@ -23837,7 +24185,7 @@ var DiagramToolbarView = memo(function DiagramToolbarView(p) {
 				/* @__PURE__ */ jsx(IconButton, {
 					icon: "arrow-down-to-line",
 					tooltipSide: "top",
-					label: p.showGrounds ? "Draw grounds as symbols" : "Draw grounds as wires",
+					label: p.showGrounds ? "Grounds as symbols" : "Grounds as wires",
 					pressed: p.showGrounds,
 					onClick: () => p.onGrounds(!p.showGrounds)
 				}),
@@ -23852,7 +24200,7 @@ var DiagramToolbarView = memo(function DiagramToolbarView(p) {
 			/* @__PURE__ */ jsx(ToolbarSeparator, {}),
 			/* @__PURE__ */ jsx(IconButton, {
 				icon: "rotate-ccw",
-				label: "Reset layout of this level",
+				label: "Reset layout",
 				tooltipSide: "top",
 				onClick: p.onReset
 			})
@@ -23887,19 +24235,19 @@ function DiagramToolbar({ coveredRight, className, controls = true, legend }) {
 	});
 }
 var LegendItemsView = memo(function LegendItemsView({ mode, present, isolated, onIsolate, compact }) {
-	const what = mode === "signal" ? "signal type" : mode === "domain" ? "domain" : "state";
-	return /* @__PURE__ */ jsx(Fragment, { children: legendFor(mode, present).map((item) => {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: legendFor(mode, present).map((item) => {
 		const pressed = isolated.has(item.key);
 		const absent = !present.has(item.key) && !pressed;
 		return /* @__PURE__ */ jsx(LegendItem, {
 			color: item.color,
 			label: item.label,
+			meaning: item.meaning,
 			onSelect: (add) => onIsolate(item.key, add),
 			pressed,
 			dimmed: isolated.size > 0 && !pressed,
 			absent,
-			hint: absent ? `Nothing on this level is of this ${what}` : pressed ? isolated.size > 1 ? "Stop isolating this one" : "Show everything again" : `Isolate: fade everything that is not of this ${what}`,
-			hintShortcut: absent ? void 0 : pressed && isolated.size === 1 ? "Esc" : "Shift+click: hold several",
+			hint: absent ? "Not on this level" : pressed ? isolated.size > 1 ? "Release" : "Show all" : "Isolate",
+			hintShortcut: absent ? void 0 : pressed && isolated.size === 1 ? "Esc" : "Shift+click: several",
 			compact
 		}, item.key);
 	}) });
@@ -23908,8 +24256,9 @@ var LegendItemsView = memo(function LegendItemsView({ mode, present, isolated, o
 * The entries of the current classification's legend, as buttons: a click
 * isolates one (its links stay, with the interfaces and modules they touch;
 * the rest of the level fades), a click on it again shows everything, a
-* click on another switches, and Shift, Ctrl or Cmd holds several. For a
-* shell that draws its own legend card.
+* click on another switches, and Shift, Ctrl or Cmd holds several. Each
+* reads as its name and, under it, what it stands for. For a shell that
+* draws its own legend card.
 */
 function DiagramLegendItems({ compact, columns = 3 } = {}) {
 	const c = useViewer();
@@ -23920,7 +24269,10 @@ function DiagramLegendItems({ compact, columns = 3 } = {}) {
 		onIsolate: c.onIsolate,
 		compact
 	});
-	if (!compact) return items;
+	if (!compact) return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-1",
+		children: items
+	});
 	return /* @__PURE__ */ jsx(LegendSwatches, {
 		columns,
 		label: CLASSIFICATIONS.find((x) => x.id === c.mode)?.label,
@@ -23935,66 +24287,127 @@ function IsolationClear({ className }) {
 		icon: "x",
 		size: "sm",
 		tooltipSide: "top",
-		label: "Show everything again",
+		label: "Show all",
 		shortcut: "Esc",
 		onClick: c.clearIsolated,
 		className: cx("size-6", className)
 	});
 }
+/** What a legend that folds gives the content it draws: the way to fold it (`FittedLegend`). */
+var LegendFoldContext = createContext(null);
+/**
+* The legend's fold button, at the right of its header: the legend becomes a
+* tab at the right edge. Nothing where the legend does not fold (the
+* toolbar's popover).
+*/
+function LegendFold({ className }) {
+	const fold = useContext(LegendFoldContext);
+	if (!fold) return null;
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: "chevron-right",
+		size: "sm",
+		tooltipSide: "top",
+		label: "Hide legend",
+		onClick: fold,
+		className: cx("size-6", className)
+	});
+}
 /**
 * What the legend shows in a form: `full` the title and the entries with their
-* labels; `compact` the classification's icon and the swatches alone (each
-* named by its label).
+* names and meanings; `compact` the classification's icon and the swatches
+* alone (each named by its label).
 */
 function DiagramLegendBody({ form }) {
 	const c = useViewer();
 	const title = CLASSIFICATIONS.find((x) => x.id === c.mode)?.label;
 	if (form === "compact") {
 		const icon = CLASSIFICATION_OPTIONS.find((o) => o.id === c.mode)?.icon ?? "layers";
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-h-6 items-center justify-between gap-1",
-			children: [/* @__PURE__ */ jsx(Icon, {
-				name: icon,
-				size: 13,
-				strokeWidth: 1.75,
-				className: "text-fg-muted",
-				"aria-label": title,
-				role: "img"
-			}), /* @__PURE__ */ jsx(IsolationClear, { className: "-my-1 -mr-1.5" })]
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					name: icon,
+					size: 13,
+					strokeWidth: 1.75,
+					className: "text-fg-muted",
+					"aria-label": title,
+					role: "img"
+				}),
+				/* @__PURE__ */ jsx(IsolationClear, { className: "-my-1" }),
+				/* @__PURE__ */ jsx(LegendFold, { className: "-my-1 -mr-1.5" })
+			]
 		}), /* @__PURE__ */ jsx(DiagramLegendItems, {
 			compact: true,
 			columns: 3
 		})] });
 	}
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-		className: "mb-0.5 flex min-h-6 items-center justify-between gap-2",
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "legend-head -mx-3 -mt-1 mb-1 flex min-h-7 items-center justify-between gap-2 border-b border-line-subtle px-3 pb-1",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "font-label text-[10px] tracking-[0.8px] text-fg-muted uppercase",
 			children: title
-		}), /* @__PURE__ */ jsx(IsolationClear, { className: "-my-1 -mr-1.5" })]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "-mr-1.5 flex items-center",
+			children: [/* @__PURE__ */ jsx(IsolationClear, {}), /* @__PURE__ */ jsx(LegendFold, {})]
+		})]
 	}), /* @__PURE__ */ jsx(DiagramLegendItems, {})] });
 }
 /** What the link colours mean in the current classification; a click on an entry isolates it. It gives way to the toolbar as the canvas narrows (`FittedLegend`). */
-function DiagramLegend({ className }) {
+function DiagramLegend({ className, coveredRight }) {
 	return /* @__PURE__ */ jsx(FittedLegend, {
 		label: "Legend",
 		className,
+		coveredRight,
 		render: (form) => /* @__PURE__ */ jsx(DiagramLegendBody, { form })
 	});
 }
 /**
-* A legend card at the canvas's bottom left that stays there and gives way
+* A legend card at the canvas's bottom right that stays there and gives way
 * to the bottom toolbar (ui/legendFit.ts): the full form while it fits beside
 * the toolbar, then the compact one, and at its smallest none, the toolbar
-* then offering it behind a button (`LegendToolbarButton`). It measures the
-* room it has (a `ResizeObserver` on the canvas, the toolbar and both forms)
-* from hidden copies of the two forms, so it never overlaps the toolbar.
-* `render` draws a form; the card is a sibling of the toolbar (`.toolbar`).
+* then offering it behind a button (`LegendToolbarButton`). Folded, it is a
+* tab at the right edge with a dot per colour, which opens it; a canvas
+* shorter than `LEGEND_SHORT` folds it until the user opens it there. It
+* measures the room it has (a `ResizeObserver` on the canvas, the toolbar and
+* every form) from hidden copies of the forms, so it never overlaps the
+* toolbar. `render` draws a form; the card is a sibling of the toolbar
+* (`.toolbar`).
 */
-function FittedLegend({ label, render, className }) {
-	const { legendStage: stage, setLegendStage, panel } = useViewer();
+function FittedLegend({ label, render, className, open: given, onOpenChange, defaultOpen = true, coveredRight = false }) {
+	const { legendStage: stage, setLegendStage, panel, mode, present, isolated } = useViewer();
+	const [own, setOwn] = useState(defaultOpen);
+	const open = given ?? own;
+	const setOpen = (next) => {
+		if (given === void 0) setOwn(next);
+		onOpenChange?.(next);
+	};
+	const [height, setHeight] = useState(0);
+	const [peek, setPeek] = useState(false);
+	const short = height > 0 && height < 500;
+	useEffect(() => {
+		if (!short) setPeek(false);
+	}, [short]);
+	const folded = legendFolded(open, height, peek);
+	const unfold = () => {
+		if (!open) setOpen(true);
+		if (short) setPeek(true);
+	};
+	const fold = useCallback(() => {
+		if (open && short && peek) setPeek(false);
+		else {
+			if (given === void 0) setOwn(false);
+			onOpenChange?.(false);
+		}
+	}, [
+		open,
+		short,
+		peek,
+		given,
+		onOpenChange
+	]);
 	const full = useRef(null);
 	const compact = useRef(null);
+	const tab = useRef(null);
 	const current = useRef(stage);
 	current.current = stage;
 	const measure = useCallback(() => {
@@ -24002,27 +24415,31 @@ function FittedLegend({ label, render, className }) {
 		const k = compact.current;
 		const host = f?.parentElement;
 		if (!f || !k || !host) return;
+		setHeight(host.clientHeight);
 		const toolbar = host.querySelector(":scope > .toolbar");
 		const box = toolbar && toolbar.getClientRects().length ? toolbar.getBoundingClientRect() : null;
 		const slotEl = toolbar?.querySelector("[data-legend-slot]");
 		const slot = slotEl ? slotEl.getBoundingClientRect().width + (parseFloat(getComputedStyle(toolbar).columnGap) || 0) : 0;
 		const fr = f.getBoundingClientRect();
+		const tr = tab.current?.getBoundingClientRect();
 		const next = legendStage({
-			left: fr.left,
+			right: fr.right,
 			full: fr,
 			compact: k.getBoundingClientRect(),
+			...tr ? { tab: tr } : {},
 			toolbar: box,
 			slot
-		}, current.current);
+		}, current.current, folded);
 		if (next !== current.current) {
 			current.current = next;
 			setLegendStage(next);
 		}
-	}, [setLegendStage]);
+	}, [setLegendStage, folded]);
 	useLayoutEffect(measure, [
 		measure,
 		panel,
-		stage
+		stage,
+		coveredRight
 	]);
 	useEffect(() => {
 		const host = full.current?.parentElement;
@@ -24031,36 +24448,66 @@ function FittedLegend({ label, render, className }) {
 		ro.observe(host);
 		if (full.current) ro.observe(full.current);
 		if (compact.current) ro.observe(compact.current);
+		if (tab.current) ro.observe(tab.current);
 		const toolbar = host.querySelector(":scope > .toolbar");
 		if (toolbar) ro.observe(toolbar);
 		return () => ro.disconnect();
 	}, [measure]);
 	useEffect(() => () => setLegendStage("full"), [setLegendStage]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		stage !== "button" && /* @__PURE__ */ jsx(Legend, {
-			role: "group",
-			"aria-label": label,
-			compact: stage === "compact",
-			className: cx("legend", className),
-			"data-legend-stage": stage,
-			children: render(stage)
-		}),
-		/* @__PURE__ */ jsx(Legend, {
-			ref: full,
-			"aria-hidden": true,
-			inert: true,
-			className: cx("legend-measure", className),
-			children: render("full")
-		}),
-		/* @__PURE__ */ jsx(Legend, {
-			ref: compact,
-			"aria-hidden": true,
-			inert: true,
-			compact: true,
-			className: cx("legend-measure", className),
-			children: render("compact")
-		})
-	] });
+	const entries = legendFor(mode, present);
+	const shown = entries.filter((e) => present.has(e.key) || isolated.has(e.key));
+	const dots = (shown.length ? shown : entries).slice(0, 8).map((e) => ({
+		key: e.key,
+		color: e.color,
+		dimmed: isolated.size > 0 && !isolated.has(e.key)
+	}));
+	const side = cx(coveredRight && "covered-right", className);
+	return /* @__PURE__ */ jsxs(LegendFoldContext.Provider, {
+		value: fold,
+		children: [
+			stage !== "button" && (folded ? /* @__PURE__ */ jsx(LegendTab, {
+				ref: tab,
+				dots,
+				"aria-label": label,
+				"aria-expanded": false,
+				"data-tooltip": label,
+				"data-tooltip-side": "left",
+				"data-legend-tab": "",
+				onClick: unfold,
+				className: cx("legend-tab", side)
+			}) : /* @__PURE__ */ jsx(Legend, {
+				role: "group",
+				"aria-label": label,
+				compact: stage === "compact",
+				className: cx("legend", side),
+				"data-legend-stage": stage,
+				children: render(stage)
+			})),
+			/* @__PURE__ */ jsx(Legend, {
+				ref: full,
+				"aria-hidden": true,
+				inert: true,
+				className: cx("legend-measure", side),
+				children: render("full")
+			}),
+			/* @__PURE__ */ jsx(Legend, {
+				ref: compact,
+				"aria-hidden": true,
+				inert: true,
+				compact: true,
+				className: cx("legend-measure", side),
+				children: render("compact")
+			}),
+			folded && stage === "button" && /* @__PURE__ */ jsx(LegendTab, {
+				ref: tab,
+				dots,
+				"aria-hidden": true,
+				inert: true,
+				tabIndex: -1,
+				className: cx("legend-tab legend-measure", side)
+			})
+		]
+	});
 }
 /**
 * The legend's button in the toolbar, shown only when the legend has no room
@@ -24225,7 +24672,9 @@ function ViewerNodeMenu() {
 * assembly): a GLB by URL, or a scene a host built (a STEP it converted), in
 * the 3D view's own scene, lights, materials and theme colours, with a
 * floating icon toolbar (fit, standard views, wireframe, x-ray, grid, turn)
-* and a card with its size. Nothing here is specific to a host.
+* and, on request from the toolbar, a card with its name and size (PB-1074:
+* shown all the time it covered the model, and a Select All lit it up). Nothing
+* here is specific to a host.
 */
 var VIEWS = [
 	{
@@ -24291,7 +24740,7 @@ function stats(root) {
 	};
 }
 var mm = (n) => n >= 100 ? n.toFixed(0) : n >= 10 ? n.toFixed(1) : n.toFixed(2);
-function ModelView({ url, object, name, detail, error, onReady, actions, className }) {
+function ModelView({ url, object, name, detail, error, onReady, actions, infoOpen = false, className }) {
 	const host = useRef(null);
 	const handle = useRef(null);
 	const model = useRef(null);
@@ -24301,6 +24750,7 @@ function ModelView({ url, object, name, detail, error, onReady, actions, classNa
 	const [grid, setGrid] = useState(true);
 	const [spin, setSpin] = useState(false);
 	const [view, setView] = useState("iso");
+	const [showInfo, setShowInfo] = useState(infoOpen);
 	useEffect(() => {
 		if (!host.current) return;
 		let h;
@@ -24458,14 +24908,16 @@ function ModelView({ url, object, name, detail, error, onReady, actions, classNa
 	}, [spin]);
 	const info = state.info;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("uhd-model-view relative size-full min-h-[240px] min-w-[280px] overflow-hidden bg-canvas", className),
+		className: cx("uhd-model-view relative size-full min-h-[240px] min-w-[280px] overflow-hidden bg-canvas select-none", className),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				ref: host,
 				className: "absolute inset-0 [&>canvas]:block [&>canvas]:size-full"
 			}),
-			(name || info) && /* @__PURE__ */ jsxs("div", {
-				className: "absolute top-[calc(var(--uhd-inset-top,0px)+12px)] left-3 max-w-[min(360px,calc(100%-24px))] rounded-panel border border-line bg-surface px-3 py-2 shadow-panel outline outline-1 -outline-offset-1 outline-contrast",
+			showInfo && (name || info) && /* @__PURE__ */ jsxs("div", {
+				role: "note",
+				"aria-label": "Model info",
+				className: "pointer-events-none absolute top-[calc(var(--uhd-inset-top,0px)+12px)] left-3 max-w-[min(360px,calc(100%-24px))] rounded-panel border border-line bg-surface px-3 py-2 shadow-panel outline outline-1 -outline-offset-1 outline-contrast",
 				children: [
 					name && /* @__PURE__ */ jsx("div", {
 						className: "truncate font-label text-[12px] tracking-[0.06em] text-fg uppercase",
@@ -24554,7 +25006,7 @@ function ModelView({ url, object, name, detail, error, onReady, actions, classNa
 						}),
 						/* @__PURE__ */ jsx(IconButton, {
 							icon: "scan-eye",
-							label: "X-ray: see through the model",
+							label: "X-ray",
 							tooltipSide: "top",
 							pressed: xray,
 							onClick: () => setXray(!xray)
@@ -24573,6 +25025,13 @@ function ModelView({ url, object, name, detail, error, onReady, actions, classNa
 							pressed: spin,
 							onClick: () => setSpin(!spin)
 						}),
+						(name || info) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ToolbarSeparator, {}), /* @__PURE__ */ jsx(IconButton, {
+							icon: "info",
+							label: showInfo ? "Hide the model info" : "Model info: name and size",
+							tooltipSide: "top",
+							pressed: showInfo,
+							onClick: () => setShowInfo(!showInfo)
+						})] }),
 						actions && /* @__PURE__ */ jsx(ToolbarSeparator, {}),
 						actions
 					]
@@ -24902,25 +25361,30 @@ function panelState(v, fallbackOpen = true) {
 	};
 }
 var clampWidth = (w, room = Infinity) => Math.round(Math.max(HIERARCHY_WIDTH.min, Math.min(HIERARCHY_WIDTH.max, room, w)));
-/** The row that holds the wiring and hardware (harnesses, cables, fastener stacks): not a module of the system. */
+/** The row "Harnesses & links" that holds the harnesses, cables and fastener stacks: not a module of the system. */
 var WIRING_PATH = "#wiring";
 var WIRING_KINDS = /* @__PURE__ */ new Set(["harness", "fasteners"]);
 /**
-* The tree as the panel shows it: the system's structure first, and its
-* wiring and hardware (every harness and fastener stack, wherever it sits)
-* folded into one group row at the bottom, `WIRING_PATH`. Without any, the
-* tree as it is.
+* The tree as the panel shows it: the system's structure first, and the
+* harnesses and links (harnesses, cables and fastener stacks) folded into one
+* group row at the bottom, `WIRING_PATH`. With `level` (the instance path of
+* the level on screen, "" for the root), the group holds only that level's own
+* harnesses, not those of the modules inside it: they show once that module is
+* the level. Without `level`, every harness, wherever it sits, each with the
+* module it belongs to. Harnesses never show in the structure. Without any for
+* the group, the structure alone.
 */
-function groupWiring(nodes) {
+function groupWiring(nodes, level) {
 	const wiring = [];
 	const strip = (n) => {
 		if (!n.children.some((c) => WIRING_KINDS.has(c.kind) || c.children.length)) return n;
 		const kept = [];
-		for (const c of n.children) if (WIRING_KINDS.has(c.kind)) wiring.push({
+		for (const c of n.children) if (!WIRING_KINDS.has(c.kind)) kept.push(strip(c));
+		else if (level === void 0) wiring.push({
 			...c,
 			where: n.label
 		});
-		else kept.push(strip(c));
+		else if (n.path === level) wiring.push(c);
 		return {
 			...n,
 			children: kept,
@@ -24933,7 +25397,7 @@ function groupWiring(nodes) {
 	for (const w of wiring) worst = worse(worst, w.worst);
 	const group = {
 		path: WIRING_PATH,
-		label: "Wiring & hardware",
+		label: "Harnesses & links",
 		defId: "",
 		kind: "group",
 		icon: "cable",
@@ -24974,21 +25438,28 @@ function markLegend(nodes) {
 //#endregion
 //#region src/viewer/hierarchy.tsx
 /**
-* The hierarchy panel (PB-1042): the module tree of the viewer's system,
-* docked at the left of the view, beside the canvas. It belongs to one viewer
-* (one tab) and follows it: a click on a row selects the module on the level
-* that holds it, a double-click (or Enter on the selected row) drills into it,
-* a selection on the canvas opens and highlights its row, and the level the
-* diagram shows is marked. It folds to a thin rail, is resized by its edge,
-* filters as you type, and is a tree to the keyboard and to screen readers.
+* The hierarchy panel (PB-1042): the module tree of the viewer's system, a
+* floating card at the left of the view, beside the canvas. It belongs to one
+* viewer (one tab) and follows it: a click on a row selects the module on the
+* level that holds it, a double-click (or Enter on the selected row) drills
+* into it, a selection on the canvas opens and highlights its row, and the
+* level the diagram shows is marked. Its own button folds it away, to a
+* small icon-only button floating at the top left of the view that opens it
+* again (PB-1070); it is resized by its edge, filters as you type, and is a
+* tree to the keyboard and to screen readers.
 *
 * Its look is the viewer's tokens only (a floating card: radius, border,
 * shadow, faces of the theme), so a host's theme decides it. What a host keeps
 * per tab (open, width, open rows) comes in as `state` and goes out through
 * `onStateChange`.
 */
-/** The folded panel's width. */
-var RAIL_WIDTH = 36;
+/** The row of the selection on the diagram: the module selected, or the harness a selected line runs through. */
+function selectedRow(drill, vm, selection) {
+	const harness = selectedHarness(vm, selection);
+	return harness !== void 0 ? fullId(drill, harness) : selectedPath(drill, selection);
+}
+/** What the folded panel keeps of the view's width: nothing (its button to open it again floats over the view). */
+var RAIL_WIDTH = 0;
 var ROW_INDENT = 12;
 var SEVERITY_TEXT = {
 	error: "text-error",
@@ -24996,16 +25467,28 @@ var SEVERITY_TEXT = {
 	info: "text-info"
 };
 /**
-* The panel's look, in one place (PB-1042; the Pencil iterations, 2026-10-21):
-* docked flush at the left of the canvas, below the floating header, with a
-* border at its edge; rows highlighted in the theme's selection colour. Only
-* the viewer's tokens, so a host's theme decides the colours (orange only
-* under the Protoboard theme). Swap these to restyle it.
+* The panel's look, in one place (PB-1042, PB-1070): a floating card like the
+* host's header, 4 px from the view's edges and below the header, with the
+* panel radius, a border all round and the panel shadow; rows highlighted in
+* the theme's selection colour. Only the viewer's tokens, so a host's theme
+* decides the colours (orange only under the Protoboard theme). Swap these to
+* restyle it.
 */
 var HIERARCHY_LOOK = {
-	dock: "uhd-hierarchy-dock absolute inset-y-0 left-0 z-30 flex flex-col pt-[var(--uhd-inset-top,0px)]",
-	panel: "relative flex min-h-0 flex-1 flex-col overflow-hidden border-t border-r border-line bg-surface font-ui text-fg",
-	rail: "flex min-h-0 flex-1 flex-col items-center gap-1 border-t border-r border-line bg-surface py-1",
+	dock: "uhd-hierarchy-dock absolute bottom-1 left-1 z-30 flex flex-col top-[calc(var(--uhd-inset-top,0px)+4px)] transition-[transform,opacity] duration-200 ease-out motion-reduce:transition-none",
+	/** The dock while it opens or folds (and while folded): slid out to the left, faded. */
+	dockAway: "pointer-events-none -translate-x-[calc(100%+8px)] opacity-0",
+	panel: "relative flex min-h-0 flex-1 flex-col overflow-hidden rounded-panel border border-line bg-surface font-ui text-fg shadow-panel outline outline-1 -outline-offset-1 outline-contrast",
+	/**
+	* The folded panel: the icon alone, floating over the canvas at the card's
+	* corner (no border, face or shadow of its own), that opens it again. On
+	* hover it takes a soft rounded fill with a faint glow, in the theme's
+	* toolbar hover colour (high contrast: a dashed outline instead). It fades
+	* in as the card leaves and out as it comes.
+	*/
+	folded: "uhd-hierarchy-reopen absolute left-1 z-30 top-[calc(var(--uhd-inset-top,0px)+4px)] grid size-8 cursor-pointer place-items-center rounded-md border-0 bg-transparent p-0 text-fg-muted transition-[opacity,background-color,color,box-shadow] duration-200 ease-out motion-reduce:transition-none hover:bg-hover hover:text-fg hover:shadow-[0_0_10px_1px_var(--uhd-hover)] hover:outline hover:outline-1 hover:outline-dashed hover:-outline-offset-1 hover:outline-contrast-active focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-focus",
+	/** The button while it fades in or out (and while the panel is open). */
+	foldedAway: "pointer-events-none opacity-0",
 	header: "flex h-8 shrink-0 items-center gap-0.5 pr-1 pl-3",
 	title: "min-w-0 flex-1 truncate font-label text-[11px] tracking-[0.08em] text-fg-muted uppercase",
 	filterBox: "mx-2 mb-1.5 flex h-7 shrink-0 items-center gap-1.5 rounded-md border border-line bg-sunken px-2 focus-within:outline focus-within:outline-1 focus-within:-outline-offset-1 focus-within:outline-focus",
@@ -25070,7 +25553,8 @@ function ViewerHierarchy({ state: given, onStateChange, onOpenChange, command, r
 		c.diagnostics,
 		c.hostDiagnostics
 	]);
-	const shown = useMemo(() => groupWiring(tree), [tree]);
+	const level = c.drill.join("/");
+	const shown = useMemo(() => groupWiring(tree, level), [tree, level]);
 	const index = useMemo(() => hierarchyIndex(shown), [shown]);
 	const wiring = useMemo(() => new Set(index.get("#wiring")?.children.map((n) => n.path) ?? []), [index]);
 	const legend = useMemo(() => markLegend(tree), [tree]);
@@ -25085,8 +25569,7 @@ function ViewerHierarchy({ state: given, onStateChange, onOpenChange, command, r
 		shut
 	]);
 	const rows = useMemo(() => visibleRows(filtered.nodes, open), [filtered, open]);
-	const level = c.drill.join("/");
-	const selected = c.view === "3d" ? c.cadSelection?.kind === "node" && !c.cadSelection.id.includes("#") ? c.cadSelection.id : void 0 : selectedPath(c.drill, c.selection);
+	const selected = c.view === "3d" ? c.cadSelection?.kind === "node" && !c.cadSelection.id.includes("#") ? c.cadSelection.id : void 0 : selectedRow(c.drill, c.vm, c.selection);
 	const together = useMemo(() => new Set(c.view === "3d" ? [] : c.group.map((g) => fullId(c.drill, g))), [
 		c.view,
 		c.group,
@@ -25226,38 +25709,48 @@ function ViewerHierarchy({ state: given, onStateChange, onOpenChange, command, r
 	if (menuNode && !menuNode.group) {
 		const node = menuNode;
 		menuItems.push({
-			label: "SELECT",
+			label: "Select",
+			icon: "mouse-pointer-2",
 			run: () => select(node.path)
 		});
 		if (node.drillable) menuItems.push({
-			label: "OPEN AS CANVAS",
+			label: "Open as canvas",
+			icon: "layers",
 			run: () => drill(node)
 		});
 		if (node.drillable && node.path && c.hostActions.openModule) menuItems.push({
-			label: "OPEN IN NEW TAB",
+			label: "Open in new tab",
+			icon: "square-arrow-out-up-right",
 			run: () => c.hostActions.openModule(node.path)
 		});
 		if (c.hostActions.openSource) menuItems.push({
-			label: "OPEN SOURCE",
+			label: "Open source",
+			icon: "file-code",
 			run: () => c.hostActions.openSource(node.defId, node.path || void 0)
 		});
 		if (node.path && c.hostActions.inspect) menuItems.push({
-			label: "INSPECT",
+			label: "Inspect",
+			icon: "scan-search",
 			run: () => c.hostActions.inspect(node.path, node.defId)
 		});
 		if (node.children.length) {
 			const below = [...hierarchyIndex([node]).values()].filter((n) => n.children.length).map((n) => n.path);
 			const allOpen = below.every((p) => expanded.has(p));
 			menuItems.push(allOpen ? {
-				label: "COLLAPSE ALL BELOW",
+				label: "Collapse all below",
+				icon: "chevrons-down-up",
+				separator: true,
 				run: () => setExpanded(new Set([...expanded].filter((p) => !below.includes(p))))
 			} : {
-				label: "EXPAND ALL BELOW",
+				label: "Expand all below",
+				icon: "chevrons-up-down",
+				separator: true,
 				run: () => setExpanded(/* @__PURE__ */ new Set([...expanded, ...below]))
 			});
 		}
 		if (typeof navigator !== "undefined" && navigator.clipboard) menuItems.push({
-			label: "COPY PATH",
+			label: "Copy path",
+			icon: "copy",
 			run: () => void navigator.clipboard.writeText(node.path || node.defId).catch(() => void 0)
 		});
 	}
@@ -25299,13 +25792,45 @@ function ViewerHierarchy({ state: given, onStateChange, onOpenChange, command, r
 		if (wasWide.current || kept.open) autoFolded.current = autoFolded.current && !kept.open;
 	}, [kept.open]);
 	const shownWidth = clampWidth(kept.width, Math.max(HIERARCHY_WIDTH.min, viewWidth * .6));
-	const docked = kept.open ? shownWidth : 36;
+	const motion = useFold(kept.open);
+	const reopen = useFold(!kept.open);
+	const foldRef = useRef(null);
+	const reopenRef = useRef(null);
+	const cardRef = useRef(null);
+	const wasOpenForFocus = useRef(kept.open);
+	const focusFrom = useRef(null);
+	if (wasOpenForFocus.current !== kept.open && typeof document !== "undefined") {
+		const active = document.activeElement;
+		focusFrom.current = !active ? null : cardRef.current?.contains(active) ? "card" : active === reopenRef.current ? "reopen" : null;
+	}
+	useLayoutEffect(() => {
+		if (wasOpenForFocus.current === kept.open) return;
+		wasOpenForFocus.current = kept.open;
+		const from = focusFrom.current;
+		focusFrom.current = null;
+		if (!kept.open && from === "card") reopenRef.current?.focus();
+		else if (kept.open && from === "reopen") foldRef.current?.focus();
+	}, [kept.open]);
+	const docked = kept.open ? 4 + shownWidth + 4 : 0;
 	useLayoutEffect(() => {
 		const parent = dock.current?.parentElement;
 		if (!parent) return;
 		parent.style.setProperty("--uhd-dock-left", `${docked}px`);
 		return () => void parent.style.removeProperty("--uhd-dock-left");
 	}, [docked]);
+	const wasOpen = useRef(kept.open);
+	useLayoutEffect(() => {
+		if (wasOpen.current === kept.open) return;
+		wasOpen.current = kept.open;
+		const parent = dock.current?.parentElement;
+		if (!parent) return;
+		parent.classList.add("uhd-dock-moving");
+		const t = setTimeout(() => parent.classList.remove("uhd-dock-moving"), 240);
+		return () => {
+			clearTimeout(t);
+			parent.classList.remove("uhd-dock-moving");
+		};
+	}, [kept.open]);
 	const room = () => Math.max(HIERARCHY_WIDTH.min, (dock.current?.parentElement?.clientWidth ?? window.innerWidth) * .6);
 	const onResizeStart = (e) => {
 		if (e.button !== 0) return;
@@ -25337,185 +25862,216 @@ function ViewerHierarchy({ state: given, onStateChange, onOpenChange, command, r
 	const count = hierarchyIndex(tree).size;
 	const rootLabel = tree[0]?.label ?? "System";
 	const L = HIERARCHY_LOOK;
-	if (!kept.open) return /* @__PURE__ */ jsx("div", {
-		ref: dock,
-		className: cx(L.dock, className),
-		style: { width: 36 },
-		"data-hierarchy": "folded",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: L.rail,
-			children: [/* @__PURE__ */ jsx(IconButton, {
-				icon: "panel-left-open",
-				size: "sm",
-				label: "Show the hierarchy",
-				tooltipSide: "right",
-				"aria-expanded": false,
-				"aria-controls": "uhd-hierarchy",
-				onClick: () => setKept({ open: true })
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => setKept({ open: true }),
-				className: "mt-1 cursor-pointer border-0 bg-transparent p-0 font-label text-[10px] tracking-[0.12em] text-fg-muted uppercase [writing-mode:vertical-rl] hover:text-fg",
-				tabIndex: -1,
-				"aria-hidden": true,
-				children: "Hierarchy"
-			})]
-		})
-	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref: dock,
-		className: cx(L.dock, className),
-		style: { width: shownWidth },
-		"data-hierarchy": "open",
-		children: [
-			/* @__PURE__ */ jsxs("section", {
-				id: "uhd-hierarchy",
-				"aria-label": "Hierarchy",
-				className: L.panel,
-				children: [
-					/* @__PURE__ */ jsxs("header", {
-						className: L.header,
-						children: [
-							/* @__PURE__ */ jsxs("span", {
-								className: L.title,
-								children: ["Hierarchy", /* @__PURE__ */ jsxs("span", {
-									className: "text-fg-faint",
-									children: [" · ", count]
-								})]
-							}),
-							/* @__PURE__ */ jsx(IconButton, {
-								icon: "list-filter",
-								size: "sm",
-								label: "Filter modules",
-								pressed: Boolean(filter),
-								onClick: () => filterRef.current?.focus()
-							}),
-							/* @__PURE__ */ jsx(IconButton, {
-								icon: "chevrons-down-up",
-								size: "sm",
-								label: "Collapse all",
-								onClick: () => setExpanded(/* @__PURE__ */ new Set([""]))
-							}),
-							/* @__PURE__ */ jsx(IconButton, {
-								icon: "panel-left-close",
-								size: "sm",
-								label: "Fold the hierarchy",
-								"aria-expanded": true,
-								"aria-controls": "uhd-hierarchy",
-								onClick: () => setKept({ open: false })
-							})
-						]
-					}),
-					/* @__PURE__ */ jsxs("label", {
-						className: L.filterBox,
-						children: [
-							/* @__PURE__ */ jsx(Icon, {
-								name: "search",
-								size: 12,
-								strokeWidth: 1.75,
-								className: "shrink-0 text-fg-faint",
-								"aria-hidden": true
-							}),
-							/* @__PURE__ */ jsx("input", {
-								ref: filterRef,
-								type: "text",
-								value: filter,
-								onChange: (e) => setFilter(e.target.value),
-								onKeyDown: onFilterKey,
-								placeholder: "Filter modules",
-								"aria-label": "Filter the hierarchy",
-								"aria-controls": "uhd-hierarchy-tree",
-								spellCheck: false,
-								className: "min-w-0 flex-1 border-0 bg-transparent p-0 font-ui text-[12px] text-fg outline-none placeholder:text-fg-faint"
-							}),
-							filter && /* @__PURE__ */ jsx("button", {
-								type: "button",
-								"aria-label": "Clear the filter",
-								"data-tooltip": "Clear the filter",
-								onClick: () => (setFilter(""), filterRef.current?.focus()),
-								className: "grid size-5 cursor-pointer place-items-center rounded border-0 bg-transparent p-0 text-fg-muted hover:bg-hover hover:text-fg",
-								children: /* @__PURE__ */ jsx(Icon, {
-									name: "x",
+		className: "contents",
+		children: [reopen.mounted && /* @__PURE__ */ jsx("button", {
+			ref: reopenRef,
+			type: "button",
+			"aria-label": "Show hierarchy",
+			"aria-expanded": false,
+			"aria-controls": "uhd-hierarchy",
+			"data-tooltip": "Show hierarchy",
+			"data-tooltip-side": "right",
+			"data-hierarchy-reopen": "",
+			inert: kept.open || void 0,
+			onClick: () => setKept({ open: true }),
+			className: cx(L.folded, !reopen.shown && L.foldedAway, className),
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "panel-left-open",
+				size: 16,
+				strokeWidth: 1.75,
+				"aria-hidden": true
+			})
+		}), motion.mounted && /* @__PURE__ */ jsxs("div", {
+			ref: cardRef,
+			className: cx(L.dock, !motion.shown && L.dockAway, className),
+			style: { width: shownWidth },
+			"data-hierarchy": kept.open ? "open" : "folded",
+			inert: !kept.open || void 0,
+			"aria-hidden": !kept.open || void 0,
+			children: [
+				/* @__PURE__ */ jsxs("section", {
+					id: "uhd-hierarchy",
+					"aria-label": "Hierarchy",
+					className: L.panel,
+					children: [
+						/* @__PURE__ */ jsxs("header", {
+							className: L.header,
+							children: [
+								/* @__PURE__ */ jsxs("span", {
+									className: L.title,
+									children: ["Hierarchy", /* @__PURE__ */ jsxs("span", {
+										className: "text-fg-faint",
+										children: [" · ", count]
+									})]
+								}),
+								/* @__PURE__ */ jsx(IconButton, {
+									icon: "list-filter",
+									size: "sm",
+									label: "Filter modules",
+									pressed: Boolean(filter),
+									onClick: () => filterRef.current?.focus()
+								}),
+								/* @__PURE__ */ jsx(IconButton, {
+									icon: "chevrons-down-up",
+									size: "sm",
+									label: "Collapse all",
+									onClick: () => setExpanded(/* @__PURE__ */ new Set([""]))
+								}),
+								/* @__PURE__ */ jsx(IconButton, {
+									ref: foldRef,
+									icon: "panel-left-close",
+									size: "sm",
+									label: "Hide hierarchy",
+									"aria-expanded": true,
+									"aria-controls": "uhd-hierarchy",
+									onClick: () => setKept({ open: false })
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: L.filterBox,
+							children: [
+								/* @__PURE__ */ jsx(Icon, {
+									name: "search",
 									size: 12,
+									strokeWidth: 1.75,
+									className: "shrink-0 text-fg-faint",
 									"aria-hidden": true
+								}),
+								/* @__PURE__ */ jsx("input", {
+									ref: filterRef,
+									type: "text",
+									value: filter,
+									onChange: (e) => setFilter(e.target.value),
+									onKeyDown: onFilterKey,
+									placeholder: "Filter modules",
+									"aria-label": "Filter the hierarchy",
+									"aria-controls": "uhd-hierarchy-tree",
+									spellCheck: false,
+									className: "min-w-0 flex-1 border-0 bg-transparent p-0 font-ui text-[12px] text-fg outline-none placeholder:text-fg-faint"
+								}),
+								filter && /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": "Clear the filter",
+									"data-tooltip": "Clear the filter",
+									onClick: () => (setFilter(""), filterRef.current?.focus()),
+									className: "grid size-5 cursor-pointer place-items-center rounded border-0 bg-transparent p-0 text-fg-muted hover:bg-hover hover:text-fg",
+									children: /* @__PURE__ */ jsx(Icon, {
+										name: "x",
+										size: 12,
+										"aria-hidden": true
+									})
 								})
+							]
+						}),
+						/* @__PURE__ */ jsx(ScrollArea, {
+							className: "min-h-0 flex-1",
+							axis: "vertical",
+							children: /* @__PURE__ */ jsxs("div", {
+								ref: treeRef,
+								id: "uhd-hierarchy-tree",
+								role: "tree",
+								"aria-label": `Hierarchy of ${rootLabel}`,
+								onKeyDown: onTreeKey,
+								className: "pb-1",
+								children: [rows.map((r) => /* @__PURE__ */ jsx(Row, {
+									row: r,
+									focus: focus === r.node.path,
+									selected: selected === r.node.path || together.has(r.node.path),
+									current: level === r.node.path,
+									match: filtered.matches.has(r.node.path),
+									dim: filtered.matches.size > 0 && !filtered.matches.has(r.node.path) && !r.node.group,
+									attributes: r.node.group ? void 0 : rowAttributes?.(r.node),
+									onSelect: select,
+									onDrill: drill,
+									onToggle: toggle,
+									onContext: onRowContext
+								}, r.node.path)), !rows.length && /* @__PURE__ */ jsxs("p", {
+									role: "status",
+									className: "m-0 px-3 py-2 text-[12px] text-fg-muted",
+									children: [
+										"Nothing matches “",
+										filter,
+										"”."
+									]
+								})]
 							})
-						]
-					}),
-					/* @__PURE__ */ jsx(ScrollArea, {
-						className: "min-h-0 flex-1",
-						axis: "vertical",
-						children: /* @__PURE__ */ jsxs("div", {
-							ref: treeRef,
-							id: "uhd-hierarchy-tree",
-							role: "tree",
-							"aria-label": `Hierarchy of ${rootLabel}`,
-							onKeyDown: onTreeKey,
-							className: "pb-1",
-							children: [rows.map((r) => /* @__PURE__ */ jsx(Row, {
-								row: r,
-								focus: focus === r.node.path,
-								selected: selected === r.node.path || together.has(r.node.path),
-								current: level === r.node.path,
-								match: filtered.matches.has(r.node.path),
-								dim: filtered.matches.size > 0 && !filtered.matches.has(r.node.path) && !r.node.group,
-								attributes: r.node.group ? void 0 : rowAttributes?.(r.node),
-								onSelect: select,
-								onDrill: drill,
-								onToggle: toggle,
-								onContext: onRowContext
-							}, r.node.path)), !rows.length && /* @__PURE__ */ jsxs("p", {
-								role: "status",
-								className: "m-0 px-3 py-2 text-[12px] text-fg-muted",
-								children: [
-									"Nothing matches “",
-									filter,
-									"”."
-								]
-							})]
+						}),
+						legend.length > 0 && /* @__PURE__ */ jsx("footer", {
+							className: L.legend,
+							"aria-label": "Part status",
+							children: legend.map((l) => /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-1.5",
+								children: [/* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									className: "uhd-tree-mark",
+									"data-tone": l.tone
+								}), l.label]
+							}, l.tone))
 						})
-					}),
-					legend.length > 0 && /* @__PURE__ */ jsx("footer", {
-						className: L.legend,
-						"aria-label": "Part status",
-						children: legend.map((l) => /* @__PURE__ */ jsxs("span", {
-							className: "flex items-center gap-1.5",
-							children: [/* @__PURE__ */ jsx("span", {
-								"aria-hidden": true,
-								className: "uhd-tree-mark",
-								"data-tone": l.tone
-							}), l.label]
-						}, l.tone))
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					role: "separator",
+					"aria-orientation": "vertical",
+					"aria-label": "Resize the hierarchy",
+					"aria-valuemin": HIERARCHY_WIDTH.min,
+					"aria-valuemax": HIERARCHY_WIDTH.max,
+					"aria-valuenow": shownWidth,
+					"aria-controls": "uhd-hierarchy",
+					tabIndex: 0,
+					onPointerDown: onResizeStart,
+					onKeyDown: onResizeKey,
+					onDoubleClick: () => setKept({ width: HIERARCHY_WIDTH.default }),
+					className: "group absolute inset-y-2 -right-1 z-10 w-2 cursor-col-resize touch-none focus-visible:outline-none",
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "absolute inset-y-0 left-[3px] w-0.5 bg-transparent transition-colors group-hover:bg-focus group-focus-visible:bg-focus group-active:bg-focus"
 					})
-				]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				role: "separator",
-				"aria-orientation": "vertical",
-				"aria-label": "Resize the hierarchy",
-				"aria-valuemin": HIERARCHY_WIDTH.min,
-				"aria-valuemax": HIERARCHY_WIDTH.max,
-				"aria-valuenow": shownWidth,
-				"aria-controls": "uhd-hierarchy",
-				tabIndex: 0,
-				onPointerDown: onResizeStart,
-				onKeyDown: onResizeKey,
-				onDoubleClick: () => setKept({ width: HIERARCHY_WIDTH.default }),
-				className: "group absolute top-[var(--uhd-inset-top,0px)] -right-1 bottom-0 z-10 w-2 cursor-col-resize touch-none focus-visible:outline-none",
-				children: /* @__PURE__ */ jsx("span", {
-					"aria-hidden": true,
-					className: "absolute inset-y-0 left-[3px] w-0.5 bg-transparent transition-colors group-hover:bg-focus group-focus-visible:bg-focus group-active:bg-focus"
+				}),
+				menuNode && ownMenu && /* @__PURE__ */ jsx(NodeMenu, {
+					x: menu.x,
+					y: menu.y,
+					items: menuItems,
+					onClose: closeMenu
 				})
-			}),
-			menuNode && ownMenu && /* @__PURE__ */ jsx(NodeMenu, {
-				x: menu.x,
-				y: menu.y,
-				items: menuItems,
-				onClose: closeMenu
-			})
-		]
+			]
+		})]
 	});
 }
+/**
+* The way in and out of the card (and of the button that opens it): mounted
+* while open and while it leaves, and shown (in place) one frame after it
+* mounts, so the transition runs both ways. With reduced motion it simply
+* appears and goes.
+*/
+function useFold(open) {
+	const [mounted, setMounted] = useState(open);
+	const [shown, setShown] = useState(open);
+	useEffect(() => {
+		const still = typeof window === "undefined" || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		if (open) {
+			setMounted(true);
+			if (still) return setShown(true);
+			let inner = 0;
+			const outer = requestAnimationFrame(() => inner = requestAnimationFrame(() => setShown(true)));
+			return () => {
+				cancelAnimationFrame(outer);
+				cancelAnimationFrame(inner);
+			};
+		}
+		setShown(false);
+		if (still) return setMounted(false);
+		const t = setTimeout(() => setMounted(false), 200);
+		return () => clearTimeout(t);
+	}, [open]);
+	return {
+		mounted: mounted || open,
+		shown: shown && open
+	};
+}
 var Row = memo(function Row({ row, focus, selected, current, match, dim, attributes, onSelect, onDrill, onToggle, onContext }) {
 	const n = row.node;
 	const L = HIERARCHY_LOOK;
@@ -25610,7 +26166,13 @@ var Row = memo(function Row({ row, focus, selected, current, match, dim, attribu
 		]
 	});
 });
-/** The toolbar's Hierarchy button (left of a shell's view tabs): it opens and folds the panel. */
+/**
+* A toolbar button that opens and folds the panel from a host's header.
+*
+* @deprecated The panel has its own fold button and, folded, its own button to
+* open it again (PB-1070); a host needs no toggle of its own. Kept for hosts
+* written against 0.2.0; it will be removed in a later minor release.
+*/
 function HierarchyToggle({ open, onClick, disabled, className }) {
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
@@ -25776,7 +26338,7 @@ function SelectionDetails({ bundle, definitions, target, resolveArtifact = NO_FI
 		bundle
 	]);
 	const named = useMemo(() => found ? levelNames(found.vm, found.levelDef, lookup) : void 0, [found, lookup]);
-	if (!found || !found.node && !found.link && !found.derived) return /* @__PURE__ */ jsx(Fragment, { children: missing });
+	if (!found || !found.node && !found.link && !found.derived) return /* @__PURE__ */ jsx(Fragment$1, { children: missing });
 	const { vm, drill, node, link, derived } = found;
 	const defFor = (id) => id ? lookup(id) : void 0;
 	const select = (s) => s && onSelect?.({
@@ -25851,11 +26413,10 @@ function SelectionDetails({ bundle, definitions, target, resolveArtifact = NO_FI
 					onToggleExpand: () => void 0,
 					onSelect: select,
 					board: boardFor(node),
-					artifacts: /* @__PURE__ */ jsx(AssemblyArtifacts, {
+					artifacts: /* @__PURE__ */ jsx(ArtifactsSection, {
 						def: defFor(node.defId),
-						lookup: defFor,
 						resolve: resolveArtifact,
-						appearance,
+						appearance: node.defId ? appearance?.[node.defId] : void 0,
 						titled: false
 					}, node.defId),
 					lookup: defFor,
@@ -26043,6 +26604,6 @@ function resolveTheme(option) {
 	return staticTheme(completeTheme(option));
 }
 //#endregion
-export { ARTIFACT_GROUPS, ArtifactCard, ArtifactCards, ArtifactGrid, Badge, CARD_LOOK, CARD_W, CARD_W_MAX, CLASSIFICATIONS, CLASSIFICATION_OPTIONS, DARK_DATA_TOKENS, DERIVED, DETAIL_OPTIONS, DRC_TOKENS, DetailsSection, DiagramCanvas, DiagramLegend, DiagramLegendBody, DiagramLegendItems, DiagramToolbar, EmptyState, EvidenceSection, FittedLegend, KIND_LABEL as HIERARCHY_KIND_LABEL, HIERARCHY_LOOK, HIERARCHY_WIDTH, PREFIX as HOST_MESSAGE_PREFIX, HierarchyToggle, HostContext, Icon, IconButton, InspectorPanel, InterfaceCard, InterfaceCards, IsolationClear, KIND_ICON, KeyValues, LIGHT_DATA_TOKENS, Legend, LegendItem, LegendSwatches, LegendToolbarButton, MissingNotice, ModelView, PropertyRow, RAIL_WIDTH, SECTION_LOOK, SLOT_COLOR, ScenarioBanner, Scene3D, ScrollArea, Section, Sections, SelectionDetails, SelectionKey, SlotGlyph, StatusDot, TOKEN_NAMES, TOOL_OPTIONS, ThemeProvider, ToggleGroup, ToolToggle, Toolbar, ToolbarSeparator, Tooltips, UhdViewer, ViewButtons, ViewerBoundary, ViewerHierarchy, ViewerInspector, ViewerNodeMenu, ViewerProvider, WIRING_PATH, ancestorsOf, applySelectChanges, applyTheme, artifactCard, artifactCards, buildHierarchy, canvasCommand, cardWidth, checkFindings, classKey, classifyArtifact, colorFor, completeTheme, cx, defaultDark, defaultLight, defaultTheme, defaultThemeAdapter, defineTheme, drillInto, evidenceSourceCards, filterHierarchy, firstView, groupArtifactCards, groupSlots, groupWiring, hierarchyIndex, humanize, initialInteraction, interactionProps, interactionReducer, interfaceSlots, isInternalArtifact, isPlaceholder, isViewerEvent, isolate, keptInspectorState, kindOf, labelIsCut, legendFor, legendRoom, legendStage, levelNames, linkKeys, markLegend, mergeFormats, mix, navTarget, onNavKey, openAction, originAllowed, panelState, paramValue, parseHostMessage, pickTheme, presentKeys, readToken, renderViewer, resolveTheme, revealPaths, rowTarget, selectedPath, sentence, slotSummary, staticTheme, themeCss, themeDeclarations, toggleIsolated, token, tokenColor, tokenVar, tolerantSystem, treeKey, useExpandedCards, useSectionOpen, useShowAll, useTheme, useViewer, useViewerController, useViewerSource, visibleRows, vscodeScheme, vscodeTheme, vscodeThemeAdapter, walkHierarchy };
+export { ARTIFACT_GROUPS, ArtifactCard, ArtifactCards, ArtifactGrid, Badge, CARD_LOOK, CARD_W, CARD_W_MAX, CLASSIFICATIONS, CLASSIFICATION_OPTIONS, ClampedText, DARK_DATA_TOKENS, DERIVED, DETAIL_OPTIONS, DRC_TOKENS, DetailsSection, DiagramCanvas, DiagramLegend, DiagramLegendBody, DiagramLegendItems, DiagramToolbar, EmptyState, EvidenceSection, FittedLegend, KIND_LABEL as HIERARCHY_KIND_LABEL, HIERARCHY_LOOK, HIERARCHY_WIDTH, PREFIX as HOST_MESSAGE_PREFIX, HierarchyToggle, HostContext, Icon, IconButton, InspectorPanel, InterfaceCard, InterfaceCards, IsolationClear, KIND_ICON, KeyValues, LEGEND_SHORT, LIGHT_DATA_TOKENS, LIST_STEP, Legend, LegendFold, LegendItem, LegendSwatches, LegendTab, LegendToolbarButton, MissingNotice, ModelView, PropertyRow, RAIL_WIDTH, SECTION_LOOK, SLOT_COLOR, ScenarioBanner, Scene3D, ScrollArea, Section, Sections, SelectionDetails, SelectionKey, SlotGlyph, StatusDot, TOKEN_NAMES, TOOL_OPTIONS, ThemeProvider, ToggleGroup, ToolToggle, Toolbar, ToolbarSeparator, Tooltips, UhdViewer, ViewButtons, ViewerBoundary, ViewerHierarchy, ViewerInspector, ViewerNodeMenu, ViewerProvider, WIRING_PATH, ancestorsOf, applySelectChanges, applyTheme, artifactCard, artifactCards, buildHierarchy, canvasCommand, cardWidth, checkFindings, classKey, classifyArtifact, colorFor, completeTheme, cx, defaultDark, defaultLight, defaultTheme, defaultThemeAdapter, defineTheme, drillInto, evidenceSourceCards, filterHierarchy, firstView, groupArtifactCards, groupSlots, groupWiring, hierarchyIndex, humanize, initialInteraction, interactionProps, interactionReducer, interfaceSlots, isInternalArtifact, isPlaceholder, isViewerEvent, isolate, keptInspectorState, kindOf, labelIsCut, legendFolded, legendFor, legendRoom, legendStage, levelNames, linkKeys, markLegend, mergeFormats, mix, navTarget, onNavKey, openAction, originAllowed, panelState, paramValue, parseHostMessage, pickTheme, presentKeys, readToken, renderViewer, resolveTheme, revealPaths, rowTarget, selectedPath, sentence, slotSummary, staticTheme, themeCss, themeDeclarations, toggleIsolated, token, tokenColor, tokenVar, tolerantSystem, treeKey, useExpandedCards, useLoadMore, useSectionOpen, useShowAll, useTheme, useViewer, useViewerController, useViewerSource, visibleRows, vscodeScheme, vscodeTheme, vscodeThemeAdapter, walkHierarchy };
 
 //# sourceMappingURL=index.js.map