@retikz/react 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/lib/kernel/Tikz.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tikz.d.ts","sourceRoot":"","sources":["../../../src/kernel/Tikz.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AACpF,OAAO,EAAmB,KAAK,EAAE,EAAuC,MAAM,cAAc,CAAC;AAO7F,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB,mDAAmD;IACnD,EAAE,CAAC,EAAE,EAAE,CAAC;IACR,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAgBF;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAuB9B,CAAC"}
+{"version":3,"file":"Tikz.d.ts","sourceRoot":"","sources":["../../../src/kernel/Tikz.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AACpF,OAAO,EAAmB,KAAK,EAAE,EAAuC,MAAM,cAAc,CAAC;AAO7F,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB,mDAAmD;IACnD,EAAE,CAAC,EAAE,EAAE,CAAC;IACR,gCAAgC;IAChC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAgBF;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA2B9B,CAAC"}

package/dist/lib/kernel/_builder.cjs

@@ -102,9 +102,37 @@ var buildNode = (props) => ({
 	outerSep: props.outerSep,
 	padding: props.padding,
 	margin: props.margin,
-	font: props.font
+	font: props.font,
+	label: props.label
 });
 /**
+* 扫描 Step children，把首个 <EdgeLabel> 翻译为 IRStepLabel；
+* 非字符串 children 静默跳过；多个 <EdgeLabel> 取首个。
+*/
+var readEdgeLabel = (children) => {
+	let result;
+	react.Children.forEach(children, (child) => {
+		if (result !== void 0) return;
+		if (!(0, react.isValidElement)(child)) return;
+		if (getDisplayName(child) !== "@retikz/EdgeLabel") return;
+		const props = child.props;
+		if (typeof props.children !== "string") return;
+		const out = { text: props.children };
+		if (props.position !== void 0) out.position = props.position;
+		if (props.side !== void 0) out.side = props.side;
+		result = out;
+	});
+	return result;
+};
+/**
+* 解析 Step 的 label 来源：prop `label` 优先于 sugar `<EdgeLabel>` child；
+* 都缺省时返回 undefined。
+*/
+var resolveStepLabel = (props) => {
+	if (props.label !== void 0) return props.label;
+	return readEdgeLabel(props.children);
+};
+/**
 * 扫描 <Path> children 收集 <Step> 序列。
 * 至少 2 段；首段不是 move 时强制改为 move（与 SVG path 的 "M …" 语义对齐）；
 * cycle 没有 to 字段，若用户把 cycle 放在首段，coerce 时降级到 move (0,0)。
@@ -123,46 +151,135 @@ var readPathChildren = (children) => {
 			});
 			return;
 		}
+		const label = kind === "move" ? void 0 : resolveStepLabel(props);
 		if (kind === "step") {
-			out.push({
+			const step = {
 				type: "step",
 				kind: "step",
 				via: props.via,
-				to: props.to
+				to: (0, _retikz_core.parseTargetSugar)(props.to)
+			};
+			if (label) step.label = label;
+			out.push(step);
+			return;
+		}
+		if (kind === "curve") {
+			const step = {
+				type: "step",
+				kind: "curve",
+				to: (0, _retikz_core.parseTargetSugar)(props.to),
+				control: props.control
+			};
+			if (label) step.label = label;
+			out.push(step);
+			return;
+		}
+		if (kind === "cubic") {
+			const step = {
+				type: "step",
+				kind: "cubic",
+				to: (0, _retikz_core.parseTargetSugar)(props.to),
+				control1: props.control1,
+				control2: props.control2
+			};
+			if (label) step.label = label;
+			out.push(step);
+			return;
+		}
+		if (kind === "bend") {
+			const step = {
+				type: "step",
+				kind: "bend",
+				to: (0, _retikz_core.parseTargetSugar)(props.to),
+				bendDirection: props.bendDirection
+			};
+			if (props.bendAngle !== void 0) step.bendAngle = props.bendAngle;
+			if (label) step.label = label;
+			out.push(step);
+			return;
+		}
+		if (kind === "arc") {
+			const step = {
+				type: "step",
+				kind: "arc",
+				startAngle: props.startAngle,
+				endAngle: props.endAngle,
+				radius: props.radius
+			};
+			if (label) step.label = label;
+			out.push(step);
+			return;
+		}
+		if (kind === "circlePath") {
+			const step = {
+				type: "step",
+				kind: "circlePath",
+				radius: props.radius
+			};
+			if (label) step.label = label;
+			out.push(step);
+			return;
+		}
+		if (kind === "ellipsePath") {
+			const step = {
+				type: "step",
+				kind: "ellipsePath",
+				radiusX: props.radiusX,
+				radiusY: props.radiusY
+			};
+			if (label) step.label = label;
+			out.push(step);
+			return;
+		}
+		if (kind === "move") {
+			out.push({
+				type: "step",
+				kind: "move",
+				to: (0, _retikz_core.parseTargetSugar)(props.to)
 			});
 			return;
 		}
-		out.push({
+		const step = {
 			type: "step",
-			kind,
-			to: props.to
-		});
+			kind: "line",
+			to: (0, _retikz_core.parseTargetSugar)(props.to)
+		};
+		if (label) step.label = label;
+		out.push(step);
 	});
 	if (out.length < 2) throw new Error("<Path> requires at least 2 <Step> children");
 	if (out[0].kind !== "move") {
 		const first = out[0];
-		out[0] = first.kind === "cycle" ? {
+		out[0] = {
 			type: "step",
 			kind: "move",
-			to: [0, 0]
-		} : {
-			type: "step",
-			kind: "move",
-			to: first.to
+			to: first.kind === "cycle" || first.kind === "arc" || first.kind === "circlePath" || first.kind === "ellipsePath" ? [0, 0] : first.to
 		};
 	}
 	return out;
 };
+/** 把 <Coordinate> props 翻成 IRChild（占位节点，无视觉） */
+var buildCoordinate = (props) => ({
+	type: "coordinate",
+	id: props.id,
+	position: props.position
+});
 /** 把 <Path> props 翻成 IRChild；step 序列由 readPathChildren 收集 */
 var buildPath = (props) => ({
 	type: "path",
 	stroke: props.stroke,
 	strokeWidth: props.strokeWidth,
 	strokeDasharray: props.strokeDasharray,
+	lineCap: props.lineCap,
+	lineJoin: props.lineJoin,
+	thickness: props.thickness,
 	arrow: props.arrow,
 	arrowShape: props.arrowShape,
 	fill: props.fill,
 	fillRule: props.fillRule,
+	opacity: props.opacity,
+	fillOpacity: props.fillOpacity,
+	drawOpacity: props.drawOpacity,
 	children: readPathChildren(props.children)
 });
 /**
@@ -183,6 +300,9 @@ var readSceneChildren = (children) => {
 			case require__displayNames.TIKZ_PATH:
 				out.push(buildPath(child.props));
 				return;
+			case require__displayNames.TIKZ_COORDINATE:
+				out.push(buildCoordinate(child.props));
+				return;
 		}
 		if (typeof child.type === "function") {
 			const expanded = child.type(child.props);

package/dist/lib/kernel/_builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_builder.d.ts","sourceRoot":"","sources":["../../../src/kernel/_builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AACpF,OAAO,KAAK,EAAE,EAAE,EAA+C,MAAM,cAAc,CAAC;AA6NpF;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,UAAU,SAAS,KAAG,EAI5C,CAAC"}
+{"version":3,"file":"_builder.d.ts","sourceRoot":"","sources":["../../../src/kernel/_builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AACpF,OAAO,KAAK,EACV,EAAE,EASH,MAAM,cAAc,CAAC;AA8XtB;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,UAAU,SAAS,KAAG,EAI5C,CAAC"}

package/dist/lib/kernel/_displayNames.cjs

@@ -7,7 +7,13 @@ var TIKZ_PATH = "@retikz/Path";
 var TIKZ_STEP = "@retikz/Step";
 /** <Text> 组件的 displayName（Node 内多行文本带样式） */
 var TIKZ_TEXT = "@retikz/Text";
+/** <EdgeLabel> 组件的 displayName（Step 内边标注） */
+var TIKZ_EDGE_LABEL = "@retikz/EdgeLabel";
+/** <Coordinate> 组件的 displayName（占位节点） */
+var TIKZ_COORDINATE = "@retikz/Coordinate";
 //#endregion
+exports.TIKZ_COORDINATE = TIKZ_COORDINATE;
+exports.TIKZ_EDGE_LABEL = TIKZ_EDGE_LABEL;
 exports.TIKZ_NODE = TIKZ_NODE;
 exports.TIKZ_PATH = TIKZ_PATH;
 exports.TIKZ_STEP = TIKZ_STEP;

package/dist/lib/kernel/_displayNames.d.ts

@@ -6,4 +6,8 @@ export declare const TIKZ_PATH = "@retikz/Path";
 export declare const TIKZ_STEP = "@retikz/Step";
 /** <Text> 组件的 displayName（Node 内多行文本带样式） */
 export declare const TIKZ_TEXT = "@retikz/Text";
+/** <EdgeLabel> 组件的 displayName（Step 内边标注） */
+export declare const TIKZ_EDGE_LABEL = "@retikz/EdgeLabel";
+/** <Coordinate> 组件的 displayName（占位节点） */
+export declare const TIKZ_COORDINATE = "@retikz/Coordinate";
 //# sourceMappingURL=_displayNames.d.ts.map

package/dist/lib/kernel/_displayNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_displayNames.d.ts","sourceRoot":"","sources":["../../../src/kernel/_displayNames.ts"],"names":[],"mappings":"AAKA,6BAA6B;AAC7B,eAAO,MAAM,SAAS,iBAAiB,CAAC;AAExC,6BAA6B;AAC7B,eAAO,MAAM,SAAS,iBAAiB,CAAC;AAExC,6BAA6B;AAC7B,eAAO,MAAM,SAAS,iBAAiB,CAAC;AAExC,4CAA4C;AAC5C,eAAO,MAAM,SAAS,iBAAiB,CAAC"}
+{"version":3,"file":"_displayNames.d.ts","sourceRoot":"","sources":["../../../src/kernel/_displayNames.ts"],"names":[],"mappings":"AAKA,6BAA6B;AAC7B,eAAO,MAAM,SAAS,iBAAiB,CAAC;AAExC,6BAA6B;AAC7B,eAAO,MAAM,SAAS,iBAAiB,CAAC;AAExC,6BAA6B;AAC7B,eAAO,MAAM,SAAS,iBAAiB,CAAC;AAExC,4CAA4C;AAC5C,eAAO,MAAM,SAAS,iBAAiB,CAAC;AAExC,6CAA6C;AAC7C,eAAO,MAAM,eAAe,sBAAsB,CAAC;AAEnD,yCAAyC;AACzC,eAAO,MAAM,eAAe,uBAAuB,CAAC"}

package/dist/lib/kernel/_unbuilder.cjs

@@ -1,6 +1,7 @@
 const require_Node = require("./Node.cjs");
 const require_Path = require("./Path.cjs");
 const require_Step = require("./Step.cjs");
+const require_Coordinate = require("./Coordinate.cjs");
 let react = require("react");
 //#region src/kernel/_unbuilder.ts
 /** IR 'node' child → NodeProps；过滤 undefined 字段，不污染 React DevTools 显示 */
@@ -35,6 +36,7 @@ var nodePropsFromIR = (n) => {
 	if (n.yScale !== void 0) props.yScale = n.yScale;
 	if (n.textColor !== void 0) props.textColor = n.textColor;
 	if (n.opacity !== void 0) props.opacity = n.opacity;
+	if (n.label !== void 0) props.label = n.label;
 	return props;
 };
 /** 单个 IRStep → <Step /> element */
@@ -47,12 +49,63 @@ var stepToElement = (step, key) => {
 		key,
 		kind: "step",
 		via: step.via,
+		to: step.to,
+		...step.label !== void 0 && { label: step.label }
+	});
+	if (step.kind === "curve") return (0, react.createElement)(require_Step.Step, {
+		key,
+		kind: "curve",
+		to: step.to,
+		control: step.control,
+		...step.label !== void 0 && { label: step.label }
+	});
+	if (step.kind === "cubic") return (0, react.createElement)(require_Step.Step, {
+		key,
+		kind: "cubic",
+		to: step.to,
+		control1: step.control1,
+		control2: step.control2,
+		...step.label !== void 0 && { label: step.label }
+	});
+	if (step.kind === "bend") return (0, react.createElement)(require_Step.Step, {
+		key,
+		kind: "bend",
+		to: step.to,
+		bendDirection: step.bendDirection,
+		...step.bendAngle !== void 0 && { bendAngle: step.bendAngle },
+		...step.label !== void 0 && { label: step.label }
+	});
+	if (step.kind === "arc") return (0, react.createElement)(require_Step.Step, {
+		key,
+		kind: "arc",
+		startAngle: step.startAngle,
+		endAngle: step.endAngle,
+		radius: step.radius,
+		...step.label !== void 0 && { label: step.label }
+	});
+	if (step.kind === "circlePath") return (0, react.createElement)(require_Step.Step, {
+		key,
+		kind: "circlePath",
+		radius: step.radius,
+		...step.label !== void 0 && { label: step.label }
+	});
+	if (step.kind === "ellipsePath") return (0, react.createElement)(require_Step.Step, {
+		key,
+		kind: "ellipsePath",
+		radiusX: step.radiusX,
+		radiusY: step.radiusY,
+		...step.label !== void 0 && { label: step.label }
+	});
+	if (step.kind === "move") return (0, react.createElement)(require_Step.Step, {
+		key,
+		kind: "move",
 		to: step.to
 	});
 	return (0, react.createElement)(require_Step.Step, {
 		key,
 		kind: step.kind,
-		to: step.to
+		to: step.to,
+		...step.label !== void 0 && { label: step.label }
 	});
 };
 /** discriminated union 兜底：编译期保证不漏 case，运行时给出明确错误 */
@@ -71,12 +124,23 @@ var childToElement = (child, key) => {
 			stroke: child.stroke,
 			strokeWidth: child.strokeWidth,
 			strokeDasharray: child.strokeDasharray,
+			lineCap: child.lineCap,
+			lineJoin: child.lineJoin,
+			thickness: child.thickness,
 			arrow: child.arrow,
 			arrowShape: child.arrowShape,
 			fill: child.fill,
 			fillRule: child.fillRule,
+			opacity: child.opacity,
+			fillOpacity: child.fillOpacity,
+			drawOpacity: child.drawOpacity,
 			children: child.children.map((s, j) => stepToElement(s, j))
 		});
+		case "coordinate": return (0, react.createElement)(require_Coordinate.Coordinate, {
+			key,
+			id: child.id,
+			position: child.position
+		});
 		default: return assertNever(child);
 	}
 };

package/dist/lib/kernel/_unbuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_unbuilder.d.ts","sourceRoot":"","sources":["../../../src/kernel/_unbuilder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,EAA2B,MAAM,cAAc,CAAC;AA8EhE;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,IAAI,EAAE,KAAG,SACW,CAAC"}
+{"version":3,"file":"_unbuilder.d.ts","sourceRoot":"","sources":["../../../src/kernel/_unbuilder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,EAAE,EAA2B,MAAM,cAAc,CAAC;AAmKhE;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,IAAI,EAAE,KAAG,SACW,CAAC"}

package/dist/lib/kernel/index.cjs

@@ -3,3 +3,4 @@ require("./Node.cjs");
 require("./Path.cjs");
 require("./Step.cjs");
 require("./Text.cjs");
+require("./Coordinate.cjs");

package/dist/lib/kernel/index.d.ts

@@ -3,4 +3,5 @@ export * from './Node';
 export * from './Path';
 export * from './Step';
 export * from './Text';
+export * from './Coordinate';
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/kernel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/kernel/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/kernel/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/dist/lib/sugar/Draw.cjs

@@ -12,15 +12,21 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * （useState / useMemo / useEffect 等会抛 "Invalid hook call"）。
 */
 var Draw = (props) => {
-	const { way, stroke, strokeWidth, strokeDasharray, arrow, arrowShape, fill, fillRule } = props;
+	const { way, stroke, strokeWidth, strokeDasharray, lineCap, lineJoin, thickness, arrow, arrowShape, fill, fillRule, opacity, fillOpacity, drawOpacity } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Path.Path, {
 		stroke,
 		strokeWidth,
 		strokeDasharray,
+		lineCap,
+		lineJoin,
+		thickness,
 		arrow,
 		arrowShape,
 		fill,
 		fillRule,
+		opacity,
+		fillOpacity,
+		drawOpacity,
 		children: (0, _retikz_core.parseWay)(way).map((s, i) => {
 			if (s.kind === "cycle") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, { kind: "cycle" }, i);
 			if (s.kind === "move") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
@@ -30,11 +36,59 @@ var Draw = (props) => {
 			if (s.kind === "step") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
 				kind: "step",
 				via: s.via,
-				to: s.to
+				to: s.to,
+				label: s.label
+			}, i);
+			if (s.kind === "curve") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
+				kind: "curve",
+				to: s.to,
+				control: s.control,
+				label: s.label
+			}, i);
+			if (s.kind === "cubic") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
+				kind: "cubic",
+				to: s.to,
+				control1: s.control1,
+				control2: s.control2,
+				label: s.label
+			}, i);
+			if (s.kind === "bend") {
+				if (s.bendAngle !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
+					kind: "bend",
+					to: s.to,
+					bendDirection: s.bendDirection,
+					bendAngle: s.bendAngle,
+					label: s.label
+				}, i);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
+					kind: "bend",
+					to: s.to,
+					bendDirection: s.bendDirection,
+					label: s.label
+				}, i);
+			}
+			if (s.kind === "arc") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
+				kind: "arc",
+				startAngle: s.startAngle,
+				endAngle: s.endAngle,
+				radius: s.radius,
+				label: s.label
+			}, i);
+			if (s.kind === "circlePath") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
+				kind: "circlePath",
+				radius: s.radius,
+				label: s.label
+			}, i);
+			if (s.kind === "ellipsePath") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
+				kind: "ellipsePath",
+				radiusX: s.radiusX,
+				radiusY: s.radiusY,
+				label: s.label
 			}, i);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
 				kind: "line",
-				to: s.to
+				to: s.to,
+				label: s.label
 			}, i);
 		})
 	});

package/dist/lib/sugar/Draw.d.ts

@@ -2,7 +2,13 @@ import { FC } from 'react';
 import { IRPath, WayDSL } from '@retikz/core';
 /** <Draw> 组件的 props */
 export type DrawProps = {
-    /** way 数组 DSL：节点 id / 坐标 / 极坐标 / 折角算子 `'-|'` `'|-'` / 闭合 `DrawWay.cycle` */
+    /**
+     * way 数组 DSL：节点 id / 笛卡尔 / 极坐标 / 相对偏移 `{ position, type: DrawWay.Relative | DrawWay.Accumulate }` /
+     * 折角算子 `'-|'` `'|-'`（或 `DrawWay.Hv` / `DrawWay.Vh`）/ 闭合 `DrawWay.Cycle` /
+     * 曲线算子 `{ curve | cubic | bend }`（infix）/
+     * 形状算子 `{ arc | circle | ellipse }`（infix，以"上一项"为圆心，不消耗下一项）/
+     * 边标注算子 `{ label }`（infix，修饰下一段）
+     */
     way: WayDSL;
     /** 描边色，省略时用 currentColor */
     stroke?: IRPath['stroke'];
@@ -10,6 +16,12 @@ export type DrawProps = {
     strokeWidth?: IRPath['strokeWidth'];
     /** SVG stroke-dasharray 模式（如 "4 2"） */
     strokeDasharray?: IRPath['strokeDasharray'];
+    /** 端点形状（SVG `stroke-linecap`） */
+    lineCap?: IRPath['lineCap'];
+    /** 拐点形状（SVG `stroke-linejoin`） */
+    lineJoin?: IRPath['lineJoin'];
+    /** 语义 stroke 档位（TikZ `ultra thin` … `ultra thick`）；显式 `strokeWidth` 始终优先 */
+    thickness?: IRPath['thickness'];
     /**
      * 路径级箭头方向。`'->'` = 终点；`'<-'` = 起点；`'<->'` = 两端；
      * 省略或 `'none'` = 无箭头。
@@ -19,10 +31,16 @@ export type DrawProps = {
      * 箭头形状。默认 `'normal'`。其他：`'open'` / `'stealth'` / `'diamond'` / `'circle'`。
      */
     arrowShape?: IRPath['arrowShape'];
-    /** 闭合区域填充色，省略 = 不填充。配合 way 末尾的 `DrawWay.cycle` 画填充形状 */
+    /** 闭合区域填充色，省略 = 不填充。配合 way 末尾的 `DrawWay.Cycle` 画填充形状 */
     fill?: IRPath['fill'];
     /** SVG fill-rule：`'nonzero'`（默认）/ `'evenodd'` */
     fillRule?: IRPath['fillRule'];
+    /** 整 path 透明度 0~1 */
+    opacity?: IRPath['opacity'];
+    /** 仅 fill 透明度 0~1 */
+    fillOpacity?: IRPath['fillOpacity'];
+    /** 仅 stroke 透明度 0~1（TikZ `draw opacity`） */
+    drawOpacity?: IRPath['drawOpacity'];
 };
 /**
  * Sugar 组件——展开为等价的 <Path><Step.../></Path> Kernel 子树。

package/dist/lib/sugar/Draw.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Draw.d.ts","sourceRoot":"","sources":["../../../src/sugar/Draw.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAKnD,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB,4EAA4E;IAC5E,GAAG,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAC5C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAClC,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;CAC/B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAsB9B,CAAC"}
+{"version":3,"file":"Draw.d.ts","sourceRoot":"","sources":["../../../src/sugar/Draw.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAKnD,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;;OAMG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAC5C,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAClC,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC5B,qBAAqB;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;IACpC,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;CACrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA0G9B,CAAC"}

package/dist/lib/sugar/EdgeLabel.cjs

@@ -0,0 +1,13 @@
+const require__displayNames = require("../kernel/_displayNames.cjs");
+//#region src/sugar/EdgeLabel.tsx
+/**
+* Sugar 组件——挂在 <Step> 内作为子节点声明边标注。等价于在 Step 上写
+* `label={{ text, position, side }}` prop；二者并存时 prop 优先。
+*
+* <EdgeLabel> 自身不渲染，由 buildIR 在收集 Step 时识别 displayName 后
+* 提取到 IR `step.label`。
+*/
+var EdgeLabel = () => null;
+EdgeLabel.displayName = require__displayNames.TIKZ_EDGE_LABEL;
+//#endregion
+exports.EdgeLabel = EdgeLabel;

package/dist/lib/sugar/EdgeLabel.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { IRStepLabel } from '@retikz/core';
+/** <EdgeLabel> 组件的 props（ADR-0004） */
+export type EdgeLabelProps = {
+    /** 段上位置（TikZ `midway` / `near start` / `near end`），缺省 'midway' */
+    position?: IRStepLabel['position'];
+    /** 相对段方向 / 视觉方位的偏移侧（'sloped' = 沿切线旋转），缺省 'above' */
+    side?: IRStepLabel['side'];
+    /** 标签文字内容；必须是字符串 */
+    children: string;
+};
+/**
+ * Sugar 组件——挂在 <Step> 内作为子节点声明边标注。等价于在 Step 上写
+ * `label={{ text, position, side }}` prop；二者并存时 prop 优先。
+ *
+ * <EdgeLabel> 自身不渲染，由 buildIR 在收集 Step 时识别 displayName 后
+ * 提取到 IR `step.label`。
+ */
+export declare const EdgeLabel: FC<EdgeLabelProps>;
+//# sourceMappingURL=EdgeLabel.d.ts.map

package/dist/lib/sugar/EdgeLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeLabel.d.ts","sourceRoot":"","sources":["../../../src/sugar/EdgeLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,sCAAsC;AACtC,MAAM,MAAM,cAAc,GAAG;IAC3B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,oBAAoB;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAAc,CAAC"}

package/dist/lib/sugar/index.cjs

@@ -1 +1,2 @@
 require("./Draw.cjs");
+require("./EdgeLabel.cjs");

package/dist/lib/sugar/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Draw';
+export * from './EdgeLabel';
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/sugar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sugar/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sugar/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retikz/react",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "description": "React adapter for retikz: Kernel/Sugar JSX components and SVG renderer.",
   "type": "module",
   "main": "dist/lib/index.cjs",
@@ -24,7 +24,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@retikz/core": "0.1.0-alpha.2"
+    "@retikz/core": "0.1.0-alpha.4"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",