dsh-figmark 1.0.1 → 1.1.1

package/lib/client.js

@@ -25,6 +25,9 @@ window.__ModuleLoader__.load({
 			redo: "重做",
 			clear: "清空",
 			detail: "这个元素的详细说明",
+			addComment: "添加评论…",
+			pinSize: "标记大小",
+			weight: "线条粗细",
 			detailPlaceholder: "这一处具体要改什么（例如「这个标号应指向滑套 34」）",
 			summary: "总体目标",
 			summaryPlaceholder: "可选：这张图整体要往哪个方向改（智能体会连同下面逐条说明一起读）",
@@ -110,6 +113,9 @@ window.__ModuleLoader__.load({
 			redo: "Redo",
 			clear: "Clear",
 			detail: "What this element needs",
+			addComment: "Add a comment…",
+			pinSize: "Marker size",
+			weight: "Line weight",
 			detailPlaceholder: "What should change here (for example \"this numeral should point at the sleeve 34\")",
 			summary: "Overall goal",
 			summaryPlaceholder: "Optional: what this figure should become overall (the agent reads it with the marks below)",
@@ -253,6 +259,26 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/shared/annotation.ts
+		/** Thinnest stroke a mark can be drawn at, as a multiple of the default width. */
+		const WEIGHT_MIN = .5;
+		/**
+		* Hold a stroke weight inside the range the painter can draw.
+		*
+		* @param value - the weight to hold.
+		* @returns the value, pulled to the nearest end of the range.
+		*/
+		function clampWeight(value) {
+			return Math.min(4, Math.max(WEIGHT_MIN, value));
+		}
+		/**
+		* Whether a value is a stroke weight this plugin would write.
+		*
+		* @param value - the value to test.
+		* @returns true when it is one.
+		*/
+		function isWeight(value) {
+			return typeof value === "number" && Number.isFinite(value) && value >= .5 && value <= 4;
+		}
 		/**
 		* Suffix naming one page's files inside a paged document's name.
 		* @param page - 1-based page, or undefined for a single-surface figure.
@@ -989,13 +1015,46 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/render.ts
-		/** Stroke width of every mark, in figure pixels. */
+		/** Stroke width of a mark drawn at weight 1 on a reference-sized figure, in pixels. */
 		const STROKE_WIDTH = 2.5;
+		/**
+		* The stroke width one mark is drawn at.
+		*
+		* A mark's weight is a multiple of {@link STROKE_WIDTH}, so the default is the
+		* width marks have always had and a heavier mark is the same drawing with a
+		* thicker pen. The arrow's barbs are weighed by the same multiple, because an
+		* arrow drawn with a thick pen has a thick head.
+		*
+		* The figure's own unit multiplies everything drawn on it, so the same mark is a
+		* bold line on a thumbnail and a hairline on a scan — see `./scale`.
+		*
+		* @param mark - the mark to weigh.
+		* @param unit - the figure's size multiple, 1 for a reference-sized figure.
+		* @returns its stroke width in figure pixels.
+		*/
+		function strokeWidthOf(mark, unit = 1) {
+			return STROKE_WIDTH * (mark.weight ?? 1) * unit;
+		}
 		/** Arrow head length, in figure pixels. */
 		const ARROW_HEAD = 14;
 		/** Half-angle of the arrow head, in radians. */
 		const ARROW_SPREAD = Math.PI / 7;
 		/**
+		* Half-width of one pin's head, in figure pixels.
+		*
+		* A pin is a marker the reader compares against the line work, so it is sized like a
+		* stroke: by the figure's unit and by the mark's own weight. The weight is reused
+		* rather than given its own field because it already means "how big this mark is" to
+		* the reader, and one rail on the left is enough — a stroke and a pin are never the
+		* same mark, so the one number never has to mean two things at once.
+		* @param mark - the point mark.
+		* @param unit - the figure's size multiple.
+		* @returns its head's half-width in figure pixels.
+		*/
+		function pinRadiusOf(mark, unit = 1) {
+			return 10 * (mark.weight ?? 1) * unit;
+		}
+		/**
 		* How far a pin's head sits above its coordinate, as a multiple of its half-width.
 		*
 		* A map pin puts its *tip* on the coordinate it names, so the head stands clear of
@@ -1073,12 +1132,13 @@ window.__ModuleLoader__.load({
 		* @param points - the arrow's tail and tip.
 		* @returns tail, tip and both barbs; the stored points alone when it is half drawn.
 		*/
-		function arrowBarbs(points) {
+		function arrowBarbs(points, weight = 1, unit = 1) {
 			const [first, second] = points;
 			if (first === void 0 || second === void 0) return points;
 			const angle = Math.atan2(second[1] - first[1], second[0] - first[0]);
-			const left = [second[0] - ARROW_HEAD * Math.cos(angle - ARROW_SPREAD), second[1] - ARROW_HEAD * Math.sin(angle - ARROW_SPREAD)];
-			const right = [second[0] - ARROW_HEAD * Math.cos(angle + ARROW_SPREAD), second[1] - ARROW_HEAD * Math.sin(angle + ARROW_SPREAD)];
+			const head = ARROW_HEAD * weight * unit;
+			const left = [second[0] - head * Math.cos(angle - ARROW_SPREAD), second[1] - head * Math.sin(angle - ARROW_SPREAD)];
+			const right = [second[0] - head * Math.cos(angle + ARROW_SPREAD), second[1] - head * Math.sin(angle + ARROW_SPREAD)];
 			return [
 				...points,
 				left,
@@ -1096,7 +1156,7 @@ window.__ModuleLoader__.load({
 			switch (mark.kind) {
 				case "arrow": {
 					if (second === void 0) return void 0;
-					const [left, right] = arrowBarbs(mark.points).slice(2);
+					const [left, right] = arrowBarbs(mark.points, mark.weight ?? 1).slice(2);
 					return `M ${n(first[0])} ${n(first[1])} L ${n(second[0])} ${n(second[1])} M ${n(left[0])} ${n(left[1])} L ${n(second[0])} ${n(second[1])} L ${n(right[0])} ${n(right[1])}`;
 				}
 				case "rect": {
@@ -1131,10 +1191,10 @@ window.__ModuleLoader__.load({
 		* @param mark - the point mark.
 		* @returns the marker's path, number centre and box, or undefined with no coordinate.
 		*/
-		function pinGeometry(mark) {
+		function pinGeometry(mark, unit = 1) {
 			const tip = mark.points[0];
 			if (tip === void 0) return void 0;
-			const radius = 10;
+			const radius = pinRadiusOf(mark, unit);
 			const lift = radius * PIN_LIFT;
 			const [tipX, tipY] = tip;
 			const up = tipY - lift - radius >= 0;
@@ -1168,16 +1228,16 @@ window.__ModuleLoader__.load({
 		* @param mark - the point mark.
 		* @returns path data, or undefined when the mark carries no coordinate.
 		*/
-		function pinPathData(mark) {
-			return pinGeometry(mark)?.path;
+		function pinPathData(mark, unit = 1) {
+			return pinGeometry(mark, unit)?.path;
 		}
 		/**
 		* Where the number inside a `point` mark's marker sits.
 		* @param mark - the point mark.
 		* @returns the number's centre, or undefined when the mark carries no coordinate.
 		*/
-		function pinNumberCentre(mark) {
-			return pinGeometry(mark)?.number;
+		function pinNumberCentre(mark, unit = 1) {
+			return pinGeometry(mark, unit)?.number;
 		}
 		/**
 		* The box a `point` mark's pin covers.
@@ -1190,8 +1250,8 @@ window.__ModuleLoader__.load({
 		* @param mark - the point mark.
 		* @returns the pin's box, or undefined when the mark carries no point.
 		*/
-		function pointMarkBox(mark) {
-			return pinGeometry(mark)?.box;
+		function pointMarkBox(mark, unit = 1) {
+			return pinGeometry(mark, unit)?.box;
 		}
 		/**
 		* The box a mark covers once it is drawn, rotation included.
@@ -1204,14 +1264,14 @@ window.__ModuleLoader__.load({
 		* @param mark - the mark to measure.
 		* @returns the box, or undefined when the mark carries no coordinate.
 		*/
-		function markOutline(mark) {
-			if (mark.kind === "point") return pointMarkBox(mark);
-			const geometry = mark.kind === "arrow" ? arrowBarbs(mark.points) : mark.points;
+		function markOutline(mark, unit = 1) {
+			if (mark.kind === "point") return pointMarkBox(mark, unit);
+			const geometry = mark.kind === "arrow" ? arrowBarbs(mark.points, mark.weight ?? 1, unit) : mark.points;
 			const straight = pointsBox(geometry);
 			if (straight === void 0) return void 0;
 			const radians = markRadians(mark);
 			const box = radians === 0 ? straight : turnedBox(geometry, straight, radians);
-			const grow = STROKE_WIDTH / 2;
+			const grow = strokeWidthOf(mark, unit) / 2;
 			return {
 				x: box.x - grow,
 				y: box.y - grow,
@@ -1285,6 +1345,42 @@ window.__ModuleLoader__.load({
 			return `rotate(${n(radians * 180 / Math.PI)} ${n(cx)} ${n(cy)})`;
 		}
 		//#endregion
+		//#region src/client/scale.ts
+		/**
+		* How big the marks should be for the figure they are drawn on.
+		*
+		* A stroke is not a physical thing: 2.5 pixels is a bold line on a 300px thumbnail
+		* and a hairline on a 4000px scan. Marks are comparisons the reader makes against
+		* the line work underneath them, so they have to be sized in the same currency as
+		* the figure — a fraction of it — rather than in the figure's pixels.
+		*
+		* The reference edge is the size a science figure is usually exported at. An
+		* ordinary figure then gets the unit it always had, and only the outliers (a
+		* thumbnail, a poster) are scaled. The range is clamped rather than proportional
+		* because a 20000px figure would otherwise get strokes 40px wide, which reads as a
+		* highlighter rather than a line.
+		* @module dsh-figmark/client/scale
+		*/
+		/** The figure edge, in pixels, that gets the unit it always had. */
+		const REFERENCE_EDGE = 1200;
+		/** Smallest multiple of the base sizes, for figures far below the reference. */
+		const MIN_UNIT = .75;
+		/**
+		* The size everything drawn on a figure is multiplied by.
+		*
+		* Measured against the figure's longer edge: that is the dimension a reader judges
+		* a stroke against, and using the area would shrink a tall thin panel's marks for a
+		* reason the eye does not see.
+		* @param width - the figure's intrinsic width, in figure pixels.
+		* @param height - the figure's intrinsic height, in figure pixels.
+		* @returns the multiple of the base sizes, held inside {@link MIN_UNIT} and {@link MAX_UNIT}.
+		*/
+		function figureUnit(width, height) {
+			const edge = Math.max(width, height);
+			if (!Number.isFinite(edge) || edge <= 0) return 1;
+			return Math.min(3, Math.max(MIN_UNIT, edge / REFERENCE_EDGE));
+		}
+		//#endregion
 		//#region src/client/Canvas.tsx
 		/**
 		* The drawing surface.
@@ -1295,6 +1391,19 @@ window.__ModuleLoader__.load({
 		* means the same thing at any zoom or pane width.
 		* @module dsh-figmark/client/Canvas
 		*/
+		/**
+		* The `weight` field of a new mark, or nothing when it is the default.
+		*
+		* Absent means the default throughout this plugin, so writing `weight: 1` would put
+		* a field into every mark that says nothing — sidecars would grow a key for every
+		* mark ever drawn, and every comparison of two documents would see a difference
+		* where there is none.
+		* @param weight - the weight the next stroke is drawn at.
+		* @returns the field, or an empty object for the default.
+		*/
+		function weightField(weight) {
+			return weight === 1 ? {} : { weight };
+		}
 		/** Hit width of an invisible selection stroke, in figure pixels. */
 		const HIT_WIDTH = 14;
 		/** Minimum distance between recorded freehand samples, in figure pixels. */
@@ -1318,6 +1427,8 @@ window.__ModuleLoader__.load({
 		*/
 		function Canvas(props) {
 			const { width, height, marks, tool, color, containerRef, anchoring } = props;
+			const [originX, originY] = props.origin ?? [0, 0];
+			const weight = props.weight ?? 1;
 			/**
 			* Each mark's number, by id.
 			*
@@ -1326,6 +1437,14 @@ window.__ModuleLoader__.load({
 			* otherwise.
 			*/
 			const numbers = new Map(marks.map((mark, index) => [mark.id, props.numbering?.get(mark.id) ?? index + 1]));
+			/**
+			* How big everything is drawn here, as a multiple of the base sizes.
+			*
+			* Derived from the surface rather than passed in: every mark on this canvas shares
+			* one figure, so one number decides the pen for all of them, and a caller that
+			* forgot to thread it through could not make a mark disagree with its hit area.
+			*/
+			const unit = figureUnit(width, height);
 			const [draft, setDraft] = (0, react.useState)(null);
 			const [press, setPress] = (0, react.useState)(null);
 			const drawing = (0, react.useRef)(false);
@@ -1370,7 +1489,7 @@ window.__ModuleLoader__.load({
 				const rect = event.currentTarget.getBoundingClientRect();
 				const scaleX = rect.width === 0 ? 1 : width / rect.width;
 				const scaleY = rect.height === 0 ? 1 : height / rect.height;
-				return [(event.clientX - rect.left) * scaleX, (event.clientY - rect.top) * scaleY];
+				return [(event.clientX - rect.left) * scaleX - originX, (event.clientY - rect.top) * scaleY - originY];
 			};
 			/**
 			* Describe what the mark landed on.
@@ -1552,6 +1671,7 @@ window.__ModuleLoader__.load({
 						kind: "point",
 						color,
 						points: [point],
+						...weightField(weight),
 						...anchor === void 0 ? {} : { anchor }
 					};
 					props.onAdd(mark);
@@ -1567,7 +1687,8 @@ window.__ModuleLoader__.load({
 					id: nextMarkId(),
 					kind: tool,
 					color,
-					points: seed
+					points: seed,
+					...weightField(weight)
 				});
 			};
 			const move = (event) => {
@@ -1593,10 +1714,18 @@ window.__ModuleLoader__.load({
 						...press,
 						snap: event.shiftKey
 					};
+					const edit = editFor(held, point, dx, dy);
 					setPress({
 						...held,
-						edit: editFor(held, point, dx, dy)
+						edit
 					});
+					const base = props.marks.find((candidate) => candidate.id === press.id);
+					/* v8 ignore next -- a press always begins on a mark that is still in the list. */
+					if (base === void 0) return;
+					const live = { ...base };
+					if (edit.points !== void 0) live.points = edit.points;
+					if (edit.rotation !== void 0) live.rotation = edit.rotation;
+					props.onLiveEdit?.(live);
 					return;
 				}
 				if (!drawing.current || draft === null) return;
@@ -1624,6 +1753,7 @@ window.__ModuleLoader__.load({
 				if (press !== null) {
 					const done = press.edit;
 					setPress(null);
+					props.onLiveEdit?.(null);
 					if (done === null) return;
 					if (press.handle === void 0) {
 						/* v8 ignore next -- a move always carries the geometry it moved to. */
@@ -1713,8 +1843,8 @@ window.__ModuleLoader__.load({
 			* compared to a washed-out sticker.
 			*/
 			const renderPoint = (mark) => {
-				const pin = pinPathData(mark);
-				const centre = pinNumberCentre(mark);
+				const pin = pinPathData(mark, unit);
+				const centre = pinNumberCentre(mark, unit);
 				/* v8 ignore next -- a point mark carries exactly the one coordinate it was placed at. */
 				if (pin === void 0 || centre === void 0) return null;
 				const number = numbers.get(mark.id);
@@ -1723,21 +1853,21 @@ window.__ModuleLoader__.load({
 						d: pin,
 						fill: "#ffffff",
 						stroke: "#ffffff",
-						strokeWidth: 4.5,
+						strokeWidth: 4.5 * unit,
 						strokeLinejoin: "round"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 						d: pin,
 						fill: mark.color,
 						stroke: "#ffffff",
-						strokeWidth: 1.5,
+						strokeWidth: 1.5 * unit,
 						strokeLinejoin: "round"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
 						x: centre[0],
 						y: centre[1],
 						fontFamily: PIN_FONT_FAMILY,
-						fontSize: 11,
+						fontSize: 11 * unit,
 						fontWeight: 700,
 						fill: PIN_NUMBER_COLOR,
 						textAnchor: "middle",
@@ -1755,19 +1885,19 @@ window.__ModuleLoader__.load({
 			* handles that would do nothing.
 			*/
 			const renderPointFrame = (shown) => {
-				const box = pointMarkBox(shown);
+				const box = pointMarkBox(shown, unit);
 				/* v8 ignore next -- a point mark carries exactly the one coordinate it was placed at. */
 				if (box === void 0) return null;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-					x: box.x - 3,
-					y: box.y - 3,
-					width: box.width + 6,
-					height: box.height + 6,
-					rx: 3,
+					x: box.x - 3 * unit,
+					y: box.y - 3 * unit,
+					width: box.width + 6 * unit,
+					height: box.height + 6 * unit,
+					rx: 3 * unit,
 					fill: "none",
 					stroke: "#4c8dff",
-					strokeWidth: 1,
-					strokeDasharray: "3 2",
+					strokeWidth: unit,
+					strokeDasharray: `${3 * unit} ${2 * unit}`,
 					style: { pointerEvents: "none" }
 				});
 			};
@@ -1777,7 +1907,7 @@ window.__ModuleLoader__.load({
 				const selected = props.selectedId === mark.id;
 				const transform = markTransform(shown);
 				const isPoint = mark.kind === "point";
-				const pin = isPoint ? pinPathData(shown) : void 0;
+				const pin = isPoint ? pinPathData(shown, unit) : void 0;
 				/**
 				* What a press on the drawn shape starts.
 				*
@@ -1789,7 +1919,7 @@ window.__ModuleLoader__.load({
 					d: pin,
 					fill: "transparent",
 					stroke: "transparent",
-					strokeWidth: HIT_WIDTH,
+					strokeWidth: HIT_WIDTH * unit,
 					style: {
 						pointerEvents: "all",
 						cursor: "pointer"
@@ -1814,7 +1944,7 @@ window.__ModuleLoader__.load({
 									d: path,
 									fill: "none",
 									stroke: "#ffffff",
-									strokeWidth: 5,
+									strokeWidth: strokeWidthOf(shown, unit) + 2.5 * unit,
 									strokeLinecap: "round",
 									strokeLinejoin: "round"
 								}),
@@ -1822,7 +1952,7 @@ window.__ModuleLoader__.load({
 									d: path,
 									fill: "none",
 									stroke: shown.color,
-									strokeWidth: STROKE_WIDTH,
+									strokeWidth: strokeWidthOf(shown, unit),
 									strokeLinecap: "round",
 									strokeLinejoin: "round"
 								}),
@@ -1830,7 +1960,7 @@ window.__ModuleLoader__.load({
 									d: path,
 									fill: "none",
 									stroke: "transparent",
-									strokeWidth: HIT_WIDTH,
+									strokeWidth: HIT_WIDTH * unit,
 									style: {
 										pointerEvents: "stroke",
 										cursor: "pointer"
@@ -1851,9 +1981,13 @@ window.__ModuleLoader__.load({
 					]
 				}, mark.id);
 			};
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 				className: "da-overlay",
 				"data-da-overlay": "",
+				style: {
+					left: originX,
+					top: originY
+				},
 				width,
 				height,
 				viewBox: `0 0 ${width} ${height}`,
@@ -1875,7 +2009,10 @@ window.__ModuleLoader__.load({
 					}
 					props.onSelect(null);
 				},
-				children: [marks.map((mark) => renderMark(mark, false)), draft === null ? null : renderMark(draft, true)]
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+					transform: `translate(${originX} ${originY})`,
+					children: [marks.map((mark) => renderMark(mark, false)), draft === null ? null : renderMark(draft, true)]
+				})
 			});
 		}
 		/** A difference that never changes, for a body that has no edit yet. */
@@ -2437,6 +2574,44 @@ window.__ModuleLoader__.load({
 			const existing = shell.snapshot.draft.trim();
 			shell.setDraft(existing === "" ? message : `${existing}\n\n${message}`);
 		}
+		/**
+		* The box the whole drawing occupies: the figure, plus wherever the marks reach.
+		*
+		* A figure with every mark inside it gets exactly its own box back, which is the
+		* case the overlay has always drawn; the growth only happens for marks that leave
+		* it. The margin is applied only on sides that actually grew, so an ordinary figure
+		* is not padded on all four sides for nothing.
+		* @param width - the figure's width, in figure pixels.
+		* @param height - the figure's height, in figure pixels.
+		* @param marks - the marks drawn on it.
+		* @param unit - the figure's size multiple, so outlines are measured as drawn.
+		* @returns the box the drawing occupies, in figure coordinates.
+		*/
+		function plotBounds(width, height, marks, unit = 1) {
+			let left = 0;
+			let top = 0;
+			let right = width;
+			let bottom = height;
+			for (const mark of marks) {
+				const box = markOutline(mark, unit);
+				/* v8 ignore next -- a mark with no coordinate covers nothing to grow for. */
+				if (box === void 0) continue;
+				left = Math.min(left, box.x);
+				top = Math.min(top, box.y);
+				right = Math.max(right, box.x + box.width);
+				bottom = Math.max(bottom, box.y + box.height);
+			}
+			const padLeft = left < 0 ? 12 : 0;
+			const padTop = top < 0 ? 12 : 0;
+			const padRight = right > width ? 12 : 0;
+			const padBottom = bottom > height ? 12 : 0;
+			return {
+				x: left - padLeft,
+				y: top - padTop,
+				width: right + padRight - (left - padLeft),
+				height: bottom + padBottom - (top - padTop)
+			};
+		}
 		//#endregion
 		//#region src/client/export.ts
 		/**
@@ -2444,17 +2619,19 @@ window.__ModuleLoader__.load({
 		*
 		* @param mark - the mark to draw.
 		* @param number - the mark's number in the list, when it carries one.
+		* @param unit - the figure's size multiple, so the export is drawn at the same
+		*   weight the reader saw.
 		* @returns the mark's elements.
 		*/
-		function markSvg(mark, number) {
+		function markSvg(mark, number, unit) {
 			const path = markPathData(mark);
 			const parts = [];
-			if (path !== void 0) parts.push(`<path d="${path}" fill="none" stroke="#ffffff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>`, `<path d="${path}" fill="none" stroke="${mark.color}" stroke-width="${STROKE_WIDTH}" stroke-linecap="round" stroke-linejoin="round"/>`);
-			const pin = mark.kind === "point" ? pinPathData(mark) : void 0;
-			const centre = mark.kind === "point" ? pinNumberCentre(mark) : void 0;
+			if (path !== void 0) parts.push(`<path d="${path}" fill="none" stroke="#ffffff" stroke-width="${strokeWidthOf(mark, unit) + 2.5 * unit}" stroke-linecap="round" stroke-linejoin="round"/>`, `<path d="${path}" fill="none" stroke="${mark.color}" stroke-width="${strokeWidthOf(mark, unit)}" stroke-linecap="round" stroke-linejoin="round"/>`);
+			const pin = mark.kind === "point" ? pinPathData(mark, unit) : void 0;
+			const centre = mark.kind === "point" ? pinNumberCentre(mark, unit) : void 0;
 			if (pin !== void 0 && centre !== void 0) {
-				parts.push(`<path d="${pin}" fill="${mark.color}" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>`);
-				if (number !== void 0) parts.push(`<text x="${centre[0]}" y="${centre[1]}" font-family="${PIN_FONT_FAMILY}" font-size="11" font-weight="700" fill="${PIN_NUMBER_COLOR}" text-anchor="middle" dominant-baseline="central">${number}</text>`);
+				parts.push(`<path d="${pin}" fill="${mark.color}" stroke="#ffffff" stroke-width="${2 * unit}" stroke-linejoin="round"/>`);
+				if (number !== void 0) parts.push(`<text x="${centre[0]}" y="${centre[1]}" font-family="${PIN_FONT_FAMILY}" font-size="${11 * unit}" font-weight="700" fill="${PIN_NUMBER_COLOR}" text-anchor="middle" dominant-baseline="central">${number}</text>`);
 			}
 			return parts.join("");
 		}
@@ -2490,7 +2667,27 @@ window.__ModuleLoader__.load({
 		*/
 		function composeReviewSvg(layer, marks, numbering) {
 			const numbers = new Map(marks.map((mark, index) => [mark.id, numbering?.get(mark.id) ?? index + 1]));
-			return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${layer.width}" height="${layer.height}" viewBox="0 0 ${layer.width} ${layer.height}"><rect x="0" y="0" width="${layer.width}" height="${layer.height}" fill="#ffffff"/>` + figureSvg(layer) + marks.map((mark) => markSvg(mark, numbers.get(mark.id))).join("") + "</svg>";
+			const unit = figureUnit(layer.width, layer.height);
+			const paper = plotBounds(layer.width, layer.height, marks, unit);
+			const shift = `translate(${-paper.x} ${-paper.y})`;
+			return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${paper.width}" height="${paper.height}" viewBox="0 0 ${paper.width} ${paper.height}"><rect x="0" y="0" width="${paper.width}" height="${paper.height}" fill="#ffffff"/><g transform="${shift}">` + figureSvg(layer) + marks.map((mark) => markSvg(mark, numbers.get(mark.id), unit)).join("") + "</g></svg>";
+		}
+		/**
+		* The size of the picture {@link composeReviewSvg} builds.
+		*
+		* A caller has to know it before rasterizing: an SVG rendered at the figure's size
+		* would crop away exactly the marks that made the paper grow.
+		* @param layer - the figure to place underneath.
+		* @param marks - marks in draw order.
+		* @param unit - the figure's size multiple.
+		* @returns the paper's width and height, in figure pixels.
+		*/
+		function reviewSize(layer, marks, unit = figureUnit(layer.width, layer.height)) {
+			const paper = plotBounds(layer.width, layer.height, marks, unit);
+			return {
+				width: paper.width,
+				height: paper.height
+			};
 		}
 		/**
 		* Rasterization scale for one review image.
@@ -2787,6 +2984,22 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/preferences.ts
+		/**
+		* The drawing choices a reader expects to still be there after a reload.
+		*
+		* Marks and their sentences belong to the annotation and live in its sidecar. The
+		* colour the reader is drawing in, and how large the numbers are, are a different
+		* kind of thing: they describe how the *next* mark should look, not what any mark
+		* already means. Keeping them in a sidecar would tie them to a figure that has one —
+		* a reader who picks a colour, draws nothing, and reloads would find the colour gone,
+		* because a figure with no annotation has no sidecar to remember it in.
+		*
+		* So they go in browser storage, which is scoped to the reader rather than to the
+		* figure, and which exists before the first mark does. An annotation that records
+		* its own number style still wins over this: the picture the agent reads has to match
+		* the annotation, not the reader's current preference.
+		* @module dsh-figmark/client/preferences
+		*/
 		/** The storage key. Namespaced so it cannot collide with the shell's own keys. */
 		const PREFERENCES_KEY = "dsh-figmark:drawing";
 		/** A colour this plugin would have written: six hex digits. */
@@ -2842,6 +3055,7 @@ window.__ModuleLoader__.load({
 			const bar = spotOf(record["bar"]);
 			return {
 				...typeof color === "string" && HEX_COLOR.test(color) ? { color } : {},
+				...isWeight(record["weight"]) ? { weight: record["weight"] } : {},
 				...palette === void 0 ? {} : { palette },
 				...bar === void 0 ? {} : { bar }
 			};
@@ -2868,10 +3082,11 @@ window.__ModuleLoader__.load({
 		*/
 		function rememberPreferences(preferences, store = browserStore()) {
 			if (store === void 0) return;
-			const { color, palette, bar } = preferences;
+			const { color, weight, palette, bar } = preferences;
 			try {
 				store.setItem(PREFERENCES_KEY, JSON.stringify({
 					...color === void 0 ? {} : { color },
+					...weight === void 0 ? {} : { weight: clampWeight(weight) },
 					...palette === void 0 ? {} : { palette: {
 						x: palette.x,
 						y: palette.y
@@ -3061,6 +3276,55 @@ window.__ModuleLoader__.load({
 .da-palette .da-tool .da-tool-icon{height:auto}
 .da-palette .da-tool .da-tool-icon svg{width:16px;height:16px;stroke-width:1.9}
 
+/* --- the size rail ------------------------------------------------------- */
+/* A vertical rail along the left edge of the figure: how heavy the pen is, and how
+   big a point mark's pin is. Idle it is a hairline, so it costs the figure nothing;
+   crossing it opens it out to a track. The track is *tapered* — a thin line at the
+   bottom and a broad one at the top — because the control's whole subject is
+   thickness, and a wedge says which way is heavier without reading a number.
+   A horizontal range input is rotated upright inside the pill: it keeps dragging,
+   arrow keys, the step and the accessible name, while the rail above does the
+   drawing. The drawn parts never take the pointer, or grabbing the knob would grab
+   the knob instead of the slider. */
+.da-weight{position:absolute;z-index:7;left:6px;top:50%;transform:translateY(-50%);
+  display:flex;align-items:center;justify-content:center;width:7px;height:200px;
+  border-radius:999px;background:var(--dsw-alias-border-l2,rgba(127,127,127,.22));
+  cursor:ns-resize;transition:width .16s ease,background .16s ease,box-shadow .16s ease}
+.da-weight:hover,.da-weight:focus-within{width:30px;background:var(--dsw-alias-bg-layer-2,#fff);
+  box-shadow:0 5px 18px rgba(20,40,80,.16),0 0 0 0.5px var(--dsw-alias-border-l2,currentColor)}
+/* The wedge: a hairline at the bottom, the heaviest width at the top. Drawn as a
+   clipped gradient box so it costs one element and no SVG. */
+.da-weight::before{content:"";position:absolute;left:50%;top:14px;bottom:14px;width:11px;
+  transform:translateX(-50%);opacity:0;
+  background:linear-gradient(to top,var(--dsw-alias-border-l3,rgba(127,127,127,.34)),
+    var(--dsw-alias-border-l4,rgba(127,127,127,.5)));
+  clip-path:polygon(calc(50% - 0.5px) 100%,calc(50% + 0.5px) 100%,
+    calc(50% + 5.5px) 0,calc(50% - 5.5px) 0);
+  transition:opacity .16s ease}
+.da-weight:hover::before,.da-weight:focus-within::before{opacity:1}
+/* The part already chosen, drawn from the bottom up in the brand colour. */
+.da-weight-fill{position:absolute;left:50%;bottom:14px;width:11px;transform:translateX(-50%);
+  opacity:0;pointer-events:none;transition:opacity .16s ease;
+  background:var(--dsw-alias-brand-primary,#176df2);
+  clip-path:polygon(calc(50% - 0.5px) 100%,calc(50% + 0.5px) 100%,
+    calc(50% + 5.5px) 0,calc(50% - 5.5px) 0)}
+.da-weight:hover .da-weight-fill,.da-weight:focus-within .da-weight-fill{opacity:1}
+/* The knob sits on the value: the only part that shows at rest, so the rail reads as
+   a slider waiting to be touched rather than a bare rule. */
+.da-weight-knob{position:absolute;left:50%;width:11px;height:11px;border-radius:50%;
+  transform:translateX(-50%);pointer-events:none;
+  background:var(--dsw-alias-bg-layer-2,#fff);
+  box-shadow:0 1px 4px rgba(20,40,80,.32),0 0 0 1px var(--dsw-alias-border-l3,currentColor);
+  transition:width .16s ease,height .16s ease,background .16s ease}
+.da-weight:hover .da-weight-knob,.da-weight:focus-within .da-weight-knob{
+  width:15px;height:15px;background:var(--dsw-alias-brand-primary,#176df2);
+  box-shadow:0 2px 7px rgba(20,40,80,.34)}
+/* The browser's own range, rotated upright and made transparent. It spans the whole
+   rail so a press anywhere on it lands on the slider — including on the knob, which
+   is why the knob is pointer-transparent. */
+.da-weight-input{position:absolute;left:50%;top:50%;width:200px;height:30px;margin:0;opacity:0;
+  transform:translate(-50%,-50%) rotate(-90deg);cursor:ns-resize;appearance:none;background:transparent}
+
 /* --- the floating bar ---------------------------------------------------- */
 /* The same object as the tool palette: a dark rounded strip over the figure, which
    the reader can drag clear of whatever they are looking at. It carries the records
@@ -3149,6 +3413,10 @@ window.__ModuleLoader__.load({
    needs to see where the drawing stops. */
 .da-stage{position:relative;display:flex;align-items:safe center;justify-content:safe center;flex:1 1 auto;overflow:auto;min-height:0;padding:14px;background:var(--dsw-alias-bg-document-preview,transparent)}
 .da-surface{position:relative;flex:0 0 auto;margin:0;transform-origin:top left;background:#fff;border-radius:4px;box-shadow:var(--dsw-elevation-prominent,0 1px 3px rgba(0,0,0,.14),0 8px 24px rgba(0,0,0,.08))}
+/* The paper: the figure plus the margin a mark may have needed. It is the white sheet
+   the drawing sits on, so a mark that reaches past the figure lands on paper rather
+   than on the panel behind it. */
+.da-paper{background:#fff}
 .da-figure{display:block;user-select:none;-webkit-user-drag:none}
 /* The table is a thing you can push. The hand only shows under the tools that
    leave a drag free to move the view: under a drawing tool the same drag draws. */
@@ -3159,7 +3427,7 @@ window.__ModuleLoader__.load({
 /* The rendered document takes the figure's place; the overlay above it owns every
    pointer event, which is also what keeps a link inside it from navigating. */
 .da-html{display:block;border:0;background:#fff;pointer-events:none}
-.da-overlay{position:absolute;inset:0;touch-action:none}
+.da-overlay{position:absolute;touch-action:none}
 .da-overlay[data-mode="view"]{pointer-events:none}
 .da-overlay[data-tool="select"]{cursor:default}
 .da-overlay:not([data-tool="select"]){cursor:crosshair}
@@ -3219,9 +3487,36 @@ window.__ModuleLoader__.load({
 .da-float-record{width:min(330px,calc(100% - 22px))}
 .da-float-list{max-height:min(58%,400px)}
 .da-float-list .da-marks{overflow:auto;min-height:0}
-/* The detail card is placed by arithmetic, not by the stylesheet: its left and top
-   come from the mark it belongs to. */
-.da-float-detail{width:252px}
+/* The detail field is placed by arithmetic, not by the stylesheet: its left and top
+   come from the mark it belongs to. It is a pill rather than a card — no head, no
+   border between the field and the panel — so writing about a mark costs one line
+   over the figure instead of a box that covers it. */
+.da-float-detail{width:300px;gap:0;padding:4px;border-radius:22px;
+  flex-direction:row;align-items:flex-end;
+  box-shadow:0 8px 26px rgba(20,40,80,.2),0 0 0 1px rgba(20,40,80,.04)}
+.da-float .da-comment{flex:1 1 auto;min-width:0;box-sizing:border-box;border:0;background:transparent;
+  color:inherit;font:inherit;font-size:13px;line-height:1.55;padding:7px 10px;resize:none;
+  /* One line until the sentence needs more, then as many as it takes: the pill is a
+     place to type, and a sentence read through a slot two lines tall is a sentence
+     the reader has to scroll to finish. The rule for the record cards' textareas sets
+     a 74px floor, hence the explicit reset. The scrollbar is hidden because it is not
+     a scroll view — wheel and keys still work once the sentence outgrows the pane. */
+  min-height:0;height:auto;max-height:min(180px,42vh);overflow-y:auto;outline:none;
+  field-sizing:content;scrollbar-width:none}
+.da-float .da-comment::-webkit-scrollbar{width:0;height:0}
+.da-float .da-comment::placeholder{color:var(--dsw-alias-label-tertiary,currentColor);opacity:.85}
+/* The hand-off appears only once the field says something: an empty pill is a
+   place to type, not a decision to make. */
+.da-comment-send{display:flex;align-items:center;gap:4px;flex:0 0 auto;padding-bottom:3px;padding-right:3px}
+.da-comment-send-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
+  border:0;border-radius:50%;background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12));
+  color:var(--dsw-alias-label-secondary,currentColor);cursor:pointer;padding:0}
+.da-comment-send-btn:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.2));
+  color:var(--dsw-alias-label-primary,currentColor)}
+.da-comment-send-btn:disabled{opacity:.45;cursor:default}
+.da-comment-send-btn svg{width:15px;height:15px}
+.da-comment-send-primary{background:var(--dsw-alias-brand-primary,#176df2);color:#fff}
+.da-comment-send-primary:hover{background:var(--dsw-alias-brand-primary,#176df2);color:#fff;filter:brightness(1.08)}
 .da-float textarea{width:100%;box-sizing:border-box;min-height:74px;max-height:200px;resize:vertical;border:0.5px solid var(--dsw-alias-border-l3,currentColor);border-radius:9px;background:var(--dsw-alias-bg-layer-2,transparent);color:inherit;font:inherit;font-size:12px;padding:8px 10px;line-height:1.65}
 .da-float textarea:focus{outline:none;border-color:var(--dsw-alias-brand-primary,#176df2)}
 .da-btn-count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
@@ -3428,13 +3723,34 @@ window.__ModuleLoader__.load({
 		* @param size - the card's size, in CSS pixels.
 		* @returns the card's top-left corner, in the panel's coordinates.
 		*/
+		/**
+		* The size to place a card by: the card's own, or a stand-in before it is measured.
+		*
+		* A comment pill grows with the sentence in it, so a placement that assumed one line
+		* would push a long comment off the bottom of the panel. The element is measured once
+		* it has been laid out; before that — the first frame of a selection, and in any
+		* environment that reports zero boxes — the caller's estimate is the only size there
+		* is, and the next pass corrects it.
+		* @param element - the laid-out card, when there is one.
+		* @param fallback - the size to use when the card has not been measured.
+		* @returns the width and height to place by.
+		*/
+		function measuredSize(element, fallback) {
+			if (element === null || element.offsetHeight === 0) return fallback;
+			return {
+				width: element.offsetWidth,
+				height: element.offsetHeight
+			};
+		}
 		function placeCard(anchor, panelWidth, panelHeight, size = {
-			width: 252,
-			height: 196
+			width: 300,
+			height: 48
 		}) {
 			const below = anchor.y + anchor.height + 10;
 			const above = anchor.y - size.height - 10;
-			const top = below + size.height <= panelHeight - 8 ? below : Math.max(8, above);
+			const roomBelow = panelHeight - 8 - below;
+			const roomAbove = anchor.y - 10 - 8;
+			const top = roomBelow >= size.height ? below : roomAbove >= size.height ? above : Math.max(8, roomAbove > roomBelow ? above : below);
 			const widest = Math.max(8, panelWidth - size.width - 8);
 			return {
 				left: Math.min(Math.max(8, anchor.x), widest),
@@ -3524,6 +3840,20 @@ window.__ModuleLoader__.load({
 				label: "toolPoint"
 			}
 		];
+		/**
+		* The tools that draw something with a size the rail can set.
+		*
+		* `select` is not among them: it draws nothing, so with it armed and no mark
+		* selected the rail has no subject. `point` is, because a pin is sized by the same
+		* number — the rail asks "how big is this mark" either way.
+		*/
+		const WEIGHT_TOOLS = /* @__PURE__ */ new Set([
+			"arrow",
+			"rect",
+			"ellipse",
+			"pen",
+			"point"
+		]);
 		/** The copy key naming the shape each kind of mark is, for the list's second line. */
 		const TOOL_COPY = {
 			arrow: "toolArrow",
@@ -3587,27 +3917,6 @@ window.__ModuleLoader__.load({
 			});
 		}
 		/**
-		* The small pictures the panel's furniture wears.
-		*
-		* Each is a 14px line drawing on the same 16-unit grid as the tool icons, so the
-		* chrome reads as one set rather than as a crate of borrowed glyphs.
-		*/
-		function NoteIcon() {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-				className: "da-ico",
-				viewBox: "0 0 16 16",
-				"aria-hidden": "true",
-				focusable: "false",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-					x: "2.5",
-					y: "2.5",
-					width: "11",
-					height: "11",
-					rx: "2"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 5.5 6 h 5 M 5.5 9 h 3.5" })]
-			});
-		}
-		/**
 		* The overall goal's mark: an arrow that has hit a target.
 		*
 		* The record this heads is not a note about one place on the figure — it is what the
@@ -3842,6 +4151,7 @@ window.__ModuleLoader__.load({
 			*/
 			const remembered = (0, react.useMemo)(() => readPreferences(), []);
 			const [color, setColor] = (0, react.useState)(remembered.color ?? COLORS[0]);
+			const [weight, setWeight] = (0, react.useState)(remembered.weight ?? 1);
 			const [marks, setMarks] = (0, react.useState)(() => [...props.draft?.marks ?? []]);
 			const [past, setPast] = (0, react.useState)([]);
 			const [future, setFuture] = (0, react.useState)([]);
@@ -3892,6 +4202,14 @@ window.__ModuleLoader__.load({
 			*/
 			const [detailAt, setDetailAt] = (0, react.useState)(null);
 			/**
+			* The selected mark as a drag is currently shaping it.
+			*
+			* Kept beside the stored marks rather than in them: the gesture is not committed
+			* until it is released, so writing it into the list would make every frame an
+			* undoable edit. It exists only so the pill can follow the hand.
+			*/
+			const [liveMark, setLiveMark] = (0, react.useState)(null);
+			/**
 			* Shut the style panel when the reader picks up a tool.
 			*
 			* Arming a tool is the moment the panel has done its job; leaving it open over
@@ -3998,13 +4316,15 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				rememberPreferences({
 					color,
+					weight,
 					...palette === void 0 ? {} : { palette },
 					...barSpot === void 0 ? {} : { bar: barSpot }
 				});
 			}, [
 				barSpot,
 				color,
-				palette
+				palette,
+				weight
 			]);
 			/**
 			* The bar's box, when the reader has moved it off the bottom edge.
@@ -4077,6 +4397,23 @@ window.__ModuleLoader__.load({
 				rasterSize
 			]);
 			/**
+			* How big everything drawn is, as a multiple of the base sizes.
+			*
+			* One number for the whole surface: the pen, the pins and the review image all
+			* have to agree, and a stroke is only bold or thin relative to the figure it sits
+			* on. A 4000px scan and a 300px thumbnail get the same-looking mark this way.
+			*/
+			const unit = size === null ? 1 : figureUnit(size.width, size.height);
+			/**
+			* The paper the drawing needs: the figure, plus anywhere the marks reach past it.
+			*
+			* A reader boxing the margin a plot clips, or flagging a spot just outside the
+			* axes, is drawing something the figure does not contain. The paper grows to hold
+			* it rather than the mark being clipped — and because the surface is white, a mark
+			* out there lands on paper instead of on nothing.
+			*/
+			const paper = size === null ? null : plotBounds(size.width, size.height, marks, unit);
+			/**
 			* Everything a background write needs, read at write time.
 			*
 			* A write runs from a timer that outlives the render that scheduled it, so it has
@@ -4283,11 +4620,12 @@ window.__ModuleLoader__.load({
 			* exchanged; so is everything inside a record, which is where the writing happens.
 			*/
 			(0, react.useEffect)(() => {
-				if (openPanel === null) return;
 				const onDown = (event) => {
 					const target = event.target;
-					if (target instanceof Element && (target.closest(".da-float") !== null || target.closest(".da-style-row") !== null || barRef.current?.contains(target) === true)) return;
-					setOpenPanel(null);
+					if (target instanceof Element && (target.closest(".da-float") !== null || target.closest(".da-style-row") !== null || target.closest(".da-palette") !== null || target.closest(".da-weight") !== null || barRef.current?.contains(target) === true)) return;
+					if (openPanel !== null) setOpenPanel(null);
+					if (stageRef.current?.contains(target) === true) return;
+					setSelectedId(null);
 				};
 				document.addEventListener("pointerdown", onDown, true);
 				return () => {
@@ -4307,31 +4645,38 @@ window.__ModuleLoader__.load({
 				const root = rootRef.current;
 				const host = figureRef.current;
 				const mark = marks.find((candidate) => candidate.id === selectedId);
-				const box = mark === void 0 ? void 0 : markOutline(mark);
+				const drawn = liveMark !== null && liveMark.id === selectedId ? liveMark : mark;
+				const box = drawn === void 0 ? void 0 : markOutline(drawn, unit);
 				if (root === null || host === null || box === void 0 || size === null) {
 					setDetailAt(null);
 					return;
 				}
 				const panel = root.getBoundingClientRect();
-				const drawn = host.getBoundingClientRect();
+				const measured = host.getBoundingClientRect();
+				const pillSize = measuredSize(detailRef.current, {
+					width: 300,
+					height: 48
+				});
 				const at = placeCard(scaledBox(box, {
-					x: drawn.left,
-					y: drawn.top,
-					width: drawn.width,
-					height: drawn.height
+					x: measured.left,
+					y: measured.top,
+					width: measured.width,
+					height: measured.height
 				}, {
 					x: panel.left,
 					y: panel.top,
 					width: panel.width,
 					height: panel.height
-				}, size.width), panel.width, panel.height);
+				}, size.width), panel.width, panel.height, pillSize);
 				setDetailAt((previous) => previous !== null && previous.left === at.left && previous.top === at.top ? previous : at);
 			}, [
+				htmlHeight,
+				liveMark,
 				marks,
-				selectedId,
 				scale,
+				selectedId,
 				size,
-				htmlHeight
+				unit
 			]);
 			/**
 			* The factor currently drawn, kept beside the state that will hold it.
@@ -4526,22 +4871,15 @@ window.__ModuleLoader__.load({
 			* so a recolour can be taken back like any other edit.
 			* @param value - the CSS hex string of the chosen swatch.
 			*/
-			const chooseColor = (0, react.useCallback)((value) => {
-				if (selectedId === null) {
-					setColor(value);
-					return;
-				}
-				const repainted = marks.map((mark) => mark.id === selectedId && mark.color !== value ? {
-					...mark,
-					color: value
-				} : mark);
-				if (!repainted.some((mark, index) => mark !== marks[index])) return;
-				commit(repainted);
-			}, [
-				commit,
-				marks,
-				selectedId
-			]);
+			/**
+			* Change one attribute of the selected mark, or of the next stroke when nothing
+			* is selected.
+			*
+			* A control that is already at the mark's value leaves the list identical, so a
+			* press that changes nothing records no undo step — whether the mark is still
+			* there or was removed while it was selected.
+			* @param patch - the attribute to change.
+			*/
 			const undo = (0, react.useCallback)(() => {
 				setPast((history) => {
 					const previous = history[history.length - 1];
@@ -4656,10 +4994,11 @@ window.__ModuleLoader__.load({
 			]);
 			const exportPng = (0, react.useCallback)(async (target) => {
 				const svg = composeReviewSvg(target, marks);
-				const exportScale = Math.min(2, Math.max(1, 2400 / Math.max(target.width, target.height)));
-				return await rasterizePng(svg, target.width, target.height, exportScale);
+				const paper = reviewSize(target, marks);
+				const exportScale = Math.min(2, Math.max(1, 2400 / Math.max(paper.width, paper.height)));
+				return await rasterizePng(svg, paper.width, paper.height, exportScale);
 			}, [marks]);
-			const buildDocument = (0, react.useCallback)((target) => {
+			const buildDocument = (0, react.useCallback)((target, scope = marks) => {
 				if (loaded === null) return null;
 				const now = (/* @__PURE__ */ new Date()).toISOString();
 				return {
@@ -4674,7 +5013,7 @@ window.__ModuleLoader__.load({
 					},
 					createdAt: createdAt ?? now,
 					updatedAt: now,
-					marks,
+					marks: scope,
 					...summary.trim() === "" ? {} : { summary: summary.trim() }
 				};
 			}, [
@@ -4777,15 +5116,16 @@ window.__ModuleLoader__.load({
 			* would make the reader clear it twice.
 			* @param target - who receives the annotation.
 			*/
-			const run = (0, react.useCallback)(async (target) => {
-				if (marks.length === 0 || size === null || size.height <= 0) return;
+			const run = (0, react.useCallback)(async (target, only) => {
+				const scope = only === void 0 ? marks : [only];
+				if (scope.length === 0 || size === null || size.height <= 0) return;
 				setBusy("sending");
 				setStatus({
 					tone: "info",
 					text: t(target === "agent" ? "sending" : "composing")
 				});
 				try {
-					const document_ = buildDocument(size);
+					const document_ = buildDocument(size, scope);
 					if (document_ === null) throw new Error(t("loadFailed"));
 					const review = layer === null || !needsReviewImage(document_) ? void 0 : await exportPng(layer);
 					const saved = await saveAnnotation(address, document_, review);
@@ -4846,7 +5186,7 @@ window.__ModuleLoader__.load({
 				discard,
 				exportPng,
 				layer,
-				marks.length,
+				marks,
 				props.conversation,
 				props.localeId,
 				props.sessions,
@@ -4880,16 +5220,72 @@ window.__ModuleLoader__.load({
 			* the next stroke, which is where the remembered preference comes in.
 			*/
 			const shownColor = selected === null ? color : selected.color;
-			const surfaceStyle = size === null ? {} : {
-				width: size.width * scale,
-				height: size.height * scale
+			/**
+			* What the size rail currently means, or null when it means nothing.
+			*
+			* It sizes one thing: the stroke of the mark the reader is working on, or the pen
+			* of the next stroke. With nothing selected and no drawing tool out there is no
+			* such thing, so the rail stands down instead of offering a control for a decision
+			* nobody is making. A point mark borrows the same number for its pin, so the rail
+			* stays when one is selected — it is the mark's size, whichever way it is drawn.
+			*/
+			const shownWeight = selected === null ? WEIGHT_TOOLS.has(tool) ? weight : null : selected.weight ?? 1;
+			/**
+			* Change one attribute of the selected mark, or of the next stroke when nothing
+			* is selected.
+			*
+			* A control already at the mark's value leaves the list untouched, so a press
+			* that changes nothing records no undo step.
+			* @param patch - the attribute to change.
+			*/
+			const repaintSelected = (mark, patch) => {
+				if (Object.keys(patch).every((key) => mark[key] === patch[key])) return;
+				commit(marks.map((entry) => entry.id === mark.id ? {
+					...entry,
+					...patch
+				} : entry));
+			};
+			const chooseColor = (value) => {
+				if (selected === null) {
+					setColor(value);
+					return;
+				}
+				repaintSelected(selected, { color: value });
 			};
-			const figureStyle = size === null ? {} : {
-				width: size.width,
-				height: size.height,
+			const chooseWeight = (value) => {
+				const held = clampWeight(value);
+				if (selected === null) {
+					setWeight(held);
+					return;
+				}
+				repaintSelected(selected, { weight: held });
+			};
+			const surfaceStyle = paper === null ? {} : {
+				width: paper.width * scale,
+				height: paper.height * scale
+			};
+			/**
+			* The paper at its unscaled size, with the figure placed at its own offset on it.
+			*
+			* The whole paper is scaled by one transform rather than each part scaling itself,
+			* so the figure and the overlay cannot drift apart at a fractional factor — which
+			* at 60% is exactly what a mark drawn on a line work and a mark drawn on paper
+			* would do.
+			*/
+			const paperStyle = paper === null ? {} : {
+				position: "relative",
+				width: paper.width,
+				height: paper.height,
 				transform: `scale(${scale})`,
 				transformOrigin: "top left"
 			};
+			const figureStyle = paper === null ? {} : {
+				position: "absolute",
+				left: -paper.x,
+				top: -paper.y,
+				width: size?.width,
+				height: size?.height
+			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "da-root",
 				ref: rootRef,
@@ -4918,63 +5314,67 @@ window.__ModuleLoader__.load({
 							className: "da-surface",
 							ref: surfaceRef,
 							style: surfaceStyle,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								ref: figureRef,
-								style: {
-									...figureStyle,
-									position: "relative"
-								},
-								children: [figure?.kind === "svg" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									ref: figureHostRef,
-									dangerouslySetInnerHTML: { __html: figure.markup }
-								}) : figure?.kind === "raster" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-									className: "da-figure",
-									src: figure.objectUrl,
-									width: size?.width,
-									height: size?.height,
-									alt: "",
-									onLoad: (event) => {
-										const image = event.currentTarget;
-										setFileRasterSize({
-											width: image.naturalWidth,
-											height: image.naturalHeight
-										});
-									}
-								}) : figure?.kind === "html" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
-									ref: frameRef,
-									className: "da-html",
-									title: t("htmlFrame"),
-									sandbox: "allow-same-origin",
-									style: {
-										width: figure.width,
-										height: htmlHeight
-									}
-								}) : null, size === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Canvas, {
-									width: size.width,
-									height: size.height,
-									marks,
-									tool,
-									color,
-									containerRef: figureHostRef,
-									anchoring: isVector,
-									anchorAtFigurePoint: figure?.kind === "html" ? anchorAtFigurePoint : void 0,
-									selectedId,
-									onSelect: setSelectedId,
-									onAdd: addMark,
-									onMove: moveMark,
-									onUpdate: updateMark,
-									onRemove: removeMark,
-									onPan: panBy,
-									onPanStart: () => {
-										setPanning(true);
-									},
-									onPanEnd: () => {
-										setPanning(false);
-									},
-									onEdit: editMark,
-									onDrawn: finishDrawing,
-									numbering: props.numbering
-								})]
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "da-paper",
+								style: paperStyle,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									ref: figureRef,
+									style: figureStyle,
+									children: [figure?.kind === "svg" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										ref: figureHostRef,
+										dangerouslySetInnerHTML: { __html: figure.markup }
+									}) : figure?.kind === "raster" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+										className: "da-figure",
+										src: figure.objectUrl,
+										width: size?.width,
+										height: size?.height,
+										alt: "",
+										onLoad: (event) => {
+											const image = event.currentTarget;
+											setFileRasterSize({
+												width: image.naturalWidth,
+												height: image.naturalHeight
+											});
+										}
+									}) : figure?.kind === "html" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+										ref: frameRef,
+										className: "da-html",
+										title: t("htmlFrame"),
+										sandbox: "allow-same-origin",
+										style: {
+											width: figure.width,
+											height: htmlHeight
+										}
+									}) : null, paper === null || size === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Canvas, {
+										width: paper.width,
+										height: paper.height,
+										origin: [-paper.x, -paper.y],
+										marks,
+										tool,
+										color,
+										weight,
+										containerRef: figureHostRef,
+										anchoring: isVector,
+										anchorAtFigurePoint: figure?.kind === "html" ? anchorAtFigurePoint : void 0,
+										selectedId,
+										onSelect: setSelectedId,
+										onAdd: addMark,
+										onMove: moveMark,
+										onUpdate: updateMark,
+										onRemove: removeMark,
+										onPan: panBy,
+										onPanStart: () => {
+											setPanning(true);
+										},
+										onPanEnd: () => {
+											setPanning(false);
+										},
+										onEdit: editMark,
+										onDrawn: finishDrawing,
+										onLiveEdit: setLiveMark,
+										numbering: props.numbering
+									})]
+								})
 							})
 						})
 					}),
@@ -5122,42 +5522,67 @@ window.__ModuleLoader__.load({
 							left: detailAt.left,
 							top: detailAt.top
 						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "da-float-head",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: "da-card-title",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NoteIcon, {}),
-									t("detail"),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "da-chip",
-										children: t(TOOL_COPY[selected.kind])
-									})
-								]
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+							ref: detailRef,
+							className: "da-comment",
+							value: selected.detail ?? "",
+							placeholder: selected.detail === void 0 || selected.detail.trim() === "" ? t("addComment") : t("detailPlaceholder"),
+							rows: 1,
+							onChange: (event) => {
+								setMarkDetail(selected.id, event.target.value);
+							}
+						}), selected.detail === void 0 || selected.detail.trim() === "" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "da-comment-send",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "da-comment-send-btn da-comment-send-primary",
+								disabled: busy !== null,
+								"aria-label": t("sendToAgent"),
+								title: t("sendToAgent"),
+								onClick: () => {
+									run("agent", selected);
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SendIcon, {})
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
-								className: "da-btn da-btn-quiet",
-								"aria-label": t("close"),
-								title: t("close"),
+								className: "da-comment-send-btn",
+								disabled: busy !== null,
+								"aria-label": t("sendToComposer"),
+								title: t("sendToComposer"),
 								onClick: () => {
-									setSelectedId(null);
+									run("composer", selected);
 								},
-								children: "✕"
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatIcon, {})
 							})]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-							className: "da-field",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-								ref: detailRef,
-								value: selected.detail ?? "",
-								placeholder: t("detailPlaceholder"),
+						})]
+					}),
+					shownWeight === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "da-weight",
+						title: t(selected?.kind === "point" || tool === "point" ? "pinSize" : "weight"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "range",
+								className: "da-weight-input",
+								"aria-label": t(selected?.kind === "point" || tool === "point" ? "pinSize" : "weight"),
+								min: WEIGHT_MIN,
+								max: 4,
+								step: .1,
+								value: shownWeight,
 								onChange: (event) => {
-									setMarkDetail(selected.id, event.target.value);
+									chooseWeight(Number(event.target.value));
 								}
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: "da-count",
-								children: [(selected.detail ?? "").length, "/500"]
-							})]
-						})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "da-weight-fill",
+								"aria-hidden": true,
+								style: { height: `${(shownWeight - WEIGHT_MIN) / (4 - WEIGHT_MIN) * 100}%` }
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "da-weight-knob",
+								"aria-hidden": true,
+								style: { bottom: `calc(${(shownWeight - WEIGHT_MIN) / (4 - WEIGHT_MIN) * 100}% - 5.5px)` }
+							})
+						]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "da-palette",
@@ -5494,15 +5919,18 @@ window.__ModuleLoader__.load({
 			const images = [];
 			const numbering = new Map(document.marks.map((mark, index) => [mark.id, index + 1]));
 			for (const page of pages) {
-				const svg = composeReviewSvg({
+				const layer = {
 					kind: "raster",
 					dataUrl: page.dataUrl,
 					width: page.width,
 					height: page.height
-				}, document.marks.filter((mark) => mark.page === page.page), numbering);
+				};
+				const marks = document.marks.filter((mark) => mark.page === page.page);
+				const svg = composeReviewSvg(layer, marks, numbering);
+				const paper = reviewSize(layer, marks);
 				images.push({
 					page: page.page,
-					image: await rasterizePng(svg, page.width, page.height, reviewScale(page.width, page.height))
+					image: await rasterizePng(svg, paper.width, paper.height, reviewScale(paper.width, paper.height))
 				});
 			}
 			return images;
@@ -6028,6 +6456,7 @@ window.__ModuleLoader__.load({
 					createAutosave,
 					annotationSignature,
 					autosaveDelayMs: 600,
+					figureUnit,
 					seat: createDocumentSeat({
 						sessions: ctx.get("sessions"),
 						conversation: ctx.get("conversation"),