@orbat-mapper/tactical-draw 0.6.2 → 0.8.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { DEFAULT_LABEL_HEIGHT_CSS_PIXELS, FILL_PATTERN_DEFINITIONS, NON_SOLID_FILL_PATTERNS, applyBoxTransformOptions, canonicalTextAmplifierKey, cloneControlMeasure, controlMeasureIdFromFeature, dragControlMeasureOptionHandle, foldsBoxTransformOptions, freezeOrientationOptions, getControlMeasureMetadata, getControlMeasureOptionHandles, getDefaultOptions, normalizeTextAmplifiers, renderControlMeasure, resolveAmplifierPlacement, resolveSizePair, resolveStyleHints, roundToFixed, switchSizePairUnit } from "@orbat-mapper/control-measures";
+import { DEFAULT_LABEL_HEIGHT_CSS_PIXELS, DEFAULT_SYMBOL_COLOR, FILL_PATTERN_DEFINITIONS, NON_SOLID_FILL_PATTERNS, applyBoxTransformOptions, canonicalTextAmplifierKey, cloneControlMeasure, controlMeasureIdFromFeature, dragControlMeasureOptionHandle, foldsBoxTransformOptions, freezeOrientationOptions, getControlMeasureMetadata, getControlMeasureOptionHandles, getDefaultOptions, normalizeTextAmplifiers, renderControlMeasure, resolveAmplifierPlacement, resolveSizePair, resolveStyleHints, resolveSymbolColor, roundToFixed, switchSizePairUnit } from "@orbat-mapper/control-measures";
 function pickPointerType(originalEvent) {
 	if (typeof PointerEvent !== "undefined" && originalEvent instanceof PointerEvent) {
 		if (originalEvent.pointerType === "touch") return "touch";
@@ -1878,7 +1878,7 @@ const PREVIEW_CURSOR$1 = "crosshair";
 * kinds need no host UI.
 */
 function runFixedLengthDraw(options) {
-	const { adapter, kind, previewLayer, guideLayer, graphicsStyle, generateId, signal, measureOptions, measureStyle, measureProperties, measureTextAmplifiers, guide: guideOpt, sizeAnchor, onSettled, onSession, seed, snap } = options;
+	const { adapter, kind, previewLayer, guideLayer, graphicsStyle, symbolColors, generateId, signal, measureOptions, measureStyle, measureProperties, measureTextAmplifiers, guide: guideOpt, sizeAnchor, onSettled, onSession, seed, snap } = options;
 	const metadata = getControlMeasureMetadata(kind);
 	const rule = metadata.rule;
 	const min = metadata.minCoordinates;
@@ -1887,7 +1887,10 @@ function runFixedLengthDraw(options) {
 	if (rule) required = rule.minimumUserPoints;
 	else if (typeof min === "number" && typeof max === "number" && min === max) required = min;
 	else throw new Error(`runFixedLengthDraw: kind "${kind}" is not fixed-length (min=${min}, max=${max})`);
-	const renderOpts = graphicsStyle ? { graphicsStyle } : void 0;
+	const renderOpts = {
+		graphicsStyle,
+		symbolColors
+	};
 	const guideEnabled = (guideOpt ?? true) && !shouldSuppressGuide(metadata);
 	const isAreaKind = metadata.geometry === "area";
 	const initialPoints = [];
@@ -2155,7 +2158,7 @@ const PREVIEW_CURSOR = "crosshair";
 * added point again" as additional gesture-level commit triggers.
 */
 function runVariableLengthDraw(options) {
-	const { adapter, kind, previewLayer, guideLayer, graphicsStyle, generateId, signal, onSession, seed, measureOptions, measureStyle, measureProperties, measureTextAmplifiers, guide: guideOpt, sizeAnchor, onSettled, snap } = options;
+	const { adapter, kind, previewLayer, guideLayer, graphicsStyle, symbolColors, generateId, signal, onSession, seed, measureOptions, measureStyle, measureProperties, measureTextAmplifiers, guide: guideOpt, sizeAnchor, onSettled, snap } = options;
 	const metadata = getControlMeasureMetadata(kind);
 	if (typeof metadata.minCoordinates !== "number") throw new Error(`runVariableLengthDraw: kind "${kind}" has no minCoordinates metadata`);
 	const min = metadata.minCoordinates;
@@ -2173,7 +2176,10 @@ function runVariableLengthDraw(options) {
 	function insertionIndex(len) {
 		return canonicalFormed(len) ? len - trailingFixed : len;
 	}
-	const renderOpts = graphicsStyle ? { graphicsStyle } : void 0;
+	const renderOpts = {
+		graphicsStyle,
+		symbolColors
+	};
 	const initialPoints = [];
 	if (seed) {
 		for (const pos of seed) {
@@ -2594,6 +2600,140 @@ function runEditInteraction(spec) {
 	});
 }
 //#endregion
+//#region src/tactical-draw/transform-box.ts
+/**
+* The uniform scale factor and rotation delta a box implies relative to a
+* pre-drag box, given the gesture kind. A `body` translate reports neither
+* (1, 0). Consumed both by point symbols (size/rotation) and by Text graphics
+* (folding the delta into rotation/size options); the delta is pivot-
+* independent so either can apply it without knowing the box center.
+*/
+function boxScaleRotation(kind, box, preDragBox) {
+	return {
+		scale: kind === "scale" ? Math.max(box.halfWidth / preDragBox.halfWidth, box.halfHeight / preDragBox.halfHeight) : 1,
+		rotation: kind === "rotate" ? box.angle - preDragBox.angle : 0
+	};
+}
+function rotate(x, y, angle) {
+	const cos = Math.cos(angle);
+	const sin = Math.sin(angle);
+	return [x * cos - y * sin, x * sin + y * cos];
+}
+/**
+* Fit an oriented `TransformBox` around `pixels` at a caller-chosen `angle`.
+* Rotates the points by `-angle` about their centroid, takes the axis-aligned
+* bounding box in that de-rotated frame, then re-expresses the result as an
+* oriented box at `angle` — so the box always has exactly the requested tilt,
+* sized to just contain the (de-rotated) points. Half-dimensions are floored
+* at `MIN_HALF_SIZE_PX` so a degenerate selection still yields a drawable,
+* pickable box. Returns `null` for an empty list — there is nothing to fit.
+*
+* `padding` (pixels, default `0`) is added to `halfWidth`/`halfHeight` *after*
+* the `MIN_HALF_SIZE_PX` floor, on every side, without moving `center` — the
+* `InteractionStyle.boxPadding` knob (ADR-0017) so the box doesn't tightly hug
+* the rendered geometry. Everything downstream that reads a fitted box
+* (`boxCorners`, `rotateGripPixel`, `pointInBox`, `pickBoxHandle`) derives from
+* `halfWidth`/`halfHeight` alone, so the padding flows through to corner
+* placement, the rotate grip, and picking automatically — no other function
+* needs to know about it.
+*/
+function fitTransformBox(pixels, angle, padding = 0) {
+	if (pixels.length === 0) return null;
+	let cx = 0;
+	let cy = 0;
+	for (const p of pixels) {
+		cx += p[0];
+		cy += p[1];
+	}
+	cx /= pixels.length;
+	cy /= pixels.length;
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const p of pixels) {
+		const [rx, ry] = rotate(p[0] - cx, p[1] - cy, -angle);
+		if (rx < minX) minX = rx;
+		if (rx > maxX) maxX = rx;
+		if (ry < minY) minY = ry;
+		if (ry > maxY) maxY = ry;
+	}
+	const localCenterX = (minX + maxX) / 2;
+	const localCenterY = (minY + maxY) / 2;
+	const halfWidth = Math.max((maxX - minX) / 2, 1) + padding;
+	const halfHeight = Math.max((maxY - minY) / 2, 1) + padding;
+	const [ox, oy] = rotate(localCenterX, localCenterY, angle);
+	return {
+		center: [cx + ox, cy + oy],
+		halfWidth,
+		halfHeight,
+		angle
+	};
+}
+/**
+* The box's 4 corners in screen pixels: `[topLeft, topRight, bottomRight,
+* bottomLeft]` in the box's local (pre-rotation) frame, then rotated by
+* `box.angle` about `box.center`. Corner index is stable — `pickBoxHandle`
+* and the scale-drag transition (`handle-drag.ts`) key off it, and the scale
+* anchor is always the opposite corner, `(index + 2) % 4`.
+*/
+function boxCorners(box) {
+	const { center, halfWidth, halfHeight, angle } = box;
+	return [
+		[-halfWidth, -halfHeight],
+		[halfWidth, -halfHeight],
+		[halfWidth, halfHeight],
+		[-halfWidth, halfHeight]
+	].map(([x, y]) => {
+		const [rx, ry] = rotate(x, y, angle);
+		return [center[0] + rx, center[1] + ry];
+	});
+}
+/**
+* Where the rotate grip sits: `offset` pixels (default `ROTATE_GRIP_OFFSET_PX`)
+* above the top-edge midpoint, along the box's local "up" direction, so the
+* grip stays glued to the box (rotates with it) rather than floating at a
+* fixed screen offset. The label transform box passes its own tighter
+* clearance (`LABEL_ROTATE_GRIP_OFFSET_PX`).
+*/
+function rotateGripPixel(box, offset = 28) {
+	const { center, halfHeight, angle } = box;
+	const [rx, ry] = rotate(0, -(halfHeight + offset), angle);
+	return [center[0] + rx, center[1] + ry];
+}
+/**
+* Point-in-oriented-rectangle test, used to start a body (translate) drag
+* when the pointer goes down inside the box but not on a corner/rotate grip.
+* De-rotates `pixel` into the box's local frame about `box.center` and
+* compares against the half-extents.
+*/
+function pointInBox(box, pixel) {
+	const { center, halfWidth, halfHeight, angle } = box;
+	const [lx, ly] = rotate(pixel[0] - center[0], pixel[1] - center[1], -angle);
+	return Math.abs(lx) <= halfWidth && Math.abs(ly) <= halfHeight;
+}
+/** Plain 2D distance between two pixel coordinates. */
+function pixelDistance$1(a, b) {
+	return Math.hypot(a[0] - b[0], a[1] - b[1]);
+}
+/**
+* Pick what part of the box, if any, `pixel` hits — corners first, then the
+* rotate grip, then plain containment (body drag). Corners and the rotate
+* grip use `tolerance` pixels; body containment is exact (`pointInBox`), so a
+* click just outside the box never starts a body drag. Returns `null` when
+* nothing matches.
+*/
+function pickBoxHandle(box, pixel, tolerance) {
+	const corners = boxCorners(box);
+	for (let i = 0; i < corners.length; i++) if (pixelDistance$1(corners[i], pixel) <= tolerance) return {
+		kind: "scale",
+		index: i
+	};
+	if (pixelDistance$1(rotateGripPixel(box), pixel) <= tolerance) return { kind: "rotate" };
+	if (pointInBox(box, pixel)) return { kind: "body" };
+	return null;
+}
+//#endregion
 //#region src/tactical-draw/handles.ts
 /**
 * Midpoint of the segment between two positions, in lonLat. The single source
@@ -2698,9 +2838,6 @@ function toFeatures(handles, featureIdPrefix, interactionStyle) {
 		};
 	});
 }
-function pixelDistance$2(a, b) {
-	return Math.hypot(a[0] - b[0], a[1] - b[1]);
-}
 /**
 * The pick projection of `buildHandleSet` (ADR-0016): the first handle within
 * `tolerance` pixels of `pixel`, tested in the set's priority order. Because
@@ -2714,7 +2851,7 @@ function pixelDistance$2(a, b) {
 function pickHandle(handles, pixel, tolerance, toPixel) {
 	for (const handle of handles) {
 		const projected = toPixel(handle.position);
-		if (projected && pixelDistance$2(projected, pixel) <= tolerance) return handle;
+		if (projected && pixelDistance$1(projected, pixel) <= tolerance) return handle;
 	}
 	return null;
 }
@@ -2732,139 +2869,6 @@ function constrainRotation(angle) {
 	return Math.round(angle / CONSTRAINED_ROTATION_STEP) * CONSTRAINED_ROTATION_STEP;
 }
 //#endregion
-//#region src/tactical-draw/transform-box.ts
-/**
-* The uniform scale factor and rotation delta a box implies relative to a
-* pre-drag box, given the gesture kind. A `body` translate reports neither
-* (1, 0). Consumed both by point symbols (size/rotation) and by Text graphics
-* (folding the delta into rotation/size options); the delta is pivot-
-* independent so either can apply it without knowing the box center.
-*/
-function boxScaleRotation(kind, box, preDragBox) {
-	return {
-		scale: kind === "scale" ? Math.max(box.halfWidth / preDragBox.halfWidth, box.halfHeight / preDragBox.halfHeight) : 1,
-		rotation: kind === "rotate" ? box.angle - preDragBox.angle : 0
-	};
-}
-function rotate(x, y, angle) {
-	const cos = Math.cos(angle);
-	const sin = Math.sin(angle);
-	return [x * cos - y * sin, x * sin + y * cos];
-}
-/**
-* Fit an oriented `TransformBox` around `pixels` at a caller-chosen `angle`.
-* Rotates the points by `-angle` about their centroid, takes the axis-aligned
-* bounding box in that de-rotated frame, then re-expresses the result as an
-* oriented box at `angle` — so the box always has exactly the requested tilt,
-* sized to just contain the (de-rotated) points. Half-dimensions are floored
-* at `MIN_HALF_SIZE_PX` so a degenerate selection still yields a drawable,
-* pickable box. Returns `null` for an empty list — there is nothing to fit.
-*
-* `padding` (pixels, default `0`) is added to `halfWidth`/`halfHeight` *after*
-* the `MIN_HALF_SIZE_PX` floor, on every side, without moving `center` — the
-* `InteractionStyle.boxPadding` knob (ADR-0017) so the box doesn't tightly hug
-* the rendered geometry. Everything downstream that reads a fitted box
-* (`boxCorners`, `rotateGripPixel`, `pointInBox`, `pickBoxHandle`) derives from
-* `halfWidth`/`halfHeight` alone, so the padding flows through to corner
-* placement, the rotate grip, and picking automatically — no other function
-* needs to know about it.
-*/
-function fitTransformBox(pixels, angle, padding = 0) {
-	if (pixels.length === 0) return null;
-	let cx = 0;
-	let cy = 0;
-	for (const p of pixels) {
-		cx += p[0];
-		cy += p[1];
-	}
-	cx /= pixels.length;
-	cy /= pixels.length;
-	let minX = Infinity;
-	let minY = Infinity;
-	let maxX = -Infinity;
-	let maxY = -Infinity;
-	for (const p of pixels) {
-		const [rx, ry] = rotate(p[0] - cx, p[1] - cy, -angle);
-		if (rx < minX) minX = rx;
-		if (rx > maxX) maxX = rx;
-		if (ry < minY) minY = ry;
-		if (ry > maxY) maxY = ry;
-	}
-	const localCenterX = (minX + maxX) / 2;
-	const localCenterY = (minY + maxY) / 2;
-	const halfWidth = Math.max((maxX - minX) / 2, 1) + padding;
-	const halfHeight = Math.max((maxY - minY) / 2, 1) + padding;
-	const [ox, oy] = rotate(localCenterX, localCenterY, angle);
-	return {
-		center: [cx + ox, cy + oy],
-		halfWidth,
-		halfHeight,
-		angle
-	};
-}
-/**
-* The box's 4 corners in screen pixels: `[topLeft, topRight, bottomRight,
-* bottomLeft]` in the box's local (pre-rotation) frame, then rotated by
-* `box.angle` about `box.center`. Corner index is stable — `pickBoxHandle`
-* and the scale-drag transition (`handle-drag.ts`) key off it, and the scale
-* anchor is always the opposite corner, `(index + 2) % 4`.
-*/
-function boxCorners(box) {
-	const { center, halfWidth, halfHeight, angle } = box;
-	return [
-		[-halfWidth, -halfHeight],
-		[halfWidth, -halfHeight],
-		[halfWidth, halfHeight],
-		[-halfWidth, halfHeight]
-	].map(([x, y]) => {
-		const [rx, ry] = rotate(x, y, angle);
-		return [center[0] + rx, center[1] + ry];
-	});
-}
-/**
-* Where the rotate grip sits: `offset` pixels (default `ROTATE_GRIP_OFFSET_PX`)
-* above the top-edge midpoint, along the box's local "up" direction, so the
-* grip stays glued to the box (rotates with it) rather than floating at a
-* fixed screen offset. The label transform box passes its own tighter
-* clearance (`LABEL_ROTATE_GRIP_OFFSET_PX`).
-*/
-function rotateGripPixel(box, offset = 28) {
-	const { center, halfHeight, angle } = box;
-	const [rx, ry] = rotate(0, -(halfHeight + offset), angle);
-	return [center[0] + rx, center[1] + ry];
-}
-/**
-* Point-in-oriented-rectangle test, used to start a body (translate) drag
-* when the pointer goes down inside the box but not on a corner/rotate grip.
-* De-rotates `pixel` into the box's local frame about `box.center` and
-* compares against the half-extents.
-*/
-function pointInBox(box, pixel) {
-	const { center, halfWidth, halfHeight, angle } = box;
-	const [lx, ly] = rotate(pixel[0] - center[0], pixel[1] - center[1], -angle);
-	return Math.abs(lx) <= halfWidth && Math.abs(ly) <= halfHeight;
-}
-function pixelDistance$1(a, b) {
-	return Math.hypot(a[0] - b[0], a[1] - b[1]);
-}
-/**
-* Pick what part of the box, if any, `pixel` hits — corners first, then the
-* rotate grip, then plain containment (body drag). Corners and the rotate
-* grip use `tolerance` pixels; body containment is exact (`pointInBox`), so a
-* click just outside the box never starts a body drag. Returns `null` when
-* nothing matches.
-*/
-function pickBoxHandle(box, pixel, tolerance) {
-	const corners = boxCorners(box);
-	for (let i = 0; i < corners.length; i++) if (pixelDistance$1(corners[i], pixel) <= tolerance) return {
-		kind: "scale",
-		index: i
-	};
-	if (pixelDistance$1(rotateGripPixel(box), pixel) <= tolerance) return { kind: "rotate" };
-	if (pointInBox(box, pixel)) return { kind: "body" };
-	return null;
-}
-//#endregion
 //#region src/tactical-draw/handle-drag.ts
 function clonePoints(points) {
 	return points.map((p) => [...p]);
@@ -3914,8 +3918,11 @@ const ALLOWED_EDIT_MODES = new Set([
 *  - close / abort / signal / preempt / destroy paths
 */
 function runEdit(opts) {
-	const { adapter, measure, graphicsLayer, previewLayer, guideLayer, handlesLayer, graphicsStyle, signal, closeOnClickAway = true, modes: initialModes, interactionStyle, onSession, handleIdPrefix, guide: guideOpt, settleToGraphics, publishWorkingGraphic, onSettled, onClickAwayGraphicsPick, snap } = opts;
-	const renderOpts = graphicsStyle ? { graphicsStyle } : void 0;
+	const { adapter, measure, graphicsLayer, previewLayer, guideLayer, handlesLayer, graphicsStyle, symbolColors, signal, closeOnClickAway = true, modes: initialModes, interactionStyle, onSession, handleIdPrefix, guide: guideOpt, settleToGraphics, publishWorkingGraphic, onSettled, onClickAwayGraphicsPick, snap } = opts;
+	const renderOpts = {
+		graphicsStyle,
+		symbolColors
+	};
 	let sizeAnchor = opts.sizeAnchor ?? defaultSizeAnchor(measure);
 	const metadata = getControlMeasureMetadata(measure.kind);
 	const rule = metadata.rule;
@@ -5181,7 +5188,7 @@ var ImageCapabilityRequiredError = class ImageCapabilityRequiredError extends Er
 	}
 };
 //#endregion
-//#region src/tactical-draw/point-symbol-rendering.ts
+//#region src/point-symbol-size.ts
 function effectivePointSymbolPixelSize(symbol, resolution) {
 	if (symbol.size.unit === "pixels") return symbol.size.value;
 	if (resolution === void 0 || resolution <= 0) return symbol.size.value;
@@ -5193,10 +5200,221 @@ function pointSymbolPixelScale(symbol, render, resolution) {
 	if (!Number.isFinite(render.octagonSize) || render.octagonSize <= 0) throw new TypeError("PointSymbolRender.octagonSize must be a positive finite number");
 	return effectivePointSymbolPixelSize(symbol, resolution) / render.octagonSize;
 }
+//#endregion
+//#region src/point-symbol-offset.ts
+const EPSILON = 1e-7;
+const distance = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1]);
+/** Trim from the symbol attachment end, including across a junction when necessary. */
+function padAnchor(path, padding) {
+	if (!Number.isFinite(padding) || padding <= 0) return path;
+	const trimmed = [...path];
+	while (trimmed.length > 1) {
+		const start = trimmed.shift();
+		const end = trimmed[0];
+		const length = distance(start, end);
+		if (length > padding) {
+			const fraction = padding / length;
+			trimmed.unshift([start[0] + (end[0] - start[0]) * fraction, start[1] + (end[1] - start[1]) * fraction]);
+			return trimmed;
+		}
+		padding -= length;
+	}
+	return [];
+}
+/** Pure layout: projection input/output is in CSS pixels, including document contexts. */
+function resolvePointSymbolOffset(symbol, render, view) {
+	const actual = view.getPixelFromCoordinate(symbol.position);
+	if (!actual) return null;
+	const scale = pointSymbolPixelScale(symbol, render, view.getResolution());
+	const angle = symbol.rotation - view.getBearing();
+	const metadata = render.offset;
+	const registration = metadata?.ordinaryRegistration ?? render.octagonAnchor;
+	const shift = rotate((registration.x - render.anchor.x) * scale, (registration.y - render.anchor.y) * scale, angle);
+	const ordinaryDisplay = [actual[0] + shift[0], actual[1] + shift[1]];
+	const layout = {
+		render,
+		resource: pointSymbolResource(render),
+		bodyOpacity: (symbol.style?.opacity ?? 1) * (symbol.style?.overallOpacity ?? 1),
+		rotation: angle,
+		actual,
+		display: ordinaryDisplay,
+		imageAnchor: actual,
+		ordinaryDisplay,
+		path: [],
+		kind: "ordinary",
+		status: "ok",
+		scale,
+		connectorStyle: {
+			strokeColor: symbol.offset?.style?.strokeColor ?? metadata?.strokeColor ?? "#000000",
+			opacity: (symbol.offset?.style?.opacity ?? symbol.style?.opacity ?? 1) * (symbol.style?.overallOpacity ?? 1),
+			strokeWidth: symbol.offset?.style?.strokeWidth ?? (metadata?.strokeWidth ?? 4) * scale,
+			strokeDash: [...symbol.offset?.style?.strokeDash ?? []]
+		}
+	};
+	if (!symbol.offset) return layout;
+	const { placement, connector, anchorPadding = 0 } = symbol.offset;
+	if (!metadata || connector !== "direct" && !metadata.indicator) return {
+		...layout,
+		status: "unsupported-presentation"
+	};
+	const display = placement.mode === "ground" ? view.getPixelFromCoordinate(placement.position) : [ordinaryDisplay[0] + placement.offset[0], ordinaryDisplay[1] + placement.offset[1]];
+	if (!display) return {
+		...layout,
+		status: "unsupported-presentation"
+	};
+	if (distance(display, ordinaryDisplay) < EPSILON) return layout;
+	const body = metadata.body;
+	const offset = rotate((metadata.attachment.x - body.anchor.x) * scale, (metadata.attachment.y - body.anchor.y) * scale, angle);
+	const attachment = [display[0] + offset[0], display[1] + offset[1]];
+	const resolved = {
+		...layout,
+		render: body,
+		resource: pointSymbolResource(body),
+		display,
+		imageAnchor: display,
+		attachment
+	};
+	if (connector === "direct") return {
+		...resolved,
+		kind: "direct",
+		path: padAnchor(distance(attachment, actual) < EPSILON ? [] : [attachment, actual], anchorPadding)
+	};
+	const indicator = metadata.indicator;
+	const rawDirection = rotate(indicator.direction.x, indicator.direction.y, angle);
+	const norm = Math.hypot(...rawDirection);
+	const direction = [rawDirection[0] / norm, rawDirection[1] / norm];
+	const dx = actual[0] - attachment[0], dy = actual[1] - attachment[1];
+	const forward = dx * direction[0] + dy * direction[1];
+	if (Math.abs(dx * direction[1] - dy * direction[0]) < EPSILON && forward >= (indicator.minLength ?? 0) * scale) return {
+		...resolved,
+		direction,
+		kind: "indicator-only",
+		path: padAnchor([attachment, actual], anchorPadding)
+	};
+	const length = symbol.offset.indicatorLength !== void 0 ? symbol.offset.indicatorLength * render.octagonSize : indicator.length;
+	const junction = [attachment[0] + direction[0] * length * scale, attachment[1] + direction[1] * length * scale];
+	return {
+		...resolved,
+		direction,
+		junction,
+		kind: "with-extension",
+		status: "ok",
+		path: padAnchor(distance(junction, actual) < EPSILON ? [attachment, junction] : [
+			attachment,
+			junction,
+			actual
+		], anchorPadding)
+	};
+}
+/**
+* Authored indicator length that puts the junction at `point`: the forward
+* projection onto the attachment ray, expressed as a multiple of the displayed
+* octagon size and clamped to a non-negative length.
+*/
+function indicatorLengthAt(point, attachment, direction, scale, octagonSize) {
+	const forward = (point[0] - attachment[0]) * direction[0] + (point[1] - attachment[1]) * direction[1];
+	return Math.max(0, forward / (scale * octagonSize));
+}
+/** Set body placement without changing the authoritative coordinate. */
+function placePointSymbol(symbol, render, view, display, mode = symbol.offset?.placement.mode ?? "screen-relative") {
+	if (!render.offset) throw new TypeError("This renderer does not support offset placement");
+	const ordinary = resolvePointSymbolOffset({
+		...symbol,
+		offset: void 0
+	}, render, view);
+	if (!ordinary) throw new RangeError("Point symbol cannot be projected in this view");
+	const next = clonePointSymbol(symbol);
+	const coordinate = mode === "ground" ? view.getCoordinateFromPixel?.(display) : void 0;
+	if (mode === "ground" && !coordinate) throw new RangeError("Ground placement requires inverse projection");
+	next.offset = {
+		...next.offset,
+		connector: next.offset?.connector ?? (render.offset.indicator ? "auto" : "direct"),
+		placement: mode === "ground" ? {
+			mode,
+			position: [...coordinate]
+		} : {
+			mode,
+			offset: [display[0] - ordinary.display[0], display[1] - ordinary.display[1]]
+		}
+	};
+	return next;
+}
+function convertPointSymbolPlacement(symbol, render, view, mode) {
+	const layout = resolvePointSymbolOffset(symbol, render, view);
+	if (!layout || layout.status === "unsupported-presentation") throw new TypeError("Offset presentation is unavailable");
+	return placePointSymbol(symbol, render, view, layout.display, mode);
+}
+/** Explicit alignment, also used with hysteresis by pointer editing. */
+function alignPointSymbolIndicator(symbol, render, view) {
+	const layout = resolvePointSymbolOffset(symbol, render, view);
+	if (!layout?.attachment || !layout.direction || !render.offset?.indicator) return symbol;
+	const d = layout.direction;
+	const delta = [layout.actual[0] - layout.attachment[0], layout.actual[1] - layout.attachment[1]];
+	const forward = Math.max((render.offset.indicator.minLength ?? 0) * layout.scale, delta[0] * d[0] + delta[1] * d[1]);
+	return placePointSymbol(symbol, render, view, [layout.display[0] + delta[0] - forward * d[0], layout.display[1] + delta[1] - forward * d[1]]);
+}
+function movePointSymbolLocation(symbol, render, view, position) {
+	const before = resolvePointSymbolOffset(symbol, render, view);
+	let next = {
+		...clonePointSymbol(symbol),
+		position: [...position]
+	};
+	if (!symbol.offset || !before || before.status === "unsupported-presentation") return next;
+	next = placePointSymbol(next, render, view, before.display);
+	const after = resolvePointSymbolOffset(next, render, view);
+	if (before.junction && after?.attachment && after.direction && symbol.offset.indicatorLength !== void 0) next.offset.indicatorLength = indicatorLengthAt(before.junction, after.attachment, after.direction, after.scale, render.octagonSize);
+	return next;
+}
+/** Canonical resource metadata shared by native adapters and external exporters. */
+function pointSymbolResource(render) {
+	return {
+		id: render.resourceId,
+		svg: render.svg,
+		width: render.width,
+		height: render.height,
+		anchor: [render.anchor.x, render.anchor.y],
+		coreRect: {
+			x: render.octagonAnchor.x - render.octagonSize / 2,
+			y: render.octagonAnchor.y - render.octagonSize / 2,
+			width: render.octagonSize,
+			height: render.octagonSize
+		}
+	};
+}
+/**
+* Convert a resolved CSS-pixel layout to output units (e.g. 25.4 / 96 for mm).
+* Scales positions, body scale, line width and dashes together, including the
+* already-resolved offset and padding. Canonical resources, direction, rotation
+* and opacity stay unchanged. Does not mutate the input or authored symbol.
+*/
+function scalePointSymbolLayout(layout, factor) {
+	if (!Number.isFinite(factor) || factor <= 0) throw new RangeError("Layout scale factor must be positive and finite");
+	const point = ([x, y]) => [x * factor, y * factor];
+	return {
+		...layout,
+		actual: point(layout.actual),
+		display: point(layout.display),
+		imageAnchor: point(layout.imageAnchor),
+		ordinaryDisplay: point(layout.ordinaryDisplay),
+		attachment: layout.attachment && point(layout.attachment),
+		junction: layout.junction && point(layout.junction),
+		path: layout.path.map(point),
+		scale: layout.scale * factor,
+		connectorStyle: {
+			...layout.connectorStyle,
+			strokeWidth: layout.connectorStyle.strokeWidth * factor,
+			strokeDash: layout.connectorStyle.strokeDash.map((length) => length * factor)
+		}
+	};
+}
+//#endregion
+//#region src/tactical-draw/point-symbol-rendering.ts
 /** Complete rotated logical footprint for selection and transform chrome. */
 function pointSymbolFootprint(symbol, render, adapter) {
-	const anchor = adapter.getPixelFromCoordinate(symbol.position);
-	if (!anchor) return null;
+	const layout = resolvePointSymbolOffset(symbol, render, adapter);
+	if (!layout) return null;
+	const anchor = layout.imageAnchor;
+	render = layout.render;
 	const scale = pointSymbolPixelScale(symbol, render, adapter.getResolution());
 	const angle = symbol.rotation - adapter.getBearing();
 	const centerOffsetX = (render.width / 2 - render.anchor.x) * scale;
@@ -5211,27 +5429,64 @@ function pointSymbolFootprint(symbol, render, adapter) {
 	};
 	return {
 		box,
-		corners: boxCorners(box)
+		corners: boxCorners(box),
+		connector: layout.path
 	};
 }
+function resolveAdapterLayout(symbol, render, adapter) {
+	let layout = resolvePointSymbolOffset(symbol, render, adapter);
+	if (layout && layout.kind !== "ordinary" && (!adapter.getCoordinateFromPixel?.(layout.imageAnchor) || layout.path.some((p) => !adapter.getCoordinateFromPixel?.(p)))) {
+		const ordinary = resolvePointSymbolOffset({
+			...symbol,
+			offset: void 0
+		}, render, adapter);
+		layout = ordinary ? {
+			...ordinary,
+			status: "unsupported-presentation"
+		} : null;
+	}
+	return layout;
+}
 function renderPointSymbolForAdapter(adapter, capability, symbol) {
-	const render = capability.render(symbol);
-	return {
-		render,
-		resource: {
-			id: render.resourceId,
-			svg: render.svg,
-			width: render.width,
-			height: render.height,
-			anchor: [render.anchor.x, render.anchor.y],
-			coreRect: {
-				x: render.octagonAnchor.x - render.octagonSize / 2,
-				y: render.octagonAnchor.y - render.octagonSize / 2,
-				width: render.octagonSize,
-				height: render.octagonSize
+	const intrinsic = capability.render(symbol);
+	const layout = resolveAdapterLayout(symbol, intrinsic, adapter);
+	const render = layout?.render ?? intrinsic;
+	const feature = pointSymbolFeature(symbol, render, adapter.getResolution());
+	const coordinate = layout && adapter.getCoordinateFromPixel?.(layout.imageAnchor);
+	if (coordinate) feature.geometry = {
+		type: "Point",
+		coordinates: coordinate
+	};
+	feature.properties.offsetStatus = layout?.status ?? "unsupported-presentation";
+	feature.properties.connectorKind = layout?.kind ?? "ordinary";
+	if (symbol.offset) {
+		feature.properties.iconScreenRotation = symbol.rotation - adapter.getBearing();
+		delete feature.properties.iconSizeMeters;
+		delete feature.properties.iconOctagonSize;
+	}
+	const features = [];
+	if (layout && layout.path.length > 1 && adapter.getCoordinateFromPixel) {
+		const coordinates = layout.path.map((p) => adapter.getCoordinateFromPixel(p));
+		if (coordinates.every((p) => p !== null)) features.push({
+			type: "Feature",
+			id: `${symbol.id}:connector`,
+			geometry: {
+				type: "LineString",
+				coordinates
+			},
+			properties: {
+				graphicId: symbol.id,
+				graphicKind: "point-symbol",
+				style: resolveSymbolColor(layout.connectorStyle, false)
 			}
-		},
-		feature: pointSymbolFeature(symbol, render, adapter.getResolution())
+		});
+	}
+	features.push(feature);
+	return {
+		render: intrinsic,
+		layout,
+		features,
+		resource: layout?.resource ?? pointSymbolResource(render)
 	};
 }
 function pointSymbolFeature(symbol, render, resolution) {
@@ -5255,7 +5510,7 @@ function pointSymbolFeature(symbol, render, resolution) {
 			iconId: render.resourceId,
 			iconScale: pointSymbolPixelScale(symbol, render, resolution),
 			iconRotation: symbol.rotation,
-			iconOpacity: symbol.style?.opacity ?? 1,
+			iconOpacity: (symbol.style?.opacity ?? 1) * (symbol.style?.overallOpacity ?? 1),
 			...groundSizeProperties
 		}
 	};
@@ -5455,10 +5710,13 @@ function defaultGroupSizeAnchor(graphics) {
 *    a live session without a session boundary
 */
 function runGroupTransform(opts) {
-	const { adapter, capability, imageCapability, graphics, graphicsLayer, previewLayer, handlesLayer, graphicsStyle, signal, closeOnClickAway = true, interactionStyle, onSession, handleIdPrefix, publishWorkingGraphics, settleWorkingGraphics, isOnGraphicsLayer, onSettled, onClickAwayGraphicsPick } = opts;
+	const { adapter, capability, imageCapability, graphics, graphicsLayer, previewLayer, handlesLayer, graphicsStyle, symbolColors, signal, closeOnClickAway = true, interactionStyle, onSession, handleIdPrefix, publishWorkingGraphics, settleWorkingGraphics, isOnGraphicsLayer, onSettled, onClickAwayGraphicsPick } = opts;
 	assertCapabilityFor(graphics);
 	validateImageResources(graphics);
-	const renderOpts = graphicsStyle ? { graphicsStyle } : void 0;
+	const renderOpts = {
+		graphicsStyle,
+		symbolColors
+	};
 	let sizeAnchor = opts.sizeAnchor ?? defaultGroupSizeAnchor(graphics);
 	/** Throw synchronously if any graphic in `list` is a point symbol and no capability was supplied. */
 	function assertCapabilityFor(list) {
@@ -5482,6 +5740,7 @@ function runGroupTransform(opts) {
 	function createMemberState(graphic) {
 		if (isAnchoredGraphic(graphic)) {
 			const editStartPoints = [[...graphic.position]];
+			if (isPointSymbol(graphic) && graphic.offset?.placement.mode === "ground") editStartPoints.push([...graphic.offset.placement.position]);
 			return {
 				graphic,
 				editStartPoints,
@@ -5534,6 +5793,14 @@ function runGroupTransform(opts) {
 		symbol.position = [...member.workingPoints[0]];
 		symbol.size = resizePointSymbolSize(symbol.size, member.workingSize);
 		symbol.rotation = member.workingRotation;
+		if (symbol.offset?.placement.mode === "ground") symbol.offset.placement.position = [...member.workingPoints[1]];
+		else if (symbol.offset?.placement.mode === "screen-relative") {
+			const [x, y] = symbol.offset.placement.offset;
+			const angle = member.workingRotation - member.editStartRotation;
+			const scale = member.workingSize / member.editStartSize;
+			const [rx, ry] = rotate(x, y, angle);
+			symbol.offset.placement.offset = [rx * scale, ry * scale];
+		}
 		return symbol;
 	}
 	function buildWorkingImage(member) {
@@ -5724,7 +5991,7 @@ function runGroupTransform(opts) {
 					const symbol = buildWorkingPointSymbol(member);
 					const plan = renderPointSymbolForAdapter(adapter, capability, symbol);
 					iconResources = [plan.resource];
-					features = [plan.feature];
+					features = plan.features;
 					const footprint = pointSymbolFootprint(symbol, plan.render, adapter);
 					if (footprint) boxPixels = footprint.corners;
 				} else {
@@ -6291,7 +6558,7 @@ function runPointSymbolDraw(options) {
 		const plan = renderPointSymbolForAdapter(adapter, capability, build(PREVIEW_ID$1, latestPosition));
 		ctx.writeLayer(previewLayer, [{
 			id: PREVIEW_ID$1,
-			features: [plan.feature],
+			features: plan.features,
 			iconResources: [plan.resource]
 		}]);
 	};
@@ -6331,9 +6598,19 @@ function runPointSymbolDraw(options) {
 }
 //#endregion
 //#region src/tactical-draw/point-symbol-edit-controller.ts
+/**
+* Rotating or resizing a displaced symbol keeps its body where the user sees
+* it (ADR-0054 rules 7/8). Both the pointer path and `updateGraphic` route
+* through here so the invariant is enforced in one place.
+*/
+function preserveDisplayPlacement(next, render, view, layout) {
+	if (!next.offset || !render.offset) return next;
+	if (!layout || layout.status === "unsupported-presentation") return next;
+	return placePointSymbol(next, render, view, layout.display);
+}
 function normalisePointModes(input) {
 	const modes = input ?? ["transform"];
-	for (const mode of modes) if (mode !== "transform" && mode !== "delete") throw new TypeError(`Point-symbol editing does not support mode "${mode}"`);
+	for (const mode of modes) if (mode !== "transform" && mode !== "delete" && mode !== "offset") throw new TypeError(`Point-symbol editing does not support mode "${mode}"`);
 	return modes.includes("delete") ? ["delete"] : [...new Set(modes)];
 }
 function symbolBox(adapter, symbol, rendered, padding = 0) {
@@ -6347,11 +6624,12 @@ function symbolBox(adapter, symbol, rendered, padding = 0) {
 }
 function runPointSymbolEdit(opts) {
 	const { adapter, capability, symbol, graphicsLayer, previewLayer, handlesLayer, signal, closeOnClickAway = true, interactionStyle, onSession, handleIdPrefix, settleToGraphics, publishWorkingGraphic, wasOnGraphicsLayer, onSettled, onClickAwayGraphicsPick, snap } = opts;
-	let modes = normalisePointModes(opts.modes);
+	let modes = normalisePointModes(opts.modes ?? (symbol.offset ? ["transform", "offset"] : ["transform"]));
 	let usesGraphicStack = wasOnGraphicsLayer;
 	let working = clonePointSymbol(symbol);
 	let dirty = false;
 	let box = null;
+	let currentLayout = null;
 	let drag = null;
 	let ctx;
 	let driver;
@@ -6373,21 +6651,48 @@ function runPointSymbolEdit(opts) {
 	const render = () => {
 		if (ctx.settled) return;
 		const plan = renderPointSymbolForAdapter(adapter, capability, working);
+		currentLayout = plan.layout;
 		const nextBox = symbolBox(adapter, working, plan.render, interactionStyle?.boxPadding);
 		const handles = [];
 		if (modes.includes("transform") && nextBox) {
 			handles.push(boxOutlineFeature(nextBox, (pixel) => driver.fromPixel(pixel), `${handleIdPrefix}:box-outline`, interactionStyle?.boxOutline));
 			handles.push(...toFeatures(boxToHandles(nextBox, (pixel) => driver.fromPixel(pixel)), handleIdPrefix, interactionStyle));
 		}
+		if (modes.includes("offset") && working.offset && plan.layout?.status !== "unsupported-presentation") {
+			[plan.layout?.actual, plan.layout?.junction].forEach((pixel, index) => {
+				if (!pixel) return;
+				handles.push(...toFeatures([{
+					kind: index === 0 ? "vertex" : "option",
+					index,
+					position: driver.fromPixel(pixel)
+				}], `${handleIdPrefix}:offset`, interactionStyle));
+			});
+			if (drag?.snapped && plan.layout?.attachment && plan.layout.direction) {
+				const a = plan.layout.attachment, d = plan.layout.direction;
+				handles.push({
+					type: "Feature",
+					id: `${handleIdPrefix}:alignment`,
+					geometry: {
+						type: "LineString",
+						coordinates: [driver.fromPixel([a[0] - 200 * d[0], a[1] - 200 * d[1]]), driver.fromPixel([a[0] + 200 * d[0], a[1] + 200 * d[1]])]
+					},
+					properties: { style: {
+						strokeColor: "#0284c7",
+						strokeWidth: 1,
+						strokeDash: [4, 4]
+					} }
+				});
+			}
+		}
 		publishWorkingGraphic({
 			id: working.id,
-			features: [plan.feature],
+			features: plan.features,
 			iconResources: [plan.resource]
 		});
 		if (usesGraphicStack) ctx.writeLayer(previewLayer, []);
 		else ctx.writeLayer(previewLayer, [{
 			id: `__td_point_symbol_edit_preview__:${working.id}`,
-			features: [plan.feature],
+			features: plan.features,
 			iconResources: [plan.resource]
 		}]);
 		box = nextBox;
@@ -6437,6 +6742,37 @@ function runPointSymbolEdit(opts) {
 	};
 	const session = {
 		history,
+		offset: {
+			get layout() {
+				return currentLayout ? structuredClone(currentLayout) : null;
+			},
+			get connectors() {
+				const metadata = capability.render(working).offset;
+				return !metadata ? [] : metadata.indicator ? ["auto", "direct"] : ["direct"];
+			},
+			setPlacement(mode) {
+				if (ctx.settled) return;
+				apply(convertPointSymbolPlacement(working, capability.render(working), adapter, mode), "programmatic", "Placement mode");
+			},
+			setConnector(connector) {
+				if (ctx.settled) return;
+				const intrinsic = capability.render(working);
+				if (!intrinsic.offset || connector !== "direct" && !intrinsic.offset.indicator) throw new TypeError("Unsupported connector");
+				const next = working.offset ? clonePointSymbol(working) : convertPointSymbolPlacement(working, intrinsic, adapter, "screen-relative");
+				next.offset.connector = connector;
+				apply(next, "programmatic", "Connector preference");
+			},
+			align() {
+				if (!ctx.settled) apply(alignPointSymbolIndicator(working, capability.render(working), adapter), "programmatic", "Align indicator");
+			},
+			reset() {
+				if (!ctx.settled) {
+					const next = clonePointSymbol(working);
+					delete next.offset;
+					apply(next, "programmatic", "Reset offset");
+				}
+			}
+		},
 		graphic: clonePointSymbol(symbol),
 		get workingGraphic() {
 			return clonePointSymbol(working);
@@ -6462,8 +6798,8 @@ function runPointSymbolEdit(opts) {
 			if (ctx.settled) return;
 			const next = updater(clonePointSymbol(working));
 			if (next.kind !== "point-symbol" || next.id !== symbol.id) throw new TypeError("updateGraphic must preserve point-symbol kind and id");
-			capability.render(next);
-			apply(next, "programmatic", "Update graphic");
+			const nextRender = capability.render(next);
+			apply(working.offset !== void 0 && next.offset !== void 0 && deepEqual(working.offset, next.offset) && deepEqual(working.position, next.position) && (working.rotation !== next.rotation || !deepEqual(working.size, next.size)) ? preserveDisplayPlacement(next, nextRender, adapter, currentLayout) : next, "programmatic", "Update graphic");
 		},
 		onChange(listener) {
 			if (ctx.settled) return () => {};
@@ -6479,41 +6815,87 @@ function runPointSymbolEdit(opts) {
 	};
 	const pointerAngle = (pixel, anchor) => Math.atan2(pixel[1] - anchor[1], pixel[0] - anchor[0]);
 	const onDown = (pixel, info) => {
-		if (ctx.settled || !box || !modes.includes("transform")) return;
-		const hit = pickBoxHandle(box, pixel, info?.hitTolerance ?? 12);
-		if (!hit) return;
-		const anchor = driver.toPixel(working.position);
-		if (!anchor) return;
+		if (ctx.settled || !box || !currentLayout || modes.includes("delete")) return;
+		let offsetMode = modes.includes("offset");
+		if (!offsetMode && !modes.includes("transform")) return;
+		const tolerance = info?.hitTolerance ?? 12;
+		const near = (point) => point && pixelDistance$1(point, pixel) <= tolerance;
+		let kind;
+		if (offsetMode && working.offset && currentLayout.status !== "unsupported-presentation") {
+			if (near(currentLayout.actual)) kind = "location";
+			else if (near(currentLayout.junction)) kind = "junction";
+		}
+		if (!kind) {
+			const hit = pickBoxHandle(box, pixel, tolerance);
+			if (hit?.kind === "body" || hit && modes.includes("transform")) kind = hit?.kind;
+		}
+		const render = capability.render(working);
+		const modifier = opts.offsetDragModifier?.();
+		if (kind === "body" && modifier && info?.[`${modifier}Key`] && currentLayout.status !== "unsupported-presentation" && render.offset) offsetMode = true;
+		if (!kind || offsetMode && !render.offset) return;
+		const anchor = kind === "body" || kind === "location" || !working.offset ? currentLayout.actual : currentLayout.display;
 		drag = {
-			kind: hit.kind,
+			kind,
+			offsetMode,
+			render,
+			layout: structuredClone(currentLayout),
+			snapped: false,
 			down: [...pixel],
 			start: clonePointSymbol(working),
 			anchor,
 			startPointerAngle: pointerAngle(pixel, anchor),
-			startDistance: Math.max(1, Math.hypot(pixel[0] - anchor[0], pixel[1] - anchor[1]))
+			startDistance: Math.max(1, pixelDistance$1(pixel, anchor))
 		};
 		driver.setDragPanEnabled(false);
 	};
 	const transformed = (pixel, info) => {
 		if (!drag) return null;
-		const next = clonePointSymbol(drag.start);
-		if (drag.kind === "body") {
+		let next = clonePointSymbol(drag.start);
+		const intrinsic = drag.render;
+		if (drag.kind === "body" && drag.offsetMode) {
+			const display = [drag.layout.display[0] + pixel[0] - drag.down[0], drag.layout.display[1] + pixel[1] - drag.down[1]];
+			next = placePointSymbol(next, intrinsic, adapter, display);
+			const aligned = alignPointSymbolIndicator(next, intrinsic, adapter);
+			const alignedLayout = resolvePointSymbolOffset(aligned, intrinsic, adapter);
+			const gap = alignedLayout ? pixelDistance$1(alignedLayout.display, display) : Infinity;
+			if (next.offset.connector === "auto" && gap <= (drag.snapped ? 10 : 6)) {
+				next = aligned;
+				drag.snapped = true;
+			} else drag.snapped = false;
+			return next;
+		}
+		if (drag.kind === "junction") {
+			const layout = drag.layout;
+			if (!layout.attachment || !layout.direction || !layout.junction || !next.offset) return null;
+			const desired = [layout.junction[0] + pixel[0] - drag.down[0], layout.junction[1] + pixel[1] - drag.down[1]];
+			next.offset.connector = "auto";
+			next.offset.indicatorLength = indicatorLengthAt(desired, layout.attachment, layout.direction, layout.scale, intrinsic.octagonSize);
+			return next;
+		}
+		if (drag.kind === "body" || drag.kind === "location") {
 			const unsnappedPosition = driver.fromPixel([drag.anchor[0] + pixel[0] - drag.down[0], drag.anchor[1] + pixel[1] - drag.down[1]]);
 			const anchorPixel = driver.toPixel(unsnappedPosition) ?? pixel;
-			next.position = (snap?.({
+			const position = (snap?.({
 				coordinate: unsnappedPosition,
 				pixel: anchorPixel,
 				interaction: "translate",
 				graphicId: symbol.id,
 				originalEvent: info?.native
 			}))?.coordinate ?? unsnappedPosition;
+			if (drag.kind === "location") return movePointSymbolLocation(next, intrinsic, adapter, position);
+			next.position = position;
+			if (next.offset?.placement.mode === "ground") {
+				const actual = driver.toPixel(position);
+				next = placePointSymbol(next, intrinsic, adapter, [drag.layout.display[0] + actual[0] - drag.layout.actual[0], drag.layout.display[1] + actual[1] - drag.layout.actual[1]]);
+			}
 		} else if (drag.kind === "rotate") {
 			const rotation = drag.start.rotation + pointerAngle(pixel, drag.anchor) - drag.startPointerAngle;
 			next.rotation = normalizeRotation(info?.shiftKey ? constrainRotation(rotation) : rotation);
 		} else {
-			const distance = Math.hypot(pixel[0] - drag.anchor[0], pixel[1] - drag.anchor[1]);
+			const distance = pixelDistance$1(pixel, drag.anchor);
 			next.size = resizePointSymbolSize(drag.start.size, Math.max(.1, drag.start.size.value * (distance / drag.startDistance)));
 		}
+		if (drag.kind === "rotate" || drag.kind === "scale") next = preserveDisplayPlacement(next, capability.render(next), adapter, drag.layout);
 		return next;
 	};
 	const onMove = (pixel, info) => {
@@ -6982,8 +7364,10 @@ var TacticalDraw = class {
 	handlesLayer;
 	ownedLayers;
 	graphicsStyle;
+	symbolColors;
 	defaultInteractionStyle;
 	generateId;
+	offsetDragModifier;
 	pointSymbols;
 	images;
 	snappingOptions;
@@ -7034,6 +7418,8 @@ var TacticalDraw = class {
 	transformCounter = 0;
 	/** Snapshot of the host's latest authoritative Graphic membership and order. */
 	lastRenderedMeasures = [];
+	/** Whether any last-rendered graphic reads the whole camera, not just scale. */
+	lastRenderedHasViewDependent = false;
 	snapGeometryFeatures = [];
 	/**
 	* Rendered graphics-layer groups, keyed on Graphic snapshot identity. Each
@@ -7072,6 +7458,8 @@ var TacticalDraw = class {
 	hasHighlightOutlines = false;
 	constructor(adapter, options) {
 		this.adapter = adapter;
+		this.offsetDragModifier = options?.offsetDragModifier ?? false;
+		this.symbolColors = options?.symbolColors ? { ...options.symbolColors } : void 0;
 		this.lastViewResolution = adapter.getResolution();
 		this.graphicsStyle = resolveStyleHints(BUILT_IN_GRAPHICS_STYLE, options?.graphicsStyle, void 0);
 		this.defaultInteractionStyle = options?.interactionStyle;
@@ -7097,6 +7485,11 @@ var TacticalDraw = class {
 		this.adapter.setLayerStyle(this.highlightLayer, guideToStyleOptions(this.baseHighlightStyle()));
 		this.adapter.onViewChange(this.handleViewChange);
 	}
+	/** Change the default shortcut for subsequent drags, including in an active edit. */
+	setOffsetDragModifier(modifier) {
+		this.assertAlive();
+		this.offsetDragModifier = modifier;
+	}
 	/** Replace snapping configuration without recreating the map adapter or façade. */
 	setSnappingOptions(options) {
 		this.assertAlive();
@@ -7127,15 +7520,15 @@ var TacticalDraw = class {
 	renderGraphicGroup(graphic) {
 		const cached = this.graphicGroupCache.get(graphic);
 		if (cached) {
-			if (!cached.resolutionDependent) return cached.group;
-			if (Object.is(cached.resolution, this.adapter.getResolution())) return cached.group;
+			if (cached.dependence === "none") return cached.group;
+			if (cached.dependence === "resolution" && Object.is(cached.resolution, this.adapter.getResolution())) return cached.group;
 		}
-		const resolutionDependent = graphicRendersFromViewState(graphic, this.adapter.scalesGroundPointSymbolsNatively === true);
-		const resolution = resolutionDependent ? this.adapter.getResolution() : void 0;
+		const dependence = graphicViewDependence(graphic, this.adapter.scalesGroundPointSymbolsNatively === true);
+		const resolution = dependence === "none" ? void 0 : this.adapter.getResolution();
 		const group = this.buildGraphicGroup(graphic);
 		this.graphicGroupCache.set(graphic, {
 			group,
-			resolutionDependent,
+			dependence,
 			resolution
 		});
 		return group;
@@ -7152,7 +7545,7 @@ var TacticalDraw = class {
 			const plan = renderPointSymbolForAdapter(this.adapter, this.pointSymbols, graphic);
 			return {
 				id: graphic.id,
-				features: [plan.feature],
+				features: plan.features,
 				iconResources: [plan.resource],
 				revision
 			};
@@ -7168,7 +7561,10 @@ var TacticalDraw = class {
 				revision
 			};
 		}
-		const render = renderMeasureForAdapter(this.adapter, graphic, { graphicsStyle: this.graphicsStyle });
+		const render = renderMeasureForAdapter(this.adapter, graphic, {
+			graphicsStyle: this.graphicsStyle,
+			symbolColors: this.symbolColors
+		});
 		return {
 			id: graphic.id,
 			features: render.features,
@@ -7230,11 +7626,11 @@ var TacticalDraw = class {
 		this.lastViewResolution = resolution;
 		if (!this.hasRendered) return;
 		this.renderHighlights();
-		if (!resolutionChanged) return;
+		const nativePointSymbolScaling = this.adapter.scalesGroundPointSymbolsNatively === true;
+		if (!resolutionChanged && !this.lastRenderedHasViewDependent) return;
 		const excluded = this.graphicsStackExcludedIds();
 		const visible = excluded.size > 0 ? this.lastRenderedMeasures.filter((m) => !excluded.has(m.id)) : this.lastRenderedMeasures;
-		const nativePointSymbolScaling = this.adapter.scalesGroundPointSymbolsNatively === true;
-		if (!visible.some((g) => graphicRendersFromViewState(g, nativePointSymbolScaling))) return;
+		if (!visible.some((g) => graphicViewDependence(g, nativePointSymbolScaling) !== "none")) return;
 		this.reconcileGraphicsStack(visible);
 	};
 	/**
@@ -7318,6 +7714,7 @@ var TacticalDraw = class {
 			}
 		}
 		this.lastRenderedMeasures = measures.slice();
+		this.lastRenderedHasViewDependent = this.lastRenderedMeasures.some((g) => graphicViewDependence(g, this.adapter.scalesGroundPointSymbolsNatively === true) === "view");
 		this.graphicStack.acknowledgeHostRender(measures);
 		if (activeEdit && "syncHostMembership" in activeEdit && measures.some((graphic) => graphic.id === activeEdit.measureId && graphic.kind === activeEdit.graphicKind)) activeEdit.syncHostMembership(true);
 		(this.activeTransform ?? this.activeTransformSessionRef)?.syncHostGraphics(measures);
@@ -7412,7 +7809,10 @@ var TacticalDraw = class {
 			if (!this.images) return null;
 			return imageFootprint(graphic, renderImageForAdapter(this.adapter, this.images, graphic).render, this.adapter)?.box ?? null;
 		}
-		const render = renderMeasureForAdapter(this.adapter, graphic, { graphicsStyle: this.graphicsStyle });
+		const render = renderMeasureForAdapter(this.adapter, graphic, {
+			graphicsStyle: this.graphicsStyle,
+			symbolColors: this.symbolColors
+		});
 		if (graphic.kind === "text") return fitTextFootprintFromFeatures(render.features, (lonLat) => this.adapter.getPixelFromCoordinate(lonLat), {
 			resolution: this.adapter.getResolution(),
 			bearing
@@ -7576,6 +7976,7 @@ var TacticalDraw = class {
 			previewLayer: this.previewLayer,
 			guideLayer: this.guideLayer,
 			graphicsStyle: this.graphicsStyle,
+			symbolColors: this.symbolColors,
 			generateId: () => measureDraft.id ?? this.generateId(),
 			signal: options?.signal,
 			measureOptions: measureDraft.options,
@@ -7594,6 +7995,7 @@ var TacticalDraw = class {
 			previewLayer: this.previewLayer,
 			guideLayer: this.guideLayer,
 			graphicsStyle: this.graphicsStyle,
+			symbolColors: this.symbolColors,
 			generateId: () => measureDraft.id ?? this.generateId(),
 			signal: options?.signal,
 			onSession: this.trackSession(options?.onSession),
@@ -7664,6 +8066,7 @@ var TacticalDraw = class {
 				adapter: this.adapter,
 				capability: this.pointSymbols,
 				symbol: measure,
+				offsetDragModifier: () => options?.offsetDragModifier ?? this.offsetDragModifier,
 				graphicsLayer: this.graphicsLayer,
 				previewLayer: this.previewLayer,
 				handlesLayer: this.handlesLayer,
@@ -7710,6 +8113,7 @@ var TacticalDraw = class {
 			guideLayer: this.guideLayer,
 			handlesLayer: this.handlesLayer,
 			graphicsStyle: this.graphicsStyle,
+			symbolColors: this.symbolColors,
 			signal: options?.signal,
 			closeOnClickAway: options?.closeOnClickAway,
 			modes: options?.modes,
@@ -7764,6 +8168,7 @@ var TacticalDraw = class {
 			previewLayer: this.previewLayer,
 			handlesLayer: this.handlesLayer,
 			graphicsStyle: this.graphicsStyle,
+			symbolColors: this.symbolColors,
 			signal: options?.signal,
 			closeOnClickAway: options?.closeOnClickAway,
 			interactionStyle: mergedInteractionStyle,
@@ -8133,23 +8538,28 @@ var TacticalDraw = class {
 		if (this.destroyed) throw new TacticalDrawDestroyedError();
 	}
 };
-function graphicRendersFromViewState(graphic, nativePointSymbolScaling) {
-	if (isPointSymbol(graphic)) return graphic.size.unit === "meters" && !nativePointSymbolScaling;
-	if (isImageGraphic(graphic)) return false;
-	return measureRendersFromViewState(graphic);
+/**
+* Classify what live view state a graphic's render reads. Offset point symbols
+* resolve their body and connector in pixel space, so they depend on the whole
+* camera rather than on scale alone.
+*/
+function graphicViewDependence(graphic, nativePointSymbolScaling) {
+	if (isPointSymbol(graphic)) {
+		if (graphic.offset) return "view";
+		return graphic.size.unit === "meters" && !nativePointSymbolScaling ? "resolution" : "none";
+	}
+	if (isImageGraphic(graphic)) return "none";
+	return measureRendersFromViewState(graphic) ? "resolution" : "none";
 }
 function normalisePointEditModes(modes) {
-	for (const mode of modes ?? ["transform"]) if (mode !== "transform" && mode !== "delete") throw new TypeError(`Point-symbol editing does not support mode "${mode}"`);
+	for (const mode of modes ?? ["transform"]) if (mode !== "transform" && mode !== "delete" && mode !== "offset") throw new TypeError(`Point-symbol editing does not support mode "${mode}"`);
 }
 /**
 * Built-in default graphics style. Ensures OL / MapLibre / Leaflet render
 * identically when neither host nor measure supplies a style — without it,
 * each engine falls through to its own native (and different) vector default.
 */
-const BUILT_IN_GRAPHICS_STYLE = {
-	color: "#000000",
-	strokeWidth: 2
-};
+const BUILT_IN_GRAPHICS_STYLE = { strokeWidth: 2 };
 /**
 * Built-in defaults for the interaction-affordance slots (ADR-0006, extended
 * for the ADR-0017 transform box). The scale (corner) grips and the rotate
@@ -8237,7 +8647,7 @@ function mergeSlot(base, override) {
 }
 function styleToStyleOptions(style) {
 	const out = {};
-	const strokeColor = style.strokeColor ?? style.color;
+	const strokeColor = style.strokeColor ?? style.color ?? DEFAULT_SYMBOL_COLOR;
 	if (strokeColor !== void 0) out.strokeColor = strokeColor;
 	if (style.strokeWidth !== void 0) out.strokeWidth = style.strokeWidth;
 	if (style.strokeDash !== void 0) out.strokeDash = [...style.strokeDash];
@@ -8526,4 +8936,4 @@ function nearestWorldCopyPosition(position, refLng) {
 	return [nearestWorldCopyLng(position[0], refLng), ...position.slice(1)];
 }
 //#endregion
-export { BaseMapAdapter, DEFAULT_LABEL_SIZE_PIXELS, DEFAULT_TEXT_SIZE_MAX_PIXELS, DEFAULT_TEXT_SIZE_MIN_PIXELS, HATCH_PATTERNS, ImageCapabilityRequiredError, MINE_PATTERN_TILE_SIZE, PointSymbolCapabilityRequiredError, PointerCallbackHub, TEXT_HALO_COLOR, TOUCH_HIT_TOLERANCE_PX, TacticalDraw, TacticalDrawAbortError, TacticalDrawDestroyedError, bindAbortable, cloneImageGraphic, clonePointSymbol, coerceHandleStyle, combineWithHostSignal, effectivePointSymbolPixelSize, evaluatePickCandidates, fillPatternImageDimension, fillPatternImageId, getSizeAnchor, hitTestFeature, hitTestIconFeature, ignoreAbort, imageFootprint, imageOpacity, isAnchoredGraphic, isImageGraphic, isMinePattern, isPointSymbol, isTacticalDrawAbortError, makeFillPatternImage, mergeNativeAndCachedPickFeatures, nearestWorldCopyLng, nearestWorldCopyPosition, normalizeImageGraphic, pickHitTolerance, pickPointerType, pointSymbolFootprint, renderOrderToVisualOrder, resizePointSymbolSize, resolveGroundTextSizePixels, resolvePickPresentation, resolveTextHaloWidth, resolveTextSizePixels, tryControlMeasureIdFromFeature, validateImageGraphic };
+export { BaseMapAdapter, DEFAULT_LABEL_SIZE_PIXELS, DEFAULT_TEXT_SIZE_MAX_PIXELS, DEFAULT_TEXT_SIZE_MIN_PIXELS, HATCH_PATTERNS, ImageCapabilityRequiredError, MINE_PATTERN_TILE_SIZE, PointSymbolCapabilityRequiredError, PointerCallbackHub, TEXT_HALO_COLOR, TOUCH_HIT_TOLERANCE_PX, TacticalDraw, TacticalDrawAbortError, TacticalDrawDestroyedError, alignPointSymbolIndicator, bindAbortable, cloneImageGraphic, clonePointSymbol, coerceHandleStyle, combineWithHostSignal, convertPointSymbolPlacement, effectivePointSymbolPixelSize, evaluatePickCandidates, fillPatternImageDimension, fillPatternImageId, getSizeAnchor, hitTestFeature, hitTestIconFeature, ignoreAbort, imageFootprint, imageOpacity, isAnchoredGraphic, isImageGraphic, isMinePattern, isPointSymbol, isTacticalDrawAbortError, makeFillPatternImage, mergeNativeAndCachedPickFeatures, movePointSymbolLocation, nearestWorldCopyLng, nearestWorldCopyPosition, normalizeImageGraphic, pickHitTolerance, pickPointerType, placePointSymbol, pointSymbolFootprint, pointSymbolResource, renderOrderToVisualOrder, resizePointSymbolSize, resolveGroundTextSizePixels, resolvePickPresentation, resolvePointSymbolOffset, resolveTextHaloWidth, resolveTextSizePixels, scalePointSymbolLayout, tryControlMeasureIdFromFeature, validateImageGraphic };