dsh-figmark 1.0.1 → 1.1.0

package/lib/client.js

@@ -25,6 +25,8 @@ window.__ModuleLoader__.load({
 			redo: "重做",
 			clear: "清空",
 			detail: "这个元素的详细说明",
+			addComment: "添加评论…",
+			weight: "线条粗细",
 			detailPlaceholder: "这一处具体要改什么（例如「这个标号应指向滑套 34」）",
 			summary: "总体目标",
 			summaryPlaceholder: "可选：这张图整体要往哪个方向改（智能体会连同下面逐条说明一起读）",
@@ -110,6 +112,8 @@ window.__ModuleLoader__.load({
 			redo: "Redo",
 			clear: "Clear",
 			detail: "What this element needs",
+			addComment: "Add a comment…",
+			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 +257,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.
@@ -991,6 +1015,20 @@ window.__ModuleLoader__.load({
 		//#region src/client/render.ts
 		/** Stroke width of every mark, in figure 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.
+		*
+		* @param mark - the mark to weigh.
+		* @returns its stroke width in figure pixels.
+		*/
+		function strokeWidthOf(mark) {
+			return STROKE_WIDTH * (mark.weight ?? 1);
+		}
 		/** Arrow head length, in figure pixels. */
 		const ARROW_HEAD = 14;
 		/** Half-angle of the arrow head, in radians. */
@@ -1073,12 +1111,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) {
 			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;
+			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 +1135,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": {
@@ -1206,12 +1245,12 @@ window.__ModuleLoader__.load({
 		*/
 		function markOutline(mark) {
 			if (mark.kind === "point") return pointMarkBox(mark);
-			const geometry = mark.kind === "arrow" ? arrowBarbs(mark.points) : mark.points;
+			const geometry = mark.kind === "arrow" ? arrowBarbs(mark.points, mark.weight ?? 1) : 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) / 2;
 			return {
 				x: box.x - grow,
 				y: box.y - grow,
@@ -1318,6 +1357,7 @@ window.__ModuleLoader__.load({
 		*/
 		function Canvas(props) {
 			const { width, height, marks, tool, color, containerRef, anchoring } = props;
+			const weight = props.weight ?? 1;
 			/**
 			* Each mark's number, by id.
 			*
@@ -1567,7 +1607,8 @@ window.__ModuleLoader__.load({
 					id: nextMarkId(),
 					kind: tool,
 					color,
-					points: seed
+					points: seed,
+					weight
 				});
 			};
 			const move = (event) => {
@@ -1814,7 +1855,7 @@ window.__ModuleLoader__.load({
 									d: path,
 									fill: "none",
 									stroke: "#ffffff",
-									strokeWidth: 5,
+									strokeWidth: strokeWidthOf(shown) + 2.5,
 									strokeLinecap: "round",
 									strokeLinejoin: "round"
 								}),
@@ -1822,7 +1863,7 @@ window.__ModuleLoader__.load({
 									d: path,
 									fill: "none",
 									stroke: shown.color,
-									strokeWidth: STROKE_WIDTH,
+									strokeWidth: strokeWidthOf(shown),
 									strokeLinecap: "round",
 									strokeLinejoin: "round"
 								}),
@@ -2449,7 +2490,7 @@ window.__ModuleLoader__.load({
 		function markSvg(mark, number) {
 			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"/>`);
+			if (path !== void 0) parts.push(`<path d="${path}" fill="none" stroke="#ffffff" stroke-width="${strokeWidthOf(mark) + 2.5}" stroke-linecap="round" stroke-linejoin="round"/>`, `<path d="${path}" fill="none" stroke="${mark.color}" stroke-width="${strokeWidthOf(mark)}" 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 (pin !== void 0 && centre !== void 0) {
@@ -2787,6 +2828,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 +2899,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 +2926,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 +3120,41 @@ 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 weight rail ----------------------------------------------------- */
+/* A vertical rail along the left edge of the figure. Idle it is a hairline: the
+   whole control is 6px wide, so it reads as a rule at the edge of the drawing
+   rather than as a panel competing with it. Crossing it opens it out to a track
+   with a knob, which is where the width can be read and dragged. A horizontal
+   range input is rotated upright inside the pill, because a range is the one
+   control the browser already knows how to drag with every pointer. */
+.da-weight{position:absolute;z-index:7;left:6px;top:50%;transform:translateY(-50%);
+  display:flex;align-items:center;justify-content:center;width:6px;height:132px;
+  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:26px;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 track: a hairline down the middle of the pill, only wide enough to see. */
+.da-weight::before{content:"";position:absolute;left:50%;top:11px;bottom:11px;width:2px;
+  transform:translateX(-50%);border-radius:1px;background:var(--dsw-alias-border-l3,rgba(127,127,127,.34))}
+/* The filled part of the track, drawn from the bottom up. */
+.da-weight-fill{position:absolute;left:50%;bottom:11px;width:2px;transform:translateX(-50%);
+  border-radius:1px;background:var(--dsw-alias-brand-primary,#176df2);opacity:0;transition:opacity .16s ease}
+.da-weight:hover .da-weight-fill,.da-weight:focus-within .da-weight-fill{opacity:1}
+/* The knob sits on the value. It is 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:9px;height:9px;border-radius:50%;
+  transform:translateX(-50%);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:13px;height:13px;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 keeps the
+   dragging, the arrow keys, the step and the accessible name, while the rail above
+   does the drawing. */
+.da-weight-input{position:absolute;left:50%;top:50%;width:112px;height:26px;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
@@ -3219,9 +3313,31 @@ 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: the pill is a place to type, not a
+     panel, and the rule for the record cards' textareas sets a 74px floor. */
+  min-height:0;height:33px;max-height:120px;overflow-y:auto;outline:none;field-sizing:content}
+.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;
@@ -3587,27 +3703,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 +3937,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)([]);
@@ -3998,13 +4094,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.
@@ -4283,11 +4381,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 () => {
@@ -4526,22 +4625,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];
@@ -4659,7 +4751,7 @@ window.__ModuleLoader__.load({
 				const exportScale = Math.min(2, Math.max(1, 2400 / Math.max(target.width, target.height)));
 				return await rasterizePng(svg, target.width, target.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 +4766,7 @@ window.__ModuleLoader__.load({
 					},
 					createdAt: createdAt ?? now,
 					updatedAt: now,
-					marks,
+					marks: scope,
 					...summary.trim() === "" ? {} : { summary: summary.trim() }
 				};
 			}, [
@@ -4777,15 +4869,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 +4939,7 @@ window.__ModuleLoader__.load({
 				discard,
 				exportPng,
 				layer,
-				marks.length,
+				marks,
 				props.conversation,
 				props.localeId,
 				props.sessions,
@@ -4880,6 +4973,37 @@ window.__ModuleLoader__.load({
 			* the next stroke, which is where the remembered preference comes in.
 			*/
 			const shownColor = selected === null ? color : selected.color;
+			const shownWeight = selected === null ? weight : 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 chooseWeight = (value) => {
+				const held = clampWeight(value);
+				if (selected === null) {
+					setWeight(held);
+					return;
+				}
+				repaintSelected(selected, { weight: held });
+			};
 			const surfaceStyle = size === null ? {} : {
 				width: size.width * scale,
 				height: size.height * scale
@@ -4955,6 +5079,7 @@ window.__ModuleLoader__.load({
 									marks,
 									tool,
 									color,
+									weight,
 									containerRef: figureHostRef,
 									anchoring: isVector,
 									anchorAtFigurePoint: figure?.kind === "html" ? anchorAtFigurePoint : void 0,
@@ -5122,42 +5247,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"),
+						})]
+					}),
+					tool === "point" || selected?.kind === "point" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "da-weight",
+						title: t("weight"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "range",
+								className: "da-weight-input",
+								"aria-label": t("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}% - 5px)` }
+							})
+						]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "da-palette",

package/lib/client.pdf.js

@@ -25867,10 +25867,11 @@ while (prev === _win[++scan] && prev === _win[++scan] && prev === _win[++scan] &
 			if (mark.kind === "rect" || mark.kind === "ellipse") {
 				if (turned) points = turnedRing(mark.kind, mark.points, centre, radians);
 			} else if (spins) points = mark.points.map((point) => turnAround(point, centre, radians));
+			const weight = mark.weight ?? 1;
 			return {
 				points: points.map((point) => toUserSpace(transform, point)),
-				width: STROKE_WIDTH / scale,
-				head: ARROW_HEAD / scale,
+				width: STROKE_WIDTH * weight / scale,
+				head: ARROW_HEAD * weight / scale,
 				turned
 			};
 		}

package/lib/index.js

@@ -260,6 +260,19 @@ function annotationTargetsFigure(document, figurePath) {
 	return basename(document.figure.path).toLowerCase() === basename(figurePath).toLowerCase();
 }
 //#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));
+}
+//#endregion
 //#region src/host/store.ts
 /**
 * Reading and writing one figure's annotation sidecar.
@@ -332,6 +345,11 @@ function readAnchor(value) {
 * @returns the angle in degrees, or undefined when absent.
 * @throws {Error} when the field is present but is not a usable angle.
 */
+function readWeight(value) {
+	if (value === void 0) return void 0;
+	if (typeof value !== "number" || !Number.isFinite(value)) throw new Error("annotation mark weight must be a finite multiple of the default width");
+	return clampWeight(value);
+}
 function readRotation(value) {
 	if (value === void 0) return void 0;
 	if (typeof value !== "number" || !Number.isFinite(value)) throw new Error("annotation mark rotation must be a finite number of degrees");
@@ -377,6 +395,7 @@ function readMark(value, index, figure) {
 	if (page !== void 0 && figure.pageCount !== void 0 && page > figure.pageCount) throw new Error(`annotation mark ${index} is on page ${page} of a ${figure.pageCount}-page document`);
 	const anchor = readAnchor(raw["anchor"]);
 	const rotation = readRotation(raw["rotation"]);
+	const weight = readWeight(raw["weight"]);
 	return {
 		id: raw["id"],
 		kind,
@@ -385,6 +404,7 @@ function readMark(value, index, figure) {
 		...typeof raw["detail"] === "string" ? { detail: raw["detail"] } : {},
 		...page === void 0 ? {} : { page },
 		...rotation === void 0 ? {} : { rotation },
+		...weight === void 0 ? {} : { weight },
 		...anchor === void 0 ? {} : { anchor }
 	};
 }

package/market/index.json

@@ -93,8 +93,8 @@
       },
       "versions": [
         {
-          "version": "1.0.1",
-          "publishTimestamp": 1792640347,
+          "version": "1.1.0",
+          "publishTimestamp": 1792725959,
           "source": {
             "type": "npm",
             "registry": "https://registry.npmjs.org"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-figmark",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "private": false,
   "description": "DSH 插件：在右侧栏预览里对科研配图、SVG、PDF、HTML 直接圈画批注，标注写进侧车文件并可一键交给智能体改图源",
   "license": "MIT",