@retikz/core 0.1.0-alpha.4 → 0.1.0-alpha.5

package/dist/es/compile/path.js

@@ -1,52 +1,72 @@
+import { HOLLOW_ARROW_SHAPES } from "../ir/path/arrow.js";
 import { resolvePosition } from "./position.js";
 import { anchorOf, angleBoundaryOf, boundaryPointOf } from "./node.js";
-import { arcBoundingPoints, arcEndPoint, arcSvgFlags } from "../geometry/arc.js";
+import { arcBoundingPoints, arcEndPoint } from "../geometry/arc.js";
 import { bendControlPoints } from "../geometry/bend.js";
 import { arcSegmentSample, circleSegmentSample, cubicSegmentSample, ellipseSegmentSample, foldSegmentSample, lineSegmentSample, quadSegmentSample } from "../geometry/segment.js";
 import { parseNodeRef } from "./parseTarget.js";
 import { fallbackMeasurer } from "./text-metrics.js";
 //#region src/compile/path.ts
 /**
-* IR 的 path-level `arrow` + `arrowShape` 映射到 PathPrim 的
-* arrowStart / arrowEnd（值就是 shape 名）。`arrowShape` 省略时默认 'normal'。
+* 端点级 spec：顶层默认 ⊕ end-side override（逐字段 merge）
+* @description 缺省字段继承顶层（不是"完全替换"）；空心 shape 上 fill 字段被丢（silent no-op）
 */
-var arrowMarkers = (arrow, shape = "normal") => {
+var resolveArrowEndSpec = (topLevel, endSide) => {
+	const baseShape = endSide?.shape ?? topLevel.shape ?? "normal";
+	const out = { shape: baseShape };
+	const scale = endSide?.scale ?? topLevel.scale;
+	if (scale !== void 0) out.scale = scale;
+	const length = endSide?.length ?? topLevel.length;
+	if (length !== void 0) out.length = length;
+	const width = endSide?.width ?? topLevel.width;
+	if (width !== void 0) out.width = width;
+	const color = endSide?.color ?? topLevel.color;
+	if (color !== void 0) out.color = color;
+	const opacity = endSide?.opacity ?? topLevel.opacity;
+	if (opacity !== void 0) out.opacity = opacity;
+	const lineWidth = endSide?.lineWidth ?? topLevel.lineWidth;
+	if (lineWidth !== void 0) out.lineWidth = lineWidth;
+	if (!HOLLOW_ARROW_SHAPES.has(baseShape)) {
+		const fill = endSide?.fill ?? topLevel.fill;
+		if (fill !== void 0) out.fill = fill;
+	}
+	return out;
+};
+/** IR path-level `arrow` + `arrowDetail` → PathPrim 起末视觉规格 */
+var arrowMarkers = (arrow, detail) => {
+	if (!arrow || arrow === "none") return {};
+	const top = detail ?? {};
+	const startSpec = resolveArrowEndSpec(top, top.start);
+	const endSpec = resolveArrowEndSpec(top, top.end);
 	switch (arrow) {
-		case "->": return { arrowEnd: shape };
-		case "<-": return { arrowStart: shape };
+		case "->": return { arrowEnd: endSpec };
+		case "<-": return { arrowStart: startSpec };
 		case "<->": return {
-			arrowStart: shape,
-			arrowEnd: shape
+			arrowStart: startSpec,
+			arrowEnd: endSpec
 		};
-		default: return {};
 	}
 };
 /**
-* 按 arrow shape 决定线段需要从端点向内"缩短"多少（单位：strokeWidth 倍）。
+* 端点级 shrink（strokeWidth 倍）：line 末端朝起点缩这么多，让 marker apex 落回原 target
+* @description 不分实心/空心：所有 shape 都让 line 端点接在箭头尾部、apex 顶端仍贴原 target。低 opacity 下不会再透出 line。viewBox=10，shrink = (apex.x - refX) × length × scale / 10（strokeWidth 倍）。
 *
-* 用途：避免 hollow shape（如 `open` / `openDiamond` / `openCircle`）的
-* 空心内部被 path 描边穿过——把线末端退到形状背面位置，marker 的 apex
-* 才能正好落在原始端点上。
-*
-* 这个值与 marker 几何配套，必须与 react/render/arrowMarkers.tsx 里
-* 各 shape 的 refX / 形状定义保持一致：
-*   shrink = (apexX - refX) × markerWidth / viewBoxWidth
-*   open:        apexX=9,    refX=1, scale=6/10 → 8  × 0.6 = 4.8
-*   openDiamond: apexX=9,    refX=1, scale=6/10 → 8  × 0.6 = 4.8
-*   openCircle:  apexX=10,   refX=0, scale=6/10 → 10 × 0.6 = 6
-* 实心 shape（normal / stealth / diamond / circle）apex / 边缘已贴 refX=10，
-* line 被 fill 覆盖看不见，shrink=0。
+* 几何对齐（必须与 react/render/arrowMarkers.tsx 中 renderInner 的 refX 一致）：
+* - `normal` / `diamond` / `circle`：apex 在 viewBox x=10、back 外缘 x=0 → refX=0，shrink = length × scale
+* - `stealth`：apex x=10、V tip x=3（line 嵌进 V 凹口）→ refX=3，shrink = 0.7 × length × scale
+* - `open` / `openDiamond`：apex x=9、back stroke 外缘 x = 1 - lineWidth/2 → refX = 1 - lineWidth/2，shrink = (8 + lineWidth/2) × length × scale / 10
+* - `openCircle`：apex 外缘右 x ≈ 10、back 外缘左 x = 0.75 - lineWidth/2 → refX = 0.75 - lineWidth/2，shrink ≈ length × scale
 */
-var SHRINK_FOR_SHAPE = {
-	normal: 0,
-	open: 4.8,
-	stealth: 0,
-	diamond: 0,
-	openDiamond: 4.8,
-	circle: 0,
-	openCircle: 6
+var computeShrink = (spec) => {
+	const length = (spec.length ?? 6) * (spec.scale ?? 1);
+	if (HOLLOW_ARROW_SHAPES.has(spec.shape)) {
+		if (spec.shape === "openCircle") return length;
+		return (8 + (spec.lineWidth ?? 1.5) / 2) * length / 10;
+	}
+	if (spec.shape === "stealth") return 7 * length / 10;
+	return length;
 };
-/** 把点 p 朝 target 方向移动 dist 个 path 单位 */
+/** 把 p 朝 target 方向移动 dist */
 var shiftToward = (p, target, dist) => {
 	const dx = target[0] - p[0];
 	const dy = target[1] - p[1];
@@ -55,15 +75,8 @@ var shiftToward = (p, target, dist) => {
 	return [p[0] + dx / len * dist, p[1] + dy / len * dist];
 };
 /**
-* 求一个 step.to 的"参考点"——给段内 boundary clip 算方向 / 折角 corner 用。
-*
-* 三态字符串语法（ADR-0004）：
-* - `'A'`（auto）：节点中心；邻居端点 clip 时按"A 中心 → toward"射线求边界
-* - `'A.<anchor>'`：命名 anchor 位置（位置即 endpoint，refPoint 也是它）
-* - `'A.<deg>'`：节点 deg 方向上的视觉边界点（位置即 endpoint）
-*
-* 后两种"显式锚点"模式下 refPoint = endpoint（位置不随邻居变），auto 模式
-* 下 refPoint 仍是中心。直接坐标 / 极坐标：解析后的笛卡尔。
+* 求 step.to 的参考点（给 boundary clip 算方向 / 折角 corner 用）
+* @description 三态：`'A'`(auto) 节点中心；`'A.<anchor>'`/`'A.<deg>'` 显式锚点 refPoint=endpoint 位置不随邻居变。直接坐标/极坐标解析为笛卡尔
 */
 var refPointOfTarget = (target, nodeIndex) => {
 	if (typeof target === "string") {
@@ -76,22 +89,14 @@ var refPointOfTarget = (target, nodeIndex) => {
 			case "angle": return angleBoundaryOf(node, ref.angle);
 		}
 	}
-	if (typeof target === "object" && !Array.isArray(target) && ("rel" in target || "relAccumulate" in target)) return null;
+	if (typeof target === "object" && !Array.isArray(target) && ("relative" in target || "relativeAccumulate" in target)) return null;
 	return resolvePosition(target, nodeIndex);
 };
-/**
-* 折角中间点：基于"参考点"（节点中心或直接坐标）算直角拐点。
-* `-|` corner = (curr.x, prev.y)；`|-` corner = (prev.x, curr.y)。
-*/
+/** 折角中间点：`-|` → (curr.x, prev.y)；`|-` → (prev.x, curr.y) */
 var cornerOf = (prev, curr, via) => via === "-|" ? [curr[0], prev[1]] : [prev[0], curr[1]];
 /**
-* 把 step.to 在给定方向 `toward` 上算出"实际绘制端点"：
-* - 节点 ref auto（`'A'`）：按 shape 多态走 boundaryPointOf——外扩 margin 后
-*   求边界与"中心→toward"射线交点
-* - 节点 ref 命名 anchor（`'A.north'`）/ 角度（`'A.30'`）：位置已被解析定死，
-*   直接返回，**不再受 toward 影响**
-* - 直接坐标 / 极坐标：解析后直接返回（不做 clip）
-* 解析失败返回 null。
+* 在 toward 方向算 step.to 的实际绘制端点
+* @description 节点 auto `'A'`：按 shape 走 boundaryPointOf 求中心→toward 射线交点；命名 anchor/角度：位置已定不受 toward 影响；直接坐标/极坐标：解析后返回；失败返回 null
 */
 var clipForTarget = (target, toward, nodeIndex) => {
 	if (typeof target === "string") {
@@ -104,24 +109,14 @@ var clipForTarget = (target, toward, nodeIndex) => {
 			case "angle": return angleBoundaryOf(node, ref.angle);
 		}
 	}
-	if (typeof target === "object" && !Array.isArray(target) && ("rel" in target || "relAccumulate" in target)) return null;
+	if (typeof target === "object" && !Array.isArray(target) && ("relative" in target || "relativeAccumulate" in target)) return null;
 	return resolvePosition(target, nodeIndex);
 };
-/** 浅相等：两个 IRPosition 的两个分量都精确相等（未 round） */
+/** 两个 IRPosition 两分量精确相等（未 round） */
 var samePoint = (a, b) => !!a && !!b && a[0] === b[0] && a[1] === b[1];
 /**
-* 语义 stroke 档位 → 数值映射（user units）。
-*
-* 对齐 TikZ 比例（thin = 默认 0.4pt，retikz 默认 strokeWidth = 1，所以 thin → 1）：
-*   ultra thin  0.1pt → 0.25
-*   very thin   0.2pt → 0.5
-*   thin        0.4pt → 1     （= 默认 strokeWidth）
-*   semithick   0.6pt → 1.5
-*   thick       0.8pt → 2
-*   very thick  1.2pt → 3
-*   ultra thick 1.6pt → 4
-*
-* 显式 `strokeWidth` 始终覆盖 `thickness`——thickness 仅在 strokeWidth 缺省时生效。
+* 语义 stroke 档位 → 数值（user units）
+* @description 对齐 TikZ 比例（thin=0.4pt→1=默认 strokeWidth）：ultraThin 0.25、veryThin 0.5、thin 1、semithick 1.5、thick 2、veryThick 3、ultraThick 4。显式 strokeWidth 覆盖 thickness
 */
 var THICKNESS_TO_WIDTH = {
 	ultraThin: .25,
@@ -132,26 +127,33 @@ var THICKNESS_TO_WIDTH = {
 	veryThick: 3,
 	ultraThick: 4
 };
-/** ADR-0004：边标注的默认字号 / 偏移量（user units） */
+/** 边标注默认字号 / 偏移量 */
 var LABEL_FONT_SIZE = 14;
 var LABEL_LINE_HEIGHT_FACTOR = 1.2;
 var LABEL_SIDE_OFFSET = 4;
 var RAD_TO_DEG = 180 / Math.PI;
-/** label.position → 段参数 t */
-var tForLabelPosition = (pos) => pos === "near-start" ? .25 : pos === "near-end" ? .75 : .5;
+/** keyword → t 数值映射；含旧 3 keyword（midway/near-start/near-end）+ 新 4 keyword */
+var KEYWORD_TO_T = {
+	"at-start": 0,
+	"very-near-start": .125,
+	"near-start": .25,
+	midway: .5,
+	"near-end": .75,
+	"very-near-end": .875,
+	"at-end": 1
+};
 /**
-* 把 step.label + 段采样结果翻成 TextPrim（sloped 时再裹一层 group 旋转）。
-*
-* 几何（默认 side='above'，position='midway'）：
-* - 'above': 锚点 (x, y - LABEL_SIDE_OFFSET)，align=middle, baseline=bottom
-* - 'below': 锚点 (x, y + LABEL_SIDE_OFFSET)，align=middle, baseline=top
-* - 'left' : 锚点 (x - LABEL_SIDE_OFFSET, y)，align=end,    baseline=middle
-* - 'right': 锚点 (x + LABEL_SIDE_OFFSET, y)，align=start,  baseline=middle
-* - 'sloped': 锚点 (x, y) 不偏移，align=middle baseline=bottom，外裹 group
-*   `transform="rotate(angle x y)"`，angle 由切线 atan2 算出（SVG y-down，CW 正向）
-*
-* 文本宽高交给 measureText；fallbackMeasurer 时只是估算，但不影响渲染坐标。
-* 返回 primitive + 用于 viewBox 的若干外接点（sloped 时按"近似最大半径"四角扩张）。
+* label.position → 段参数 t∈[0,1]
+* @description 数值原样返回（schema 已 clamp 0..1）；keyword 走 KEYWORD_TO_T 映射；undefined 退默认 midway (0.5)
+*/
+var tForLabelPosition = (pos) => {
+	if (typeof pos === "number") return pos;
+	if (typeof pos === "string" && pos in KEYWORD_TO_T) return KEYWORD_TO_T[pos];
+	return .5;
+};
+/**
+* step.label + 段采样 → TextPrim（sloped 时裹一层 group 旋转）
+* @description 默认 side='above'/position='midway'：above/below 锚点 y±offset、align=middle、baseline=bottom/top；left/right x±offset、align=end/start、baseline=middle；sloped 不偏移裹 group rotate(angle, cx, cy) 由切线 atan2 算（SVG y-down CW 正）。返回 primitive + viewBox 外接点
 */
 var emitLabelPrimitive = (label, sample, measureText, round) => {
 	const fontSize = LABEL_FONT_SIZE;
@@ -193,7 +195,12 @@ var emitLabelPrimitive = (label, sample, measureText, round) => {
 	if (side === "sloped") {
 		const groupPrim = {
 			type: "group",
-			transform: `rotate(${round(Math.atan2(sample.tangent[1], sample.tangent[0]) * RAD_TO_DEG)} ${round(x)} ${round(y)})`,
+			transforms: [{
+				kind: "rotate",
+				degrees: round(Math.atan2(sample.tangent[1], sample.tangent[0]) * RAD_TO_DEG),
+				cx: round(x),
+				cy: round(y)
+			}],
 			children: [text]
 		};
 		const r = Math.max(measuredWidth / 2, measuredHeight / 2);
@@ -220,22 +227,8 @@ var emitLabelPrimitive = (label, sample, measureText, round) => {
 	};
 };
 /**
-* 把 rel / relAccumulate 目标解析为绝对 Position，产出 step kind 不变但
-* `to` 字段全为绝对坐标的步序列。
-*
-* 决策（ADR-0003 §影响 与 §背景 文本有矛盾）：
-*   两者都相对 prevEnd 解析，区别仅在是否更新 prevEnd——
-*   rel 不更新（保持 TikZ `+` 语义），relAccumulate 更新（TikZ `++` 累积）。
-*   选这个语义因为：(1) 与 TikZ `+`/`++` 一致；(2) 与字段名"Accumulate"
-*   语义匹配；(3) 与 ADR 背景段一致；§影响 段写"pathStart + offset"是 typo。
-*
-* 跨 step kind 的 prevEnd 推进：
-* - 有 to 的 kind（move/line/step/curve/cubic/bend）：prevEnd = refPointOfTarget(to)
-* - arc：prevEnd = arcEndPoint(prevEnd, radius, endAngle)
-* - circlePath / ellipsePath：prevEnd 不变（画完留圆心，即 prevEnd 本身）
-* - cycle：prevEnd 不变（不重置到 pathStart，保持简单；后续如有需要再扩）
-*
-* prevEnd 为 null（首步是 rel）时回退到 [0, 0] 当锚点；解析失败保持原 step。
+* relative/relativeAccumulate 目标解析为绝对 Position（step kind 不变，to 全为绝对坐标）
+* @description relative 不更新 prevEnd（TikZ `+`），relativeAccumulate 更新（TikZ `++`）。prevEnd 推进：有 to 的 kind 用 refPointOfTarget(to)；arc 用 arcEndPoint；circlePath/ellipsePath/cycle 不变。首步 relative 时 prevEnd 回退 [0,0]；解析失败保持原 step
 */
 var normalizeRelativeTargets = (steps, nodeIndex) => {
 	let prevEnd = null;
@@ -257,13 +250,13 @@ var normalizeRelativeTargets = (steps, nodeIndex) => {
 		const original = step.to;
 		let resolvedTo = original;
 		let updatePrevEnd = true;
-		if (typeof original === "object" && !Array.isArray(original) && "rel" in original) {
+		if (typeof original === "object" && !Array.isArray(original) && "relative" in original) {
 			const ref = prevEnd ?? [0, 0];
-			resolvedTo = [ref[0] + original.rel[0], ref[1] + original.rel[1]];
+			resolvedTo = [ref[0] + original.relative[0], ref[1] + original.relative[1]];
 			updatePrevEnd = false;
-		} else if (typeof original === "object" && !Array.isArray(original) && "relAccumulate" in original) {
+		} else if (typeof original === "object" && !Array.isArray(original) && "relativeAccumulate" in original) {
 			const ref = prevEnd ?? [0, 0];
-			resolvedTo = [ref[0] + original.relAccumulate[0], ref[1] + original.relAccumulate[1]];
+			resolvedTo = [ref[0] + original.relativeAccumulate[0], ref[1] + original.relativeAccumulate[1]];
 		}
 		out.push({
 			...step,
@@ -277,33 +270,15 @@ var normalizeRelativeTargets = (steps, nodeIndex) => {
 	return out;
 };
 /**
-* 把 IR Path 翻译为单个 PathPrim。
-*
-* 关键算法（v0.1.0-alpha.1）：每个绘制段（line / fold）**独立**地用节点中心
-* 算两端 boundary clip——一个节点在路径中段时，"入边"和"出边" boundary 点
-* 通常不同，路径会在该节点处可见地"断开"。这与 TikZ 原生语义一致：
-*
-*   `\draw (A) -- (B) -- (C);`
-*   段 1：A.center → B.center 决定 A 出口、B 入口的 boundary 交点
-*   段 2：B.center → C.center 决定 B 出口、C 入口的 boundary 交点
-*   B 在两段里 clip 出来的点不同——视觉上看到两条独立线段。
-*
-* 实现上仍只产一个 PathPrim：d 字符串里以多组 `M ... L ...` 表达多个 sub-path。
-* 当某段起点恰好等于上一段终点（例如直接坐标连续，或未触发 clip 差异）时，
-* 复用 cursor，省掉冗余 M。
-*
-* cycle 段：闭回最近一次 move 起点。若 cycle 起点 == lastEnd 且终点 == subPathStart，
-* 输出 `Z`（最优雅）；否则显式画一段 line（与"段独立 clip"一致）。
-*
-* 引用未定义节点 / 解析失败时返回 null（path 整体跳过）。
+* IR Path → PathPrim
+* @description 每个绘制段独立用节点中心算两端 boundary clip——中段节点的入/出 boundary 点通常不同，path 在该节点可见"断开"（与 TikZ `\draw (A)--(B)--(C);` 段独立 clip 一致）。仍产一个 PathPrim：commands 用多组 move/line 表达 sub-path；段起点等于上段终点时复用 cursor 省 move。cycle 段闭回最近 move 起点，起点==lastEnd && 终点==subPathStart 时输出 close，否则显式画段 line。引用未定义节点/解析失败返回 null
 */
 var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer) => {
 	const steps = normalizeRelativeTargets(path.children, nodeIndex);
 	if (steps.length < 2) return null;
-	/** ADR-0004：每段 step.label 翻译出的 TextPrim（或裹 sloped 旋转的 group），
-	*  与 path 主体 primitive 同级返回；调用方 push 进 scene.primitives */
+	/** 每段 step.label 翻译出的 TextPrim（或 sloped 旋转的 group），与 path 主体同级返回 */
 	const labelPrims = [];
-	/** 为当前 step 收 label：算 sample 后调用 emitLabelPrimitive，结果累积到 labelPrims / points */
+	/** 算 sample 后 emitLabelPrimitive，结果累积到 labelPrims/points */
 	const collectLabel = (step, sampleAt) => {
 		if (step.kind === "move" || step.kind === "cycle" || !("label" in step) || !step.label) return;
 		const sample = sampleAt(tForLabelPosition(step.label.position));
@@ -313,7 +288,7 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 	};
 	const hasTo = (s) => s.kind !== "cycle" && s.kind !== "arc" && s.kind !== "circlePath" && s.kind !== "ellipsePath";
 	const anchors = steps.map((s) => hasTo(s) ? refPointOfTarget(s.to, nodeIndex) : null);
-	/** 找 i 之前最近的"有 to 字段的 step" + 它的 anchor */
+	/** 找 i 之前最近的"有 to 字段的 step" 及其 anchor */
 	const findPrev = (i) => {
 		for (let j = i - 1; j >= 0; j--) {
 			const s = steps[j];
@@ -327,7 +302,7 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 		}
 		return null;
 	};
-	/** 找 i 之前最近的 move 的 to——cycle 闭合的目标 */
+	/** 找 i 之前最近的 move 的 to，cycle 闭合的目标 */
 	const findRecentMoveTo = (i) => {
 		for (let j = i - 1; j >= 0; j--) {
 			const s = steps[j];
@@ -335,80 +310,96 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 		}
 		return null;
 	};
-	const ops = [];
+	const commands = [];
 	const points = [];
 	let lastEnd = null;
 	let subPathStart = null;
 	/**
-	* "笔位覆盖"——arc / circlePath / ellipsePath 这种没有 `to` 字段的 step
-	* 不能通过 `prev.step.to` 重算下一段的起点。它们设置 penOverride，下一个
-	* 绘制段（line/curve/cubic/bend/step）直接用这个点当 fromClip，之后清空。
-	*
-	*   - arc：endpoint（弧终点）—— 与 SVG 实际 cursor 一致
-	*   - circlePath/ellipsePath：center（圆心）—— ADR-0002 决策"画完留在圆心"，
-	*     注意 SVG 实际 cursor 在弧端点而不在 center，必须靠 startSegment 发 M
-	*     teleport 回中心
+	* 笔位覆盖：arc/circlePath/ellipsePath 无 `to` 字段不能用 prev.step.to 重算起点
+	* @description 设置 penOverride 让下个绘制段直接用此点当 fromClip 后清空。arc=弧终点；circlePath/ellipsePath=center（"画完留在圆心"）
 	*/
 	let penOverride = null;
-	const emitM = (p) => {
-		ops.push({
-			cmd: "M",
-			point: p
+	const roundPoint = (p) => [round(p[0]), round(p[1])];
+	const emitMove = (p) => {
+		const rp = roundPoint(p);
+		commands.push({
+			kind: "move",
+			to: [rp[0], rp[1]]
 		});
 		points.push(p);
 		subPathStart = p;
 		lastEnd = p;
 	};
-	const emitL = (p) => {
-		ops.push({
-			cmd: "L",
-			point: p
+	const emitLine = (p) => {
+		const rp = roundPoint(p);
+		commands.push({
+			kind: "line",
+			to: [rp[0], rp[1]]
 		});
 		points.push(p);
 		lastEnd = p;
 	};
-	const emitZ = () => {
-		ops.push({ cmd: "Z" });
+	const emitClose = () => {
+		commands.push({ kind: "close" });
 		lastEnd = subPathStart;
 	};
-	const emitQ = (control, p) => {
-		ops.push({
-			cmd: "Q",
-			control,
-			point: p
+	const emitQuad = (control, p) => {
+		const rc = roundPoint(control);
+		const rp = roundPoint(p);
+		commands.push({
+			kind: "quad",
+			control: [rc[0], rc[1]],
+			to: [rp[0], rp[1]]
 		});
 		points.push(control);
 		points.push(p);
 		lastEnd = p;
 	};
-	const emitC = (c1, c2, p) => {
-		ops.push({
-			cmd: "C",
-			control1: c1,
-			control2: c2,
-			point: p
+	const emitCubic = (c1, c2, p) => {
+		const rc1 = roundPoint(c1);
+		const rc2 = roundPoint(c2);
+		const rp = roundPoint(p);
+		commands.push({
+			kind: "cubic",
+			control1: [rc1[0], rc1[1]],
+			control2: [rc2[0], rc2[1]],
+			to: [rp[0], rp[1]]
 		});
 		points.push(c1);
 		points.push(c2);
 		points.push(p);
 		lastEnd = p;
 	};
-	const emitA = (rx, ry, largeArc, sweep, p) => {
-		ops.push({
-			cmd: "A",
-			rx,
-			ry,
-			largeArc,
-			sweep,
-			point: p
+	const emitArc = (center, radius, startAngle, endAngle) => {
+		const rc = roundPoint(center);
+		commands.push({
+			kind: "arc",
+			center: [rc[0], rc[1]],
+			radius: round(radius),
+			startAngle,
+			endAngle
 		});
-		points.push(p);
-		lastEnd = p;
+		points.push(arcEndPoint(center, radius, endAngle));
+		lastEnd = arcEndPoint(center, radius, endAngle);
 	};
-	/** 段起点：与 lastEnd 相同就复用 cursor（省掉冗余 M），否则发 M */
+	const emitEllipseArc = (center, radiusX, radiusY, startAngle, endAngle) => {
+		const rc = roundPoint(center);
+		commands.push({
+			kind: "ellipseArc",
+			center: [rc[0], rc[1]],
+			radiusX: round(radiusX),
+			radiusY: round(radiusY),
+			startAngle,
+			endAngle
+		});
+		const endPt = [center[0] + Math.cos(endAngle * Math.PI / 180) * radiusX, center[1] + Math.sin(endAngle * Math.PI / 180) * radiusY];
+		points.push(endPt);
+		lastEnd = endPt;
+	};
+	/** 段起点：与 lastEnd 相同则复用 cursor（省 move），否则发 move */
 	const startSegment = (p) => {
 		if (samePoint(p, lastEnd)) return;
-		emitM(p);
+		emitMove(p);
 	};
 	for (let i = 0; i < steps.length; i++) {
 		const step = steps[i];
@@ -423,11 +414,11 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 			const toClip = clipForTarget(moveTo, prev.anchor, nodeIndex);
 			if (!fromClip || !toClip) return null;
 			if (samePoint(fromClip, lastEnd) && samePoint(toClip, subPathStart)) {
-				emitZ();
+				emitClose();
 				continue;
 			}
 			startSegment(fromClip);
-			emitL(toClip);
+			emitLine(toClip);
 			continue;
 		}
 		const prev = findPrev(i);
@@ -436,9 +427,8 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 			const center = prev.anchor;
 			const startPt = arcEndPoint(center, step.radius, step.startAngle);
 			const endPt = arcEndPoint(center, step.radius, step.endAngle);
-			const flags = arcSvgFlags(step.startAngle, step.endAngle);
 			startSegment(startPt);
-			emitA(step.radius, step.radius, flags.largeArc, flags.sweep, endPt);
+			emitArc(center, step.radius, step.startAngle, step.endAngle);
 			for (const p of arcBoundingPoints(center, step.radius, step.startAngle, step.endAngle)) points.push(p);
 			collectLabel(step, (t) => arcSegmentSample(center, step.radius, step.startAngle, step.endAngle, t));
 			penOverride = endPt;
@@ -447,11 +437,8 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 		if (step.kind === "circlePath") {
 			const center = prev.anchor;
 			const r = step.radius;
-			const right = [center[0] + r, center[1]];
-			const left = [center[0] - r, center[1]];
-			startSegment(right);
-			emitA(r, r, 0, 1, left);
-			emitA(r, r, 0, 1, right);
+			startSegment([center[0] + r, center[1]]);
+			emitEllipseArc(center, r, r, 0, 360);
 			points.push([center[0] + r, center[1]]);
 			points.push([center[0] - r, center[1]]);
 			points.push([center[0], center[1] + r]);
@@ -464,11 +451,8 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 			const center = prev.anchor;
 			const rx = step.radiusX;
 			const ry = step.radiusY;
-			const right = [center[0] + rx, center[1]];
-			const left = [center[0] - rx, center[1]];
-			startSegment(right);
-			emitA(rx, ry, 0, 1, left);
-			emitA(rx, ry, 0, 1, right);
+			startSegment([center[0] + rx, center[1]]);
+			emitEllipseArc(center, rx, ry, 0, 360);
 			points.push([center[0] + rx, center[1]]);
 			points.push([center[0] - rx, center[1]]);
 			points.push([center[0], center[1] + ry]);
@@ -486,7 +470,7 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 			const toClip = clipForTarget(step.to, prev.anchor, nodeIndex);
 			if (!fromClip || !toClip) return null;
 			startSegment(fromClip);
-			emitL(toClip);
+			emitLine(toClip);
 			collectLabel(step, (t) => lineSegmentSample(fromClip, toClip, t));
 			continue;
 		}
@@ -495,7 +479,7 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 			const toClip = clipForTarget(step.to, step.control, nodeIndex);
 			if (!fromClip || !toClip) return null;
 			startSegment(fromClip);
-			emitQ(step.control, toClip);
+			emitQuad(step.control, toClip);
 			collectLabel(step, (t) => quadSegmentSample(fromClip, step.control, toClip, t));
 			continue;
 		}
@@ -504,7 +488,7 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 			const toClip = clipForTarget(step.to, step.control2, nodeIndex);
 			if (!fromClip || !toClip) return null;
 			startSegment(fromClip);
-			emitC(step.control1, step.control2, toClip);
+			emitCubic(step.control1, step.control2, toClip);
 			collectLabel(step, (t) => cubicSegmentSample(fromClip, step.control1, step.control2, toClip, t));
 			continue;
 		}
@@ -515,7 +499,7 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 			const toClip = clipForTarget(step.to, c2, nodeIndex);
 			if (!fromClip || !toClip) return null;
 			startSegment(fromClip);
-			emitC(c1, c2, toClip);
+			emitCubic(c1, c2, toClip);
 			collectLabel(step, (t) => cubicSegmentSample(fromClip, c1, c2, toClip, t));
 			continue;
 		}
@@ -524,8 +508,8 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 		const toClip = clipForTarget(step.to, corner, nodeIndex);
 		if (!fromClip || !toClip) return null;
 		startSegment(fromClip);
-		emitL(corner);
-		emitL(toClip);
+		emitLine(corner);
+		emitLine(toClip);
 		collectLabel(step, (t) => foldSegmentSample(fromClip, corner, toClip, t));
 	}
 	const strokeWidth = path.strokeWidth ?? (path.thickness ? THICKNESS_TO_WIDTH[path.thickness] : 1);
@@ -541,49 +525,84 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 		fillOpacity: path.fillOpacity,
 		strokeOpacity: path.drawOpacity
 	};
-	const markers = arrowMarkers(path.arrow, path.arrowShape);
+	const markers = arrowMarkers(path.arrow, path.arrowDetail);
 	const hasArrows = !!markers.arrowStart || !!markers.arrowEnd;
-	const shrinkStart = markers.arrowStart ? SHRINK_FOR_SHAPE[markers.arrowStart] : 0;
-	const shrinkEnd = markers.arrowEnd ? SHRINK_FOR_SHAPE[markers.arrowEnd] : 0;
+	const shrinkStart = markers.arrowStart ? computeShrink(markers.arrowStart) : 0;
+	const shrinkEnd = markers.arrowEnd ? computeShrink(markers.arrowEnd) : 0;
+	/** 取一个 PathCommand 末端 endpoint（move/line/quad/cubic → to；arc/ellipseArc → polar(end)；close 无端点） */
+	const endpointOf = (cmd) => {
+		switch (cmd.kind) {
+			case "move":
+			case "line":
+			case "quad":
+			case "cubic": return [cmd.to[0], cmd.to[1]];
+			case "arc": {
+				const rad = cmd.endAngle * Math.PI / 180;
+				return [cmd.center[0] + Math.cos(rad) * cmd.radius, cmd.center[1] + Math.sin(rad) * cmd.radius];
+			}
+			case "ellipseArc": {
+				const rad = cmd.endAngle * Math.PI / 180;
+				return [cmd.center[0] + Math.cos(rad) * cmd.radiusX, cmd.center[1] + Math.sin(rad) * cmd.radiusY];
+			}
+			case "close": return null;
+		}
+	};
+	/** 改写一个 PathCommand 的 endpoint（用于 shrink） */
+	const setEndpoint = (idx, newPt) => {
+		const cmd = commands[idx];
+		if (cmd.kind === "close") return;
+		const rp = [round(newPt[0]), round(newPt[1])];
+		if (cmd.kind === "move" || cmd.kind === "line") commands[idx] = {
+			...cmd,
+			to: rp
+		};
+		else if (cmd.kind === "quad") commands[idx] = {
+			...cmd,
+			to: rp
+		};
+		else if (cmd.kind === "cubic") commands[idx] = {
+			...cmd,
+			to: rp
+		};
+	};
 	if (shrinkStart > 0) {
-		const firstIdx = ops.findIndex((o) => o.cmd === "M");
+		const firstIdx = commands.findIndex((o) => o.kind === "move");
 		if (firstIdx >= 0) {
-			const cur = ops[firstIdx];
-			const next = ops.slice(firstIdx + 1).find((o) => o.cmd !== "Z");
-			if (cur.cmd !== "Z" && next) cur.point = shiftToward(cur.point, next.point, shrinkStart * strokeWidth);
+			const cur = commands[firstIdx];
+			const nextIdx = commands.findIndex((o, idx) => idx > firstIdx && o.kind !== "close");
+			if (cur.kind === "move" && nextIdx >= 0) {
+				const nextPt = endpointOf(commands[nextIdx]);
+				if (nextPt) setEndpoint(firstIdx, shiftToward([cur.to[0], cur.to[1]], nextPt, shrinkStart * strokeWidth));
+			}
 		}
 	}
 	if (shrinkEnd > 0) {
 		let lastIdx = -1;
-		for (let i = ops.length - 1; i >= 0; i--) if (ops[i].cmd !== "Z") {
+		for (let i = commands.length - 1; i >= 0; i--) if (commands[i].kind !== "close") {
 			lastIdx = i;
 			break;
 		}
 		if (lastIdx > 0) {
 			let prevIdx = lastIdx - 1;
-			while (prevIdx >= 0 && ops[prevIdx].cmd === "Z") prevIdx--;
+			while (prevIdx >= 0 && commands[prevIdx].kind === "close") prevIdx--;
 			if (prevIdx >= 0) {
-				const cur = ops[lastIdx];
-				const prev = ops[prevIdx];
-				if (cur.cmd !== "Z" && prev.cmd !== "Z") cur.point = shiftToward(cur.point, prev.point, shrinkEnd * strokeWidth);
+				const curPt = endpointOf(commands[lastIdx]);
+				const prevPt = endpointOf(commands[prevIdx]);
+				if (curPt && prevPt) {
+					const shifted = shiftToward(curPt, prevPt, shrinkEnd * strokeWidth);
+					setEndpoint(lastIdx, shifted);
+				}
 			}
 		}
 	}
-	const tokens = ops.map((op) => {
-		if (op.cmd === "Z") return "Z";
-		if (op.cmd === "Q") return `Q ${round(op.control[0])} ${round(op.control[1])} ${round(op.point[0])} ${round(op.point[1])}`;
-		if (op.cmd === "C") return `C ${round(op.control1[0])} ${round(op.control1[1])} ${round(op.control2[0])} ${round(op.control2[1])} ${round(op.point[0])} ${round(op.point[1])}`;
-		if (op.cmd === "A") return `A ${round(op.rx)} ${round(op.ry)} 0 ${op.largeArc} ${op.sweep} ${round(op.point[0])} ${round(op.point[1])}`;
-		return `${op.cmd} ${round(op.point[0])} ${round(op.point[1])}`;
-	});
 	const subPathStarts = [];
-	tokens.forEach((tok, idx) => {
-		if (tok.startsWith("M ")) subPathStarts.push(idx);
+	commands.forEach((cmd, idx) => {
+		if (cmd.kind === "move") subPathStarts.push(idx);
 	});
 	if (!hasArrows || subPathStarts.length <= 1) return {
 		primitives: [{
 			type: "path",
-			d: tokens.join(" "),
+			commands,
 			...baseProps,
 			...markers
 		}, ...labelPrims],
@@ -592,8 +611,8 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 	const subPathSlices = [];
 	for (let s = 0; s < subPathStarts.length; s++) {
 		const start = subPathStarts[s];
-		const end = s + 1 < subPathStarts.length ? subPathStarts[s + 1] : tokens.length;
-		subPathSlices.push(tokens.slice(start, end));
+		const end = s + 1 < subPathStarts.length ? subPathStarts[s + 1] : commands.length;
+		subPathSlices.push(commands.slice(start, end));
 	}
 	return {
 		primitives: [{
@@ -603,7 +622,7 @@ var emitPathPrimitive = (path, nodeIndex, round, measureText = fallbackMeasurer)
 				const isLast = i === subPathSlices.length - 1;
 				return {
 					type: "path",
-					d: sub.join(" "),
+					commands: sub,
 					...baseProps,
 					...isFirst && markers.arrowStart ? { arrowStart: markers.arrowStart } : {},
 					...isLast && markers.arrowEnd ? { arrowEnd: markers.arrowEnd } : {}