rendx-graph-plugin 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present wei.liang (https://github.com/weiliang0121)
+
+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/main.cjs

@@ -0,0 +1,462 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/main.ts
+var main_exports = {};
+__export(main_exports, {
+  ElementImpl: () => ElementImpl,
+  GraphPlugin: () => GraphPlugin,
+  createEdge: () => createEdge,
+  createNode: () => createNode,
+  graphPlugin: () => graphPlugin
+});
+module.exports = __toCommonJS(main_exports);
+
+// src/create.ts
+function createNode(render) {
+  return {
+    __element_def__: true,
+    role: "node",
+    render
+  };
+}
+function createEdge(render) {
+  return {
+    __element_def__: true,
+    role: "edge",
+    render
+  };
+}
+
+// src/element.ts
+var import_rendx_engine = require("rendx-engine");
+var _data, _def, _graph, _cleanup, _mounted, _onUpdate, _ElementImpl_instances, render_fn, teardown_fn;
+var ElementImpl = class {
+  constructor(id, typeName, def, data, graph, layer, deps, onUpdate) {
+    __privateAdd(this, _ElementImpl_instances);
+    __privateAdd(this, _data);
+    __privateAdd(this, _def);
+    __privateAdd(this, _graph);
+    __privateAdd(this, _cleanup, null);
+    __privateAdd(this, _mounted, false);
+    __privateAdd(this, _onUpdate);
+    this.id = id;
+    this.typeName = typeName;
+    this.role = def.role;
+    __privateSet(this, _def, def);
+    __privateSet(this, _data, { ...data });
+    __privateSet(this, _graph, graph);
+    this.layer = layer;
+    this.deps = deps;
+    __privateSet(this, _onUpdate, onUpdate ?? null);
+    this.group = new import_rendx_engine.Group();
+    this.group.setName(id);
+    if (def.role === "node") {
+      const nd = __privateGet(this, _data);
+      this.group.translate(nd.x, nd.y);
+    }
+    __privateMethod(this, _ElementImpl_instances, render_fn).call(this);
+    __privateSet(this, _mounted, true);
+  }
+  get data() {
+    return __privateGet(this, _data);
+  }
+  get mounted() {
+    return __privateGet(this, _mounted);
+  }
+  /**
+   * 部分更新数据。
+   * - id 不可变
+   * - Node: 仅 x/y 变化 → translate only（不重建子树）
+   * - Edge: source/target 变化时忽略（deps 已静态绑定）
+   */
+  update(patch) {
+    var _a, _b;
+    if ("id" in patch) {
+      delete patch.id;
+    }
+    const merged = { ...__privateGet(this, _data), ...patch };
+    if (this.role === "node") {
+      const oldData = __privateGet(this, _data);
+      const newData = merged;
+      const positionOnly = isPositionOnlyChange(oldData, newData, patch);
+      __privateSet(this, _data, merged);
+      if (positionOnly) {
+        this.group.translate(newData.x, newData.y);
+        (_a = __privateGet(this, _onUpdate)) == null ? void 0 : _a.call(this, this.id);
+        return;
+      }
+      if (newData.x !== oldData.x || newData.y !== oldData.y) {
+        this.group.translate(newData.x, newData.y);
+      }
+    } else {
+      __privateSet(this, _data, merged);
+    }
+    __privateMethod(this, _ElementImpl_instances, teardown_fn).call(this);
+    this.group.removeChildren();
+    __privateMethod(this, _ElementImpl_instances, render_fn).call(this);
+    (_b = __privateGet(this, _onUpdate)) == null ? void 0 : _b.call(this, this.id);
+  }
+  dispose() {
+    __privateMethod(this, _ElementImpl_instances, teardown_fn).call(this);
+    this.group.removeChildren();
+    __privateSet(this, _mounted, false);
+  }
+};
+_data = new WeakMap();
+_def = new WeakMap();
+_graph = new WeakMap();
+_cleanup = new WeakMap();
+_mounted = new WeakMap();
+_onUpdate = new WeakMap();
+_ElementImpl_instances = new WeakSet();
+// ── internal ──
+render_fn = function() {
+  let cleanup = null;
+  const onCleanup = (fn) => {
+    cleanup = fn;
+  };
+  if (__privateGet(this, _def).role === "node") {
+    const nd = __privateGet(this, _data);
+    const ctx = {
+      group: this.group,
+      width: nd.width ?? 0,
+      height: nd.height ?? 0,
+      onCleanup
+    };
+    __privateGet(this, _def).render(ctx, nd, __privateGet(this, _graph));
+  } else {
+    const ed = __privateGet(this, _data);
+    const ctx = {
+      group: this.group,
+      source: __privateGet(this, _graph).get(ed.source),
+      target: __privateGet(this, _graph).get(ed.target),
+      onCleanup
+    };
+    __privateGet(this, _def).render(ctx, ed, __privateGet(this, _graph));
+  }
+  __privateSet(this, _cleanup, cleanup);
+};
+teardown_fn = function() {
+  if (__privateGet(this, _cleanup)) {
+    __privateGet(this, _cleanup).call(this);
+    __privateSet(this, _cleanup, null);
+  }
+};
+function isPositionOnlyChange(oldData, newData, patch) {
+  const keys = Object.keys(patch);
+  if (keys.length === 0) return false;
+  for (const key of keys) {
+    if (key === "x" || key === "y") continue;
+    if (oldData[key] !== newData[key]) {
+      return false;
+    }
+  }
+  return oldData.x !== newData.x || oldData.y !== newData.y;
+}
+
+// src/graph.ts
+var import_rendx_engine2 = require("rendx-engine");
+var _app, _types, _elements, _dependents, _batching, _batchAdded, _batchRemoved, _edgesGroup, _nodesGroup, _GraphPlugin_instances, triggerDependents_fn, syncState_fn;
+var GraphPlugin = class {
+  constructor() {
+    __privateAdd(this, _GraphPlugin_instances);
+    this.name = "graph";
+    this.state = [
+      {
+        key: "graph:elements",
+        description: "All element IDs in the graph",
+        initial: []
+      }
+    ];
+    __privateAdd(this, _app);
+    __privateAdd(this, _types, /* @__PURE__ */ new Map());
+    __privateAdd(this, _elements, /* @__PURE__ */ new Map());
+    /** node → 依赖它的元素 id 列表 */
+    __privateAdd(this, _dependents, /* @__PURE__ */ new Map());
+    /** 批量操作标志 */
+    __privateAdd(this, _batching, false);
+    __privateAdd(this, _batchAdded, false);
+    __privateAdd(this, _batchRemoved, false);
+    /** 场景分组 */
+    __privateAdd(this, _edgesGroup);
+    __privateAdd(this, _nodesGroup);
+  }
+  get edgesGroup() {
+    return __privateGet(this, _edgesGroup);
+  }
+  get nodesGroup() {
+    return __privateGet(this, _nodesGroup);
+  }
+  // ── Plugin lifecycle ──
+  install(app) {
+    __privateSet(this, _app, app);
+    __privateSet(this, _edgesGroup, new import_rendx_engine2.Group());
+    __privateGet(this, _edgesGroup).setName("__graph_edges__");
+    app.scene.add(__privateGet(this, _edgesGroup));
+    __privateSet(this, _nodesGroup, new import_rendx_engine2.Group());
+    __privateGet(this, _nodesGroup).setName("__graph_nodes__");
+    app.scene.add(__privateGet(this, _nodesGroup));
+  }
+  dispose() {
+    for (const el of __privateGet(this, _elements).values()) {
+      el.dispose();
+    }
+    __privateGet(this, _elements).clear();
+    __privateGet(this, _dependents).clear();
+    __privateGet(this, _types).clear();
+  }
+  // ── 序列化 / 反序列化 ──
+  /**
+   * 序列化所有元素实例的数据（供 history-plugin 等消费）。
+   * 类型定义（render fn）无法序列化，需要应用层在恢复时保证 register 已调用。
+   */
+  serialize() {
+    const elements = [];
+    for (const el of __privateGet(this, _elements).values()) {
+      elements.push({
+        typeName: el.typeName,
+        data: { ...el.data },
+        layer: el.layer,
+        deps: [...el.deps]
+      });
+    }
+    return { elements };
+  }
+  /**
+   * 从序列化数据恢复所有元素。
+   *
+   * 流程：
+   * 1. 清理当前所有元素和依赖追踪
+   * 2. 从恢复后的场景中移除 restoreFromJSON 反序列化出的静态 Group（它们缺少 ElementImpl 追踪）
+   * 3. 重建 edges/nodes 分组
+   * 4. 使用已注册的类型定义重新创建所有元素（会重新执行 render fn）
+   */
+  deserialize(data) {
+    const saved = data;
+    if (!saved.elements || !Array.isArray(saved.elements)) return;
+    for (const el of __privateGet(this, _elements).values()) {
+      el.dispose();
+    }
+    __privateGet(this, _elements).clear();
+    __privateGet(this, _dependents).clear();
+    const scene = __privateGet(this, _app).scene;
+    for (const layer of scene.layers) {
+      if (layer.isEventLayer) continue;
+      const toRemove = [];
+      for (const child of layer.children) {
+        if (child.name === "__graph_edges__" || child.name === "__graph_nodes__") {
+          toRemove.push(child);
+        }
+      }
+      for (const g of toRemove) {
+        layer.remove(g);
+      }
+    }
+    __privateSet(this, _edgesGroup, new import_rendx_engine2.Group());
+    __privateGet(this, _edgesGroup).setName("__graph_edges__");
+    scene.add(__privateGet(this, _edgesGroup));
+    __privateSet(this, _nodesGroup, new import_rendx_engine2.Group());
+    __privateGet(this, _nodesGroup).setName("__graph_nodes__");
+    scene.add(__privateGet(this, _nodesGroup));
+    const nodes = saved.elements.filter((e) => {
+      const def = __privateGet(this, _types).get(e.typeName);
+      return def?.role === "node";
+    });
+    const edges = saved.elements.filter((e) => {
+      const def = __privateGet(this, _types).get(e.typeName);
+      return def?.role === "edge";
+    });
+    this.batch(() => {
+      for (const elem of [...nodes, ...edges]) {
+        const def = __privateGet(this, _types).get(elem.typeName);
+        if (!def) {
+          console.warn(`[rendx-graph-plugin] Cannot restore element: type "${elem.typeName}" not registered`);
+          continue;
+        }
+        this.add(elem.typeName, elem.data, { layer: elem.layer, deps: elem.deps });
+      }
+    });
+  }
+  // ── 类型注册 ──
+  register(name, def) {
+    __privateGet(this, _types).set(name, def);
+  }
+  // ── CRUD ──
+  add(type, data, options) {
+    const def = __privateGet(this, _types).get(type);
+    if (!def) throw new Error(`Unknown element type: "${type}"`);
+    const id = data.id;
+    if (__privateGet(this, _elements).has(id)) throw new Error(`Element "${id}" already exists`);
+    let layer;
+    let deps;
+    if (def.role === "edge") {
+      layer = options?.layer ?? "edges";
+      const edgeData = data;
+      deps = options?.deps ?? [edgeData.source, edgeData.target];
+    } else {
+      layer = options?.layer ?? "nodes";
+      deps = options?.deps ?? [];
+    }
+    const el = new ElementImpl(id, type, def, data, this, layer, deps, (elId) => this.notifyUpdate(elId));
+    const targetGroup = layer === "edges" ? __privateGet(this, _edgesGroup) : __privateGet(this, _nodesGroup);
+    targetGroup.add(el.group);
+    __privateGet(this, _elements).set(id, el);
+    for (const depId of deps) {
+      if (!__privateGet(this, _dependents).has(depId)) {
+        __privateGet(this, _dependents).set(depId, /* @__PURE__ */ new Set());
+      }
+      __privateGet(this, _dependents).get(depId).add(id);
+    }
+    if (!__privateGet(this, _batching)) {
+      __privateMethod(this, _GraphPlugin_instances, syncState_fn).call(this);
+      __privateGet(this, _app).bus.emit("graph:added", el);
+    } else {
+      __privateSet(this, _batchAdded, true);
+    }
+    return el;
+  }
+  remove(id) {
+    const el = __privateGet(this, _elements).get(id);
+    if (!el) return false;
+    for (const depId of el.deps) {
+      const set = __privateGet(this, _dependents).get(depId);
+      if (set) {
+        set.delete(id);
+        if (set.size === 0) __privateGet(this, _dependents).delete(depId);
+      }
+    }
+    const parent = el.group.parent;
+    if (parent) {
+      parent.remove(el.group);
+    }
+    el.dispose();
+    __privateGet(this, _elements).delete(id);
+    if (!__privateGet(this, _batching)) {
+      __privateMethod(this, _GraphPlugin_instances, syncState_fn).call(this);
+      __privateGet(this, _app).bus.emit("graph:removed", id);
+    } else {
+      __privateSet(this, _batchRemoved, true);
+    }
+    return true;
+  }
+  // ── GraphQuery 实现 ──
+  get(id) {
+    return __privateGet(this, _elements).get(id);
+  }
+  has(id) {
+    return __privateGet(this, _elements).has(id);
+  }
+  get count() {
+    return __privateGet(this, _elements).size;
+  }
+  getIds() {
+    return [...__privateGet(this, _elements).keys()];
+  }
+  getAll() {
+    return [...__privateGet(this, _elements).values()];
+  }
+  getNodes() {
+    return [...__privateGet(this, _elements).values()].filter((el) => el.role === "node");
+  }
+  getEdges() {
+    return [...__privateGet(this, _elements).values()].filter((el) => el.role === "edge");
+  }
+  getEdgesOf(nodeId) {
+    return [...__privateGet(this, _elements).values()].filter((el) => {
+      if (el.role !== "edge") return false;
+      const data = el.data;
+      return data.source === nodeId || data.target === nodeId;
+    });
+  }
+  // ── 批量操作 ──
+  batch(fn) {
+    __privateSet(this, _batching, true);
+    __privateSet(this, _batchAdded, false);
+    __privateSet(this, _batchRemoved, false);
+    try {
+      fn();
+    } finally {
+      __privateSet(this, _batching, false);
+      __privateMethod(this, _GraphPlugin_instances, syncState_fn).call(this);
+      if (__privateGet(this, _batchAdded)) {
+        __privateGet(this, _app).bus.emit("graph:added");
+      }
+      if (__privateGet(this, _batchRemoved)) {
+        __privateGet(this, _app).bus.emit("graph:removed");
+      }
+    }
+  }
+  /**
+   * 通知 graph 某个元素已被更新（由 ElementImpl.update 调用的外部入口）。
+   * 这通过在 add 时对 ElementImpl 进行 monkey-patch 来实现。
+   */
+  notifyUpdate(id) {
+    __privateMethod(this, _GraphPlugin_instances, triggerDependents_fn).call(this, id);
+  }
+};
+_app = new WeakMap();
+_types = new WeakMap();
+_elements = new WeakMap();
+_dependents = new WeakMap();
+_batching = new WeakMap();
+_batchAdded = new WeakMap();
+_batchRemoved = new WeakMap();
+_edgesGroup = new WeakMap();
+_nodesGroup = new WeakMap();
+_GraphPlugin_instances = new WeakSet();
+/**
+ * 更新元素并触发依赖链。
+ * 当外部调用 el.update() 时，GraphPlugin 监听不到，所以通过此内部路由。
+ * 但当前设计中 el.update() 直接在 ElementImpl 中执行。
+ * 依赖触发通过 add() 时注册的追踪机制实现。
+ */
+triggerDependents_fn = function(id) {
+  const deps = __privateGet(this, _dependents).get(id);
+  if (!deps) return;
+  for (const depId of deps) {
+    const depEl = __privateGet(this, _elements).get(depId);
+    if (depEl) {
+      depEl.update({});
+    }
+  }
+};
+// ── internal ──
+syncState_fn = function() {
+  __privateGet(this, _app).setState("graph:elements", this.getIds());
+};
+function graphPlugin() {
+  return new GraphPlugin();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ElementImpl,
+  GraphPlugin,
+  createEdge,
+  createNode,
+  graphPlugin
+});

package/dist/main.d.cts

@@ -0,0 +1,174 @@
+import { Group, Plugin, App } from 'rendx-engine';
+
+/** Node 基础字段 */
+interface NodeBase {
+    id: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+}
+/** Edge 基础字段 */
+interface EdgeBase {
+    id: string;
+    source: string;
+    target: string;
+}
+/** Node render fn 接收的上下文 */
+interface NodeContext {
+    group: Group;
+    width: number;
+    height: number;
+    onCleanup: (fn: () => void) => void;
+}
+/** Edge render fn 接收的上下文 */
+interface EdgeContext {
+    group: Group;
+    source: Element<NodeBase> | undefined;
+    target: Element<NodeBase> | undefined;
+    onCleanup: (fn: () => void) => void;
+}
+type NodeRenderFn<T extends NodeBase = NodeBase> = (ctx: NodeContext, data: T & NodeBase, graph: GraphQuery) => void;
+type EdgeRenderFn<T extends EdgeBase = EdgeBase> = (ctx: EdgeContext, data: T & EdgeBase, graph: GraphQuery) => void;
+interface NodeDef<T extends NodeBase = NodeBase> {
+    __element_def__: true;
+    role: 'node';
+    render: NodeRenderFn<T>;
+}
+interface EdgeDef<T extends EdgeBase = EdgeBase> {
+    __element_def__: true;
+    role: 'edge';
+    render: EdgeRenderFn<T>;
+}
+type ElementDef = NodeDef | EdgeDef;
+interface Element<T = Record<string, unknown>> {
+    readonly id: string;
+    readonly role: 'node' | 'edge';
+    readonly group: Group;
+    readonly data: T & (NodeBase | EdgeBase);
+    readonly mounted: boolean;
+    readonly layer: string;
+    readonly deps: string[];
+    update(patch: Partial<T>): void;
+    dispose(): void;
+}
+interface GraphQuery {
+    get<T = Record<string, unknown>>(id: string): Element<T> | undefined;
+    has(id: string): boolean;
+    count: number;
+    getIds(): string[];
+    getAll(): Element[];
+    getNodes(): Element<NodeBase>[];
+    getEdges(): Element<EdgeBase>[];
+    getEdgesOf(nodeId: string): Element<EdgeBase>[];
+}
+
+/**
+ * 定义一个 Node 类型的元素。
+ *
+ * Node 是有位置 (x, y) 的实体，render fn 接收 NodeContext（group + width/height）。
+ * 框架会自动为 Node 设置 group.translate(x, y)，仅位移变化时跳过子树重建。
+ */
+declare function createNode<T extends NodeBase = NodeBase>(render: NodeRenderFn<T>): NodeDef<T>;
+/**
+ * 定义一个 Edge 类型的元素。
+ *
+ * Edge 连接两个 Node（source → target），render fn 接收 EdgeContext（group + source/target 实例）。
+ * 框架自动从 source/target 派生 deps 和 layer='edges'。
+ * Edge 的 group 不设置 translate — 由 render fn 自行计算坐标。
+ */
+declare function createEdge<T extends EdgeBase = EdgeBase>(render: EdgeRenderFn<T>): EdgeDef<T>;
+
+/**
+ * ElementImpl — 元素运行时实例。
+ *
+ * - Node: translate(x, y)，仅位移变化时 skip rebuild
+ * - Edge: 不 translate，render 时自动注入 source/target
+ */
+declare class ElementImpl<T = Record<string, unknown>> implements Element<T> {
+    #private;
+    readonly id: string;
+    readonly role: 'node' | 'edge';
+    readonly group: Group;
+    readonly layer: string;
+    readonly deps: string[];
+    /** 创建时使用的类型名称（对应 register 的 name），用于序列化 */
+    readonly typeName: string;
+    constructor(id: string, typeName: string, def: ElementDef, data: T & (NodeBase | EdgeBase), graph: GraphQuery, layer: string, deps: string[], onUpdate?: (id: string) => void);
+    get data(): T & (NodeBase | EdgeBase);
+    get mounted(): boolean;
+    /**
+     * 部分更新数据。
+     * - id 不可变
+     * - Node: 仅 x/y 变化 → translate only（不重建子树）
+     * - Edge: source/target 变化时忽略（deps 已静态绑定）
+     */
+    update(patch: Partial<T>): void;
+    dispose(): void;
+}
+
+/**
+ * GraphPlugin — 元素生命周期管理器。
+ *
+ * 核心职责:
+ * 1. 注册元素类型定义 (register)
+ * 2. 增删查改元素实例 (add / remove / get / update)
+ * 3. 自动分层: Node → 'nodes' Group, Edge → 'edges' Group
+ * 4. 自动依赖: Edge 的 deps 从 source/target 自动派生
+ * 5. 依赖追踪: 被依赖元素更新时自动重绘依赖方
+ * 6. Graph 查询: getNodes / getEdges / getEdgesOf
+ */
+declare class GraphPlugin implements Plugin, GraphQuery {
+    #private;
+    readonly name = "graph";
+    readonly state: {
+        key: string;
+        description: string;
+        initial: string[];
+    }[];
+    get edgesGroup(): Group;
+    get nodesGroup(): Group;
+    install(app: App): void;
+    dispose(): void;
+    /**
+     * 序列化所有元素实例的数据（供 history-plugin 等消费）。
+     * 类型定义（render fn）无法序列化，需要应用层在恢复时保证 register 已调用。
+     */
+    serialize(): Record<string, unknown>;
+    /**
+     * 从序列化数据恢复所有元素。
+     *
+     * 流程：
+     * 1. 清理当前所有元素和依赖追踪
+     * 2. 从恢复后的场景中移除 restoreFromJSON 反序列化出的静态 Group（它们缺少 ElementImpl 追踪）
+     * 3. 重建 edges/nodes 分组
+     * 4. 使用已注册的类型定义重新创建所有元素（会重新执行 render fn）
+     */
+    deserialize(data: Record<string, unknown>): void;
+    register(name: string, def: ElementDef): void;
+    add<T>(type: string, data: T & (NodeBase | EdgeBase), options?: {
+        layer?: string;
+        deps?: string[];
+    }): Element<T>;
+    remove(id: string): boolean;
+    get<T = Record<string, unknown>>(id: string): Element<T> | undefined;
+    has(id: string): boolean;
+    get count(): number;
+    getIds(): string[];
+    getAll(): Element[];
+    getNodes(): Element<NodeBase>[];
+    getEdges(): Element<EdgeBase>[];
+    getEdgesOf(nodeId: string): Element<EdgeBase>[];
+    batch(fn: () => void): void;
+    /**
+     * 通知 graph 某个元素已被更新（由 ElementImpl.update 调用的外部入口）。
+     * 这通过在 add 时对 ElementImpl 进行 monkey-patch 来实现。
+     */
+    notifyUpdate(id: string): void;
+}
+/**
+ * 创建 GraphPlugin 实例。
+ */
+declare function graphPlugin(): GraphPlugin;
+
+export { type EdgeBase, type EdgeContext, type EdgeDef, type EdgeRenderFn, type Element, type ElementDef, ElementImpl, GraphPlugin, type GraphQuery, type NodeBase, type NodeContext, type NodeDef, type NodeRenderFn, createEdge, createNode, graphPlugin };

package/dist/main.d.ts

@@ -0,0 +1,174 @@
+import { Group, Plugin, App } from 'rendx-engine';
+
+/** Node 基础字段 */
+interface NodeBase {
+    id: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+}
+/** Edge 基础字段 */
+interface EdgeBase {
+    id: string;
+    source: string;
+    target: string;
+}
+/** Node render fn 接收的上下文 */
+interface NodeContext {
+    group: Group;
+    width: number;
+    height: number;
+    onCleanup: (fn: () => void) => void;
+}
+/** Edge render fn 接收的上下文 */
+interface EdgeContext {
+    group: Group;
+    source: Element<NodeBase> | undefined;
+    target: Element<NodeBase> | undefined;
+    onCleanup: (fn: () => void) => void;
+}
+type NodeRenderFn<T extends NodeBase = NodeBase> = (ctx: NodeContext, data: T & NodeBase, graph: GraphQuery) => void;
+type EdgeRenderFn<T extends EdgeBase = EdgeBase> = (ctx: EdgeContext, data: T & EdgeBase, graph: GraphQuery) => void;
+interface NodeDef<T extends NodeBase = NodeBase> {
+    __element_def__: true;
+    role: 'node';
+    render: NodeRenderFn<T>;
+}
+interface EdgeDef<T extends EdgeBase = EdgeBase> {
+    __element_def__: true;
+    role: 'edge';
+    render: EdgeRenderFn<T>;
+}
+type ElementDef = NodeDef | EdgeDef;
+interface Element<T = Record<string, unknown>> {
+    readonly id: string;
+    readonly role: 'node' | 'edge';
+    readonly group: Group;
+    readonly data: T & (NodeBase | EdgeBase);
+    readonly mounted: boolean;
+    readonly layer: string;
+    readonly deps: string[];
+    update(patch: Partial<T>): void;
+    dispose(): void;
+}
+interface GraphQuery {
+    get<T = Record<string, unknown>>(id: string): Element<T> | undefined;
+    has(id: string): boolean;
+    count: number;
+    getIds(): string[];
+    getAll(): Element[];
+    getNodes(): Element<NodeBase>[];
+    getEdges(): Element<EdgeBase>[];
+    getEdgesOf(nodeId: string): Element<EdgeBase>[];
+}
+
+/**
+ * 定义一个 Node 类型的元素。
+ *
+ * Node 是有位置 (x, y) 的实体，render fn 接收 NodeContext（group + width/height）。
+ * 框架会自动为 Node 设置 group.translate(x, y)，仅位移变化时跳过子树重建。
+ */
+declare function createNode<T extends NodeBase = NodeBase>(render: NodeRenderFn<T>): NodeDef<T>;
+/**
+ * 定义一个 Edge 类型的元素。
+ *
+ * Edge 连接两个 Node（source → target），render fn 接收 EdgeContext（group + source/target 实例）。
+ * 框架自动从 source/target 派生 deps 和 layer='edges'。
+ * Edge 的 group 不设置 translate — 由 render fn 自行计算坐标。
+ */
+declare function createEdge<T extends EdgeBase = EdgeBase>(render: EdgeRenderFn<T>): EdgeDef<T>;
+
+/**
+ * ElementImpl — 元素运行时实例。
+ *
+ * - Node: translate(x, y)，仅位移变化时 skip rebuild
+ * - Edge: 不 translate，render 时自动注入 source/target
+ */
+declare class ElementImpl<T = Record<string, unknown>> implements Element<T> {
+    #private;
+    readonly id: string;
+    readonly role: 'node' | 'edge';
+    readonly group: Group;
+    readonly layer: string;
+    readonly deps: string[];
+    /** 创建时使用的类型名称（对应 register 的 name），用于序列化 */
+    readonly typeName: string;
+    constructor(id: string, typeName: string, def: ElementDef, data: T & (NodeBase | EdgeBase), graph: GraphQuery, layer: string, deps: string[], onUpdate?: (id: string) => void);
+    get data(): T & (NodeBase | EdgeBase);
+    get mounted(): boolean;
+    /**
+     * 部分更新数据。
+     * - id 不可变
+     * - Node: 仅 x/y 变化 → translate only（不重建子树）
+     * - Edge: source/target 变化时忽略（deps 已静态绑定）
+     */
+    update(patch: Partial<T>): void;
+    dispose(): void;
+}
+
+/**
+ * GraphPlugin — 元素生命周期管理器。
+ *
+ * 核心职责:
+ * 1. 注册元素类型定义 (register)
+ * 2. 增删查改元素实例 (add / remove / get / update)
+ * 3. 自动分层: Node → 'nodes' Group, Edge → 'edges' Group
+ * 4. 自动依赖: Edge 的 deps 从 source/target 自动派生
+ * 5. 依赖追踪: 被依赖元素更新时自动重绘依赖方
+ * 6. Graph 查询: getNodes / getEdges / getEdgesOf
+ */
+declare class GraphPlugin implements Plugin, GraphQuery {
+    #private;
+    readonly name = "graph";
+    readonly state: {
+        key: string;
+        description: string;
+        initial: string[];
+    }[];
+    get edgesGroup(): Group;
+    get nodesGroup(): Group;
+    install(app: App): void;
+    dispose(): void;
+    /**
+     * 序列化所有元素实例的数据（供 history-plugin 等消费）。
+     * 类型定义（render fn）无法序列化，需要应用层在恢复时保证 register 已调用。
+     */
+    serialize(): Record<string, unknown>;
+    /**
+     * 从序列化数据恢复所有元素。
+     *
+     * 流程：
+     * 1. 清理当前所有元素和依赖追踪
+     * 2. 从恢复后的场景中移除 restoreFromJSON 反序列化出的静态 Group（它们缺少 ElementImpl 追踪）
+     * 3. 重建 edges/nodes 分组
+     * 4. 使用已注册的类型定义重新创建所有元素（会重新执行 render fn）
+     */
+    deserialize(data: Record<string, unknown>): void;
+    register(name: string, def: ElementDef): void;
+    add<T>(type: string, data: T & (NodeBase | EdgeBase), options?: {
+        layer?: string;
+        deps?: string[];
+    }): Element<T>;
+    remove(id: string): boolean;
+    get<T = Record<string, unknown>>(id: string): Element<T> | undefined;
+    has(id: string): boolean;
+    get count(): number;
+    getIds(): string[];
+    getAll(): Element[];
+    getNodes(): Element<NodeBase>[];
+    getEdges(): Element<EdgeBase>[];
+    getEdgesOf(nodeId: string): Element<EdgeBase>[];
+    batch(fn: () => void): void;
+    /**
+     * 通知 graph 某个元素已被更新（由 ElementImpl.update 调用的外部入口）。
+     * 这通过在 add 时对 ElementImpl 进行 monkey-patch 来实现。
+     */
+    notifyUpdate(id: string): void;
+}
+/**
+ * 创建 GraphPlugin 实例。
+ */
+declare function graphPlugin(): GraphPlugin;
+
+export { type EdgeBase, type EdgeContext, type EdgeDef, type EdgeRenderFn, type Element, type ElementDef, ElementImpl, GraphPlugin, type GraphQuery, type NodeBase, type NodeContext, type NodeDef, type NodeRenderFn, createEdge, createNode, graphPlugin };

package/dist/main.js

@@ -0,0 +1,432 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/create.ts
+function createNode(render) {
+  return {
+    __element_def__: true,
+    role: "node",
+    render
+  };
+}
+function createEdge(render) {
+  return {
+    __element_def__: true,
+    role: "edge",
+    render
+  };
+}
+
+// src/element.ts
+import { Group } from "rendx-engine";
+var _data, _def, _graph, _cleanup, _mounted, _onUpdate, _ElementImpl_instances, render_fn, teardown_fn;
+var ElementImpl = class {
+  constructor(id, typeName, def, data, graph, layer, deps, onUpdate) {
+    __privateAdd(this, _ElementImpl_instances);
+    __privateAdd(this, _data);
+    __privateAdd(this, _def);
+    __privateAdd(this, _graph);
+    __privateAdd(this, _cleanup, null);
+    __privateAdd(this, _mounted, false);
+    __privateAdd(this, _onUpdate);
+    this.id = id;
+    this.typeName = typeName;
+    this.role = def.role;
+    __privateSet(this, _def, def);
+    __privateSet(this, _data, { ...data });
+    __privateSet(this, _graph, graph);
+    this.layer = layer;
+    this.deps = deps;
+    __privateSet(this, _onUpdate, onUpdate ?? null);
+    this.group = new Group();
+    this.group.setName(id);
+    if (def.role === "node") {
+      const nd = __privateGet(this, _data);
+      this.group.translate(nd.x, nd.y);
+    }
+    __privateMethod(this, _ElementImpl_instances, render_fn).call(this);
+    __privateSet(this, _mounted, true);
+  }
+  get data() {
+    return __privateGet(this, _data);
+  }
+  get mounted() {
+    return __privateGet(this, _mounted);
+  }
+  /**
+   * 部分更新数据。
+   * - id 不可变
+   * - Node: 仅 x/y 变化 → translate only（不重建子树）
+   * - Edge: source/target 变化时忽略（deps 已静态绑定）
+   */
+  update(patch) {
+    var _a, _b;
+    if ("id" in patch) {
+      delete patch.id;
+    }
+    const merged = { ...__privateGet(this, _data), ...patch };
+    if (this.role === "node") {
+      const oldData = __privateGet(this, _data);
+      const newData = merged;
+      const positionOnly = isPositionOnlyChange(oldData, newData, patch);
+      __privateSet(this, _data, merged);
+      if (positionOnly) {
+        this.group.translate(newData.x, newData.y);
+        (_a = __privateGet(this, _onUpdate)) == null ? void 0 : _a.call(this, this.id);
+        return;
+      }
+      if (newData.x !== oldData.x || newData.y !== oldData.y) {
+        this.group.translate(newData.x, newData.y);
+      }
+    } else {
+      __privateSet(this, _data, merged);
+    }
+    __privateMethod(this, _ElementImpl_instances, teardown_fn).call(this);
+    this.group.removeChildren();
+    __privateMethod(this, _ElementImpl_instances, render_fn).call(this);
+    (_b = __privateGet(this, _onUpdate)) == null ? void 0 : _b.call(this, this.id);
+  }
+  dispose() {
+    __privateMethod(this, _ElementImpl_instances, teardown_fn).call(this);
+    this.group.removeChildren();
+    __privateSet(this, _mounted, false);
+  }
+};
+_data = new WeakMap();
+_def = new WeakMap();
+_graph = new WeakMap();
+_cleanup = new WeakMap();
+_mounted = new WeakMap();
+_onUpdate = new WeakMap();
+_ElementImpl_instances = new WeakSet();
+// ── internal ──
+render_fn = function() {
+  let cleanup = null;
+  const onCleanup = (fn) => {
+    cleanup = fn;
+  };
+  if (__privateGet(this, _def).role === "node") {
+    const nd = __privateGet(this, _data);
+    const ctx = {
+      group: this.group,
+      width: nd.width ?? 0,
+      height: nd.height ?? 0,
+      onCleanup
+    };
+    __privateGet(this, _def).render(ctx, nd, __privateGet(this, _graph));
+  } else {
+    const ed = __privateGet(this, _data);
+    const ctx = {
+      group: this.group,
+      source: __privateGet(this, _graph).get(ed.source),
+      target: __privateGet(this, _graph).get(ed.target),
+      onCleanup
+    };
+    __privateGet(this, _def).render(ctx, ed, __privateGet(this, _graph));
+  }
+  __privateSet(this, _cleanup, cleanup);
+};
+teardown_fn = function() {
+  if (__privateGet(this, _cleanup)) {
+    __privateGet(this, _cleanup).call(this);
+    __privateSet(this, _cleanup, null);
+  }
+};
+function isPositionOnlyChange(oldData, newData, patch) {
+  const keys = Object.keys(patch);
+  if (keys.length === 0) return false;
+  for (const key of keys) {
+    if (key === "x" || key === "y") continue;
+    if (oldData[key] !== newData[key]) {
+      return false;
+    }
+  }
+  return oldData.x !== newData.x || oldData.y !== newData.y;
+}
+
+// src/graph.ts
+import { Group as Group2 } from "rendx-engine";
+var _app, _types, _elements, _dependents, _batching, _batchAdded, _batchRemoved, _edgesGroup, _nodesGroup, _GraphPlugin_instances, triggerDependents_fn, syncState_fn;
+var GraphPlugin = class {
+  constructor() {
+    __privateAdd(this, _GraphPlugin_instances);
+    this.name = "graph";
+    this.state = [
+      {
+        key: "graph:elements",
+        description: "All element IDs in the graph",
+        initial: []
+      }
+    ];
+    __privateAdd(this, _app);
+    __privateAdd(this, _types, /* @__PURE__ */ new Map());
+    __privateAdd(this, _elements, /* @__PURE__ */ new Map());
+    /** node → 依赖它的元素 id 列表 */
+    __privateAdd(this, _dependents, /* @__PURE__ */ new Map());
+    /** 批量操作标志 */
+    __privateAdd(this, _batching, false);
+    __privateAdd(this, _batchAdded, false);
+    __privateAdd(this, _batchRemoved, false);
+    /** 场景分组 */
+    __privateAdd(this, _edgesGroup);
+    __privateAdd(this, _nodesGroup);
+  }
+  get edgesGroup() {
+    return __privateGet(this, _edgesGroup);
+  }
+  get nodesGroup() {
+    return __privateGet(this, _nodesGroup);
+  }
+  // ── Plugin lifecycle ──
+  install(app) {
+    __privateSet(this, _app, app);
+    __privateSet(this, _edgesGroup, new Group2());
+    __privateGet(this, _edgesGroup).setName("__graph_edges__");
+    app.scene.add(__privateGet(this, _edgesGroup));
+    __privateSet(this, _nodesGroup, new Group2());
+    __privateGet(this, _nodesGroup).setName("__graph_nodes__");
+    app.scene.add(__privateGet(this, _nodesGroup));
+  }
+  dispose() {
+    for (const el of __privateGet(this, _elements).values()) {
+      el.dispose();
+    }
+    __privateGet(this, _elements).clear();
+    __privateGet(this, _dependents).clear();
+    __privateGet(this, _types).clear();
+  }
+  // ── 序列化 / 反序列化 ──
+  /**
+   * 序列化所有元素实例的数据（供 history-plugin 等消费）。
+   * 类型定义（render fn）无法序列化，需要应用层在恢复时保证 register 已调用。
+   */
+  serialize() {
+    const elements = [];
+    for (const el of __privateGet(this, _elements).values()) {
+      elements.push({
+        typeName: el.typeName,
+        data: { ...el.data },
+        layer: el.layer,
+        deps: [...el.deps]
+      });
+    }
+    return { elements };
+  }
+  /**
+   * 从序列化数据恢复所有元素。
+   *
+   * 流程：
+   * 1. 清理当前所有元素和依赖追踪
+   * 2. 从恢复后的场景中移除 restoreFromJSON 反序列化出的静态 Group（它们缺少 ElementImpl 追踪）
+   * 3. 重建 edges/nodes 分组
+   * 4. 使用已注册的类型定义重新创建所有元素（会重新执行 render fn）
+   */
+  deserialize(data) {
+    const saved = data;
+    if (!saved.elements || !Array.isArray(saved.elements)) return;
+    for (const el of __privateGet(this, _elements).values()) {
+      el.dispose();
+    }
+    __privateGet(this, _elements).clear();
+    __privateGet(this, _dependents).clear();
+    const scene = __privateGet(this, _app).scene;
+    for (const layer of scene.layers) {
+      if (layer.isEventLayer) continue;
+      const toRemove = [];
+      for (const child of layer.children) {
+        if (child.name === "__graph_edges__" || child.name === "__graph_nodes__") {
+          toRemove.push(child);
+        }
+      }
+      for (const g of toRemove) {
+        layer.remove(g);
+      }
+    }
+    __privateSet(this, _edgesGroup, new Group2());
+    __privateGet(this, _edgesGroup).setName("__graph_edges__");
+    scene.add(__privateGet(this, _edgesGroup));
+    __privateSet(this, _nodesGroup, new Group2());
+    __privateGet(this, _nodesGroup).setName("__graph_nodes__");
+    scene.add(__privateGet(this, _nodesGroup));
+    const nodes = saved.elements.filter((e) => {
+      const def = __privateGet(this, _types).get(e.typeName);
+      return def?.role === "node";
+    });
+    const edges = saved.elements.filter((e) => {
+      const def = __privateGet(this, _types).get(e.typeName);
+      return def?.role === "edge";
+    });
+    this.batch(() => {
+      for (const elem of [...nodes, ...edges]) {
+        const def = __privateGet(this, _types).get(elem.typeName);
+        if (!def) {
+          console.warn(`[rendx-graph-plugin] Cannot restore element: type "${elem.typeName}" not registered`);
+          continue;
+        }
+        this.add(elem.typeName, elem.data, { layer: elem.layer, deps: elem.deps });
+      }
+    });
+  }
+  // ── 类型注册 ──
+  register(name, def) {
+    __privateGet(this, _types).set(name, def);
+  }
+  // ── CRUD ──
+  add(type, data, options) {
+    const def = __privateGet(this, _types).get(type);
+    if (!def) throw new Error(`Unknown element type: "${type}"`);
+    const id = data.id;
+    if (__privateGet(this, _elements).has(id)) throw new Error(`Element "${id}" already exists`);
+    let layer;
+    let deps;
+    if (def.role === "edge") {
+      layer = options?.layer ?? "edges";
+      const edgeData = data;
+      deps = options?.deps ?? [edgeData.source, edgeData.target];
+    } else {
+      layer = options?.layer ?? "nodes";
+      deps = options?.deps ?? [];
+    }
+    const el = new ElementImpl(id, type, def, data, this, layer, deps, (elId) => this.notifyUpdate(elId));
+    const targetGroup = layer === "edges" ? __privateGet(this, _edgesGroup) : __privateGet(this, _nodesGroup);
+    targetGroup.add(el.group);
+    __privateGet(this, _elements).set(id, el);
+    for (const depId of deps) {
+      if (!__privateGet(this, _dependents).has(depId)) {
+        __privateGet(this, _dependents).set(depId, /* @__PURE__ */ new Set());
+      }
+      __privateGet(this, _dependents).get(depId).add(id);
+    }
+    if (!__privateGet(this, _batching)) {
+      __privateMethod(this, _GraphPlugin_instances, syncState_fn).call(this);
+      __privateGet(this, _app).bus.emit("graph:added", el);
+    } else {
+      __privateSet(this, _batchAdded, true);
+    }
+    return el;
+  }
+  remove(id) {
+    const el = __privateGet(this, _elements).get(id);
+    if (!el) return false;
+    for (const depId of el.deps) {
+      const set = __privateGet(this, _dependents).get(depId);
+      if (set) {
+        set.delete(id);
+        if (set.size === 0) __privateGet(this, _dependents).delete(depId);
+      }
+    }
+    const parent = el.group.parent;
+    if (parent) {
+      parent.remove(el.group);
+    }
+    el.dispose();
+    __privateGet(this, _elements).delete(id);
+    if (!__privateGet(this, _batching)) {
+      __privateMethod(this, _GraphPlugin_instances, syncState_fn).call(this);
+      __privateGet(this, _app).bus.emit("graph:removed", id);
+    } else {
+      __privateSet(this, _batchRemoved, true);
+    }
+    return true;
+  }
+  // ── GraphQuery 实现 ──
+  get(id) {
+    return __privateGet(this, _elements).get(id);
+  }
+  has(id) {
+    return __privateGet(this, _elements).has(id);
+  }
+  get count() {
+    return __privateGet(this, _elements).size;
+  }
+  getIds() {
+    return [...__privateGet(this, _elements).keys()];
+  }
+  getAll() {
+    return [...__privateGet(this, _elements).values()];
+  }
+  getNodes() {
+    return [...__privateGet(this, _elements).values()].filter((el) => el.role === "node");
+  }
+  getEdges() {
+    return [...__privateGet(this, _elements).values()].filter((el) => el.role === "edge");
+  }
+  getEdgesOf(nodeId) {
+    return [...__privateGet(this, _elements).values()].filter((el) => {
+      if (el.role !== "edge") return false;
+      const data = el.data;
+      return data.source === nodeId || data.target === nodeId;
+    });
+  }
+  // ── 批量操作 ──
+  batch(fn) {
+    __privateSet(this, _batching, true);
+    __privateSet(this, _batchAdded, false);
+    __privateSet(this, _batchRemoved, false);
+    try {
+      fn();
+    } finally {
+      __privateSet(this, _batching, false);
+      __privateMethod(this, _GraphPlugin_instances, syncState_fn).call(this);
+      if (__privateGet(this, _batchAdded)) {
+        __privateGet(this, _app).bus.emit("graph:added");
+      }
+      if (__privateGet(this, _batchRemoved)) {
+        __privateGet(this, _app).bus.emit("graph:removed");
+      }
+    }
+  }
+  /**
+   * 通知 graph 某个元素已被更新（由 ElementImpl.update 调用的外部入口）。
+   * 这通过在 add 时对 ElementImpl 进行 monkey-patch 来实现。
+   */
+  notifyUpdate(id) {
+    __privateMethod(this, _GraphPlugin_instances, triggerDependents_fn).call(this, id);
+  }
+};
+_app = new WeakMap();
+_types = new WeakMap();
+_elements = new WeakMap();
+_dependents = new WeakMap();
+_batching = new WeakMap();
+_batchAdded = new WeakMap();
+_batchRemoved = new WeakMap();
+_edgesGroup = new WeakMap();
+_nodesGroup = new WeakMap();
+_GraphPlugin_instances = new WeakSet();
+/**
+ * 更新元素并触发依赖链。
+ * 当外部调用 el.update() 时，GraphPlugin 监听不到，所以通过此内部路由。
+ * 但当前设计中 el.update() 直接在 ElementImpl 中执行。
+ * 依赖触发通过 add() 时注册的追踪机制实现。
+ */
+triggerDependents_fn = function(id) {
+  const deps = __privateGet(this, _dependents).get(id);
+  if (!deps) return;
+  for (const depId of deps) {
+    const depEl = __privateGet(this, _elements).get(depId);
+    if (depEl) {
+      depEl.update({});
+    }
+  }
+};
+// ── internal ──
+syncState_fn = function() {
+  __privateGet(this, _app).setState("graph:elements", this.getIds());
+};
+function graphPlugin() {
+  return new GraphPlugin();
+}
+export {
+  ElementImpl,
+  GraphPlugin,
+  createEdge,
+  createNode,
+  graphPlugin
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "rendx-graph-plugin",
+  "version": "0.1.0",
+  "description": "Graph element management plugin for Rendx engine — node/edge CRUD, dependency tracking, and custom type registry",
+  "license": "MIT",
+  "author": "wei.liang (https://github.com/weiliang0121)",
+  "type": "module",
+  "keywords": [
+    "rendx",
+    "2d",
+    "canvas",
+    "graph",
+    "element",
+    "node",
+    "plugin"
+  ],
+  "homepage": "https://weiliang0121.github.io/rendx/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/weiliang0121/rendx.git",
+    "directory": "packages/graph-plugin"
+  },
+  "main": "dist/main.cjs",
+  "module": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js",
+      "require": "./dist/main.cjs"
+    }
+  },
+  "dependencies": {
+    "rendx-engine": "^0.3.0"
+  },
+  "devDependencies": {
+    "rendx-canvas": "^0.1.1",
+    "rendx-svg": "^0.1.1"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}