@retikz/react 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/es/index.d.ts

@@ -10,6 +10,8 @@ export { Tikz, Node, Path, Step } from './kernel';
 export type { TikzProps, NodeProps, PathProps, StepProps } from './kernel';
 export { Draw } from './sugar';
 export type { DrawProps } from './sugar';
+export { DrawWay } from '@retikz/core';
+export type { WayItem, WayDSL, WayCycle, WayVia } from '@retikz/core';
 export { buildIR as convertReactNodeToIR } from './kernel/_builder';
 export { convertIRToReactNode } from './kernel/_unbuilder';
 //# sourceMappingURL=index.d.ts.map

package/dist/es/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/es/index.js

@@ -7,4 +7,5 @@ import "./kernel/index.js";
 import { Draw } from "./sugar/Draw.js";
 import "./sugar/index.js";
 import { convertIRToReactNode } from "./kernel/_unbuilder.js";
-export { Draw, Node, Path, Step, Tikz, convertIRToReactNode, buildIR as convertReactNodeToIR };
+import { DrawWay } from "@retikz/core";
+export { Draw, DrawWay, Node, Path, Step, Tikz, convertIRToReactNode, buildIR as convertReactNodeToIR };

package/dist/es/kernel/Node.d.ts

@@ -4,6 +4,8 @@ import { IRNode, IRPosition, PolarPosition } from '@retikz/core';
 export type NodeProps = {
     /** 节点 id；其他 Path/Draw 通过这个 id 引用本节点 */
     id?: string;
+    /** 节点形状：rectangle（默认）/ circle / ellipse / diamond */
+    shape?: IRNode['shape'];
     /** 节点中心位置；笛卡尔 [x, y] 或极坐标（编译时解析） */
     position: IRPosition | PolarPosition;
     /** 旋转角度（度数，与 TikZ 一致），绕节点中心；正值顺时针 */

package/dist/es/kernel/Node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../src/kernel/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAGtE,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,QAAQ,EAAE,UAAU,GAAG,aAAa,CAAC;IACrC,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU;IACV,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,UAAU;IACV,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}
+{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../src/kernel/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAGtE,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,oCAAoC;IACpC,QAAQ,EAAE,UAAU,GAAG,aAAa,CAAC;IACrC,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU;IACV,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,UAAU;IACV,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}

package/dist/es/kernel/Path.d.ts

@@ -8,6 +8,20 @@ export type PathProps = {
     strokeWidth?: IRPath['strokeWidth'];
     /** SVG stroke-dasharray 模式（如 "4 2"） */
     strokeDasharray?: IRPath['strokeDasharray'];
+    /**
+     * 路径级箭头方向。`'->'` = 终点；`'<-'` = 起点；`'<->'` = 两端；
+     * 省略或 `'none'` = 无箭头。
+     */
+    arrow?: IRPath['arrow'];
+    /**
+     * 箭头形状。默认 `'normal'`（实心三角）。其他：`'open'` 空心三角、
+     * `'stealth'` 倒钩、`'diamond'` 菱形、`'circle'` 圆点。
+     */
+    arrowShape?: IRPath['arrowShape'];
+    /** 闭合区域填充色，CSS 颜色字符串；省略 = 不填充（仅描边）。配合 cycle step 画填充形状 */
+    fill?: IRPath['fill'];
+    /** SVG fill-rule：`'nonzero'`（默认）/ `'evenodd'`（环形 / 孔洞） */
+    fillRule?: IRPath['fillRule'];
     /** 应当全部是 <Step /> */
     children: ReactNode;
 };

package/dist/es/kernel/Path.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../../src/kernel/Path.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG3C,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB,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,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}
+{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../../src/kernel/Path.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG3C,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB,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;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAClC,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}

package/dist/es/kernel/Step.d.ts

@@ -2,7 +2,8 @@ import { FC } from 'react';
 import { IRTarget } from '@retikz/core';
 /**
  * <Step> 组件的 props。
- * v0.1.0-alpha 仅支持 'move' 与 'line'，kind 默认 'line'。
+ * v0.1.0-alpha.1 支持四种 kind：'move' / 'line' / 'step'（折角）/ 'cycle'（闭合）。
+ * kind 默认 'line'。
  */
 export type StepProps = {
     /** 移动游标但不绘制（类似 SVG path "M"） */
@@ -14,6 +15,16 @@ export type StepProps = {
     kind?: 'line';
     /** 直线终点 */
     to: IRTarget;
+} | {
+    /** 折角段：从游标经一个直角拐点到目标点（TikZ `-|` / `|-`） */
+    kind: 'step';
+    /** 折角走向：`-|` 先水平后垂直；`|-` 先垂直后水平 */
+    via: '-|' | '|-';
+    /** 折角终点 */
+    to: IRTarget;
+} | {
+    /** 闭合：把当前子路径回到最近一个 move 起点（TikZ `cycle` / SVG `Z`） */
+    kind: 'cycle';
 };
 /**
  * Step 是 DSL 标记组件——本身不渲染。

package/dist/es/kernel/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/kernel/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C;;;GAGG;AACH,MAAM,MAAM,SAAS,GACjB;IACE,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY;IACZ,EAAE,EAAE,QAAQ,CAAC;CACd,GACD;IACE,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW;IACX,EAAE,EAAE,QAAQ,CAAC;CACd,CAAC;AAEN;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/kernel/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C;;;;GAIG;AACH,MAAM,MAAM,SAAS,GACjB;IACE,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY;IACZ,EAAE,EAAE,QAAQ,CAAC;CACd,GACD;IACE,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW;IACX,EAAE,EAAE,QAAQ,CAAC;CACd,GACD;IACE,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,WAAW;IACX,EAAE,EAAE,QAAQ,CAAC;CACd,GACD;IACE,sDAAsD;IACtD,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEN;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}

package/dist/es/kernel/Tikz.d.ts

@@ -19,7 +19,11 @@ export type TikzProps = {
  * <Tikz> 顶层容器。
  * 1. 从 children 构造 IR（或直接接受外部 IR）
  * 2. 调 compileToScene 得 Scene
- * 3. 把 Scene primitives 渲染为 SVG 元素
+ * 3. 把 Scene primitives 渲染为 SVG 元素；按需注入 `<defs>` 与每种 arrow 形状的 `<marker>`
+ *
+ * 箭头 marker 用 `useId()` 派生稳定前缀（多个 Tikz 实例共存不冲突）；
+ * 每种用到的 shape 一个 marker 定义，id 形如 `${prefix}-${shape}`，
+ * marker 内 path 借 `context-stroke` / `context-fill` 让颜色随 path 同步。
  */
 export declare const Tikz: FC<TikzProps>;
 //# sourceMappingURL=Tikz.d.ts.map

package/dist/es/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,EAAW,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,EAAkB,MAAM,cAAc,CAAC;AAMvD,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;AAEF;;;;;GAKG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAS9B,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;CACvB,CAAC;AAgBF;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAuB9B,CAAC"}

package/dist/es/kernel/Tikz.js

@@ -1,27 +1,47 @@
 import { buildIR } from "./_builder.js";
+import { ArrowMarker } from "../render/arrowMarkers.js";
 import { browserMeasurer } from "../render/browser-measurer.js";
 import { renderPrim } from "../render/renderPrim.js";
 import { formatViewBox } from "../render/viewBox.js";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { compileToScene } from "@retikz/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/kernel/Tikz.tsx
+/** 递归收集 scene 里所有 PathPrim 用到的 arrow 形状——按需注入 marker defs */
+var collectArrowShapes = (prims) => {
+	const shapes = /* @__PURE__ */ new Set();
+	for (const p of prims) if (p.type === "path") {
+		if (p.arrowStart) shapes.add(p.arrowStart);
+		if (p.arrowEnd) shapes.add(p.arrowEnd);
+	} else if (p.type === "group") for (const s of collectArrowShapes(p.children)) shapes.add(s);
+	return shapes;
+};
 /**
 * <Tikz> 顶层容器。
 * 1. 从 children 构造 IR（或直接接受外部 IR）
 * 2. 调 compileToScene 得 Scene
-* 3. 把 Scene primitives 渲染为 SVG 元素
+* 3. 把 Scene primitives 渲染为 SVG 元素；按需注入 `<defs>` 与每种 arrow 形状的 `<marker>`
+*
+* 箭头 marker 用 `useId()` 派生稳定前缀（多个 Tikz 实例共存不冲突）；
+* 每种用到的 shape 一个 marker 定义，id 形如 `${prefix}-${shape}`，
+* marker 内 path 借 `context-stroke` / `context-fill` 让颜色随 path 同步。
 */
 var Tikz = ({ ir: irFromProp, children, width, height, className, style }) => {
 	const ir = useMemo(() => irFromProp ?? buildIR(children), [irFromProp, children]);
 	const scene = useMemo(() => compileToScene(ir, { measureText: browserMeasurer }), [ir]);
-	return /* @__PURE__ */ jsx("svg", {
+	const arrowMarkerPrefix = `retikz-arrow-${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+	const usedShapes = collectArrowShapes(scene.primitives);
+	const arrowMarkerIdFor = (shape) => `${arrowMarkerPrefix}-${shape}`;
+	return /* @__PURE__ */ jsxs("svg", {
 		viewBox: formatViewBox(scene.viewBox),
 		width,
 		height,
 		className,
 		style,
-		children: scene.primitives.map((p, i) => renderPrim(p, i))
+		children: [usedShapes.size > 0 && /* @__PURE__ */ jsx("defs", { children: Array.from(usedShapes).map((shape) => /* @__PURE__ */ jsx(ArrowMarker, {
+			id: arrowMarkerIdFor(shape),
+			shape
+		}, shape)) }), scene.primitives.map((p, i) => renderPrim(p, i, { arrowMarkerIdFor }))]
 	});
 };
 //#endregion

package/dist/es/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,EAA2B,MAAM,cAAc,CAAC;AAoGhE;;;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,EAAE,EAAE,EAA2B,MAAM,cAAc,CAAC;AAoIhE;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,UAAU,SAAS,KAAG,EAI5C,CAAC"}

package/dist/es/kernel/_builder.js

@@ -14,6 +14,7 @@ var buildNode = (props) => {
 	return {
 		type: "node",
 		id: props.id,
+		shape: props.shape,
 		position: props.position,
 		rotate: props.rotate,
 		text,
@@ -27,7 +28,8 @@ var buildNode = (props) => {
 };
 /**
 * 扫描 <Path> children 收集 <Step> 序列。
-* 至少 2 段；首段不是 move 时强制改为 move（与 SVG path 的 "M …" 语义对齐）。
+* 至少 2 段；首段不是 move 时强制改为 move（与 SVG path 的 "M …" 语义对齐）；
+* cycle 没有 to 字段，若用户把 cycle 放在首段，coerce 时降级到 move (0,0)。
 */
 var readPathChildren = (children) => {
 	const out = [];
@@ -36,6 +38,22 @@ var readPathChildren = (children) => {
 		if (getDisplayName(child) !== "@retikz/Step") return;
 		const props = child.props;
 		const kind = props.kind ?? "line";
+		if (kind === "cycle") {
+			out.push({
+				type: "step",
+				kind: "cycle"
+			});
+			return;
+		}
+		if (kind === "step") {
+			out.push({
+				type: "step",
+				kind: "step",
+				via: props.via,
+				to: props.to
+			});
+			return;
+		}
 		out.push({
 			type: "step",
 			kind,
@@ -43,11 +61,18 @@ var readPathChildren = (children) => {
 		});
 	});
 	if (out.length < 2) throw new Error("<Path> requires at least 2 <Step> children");
-	if (out[0].kind !== "move") out[0] = {
-		type: "step",
-		kind: "move",
-		to: out[0].to
-	};
+	if (out[0].kind !== "move") {
+		const first = out[0];
+		out[0] = first.kind === "cycle" ? {
+			type: "step",
+			kind: "move",
+			to: [0, 0]
+		} : {
+			type: "step",
+			kind: "move",
+			to: first.to
+		};
+	}
 	return out;
 };
 /** 把 <Path> props 翻成 IRChild；step 序列由 readPathChildren 收集 */
@@ -56,6 +81,10 @@ var buildPath = (props) => ({
 	stroke: props.stroke,
 	strokeWidth: props.strokeWidth,
 	strokeDasharray: props.strokeDasharray,
+	arrow: props.arrow,
+	arrowShape: props.arrowShape,
+	fill: props.fill,
+	fillRule: props.fillRule,
 	children: readPathChildren(props.children)
 });
 /**

package/dist/es/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;AA+ChE;;;;;;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;AA2DhE;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,IAAI,EAAE,KAAG,SACW,CAAC"}

package/dist/es/kernel/_unbuilder.js

@@ -7,6 +7,7 @@ import { createElement } from "react";
 var nodePropsFromIR = (n) => {
 	const props = { position: n.position };
 	if (n.id !== void 0) props.id = n.id;
+	if (n.shape !== void 0) props.shape = n.shape;
 	if (n.rotate !== void 0) props.rotate = n.rotate;
 	if (n.text !== void 0) props.text = n.text;
 	if (n.fontSize !== void 0) props.fontSize = n.fontSize;
@@ -18,11 +19,23 @@ var nodePropsFromIR = (n) => {
 	return props;
 };
 /** 单个 IRStep → <Step /> element */
-var stepToElement = (step, key) => createElement(Step, {
-	key,
-	kind: step.kind,
-	to: step.to
-});
+var stepToElement = (step, key) => {
+	if (step.kind === "cycle") return createElement(Step, {
+		key,
+		kind: "cycle"
+	});
+	if (step.kind === "step") return createElement(Step, {
+		key,
+		kind: "step",
+		via: step.via,
+		to: step.to
+	});
+	return createElement(Step, {
+		key,
+		kind: step.kind,
+		to: step.to
+	});
+};
 /** discriminated union 兜底：编译期保证不漏 case，运行时给出明确错误 */
 var assertNever = (x) => {
 	throw new Error(`convertIRToReactNode: unknown IR child type: ${JSON.stringify(x)}`);
@@ -39,6 +52,10 @@ var childToElement = (child, key) => {
 			stroke: child.stroke,
 			strokeWidth: child.strokeWidth,
 			strokeDasharray: child.strokeDasharray,
+			arrow: child.arrow,
+			arrowShape: child.arrowShape,
+			fill: child.fill,
+			fillRule: child.fillRule,
 			children: child.children.map((s, j) => stepToElement(s, j))
 		});
 		default: return assertNever(child);

package/dist/es/render/arrowMarkers.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ArrowShape } from '@retikz/core';
+export type ArrowMarkerProps = {
+    /** marker 元素 id，用于 path markerStart / markerEnd 引用 */
+    id: string;
+    /** 形状名 */
+    shape: ArrowShape;
+};
+/** 单个 `<marker>` 元素，由 `<defs>` 包起来 */
+export declare const ArrowMarker: FC<ArrowMarkerProps>;
+//# sourceMappingURL=arrowMarkers.d.ts.map

package/dist/es/render/arrowMarkers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrowMarkers.d.ts","sourceRoot":"","sources":["../../../src/render/arrowMarkers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAqF/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,UAAU;IACV,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,sCAAsC;AACtC,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAgB5C,CAAC"}

package/dist/es/render/arrowMarkers.js

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/render/arrowMarkers.tsx
+var MARKERS = {
+	normal: {
+		refX: 10,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M 0 0 L 10 5 L 0 10 Z",
+			fill: "context-stroke"
+		})
+	},
+	open: {
+		refX: 1,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M 1 1 L 9 5 L 1 9 Z",
+			fill: "none",
+			stroke: "context-stroke",
+			strokeWidth: 1.5
+		})
+	},
+	stealth: {
+		refX: 10,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M 0 0 L 10 5 L 0 10 L 3 5 Z",
+			fill: "context-stroke"
+		})
+	},
+	diamond: {
+		refX: 10,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M 0 5 L 5 0 L 10 5 L 5 10 Z",
+			fill: "context-stroke"
+		})
+	},
+	openDiamond: {
+		refX: 1,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M 1 5 L 5 1 L 9 5 L 5 9 Z",
+			fill: "none",
+			stroke: "context-stroke",
+			strokeWidth: 1.5,
+			strokeLinejoin: "round"
+		})
+	},
+	circle: {
+		refX: 10,
+		children: /* @__PURE__ */ jsx("circle", {
+			cx: 5,
+			cy: 5,
+			r: 5,
+			fill: "context-stroke"
+		})
+	},
+	openCircle: {
+		refX: 0,
+		children: /* @__PURE__ */ jsx("circle", {
+			cx: 5,
+			cy: 5,
+			r: 4.25,
+			fill: "none",
+			stroke: "context-stroke",
+			strokeWidth: 1.5
+		})
+	}
+};
+/** 单个 `<marker>` 元素，由 `<defs>` 包起来 */
+var ArrowMarker = ({ id, shape }) => {
+	const spec = MARKERS[shape];
+	return /* @__PURE__ */ jsx("marker", {
+		id,
+		viewBox: "0 0 10 10",
+		refX: spec.refX,
+		refY: 5,
+		markerWidth: 6,
+		markerHeight: 6,
+		orient: "auto-start-reverse",
+		markerUnits: "strokeWidth",
+		children: spec.children
+	});
+};
+//#endregion
+export { ArrowMarker };

package/dist/es/render/renderPrim.d.ts

@@ -1,8 +1,16 @@
 import { Key, ReactElement } from 'react';
-import { ScenePrimitive } from '@retikz/core';
+import { ArrowShape, ScenePrimitive } from '@retikz/core';
+/**
+ * 渲染上下文——Tikz 容器侧把 marker id 等"全 SVG 共享"的资源向下传给 renderPrim。
+ * 资源若不存在就传 undefined，对应路径 prim 不会引用 marker。
+ */
+export type RenderContext = {
+    /** 按 arrow 形状查 SVG `<defs><marker id>` id 的回调 */
+    arrowMarkerIdFor?: (shape: ArrowShape) => string;
+};
 /**
  * Scene primitive → SVG React 元素。
- * 不读 IR，只读 Scene；约束在 100 行以内（超过说明 Scene 抽象不够下沉，回 core 补）。
+ * 不读 IR，只读 Scene。
  */
-export declare const renderPrim: (p: ScenePrimitive, key: Key) => ReactElement;
+export declare const renderPrim: (p: ScenePrimitive, key: Key, ctx?: RenderContext) => ReactElement;
 //# sourceMappingURL=renderPrim.d.ts.map

package/dist/es/render/renderPrim.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderPrim.d.ts","sourceRoot":"","sources":["../../../src/render/renderPrim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AA6BnD;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,GAAG,cAAc,EAAE,KAAK,GAAG,KAAG,YA2DxD,CAAC"}
+{"version":3,"file":"renderPrim.d.ts","sourceRoot":"","sources":["../../../src/render/renderPrim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AA6B/D;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;CAClD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GACrB,GAAG,cAAc,EACjB,KAAK,GAAG,EACR,MAAK,aAAkB,KACtB,YAsFF,CAAC"}

package/dist/es/render/renderPrim.js

@@ -13,9 +13,9 @@ var baselineToDominant = (b) => {
 };
 /**
 * Scene primitive → SVG React 元素。
-* 不读 IR，只读 Scene；约束在 100 行以内（超过说明 Scene 抽象不够下沉，回 core 补）。
+* 不读 IR，只读 Scene。
 */
-var renderPrim = (p, key) => {
+var renderPrim = (p, key, ctx = {}) => {
 	switch (p.type) {
 		case "rect": return /* @__PURE__ */ jsx("rect", {
 			x: p.x,
@@ -31,6 +31,22 @@ var renderPrim = (p, key) => {
 			ry: p.cornerRadius,
 			opacity: p.opacity
 		}, key);
+		case "ellipse": {
+			const transform = p.rotate ? `rotate(${p.rotate} ${p.cx} ${p.cy})` : void 0;
+			return /* @__PURE__ */ jsx("ellipse", {
+				cx: p.cx,
+				cy: p.cy,
+				rx: p.rx,
+				ry: p.ry,
+				transform,
+				fill: p.fill,
+				fillOpacity: p.fillOpacity,
+				stroke: p.stroke,
+				strokeWidth: p.strokeWidth,
+				strokeDasharray: p.strokeDasharray,
+				opacity: p.opacity
+			}, key);
+		}
 		case "text": return /* @__PURE__ */ jsx("text", {
 			x: p.x,
 			y: p.y,
@@ -44,19 +60,26 @@ var renderPrim = (p, key) => {
 			opacity: p.opacity,
 			children: p.content
 		}, key);
-		case "path": return /* @__PURE__ */ jsx("path", {
-			d: p.d,
-			fill: p.fill,
-			stroke: p.stroke,
-			strokeWidth: p.strokeWidth,
-			strokeDasharray: p.strokeDasharray,
-			strokeLinecap: p.strokeLinecap,
-			strokeLinejoin: p.strokeLinejoin,
-			opacity: p.opacity
-		}, key);
+		case "path": {
+			const startId = p.arrowStart && ctx.arrowMarkerIdFor ? ctx.arrowMarkerIdFor(p.arrowStart) : void 0;
+			const endId = p.arrowEnd && ctx.arrowMarkerIdFor ? ctx.arrowMarkerIdFor(p.arrowEnd) : void 0;
+			return /* @__PURE__ */ jsx("path", {
+				d: p.d,
+				fill: p.fill,
+				fillRule: p.fillRule,
+				stroke: p.stroke,
+				strokeWidth: p.strokeWidth,
+				strokeDasharray: p.strokeDasharray,
+				strokeLinecap: p.strokeLinecap,
+				strokeLinejoin: p.strokeLinejoin,
+				markerStart: startId ? `url(#${startId})` : void 0,
+				markerEnd: endId ? `url(#${endId})` : void 0,
+				opacity: p.opacity
+			}, key);
+		}
 		case "group": return /* @__PURE__ */ jsx("g", {
 			transform: p.transform,
-			children: p.children.map((c, i) => renderPrim(c, i))
+			children: p.children.map((c, i) => renderPrim(c, i, ctx))
 		}, key);
 	}
 };

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

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { IRPath, WayDSL } from '@retikz/core';
 /** <Draw> 组件的 props */
 export type DrawProps = {
-    /** way 数组 DSL：节点 id 字符串、坐标 [x, y]、极坐标对象 */
+    /** way 数组 DSL：节点 id / 坐标 / 极坐标 / 折角算子 `'-|'` `'|-'` / 闭合 `DrawWay.cycle` */
     way: WayDSL;
     /** 描边色，省略时用 currentColor */
     stroke?: IRPath['stroke'];
@@ -10,6 +10,19 @@ export type DrawProps = {
     strokeWidth?: IRPath['strokeWidth'];
     /** SVG stroke-dasharray 模式（如 "4 2"） */
     strokeDasharray?: IRPath['strokeDasharray'];
+    /**
+     * 路径级箭头方向。`'->'` = 终点；`'<-'` = 起点；`'<->'` = 两端；
+     * 省略或 `'none'` = 无箭头。
+     */
+    arrow?: IRPath['arrow'];
+    /**
+     * 箭头形状。默认 `'normal'`。其他：`'open'` / `'stealth'` / `'diamond'` / `'circle'`。
+     */
+    arrowShape?: IRPath['arrowShape'];
+    /** 闭合区域填充色，省略 = 不填充。配合 way 末尾的 `DrawWay.cycle` 画填充形状 */
+    fill?: IRPath['fill'];
+    /** SVG fill-rule：`'nonzero'`（默认）/ `'evenodd'` */
+    fillRule?: IRPath['fillRule'];
 };
 /**
  * Sugar 组件——展开为等价的 <Path><Step.../></Path> Kernel 子树。

package/dist/es/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,2CAA2C;IAC3C,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;CAC7C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAW9B,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,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"}

package/dist/es/sugar/Draw.js

@@ -12,18 +12,31 @@ import { jsx } from "react/jsx-runtime";
 * （useState / useMemo / useEffect 等会抛 "Invalid hook call"）。
 */
 var Draw = (props) => {
-	const { way, stroke, strokeWidth, strokeDasharray } = props;
+	const { way, stroke, strokeWidth, strokeDasharray, arrow, arrowShape, fill, fillRule } = props;
 	return /* @__PURE__ */ jsx(Path, {
 		stroke,
 		strokeWidth,
 		strokeDasharray,
-		children: parseWay(way).map((s, i) => s.kind === "move" ? /* @__PURE__ */ jsx(Step, {
-			kind: "move",
-			to: s.to
-		}, i) : /* @__PURE__ */ jsx(Step, {
-			kind: "line",
-			to: s.to
-		}, i))
+		arrow,
+		arrowShape,
+		fill,
+		fillRule,
+		children: parseWay(way).map((s, i) => {
+			if (s.kind === "cycle") return /* @__PURE__ */ jsx(Step, { kind: "cycle" }, i);
+			if (s.kind === "move") return /* @__PURE__ */ jsx(Step, {
+				kind: "move",
+				to: s.to
+			}, i);
+			if (s.kind === "step") return /* @__PURE__ */ jsx(Step, {
+				kind: "step",
+				via: s.via,
+				to: s.to
+			}, i);
+			return /* @__PURE__ */ jsx(Step, {
+				kind: "line",
+				to: s.to
+			}, i);
+		})
 	});
 };
 //#endregion

package/dist/lib/index.cjs

@@ -8,7 +8,14 @@ require("./kernel/index.cjs");
 const require_Draw = require("./sugar/Draw.cjs");
 require("./sugar/index.cjs");
 const require__unbuilder = require("./kernel/_unbuilder.cjs");
+let _retikz_core = require("@retikz/core");
 exports.Draw = require_Draw.Draw;
+Object.defineProperty(exports, "DrawWay", {
+	enumerable: true,
+	get: function() {
+		return _retikz_core.DrawWay;
+	}
+});
 exports.Node = require_Node.Node;
 exports.Path = require_Path.Path;
 exports.Step = require_Step.Step;

package/dist/lib/index.d.ts

@@ -10,6 +10,8 @@ export { Tikz, Node, Path, Step } from './kernel';
 export type { TikzProps, NodeProps, PathProps, StepProps } from './kernel';
 export { Draw } from './sugar';
 export type { DrawProps } from './sugar';
+export { DrawWay } from '@retikz/core';
+export type { WayItem, WayDSL, WayCycle, WayVia } from '@retikz/core';
 export { buildIR as convertReactNodeToIR } from './kernel/_builder';
 export { convertIRToReactNode } from './kernel/_unbuilder';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE3E,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}

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

@@ -4,6 +4,8 @@ import { IRNode, IRPosition, PolarPosition } from '@retikz/core';
 export type NodeProps = {
     /** 节点 id；其他 Path/Draw 通过这个 id 引用本节点 */
     id?: string;
+    /** 节点形状：rectangle（默认）/ circle / ellipse / diamond */
+    shape?: IRNode['shape'];
     /** 节点中心位置；笛卡尔 [x, y] 或极坐标（编译时解析） */
     position: IRPosition | PolarPosition;
     /** 旋转角度（度数，与 TikZ 一致），绕节点中心；正值顺时针 */

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

@@ -1 +1 @@
-{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../src/kernel/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAGtE,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,QAAQ,EAAE,UAAU,GAAG,aAAa,CAAC;IACrC,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU;IACV,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,UAAU;IACV,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}
+{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../src/kernel/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAGtE,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,oCAAoC;IACpC,QAAQ,EAAE,UAAU,GAAG,aAAa,CAAC;IACrC,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU;IACV,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,UAAU;IACV,MAAM,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC1B,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}

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

@@ -8,6 +8,20 @@ export type PathProps = {
     strokeWidth?: IRPath['strokeWidth'];
     /** SVG stroke-dasharray 模式（如 "4 2"） */
     strokeDasharray?: IRPath['strokeDasharray'];
+    /**
+     * 路径级箭头方向。`'->'` = 终点；`'<-'` = 起点；`'<->'` = 两端；
+     * 省略或 `'none'` = 无箭头。
+     */
+    arrow?: IRPath['arrow'];
+    /**
+     * 箭头形状。默认 `'normal'`（实心三角）。其他：`'open'` 空心三角、
+     * `'stealth'` 倒钩、`'diamond'` 菱形、`'circle'` 圆点。
+     */
+    arrowShape?: IRPath['arrowShape'];
+    /** 闭合区域填充色，CSS 颜色字符串；省略 = 不填充（仅描边）。配合 cycle step 画填充形状 */
+    fill?: IRPath['fill'];
+    /** SVG fill-rule：`'nonzero'`（默认）/ `'evenodd'`（环形 / 孔洞） */
+    fillRule?: IRPath['fillRule'];
     /** 应当全部是 <Step /> */
     children: ReactNode;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../../src/kernel/Path.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG3C,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB,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,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}
+{"version":3,"file":"Path.d.ts","sourceRoot":"","sources":["../../../src/kernel/Path.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG3C,uBAAuB;AACvB,MAAM,MAAM,SAAS,GAAG;IACtB,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;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;IAClC,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}

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

@@ -2,7 +2,8 @@ import { FC } from 'react';
 import { IRTarget } from '@retikz/core';
 /**
  * <Step> 组件的 props。
- * v0.1.0-alpha 仅支持 'move' 与 'line'，kind 默认 'line'。
+ * v0.1.0-alpha.1 支持四种 kind：'move' / 'line' / 'step'（折角）/ 'cycle'（闭合）。
+ * kind 默认 'line'。
  */
 export type StepProps = {
     /** 移动游标但不绘制（类似 SVG path "M"） */
@@ -14,6 +15,16 @@ export type StepProps = {
     kind?: 'line';
     /** 直线终点 */
     to: IRTarget;
+} | {
+    /** 折角段：从游标经一个直角拐点到目标点（TikZ `-|` / `|-`） */
+    kind: 'step';
+    /** 折角走向：`-|` 先水平后垂直；`|-` 先垂直后水平 */
+    via: '-|' | '|-';
+    /** 折角终点 */
+    to: IRTarget;
+} | {
+    /** 闭合：把当前子路径回到最近一个 move 起点（TikZ `cycle` / SVG `Z`） */
+    kind: 'cycle';
 };
 /**
  * Step 是 DSL 标记组件——本身不渲染。

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

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/kernel/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C;;;GAGG;AACH,MAAM,MAAM,SAAS,GACjB;IACE,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY;IACZ,EAAE,EAAE,QAAQ,CAAC;CACd,GACD;IACE,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW;IACX,EAAE,EAAE,QAAQ,CAAC;CACd,CAAC;AAEN;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/kernel/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C;;;;GAIG;AACH,MAAM,MAAM,SAAS,GACjB;IACE,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,YAAY;IACZ,EAAE,EAAE,QAAQ,CAAC;CACd,GACD;IACE,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW;IACX,EAAE,EAAE,QAAQ,CAAC;CACd,GACD;IACE,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,WAAW;IACX,EAAE,EAAE,QAAQ,CAAC;CACd,GACD;IACE,sDAAsD;IACtD,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEN;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAc,CAAC"}

package/dist/lib/kernel/Tikz.cjs

@@ -1,4 +1,5 @@
 const require__builder = require("./_builder.cjs");
+const require_arrowMarkers = require("../render/arrowMarkers.cjs");
 const require_browser_measurer = require("../render/browser-measurer.cjs");
 const require_renderPrim = require("../render/renderPrim.cjs");
 const require_viewBox = require("../render/viewBox.cjs");
@@ -6,22 +7,41 @@ let react = require("react");
 let _retikz_core = require("@retikz/core");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/kernel/Tikz.tsx
+/** 递归收集 scene 里所有 PathPrim 用到的 arrow 形状——按需注入 marker defs */
+var collectArrowShapes = (prims) => {
+	const shapes = /* @__PURE__ */ new Set();
+	for (const p of prims) if (p.type === "path") {
+		if (p.arrowStart) shapes.add(p.arrowStart);
+		if (p.arrowEnd) shapes.add(p.arrowEnd);
+	} else if (p.type === "group") for (const s of collectArrowShapes(p.children)) shapes.add(s);
+	return shapes;
+};
 /**
 * <Tikz> 顶层容器。
 * 1. 从 children 构造 IR（或直接接受外部 IR）
 * 2. 调 compileToScene 得 Scene
-* 3. 把 Scene primitives 渲染为 SVG 元素
+* 3. 把 Scene primitives 渲染为 SVG 元素；按需注入 `<defs>` 与每种 arrow 形状的 `<marker>`
+*
+* 箭头 marker 用 `useId()` 派生稳定前缀（多个 Tikz 实例共存不冲突）；
+* 每种用到的 shape 一个 marker 定义，id 形如 `${prefix}-${shape}`，
+* marker 内 path 借 `context-stroke` / `context-fill` 让颜色随 path 同步。
 */
 var Tikz = ({ ir: irFromProp, children, width, height, className, style }) => {
 	const ir = (0, react.useMemo)(() => irFromProp ?? require__builder.buildIR(children), [irFromProp, children]);
 	const scene = (0, react.useMemo)(() => (0, _retikz_core.compileToScene)(ir, { measureText: require_browser_measurer.browserMeasurer }), [ir]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	const arrowMarkerPrefix = `retikz-arrow-${(0, react.useId)().replace(/[^a-zA-Z0-9]/g, "")}`;
+	const usedShapes = collectArrowShapes(scene.primitives);
+	const arrowMarkerIdFor = (shape) => `${arrowMarkerPrefix}-${shape}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 		viewBox: require_viewBox.formatViewBox(scene.viewBox),
 		width,
 		height,
 		className,
 		style,
-		children: scene.primitives.map((p, i) => require_renderPrim.renderPrim(p, i))
+		children: [usedShapes.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: Array.from(usedShapes).map((shape) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_arrowMarkers.ArrowMarker, {
+			id: arrowMarkerIdFor(shape),
+			shape
+		}, shape)) }), scene.primitives.map((p, i) => require_renderPrim.renderPrim(p, i, { arrowMarkerIdFor }))]
 	});
 };
 //#endregion

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

@@ -19,7 +19,11 @@ export type TikzProps = {
  * <Tikz> 顶层容器。
  * 1. 从 children 构造 IR（或直接接受外部 IR）
  * 2. 调 compileToScene 得 Scene
- * 3. 把 Scene primitives 渲染为 SVG 元素
+ * 3. 把 Scene primitives 渲染为 SVG 元素；按需注入 `<defs>` 与每种 arrow 形状的 `<marker>`
+ *
+ * 箭头 marker 用 `useId()` 派生稳定前缀（多个 Tikz 实例共存不冲突）；
+ * 每种用到的 shape 一个 marker 定义，id 形如 `${prefix}-${shape}`，
+ * marker 内 path 借 `context-stroke` / `context-fill` 让颜色随 path 同步。
  */
 export declare const Tikz: FC<TikzProps>;
 //# sourceMappingURL=Tikz.d.ts.map

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,EAAW,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,EAAkB,MAAM,cAAc,CAAC;AAMvD,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;AAEF;;;;;GAKG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAS9B,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;CACvB,CAAC;AAgBF;;;;;;;;;GASG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAuB9B,CAAC"}

package/dist/lib/kernel/_builder.cjs

@@ -14,6 +14,7 @@ var buildNode = (props) => {
 	return {
 		type: "node",
 		id: props.id,
+		shape: props.shape,
 		position: props.position,
 		rotate: props.rotate,
 		text,
@@ -27,7 +28,8 @@ var buildNode = (props) => {
 };
 /**
 * 扫描 <Path> children 收集 <Step> 序列。
-* 至少 2 段；首段不是 move 时强制改为 move（与 SVG path 的 "M …" 语义对齐）。
+* 至少 2 段；首段不是 move 时强制改为 move（与 SVG path 的 "M …" 语义对齐）；
+* cycle 没有 to 字段，若用户把 cycle 放在首段，coerce 时降级到 move (0,0)。
 */
 var readPathChildren = (children) => {
 	const out = [];
@@ -36,6 +38,22 @@ var readPathChildren = (children) => {
 		if (getDisplayName(child) !== "@retikz/Step") return;
 		const props = child.props;
 		const kind = props.kind ?? "line";
+		if (kind === "cycle") {
+			out.push({
+				type: "step",
+				kind: "cycle"
+			});
+			return;
+		}
+		if (kind === "step") {
+			out.push({
+				type: "step",
+				kind: "step",
+				via: props.via,
+				to: props.to
+			});
+			return;
+		}
 		out.push({
 			type: "step",
 			kind,
@@ -43,11 +61,18 @@ var readPathChildren = (children) => {
 		});
 	});
 	if (out.length < 2) throw new Error("<Path> requires at least 2 <Step> children");
-	if (out[0].kind !== "move") out[0] = {
-		type: "step",
-		kind: "move",
-		to: out[0].to
-	};
+	if (out[0].kind !== "move") {
+		const first = out[0];
+		out[0] = first.kind === "cycle" ? {
+			type: "step",
+			kind: "move",
+			to: [0, 0]
+		} : {
+			type: "step",
+			kind: "move",
+			to: first.to
+		};
+	}
 	return out;
 };
 /** 把 <Path> props 翻成 IRChild；step 序列由 readPathChildren 收集 */
@@ -56,6 +81,10 @@ var buildPath = (props) => ({
 	stroke: props.stroke,
 	strokeWidth: props.strokeWidth,
 	strokeDasharray: props.strokeDasharray,
+	arrow: props.arrow,
+	arrowShape: props.arrowShape,
+	fill: props.fill,
+	fillRule: props.fillRule,
 	children: readPathChildren(props.children)
 });
 /**

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,EAA2B,MAAM,cAAc,CAAC;AAoGhE;;;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,EAAE,EAAE,EAA2B,MAAM,cAAc,CAAC;AAoIhE;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,UAAU,SAAS,KAAG,EAI5C,CAAC"}

package/dist/lib/kernel/_unbuilder.cjs

@@ -7,6 +7,7 @@ let react = require("react");
 var nodePropsFromIR = (n) => {
 	const props = { position: n.position };
 	if (n.id !== void 0) props.id = n.id;
+	if (n.shape !== void 0) props.shape = n.shape;
 	if (n.rotate !== void 0) props.rotate = n.rotate;
 	if (n.text !== void 0) props.text = n.text;
 	if (n.fontSize !== void 0) props.fontSize = n.fontSize;
@@ -18,11 +19,23 @@ var nodePropsFromIR = (n) => {
 	return props;
 };
 /** 单个 IRStep → <Step /> element */
-var stepToElement = (step, key) => (0, react.createElement)(require_Step.Step, {
-	key,
-	kind: step.kind,
-	to: step.to
-});
+var stepToElement = (step, key) => {
+	if (step.kind === "cycle") return (0, react.createElement)(require_Step.Step, {
+		key,
+		kind: "cycle"
+	});
+	if (step.kind === "step") return (0, react.createElement)(require_Step.Step, {
+		key,
+		kind: "step",
+		via: step.via,
+		to: step.to
+	});
+	return (0, react.createElement)(require_Step.Step, {
+		key,
+		kind: step.kind,
+		to: step.to
+	});
+};
 /** discriminated union 兜底：编译期保证不漏 case，运行时给出明确错误 */
 var assertNever = (x) => {
 	throw new Error(`convertIRToReactNode: unknown IR child type: ${JSON.stringify(x)}`);
@@ -39,6 +52,10 @@ var childToElement = (child, key) => {
 			stroke: child.stroke,
 			strokeWidth: child.strokeWidth,
 			strokeDasharray: child.strokeDasharray,
+			arrow: child.arrow,
+			arrowShape: child.arrowShape,
+			fill: child.fill,
+			fillRule: child.fillRule,
 			children: child.children.map((s, j) => stepToElement(s, j))
 		});
 		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;AA+ChE;;;;;;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;AA2DhE;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,IAAI,EAAE,KAAG,SACW,CAAC"}

package/dist/lib/render/arrowMarkers.cjs

@@ -0,0 +1,81 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/render/arrowMarkers.tsx
+var MARKERS = {
+	normal: {
+		refX: 10,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M 0 0 L 10 5 L 0 10 Z",
+			fill: "context-stroke"
+		})
+	},
+	open: {
+		refX: 1,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M 1 1 L 9 5 L 1 9 Z",
+			fill: "none",
+			stroke: "context-stroke",
+			strokeWidth: 1.5
+		})
+	},
+	stealth: {
+		refX: 10,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M 0 0 L 10 5 L 0 10 L 3 5 Z",
+			fill: "context-stroke"
+		})
+	},
+	diamond: {
+		refX: 10,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M 0 5 L 5 0 L 10 5 L 5 10 Z",
+			fill: "context-stroke"
+		})
+	},
+	openDiamond: {
+		refX: 1,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M 1 5 L 5 1 L 9 5 L 5 9 Z",
+			fill: "none",
+			stroke: "context-stroke",
+			strokeWidth: 1.5,
+			strokeLinejoin: "round"
+		})
+	},
+	circle: {
+		refX: 10,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 5,
+			cy: 5,
+			r: 5,
+			fill: "context-stroke"
+		})
+	},
+	openCircle: {
+		refX: 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 5,
+			cy: 5,
+			r: 4.25,
+			fill: "none",
+			stroke: "context-stroke",
+			strokeWidth: 1.5
+		})
+	}
+};
+/** 单个 `<marker>` 元素，由 `<defs>` 包起来 */
+var ArrowMarker = ({ id, shape }) => {
+	const spec = MARKERS[shape];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("marker", {
+		id,
+		viewBox: "0 0 10 10",
+		refX: spec.refX,
+		refY: 5,
+		markerWidth: 6,
+		markerHeight: 6,
+		orient: "auto-start-reverse",
+		markerUnits: "strokeWidth",
+		children: spec.children
+	});
+};
+//#endregion
+exports.ArrowMarker = ArrowMarker;

package/dist/lib/render/arrowMarkers.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ArrowShape } from '@retikz/core';
+export type ArrowMarkerProps = {
+    /** marker 元素 id，用于 path markerStart / markerEnd 引用 */
+    id: string;
+    /** 形状名 */
+    shape: ArrowShape;
+};
+/** 单个 `<marker>` 元素，由 `<defs>` 包起来 */
+export declare const ArrowMarker: FC<ArrowMarkerProps>;
+//# sourceMappingURL=arrowMarkers.d.ts.map

package/dist/lib/render/arrowMarkers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrowMarkers.d.ts","sourceRoot":"","sources":["../../../src/render/arrowMarkers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAgB,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAqF/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,sDAAsD;IACtD,EAAE,EAAE,MAAM,CAAC;IACX,UAAU;IACV,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,sCAAsC;AACtC,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAgB5C,CAAC"}

package/dist/lib/render/renderPrim.cjs

@@ -13,9 +13,9 @@ var baselineToDominant = (b) => {
 };
 /**
 * Scene primitive → SVG React 元素。
-* 不读 IR，只读 Scene；约束在 100 行以内（超过说明 Scene 抽象不够下沉，回 core 补）。
+* 不读 IR，只读 Scene。
 */
-var renderPrim = (p, key) => {
+var renderPrim = (p, key, ctx = {}) => {
 	switch (p.type) {
 		case "rect": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
 			x: p.x,
@@ -31,6 +31,22 @@ var renderPrim = (p, key) => {
 			ry: p.cornerRadius,
 			opacity: p.opacity
 		}, key);
+		case "ellipse": {
+			const transform = p.rotate ? `rotate(${p.rotate} ${p.cx} ${p.cy})` : void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ellipse", {
+				cx: p.cx,
+				cy: p.cy,
+				rx: p.rx,
+				ry: p.ry,
+				transform,
+				fill: p.fill,
+				fillOpacity: p.fillOpacity,
+				stroke: p.stroke,
+				strokeWidth: p.strokeWidth,
+				strokeDasharray: p.strokeDasharray,
+				opacity: p.opacity
+			}, key);
+		}
 		case "text": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
 			x: p.x,
 			y: p.y,
@@ -44,19 +60,26 @@ var renderPrim = (p, key) => {
 			opacity: p.opacity,
 			children: p.content
 		}, key);
-		case "path": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			d: p.d,
-			fill: p.fill,
-			stroke: p.stroke,
-			strokeWidth: p.strokeWidth,
-			strokeDasharray: p.strokeDasharray,
-			strokeLinecap: p.strokeLinecap,
-			strokeLinejoin: p.strokeLinejoin,
-			opacity: p.opacity
-		}, key);
+		case "path": {
+			const startId = p.arrowStart && ctx.arrowMarkerIdFor ? ctx.arrowMarkerIdFor(p.arrowStart) : void 0;
+			const endId = p.arrowEnd && ctx.arrowMarkerIdFor ? ctx.arrowMarkerIdFor(p.arrowEnd) : void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				d: p.d,
+				fill: p.fill,
+				fillRule: p.fillRule,
+				stroke: p.stroke,
+				strokeWidth: p.strokeWidth,
+				strokeDasharray: p.strokeDasharray,
+				strokeLinecap: p.strokeLinecap,
+				strokeLinejoin: p.strokeLinejoin,
+				markerStart: startId ? `url(#${startId})` : void 0,
+				markerEnd: endId ? `url(#${endId})` : void 0,
+				opacity: p.opacity
+			}, key);
+		}
 		case "group": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
 			transform: p.transform,
-			children: p.children.map((c, i) => renderPrim(c, i))
+			children: p.children.map((c, i) => renderPrim(c, i, ctx))
 		}, key);
 	}
 };

package/dist/lib/render/renderPrim.d.ts

@@ -1,8 +1,16 @@
 import { Key, ReactElement } from 'react';
-import { ScenePrimitive } from '@retikz/core';
+import { ArrowShape, ScenePrimitive } from '@retikz/core';
+/**
+ * 渲染上下文——Tikz 容器侧把 marker id 等"全 SVG 共享"的资源向下传给 renderPrim。
+ * 资源若不存在就传 undefined，对应路径 prim 不会引用 marker。
+ */
+export type RenderContext = {
+    /** 按 arrow 形状查 SVG `<defs><marker id>` id 的回调 */
+    arrowMarkerIdFor?: (shape: ArrowShape) => string;
+};
 /**
  * Scene primitive → SVG React 元素。
- * 不读 IR，只读 Scene；约束在 100 行以内（超过说明 Scene 抽象不够下沉，回 core 补）。
+ * 不读 IR，只读 Scene。
  */
-export declare const renderPrim: (p: ScenePrimitive, key: Key) => ReactElement;
+export declare const renderPrim: (p: ScenePrimitive, key: Key, ctx?: RenderContext) => ReactElement;
 //# sourceMappingURL=renderPrim.d.ts.map

package/dist/lib/render/renderPrim.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderPrim.d.ts","sourceRoot":"","sources":["../../../src/render/renderPrim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AA6BnD;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,GAAG,cAAc,EAAE,KAAK,GAAG,KAAG,YA2DxD,CAAC"}
+{"version":3,"file":"renderPrim.d.ts","sourceRoot":"","sources":["../../../src/render/renderPrim.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AA6B/D;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;CAClD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GACrB,GAAG,cAAc,EACjB,KAAK,GAAG,EACR,MAAK,aAAkB,KACtB,YAsFF,CAAC"}

package/dist/lib/sugar/Draw.cjs

@@ -12,18 +12,31 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * （useState / useMemo / useEffect 等会抛 "Invalid hook call"）。
 */
 var Draw = (props) => {
-	const { way, stroke, strokeWidth, strokeDasharray } = props;
+	const { way, stroke, strokeWidth, strokeDasharray, arrow, arrowShape, fill, fillRule } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Path.Path, {
 		stroke,
 		strokeWidth,
 		strokeDasharray,
-		children: (0, _retikz_core.parseWay)(way).map((s, i) => s.kind === "move" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
-			kind: "move",
-			to: s.to
-		}, i) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
-			kind: "line",
-			to: s.to
-		}, i))
+		arrow,
+		arrowShape,
+		fill,
+		fillRule,
+		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, {
+				kind: "move",
+				to: s.to
+			}, i);
+			if (s.kind === "step") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
+				kind: "step",
+				via: s.via,
+				to: s.to
+			}, i);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Step.Step, {
+				kind: "line",
+				to: s.to
+			}, i);
+		})
 	});
 };
 //#endregion

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

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { IRPath, WayDSL } from '@retikz/core';
 /** <Draw> 组件的 props */
 export type DrawProps = {
-    /** way 数组 DSL：节点 id 字符串、坐标 [x, y]、极坐标对象 */
+    /** way 数组 DSL：节点 id / 坐标 / 极坐标 / 折角算子 `'-|'` `'|-'` / 闭合 `DrawWay.cycle` */
     way: WayDSL;
     /** 描边色，省略时用 currentColor */
     stroke?: IRPath['stroke'];
@@ -10,6 +10,19 @@ export type DrawProps = {
     strokeWidth?: IRPath['strokeWidth'];
     /** SVG stroke-dasharray 模式（如 "4 2"） */
     strokeDasharray?: IRPath['strokeDasharray'];
+    /**
+     * 路径级箭头方向。`'->'` = 终点；`'<-'` = 起点；`'<->'` = 两端；
+     * 省略或 `'none'` = 无箭头。
+     */
+    arrow?: IRPath['arrow'];
+    /**
+     * 箭头形状。默认 `'normal'`。其他：`'open'` / `'stealth'` / `'diamond'` / `'circle'`。
+     */
+    arrowShape?: IRPath['arrowShape'];
+    /** 闭合区域填充色，省略 = 不填充。配合 way 末尾的 `DrawWay.cycle` 画填充形状 */
+    fill?: IRPath['fill'];
+    /** SVG fill-rule：`'nonzero'`（默认）/ `'evenodd'` */
+    fillRule?: IRPath['fillRule'];
 };
 /**
  * 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,2CAA2C;IAC3C,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;CAC7C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAW9B,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retikz/react",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "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.0"
+    "@retikz/core": "0.1.0-alpha.1"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",