libpetri 1.8.5 → 2.1.0

package/dist/viewer/index.js

@@ -0,0 +1,877 @@
+// src/viewer/pan-zoom.ts
+import panzoom from "panzoom";
+var DEFAULT_PANZOOM_OPTS = {
+  smoothScroll: false,
+  zoomDoubleClickSpeed: 1,
+  maxZoom: 1e3,
+  minZoom: 0.02
+};
+function attachPanzoom(svg, options, previous) {
+  if (previous) {
+    try {
+      previous.dispose();
+    } catch {
+    }
+  }
+  const opts = { ...DEFAULT_PANZOOM_OPTS, ...options };
+  return panzoom(svg, opts);
+}
+
+// src/viewer/cluster-overlay.ts
+function discoverClusters(svg) {
+  const out = /* @__PURE__ */ new Map();
+  const clusterGroups = svg.querySelectorAll("g.cluster");
+  if (!clusterGroups.length) return out;
+  const allNodes = Array.from(svg.querySelectorAll("g.node"));
+  for (const g of Array.from(clusterGroups)) {
+    const titleEl = directChild(g, "title");
+    if (!titleEl) continue;
+    const raw = titleEl.textContent ?? "";
+    if (!raw.startsWith("cluster_")) continue;
+    const prefix = raw.slice("cluster_".length);
+    if (out.has(prefix)) continue;
+    let nodeCount = 0;
+    for (const node of allNodes) {
+      if (node.getAttribute("data-instance")) continue;
+      const nodeTitle = directChild(node, "title");
+      if (!nodeTitle) continue;
+      const id = (nodeTitle.textContent ?? "").trim();
+      if (nodeBelongsToPrefix(id, prefix)) {
+        node.setAttribute("data-instance", prefix);
+        nodeCount++;
+      }
+    }
+    out.set(prefix, {
+      prefix,
+      group: g,
+      nodeCount,
+      color: colorForPrefix(prefix)
+    });
+  }
+  return out;
+}
+function nodeBelongsToPrefix(nodeId, prefix) {
+  return nodeId === prefix || nodeId.startsWith(`${prefix}/`) || nodeId.startsWith(`p_${prefix}_`) || nodeId.startsWith(`t_${prefix}_`) || nodeId.startsWith(`j_${prefix}_`);
+}
+function colorForPrefix(prefix) {
+  let h = 2166136261;
+  for (let i = 0; i < prefix.length; i++) {
+    h ^= prefix.charCodeAt(i);
+    h = h * 16777619 >>> 0;
+  }
+  let hue = Math.floor((h / 4294967296 * 360 + h % 360 * 0.61803) % 360);
+  if (hue < 0) hue += 360;
+  return `hsl(${hue}, 60%, 45%)`;
+}
+function paintClusterBorders(clusters) {
+  for (const c of clusters.values()) {
+    const border = directChild(c.group, "polygon") ?? directChild(c.group, "path");
+    if (border) {
+      border.setAttribute("stroke", c.color);
+      border.setAttribute("stroke-width", "2.2");
+    }
+  }
+}
+function setClusterCollapsed(cluster, collapsed) {
+  const g = cluster.group;
+  const isCollapsed = g.classList.contains("cluster-collapsed");
+  const root = g.ownerSVGElement;
+  if (!root) return;
+  if (collapsed && !isCollapsed) {
+    g.classList.add("cluster-collapsed");
+    const hidden = [];
+    root.querySelectorAll(`g.node[data-instance="${cssEscape(cluster.prefix)}"]`).forEach((node) => {
+      node.classList.add("petri-collapsed-inside");
+      hidden.push(node);
+    });
+    root.querySelectorAll("g.edge").forEach((edge) => {
+      const titleEl = directChild(edge, "title");
+      if (!titleEl) return;
+      const t = (titleEl.textContent ?? "").trim();
+      const arrow = t.indexOf("->");
+      if (arrow < 0) return;
+      const from = t.slice(0, arrow);
+      const to = t.slice(arrow + 2);
+      if (nodeBelongsToPrefix(from, cluster.prefix) && nodeBelongsToPrefix(to, cluster.prefix)) {
+        edge.classList.add("petri-collapsed-inside");
+        hidden.push(edge);
+      }
+    });
+    g._petriHiddenSiblings = hidden;
+    if (!g._petriCollapsedBadge) {
+      const label = directChild(g, "text");
+      if (label) {
+        const badge = document.createElementNS("http://www.w3.org/2000/svg", "text");
+        badge.setAttribute("x", label.getAttribute("x") ?? "0");
+        const labelY = parseFloat(label.getAttribute("y") ?? "0");
+        badge.setAttribute("y", String(labelY + 16));
+        badge.setAttribute("text-anchor", label.getAttribute("text-anchor") ?? "middle");
+        badge.setAttribute("font-size", "11");
+        badge.setAttribute("fill", "#9ca3af");
+        badge.setAttribute("class", "cluster-collapsed-badge");
+        badge.textContent = `(${cluster.nodeCount} internal node${cluster.nodeCount === 1 ? "" : "s"})`;
+        g.appendChild(badge);
+        g._petriCollapsedBadge = badge;
+      }
+    }
+  } else if (!collapsed && isCollapsed) {
+    g.classList.remove("cluster-collapsed");
+    if (g._petriHiddenSiblings) {
+      g._petriHiddenSiblings.forEach((el) => el.classList.remove("petri-collapsed-inside"));
+      g._petriHiddenSiblings = void 0;
+    }
+    if (g._petriCollapsedBadge && g._petriCollapsedBadge.parentNode === g) {
+      g.removeChild(g._petriCollapsedBadge);
+      g._petriCollapsedBadge = null;
+    }
+  }
+}
+function applyFilter(svg, prefix) {
+  if (prefix == null) {
+    svg.removeAttribute("data-active-filter");
+    svg.classList.remove("has-active-filter");
+    svg.querySelectorAll("g.node, g.edge").forEach((el) => el.classList.remove("petri-dimmed"));
+    return;
+  }
+  svg.setAttribute("data-active-filter", prefix);
+  svg.classList.add("has-active-filter");
+  svg.querySelectorAll("g.node").forEach((node) => {
+    const di = node.getAttribute("data-instance");
+    const match = !!di && (di === prefix || di.indexOf(prefix + "_") === 0 || di.indexOf(prefix + "/") === 0);
+    if (match) node.classList.remove("petri-dimmed");
+    else node.classList.add("petri-dimmed");
+  });
+  svg.querySelectorAll("g.edge").forEach((edge) => {
+    const titleEl = directChild(edge, "title");
+    if (!titleEl) return;
+    const titleText = titleEl.textContent ?? "";
+    const arrow = titleText.indexOf("->");
+    if (arrow < 0) {
+      edge.classList.remove("petri-dimmed");
+      return;
+    }
+    const from = titleText.slice(0, arrow);
+    const to = titleText.slice(arrow + 2);
+    const matches = (name) => name.indexOf(prefix + "/") >= 0 || name.indexOf(prefix + "_") >= 0 || name === prefix;
+    if (matches(from) || matches(to)) edge.classList.remove("petri-dimmed");
+    else edge.classList.add("petri-dimmed");
+  });
+}
+function isInsideCollapsedCluster(svg, clusters, collapsedPrefixes, graphId) {
+  if (collapsedPrefixes.size === 0) return false;
+  if (!svg) return false;
+  for (const prefix of collapsedPrefixes) {
+    if (!clusters.has(prefix)) continue;
+    if (nodeBelongsToPrefix(graphId, prefix)) return true;
+  }
+  return false;
+}
+function cssEscape(s) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(s);
+  return s.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c}`);
+}
+function directChild(parent, tagName) {
+  const lc = tagName.toLowerCase();
+  for (const child of Array.from(parent.children)) {
+    if (child.tagName.toLowerCase() === lc) return child;
+  }
+  return null;
+}
+
+// src/viewer/c0-annotations.ts
+function ownTitle(g) {
+  for (const child of Array.from(g.children)) {
+    if (child.tagName === "title") return child.textContent ?? "";
+  }
+  return "";
+}
+function enclosingClusterShortName(node) {
+  const cluster = node.parentElement?.closest("g.cluster");
+  if (!cluster) return "";
+  return ownTitle(cluster).replace(/^cluster_/, "");
+}
+function annotateSvgForC0(svg) {
+  const nodes = Array.from(svg.querySelectorAll("g.node"));
+  for (const node of nodes) {
+    const id = ownTitle(node);
+    if (!id) continue;
+    node.setAttribute("data-id", id);
+    const replicaM = /__rep__([A-Za-z0-9_]+)$/.exec(id);
+    if (replicaM) {
+      node.setAttribute("data-instance", replicaM[1]);
+    } else if (!node.hasAttribute("data-instance")) {
+      const inst = enclosingClusterShortName(node);
+      if (inst) node.setAttribute("data-instance", inst);
+    }
+  }
+  const nodeIndex = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const id = n.getAttribute("data-id");
+    if (id) nodeIndex.set(id, n);
+  }
+  for (const edge of Array.from(svg.querySelectorAll("g.edge"))) {
+    const title = ownTitle(edge);
+    const arrow = title.indexOf("->");
+    if (arrow <= 0) continue;
+    const src = title.slice(0, arrow).trim();
+    const dst = title.slice(arrow + 2).trim();
+    edge.setAttribute("data-src", src);
+    edge.setAttribute("data-dst", dst);
+    const srcInst = nodeIndex.get(src)?.getAttribute("data-instance") ?? "";
+    const dstInst = nodeIndex.get(dst)?.getAttribute("data-instance") ?? "";
+    edge.setAttribute("data-src-cluster", srcInst);
+    edge.setAttribute("data-dst-cluster", dstInst);
+    edge.classList.remove("intra-cluster", "cross-cluster");
+    if (srcInst !== "" && srcInst === dstInst) {
+      edge.classList.add("intra-cluster");
+      edge.setAttribute("data-cluster", srcInst);
+    } else {
+      edge.classList.add("cross-cluster");
+      edge.removeAttribute("data-cluster");
+    }
+  }
+}
+
+// src/viewer/chrome/sidebar.ts
+var SIDEBAR_CLASS = "libpetri-sidebar";
+var CHIP_CLASS = "libpetri-sidebar-chip";
+var CHIP_OFF_CLASS = "is-off";
+function mountSidebar(container, clusters, callbacks) {
+  const visibleClusters = /* @__PURE__ */ new Set();
+  for (const prefix of clusters.keys()) visibleClusters.add(prefix);
+  let includeSharedPlaces = true;
+  let highlightMode = true;
+  const emit = () => {
+    callbacks.onVisibilityChange({
+      visibleClusters: new Set(visibleClusters),
+      includeSharedPlaces
+    });
+  };
+  const root = document.createElement("aside");
+  root.className = SIDEBAR_CLASS;
+  const title = document.createElement("h4");
+  title.className = "libpetri-sidebar-title";
+  title.textContent = `Subnets (${clusters.size})`;
+  root.appendChild(title);
+  const actions = document.createElement("div");
+  actions.className = "libpetri-sidebar-actions";
+  const showAll = document.createElement("button");
+  showAll.type = "button";
+  showAll.textContent = "show all";
+  const hideAll = document.createElement("button");
+  hideAll.type = "button";
+  hideAll.textContent = "hide all";
+  actions.appendChild(showAll);
+  actions.appendChild(hideAll);
+  root.appendChild(actions);
+  const sharedLabel = document.createElement("label");
+  sharedLabel.className = "libpetri-sidebar-checkbox";
+  const sharedCb = document.createElement("input");
+  sharedCb.type = "checkbox";
+  sharedCb.checked = includeSharedPlaces;
+  sharedLabel.appendChild(sharedCb);
+  sharedLabel.appendChild(document.createTextNode(" Shared places"));
+  sharedCb.addEventListener("change", () => {
+    includeSharedPlaces = sharedCb.checked;
+    emit();
+  });
+  root.appendChild(sharedLabel);
+  const hlLabel = document.createElement("label");
+  hlLabel.className = "libpetri-sidebar-checkbox";
+  const hlCb = document.createElement("input");
+  hlCb.type = "checkbox";
+  hlCb.checked = highlightMode;
+  hlLabel.appendChild(hlCb);
+  hlLabel.appendChild(document.createTextNode(" Click node \u2192 highlight"));
+  hlCb.addEventListener("change", () => {
+    highlightMode = hlCb.checked;
+    callbacks.onHighlightModeChange(highlightMode);
+  });
+  root.appendChild(hlLabel);
+  const hint = document.createElement("div");
+  hint.className = "libpetri-sidebar-hint";
+  hint.innerHTML = "Click chip: toggle.<br>Shift-click: isolate.<br>Cmd/Ctrl-click: multi-select.<br>Click empty: clear highlight.";
+  root.appendChild(hint);
+  const chipList = document.createElement("ul");
+  chipList.className = "libpetri-sidebar-chips";
+  const chipMap = /* @__PURE__ */ new Map();
+  for (const cluster of clusters.values()) {
+    const li = document.createElement("li");
+    li.className = CHIP_CLASS;
+    li.style.borderLeftColor = cluster.color;
+    li.dataset.prefix = cluster.prefix;
+    const dot = document.createElement("span");
+    dot.className = "libpetri-sidebar-chip-dot";
+    dot.style.background = cluster.color;
+    const name = document.createElement("span");
+    name.className = "libpetri-sidebar-chip-name";
+    name.textContent = cluster.prefix;
+    const count = document.createElement("span");
+    count.className = "libpetri-sidebar-chip-count";
+    count.textContent = String(cluster.nodeCount);
+    li.appendChild(dot);
+    li.appendChild(name);
+    li.appendChild(count);
+    li.addEventListener("click", (ev) => {
+      const prefix = cluster.prefix;
+      if (ev.shiftKey) {
+        const allOff = [...clusters.keys()].every(
+          (k) => k === prefix ? visibleClusters.has(k) : !visibleClusters.has(k)
+        );
+        visibleClusters.clear();
+        if (allOff) for (const k of clusters.keys()) visibleClusters.add(k);
+        else visibleClusters.add(prefix);
+      } else if (ev.ctrlKey || ev.metaKey) {
+        const anyHidden = [...clusters.keys()].some((k) => !visibleClusters.has(k));
+        if (!anyHidden) {
+          visibleClusters.clear();
+          visibleClusters.add(prefix);
+        } else if (visibleClusters.has(prefix)) {
+          visibleClusters.delete(prefix);
+        } else {
+          visibleClusters.add(prefix);
+        }
+      } else {
+        if (visibleClusters.has(prefix)) visibleClusters.delete(prefix);
+        else visibleClusters.add(prefix);
+      }
+      refreshChips();
+      emit();
+    });
+    chipList.appendChild(li);
+    chipMap.set(cluster.prefix, li);
+  }
+  root.appendChild(chipList);
+  function refreshChips() {
+    for (const [prefix, li] of chipMap) {
+      li.classList.toggle(CHIP_OFF_CLASS, !visibleClusters.has(prefix));
+    }
+  }
+  showAll.addEventListener("click", () => {
+    visibleClusters.clear();
+    for (const k of clusters.keys()) visibleClusters.add(k);
+    includeSharedPlaces = true;
+    sharedCb.checked = true;
+    refreshChips();
+    emit();
+  });
+  hideAll.addEventListener("click", () => {
+    visibleClusters.clear();
+    includeSharedPlaces = false;
+    sharedCb.checked = false;
+    refreshChips();
+    emit();
+  });
+  container.appendChild(root);
+  emit();
+  return {
+    root,
+    dispose() {
+      if (root.parentNode === container) container.removeChild(root);
+    }
+  };
+}
+
+// src/viewer/highlight.ts
+var HIGHLIGHT_CLASSES = ["is-highlight", "is-neighbor", "is-faded"];
+function clearHighlightClasses(svg) {
+  for (const cls of HIGHLIGHT_CLASSES) {
+    for (const el of Array.from(svg.querySelectorAll("." + cls))) {
+      el.classList.remove(cls);
+    }
+  }
+}
+function findAllCopies(svg, focusId) {
+  const focus = svg.querySelector(`g.node[data-id="${cssEscape2(focusId)}"]`);
+  if (!focus) return /* @__PURE__ */ new Set([focusId]);
+  const copies = /* @__PURE__ */ new Set([focusId]);
+  const origLabel = focus.getAttribute("data-replica-of") ?? (focusId.startsWith("p_") ? focusId.slice(2) : null);
+  if (origLabel) {
+    const orig = svg.querySelector(`g.node[data-id="${cssEscape2("p_" + origLabel)}"]`);
+    if (orig) {
+      const id = orig.getAttribute("data-id");
+      if (id) copies.add(id);
+    }
+    for (const sibling of Array.from(
+      svg.querySelectorAll(`g.node[data-replica-of="${cssEscape2(origLabel)}"]`)
+    )) {
+      const id = sibling.getAttribute("data-id");
+      if (id) copies.add(id);
+    }
+  }
+  return copies;
+}
+function applyHighlight(svg, focusId) {
+  clearHighlightClasses(svg);
+  if (focusId === null) return;
+  const copies = findAllCopies(svg, focusId);
+  for (const id of copies) {
+    const n = svg.querySelector(`g.node[data-id="${cssEscape2(id)}"]`);
+    if (n && !n.classList.contains("is-hidden")) n.classList.add("is-highlight");
+  }
+  const neighbors = /* @__PURE__ */ new Set();
+  const pathJunctions = /* @__PURE__ */ new Set();
+  const pathEdges = [];
+  const queue = Array.from(copies);
+  const visited = new Set(copies);
+  const allEdges = Array.from(svg.querySelectorAll("g.edge"));
+  while (queue.length > 0) {
+    const nodeId = queue.shift();
+    for (const e of allEdges) {
+      if (e.classList.contains("is-hidden")) continue;
+      const s = e.getAttribute("data-src");
+      const d = e.getAttribute("data-dst");
+      if (s !== nodeId && d !== nodeId) continue;
+      const otherId = s === nodeId ? d : s;
+      if (!otherId) continue;
+      pathEdges.push(e);
+      if (visited.has(otherId)) continue;
+      visited.add(otherId);
+      if (otherId.startsWith("j_")) {
+        pathJunctions.add(otherId);
+        queue.push(otherId);
+      } else {
+        neighbors.add(otherId);
+      }
+    }
+  }
+  for (const e of pathEdges) e.classList.add("is-highlight");
+  for (const e of allEdges) {
+    if (e.classList.contains("is-hidden") || e.classList.contains("is-highlight")) continue;
+    e.classList.add("is-faded");
+  }
+  for (const n of Array.from(svg.querySelectorAll("g.node"))) {
+    if (n.classList.contains("is-hidden")) continue;
+    const id = n.getAttribute("data-id") ?? "";
+    if (copies.has(id)) continue;
+    if (neighbors.has(id)) n.classList.add("is-neighbor");
+    else if (pathJunctions.has(id)) continue;
+    else n.classList.add("is-faded");
+  }
+  for (const c of Array.from(
+    svg.querySelectorAll("g.cluster:not(.cluster-orchestrator)")
+  )) {
+    if (c.classList.contains("is-hidden")) continue;
+    c.classList.add("is-faded");
+  }
+}
+function cssEscape2(value) {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+// src/viewer/replica-tagging.ts
+var REPLICA_RE = /^(p_[A-Za-z0-9_]+)__rep__/;
+function semanticName(placeId) {
+  return placeId.replace(/^p_/, "");
+}
+function tagReplicas(svg) {
+  const originalsWithCopies = /* @__PURE__ */ new Set();
+  const allNodes = Array.from(svg.querySelectorAll("g.node"));
+  for (const g of allNodes) {
+    const title = g.querySelector("title")?.textContent ?? "";
+    const m = REPLICA_RE.exec(title);
+    if (m) originalsWithCopies.add(m[1]);
+  }
+  for (const g of allNodes) {
+    const title = g.querySelector("title")?.textContent ?? "";
+    const replicaMatch = REPLICA_RE.exec(title);
+    let semantic = null;
+    if (replicaMatch) {
+      semantic = semanticName(replicaMatch[1]);
+    } else if (originalsWithCopies.has(title)) {
+      semantic = semanticName(title);
+    }
+    if (semantic === null) continue;
+    g.classList.add("petri-replica");
+    g.setAttribute("data-replica-of", semantic);
+    appendSharedGlyph(g);
+  }
+}
+var SVG_NS = "http://www.w3.org/2000/svg";
+var GLYPH_CLASS = "libpetri-replica-glyph";
+function appendSharedGlyph(g) {
+  if (g.querySelector(`text.${GLYPH_CLASS}`)) return;
+  const shape = g.querySelector("ellipse, circle");
+  if (!shape) return;
+  let cx = 0, cy = 0, rx = 0, ry = 0;
+  if (shape.tagName === "ellipse") {
+    cx = parseFloat(shape.getAttribute("cx") ?? "0");
+    cy = parseFloat(shape.getAttribute("cy") ?? "0");
+    rx = parseFloat(shape.getAttribute("rx") ?? "0");
+    ry = parseFloat(shape.getAttribute("ry") ?? "0");
+  } else {
+    cx = parseFloat(shape.getAttribute("cx") ?? "0");
+    cy = parseFloat(shape.getAttribute("cy") ?? "0");
+    rx = parseFloat(shape.getAttribute("r") ?? "0");
+    ry = rx;
+  }
+  const text = document.createElementNS(SVG_NS, "text");
+  text.setAttribute("class", GLYPH_CLASS);
+  text.setAttribute("x", (cx + rx + 2).toFixed(2));
+  text.setAttribute("y", (cy - ry + 2).toFixed(2));
+  text.setAttribute("text-anchor", "start");
+  text.setAttribute("font-size", "9");
+  text.textContent = "\u21C4";
+  g.appendChild(text);
+}
+
+// src/viewer/visibility.ts
+function computeVisibleOrphans(svg, visibleClusters) {
+  if (visibleClusters.size === 0) return /* @__PURE__ */ new Set();
+  const orphanNodes = Array.from(
+    svg.querySelectorAll("g.node:not([data-instance])")
+  );
+  const orphanIds = /* @__PURE__ */ new Set();
+  for (const n of orphanNodes) {
+    const id = n.getAttribute("data-id");
+    if (id) orphanIds.add(id);
+  }
+  const fwdAdj = /* @__PURE__ */ new Map();
+  const bwdAdj = /* @__PURE__ */ new Map();
+  const link = (m, k, v) => {
+    let s = m.get(k);
+    if (!s) {
+      s = /* @__PURE__ */ new Set();
+      m.set(k, s);
+    }
+    s.add(v);
+  };
+  for (const e of Array.from(svg.querySelectorAll("g.edge"))) {
+    const s = e.getAttribute("data-src") ?? "";
+    const d = e.getAttribute("data-dst") ?? "";
+    if (orphanIds.has(s) && orphanIds.has(d)) {
+      link(fwdAdj, s, d);
+      link(bwdAdj, d, s);
+    }
+  }
+  const seedUpstream = /* @__PURE__ */ new Set();
+  const seedDownstream = /* @__PURE__ */ new Set();
+  for (const e of Array.from(
+    svg.querySelectorAll("g.edge.cross-cluster")
+  )) {
+    const s = e.getAttribute("data-src") ?? "";
+    const d = e.getAttribute("data-dst") ?? "";
+    const sCl = e.getAttribute("data-src-cluster") ?? "";
+    const dCl = e.getAttribute("data-dst-cluster") ?? "";
+    if (orphanIds.has(s) && visibleClusters.has(dCl)) seedUpstream.add(s);
+    if (orphanIds.has(d) && visibleClusters.has(sCl)) seedDownstream.add(d);
+  }
+  const visible = /* @__PURE__ */ new Set();
+  const bfs = (seeds, adj) => {
+    const q = [];
+    for (const s of seeds) {
+      visible.add(s);
+      q.push(s);
+    }
+    while (q.length) {
+      const cur = q.shift();
+      const next = adj.get(cur);
+      if (!next) continue;
+      for (const x of next) {
+        if (!visible.has(x)) {
+          visible.add(x);
+          q.push(x);
+        }
+      }
+    }
+  };
+  bfs(seedUpstream, bwdAdj);
+  bfs(seedDownstream, fwdAdj);
+  return visible;
+}
+function applyVisibility(svg, state) {
+  annotateSvgForC0(svg);
+  const { visibleClusters, includeSharedPlaces } = state;
+  for (const c of Array.from(
+    svg.querySelectorAll("g.cluster:not(.cluster-orchestrator)")
+  )) {
+    const titleEl = c.querySelector(":scope > title");
+    const shortName = (titleEl?.textContent ?? "").replace(/^cluster_/, "");
+    c.classList.toggle("is-hidden", !visibleClusters.has(shortName));
+  }
+  for (const n of Array.from(svg.querySelectorAll("g.node[data-instance]"))) {
+    const inst = n.getAttribute("data-instance") ?? "";
+    n.classList.toggle("is-hidden", !visibleClusters.has(inst));
+  }
+  const visOrphans = computeVisibleOrphans(svg, visibleClusters);
+  for (const n of Array.from(
+    svg.querySelectorAll("g.node:not([data-instance])")
+  )) {
+    const id = n.getAttribute("data-id") ?? "";
+    n.classList.toggle("is-hidden", !visOrphans.has(id));
+  }
+  if (!includeSharedPlaces) {
+    for (const n of Array.from(svg.querySelectorAll("g.node.petri-replica"))) {
+      n.classList.add("is-hidden");
+    }
+  }
+  const nodeById = /* @__PURE__ */ new Map();
+  for (const n of Array.from(svg.querySelectorAll("g.node"))) {
+    const id = n.getAttribute("data-id");
+    if (id) nodeById.set(id, n);
+  }
+  for (const e of Array.from(svg.querySelectorAll("g.edge"))) {
+    const s = e.getAttribute("data-src") ?? "";
+    const d = e.getAttribute("data-dst") ?? "";
+    const sHidden = nodeById.get(s)?.classList.contains("is-hidden") ?? false;
+    const dHidden = nodeById.get(d)?.classList.contains("is-hidden") ?? false;
+    e.classList.toggle("is-hidden", sHidden || dHidden);
+  }
+}
+
+// src/viewer/styles.ts
+var VIEWER_CSS_VARIABLES = [
+  "--lpv-bg",
+  "--lpv-header-bg",
+  "--lpv-border",
+  "--lpv-text",
+  "--lpv-muted",
+  "--lpv-cluster-bg",
+  "--lpv-cluster-bg-collapsed",
+  "--lpv-cluster-stroke-width",
+  "--lpv-cluster-stroke-dash",
+  "--lpv-cluster-fill-tint",
+  "--lpv-dim-opacity",
+  "--lpv-active-filter-outline",
+  "--lpv-legend-bg",
+  "--lpv-chip-bg",
+  "--lpv-chip-active-bg",
+  // C0 sidebar + replica + highlight (Stage 5)
+  "--lpv-sidebar-bg",
+  "--lpv-sidebar-border",
+  "--lpv-sidebar-text",
+  "--lpv-sidebar-muted",
+  "--lpv-sidebar-chip-bg",
+  "--lpv-sidebar-chip-hover-bg",
+  "--lpv-sidebar-chip-off-opacity",
+  "--lpv-shared-glyph-color",
+  "--lpv-replica-fill",
+  "--lpv-replica-stroke",
+  "--lpv-highlight-stroke",
+  "--lpv-highlight-glow",
+  "--lpv-neighbor-stroke",
+  "--lpv-faded-node-opacity",
+  "--lpv-faded-edge-opacity",
+  "--lpv-faded-cluster-opacity"
+];
+
+// src/viewer/index.ts
+async function mount(dotSource, container, opts = {}) {
+  const previousHandle = opts.previousHandle ?? null;
+  const preservedCollapsed = previousHandle ? new Set(previousHandle.collapsedPrefixes) : /* @__PURE__ */ new Set();
+  const preservedFilter = previousHandle?.activeFilter ?? null;
+  if (previousHandle) {
+    previousHandle.dispose();
+  }
+  let svg;
+  const existing = container.querySelector(":scope > svg");
+  if (dotSource == null) {
+    if (!(existing instanceof SVGSVGElement)) {
+      throw new Error("mount: no DOT source and no pre-rendered SVG");
+    }
+    svg = existing;
+  } else {
+    const renderModule = await import("../render-QK57X4TP.js");
+    const useElk = (opts.layout ?? "elk") === "elk";
+    svg = useElk ? await renderModule.renderDotToSvgWithElkLayout(dotSource) : await renderModule.renderDotToSvg(dotSource);
+    container.innerHTML = "";
+    container.appendChild(svg);
+  }
+  container.classList.add("libpetri-viewer");
+  const panzoomInstance = attachPanzoom(svg, opts.panzoom);
+  const clusters = discoverClusters(svg);
+  paintClusterBorders(clusters);
+  const layoutMode = opts.layout ?? "elk";
+  if (layoutMode === "elk") {
+    tagReplicas(svg);
+    annotateSvgForC0(svg);
+  }
+  const collapsedPrefixes = /* @__PURE__ */ new Set();
+  let activeFilter = null;
+  let highlightedNodeId = null;
+  let disposed = false;
+  let chromeRoot = null;
+  let sidebarHandle = null;
+  let highlightModeEnabled = true;
+  function ensureChrome() {
+    if (!opts.chrome) return;
+    if (chromeRoot && chromeRoot.parentNode === container) return;
+    chromeRoot = document.createElement("div");
+    chromeRoot.className = "libpetri-viewer-chrome";
+    chromeRoot.style.position = "absolute";
+    chromeRoot.style.inset = "0";
+    chromeRoot.style.pointerEvents = "none";
+    const controls = document.createElement("div");
+    controls.className = "diagram-controls";
+    controls.style.pointerEvents = "auto";
+    const resetBtn = document.createElement("button");
+    resetBtn.type = "button";
+    resetBtn.className = "diagram-btn btn-reset";
+    resetBtn.title = "Reset view";
+    resetBtn.textContent = "Reset";
+    resetBtn.addEventListener("click", () => handle.fit());
+    const fsBtn = document.createElement("button");
+    fsBtn.type = "button";
+    fsBtn.className = "diagram-btn btn-fullscreen";
+    fsBtn.title = "Toggle fullscreen";
+    fsBtn.textContent = "Fullscreen";
+    fsBtn.addEventListener("click", () => toggleFullscreen(container, fsBtn));
+    controls.appendChild(resetBtn);
+    controls.appendChild(fsBtn);
+    chromeRoot.appendChild(controls);
+    if (getComputedStyle(container).position === "static") {
+      container.style.position = "relative";
+    }
+    container.appendChild(chromeRoot);
+    if (layoutMode === "elk" && clusters.size > 0) {
+      sidebarHandle = mountSidebar(container, clusters, {
+        onVisibilityChange: (state) => handle.setVisibility(state),
+        onHighlightModeChange: (enabled) => {
+          highlightModeEnabled = enabled;
+          if (!enabled) handle.highlight(null);
+        }
+      });
+    }
+  }
+  function toggleFullscreen(host, btn) {
+    const isFs = host.classList.toggle("diagram-fullscreen");
+    btn.textContent = isFs ? "Exit fullscreen" : "Fullscreen";
+    requestAnimationFrame(() => handle.fit());
+  }
+  const handle = {
+    svg,
+    panzoom: panzoomInstance,
+    clusters,
+    get collapsedPrefixes() {
+      return collapsedPrefixes;
+    },
+    get activeFilter() {
+      return activeFilter;
+    },
+    collapse(prefix) {
+      if (disposed) return;
+      const cluster = clusters.get(prefix);
+      if (!cluster) return;
+      if (!collapsedPrefixes.has(prefix)) {
+        setClusterCollapsed(cluster, true);
+        collapsedPrefixes.add(prefix);
+        opts.onClusterCollapse?.(prefix, true);
+      }
+    },
+    expand(prefix) {
+      if (disposed) return;
+      const cluster = clusters.get(prefix);
+      if (!cluster) return;
+      if (collapsedPrefixes.has(prefix)) {
+        setClusterCollapsed(cluster, false);
+        collapsedPrefixes.delete(prefix);
+        opts.onClusterCollapse?.(prefix, false);
+      }
+    },
+    collapseAll() {
+      if (disposed) return;
+      for (const cluster of clusters.values()) {
+        if (!collapsedPrefixes.has(cluster.prefix)) {
+          setClusterCollapsed(cluster, true);
+          collapsedPrefixes.add(cluster.prefix);
+          opts.onClusterCollapse?.(cluster.prefix, true);
+        }
+      }
+    },
+    expandAll() {
+      if (disposed) return;
+      for (const prefix of Array.from(collapsedPrefixes)) {
+        const cluster = clusters.get(prefix);
+        if (!cluster) continue;
+        setClusterCollapsed(cluster, false);
+        collapsedPrefixes.delete(prefix);
+        opts.onClusterCollapse?.(prefix, false);
+      }
+    },
+    filter(prefix) {
+      if (disposed) return;
+      activeFilter = prefix;
+      applyFilter(svg, prefix);
+      opts.onClusterFilter?.(prefix);
+    },
+    resetZoom() {
+      if (disposed) return;
+      try {
+        panzoomInstance.moveTo(0, 0);
+        panzoomInstance.zoomAbs(0, 0, 1);
+      } catch {
+      }
+    },
+    fit() {
+      if (disposed) return;
+      try {
+        panzoomInstance.zoomAbs(0, 0, 1);
+        panzoomInstance.moveTo(0, 0);
+      } catch {
+      }
+    },
+    isInsideCollapsedCluster(graphId) {
+      return isInsideCollapsedCluster(svg, clusters, collapsedPrefixes, graphId);
+    },
+    get highlightedNodeId() {
+      return highlightedNodeId;
+    },
+    highlight(nodeId) {
+      if (disposed) return;
+      if (layoutMode !== "elk") return;
+      highlightedNodeId = nodeId;
+      applyHighlight(svg, nodeId);
+    },
+    setVisibility(state) {
+      if (disposed) return;
+      if (layoutMode !== "elk") return;
+      applyVisibility(svg, state);
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      try {
+        panzoomInstance.dispose();
+      } catch {
+      }
+      sidebarHandle?.dispose();
+      sidebarHandle = null;
+      if (chromeRoot && chromeRoot.parentNode === container) {
+        container.removeChild(chromeRoot);
+      }
+      chromeRoot = null;
+    }
+  };
+  for (const prefix of preservedCollapsed) {
+    handle.collapse(prefix);
+  }
+  if (preservedFilter !== null) {
+    handle.filter(preservedFilter);
+  }
+  if (layoutMode === "elk") {
+    svg.addEventListener("click", (ev) => {
+      if (!highlightModeEnabled) return;
+      const target = ev.target;
+      if (!(target instanceof Element)) return;
+      const nodeG = target.closest("g.node");
+      if (!nodeG) {
+        handle.highlight(null);
+        return;
+      }
+      const id = nodeG.getAttribute("data-id");
+      if (!id) return;
+      handle.highlight(id === highlightedNodeId ? null : id);
+    });
+  }
+  ensureChrome();
+  requestAnimationFrame(() => handle.fit());
+  return handle;
+}
+export {
+  DEFAULT_PANZOOM_OPTS,
+  VIEWER_CSS_VARIABLES,
+  colorForPrefix,
+  discoverClusters,
+  mount
+};
+//# sourceMappingURL=index.js.map