@grida/hud 0.1.0 → 0.2.1

package/dist/surface-hUEeEVdL.mjs

@@ -1,1808 +0,0 @@
-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 };