libpetri 1.8.4 → 2.0.0

package/dist/viewer/index.d.ts

@@ -0,0 +1,196 @@
+import panzoom from 'panzoom';
+
+/**
+ * Pan/zoom wrapper for the canonical libpetri viewer.
+ *
+ * Delegates to the `panzoom` library (no hand-rolled wheel handlers — we
+ * intentionally drop the IIFE/javadoc version's bespoke math in favour of
+ * a single battle-tested implementation). Defaults match the old debug-ui
+ * and dev-preview values so the canonical viewer feels identical to what
+ * users had before.
+ *
+ * @module viewer/pan-zoom
+ */
+
+type PanzoomInstance = ReturnType<typeof panzoom>;
+type PanzoomOptions = Parameters<typeof panzoom>[1];
+/**
+ * Default panzoom configuration shared across all viewer surfaces.
+ *
+ * - `maxZoom: 1000` — effectively unlimited; lets users dive into ~150-node
+ *   diagrams without hitting an artificial ceiling.
+ * - `minZoom: 0.02` — allows fitting very large nets in a small viewport.
+ * - `smoothScroll: false` — sharper interactive feel.
+ * - `zoomDoubleClickSpeed: 1` — single-click double-zoom toggle.
+ */
+declare const DEFAULT_PANZOOM_OPTS: {
+    readonly smoothScroll: false;
+    readonly zoomDoubleClickSpeed: 1;
+    readonly maxZoom: 1000;
+    readonly minZoom: 0.02;
+};
+
+/**
+ * Cluster overlay for the canonical libpetri viewer.
+ *
+ * Post-processes a rendered SVG to surface subnet structure visually:
+ *  1. Discover `<g class="cluster">` subgraphs, derive each prefix from the
+ *     contained `<title>` (Graphviz emits `cluster_<sanitizedPrefix>`).
+ *  2. Tag every contained `<g class="node">` with `data-instance="<prefix>"`
+ *     so filtering can target it via attribute selectors.
+ *  3. Assign each cluster a deterministic HSL colour (FNV-1a hash + golden
+ *     ratio hue increment) and paint its border.
+ *  4. Provide collapse/expand and "show only <prefix>" filtering.
+ *
+ * Unlike the previous debug-ui cluster-overlay, this module is instance-
+ * based: every `mount()` call gets its own `ClusterOverlay` so multiple
+ * viewers on the same page don't share collapse/isolate state.
+ *
+ * @module viewer/cluster-overlay
+ */
+/** A discovered cluster with its DOM group, node count, and palette colour. */
+interface ClusterDescriptor {
+    readonly prefix: string;
+    readonly group: SVGGElement;
+    readonly nodeCount: number;
+    readonly color: string;
+}
+/**
+ * Walk the SVG, find every `<g class="cluster">`, derive the prefix from
+ * each cluster's `<title>` (`cluster_<sanitized>`), and tag every cluster-
+ * interior `<g class="node">` with `data-instance="<prefix>"`. Returns one
+ * descriptor per cluster.
+ *
+ * Graphviz emits cluster nodes as SIBLINGS of the cluster `<g>`, not as
+ * children — `<g class="cluster">` only carries title, polygon border, and
+ * the cluster's text label. To recover cluster membership we match each
+ * node's `<title>` (the original graph id) against libpetri's prefixing
+ * convention: interior places are emitted as `p_<prefix>_<name>`,
+ * transitions as `t_<prefix>_<name>`, and junctions as `j_<prefix>_<name>`.
+ *
+ * Does not split nested-cluster prefixes (`outer_inner` could mean either
+ * `outer/inner` or a flat `outer_inner` prefix — Graphviz sanitisation is
+ * lossy). We treat every cluster as its own top-level entry, matching the
+ * doclet's pragmatism.
+ */
+declare function discoverClusters(svg: SVGSVGElement): Map<string, ClusterDescriptor>;
+/**
+ * Deterministic HSL palette. FNV-1a-ish hash of the prefix, multiplied by
+ * the golden-ratio fraction (0.61803...) to spread adjacent prefixes
+ * visually. Saturation/lightness are fixed (60% / 45%) so the palette
+ * stays readable on both the doc background and the dark debug UI.
+ */
+declare function colorForPrefix(prefix: string): string;
+
+/**
+ * CSS custom properties exposed by the canonical viewer stylesheet.
+ *
+ * Each property has a default in `viewer.css`. Consumers can override any of
+ * them at any scope (the viewer container, the document root, etc.) to
+ * theme the viewer without touching the canonical CSS.
+ *
+ * Names are listed here as a reference + so the IIFE bundle can expose them
+ * on `window.LibpetriViewer.cssVariables`. The list is informational — the
+ * stylesheet is still the source of truth.
+ *
+ * @module viewer/styles
+ */
+/** CSS custom property names that the canonical stylesheet honours. */
+declare const VIEWER_CSS_VARIABLES: readonly ["--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"];
+
+/**
+ * Canonical libpetri Petri-net diagram viewer.
+ *
+ * Single source of truth for DOT → SVG rendering + cluster overlay across
+ * all four surfaces:
+ *  - debug-ui (live debugger)
+ *  - dev-preview (Vite app)
+ *  - Javadoc taglet (Java doclet)
+ *  - Rustdoc embed (libpetri-docgen)
+ *  - TypeDoc / typescript doclet
+ *
+ * Build outputs:
+ *  - ESM: `dist/viewer/index.js` — consumed by Vite/Webpack/Node bundlers.
+ *  - IIFE: `dist/viewer/viewer.iife.js` — self-contained, exposes
+ *    `window.LibpetriViewer = { mount, ... }`. Used by the doc taglets
+ *    that ship pre-rendered HTML pages without a bundler.
+ *  - CSS: `dist/viewer/viewer.css` — canonical stylesheet (copied from
+ *    `src/viewer/resources/viewer.css`).
+ *
+ * Edits to viewer behaviour MUST happen here. The three resource directories
+ * under `java/`, `rust/`, and `typescript/src/doclet/` are **build outputs**
+ * populated by `scripts/build-viewer.sh` and must not be hand-edited.
+ *
+ * @module viewer
+ */
+
+/** Handle returned by {@link mount}. */
+interface ViewerHandle {
+    /** The rendered root `<svg>` element. */
+    readonly svg: SVGSVGElement;
+    /** The panzoom instance attached to the SVG. */
+    readonly panzoom: PanzoomInstance;
+    /** Map of cluster prefix → descriptor for the current SVG. */
+    readonly clusters: ReadonlyMap<string, ClusterDescriptor>;
+    /** Prefixes currently marked collapsed on this handle. */
+    readonly collapsedPrefixes: ReadonlySet<string>;
+    /** Currently active "show only <prefix>" filter, or null. */
+    readonly activeFilter: string | null;
+    /** Collapse a single cluster by prefix. No-op if unknown. */
+    collapse(prefix: string): void;
+    /** Expand a single cluster by prefix. No-op if unknown. */
+    expand(prefix: string): void;
+    /** Collapse every discovered cluster. */
+    collapseAll(): void;
+    /** Expand every collapsed cluster. */
+    expandAll(): void;
+    /** Apply the "show only <prefix>" filter; pass `null` to clear. */
+    filter(prefix: string | null): void;
+    /** Reset pan/zoom to the identity transform. */
+    resetZoom(): void;
+    /** Scale and translate so the full diagram fits the host viewport. */
+    fit(): void;
+    /** Reports whether `graphId` is inside a currently-collapsed cluster. */
+    isInsideCollapsedCluster(graphId: string): boolean;
+    /** Tear down: dispose panzoom and detach listeners. */
+    dispose(): void;
+}
+/** Options accepted by {@link mount}. */
+interface MountOptions {
+    /**
+     * Previous handle to dispose before mounting. Pass the handle returned
+     * by a prior `mount()` call so callers don't need to track it separately.
+     * Cluster collapse / filter state from `previousHandle` is preserved
+     * across the re-render so the user's intent survives a live re-draw.
+     */
+    readonly previousHandle?: ViewerHandle | null;
+    /** Per-call panzoom overrides; merged on top of {@link DEFAULT_PANZOOM_OPTS}. */
+    readonly panzoom?: PanzoomOptions;
+    /** Fired after a cluster's collapsed state changes via the handle API. */
+    readonly onClusterCollapse?: (prefix: string, collapsed: boolean) => void;
+    /** Fired after `filter()` runs, with the new filter prefix or null. */
+    readonly onClusterFilter?: (prefix: string | null) => void;
+    /** When true, append a legend sidebar + filter chip strip inside `container`. */
+    readonly chrome?: boolean;
+}
+/**
+ * Render a DOT source, mount the resulting SVG into `container`, wire pan/zoom,
+ * and surface cluster overlay controls.
+ *
+ * The container's existing children are removed before the new SVG is
+ * appended (the same teardown behaviour `renderDotToContainer` used to provide).
+ *
+ * Pass `dotSource === null` to adopt an SVG already present as a direct child
+ * of `container` (pre-rendered SVG path — e.g. the Java javadoc taglet emits
+ * `dot -Tsvg` at build time). In that mode the viewer never imports the
+ * runtime DOT renderer, which lets the static IIFE bundle drop `@viz-js/viz`
+ * entirely.
+ *
+ * NOTE: when shipping a pre-rendered SVG (`dotSource === null`), do NOT also
+ * pass `previousHandle` — the handle's `dispose()` runs before SVG detection
+ * and would orphan the host. The Java taglet mounts once per page so this is
+ * a non-issue in practice.
+ */
+declare function mount(dotSource: string | null, container: HTMLElement, opts?: MountOptions): Promise<ViewerHandle>;
+
+export { type ClusterDescriptor, DEFAULT_PANZOOM_OPTS, type MountOptions, type PanzoomInstance, type PanzoomOptions, VIEWER_CSS_VARIABLES, type ViewerHandle, colorForPrefix, discoverClusters, mount };

package/dist/viewer/index.js

@@ -0,0 +1,442 @@
+// 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/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"
+];
+
+// 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 { renderDotToSvg } = await import("../render-P6GROU7J.js");
+    svg = await 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 collapsedPrefixes = /* @__PURE__ */ new Set();
+  let activeFilter = null;
+  let disposed = false;
+  let chromeRoot = null;
+  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 legend = document.createElement("div");
+    legend.className = "diagram-legend";
+    legend.style.pointerEvents = "auto";
+    legend.innerHTML = '<div class="legend-title">Clusters</div>';
+    chromeRoot.appendChild(legend);
+    const strip = document.createElement("div");
+    strip.className = "diagram-filter-strip";
+    strip.style.pointerEvents = "auto";
+    strip.innerHTML = '<span class="filter-strip-label">Show only:</span>';
+    chromeRoot.appendChild(strip);
+    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);
+    renderLegend(legend);
+    renderFilterStrip(strip);
+  }
+  function toggleFullscreen(host, btn) {
+    const isFs = host.classList.toggle("diagram-fullscreen");
+    btn.textContent = isFs ? "Exit fullscreen" : "Fullscreen";
+    requestAnimationFrame(() => handle.fit());
+  }
+  function renderLegend(legend) {
+    legend.innerHTML = '<div class="legend-title">Clusters</div>';
+    for (const cluster of clusters.values()) {
+      const row = document.createElement("div");
+      row.className = "legend-row";
+      row.innerHTML = '<span class="legend-ribbon" style="background:' + cluster.color + '"></span><span class="legend-label"></span><span class="legend-count"></span>';
+      row.querySelector(".legend-label").textContent = cluster.prefix;
+      row.querySelector(".legend-count").textContent = String(cluster.nodeCount);
+      row.addEventListener("click", () => {
+        if (collapsedPrefixes.has(cluster.prefix)) {
+          handle.expand(cluster.prefix);
+        } else {
+          handle.collapse(cluster.prefix);
+        }
+      });
+      legend.appendChild(row);
+    }
+  }
+  function renderFilterStrip(strip) {
+    strip.innerHTML = '<span class="filter-strip-label">Show only:</span>';
+    const allChip = document.createElement("button");
+    allChip.type = "button";
+    allChip.className = "filter-chip filter-chip-all filter-chip-active";
+    allChip.textContent = "all";
+    allChip.addEventListener("click", () => {
+      handle.filter(null);
+    });
+    strip.appendChild(allChip);
+    for (const cluster of clusters.values()) {
+      const chip = document.createElement("button");
+      chip.type = "button";
+      chip.className = "filter-chip";
+      chip.style.borderColor = cluster.color;
+      chip.dataset.prefix = cluster.prefix;
+      chip.innerHTML = '<span class="chip-dot" style="background:' + cluster.color + '"></span>';
+      chip.append(document.createTextNode(cluster.prefix));
+      chip.addEventListener("click", () => {
+        if (activeFilter === cluster.prefix) {
+          handle.filter(null);
+        } else {
+          handle.filter(cluster.prefix);
+        }
+      });
+      strip.appendChild(chip);
+    }
+  }
+  function refreshChromeActiveStates() {
+    if (!chromeRoot) return;
+    const strip = chromeRoot.querySelector(".diagram-filter-strip");
+    if (!strip) return;
+    strip.querySelectorAll(".filter-chip").forEach((chip) => {
+      chip.classList.remove("filter-chip-active");
+    });
+    if (activeFilter === null) {
+      strip.querySelector(".filter-chip-all")?.classList.add("filter-chip-active");
+    } else {
+      strip.querySelector(`.filter-chip[data-prefix="${activeFilter}"]`)?.classList.add("filter-chip-active");
+    }
+  }
+  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);
+      refreshChromeActiveStates();
+    },
+    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);
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      try {
+        panzoomInstance.dispose();
+      } catch {
+      }
+      if (chromeRoot && chromeRoot.parentNode === container) {
+        container.removeChild(chromeRoot);
+      }
+      chromeRoot = null;
+    }
+  };
+  for (const prefix of preservedCollapsed) {
+    handle.collapse(prefix);
+  }
+  if (preservedFilter !== null) {
+    handle.filter(preservedFilter);
+  }
+  ensureChrome();
+  requestAnimationFrame(() => handle.fit());
+  return handle;
+}
+export {
+  DEFAULT_PANZOOM_OPTS,
+  VIEWER_CSS_VARIABLES,
+  colorForPrefix,
+  discoverClusters,
+  mount
+};
+//# sourceMappingURL=index.js.map