@xxrandr/conecta-diagram 0.0.0-stage → 0.1.4

package/dist/chunk-43VYPB4U.js

@@ -0,0 +1,2136 @@
+import {
+  simulationOverlay,
+  visibleElements
+} from "./chunk-GXOBW2BK.js";
+import {
+  ForcePlacement,
+  nodeDimensions,
+  timer
+} from "./chunk-HZER5BPR.js";
+import {
+  FlowError,
+  actionPresentation,
+  assertJson,
+  capabilityState,
+  clone,
+  formatCondition
+} from "./chunk-Q62JPMJH.js";
+
+// src/svg/icons.ts
+var iconPaths = {
+  workflow: ["M4 4h6v6H4zM14 14h6v6h-6zM7 10v7h7M10 7h7v7"],
+  code: ["m8 7-5 5 5 5m8-10 5 5-5 5m-3-13-2 16"],
+  api: [
+    "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM3 12h18M12 3c4 4 4 14 0 18-4-4-4-14 0-18Z"
+  ],
+  database: [
+    "M20 6c0 2-16 2-16 0s16-2 16 0ZM4 6v12c0 3 16 3 16 0V6M4 12c0 3 16 3 16 0"
+  ],
+  file: ["M13 3H6a1 1 0 0 0-1 1v16h14V9l-6-6Zm0 0v6h6M9 13h6m-6 4h4"],
+  transfer: ["M4 4h9l4 4v3M13 4v4h4M4 4v16h6m3-4 3-3 3 3m-3-3v8m-3-12H8m2 4H8"],
+  terminal: ["M3 5h18v14H3zM7 9l3 3-3 3m6 0h4"],
+  sftp: ["M4 7h15m-4-4 4 4-4 4M20 17H5m4-4-4 4 4 4"],
+  mail: ["M3 5h18v14H3zM3 6l9 7 9-7"],
+  messaging: ["M3 4h14v11H9l-4 4v-4H3zM17 8h4v12h-4l-3 3v-4"],
+  event: ["m13 2-8 12h6l-1 8 9-13h-7l1-7Z"],
+  decision: ["m12 3 9 9-9 9-9-9 9-9ZM9 9h3v6m0-3h4"],
+  wait: ["M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM12 7v5l3 2"],
+  cancel: ["M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM8 8l8 8m0-8-8 8"],
+  extension: ["M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM17 14v6m-3-3h6"],
+  play: ["m9 5 10 7-10 7V5Z"],
+  stop: ["M7 7h10v10H7z"],
+  pause: ["M8 5v14m8-14v14"],
+  next: ["m5 5 10 7-10 7V5Zm14 0v14"],
+  reset: ["M4 10a8 8 0 1 1 1 7M4 4v6h6"],
+  check: ["m5 12 4 4L19 6"],
+  error: ["M12 3 2 21h20L12 3Zm0 6v5m0 3v.2"],
+  in: ["M3 12h14m-5-5 5 5-5 5m6-14h3v18h-3"],
+  out: ["M3 12h14m-5-5 5 5-5 5M6 3H3v18h3"],
+  fork: ["M12 20v-8M6 4v5l6 3 6-3V4M4 4h4m8 0h4"],
+  join: ["M6 4v5l6 5 6-5V4m-6 10v6m-3-3 3 3 3-3"],
+  fit: ["M3 9V3h6m6 0h6v6M3 15v6h6m6 0h6v-6M8 8h8v8H8z"],
+  plus: ["M12 5v14M5 12h14"],
+  minus: ["M5 12h14"],
+  chevron: ["m9 5 7 7-7 7"],
+  search: ["M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-2 6 6 6"],
+  download: ["M12 3v12m-5-5 5 5 5-5M4 16v5h16v-5"],
+  copy: ["M8 8h12v13H8zM15 8V3H3v13h5"],
+  locate: ["M12 2v4m0 12v4M2 12h4m12 0h4M19 12a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"],
+  undo: ["m7 4-4 5 4 5M3 9h10a7 7 0 0 1 7 7v4"],
+  redo: ["m17 4 4 5-4 5m4-5H11a7 7 0 0 0-7 7v4"],
+  more: ["M5 11v2m7-2v2m7-2v2"],
+  info: ["M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM12 11v6m0-10v.1"]
+};
+function createFlowIcon(document2, name, size = 20) {
+  const svg = document2.createElementNS("http://www.w3.org/2000/svg", "svg");
+  for (const [key, value] of Object.entries({
+    viewBox: "0 0 24 24",
+    width: String(size),
+    height: String(size),
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "1.65",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    "data-icon": name
+  }))
+    svg.setAttribute(key, value);
+  for (const d of Object.hasOwn(iconPaths, name) ? iconPaths[name] : iconPaths.extension) {
+    const path = document2.createElementNS(svg.namespaceURI, "path");
+    path.setAttribute("d", d);
+    svg.append(path);
+  }
+  return svg;
+}
+function operationIcon(kind) {
+  const icons = {
+    process: "code",
+    api: "api",
+    database: "database",
+    file: "transfer",
+    ssh: "terminal",
+    sftp: "sftp",
+    mail: "mail",
+    messaging: "messaging",
+    event: "event",
+    cancel: "cancel",
+    generic: "extension",
+    task: "terminal",
+    decision: "decision",
+    wait: "wait",
+    fork: "fork",
+    join: "join",
+    start: "play",
+    end: "stop"
+  };
+  return Object.hasOwn(icons, kind) ? icons[kind] : "extension";
+}
+
+// src/svg/PhotonCard.ts
+function renderPhotonCard(document2, node, flow, observation, overlay, selected, capabilities) {
+  const size = nodeDimensions(node);
+  const object = document2.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "foreignObject"
+  );
+  object.setAttribute("x", String(-size.width / 2 - 4));
+  object.setAttribute("y", String(-size.height / 2 - 4));
+  object.setAttribute("width", String(size.width + 8));
+  object.setAttribute("height", String(size.height + 8));
+  object.setAttribute("overflow", "visible");
+  const el = (tag, text, parent, className) => {
+    const element = document2.createElementNS(
+      "http://www.w3.org/1999/xhtml",
+      tag
+    );
+    element.textContent = text;
+    element.className = className;
+    parent.append(element);
+    return element;
+  };
+  const action = "action" in node ? node.action : void 0;
+  const presentation = action ? actionPresentation(action) : void 0;
+  const state = observation?.status ?? "idle";
+  const article = el(
+    "article",
+    "",
+    object,
+    `flow-node flow-node--embedded${selected ? " selected" : ""}`
+  );
+  article.dataset.kind = action?.body.kind === "api" ? "service" : action?.body.kind ?? node.type;
+  article.dataset.state = state;
+  const header = el("header", "", article, "node-header");
+  el("div", "", header, "node-icon").append(
+    createFlowIcon(document2, operationIcon(action?.body.kind ?? node.type), 18)
+  );
+  const labels = el("div", "", header, "");
+  const title = el("div", node.label, labels, "node-title");
+  title.title = node.label;
+  el(
+    "div",
+    presentation?.title ?? (node.type === "decision" ? "Conditional \xB7 Decision" : node.type === "wait" ? "External response \xB7 Wait" : `${node.type} \xB7 Plan`),
+    labels,
+    "node-subtitle"
+  );
+  const signals = el("div", "", article, "signals");
+  const observations = overlay?.signals?.filter((signal) => signal.nodeId === node.id) ?? [];
+  const inputs = node.signals?.inputs ?? (node.type === "wait" ? [node.signal] : []);
+  const outputs = node.signals?.outputs ?? [];
+  for (const [direction, names] of [
+    ["in", inputs],
+    ["out", outputs]
+  ]) {
+    for (const name of names.length ? names : ["\u2014"]) {
+      const observed = observations.some(
+        (signal) => signal.name === name && signal.direction === direction
+      );
+      const chip = el("span", "", signals, "signal");
+      chip.dataset.field = `signals-${direction}`;
+      chip.dataset.observed = String(observed);
+      chip.title = `${direction === "in" ? "Input" : "Output"}: ${name}${observed ? " \xB7 observed" : ""}`;
+      chip.append(createFlowIcon(document2, observed ? "check" : direction, 12));
+      el("span", name, chip, "");
+    }
+  }
+  let label = "Handler", preview = node.type;
+  if (action) {
+    const body = action.body;
+    switch (body.kind) {
+      case "process":
+        label = "Profile";
+        preview = body.profile;
+        break;
+      case "api":
+        label = "Endpoint";
+        preview = `${body.method} ${presentation.lines[0]}`;
+        break;
+      case "database":
+        label = "Datasource";
+        preview = body.datasource;
+        break;
+      case "file":
+        label = "Path";
+        preview = body.path;
+        break;
+      case "ssh":
+      case "sftp":
+      case "mail":
+      case "messaging":
+        label = "Connection";
+        preview = body.connectionId;
+        break;
+      case "event":
+        label = "Topic";
+        preview = body.topic;
+        break;
+      case "cancel":
+        label = "Target";
+        preview = body.targetCommandId;
+        break;
+      case "generic":
+        label = "Extension";
+        preview = body.name;
+        break;
+    }
+  } else if (node.type === "wait") {
+    label = "Signal";
+    preview = node.signal;
+  } else if (node.type === "decision") {
+    label = "Condition";
+    const branch = flow.edges.find(
+      (edge2) => edge2.source === node.id && edge2.condition
+    );
+    preview = branch?.condition ? formatCondition(branch.condition) : "Not configured";
+  } else if (node.type === "task") preview = node.handler ?? "Not configured";
+  const row = el("div", "", article, "action-preview");
+  el("span", label, row, "preview-label");
+  const value = el("code", preview, row, "preview-value");
+  value.title = preview;
+  value.dataset.field = "action-preview";
+  el("div", "", article, "node-divider");
+  const footer = el("div", "", article, "node-footer");
+  const execution = el("span", "", footer, "execution");
+  el("span", "", execution, "status-dot");
+  const choice = overlay?.decisions && Object.hasOwn(overlay.decisions, node.id) ? overlay.decisions[node.id] : void 0;
+  const edge = choice ? flow.edges.find((edge2) => edge2.id === choice.edgeId) : void 0;
+  const status = choice ? `Selected: ${edge?.label ?? choice.edgeId}` : state.replaceAll("_", " ").replace(/^./, (letter) => letter.toUpperCase());
+  const statusText = el("span", status, execution, "");
+  statusText.dataset.field = "execution-status";
+  const progress = observation?.progress;
+  const detail = action && capabilityState(action.type, capabilities) === "unsupported" ? "Not advertised / unsupported by runner" : choice?.reason ?? (progress ? `${progress.current}${progress.total ? ` / ${progress.total}` : ""} ${progress.unit}` : observation?.detail ?? "Display only");
+  execution.title = detail;
+  const accessible = el("span", detail, execution, "execution-detail");
+  accessible.dataset.field = "execution-detail";
+  const type = el("code", action?.type ?? node.type, footer, "action-type");
+  type.title = type.textContent ?? "";
+  type.dataset.field = "action-type";
+  return object;
+}
+
+// src/svg/NodeTooltip.ts
+var NodeTooltip = class {
+  constructor(document2, id) {
+    this.document = document2;
+    this.element = document2.createElement("div");
+    this.element.id = id;
+    this.element.setAttribute("role", "tooltip");
+    this.element.hidden = true;
+    this.element.style.cssText = "position:fixed;z-index:10000;pointer-events:none;width:312px;max-width:calc(100vw - 24px);padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-card-hover);font:12px/1.6 var(--font-sans)";
+    (document2.body ?? document2.documentElement).append(this.element);
+  }
+  document;
+  element;
+  target = null;
+  show(node, flow, observation, capabilities, target, anchor) {
+    this.hide();
+    this.target = target;
+    this.element.replaceChildren();
+    const action = "action" in node ? node.action : void 0;
+    const preview = action ? actionPresentation(action) : void 0;
+    const heading = this.document.createElement("div");
+    heading.style.cssText = "display:flex;align-items:center;gap:9px;font-weight:600;color:var(--text);margin-bottom:8px";
+    heading.append(
+      createFlowIcon(
+        this.document,
+        operationIcon(action?.body.kind ?? node.type),
+        18
+      )
+    );
+    const title = this.document.createElement("span");
+    title.textContent = node.label;
+    heading.append(title);
+    this.element.append(heading);
+    const meta = this.document.createElement("div");
+    meta.style.cssText = "color:var(--accent);font:11px var(--font-mono);margin-bottom:10px";
+    meta.textContent = action ? `${action.type} \xB7 ${capabilityState(action.type, capabilities)}` : node.type === "decision" ? "Decision \xB7 observed routing" : node.type === "wait" ? `Waiting for ${node.signal}` : node.type;
+    this.element.append(meta);
+    const code = node.type === "decision" ? node.decision?.expression : preview?.code;
+    const content = this.document.createElement("pre");
+    content.style.cssText = "margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.65 var(--font-mono);color:var(--text-secondary)";
+    const lines = code?.source.split(/\r?\n/) ?? preview?.lines ?? (node.type === "decision" ? flow.edges.filter((edge) => edge.source === node.id).map(
+      (edge) => `${edge.label ?? edge.target}: ${edge.default ? "otherwise" : edge.condition ? formatCondition(edge.condition) : "unconfigured"}`
+    ) : []);
+    content.textContent = (code ? `${code.language}
+` : "") + lines.slice(0, 5).join("\n").slice(0, 480) + (lines.length > 5 ? "\n\u2026" : "");
+    this.element.append(content);
+    if (observation?.detail) {
+      const detail = this.document.createElement("p");
+      detail.style.cssText = "margin:10px 0 0;color:var(--text-secondary)";
+      detail.textContent = observation.detail.slice(0, 160);
+      this.element.append(detail);
+    }
+    const hint = this.document.createElement("div");
+    hint.style.cssText = "margin-top:12px;padding-top:10px;border-top:1px solid var(--border);color:var(--text-muted);font-size:10px;letter-spacing:.04em";
+    hint.textContent = "SELECT TO ASSEMBLE \xB7 DISPLAY ONLY";
+    this.element.append(hint);
+    target.setAttribute("aria-describedby", this.element.id);
+    this.element.hidden = false;
+    const bounds = this.element.getBoundingClientRect();
+    const viewport = this.document.defaultView;
+    const width = viewport?.innerWidth ?? 1024, height = viewport?.innerHeight ?? 768;
+    this.element.style.left = `${Math.max(12, Math.min(anchor.x + 16, width - bounds.width - 12))}px`;
+    this.element.style.top = `${Math.max(12, Math.min(anchor.y + 14, height - bounds.height - 12))}px`;
+  }
+  hide() {
+    this.target?.removeAttribute("aria-describedby");
+    this.target = null;
+    this.element.hidden = true;
+  }
+  destroy() {
+    this.hide();
+    this.element.remove();
+  }
+};
+
+// node_modules/d3-selection/src/namespaces.js
+var xhtml = "http://www.w3.org/1999/xhtml";
+var namespaces_default = {
+  svg: "http://www.w3.org/2000/svg",
+  xhtml,
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace",
+  xmlns: "http://www.w3.org/2000/xmlns/"
+};
+
+// node_modules/d3-selection/src/namespace.js
+function namespace_default(name) {
+  var prefix = name += "", i = prefix.indexOf(":");
+  if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
+  return namespaces_default.hasOwnProperty(prefix) ? { space: namespaces_default[prefix], local: name } : name;
+}
+
+// node_modules/d3-selection/src/creator.js
+function creatorInherit(name) {
+  return function() {
+    var document2 = this.ownerDocument, uri = this.namespaceURI;
+    return uri === xhtml && document2.documentElement.namespaceURI === xhtml ? document2.createElement(name) : document2.createElementNS(uri, name);
+  };
+}
+function creatorFixed(fullname) {
+  return function() {
+    return this.ownerDocument.createElementNS(fullname.space, fullname.local);
+  };
+}
+function creator_default(name) {
+  var fullname = namespace_default(name);
+  return (fullname.local ? creatorFixed : creatorInherit)(fullname);
+}
+
+// node_modules/d3-selection/src/selector.js
+function none() {
+}
+function selector_default(selector) {
+  return selector == null ? none : function() {
+    return this.querySelector(selector);
+  };
+}
+
+// node_modules/d3-selection/src/selection/select.js
+function select_default(select) {
+  if (typeof select !== "function") select = selector_default(select);
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
+      if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
+        if ("__data__" in node) subnode.__data__ = node.__data__;
+        subgroup[i] = subnode;
+      }
+    }
+  }
+  return new Selection(subgroups, this._parents);
+}
+
+// node_modules/d3-selection/src/array.js
+function array(x) {
+  return x == null ? [] : Array.isArray(x) ? x : Array.from(x);
+}
+
+// node_modules/d3-selection/src/selectorAll.js
+function empty() {
+  return [];
+}
+function selectorAll_default(selector) {
+  return selector == null ? empty : function() {
+    return this.querySelectorAll(selector);
+  };
+}
+
+// node_modules/d3-selection/src/selection/selectAll.js
+function arrayAll(select) {
+  return function() {
+    return array(select.apply(this, arguments));
+  };
+}
+function selectAll_default(select) {
+  if (typeof select === "function") select = arrayAll(select);
+  else select = selectorAll_default(select);
+  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        subgroups.push(select.call(node, node.__data__, i, group));
+        parents.push(node);
+      }
+    }
+  }
+  return new Selection(subgroups, parents);
+}
+
+// node_modules/d3-selection/src/matcher.js
+function matcher_default(selector) {
+  return function() {
+    return this.matches(selector);
+  };
+}
+function childMatcher(selector) {
+  return function(node) {
+    return node.matches(selector);
+  };
+}
+
+// node_modules/d3-selection/src/selection/selectChild.js
+var find = Array.prototype.find;
+function childFind(match) {
+  return function() {
+    return find.call(this.children, match);
+  };
+}
+function childFirst() {
+  return this.firstElementChild;
+}
+function selectChild_default(match) {
+  return this.select(match == null ? childFirst : childFind(typeof match === "function" ? match : childMatcher(match)));
+}
+
+// node_modules/d3-selection/src/selection/selectChildren.js
+var filter = Array.prototype.filter;
+function children() {
+  return Array.from(this.children);
+}
+function childrenFilter(match) {
+  return function() {
+    return filter.call(this.children, match);
+  };
+}
+function selectChildren_default(match) {
+  return this.selectAll(match == null ? children : childrenFilter(typeof match === "function" ? match : childMatcher(match)));
+}
+
+// node_modules/d3-selection/src/selection/filter.js
+function filter_default(match) {
+  if (typeof match !== "function") match = matcher_default(match);
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
+      if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
+        subgroup.push(node);
+      }
+    }
+  }
+  return new Selection(subgroups, this._parents);
+}
+
+// node_modules/d3-selection/src/selection/sparse.js
+function sparse_default(update) {
+  return new Array(update.length);
+}
+
+// node_modules/d3-selection/src/selection/enter.js
+function enter_default() {
+  return new Selection(this._enter || this._groups.map(sparse_default), this._parents);
+}
+function EnterNode(parent, datum2) {
+  this.ownerDocument = parent.ownerDocument;
+  this.namespaceURI = parent.namespaceURI;
+  this._next = null;
+  this._parent = parent;
+  this.__data__ = datum2;
+}
+EnterNode.prototype = {
+  constructor: EnterNode,
+  appendChild: function(child) {
+    return this._parent.insertBefore(child, this._next);
+  },
+  insertBefore: function(child, next) {
+    return this._parent.insertBefore(child, next);
+  },
+  querySelector: function(selector) {
+    return this._parent.querySelector(selector);
+  },
+  querySelectorAll: function(selector) {
+    return this._parent.querySelectorAll(selector);
+  }
+};
+
+// node_modules/d3-selection/src/constant.js
+function constant_default(x) {
+  return function() {
+    return x;
+  };
+}
+
+// node_modules/d3-selection/src/selection/data.js
+function bindIndex(parent, group, enter, update, exit, data) {
+  var i = 0, node, groupLength = group.length, dataLength = data.length;
+  for (; i < dataLength; ++i) {
+    if (node = group[i]) {
+      node.__data__ = data[i];
+      update[i] = node;
+    } else {
+      enter[i] = new EnterNode(parent, data[i]);
+    }
+  }
+  for (; i < groupLength; ++i) {
+    if (node = group[i]) {
+      exit[i] = node;
+    }
+  }
+}
+function bindKey(parent, group, enter, update, exit, data, key) {
+  var i, node, nodeByKeyValue = /* @__PURE__ */ new Map(), groupLength = group.length, dataLength = data.length, keyValues = new Array(groupLength), keyValue;
+  for (i = 0; i < groupLength; ++i) {
+    if (node = group[i]) {
+      keyValues[i] = keyValue = key.call(node, node.__data__, i, group) + "";
+      if (nodeByKeyValue.has(keyValue)) {
+        exit[i] = node;
+      } else {
+        nodeByKeyValue.set(keyValue, node);
+      }
+    }
+  }
+  for (i = 0; i < dataLength; ++i) {
+    keyValue = key.call(parent, data[i], i, data) + "";
+    if (node = nodeByKeyValue.get(keyValue)) {
+      update[i] = node;
+      node.__data__ = data[i];
+      nodeByKeyValue.delete(keyValue);
+    } else {
+      enter[i] = new EnterNode(parent, data[i]);
+    }
+  }
+  for (i = 0; i < groupLength; ++i) {
+    if ((node = group[i]) && nodeByKeyValue.get(keyValues[i]) === node) {
+      exit[i] = node;
+    }
+  }
+}
+function datum(node) {
+  return node.__data__;
+}
+function data_default(value, key) {
+  if (!arguments.length) return Array.from(this, datum);
+  var bind = key ? bindKey : bindIndex, parents = this._parents, groups = this._groups;
+  if (typeof value !== "function") value = constant_default(value);
+  for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
+    var parent = parents[j], group = groups[j], groupLength = group.length, data = arraylike(value.call(parent, parent && parent.__data__, j, parents)), dataLength = data.length, enterGroup = enter[j] = new Array(dataLength), updateGroup = update[j] = new Array(dataLength), exitGroup = exit[j] = new Array(groupLength);
+    bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
+    for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
+      if (previous = enterGroup[i0]) {
+        if (i0 >= i1) i1 = i0 + 1;
+        while (!(next = updateGroup[i1]) && ++i1 < dataLength) ;
+        previous._next = next || null;
+      }
+    }
+  }
+  update = new Selection(update, parents);
+  update._enter = enter;
+  update._exit = exit;
+  return update;
+}
+function arraylike(data) {
+  return typeof data === "object" && "length" in data ? data : Array.from(data);
+}
+
+// node_modules/d3-selection/src/selection/exit.js
+function exit_default() {
+  return new Selection(this._exit || this._groups.map(sparse_default), this._parents);
+}
+
+// node_modules/d3-selection/src/selection/join.js
+function join_default(onenter, onupdate, onexit) {
+  var enter = this.enter(), update = this, exit = this.exit();
+  if (typeof onenter === "function") {
+    enter = onenter(enter);
+    if (enter) enter = enter.selection();
+  } else {
+    enter = enter.append(onenter + "");
+  }
+  if (onupdate != null) {
+    update = onupdate(update);
+    if (update) update = update.selection();
+  }
+  if (onexit == null) exit.remove();
+  else onexit(exit);
+  return enter && update ? enter.merge(update).order() : update;
+}
+
+// node_modules/d3-selection/src/selection/merge.js
+function merge_default(context) {
+  var selection2 = context.selection ? context.selection() : context;
+  for (var groups0 = this._groups, groups1 = selection2._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
+    for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
+      if (node = group0[i] || group1[i]) {
+        merge[i] = node;
+      }
+    }
+  }
+  for (; j < m0; ++j) {
+    merges[j] = groups0[j];
+  }
+  return new Selection(merges, this._parents);
+}
+
+// node_modules/d3-selection/src/selection/order.js
+function order_default() {
+  for (var groups = this._groups, j = -1, m = groups.length; ++j < m; ) {
+    for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0; ) {
+      if (node = group[i]) {
+        if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
+        next = node;
+      }
+    }
+  }
+  return this;
+}
+
+// node_modules/d3-selection/src/selection/sort.js
+function sort_default(compare) {
+  if (!compare) compare = ascending;
+  function compareNode(a, b) {
+    return a && b ? compare(a.__data__, b.__data__) : !a - !b;
+  }
+  for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        sortgroup[i] = node;
+      }
+    }
+    sortgroup.sort(compareNode);
+  }
+  return new Selection(sortgroups, this._parents).order();
+}
+function ascending(a, b) {
+  return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+}
+
+// node_modules/d3-selection/src/selection/call.js
+function call_default() {
+  var callback = arguments[0];
+  arguments[0] = this;
+  callback.apply(null, arguments);
+  return this;
+}
+
+// node_modules/d3-selection/src/selection/nodes.js
+function nodes_default() {
+  return Array.from(this);
+}
+
+// node_modules/d3-selection/src/selection/node.js
+function node_default() {
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
+      var node = group[i];
+      if (node) return node;
+    }
+  }
+  return null;
+}
+
+// node_modules/d3-selection/src/selection/size.js
+function size_default() {
+  let size = 0;
+  for (const node of this) ++size;
+  return size;
+}
+
+// node_modules/d3-selection/src/selection/empty.js
+function empty_default() {
+  return !this.node();
+}
+
+// node_modules/d3-selection/src/selection/each.js
+function each_default(callback) {
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+      if (node = group[i]) callback.call(node, node.__data__, i, group);
+    }
+  }
+  return this;
+}
+
+// node_modules/d3-selection/src/selection/attr.js
+function attrRemove(name) {
+  return function() {
+    this.removeAttribute(name);
+  };
+}
+function attrRemoveNS(fullname) {
+  return function() {
+    this.removeAttributeNS(fullname.space, fullname.local);
+  };
+}
+function attrConstant(name, value) {
+  return function() {
+    this.setAttribute(name, value);
+  };
+}
+function attrConstantNS(fullname, value) {
+  return function() {
+    this.setAttributeNS(fullname.space, fullname.local, value);
+  };
+}
+function attrFunction(name, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.removeAttribute(name);
+    else this.setAttribute(name, v);
+  };
+}
+function attrFunctionNS(fullname, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
+    else this.setAttributeNS(fullname.space, fullname.local, v);
+  };
+}
+function attr_default(name, value) {
+  var fullname = namespace_default(name);
+  if (arguments.length < 2) {
+    var node = this.node();
+    return fullname.local ? node.getAttributeNS(fullname.space, fullname.local) : node.getAttribute(fullname);
+  }
+  return this.each((value == null ? fullname.local ? attrRemoveNS : attrRemove : typeof value === "function" ? fullname.local ? attrFunctionNS : attrFunction : fullname.local ? attrConstantNS : attrConstant)(fullname, value));
+}
+
+// node_modules/d3-selection/src/window.js
+function window_default(node) {
+  return node.ownerDocument && node.ownerDocument.defaultView || node.document && node || node.defaultView;
+}
+
+// node_modules/d3-selection/src/selection/style.js
+function styleRemove(name) {
+  return function() {
+    this.style.removeProperty(name);
+  };
+}
+function styleConstant(name, value, priority) {
+  return function() {
+    this.style.setProperty(name, value, priority);
+  };
+}
+function styleFunction(name, value, priority) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.style.removeProperty(name);
+    else this.style.setProperty(name, v, priority);
+  };
+}
+function style_default(name, value, priority) {
+  return arguments.length > 1 ? this.each((value == null ? styleRemove : typeof value === "function" ? styleFunction : styleConstant)(name, value, priority == null ? "" : priority)) : styleValue(this.node(), name);
+}
+function styleValue(node, name) {
+  return node.style.getPropertyValue(name) || window_default(node).getComputedStyle(node, null).getPropertyValue(name);
+}
+
+// node_modules/d3-selection/src/selection/property.js
+function propertyRemove(name) {
+  return function() {
+    delete this[name];
+  };
+}
+function propertyConstant(name, value) {
+  return function() {
+    this[name] = value;
+  };
+}
+function propertyFunction(name, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) delete this[name];
+    else this[name] = v;
+  };
+}
+function property_default(name, value) {
+  return arguments.length > 1 ? this.each((value == null ? propertyRemove : typeof value === "function" ? propertyFunction : propertyConstant)(name, value)) : this.node()[name];
+}
+
+// node_modules/d3-selection/src/selection/classed.js
+function classArray(string) {
+  return string.trim().split(/^|\s+/);
+}
+function classList(node) {
+  return node.classList || new ClassList(node);
+}
+function ClassList(node) {
+  this._node = node;
+  this._names = classArray(node.getAttribute("class") || "");
+}
+ClassList.prototype = {
+  add: function(name) {
+    var i = this._names.indexOf(name);
+    if (i < 0) {
+      this._names.push(name);
+      this._node.setAttribute("class", this._names.join(" "));
+    }
+  },
+  remove: function(name) {
+    var i = this._names.indexOf(name);
+    if (i >= 0) {
+      this._names.splice(i, 1);
+      this._node.setAttribute("class", this._names.join(" "));
+    }
+  },
+  contains: function(name) {
+    return this._names.indexOf(name) >= 0;
+  }
+};
+function classedAdd(node, names) {
+  var list = classList(node), i = -1, n = names.length;
+  while (++i < n) list.add(names[i]);
+}
+function classedRemove(node, names) {
+  var list = classList(node), i = -1, n = names.length;
+  while (++i < n) list.remove(names[i]);
+}
+function classedTrue(names) {
+  return function() {
+    classedAdd(this, names);
+  };
+}
+function classedFalse(names) {
+  return function() {
+    classedRemove(this, names);
+  };
+}
+function classedFunction(names, value) {
+  return function() {
+    (value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);
+  };
+}
+function classed_default(name, value) {
+  var names = classArray(name + "");
+  if (arguments.length < 2) {
+    var list = classList(this.node()), i = -1, n = names.length;
+    while (++i < n) if (!list.contains(names[i])) return false;
+    return true;
+  }
+  return this.each((typeof value === "function" ? classedFunction : value ? classedTrue : classedFalse)(names, value));
+}
+
+// node_modules/d3-selection/src/selection/text.js
+function textRemove() {
+  this.textContent = "";
+}
+function textConstant(value) {
+  return function() {
+    this.textContent = value;
+  };
+}
+function textFunction(value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    this.textContent = v == null ? "" : v;
+  };
+}
+function text_default(value) {
+  return arguments.length ? this.each(value == null ? textRemove : (typeof value === "function" ? textFunction : textConstant)(value)) : this.node().textContent;
+}
+
+// node_modules/d3-selection/src/selection/html.js
+function htmlRemove() {
+  this.innerHTML = "";
+}
+function htmlConstant(value) {
+  return function() {
+    this.innerHTML = value;
+  };
+}
+function htmlFunction(value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    this.innerHTML = v == null ? "" : v;
+  };
+}
+function html_default(value) {
+  return arguments.length ? this.each(value == null ? htmlRemove : (typeof value === "function" ? htmlFunction : htmlConstant)(value)) : this.node().innerHTML;
+}
+
+// node_modules/d3-selection/src/selection/raise.js
+function raise() {
+  if (this.nextSibling) this.parentNode.appendChild(this);
+}
+function raise_default() {
+  return this.each(raise);
+}
+
+// node_modules/d3-selection/src/selection/lower.js
+function lower() {
+  if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
+}
+function lower_default() {
+  return this.each(lower);
+}
+
+// node_modules/d3-selection/src/selection/append.js
+function append_default(name) {
+  var create = typeof name === "function" ? name : creator_default(name);
+  return this.select(function() {
+    return this.appendChild(create.apply(this, arguments));
+  });
+}
+
+// node_modules/d3-selection/src/selection/insert.js
+function constantNull() {
+  return null;
+}
+function insert_default(name, before) {
+  var create = typeof name === "function" ? name : creator_default(name), select = before == null ? constantNull : typeof before === "function" ? before : selector_default(before);
+  return this.select(function() {
+    return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
+  });
+}
+
+// node_modules/d3-selection/src/selection/remove.js
+function remove() {
+  var parent = this.parentNode;
+  if (parent) parent.removeChild(this);
+}
+function remove_default() {
+  return this.each(remove);
+}
+
+// node_modules/d3-selection/src/selection/clone.js
+function selection_cloneShallow() {
+  var clone2 = this.cloneNode(false), parent = this.parentNode;
+  return parent ? parent.insertBefore(clone2, this.nextSibling) : clone2;
+}
+function selection_cloneDeep() {
+  var clone2 = this.cloneNode(true), parent = this.parentNode;
+  return parent ? parent.insertBefore(clone2, this.nextSibling) : clone2;
+}
+function clone_default(deep) {
+  return this.select(deep ? selection_cloneDeep : selection_cloneShallow);
+}
+
+// node_modules/d3-selection/src/selection/datum.js
+function datum_default(value) {
+  return arguments.length ? this.property("__data__", value) : this.node().__data__;
+}
+
+// node_modules/d3-selection/src/selection/on.js
+function contextListener(listener) {
+  return function(event) {
+    listener.call(this, event, this.__data__);
+  };
+}
+function parseTypenames(typenames) {
+  return typenames.trim().split(/^|\s+/).map(function(t) {
+    var name = "", i = t.indexOf(".");
+    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
+    return { type: t, name };
+  });
+}
+function onRemove(typename) {
+  return function() {
+    var on = this.__on;
+    if (!on) return;
+    for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
+      if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
+        this.removeEventListener(o.type, o.listener, o.options);
+      } else {
+        on[++i] = o;
+      }
+    }
+    if (++i) on.length = i;
+    else delete this.__on;
+  };
+}
+function onAdd(typename, value, options) {
+  return function() {
+    var on = this.__on, o, listener = contextListener(value);
+    if (on) for (var j = 0, m = on.length; j < m; ++j) {
+      if ((o = on[j]).type === typename.type && o.name === typename.name) {
+        this.removeEventListener(o.type, o.listener, o.options);
+        this.addEventListener(o.type, o.listener = listener, o.options = options);
+        o.value = value;
+        return;
+      }
+    }
+    this.addEventListener(typename.type, listener, options);
+    o = { type: typename.type, name: typename.name, value, listener, options };
+    if (!on) this.__on = [o];
+    else on.push(o);
+  };
+}
+function on_default(typename, value, options) {
+  var typenames = parseTypenames(typename + ""), i, n = typenames.length, t;
+  if (arguments.length < 2) {
+    var on = this.node().__on;
+    if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
+      for (i = 0, o = on[j]; i < n; ++i) {
+        if ((t = typenames[i]).type === o.type && t.name === o.name) {
+          return o.value;
+        }
+      }
+    }
+    return;
+  }
+  on = value ? onAdd : onRemove;
+  for (i = 0; i < n; ++i) this.each(on(typenames[i], value, options));
+  return this;
+}
+
+// node_modules/d3-selection/src/selection/dispatch.js
+function dispatchEvent(node, type, params) {
+  var window = window_default(node), event = window.CustomEvent;
+  if (typeof event === "function") {
+    event = new event(type, params);
+  } else {
+    event = window.document.createEvent("Event");
+    if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
+    else event.initEvent(type, false, false);
+  }
+  node.dispatchEvent(event);
+}
+function dispatchConstant(type, params) {
+  return function() {
+    return dispatchEvent(this, type, params);
+  };
+}
+function dispatchFunction(type, params) {
+  return function() {
+    return dispatchEvent(this, type, params.apply(this, arguments));
+  };
+}
+function dispatch_default(type, params) {
+  return this.each((typeof params === "function" ? dispatchFunction : dispatchConstant)(type, params));
+}
+
+// node_modules/d3-selection/src/selection/iterator.js
+function* iterator_default() {
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+      if (node = group[i]) yield node;
+    }
+  }
+}
+
+// node_modules/d3-selection/src/selection/index.js
+var root = [null];
+function Selection(groups, parents) {
+  this._groups = groups;
+  this._parents = parents;
+}
+function selection() {
+  return new Selection([[document.documentElement]], root);
+}
+function selection_selection() {
+  return this;
+}
+Selection.prototype = selection.prototype = {
+  constructor: Selection,
+  select: select_default,
+  selectAll: selectAll_default,
+  selectChild: selectChild_default,
+  selectChildren: selectChildren_default,
+  filter: filter_default,
+  data: data_default,
+  enter: enter_default,
+  exit: exit_default,
+  join: join_default,
+  merge: merge_default,
+  selection: selection_selection,
+  order: order_default,
+  sort: sort_default,
+  call: call_default,
+  nodes: nodes_default,
+  node: node_default,
+  size: size_default,
+  empty: empty_default,
+  each: each_default,
+  attr: attr_default,
+  style: style_default,
+  property: property_default,
+  classed: classed_default,
+  text: text_default,
+  html: html_default,
+  raise: raise_default,
+  lower: lower_default,
+  append: append_default,
+  insert: insert_default,
+  remove: remove_default,
+  clone: clone_default,
+  datum: datum_default,
+  on: on_default,
+  dispatch: dispatch_default,
+  [Symbol.iterator]: iterator_default
+};
+
+// node_modules/d3-selection/src/select.js
+function select_default2(selector) {
+  return typeof selector === "string" ? new Selection([[document.querySelector(selector)]], [document.documentElement]) : new Selection([[selector]], root);
+}
+
+// node_modules/d3-interpolate/src/number.js
+function number_default(a, b) {
+  return a = +a, b = +b, function(t) {
+    return a * (1 - t) + b * t;
+  };
+}
+
+// node_modules/d3-ease/src/cubic.js
+function cubicOut(t) {
+  return --t * t * t + 1;
+}
+
+// src/svg/SvgFlowEditor.ts
+var NS = "http://www.w3.org/2000/svg";
+var instances = 0;
+var SvgFlowEditor = class {
+  constructor(svg, store, options = {}) {
+    this.svg = svg;
+    this.store = store;
+    this.options = options;
+    if (!svg || svg.namespaceURI !== NS || svg.tagName.toLowerCase() !== "svg")
+      throw new FlowError("INVALID_SVG", "Expected an SVG root element.");
+    this.width = options.width ?? 1e3;
+    this.height = options.height ?? 600;
+    this.checkSize(this.width, this.height);
+    this.animationDuration = options.animationDuration ?? 180;
+    if (!Number.isFinite(this.animationDuration) || this.animationDuration < 0 || this.animationDuration > 5e3)
+      throw new FlowError(
+        "INVALID_DURATION",
+        "animationDuration must be between 0 and 5000 milliseconds."
+      );
+    if (options.force !== false)
+      this.placement = new ForcePlacement(
+        store.getSnapshot(),
+        typeof options.force === "object" ? options.force : {}
+      );
+    this.capabilities = options.capabilities ? [...options.capabilities] : void 0;
+    const instance = `flow-${++instances}-${Math.random().toString(36).slice(2)}`;
+    this.markerId = `${instance}-arrow`;
+    this.tooltip = options.tooltips === false ? null : new NodeTooltip(svg.ownerDocument, `${instance}-tooltip`);
+    this.root = this.element("g", {
+      "data-flow-root": instance,
+      role: "group",
+      "aria-label": options.ariaLabel ?? "Flow editor",
+      tabindex: "0",
+      style: "touch-action: none; user-select: none"
+    });
+    const defs = this.element("defs");
+    const marker = this.element("marker", {
+      id: this.markerId,
+      viewBox: "0 -5 10 10",
+      refX: "9",
+      refY: "0",
+      markerWidth: "7",
+      markerHeight: "7",
+      orient: "auto-start-reverse"
+    });
+    marker.append(
+      this.element("path", { d: "M0,-5L10,0L0,5", fill: "context-stroke" })
+    );
+    defs.append(marker);
+    this.background = this.element("rect", {
+      x: "0",
+      y: "0",
+      width: String(this.width),
+      height: String(this.height),
+      fill: "transparent"
+    });
+    this.viewportGroup = this.element("g");
+    this.edgesGroup = this.element("g", { "data-layer": "edges" });
+    this.nodesGroup = this.element("g", { "data-layer": "nodes" });
+    this.viewportGroup.append(this.edgesGroup, this.nodesGroup);
+    this.root.append(defs, this.background, this.viewportGroup);
+    svg.append(this.root);
+    this.listen(
+      this.root,
+      "pointerover",
+      (event) => this.hover(event)
+    );
+    this.listen(this.root, "pointerout", (event) => {
+      const related = event.relatedTarget;
+      if (!related || !this.target(event)?.contains(related)) {
+        this.suppressedTooltipId = null;
+        this.clearHover();
+      }
+    });
+    this.listen(this.root, "focusin", (event) => this.hover(event));
+    this.listen(this.root, "focusout", () => {
+      this.suppressedTooltipId = null;
+      this.clearHover();
+    });
+    this.listen(this.root, "click", (event) => this.click(event));
+    this.listen(this.root, "dblclick", (event) => {
+      const id = this.target(event)?.getAttribute("data-node-id");
+      const node = this.store.getSnapshot().nodes.find((item) => item.id === id);
+      if (node) this.options.onNodeActivate?.(node);
+    });
+    this.listen(
+      this.root,
+      "keydown",
+      (event) => this.keydown(event)
+    );
+    this.listen(
+      this.root,
+      "pointerdown",
+      (event) => this.pointerdown(event)
+    );
+    const window = svg.ownerDocument.defaultView;
+    const media = window?.matchMedia?.("(prefers-reduced-motion: reduce)");
+    this.reducedMotion = options.motion === "reduced" || options.motion !== "full" && Boolean(media?.matches);
+    if (media && (!options.motion || options.motion === "auto")) {
+      this.listen(media, "change", (event) => {
+        this.reducedMotion = event.matches;
+        if (this.reducedMotion) {
+          this.viewportTimer?.stop();
+          this.viewportTimer = null;
+          this.placement?.stop();
+          this.render();
+        }
+      });
+    }
+    if (window) {
+      this.listen(
+        window,
+        "pointermove",
+        (event) => this.pointermove(event)
+      );
+      this.listen(
+        window,
+        "pointerup",
+        (event) => this.pointerup(event)
+      );
+      this.listen(window, "pointercancel", () => this.cancelDrag());
+      this.listen(window, "blur", () => {
+        this.clearHover();
+        this.cancelDrag();
+      });
+      this.listen(window, "scroll", () => this.clearHover(), { capture: true });
+      this.listen(window, "resize", () => this.clearHover());
+    }
+    this.listen(
+      this.root,
+      "wheel",
+      (event) => {
+        const wheel = event;
+        wheel.preventDefault();
+        this.zoomBy(wheel.deltaY < 0 ? 1.1 : 1 / 1.1, this.point(wheel));
+      },
+      { passive: false }
+    );
+    this.unsubscribe = store.subscribe(() => {
+      if (this.drag?.kind === "node" && !store.getSnapshot().nodes.some((node) => node.id === this.drag.id))
+        this.drag = null;
+      const changed = this.placement?.update(store.getSnapshot());
+      if (this.selected && !(this.selected.type === "node" ? store.getSnapshot().nodes : this.selected.type === "global" ? store.getSnapshot().globals ?? [] : store.getSnapshot().edges).some((item) => item.id === this.selected.id))
+        this.select(null);
+      if (this.connection && !store.getSnapshot().nodes.some((node) => node.id === this.connection))
+        this.connection = null;
+      if (this.reconnection && !store.getSnapshot().edges.some((edge) => edge.id === this.reconnection.edgeId)) {
+        this.reconnection = null;
+        this.connection = null;
+      }
+      this.render();
+      if (changed) this.relax();
+    });
+    if (this.placement) this.observePlacement();
+    this.render();
+    if (this.placement) this.relax();
+  }
+  svg;
+  store;
+  options;
+  root;
+  background;
+  viewportGroup;
+  edgesGroup;
+  nodesGroup;
+  markerId;
+  cleanup = [];
+  unsubscribe;
+  context = {};
+  execution = null;
+  capabilities;
+  viewOverrides = /* @__PURE__ */ new Map();
+  selected = null;
+  connection = null;
+  reconnection = null;
+  viewport = { x: 0, y: 0, scale: 1 };
+  drag = null;
+  destroyed = false;
+  suppressClick = false;
+  width;
+  height;
+  placement = null;
+  positions = /* @__PURE__ */ new Map();
+  positionTimer = null;
+  viewportTimer = null;
+  reducedMotion = false;
+  animationDuration;
+  tooltip;
+  hovered = null;
+  suppressedTooltipId = null;
+  getSelection() {
+    return this.selected ? { ...this.selected } : null;
+  }
+  getViewport() {
+    return { ...this.viewport };
+  }
+  select(selection2) {
+    this.alive();
+    if (selection2) {
+      const items = selection2.type === "node" ? this.store.getSnapshot().nodes : selection2.type === "global" ? this.store.getSnapshot().globals ?? [] : this.store.getSnapshot().edges;
+      if (!items.some((item) => item.id === selection2.id))
+        throw new FlowError(
+          "SELECTION_NOT_FOUND",
+          `Unknown ${selection2.type} ${selection2.id}.`
+        );
+    }
+    this.selected = selection2 ? { ...selection2 } : null;
+    this.render();
+    this.options.onSelect?.(this.getSelection());
+  }
+  setContext(context) {
+    this.alive();
+    assertJson(context);
+    if (!context || typeof context !== "object" || Array.isArray(context))
+      throw new FlowError("INVALID_CONTEXT", "Context must be a JSON object.");
+    this.context = clone(context);
+    this.render();
+  }
+  /** Display state supplied by a simulator or mapped from a real external runtime. */
+  setExecution(snapshot) {
+    this.alive();
+    if (snapshot) assertJson(snapshot);
+    this.execution = snapshot ? clone("nodes" in snapshot ? snapshot : simulationOverlay(snapshot)) : null;
+    this.render();
+  }
+  setCapabilities(types) {
+    this.alive();
+    if (!Array.isArray(types) || !types.every((type) => typeof type === "string"))
+      throw new FlowError(
+        "INVALID_CAPABILITIES",
+        "Expected advertised command type names."
+      );
+    this.capabilities = [...types];
+    this.render();
+  }
+  beginConnection(source) {
+    this.editable();
+    if (!this.store.getSnapshot().nodes.some((node) => node.id === source))
+      throw new FlowError("NODE_NOT_FOUND", `Unknown node ${source}.`);
+    this.connection = source;
+    this.reconnection = null;
+    this.suppressClick = false;
+    this.render();
+  }
+  /** Rewire an existing edge without losing its id, condition or signal metadata. */
+  beginReconnection(edgeId, endpoint = "target") {
+    this.editable();
+    if (endpoint !== "source" && endpoint !== "target")
+      throw new FlowError("INVALID_ENDPOINT", "Expected source or target.");
+    const edge = this.store.getSnapshot().edges.find((edge2) => edge2.id === edgeId);
+    if (!edge) throw new FlowError("EDGE_NOT_FOUND", `Unknown edge ${edgeId}.`);
+    this.reconnection = { edgeId, endpoint };
+    this.connection = endpoint === "target" ? edge.source : edge.target;
+    this.suppressClick = false;
+    this.render();
+  }
+  cancelConnection() {
+    this.alive();
+    this.connection = null;
+    this.reconnection = null;
+    this.render();
+  }
+  setViewport(viewport) {
+    this.alive();
+    if (![viewport.x, viewport.y, viewport.scale].every(Number.isFinite) || viewport.scale <= 0)
+      throw new FlowError(
+        "INVALID_VIEWPORT",
+        "Expected finite coordinates and positive scale."
+      );
+    this.viewportTimer?.stop();
+    this.viewportTimer = null;
+    this.applyViewport(viewport);
+  }
+  applyViewport(viewport) {
+    this.viewport = {
+      ...viewport,
+      scale: Math.max(0.1, Math.min(4, viewport.scale))
+    };
+    this.viewportGroup.setAttribute(
+      "transform",
+      `translate(${this.viewport.x} ${this.viewport.y}) scale(${this.viewport.scale})`
+    );
+  }
+  animateViewport(viewport, duration = this.animationDuration) {
+    this.alive();
+    if (![viewport.x, viewport.y, viewport.scale, duration].every(
+      Number.isFinite
+    ) || viewport.scale <= 0 || duration < 0 || duration > 5e3)
+      throw new FlowError(
+        "INVALID_VIEWPORT",
+        "Expected a valid viewport and a duration between 0 and 5000 milliseconds."
+      );
+    this.viewportTimer?.stop();
+    this.viewportTimer = null;
+    if (this.reducedMotion || duration === 0) {
+      this.setViewport(viewport);
+      return;
+    }
+    const x = number_default(this.viewport.x, viewport.x);
+    const y = number_default(this.viewport.y, viewport.y);
+    const scale = number_default(
+      this.viewport.scale,
+      Math.max(0.1, Math.min(4, viewport.scale))
+    );
+    this.viewportTimer = timer((elapsed) => {
+      const progress = Math.min(1, elapsed / duration);
+      const eased = cubicOut(progress);
+      this.applyViewport({ x: x(eased), y: y(eased), scale: scale(eased) });
+      if (progress === 1) {
+        this.viewportTimer?.stop();
+        this.viewportTimer = null;
+      }
+    });
+  }
+  zoomBy(factor, anchor = { x: this.width / 2, y: this.height / 2 }) {
+    if (!Number.isFinite(factor) || factor <= 0)
+      throw new FlowError("INVALID_ZOOM", "Zoom factor must be positive.");
+    const previous = this.viewport;
+    const scale = Math.max(0.1, Math.min(4, previous.scale * factor));
+    this.setViewport({
+      x: anchor.x - (anchor.x - previous.x) * scale / previous.scale,
+      y: anchor.y - (anchor.y - previous.y) * scale / previous.scale,
+      scale
+    });
+  }
+  fitToView(padding = 50, animate = false) {
+    this.alive();
+    if (!Number.isFinite(padding) || padding < 0 || padding * 2 >= Math.min(this.width, this.height))
+      throw new FlowError(
+        "INVALID_PADDING",
+        "Padding must fit inside the viewport."
+      );
+    const nodes = visibleElements(this.store.getSnapshot(), this.context).nodes;
+    if (!nodes.length) {
+      this.setViewport({ x: 0, y: 0, scale: 1 });
+      return;
+    }
+    const bounds = nodes.map((node) => ({
+      point: this.positions.get(node.id) ?? node.position,
+      size: nodeDimensions(node)
+    }));
+    const minX = Math.min(
+      ...bounds.map(({ point, size }) => point.x - size.width / 2)
+    );
+    const maxX = Math.max(
+      ...bounds.map(({ point, size }) => point.x + size.width / 2)
+    );
+    const minY = Math.min(
+      ...bounds.map(({ point, size }) => point.y - size.height / 2)
+    );
+    const maxY = Math.max(
+      ...bounds.map(
+        ({ point, size }) => point.y + size.height / 2 + (size.card ? 0 : 24)
+      )
+    );
+    const scale = Math.max(
+      0.1,
+      Math.min(
+        4,
+        (this.width - padding * 2) / (maxX - minX),
+        (this.height - padding * 2) / (maxY - minY)
+      )
+    );
+    const viewport = {
+      x: this.width / 2 - (minX + maxX) / 2 * scale,
+      y: this.height / 2 - (minY + maxY) / 2 * scale,
+      scale
+    };
+    if (animate) this.animateViewport(viewport);
+    else this.setViewport(viewport);
+  }
+  /** Rendered coordinates are detached from the authored plan. */
+  getNodePositions() {
+    this.alive();
+    return new Map(
+      [...this.positions].map(([id, point]) => [id, { ...point }])
+    );
+  }
+  relax() {
+    this.alive();
+    const placement = this.ensurePlacement();
+    if (this.reducedMotion) {
+      placement.stop();
+      placement.tick(120);
+    } else placement.restart();
+  }
+  stopForce() {
+    this.alive();
+    this.placement?.stop();
+  }
+  settlePlacement(iterations = 120) {
+    this.alive();
+    const placement = this.ensurePlacement();
+    placement.stop();
+    return placement.tick(iterations);
+  }
+  resetPlacement() {
+    this.alive();
+    this.placement?.destroy();
+    this.placement = null;
+    this.viewOverrides.clear();
+    if (this.options.force !== false) {
+      this.ensurePlacement();
+      this.relax();
+    }
+    this.render();
+  }
+  /** Move/pin a node for this view only, including in read-only monitoring views. */
+  moveNodeView(id, position) {
+    this.alive();
+    if (!this.store.getSnapshot().nodes.some((node) => node.id === id) || ![position.x, position.y].every(Number.isFinite))
+      throw new FlowError(
+        "INVALID_POSITION",
+        "Expected an existing node and finite display coordinates."
+      );
+    this.viewOverrides.set(id, { ...position });
+    this.placement?.pin(id, position);
+    this.drawPositions(new Map(this.positions).set(id, { ...position }));
+    if (!this.reducedMotion) this.placement?.restart();
+  }
+  resize(width, height) {
+    this.alive();
+    this.checkSize(width, height);
+    this.width = width;
+    this.height = height;
+    this.background.setAttribute("width", String(width));
+    this.background.setAttribute("height", String(height));
+  }
+  exportSvg() {
+    this.alive();
+    const output = this.element("svg", {
+      xmlns: NS,
+      width: String(this.width),
+      height: String(this.height),
+      viewBox: `0 0 ${this.width} ${this.height}`
+    });
+    output.append(this.root.cloneNode(true));
+    return output.outerHTML;
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.unsubscribe();
+    this.placement?.destroy();
+    this.tooltip?.destroy();
+    this.positionTimer?.stop();
+    this.viewportTimer?.stop();
+    for (const cleanup of this.cleanup) cleanup();
+    this.root.remove();
+    this.drag = null;
+    this.destroyed = true;
+  }
+  render() {
+    if (this.destroyed) return;
+    const { nodes, edges } = visibleElements(
+      this.store.getSnapshot(),
+      this.context
+    );
+    const models = new Map(nodes.map((node) => [node.id, node]));
+    const physics = this.placement?.getPositions();
+    const targets = new Map(
+      this.store.getSnapshot().nodes.map((node) => [
+        node.id,
+        this.drag?.kind === "node" && this.drag.id === node.id ? this.drag.preview : physics?.get(node.id) ?? this.viewOverrides.get(node.id) ?? node.position
+      ])
+    );
+    const positions = new Map(
+      [...targets].map(([id, target]) => [
+        id,
+        this.positions.get(id) ?? target
+      ])
+    );
+    const editor = this;
+    select_default2(this.edgesGroup).selectAll("g[data-edge-id]").data(edges, (edge) => edge.id).join("g").each(function(edge) {
+      editor.patchGroup(this, editor.renderEdge(edge, positions, models));
+    });
+    select_default2(this.nodesGroup).selectAll("g[data-node-id]").data(nodes, (node) => node.id).join("g").each(function(node) {
+      editor.patchGroup(
+        this,
+        editor.renderNode(node, positions.get(node.id))
+      );
+    });
+    this.applyViewport(this.viewport);
+    this.animatePositions(targets);
+    this.refreshTooltip();
+  }
+  hover(event) {
+    if (!this.tooltip || this.drag) return;
+    const target = this.target(event);
+    const id = target?.getAttribute("data-node-id");
+    if (!id || !target) return;
+    if (id === this.suppressedTooltipId) return;
+    this.suppressedTooltipId = null;
+    if (this.hovered?.id === id) return;
+    const bounds = target.getBoundingClientRect();
+    this.hovered = {
+      id,
+      x: event.type === "focusin" ? bounds.right : event.clientX,
+      y: event.type === "focusin" ? bounds.top : event.clientY
+    };
+    this.refreshTooltip();
+  }
+  refreshTooltip() {
+    if (!this.hovered || !this.tooltip) return;
+    const node = this.store.getSnapshot().nodes.find((node2) => node2.id === this.hovered.id);
+    const target = [...this.nodesGroup.children].find(
+      (node2) => node2.getAttribute("data-node-id") === this.hovered.id
+    );
+    if (!node || !target) {
+      this.clearHover();
+      return;
+    }
+    const observation = this.execution && Object.hasOwn(this.execution.nodes, node.id) ? this.execution.nodes[node.id] : void 0;
+    this.tooltip.show(
+      node,
+      this.store.getSnapshot(),
+      observation,
+      this.capabilities,
+      target,
+      this.hovered
+    );
+  }
+  clearHover(suppress = false) {
+    if (suppress) this.suppressedTooltipId = this.hovered?.id ?? null;
+    this.hovered = null;
+    this.tooltip?.hide();
+  }
+  ensurePlacement() {
+    if (!this.placement) {
+      this.placement = new ForcePlacement(
+        this.store.getSnapshot(),
+        typeof this.options.force === "object" ? this.options.force : {}
+      );
+      this.observePlacement();
+    }
+    return this.placement;
+  }
+  observePlacement() {
+    this.placement.subscribe((positions) => {
+      if (this.destroyed) return;
+      this.positionTimer?.stop();
+      this.positionTimer = null;
+      const next = new Map(positions);
+      if (this.drag?.kind === "node")
+        next.set(this.drag.id, this.drag.preview);
+      this.drawPositions(next);
+    });
+  }
+  animatePositions(targets) {
+    this.positionTimer?.stop();
+    this.positionTimer = null;
+    const moved = [...targets].some(([id, point]) => {
+      const current = this.positions.get(id);
+      return current && (point.x !== current.x || point.y !== current.y);
+    });
+    if (!moved || this.placement || this.drag || this.reducedMotion || this.animationDuration === 0) {
+      this.drawPositions(targets);
+      return;
+    }
+    const interpolators = [...targets].map(([id, end]) => {
+      const start = this.positions.get(id) ?? end;
+      return {
+        id,
+        x: number_default(start.x, end.x),
+        y: number_default(start.y, end.y)
+      };
+    });
+    this.drawPositions(
+      new Map(
+        interpolators.map((item) => [item.id, { x: item.x(0), y: item.y(0) }])
+      )
+    );
+    this.positionTimer = timer((elapsed) => {
+      const progress = Math.min(1, elapsed / this.animationDuration);
+      const eased = cubicOut(progress);
+      this.drawPositions(
+        new Map(
+          interpolators.map((item) => [
+            item.id,
+            { x: item.x(eased), y: item.y(eased) }
+          ])
+        )
+      );
+      if (progress === 1) {
+        this.positionTimer?.stop();
+        this.positionTimer = null;
+      }
+    });
+  }
+  drawPositions(positions) {
+    this.positions = new Map(positions);
+    const models = new Map(
+      this.store.getSnapshot().nodes.map((node) => [node.id, node])
+    );
+    const editor = this;
+    select_default2(this.nodesGroup).selectAll("g[data-node-id]").each(function(node) {
+      const point = positions.get(node.id);
+      this.setAttribute("transform", `translate(${point.x} ${point.y})`);
+    });
+    select_default2(this.edgesGroup).selectAll("g[data-edge-id]").each(function(edge) {
+      const geometry = editor.edgeGeometry(edge, positions, models);
+      for (const path of this.querySelectorAll("path"))
+        path.setAttribute("d", geometry.path);
+      const label = this.querySelector("text");
+      label?.setAttribute("x", String(geometry.label.x));
+      label?.setAttribute("y", String(geometry.label.y));
+    });
+  }
+  patchGroup(target, source) {
+    for (const attribute of [...target.attributes])
+      if (!source.hasAttribute(attribute.name))
+        target.removeAttribute(attribute.name);
+    for (const attribute of [...source.attributes])
+      target.setAttribute(attribute.name, attribute.value);
+    target.replaceChildren(...source.childNodes);
+  }
+  edgeGeometry(edge, positions, models) {
+    const source = positions.get(edge.source);
+    const target = positions.get(edge.target);
+    const { x: x1, y: y1 } = this.boundary(
+      models.get(edge.source),
+      source,
+      target
+    );
+    const { x: x2, y: y2 } = this.boundary(
+      models.get(edge.target),
+      target,
+      source
+    );
+    const bend = Math.max(60, Math.abs(x2 - x1) / 2);
+    const horizontal = Math.abs(x2 - x1) >= Math.abs(y2 - y1);
+    const direction = horizontal ? Math.sign(x2 - x1) || 1 : Math.sign(y2 - y1) || 1;
+    const verticalBend = Math.max(60, Math.abs(y2 - y1) / 2);
+    const path = edge.source === edge.target ? `M${source.x - 20},${source.y - 25} C${source.x - 100},${source.y - 140} ${source.x + 100},${source.y - 140} ${source.x + 20},${source.y - 25}` : horizontal ? `M${x1},${y1} C${x1 + bend * direction},${y1} ${x2 - bend * direction},${y2} ${x2},${y2}` : `M${x1},${y1} C${x1},${y1 + verticalBend * direction} ${x2},${y2 - verticalBend * direction} ${x2},${y2}`;
+    return {
+      path,
+      label: { x: (source.x + target.x) / 2, y: (source.y + target.y) / 2 - 9 }
+    };
+  }
+  renderEdge(edge, positions, models) {
+    const selected = this.selected?.type === "edge" && this.selected.id === edge.id;
+    const traversed = this.execution?.edges?.[edge.id] === "taken";
+    const skipped = this.execution?.edges?.[edge.id] === "skipped";
+    const group = this.element("g", {
+      "data-edge-id": edge.id,
+      role: "button",
+      tabindex: "0",
+      "aria-label": edge.label ?? `Connection ${edge.source} to ${edge.target}`,
+      "aria-pressed": String(selected),
+      "data-state": traversed ? "taken" : skipped ? "skipped" : "idle"
+    });
+    const { path, label: labelPosition } = this.edgeGeometry(
+      edge,
+      positions,
+      models
+    );
+    group.append(
+      this.element("path", {
+        d: path,
+        fill: "none",
+        stroke: "transparent",
+        "stroke-width": "16"
+      })
+    );
+    group.append(
+      this.element("path", {
+        d: path,
+        fill: "none",
+        stroke: selected ? "var(--accent)" : traversed ? "var(--accent)" : "var(--border-strong)",
+        "stroke-width": selected ? "3" : "2",
+        "marker-end": `url(#${this.markerId})`,
+        "pointer-events": "none",
+        "stroke-dasharray": skipped ? "5 5" : "none",
+        opacity: skipped ? "0.4" : "1"
+      })
+    );
+    const caption = edge.label ?? (edge.default ? "otherwise" : edge.condition ? formatCondition(edge.condition) : "");
+    if (caption) {
+      const label = this.element("text", {
+        x: String(labelPosition.x),
+        y: String(labelPosition.y),
+        "text-anchor": "middle",
+        "font-size": "12",
+        fill: "var(--text-secondary)"
+      });
+      label.textContent = caption.length > 55 ? `${caption.slice(0, 54)}\u2026` : caption;
+      group.append(label);
+    }
+    return group;
+  }
+  cardIcon(group, name, x, y, size, color) {
+    const icon = createFlowIcon(this.svg.ownerDocument, name, size);
+    icon.setAttribute("x", String(x));
+    icon.setAttribute("y", String(y));
+    icon.setAttribute("color", color);
+    icon.setAttribute("pointer-events", "none");
+    group.append(icon);
+  }
+  renderCard(group, node, observation, stroke) {
+    const selected = this.selected?.type === "node" && this.selected.id === node.id || this.connection === node.id;
+    group.append(
+      renderPhotonCard(
+        this.svg.ownerDocument,
+        node,
+        this.store.getSnapshot(),
+        observation,
+        this.execution,
+        selected,
+        this.capabilities
+      )
+    );
+  }
+  boundary(node, center, toward) {
+    const dx = toward.x - center.x || (toward.y === center.y ? 1 : 0);
+    const dy = toward.y - center.y;
+    const length = Math.hypot(dx, dy);
+    const size = nodeDimensions(node);
+    const factor = size.card ? 1 / Math.max(
+      Math.abs(dx) / (size.width / 2),
+      Math.abs(dy) / (size.height / 2)
+    ) : node.type === "start" || node.type === "end" ? 28 / length : ["decision", "fork", "join"].includes(node.type) ? 1 / (Math.abs(dx) / 44 + Math.abs(dy) / 34) : 1 / Math.max(Math.abs(dx) / 75, Math.abs(dy) / 28);
+    return {
+      x: center.x + dx * factor + dx / length * 3,
+      y: center.y + dy * factor + dy / length * 3
+    };
+  }
+  renderNode(node, position) {
+    const selected = this.selected?.type === "node" && this.selected.id === node.id;
+    const observation = this.execution && Object.hasOwn(this.execution.nodes, node.id) ? this.execution.nodes[node.id] : void 0;
+    const state = observation?.status ?? "idle";
+    const stroke = selected || this.connection === node.id || state !== "idle" ? "var(--accent)" : "var(--border-strong)";
+    const group = this.element("g", {
+      transform: `translate(${position.x} ${position.y})`,
+      "data-node-id": node.id,
+      "data-state": state,
+      role: "button",
+      tabindex: "0",
+      "aria-label": `${node.label}, ${node.type}, ${state}`,
+      "aria-pressed": String(selected),
+      cursor: "grab"
+    });
+    if (nodeDimensions(node).card) {
+      this.renderCard(group, node, observation, stroke);
+      return group;
+    }
+    const attributes = {
+      fill: "var(--surface)",
+      stroke,
+      "stroke-width": selected ? "3" : "2"
+    };
+    if (["decision", "fork", "join"].includes(node.type))
+      group.append(
+        this.element("path", {
+          ...attributes,
+          d: "M0,-34 L44,0 L0,34 L-44,0 Z"
+        })
+      );
+    else if (node.type === "start" || node.type === "end")
+      group.append(
+        this.element("circle", {
+          ...attributes,
+          r: "25",
+          "stroke-width": node.type === "end" ? "5" : "2"
+        })
+      );
+    else
+      group.append(
+        this.element("rect", {
+          ...attributes,
+          x: "-75",
+          y: "-28",
+          width: "150",
+          height: "56",
+          rx: node.type === "wait" ? "24" : "8",
+          "stroke-dasharray": node.type === "task" && node.mode === "async" ? "6 3" : "none"
+        })
+      );
+    const symbol = node.type === "task" && node.mode === "async" ? "async" : "";
+    if (node.type !== "task")
+      this.cardIcon(group, operationIcon(node.type), -10, -10, 20, stroke);
+    const text = this.element("text", {
+      "text-anchor": "middle",
+      y: ["task", "wait"].includes(node.type) ? "4" : "5",
+      "font-size": "13",
+      "font-family": "var(--font-sans)",
+      fill: "var(--text)",
+      "pointer-events": "none"
+    });
+    text.textContent = ["task", "wait"].includes(node.type) ? node.label.length > 20 ? `${node.label.slice(0, 19)}\u2026` : node.label : symbol;
+    group.append(text);
+    const label = this.element("text", {
+      "text-anchor": "middle",
+      y: "48",
+      "font-size": "12",
+      "font-family": "var(--font-sans)",
+      fill: "var(--text-secondary)",
+      "pointer-events": "none"
+    });
+    label.textContent = ["task", "wait"].includes(node.type) ? `${node.type}${symbol ? ` \xB7 ${symbol}` : ""}` : node.label;
+    const title = this.element("title");
+    title.textContent = `${node.label} (${node.type})`;
+    group.append(label, title);
+    return group;
+  }
+  click(event) {
+    if (this.suppressClick) {
+      this.suppressClick = false;
+      return;
+    }
+    this.attempt(() => {
+      const target = this.target(event);
+      const id = target?.getAttribute("data-node-id");
+      if (id && this.connection) {
+        if (this.reconnection) {
+          const { edgeId, endpoint } = this.reconnection;
+          this.store.updateEdge(edgeId, (edge) => ({
+            ...edge,
+            [endpoint]: id
+          }));
+        } else {
+          const source = this.connection;
+          const edgeId = this.options.createEdgeId?.() ?? `edge-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+          this.store.addEdge({ id: edgeId, source, target: id });
+        }
+        this.connection = null;
+        this.reconnection = null;
+        this.render();
+      } else if (id) this.select({ type: "node", id });
+      else {
+        const edge = target?.getAttribute("data-edge-id");
+        this.select(edge ? { type: "edge", id: edge } : null);
+      }
+    });
+  }
+  keydown(event) {
+    this.attempt(() => {
+      if (event.key === "Escape") {
+        this.clearHover(true);
+        this.cancelDrag();
+        this.cancelConnection();
+        this.select(null);
+        return;
+      }
+      const target = this.target(event);
+      const nodeId = target?.getAttribute("data-node-id");
+      const edgeId = target?.getAttribute("data-edge-id");
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (nodeId && this.connection)
+          this.click(event);
+        else if (nodeId) this.select({ type: "node", id: nodeId });
+        else if (edgeId) this.select({ type: "edge", id: edgeId });
+        return;
+      }
+      if (this.selected?.type === "node" && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) {
+        event.preventDefault();
+        const point = this.positions.get(this.selected.id);
+        const amount = event.shiftKey ? 50 : 10;
+        this.moveNodeView(this.selected.id, {
+          x: point.x + (event.key === "ArrowLeft" ? -amount : event.key === "ArrowRight" ? amount : 0),
+          y: point.y + (event.key === "ArrowUp" ? -amount : event.key === "ArrowDown" ? amount : 0)
+        });
+        return;
+      }
+      if (this.options.readOnly) return;
+      if ((event.ctrlKey || event.metaKey) && ["z", "y"].includes(event.key.toLowerCase())) {
+        event.preventDefault();
+        if (event.key.toLowerCase() === "y" || event.shiftKey)
+          this.store.redo();
+        else this.store.undo();
+      } else if (this.selected?.type === "edge" && event.key.toLowerCase() === "r") {
+        this.beginReconnection(
+          this.selected.id,
+          event.shiftKey ? "source" : "target"
+        );
+      } else if (this.selected && (event.key === "Delete" || event.key === "Backspace")) {
+        event.preventDefault();
+        if (this.selected.type === "node")
+          this.store.removeNode(this.selected.id);
+        else if (this.selected.type === "global")
+          this.store.removeGlobal(this.selected.id);
+        else this.store.removeEdge(this.selected.id);
+      } else if (this.selected?.type === "node" && event.key.toLowerCase() === "c")
+        this.beginConnection(this.selected.id);
+    });
+  }
+  pointerdown(event) {
+    if (event.button !== 0 || this.drag) return;
+    this.clearHover();
+    this.suppressClick = false;
+    const target = this.target(event);
+    const id = target?.getAttribute("data-node-id");
+    if (this.connection || target?.hasAttribute("data-edge-id")) return;
+    this.positionTimer?.stop();
+    this.positionTimer = null;
+    const origin = id ? this.positions.get(id) : this.viewport;
+    this.drag = {
+      pointerId: event.pointerId,
+      kind: id ? "node" : "pan",
+      ...id ? { id } : {},
+      start: this.point(event),
+      origin: { x: origin.x, y: origin.y },
+      preview: { x: origin.x, y: origin.y },
+      moved: false
+    };
+    if (id) this.placement?.pin(id, origin);
+  }
+  pointermove(event) {
+    const drag = this.drag;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const current = this.point(event);
+    const dx = current.x - drag.start.x;
+    const dy = current.y - drag.start.y;
+    if (Math.hypot(dx, dy) < 3 && !drag.moved) return;
+    event.preventDefault();
+    drag.moved = true;
+    const scale = drag.kind === "node" ? this.viewport.scale : 1;
+    drag.preview = {
+      x: drag.origin.x + dx / scale,
+      y: drag.origin.y + dy / scale
+    };
+    if (drag.kind === "node") {
+      this.placement?.pin(drag.id, drag.preview);
+      if (!this.reducedMotion) this.placement?.restart();
+      this.drawPositions(new Map(this.positions).set(drag.id, drag.preview));
+    } else this.setViewport({ ...drag.preview, scale: this.viewport.scale });
+  }
+  pointerup(event) {
+    const drag = this.drag;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    this.drag = null;
+    this.suppressClick = drag.moved;
+    if (drag.kind === "node")
+      this.attempt(() => {
+        if (drag.moved) this.moveNodeView(drag.id, drag.preview);
+        else
+          this.placement?.pin(
+            drag.id,
+            this.viewOverrides.get(drag.id) ?? null
+          );
+      });
+  }
+  cancelDrag() {
+    if (this.drag?.kind === "node" && this.placement) {
+      this.placement.pin(this.drag.id, this.drag.origin);
+      if (!this.viewOverrides.has(this.drag.id))
+        this.placement.pin(this.drag.id, null);
+    }
+    this.drag = null;
+    this.render();
+  }
+  point(event) {
+    const matrix = this.svg.getScreenCTM?.();
+    if (matrix && this.svg.createSVGPoint) {
+      const point = this.svg.createSVGPoint();
+      point.x = event.clientX;
+      point.y = event.clientY;
+      const local = point.matrixTransform(matrix.inverse());
+      return { x: local.x, y: local.y };
+    }
+    const bounds = this.svg.getBoundingClientRect();
+    return { x: event.clientX - bounds.left, y: event.clientY - bounds.top };
+  }
+  target(event) {
+    const target = event.target;
+    const element = target?.closest?.("[data-node-id], [data-edge-id]") ?? null;
+    return element && this.root.contains(element) ? element : null;
+  }
+  element(tag, attributes = {}) {
+    const element = this.svg.ownerDocument.createElementNS(NS, tag);
+    for (const [name, value] of Object.entries(attributes))
+      element.setAttribute(name, value);
+    return element;
+  }
+  listen(target, name, handler, options) {
+    target.addEventListener(name, handler, options);
+    this.cleanup.push(() => target.removeEventListener(name, handler, options));
+  }
+  attempt(action) {
+    try {
+      action();
+    } catch (error) {
+      this.options.onError?.(error);
+    }
+  }
+  alive() {
+    if (this.destroyed)
+      throw new FlowError(
+        "EDITOR_DESTROYED",
+        "This editor has been destroyed."
+      );
+  }
+  editable() {
+    this.alive();
+    if (this.options.readOnly)
+      throw new FlowError("READ_ONLY", "This editor is read-only.");
+  }
+  checkSize(width, height) {
+    if (![width, height].every((value) => Number.isFinite(value) && value > 0))
+      throw new FlowError(
+        "INVALID_SIZE",
+        "Dimensions must be positive finite numbers."
+      );
+  }
+};
+
+export {
+  iconPaths,
+  createFlowIcon,
+  operationIcon,
+  SvgFlowEditor
+};