dsh-figmark 1.1.2 → 1.1.3

package/lib/client.js

@@ -268,7 +268,7 @@ window.__ModuleLoader__.load({
 		* @returns the value, pulled to the nearest end of the range.
 		*/
 		function clampWeight(value) {
-			return Math.min(4, Math.max(WEIGHT_MIN, value));
+			return Math.min(8, Math.max(WEIGHT_MIN, value));
 		}
 		/**
 		* Whether a value is a stroke weight this plugin would write.
@@ -277,7 +277,7 @@ window.__ModuleLoader__.load({
 		* @returns true when it is one.
 		*/
 		function isWeight(value) {
-			return typeof value === "number" && Number.isFinite(value) && value >= .5 && value <= 4;
+			return typeof value === "number" && Number.isFinite(value) && value >= .5 && value <= 8;
 		}
 		/**
 		* Suffix naming one page's files inside a paged document's name.
@@ -326,6 +326,86 @@ window.__ModuleLoader__.load({
 		function round(value) {
 			return Math.round(value);
 		}
+		/**
+		* Write a freehand stroke's extent as the box it was drawn in.
+		*
+		* The stroke itself is dozens of coordinates, most of which say nothing an agent
+		* can act on; the box says where on the figure to look, which is what the reading
+		* of the mark needs. `strokeExtents` names the area, and the phrase above it names
+		* the mark, so the pair still reads as one line.
+		* @param points - the stroke's sampled points.
+		* @returns the box as ` (x,y)-(x,y)`, or nothing for an empty stroke.
+		*/
+		function strokeExtents(points) {
+			let left = Number.POSITIVE_INFINITY;
+			let top = Number.POSITIVE_INFINITY;
+			let right = Number.NEGATIVE_INFINITY;
+			let bottom = Number.NEGATIVE_INFINITY;
+			for (const [x, y] of points) {
+				left = Math.min(left, x);
+				top = Math.min(top, y);
+				right = Math.max(right, x);
+				bottom = Math.max(bottom, y);
+			}
+			if (!Number.isFinite(left)) return "";
+			return ` (${round(left)},${round(top)})-(${round(right)},${round(bottom)})`;
+		}
+		/**
+		* Write two dragged corners as the rectangle they make.
+		*
+		* A box dragged up and to the left arrives as (bottom-right, top-left), and the
+		* agent reading `(187,138)-(42,88)` has to take a min and a max before it knows
+		* which area is meant. Both corners are therefore written left-to-right and
+		* top-to-bottom, so the same box always reads the same way however it was drawn.
+		* @param first - where the drag started.
+		* @param second - where it ended.
+		* @returns the corner pair as `(x,y)-(x,y)`, or nothing when the mark is unplaced.
+		*/
+		function extents(first, second) {
+			if (first === void 0 || second === void 0) return "";
+			return ` (${round(Math.min(first[0], second[0]))},${round(Math.min(first[1], second[1]))})-(${round(Math.max(first[0], second[0]))},${round(Math.max(first[1], second[1]))})`;
+		}
+		/**
+		* Say how far a mark reaches outside the figure, when it does.
+		*
+		* A negative coordinate is an accurate description — the origin is the figure's
+		* top-left corner, so -57 is 57 pixels above it — but a reader has to notice the
+		* sign and then reason about what it implies. Naming the overhang outright costs
+		* about a dozen characters and removes that step: the agent is told the mark is
+		* off the picture and by how much, rather than being left to infer it. A mark that
+		* sits inside the figure says nothing at all, which is the common case.
+		* @param mark - the mark to measure.
+		* @param figure - the figure's size, when the document knows it.
+		* @param locale - language of the surrounding message.
+		* @returns the sentence fragment to append, or nothing when the mark is inside.
+		*/
+		function overhang(mark, figure, locale) {
+			const { width, height } = figure;
+			if (width === void 0 || height === void 0) return "";
+			let left = Number.POSITIVE_INFINITY;
+			let top = Number.POSITIVE_INFINITY;
+			let right = Number.NEGATIVE_INFINITY;
+			let bottom = Number.NEGATIVE_INFINITY;
+			for (const [x, y] of mark.points) {
+				left = Math.min(left, x);
+				top = Math.min(top, y);
+				right = Math.max(right, x);
+				bottom = Math.max(bottom, y);
+			}
+			const escape = (amount, zhWord, enWord) => {
+				const pixels = round(amount);
+				if (pixels <= 0) return "";
+				return locale === "zh" ? `${zhWord} ${pixels}` : `${enWord} ${pixels}`;
+			};
+			const escapes = [
+				escape(-left, "左", "left"),
+				escape(-top, "上", "up"),
+				escape(right - width, "右", "right"),
+				escape(bottom - height, "下", "down")
+			].filter((part) => part !== "");
+			if (escapes.length === 0) return "";
+			return locale === "zh" ? `（超出图面：${escapes.join("、")} 像素）` : ` (off the figure: ${escapes.join(", ")} px)`;
+		}
 		/** Describe one mark's shape in words, for the model-facing summary. */
 		function describeShape(mark, locale) {
 			const [first, second] = mark.points;
@@ -333,9 +413,12 @@ window.__ModuleLoader__.load({
 			const turned = mark.rotation === void 0 || mark.rotation === 0 ? "" : zh ? `（旋转 ${Math.round(mark.rotation)}°）` : ` (rotated ${Math.round(mark.rotation)}°)`;
 			switch (mark.kind) {
 				case "arrow": return first !== void 0 && second !== void 0 ? zh ? `箭头 (${round(first[0])},${round(first[1])}) → (${round(second[0])},${round(second[1])})${turned}` : `arrow (${round(first[0])},${round(first[1])}) → (${round(second[0])},${round(second[1])})${turned}` : zh ? "箭头" : "arrow";
-				case "rect": return first !== void 0 && second !== void 0 ? zh ? `框选 (${round(first[0])},${round(first[1])})-(${round(second[0])},${round(second[1])})${turned}` : `box (${round(first[0])},${round(first[1])})-(${round(second[0])},${round(second[1])})${turned}` : zh ? "框选" : "box";
-				case "ellipse": return first !== void 0 && second !== void 0 ? zh ? `圈选 (${round(first[0])},${round(first[1])})-(${round(second[0])},${round(second[1])})${turned}` : `ellipse (${round(first[0])},${round(first[1])})-(${round(second[0])},${round(second[1])})${turned}` : zh ? "圈选" : "ellipse";
-				case "pen": return zh ? `手绘线（${mark.points.length} 点）${turned}` : `freehand stroke (${mark.points.length} points)${turned}`;
+				case "rect": return (zh ? "框选" : "box") + extents(first, second) + turned;
+				case "ellipse": return (zh ? "圈选" : "ellipse") + extents(first, second) + turned;
+				case "pen": {
+					const box = strokeExtents(mark.points);
+					return `${zh ? "手绘线" : "freehand stroke"}${box}${turned}`;
+				}
 				case "point": return first !== void 0 ? zh ? `单点位于 (${round(first[0])},${round(first[1])})` : `at (${round(first[0])},${round(first[1])})` : zh ? "单点" : "a point";
 			}
 		}
@@ -350,7 +433,7 @@ window.__ModuleLoader__.load({
 			if (anchor.text !== void 0 && anchor.text !== "") parts.push(zh ? `元素文字「${anchor.text}」` : `element text "${anchor.text}"`);
 			if (anchor.selector !== void 0 && anchor.selector !== "") parts.push(zh ? `选择器 ${anchor.selector}` : `selector ${anchor.selector}`);
 			if (parts.length === 0) parts.push(`<${anchor.tag}>`);
-			return `（${parts.join("，")}）`;
+			return zh ? `（${parts.join("，")}）` : ` (${parts.join(", ")})`;
 		}
 		/**
 		* Render one mark as a numbered line the model reads.
@@ -362,9 +445,11 @@ window.__ModuleLoader__.load({
 		* @param mark - the mark to describe.
 		* @param index - zero-based position in the document, rendered as a circled number.
 		* @param locale - language of the surrounding message.
+		* @param figure - the figure these marks belong to, when its size is known; a mark
+		*   that reaches past it then says so rather than leaving the sign to be noticed.
 		* @returns one line of the annotation summary.
 		*/
-		function describeMark(mark, index, locale) {
+		function describeMark(mark, index, locale, figure) {
 			const zh = locale === "zh";
 			const marker = [
 				"①",
@@ -380,8 +465,9 @@ window.__ModuleLoader__.load({
 			][index] ?? `${index + 1}.`;
 			const page = mark.page === void 0 ? "" : zh ? `第 ${mark.page} 页 ` : `page ${mark.page} `;
 			const detail = mark.detail !== void 0 && mark.detail.trim() !== "" ? mark.detail.trim() : "";
-			const parts = [`${marker} ${page}${describeShape(mark, locale)}${describeAnchor(mark, locale)}`];
-			if (detail !== "") parts.push(zh ? `要改：${detail}` : `change: ${detail}`);
+			const escape = figure === void 0 ? "" : overhang(mark, figure, locale);
+			const parts = [`${marker} ${page}${describeShape(mark, locale)}${describeAnchor(mark, locale)}${escape}`];
+			if (detail !== "") parts.push(zh ? `批注：${detail}` : `note: ${detail}`);
 			if (detail === "") parts.push(zh ? "（未写说明）" : "(no detail)");
 			return parts.join(zh ? "，" : ", ");
 		}
@@ -392,7 +478,7 @@ window.__ModuleLoader__.load({
 		* @returns one line per mark.
 		*/
 		function describeMarks(document, locale) {
-			return document.marks.map((mark, index) => describeMark(mark, index, locale));
+			return document.marks.map((mark, index) => describeMark(mark, index, locale, document.figure));
 		}
 		//#endregion
 		//#region src/shared/figure-kind.ts
@@ -867,7 +953,7 @@ window.__ModuleLoader__.load({
 		* @param rotation - the mark's rotation in degrees.
 		* @returns the handles.
 		*/
-		function handlesFor(box, rotation) {
+		function handlesFor(box, rotation, size = 7) {
 			const centre = boxCentre(box);
 			const radians = rotation * Math.PI / 180;
 			const at = (x, y) => rotateAround([x, y], centre, radians);
@@ -884,11 +970,23 @@ window.__ModuleLoader__.load({
 			});
 			placed.push({
 				id: "rotate",
-				point: at(centre[0], box.y - 22)
+				point: at(centre[0], box.y - armFor(size))
 			});
 			return placed;
 		}
 		/**
+		* How far the turn handle stands off the top edge, for a handle of a given size.
+		*
+		* Proportional to the handle: a bigger grip on a short arm would have the circle
+		* overlapping the corner squares, and a smaller one on a long arm would look
+		* detached from the frame it turns.
+		* @param size - the handle's side, in figure pixels.
+		* @returns the distance from the top edge, in figure pixels.
+		*/
+		function armFor(size) {
+			return size * (22 / 7);
+		}
+		/**
 		* The line that ties the rotation handle to the box it turns.
 		*
 		* It reads as attached to the mark only because it is anchored on the top edge
@@ -897,11 +995,11 @@ window.__ModuleLoader__.load({
 		* @param rotation - the mark's rotation in degrees.
 		* @returns the two ends of the tether, from the turn handle to the top edge.
 		*/
-		function tetherFor(box, rotation) {
+		function tetherFor(box, rotation, size = 7) {
 			const centre = boxCentre(box);
 			const radians = rotation * Math.PI / 180;
 			return {
-				from: rotateAround([centre[0], box.y - 22], centre, radians),
+				from: rotateAround([centre[0], box.y - armFor(size)], centre, radians),
 				to: rotateAround([centre[0], box.y], centre, radians)
 			};
 		}
@@ -913,10 +1011,10 @@ window.__ModuleLoader__.load({
 		* @param reach - how far from a handle's centre still counts, in figure pixels.
 		* @returns the handle grabbed, or undefined for a press on the mark itself.
 		*/
-		function handleAt(box, rotation, at, reach = 7) {
+		function handleAt(box, rotation, at, reach = 7, size = 7) {
 			let best;
 			let bestDistance = reach;
-			for (const handle of handlesFor(box, rotation)) {
+			for (const handle of handlesFor(box, rotation, size)) {
 				const distance = Math.hypot(handle.point[0] - at[0], handle.point[1] - at[1]);
 				if (distance <= bestDistance) {
 					best = handle.id;
@@ -993,7 +1091,6 @@ window.__ModuleLoader__.load({
 			const degrees = normalizeDegrees((Math.atan2(at[1] - centre[1], at[0] - centre[0]) + Math.PI / 2) * 180 / Math.PI);
 			return snap ? normalizeDegrees(Math.round(degrees / 15) * 15) : degrees;
 		}
-		/** The cursor for one handle: what dragging it will do. */
 		const CURSORS = {
 			nw: "nwse-resize",
 			n: "ns-resize",
@@ -1003,7 +1100,7 @@ window.__ModuleLoader__.load({
 			s: "ns-resize",
 			sw: "nesw-resize",
 			w: "ew-resize",
-			rotate: "grab"
+			rotate: `url("data:image/svg+xml,${encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><g fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17.5 7.5A7 7 0 1 1 8.6 6.1\" stroke=\"#ffffff\" stroke-width=\"4.4\"/><path d=\"M17.5 7.5A7 7 0 1 1 8.6 6.1\" stroke=\"#2d2d2d\" stroke-width=\"2\"/><path d=\"M15.2 3.1L18.6 8.2L12.9 8.9\" stroke=\"#ffffff\" stroke-width=\"4.4\"/><path d=\"M15.2 3.1L18.6 8.2L12.9 8.9\" stroke=\"#2d2d2d\" stroke-width=\"2\"/></g></svg>")}") 12 12, crosshair`
 		};
 		/**
 		* The mouse cursor for one handle.
@@ -1358,27 +1455,15 @@ window.__ModuleLoader__.load({
 			const cy = box.y + box.height / 2;
 			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.
+		* Smallest multiple of the base sizes, for figures far below the reference.
 		*
-		* 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;
+		* Low enough that a matplotlib SVG — which measures itself in points, ~283 wide for
+		* the same figure a PNG exports at 1179px — is still scaled down rather than propped
+		* up to the old floor. The floor is a guard against division, not a design choice:
+		* a figure below ~240px is one nothing sensible is drawn on.
+		*/
+		const MIN_UNIT = .2;
 		/**
 		* The size everything drawn on a figure is multiplied by.
 		*
@@ -1392,7 +1477,7 @@ window.__ModuleLoader__.load({
 		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));
+			return Math.min(10, Math.max(MIN_UNIT, edge / 800));
 		}
 		//#endregion
 		//#region src/client/Canvas.tsx
@@ -1423,7 +1508,8 @@ window.__ModuleLoader__.load({
 		/** Minimum distance between recorded freehand samples, in figure pixels. */
 		const PEN_SAMPLE_STEP = 3;
 		/** Reach of a handle's hit area, in figure pixels: generous enough to grab. */
-		const HANDLE_REACH = 7 * 2.2;
+		/** How far from a handle's centre a press still counts, as a multiple of its side. */
+		const HANDLE_REACH = 2.2;
 		/** Monotonic id source for marks created in this session. */
 		let markSeq = 0;
 		/**
@@ -1580,10 +1666,20 @@ window.__ModuleLoader__.load({
 			* @param event - the pointer event.
 			* @returns true when a handle took the press.
 			*/
+			/**
+			* The control frame's handle size in figure pixels.
+			*
+			* The frame is drawn in the same svg as the marks, which is in figure pixels, and
+			* the whole paper is then scaled by CSS. A handle has to be a fixed number of screen
+			* pixels to be hittable, so its figure size is that target divided by the scale.
+			*/
+			const grip = 7 / Math.max(.05, props.scale ?? 1);
+			/** A hairline that stays a hairline on screen, whatever the paper is scaled to. */
+			const hairline = 1 / Math.max(.05, props.scale ?? 1);
 			const beginHandle = (mark, event) => {
 				if (props.selectedId !== mark.id) return false;
 				if (mark.kind === "point") return false;
-				const grabbed = handleAt(controlBox(mark), mark.rotation ?? 0, pressedAt.current.value, HANDLE_REACH);
+				const grabbed = handleAt(controlBox(mark), mark.rotation ?? 0, pressedAt.current.value, HANDLE_REACH * grip, grip);
 				if (grabbed === void 0) return false;
 				beginGesture(mark, event, grabbed);
 				return true;
@@ -1814,26 +1910,26 @@ window.__ModuleLoader__.load({
 			/** The resize and rotation handles of the selected mark. */
 			const renderHandles = (mark) => {
 				const frame = controlBox(mark);
-				const half = 7 / 2;
-				const handles = handlesFor(frame, mark.rotation ?? 0);
-				const tether = tetherFor(frame, mark.rotation ?? 0);
+				const half = grip / 2;
+				const handles = handlesFor(frame, mark.rotation ?? 0, grip);
+				const tether = tetherFor(frame, mark.rotation ?? 0, grip);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
 					x1: tether.from[0],
 					y1: tether.from[1],
 					x2: tether.to[0],
 					y2: tether.to[1],
 					stroke: "#4c8dff",
-					strokeWidth: 1
+					strokeWidth: hairline
 				}), handles.map((handle) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
 					"data-da-handle": handle.id,
 					x: handle.point[0] - half,
 					y: handle.point[1] - half,
-					width: 7,
-					height: 7,
-					rx: handle.id === "rotate" ? 7 / 2 : 1,
+					width: grip,
+					height: grip,
+					rx: handle.id === "rotate" ? grip / 2 : grip / 7,
 					fill: "#ffffff",
 					stroke: "#4c8dff",
-					strokeWidth: 1.5,
+					strokeWidth: 1.5 * hairline,
 					style: {
 						pointerEvents: "all",
 						cursor: cursorFor(handle.id)
@@ -1902,16 +1998,17 @@ window.__ModuleLoader__.load({
 				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;
+				const inset = 3 * hairline;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-					x: box.x - 3 * unit,
-					y: box.y - 3 * unit,
-					width: box.width + 6 * unit,
-					height: box.height + 6 * unit,
-					rx: 3 * unit,
+					x: box.x - inset,
+					y: box.y - inset,
+					width: box.width + 2 * inset,
+					height: box.height + 2 * inset,
+					rx: inset,
 					fill: "none",
 					stroke: "#4c8dff",
-					strokeWidth: unit,
-					strokeDasharray: `${3 * unit} ${2 * unit}`,
+					strokeWidth: hairline,
+					strokeDasharray: `${3 * hairline} ${2 * hairline}`,
 					style: { pointerEvents: "none" }
 				});
 			};
@@ -1998,10 +2095,6 @@ window.__ModuleLoader__.load({
 			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}`,
@@ -2281,14 +2374,13 @@ window.__ModuleLoader__.load({
 			const pages = annotatedPages(document);
 			const marked = pages.length === 0 ? "" : zh ? `其中 ${pages.length} 页有标注，` : `${pages.length} pages marked, `;
 			const kind = rendered ? zh ? "【HTML 标注】" : "[HTML annotations]" : zh ? "【附图标注】" : "[figure annotations]";
-			const hash = zh ? `${rendered ? "文件" : "图"} sha256:${figure.sha256.slice(0, 12)}` : `sha256:${figure.sha256.slice(0, 12)}`;
-			const header = zh ? `${kind}${figure.path}（${scope === "" ? "" : `${scope}，`}${size}${marked}标注 ${marks.length} 处，${hash}）` : `${kind} ${figure.path} (${scope === "" ? "" : `${scope}, `}${size}${marked}${marks.length} marks, ${hash})`;
+			const header = zh ? `${kind}${figure.path}（${scope === "" ? "" : `${scope}，`}${size}${marked}标注 ${marks.length} 处）` : `${kind} ${figure.path} (${scope === "" ? "" : `${scope}, `}${size}${marked}${marks.length} marks)`;
 			const paged = figure.pageCount !== void 0;
 			const pictured = paths.reviewPath !== null;
 			const attachment = !pictured ? [] : [paged ? zh ? "带批注 PDF 已作为本条消息的附件发送，可直接在阅读器里核对。" : "The annotated PDF is attached to this message; you can check it in any reader." : zh ? "标注图已作为本条消息的附件发送。" : "The annotated image is attached to this message."];
 			const noPicture = !pictured && !rendered && marks.length > 0 && !needsReviewImage(document) ? [zh ? "本条标注只有位置点，没有标注图：按上面逐条的坐标与说明处理原图即可。" : "These marks are points only, so no annotated image was made: work from the coordinates and notes above against the original figure."] : [];
 			const summary = document.summary !== void 0 && document.summary.trim() !== "" ? [zh ? `这张图是：${document.summary.trim()}` : `the figure shows: ${document.summary.trim()}`, ""] : [];
-			const closing = rendered ? zh ? "请按上述标注逐条修改这份 HTML 的生成源（不要改动渲染结果本身）。定位元素以 `anchor.selector` 为准，`points` 只是辅助：渲染宽度变化会让坐标漂移。未标注的部分保持不动，改完后逐条回应。" : "Address each mark above in the HTML source that generates this document (not in the rendered result). Locate elements by `anchor.selector`; `points` only assists, because coordinates drift when the render width changes. Leave unmarked parts untouched and answer mark by mark." : paged ? zh ? "请按上述标注逐条处理该 PDF（带批注 PDF 的每一页已带原生批注对象，可直接在阅读器里核对）；未标注的部分保持不动，改完后逐条回应。" : "Address each mark above in the PDF (every page of the annotated PDF carries native annotation objects you can check in a reader); leave unmarked parts untouched and answer mark by mark." : zh ? "请按上述标注逐条修复该附图（改生成源，不要涂改导出的位图）；未标注的部分保持不动，改完后逐条回应。" : "Fix the figure for each mark above (change the generating source, not the exported bitmap); leave unmarked parts untouched and answer mark by mark.";
+			const closer = rendered ? zh ? "逐条改 HTML 生成源。" : "Edit the HTML source, mark by mark." : paged ? zh ? "逐条处理该 PDF。" : "Work through the PDF, mark by mark." : zh ? "逐条改生成源。" : "Edit the generating source, mark by mark.";
 			return [
 				header,
 				...attachment,
@@ -2297,7 +2389,7 @@ window.__ModuleLoader__.load({
 				...summary,
 				...describeMarks(document, locale),
 				"",
-				closing
+				closer
 			].join("\n");
 		}
 		/**
@@ -2684,7 +2776,25 @@ window.__ModuleLoader__.load({
 			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>";
+			const edge = paper.x !== 0 || paper.y !== 0 || paper.width !== layer.width || paper.height !== layer.height ? figureEdge(layer.width, layer.height, unit) : "";
+			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) + edge + marks.map((mark) => markSvg(mark, numbers.get(mark.id), unit)).join("") + "</g></svg>";
+		}
+		/** Round a stroke measurement to a tenth, as the path data does. */
+		function hair9(value) {
+			return (Math.round(value * 10) / 10).toString();
+		}
+		/**
+		* The rule that marks where the figure ends and the grown paper begins.
+		*
+		* Drawn only when the paper grew, and drawn grey and dashed: it is a note about the
+		* picture, not part of it, so it must not read as a mark the reader made.
+		* @param width - the figure's width, in figure pixels.
+		* @param height - the figure's height, in figure pixels.
+		* @param unit - the figure's size multiple, so the rule is sized like the marks.
+		* @returns an SVG rect, or an empty string when there is nothing to outline.
+		*/
+		function figureEdge(width, height, unit) {
+			return `<rect x="0" y="0" width="${width}" height="${height}" fill="none" stroke="#9aa3b2" stroke-width="${hair9(Math.max(1, 1.5 * unit))}" stroke-dasharray="${hair9(6 * unit)} ${hair9(4 * unit)}"/>`;
 		}
 		/**
 		* The size of the picture {@link composeReviewSvg} builds.
@@ -3253,10 +3363,27 @@ window.__ModuleLoader__.load({
 		const STYLE_MARKER = "data-dsh-figmark";
 		/** The stylesheet text. */
 		const STYLES = `
+/* An accent of the plugin's own.
+   The shell's --dsw-alias-brand-primary is not a brand colour in this theme — it
+   resolves to the *ink* (near-black on light, near-white on dark), because the shell
+   uses it for filled buttons in monochrome. Reading it as "the blue" turned this
+   panel's sliders, filled buttons and selection rings into ink: a black knob on a
+   white rail, and a wedge that goes solid black at the heaviest setting. The alias
+   stays as the fallback so a shell that really does define a brand colour still wins,
+   but the accent is named here so every rule reads one variable instead of quietly
+   inheriting whatever "primary" means that week.
+   The dark block re-states it, because a blue tuned for white paper is too dark on a
+   near-black panel. */
 /* The panel follows the shell's palette rather than carrying one of its own: every
    colour below is an alias the theme owner resolves, with the inherited value as the
    fallback so a shell that defines nothing still renders something legible. */
-.da-root{position:relative;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;color:var(--dsw-alias-label-primary,inherit);background:var(--dsw-alias-bg-document-preview,transparent)}
+.da-root{--da-accent:#176df2;--da-accent-soft:rgba(23,109,242,.14);
+  position:relative;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;color:var(--dsw-alias-label-primary,inherit);background:var(--dsw-alias-bg-document-preview,transparent)}
+/* The shell marks its dark palette on <body> rather than through prefers-color-scheme:
+   a reader can pick either palette whatever the OS is set to, so following the shell's
+   own switch is what keeps the accent readable in both. A blue tuned for white paper
+   is too dark on a near-black panel. */
+body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,141,255,.22)}
 
 /* Every small picture in the panel is one stroke set, declared once: without this
    an svg with no fill of its own falls back to a solid black shape, which is what
@@ -3274,12 +3401,20 @@ window.__ModuleLoader__.load({
   box-shadow:0 8px 26px rgba(10,14,24,.3),0 0 0 1px rgba(255,255,255,.08)}
 /* While it is being dragged the pointer is the grip, whatever it passes over. */
 .da-palette[data-dragging="true"]{opacity:.94;box-shadow:0 12px 32px rgba(10,14,24,.4),0 0 0 1px rgba(255,255,255,.14)}
-.da-palette[data-dragging="true"] *{cursor:grabbing !important}
-/* The handle: a short row of dots over the tiles, the one part that only drags. */
-.da-palette-grip{display:flex;align-items:center;justify-content:center;width:32px;height:14px;
-  border-radius:7px;cursor:grab;color:rgba(255,255,255,.55);touch-action:none;flex:0 0 auto}
-.da-palette-grip:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.1)}
-.da-palette-grip-dots{font-size:9px;line-height:1;letter-spacing:1px}
+.da-palette[data-dragging="true"] *{cursor:move !important}
+/* The handle: a block of six dots, the one part of a strip that only drags. The block
+   is turned to suit the strip — wider than tall on the bar, taller than wide on the
+   palette — because a grip whose proportions fight its strip looks borrowed from the
+   other one. */
+.da-palette-grip{display:flex;align-items:center;justify-content:center;width:26px;height:17px;
+  border-radius:5px;cursor:move;color:rgba(255,255,255,.55);touch-action:none;flex:0 0 auto}
+.da-palette-grip:hover{color:rgba(255,255,255,.92);background:rgba(255,255,255,.1)}
+/* The dots' box follows the block: three across by two down needs width, two across
+   by three down needs height. Sized per block rather than once, so the svg is not
+   letterboxed inside its own handle. */
+.da-grip-dots{width:12px;height:8px;fill:currentColor;display:block}
+.da-bar .da-palette-grip{width:16px;height:18px}
+.da-bar .da-grip-dots{width:8px;height:12px}
 /* A tile is a round button holding one white glyph. No word under it: six glyphs in
    a column are read at a glance, and the word is still there as the tooltip and as
    the accessible name. */
@@ -3301,6 +3436,7 @@ window.__ModuleLoader__.load({
    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%);
+  --da-track-inset:10px;--da-knob-size:11px;
   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}
@@ -3309,13 +3445,24 @@ window.__ModuleLoader__.load({
 /* The track is an svg in the body: a hairline at the bottom that opens into a rounded
    shoulder at the top. It is not a clip-path polygon because a polygon has no rounded
    ends — the corners were what made the wedge read as a cut-out blade rather than a
-   part of the panel. preserveAspectRatio="none" stretches one 12x100 shape over the
-   rail's height, so the shoulders stay smooth at any length. */
-.da-weight-svg{position:absolute;left:50%;top:12px;bottom:12px;width:18px;
-  transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .16s ease}
+   part of the panel. preserveAspectRatio="none" stretches one 18x100 shape over the
+   rail's height, so the shoulders stay smooth at any length.
+   The height is written out rather than expressed as top+bottom: an svg is a replaced
+   element: with a viewBox it takes its intrinsic height for its width and ignores the
+   bottom offset entirely. The track was therefore a fixed 100px tall while the knob
+   travelled the whole 200px rail, which is why the two could never line up. */
+.da-weight-svg{position:absolute;left:50%;top:var(--da-track-inset);height:calc(100% - 2 * var(--da-track-inset));
+  width:18px;transform:translateX(-50%);opacity:0;pointer-events:none;
+  transition:opacity .16s ease}
 .da-weight:hover .da-weight-svg,.da-weight:focus-within .da-weight-svg{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. */
+/* The blue: a bar of the same width as the groove, its height the one number the
+   knob also uses, so its top edge is the knob's centre at every weight. */
+.da-weight-fill{position:absolute;left:50%;bottom:var(--da-track-inset);width:5px;
+  transform:translateX(-50%);border-radius:999px;background:var(--da-accent,#176df2);
+  opacity:0;pointer-events:none;transition:opacity .16s ease}
+.da-weight:hover .da-weight-fill,.da-weight:focus-within .da-weight-fill{opacity:1}
 .da-weight-knob{position:absolute;left:50%;width:var(--da-knob-size,11px);height:var(--da-knob-size,11px);
   border-radius:50%;transform:translateX(-50%);pointer-events:none;
   background:var(--dsw-alias-bg-layer-2,#fff);
@@ -3323,7 +3470,7 @@ window.__ModuleLoader__.load({
   transition:width .16s ease,height .16s ease,background .16s ease}
 .da-weight:hover,.da-weight:focus-within{--da-knob-size:15px}
 .da-weight:hover .da-weight-knob,.da-weight:focus-within .da-weight-knob{
-  background:var(--dsw-alias-brand-primary,#176df2);
+  background:var(--da-accent,#176df2);
   box-shadow:0 2px 7px rgba(20,40,80,.3)}
 /* 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
@@ -3345,7 +3492,7 @@ window.__ModuleLoader__.load({
    it centred while untouched must not also apply — with both set it stretches. */
 .da-bar[data-parked="true"]{bottom:auto}
 .da-bar[data-dragging="true"]{opacity:.94;box-shadow:0 12px 32px rgba(10,14,24,.4),0 0 0 1px rgba(255,255,255,.14)}
-.da-bar[data-dragging="true"] *{cursor:grabbing !important}
+.da-bar[data-dragging="true"] *{cursor:move !important}
 /* The bar's buttons are white glyphs on the dark strip. The one filled control is
    still the way out. */
 .da-bar .da-dock-btn{color:#fff}
@@ -3386,8 +3533,8 @@ window.__ModuleLoader__.load({
 .da-tool .da-tool-label{font-size:10px;line-height:1;white-space:nowrap;color:var(--dsw-alias-label-secondary,inherit)}
 /* The armed tool is the one state in this row the reader must never hunt for: it is
    the only tile with a fill, and the only label in the brand colour. */
-.da-tool[aria-pressed="true"]{border-color:transparent;background:var(--dsw-alias-interactive-bg-hover,rgba(23,109,242,.1));color:var(--dsw-alias-brand-primary,currentColor)}
-.da-tool[aria-pressed="true"] .da-tool-label{color:var(--dsw-alias-brand-primary,currentColor);font-weight:600}
+.da-tool[aria-pressed="true"]{border-color:transparent;background:var(--da-accent-soft,rgba(23,109,242,.1));color:var(--da-accent,currentColor)}
+.da-tool[aria-pressed="true"] .da-tool-label{color:var(--da-accent,currentColor);font-weight:600}
 .da-tool[aria-pressed="true"] svg{stroke-width:2.1}
 .da-tool:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.08))}
 .da-btn-icon{width:30px;padding:0}
@@ -3398,6 +3545,10 @@ window.__ModuleLoader__.load({
 .da-stylewrap{position:relative;flex:0 0 auto}
 /* The style fold floats above the bar rather than taking a row of it: opened over
    the figure, it costs the picture nothing and lands where the eye already is. */
+/* Opens upwards by default, because the bar lives at the bottom. Parked at the top
+   there is nothing above it to open into, so the fold turns over and hangs below its
+   own button instead — decided by the same measurement the records use. */
+.da-style-row[data-side="below"]{bottom:auto;top:calc(100% + 6px);box-shadow:0 -6px 22px rgba(20,40,80,.12),0 6px 22px rgba(20,40,80,.16)}
 .da-style-row{position:absolute;left:8px;bottom:calc(100% + 6px);z-index:9;
   display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:calc(100% - 16px);
   padding:8px 10px;border:0.5px solid var(--dsw-alias-border-l2,currentColor);border-radius:11px;
@@ -3412,17 +3563,24 @@ window.__ModuleLoader__.load({
 /* Anywhere else is "done here": the panel closes on the click that lands outside it
    rather than trapping the reader in a popup with one way out. */
 .da-swatch{width:20px;height:20px;border-radius:50%;corner-shape:round;border:2px solid var(--dsw-alias-bg-base,transparent);box-shadow:0 0 0 1px var(--dsw-alias-border-l4,rgba(127,127,127,.5));cursor:pointer;padding:0}
-.da-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--dsw-alias-brand-primary,currentColor)}
+.da-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--da-accent,currentColor)}
 /* --- the figure on its table -------------------------------------------- */
 /* A figure is a sheet on a table, not a picture floating in a void: the white paper
    is what gives the panel a middle, and the gap around it is the margin the eye
    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-surface{position:relative;flex:0 0 auto;margin:0;transform-origin:top left}
+/* The paper: the figure plus the margin a mark may have needed. It is deliberately
+   left transparent — the white sheet belongs to the figure, so a margin that only
+   exists because a mark reached past the edge reads as board round a card rather than
+   as more of the figure. The exported picture still gets its white fill: that one is
+   looked at by someone who has no board behind it. */
+.da-paper{background:transparent}
+/* The figure is the sheet: white, rounded, lifted off the panel. This is the element
+   that carries the paper look, which is why the margin can be see-through without the
+   drawing losing its edge. */
+.da-figure-frame{background:var(--dsw-alias-bg-base,#fff);border-radius:4px;overflow:hidden;
+  box-shadow:var(--dsw-elevation-prominent,0 1px 3px rgba(0,0,0,.14),0 8px 24px rgba(0,0,0,.08))}
 .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. */
@@ -3455,22 +3613,22 @@ window.__ModuleLoader__.load({
   width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;
   color:inherit;cursor:pointer;flex:0 0 auto}
 .da-dock-btn:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
-.da-dock-btn[aria-pressed="true"]{background:var(--dsw-alias-interactive-bg-hover,rgba(23,109,242,.12));color:var(--dsw-alias-brand-primary,#176df2)}
+.da-dock-btn[aria-pressed="true"]{background:var(--da-accent-soft,rgba(23,109,242,.12));color:var(--da-accent,#176df2)}
 .da-dock-btn svg{width:15px;height:15px}
 .da-dock-btn:disabled{opacity:.4;cursor:default}
 .da-dock-btn:disabled:hover{background:transparent}
 /* The one filled control in the panel is the way out of it. */
-.da-dock-btn-primary{border-color:var(--dsw-alias-brand-primary,#176df2);background:var(--dsw-alias-brand-primary,#176df2);color:#fff;box-shadow:0 2px 8px rgba(23,109,242,.32)}
-.da-dock-btn-primary:hover{opacity:.92;background:var(--dsw-alias-brand-primary,#176df2)}
+.da-dock-btn-primary{border-color:var(--da-accent,#176df2);background:var(--da-accent,#176df2);color:#fff;box-shadow:0 2px 8px rgba(23,109,242,.32)}
+.da-dock-btn-primary:hover{opacity:.92;background:var(--da-accent,#176df2)}
 /* A dot, not a count: "there is a goal written" is all the bar needs to say about
    a field it is not a list of. */
 .da-dock-dot{position:absolute;top:3px;right:4px;width:5px;height:5px;border-radius:50%;
-  background:var(--dsw-alias-brand-primary,#176df2)}
+  background:var(--da-accent,#176df2)}
 .da-dock-sep{width:1px;height:16px;margin:0 3px;background:var(--dsw-alias-border-l3,currentColor);opacity:.6;flex:0 0 auto}
 /* The count rides on the list's own button: it is the one thing about the list a
    reader wants without opening it. */
 .da-dock-count{position:absolute;top:-1px;right:-2px;min-width:14px;height:14px;padding:0 3px;
-  border-radius:7px;background:var(--dsw-alias-brand-primary,#176df2);color:#fff;
+  border-radius:7px;background:var(--da-accent,#176df2);color:#fff;
   font-size:9px;font-weight:700;line-height:14px;text-align:center;font-variant-numeric:tabular-nums}
 
 /* --- the floating records ------------------------------------------------ */
@@ -3482,7 +3640,7 @@ window.__ModuleLoader__.load({
   background:var(--dsw-alias-bg-layer-2,#fff);box-shadow:0 6px 22px rgba(20,40,80,.14),0 0 0 1px rgba(20,40,80,.03)}
 .da-card-title{display:flex;align-items:center;gap:5px;min-width:0;font-size:12px;font-weight:650;
   color:var(--dsw-alias-label-primary,inherit)}
-.da-card-title svg{width:14px;height:14px;flex:0 0 auto;color:var(--dsw-alias-brand-primary,#176df2)}
+.da-card-title svg{width:14px;height:14px;flex:0 0 auto;color:var(--da-accent,#176df2)}
 
 .da-float-head{display:flex;align-items:center;gap:7px}
 .da-float-head .da-card-title{flex:1 1 auto;min-width:0}
@@ -3521,10 +3679,10 @@ window.__ModuleLoader__.load({
   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-comment-send-primary{background:var(--da-accent,#176df2);color:#fff}
+.da-comment-send-primary:hover{background:var(--da-accent,#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-float textarea:focus{outline:none;border-color:var(--da-accent,#176df2)}
 .da-btn-count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
   padding:0 4px;border-radius:8px;background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.14));
   font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}
@@ -3537,8 +3695,8 @@ window.__ModuleLoader__.load({
 /* What the selected mark is, in one word: the detail field is disabled until there
    is something to describe, and this says what it would describe. */
 .da-chip{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:5px;
-  background:var(--dsw-alias-interactive-bg-hover,rgba(23,109,242,.12));
-  color:var(--dsw-alias-brand-primary,#176df2);font-size:10px;font-weight:600}
+  background:var(--da-accent-soft,rgba(23,109,242,.12));
+  color:var(--da-accent,#176df2);font-size:10px;font-weight:600}
 /* The "?" beside a card's name: the long form of what that field is for. */
 .da-hintdot{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;
   border-radius:50%;border:0.5px solid var(--dsw-alias-border-l3,currentColor);
@@ -3551,7 +3709,7 @@ window.__ModuleLoader__.load({
 .da-mark{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:8px;
   border:0.5px solid transparent;min-width:0}
 .da-mark:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.08))}
-.da-mark[data-selected="true"]{border-color:var(--dsw-alias-brand-primary,#176df2);
+.da-mark[data-selected="true"]{border-color:var(--da-accent,#176df2);
   background:var(--dsw-alias-interactive-bg-hover,rgba(23,109,242,.08))}
 .da-mark-index{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
   width:20px;height:20px;border-radius:6px;color:#fff;font-size:11px;font-weight:700;
@@ -3823,24 +3981,36 @@ window.__ModuleLoader__.load({
 		/**
 		* The rail's track, drawn on an 18x100 grid and stretched to whatever height it gets.
 		*
-		* A hairline at the bottom opening into a round shoulder at the top: the control's
-		* subject is thickness, so the track itself says which way is heavier. Every edge is
-		* curved — straight flanks make a paper dart, and a square cap makes a cut-off blade —
-		* so the profile is eased and the top is closed with an arc a little wider than the
-		* shoulders. Stretching it vertically (preserveAspectRatio="none") costs nothing
-		* visually: the only vertical features are straight lines, and the horizontal ones are
-		* what the gradient is for.
+		* The control's subject is thickness, so the track says which way is heavier: a little
+		* narrower at the bottom, about one part in six. "A little" is the whole note — a
+		* water-drop taper reads as decoration rather than as a gauge, and the reader said so
+		* twice. One cubic per side and no shoulders, so each flank is a single continuous
+		* curve from end to end with nothing for the eye to catch on; the two ends close with
+		* faint arcs so the track looks drawn rather than cut off.
+		*
+		* Stretching it vertically (preserveAspectRatio="none") is what makes the caps need
+		* care: the svg is 18x100 over a box about 180 tall, so one y unit is 1.8 of an x unit.
+		* An `r` that reads as a circle in the viewBox would be a tall ellipse on screen — the
+		* cap's `ry` is therefore set to `rx / 1.8`, which is what puts a round end on it.
 		*/
 		const WEIGHT_TRACK = [
-			"M 8.2 100",
-			"C 8.2 78 7.9 58 6.4 38",
-			"C 5.4 25 3.2 16 1.9 11",
-			"A 7.1 7.1 0 0 1 16.1 11",
-			"C 14.8 16 12.6 25 11.6 38",
-			"C 10.1 58 9.8 78 9.8 100",
-			"A 0.8 0.8 0 0 1 8.2 100",
+			"M 6.9 98.9",
+			"A 2.1 1.15 0 0 0 11.1 98.9",
+			"C 11.4 66 11.9 33 12.2 1.1",
+			"A 3.2 1.15 0 0 0 5.8 1.1",
+			"C 6.1 33 6.6 66 6.9 98.9",
 			"Z"
 		].join(" ");
+		/**
+		* How far the blue reaches, as a `height` in the rail.
+		*
+		* The same expression as the knob's `bottom`, because the blue has to end exactly where
+		* the knob's centre is: written once as a function so a change to the travel cannot
+		* leave the fill behind. `inset` keeps both clear of the rail's rounded caps; the extra
+		* half knob at each end keeps the knob's whole circle between the two ends of the bar
+		* rather than hanging half of itself past the top when the pen is at its heaviest.
+		*/
+		const travelHeight = (fraction) => `calc(var(--da-track-inset) + var(--da-knob-size) / 2 + (100% - 2 * var(--da-track-inset) - var(--da-knob-size)) * ${fraction})`;
 		const TOOLS = [
 			{
 				tool: "select",
@@ -3897,21 +4067,61 @@ window.__ModuleLoader__.load({
 		* with the mouse rather than a mark you leave behind. Drawn rather than written so
 		* the toolbar stays one row of controls at any locale or font size.
 		*/
+		/**
+		* The handle's dots: six of them, three by two, turned as the reader asked.
+		*
+		* The palette stands up and takes a grip three columns wide by two rows tall; the bar
+		* lies down and takes one two columns wide by three rows tall. That is the pair the
+		* reader called for, and it is the opposite of what the strips' own proportions would
+		* suggest — noted here so it is not "corrected" back by the next pair of eyes.
+		*
+		* Drawn instead of typed — the braille character this replaces was one glyph at one
+		* size, so the dots could not be sized or spaced, and at 9px they came out a smudge.
+		*/
+		function GripDots({ wide }) {
+			const xs = wide ? [
+				2,
+				6,
+				10
+			] : [2, 6];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				className: "da-grip-dots",
+				viewBox: wide ? "0 0 12 8" : "0 0 8 12",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: (wide ? [2, 6] : [
+					2,
+					6,
+					10
+				]).map((y) => xs.map((x) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: x,
+					cy: y,
+					r: 1.4
+				}, `${x}-${y}`)))
+			});
+		}
+		/**
+		* The select tool: a cursor, outlined rather than filled.
+		*
+		* Filled, it read as a black blob against the dark chip — the silhouette was there but
+		* the direction it points was not, which is the only thing a cursor has to say. As an
+		* outline it belongs to the same stroke set as the other five glyphs.
+		*
+		* The shape is Tabler's `cursor-text`-sibling `pointer` glyph, taken whole at its own
+		* 24 grid: its body is one closed curve with round joins rather than the seven hard
+		* corners a hand-traced outline has, and at 16px that softness is the whole difference
+		* between a cursor and a shard. Scaled by hand it lost exactly that.
+		*/
 		function PointerIcon() {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				width: "13",
-				height: "15",
-				viewBox: "0 0 13 15",
+				className: "da-ico",
+				viewBox: "0 0 24 24",
 				"aria-hidden": "true",
 				focusable: "false",
-				style: { display: "block" },
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					d: "M 1.5 1 L 1.5 12.2 L 4.1 9.9 L 5.9 13.6 L 8 12.6 L 6.2 9 L 9.7 8.7 Z",
-					fill: "currentColor",
-					stroke: "currentColor",
-					strokeWidth: "0.9",
-					strokeLinejoin: "round"
-				})
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M14.185 13.14l5.644 -2.202c1.625 -.634 1.538 -2.962 -.13 -3.473l-14.319 -4.382c-1.41 -.431 -2.73 .888 -2.298 2.298l4.382 14.318c.51 1.668 2.84 1.755 3.473 .13l2.202 -5.644a1.84 1.84 0 0 1 1.045 -1.045" })
 			});
 		}
 		/**
@@ -4114,6 +4324,7 @@ window.__ModuleLoader__.load({
 			const barRef = (0, react.useRef)(null);
 			const figureHostRef = (0, react.useRef)(null);
 			const surfaceRef = (0, react.useRef)(null);
+			const paperRef = (0, react.useRef)(null);
 			const figureRef = (0, react.useRef)(null);
 			/**
 			* Hand the stage to the owner as its scrollport, and keep it here too.
@@ -4655,6 +4866,17 @@ window.__ModuleLoader__.load({
 				htmlHeight
 			]);
 			/**
+			* Whether an upward fold would come out of the top of the panel.
+			*
+			* The style fold is anchored to its own button, so it climbs — which is right while
+			* the bar sits at the bottom and wrong the moment the reader parks the bar along the
+			* top, where climbing puts the swatches out of sight above the panel. The record
+			* placement already answers this question for the records; the fold reads the same
+			* answer rather than measuring a second time, so the two can never disagree about
+			* where there is room.
+			*/
+			const foldOpensDown = floatsAt !== null && floatsAt.bottom === void 0;
+			/**
 			* Put a record away when the reader clicks anywhere else.
 			*
 			* A record is a fold, not a mode: it has done its job the moment the reader looks
@@ -4752,9 +4974,9 @@ window.__ModuleLoader__.load({
 			const zoomAt = (0, react.useCallback)((next, clientX, clientY) => {
 				const stage = stageRef.current;
 				const surface = surfaceRef.current;
-				const figureHost = figureRef.current;
+				const sheet = paperRef.current;
 				/* v8 ignore next -- a wheel event only reaches a handler on a mounted stage, and size is what allows one. */
-				if (stage === null || surface === null || figureHost === null || size === null) return;
+				if (stage === null || surface === null || sheet === null || paper === null) return;
 				const before = liveScale.current;
 				const reached = clampZoom(next);
 				if (reached === before) return;
@@ -4768,19 +4990,22 @@ window.__ModuleLoader__.load({
 				}, {
 					clientX,
 					clientY
-				}, before, reached, size);
+				}, before, reached, paper);
 				liveScale.current = reached;
-				surface.style.width = `${size.width * reached}px`;
-				surface.style.height = `${size.height * reached}px`;
-				figureHost.style.transform = `scale(${reached})`;
+				surface.style.width = `${paper.width * reached}px`;
+				surface.style.height = `${paper.height * reached}px`;
+				sheet.style.transform = `scale(${reached})`;
 				stage.scrollLeft = target.scrollLeft;
 				stage.scrollTop = target.scrollTop;
 				clearTimeout(settleTimer.current);
 				settleTimer.current = setTimeout(() => {
 					settleTimer.current = void 0;
+					const settled = paperRef.current;
+					/* v8 ignore next -- the sheet is the element the pinch was measured on. */
+					if (settled !== null) settled.style.transform = "";
 					setZoom(reached);
 				}, 120);
-			}, [size]);
+			}, [paper]);
 			(0, react.useEffect)(() => () => {
 				clearTimeout(settleTimer.current);
 			}, []);
@@ -5281,7 +5506,7 @@ window.__ModuleLoader__.load({
 			* One number for the fill, the knob and the input: computed three times the three
 			* could round differently and the knob would sit a pixel off the fill it belongs to.
 			*/
-			const weightFraction = shownWeight === null ? 0 : (shownWeight - WEIGHT_MIN) / (4 - WEIGHT_MIN);
+			const weightFraction = shownWeight === null ? 0 : (shownWeight - WEIGHT_MIN) / (8 - WEIGHT_MIN);
 			/**
 			* Change one attribute of the selected mark, or of the next stroke when nothing
 			* is selected.
@@ -5366,13 +5591,15 @@ window.__ModuleLoader__.load({
 							className: "da-surface",
 							ref: surfaceRef,
 							style: surfaceStyle,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "da-paper",
+								ref: paperRef,
 								style: paperStyle,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "da-figure-frame",
 									ref: figureRef,
 									style: figureStyle,
-									children: [figure?.kind === "svg" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									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", {
@@ -5397,36 +5624,37 @@ window.__ModuleLoader__.load({
 											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
-									})]
-								})
+									}) : 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,
+									scale,
+									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
+								})]
 							})
 						})
 					}),
@@ -5618,7 +5846,7 @@ window.__ModuleLoader__.load({
 								className: "da-weight-input",
 								"aria-label": t(selected?.kind === "point" || tool === "point" ? "pinSize" : "weight"),
 								min: WEIGHT_MIN,
-								max: 4,
+								max: 8,
 								step: .1,
 								value: shownWeight,
 								onChange: (event) => {
@@ -5630,44 +5858,40 @@ window.__ModuleLoader__.load({
 								viewBox: "0 0 18 100",
 								preserveAspectRatio: "none",
 								"aria-hidden": "true",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("defs", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
-										id: `${trackId}-shade`,
-										x1: "0",
-										y1: "1",
-										x2: "0",
-										y2: "0",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
+									id: `${trackId}-shade`,
+									x1: "0",
+									y1: "1",
+									x2: "0",
+									y2: "0",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
 											offset: "0",
-											stopColor: "rgba(20,40,80,.05)"
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+											stopColor: "rgba(20,40,80,.06)"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
+											offset: ".55",
+											stopColor: "rgba(20,40,80,.13)"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
 											offset: "1",
-											stopColor: "rgba(20,40,80,.2)"
-										})]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {
-										id: `${trackId}-cut`,
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-											x: "0",
-											y: 100 - weightFraction * 100,
-											width: "18",
-											height: weightFraction * 100
+											stopColor: "rgba(20,40,80,.24)"
 										})
-									})] }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-										d: WEIGHT_TRACK,
-										fill: `url(#${trackId}-shade)`
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-										d: WEIGHT_TRACK,
-										fill: "var(--dsw-alias-brand-primary,#176df2)",
-										clipPath: `url(#${trackId}-cut)`
-									})
-								]
+									]
+								}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+									d: WEIGHT_TRACK,
+									fill: `url(#${trackId}-shade)`
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "da-weight-fill",
+								"aria-hidden": true,
+								style: { height: travelHeight(weightFraction) }
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "da-weight-knob",
 								"aria-hidden": true,
-								style: { bottom: `calc(12px + ${weightFraction} * (100% - 24px - var(--da-knob-size, 11px)))` }
+								style: { bottom: `calc(${travelHeight(weightFraction)} - var(--da-knob-size) / 2)` }
 							})
 						]
 					}),
@@ -5707,11 +5931,7 @@ window.__ModuleLoader__.load({
 								dragFrom.current = null;
 								setDragging(false);
 							},
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "da-palette-grip-dots",
-								"aria-hidden": true,
-								children: "⠿"
-							})
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripDots, { wide: true })
 						}), TOOLS.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							className: "da-btn da-tool",
@@ -5765,11 +5985,7 @@ window.__ModuleLoader__.load({
 									barFrom.current = null;
 									setBarDragging(false);
 								},
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "da-palette-grip-dots",
-									"aria-hidden": true,
-									children: "⠿"
-								})
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripDots, { wide: false })
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "da-bar-tools",
@@ -5796,6 +6012,7 @@ window.__ModuleLoader__.load({
 								className: "da-style-row",
 								role: "group",
 								"aria-label": t("style"),
+								"data-side": foldOpensDown ? "below" : "above",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "da-style-label",
 									children: t("styleColor")

package/lib/index.js

@@ -21,9 +21,9 @@ const GUIDANCE = [
 	"",
 	"用户可能在文档预览里直接标注（箭头/框选/椭圆/手绘/单点），发送给你的消息以【附图标注】开头，正文就是**逐条标注清单**，不需要再去读任何附加文件（标注文件是投递用的临时件，发出即删）。收到时按下列纪律处理：",
 	"",
-	"1. 逐条读消息正文的清单：每条形如 `① 箭头 (10,10) → (40,30)，要改：标号指错了`，括号里是图面像素坐标（原点在左上角），`要改：` 之后是用户写的**详细说明**——那是这条标注唯一的内容，按它判断意图。有的条目还带 `锚定:` 后缀，说明该处落在一个具体元素上（SVG 给 `title`/`id`/元素文字，HTML 给 `selector`/元素文字），定位时优先用它。",
+	"1. 逐条读消息正文的清单：每条形如 `① 箭头 (10,10) → (40,30)，批注：标号指错了`。括号里是图面像素坐标，原点在左上角；框选与圈选给的是**左上角-右下角**，手绘线给的是它画在哪个框里。`批注：` 之后是用户写的**详细说明**——那是这条标注唯一的内容，按它判断意图。有的条目在形状后面紧跟一个圆括号，写着该处落在哪个元素上（SVG 给元素标题/`id`/元素文字，HTML 给 `selector`/元素文字），定位时优先用它。",
 	"2. **PDF 是整份文档一份标注**：每条标注都带 `第 N 页`，坐标是那一页自己的（原点在该页左上角）。看每条标注前先确认它的页码。",
-	"3. 有形状的标注（箭头/框选/椭圆/手绘）会附一张标注图（`<图名>.annotated.png`，PDF 则是一份**带批注的 PDF**，其批注是原生 PDF 注释对象：`/Ink` 手绘、`/Square` 框选、`/Circle` 圈选、`/Line` 箭头），可直接打开核对图面位置。**若消息说「本条标注只有位置点，没有标注图」，那就是全部内容：只有坐标加一句说明，直接按原图定位处理，不要去找不存在的附件。**",
+	"3. 若标注超出原图边界，标注图会把越界的那圈纸也画出来，并用**灰色虚线**框住原图真正的边缘：虚线**里面**是原图，**外面**是你画的标注伸出去的部分——那块不属于图，不要把它当成新增的画布内容。有形状的标注（箭头/框选/椭圆/手绘）会附一张标注图（`<图名>.annotated.png`，PDF 则是一份**带批注的 PDF**，其批注是原生 PDF 注释对象：`/Ink` 手绘、`/Square` 框选、`/Circle` 圈选、`/Line` 箭头），可直接打开核对图面位置。**若消息说「本条标注只有位置点，没有标注图」，那就是全部内容：只有坐标加一句说明，直接按原图定位处理，不要去找不存在的附件。**",
 	"4. 逐条处理标注：每条标注都要落到具体的图面改动，并在答复里逐条回应（编号与标注一致）。无法实现的标注要说明原因，不要静默跳过。",
 	"5. 修改附图以**标注所指的生成源**为准（绘制脚本、SVG 源或 `generate_patent_figure` 的入参），不要直接涂改导出的位图；PDF 同理，改的是生成该 PDF 的源头，不是那份带批注的副本。未标注的部分保持不动。",
 	"6. 改完图后重新渲染并核对：图面尺寸/坐标若变化，旧标注的坐标会失准，此时以 `anchor` 与标注文字为准复核一遍，再回报结果。",
@@ -270,7 +270,7 @@ const WEIGHT_MIN = .5;
 * @returns the value, pulled to the nearest end of the range.
 */
 function clampWeight(value) {
-	return Math.min(4, Math.max(WEIGHT_MIN, value));
+	return Math.min(8, Math.max(WEIGHT_MIN, value));
 }
 //#endregion
 //#region src/host/store.ts

package/market/index.json

@@ -93,8 +93,8 @@
       },
       "versions": [
         {
-          "version": "1.1.2",
-          "publishTimestamp": 1792731605,
+          "version": "1.1.3",
+          "publishTimestamp": 1792762042,
           "source": {
             "type": "npm",
             "registry": "https://registry.npmjs.org"

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "dsh-figmark",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": false,
-  "description": "DSH 插件：在右侧栏预览里对科研配图、SVG、PDF、HTML 直接圈画批注，标注写进侧车文件并可一键交给智能体改图源",
+  "description": "DSH \u63d2\u4ef6\uff1a\u5728\u53f3\u4fa7\u680f\u9884\u89c8\u91cc\u5bf9\u79d1\u7814\u914d\u56fe\u3001SVG\u3001PDF\u3001HTML \u76f4\u63a5\u5708\u753b\u6279\u6ce8\uff0c\u6807\u6ce8\u5199\u8fdb\u4fa7\u8f66\u6587\u4ef6\u5e76\u53ef\u4e00\u952e\u4ea4\u7ed9\u667a\u80fd\u4f53\u6539\u56fe\u6e90",
   "license": "MIT",
   "icon": "./icon.svg",
   "keywords": [