@deck.gl-community/graph-layers 9.1.0-beta.8 → 9.2.0-beta.2

package/dist/index.cjs

@@ -34,26 +34,33 @@ var __publicField = (obj, key, value) => {
 // dist/index.js
 var dist_exports = {};
 __export(dist_exports, {
+  D3DagLayout: () => D3DagLayout,
   D3ForceLayout: () => D3ForceLayout,
+  DEFAULT_GRAPH_LAYER_STYLESHEET: () => DEFAULT_GRAPH_LAYER_STYLESHEET,
   EDGE_DECORATOR_TYPE: () => EDGE_DECORATOR_TYPE,
+  EDGE_STATE: () => EDGE_STATE,
   EDGE_TYPE: () => EDGE_TYPE,
   Edge: () => Edge,
   EdgeLayer: () => EdgeLayer,
+  ForceMultiGraphLayout: () => ForceMultiGraphLayout,
   GPUForceLayout: () => GPUForceLayout,
   Graph: () => Graph,
   GraphEngine: () => GraphEngine,
   GraphLayer: () => GraphLayer,
   GraphLayout: () => GraphLayout,
+  GraphStyleEngine: () => GraphStyleEngine,
+  GraphStylesheetSchema: () => GraphStylesheetSchema,
+  HivePlotLayout: () => HivePlotLayout,
   JSONLoader: () => JSONLoader2,
+  LAYOUT_STATE: () => LAYOUT_STATE,
   MARKER_TYPE: () => MARKER_TYPE,
   NODE_STATE: () => NODE_STATE,
   NODE_TYPE: () => NODE_TYPE,
   Node: () => Node,
+  RadialLayout: () => RadialLayout,
   SimpleLayout: () => SimpleLayout,
+  StyleEngine: () => StyleEngine,
   ViewControlWidget: () => ViewControlWidget,
-  _HivePlotLayout: () => HivePlotLayout,
-  _MultigraphLayout: () => ForceMultiGraphLayout,
-  _RadialLayout: () => RadialLayout,
   createGraph: () => createGraph,
   loadSimpleJSONGraph: () => loadSimpleJSONGraph,
   log: () => log,
@@ -64,7 +71,18 @@ module.exports = __toCommonJS(dist_exports);
 // dist/utils/log.js
 var import_log = require("@probe.gl/log");
 var log = new import_log.Log({ id: "graph-layers" }).enable();
-log.log({ color: import_log.COLOR.CYAN }, "Initialize graph-layers logger.")();
+log.log({ color: import_log.COLOR.CYAN }, "Initialize graph-layers logger.");
+function invokeLogFunction(result) {
+  if (typeof result === "function") {
+    result();
+  }
+}
+function warn(message, ...args) {
+  invokeLogFunction(log.warn(message, ...args));
+}
+function error(message, ...args) {
+  invokeLogFunction(log.error(message, ...args));
+}
 
 // dist/core/cache.js
 var Cache = class {
@@ -211,7 +229,7 @@ var Graph = class extends EventTarget {
     const sourceNode = this.findNode(edge.getSourceNodeId());
     const targetNode = this.findNode(edge.getTargetNodeId());
     if (!sourceNode || !targetNode) {
-      log.warn(`Unable to add edge ${edge.id},  source or target node is missing.`)();
+      warn(`Unable to add edge ${edge.id},  source or target node is missing.`);
       return;
     }
     this._edgeMap[edge.getId()] = edge;
@@ -244,7 +262,7 @@ var Graph = class extends EventTarget {
   removeNode(nodeId) {
     const node = this.findNode(nodeId);
     if (!node) {
-      log.warn(`Unable to remove node ${nodeId} - doesn't exist`)();
+      warn(`Unable to remove node ${nodeId} - doesn't exist`);
       return;
     }
     node.getConnectedEdges().forEach((e) => {
@@ -276,7 +294,7 @@ var Graph = class extends EventTarget {
   removeEdge(edgeId) {
     const edge = this.findEdge(edgeId);
     if (!edge) {
-      log.warn(`Unable to remove edge ${edgeId} - doesn't exist`)();
+      warn(`Unable to remove edge ${edgeId} - doesn't exist`);
       return;
     }
     const sourceNode = this.findNode(edge.getSourceNodeId());
@@ -302,7 +320,7 @@ var Graph = class extends EventTarget {
   getConnectedEdges(nodeId) {
     const node = this.findNode(nodeId);
     if (!node) {
-      log.warn(`Unable to find node ${nodeId} - doesn't exist`)();
+      warn(`Unable to find node ${nodeId} - doesn't exist`);
       return [];
     }
     return node.getConnectedEdges();
@@ -315,7 +333,7 @@ var Graph = class extends EventTarget {
   getNodeSiblings(nodeId) {
     const node = this.findNode(nodeId);
     if (!node) {
-      log.warn(`Unable to find node ${nodeId} - doesn't exist`)();
+      warn(`Unable to find node ${nodeId} - doesn't exist`);
       return [];
     }
     return node.getSiblingIds().map((siblingNodeId) => this.findNode(siblingNodeId));
@@ -328,7 +346,7 @@ var Graph = class extends EventTarget {
   getDegree(nodeId) {
     const node = this.findNode(nodeId);
     if (!node) {
-      log.warn(`Unable to find node ${nodeId} - doesn't exist`)();
+      warn(`Unable to find node ${nodeId} - doesn't exist`);
       return 0;
     }
     return node.getDegree();
@@ -387,103 +405,6 @@ var Graph = class extends EventTarget {
   }
 };
 
-// dist/layers/common-layers/marker-layer/marker-list.js
-var MarkerList = {
-  "bell-filled": "bell-filled",
-  bell: "bell",
-  "bookmark-filled": "bookmark-filled",
-  bookmark: "bookmark",
-  "cd-filled": "cd-filled",
-  cd: "cd",
-  checkmark: "checkmark",
-  "circle-check-filled": "circle-check-filled",
-  "circle-check": "circle-check",
-  "circle-filled": "circle-filled",
-  "circle-i-filled": "circle-i-filled",
-  "circle-i": "circle-i",
-  "circle-minus-filled": "circle-minus-filled",
-  "circle-minus": "circle-minus",
-  "circle-plus-filled": "circle-plus-filled",
-  "circle-plus": "circle-plus",
-  "circle-questionmark-filled": "circle-questionmark-filled",
-  "circle-questionmark": "circle-questionmark",
-  "circle-slash-filled": "circle-slash-filled",
-  "circle-slash": "circle-slash",
-  "circle-x-filled": "circle-x-filled",
-  "circle-x": "circle-x",
-  circle: "circle",
-  "diamond-filled": "diamond-filled",
-  diamond: "diamond",
-  "flag-filled": "flag-filled",
-  flag: "flag",
-  gear: "gear",
-  "heart-filled": "heart-filled",
-  heart: "heart",
-  "location-marker-filled": "location-marker-filled",
-  "location-marker": "location-marker",
-  "octagonal-star-filled": "octagonal-star-filled",
-  "octagonal-star": "octagonal-star",
-  "person-filled": "person-filled",
-  person: "person",
-  "pin-filled": "pin-filled",
-  pin: "pin",
-  "plus-small": "plus-small",
-  plus: "plus",
-  "rectangle-filled": "rectangle-filled",
-  rectangle: "rectangle",
-  "star-filled": "star-filled",
-  star: "star",
-  "tag-filled": "tag-filled",
-  tag: "tag",
-  "thumb-down-filled": "thumb-down-filled",
-  "thumb-down": "thumb-down",
-  "thumb-up": "thumb-up",
-  "thumb_up-filled": "thumb_up-filled",
-  "triangle-down-filled": "triangle-down-filled",
-  "triangle-down": "triangle-down",
-  "triangle-left-filled": "triangle-left-filled",
-  "triangle-left": "triangle-left",
-  "triangle-right-filled": "triangle-right-filled",
-  "triangle-right": "triangle-right",
-  "triangle-up-filled": "triangle-up-filled",
-  "triangle-up": "triangle-up",
-  "x-small": "x-small",
-  x: "x"
-};
-
-// dist/core/constants.js
-var MARKER_TYPE = MarkerList;
-var NODE_STATE = {
-  DEFAULT: "default",
-  HOVER: "hover",
-  DRAGGING: "dragging",
-  SELECTED: "selected"
-};
-var EDGE_STATE = {
-  DEFAULT: "default",
-  HOVER: "hover",
-  DRAGGING: "dragging",
-  SELECTED: "selected"
-};
-var NODE_TYPE = {
-  CIRCLE: "CIRCLE",
-  RECTANGLE: "RECTANGLE",
-  ROUNDED_RECTANGLE: "ROUNDED_RECTANGLE",
-  PATH_ROUNDED_RECTANGLE: "PATH_ROUNDED_RECTANGLE",
-  ICON: "ICON",
-  LABEL: "LABEL",
-  MARKER: "MARKER"
-};
-var EDGE_TYPE = {
-  SPLINE_CURVE: "SPLINE_CURVE",
-  LINE: "LINE",
-  PATH: "PATH"
-};
-var EDGE_DECORATOR_TYPE = {
-  LABEL: "EDGE_LABEL",
-  FLOW: "FLOW"
-};
-
 // dist/graph/node.js
 var Node = class {
   id;
@@ -492,7 +413,7 @@ var Node = class {
   /** List edges. */
   _connectedEdges = {};
   /** Interaction state of the node. */
-  state = NODE_STATE.DEFAULT;
+  state = "default";
   /** Can the node be selected? */
   _selectable;
   /** Should the state of this node affect the state of the connected edges? */
@@ -602,14 +523,14 @@ var Node = class {
   }
   /**
    * Set node state
-   * @param state - one of NODE_STATE
+   * @param state - the new interaction state of the node
    */
   setState(state) {
     this.state = state;
   }
   /**
    * Get node state
-   * @returns state - one of NODE_STATE
+   * @returns state - the current interaction state of the node
    */
   getState() {
     return this.state;
@@ -668,7 +589,7 @@ var Edge = class {
   /** Nodes at either end of this edge. */
   _connectedNodes = {};
   /** Edge state. */
-  state = EDGE_STATE.DEFAULT;
+  state = "default";
   /**
    * The constructor
    * @param options.id - information about the edge
@@ -738,14 +659,14 @@ var Edge = class {
   }
   /**
    * Set edge state
-   * @param state - one of EDGE_STATE
+   * @param state - the new interaction state for the edge
    */
   setState(state) {
     this.state = state;
   }
   /**
    * Get edge state
-   * @returns state - one of EDGE_STATE
+   * @returns state - the current interaction state for the edge
    */
   getState() {
     return this.state;
@@ -795,32 +716,40 @@ var GraphEngine = class extends EventTarget {
   getGraphVersion = () => this._graph.version;
   getLayoutLastUpdate = () => this._layout.version;
   getLayoutState = () => this._layout.state;
+  getLayoutBounds = () => this._layout.getBounds();
   /** Operations on the graph */
   lockNodePosition = (node, x, y) => this._layout.lockNodePosition(node, x, y);
   unlockNodePosition = (node) => this._layout.unlockNodePosition(node);
   /**
    * @fires GraphEngine#onLayoutStart
    */
-  _onLayoutStart = () => {
-    this.dispatchEvent(new CustomEvent("onLayoutStart"));
+  _onLayoutStart = (event) => {
+    log.log(0, "GraphEngine: layout start")();
+    const detail = event instanceof CustomEvent ? event.detail : void 0;
+    this.dispatchEvent(new CustomEvent("onLayoutStart", { detail }));
   };
   /**
    * @fires GraphEngine#onLayoutChange
    */
-  _onLayoutChange = () => {
-    this.dispatchEvent(new CustomEvent("onLayoutChange"));
+  _onLayoutChange = (event) => {
+    log.log(0, "GraphEngine: layout update event")();
+    const detail = event instanceof CustomEvent ? event.detail : void 0;
+    this.dispatchEvent(new CustomEvent("onLayoutChange", { detail }));
   };
   /**
    * @fires GraphEngine#onLayoutDone
    */
-  _onLayoutDone = () => {
-    this.dispatchEvent(new CustomEvent("onLayoutDone"));
+  _onLayoutDone = (event) => {
+    log.log(0, "GraphEngine: layout end")();
+    const detail = event instanceof CustomEvent ? event.detail : void 0;
+    this.dispatchEvent(new CustomEvent("onLayoutDone", { detail }));
   };
   /**
    * @fires GraphEngine#onLayoutError
    */
-  _onLayoutError = () => {
-    this.dispatchEvent(new CustomEvent("onLayoutError"));
+  _onLayoutError = (event) => {
+    const detail = event instanceof CustomEvent ? event.detail : void 0;
+    this.dispatchEvent(new CustomEvent("onLayoutError", { detail }));
   };
   _onGraphStructureChanged = (entity) => {
     this._layoutDirty = true;
@@ -835,6 +764,7 @@ var GraphEngine = class extends EventTarget {
   };
   /** Layout calculations */
   run = () => {
+    log.log(1, "GraphEngine: run");
     this._graph.addEventListener("transactionStart", this._onTransactionStart);
     this._graph.addEventListener("transactionEnd", this._onTransactionEnd);
     this._graph.addEventListener("onNodeAdded", this._onGraphStructureChanged);
@@ -849,6 +779,7 @@ var GraphEngine = class extends EventTarget {
     this._layout.start();
   };
   clear = () => {
+    log.log(1, "GraphEngine: end");
     this._graph.removeEventListener("transactionStart", this._onTransactionStart);
     this._graph.removeEventListener("transactionEnd", this._onTransactionEnd);
     this._graph.removeEventListener("onNodeAdded", this._onGraphStructureChanged);
@@ -868,6 +799,7 @@ var GraphEngine = class extends EventTarget {
     }
   };
   _updateLayout = () => {
+    log.log(0, "GraphEngine: layout update");
     this._layout.updateGraph(this._graph);
     this._layout.update();
     this._layoutDirty = false;
@@ -884,8 +816,15 @@ var GraphLayout = class extends EventTarget {
   _name = "GraphLayout";
   /** Extra configuration options of the layout. */
   _options;
+  /**
+   * Last computed layout bounds in local layout coordinates.
+   *
+   * Subclasses should update this value by overriding {@link _updateBounds}
+   * so it reflects the latest geometry before layout lifecycle events fire.
+   */
+  _bounds = null;
   version = 0;
-  state = "INIT";
+  state = "init";
   /**
    * Constructor of GraphLayout
    * @param options extra configuration options of the layout
@@ -905,25 +844,7 @@ var GraphLayout = class extends EventTarget {
     }
     return this._name === layout._name && (0, import_lodash.default)(this._options, layout._options);
   }
-  /** virtual functions: will be implemented in the child class */
-  /** first time to pass the graph data into this layout */
-  initializeGraph(graph) {
-  }
-  /** update the existing graph */
-  updateGraph(graph) {
-  }
-  /** start the layout calculation */
-  start() {
-  }
-  /** update the layout calculation */
-  update() {
-  }
-  /** resume the layout calculation */
-  resume() {
-  }
-  /** stop the layout calculation */
-  stop() {
-  }
+  // Accessors
   /** access the position of the node in the layout */
   getNodePosition(node) {
     return [0, 0];
@@ -931,7 +852,7 @@ var GraphLayout = class extends EventTarget {
   /** access the layout information of the edge */
   getEdgePosition(edge) {
     return {
-      type: EDGE_TYPE.LINE,
+      type: "line",
       sourcePosition: [0, 0],
       targetPosition: [0, 0],
       controlPoints: []
@@ -951,29 +872,101 @@ var GraphLayout = class extends EventTarget {
    */
   unlockNodePosition(node) {
   }
+  /** Returns the last computed layout bounds, if available. */
+  getBounds() {
+    return this._bounds;
+  }
   // INTERNAL METHODS
+  /** Hook for subclasses to update bounds prior to emitting events. */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  _updateBounds() {
+  }
+  /**
+   * Utility for subclasses to derive layout bounds from an iterable of [x, y] positions.
+   * @param positions Iterable of node positions.
+   * @returns Layout bounds for the supplied positions or `null` if none are finite.
+   */
+  _calculateBounds(positions) {
+    let minX = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const position of positions) {
+      if (!position) {
+        continue;
+      }
+      const [x, y] = position;
+      if (!Number.isFinite(x) || !Number.isFinite(y)) {
+        continue;
+      }
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x);
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y);
+    }
+    if (minX === Number.POSITIVE_INFINITY) {
+      return null;
+    }
+    return [
+      [minX, minY],
+      [maxX, maxY]
+    ];
+  }
+  /**
+   * Attempt to coerce an arbitrary value into a finite 2D point.
+   * @param value Candidate value that may represent a position.
+   * @returns Finite [x, y] tuple or null if the value cannot be interpreted.
+   */
+  _normalizePosition(value) {
+    if (Array.isArray(value) && value.length >= 2) {
+      const [x, y] = value;
+      if (this._isFiniteNumber(x) && this._isFiniteNumber(y)) {
+        return [x, y];
+      }
+      return null;
+    }
+    if (value && typeof value === "object") {
+      const { x, y } = value;
+      if (this._isFiniteNumber(x) && this._isFiniteNumber(y)) {
+        return [x, y];
+      }
+    }
+    return null;
+  }
+  _isFiniteNumber(value) {
+    return typeof value === "number" && Number.isFinite(value);
+  }
   _updateState(state) {
     this.state = state;
     this.version += 1;
   }
   /** @fires GraphLayout#onLayoutStart */
   _onLayoutStart = () => {
-    this._updateState("CALCULATING");
-    this.dispatchEvent(new CustomEvent("onLayoutStart"));
+    log.log(0, `GraphLayout(${this._name}): start`)();
+    this._updateBounds();
+    this._updateState("calculating");
+    const detail = { bounds: this._bounds };
+    this.dispatchEvent(new CustomEvent("onLayoutStart", { detail }));
   };
   /** @fires GraphLayout#onLayoutChange */
   _onLayoutChange = () => {
-    this._updateState("CALCULATING");
-    this.dispatchEvent(new CustomEvent("onLayoutChange"));
+    log.log(0, `GraphLayout(${this._name}): update`)();
+    this._updateBounds();
+    this._updateState("calculating");
+    const detail = { bounds: this._bounds };
+    this.dispatchEvent(new CustomEvent("onLayoutChange", { detail }));
   };
   /** @fires GraphLayout#onLayoutDone */
   _onLayoutDone = () => {
-    this._updateState("DONE");
-    this.dispatchEvent(new CustomEvent("onLayoutDone"));
+    log.log(0, `GraphLayout(${this._name}): end`)();
+    this._updateBounds();
+    this._updateState("done");
+    const detail = { bounds: this._bounds };
+    this.dispatchEvent(new CustomEvent("onLayoutDone", { detail }));
   };
   /** @fires GraphLayout#onLayoutError */
   _onLayoutError = () => {
-    this._updateState("ERROR");
+    this._updateState("error");
     this.dispatchEvent(new CustomEvent("onLayoutError"));
   };
 };
@@ -985,19 +978,16 @@ var _SimpleLayout = class extends GraphLayout {
   _nodeMap = {};
   _nodePositionMap = {};
   constructor(options = {}) {
-    super({ ..._SimpleLayout.defaultOptions, ...options });
+    super({ ..._SimpleLayout.defaultProps, ...options });
   }
   initializeGraph(graph) {
     this.updateGraph(graph);
   }
-  _notifyLayoutComplete() {
-    this._onLayoutStart();
-    this._onLayoutChange();
-    this._onLayoutDone();
-  }
   start() {
     this._notifyLayoutComplete();
   }
+  stop() {
+  }
   update() {
     this._notifyLayoutComplete();
   }
@@ -1011,19 +1001,27 @@ var _SimpleLayout = class extends GraphLayout {
       return res;
     }, {});
     this._nodePositionMap = graph.getNodes().reduce((res, node) => {
-      res[node.getId()] = this._options.nodePositionAccessor(node);
+      res[node.getId()] = this._normalizePosition(this._options.nodePositionAccessor(node));
       return res;
     }, {});
   }
   setNodePositionAccessor = (accessor) => {
     this._options.nodePositionAccessor = accessor;
   };
-  getNodePosition = (node) => this._nodePositionMap[node.getId()];
+  getNodePosition = (node) => {
+    if (!node) {
+      return [0, 0];
+    }
+    const position = this._nodePositionMap[node.getId()];
+    return position ?? [0, 0];
+  };
   getEdgePosition = (edge) => {
-    const sourcePos = this._nodePositionMap[edge.getSourceNodeId()];
-    const targetPos = this._nodePositionMap[edge.getTargetNodeId()];
+    const sourceNode = this._nodeMap[edge.getSourceNodeId()];
+    const targetNode = this._nodeMap[edge.getTargetNodeId()];
+    const sourcePos = sourceNode ? this.getNodePosition(sourceNode) : [0, 0];
+    const targetPos = targetNode ? this.getNodePosition(targetNode) : [0, 0];
     return {
-      type: EDGE_TYPE.LINE,
+      type: "line",
       sourcePosition: sourcePos,
       targetPosition: targetPos,
       controlPoints: []
@@ -1034,9 +1032,18 @@ var _SimpleLayout = class extends GraphLayout {
     this._onLayoutChange();
     this._onLayoutDone();
   };
+  _notifyLayoutComplete() {
+    this._onLayoutStart();
+    this._onLayoutChange();
+    this._onLayoutDone();
+  }
+  _updateBounds() {
+    const positions = Object.values(this._nodePositionMap).map((position) => this._normalizePosition(position));
+    this._bounds = this._calculateBounds(positions);
+  }
 };
 var SimpleLayout = _SimpleLayout;
-__publicField(SimpleLayout, "defaultOptions", {
+__publicField(SimpleLayout, "defaultProps", {
   nodePositionAccessor: (node) => [node.getPropertyValue("x"), node.getPropertyValue("y")]
 });
 
@@ -1050,7 +1057,7 @@ var _D3ForceLayout = class extends GraphLayout {
   constructor(options) {
     super(options);
     this._options = {
-      ..._D3ForceLayout.defaultOptions,
+      ..._D3ForceLayout.defaultProps,
       ...options
     };
   }
@@ -1087,6 +1094,8 @@ var _D3ForceLayout = class extends GraphLayout {
       options: this._options
     });
     this._worker.onmessage = (event) => {
+      var _a;
+      log.log(0, "D3ForceLayout: worker message", (_a = event.data) == null ? void 0 : _a.type, event.data);
       if (event.data.type !== "end") {
         return;
       }
@@ -1103,22 +1112,33 @@ var _D3ForceLayout = class extends GraphLayout {
     throw new Error("Resume unavailable");
   }
   stop() {
-    this._worker.terminate();
+    if (this._worker) {
+      this._worker.terminate();
+      this._worker = null;
+    }
   }
   getEdgePosition = (edge) => {
     const sourceNode = this._graph.findNode(edge.getSourceNodeId());
     const targetNode = this._graph.findNode(edge.getTargetNodeId());
-    if (!this.getNodePosition(sourceNode) || !this.getNodePosition(targetNode)) {
+    if (!sourceNode || !targetNode) {
+      return null;
+    }
+    const sourcePosition = this.getNodePosition(sourceNode);
+    const targetPosition = this.getNodePosition(targetNode);
+    if (!sourcePosition || !targetPosition) {
       return null;
     }
     return {
-      type: EDGE_TYPE.LINE,
-      sourcePosition: this.getNodePosition(sourceNode),
-      targetPosition: this.getNodePosition(targetNode),
+      type: "line",
+      sourcePosition,
+      targetPosition,
       controlPoints: []
     };
   };
   getNodePosition = (node) => {
+    if (!node) {
+      return null;
+    }
     const d3Node = this._positionsByNodeId.get(node.id);
     if (d3Node) {
       return d3Node.coordinates;
@@ -1143,9 +1163,13 @@ var _D3ForceLayout = class extends GraphLayout {
     d3Node.fx = null;
     d3Node.fy = null;
   };
+  _updateBounds() {
+    const positions = Array.from(this._positionsByNodeId.values(), (data) => data == null ? void 0 : data.coordinates);
+    this._bounds = this._calculateBounds(positions);
+  }
 };
 var D3ForceLayout = _D3ForceLayout;
-__publicField(D3ForceLayout, "defaultOptions", {
+__publicField(D3ForceLayout, "defaultProps", {
   alpha: 0.3,
   resumeAlpha: 0.1,
   nBodyStrength: -900,
@@ -1154,105 +1178,784 @@ __publicField(D3ForceLayout, "defaultOptions", {
   getCollisionRadius: 0
 });
 
-// dist/layouts/gpu-force/gpu-force-layout.js
-var import_meta2 = {};
-var _GPUForceLayout = class extends GraphLayout {
-  _name = "GPU";
-  _d3Graph;
-  _nodeMap;
-  _edgeMap;
-  _graph;
-  _worker;
-  _callbacks;
+// dist/layouts/d3-dag/d3-dag-layout.js
+var import_d3_dag = require("d3-dag");
+var DEFAULT_NODE_SIZE = [140, 120];
+var DEFAULT_GAP = [0, 0];
+var LAYERING_FACTORIES = {
+  simplex: import_d3_dag.layeringSimplex,
+  longestPath: import_d3_dag.layeringLongestPath,
+  topological: import_d3_dag.layeringTopological
+};
+var DECROSS_FACTORIES = {
+  twoLayer: import_d3_dag.decrossTwoLayer,
+  opt: import_d3_dag.decrossOpt,
+  dfs: import_d3_dag.decrossDfs
+};
+var COORD_FACTORIES = {
+  simplex: import_d3_dag.coordSimplex,
+  greedy: import_d3_dag.coordGreedy,
+  quad: import_d3_dag.coordQuad,
+  center: import_d3_dag.coordCenter,
+  topological: import_d3_dag.coordTopological
+};
+var LAYOUT_FACTORIES = {
+  sugiyama: () => (0, import_d3_dag.sugiyama)(),
+  grid: () => (0, import_d3_dag.grid)(),
+  zherebko: () => (0, import_d3_dag.zherebko)()
+};
+var DAG_ID_SEPARATOR = "::";
+var _D3DagLayout = class extends GraphLayout {
+  _name = "D3DagLayout";
+  _graph = null;
+  _dag = null;
+  _layoutOperator = null;
+  _rawNodePositions = /* @__PURE__ */ new Map();
+  _rawEdgePoints = /* @__PURE__ */ new Map();
+  _nodePositions = /* @__PURE__ */ new Map();
+  _edgePoints = /* @__PURE__ */ new Map();
+  _edgeControlPoints = /* @__PURE__ */ new Map();
+  _lockedNodePositions = /* @__PURE__ */ new Map();
+  _dagBounds = null;
+  _nodeLookup = /* @__PURE__ */ new Map();
+  _stringIdLookup = /* @__PURE__ */ new Map();
+  _edgeLookup = /* @__PURE__ */ new Map();
+  _incomingParentMap = /* @__PURE__ */ new Map();
+  _chainDescriptors = /* @__PURE__ */ new Map();
+  _nodeToChainId = /* @__PURE__ */ new Map();
+  _collapsedChainState = /* @__PURE__ */ new Map();
+  _hiddenNodeIds = /* @__PURE__ */ new Set();
   constructor(options = {}) {
-    const _options = {
-      ..._GPUForceLayout.defaultOptions,
-      ...options
-    };
-    super(_options);
-    this._name = "GPU";
-    this._options = _options;
-    this._d3Graph = { nodes: [], edges: [] };
-    this._nodeMap = {};
-    this._edgeMap = {};
+    super({ ..._D3DagLayout.defaultProps, ...options });
   }
   initializeGraph(graph) {
+    this.updateGraph(graph);
+  }
+  updateGraph(graph) {
     this._graph = graph;
-    this._nodeMap = {};
-    this._edgeMap = {};
-    const d3Nodes = graph.getNodes().map((node) => {
-      const id = node.id;
-      const locked = node.getPropertyValue("locked") || false;
-      const x = node.getPropertyValue("x") || 0;
-      const y = node.getPropertyValue("y") || 0;
-      const collisionRadius = node.getPropertyValue("collisionRadius") || 0;
-      const d3Node = {
-        id,
-        x,
-        y,
-        fx: locked ? x : null,
-        fy: locked ? y : null,
-        collisionRadius,
-        locked
-      };
-      this._nodeMap[node.id] = d3Node;
-      return d3Node;
-    });
-    const d3Edges = graph.getEdges().map((edge) => {
-      const d3Edge = {
-        id: edge.id,
-        source: this._nodeMap[edge.getSourceNodeId()],
-        target: this._nodeMap[edge.getTargetNodeId()]
-      };
-      this._edgeMap[edge.id] = d3Edge;
-      return d3Edge;
-    });
-    this._d3Graph = {
-      nodes: d3Nodes,
-      edges: d3Edges
-    };
+    this._nodeLookup = /* @__PURE__ */ new Map();
+    this._stringIdLookup = /* @__PURE__ */ new Map();
+    this._edgeLookup = /* @__PURE__ */ new Map();
+    this._incomingParentMap = /* @__PURE__ */ new Map();
+    this._chainDescriptors = /* @__PURE__ */ new Map();
+    this._nodeToChainId = /* @__PURE__ */ new Map();
+    this._hiddenNodeIds = /* @__PURE__ */ new Set();
+    for (const node of graph.getNodes()) {
+      const id = node.getId();
+      const key = this._toDagId(id);
+      this._nodeLookup.set(id, node);
+      this._stringIdLookup.set(key, id);
+    }
+    for (const edge of graph.getEdges()) {
+      if (!edge.isDirected()) {
+        continue;
+      }
+      const key = this._edgeKey(edge.getSourceNodeId(), edge.getTargetNodeId());
+      this._edgeLookup.set(key, edge);
+      const targetId = edge.getTargetNodeId();
+      const parents = this._incomingParentMap.get(targetId) ?? [];
+      parents.push(edge.getSourceNodeId());
+      this._incomingParentMap.set(targetId, parents);
+    }
   }
   start() {
-    this._engageWorker();
+    this._runLayout();
   }
   update() {
-    this._engageWorker();
+    this._runLayout();
   }
-  _engageWorker() {
-    if (this._worker) {
-      this._worker.terminate();
-    }
-    this._worker = new Worker(new URL("./worker.js", import_meta2.url).href);
-    const { alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax, getCollisionRadius } = this._options;
-    this._worker.postMessage({
-      nodes: this._d3Graph.nodes,
-      edges: this._d3Graph.edges,
-      options: {
-        alpha,
-        nBodyStrength,
-        nBodyDistanceMin,
-        nBodyDistanceMax,
-        getCollisionRadius
-      }
-    });
-    this._worker.onmessage = (event) => {
-      switch (event.data.type) {
-        case "tick":
-          this.ticked(event.data);
-          break;
-        case "end":
-          this.ended(event.data);
-          break;
-        default:
-          break;
-      }
-    };
+  resume() {
+    this._runLayout();
   }
-  ticked(data) {
+  stop() {
   }
-  ended(data) {
-    const { nodes, edges } = data;
-    this.updateD3Graph({ nodes, edges });
+  toggleCollapsedChain(chainId) {
+    if (!this._graph) {
+      log.log(1, `D3DagLayout: toggleCollapsedChain(${chainId}) ignored (no graph)`);
+      return;
+    }
+    if (!this._chainDescriptors.has(chainId)) {
+      this._refreshCollapsedChains();
+    }
+    if (!this._chainDescriptors.has(chainId)) {
+      log.log(1, `D3DagLayout: toggleCollapsedChain(${chainId}) skipped (unknown chain)`);
+      return;
+    }
+    const collapsed = this._isChainCollapsed(chainId);
+    const nextState = !collapsed;
+    log.log(0, `D3DagLayout: toggleCollapsedChain(${chainId}) -> ${nextState ? "collapsed" : "expanded"}`);
+    console.log(`D3DagLayout: toggleCollapsedChain(${chainId}) -> ${nextState ? "collapsed" : "expanded"}`);
+    this._collapsedChainState.set(chainId, nextState);
+    this._runLayout();
+  }
+  setCollapsedChains(chainIds) {
+    if (!this._graph) {
+      log.log(1, "D3DagLayout: setCollapsedChains ignored (no graph)");
+      return;
+    }
+    if (!this._chainDescriptors.size) {
+      this._refreshCollapsedChains();
+    }
+    const desired = new Set(chainIds);
+    log.log(0, `D3DagLayout: setCollapsedChains(${desired.size}) requested`);
+    let changed = false;
+    for (const chainId of this._chainDescriptors.keys()) {
+      const next = desired.has(chainId);
+      if (this._isChainCollapsed(chainId) !== next) {
+        this._collapsedChainState.set(chainId, next);
+        changed = true;
+      }
+    }
+    if (changed) {
+      log.log(0, "D3DagLayout: setCollapsedChains -> changes detected, rerunning layout");
+      console.log("D3DagLayout: setCollapsedChains -> changes detected, rerunning layout");
+      this._runLayout();
+    } else {
+      log.log(1, "D3DagLayout: setCollapsedChains -> no changes");
+      console.log("D3DagLayout: setCollapsedChains -> no changes");
+    }
+  }
+  setPipelineOptions(options) {
+    this._options = { ...this._options, ...options };
+    if (options.layout !== void 0 || options.layering !== void 0 || options.decross !== void 0 || options.coord !== void 0 || options.nodeSize !== void 0 || options.gap !== void 0 || options.separation !== void 0) {
+      this._layoutOperator = null;
+    }
+    if (options.collapseLinearChains !== void 0 && this._graph) {
+      this._runLayout();
+    }
+  }
+  getNodePosition(node) {
+    if (this._shouldSkipNode(node.getId())) {
+      return null;
+    }
+    const mappedId = this._mapNodeId(node.getId());
+    return this._nodePositions.get(mappedId) || null;
+  }
+  getEdgePosition(edge) {
+    const mappedSourceId = this._mapNodeId(edge.getSourceNodeId());
+    const mappedTargetId = this._mapNodeId(edge.getTargetNodeId());
+    if (mappedSourceId === mappedTargetId) {
+      return null;
+    }
+    const sourcePosition = this._nodePositions.get(mappedSourceId);
+    const targetPosition = this._nodePositions.get(mappedTargetId);
+    if (!sourcePosition || !targetPosition) {
+      return null;
+    }
+    if (!this._edgePoints.has(edge.getId())) {
+      return null;
+    }
+    const controlPoints = this._edgeControlPoints.get(edge.getId()) || [];
+    const edgeType = controlPoints.length ? "spline-curve" : "line";
+    return {
+      type: edgeType,
+      sourcePosition,
+      targetPosition,
+      controlPoints
+    };
+  }
+  getLinkControlPoints(edge) {
+    return this._edgeControlPoints.get(edge.getId()) || [];
+  }
+  lockNodePosition(node, x, y) {
+    this._lockedNodePositions.set(node.getId(), [x, y]);
+    this._nodePositions.set(node.getId(), [x, y]);
+    this._onLayoutChange();
+    this._onLayoutDone();
+  }
+  unlockNodePosition(node) {
+    this._lockedNodePositions.delete(node.getId());
+  }
+  _runLayout() {
+    if (!this._graph) {
+      return;
+    }
+    this._refreshCollapsedChains();
+    this._onLayoutStart();
+    try {
+      this._dag = this._buildDag();
+      const layout = this._getLayoutOperator();
+      layout(this._dag);
+      this._cacheGeometry();
+      this._onLayoutChange();
+      this._onLayoutDone();
+    } catch (error2) {
+      this._onLayoutError();
+      throw error2;
+    }
+  }
+  _refreshCollapsedChains() {
+    const previousChainCount = this._chainDescriptors.size;
+    if (!this._graph) {
+      if (previousChainCount > 0) {
+        log.log(0, "D3DagLayout: clearing collapsed chains (graph unavailable)");
+        console.log("D3DagLayout: clearing collapsed chains (graph unavailable)");
+      }
+      this._chainDescriptors.clear();
+      this._nodeToChainId.clear();
+      this._hiddenNodeIds.clear();
+      return;
+    }
+    log.log(0, `D3DagLayout: refreshing collapsed chains (previous=${previousChainCount})`);
+    console.log(`D3DagLayout: refreshing collapsed chains (previous=${previousChainCount})`);
+    const collapseDefault = this._options.collapseLinearChains ?? _D3DagLayout.defaultProps.collapseLinearChains;
+    const previousStates = new Map(this._collapsedChainState);
+    this._chainDescriptors.clear();
+    this._nodeToChainId.clear();
+    this._hiddenNodeIds.clear();
+    const nodes = this._graph.getNodes();
+    const candidateNodes = /* @__PURE__ */ new Set();
+    const incomingCache = /* @__PURE__ */ new Map();
+    const outgoingCache = /* @__PURE__ */ new Map();
+    for (const node of nodes) {
+      const incoming = this._getIncomingEdges(node);
+      const outgoing = this._getOutgoingEdges(node);
+      incomingCache.set(node.getId(), incoming);
+      outgoingCache.set(node.getId(), outgoing);
+      if (incoming.length <= 1 && outgoing.length <= 1 && incoming.length + outgoing.length > 0) {
+        candidateNodes.add(node.getId());
+      }
+    }
+    const visited = /* @__PURE__ */ new Set();
+    for (const node of nodes) {
+      const nodeId = node.getId();
+      if (!candidateNodes.has(nodeId) || visited.has(nodeId)) {
+        continue;
+      }
+      const incoming = incomingCache.get(nodeId) ?? [];
+      const hasCandidateParent = incoming.length === 1 && candidateNodes.has(incoming[0].getSourceNodeId());
+      if (hasCandidateParent) {
+        continue;
+      }
+      const chainNodeIds = [];
+      const chainEdgeIds = [];
+      let currentNode = node;
+      while (currentNode) {
+        const currentId = currentNode.getId();
+        if (!candidateNodes.has(currentId) || visited.has(currentId)) {
+          break;
+        }
+        visited.add(currentId);
+        chainNodeIds.push(currentId);
+        const outgoing = outgoingCache.get(currentId) ?? [];
+        if (outgoing.length !== 1) {
+          break;
+        }
+        const nextEdge = outgoing[0];
+        const nextNodeId = nextEdge.getTargetNodeId();
+        if (!candidateNodes.has(nextNodeId)) {
+          break;
+        }
+        const nextIncoming = incomingCache.get(nextNodeId) ?? [];
+        if (nextIncoming.length !== 1) {
+          break;
+        }
+        chainEdgeIds.push(nextEdge.getId());
+        currentNode = this._nodeLookup.get(nextNodeId);
+      }
+      if (chainNodeIds.length > 1) {
+        const chainId = this._createChainId(chainNodeIds);
+        const collapsed = previousStates.has(chainId) ? previousStates.get(chainId) : collapseDefault;
+        this._chainDescriptors.set(chainId, {
+          id: chainId,
+          nodeIds: chainNodeIds,
+          edgeIds: chainEdgeIds,
+          representativeId: chainNodeIds[0]
+        });
+        this._collapsedChainState.set(chainId, collapsed);
+        for (const chainNodeId of chainNodeIds) {
+          this._nodeToChainId.set(chainNodeId, chainId);
+        }
+      }
+    }
+    for (const key of previousStates.keys()) {
+      if (!this._chainDescriptors.has(key)) {
+        this._collapsedChainState.delete(key);
+      }
+    }
+    this._hiddenNodeIds.clear();
+    for (const [chainId, descriptor] of this._chainDescriptors) {
+      const collapsed = this._isChainCollapsed(chainId);
+      if (collapsed) {
+        for (const nodeId of descriptor.nodeIds) {
+          if (nodeId !== descriptor.representativeId) {
+            this._hiddenNodeIds.add(nodeId);
+          }
+        }
+      }
+    }
+    this._updateCollapsedChainNodeMetadata();
+    let collapsedCount = 0;
+    for (const chainId of this._chainDescriptors.keys()) {
+      if (this._isChainCollapsed(chainId)) {
+        collapsedCount++;
+      }
+    }
+    log.log(0, `D3DagLayout: refreshed collapsed chains -> total=${this._chainDescriptors.size}, collapsed=${collapsedCount}`);
+  }
+  _buildDag() {
+    const builder = this._options.dagBuilder ?? _D3DagLayout.defaultProps.dagBuilder;
+    if (typeof builder === "function") {
+      const dag = builder(this._graph);
+      return this._ensureEdgeData(dag);
+    }
+    switch (builder) {
+      case "connect":
+        return this._buildDagWithConnect();
+      case "stratify":
+        return this._buildDagWithStratify();
+      case "graph":
+      default:
+        return this._buildDagWithGraph();
+    }
+  }
+  _buildDagWithGraph() {
+    const dag = (0, import_d3_dag.graph)();
+    const dagNodeLookup = /* @__PURE__ */ new Map();
+    for (const node of this._graph.getNodes()) {
+      if (this._shouldSkipNode(node.getId())) {
+        continue;
+      }
+      const dagNode = dag.node(node);
+      dagNodeLookup.set(node.getId(), dagNode);
+    }
+    for (const edge of this._graph.getEdges()) {
+      if (!edge.isDirected()) {
+        continue;
+      }
+      const sourceId = this._mapNodeId(edge.getSourceNodeId());
+      const targetId = this._mapNodeId(edge.getTargetNodeId());
+      if (sourceId === targetId) {
+        continue;
+      }
+      const source = dagNodeLookup.get(sourceId);
+      const target = dagNodeLookup.get(targetId);
+      if (!source || !target) {
+        continue;
+      }
+      dag.link(source, target, edge);
+    }
+    return dag;
+  }
+  _buildDagWithConnect() {
+    const connect = (0, import_d3_dag.graphConnect)().sourceId(({ source }) => source).targetId(({ target }) => target).nodeDatum((id) => this._nodeLookup.get(this._fromDagId(id)) ?? new Node({ id })).single(true);
+    const data = this._graph.getEdges().filter((edge) => edge.isDirected()).map((edge) => {
+      const sourceId = this._mapNodeId(edge.getSourceNodeId());
+      const targetId = this._mapNodeId(edge.getTargetNodeId());
+      return { sourceId, targetId, edge };
+    }).filter(({ sourceId, targetId }) => sourceId !== targetId).map(({ sourceId, targetId, edge }) => ({
+      source: this._toDagId(sourceId),
+      target: this._toDagId(targetId),
+      edge
+    }));
+    const dag = connect(data);
+    const seenIds = /* @__PURE__ */ new Set();
+    for (const dagNode of dag.nodes()) {
+      const datum = dagNode.data;
+      if (datum instanceof Node) {
+        seenIds.add(datum.getId());
+      }
+    }
+    for (const node of this._graph.getNodes()) {
+      if (this._shouldSkipNode(node.getId())) {
+        continue;
+      }
+      if (!seenIds.has(node.getId())) {
+        dag.node(node);
+      }
+    }
+    return this._ensureEdgeData(dag);
+  }
+  _buildDagWithStratify() {
+    const stratify = (0, import_d3_dag.graphStratify)().id((node) => this._toDagId(node.getId())).parentIds((node) => {
+      const parentIds = this._incomingParentMap.get(node.getId()) ?? [];
+      const mapped = /* @__PURE__ */ new Set();
+      for (const parentId of parentIds) {
+        if (!this._nodeLookup.has(parentId)) {
+          continue;
+        }
+        const mappedId = this._mapNodeId(parentId);
+        if (mappedId === node.getId()) {
+          continue;
+        }
+        mapped.add(this._toDagId(mappedId));
+      }
+      return mapped;
+    });
+    const dag = stratify(this._graph.getNodes().filter((node) => !this._shouldSkipNode(node.getId())));
+    return this._ensureEdgeData(dag);
+  }
+  _isChainCollapsed(chainId) {
+    const collapseDefault = this._options.collapseLinearChains ?? _D3DagLayout.defaultProps.collapseLinearChains;
+    return this._collapsedChainState.get(chainId) ?? collapseDefault;
+  }
+  _shouldSkipNode(nodeId) {
+    return this._hiddenNodeIds.has(nodeId);
+  }
+  _mapNodeId(nodeId) {
+    const chainId = this._nodeToChainId.get(nodeId);
+    if (!chainId) {
+      return nodeId;
+    }
+    const descriptor = this._chainDescriptors.get(chainId);
+    if (!descriptor) {
+      return nodeId;
+    }
+    return this._isChainCollapsed(chainId) ? descriptor.representativeId : nodeId;
+  }
+  _updateCollapsedChainNodeMetadata() {
+    if (!this._graph) {
+      return;
+    }
+    for (const node of this._graph.getNodes()) {
+      const nodeId = node.getId();
+      const chainId = this._nodeToChainId.get(nodeId);
+      if (!chainId) {
+        node.setDataProperty("collapsedChainId", null);
+        node.setDataProperty("collapsedChainLength", 1);
+        node.setDataProperty("collapsedNodeIds", []);
+        node.setDataProperty("collapsedEdgeIds", []);
+        node.setDataProperty("collapsedChainRepresentativeId", null);
+        node.setDataProperty("isCollapsedChain", false);
+        continue;
+      }
+      const descriptor = this._chainDescriptors.get(chainId);
+      if (!descriptor) {
+        node.setDataProperty("collapsedChainId", null);
+        node.setDataProperty("collapsedChainLength", 1);
+        node.setDataProperty("collapsedNodeIds", []);
+        node.setDataProperty("collapsedEdgeIds", []);
+        node.setDataProperty("collapsedChainRepresentativeId", null);
+        node.setDataProperty("isCollapsedChain", false);
+        continue;
+      }
+      const collapsed = this._isChainCollapsed(chainId);
+      node.setDataProperty("collapsedChainId", chainId);
+      node.setDataProperty("collapsedChainLength", collapsed ? descriptor.nodeIds.length : 1);
+      node.setDataProperty("collapsedNodeIds", descriptor.nodeIds);
+      node.setDataProperty("collapsedEdgeIds", descriptor.edgeIds);
+      node.setDataProperty("collapsedChainRepresentativeId", descriptor.representativeId);
+      node.setDataProperty("isCollapsedChain", collapsed);
+    }
+  }
+  _createChainId(nodeIds) {
+    return `chain:${nodeIds.map((id) => this._toDagId(id)).join(">")}`;
+  }
+  _getIncomingEdges(node) {
+    const nodeId = node.getId();
+    return node.getConnectedEdges().filter((edge) => edge.isDirected() && edge.getTargetNodeId() === nodeId);
+  }
+  _getOutgoingEdges(node) {
+    const nodeId = node.getId();
+    return node.getConnectedEdges().filter((edge) => edge.isDirected() && edge.getSourceNodeId() === nodeId);
+  }
+  _ensureEdgeData(dag) {
+    for (const link of dag.links()) {
+      if (link.data instanceof Edge) {
+        continue;
+      }
+      const sourceNode = link.source.data;
+      const targetNode = link.target.data;
+      if (!(sourceNode instanceof Node) || !(targetNode instanceof Node)) {
+        continue;
+      }
+      const key = this._edgeKey(sourceNode.getId(), targetNode.getId());
+      const edge = this._edgeLookup.get(key);
+      if (edge) {
+        link.data = edge;
+      }
+    }
+    return dag;
+  }
+  _getLayoutOperator() {
+    if (this._layoutOperator) {
+      return this._layoutOperator;
+    }
+    const layoutOption = this._options.layout ?? _D3DagLayout.defaultProps.layout;
+    let layout;
+    if (typeof layoutOption === "string") {
+      layout = LAYOUT_FACTORIES[layoutOption]();
+    } else {
+      layout = layoutOption;
+    }
+    if (layout.layering && this._options.layering) {
+      layout = layout.layering(this._resolveLayering(this._options.layering));
+    }
+    if (layout.decross && this._options.decross) {
+      layout = layout.decross(this._resolveDecross(this._options.decross));
+    }
+    if (layout.coord && this._options.coord) {
+      layout = layout.coord(this._resolveCoord(this._options.coord));
+    }
+    const nodeSize = this._options.nodeSize ?? DEFAULT_NODE_SIZE;
+    if (layout.nodeSize) {
+      layout = layout.nodeSize(nodeSize);
+    }
+    const gap = this._options.separation ?? this._options.gap ?? DEFAULT_GAP;
+    if (layout.gap) {
+      layout = layout.gap(gap);
+    }
+    this._layoutOperator = layout;
+    return layout;
+  }
+  _resolveLayering(option) {
+    if (typeof option === "string") {
+      return LAYERING_FACTORIES[option]();
+    }
+    return option;
+  }
+  _resolveDecross(option) {
+    if (typeof option === "string") {
+      return DECROSS_FACTORIES[option]();
+    }
+    return option;
+  }
+  _resolveCoord(option) {
+    if (typeof option === "string") {
+      return COORD_FACTORIES[option]();
+    }
+    return option;
+  }
+  _cacheGeometry() {
+    this._rawNodePositions.clear();
+    this._rawEdgePoints.clear();
+    if (!this._dag) {
+      this._dagBounds = null;
+      this._bounds = null;
+      return;
+    }
+    let minX = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const dagNode of this._dag.nodes()) {
+      const node = dagNode.data;
+      const id = node.getId();
+      const x = dagNode.x ?? 0;
+      const y = dagNode.y ?? 0;
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x);
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y);
+      this._rawNodePositions.set(id, [x, y]);
+    }
+    if (minX === Number.POSITIVE_INFINITY) {
+      this._dagBounds = null;
+      this._bounds = null;
+      this._nodePositions.clear();
+      this._edgePoints.clear();
+      this._edgeControlPoints.clear();
+      return;
+    }
+    this._dagBounds = {
+      minX,
+      maxX,
+      minY,
+      maxY,
+      centerX: (minX + maxX) / 2,
+      centerY: (minY + maxY) / 2
+    };
+    for (const link of this._dag.links()) {
+      const source = link.source.data;
+      const target = link.target.data;
+      const edge = link.data instanceof Edge ? link.data : this._edgeLookup.get(this._edgeKey(source.getId(), target.getId()));
+      if (!edge) {
+        continue;
+      }
+      const points = link.points && link.points.length ? link.points : [[link.source.x ?? 0, link.source.y ?? 0], [link.target.x ?? 0, link.target.y ?? 0]];
+      this._rawEdgePoints.set(edge.getId(), points.map((point) => [...point]));
+    }
+    this._updateTransformedGeometry();
+  }
+  _updateTransformedGeometry() {
+    this._nodePositions.clear();
+    this._edgePoints.clear();
+    this._edgeControlPoints.clear();
+    if (!this._dagBounds) {
+      this._bounds = null;
+      return;
+    }
+    const { offsetX, offsetY } = this._getOffsets();
+    const orientation = this._options.orientation ?? _D3DagLayout.defaultProps.orientation;
+    const transform = (x, y) => {
+      const localX = x - offsetX;
+      const localY = y - offsetY;
+      switch (orientation) {
+        case "BT":
+          return [localX, localY];
+        case "LR":
+          return [localY, localX];
+        case "RL":
+          return [-localY, localX];
+        case "TB":
+        default:
+          return [localX, -localY];
+      }
+    };
+    for (const [id, [x, y]] of this._rawNodePositions) {
+      this._nodePositions.set(id, transform(x, y));
+    }
+    for (const [edgeId, points] of this._rawEdgePoints) {
+      const transformed = points.map(([x, y]) => transform(x, y));
+      this._edgePoints.set(edgeId, transformed);
+      this._edgeControlPoints.set(edgeId, transformed.length > 2 ? transformed.slice(1, -1) : []);
+    }
+    for (const [id, position] of this._lockedNodePositions) {
+      this._nodePositions.set(id, position);
+    }
+    this._bounds = this._calculateBounds(this._nodePositions.values());
+  }
+  _getOffsets() {
+    if (!this._dagBounds) {
+      return { offsetX: 0, offsetY: 0 };
+    }
+    const centerOption = this._options.center ?? true;
+    let offsetX = 0;
+    let offsetY = 0;
+    if (centerOption === true) {
+      offsetX = this._dagBounds.centerX;
+      offsetY = this._dagBounds.centerY;
+    } else if (centerOption && typeof centerOption === "object") {
+      if (centerOption.x) {
+        offsetX = this._dagBounds.centerX;
+      }
+      if (centerOption.y) {
+        offsetY = this._dagBounds.centerY;
+      }
+    }
+    return { offsetX, offsetY };
+  }
+  _updateBounds() {
+    this._bounds = this._calculateBounds(this._nodePositions.values());
+  }
+  _edgeKey(sourceId, targetId) {
+    return `${this._toDagId(sourceId)}${DAG_ID_SEPARATOR}${this._toDagId(targetId)}`;
+  }
+  _toDagId(id) {
+    return String(id);
+  }
+  _fromDagId(id) {
+    return this._stringIdLookup.get(id) ?? id;
+  }
+};
+var D3DagLayout = _D3DagLayout;
+__publicField(D3DagLayout, "defaultProps", {
+  layout: "sugiyama",
+  layering: "topological",
+  decross: "twoLayer",
+  coord: "greedy",
+  nodeSize: DEFAULT_NODE_SIZE,
+  gap: DEFAULT_GAP,
+  separation: DEFAULT_GAP,
+  orientation: "TB",
+  center: true,
+  dagBuilder: "graph",
+  collapseLinearChains: false
+});
+
+// dist/layouts/gpu-force/gpu-force-layout.js
+var import_meta2 = {};
+var _GPUForceLayout = class extends GraphLayout {
+  _name = "GPU";
+  _d3Graph;
+  _nodeMap;
+  _edgeMap;
+  _graph;
+  _worker = null;
+  _callbacks;
+  constructor(options = {}) {
+    const _options = {
+      ..._GPUForceLayout.defaultProps,
+      ...options
+    };
+    super(_options);
+    this._name = "GPU";
+    this._options = _options;
+    this._d3Graph = { nodes: [], edges: [] };
+    this._nodeMap = {};
+    this._edgeMap = {};
+    this._callbacks = {
+      onLayoutChange: this._onLayoutChange,
+      onLayoutDone: this._onLayoutDone
+    };
+  }
+  initializeGraph(graph) {
+    this._graph = graph;
+    this._nodeMap = {};
+    this._edgeMap = {};
+    const d3Nodes = graph.getNodes().map((node) => {
+      const id = node.id;
+      const locked = node.getPropertyValue("locked") || false;
+      const x = node.getPropertyValue("x") || 0;
+      const y = node.getPropertyValue("y") || 0;
+      const collisionRadius = node.getPropertyValue("collisionRadius") || 0;
+      const d3Node = {
+        id,
+        x,
+        y,
+        fx: locked ? x : null,
+        fy: locked ? y : null,
+        collisionRadius,
+        locked
+      };
+      this._nodeMap[node.id] = d3Node;
+      return d3Node;
+    });
+    const d3Edges = graph.getEdges().map((edge) => {
+      const d3Edge = {
+        id: edge.id,
+        source: this._nodeMap[edge.getSourceNodeId()],
+        target: this._nodeMap[edge.getTargetNodeId()]
+      };
+      this._edgeMap[edge.id] = d3Edge;
+      return d3Edge;
+    });
+    this._d3Graph = {
+      nodes: d3Nodes,
+      edges: d3Edges
+    };
+  }
+  start() {
+    this._engageWorker();
+  }
+  update() {
+    this._engageWorker();
+  }
+  _engageWorker() {
+    if (this._worker) {
+      this._worker.terminate();
+    }
+    this._worker = new Worker(new URL("./worker.js", import_meta2.url).href);
+    const { alpha, nBodyStrength, nBodyDistanceMin, nBodyDistanceMax, getCollisionRadius } = this._options;
+    this._worker.postMessage({
+      nodes: this._d3Graph.nodes,
+      edges: this._d3Graph.edges,
+      options: {
+        alpha,
+        nBodyStrength,
+        nBodyDistanceMin,
+        nBodyDistanceMax,
+        getCollisionRadius
+      }
+    });
+    this._worker.onmessage = (event) => {
+      switch (event.data.type) {
+        case "tick":
+          this.ticked(event.data);
+          break;
+        case "end":
+          this.ended(event.data);
+          break;
+        default:
+          break;
+      }
+    };
+  }
+  ticked(data) {
+  }
+  ended(data) {
+    const { nodes, edges } = data;
+    this.updateD3Graph({ nodes, edges });
     this._onLayoutChange();
     this._onLayoutDone();
   }
@@ -1260,7 +1963,10 @@ var _GPUForceLayout = class extends GraphLayout {
     throw new Error("Resume unavailable");
   }
   stop() {
-    this._worker.terminate();
+    if (this._worker) {
+      this._worker.terminate();
+      this._worker = null;
+    }
   }
   // for steaming new data on the same graph
   updateGraph(graph) {
@@ -1335,14 +2041,14 @@ var _GPUForceLayout = class extends GraphLayout {
     const targetPosition = d3Edge && d3Edge.target;
     if (d3Edge && sourcePosition && targetPosition) {
       return {
-        type: EDGE_TYPE.LINE,
+        type: "line",
         sourcePosition: [sourcePosition.x, sourcePosition.y],
         targetPosition: [targetPosition.x, targetPosition.y],
         controlPoints: []
       };
     }
     return {
-      type: EDGE_TYPE.LINE,
+      type: "line",
       sourcePosition: [0, 0],
       targetPosition: [0, 0],
       controlPoints: []
@@ -1362,9 +2068,13 @@ var _GPUForceLayout = class extends GraphLayout {
     d3Node.fx = null;
     d3Node.fy = null;
   };
+  _updateBounds() {
+    const positions = Object.values(this._nodeMap ?? {}).map((node) => this._normalizePosition(node));
+    this._bounds = this._calculateBounds(positions);
+  }
 };
 var GPUForceLayout = _GPUForceLayout;
-__publicField(GPUForceLayout, "defaultOptions", {
+__publicField(GPUForceLayout, "defaultProps", {
   alpha: 0.3,
   resumeAlpha: 0.1,
   nBodyStrength: -900,
@@ -1420,7 +2130,7 @@ var _RadialLayout = class extends GraphLayout {
   constructor(options = {}) {
     super(options);
     this._options = {
-      ..._RadialLayout.defaultOptions,
+      ..._RadialLayout.defaultProps,
       ...options
     };
   }
@@ -1471,6 +2181,12 @@ var _RadialLayout = class extends GraphLayout {
     this._onLayoutChange();
     this._onLayoutDone();
   }
+  stop() {
+  }
+  resume() {
+  }
+  update() {
+  }
   getNodePosition = (node) => {
     return this._hierarchicalPoints[node.id];
   };
@@ -1502,7 +2218,7 @@ var _RadialLayout = class extends GraphLayout {
       wayPoints.push(this._hierarchicalPoints[nodeId]);
     }
     return {
-      type: EDGE_TYPE.SPLINE_CURVE,
+      type: "spline-curve",
       sourcePosition: sourceNodePos,
       targetPosition: targetNodePos,
       controlPoints: wayPoints
@@ -1513,9 +2229,13 @@ var _RadialLayout = class extends GraphLayout {
     this._onLayoutChange();
     this._onLayoutDone();
   };
+  _updateBounds() {
+    const positions = Object.values(this._hierarchicalPoints ?? {}).map((position) => this._normalizePosition(position));
+    this._bounds = this._calculateBounds(positions);
+  }
 };
 var RadialLayout = _RadialLayout;
-__publicField(RadialLayout, "defaultOptions", {
+__publicField(RadialLayout, "defaultProps", {
   radius: 500
 });
 function rotate(cx, cy, x, y, angle) {
@@ -1541,7 +2261,7 @@ var _ForceMultiGraphLayout = class extends GraphLayout {
   constructor(options = {}) {
     super(options);
     this._options = {
-      ..._ForceMultiGraphLayout.defaultOptions,
+      ..._ForceMultiGraphLayout.defaultProps,
       ...options
     };
   }
@@ -1576,6 +2296,8 @@ var _ForceMultiGraphLayout = class extends GraphLayout {
   stop() {
     this._simulator.stop();
   }
+  update() {
+  }
   updateGraph(graph) {
     this._graph = graph;
     const newNodeMap = {};
@@ -1602,7 +2324,7 @@ var _ForceMultiGraphLayout = class extends GraphLayout {
       const firstEdge = betweenEdges[0];
       if (betweenEdges.length === 1) {
         const newD3Edge2 = {
-          type: EDGE_TYPE.LINE,
+          type: "line",
           id: firstEdge.getId(),
           source: newNodeMap[firstEdge.getSourceNodeId()],
           target: newNodeMap[firstEdge.getTargetNodeId()],
@@ -1613,7 +2335,7 @@ var _ForceMultiGraphLayout = class extends GraphLayout {
         return;
       }
       const newD3Edge = {
-        type: EDGE_TYPE.LINE,
+        type: "line",
         id: pairId,
         source: newNodeMap[firstEdge.getSourceNodeId()],
         target: newNodeMap[firstEdge.getTargetNodeId()],
@@ -1624,7 +2346,7 @@ var _ForceMultiGraphLayout = class extends GraphLayout {
       newD3Edges.push(newD3Edge);
       betweenEdges.forEach((e, idx) => {
         newEdgeMap[e.id] = {
-          type: EDGE_TYPE.SPLINE_CURVE,
+          type: "spline-curve",
           id: e.id,
           source: newNodeMap[e.getSourceNodeId()],
           target: newNodeMap[e.getTargetNodeId()],
@@ -1651,7 +2373,7 @@ var _ForceMultiGraphLayout = class extends GraphLayout {
     if (d3Edge) {
       if (!d3Edge.isVirtual) {
         return {
-          type: EDGE_TYPE.LINE,
+          type: "line",
           sourcePosition: [d3Edge.source.x, d3Edge.source.y],
           targetPosition: [d3Edge.target.x, d3Edge.target.y],
           controlPoints: []
@@ -1668,14 +2390,14 @@ var _ForceMultiGraphLayout = class extends GraphLayout {
       const offset = Math.max(distance / 10, 5) * (symmetricShape ? Math.floor(index / 2 + 1) : Math.ceil(index / 2));
       const controlPoint = computeControlPoint(sourcePosition, targetPosition, direction, offset);
       return {
-        type: EDGE_TYPE.SPLINE_CURVE,
+        type: "spline-curve",
         sourcePosition,
         targetPosition,
         controlPoints: [controlPoint]
       };
     }
     return {
-      type: EDGE_TYPE.LINE,
+      type: "line",
       sourcePosition: [0, 0],
       targetPosition: [0, 0],
       controlPoints: []
@@ -1688,9 +2410,13 @@ var _ForceMultiGraphLayout = class extends GraphLayout {
     this._onLayoutChange();
     this._onLayoutDone();
   };
+  _updateBounds() {
+    const positions = Object.values(this._nodeMap ?? {}).map((node) => this._normalizePosition(node));
+    this._bounds = this._calculateBounds(positions);
+  }
 };
 var ForceMultiGraphLayout = _ForceMultiGraphLayout;
-__publicField(ForceMultiGraphLayout, "defaultOptions", {
+__publicField(ForceMultiGraphLayout, "defaultProps", {
   alpha: 3,
   nBodyStrength: -1200,
   nBodyDistanceMin: 100,
@@ -1720,7 +2446,7 @@ var _HivePlotLayout = class extends GraphLayout {
   constructor(options = {}) {
     super(options);
     this._options = {
-      ..._HivePlotLayout.defaultOptions,
+      ..._HivePlotLayout.defaultProps,
       ...options
     };
   }
@@ -1776,6 +2502,12 @@ var _HivePlotLayout = class extends GraphLayout {
     this._onLayoutChange();
     this._onLayoutDone();
   }
+  stop() {
+  }
+  update() {
+  }
+  resume() {
+  }
   getNodePosition = (node) => this._nodePositionMap[node.getId()];
   getEdgePosition = (edge) => {
     const { getNodeAxis } = this._options;
@@ -1789,7 +2521,7 @@ var _HivePlotLayout = class extends GraphLayout {
     const targetNodeAxis = getNodeAxis(targetNode);
     if (sourceNodeAxis === targetNodeAxis) {
       return {
-        type: EDGE_TYPE.LINE,
+        type: "line",
         sourcePosition,
         targetPosition,
         controlPoints: []
@@ -1803,7 +2535,7 @@ var _HivePlotLayout = class extends GraphLayout {
       totalAxis: this._totalAxis
     });
     return {
-      type: EDGE_TYPE.SPLINE_CURVE,
+      type: "spline-curve",
       sourcePosition,
       targetPosition,
       controlPoints: [controlPoint]
@@ -1814,9 +2546,13 @@ var _HivePlotLayout = class extends GraphLayout {
     this._onLayoutChange();
     this._onLayoutDone();
   };
+  _updateBounds() {
+    const positions = Object.values(this._nodePositionMap ?? {}).map((position) => this._normalizePosition(position));
+    this._bounds = this._calculateBounds(positions);
+  }
 };
 var HivePlotLayout = _HivePlotLayout;
-__publicField(HivePlotLayout, "defaultOptions", {
+__publicField(HivePlotLayout, "defaultProps", {
   innerRadius: 100,
   outerRadius: 500,
   getNodeAxis: (node) => node.getPropertyValue("group")
@@ -1842,10 +2578,15 @@ function computeControlPoint2({ sourcePosition, sourceNodeAxis, targetPosition,
 }
 
 // dist/layers/graph-layer.js
-var import_core16 = require("@deck.gl/core");
+var import_core17 = require("@deck.gl/core");
+var import_layers12 = require("@deck.gl/layers");
+
+// dist/style/graph-style-engine.js
+var import_zod2 = require("zod");
 
 // dist/style/style-property.js
 var import_color = __toESM(require("color"), 1);
+var import_d3_scale = require("d3-scale");
 function getColor(value) {
   if (typeof value === "string") {
     try {
@@ -1854,7 +2595,7 @@ function getColor(value) {
         color[3] *= 255;
       }
       return color;
-    } catch (error) {
+    } catch (error2) {
       return [0, 0, 0];
     }
   }
@@ -1949,93 +2690,588 @@ var DEFAULT_STYLES = {
   offset: null,
   scaleWithZoom: true
 };
-function generateAccessor(key, value) {
+var SCALE_FACTORIES = {
+  linear: () => (0, import_d3_scale.scaleLinear)(),
+  log: () => (0, import_d3_scale.scaleLog)(),
+  pow: () => (0, import_d3_scale.scalePow)(),
+  sqrt: () => (0, import_d3_scale.scaleSqrt)(),
+  quantize: () => (0, import_d3_scale.scaleQuantize)(),
+  quantile: () => (0, import_d3_scale.scaleQuantile)(),
+  ordinal: () => (0, import_d3_scale.scaleOrdinal)()
+};
+function createScaleFromConfig(config) {
+  const type = config.type ?? "linear";
+  const factory = SCALE_FACTORIES[type];
+  if (!factory) {
+    warn(`Invalid scale type: ${type}`);
+    throw new Error(`Invalid scale type: ${type}`);
+  }
+  const scale = factory();
+  const anyScale = scale;
+  if (config.domain && "domain" in scale) {
+    anyScale.domain(config.domain);
+  }
+  if (config.range && "range" in scale) {
+    anyScale.range(config.range);
+  }
+  if (typeof config.clamp === "boolean" && "clamp" in scale && typeof anyScale.clamp === "function") {
+    anyScale.clamp(config.clamp);
+  }
+  if (typeof config.nice !== "undefined" && "nice" in scale && typeof anyScale.nice === "function") {
+    anyScale.nice(config.nice);
+  }
+  if (type === "pow" && typeof config.exponent === "number" && "exponent" in scale && typeof anyScale.exponent === "function") {
+    anyScale.exponent(config.exponent);
+  }
+  if (type === "log" && typeof config.base === "number" && "base" in scale && typeof anyScale.base === "function") {
+    anyScale.base(config.base);
+  }
+  if (typeof config.unknown !== "undefined" && "unknown" in scale && typeof scale.unknown === "function") {
+    scale.unknown(config.unknown);
+  }
+  return scale;
+}
+function normalizeAttributeReference(key, reference) {
+  if (typeof reference === "string") {
+    const attribute2 = reference.startsWith("@") ? reference.slice(1) : reference;
+    if (!attribute2) {
+      throw new Error(`Invalid attribute reference for ${key}: ${reference}`);
+    }
+    return {
+      attribute: attribute2,
+      fallback: DEFAULT_STYLES[key]
+    };
+  }
+  const { attribute, fallback = DEFAULT_STYLES[key], scale } = reference;
+  if (!attribute) {
+    throw new Error(`Invalid attribute reference for ${key}: ${JSON.stringify(reference)}`);
+  }
+  let scaleFn;
+  let scaleConfig;
+  if (scale) {
+    if (typeof scale === "function") {
+      scaleFn = scale;
+      scaleConfig = scale;
+    } else {
+      scaleFn = createScaleFromConfig(scale);
+      scaleConfig = scale;
+    }
+  }
+  return {
+    attribute,
+    fallback,
+    scale: scaleFn,
+    scaleConfig
+  };
+}
+function isAttributeReference(value) {
+  if (typeof value === "string") {
+    return value.startsWith("@");
+  }
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value) && "attribute" in value;
+}
+function isStatefulValue(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value) && !isAttributeReference(value);
+}
+function getAttributeValue(datum, attribute) {
+  if (datum && typeof datum.getPropertyValue === "function") {
+    return datum.getPropertyValue(attribute);
+  }
+  if (datum && typeof datum === "object" && attribute in datum) {
+    return datum[attribute];
+  }
+  return void 0;
+}
+function mergeUpdateTriggers(...triggers) {
+  const filtered = triggers.filter((trigger) => !(trigger === false || trigger === void 0 || trigger === null));
+  if (!filtered.length) {
+    return false;
+  }
+  if (filtered.length === 1) {
+    return filtered[0];
+  }
+  return filtered;
+}
+function createAttributeAccessor(key, attributeRef, formatter) {
+  const accessor = (datum) => {
+    let raw = getAttributeValue(datum, attributeRef.attribute);
+    if (raw === void 0 || raw === null) {
+      raw = attributeRef.fallback;
+    }
+    if (attributeRef.scale) {
+      raw = attributeRef.scale(raw);
+    }
+    const formatted = formatter(raw);
+    if (formatted === null) {
+      warn(`Invalid ${key} value: ${raw}`);
+      throw new Error(`Invalid ${key} value: ${raw}`);
+    }
+    return formatted;
+  };
+  const updateTrigger = {
+    attribute: attributeRef.attribute,
+    scale: attributeRef.scaleConfig ?? null
+  };
+  return { accessor, updateTrigger };
+}
+function describeStyleValue(value) {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean" || typeof value === "undefined") {
+    return String(value);
+  }
+  if (value === null) {
+    return "null";
+  }
+  if (typeof value === "function") {
+    return value.name ? `[Function ${value.name}]` : "[Function]";
+  }
+  if (Array.isArray(value)) {
+    return `[${value.map((item) => describeStyleValue(item)).join(", ")}]`;
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+function parseLeafValue(key, value) {
   const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
-  const valueMap = Object.keys(value).reduce((res, key0) => {
-    res[key0] = value[key0];
-    return res;
-  }, {});
-  return (node) => {
-    const statefulValue = valueMap[node.state];
-    if (!node.state || typeof statefulValue === "undefined") {
-      return valueMap.default || DEFAULT_STYLES[key];
+  if (typeof value === "undefined") {
+    const formatted2 = formatter(DEFAULT_STYLES[key]);
+    if (formatted2 === null) {
+      const description = describeStyleValue(value);
+      warn(`Invalid ${key} value: ${description}`);
+      throw new Error(`Invalid ${key} value: ${description}`);
     }
-    if (typeof statefulValue === "function") {
-      return formatter(statefulValue(node));
+    return { value: formatted2, isAccessor: false, updateTrigger: false };
+  }
+  if (isAttributeReference(value)) {
+    const normalized = normalizeAttributeReference(key, value);
+    const { accessor, updateTrigger } = createAttributeAccessor(key, normalized, formatter);
+    return { value: accessor, isAccessor: true, updateTrigger };
+  }
+  if (typeof value === "function") {
+    return {
+      value: (datum) => formatter(value(datum)),
+      isAccessor: true,
+      updateTrigger: value
+    };
+  }
+  const formatted = formatter(value);
+  if (formatted === null) {
+    const description = describeStyleValue(value);
+    warn(`Invalid ${key} value: ${description}`);
+    throw new Error(`Invalid ${key} value: ${description}`);
+  }
+  return { value: formatted, isAccessor: false, updateTrigger: false };
+}
+function createStatefulAccessor(key, value, stateUpdateTrigger) {
+  const valueMap = {};
+  const attributeTriggers = [];
+  for (const state of Object.keys(value)) {
+    const parsed = parseLeafValue(key, value[state]);
+    valueMap[state] = parsed.value;
+    if (parsed.updateTrigger) {
+      attributeTriggers.push(parsed.updateTrigger);
     }
-    return formatter(statefulValue);
+  }
+  const defaultValue = typeof valueMap.default !== "undefined" ? valueMap.default : parseLeafValue(key, void 0).value;
+  const accessor = (datum) => {
+    const stateValue = (datum == null ? void 0 : datum.state) ? valueMap[datum.state] : void 0;
+    const candidate = typeof stateValue !== "undefined" ? stateValue : defaultValue;
+    return typeof candidate === "function" ? candidate(datum) : candidate;
   };
+  const updateTrigger = mergeUpdateTriggers(stateUpdateTrigger, ...attributeTriggers);
+  return { accessor, updateTrigger };
 }
 var VALUE_TYPE = {
   ACCESSOR: "ACCESSOR",
   PLAIN_VALUE: "PLAIN_VALUE"
 };
-var StyleProperty = class {
-  key;
-  _updateTrigger;
-  _value;
-  _valueType;
-  // for getting default style
-  static getDefault(key) {
-    return DEFAULT_STYLES[key];
+var StyleProperty = class {
+  key;
+  _updateTrigger;
+  _value;
+  _valueType;
+  // for getting default style
+  static getDefault(key) {
+    return DEFAULT_STYLES[key];
+  }
+  // pass the key and value of the property
+  // and format the value properly.
+  constructor({ key, value, updateTrigger }) {
+    this.key = key;
+    this._updateTrigger = false;
+    if (isStatefulValue(value)) {
+      const { accessor, updateTrigger: triggers } = createStatefulAccessor(key, value, updateTrigger);
+      this._value = accessor;
+      this._valueType = VALUE_TYPE.ACCESSOR;
+      this._updateTrigger = triggers;
+    } else {
+      const parsed = parseLeafValue(key, value);
+      this._value = parsed.value;
+      this._valueType = parsed.isAccessor ? VALUE_TYPE.ACCESSOR : VALUE_TYPE.PLAIN_VALUE;
+      this._updateTrigger = mergeUpdateTriggers(parsed.updateTrigger);
+    }
+    if (this._value === null) {
+      warn(`Invalid ${key} value: ${value}`);
+      throw new Error(`Invalid ${key} value: ${value}`);
+    }
+  }
+  // get the formatted value
+  getValue() {
+    return this._value;
+  }
+  getUpdateTrigger() {
+    return this._updateTrigger;
+  }
+};
+
+// dist/style/style-engine.js
+var DEFAULT_UPDATE_TRIGGERS = {};
+var StyleEngine = class {
+  type;
+  properties;
+  deckglAccessorMap;
+  deckglUpdateTriggers;
+  stateUpdateTrigger;
+  StylePropertyClass;
+  getDefaultStyleValue;
+  constructor(style, options) {
+    const {
+      deckglAccessorMap,
+      deckglUpdateTriggers = DEFAULT_UPDATE_TRIGGERS,
+      stateUpdateTrigger = false,
+      StylePropertyClass = StyleProperty,
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      getDefaultStyleValue = StyleProperty.getDefault
+    } = options;
+    const { type: layerType, ...restStyle } = style;
+    if (!layerType || !(layerType in deckglAccessorMap)) {
+      throw new Error(`illegal type: ${layerType}`);
+    }
+    this.type = layerType;
+    this.deckglAccessorMap = deckglAccessorMap;
+    this.deckglUpdateTriggers = deckglUpdateTriggers;
+    this.stateUpdateTrigger = stateUpdateTrigger;
+    this.StylePropertyClass = StylePropertyClass;
+    this.getDefaultStyleValue = getDefaultStyleValue;
+    const rules = Object.keys(restStyle).reduce((res, key) => {
+      const isSelector = key.startsWith(":");
+      if (isSelector) {
+        const state = key.substring(1);
+        res[state] = restStyle[key];
+        return res;
+      }
+      res.default[key] = restStyle[key];
+      return res;
+    }, { default: {} });
+    const attributes = Object.values(rules).reduce((res, rule) => {
+      const attrs = Object.keys(rule || {});
+      const set = /* @__PURE__ */ new Set([...res, ...attrs]);
+      return Array.from(set);
+    }, []);
+    const attrMap = attributes.reduce((res, attr) => {
+      res[attr] = Object.entries(rules).reduce((acc, entry) => {
+        const [state, rule] = entry;
+        if (rule && typeof rule[attr] !== "undefined") {
+          acc[state] = rule[attr];
+        }
+        return acc;
+      }, {});
+      return res;
+    }, {});
+    const simplifiedStyleMap = Object.entries(attrMap).reduce((res, entry) => {
+      const [attr, valueMap] = entry;
+      const states = Object.keys(valueMap);
+      const onlyDefault = states.length === 1 && valueMap.default !== void 0;
+      if (onlyDefault) {
+        res[attr] = valueMap.default;
+        return res;
+      }
+      res[attr] = valueMap;
+      return res;
+    }, {});
+    this.properties = {};
+    for (const key in simplifiedStyleMap) {
+      this.properties[key] = new this.StylePropertyClass({
+        key,
+        value: simplifiedStyleMap[key],
+        updateTrigger: this.stateUpdateTrigger
+      });
+    }
+  }
+  getDeckGLAccessorMapForType() {
+    return this.deckglAccessorMap[this.type];
+  }
+  getDeckGLUpdateTriggersForType() {
+    return this.deckglUpdateTriggers[this.type] || [];
+  }
+  _getProperty(deckglAccessor) {
+    const map = this.getDeckGLAccessorMapForType();
+    if (!map) {
+      throw new Error(`illegal type: ${this.type}`);
+    }
+    const styleProp = map[deckglAccessor];
+    if (!styleProp) {
+      error(`Invalid DeckGL accessor: ${deckglAccessor}`);
+      throw new Error(`Invalid DeckGL accessor: ${deckglAccessor}`);
+    }
+    return this.properties[styleProp];
+  }
+  getDeckGLAccessor(deckglAccessor) {
+    var _a;
+    const property = this._getProperty(deckglAccessor);
+    if (property) {
+      const value = property.getValue();
+      return typeof value === "function" ? value : () => value;
+    }
+    const styleProp = (_a = this.getDeckGLAccessorMapForType()) == null ? void 0 : _a[deckglAccessor];
+    return this.getDefaultStyleValue(styleProp);
+  }
+  getDeckGLAccessorUpdateTrigger(deckglAccessor) {
+    const property = this._getProperty(deckglAccessor);
+    if (property) {
+      return property.getUpdateTrigger();
+    }
+    return false;
+  }
+  getDeckGLAccessors() {
+    const accessorMap = this.getDeckGLAccessorMapForType();
+    return Object.keys(accessorMap).reduce((res, accessor) => {
+      res[accessor] = this.getDeckGLAccessor(accessor);
+      return res;
+    }, {});
+  }
+  getDeckGLUpdateTriggers() {
+    return this.getDeckGLUpdateTriggersForType().reduce((res, accessor) => {
+      res[accessor] = this.getDeckGLAccessorUpdateTrigger(accessor);
+      return res;
+    }, {});
+  }
+};
+
+// dist/style/graph-stylesheet.schema.js
+var import_zod = require("zod");
+var GraphStylePrimitiveSchema = import_zod.z.union([
+  import_zod.z.string(),
+  import_zod.z.number(),
+  import_zod.z.boolean(),
+  import_zod.z.null(),
+  import_zod.z.array(import_zod.z.union([import_zod.z.string(), import_zod.z.number(), import_zod.z.boolean(), import_zod.z.null()]))
+]);
+var GraphStyleFunctionSchema = import_zod.z.custom((value) => typeof value === "function", {
+  message: "Style functions must be callable."
+});
+var GraphStyleScaleTypeEnum = import_zod.z.enum([
+  "linear",
+  "log",
+  "pow",
+  "sqrt",
+  "quantize",
+  "quantile",
+  "ordinal"
+]);
+var GraphStyleScaleSchema = import_zod.z.object({
+  type: GraphStyleScaleTypeEnum.optional(),
+  domain: import_zod.z.array(import_zod.z.union([import_zod.z.number(), import_zod.z.string()])).optional(),
+  range: import_zod.z.array(import_zod.z.any()).optional(),
+  clamp: import_zod.z.boolean().optional(),
+  nice: import_zod.z.union([import_zod.z.boolean(), import_zod.z.number()]).optional(),
+  base: import_zod.z.number().optional(),
+  exponent: import_zod.z.number().optional(),
+  unknown: import_zod.z.any().optional()
+}).strict();
+var GraphStyleAttributeReferenceSchema = import_zod.z.union([
+  import_zod.z.string().regex(/^@.+/, 'Attribute reference strings must start with "@" and include an attribute name.'),
+  import_zod.z.object({
+    attribute: import_zod.z.string().min(1, "Attribute name is required."),
+    fallback: GraphStylePrimitiveSchema.optional(),
+    scale: import_zod.z.union([GraphStyleScaleSchema, GraphStyleFunctionSchema]).optional()
+  }).strict()
+]);
+var GraphStyleLeafValueSchema = import_zod.z.union([
+  GraphStylePrimitiveSchema,
+  GraphStyleAttributeReferenceSchema,
+  GraphStyleFunctionSchema
+]);
+var RESERVED_STATE_KEYS = /* @__PURE__ */ new Set(["attribute", "fallback", "scale"]);
+var GraphStyleStateMapSchema = import_zod.z.record(import_zod.z.string().refine((key) => !RESERVED_STATE_KEYS.has(key), "State overrides must not use reserved keys."), GraphStyleLeafValueSchema);
+var GraphStyleValueSchema = import_zod.z.union([
+  GraphStyleLeafValueSchema,
+  GraphStyleStateMapSchema
+]);
+var COMMON_DECKGL_PROPS = {
+  getOffset: "offset",
+  opacity: "opacity"
+};
+var GRAPH_DECKGL_ACCESSOR_MAP = {
+  circle: {
+    ...COMMON_DECKGL_PROPS,
+    getFillColor: "fill",
+    getLineColor: "stroke",
+    getLineWidth: "strokeWidth",
+    getRadius: "radius"
+  },
+  rectangle: {
+    ...COMMON_DECKGL_PROPS,
+    getWidth: "width",
+    getHeight: "height",
+    getFillColor: "fill",
+    getLineColor: "stroke",
+    getLineWidth: "strokeWidth"
+  },
+  "rounded-rectangle": {
+    ...COMMON_DECKGL_PROPS,
+    getCornerRadius: "cornerRadius",
+    getRadius: "radius",
+    getWidth: "width",
+    getHeight: "height",
+    getFillColor: "fill",
+    getLineColor: "stroke",
+    getLineWidth: "strokeWidth"
+  },
+  "path-rounded-rectangle": {
+    ...COMMON_DECKGL_PROPS,
+    getWidth: "width",
+    getHeight: "height",
+    getFillColor: "fill",
+    getLineColor: "stroke",
+    getLineWidth: "strokeWidth",
+    getCornerRadius: "cornerRadius"
+  },
+  label: {
+    ...COMMON_DECKGL_PROPS,
+    getColor: "color",
+    getText: "text",
+    getSize: "fontSize",
+    getTextAnchor: "textAnchor",
+    getAlignmentBaseline: "alignmentBaseline",
+    getAngle: "angle",
+    scaleWithZoom: "scaleWithZoom",
+    textMaxWidth: "textMaxWidth",
+    textWordBreak: "textWordBreak",
+    textSizeMinPixels: "textSizeMinPixels"
+  },
+  marker: {
+    ...COMMON_DECKGL_PROPS,
+    getColor: "fill",
+    getSize: "size",
+    getMarker: "marker",
+    scaleWithZoom: "scaleWithZoom"
+  },
+  Edge: {
+    getColor: "stroke",
+    getWidth: "strokeWidth"
+  },
+  edge: {
+    getColor: "stroke",
+    getWidth: "strokeWidth"
+  },
+  "edge-label": {
+    getColor: "color",
+    getText: "text",
+    getSize: "fontSize",
+    getTextAnchor: "textAnchor",
+    getAlignmentBaseline: "alignmentBaseline",
+    scaleWithZoom: "scaleWithZoom",
+    textMaxWidth: "textMaxWidth",
+    textWordBreak: "textWordBreak",
+    textSizeMinPixels: "textSizeMinPixels"
+  },
+  flow: {
+    getColor: "color",
+    getWidth: "width",
+    getSpeed: "speed",
+    getTailLength: "tailLength"
+  },
+  arrow: {
+    getColor: "color",
+    getSize: "size",
+    getOffset: "offset"
+  }
+};
+var GraphStyleSelectorKeySchema = import_zod.z.string().regex(/^:[^\s]+/, 'Selectors must start with ":".');
+function createPropertiesSchema(keys) {
+  const shape = keys.reduce((acc, key) => {
+    acc[key] = GraphStyleValueSchema.optional();
+    return acc;
+  }, {});
+  return import_zod.z.object(shape).partial().strict();
+}
+var GraphStylesheetVariants = Object.entries(GRAPH_DECKGL_ACCESSOR_MAP).map(([type, accessors]) => {
+  const propertyKeys = Object.values(accessors);
+  const propertyKeySet = new Set(propertyKeys);
+  const propertiesSchema = createPropertiesSchema(propertyKeys);
+  const baseShape = {
+    type: import_zod.z.literal(type)
+  };
+  for (const key of propertyKeys) {
+    baseShape[key] = GraphStyleValueSchema.optional();
   }
-  // pass the key and value of the property
-  // and format the value properly.
-  constructor({ key, value, updateTrigger }) {
-    this.key = key;
-    this._updateTrigger = false;
-    if (typeof value === "object" && !Array.isArray(value)) {
-      this._value = generateAccessor(key, value);
-      this._valueType = VALUE_TYPE.ACCESSOR;
-      this._updateTrigger = updateTrigger;
-    } else if (typeof value === "function") {
-      const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
-      this._value = (d) => formatter(value(d));
-      this._valueType = VALUE_TYPE.ACCESSOR;
-      this._updateTrigger = value;
-    } else {
-      const formatter = PROPERTY_FORMATTERS[key] || IDENTITY;
-      this._value = formatter(value);
-      this._valueType = VALUE_TYPE.PLAIN_VALUE;
-      this._updateTrigger = false;
-    }
-    if (this._value === null) {
-      log.warn(`Invalid ${key} value: ${value}`)();
-      throw new Error(`Invalid ${key} value: ${value}`);
+  return import_zod.z.object(baseShape).catchall(import_zod.z.unknown()).superRefine((value, ctx) => {
+    for (const key of Object.keys(value)) {
+      if (key === "type") {
+        continue;
+      }
+      if (propertyKeySet.has(key)) {
+        continue;
+      }
+      if (!key.startsWith(":")) {
+        ctx.addIssue({
+          code: import_zod.z.ZodIssueCode.custom,
+          path: [key],
+          message: `Unknown style property "${key}".`
+        });
+        continue;
+      }
+      if (!GraphStyleSelectorKeySchema.safeParse(key).success) {
+        ctx.addIssue({
+          code: import_zod.z.ZodIssueCode.custom,
+          path: [key],
+          message: 'Selectors must start with ":".'
+        });
+        continue;
+      }
+      const selectorResult = propertiesSchema.safeParse(value[key]);
+      if (!selectorResult.success) {
+        for (const issue of selectorResult.error.issues) {
+          ctx.addIssue({
+            ...issue,
+            path: [key, ...issue.path ?? []]
+          });
+        }
+      }
     }
-  }
-  // get the formatted value
-  getValue() {
-    return this._value;
-  }
-  getUpdateTrigger() {
-    return this._updateTrigger;
-  }
-};
+  });
+});
+var GraphStylesheetSchema = import_zod.z.discriminatedUnion("type", GraphStylesheetVariants);
 
-// dist/style/style-sheet.js
-var COMMON_DECKGL_PROPS = {
+// dist/style/graph-style-accessor-map.js
+var COMMON_DECKGL_PROPS2 = {
   getOffset: "offset",
   opacity: "opacity"
 };
-var DECKGL_ACCESSOR_MAP = {
-  [NODE_TYPE.CIRCLE]: {
-    ...COMMON_DECKGL_PROPS,
+var GRAPH_DECKGL_ACCESSOR_MAP2 = {
+  circle: {
+    ...COMMON_DECKGL_PROPS2,
     getFillColor: "fill",
     getLineColor: "stroke",
     getLineWidth: "strokeWidth",
     getRadius: "radius"
   },
-  [NODE_TYPE.RECTANGLE]: {
-    ...COMMON_DECKGL_PROPS,
+  rectangle: {
+    ...COMMON_DECKGL_PROPS2,
     getWidth: "width",
     getHeight: "height",
     getFillColor: "fill",
     getLineColor: "stroke",
     getLineWidth: "strokeWidth"
   },
-  [NODE_TYPE.ROUNDED_RECTANGLE]: {
-    ...COMMON_DECKGL_PROPS,
+  "rounded-rectangle": {
+    ...COMMON_DECKGL_PROPS2,
     getCornerRadius: "cornerRadius",
     getRadius: "radius",
     getWidth: "width",
@@ -2044,8 +3280,8 @@ var DECKGL_ACCESSOR_MAP = {
     getLineColor: "stroke",
     getLineWidth: "strokeWidth"
   },
-  [NODE_TYPE.PATH_ROUNDED_RECTANGLE]: {
-    ...COMMON_DECKGL_PROPS,
+  "path-rounded-rectangle": {
+    ...COMMON_DECKGL_PROPS2,
     getWidth: "width",
     getHeight: "height",
     getFillColor: "fill",
@@ -2053,8 +3289,8 @@ var DECKGL_ACCESSOR_MAP = {
     getLineWidth: "strokeWidth",
     getCornerRadius: "cornerRadius"
   },
-  [NODE_TYPE.LABEL]: {
-    ...COMMON_DECKGL_PROPS,
+  label: {
+    ...COMMON_DECKGL_PROPS2,
     getColor: "color",
     getText: "text",
     getSize: "fontSize",
@@ -2066,19 +3302,22 @@ var DECKGL_ACCESSOR_MAP = {
     textWordBreak: "textWordBreak",
     textSizeMinPixels: "textSizeMinPixels"
   },
-  [NODE_TYPE.MARKER]: {
-    ...COMMON_DECKGL_PROPS,
+  marker: {
+    ...COMMON_DECKGL_PROPS2,
     getColor: "fill",
     getSize: "size",
     getMarker: "marker",
     scaleWithZoom: "scaleWithZoom"
   },
-  // --------- Edge related ---------
   Edge: {
     getColor: "stroke",
     getWidth: "strokeWidth"
   },
-  [EDGE_DECORATOR_TYPE.LABEL]: {
+  edge: {
+    getColor: "stroke",
+    getWidth: "strokeWidth"
+  },
+  "edge-label": {
     getColor: "color",
     getText: "text",
     getSize: "fontSize",
@@ -2089,143 +3328,165 @@ var DECKGL_ACCESSOR_MAP = {
     textWordBreak: "textWordBreak",
     textSizeMinPixels: "textSizeMinPixels"
   },
-  [EDGE_DECORATOR_TYPE.FLOW]: {
+  flow: {
     getColor: "color",
     getWidth: "width",
     getSpeed: "speed",
     getTailLength: "tailLength"
+  },
+  arrow: {
+    getColor: "color",
+    getSize: "size",
+    getOffset: "offset"
   }
 };
-var DECKGL_UPDATE_TRIGGERS = {
-  [NODE_TYPE.CIRCLE]: ["getFillColor", "getRadius", "getLineColor", "getLineWidth"],
-  [NODE_TYPE.RECTANGLE]: ["getFillColor", "getLineColor", "getLineWidth"],
-  [NODE_TYPE.ROUNDED_RECTANGLE]: [
-    "getFillColor",
-    "getLineColor",
-    "getLineWidth",
-    "getCornerRadius"
-  ],
-  [NODE_TYPE.PATH_ROUNDED_RECTANGLE]: [
-    "getFillColor",
-    "getLineColor",
-    "getLineWidth",
-    "getCornerRadius"
-  ],
-  [NODE_TYPE.LABEL]: [
-    "getColor",
-    "getText",
-    "getSize",
-    "getTextAnchor",
-    "getAlignmentBaseline",
-    "getAngle"
-  ],
-  [NODE_TYPE.MARKER]: ["getColor", "getSize", "getMarker"],
+
+// dist/style/graph-style-engine.js
+var GRAPH_DECKGL_UPDATE_TRIGGERS = {
+  circle: ["getFillColor", "getRadius", "getLineColor", "getLineWidth"],
+  rectangle: ["getFillColor", "getLineColor", "getLineWidth"],
+  "rounded-rectangle": ["getFillColor", "getLineColor", "getLineWidth", "getCornerRadius"],
+  "path-rounded-rectangle": ["getFillColor", "getLineColor", "getLineWidth", "getCornerRadius"],
+  label: ["getColor", "getText", "getSize", "getTextAnchor", "getAlignmentBaseline", "getAngle"],
+  marker: ["getColor", "getSize", "getMarker"],
   Edge: ["getColor", "getWidth"],
-  [EDGE_DECORATOR_TYPE.LABEL]: [
-    "getColor",
-    "getText",
-    "getSize",
-    "getTextAnchor",
-    "getAlignmentBaseline"
-  ],
-  [EDGE_DECORATOR_TYPE.FLOW]: ["getColor", "getWidth", "getSpeed", "getTailLength"]
+  edge: ["getColor", "getWidth"],
+  "edge-label": ["getColor", "getText", "getSize", "getTextAnchor", "getAlignmentBaseline"],
+  flow: ["getColor", "getWidth", "getSpeed", "getTailLength"],
+  arrow: ["getColor", "getSize", "getOffset"]
 };
-var Stylesheet = class {
-  type;
-  properties;
-  constructor(style, updateTriggers) {
-    const { type: layerType, ...restStyle } = style;
-    if (!layerType || !(layerType in DECKGL_ACCESSOR_MAP)) {
-      throw new Error(`illegal type: ${layerType}`);
-    }
-    this.type = layerType;
-    const rules = Object.keys(restStyle).reduce((res, key) => {
-      const isSelector = key.startsWith(":");
-      if (isSelector) {
-        const state = key.substring(1);
-        res[state] = restStyle[key];
-        return res;
-      }
-      res.default[key] = restStyle[key];
-      return res;
-    }, {
-      default: {}
+function formatStylesheetError(error2) {
+  const details = error2.issues.map((issue) => {
+    const path = issue.path.length ? issue.path.join(".") : "root";
+    return `  \u2022 ${path}: ${issue.message}`;
+  }).join("\n");
+  return `Invalid graph stylesheet:
+${details}`;
+}
+var GraphStyleEngine = class extends StyleEngine {
+  constructor(style, { stateUpdateTrigger } = {}) {
+    const result = GraphStylesheetSchema.safeParse(style);
+    const parsedStyle = result.success ? result.data : sanitizeStylesheet(style, result.error.issues);
+    super(parsedStyle, {
+      deckglAccessorMap: GRAPH_DECKGL_ACCESSOR_MAP2,
+      deckglUpdateTriggers: GRAPH_DECKGL_UPDATE_TRIGGERS,
+      stateUpdateTrigger
     });
-    const attributes = Object.values(rules).reduce((res, rule) => {
-      const attrs = Object.keys(rule);
-      const set = /* @__PURE__ */ new Set([...res, ...attrs]);
-      return Array.from(set);
-    }, []);
-    const attrMap = attributes.reduce((res, attr) => {
-      res[attr] = Object.entries(rules).reduce((acc, entry) => {
-        const [state, rule] = entry;
-        if (typeof rule[attr] !== "undefined") {
-          acc[state] = rule[attr];
-        }
-        return acc;
-      }, {});
-      return res;
-    }, {});
-    const simplifiedStyleMap = Object.entries(attrMap).reduce((res, entry) => {
-      const [attr, valueMap] = entry;
-      const onlyDefault = Object.keys(valueMap).length === 1 && valueMap.default !== void 0;
-      if (onlyDefault) {
-        res[attr] = valueMap.default;
-        return res;
+  }
+};
+function sanitizeStylesheet(style, issues) {
+  if (issues.length) {
+    const details = issues.map((issue) => {
+      const path = issue.path.length ? issue.path.join(".") : "root";
+      return `${path}: ${issue.message}`;
+    }).join("\n  \u2022 ");
+    warn(`GraphStyleEngine: stylesheet issues detected:
+  \u2022 ${details}`);
+  }
+  const fallbackTypeCandidate = typeof style.type === "string" ? style.type : void 0;
+  const fallbackCandidates = Array.from(new Set([fallbackTypeCandidate, "edge"].filter((value) => typeof value === "string" && value.length > 0)));
+  for (const candidate of fallbackCandidates) {
+    const sanitized = cloneValue(style);
+    sanitized.type = candidate;
+    for (const issue of issues) {
+      if (!Array.isArray(issue.path) || issue.path.length === 0) {
+        continue;
       }
-      res[attr] = valueMap;
-      return res;
-    }, {});
-    this.properties = {};
-    for (const key in simplifiedStyleMap) {
-      this.properties[key] = new StyleProperty({
-        key,
-        value: simplifiedStyleMap[key],
-        updateTrigger: updateTriggers.stateUpdateTrigger
-      });
+      const path = issue.path.filter((segment) => typeof segment === "string" || typeof segment === "number");
+      if (path.length === 0) {
+        continue;
+      }
+      const [rootKey] = path;
+      if (rootKey === void 0 || rootKey === "type") {
+        continue;
+      }
+      if (typeof rootKey === "string" && rootKey.startsWith(":")) {
+        removeNestedProperty(sanitized, path);
+        continue;
+      }
+      if (typeof rootKey !== "string") {
+        continue;
+      }
+      delete sanitized[rootKey];
+    }
+    const result = GraphStylesheetSchema.safeParse(sanitized);
+    if (result.success) {
+      return result.data;
     }
   }
-  _getProperty(deckglAccessor) {
-    const map = DECKGL_ACCESSOR_MAP[this.type];
-    if (!map) {
-      throw new Error(`illegal type: ${this.type}`);
+  throw new Error(formatStylesheetError(new import_zod2.ZodError(issues)));
+}
+function cloneValue(value) {
+  if (Array.isArray(value)) {
+    return value.map((item) => cloneValue(item));
+  }
+  if (value && typeof value === "object") {
+    if (value instanceof Date) {
+      return new Date(value);
     }
-    const styleProp = map[deckglAccessor];
-    if (!styleProp) {
-      log.error(`Invalid DeckGL accessor: ${deckglAccessor}`)();
-      throw new Error(`Invalid DeckGL accessor: ${deckglAccessor}`);
+    if (value instanceof RegExp) {
+      return new RegExp(value.source, value.flags);
     }
-    return this.properties[styleProp];
-  }
-  getDeckGLAccessor(deckglAccessor) {
-    const property = this._getProperty(deckglAccessor);
-    if (property) {
-      return property.getValue();
+    const cloned = {};
+    for (const [key, entryValue] of Object.entries(value)) {
+      cloned[key] = cloneValue(entryValue);
     }
-    const styleProp = DECKGL_ACCESSOR_MAP[this.type][deckglAccessor];
-    return StyleProperty.getDefault(styleProp);
+    return cloned;
   }
-  getDeckGLAccessorUpdateTrigger(deckglAccessor) {
-    const property = this._getProperty(deckglAccessor);
-    if (property) {
-      return property.getUpdateTrigger();
+  return value;
+}
+function removeNestedProperty(target, path) {
+  if (path.length === 0) {
+    return;
+  }
+  const [head, ...rest] = path;
+  if (head === void 0) {
+    return;
+  }
+  if (Array.isArray(target)) {
+    const index = typeof head === "number" ? head : Number(head);
+    if (!Number.isInteger(index) || index < 0 || index >= target.length) {
+      return;
     }
-    return false;
+    if (rest.length === 0) {
+      target.splice(index, 1);
+      return;
+    }
+    const child2 = target[index];
+    if (!child2 || typeof child2 !== "object") {
+      target.splice(index, 1);
+      return;
+    }
+    removeNestedProperty(child2, rest);
+    if (isEmptyObject(child2)) {
+      target.splice(index, 1);
+    }
+    return;
   }
-  getDeckGLAccessors() {
-    const accessorMap = DECKGL_ACCESSOR_MAP[this.type];
-    return Object.keys(accessorMap).reduce((res, accessor) => {
-      res[accessor] = this.getDeckGLAccessor(accessor);
-      return res;
-    }, {});
+  const recordTarget = target;
+  if (rest.length === 0) {
+    delete recordTarget[head];
+    return;
   }
-  getDeckGLUpdateTriggers() {
-    return DECKGL_UPDATE_TRIGGERS[this.type].reduce((res, accessor) => {
-      res[accessor] = this.getDeckGLAccessorUpdateTrigger(accessor);
-      return res;
-    }, {});
+  const child = recordTarget[head];
+  if (!child || typeof child !== "object") {
+    delete recordTarget[head];
+    return;
   }
-};
+  removeNestedProperty(child, rest);
+  if (isEmptyObject(child)) {
+    delete recordTarget[head];
+  }
+}
+function isEmptyObject(value) {
+  if (Array.isArray(value)) {
+    return value.length === 0;
+  }
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  return Object.keys(value).length === 0;
+}
 
 // dist/utils/layer-utils.js
 var mixedGetPosition = (getPosition, getOffset2) => {
@@ -2246,15 +3507,210 @@ var mixedGetPosition = (getPosition, getOffset2) => {
   };
 };
 
+// dist/utils/collapsed-chains.js
+var OUTLINE_PADDING = 24;
+var OUTLINE_CORNER_RADIUS = 16;
+var OUTLINE_CORNER_SEGMENTS = 6;
+function resolveLayerId(layer) {
+  var _a;
+  if (!layer) {
+    return "";
+  }
+  if (typeof layer.id === "string") {
+    return layer.id;
+  }
+  if (typeof ((_a = layer.props) == null ? void 0 : _a.id) === "string") {
+    return layer.props.id;
+  }
+  return "";
+}
+function classifyChainLayer(layer) {
+  let current = layer ?? null;
+  while (current) {
+    const layerId = resolveLayerId(current);
+    if (layerId.includes("collapsed-chain-markers")) {
+      return "collapsed-marker";
+    }
+    if (layerId.includes("expanded-chain-markers")) {
+      return "expanded-marker";
+    }
+    if (layerId.includes("collapsed-chain-outlines")) {
+      return "collapsed-outline";
+    }
+    if (layerId.includes("expanded-chain-outlines")) {
+      return "expanded-outline";
+    }
+    current = current.parent ?? null;
+  }
+  return null;
+}
+function resolveChainInteractionSource(info) {
+  if (!info) {
+    return "node";
+  }
+  const layersToCheck = [];
+  if (info.layer || info.sourceLayer) {
+    if (info.layer) {
+      layersToCheck.push(info.layer);
+    }
+    if (info.sourceLayer && info.sourceLayer !== info.layer) {
+      layersToCheck.push(info.sourceLayer);
+    }
+  } else {
+    layersToCheck.push(info);
+  }
+  for (const layer of layersToCheck) {
+    const classification = classifyChainLayer(layer);
+    if (classification) {
+      return classification;
+    }
+  }
+  return "node";
+}
+function isChainRepresentative(node) {
+  const chainId = node.getPropertyValue("collapsedChainId");
+  const nodeIds = node.getPropertyValue("collapsedNodeIds");
+  const representativeId = node.getPropertyValue("collapsedChainRepresentativeId");
+  return Boolean(chainId) && Array.isArray(nodeIds) && nodeIds.length > 1 && representativeId === node.getId();
+}
+function getRepresentativeNodes(engine) {
+  if (!engine) {
+    return [];
+  }
+  return engine.getNodes().filter((node) => isChainRepresentative(node));
+}
+function createChainOutlineGetter(engine) {
+  if (!engine) {
+    return () => null;
+  }
+  const graph = engine.props.graph;
+  const cache = /* @__PURE__ */ new Map();
+  return (node) => {
+    const chainId = node.getPropertyValue("collapsedChainId");
+    if (!chainId) {
+      return null;
+    }
+    const cacheKey = String(chainId);
+    if (cache.has(cacheKey)) {
+      return cache.get(cacheKey) ?? null;
+    }
+    if (!graph) {
+      cache.set(cacheKey, null);
+      return null;
+    }
+    const collapsedNodeIds = node.getPropertyValue("collapsedNodeIds");
+    if (!Array.isArray(collapsedNodeIds) || collapsedNodeIds.length === 0) {
+      cache.set(cacheKey, null);
+      return null;
+    }
+    let minX = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const nodeId of collapsedNodeIds) {
+      const chainNode = graph.findNode(nodeId);
+      if (chainNode) {
+        const position = engine.getNodePosition(chainNode);
+        if (position) {
+          const [x, y] = position;
+          minX = Math.min(minX, x);
+          maxX = Math.max(maxX, x);
+          minY = Math.min(minY, y);
+          maxY = Math.max(maxY, y);
+        }
+      }
+    }
+    if (!Number.isFinite(minX) || !Number.isFinite(maxX) || !Number.isFinite(minY) || !Number.isFinite(maxY)) {
+      cache.set(cacheKey, null);
+      return null;
+    }
+    const paddedMinX = minX - OUTLINE_PADDING;
+    const paddedMaxX = maxX + OUTLINE_PADDING;
+    const paddedMinY = minY - OUTLINE_PADDING;
+    const paddedMaxY = maxY + OUTLINE_PADDING;
+    const width = paddedMaxX - paddedMinX;
+    const height = paddedMaxY - paddedMinY;
+    if (width <= 0 || height <= 0) {
+      cache.set(cacheKey, null);
+      return null;
+    }
+    const radius = Math.min(OUTLINE_CORNER_RADIUS, width / 2, height / 2);
+    if (radius <= 0) {
+      const polygon2 = [
+        [paddedMinX, paddedMinY],
+        [paddedMinX, paddedMaxY],
+        [paddedMaxX, paddedMaxY],
+        [paddedMaxX, paddedMinY],
+        [paddedMinX, paddedMinY]
+      ];
+      cache.set(cacheKey, polygon2);
+      return polygon2;
+    }
+    const left = paddedMinX;
+    const right = paddedMaxX;
+    const top = paddedMinY;
+    const bottom = paddedMaxY;
+    const polygon = [];
+    const pushArc = (cx, cy, startAngle, endAngle) => {
+      const step = (endAngle - startAngle) / OUTLINE_CORNER_SEGMENTS;
+      for (let i = 1; i <= OUTLINE_CORNER_SEGMENTS; i++) {
+        const angle = startAngle + step * i;
+        polygon.push([cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)]);
+      }
+    };
+    polygon.push([right - radius, top]);
+    pushArc(right - radius, top + radius, -Math.PI / 2, 0);
+    polygon.push([right, bottom - radius]);
+    pushArc(right - radius, bottom - radius, 0, Math.PI / 2);
+    polygon.push([left + radius, bottom]);
+    pushArc(left + radius, bottom - radius, Math.PI / 2, Math.PI);
+    polygon.push([left, top + radius]);
+    pushArc(left + radius, top + radius, Math.PI, 3 * Math.PI / 2);
+    polygon.push(polygon[0]);
+    cache.set(cacheKey, polygon);
+    return polygon;
+  };
+}
+function buildCollapsedChainLayers(engine) {
+  if (!engine) {
+    return null;
+  }
+  const representativeNodes = getRepresentativeNodes(engine);
+  if (representativeNodes.length === 0) {
+    return null;
+  }
+  const getChainOutlinePolygon = createChainOutlineGetter(engine);
+  const outlineUpdateTrigger = [engine.getLayoutLastUpdate(), engine.getLayoutState()].join();
+  const collapsedNodes = representativeNodes.filter((node) => Boolean(node.getPropertyValue("isCollapsedChain")));
+  const collapsedOutlineNodes = collapsedNodes.filter((node) => getChainOutlinePolygon(node));
+  const expandedNodes = representativeNodes.filter((node) => !node.getPropertyValue("isCollapsedChain"));
+  const expandedOutlineNodes = expandedNodes.filter((node) => getChainOutlinePolygon(node));
+  return {
+    representativeNodes,
+    collapsedNodes,
+    collapsedOutlineNodes,
+    expandedNodes,
+    expandedOutlineNodes,
+    getChainOutlinePolygon,
+    outlineUpdateTrigger
+  };
+}
+
 // dist/core/interaction-manager.js
+function shouldToggleCollapsedChain(isCollapsed, source) {
+  if (isCollapsed) {
+    return true;
+  }
+  return source === "expanded-marker" || source === "expanded-outline";
+}
 var NODE_TO_EDGE_STATE_MAP = {
-  [NODE_STATE.DEFAULT]: EDGE_STATE.DEFAULT,
-  [NODE_STATE.HOVER]: EDGE_STATE.HOVER,
-  [NODE_STATE.DRAGGING]: EDGE_STATE.DRAGGING,
-  [NODE_STATE.SELECTED]: EDGE_STATE.SELECTED
+  default: "default",
+  hover: "hover",
+  dragging: "dragging",
+  selected: "selected"
 };
 function shouldEdgeBeSelected(edge) {
-  return edge.getConnectedNodes().some((node) => node.getState() === NODE_STATE.SELECTED && node.shouldHighlightConnectedEdges());
+  return edge.getConnectedNodes().some((node) => node.getState() === "selected" && node.shouldHighlightConnectedEdges());
 }
 function setNodeState(node, state) {
   node.setState(state);
@@ -2262,7 +3718,7 @@ function setNodeState(node, state) {
     node.getConnectedEdges().forEach((edge) => {
       let newEdgeState = NODE_TO_EDGE_STATE_MAP[state];
       if (shouldEdgeBeSelected(edge)) {
-        newEdgeState = EDGE_STATE.SELECTED;
+        newEdgeState = "selected";
       }
       edge.setState(newEdgeState);
     });
@@ -2295,18 +3751,46 @@ var InteractionManager = class {
   getLastInteraction() {
     return this._lastInteraction;
   }
+  // eslint-disable-next-line max-statements, complexity
   onClick(info, event) {
+    var _a, _b;
     const { object } = info;
     if (!object) {
       return;
     }
     if (object.isNode) {
+      const node = object;
+      const chainId = node.getPropertyValue("collapsedChainId");
+      const collapsedNodeIds = node.getPropertyValue("collapsedNodeIds");
+      const representativeId = node.getPropertyValue("collapsedChainRepresentativeId");
+      const isCollapsed = Boolean(node.getPropertyValue("isCollapsedChain"));
+      const hasChainMetadata = chainId !== null && chainId !== void 0 && Array.isArray(collapsedNodeIds) && collapsedNodeIds.length > 1 && representativeId !== null && representativeId !== void 0;
+      const isRepresentative = hasChainMetadata && representativeId === node.getId();
+      if (hasChainMetadata && isRepresentative) {
+        const layout = (_b = (_a = this.engine) == null ? void 0 : _a.props) == null ? void 0 : _b.layout;
+        if (layout && typeof layout.toggleCollapsedChain === "function") {
+          const interactionSource = resolveChainInteractionSource(info ?? null);
+          if (shouldToggleCollapsedChain(isCollapsed, interactionSource)) {
+            const action = isCollapsed ? "expand" : "collapse";
+            const chainIdStr = String(chainId);
+            log.log(0, `InteractionManager: ${action} chain ${chainIdStr} via ${interactionSource}`);
+            console.log(`InteractionManager: ${action} chain ${chainIdStr} via ${interactionSource}`);
+            layout.toggleCollapsedChain(chainIdStr);
+            this._lastInteraction = Date.now();
+            this.notifyCallback();
+            if (this.nodeEvents.onClick) {
+              this.nodeEvents.onClick(info, event);
+            }
+            return;
+          }
+        }
+      }
       if (object.isSelectable()) {
         if (this._lastSelectedNode) {
-          setNodeState(this._lastSelectedNode, NODE_STATE.DEFAULT);
+          setNodeState(this._lastSelectedNode, "default");
         }
-        setNodeState(object, NODE_STATE.SELECTED);
-        this._lastSelectedNode = object;
+        setNodeState(node, "selected");
+        this._lastSelectedNode = node;
         this._lastInteraction = Date.now();
         this.notifyCallback();
       }
@@ -2321,8 +3805,8 @@ var InteractionManager = class {
   _mouseLeaveNode() {
     var _a;
     const lastHoveredNode = this._lastHoveredNode;
-    if (!(lastHoveredNode.isSelectable() && lastHoveredNode.getState() === NODE_STATE.SELECTED)) {
-      const newState = this._lastSelectedNode !== null && this._lastSelectedNode.id === ((_a = this._lastHoveredNode) == null ? void 0 : _a.id) ? NODE_STATE.SELECTED : NODE_STATE.DEFAULT;
+    if (!(lastHoveredNode.isSelectable() && lastHoveredNode.getState() === "selected")) {
+      const newState = this._lastSelectedNode !== null && this._lastSelectedNode.id === ((_a = this._lastHoveredNode) == null ? void 0 : _a.id) ? "selected" : "default";
       setNodeState(lastHoveredNode, newState);
     }
     if (this.nodeEvents.onMouseLeave) {
@@ -2330,7 +3814,7 @@ var InteractionManager = class {
     }
   }
   _mouseEnterNode(info) {
-    setNodeState(info.object, NODE_STATE.HOVER);
+    setNodeState(info.object, "hover");
     if (this.nodeEvents.onMouseEnter) {
       this.nodeEvents.onMouseEnter(info);
     }
@@ -2380,7 +3864,7 @@ var InteractionManager = class {
     const x = Math.min(Math.max(coordinates[0], bounds[0]), bounds[2]);
     const y = Math.min(Math.max(coordinates[1], bounds[1]), bounds[3]);
     this.engine.lockNodePosition(info.object, x, y);
-    setNodeState(info.object, NODE_STATE.DRAGGING);
+    setNodeState(info.object, "dragging");
     this._lastInteraction = Date.now();
     this.notifyCallback();
     if (this.nodeEvents.onDrag) {
@@ -2394,11 +3878,39 @@ var InteractionManager = class {
     if (this.resumeLayoutAfterDragging) {
       this.engine.resume();
     }
-    setNodeState(info.object, NODE_STATE.DEFAULT);
+    setNodeState(info.object, "default");
     this.engine.unlockNodePosition(info.object);
   }
 };
 
+// dist/style/graph-layer-stylesheet.js
+var DEFAULT_EDGE_STYLE = {
+  type: "edge",
+  stroke: "black",
+  strokeWidth: 1,
+  decorators: []
+};
+var DEFAULT_GRAPH_LAYER_STYLESHEET = {
+  nodes: [],
+  edges: [DEFAULT_EDGE_STYLE]
+};
+function normalizeGraphLayerStylesheet({ stylesheet, nodeStyle, edgeStyle }) {
+  const resolvedStylesheet = stylesheet ?? {};
+  const resolvedNodeStyles = Array.isArray(resolvedStylesheet.nodes) ? resolvedStylesheet.nodes : nodeStyle;
+  const resolvedEdgeStyles = resolvedStylesheet.edges ?? edgeStyle;
+  const nodes = Array.isArray(resolvedNodeStyles) ? resolvedNodeStyles.filter(Boolean) : [...DEFAULT_GRAPH_LAYER_STYLESHEET.nodes];
+  const edgeEntries = Array.isArray(resolvedEdgeStyles) ? resolvedEdgeStyles : resolvedEdgeStyles ? [resolvedEdgeStyles] : DEFAULT_GRAPH_LAYER_STYLESHEET.edges;
+  const edges = edgeEntries.filter(Boolean).map((edgeStyleEntry) => ({
+    ...edgeStyleEntry,
+    type: edgeStyleEntry.type ?? "edge",
+    decorators: edgeStyleEntry.decorators ?? []
+  }));
+  return {
+    nodes,
+    edges
+  };
+}
+
 // dist/layers/node-layers/circle-layer.js
 var import_core = require("@deck.gl/core");
 var import_layers = require("@deck.gl/layers");
@@ -3443,9 +4955,9 @@ __publicField(CurvedEdgeLayer, "layerName", "CurvedEdgeLayer");
 
 // dist/layers/edge-layer.js
 var EDGE_LAYER_MAP = {
-  [EDGE_TYPE.LINE]: StraightLineEdgeLayer,
-  [EDGE_TYPE.PATH]: PathEdgeLayer,
-  [EDGE_TYPE.SPLINE_CURVE]: CurvedEdgeLayer
+  "line": StraightLineEdgeLayer,
+  "path": PathEdgeLayer,
+  "spline-curve": CurvedEdgeLayer
 };
 var EdgeLayer = class extends import_core13.CompositeLayer {
   updateState({ props, oldProps, changeFlags }) {
@@ -3461,9 +4973,9 @@ var EdgeLayer = class extends import_core13.CompositeLayer {
       res[type].push(d);
       return res;
     }, {
-      [EDGE_TYPE.LINE]: [],
-      [EDGE_TYPE.PATH]: [],
-      [EDGE_TYPE.SPLINE_CURVE]: []
+      "line": [],
+      "path": [],
+      "spline-curve": []
     });
     this.setState({ typedEdgeData });
   }
@@ -3753,25 +5265,537 @@ var FlowLayer = class extends import_core15.CompositeLayer {
   renderLayers() {
     const { data, getLayoutInfo, positionUpdateTrigger = 0, stylesheet } = this.props;
     return [
-      new FlowPathLayer(this.getSubLayerProps({
-        id: "__flow-layer",
-        data,
-        ...stylesheet.getDeckGLAccessors(),
-        getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
-        getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+      new FlowPathLayer(this.getSubLayerProps({
+        id: "__flow-layer",
+        data,
+        ...stylesheet.getDeckGLAccessors(),
+        getSourcePosition: (e) => getLayoutInfo(e).sourcePosition,
+        getTargetPosition: (e) => getLayoutInfo(e).targetPosition,
+        parameters: {
+          depthTest: false
+        },
+        updateTriggers: {
+          ...stylesheet.getDeckGLUpdateTriggers(),
+          getSourcePosition: positionUpdateTrigger,
+          getTargetPosition: positionUpdateTrigger
+        }
+      }))
+    ];
+  }
+};
+__publicField(FlowLayer, "layerName", "FlowLayer");
+
+// dist/layers/edge-layers/edge-arrow-layer.js
+var import_core16 = require("@deck.gl/core");
+var import_mesh_layers = require("@deck.gl/mesh-layers");
+
+// dist/layers/edge-layers/arrow-2d-geometry.js
+var import_engine = require("@luma.gl/engine");
+var Arrow2DGeometry = class extends import_engine.Geometry {
+  constructor(opts = {}) {
+    super(Object.assign({}, opts, {
+      attributes: getArrowAttributes(opts),
+      topology: "triangle-list"
+    }));
+  }
+};
+function getArrowAttributes({ length = 1, headWidth = 1 }) {
+  const halfLength = length / 2;
+  const halfWidth = headWidth / 2;
+  const positions = new Float32Array([
+    0,
+    halfLength,
+    0,
+    -halfWidth,
+    -halfLength,
+    0,
+    halfWidth,
+    -halfLength,
+    0
+  ]);
+  const normals = new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1]);
+  const texCoords = new Float32Array([
+    0.5,
+    1,
+    0,
+    0,
+    1,
+    0
+  ]);
+  return {
+    positions: { size: 3, value: positions },
+    normals: { size: 3, value: normals },
+    texCoords: { size: 2, value: texCoords }
+  };
+}
+
+// dist/layers/edge-layers/edge-arrow-layer.js
+var DEFAULT_ARROW_GEOMETRY = new Arrow2DGeometry({ length: 1, headWidth: 0.6 });
+var DEFAULT_Z = 0;
+function resolveSize(value) {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) && numeric !== 0 ? numeric : 1;
+}
+function getOffsetComponents(offset) {
+  if (!Array.isArray(offset)) {
+    return { along: 0, perpendicular: 0 };
+  }
+  const along = Number(offset[0]);
+  const perpendicular = Number(offset[1]);
+  return {
+    along: Number.isFinite(along) ? along : 0,
+    perpendicular: Number.isFinite(perpendicular) ? perpendicular : 0
+  };
+}
+function isEdgeDirected(edge) {
+  if (!edge) {
+    return false;
+  }
+  if (typeof edge.isDirected === "function") {
+    return Boolean(edge.isDirected());
+  }
+  if (typeof edge.directed === "boolean") {
+    return edge.directed;
+  }
+  return false;
+}
+function normalizeVector(vector) {
+  const length = Math.hypot(vector[0] ?? 0, vector[1] ?? 0, vector[2] ?? 0);
+  if (length === 0) {
+    return [0, 0, 0];
+  }
+  return [(vector[0] ?? 0) / length, (vector[1] ?? 0) / length, (vector[2] ?? 0) / length];
+}
+function getTerminalDirection({ sourcePosition, targetPosition, controlPoints = [] }) {
+  const anchor = controlPoints.length ? controlPoints[controlPoints.length - 1] : sourcePosition;
+  const direction = [
+    (targetPosition[0] ?? 0) - ((anchor == null ? void 0 : anchor[0]) ?? 0),
+    (targetPosition[1] ?? 0) - ((anchor == null ? void 0 : anchor[1]) ?? 0),
+    (targetPosition[2] ?? DEFAULT_Z) - ((anchor == null ? void 0 : anchor[2]) ?? DEFAULT_Z)
+  ];
+  return { target: targetPosition, direction };
+}
+function getArrowTransform({ layout, size, offset = null }) {
+  const { target, direction } = getTerminalDirection(layout);
+  const unit = normalizeVector(direction);
+  const hasDirection = unit[0] !== 0 || unit[1] !== 0 || unit[2] !== 0;
+  const resolvedSize = resolveSize(size);
+  const basePosition = [
+    target[0] ?? 0,
+    target[1] ?? 0,
+    target[2] ?? DEFAULT_Z
+  ];
+  if (!hasDirection) {
+    return { position: basePosition, angle: 0 };
+  }
+  const { along, perpendicular } = getOffsetComponents(offset);
+  const alongDistance = resolvedSize * 0.5 + along;
+  const position = [
+    basePosition[0] - unit[0] * alongDistance,
+    basePosition[1] - unit[1] * alongDistance,
+    basePosition[2] - unit[2] * alongDistance
+  ];
+  if (perpendicular) {
+    const perp = [-unit[1], unit[0], 0];
+    position[0] += perp[0] * perpendicular;
+    position[1] += perp[1] * perpendicular;
+    position[2] += perp[2] * perpendicular;
+  }
+  const angle = Math.atan2(unit[0], unit[1]) * 180 / Math.PI;
+  return { position, angle };
+}
+var EdgeArrowLayer = class extends import_core16.CompositeLayer {
+  renderLayers() {
+    const { data, getLayoutInfo, positionUpdateTrigger = 0, stylesheet } = this.props;
+    const directedEdges = (data || []).filter(isEdgeDirected);
+    if (!directedEdges.length) {
+      return [];
+    }
+    const { getColor: getColor2, getSize, getOffset: getOffset2 } = stylesheet.getDeckGLAccessors();
+    const updateTriggers = stylesheet.getDeckGLUpdateTriggers();
+    return [
+      new import_mesh_layers.SimpleMeshLayer(this.getSubLayerProps({
+        id: "__edge-arrow-layer",
+        data: directedEdges,
+        mesh: DEFAULT_ARROW_GEOMETRY,
+        getColor: getColor2,
+        getScale: (edge) => {
+          const size = resolveSize(getSize(edge));
+          return [size, size, size];
+        },
+        getOrientation: (edge) => {
+          const layout = getLayoutInfo(edge);
+          const size = resolveSize(getSize(edge));
+          const offset = getOffset2 ? getOffset2(edge) : null;
+          const { angle } = getArrowTransform({ layout, size, offset });
+          return [0, -angle, 0];
+        },
+        getPosition: (edge) => {
+          const layout = getLayoutInfo(edge);
+          const size = resolveSize(getSize(edge));
+          const offset = getOffset2 ? getOffset2(edge) : null;
+          const { position } = getArrowTransform({ layout, size, offset });
+          return position;
+        },
         parameters: {
           depthTest: false
         },
         updateTriggers: {
-          ...stylesheet.getDeckGLUpdateTriggers(),
-          getSourcePosition: positionUpdateTrigger,
-          getTargetPosition: positionUpdateTrigger
+          getColor: updateTriggers.getColor,
+          getScale: updateTriggers.getSize,
+          getOrientation: [
+            positionUpdateTrigger,
+            updateTriggers.getSize,
+            updateTriggers.getOffset
+          ],
+          getPosition: [positionUpdateTrigger, updateTriggers.getSize, updateTriggers.getOffset]
         }
       }))
     ];
   }
 };
-__publicField(FlowLayer, "layerName", "FlowLayer");
+__publicField(EdgeArrowLayer, "layerName", "EdgeArrowLayer");
+
+// dist/utils/node-boundary.js
+var EPSILON = 1e-6;
+function normalizeDirection(center, target) {
+  const dx = target[0] - center[0];
+  const dy = target[1] - center[1];
+  const length = Math.hypot(dx, dy);
+  if (length <= EPSILON) {
+    return null;
+  }
+  return { unit: [dx / length, dy / length], distance: length };
+}
+function projectFromCenter(center, unit, distance) {
+  return [center[0] + unit[0] * distance, center[1] + unit[1] * distance];
+}
+function projectToRectangle(center, unit, halfWidth, halfHeight) {
+  const absUx = Math.abs(unit[0]);
+  const absUy = Math.abs(unit[1]);
+  let distance = Number.POSITIVE_INFINITY;
+  if (halfWidth > 0 && absUx > EPSILON) {
+    distance = Math.min(distance, halfWidth / absUx);
+  }
+  if (halfHeight > 0 && absUy > EPSILON) {
+    distance = Math.min(distance, halfHeight / absUy);
+  }
+  if (!Number.isFinite(distance)) {
+    return [...center];
+  }
+  return [center[0] + unit[0] * distance, center[1] + unit[1] * distance];
+}
+function resolveCornerRadius(rawCornerRadius, halfWidth, halfHeight) {
+  if (!Number.isFinite(rawCornerRadius) || rawCornerRadius <= 0) {
+    return 0;
+  }
+  let resolved = rawCornerRadius;
+  if (resolved <= 1) {
+    resolved *= Math.min(halfWidth, halfHeight);
+  }
+  return Math.min(resolved, halfWidth, halfHeight);
+}
+function intersectsInnerFaces(absX, absY, innerHalfWidth, innerHalfHeight, halfWidth, halfHeight) {
+  const insideVerticalFace = absX <= innerHalfWidth + EPSILON && absY <= halfHeight + EPSILON;
+  const insideHorizontalFace = absY <= innerHalfHeight + EPSILON && absX <= halfWidth + EPSILON;
+  return insideVerticalFace || insideHorizontalFace;
+}
+function projectToCornerArc(geometry, unit, innerHalfWidth, innerHalfHeight, cornerRadius, rectanglePoint) {
+  const offsetX = rectanglePoint[0] - geometry.center[0];
+  const offsetY = rectanglePoint[1] - geometry.center[1];
+  const cornerCenter = [
+    geometry.center[0] + Math.sign(offsetX || unit[0]) * innerHalfWidth,
+    geometry.center[1] + Math.sign(offsetY || unit[1]) * innerHalfHeight
+  ];
+  const relativeCornerCenter = [
+    cornerCenter[0] - geometry.center[0],
+    cornerCenter[1] - geometry.center[1]
+  ];
+  const dot = unit[0] * relativeCornerCenter[0] + unit[1] * relativeCornerCenter[1];
+  const centerDistanceSq = relativeCornerCenter[0] * relativeCornerCenter[0] + relativeCornerCenter[1] * relativeCornerCenter[1];
+  const discriminant = dot * dot - (centerDistanceSq - cornerRadius * cornerRadius);
+  if (discriminant < 0) {
+    return rectanglePoint;
+  }
+  const distance = dot - Math.sqrt(Math.max(0, discriminant));
+  return projectFromCenter(geometry.center, unit, distance);
+}
+function computeRectangleIntersection(geometry, unit) {
+  const halfWidth = (geometry.width ?? 0) / 2;
+  const halfHeight = (geometry.height ?? 0) / 2;
+  if (halfWidth <= EPSILON || halfHeight <= EPSILON) {
+    return [...geometry.center];
+  }
+  return projectToRectangle(geometry.center, unit, halfWidth, halfHeight);
+}
+function computeRoundedRectangleIntersection(geometry, unit) {
+  const halfWidth = (geometry.width ?? 0) / 2;
+  const halfHeight = (geometry.height ?? 0) / 2;
+  if (halfWidth <= EPSILON || halfHeight <= EPSILON) {
+    const radius = geometry.radius ?? Math.min(halfWidth, halfHeight);
+    return projectFromCenter(geometry.center, unit, radius);
+  }
+  const cornerRadius = resolveCornerRadius(geometry.cornerRadius, halfWidth, halfHeight);
+  if (cornerRadius <= EPSILON) {
+    return projectToRectangle(geometry.center, unit, halfWidth, halfHeight);
+  }
+  const innerHalfWidth = Math.max(halfWidth - cornerRadius, 0);
+  const innerHalfHeight = Math.max(halfHeight - cornerRadius, 0);
+  if (innerHalfWidth <= EPSILON || innerHalfHeight <= EPSILON) {
+    const radius = Math.min(halfWidth, halfHeight);
+    return projectFromCenter(geometry.center, unit, radius);
+  }
+  const rectanglePoint = projectToRectangle(geometry.center, unit, halfWidth, halfHeight);
+  const absX = Math.abs(rectanglePoint[0] - geometry.center[0]);
+  const absY = Math.abs(rectanglePoint[1] - geometry.center[1]);
+  const touchesInnerFace = absX <= innerHalfWidth + EPSILON || absY <= innerHalfHeight + EPSILON;
+  if (touchesInnerFace && intersectsInnerFaces(absX, absY, innerHalfWidth, innerHalfHeight, halfWidth, halfHeight)) {
+    return rectanglePoint;
+  }
+  return projectToCornerArc(geometry, unit, innerHalfWidth, innerHalfHeight, cornerRadius, rectanglePoint);
+}
+function computeCircleIntersection(geometry, unit, radius) {
+  const effectiveRadius = radius ?? geometry.radius ?? 0;
+  return projectFromCenter(geometry.center, unit, Math.max(effectiveRadius, 0));
+}
+var BOUNDARY_COMPUTERS = {
+  circle: (geometry, unit) => computeCircleIntersection(geometry, unit),
+  marker: (geometry, unit) => computeCircleIntersection(geometry, unit),
+  rectangle: (geometry, unit) => computeRectangleIntersection(geometry, unit),
+  "rounded-rectangle": (geometry, unit) => computeRoundedRectangleIntersection(geometry, unit),
+  "path-rounded-rectangle": (geometry, unit) => computeRoundedRectangleIntersection(geometry, unit)
+};
+function getNodeBoundaryIntersection(geometry, targetCenter) {
+  const direction = normalizeDirection(geometry.center, targetCenter);
+  if (!direction) {
+    return [...geometry.center];
+  }
+  const handler = geometry.type ? BOUNDARY_COMPUTERS[geometry.type] : void 0;
+  if (handler) {
+    return handler(geometry, direction.unit);
+  }
+  if (geometry.radius && geometry.radius > EPSILON) {
+    return projectFromCenter(geometry.center, direction.unit, geometry.radius);
+  }
+  return [...geometry.center];
+}
+
+// dist/layers/edge-attachment-helper.js
+var GEOMETRY_NODE_TYPES = [
+  "circle",
+  "rectangle",
+  "rounded-rectangle",
+  "path-rounded-rectangle",
+  "marker"
+];
+function evaluateNumericAccessor(accessor, node) {
+  if (typeof accessor === "function") {
+    const value = accessor(node);
+    return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+  }
+  if (typeof accessor === "number" && Number.isFinite(accessor)) {
+    return accessor;
+  }
+  return void 0;
+}
+function evaluateOffsetAccessor(accessor, node) {
+  if (!accessor) {
+    return [0, 0];
+  }
+  let value = accessor;
+  if (typeof accessor === "function") {
+    value = accessor(node);
+  }
+  if (Array.isArray(value) && value.length >= 2) {
+    const offsetX = Number(value[0]);
+    const offsetY = Number(value[1]);
+    if (Number.isFinite(offsetX) && Number.isFinite(offsetY)) {
+      return [offsetX, offsetY];
+    }
+  }
+  return [0, 0];
+}
+function normalizePosition(value) {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const candidate = value;
+  if (typeof candidate.length === "number" && candidate.length >= 2) {
+    const x = Number(candidate[0]);
+    const y = Number(candidate[1]);
+    if (Number.isFinite(x) && Number.isFinite(y)) {
+      return [x, y];
+    }
+  }
+  return null;
+}
+function resolveAccessorValue(accessor, node) {
+  if (!accessor) {
+    return void 0;
+  }
+  return evaluateNumericAccessor(accessor, node);
+}
+function assignDimension(geometry, key, value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    geometry[key] = Math.max(value, 0);
+  }
+}
+function assignRectangleDimensions(node, accessors, geometry) {
+  assignDimension(geometry, "width", resolveAccessorValue(accessors.getWidth, node));
+  assignDimension(geometry, "height", resolveAccessorValue(accessors.getHeight, node));
+}
+var GEOMETRY_APPLIERS = {
+  circle: (node, accessors, geometry) => {
+    assignDimension(geometry, "radius", resolveAccessorValue(accessors.getRadius, node));
+  },
+  marker: (node, accessors, geometry) => {
+    const size = resolveAccessorValue(accessors.getSize, node);
+    assignDimension(geometry, "radius", typeof size === "number" ? size / 2 : void 0);
+  },
+  rectangle: (node, accessors, geometry) => {
+    assignRectangleDimensions(node, accessors, geometry);
+  },
+  "rounded-rectangle": (node, accessors, geometry) => {
+    assignRectangleDimensions(node, accessors, geometry);
+    assignDimension(geometry, "cornerRadius", resolveAccessorValue(accessors.getCornerRadius, node));
+    assignDimension(geometry, "radius", resolveAccessorValue(accessors.getRadius, node));
+  },
+  "path-rounded-rectangle": (node, accessors, geometry) => {
+    assignRectangleDimensions(node, accessors, geometry);
+    assignDimension(geometry, "cornerRadius", resolveAccessorValue(accessors.getCornerRadius, node));
+  }
+};
+var EdgeAttachmentHelper = class {
+  getLayoutAccessor({ engine, interactionManager, nodeStyle }) {
+    const nodeAccessorMap = this._buildNodeStyleAccessorMap({
+      engine,
+      interactionManager,
+      nodeStyle
+    });
+    if (nodeAccessorMap.size === 0) {
+      return (edge) => engine.getEdgePosition(edge);
+    }
+    const nodeMap = engine.getNodes().reduce((acc, node) => acc.set(node.getId(), node), /* @__PURE__ */ new Map());
+    return (edge) => this._getAdjustedEdgeLayout(engine, nodeAccessorMap, nodeMap, edge);
+  }
+  _buildNodeStyleAccessorMap({ engine, interactionManager, nodeStyle }) {
+    const nodeAccessorMap = /* @__PURE__ */ new Map();
+    if (!nodeStyle) {
+      return nodeAccessorMap;
+    }
+    const styles = Array.isArray(nodeStyle) ? nodeStyle : [nodeStyle];
+    styles.filter(Boolean).forEach((style) => {
+      const { data = (nodes2) => nodes2, ...restStyle } = style;
+      const type = restStyle.type;
+      if (!type || !GEOMETRY_NODE_TYPES.includes(type)) {
+        return;
+      }
+      let stylesheet = null;
+      try {
+        stylesheet = new GraphStyleEngine(restStyle, {
+          stateUpdateTrigger: interactionManager.getLastInteraction()
+        });
+      } catch (error2) {
+        warn(`GraphLayer: Failed to evaluate node stylesheet for edge attachment (${String(error2.message ?? error2)}).`);
+        return;
+      }
+      const nodes = data(engine.getNodes());
+      if (!Array.isArray(nodes)) {
+        return;
+      }
+      const geometryType = type;
+      const accessors = this._createAccessorsForType(geometryType, stylesheet);
+      nodes.forEach((node) => {
+        const id = node.getId();
+        if (!nodeAccessorMap.has(id)) {
+          nodeAccessorMap.set(id, accessors);
+        }
+      });
+    });
+    return nodeAccessorMap;
+  }
+  _getAdjustedEdgeLayout(engine, nodeAccessorMap, nodeMap, edge) {
+    const layoutInfo = engine.getEdgePosition(edge);
+    if (!layoutInfo) {
+      return layoutInfo;
+    }
+    const sourceNode = nodeMap.get(edge.getSourceNodeId());
+    const targetNode = nodeMap.get(edge.getTargetNodeId());
+    if (!sourceNode || !targetNode) {
+      return layoutInfo;
+    }
+    const sourceGeometry = this._computeNodeGeometry(engine, sourceNode, nodeAccessorMap.get(sourceNode.getId()));
+    const targetGeometry = this._computeNodeGeometry(engine, targetNode, nodeAccessorMap.get(targetNode.getId()));
+    if (!sourceGeometry && !targetGeometry) {
+      return layoutInfo;
+    }
+    return this._applyGeometryToLayout(layoutInfo, sourceGeometry, targetGeometry);
+  }
+  _applyGeometryToLayout(layoutInfo, sourceGeometry, targetGeometry) {
+    const adjustedLayout = { ...layoutInfo };
+    const targetReference = (targetGeometry == null ? void 0 : targetGeometry.center) ?? normalizePosition(layoutInfo.targetPosition);
+    const sourceReference = (sourceGeometry == null ? void 0 : sourceGeometry.center) ?? normalizePosition(layoutInfo.sourcePosition);
+    if (sourceGeometry) {
+      adjustedLayout.sourcePosition = targetReference ? getNodeBoundaryIntersection(sourceGeometry, targetReference) : [...sourceGeometry.center];
+    }
+    if (targetGeometry) {
+      adjustedLayout.targetPosition = sourceReference ? getNodeBoundaryIntersection(targetGeometry, sourceReference) : [...targetGeometry.center];
+    }
+    return adjustedLayout;
+  }
+  _createAccessorsForType(geometryType, stylesheet) {
+    const base = {
+      type: geometryType,
+      getOffset: stylesheet.getDeckGLAccessor("getOffset")
+    };
+    switch (geometryType) {
+      case "circle":
+        base.getRadius = stylesheet.getDeckGLAccessor("getRadius");
+        break;
+      case "marker":
+        base.getSize = stylesheet.getDeckGLAccessor("getSize");
+        break;
+      case "rectangle":
+        base.getWidth = stylesheet.getDeckGLAccessor("getWidth");
+        base.getHeight = stylesheet.getDeckGLAccessor("getHeight");
+        break;
+      case "rounded-rectangle":
+        base.getWidth = stylesheet.getDeckGLAccessor("getWidth");
+        base.getHeight = stylesheet.getDeckGLAccessor("getHeight");
+        base.getCornerRadius = stylesheet.getDeckGLAccessor("getCornerRadius");
+        base.getRadius = stylesheet.getDeckGLAccessor("getRadius");
+        break;
+      case "path-rounded-rectangle":
+        base.getWidth = stylesheet.getDeckGLAccessor("getWidth");
+        base.getHeight = stylesheet.getDeckGLAccessor("getHeight");
+        base.getCornerRadius = stylesheet.getDeckGLAccessor("getCornerRadius");
+        break;
+      default:
+        break;
+    }
+    return base;
+  }
+  _computeNodeGeometry(engine, node, accessors) {
+    const basePosition = engine.getNodePosition(node);
+    if (!basePosition) {
+      return null;
+    }
+    const offset = evaluateOffsetAccessor(accessors == null ? void 0 : accessors.getOffset, node);
+    const center = [basePosition[0] + offset[0], basePosition[1] + offset[1]];
+    const geometry = {
+      type: accessors == null ? void 0 : accessors.type,
+      center
+    };
+    if (!accessors || !accessors.type) {
+      return geometry;
+    }
+    const applier = GEOMETRY_APPLIERS[accessors.type];
+    if (applier) {
+      applier(node, accessors, geometry);
+    }
+    return geometry;
+  }
+};
 
 // dist/loaders/create-graph.js
 function createGraph(props) {
@@ -3804,7 +5828,7 @@ function createGraph(props) {
 // dist/loaders/node-parsers.js
 function basicNodeParser(node) {
   if (node.id === void 0) {
-    log.error("Invalid node: id is missing.")();
+    error("Invalid node: id is missing.");
     return null;
   }
   return { id: node.id };
@@ -3814,7 +5838,7 @@ function basicNodeParser(node) {
 function basicEdgeParser(edge) {
   const { id, directed, sourceId, targetId } = edge;
   if (sourceId === void 0 || targetId === void 0) {
-    log.error("Invalid edge: sourceId or targetId is missing.")();
+    error("Invalid edge: sourceId or targetId is missing.");
     return null;
   }
   return {
@@ -3829,7 +5853,7 @@ function basicEdgeParser(edge) {
 var JSONLoader = ({ json, nodeParser = basicNodeParser, edgeParser = basicEdgeParser }) => {
   const { name = "default", nodes, edges } = json;
   if (!nodes) {
-    log.error("Invalid graph: nodes is missing.")();
+    error("Invalid graph: nodes is missing.");
     return null;
   }
   const graph = createGraph({ name, nodes, edges, nodeParser, edgeParser });
@@ -3838,27 +5862,33 @@ var JSONLoader = ({ json, nodeParser = basicNodeParser, edgeParser = basicEdgePa
 
 // dist/layers/graph-layer.js
 var NODE_LAYER_MAP = {
-  [NODE_TYPE.RECTANGLE]: RectangleLayer,
-  [NODE_TYPE.ROUNDED_RECTANGLE]: RoundedRectangleLayer,
-  [NODE_TYPE.PATH_ROUNDED_RECTANGLE]: PathBasedRoundedRectangleLayer,
-  [NODE_TYPE.ICON]: ImageLayer,
-  [NODE_TYPE.CIRCLE]: CircleLayer,
-  [NODE_TYPE.LABEL]: LabelLayer,
-  [NODE_TYPE.MARKER]: ZoomableMarkerLayer
+  "rectangle": RectangleLayer,
+  "rounded-rectangle": RoundedRectangleLayer,
+  "path-rounded-rectangle": PathBasedRoundedRectangleLayer,
+  "icon": ImageLayer,
+  "circle": CircleLayer,
+  "label": LabelLayer,
+  "marker": ZoomableMarkerLayer
 };
 var EDGE_DECORATOR_LAYER_MAP = {
-  [EDGE_DECORATOR_TYPE.LABEL]: EdgeLabelLayer,
-  [EDGE_DECORATOR_TYPE.FLOW]: FlowLayer
+  "edge-label": EdgeLabelLayer,
+  "flow": FlowLayer,
+  "arrow": EdgeArrowLayer
 };
 var SHARED_LAYER_PROPS = {
-  coordinateSystem: import_core16.COORDINATE_SYSTEM.CARTESIAN,
+  coordinateSystem: import_core17.COORDINATE_SYSTEM.CARTESIAN,
   parameters: {
     depthTest: false
   }
 };
-var GraphLayer = class extends import_core16.CompositeLayer {
+var NODE_STYLE_DEPRECATION_MESSAGE = "GraphLayer: `nodeStyle` has been replaced by `stylesheet.nodes` and will be removed in a future release.";
+var EDGE_STYLE_DEPRECATION_MESSAGE = "GraphLayer: `edgeStyle` has been replaced by `stylesheet.edges` and will be removed in a future release.";
+var NODE_STYLE_DEPRECATION_WARNED = false;
+var EDGE_STYLE_DEPRECATION_WARNED = false;
+var GraphLayer = class extends import_core17.CompositeLayer {
   // @ts-expect-error Some typescript confusion due to override of base class state
   state;
+  _edgeAttachmentHelper = new EdgeAttachmentHelper();
   forceUpdate = () => {
     if (this.context && this.context.layerManager) {
       this.setNeedsUpdate();
@@ -3891,11 +5921,44 @@ var GraphLayer = class extends import_core16.CompositeLayer {
       this._setGraphEngine(graphEngine);
       this.state.interactionManager.updateProps(props);
       this.forceUpdate();
+    } else if (changeFlags.propsChanged && props.engine !== oldProps.engine) {
+      this._setGraphEngine(props.engine);
+      this.state.interactionManager.updateProps(props);
+      this.forceUpdate();
     }
   }
   finalize() {
     this._removeGraphEngine();
   }
+  _getResolvedStylesheet() {
+    const { stylesheet, nodeStyle, edgeStyle } = this.props;
+    const usingNodeStyle = typeof nodeStyle !== "undefined";
+    if (usingNodeStyle && !NODE_STYLE_DEPRECATION_WARNED) {
+      warn(NODE_STYLE_DEPRECATION_MESSAGE);
+      NODE_STYLE_DEPRECATION_WARNED = true;
+    }
+    const usingEdgeStyle = typeof edgeStyle !== "undefined";
+    if (usingEdgeStyle && !EDGE_STYLE_DEPRECATION_WARNED) {
+      warn(EDGE_STYLE_DEPRECATION_MESSAGE);
+      EDGE_STYLE_DEPRECATION_WARNED = true;
+    }
+    return normalizeGraphLayerStylesheet({
+      stylesheet,
+      nodeStyle: usingNodeStyle ? nodeStyle : void 0,
+      edgeStyle: usingEdgeStyle ? edgeStyle : void 0
+    });
+  }
+  _createStyleEngine(style, context) {
+    try {
+      return new GraphStyleEngine(style, {
+        stateUpdateTrigger: this.state.interactionManager.getLastInteraction()
+      });
+    } catch (error2) {
+      const message = error2 instanceof Error ? error2.message : String(error2);
+      warn(`GraphLayer: Failed to apply ${context}: ${message}`);
+      return null;
+    }
+  }
   _setGraphEngine(graphEngine) {
     if (graphEngine === this.state.graphEngine) {
       return;
@@ -3916,20 +5979,21 @@ var GraphLayer = class extends import_core16.CompositeLayer {
   }
   createNodeLayers() {
     const engine = this.state.graphEngine;
-    const { nodeStyle } = this.props;
-    if (!engine || !nodeStyle || !Array.isArray(nodeStyle) || nodeStyle.length === 0) {
+    const { nodes: nodeStyles } = this._getResolvedStylesheet();
+    if (!engine || !Array.isArray(nodeStyles) || nodeStyles.length === 0) {
       return [];
     }
-    return nodeStyle.filter(Boolean).map((style, idx) => {
+    const baseLayers = nodeStyles.filter(Boolean).map((style, idx) => {
       const { pickable = true, visible = true, data = (nodes) => nodes, ...restStyle } = style;
       const LayerType = NODE_LAYER_MAP[style.type];
       if (!LayerType) {
-        log.error(`Invalid node type: ${style.type}`)();
-        throw new Error(`Invalid node type: ${style.type}`);
+        warn(`GraphLayer: Invalid node type "${style.type}".`);
+        return null;
+      }
+      const stylesheet = this._createStyleEngine(restStyle, `node stylesheet "${style.type}"`);
+      if (!stylesheet) {
+        return null;
       }
-      const stylesheet = new Stylesheet(restStyle, {
-        stateUpdateTrigger: this.state.interactionManager.getLastInteraction()
-      });
       const getOffset2 = stylesheet.getDeckGLAccessor("getOffset");
       return new LayerType({
         ...SHARED_LAYER_PROPS,
@@ -3945,55 +6009,68 @@ var GraphLayer = class extends import_core16.CompositeLayer {
         stylesheet,
         visible
       });
-    });
+    }).filter(Boolean);
+    const chainLayers = this._createChainOverlayLayers(engine);
+    return [...baseLayers, ...chainLayers];
   }
   createEdgeLayers() {
     const engine = this.state.graphEngine;
-    const { edgeStyle } = this.props;
-    if (!engine || !edgeStyle) {
+    const { edges: edgeStyles, nodes: nodeStyles } = this._getResolvedStylesheet();
+    if (!engine || !edgeStyles) {
+      return [];
+    }
+    const edgeStyleArray = Array.isArray(edgeStyles) ? edgeStyles : [edgeStyles];
+    if (edgeStyleArray.length === 0) {
       return [];
     }
-    return (Array.isArray(edgeStyle) ? edgeStyle : [edgeStyle]).filter(Boolean).flatMap((style, idx) => {
+    const getLayoutInfo = this._edgeAttachmentHelper.getLayoutAccessor({
+      engine,
+      interactionManager: this.state.interactionManager,
+      nodeStyle: nodeStyles
+    });
+    return edgeStyleArray.filter(Boolean).flatMap((style, idx) => {
       const { decorators, data = (edges) => edges, visible = true, ...restEdgeStyle } = style;
-      const stylesheet = new Stylesheet({
-        type: "Edge",
+      const stylesheet = this._createStyleEngine({
+        type: "edge",
         ...restEdgeStyle
-      }, {
-        stateUpdateTrigger: this.state.interactionManager.getLastInteraction()
-      });
+      }, "edge stylesheet");
+      if (!stylesheet) {
+        return [];
+      }
       const edgeLayer = new EdgeLayer({
         ...SHARED_LAYER_PROPS,
         id: `edge-layer-${idx}`,
         data: data(engine.getEdges()),
-        getLayoutInfo: engine.getEdgePosition,
+        getLayoutInfo,
         pickable: true,
         positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
         stylesheet,
         visible
       });
       if (!decorators || !Array.isArray(decorators) || decorators.length === 0) {
-        return edgeLayer;
+        return [edgeLayer];
       }
-      const decoratorLayers = decorators.filter(Boolean).flatMap((decoratorStyle, idx2) => {
+      const decoratorLayers = decorators.filter(Boolean).map((decoratorStyle, idx2) => {
         const DecoratorLayer = EDGE_DECORATOR_LAYER_MAP[decoratorStyle.type];
         if (!DecoratorLayer) {
-          log.error(`Invalid edge decorator type: ${decoratorStyle.type}`)();
-          throw new Error(`Invalid edge decorator type: ${decoratorStyle.type}`);
+          warn(`GraphLayer: Invalid edge decorator type "${decoratorStyle.type}".`);
+          return null;
+        }
+        const decoratorStylesheet = this._createStyleEngine(decoratorStyle, `edge decorator stylesheet "${decoratorStyle.type}"`);
+        if (!decoratorStylesheet) {
+          return null;
         }
-        const decoratorStylesheet = new Stylesheet(decoratorStyle, {
-          stateUpdateTrigger: this.state.interactionManager.getLastInteraction()
-        });
         return new DecoratorLayer({
           ...SHARED_LAYER_PROPS,
           id: `edge-decorator-${idx2}`,
           data: data(engine.getEdges()),
-          getLayoutInfo: engine.getEdgePosition,
+          getLayoutInfo,
           pickable: true,
           positionUpdateTrigger: [engine.getLayoutLastUpdate(), engine.getLayoutState()].join(),
           stylesheet: decoratorStylesheet
         });
-      });
-      return [edgeLayer, decoratorLayers];
+      }).filter(Boolean);
+      return [edgeLayer, ...decoratorLayers];
     });
   }
   onClick(info, event) {
@@ -4014,6 +6091,101 @@ var GraphLayer = class extends import_core16.CompositeLayer {
   renderLayers() {
     return [this.createEdgeLayers(), this.createNodeLayers()];
   }
+  _createChainOverlayLayers(engine) {
+    const chainData = buildCollapsedChainLayers(engine);
+    if (!chainData) {
+      return [];
+    }
+    const { collapsedNodes, collapsedOutlineNodes, expandedNodes, expandedOutlineNodes, getChainOutlinePolygon, outlineUpdateTrigger } = chainData;
+    const layers = [];
+    if (collapsedOutlineNodes.length > 0) {
+      layers.push(new import_layers12.PolygonLayer({
+        ...SHARED_LAYER_PROPS,
+        id: "collapsed-chain-outlines",
+        data: collapsedOutlineNodes,
+        getPolygon: (node) => getChainOutlinePolygon(node),
+        stroked: true,
+        filled: false,
+        getLineColor: [220, 64, 64, 220],
+        getLineWidth: 2,
+        lineWidthUnits: "pixels",
+        lineWidthMinPixels: 2,
+        pickable: true,
+        updateTriggers: {
+          getPolygon: [outlineUpdateTrigger]
+        }
+      }));
+    }
+    const collapsedMarkerStylesheet = this._createStyleEngine({
+      type: "marker",
+      fill: [64, 96, 192, 255],
+      size: 32,
+      marker: "circle-plus-filled",
+      offset: [24, -24],
+      scaleWithZoom: false
+    }, "collapsed chain marker stylesheet");
+    if (collapsedMarkerStylesheet && collapsedNodes.length > 0) {
+      const getOffset2 = collapsedMarkerStylesheet.getDeckGLAccessor("getOffset");
+      layers.push(new ZoomableMarkerLayer({
+        ...SHARED_LAYER_PROPS,
+        id: "collapsed-chain-markers",
+        data: collapsedNodes,
+        getPosition: mixedGetPosition(engine.getNodePosition, getOffset2),
+        pickable: true,
+        positionUpdateTrigger: [
+          engine.getLayoutLastUpdate(),
+          engine.getLayoutState(),
+          collapsedMarkerStylesheet.getDeckGLAccessorUpdateTrigger("getOffset")
+        ].join(),
+        stylesheet: collapsedMarkerStylesheet,
+        visible: true
+      }));
+    }
+    if (expandedOutlineNodes.length > 0) {
+      layers.push(new import_layers12.PolygonLayer({
+        ...SHARED_LAYER_PROPS,
+        id: "expanded-chain-outlines",
+        data: expandedOutlineNodes,
+        getPolygon: (node) => getChainOutlinePolygon(node),
+        stroked: true,
+        filled: false,
+        getLineColor: [64, 96, 192, 200],
+        getLineWidth: 2,
+        lineWidthUnits: "pixels",
+        lineWidthMinPixels: 2,
+        pickable: true,
+        updateTriggers: {
+          getPolygon: [outlineUpdateTrigger]
+        }
+      }));
+    }
+    const expandedMarkerStylesheet = this._createStyleEngine({
+      type: "marker",
+      fill: [64, 96, 192, 255],
+      size: 32,
+      marker: "circle-minus-filled",
+      offset: [24, -24],
+      scaleWithZoom: false
+    }, "expanded chain marker stylesheet");
+    if (expandedMarkerStylesheet && expandedNodes.length > 0) {
+      const getOffset2 = expandedMarkerStylesheet.getDeckGLAccessor("getOffset");
+      layers.push(new ZoomableMarkerLayer({
+        ...SHARED_LAYER_PROPS,
+        id: "expanded-chain-markers",
+        data: expandedNodes,
+        getPosition: mixedGetPosition(engine.getNodePosition, getOffset2),
+        pickable: true,
+        positionUpdateTrigger: [
+          engine.getLayoutLastUpdate(),
+          engine.getLayoutState(),
+          expandedMarkerStylesheet.getDeckGLAccessorUpdateTrigger("getOffset")
+        ].join(),
+        stylesheet: expandedMarkerStylesheet,
+        visible: true
+      }));
+    }
+    return layers;
+  }
 };
 __publicField(GraphLayer, "layerName", "GraphLayer");
 __publicField(GraphLayer, "defaultProps", {
@@ -4022,7 +6194,8 @@ __publicField(GraphLayer, "defaultProps", {
   pickable: true,
   // Graph props
   graphLoader: JSONLoader,
-  nodeStyle: [],
+  stylesheet: DEFAULT_GRAPH_LAYER_STYLESHEET,
+  nodeStyle: void 0,
   nodeEvents: {
     onMouseLeave: () => {
     },
@@ -4035,12 +6208,7 @@ __publicField(GraphLayer, "defaultProps", {
     onDrag: () => {
     }
   },
-  edgeStyle: {
-    stroke: "black",
-    strokeWidth: 1,
-    // an array of styles for layers
-    decorators: []
-  },
+  edgeStyle: void 0,
   edgeEvents: {
     onClick: () => {
     },
@@ -4053,6 +6221,7 @@ __publicField(GraphLayer, "defaultProps", {
 // dist/widgets/view-control-widget.js
 var import_jsx_runtime2 = require("preact/jsx-runtime");
 var import_preact2 = require("preact");
+var import_core18 = require("@deck.gl/core");
 
 // dist/widgets/long-press-button.js
 var import_jsx_runtime = require("preact/jsx-runtime");
@@ -4198,22 +6367,21 @@ __publicField(ViewControl, "defaultProps", {
   style: {},
   className: ""
 });
-var ViewControlWidget = class {
+var ViewControlWidget = class extends import_core18.Widget {
   id = "zoom";
-  props;
   placement = "top-left";
   orientation = "vertical";
   viewId = null;
   viewports = {};
-  deck;
   element;
+  className = "deck-widget-view-control";
   constructor(props) {
+    super(props);
     this.props = { ...ViewControl.defaultProps, ...props };
     this.id = props.id || "zoom";
     this.viewId = props.viewId || null;
     this.placement = props.placement || "top-left";
     props.style = props.style || {};
-    this.props = props;
   }
   onAdd({ deck }) {
     this.deck = deck;
@@ -4226,14 +6394,16 @@ var ViewControlWidget = class {
     if (style) {
       Object.entries(style).map(([key, value]) => this.element.style.setProperty(key, value));
     }
-    const ui = (0, import_jsx_runtime2.jsx)(ViewControl, { ...this.props, zoomBy: this.handleDeltaZoom.bind(this), panBy: this.handlePanBy.bind(this) });
-    (0, import_preact2.render)(ui, this.element);
     return this.element;
   }
   onRemove() {
     this.deck = void 0;
     this.element = void 0;
   }
+  onRenderHTML(rootElement) {
+    const ui = (0, import_jsx_runtime2.jsx)(ViewControl, { ...this.props, zoomBy: this.handleDeltaZoom.bind(this), panBy: this.handlePanBy.bind(this) });
+    (0, import_preact2.render)(ui, rootElement);
+  }
   setProps(props) {
     Object.assign(this.props, props);
   }
@@ -4278,10 +6448,112 @@ function loadSimpleJSONGraph(json, options) {
   const { nodeParser = basicNodeParser, edgeParser = basicEdgeParser } = options;
   const { name = "default", nodes, edges } = json;
   if (!nodes) {
-    log.error("Invalid graph: nodes is missing.")();
+    error("Invalid graph: nodes is missing.");
     return null;
   }
   const graph = createGraph({ name, nodes, edges, nodeParser, edgeParser });
   return graph;
 }
+
+// dist/_deprecated/old-constants.js
+var MARKER_TYPE = {
+  "bell-filled": "bell-filled",
+  bell: "bell",
+  "bookmark-filled": "bookmark-filled",
+  bookmark: "bookmark",
+  "cd-filled": "cd-filled",
+  cd: "cd",
+  checkmark: "checkmark",
+  "circle-check-filled": "circle-check-filled",
+  "circle-check": "circle-check",
+  "circle-filled": "circle-filled",
+  "circle-i-filled": "circle-i-filled",
+  "circle-i": "circle-i",
+  "circle-minus-filled": "circle-minus-filled",
+  "circle-minus": "circle-minus",
+  "circle-plus-filled": "circle-plus-filled",
+  "circle-plus": "circle-plus",
+  "circle-questionmark-filled": "circle-questionmark-filled",
+  "circle-questionmark": "circle-questionmark",
+  "circle-slash-filled": "circle-slash-filled",
+  "circle-slash": "circle-slash",
+  "circle-x-filled": "circle-x-filled",
+  "circle-x": "circle-x",
+  circle: "circle",
+  "diamond-filled": "diamond-filled",
+  diamond: "diamond",
+  "flag-filled": "flag-filled",
+  flag: "flag",
+  gear: "gear",
+  "heart-filled": "heart-filled",
+  heart: "heart",
+  "location-marker-filled": "location-marker-filled",
+  "location-marker": "location-marker",
+  "octagonal-star-filled": "octagonal-star-filled",
+  "octagonal-star": "octagonal-star",
+  "person-filled": "person-filled",
+  person: "person",
+  "pin-filled": "pin-filled",
+  pin: "pin",
+  "plus-small": "plus-small",
+  plus: "plus",
+  "rectangle-filled": "rectangle-filled",
+  rectangle: "rectangle",
+  "star-filled": "star-filled",
+  star: "star",
+  "tag-filled": "tag-filled",
+  tag: "tag",
+  "thumb-down-filled": "thumb-down-filled",
+  "thumb-down": "thumb-down",
+  "thumb-up": "thumb-up",
+  "thumb_up-filled": "thumb_up-filled",
+  "triangle-down-filled": "triangle-down-filled",
+  "triangle-down": "triangle-down",
+  "triangle-left-filled": "triangle-left-filled",
+  "triangle-left": "triangle-left",
+  "triangle-right-filled": "triangle-right-filled",
+  "triangle-right": "triangle-right",
+  "triangle-up-filled": "triangle-up-filled",
+  "triangle-up": "triangle-up",
+  "x-small": "x-small",
+  x: "x"
+};
+var NODE_STATE = {
+  DEFAULT: "default",
+  HOVER: "hover",
+  DRAGGING: "dragging",
+  SELECTED: "selected"
+};
+var EDGE_STATE = {
+  DEFAULT: "default",
+  HOVER: "hover",
+  DRAGGING: "dragging",
+  SELECTED: "selected"
+};
+var NODE_TYPE = {
+  CIRCLE: "circle",
+  RECTANGLE: "rectangle",
+  ROUNDED_RECTANGLE: "rounded-rectangle",
+  PATH_ROUNDED_RECTANGLE: "path-rounded-rectangle",
+  ICON: "icon",
+  LABEL: "label",
+  MARKER: "marker"
+};
+var EDGE_TYPE = {
+  SPLINE_CURVE: "spline",
+  LINE: "line",
+  PATH: "path"
+};
+var EDGE_DECORATOR_TYPE = {
+  LABEL: "label",
+  FLOW: "flow",
+  ARROW: "arrow"
+};
+var LAYOUT_STATE = {
+  INIT: "init",
+  START: "start",
+  CALCULATING: "calculating",
+  DONE: "done",
+  ERROR: "error"
+};
 //# sourceMappingURL=index.cjs.map