@retikz/react 0.1.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 pionpill
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/es/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @retikz/react 公开 API
+ *
+ * Kernel 组件：<Tikz> <Node> <Path> <Step>
+ * Sugar 组件：<Draw>
+ *
+ * 渲染管道：buildIR → compileToScene → renderPrim → SVG
+ */
+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 { buildIR as convertReactNodeToIR } from './kernel/_builder';
+export { convertIRToReactNode } from './kernel/_unbuilder';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/es/index.js

@@ -0,0 +1,10 @@
+import { buildIR } from "./kernel/_builder.js";
+import { Tikz } from "./kernel/Tikz.js";
+import { Node } from "./kernel/Node.js";
+import { Path } from "./kernel/Path.js";
+import { Step } from "./kernel/Step.js";
+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 };

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

@@ -0,0 +1,34 @@
+import { FC, ReactNode } from 'react';
+import { IRNode, IRPosition, PolarPosition } from '@retikz/core';
+/** <Node> 组件的 props */
+export type NodeProps = {
+    /** 节点 id；其他 Path/Draw 通过这个 id 引用本节点 */
+    id?: string;
+    /** 节点中心位置；笛卡尔 [x, y] 或极坐标（编译时解析） */
+    position: IRPosition | PolarPosition;
+    /** 旋转角度（度数，与 TikZ 一致），绕节点中心；正值顺时针 */
+    rotate?: number;
+    /** 文本内容；也支持 children 形式（仅字符串） */
+    children?: ReactNode;
+    /** 显式 text，优先级高于 children */
+    text?: string;
+    /** 字号；不填用默认值 */
+    fontSize?: number;
+    /** 内边距：内容到 border 的距离 */
+    padding?: number;
+    /** 外边距：border 到 path 附着点的距离；不影响 border 位置；必须 ≥ 0 */
+    margin?: number;
+    /** 背景色 */
+    fill?: IRNode['fill'];
+    /** 描边色 */
+    stroke?: IRNode['stroke'];
+    /** 描边宽度 */
+    strokeWidth?: number;
+};
+/**
+ * Node 是 DSL 标记组件——本身不渲染任何 React 元素。
+ * 由 <Tikz> 在 children 扫描阶段读出 props 构造 IR，
+ * 再由 compileToScene + renderPrim 产出最终 SVG。
+ */
+export declare const Node: FC<NodeProps>;
+//# sourceMappingURL=Node.d.ts.map

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

@@ -0,0 +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"}

package/dist/es/kernel/Node.js

@@ -0,0 +1,11 @@
+import { TIKZ_NODE } from "./_displayNames.js";
+//#region src/kernel/Node.tsx
+/**
+* Node 是 DSL 标记组件——本身不渲染任何 React 元素。
+* 由 <Tikz> 在 children 扫描阶段读出 props 构造 IR，
+* 再由 compileToScene + renderPrim 产出最终 SVG。
+*/
+var Node = () => null;
+Node.displayName = TIKZ_NODE;
+//#endregion
+export { Node };

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

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from 'react';
+import { IRPath } from '@retikz/core';
+/** <Path> 组件的 props */
+export type PathProps = {
+    /** 描边色，省略时用 currentColor */
+    stroke?: IRPath['stroke'];
+    /** 描边宽度，省略时为 1 */
+    strokeWidth?: IRPath['strokeWidth'];
+    /** SVG stroke-dasharray 模式（如 "4 2"） */
+    strokeDasharray?: IRPath['strokeDasharray'];
+    /** 应当全部是 <Step /> */
+    children: ReactNode;
+};
+/**
+ * Path 容器——本身不渲染。children 扫描阶段读出其中的 <Step /> 构造 IRPath。
+ */
+export declare const Path: FC<PathProps>;
+//# sourceMappingURL=Path.d.ts.map

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

@@ -0,0 +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"}

package/dist/es/kernel/Path.js

@@ -0,0 +1,9 @@
+import { TIKZ_PATH } from "./_displayNames.js";
+//#region src/kernel/Path.tsx
+/**
+* Path 容器——本身不渲染。children 扫描阶段读出其中的 <Step /> 构造 IRPath。
+*/
+var Path = () => null;
+Path.displayName = TIKZ_PATH;
+//#endregion
+export { Path };

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

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { IRTarget } from '@retikz/core';
+/**
+ * <Step> 组件的 props。
+ * v0.1.0-alpha 仅支持 'move' 与 'line'，kind 默认 'line'。
+ */
+export type StepProps = {
+    /** 移动游标但不绘制（类似 SVG path "M"） */
+    kind: 'move';
+    /** 移动目标点 */
+    to: IRTarget;
+} | {
+    /** 直线动作；省略时默认 'line' */
+    kind?: 'line';
+    /** 直线终点 */
+    to: IRTarget;
+};
+/**
+ * Step 是 DSL 标记组件——本身不渲染。
+ * 必须作为 <Path> 的直接子节点出现，由 <Path> 的 children 扫描读出。
+ */
+export declare const Step: FC<StepProps>;
+//# sourceMappingURL=Step.d.ts.map

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

@@ -0,0 +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"}

package/dist/es/kernel/Step.js

@@ -0,0 +1,10 @@
+import { TIKZ_STEP } from "./_displayNames.js";
+//#region src/kernel/Step.tsx
+/**
+* Step 是 DSL 标记组件——本身不渲染。
+* 必须作为 <Path> 的直接子节点出现，由 <Path> 的 children 扫描读出。
+*/
+var Step = () => null;
+Step.displayName = TIKZ_STEP;
+//#endregion
+export { Step };

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

@@ -0,0 +1,25 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+import { IR } from '@retikz/core';
+/** <Tikz> 组件的 props */
+export type TikzProps = {
+    /** 直接喂 IR JSON（持久化 / AI / 编辑器场景），与 children 二选一 */
+    ir?: IR;
+    /** Kernel/Sugar JSX children */
+    children?: ReactNode;
+    /** SVG 元素宽度（CSS 长度或数字） */
+    width?: number | string;
+    /** SVG 元素高度（CSS 长度或数字） */
+    height?: number | string;
+    /** 透传到 svg 元素的 className */
+    className?: string;
+    /** 透传到 svg 元素的内联样式 */
+    style?: CSSProperties;
+};
+/**
+ * <Tikz> 顶层容器。
+ * 1. 从 children 构造 IR（或直接接受外部 IR）
+ * 2. 调 compileToScene 得 Scene
+ * 3. 把 Scene primitives 渲染为 SVG 元素
+ */
+export declare const Tikz: FC<TikzProps>;
+//# sourceMappingURL=Tikz.d.ts.map

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

@@ -0,0 +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"}

package/dist/es/kernel/Tikz.js

@@ -0,0 +1,28 @@
+import { buildIR } from "./_builder.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 { compileToScene } from "@retikz/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/kernel/Tikz.tsx
+/**
+* <Tikz> 顶层容器。
+* 1. 从 children 构造 IR（或直接接受外部 IR）
+* 2. 调 compileToScene 得 Scene
+* 3. 把 Scene primitives 渲染为 SVG 元素
+*/
+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", {
+		viewBox: formatViewBox(scene.viewBox),
+		width,
+		height,
+		className,
+		style,
+		children: scene.primitives.map((p, i) => renderPrim(p, i))
+	});
+};
+//#endregion
+export { Tikz };

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { IR } from '@retikz/core';
+/**
+ * 把 <Tikz> 的 children 同步翻译为 IR。
+ * 纯函数，不依赖 effect/state；render 阶段即可直接使用。
+ */
+export declare const buildIR: (children: ReactNode) => IR;
+//# sourceMappingURL=_builder.d.ts.map

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

@@ -0,0 +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"}

package/dist/es/kernel/_builder.js

@@ -0,0 +1,97 @@
+import { TIKZ_NODE, TIKZ_PATH } from "./_displayNames.js";
+import { Children, isValidElement } from "react";
+import { CURRENT_IR_VERSION } from "@retikz/core";
+//#region src/kernel/_builder.ts
+/** 取 React 元素 type 上的 displayName；type 为字符串时直接返回，用于识别 Kernel/Sugar 组件 */
+var getDisplayName = (el) => {
+	const t = el.type;
+	if (typeof t === "string") return t;
+	return t.displayName;
+};
+/** 把 <Node> props 翻成 IRChild；text 优先取 props.text，其次取字符串 children */
+var buildNode = (props) => {
+	const text = typeof props.text === "string" ? props.text : typeof props.children === "string" ? props.children : void 0;
+	return {
+		type: "node",
+		id: props.id,
+		position: props.position,
+		rotate: props.rotate,
+		text,
+		fill: props.fill,
+		stroke: props.stroke,
+		strokeWidth: props.strokeWidth,
+		padding: props.padding,
+		margin: props.margin,
+		fontSize: props.fontSize
+	};
+};
+/**
+* 扫描 <Path> children 收集 <Step> 序列。
+* 至少 2 段；首段不是 move 时强制改为 move（与 SVG path 的 "M …" 语义对齐）。
+*/
+var readPathChildren = (children) => {
+	const out = [];
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) return;
+		if (getDisplayName(child) !== "@retikz/Step") return;
+		const props = child.props;
+		const kind = props.kind ?? "line";
+		out.push({
+			type: "step",
+			kind,
+			to: props.to
+		});
+	});
+	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
+	};
+	return out;
+};
+/** 把 <Path> props 翻成 IRChild；step 序列由 readPathChildren 收集 */
+var buildPath = (props) => ({
+	type: "path",
+	stroke: props.stroke,
+	strokeWidth: props.strokeWidth,
+	strokeDasharray: props.strokeDasharray,
+	children: readPathChildren(props.children)
+});
+/**
+* 扫描 <Tikz> 直接 children：
+* - Kernel marker（Node / Path）走对应 builder 直接产 IRChild
+* - 其余函数式组件视为 Sugar：同步调用拿 Kernel JSX，递归展开
+*   （Sugar 组件不能用 hooks——builder 不在 React 调用栈上）
+* - 非函数（fragment / 字符串 / null / 类组件）静默跳过
+*/
+var readSceneChildren = (children) => {
+	const out = [];
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) return;
+		switch (getDisplayName(child)) {
+			case TIKZ_NODE:
+				out.push(buildNode(child.props));
+				return;
+			case TIKZ_PATH:
+				out.push(buildPath(child.props));
+				return;
+		}
+		if (typeof child.type === "function") {
+			const expanded = child.type(child.props);
+			for (const ir of readSceneChildren(expanded)) out.push(ir);
+		}
+	});
+	return out;
+};
+/**
+* 把 <Tikz> 的 children 同步翻译为 IR。
+* 纯函数，不依赖 effect/state；render 阶段即可直接使用。
+*/
+var buildIR = (children) => ({
+	version: CURRENT_IR_VERSION,
+	type: "scene",
+	children: readSceneChildren(children)
+});
+//#endregion
+export { buildIR };

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

@@ -0,0 +1,7 @@
+/** <Node> 组件的 displayName */
+export declare const TIKZ_NODE = "@retikz/Node";
+/** <Path> 组件的 displayName */
+export declare const TIKZ_PATH = "@retikz/Path";
+/** <Step> 组件的 displayName */
+export declare const TIKZ_STEP = "@retikz/Step";
+//# sourceMappingURL=_displayNames.d.ts.map

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

@@ -0,0 +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"}

package/dist/es/kernel/_displayNames.js

@@ -0,0 +1,9 @@
+//#region src/kernel/_displayNames.ts
+/** <Node> 组件的 displayName */
+var TIKZ_NODE = "@retikz/Node";
+/** <Path> 组件的 displayName */
+var TIKZ_PATH = "@retikz/Path";
+/** <Step> 组件的 displayName */
+var TIKZ_STEP = "@retikz/Step";
+//#endregion
+export { TIKZ_NODE, TIKZ_PATH, TIKZ_STEP };

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { IR } from '@retikz/core';
+/**
+ * 把 IR JSON 反向还原为 Kernel element 数组（带 key、不裹外壳）。
+ * 调用方可 `<Tikz>{convertIRToReactNode(ir)}</Tikz>`，或继续用 `<Tikz ir={ir}/>`。
+ *
+ * **Sugar 不可逆**：buildIR 在收集阶段就把 <Draw/> 求值展开为 Path+Step，IR 里没有
+ * "原本是 Draw" 的痕迹；本函数永远只产 Kernel 三件套。
+ */
+export declare const convertIRToReactNode: (ir: IR) => ReactNode;
+//# sourceMappingURL=_unbuilder.d.ts.map

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

@@ -0,0 +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"}

package/dist/es/kernel/_unbuilder.js

@@ -0,0 +1,56 @@
+import { Node } from "./Node.js";
+import { Path } from "./Path.js";
+import { Step } from "./Step.js";
+import { createElement } from "react";
+//#region src/kernel/_unbuilder.ts
+/** IR 'node' child → NodeProps；过滤 undefined 字段，不污染 React DevTools 显示 */
+var nodePropsFromIR = (n) => {
+	const props = { position: n.position };
+	if (n.id !== void 0) props.id = n.id;
+	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;
+	if (n.padding !== void 0) props.padding = n.padding;
+	if (n.margin !== void 0) props.margin = n.margin;
+	if (n.fill !== void 0) props.fill = n.fill;
+	if (n.stroke !== void 0) props.stroke = n.stroke;
+	if (n.strokeWidth !== void 0) props.strokeWidth = n.strokeWidth;
+	return props;
+};
+/** 单个 IRStep → <Step /> element */
+var stepToElement = (step, key) => 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)}`);
+};
+/** 单个 IR child → 对应 Kernel element；走 discriminated union 穷举 */
+var childToElement = (child, key) => {
+	switch (child.type) {
+		case "node": return createElement(Node, {
+			key,
+			...nodePropsFromIR(child)
+		});
+		case "path": return createElement(Path, {
+			key,
+			stroke: child.stroke,
+			strokeWidth: child.strokeWidth,
+			strokeDasharray: child.strokeDasharray,
+			children: child.children.map((s, j) => stepToElement(s, j))
+		});
+		default: return assertNever(child);
+	}
+};
+/**
+* 把 IR JSON 反向还原为 Kernel element 数组（带 key、不裹外壳）。
+* 调用方可 `<Tikz>{convertIRToReactNode(ir)}</Tikz>`，或继续用 `<Tikz ir={ir}/>`。
+*
+* **Sugar 不可逆**：buildIR 在收集阶段就把 <Draw/> 求值展开为 Path+Step，IR 里没有
+* "原本是 Draw" 的痕迹；本函数永远只产 Kernel 三件套。
+*/
+var convertIRToReactNode = (ir) => ir.children.map((child, i) => childToElement(child, i));
+//#endregion
+export { convertIRToReactNode };

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

@@ -0,0 +1,5 @@
+export * from './Tikz';
+export * from './Node';
+export * from './Path';
+export * from './Step';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/es/kernel/index.js

@@ -0,0 +1,4 @@
+import "./Tikz.js";
+import "./Node.js";
+import "./Path.js";
+import "./Step.js";

package/dist/es/render/browser-measurer.d.ts

@@ -0,0 +1,7 @@
+import { TextMeasurer } from '@retikz/core';
+/**
+ * 浏览器端 text measurer：基于 canvas measureText。
+ * 在 SSR 路径下走不到这里，会自动降级 fallback。
+ */
+export declare const browserMeasurer: TextMeasurer;
+//# sourceMappingURL=browser-measurer.d.ts.map

package/dist/es/render/browser-measurer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser-measurer.d.ts","sourceRoot":"","sources":["../../../src/render/browser-measurer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAgBjD;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,YAoB7B,CAAC"}

package/dist/es/render/browser-measurer.js

@@ -0,0 +1,35 @@
+import { fallbackMeasurer } from "@retikz/core";
+//#region src/render/browser-measurer.ts
+var canvas = null;
+var ctx = null;
+/** 懒加载模块级 canvas 2d context；SSR 环境（无 document）下返回 null，由 measurer 走 fallback */
+var getCtx = () => {
+	if (typeof document === "undefined") return null;
+	if (!canvas) {
+		canvas = document.createElement("canvas");
+		ctx = canvas.getContext("2d");
+	}
+	return ctx;
+};
+/**
+* 浏览器端 text measurer：基于 canvas measureText。
+* 在 SSR 路径下走不到这里，会自动降级 fallback。
+*/
+var browserMeasurer = (text, font) => {
+	const c = getCtx();
+	if (!c) return fallbackMeasurer(text, font);
+	const family = font.family ?? "sans-serif";
+	const weight = font.weight ?? "normal";
+	c.font = `${font.style ?? "normal"} ${weight} ${font.size}px ${family}`;
+	const m = c.measureText(text);
+	const ascent = m.actualBoundingBoxAscent ?? font.size * .8;
+	const descent = m.actualBoundingBoxDescent ?? font.size * .2;
+	return {
+		width: m.width,
+		height: ascent + descent || font.size * 1.2,
+		ascent,
+		descent
+	};
+};
+//#endregion
+export { browserMeasurer };

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

@@ -0,0 +1,8 @@
+import { Key, ReactElement } from 'react';
+import { ScenePrimitive } from '@retikz/core';
+/**
+ * Scene primitive → SVG React 元素。
+ * 不读 IR，只读 Scene；约束在 100 行以内（超过说明 Scene 抽象不够下沉，回 core 补）。
+ */
+export declare const renderPrim: (p: ScenePrimitive, key: Key) => ReactElement;
+//# sourceMappingURL=renderPrim.d.ts.map

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

@@ -0,0 +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"}

package/dist/es/render/renderPrim.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/render/renderPrim.tsx
+/** Scene 的 align 与 SVG textAnchor 同名同义，仅在此做类型收窄 */
+var alignToAnchor = (align) => align;
+/** Scene baseline 名映射到 SVG dominantBaseline 枚举（top/middle/bottom 对应三种边界基线） */
+var baselineToDominant = (b) => {
+	switch (b) {
+		case "top": return "text-before-edge";
+		case "middle": return "central";
+		case "bottom": return "text-after-edge";
+		case "alphabetic": return "alphabetic";
+	}
+};
+/**
+* Scene primitive → SVG React 元素。
+* 不读 IR，只读 Scene；约束在 100 行以内（超过说明 Scene 抽象不够下沉，回 core 补）。
+*/
+var renderPrim = (p, key) => {
+	switch (p.type) {
+		case "rect": return /* @__PURE__ */ jsx("rect", {
+			x: p.x,
+			y: p.y,
+			width: p.width,
+			height: p.height,
+			fill: p.fill,
+			fillOpacity: p.fillOpacity,
+			stroke: p.stroke,
+			strokeWidth: p.strokeWidth,
+			strokeDasharray: p.strokeDasharray,
+			rx: p.cornerRadius,
+			ry: p.cornerRadius,
+			opacity: p.opacity
+		}, key);
+		case "text": return /* @__PURE__ */ jsx("text", {
+			x: p.x,
+			y: p.y,
+			fontSize: p.fontSize,
+			fontFamily: p.fontFamily,
+			fontWeight: p.fontWeight,
+			fontStyle: p.fontStyle,
+			textAnchor: alignToAnchor(p.align),
+			dominantBaseline: baselineToDominant(p.baseline),
+			fill: p.fill,
+			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 "group": return /* @__PURE__ */ jsx("g", {
+			transform: p.transform,
+			children: p.children.map((c, i) => renderPrim(c, i))
+		}, key);
+	}
+};
+//#endregion
+export { renderPrim };

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

@@ -0,0 +1,4 @@
+import { ViewBox } from '@retikz/core';
+/** 把 ViewBox 对象格式化为 SVG `viewBox` 属性字符串 */
+export declare const formatViewBox: (vb: ViewBox) => string;
+//# sourceMappingURL=viewBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"viewBox.d.ts","sourceRoot":"","sources":["../../../src/render/viewBox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,2CAA2C;AAC3C,eAAO,MAAM,aAAa,GAAI,IAAI,OAAO,KAAG,MACA,CAAC"}

package/dist/es/render/viewBox.js

@@ -0,0 +1,5 @@
+//#region src/render/viewBox.ts
+/** 把 ViewBox 对象格式化为 SVG `viewBox` 属性字符串 */
+var formatViewBox = (vb) => `${vb.x} ${vb.y} ${vb.width} ${vb.height}`;
+//#endregion
+export { formatViewBox };

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

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { IRPath, WayDSL } from '@retikz/core';
+/** <Draw> 组件的 props */
+export type DrawProps = {
+    /** way 数组 DSL：节点 id 字符串、坐标 [x, y]、极坐标对象 */
+    way: WayDSL;
+    /** 描边色，省略时用 currentColor */
+    stroke?: IRPath['stroke'];
+    /** 描边宽度，省略时为 1 */
+    strokeWidth?: IRPath['strokeWidth'];
+    /** SVG stroke-dasharray 模式（如 "4 2"） */
+    strokeDasharray?: IRPath['strokeDasharray'];
+};
+/**
+ * Sugar 组件——展开为等价的 <Path><Step.../></Path> Kernel 子树。
+ * way 数组的解析委托给 core 的 parseWay，保证"Sugar 不引入新能力"。
+ *
+ * 注意：本组件由 <Tikz> 的 builder 在 IR 构造阶段同步调用以获取 Kernel JSX，
+ * 不在 React render 调用栈上，因此实现里不能使用 React hooks
+ * （useState / useMemo / useEffect 等会抛 "Invalid hook call"）。
+ */
+export declare const Draw: FC<DrawProps>;
+//# sourceMappingURL=Draw.d.ts.map

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

@@ -0,0 +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"}