@grida/hud 0.1.0

package/dist/surface-hUEeEVdL.mjs

@@ -0,0 +1,1808 @@
+import { auxiliary_line_xylr, guide_line_xylr } from "@grida/cmath/_measurement";
+import cmath from "@grida/cmath";
+//#region primitives/canvas.ts
+const DEFAULT_COLOR = "#f44336";
+const DEFAULT_LABEL_FG = "#ffffff";
+const DEFAULT_LINE_WIDTH = .5;
+const CROSSHAIR_SIZE = 4;
+const LABEL_FONT = "10px sans-serif";
+const LABEL_FONT_HEIGHT = 14;
+const LABEL_PADDING_X = 4;
+const LABEL_PADDING_Y = 2;
+const LABEL_BORDER_RADIUS = 4;
+const LABEL_OFFSET = 16;
+const SCREEN_RECT_LINE_WIDTH = 1;
+/**
+* Imperative Canvas 2D renderer for the HUD overlay.
+*
+* Owns a single `<canvas>` element and draws {@link HUDDraw} command lists
+* each frame. All drawing is immediate-mode: the canvas is cleared and
+* fully redrawn on every `draw()` call.
+*
+* The viewport transform is assumed to be axis-aligned (scale + translate only,
+* no rotation/shear). The off-diagonal components of the transform matrix are
+* ignored.
+*/
+var HUDCanvas = class {
+	constructor(canvas, options) {
+		this.canvas = canvas;
+		this.transform = [[
+			1,
+			0,
+			0
+		], [
+			0,
+			1,
+			0
+		]];
+		this.width = 0;
+		this.height = 0;
+		this.ctx = canvas.getContext("2d");
+		this.dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+		this.color = options?.color ?? DEFAULT_COLOR;
+	}
+	setColor(color) {
+		this.color = color ?? DEFAULT_COLOR;
+	}
+	setSize(w, h) {
+		const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+		if (this.width === w && this.height === h && this.dpr === dpr) return;
+		this.dpr = dpr;
+		this.width = w;
+		this.height = h;
+		this.canvas.width = w * this.dpr;
+		this.canvas.height = h * this.dpr;
+		this.canvas.style.width = `${w}px`;
+		this.canvas.style.height = `${h}px`;
+	}
+	setTransform(transform) {
+		this.transform = transform;
+	}
+	/**
+	* Clear the canvas and draw all primitives in `commands`.
+	* Pass `undefined` to clear without drawing (e.g. when no overlay is active).
+	*/
+	draw(commands) {
+		const ctx = this.ctx;
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		if (!commands) return;
+		const { lines, rules, points, rects, polylines, screenRects } = commands;
+		if (rules && rules.length > 0) this.drawRules(rules);
+		if (rects && rects.length > 0) this.drawRects(rects);
+		if (polylines && polylines.length > 0) this.drawPolylines(polylines);
+		if (lines && lines.length > 0) this.drawLines(lines);
+		if (points && points.length > 0) this.drawPoints(points);
+		if (screenRects && screenRects.length > 0) this.drawScreenRects(screenRects);
+	}
+	applyViewTransform() {
+		const [[sx, , tx], [, sy, ty]] = this.transform;
+		this.ctx.setTransform(sx * this.dpr, 0, 0, sy * this.dpr, tx * this.dpr, ty * this.dpr);
+	}
+	applyScreenTransform() {
+		this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+	}
+	/** Project a scalar offset on `axis` to screen-space. */
+	deltaToScreen(offset, axis) {
+		const i = axis === "x" ? 0 : 1;
+		const row = this.transform[i];
+		return row[i] * offset + row[2];
+	}
+	drawRules(rules) {
+		const ctx = this.ctx;
+		this.applyScreenTransform();
+		ctx.strokeStyle = this.color;
+		ctx.lineWidth = DEFAULT_LINE_WIDTH;
+		for (const { axis, offset } of rules) {
+			const screenOffset = this.deltaToScreen(offset, axis);
+			ctx.beginPath();
+			if (axis === "x") {
+				ctx.moveTo(screenOffset, 0);
+				ctx.lineTo(screenOffset, this.height);
+			} else {
+				ctx.moveTo(0, screenOffset);
+				ctx.lineTo(this.width, screenOffset);
+			}
+			ctx.stroke();
+		}
+	}
+	drawLines(lines) {
+		const ctx = this.ctx;
+		const zoom = this.transform[0][0];
+		const [[sx, , tx], [, sy, ty]] = this.transform;
+		this.applyViewTransform();
+		ctx.strokeStyle = this.color;
+		ctx.lineWidth = DEFAULT_LINE_WIDTH / zoom;
+		let dashed = false;
+		let currentWidth = DEFAULT_LINE_WIDTH;
+		let currentColor = this.color;
+		for (const line of lines) {
+			if (line.dashed && !dashed) {
+				ctx.setLineDash([4 / zoom, 3 / zoom]);
+				dashed = true;
+			} else if (!line.dashed && dashed) {
+				ctx.setLineDash([]);
+				dashed = false;
+			}
+			const w = line.strokeWidth ?? DEFAULT_LINE_WIDTH;
+			if (w !== currentWidth) {
+				ctx.lineWidth = w / zoom;
+				currentWidth = w;
+			}
+			const c = line.color ?? this.color;
+			if (c !== currentColor) {
+				ctx.strokeStyle = c;
+				currentColor = c;
+			}
+			ctx.beginPath();
+			ctx.moveTo(line.x1, line.y1);
+			ctx.lineTo(line.x2, line.y2);
+			ctx.stroke();
+		}
+		if (dashed) ctx.setLineDash([]);
+		this.applyScreenTransform();
+		ctx.font = LABEL_FONT;
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		for (const line of lines) {
+			if (!line.label) continue;
+			const midX = (line.x1 + line.x2) / 2;
+			const midY = (line.y1 + line.y2) / 2;
+			const lx = sx * midX + tx;
+			const ly = sy * midY + ty;
+			const isVertical = Math.abs(line.x2 - line.x1) < Math.abs(line.y2 - line.y1);
+			const labelX = isVertical ? lx + LABEL_OFFSET : lx;
+			const labelY = isVertical ? ly : ly + LABEL_OFFSET;
+			const tw = ctx.measureText(line.label).width + LABEL_PADDING_X * 2;
+			const th = LABEL_FONT_HEIGHT + LABEL_PADDING_Y * 2;
+			ctx.fillStyle = line.color ?? this.color;
+			ctx.beginPath();
+			ctx.roundRect(labelX - tw / 2, labelY - th / 2, tw, th, LABEL_BORDER_RADIUS);
+			ctx.fill();
+			ctx.fillStyle = DEFAULT_LABEL_FG;
+			ctx.fillText(line.label, labelX, labelY);
+		}
+	}
+	drawRects(rects) {
+		const ctx = this.ctx;
+		const zoom = this.transform[0][0];
+		this.applyViewTransform();
+		ctx.lineWidth = DEFAULT_LINE_WIDTH / zoom;
+		let currentWidth = DEFAULT_LINE_WIDTH;
+		for (const rect of rects) {
+			const doStroke = rect.stroke !== false;
+			const doFill = rect.fill === true;
+			const color = rect.color ?? this.color;
+			if (rect.dashed) ctx.setLineDash([4 / zoom, 3 / zoom]);
+			if (doFill) {
+				ctx.globalAlpha = rect.fillOpacity ?? 1;
+				ctx.fillStyle = color;
+				ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+				ctx.globalAlpha = 1;
+			}
+			if (doStroke) {
+				const w = rect.strokeWidth ?? DEFAULT_LINE_WIDTH;
+				if (w !== currentWidth) {
+					ctx.lineWidth = w / zoom;
+					currentWidth = w;
+				}
+				ctx.strokeStyle = color;
+				ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+			}
+			if (rect.dashed) ctx.setLineDash([]);
+		}
+	}
+	drawPolylines(polylines) {
+		const ctx = this.ctx;
+		const zoom = this.transform[0][0];
+		this.applyViewTransform();
+		ctx.lineWidth = DEFAULT_LINE_WIDTH / zoom;
+		for (const poly of polylines) {
+			if (poly.points.length < 2) continue;
+			ctx.beginPath();
+			ctx.moveTo(poly.points[0][0], poly.points[0][1]);
+			for (let i = 1; i < poly.points.length; i++) ctx.lineTo(poly.points[i][0], poly.points[i][1]);
+			const doFill = poly.fill === true;
+			const doStroke = poly.stroke !== false;
+			const color = poly.color ?? this.color;
+			if (doFill) {
+				ctx.closePath();
+				ctx.globalAlpha = poly.fillOpacity ?? 1;
+				ctx.fillStyle = color;
+				ctx.fill("evenodd");
+				ctx.globalAlpha = 1;
+			}
+			if (doStroke) {
+				if (poly.dashed) ctx.setLineDash([4 / zoom, 3 / zoom]);
+				ctx.strokeStyle = color;
+				ctx.stroke();
+				if (poly.dashed) ctx.setLineDash([]);
+			}
+		}
+	}
+	drawPoints(points) {
+		const ctx = this.ctx;
+		this.applyScreenTransform();
+		ctx.strokeStyle = this.color;
+		ctx.lineWidth = DEFAULT_LINE_WIDTH;
+		const half = CROSSHAIR_SIZE / 2;
+		const [[sx, , tx], [, sy, ty]] = this.transform;
+		ctx.beginPath();
+		for (const [px, py] of points) {
+			const scrX = sx * px + tx;
+			const scrY = sy * py + ty;
+			ctx.moveTo(scrX - half, scrY - half);
+			ctx.lineTo(scrX + half, scrY + half);
+			ctx.moveTo(scrX + half, scrY - half);
+			ctx.lineTo(scrX - half, scrY + half);
+		}
+		ctx.stroke();
+	}
+	/**
+	* Draw rects whose **size is in screen-space** but whose **anchor is in
+	* document-space**. The doc-space point is projected via the current
+	* transform; the rect is then drawn at fixed CSS-pixel dimensions.
+	*
+	* This is the primitive used to draw resize / rotate handles — they must
+	* remain a constant visual size regardless of viewport zoom.
+	*/
+	drawScreenRects(rects) {
+		const ctx = this.ctx;
+		const [[sx, , tx], [, sy, ty]] = this.transform;
+		this.applyScreenTransform();
+		ctx.lineWidth = SCREEN_RECT_LINE_WIDTH;
+		for (const r of rects) {
+			const scrX = sx * r.x + tx;
+			const scrY = sy * r.y + ty;
+			const w = r.width;
+			const h = r.height;
+			const anchor = r.anchor ?? "center";
+			let x = scrX;
+			let y = scrY;
+			switch (anchor) {
+				case "center":
+					x = scrX - w / 2;
+					y = scrY - h / 2;
+					break;
+				case "tl":
+					x = scrX;
+					y = scrY;
+					break;
+				case "tr":
+					x = scrX - w;
+					y = scrY;
+					break;
+				case "bl":
+					x = scrX;
+					y = scrY - h;
+					break;
+				case "br":
+					x = scrX - w;
+					y = scrY - h;
+					break;
+			}
+			const doFill = r.fill !== false;
+			const doStroke = r.stroke !== false;
+			if (doFill) {
+				ctx.fillStyle = r.fillColor ?? this.color;
+				ctx.fillRect(x, y, w, h);
+			}
+			if (doStroke) {
+				ctx.strokeStyle = r.strokeColor ?? this.color;
+				ctx.strokeRect(x, y, w, h);
+			}
+		}
+	}
+};
+//#endregion
+//#region primitives/snap-guide.ts
+/**
+* Convert a `guide.SnapGuide` (the output of `guide.plot()`) into a
+* generic {@link HUDDraw} command list.
+*
+* Lines pass through directly (HUDLine extends cmath.ui.Line).
+* Points pass through directly (both are cmath.Vector2).
+* Rules are destructured from tuples to objects.
+*/
+function snapGuideToHUDDraw(sg) {
+	if (!sg) return void 0;
+	return {
+		lines: sg.lines,
+		rules: sg.rules.map(([axis, offset]) => ({
+			axis,
+			offset
+		})),
+		points: sg.points
+	};
+}
+//#endregion
+//#region primitives/measurement-guide.ts
+const SIDES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+/**
+* Convert a {@link Measurement} (the output of `measure()`) into a
+* generic {@link HUDDraw} command list.
+*
+* All coordinates are in **document space** — the HUD canvas applies
+* the viewport transform.
+*
+* Produces:
+* - Two stroke-only rects for the A and B bounding boxes
+* - One labelled guide line per non-zero distance (solid)
+* - One auxiliary line per non-zero side connecting the guide to B (dashed)
+*
+* If `color` is provided, every emitted line and rect carries that color so
+* the guides render distinctly from the canvas's chrome color. When used via
+* `surface.draw(extra)` (the host-fed-extras channel) this is required to
+* separate measurement from selection chrome on a shared canvas.
+*/
+function measurementToHUDDraw(m, color) {
+	const { a, b, box, distance } = m;
+	const rects = [{
+		x: a.x,
+		y: a.y,
+		width: a.width,
+		height: a.height,
+		color
+	}, {
+		x: b.x,
+		y: b.y,
+		width: b.width,
+		height: b.height,
+		color
+	}];
+	const lines = [];
+	for (let i = 0; i < 4; i++) {
+		const dist = distance[i];
+		if (dist <= 0) continue;
+		const side = SIDES[i];
+		const label = cmath.ui.formatNumber(dist, 1);
+		const [x1, y1, x2, y2] = guide_line_xylr(box, side, dist);
+		lines.push({
+			x1,
+			y1,
+			x2,
+			y2,
+			label,
+			color
+		});
+		const [ax1, ay1, ax2, ay2, aLen] = auxiliary_line_xylr([x2, y2], b, side);
+		if (aLen > 0) lines.push({
+			x1: ax1,
+			y1: ay1,
+			x2: ax2,
+			y2: ay2,
+			dashed: true,
+			color
+		});
+	}
+	return {
+		rects,
+		lines
+	};
+}
+//#endregion
+//#region primitives/marquee.ts
+/**
+* Convert two marquee corner points into a {@link HUDDraw} command list.
+*
+* All coordinates are in **document space**.
+*
+* Produces a single rectangle with a stroke outline and a semi-transparent fill.
+*/
+function marqueeToHUDDraw(a, b) {
+	const rect = cmath.rect.fromPoints([a, b]);
+	return { rects: [{
+		x: rect.x,
+		y: rect.y,
+		width: rect.width,
+		height: rect.height,
+		fill: true,
+		fillOpacity: .2
+	}] };
+}
+//#endregion
+//#region primitives/lasso.ts
+/**
+* Convert a lasso point sequence into a {@link HUDDraw} command list.
+*
+* All coordinates are in **document space**.
+*
+* Produces a single polyline with a dashed stroke and a semi-transparent fill.
+*/
+function lassoToHUDDraw(points) {
+	if (points.length < 2) return void 0;
+	return { polylines: [{
+		points,
+		fill: true,
+		fillOpacity: .2,
+		dashed: true
+	}] };
+}
+//#endregion
+//#region event/event.ts
+const NO_MODS = {
+	shift: false,
+	alt: false,
+	meta: false,
+	ctrl: false
+};
+function emptyResponse() {
+	return {
+		needsRedraw: false,
+		cursorChanged: false,
+		hoverChanged: false
+	};
+}
+//#endregion
+//#region event/gesture.ts
+const IDLE = { kind: "idle" };
+/**
+* Compute a normalized rectangle from two corner points in document-space.
+* Thin alias over `cmath.rect.fromPoints` for ergonomic two-point use.
+*/
+function rectFromPoints(a, b) {
+	return cmath.rect.fromPoints([a, b]);
+}
+/**
+* Apply a resize handle drag to an initial rect and return the new rect.
+*
+* `dx, dy` is the total drag delta in document-space, measured from
+* `anchor_doc` (the pointer-down point) to the current pointer.
+*
+* No constraints: width/height can go negative — host is responsible for
+* normalizing if it cares (most callers clamp to a min-size).
+*/
+function applyResize(initial, direction, dx, dy) {
+	let { x, y, width, height } = initial;
+	switch (direction) {
+		case "n":
+			y += dy;
+			height -= dy;
+			break;
+		case "s":
+			height += dy;
+			break;
+		case "e":
+			width += dx;
+			break;
+		case "w":
+			x += dx;
+			width -= dx;
+			break;
+		case "ne":
+			y += dy;
+			height -= dy;
+			width += dx;
+			break;
+		case "nw":
+			y += dy;
+			height -= dy;
+			x += dx;
+			width -= dx;
+			break;
+		case "se":
+			width += dx;
+			height += dy;
+			break;
+		case "sw":
+			x += dx;
+			width -= dx;
+			height += dy;
+			break;
+	}
+	return {
+		x,
+		y,
+		width,
+		height
+	};
+}
+//#endregion
+//#region event/cursor.ts
+/** Cursor-equality used to detect changes without object allocations. */
+function cursorEquals(a, b) {
+	if (typeof a === "string" && typeof b === "string") return a === b;
+	if (typeof a !== "string" && typeof b !== "string") {
+		if (a.kind === "resize" && b.kind === "resize") return a.direction === b.direction;
+		if (a.kind === "rotate" && b.kind === "rotate") return a.corner === b.corner;
+		return false;
+	}
+	return false;
+}
+//#endregion
+//#region event/click-tracker.ts
+var ClickTracker = class {
+	constructor(opts = {}) {
+		this.last_time = 0;
+		this.last_x = 0;
+		this.last_y = 0;
+		this.count = 0;
+		this.window_ms = opts.windowMs ?? 500;
+		this.distance_px = opts.distancePx ?? 5;
+	}
+	/**
+	* Register a click at `(x, y)` and return the current consecutive-click
+	* count (1 for single, 2 for double, etc.). `now` is in milliseconds.
+	*/
+	register(x, y, now = nowMs()) {
+		const dt = now - this.last_time;
+		const dx = x - this.last_x;
+		const dy = y - this.last_y;
+		const dist2 = dx * dx + dy * dy;
+		const max2 = this.distance_px * this.distance_px;
+		if (dt <= this.window_ms && dist2 <= max2 && this.count > 0) this.count += 1;
+		else this.count = 1;
+		this.last_time = now;
+		this.last_x = x;
+		this.last_y = y;
+		return this.count;
+	}
+	reset() {
+		this.count = 0;
+		this.last_time = 0;
+	}
+};
+function nowMs() {
+	if (typeof performance !== "undefined" && performance.now) return performance.now();
+	return Date.now();
+}
+//#endregion
+//#region event/hit-regions.ts
+/**
+* Registry of overlay UI hit regions.
+*
+* Regions are appended in draw order (back-to-front). `hitTest` iterates
+* in reverse so the topmost region wins — matching how the chrome is
+* visually layered.
+*/
+var HitRegions = class {
+	constructor() {
+		this.regions = [];
+	}
+	clear() {
+		this.regions.length = 0;
+	}
+	push(region) {
+		this.regions.push(region);
+	}
+	hitTest(point) {
+		for (let i = this.regions.length - 1; i >= 0; i--) {
+			const r = this.regions[i];
+			if (cmath.rect.containsPoint(r.rect, point)) return r.action;
+		}
+		return null;
+	}
+	isEmpty() {
+		return this.regions.length === 0;
+	}
+	/** Read-only access for tests. */
+	toArray() {
+		return this.regions;
+	}
+};
+//#endregion
+//#region event/decision.ts
+/**
+* Recognize which scenario a pointer-down belongs to. Total over inputs.
+* Pure, no I/O. The single source of truth for "which atomic intent did the
+* user just express?"
+*/
+function classifyScenario(input) {
+	const { ui_action, hovered_id, selection_ids, modifiers, click_count, readonly } = input;
+	if (ui_action) switch (ui_action.kind) {
+		case "resize_handle": return readonly ? "Noop" : "HandleResize";
+		case "rotate_handle": return readonly ? "Noop" : "HandleRotate";
+		case "endpoint_handle": return readonly ? "Noop" : "HandleEndpoint";
+		case "select_node": {
+			const id = ui_action.id;
+			if (click_count >= 2) return "EnterEdit";
+			return classifyContent(id, selection_ids, modifiers);
+		}
+		case "translate_handle": return classifyBodyRegion(hovered_id, selection_ids, modifiers, click_count);
+	}
+	if (hovered_id) {
+		if (click_count >= 2) return "EnterEdit";
+		return classifyContent(hovered_id, selection_ids, modifiers);
+	}
+	if (modifiers.shift) return "EmptyAdditiveMarquee";
+	if (selection_ids.length > 0) return "EmptyDeselectThenMarquee";
+	return "EmptyMarquee";
+}
+/**
+* Tier-2 content classification (also reused for the Tier-1 `select_node`
+* overlay variant). The asymmetry lives here in one place:
+*
+*   would-deselect (in selection) → ambiguous (defer)
+*   would-select   (not in selection) → singleton (immediate)
+*/
+function classifyContent(id, selection_ids, modifiers) {
+	if (selection_ids.includes(id)) return modifiers.shift ? "ContentToggleOrDrag" : "ContentNarrowOrDrag";
+	return modifiers.shift ? "ContentAdd" : "ContentReplace";
+}
+/**
+* Body-region classification. Every variant defers, because in the body
+* region "drag the existing selection" is always a candidate intent — even
+* with shift, even when the underlying hover would otherwise be a clear
+* select. The body region's whole purpose is to claim drag.
+*/
+function classifyBodyRegion(hovered_id, selection_ids, modifiers, click_count) {
+	if (click_count >= 2) return "EnterEdit";
+	if (!hovered_id) return "BodyDragOnly";
+	if (selection_ids.includes(hovered_id)) return modifiers.shift ? "BodyToggleOrDrag" : "BodyNarrowOrDrag";
+	return modifiers.shift ? "BodyAddOrDrag" : "BodySwapOrDrag";
+}
+/**
+* Decide what a primary-button pointer-down should do. Thin wrapper:
+* classify the scenario, then dispatch declaratively. The dispatch table is
+* a flat switch — adding a new scenario shows up as exactly one new case.
+*/
+function decidePointerDown(input) {
+	return dispatch(classifyScenario(input), input);
+}
+function dispatch(scenario, input) {
+	const { ui_action, hovered_id, selection_ids, modifiers } = input;
+	switch (scenario) {
+		case "Noop": return { kind: "noop" };
+		case "HandleResize": {
+			const a = ui_action;
+			return {
+				kind: "start_resize",
+				ids: a.ids,
+				direction: a.direction,
+				initial_rect: a.initial_rect
+			};
+		}
+		case "HandleRotate": {
+			const a = ui_action;
+			return {
+				kind: "start_rotate",
+				ids: a.ids,
+				corner: a.corner,
+				initial_rect: a.initial_rect
+			};
+		}
+		case "HandleEndpoint": {
+			const a = ui_action;
+			return {
+				kind: "start_endpoint",
+				id: a.id,
+				endpoint: a.endpoint,
+				p1: a.p1,
+				p2: a.p2
+			};
+		}
+		case "EnterEdit": {
+			const chrome_ids = ui_action && ui_action.kind === "translate_handle" ? ui_action.ids : null;
+			const id = hovered_id ?? (chrome_ids && chrome_ids.length === 1 ? chrome_ids[0] : null);
+			if (id === null) return { kind: "noop" };
+			return {
+				kind: "enter_edit",
+				id
+			};
+		}
+		case "ContentReplace": {
+			const id = contentId(ui_action, hovered_id);
+			return {
+				kind: "immediate_select",
+				select_ids: [id],
+				mode: "replace",
+				pending: { ids_at_down: [id] }
+			};
+		}
+		case "ContentAdd": {
+			const id = contentId(ui_action, hovered_id);
+			return {
+				kind: "immediate_select",
+				select_ids: [id],
+				mode: "toggle",
+				pending: { ids_at_down: [id, ...selection_ids.filter((s) => s !== id)] }
+			};
+		}
+		case "ContentNarrowOrDrag":
+		case "ContentToggleOrDrag": {
+			const id = contentId(ui_action, hovered_id);
+			return {
+				kind: "pend",
+				pending: {
+					ids_at_down: [...selection_ids],
+					deferred: {
+						node_id: id,
+						shift: modifiers.shift
+					}
+				}
+			};
+		}
+		case "BodyDragOnly": return {
+			kind: "pend",
+			pending: { ids_at_down: [...ui_action.ids] }
+		};
+		case "BodyNarrowOrDrag":
+		case "BodyToggleOrDrag":
+		case "BodySwapOrDrag":
+		case "BodyAddOrDrag": return {
+			kind: "pend",
+			pending: {
+				ids_at_down: [...ui_action.ids],
+				deferred: {
+					node_id: hovered_id,
+					shift: modifiers.shift
+				}
+			}
+		};
+		case "EmptyDeselectThenMarquee": return {
+			kind: "start_marquee_pend",
+			emit_deselect_all: true
+		};
+		case "EmptyMarquee":
+		case "EmptyAdditiveMarquee": return {
+			kind: "start_marquee_pend",
+			emit_deselect_all: false
+		};
+	}
+}
+/** Resolve the id that the user clicked on for content-class scenarios. */
+function contentId(ui_action, hovered_id) {
+	if (ui_action && ui_action.kind === "select_node") return ui_action.id;
+	return hovered_id;
+}
+/**
+* What the cursor should show while idle. Drives the cursor in lockstep
+* with the pointer-down decision — both read the same inputs, so cursor
+* and intent can't drift.
+*
+* Hover (the visual outline) is NOT decided here — it's always
+* `hovered_id`. Cursor is about INTENT (what the next pointer-down would
+* do), not what's visually under the pointer.
+*/
+function decideIdleCursor(input) {
+	const { ui_action, hovered_id, selection_ids } = input;
+	if (ui_action) switch (ui_action.kind) {
+		case "resize_handle": return {
+			kind: "resize",
+			direction: ui_action.direction
+		};
+		case "rotate_handle": return {
+			kind: "rotate",
+			corner: ui_action.corner
+		};
+		case "translate_handle": return "move";
+		case "select_node":
+		case "endpoint_handle": return "pointer";
+	}
+	if (hovered_id && selection_ids.includes(hovered_id)) return "move";
+	return "default";
+}
+//#endregion
+//#region event/transform.ts
+const IDENTITY = [[
+	1,
+	0,
+	0
+], [
+	0,
+	1,
+	0
+]];
+/** Project a screen-space point into document-space. */
+function screenToDoc(t, x, y) {
+	const [[sx, , tx], [, sy, ty]] = t;
+	return [(x - tx) / (sx || 1), (y - ty) / (sy || 1)];
+}
+/** Project a document-space point into screen-space. */
+function docToScreen(t, x, y) {
+	const [[sx, , tx], [, sy, ty]] = t;
+	return [sx * x + tx, sy * y + ty];
+}
+//#endregion
+//#region event/state.ts
+const DRAG_THRESHOLD_PX = 3;
+/**
+* Pure-logic surface state machine.
+*
+* Owns gesture, hover, modifiers, cursor, click-tracker, hit-regions, and
+* the current selection **mirror** pushed by the host. Does not own the
+* authoritative selection — emits `select` intents the host commits.
+*
+* No canvas knowledge. No DOM knowledge. No React.
+*/
+var SurfaceState = class {
+	constructor() {
+		this.gesture = IDLE;
+		this.hover = null;
+		this.hover_override = null;
+		this.cursor = "default";
+		this.modifiers = { ...NO_MODS };
+		this.readonly = false;
+		this.groups = [];
+		this.selection_ids = [];
+		this.transform = IDENTITY;
+		this.hit_regions = new HitRegions();
+		this.click_tracker = new ClickTracker();
+		this.pending = null;
+	}
+	/**
+	* The effective hover: override beats pick.
+	* Used by chrome rendering and by `Surface.hover()`.
+	*/
+	getEffectiveHover() {
+		return this.hover_override ?? this.hover;
+	}
+	/**
+	* Push a new selection from the host. Accepts either:
+	*
+	* - **A flat `NodeId[]`** — each id becomes its own single-member group
+	*   with shape resolved via `shapeOf(id)` at chrome build time. Simple
+	*   hosts (e.g. svg-editor v1) use this overload.
+	* - **A `SelectionGroup[]`** — pre-computed groups (typically grouped by
+	*   parent), each with its own pre-unioned shape. Hosts that already
+	*   compute groups (e.g. the main editor) use this overload.
+	*
+	* The flat-ids form is resolved lazily — `shapeOf` is called by the chrome
+	* builder, not here. This keeps `setSelection` cheap and lets host shape
+	* changes (e.g. after a node move) be reflected without re-calling
+	* `setSelection`.
+	*/
+	setSelection(input) {
+		if (input.length === 0) {
+			this.groups = [];
+			this.selection_ids = [];
+			return;
+		}
+		if (typeof input[0] === "string") {
+			const ids = input;
+			this.selection_ids = [...ids];
+			this.groups = ids.map((id) => ({
+				ids: [id],
+				shape: {
+					kind: "unresolved",
+					id
+				}
+			}));
+		} else {
+			const groups = input;
+			this.groups = groups.map((g) => ({
+				ids: [...g.ids],
+				shape: g.shape
+			}));
+			const flat = [];
+			for (const g of groups) flat.push(...g.ids);
+			this.selection_ids = flat;
+		}
+	}
+	/** Read-only access to the flat list of selected ids (for hover logic). */
+	getSelectionIds() {
+		return this.selection_ids;
+	}
+	/** Read-only access to the selection groups (for chrome rendering). */
+	getSelectionGroups() {
+		return this.groups;
+	}
+	setTransform(t) {
+		this.transform = t;
+	}
+	getTransform() {
+		return this.transform;
+	}
+	setReadonly(v) {
+		this.readonly = v;
+	}
+	hitRegions() {
+		return this.hit_regions;
+	}
+	dispatch(event, deps) {
+		switch (event.kind) {
+			case "pointer_move": return this.onPointerMove(event.x, event.y, event.mods, deps);
+			case "pointer_down":
+				this.modifiers = event.mods;
+				return this.onPointerDown(event.x, event.y, event.button, deps);
+			case "pointer_up":
+				this.modifiers = event.mods;
+				return this.onPointerUp(event.x, event.y, event.button, deps);
+			case "modifiers":
+				this.modifiers = event.mods;
+				return emptyResponse();
+			case "wheel":
+			case "key": return emptyResponse();
+			case "blur": return this.onBlur(deps);
+		}
+	}
+	onPointerMove(sx, sy, mods, deps) {
+		this.modifiers = mods;
+		const response = emptyResponse();
+		const point_doc = screenToDoc(this.transform, sx, sy);
+		if (this.pending && this.gesture.kind === "idle") {
+			const ax = this.pending.anchor_screen[0];
+			const ay = this.pending.anchor_screen[1];
+			const dx = sx - ax;
+			const dy = sy - ay;
+			if (dx * dx + dy * dy >= DRAG_THRESHOLD_PX * DRAG_THRESHOLD_PX) {
+				const ids = this.pending.ids_at_down;
+				this.pending.deferred = void 0;
+				if (ids.length > 0) {
+					this.gesture = {
+						kind: "translate",
+						ids,
+						anchor_doc: this.pending.anchor_doc,
+						last_doc: point_doc
+					};
+					this.setCursor("move", response);
+				} else this.gesture = {
+					kind: "marquee",
+					anchor_doc: this.pending.anchor_doc,
+					current_doc: point_doc
+				};
+			}
+		}
+		switch (this.gesture.kind) {
+			case "idle": {
+				const hit = deps.pick(point_doc);
+				this.setHover(hit, response);
+				const ui_action = this.hit_regions.hitTest([sx, sy]);
+				this.setCursor(decideIdleCursor({
+					ui_action,
+					hovered_id: hit,
+					selection_ids: this.selection_ids
+				}), response);
+				return response;
+			}
+			case "translate": {
+				const g = this.gesture;
+				const dx = point_doc[0] - g.anchor_doc[0];
+				const dy = point_doc[1] - g.anchor_doc[1];
+				this.gesture = {
+					...g,
+					last_doc: point_doc
+				};
+				deps.emitIntent({
+					kind: "translate",
+					ids: g.ids,
+					dx,
+					dy,
+					phase: "preview"
+				});
+				response.needsRedraw = true;
+				return response;
+			}
+			case "marquee": {
+				const g = this.gesture;
+				this.gesture = {
+					...g,
+					current_doc: point_doc
+				};
+				response.needsRedraw = true;
+				return response;
+			}
+			case "resize": {
+				const g = this.gesture;
+				const dx = point_doc[0] - g.anchor_doc[0];
+				const dy = point_doc[1] - g.anchor_doc[1];
+				const next_rect = applyResize(g.initial_rect, g.direction, dx, dy);
+				this.gesture = {
+					...g,
+					current_rect: next_rect
+				};
+				deps.emitIntent({
+					kind: "resize",
+					ids: g.ids,
+					anchor: g.direction,
+					rect: next_rect,
+					phase: "preview"
+				});
+				response.needsRedraw = true;
+				return response;
+			}
+			case "rotate": {
+				const g = this.gesture;
+				const angle = Math.atan2(point_doc[1] - g.center_doc[1], point_doc[0] - g.center_doc[0]);
+				this.gesture = {
+					...g,
+					current_angle: angle
+				};
+				deps.emitIntent({
+					kind: "rotate",
+					ids: g.ids,
+					angle: angle - g.anchor_angle,
+					phase: "preview"
+				});
+				response.needsRedraw = true;
+				return response;
+			}
+			case "endpoint": {
+				const g = this.gesture;
+				this.gesture = {
+					...g,
+					pos_doc: point_doc
+				};
+				deps.emitIntent({
+					kind: "set_endpoint",
+					id: g.id,
+					endpoint: g.endpoint,
+					pos: point_doc,
+					phase: "preview"
+				});
+				response.needsRedraw = true;
+				return response;
+			}
+			case "pan":
+				this.gesture = {
+					kind: "pan",
+					prev_screen: [sx, sy]
+				};
+				return response;
+		}
+		return response;
+	}
+	onPointerDown(sx, sy, button, deps) {
+		const response = emptyResponse();
+		if (button !== "primary") return response;
+		const point_doc = screenToDoc(this.transform, sx, sy);
+		const screen = [sx, sy];
+		const ui_action = this.hit_regions.hitTest(screen);
+		const hovered_id = deps.pick(point_doc);
+		const click_count = this.click_tracker.register(sx, sy);
+		const decision = decidePointerDown({
+			ui_action,
+			hovered_id,
+			selection_ids: this.selection_ids,
+			modifiers: this.modifiers,
+			click_count,
+			readonly: this.readonly
+		});
+		switch (decision.kind) {
+			case "noop": return response;
+			case "start_resize":
+				this.gesture = {
+					kind: "resize",
+					ids: [...decision.ids],
+					direction: decision.direction,
+					initial_rect: decision.initial_rect,
+					anchor_doc: point_doc,
+					current_rect: decision.initial_rect
+				};
+				response.needsRedraw = true;
+				return response;
+			case "start_rotate": {
+				const [cx, cy] = cmath.rect.getCenter(decision.initial_rect);
+				const angle = Math.atan2(point_doc[1] - cy, point_doc[0] - cx);
+				this.gesture = {
+					kind: "rotate",
+					ids: [...decision.ids],
+					corner: decision.corner,
+					center_doc: [cx, cy],
+					anchor_angle: angle,
+					current_angle: angle
+				};
+				response.needsRedraw = true;
+				return response;
+			}
+			case "start_endpoint": {
+				const start = decision.endpoint === "p1" ? decision.p1 : decision.p2;
+				this.gesture = {
+					kind: "endpoint",
+					id: decision.id,
+					endpoint: decision.endpoint,
+					pos_doc: [start[0], start[1]]
+				};
+				response.needsRedraw = true;
+				return response;
+			}
+			case "enter_edit":
+				deps.emitIntent({
+					kind: "enter_content_edit",
+					id: decision.id
+				});
+				this.pending = null;
+				return response;
+			case "immediate_select":
+				deps.emitIntent({
+					kind: "select",
+					ids: [...decision.select_ids],
+					mode: decision.mode
+				});
+				response.needsRedraw = true;
+				this.pending = {
+					anchor_doc: point_doc,
+					anchor_screen: screen,
+					ids_at_down: decision.pending.ids_at_down,
+					deferred: decision.pending.deferred
+				};
+				return response;
+			case "pend":
+				this.pending = {
+					anchor_doc: point_doc,
+					anchor_screen: screen,
+					ids_at_down: decision.pending.ids_at_down,
+					deferred: decision.pending.deferred
+				};
+				return response;
+			case "start_marquee_pend":
+				if (decision.emit_deselect_all) {
+					deps.emitIntent({ kind: "deselect_all" });
+					response.needsRedraw = true;
+				}
+				this.pending = {
+					anchor_doc: point_doc,
+					anchor_screen: screen,
+					ids_at_down: []
+				};
+				return response;
+		}
+	}
+	onPointerUp(_sx, _sy, button, deps) {
+		const response = emptyResponse();
+		if (button !== "primary") return response;
+		if (this.pending && this.pending.deferred) {
+			const d = this.pending.deferred;
+			deps.emitIntent({
+				kind: "select",
+				ids: [d.node_id],
+				mode: d.shift ? "toggle" : "replace"
+			});
+			response.needsRedraw = true;
+		}
+		this.pending = null;
+		switch (this.gesture.kind) {
+			case "translate": {
+				const g = this.gesture;
+				const dx = g.last_doc[0] - g.anchor_doc[0];
+				const dy = g.last_doc[1] - g.anchor_doc[1];
+				deps.emitIntent({
+					kind: "translate",
+					ids: g.ids,
+					dx,
+					dy,
+					phase: "commit"
+				});
+				this.gesture = IDLE;
+				response.needsRedraw = true;
+				if (cursorEquals(this.cursor, "move")) this.setCursor("default", response);
+				break;
+			}
+			case "marquee": {
+				const g = this.gesture;
+				const rect = rectFromPoints(g.anchor_doc, g.current_doc);
+				deps.emitIntent({
+					kind: "marquee_select",
+					rect,
+					additive: this.modifiers.shift,
+					phase: "commit"
+				});
+				this.gesture = IDLE;
+				response.needsRedraw = true;
+				break;
+			}
+			case "resize": {
+				const g = this.gesture;
+				deps.emitIntent({
+					kind: "resize",
+					ids: g.ids,
+					anchor: g.direction,
+					rect: g.current_rect,
+					phase: "commit"
+				});
+				this.gesture = IDLE;
+				response.needsRedraw = true;
+				break;
+			}
+			case "rotate": {
+				const g = this.gesture;
+				deps.emitIntent({
+					kind: "rotate",
+					ids: g.ids,
+					angle: g.current_angle - g.anchor_angle,
+					phase: "commit"
+				});
+				this.gesture = IDLE;
+				response.needsRedraw = true;
+				break;
+			}
+			case "endpoint": {
+				const g = this.gesture;
+				deps.emitIntent({
+					kind: "set_endpoint",
+					id: g.id,
+					endpoint: g.endpoint,
+					pos: g.pos_doc,
+					phase: "commit"
+				});
+				this.gesture = IDLE;
+				response.needsRedraw = true;
+				break;
+			}
+		}
+		return response;
+	}
+	onBlur(deps) {
+		const response = emptyResponse();
+		this.pending = null;
+		if (this.gesture.kind !== "idle") {
+			deps.emitIntent({ kind: "cancel_gesture" });
+			this.gesture = IDLE;
+			response.needsRedraw = true;
+		}
+		return response;
+	}
+	setHover(id, response) {
+		if (this.hover === id) return;
+		const prev_eff = this.getEffectiveHover();
+		this.hover = id;
+		if (prev_eff !== this.getEffectiveHover()) {
+			response.hoverChanged = true;
+			response.needsRedraw = true;
+		}
+	}
+	/**
+	* Set or clear the host-driven hover override. Pass `null` to clear.
+	* Returns a response indicating whether the *effective* hover changed —
+	* the caller should redraw and notify subscribers if `hoverChanged`.
+	*/
+	setHoverOverride(id) {
+		const response = emptyResponse();
+		if (this.hover_override === id) return response;
+		const prev_eff = this.getEffectiveHover();
+		this.hover_override = id;
+		if (prev_eff !== this.getEffectiveHover()) {
+			response.hoverChanged = true;
+			response.needsRedraw = true;
+		}
+		return response;
+	}
+	setCursor(next, response) {
+		if (!cursorEquals(this.cursor, next)) {
+			this.cursor = next;
+			response.cursorChanged = true;
+		}
+	}
+};
+//#endregion
+//#region surface/style.ts
+const DEFAULT_STYLE = {
+	chromeColor: "#2563eb",
+	hoverColor: "#60a5fa",
+	handleSize: 8,
+	handleFill: "#ffffff",
+	handleStroke: "#2563eb",
+	selectionOutlineWidth: 1,
+	hoverOutlineWidth: 2,
+	showRotationHandles: false
+};
+function mergeStyle(base, partial) {
+	if (!partial) return base;
+	return {
+		...base,
+		...partial
+	};
+}
+//#endregion
+//#region event/shape.ts
+/**
+* Compute the axis-aligned bounding box of a `SelectionShape` in doc-space.
+* Used for layout math the chrome builder needs (e.g. handle positions).
+*
+* Throws on `kind: "unresolved"` — the chrome builder must resolve those
+* via `shapeOf` first.
+*/
+function shapeBounds(shape) {
+	if (shape.kind === "rect") return shape.rect;
+	if (shape.kind === "line") return cmath.rect.fromPoints([shape.p1, shape.p2]);
+	throw new Error(`shapeBounds: cannot bound unresolved shape (id=${shape.id})`);
+}
+//#endregion
+//#region event/overlay.ts
+/**
+* Minimum hit-target size in screen-px.
+*
+* Visual knobs are typically 8px, but the hit region is 16px so users don't
+* need pixel-perfect aim. Matches `MIN_HIT_SIZE` in the Rust overlay.
+*/
+const MIN_HIT_SIZE = 16;
+/**
+* Below this selection size (in screen-px on either axis), chrome is
+* suppressed — both the visual handles AND the hit regions. Matches
+* `MIN_HANDLES_VISIBLE_SIZE` in the Rust overlay.
+*/
+const MIN_CHROME_VISIBLE_SIZE = 12;
+//#endregion
+//#region surface/chrome.ts
+const CORNER_RESIZE_DIRECTIONS = [
+	"nw",
+	"ne",
+	"se",
+	"sw"
+];
+const EDGE_RESIZE_DIRECTIONS = [
+	"n",
+	"e",
+	"s",
+	"w"
+];
+const ROTATION_CORNERS = [
+	"nw",
+	"ne",
+	"se",
+	"sw"
+];
+/**
+* Build the per-frame surface chrome.
+*
+* Returns a pair:
+* - `overlays` — interactable elements (handles, endpoint knobs, rotation
+*   regions). Each pairs a hit shape with an optional render shape.
+* - `decoration` — pure visual `HUDDraw` (selection outlines, hover outline,
+*   marquee, line outlines). Not interactable.
+*
+* The Surface fans `overlays` into `HitRegions` (for events) and merges
+* their render shapes into `decoration` (for the canvas draw call).
+*/
+function buildChrome(input) {
+	const { state, shapeOf, style } = input;
+	const transform = state.getTransform();
+	const overlays = [];
+	const decoration_rects = [];
+	const decoration_lines = [];
+	const in_gesture = state.gesture.kind !== "idle";
+	const hover_id = in_gesture ? null : state.getEffectiveHover();
+	if (hover_id) {
+		const shape = shapeOf(hover_id);
+		if (shape) pushShapeOutline(shape, decoration_rects, decoration_lines, {
+			dashed: false,
+			strokeWidth: style.hoverOutlineWidth
+		});
+	}
+	if (!in_gesture) for (const group of state.getSelectionGroups()) {
+		const shape = resolveGroupShape(group, shapeOf);
+		if (!shape) continue;
+		pushShapeOutline(shape, decoration_rects, decoration_lines, {
+			dashed: false,
+			strokeWidth: style.selectionOutlineWidth
+		});
+		pushBodyHandle(shape, group.ids, transform, overlays);
+		if (shape.kind === "rect") pushRectGroupHandles(shape.rect, group.ids, transform, style, overlays);
+		else if (shape.kind === "line") pushLineEndpoints(group.ids[0], shape.p1, shape.p2, style, overlays);
+	}
+	if (state.gesture.kind === "marquee") {
+		const g = state.gesture;
+		const mr = rectFromPoints(g.anchor_doc, g.current_doc);
+		decoration_rects.push({
+			...mr,
+			stroke: true,
+			fill: true,
+			fillOpacity: .15
+		});
+	}
+	if (state.gesture.kind === "resize") decoration_rects.push({
+		...state.gesture.current_rect,
+		stroke: true,
+		fill: false,
+		dashed: true
+	});
+	return {
+		overlays,
+		decoration: {
+			rects: decoration_rects.length > 0 ? decoration_rects : void 0,
+			lines: decoration_lines.length > 0 ? decoration_lines : void 0
+		}
+	};
+}
+function resolveGroupShape(group, shapeOf) {
+	if (group.shape.kind === "unresolved") return shapeOf(group.shape.id);
+	return group.shape;
+}
+function pushBodyHandle(shape, ids, transform, out) {
+	const bounds_doc = shapeBounds(shape);
+	const rect_screen = cmath.rect.transform(bounds_doc, transform);
+	if (rect_screen.width < 1 && rect_screen.height < 1) return;
+	out.push({
+		action: {
+			kind: "translate_handle",
+			ids
+		},
+		hit: {
+			kind: "screen_aabb",
+			rect: rect_screen
+		},
+		cursor: "move"
+	});
+}
+function pushRectGroupHandles(rect_doc, ids, transform, style, out) {
+	const rect_screen = cmath.rect.transform(rect_doc, transform);
+	if (rect_screen.width < 12 && rect_screen.height < 12) return;
+	const size = style.handleSize;
+	const hit_size = Math.max(size + 4, 16);
+	const anchors_doc = cornerAnchors(rect_doc);
+	for (const dir of CORNER_RESIZE_DIRECTIONS) {
+		const anchor_doc = anchors_doc[dir];
+		out.push({
+			action: {
+				kind: "resize_handle",
+				direction: dir,
+				ids,
+				initial_rect: rect_doc
+			},
+			hit: {
+				kind: "screen_rect_at_doc",
+				anchor_doc,
+				width: hit_size,
+				height: hit_size,
+				placement: "center"
+			},
+			render: {
+				kind: "screen_rect",
+				anchor_doc,
+				width: size,
+				height: size,
+				placement: "center",
+				fill: true,
+				stroke: true,
+				fillColor: style.handleFill,
+				strokeColor: style.handleStroke
+			},
+			cursor: {
+				kind: "resize",
+				direction: dir
+			}
+		});
+	}
+	const edge_strips = edgeStripsScreen(rect_screen, hit_size);
+	for (const dir of EDGE_RESIZE_DIRECTIONS) {
+		const strip = edge_strips[dir];
+		out.push({
+			action: {
+				kind: "resize_handle",
+				direction: dir,
+				ids,
+				initial_rect: rect_doc
+			},
+			hit: {
+				kind: "screen_aabb",
+				rect: strip
+			},
+			cursor: {
+				kind: "resize",
+				direction: dir
+			}
+		});
+	}
+	if (style.showRotationHandles && ids.length === 1) {
+		const rot_size = 16;
+		for (const corner of ROTATION_CORNERS) {
+			const anchor_doc = anchors_doc[corner];
+			const offset_screen = rotationOffsetScreen(corner);
+			const [ax, ay] = docToScreen(transform, anchor_doc[0], anchor_doc[1]);
+			out.push({
+				action: {
+					kind: "rotate_handle",
+					corner,
+					ids,
+					initial_rect: rect_doc
+				},
+				hit: {
+					kind: "screen_aabb",
+					rect: {
+						x: ax + offset_screen[0] - rot_size / 2,
+						y: ay + offset_screen[1] - rot_size / 2,
+						width: rot_size,
+						height: rot_size
+					}
+				},
+				cursor: {
+					kind: "rotate",
+					corner
+				}
+			});
+		}
+	}
+}
+function cornerAnchors(r) {
+	return {
+		nw: [r.x, r.y],
+		n: [r.x + r.width / 2, r.y],
+		ne: [r.x + r.width, r.y],
+		e: [r.x + r.width, r.y + r.height / 2],
+		se: [r.x + r.width, r.y + r.height],
+		s: [r.x + r.width / 2, r.y + r.height],
+		sw: [r.x, r.y + r.height],
+		w: [r.x, r.y + r.height / 2]
+	};
+}
+/**
+* Compute the 4 screen-space AABB strips between corner knobs for virtual
+* edge resize regions. Each strip is `thickness` thick, inset from the
+* corners by half the strip thickness so it doesn't overlap corner hits.
+*/
+function edgeStripsScreen(rect_screen, thickness) {
+	const { x, y, width, height } = rect_screen;
+	const inset = thickness / 2;
+	const half = thickness / 2;
+	return {
+		n: {
+			x: x + inset,
+			y: y - half,
+			width: Math.max(0, width - inset * 2),
+			height: thickness
+		},
+		s: {
+			x: x + inset,
+			y: y + height - half,
+			width: Math.max(0, width - inset * 2),
+			height: thickness
+		},
+		e: {
+			x: x + width - half,
+			y: y + inset,
+			width: thickness,
+			height: Math.max(0, height - inset * 2)
+		},
+		w: {
+			x: x - half,
+			y: y + inset,
+			width: thickness,
+			height: Math.max(0, height - inset * 2)
+		}
+	};
+}
+function rotationOffsetScreen(corner) {
+	switch (corner) {
+		case "nw": return [-12, -12];
+		case "ne": return [12, -12];
+		case "se": return [12, 12];
+		case "sw": return [-12, 12];
+	}
+}
+function pushLineEndpoints(id, p1, p2, style, out) {
+	const size = style.handleSize;
+	const hit_size = Math.max(size + 4, 16);
+	const endpoints = [{
+		which: "p1",
+		pos: p1
+	}, {
+		which: "p2",
+		pos: p2
+	}];
+	for (const ep of endpoints) out.push({
+		action: {
+			kind: "endpoint_handle",
+			endpoint: ep.which,
+			id,
+			p1: [p1[0], p1[1]],
+			p2: [p2[0], p2[1]]
+		},
+		hit: {
+			kind: "screen_rect_at_doc",
+			anchor_doc: ep.pos,
+			width: hit_size,
+			height: hit_size,
+			placement: "center"
+		},
+		render: {
+			kind: "screen_rect",
+			anchor_doc: ep.pos,
+			width: size,
+			height: size,
+			placement: "center",
+			fill: true,
+			stroke: true,
+			fillColor: style.handleFill,
+			strokeColor: style.handleStroke
+		},
+		cursor: "pointer"
+	});
+}
+function pushShapeOutline(shape, rects, lines, opts) {
+	if (shape.kind === "rect") rects.push({
+		...shape.rect,
+		stroke: true,
+		fill: false,
+		dashed: opts.dashed,
+		strokeWidth: opts.strokeWidth
+	});
+	else if (shape.kind === "line") lines.push({
+		x1: shape.p1[0],
+		y1: shape.p1[1],
+		x2: shape.p2[0],
+		y2: shape.p2[1],
+		dashed: opts.dashed,
+		strokeWidth: opts.strokeWidth
+	});
+}
+/**
+* Fan a list of `OverlayElement`s into per-primitive render arrays and into
+* the hit-region registry. Returns the additional render primitives that
+* should be merged with the decoration `HUDDraw`.
+*/
+function fanOverlays(overlays, transform, regions) {
+	regions.clear();
+	const screenRects = [];
+	for (const el of overlays) {
+		regions.push({
+			rect: projectHitAABB(el.hit, transform),
+			action: el.action
+		});
+		if (!el.render) continue;
+		if (el.render.kind === "screen_rect") screenRects.push({
+			x: el.render.anchor_doc[0],
+			y: el.render.anchor_doc[1],
+			width: el.render.width,
+			height: el.render.height,
+			anchor: el.render.placement,
+			fill: el.render.fill,
+			stroke: el.render.stroke,
+			fillColor: el.render.fillColor,
+			strokeColor: el.render.strokeColor
+		});
+	}
+	return { screenRects };
+}
+function projectHitAABB(hit, transform) {
+	if (hit.kind === "screen_aabb") return hit.rect;
+	const [sx, sy] = docToScreen(transform, hit.anchor_doc[0], hit.anchor_doc[1]);
+	const placement = hit.placement ?? "center";
+	let x = sx;
+	let y = sy;
+	switch (placement) {
+		case "center":
+			x = sx - hit.width / 2;
+			y = sy - hit.height / 2;
+			break;
+		case "tl":
+			x = sx;
+			y = sy;
+			break;
+		case "tr":
+			x = sx - hit.width;
+			y = sy;
+			break;
+		case "bl":
+			x = sx;
+			y = sy - hit.height;
+			break;
+		case "br":
+			x = sx - hit.width;
+			y = sy - hit.height;
+			break;
+	}
+	return {
+		x,
+		y,
+		width: hit.width,
+		height: hit.height
+	};
+}
+/**
+* Merge a base `HUDDraw` (chrome decoration) with optional host-fed extras
+* and surface-owned interactable screenRects into a single command list.
+*/
+function mergeDraws(base, extra, screenRects) {
+	return {
+		lines: cat(base.lines, extra?.lines),
+		rules: cat(base.rules, extra?.rules),
+		points: cat(base.points, extra?.points),
+		rects: cat(base.rects, extra?.rects),
+		polylines: cat(base.polylines, extra?.polylines),
+		screenRects: cat(cat(base.screenRects, extra?.screenRects), screenRects)
+	};
+}
+/**
+* Concatenate two optional arrays. Returns the non-empty side directly when
+* the other is empty — no defensive copy on the hot draw path.
+*/
+function cat(a, b) {
+	if (!b || b.length === 0) return a;
+	if (!a || a.length === 0) return b;
+	return [...a, ...b];
+}
+//#endregion
+//#region surface/surface.ts
+/**
+* Top-level wired surface.
+*
+* Owns an internal `HUDCanvas`, a `SurfaceState` (gesture/hover/...) and
+* the host providers. On every `dispatch`, the state machine runs;
+* `draw` composes surface chrome + host-fed extras into a single canvas
+* paint.
+*/
+var Surface = class {
+	constructor(canvas, options) {
+		this.width = 0;
+		this.height = 0;
+		this.opts = options;
+		this.style = mergeStyle(DEFAULT_STYLE, options.style);
+		this.hudCanvas = new HUDCanvas(canvas, { color: options.color ?? this.style.chromeColor });
+		this.state = new SurfaceState();
+		if (options.readonly !== void 0) this.state.setReadonly(options.readonly);
+	}
+	setSize(w, h) {
+		this.width = w;
+		this.height = h;
+		this.hudCanvas.setSize(w, h);
+	}
+	setTransform(t) {
+		this.state.setTransform(t);
+		this.hudCanvas.setTransform(t);
+	}
+	/**
+	* Push a new selection from the host.
+	*
+	* Accepts either:
+	* - `NodeId[]` — each id becomes its own single-member group, shape
+	*   resolved via `shapeOf(id)` by the chrome builder.
+	* - `SelectionGroup[]` — pre-computed groups with their union shape.
+	*
+	* See `SurfaceState.setSelection` for details.
+	*/
+	setSelection(input) {
+		this.state.setSelection(input);
+	}
+	setStyle(partial) {
+		this.style = mergeStyle(this.style, partial);
+		this.hudCanvas.setColor(this.style.chromeColor);
+	}
+	setReadonly(v) {
+		this.state.setReadonly(v);
+	}
+	/**
+	* Set or clear a host-driven hover override.
+	*
+	* The surface tracks two hover sources:
+	* - **Pointer pick** — what scene content is under the cursor (updated
+	*   automatically on `pointer_move`).
+	* - **Host override** — what the host wants to show as hovered, e.g.
+	*   from a layers panel row mouseenter.
+	*
+	* The override (when non-null) wins. `hover()` returns the effective
+	* value; chrome renders the effective value. Pass `null` to clear and
+	* fall back to pointer pick.
+	*
+	* Returns the same response shape as `dispatch` so the host can react
+	* to whether anything actually changed.
+	*/
+	setHoverOverride(id) {
+		return this.state.setHoverOverride(id);
+	}
+	dispose() {}
+	dispatch(event) {
+		return this.state.dispatch(event, {
+			pick: this.opts.pick,
+			shapeOf: this.opts.shapeOf,
+			emitIntent: this.opts.onIntent
+		});
+	}
+	draw(extra) {
+		const { overlays, decoration } = buildChrome({
+			state: this.state,
+			shapeOf: this.opts.shapeOf,
+			style: this.style,
+			width: this.width,
+			height: this.height
+		});
+		const { screenRects } = fanOverlays(overlays, this.state.getTransform(), this.state.hitRegions());
+		this.hudCanvas.draw(mergeDraws(decoration, extra, screenRects));
+	}
+	/** Convenience: clear the canvas (e.g. when the host stops the surface). */
+	clear() {
+		this.hudCanvas.draw(void 0);
+	}
+	gesture() {
+		return this.state.gesture;
+	}
+	/**
+	* The effective hover: host override (when set) wins over pointer pick.
+	* Use this for chrome decisions and host-side reads.
+	*/
+	hover() {
+		return this.state.getEffectiveHover();
+	}
+	cursor() {
+		return this.state.cursor;
+	}
+	modifiers() {
+		return this.state.modifiers;
+	}
+};
+//#endregion
+export { lassoToHUDDraw as a, snapGuideToHUDDraw as c, NO_MODS as i, HUDCanvas as l, MIN_CHROME_VISIBLE_SIZE as n, marqueeToHUDDraw as o, MIN_HIT_SIZE as r, measurementToHUDDraw as s, Surface as t };