feat(ui): F8-12 — owner feedback round 2 (#55)

* Bug fix: theme flip no longer leaves planets oversized. The
  camera-preserving remount now calls a new
  `RendererHandle.refreshCameraDerivedDraws` explicitly after the
  manual moveCenter/setZoom pair so the post-mount geometry tracks
  `viewport.scaled` even if pixi-viewport's `'zoomed'` listener
  races the next Ticker tick.
* Doc #3: clicks on a planet label route through the same hit-test
  path as a click on the disc. The label `Container` now has a
  pointer hit area sized to the text + frame padding; pointertap
  simulates a click at the planet centre, so selection and
  pick-mode resolution behave identically.
* Doc #4: battle X-crosses + cargo arrowhead wings grow
  sub-linearly with zoom (PLANET_SIZE_ZOOM_ALPHA). New
  `Style.softLengthAnchor` ('center' / 'start') makes the renderer
  treat the recorded endpoints as the geometry "at the reference
  scale" and rescale around the midpoint (X-cross) or the start
  endpoint (arrow wings). Arrowhead base length is halved from 6
  to 3 world units to match the owner's "in half" request.
* Doc #5: picker overlay loses the anchor ring at the source, the
  cursor line drops to a cargo-route-thin 0.6 px stroke, and the
  hover ring around the destination is replaced by a planet-style
  outline (visible disc + 1 px padding) in the `pickHighlight`
  accent — so candidate destinations read like selection in warm
  yellow.
* Doc #6: regression test pins the in-disc hit zone.
* Perf #1: camera-driven redraws are throttled onto the next
  Ticker tick. A rapid wheel / pinch burst now coalesces into at
  most one `clear() + redraw` pass per painted frame, which keeps
  the 500-planet map responsive on zoom and toggle flips.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

ui/frontend/src/lib/active-view/map.svelte

@@ -599,6 +599,14 @@ preference the store already manages.
 				handle.viewport.moveCenter(world.width / 2, world.height / 2);
 				handle.viewport.setZoom(minScale * 1.05, true);
 			}
+			// `viewport.setZoom` emits `zoomed` through the next Ticker
+			// tick, but the handler can race the synchronous setExtras /
+			// label / outline calls that follow — and a theme-flip
+			// remount has been observed to leave primitives drawn at the
+			// boot scale until the user nudges the wheel. Force the
+			// camera-derived redraw explicitly here so the post-mount
+			// state always matches `viewport.scaled`.
+			handle.refreshCameraDerivedDraws();
 			if (mode === "no-wrap") handle.setMode("no-wrap");
 			detachClick = handle.onClick(handleMapClick);
 			pickService?.bindResolver(({ sourcePlanetNumber, reachableIds, onResolve }) => {

ui/frontend/src/map/battle-markers.ts

@@ -117,6 +117,11 @@ export function buildBattleAndBombingMarkers(
 			strokeColor: theme.battleMarker,
 			strokeAlpha: 0.95,
 			strokeWidthPx,
+			// F8-12 / #4 follow-up: grow the X-cross length sub-linearly
+			// with zoom (the planet disc does the same, so the marker
+			// stays proportional). Endpoints listed below are the "at
+			// reference scale" geometry.
+			softLengthAnchor: "center",
 		};
 		const baseId = BATTLE_MARKER_ID_PREFIX | (i << 4);
 		const lineA: LinePrim = {

ui/frontend/src/map/cargo-routes.ts

@@ -20,13 +20,64 @@ import { DARK_THEME, type LinePrim, type PrimitiveID, type Style, type Theme } f
  * active theme. A single `Style` object is shared by every line of a
  * given load type within one call so the renderer can dedupe them.
  */
-function routeStylesByLoadType(theme: Theme): Record<CargoLoadType, Style> {
-	return {
-		COL: { strokeColor: theme.routeCol, strokeAlpha: 0.95, strokeWidthPx: 0.6 },
-		CAP: { strokeColor: theme.routeCap, strokeAlpha: 0.95, strokeWidthPx: 0.6 },
-		MAT: { strokeColor: theme.routeMat, strokeAlpha: 0.95, strokeWidthPx: 0.6 },
-		EMP: { strokeColor: theme.routeEmp, strokeAlpha: 0.85, strokeWidthPx: 0.4 },
+function routeStylesByLoadType(
+	theme: Theme,
+): Record<CargoLoadType, { shaft: Style; wing: Style }> {
+	const styles: Record<CargoLoadType, { shaft: Style; wing: Style }> = {
+		COL: {
+			shaft: {
+				strokeColor: theme.routeCol,
+				strokeAlpha: 0.95,
+				strokeWidthPx: 0.6,
+			},
+			wing: {
+				strokeColor: theme.routeCol,
+				strokeAlpha: 0.95,
+				strokeWidthPx: 0.6,
+				softLengthAnchor: "start",
+			},
+		},
+		CAP: {
+			shaft: {
+				strokeColor: theme.routeCap,
+				strokeAlpha: 0.95,
+				strokeWidthPx: 0.6,
+			},
+			wing: {
+				strokeColor: theme.routeCap,
+				strokeAlpha: 0.95,
+				strokeWidthPx: 0.6,
+				softLengthAnchor: "start",
+			},
+		},
+		MAT: {
+			shaft: {
+				strokeColor: theme.routeMat,
+				strokeAlpha: 0.95,
+				strokeWidthPx: 0.6,
+			},
+			wing: {
+				strokeColor: theme.routeMat,
+				strokeAlpha: 0.95,
+				strokeWidthPx: 0.6,
+				softLengthAnchor: "start",
+			},
+		},
+		EMP: {
+			shaft: {
+				strokeColor: theme.routeEmp,
+				strokeAlpha: 0.85,
+				strokeWidthPx: 0.4,
+			},
+			wing: {
+				strokeColor: theme.routeEmp,
+				strokeAlpha: 0.85,
+				strokeWidthPx: 0.4,
+				softLengthAnchor: "start",
+			},
+		},
 	};
+	return styles;
 }
 
 /** Per-load-type priority. Higher wins hit-test ties; planets sit
@@ -59,9 +110,11 @@ const SHAFT_OFFSET = 0;
 const WING_LEFT_OFFSET = 1;
 const WING_RIGHT_OFFSET = 2;
 
-/** Arrowhead size in world units. Picked so the head is visible
- * at default zoom but does not eat the destination planet glyph. */
-const HEAD_LENGTH_WORLD = 6;
+/** Arrowhead size in world units **at the reference zoom**. F8-12 /
+ * #4 follow-up halved the head from 6 → 3 world units and added
+ * `softLengthAnchor: "start"` so the wings grow sub-linearly with
+ * zoom instead of stretching across the whole approach. */
+const HEAD_LENGTH_WORLD = 3;
 /** Half-angle of the arrowhead opening, in radians (~25°). */
 const HEAD_HALF_ANGLE = (25 * Math.PI) / 180;
 
@@ -122,13 +175,13 @@ export function buildCargoRouteLines(
 				route.sourcePlanetNumber,
 				entry.loadType,
 			);
-			const style = styleByLoadType[entry.loadType];
+			const styles = styleByLoadType[entry.loadType];
 			const priority = PRIORITY_BY_LOAD_TYPE[entry.loadType];
 			lines.push({
 				kind: "line",
 				id: baseId + SHAFT_OFFSET,
 				priority,
-				style,
+				style: styles.shaft,
 				hitSlopPx: 0,
 				x1: source.x,
 				y1: source.y,
@@ -139,7 +192,7 @@ export function buildCargoRouteLines(
 				kind: "line",
 				id: baseId + WING_LEFT_OFFSET,
 				priority,
-				style,
+				style: styles.wing,
 				hitSlopPx: 0,
 				x1: headX,
 				y1: headY,
@@ -150,7 +203,7 @@ export function buildCargoRouteLines(
 				kind: "line",
 				id: baseId + WING_RIGHT_OFFSET,
 				priority,
-				style,
+				style: styles.wing,
 				hitSlopPx: 0,
 				x1: headX,
 				y1: headY,

ui/frontend/src/map/hit-test.ts

@@ -15,6 +15,7 @@ import { distSqPointToSegment, screenToWorld, torusShortestDelta } from "./math"
 import { minScaleNoWrap } from "./no-wrap";
 import {
 	DEFAULT_HIT_SLOP_PX,
+	displayLineEndpoints,
 	displayPointRadiusWorld,
 	KIND_ORDER,
 	type Camera,
@@ -77,7 +78,14 @@ export function hitTest(
 		} else if (p.kind === "circle") {
 			result = matchCircle(p, cursor, slopWorld, mode === "torus" ? world : null);
 		} else {
-			result = matchLine(p, cursor, slopWorld, mode === "torus" ? world : null);
+			result = matchLine(
+				p,
+				cursor,
+				slopWorld,
+				camera.scale,
+				scaleRef,
+				mode === "torus" ? world : null,
+			);
 		}
 		if (result !== null) {
 			candidates.push({ primitive: p, distSq: result });
@@ -163,6 +171,8 @@ function matchLine(
 	p: LinePrim,
 	cursor: { x: number; y: number },
 	slopWorld: number,
+	cameraScale: number,
+	scaleRef: number,
 	world: World | null,
 ): number | null {
 	// In torus mode the canonical line representation goes from
@@ -170,14 +180,30 @@ function matchLine(
 	// shortest delta from end1 to end2. The cursor's distance is
 	// then the perpendicular distance to this canonical segment,
 	// using the torus-shortest cursor-to-end1 delta as the basis.
+	const ends = displayLineEndpoints(
+		p.style,
+		p.x1,
+		p.y1,
+		p.x2,
+		p.y2,
+		cameraScale,
+		scaleRef,
+	);
 	if (world === null) {
-		const distSq = distSqPointToSegment(cursor.x, cursor.y, p.x1, p.y1, p.x2, p.y2);
+		const distSq = distSqPointToSegment(
+			cursor.x,
+			cursor.y,
+			ends.x1,
+			ends.y1,
+			ends.x2,
+			ends.y2,
+		);
 		if (distSq <= slopWorld * slopWorld) return distSq;
 		return null;
 	}
-	const segDx = torusShortestDelta(p.x1, p.x2, world.width);
-	const segDy = torusShortestDelta(p.y1, p.y2, world.height);
-	const cur = torusDelta(p.x1, p.y1, cursor.x, cursor.y, world);
+	const segDx = torusShortestDelta(ends.x1, ends.x2, world.width);
+	const segDy = torusShortestDelta(ends.y1, ends.y2, world.height);
+	const cur = torusDelta(ends.x1, ends.y1, cursor.x, cursor.y, world);
 	const distSq = distSqPointToSegment(cur.dx, cur.dy, 0, 0, segDx, segDy);
 	if (distSq <= slopWorld * slopWorld) return distSq;
 	return null;

ui/frontend/src/map/pick-mode.ts

@@ -83,10 +83,17 @@ export interface PickOverlaySpec {
 	readonly dimmedIds: ReadonlySet<PrimitiveID>;
 }
 
-/** Anchor / hover outline padding in world units (the rings sit
- * outside the visible disc so the planet stays clearly visible). */
+/** Anchor / hover outline padding. F8-12 / #5 retired the anchor
+ * ring from the picker overlay, so `ANCHOR_PADDING_WORLD` is now
+ * dead — kept exported for legacy test coverage that asserts the
+ * spec stays shaped the same way. `HOVER_PADDING_PX` is the
+ * screen-pixel gap the picker hover-ring leaves between the
+ * destination disc edge and the stroke; it matches the regular
+ * planet outline (`OUTLINE_RADIUS_PADDING_PX` in `render.ts`) so
+ * "selection" and "pick hover" outlines feel identical at every
+ * zoom. */
 export const ANCHOR_PADDING_WORLD = 6;
-export const HOVER_PADDING_WORLD = 4;
+export const HOVER_PADDING_PX = 1;
 
 /**
  * computePickOverlay produces a `PickOverlaySpec` for the current
@@ -173,10 +180,11 @@ export function computePickOverlay(
 				cameraScale,
 				scaleRef,
 			);
+			const paddingWorld = cameraScale > 0 ? HOVER_PADDING_PX / cameraScale : 0;
 			hoverOutline = {
 				x: target.x,
 				y: target.y,
-				radius: targetRadius + HOVER_PADDING_WORLD,
+				radius: targetRadius + paddingWorld,
 			};
 		}
 	}
@@ -208,8 +216,13 @@ export function computePickOverlay(
  * as obviously inert against the map background.
  */
 export const PICK_OVERLAY_STYLE = {
-	anchor: { alpha: 0.9, width: 2 },
-	line: { alpha: 0.5, width: 1 },
-	hover: { alpha: 1, width: 2 },
+	anchor: { alpha: 0.9, widthPx: 2 },
+	// F8-12 / #5: cursor line uses the same screen-pixel thickness as
+	// a regular cargo-route shaft (0.6 px), and the hover ring around
+	// the destination matches the planet-outline stroke (1.5 px). The
+	// renderer divides by `cameraScale` before drawing so the values
+	// stay constant on screen at any zoom.
+	line: { alpha: 0.95, widthPx: 0.6 },
+	hover: { alpha: 0.95, widthPx: 1.5 },
 	dimAlpha: 0.35,
 } as const;

ui/frontend/src/map/render.ts

@@ -21,6 +21,7 @@ import {
 	Application,
 	Container,
 	Graphics,
+	Rectangle,
 	Text,
 	Ticker,
 	UPDATE_PRIORITY,
@@ -42,6 +43,7 @@ import {
 import { wrapCameraTorus } from "./torus";
 import {
 	DARK_THEME,
+	displayLineEndpoints,
 	displayPointRadiusWorld,
 	displayStrokeWidthWorld,
 	World,
@@ -219,6 +221,16 @@ export interface RendererHandle {
 	setVisibilityFog(
 		circles: ReadonlyArray<{ x: number; y: number; radius: number }>,
 	): void;
+	/**
+	 * refreshCameraDerivedDraws repaints every primitive / outline /
+	 * label whose geometry depends on the current camera scale. The
+	 * map view calls this right after a manual `viewport.moveCenter` /
+	 * `viewport.setZoom` pair (e.g. on a theme-flip remount), where
+	 * `pixi-viewport`'s `'zoomed'` listener can race the next Ticker
+	 * tick and leave the scene drawn at the boot scale until the
+	 * player nudges the wheel.
+	 */
+	refreshCameraDerivedDraws(): void;
 	/**
 	 * setPlanetLabels replaces the on-map planet label dataset
 	 * (F8-12 / #29). Each entry is anchored to its planet's
@@ -510,7 +522,7 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 		} else if (prim.kind === "circle") {
 			drawCircle(g, prim, theme, viewport.scaled);
 		} else {
-			drawLine(g, prim, theme, viewport.scaled);
+			drawLine(g, prim, theme, viewport.scaled, currentScaleRef);
 		}
 	};
 	const populatePrimitives = (prim: Primitive, isExtra: boolean): void => {
@@ -635,17 +647,28 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 		const totalTextHeight =
 			nameHeight + (entry.nameText !== null ? LABEL_LINE_GAP_PX : 0) + numberHeight;
 		entry.numberText.y = entry.nameText !== null ? nameHeight + LABEL_LINE_GAP_PX : 0;
+		// Refresh the click hit area to match the label's bounding box
+		// plus the padding from the selection frame (so the player can
+		// click anywhere inside the visible legend, not just the glyphs).
+		const widestText = Math.max(
+			entry.nameText?.width ?? 0,
+			entry.numberText.width,
+		);
+		const hitWidth = widestText + LABEL_FRAME_PADDING_PX * 2;
+		const hitHeight = totalTextHeight + LABEL_FRAME_PADDING_PX * 2;
+		entry.container.hitArea = new Rectangle(
+			-hitWidth / 2,
+			-LABEL_FRAME_PADDING_PX,
+			hitWidth,
+			hitHeight,
+		);
 		entry.frame.clear();
 		if (!isSelected) {
 			entry.frame.visible = false;
 			return;
 		}
-		const widestText = Math.max(
-			entry.nameText?.width ?? 0,
-			entry.numberText.width,
-		);
-		const frameWidth = widestText + LABEL_FRAME_PADDING_PX * 2;
-		const frameHeight = totalTextHeight + LABEL_FRAME_PADDING_PX * 2;
+		const frameWidth = hitWidth;
+		const frameHeight = hitHeight;
 		entry.frame.roundRect(
 			-frameWidth / 2,
 			-LABEL_FRAME_PADDING_PX,
@@ -821,11 +844,34 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 			};
 			paintLabelEntry(entry, data.planetNumber === selectedPlanetId);
 			planetLabelInstances.set(data.planetNumber, entry);
+			// F8-12 / #3 follow-up: a click on the label routes through
+			// the same hit-test path as a click on the disc so selection
+			// and pick-mode both fire the right callback.
+			const targetPlanet = data.planetNumber;
+			container.eventMode = "static";
+			container.cursor = "pointer";
+			container.on("pointertap", () => simulatePlanetClick(targetPlanet));
 		}
 		updateLabelTransforms();
 		requestRender();
 	};
 
+	const simulatePlanetClick = (planetNumber: number): void => {
+		const prim = pointPrimitivesById.get(planetNumber);
+		if (prim === undefined) return;
+		const cameraScale = viewport.scaled;
+		if (cameraScale <= 0) return;
+		const screen = {
+			x:
+				viewport.screenWidth / 2 +
+				(prim.x - viewport.center.x) * cameraScale,
+			y:
+				viewport.screenHeight / 2 +
+				(prim.y - viewport.center.y) * cameraScale,
+		};
+		handleViewportClicked({ screen });
+	};
+
 	let mode: WrapMode = opts.mode;
 
 	const enforceCentreWhenLarger = (): void => {
@@ -1045,24 +1091,28 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 			viewport.scaled,
 			currentScaleRef,
 		);
+		const cameraScale = viewport.scaled > 0 ? viewport.scaled : 1;
+		const lineWidthWorld = PICK_OVERLAY_STYLE.line.widthPx / cameraScale;
+		const hoverWidthWorld = PICK_OVERLAY_STYLE.hover.widthPx / cameraScale;
 		for (const g of pickOverlays) {
 			g.clear();
-			g.circle(spec.anchor.x, spec.anchor.y, spec.anchor.radius);
-			g.stroke({
-				color: theme.pickHighlight,
-				alpha: PICK_OVERLAY_STYLE.anchor.alpha,
-				width: PICK_OVERLAY_STYLE.anchor.width,
-			});
+			// F8-12 / #5: anchor ring around the source is retired —
+			// the source planet's own outline already signals selection.
 			if (spec.line !== null) {
 				g.moveTo(spec.line.x1, spec.line.y1);
 				g.lineTo(spec.line.x2, spec.line.y2);
 				g.stroke({
 					color: theme.pickHighlight,
 					alpha: PICK_OVERLAY_STYLE.line.alpha,
-					width: PICK_OVERLAY_STYLE.line.width,
+					width: lineWidthWorld,
 				});
 			}
 			if (spec.hoverOutline !== null) {
+				// F8-12 / #5: hover ring matches the regular planet
+				// outline geometry (visible disc + ~1 px padding) but
+				// paints in `pickHighlight` so the player sees the
+				// destination candidate just like a selection — only
+				// in the warm picker accent.
 				g.circle(
 					spec.hoverOutline.x,
 					spec.hoverOutline.y,
@@ -1071,7 +1121,7 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 				g.stroke({
 					color: theme.pickHighlight,
 					alpha: PICK_OVERLAY_STYLE.hover.alpha,
-					width: PICK_OVERLAY_STYLE.hover.width,
+					width: hoverWidthWorld,
 				});
 			}
 		}
@@ -1160,14 +1210,27 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 
 	// Zoom-driven repaint. Both `redrawAllPrimitives` and
 	// `redrawPickOverlay` are in scope now, so the subscription is
-	// safe even on a synchronous zoomed event.
-	const handleZoomed = (): void => {
+	// safe even on a synchronous zoomed event. A rapid wheel / pinch
+	// burst fires many `zoomed` events per frame; we coalesce them
+	// onto the next Ticker tick so the expensive `clear() + redraw`
+	// pass runs at most once per painted frame even on a 500-planet
+	// map.
+	let zoomedRedrawPending = false;
+	const runCameraDerivedRedraws = (): void => {
 		redrawAllPrimitives();
 		updateOutlineTransforms();
 		updateLabelTransforms();
 		redrawPickOverlay();
 		requestRender();
 	};
+	const handleZoomed = (): void => {
+		if (zoomedRedrawPending) return;
+		zoomedRedrawPending = true;
+		Ticker.shared.addOnce(() => {
+			zoomedRedrawPending = false;
+			runCameraDerivedRedraws();
+		});
+	};
 	viewport.on("zoomed", handleZoomed);
 
 	const handle: RendererHandle = {
@@ -1348,6 +1411,7 @@ export async function createRenderer(opts: RendererOptions): Promise<RendererHan
 		},
 		setPlanetLabels,
 		setPlanetOutlines,
+		refreshCameraDerivedDraws: runCameraDerivedRedraws,
 		resize: (w, h) => {
 			app.renderer.resize(w, h);
 			viewport.resize(w, h, opts.world.width, opts.world.height);
@@ -1466,21 +1530,31 @@ function drawLine(
 	p: LinePrim,
 	theme: Theme,
 	cameraScale: number,
+	scaleRef: number,
 ): void {
 	const color = p.style.strokeColor ?? theme.lineStroke;
 	const alpha = p.style.strokeAlpha ?? 1;
 	const width = displayStrokeWidthWorld(p.style, cameraScale);
+	const ends = displayLineEndpoints(
+		p.style,
+		p.x1,
+		p.y1,
+		p.x2,
+		p.y2,
+		cameraScale,
+		scaleRef,
+	);
 	const dash = p.style.strokeDashPx;
 	if (dash === undefined || dash <= 0) {
-		g.moveTo(p.x1, p.y1);
-		g.lineTo(p.x2, p.y2);
+		g.moveTo(ends.x1, ends.y1);
+		g.lineTo(ends.x2, ends.y2);
 		g.stroke({ color, alpha, width });
 		return;
 	}
 	// PixiJS v8 has no native dashed-line API; segment the path into
 	// equal-length dashes (dash and gap both `dash` units).
-	const dx = p.x2 - p.x1;
-	const dy = p.y2 - p.y1;
+	const dx = ends.x2 - ends.x1;
+	const dy = ends.y2 - ends.y1;
 	const length = Math.hypot(dx, dy);
 	if (length === 0) return;
 	const ux = dx / length;
@@ -1488,8 +1562,8 @@ function drawLine(
 	const step = dash * 2;
 	for (let t = 0; t < length; t += step) {
 		const segEnd = Math.min(t + dash, length);
-		g.moveTo(p.x1 + ux * t, p.y1 + uy * t);
-		g.lineTo(p.x1 + ux * segEnd, p.y1 + uy * segEnd);
+		g.moveTo(ends.x1 + ux * t, ends.y1 + uy * t);
+		g.lineTo(ends.x1 + ux * segEnd, ends.y1 + uy * segEnd);
 	}
 	g.stroke({ color, alpha, width });
 }

ui/frontend/src/map/world.ts

@@ -47,6 +47,15 @@ export interface Style {
 	// this for the IncomingGroup trajectory line; ignored on point
 	// and circle primitives.
 	strokeDashPx?: number;
+	// softLengthAnchor — when set on a `LinePrim`, the renderer treats
+	// the world-coord endpoints as the line length "at the reference
+	// scale" and grows / shrinks them with `PLANET_SIZE_ZOOM_ALPHA`
+	// the same way planet discs do. `'center'` scales both endpoints
+	// around the segment midpoint (used by battle X-crosses anchored
+	// on the planet centre); `'start'` keeps `(x1, y1)` fixed and
+	// only scales `(x2, y2)` along the original direction (used by
+	// cargo-route arrowhead wings anchored at the destination).
+	softLengthAnchor?: "center" | "start";
 }
 
 // PrimitiveBase carries the fields shared by every primitive kind.
@@ -278,6 +287,62 @@ export function displayStrokeWidthWorld(
 	return px / cameraScale;
 }
 
+/**
+ * softLengthFactor returns the multiplier that scales a line's
+ * length when `style.softLengthAnchor` is set. The factor matches
+ * the planet-radius softening rule: at `scale = scaleRef` it equals
+ * `1` (the recorded geometry is the reference length); zooming in
+ * shrinks the world-space length so the on-screen length grows by
+ * `(scale / scaleRef)^α`. `displayLineEndpoints` is the convenience
+ * wrapper that applies it to a line's `(x1, y1)–(x2, y2)` pair
+ * given the configured anchor.
+ */
+export function softLengthFactor(
+	cameraScale: number,
+	scaleRef: number,
+): number {
+	if (cameraScale <= 0 || scaleRef <= 0) return 1;
+	return Math.pow(cameraScale / scaleRef, PLANET_SIZE_ZOOM_ALPHA - 1);
+}
+
+/**
+ * displayLineEndpoints returns the world-space endpoints the
+ * renderer should draw a `LinePrim` between, honouring
+ * `style.softLengthAnchor` if set. Used by both the renderer and
+ * the hit-test so the click zone always matches the visible stroke.
+ */
+export function displayLineEndpoints(
+	style: Style,
+	x1: number,
+	y1: number,
+	x2: number,
+	y2: number,
+	cameraScale: number,
+	scaleRef: number,
+): { x1: number; y1: number; x2: number; y2: number } {
+	if (style.softLengthAnchor === undefined) {
+		return { x1, y1, x2, y2 };
+	}
+	const factor = softLengthFactor(cameraScale, scaleRef);
+	if (factor === 1) return { x1, y1, x2, y2 };
+	if (style.softLengthAnchor === "start") {
+		return {
+			x1,
+			y1,
+			x2: x1 + (x2 - x1) * factor,
+			y2: y1 + (y2 - y1) * factor,
+		};
+	}
+	const cx = (x1 + x2) / 2;
+	const cy = (y1 + y2) / 2;
+	return {
+		x1: cx + (x1 - cx) * factor,
+		y1: cy + (y1 - cy) * factor,
+		x2: cx + (x2 - cx) * factor,
+		y2: cy + (y2 - cy) * factor,
+	};
+}
+
 export const DARK_THEME: Theme = {
 	background: 0x0a0e1a,
 	fog: 0x12162a,