@pipelex/mthds-ui 0.5.0

package/dist/graph/react/index.js

@@ -0,0 +1,2207 @@
+"use client";
+import {
+  DEFAULT_GRAPH_CONFIG,
+  EDGE_TYPE,
+  GRAPH_DIRECTION,
+  MAX_VISIBLE_CONTROLLER_CHILDREN,
+  applyControllers,
+  buildGraph,
+  getLayoutedElements,
+  getPipeBlueprint,
+  resolveConceptRef,
+  stuffDigestFromId
+} from "../../chunk-CCUSQM3E.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-DDAAVRWG.js";
+
+// src/graph/react/index.ts
+import "./graph-core.css";
+import "./detail/DetailPanel.css";
+import "./stuff/StuffViewer.css";
+import "./viewer/GraphToolbar.css";
+
+// src/graph/react/viewer/GraphViewer.tsx
+import React7 from "react";
+import {
+  ReactFlow,
+  useNodesState,
+  useEdgesState,
+  Background,
+  BackgroundVariant
+} from "@xyflow/react";
+
+// src/graph/react/stuff/stuffViewerUtils.ts
+function isSafeDisplayUrl(url) {
+  if (!url || typeof url !== "string") return false;
+  return url.startsWith("https://") || url.startsWith("http://") || url.startsWith("file://") || url.startsWith("/");
+}
+function isInlineRenderableUrl(url) {
+  if (!url || typeof url !== "string") return false;
+  return url.startsWith("https://") || url.startsWith("http://") || url.startsWith("file://") || url.startsWith("/");
+}
+function extractUrl(data) {
+  if (!data) return null;
+  if (typeof data === "string") {
+    return isSafeDisplayUrl(data) ? data : null;
+  }
+  if (typeof data !== "object") return null;
+  const obj = data;
+  const candidates = [obj.public_url, obj.src, obj.href, obj.uri, obj.url];
+  for (const candidate of candidates) {
+    if (isSafeDisplayUrl(candidate)) return candidate;
+  }
+  return null;
+}
+function extractInlineUrl(data) {
+  if (!data) return null;
+  if (typeof data === "string") {
+    return isInlineRenderableUrl(data) ? data : null;
+  }
+  if (typeof data !== "object") return null;
+  const obj = data;
+  const candidates = [obj.public_url, obj.src, obj.href, obj.uri, obj.url];
+  for (const candidate of candidates) {
+    if (isInlineRenderableUrl(candidate)) return candidate;
+  }
+  return null;
+}
+function extractStorageUri(data) {
+  if (!data) return null;
+  if (typeof data === "string") {
+    return data.startsWith("pipelex-storage://") ? data : null;
+  }
+  if (typeof data !== "object") return null;
+  const obj = data;
+  const candidates = [obj.uri, obj.url, obj.src, obj.href];
+  for (const candidate of candidates) {
+    if (typeof candidate === "string" && candidate.startsWith("pipelex-storage://")) {
+      return candidate;
+    }
+  }
+  return null;
+}
+function extractFilename(data) {
+  if (!data || typeof data !== "object") return null;
+  const obj = data;
+  if (typeof obj.filename === "string" && obj.filename) return obj.filename;
+  return null;
+}
+function resolveMimeType(data, contentType, url) {
+  var _a;
+  if (contentType && contentType.includes("/")) return contentType;
+  if (data && typeof data === "object") {
+    const obj = data;
+    if (typeof obj.mime_type === "string" && obj.mime_type) return obj.mime_type;
+  }
+  const source = extractFilename(data) || url || (typeof data === "string" ? data : null);
+  if (source) {
+    const match = source.match(/\.([a-zA-Z0-9]+)(?:\?|#|$)/);
+    const ext = (_a = match == null ? void 0 : match[1]) == null ? void 0 : _a.toLowerCase();
+    if (ext) {
+      if (ext === "pdf") return "application/pdf";
+      if (["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp"].includes(ext)) {
+        return `image/${ext === "jpg" ? "jpeg" : ext === "svg" ? "svg+xml" : ext}`;
+      }
+    }
+  }
+  return null;
+}
+function getHtmlTabLabel(contentType) {
+  if (contentType === "application/pdf") return "PDF";
+  if (contentType == null ? void 0 : contentType.startsWith("image/")) return "Image";
+  return "HTML";
+}
+function findStuffDataByDigest(graphspec, digest) {
+  var _a, _b, _c, _d;
+  for (const node of graphspec.nodes) {
+    for (const output of (_b = (_a = node.io) == null ? void 0 : _a.outputs) != null ? _b : []) {
+      if (output.digest === digest) {
+        return {
+          digest,
+          name: output.name,
+          concept: output.concept,
+          contentType: output.content_type,
+          data: output.data,
+          dataText: output.data_text,
+          dataHtml: output.data_html
+        };
+      }
+    }
+  }
+  for (const node of graphspec.nodes) {
+    for (const input of (_d = (_c = node.io) == null ? void 0 : _c.inputs) != null ? _d : []) {
+      if (input.digest === digest) {
+        return {
+          digest,
+          name: input.name,
+          concept: input.concept,
+          contentType: input.content_type,
+          data: input.data,
+          dataText: input.data_text,
+          dataHtml: input.data_html
+        };
+      }
+    }
+  }
+  return null;
+}
+
+// src/graph/react/stuff/StuffViewer.tsx
+import React from "react";
+import DOMPurify from "dompurify";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICON_COPY = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) });
+var ICON_CHECK = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) });
+var ICON_DOWNLOAD = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) });
+var ICON_EXTERNAL = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" }) });
+var ICON_LOCAL_FILE = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" }) });
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function downloadBlob(content, filename, mimeType) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1e4);
+}
+function downloadUrl(url, filename) {
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.target = "_blank";
+  link.click();
+}
+function StuffViewer({ stuff, className, resolveStorageUrl }) {
+  var _a;
+  const [activeTab, setActiveTab] = React.useState("html");
+  const [copied, setCopied] = React.useState(false);
+  const contentRef = React.useRef(null);
+  const httpInlineUrl = React.useMemo(() => extractInlineUrl(stuff.data), [stuff.data]);
+  const httpExternalUrl = React.useMemo(() => extractUrl(stuff.data), [stuff.data]);
+  const storageUri = React.useMemo(() => extractStorageUri(stuff.data), [stuff.data]);
+  const filename = React.useMemo(() => extractFilename(stuff.data), [stuff.data]);
+  const [resolvedStorageUrl, setResolvedStorageUrl] = React.useState(null);
+  React.useEffect(() => {
+    setResolvedStorageUrl(null);
+    if (!storageUri || !resolveStorageUrl || httpInlineUrl) {
+      return;
+    }
+    let cancelled = false;
+    resolveStorageUrl(storageUri).then((url) => {
+      if (cancelled) return;
+      setResolvedStorageUrl(isInlineRenderableUrl(url) ? url : null);
+    }).catch(() => {
+      if (!cancelled) setResolvedStorageUrl(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [storageUri, resolveStorageUrl, httpInlineUrl]);
+  const inlineUrl = httpInlineUrl != null ? httpInlineUrl : resolvedStorageUrl;
+  const externalUrl = httpExternalUrl != null ? httpExternalUrl : resolvedStorageUrl;
+  const effectiveMime = React.useMemo(
+    () => resolveMimeType(stuff.data, stuff.contentType, externalUrl != null ? externalUrl : storageUri),
+    [stuff.data, stuff.contentType, externalUrl, storageUri]
+  );
+  const isPdf = effectiveMime === "application/pdf";
+  const isImage = (_a = effectiveMime == null ? void 0 : effectiveMime.startsWith("image/")) != null ? _a : false;
+  const htmlTabLabel = getHtmlTabLabel(effectiveMime != null ? effectiveMime : stuff.contentType);
+  const jsonString = React.useMemo(() => {
+    if (stuff.data == null) return null;
+    try {
+      return JSON.stringify(stuff.data, null, 2);
+    } catch (e) {
+      return "[Unable to serialize data]";
+    }
+  }, [stuff.data]);
+  React.useEffect(() => {
+    if (activeTab !== "html" || !contentRef.current) return;
+    contentRef.current.querySelectorAll("a").forEach((link) => {
+      link.setAttribute("target", "_blank");
+      link.setAttribute("rel", "noopener noreferrer");
+    });
+  }, [activeTab, stuff.dataHtml]);
+  function renderMediaFallback(mediaLabel) {
+    const displayName = filename || stuff.name;
+    return /* @__PURE__ */ jsxs("div", { className: "stuff-viewer-local-file", children: [
+      /* @__PURE__ */ jsx("div", { className: "stuff-viewer-local-file-icon", children: ICON_LOCAL_FILE }),
+      /* @__PURE__ */ jsxs("div", { className: "stuff-viewer-local-file-info", children: [
+        displayName && /* @__PURE__ */ jsx("div", { className: "stuff-viewer-local-file-name", children: displayName }),
+        /* @__PURE__ */ jsxs("div", { className: "stuff-viewer-local-file-hint", children: [
+          mediaLabel,
+          " \u2014 no preview available"
+        ] })
+      ] })
+    ] });
+  }
+  function renderContent() {
+    if (activeTab === "html") {
+      if (isPdf) {
+        if (inlineUrl) {
+          const pdfUrl = inlineUrl.includes("#") ? inlineUrl : `${inlineUrl}#pagemode=none`;
+          return /* @__PURE__ */ jsx("div", { className: "stuff-viewer-pdf", children: /* @__PURE__ */ jsx("embed", { src: pdfUrl, type: "application/pdf" }) });
+        }
+        return renderMediaFallback("PDF");
+      }
+      if (isImage) {
+        if (inlineUrl) {
+          return /* @__PURE__ */ jsx("div", { className: "stuff-viewer-image", children: /* @__PURE__ */ jsx("img", { src: inlineUrl, alt: stuff.name || "Image content" }) });
+        }
+        return renderMediaFallback("Image");
+      }
+      if (stuff.dataHtml) {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "stuff-viewer-html",
+            dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(stuff.dataHtml) }
+          }
+        );
+      }
+      if (jsonString) {
+        return /* @__PURE__ */ jsx(
+          "pre",
+          {
+            className: "stuff-viewer-pre",
+            dangerouslySetInnerHTML: { __html: escapeHtml(jsonString) }
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx("div", { className: "stuff-viewer-placeholder", children: "No content available" });
+    }
+    if (activeTab === "json") {
+      if (jsonString) {
+        return /* @__PURE__ */ jsx(
+          "pre",
+          {
+            className: "stuff-viewer-pre",
+            dangerouslySetInnerHTML: { __html: escapeHtml(jsonString) }
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx("div", { className: "stuff-viewer-placeholder", children: "No JSON data available" });
+    }
+    if (stuff.dataText) {
+      return /* @__PURE__ */ jsx(
+        "pre",
+        {
+          className: "stuff-viewer-pre stuff-viewer-pre--nowrap",
+          dangerouslySetInnerHTML: { __html: escapeHtml(stuff.dataText) }
+        }
+      );
+    }
+    if (jsonString) {
+      return /* @__PURE__ */ jsx(
+        "pre",
+        {
+          className: "stuff-viewer-pre",
+          dangerouslySetInnerHTML: { __html: escapeHtml(jsonString) }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: "stuff-viewer-placeholder", children: "No text data available" });
+  }
+  function handleCopy() {
+    let textToCopy;
+    if (activeTab === "json") {
+      textToCopy = jsonString || "";
+    } else if (activeTab === "text") {
+      textToCopy = stuff.dataText || jsonString || "";
+    } else {
+      textToCopy = stuff.dataText || stuff.dataHtml || jsonString || "";
+    }
+    if (!textToCopy) return;
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(textToCopy).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }).catch(() => {
+      });
+    }
+  }
+  function handleDownload() {
+    if (isImage && externalUrl) {
+      const ext = (effectiveMime == null ? void 0 : effectiveMime.split("/")[1]) || "png";
+      downloadUrl(externalUrl, `${stuff.name || "stuff"}.${ext}`);
+      return;
+    }
+    if (isPdf && externalUrl) {
+      downloadUrl(externalUrl, `${stuff.name || "stuff"}.pdf`);
+      return;
+    }
+    if (activeTab === "json") {
+      downloadBlob(jsonString || "{}", `${stuff.name || "stuff"}.json`, "application/json");
+    } else if (activeTab === "text") {
+      downloadBlob(
+        stuff.dataText || jsonString || "",
+        `${stuff.name || "stuff"}.txt`,
+        "text/plain"
+      );
+    } else {
+      downloadBlob(
+        stuff.dataHtml || jsonString || "",
+        `${stuff.name || "stuff"}.html`,
+        "text/html"
+      );
+    }
+  }
+  function handleOpenExternal() {
+    if (externalUrl) {
+      window.open(externalUrl, "_blank", "noopener,noreferrer");
+    }
+  }
+  const rootClass = ["stuff-viewer", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
+    /* @__PURE__ */ jsxs("div", { className: "stuff-viewer-header", children: [
+      /* @__PURE__ */ jsx("h3", { className: "stuff-viewer-title", children: stuff.name || "Data" }),
+      stuff.concept && /* @__PURE__ */ jsx("p", { className: "stuff-viewer-subtitle", children: stuff.concept })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "stuff-viewer-toolbar", children: [
+      /* @__PURE__ */ jsx("div", { className: "stuff-viewer-tabs", children: ["html", "json", "text"].map((tab) => {
+        const label = tab === "html" ? htmlTabLabel : tab === "json" ? "JSON" : "Pretty";
+        const isActive = activeTab === tab;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `stuff-viewer-tab${isActive ? " stuff-viewer-tab--active" : ""}`,
+            onClick: () => setActiveTab(tab),
+            children: label
+          },
+          tab
+        );
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "stuff-viewer-actions", children: [
+        externalUrl && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "stuff-viewer-action-btn",
+            onClick: handleOpenExternal,
+            title: "Open in new window",
+            "aria-label": "Open in new window",
+            children: ICON_EXTERNAL
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `stuff-viewer-action-btn${copied ? " stuff-viewer-action-btn--copied" : ""}`,
+            onClick: handleCopy,
+            title: "Copy",
+            "aria-label": "Copy",
+            children: copied ? ICON_CHECK : ICON_COPY
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "stuff-viewer-action-btn",
+            onClick: handleDownload,
+            title: "Download",
+            "aria-label": "Download",
+            children: ICON_DOWNLOAD
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "stuff-viewer-content", ref: contentRef, children: renderContent() })
+  ] });
+}
+
+// src/graph/react/detail/DetailPanel.tsx
+import React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DetailPanel({
+  isOpen,
+  onClose,
+  children,
+  width,
+  isDragging,
+  onResizeHandleMouseDown,
+  closeOnEscape = true
+}) {
+  React2.useEffect(() => {
+    if (!isOpen || !closeOnEscape) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isOpen, closeOnEscape, onClose]);
+  const className = [
+    "detail-panel",
+    !isOpen && "detail-panel--closed",
+    isDragging && "detail-panel--dragging"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs2("div", { className, style: width ? { width: `${width}px` } : void 0, children: [
+    onResizeHandleMouseDown && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "detail-panel-resize-handle",
+        onMouseDown: onResizeHandleMouseDown,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": "Resize panel"
+      }
+    ),
+    /* @__PURE__ */ jsx2("button", { className: "detail-panel-close", onClick: onClose, "aria-label": "Close panel", children: "x" }),
+    /* @__PURE__ */ jsx2("div", { className: "detail-panel-content", children })
+  ] });
+}
+
+// src/graph/react/detail/useResizable.ts
+import React3 from "react";
+var MAX_WIDTH_RATIO = 0.6;
+function useResizable({
+  defaultWidth,
+  minWidth,
+  maxWidth,
+  containerRef
+}) {
+  const [width, setWidth] = React3.useState(defaultWidth);
+  const [isDragging, setIsDragging] = React3.useState(false);
+  const dragRef = React3.useRef({ startX: 0, startWidth: 0, maxAllowed: maxWidth });
+  const rafRef = React3.useRef(null);
+  const handleMouseDown = React3.useCallback(
+    (e) => {
+      var _a;
+      e.preventDefault();
+      e.stopPropagation();
+      const containerWidth = (_a = containerRef == null ? void 0 : containerRef.current) == null ? void 0 : _a.getBoundingClientRect().width;
+      const maxAllowed = containerWidth ? Math.min(maxWidth, containerWidth * MAX_WIDTH_RATIO) : maxWidth;
+      dragRef.current = { startX: e.clientX, startWidth: width, maxAllowed };
+      setIsDragging(true);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "col-resize";
+    },
+    [width, maxWidth, containerRef]
+  );
+  React3.useEffect(() => {
+    if (!isDragging) return;
+    const onMouseMove = (e) => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        const { startX, startWidth, maxAllowed } = dragRef.current;
+        const deltaX = startX - e.clientX;
+        const newWidth = Math.max(minWidth, Math.min(maxAllowed, startWidth + deltaX));
+        setWidth(newWidth);
+        rafRef.current = null;
+      });
+    };
+    const onMouseUp = () => {
+      setIsDragging(false);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [isDragging, minWidth]);
+  return { width, isDragging, handleMouseDown };
+}
+
+// src/graph/react/detail/PipeDetailPanel.tsx
+import React5 from "react";
+
+// src/graph/react/detail/sections/shared.tsx
+import { useState } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function formatDuration(seconds) {
+  if (seconds < 1) return `${(seconds * 1e3).toFixed(0)}ms`;
+  return `${seconds.toFixed(2)}s`;
+}
+function KV({
+  label,
+  value
+}) {
+  if (value === null || value === void 0) return null;
+  return /* @__PURE__ */ jsxs3("div", { className: "detail-kv-row", children: [
+    /* @__PURE__ */ jsx3("span", { className: "detail-kv-key", children: label }),
+    /* @__PURE__ */ jsx3("span", { className: "detail-kv-value", children: String(value) })
+  ] });
+}
+function PromptBlock({
+  label,
+  text
+}) {
+  if (!text) return null;
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsx3("div", { className: "detail-section-label", children: label }),
+    /* @__PURE__ */ jsx3("div", { className: "detail-prompt-block", children: text })
+  ] });
+}
+var EXPAND_ICON = /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: "10", height: "10", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" }) });
+var COLLAPSE_ICON = /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: "10", height: "10", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }) });
+var COPY_ICON = /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: "10", height: "10", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) });
+var CHECK_ICON = /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: "10", height: "10", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) });
+var promptActionStyle = {
+  all: "unset",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+  fontSize: 9,
+  color: "#64748b",
+  padding: "2px 6px",
+  borderRadius: 3,
+  background: "rgba(255,255,255,0.04)",
+  border: "1px solid rgba(255,255,255,0.06)",
+  transition: "color 0.15s"
+};
+function PromptToggle({
+  label,
+  templateText,
+  renderedText
+}) {
+  const [showTemplate, setShowTemplate] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const hasTemplate = !!templateText;
+  const hasRendered = !!renderedText;
+  if (!hasTemplate && !hasRendered) return null;
+  const canToggle = hasTemplate && hasRendered;
+  const activeText = canToggle ? showTemplate ? templateText : renderedText : templateText || renderedText;
+  function handleCopy() {
+    if (!activeText || !navigator.clipboard) return;
+    navigator.clipboard.writeText(activeText).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    }).catch(() => {
+    });
+  }
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 4 }, children: [
+      /* @__PURE__ */ jsx3("div", { className: "detail-section-label", style: { marginBottom: 0 }, children: label }),
+      /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: () => setExpanded((prev) => !prev),
+            title: expanded ? "Collapse prompt" : "Expand prompt",
+            "aria-label": expanded ? "Collapse prompt" : "Expand prompt",
+            className: "detail-prompt-expand-btn",
+            children: expanded ? COLLAPSE_ICON : EXPAND_ICON
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            onClick: handleCopy,
+            title: "Copy prompt",
+            "aria-label": "Copy prompt",
+            style: __spreadProps(__spreadValues({}, promptActionStyle), {
+              color: copied ? "#10b981" : "#64748b"
+            }),
+            children: copied ? CHECK_ICON : COPY_ICON
+          }
+        ),
+        canToggle && /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            onClick: () => setShowTemplate((prev) => !prev),
+            style: promptActionStyle,
+            children: [
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  style: {
+                    width: 22,
+                    height: 12,
+                    borderRadius: 6,
+                    background: showTemplate ? "rgba(255,255,255,0.12)" : "#50FA7B33",
+                    position: "relative",
+                    display: "inline-block",
+                    transition: "background 0.15s"
+                  },
+                  children: /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      style: {
+                        position: "absolute",
+                        top: 2,
+                        left: showTemplate ? 2 : 12,
+                        width: 8,
+                        height: 8,
+                        borderRadius: "50%",
+                        background: showTemplate ? "#94a3b8" : "#50FA7B",
+                        transition: "left 0.15s, background 0.15s"
+                      }
+                    }
+                  )
+                }
+              ),
+              showTemplate ? "template" : "rendered"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `detail-prompt-block ${expanded ? "detail-prompt-block--expanded" : "detail-prompt-block--collapsed"}`,
+        style: { marginTop: 6 },
+        children: activeText
+      }
+    )
+  ] });
+}
+
+// src/graph/react/detail/sections/PipeLLMDetail.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function PipeLLMSection({
+  blueprint,
+  executionData
+}) {
+  var _a, _b, _c, _d, _e;
+  const spec = blueprint.llm_prompt_spec;
+  const hasImageRefs = spec.user_image_references && spec.user_image_references.length > 0;
+  const hasDocRefs = spec.user_document_references && spec.user_document_references.length > 0;
+  const hasSysImageRefs = spec.system_image_references && spec.system_image_references.length > 0;
+  const hasSysDocRefs = spec.system_document_references && spec.system_document_references.length > 0;
+  const resolvedModel = executionData == null ? void 0 : executionData.resolved_model;
+  const resolvedModelForObject = executionData == null ? void 0 : executionData.resolved_model_for_object;
+  const renderedSystem = executionData == null ? void 0 : executionData.rendered_system_prompt;
+  const renderedUser = executionData == null ? void 0 : executionData.rendered_user_prompt;
+  const structuringPath = executionData == null ? void 0 : executionData.structuring_path;
+  const isMultipleOutput = executionData == null ? void 0 : executionData.is_multiple_output;
+  const modelDisplay = resolvedModel || ((_a = blueprint.llm_choices) == null ? void 0 : _a.for_text);
+  const modelForObjectDisplay = resolvedModelForObject || ((_b = blueprint.llm_choices) == null ? void 0 : _b.for_object);
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx4(KV, { label: "Model", value: modelDisplay }),
+    modelForObjectDisplay && modelForObjectDisplay !== modelDisplay && /* @__PURE__ */ jsx4(KV, { label: "Model (object)", value: modelForObjectDisplay }),
+    /* @__PURE__ */ jsx4(KV, { label: "Structuring", value: structuringPath || blueprint.structuring_method }),
+    /* @__PURE__ */ jsx4(KV, { label: "Multiple Output", value: isMultipleOutput }),
+    /* @__PURE__ */ jsx4(KV, { label: "Output Multiplicity", value: blueprint.output_multiplicity }),
+    /* @__PURE__ */ jsx4(KV, { label: "Prompt Category", value: (_c = spec.prompt_blueprint) == null ? void 0 : _c.category }),
+    hasImageRefs && /* @__PURE__ */ jsx4(KV, { label: "User Image Refs", value: `${spec.user_image_references.length} references` }),
+    hasDocRefs && /* @__PURE__ */ jsx4(KV, { label: "User Document Refs", value: `${spec.user_document_references.length} references` }),
+    hasSysImageRefs && /* @__PURE__ */ jsx4(KV, { label: "System Image Refs", value: `${spec.system_image_references.length} references` }),
+    hasSysDocRefs && /* @__PURE__ */ jsx4(KV, { label: "System Document Refs", value: `${spec.system_document_references.length} references` }),
+    /* @__PURE__ */ jsx4(
+      PromptToggle,
+      {
+        label: "System Prompt",
+        templateText: (_d = spec.system_prompt_blueprint) == null ? void 0 : _d.template,
+        renderedText: renderedSystem
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      PromptToggle,
+      {
+        label: "Prompt",
+        templateText: (_e = spec.prompt_blueprint) == null ? void 0 : _e.template,
+        renderedText: renderedUser
+      }
+    )
+  ] });
+}
+function LLMExecutionData(_props) {
+  return null;
+}
+
+// src/graph/react/detail/sections/PipeImgGenDetail.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function PipeImgGenSection({
+  blueprint,
+  executionData
+}) {
+  var _a, _b, _c;
+  const spec = blueprint.img_gen_prompt_blueprint;
+  const resolvedModel = executionData == null ? void 0 : executionData.resolved_model;
+  const renderedPrompt = executionData == null ? void 0 : executionData.rendered_prompt;
+  const renderedNegative = executionData == null ? void 0 : executionData.rendered_negative_prompt;
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(KV, { label: "Model", value: resolvedModel || blueprint.img_gen_choice }),
+    /* @__PURE__ */ jsx5(
+      PromptToggle,
+      {
+        label: "Prompt",
+        templateText: (_a = spec.prompt_blueprint) == null ? void 0 : _a.template,
+        renderedText: renderedPrompt
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      PromptToggle,
+      {
+        label: "Negative Prompt",
+        templateText: (_b = spec.negative_prompt_blueprint) == null ? void 0 : _b.template,
+        renderedText: renderedNegative
+      }
+    ),
+    /* @__PURE__ */ jsx5(KV, { label: "Aspect Ratio", value: blueprint.aspect_ratio }),
+    /* @__PURE__ */ jsx5(KV, { label: "Output Format", value: blueprint.output_format }),
+    /* @__PURE__ */ jsx5(KV, { label: "Background", value: blueprint.background }),
+    /* @__PURE__ */ jsx5(KV, { label: "Is Raw", value: blueprint.is_raw }),
+    /* @__PURE__ */ jsx5(KV, { label: "Seed", value: blueprint.seed }),
+    /* @__PURE__ */ jsx5(KV, { label: "Images", value: (_c = executionData == null ? void 0 : executionData.nb_images) != null ? _c : blueprint.output_multiplicity })
+  ] });
+}
+function ImgGenExecutionData(_props) {
+  return null;
+}
+
+// src/graph/react/detail/sections/PipeExtractDetail.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function PipeExtractSection({
+  blueprint,
+  executionData
+}) {
+  const resolvedModel = executionData == null ? void 0 : executionData.resolved_model;
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(KV, { label: "Model", value: resolvedModel || blueprint.extract_choice }),
+    /* @__PURE__ */ jsx6(KV, { label: "Document Variable", value: blueprint.document_stuff_name }),
+    /* @__PURE__ */ jsx6(KV, { label: "Caption Images", value: blueprint.should_caption_images }),
+    /* @__PURE__ */ jsx6(KV, { label: "Max Page Images", value: blueprint.max_page_images }),
+    /* @__PURE__ */ jsx6(KV, { label: "Include Page Views", value: blueprint.should_include_page_views }),
+    /* @__PURE__ */ jsx6(KV, { label: "Page Views DPI", value: blueprint.page_views_dpi }),
+    /* @__PURE__ */ jsx6(KV, { label: "Render JS", value: blueprint.render_js }),
+    /* @__PURE__ */ jsx6(KV, { label: "Include Raw HTML", value: blueprint.include_raw_html }),
+    /* @__PURE__ */ jsx6(KV, { label: "Image Variable", value: blueprint.image_stuff_name })
+  ] });
+}
+function ExtractExecutionData(_props) {
+  return null;
+}
+
+// src/graph/react/detail/sections/PipeSearchDetail.tsx
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function PipeSearchSection({
+  blueprint,
+  executionData
+}) {
+  const resolvedModel = executionData == null ? void 0 : executionData.resolved_model;
+  const renderedQuery = executionData == null ? void 0 : executionData.rendered_query;
+  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsx7(KV, { label: "Model", value: resolvedModel || blueprint.search_choice }),
+    /* @__PURE__ */ jsx7(
+      PromptToggle,
+      {
+        label: "Search Query",
+        templateText: blueprint.prompt_blueprint.template,
+        renderedText: renderedQuery
+      }
+    ),
+    /* @__PURE__ */ jsx7(KV, { label: "Max Results", value: blueprint.max_results_override }),
+    /* @__PURE__ */ jsx7(KV, { label: "Include Images", value: blueprint.include_images_override }),
+    /* @__PURE__ */ jsx7(KV, { label: "Structured Output", value: blueprint.is_structured_output }),
+    /* @__PURE__ */ jsx7(KV, { label: "From Date", value: blueprint.from_date }),
+    /* @__PURE__ */ jsx7(KV, { label: "To Date", value: blueprint.to_date }),
+    blueprint.include_domains && blueprint.include_domains.length > 0 && /* @__PURE__ */ jsx7(KV, { label: "Include Domains", value: blueprint.include_domains.join(", ") }),
+    blueprint.exclude_domains && blueprint.exclude_domains.length > 0 && /* @__PURE__ */ jsx7(KV, { label: "Exclude Domains", value: blueprint.exclude_domains.join(", ") })
+  ] });
+}
+function SearchExecutionData(_props) {
+  return null;
+}
+
+// src/graph/react/detail/sections/PipeComposeDetail.tsx
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function formatLeafField(field) {
+  var _a, _b;
+  switch (field.method) {
+    case "from_var": {
+      const base = `\u2190 ${(_a = field.from_path) != null ? _a : "?"}`;
+      return field.list_to_dict_keyed_by ? `${base} (keyed by ${field.list_to_dict_keyed_by})` : base;
+    }
+    case "fixed":
+      return `= ${JSON.stringify(field.fixed_value)}`;
+    case "nested":
+      return "(nested construct)";
+    case "template":
+      return (_b = field.template) != null ? _b : "(empty template)";
+  }
+}
+var LONG_VALUE_THRESHOLD_CHARS = 60;
+function isLongValue(text) {
+  return text.length > LONG_VALUE_THRESHOLD_CHARS || text.includes("\n");
+}
+function FieldBlock({ label, value }) {
+  return /* @__PURE__ */ jsxs8("div", { className: "detail-field-block", children: [
+    /* @__PURE__ */ jsx8("div", { className: "detail-field-block-label", children: label }),
+    /* @__PURE__ */ jsx8("div", { className: "detail-field-block-value", children: value })
+  ] });
+}
+function ConstructFieldsBlock({
+  blueprint,
+  depth,
+  resolvedFields
+}) {
+  const leafFields = [];
+  const nestedFields = [];
+  const templateFields = [];
+  for (const [name, field] of Object.entries(blueprint.fields)) {
+    if (field.method === "template") {
+      templateFields.push([name, field]);
+    } else if (field.method === "nested") {
+      nestedFields.push([name, field]);
+    } else {
+      leafFields.push([name, field]);
+    }
+  }
+  const indentStyle = depth > 0 ? { paddingLeft: depth * 12 } : void 0;
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    leafFields.map(([name, field]) => {
+      const display = formatLeafField(field);
+      if (isLongValue(display)) {
+        return /* @__PURE__ */ jsx8("div", { style: indentStyle, children: /* @__PURE__ */ jsx8(FieldBlock, { label: name, value: display }) }, name);
+      }
+      return /* @__PURE__ */ jsx8("div", { style: indentStyle, children: /* @__PURE__ */ jsx8(KV, { label: name, value: display }) }, name);
+    }),
+    templateFields.map(([name, field]) => {
+      var _a;
+      const resolvedForField = resolvedFields == null ? void 0 : resolvedFields[name];
+      const renderedForField = typeof resolvedForField === "string" ? resolvedForField : void 0;
+      return /* @__PURE__ */ jsx8("div", { style: indentStyle, children: /* @__PURE__ */ jsx8(
+        PromptToggle,
+        {
+          label: `Template \u2014 ${name}`,
+          templateText: (_a = field.template) != null ? _a : null,
+          renderedText: renderedForField
+        }
+      ) }, name);
+    }),
+    nestedFields.map(([name, field]) => {
+      if (!field.nested) return null;
+      return /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            className: "detail-nested-header",
+            style: depth > 0 ? { paddingLeft: depth * 12 } : void 0,
+            children: [
+              /* @__PURE__ */ jsx8("span", { className: "detail-nested-header-name", children: name }),
+              /* @__PURE__ */ jsxs8("span", { className: "detail-nested-header-meta", children: [
+                "nested \xB7 ",
+                Object.keys(field.nested.fields).length,
+                " field",
+                Object.keys(field.nested.fields).length === 1 ? "" : "s"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          ConstructFieldsBlock,
+          {
+            blueprint: field.nested,
+            depth: depth + 1,
+            resolvedFields: resolvedFields && typeof resolvedFields[name] === "object" && resolvedFields[name] !== null ? resolvedFields[name] : null
+          }
+        )
+      ] }, name);
+    })
+  ] });
+}
+function PipeComposeSection({
+  blueprint,
+  executionData
+}) {
+  var _a;
+  const renderedText = executionData == null ? void 0 : executionData.rendered_text;
+  const composeMode = executionData == null ? void 0 : executionData.compose_mode;
+  const resolvedFields = (_a = executionData == null ? void 0 : executionData.resolved_fields) != null ? _a : null;
+  const constructBlueprint = blueprint.construct_blueprint;
+  const hasConstruct = constructBlueprint !== null && Object.keys(constructBlueprint.fields).length > 0;
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    /* @__PURE__ */ jsx8(KV, { label: "Mode", value: composeMode || (hasConstruct ? "construct" : "template") }),
+    /* @__PURE__ */ jsx8(KV, { label: "Category", value: blueprint.category }),
+    /* @__PURE__ */ jsx8(KV, { label: "Templating Style", value: blueprint.templating_style }),
+    blueprint.template && /* @__PURE__ */ jsx8(
+      PromptToggle,
+      {
+        label: "Template",
+        templateText: blueprint.template,
+        renderedText
+      }
+    ),
+    hasConstruct && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+      /* @__PURE__ */ jsx8("div", { className: "detail-section-label", children: "FIELDS" }),
+      /* @__PURE__ */ jsx8(
+        ConstructFieldsBlock,
+        {
+          blueprint: constructBlueprint,
+          depth: 0,
+          resolvedFields
+        }
+      )
+    ] })
+  ] });
+}
+function ComposeExecutionData(_props) {
+  return null;
+}
+
+// src/graph/react/detail/sections/PipeConditionDetail.tsx
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function PipeConditionSection({
+  blueprint,
+  executionData
+}) {
+  const evaluatedExpression = executionData == null ? void 0 : executionData.evaluated_expression;
+  const selectedOutcome = executionData == null ? void 0 : executionData.selected_outcome;
+  return /* @__PURE__ */ jsxs9(Fragment6, { children: [
+    /* @__PURE__ */ jsx9(PromptBlock, { label: "Expression", text: blueprint.expression }),
+    evaluatedExpression && /* @__PURE__ */ jsx9(KV, { label: "Expression Result", value: evaluatedExpression }),
+    /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsx9("div", { className: "detail-section-label", children: "Outcomes" }),
+      Object.entries(blueprint.outcome_map).map(([outcome, pipeCode]) => /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          className: "detail-kv-row",
+          style: selectedOutcome === pipeCode ? { background: "rgba(80,250,123,0.08)" } : void 0,
+          children: [
+            /* @__PURE__ */ jsx9("span", { className: "detail-kv-key", children: outcome }),
+            /* @__PURE__ */ jsx9("span", { className: "detail-kv-value", style: selectedOutcome === pipeCode ? { color: "#50FA7B" } : void 0, children: pipeCode })
+          ]
+        },
+        outcome
+      )),
+      /* @__PURE__ */ jsxs9("div", { className: "detail-kv-row", children: [
+        /* @__PURE__ */ jsx9("span", { className: "detail-kv-key", children: "default" }),
+        /* @__PURE__ */ jsx9("span", { className: "detail-kv-value", children: blueprint.default_outcome })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9(KV, { label: "Alias Expression To", value: blueprint.add_alias_from_expression_to })
+  ] });
+}
+function ConditionExecutionData(_props) {
+  return null;
+}
+
+// src/graph/react/detail/sections/PipeSequenceDetail.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function PipeSequenceSection({
+  blueprint
+}) {
+  return /* @__PURE__ */ jsxs10("div", { children: [
+    /* @__PURE__ */ jsx10("div", { className: "detail-section-label", children: "Steps" }),
+    /* @__PURE__ */ jsx10("div", { className: "detail-steps-list", children: blueprint.sequential_sub_pipes.map((step, idx) => /* @__PURE__ */ jsxs10("div", { className: "detail-step-item", children: [
+      /* @__PURE__ */ jsx10("span", { className: "detail-step-index", children: idx + 1 }),
+      /* @__PURE__ */ jsx10("span", { className: "detail-step-code", children: step.pipe_code }),
+      step.output_name && /* @__PURE__ */ jsxs10("span", { className: "detail-io-concept", children: [
+        "-> ",
+        step.output_name
+      ] })
+    ] }, idx)) })
+  ] });
+}
+function SequenceExecutionData(_props) {
+  return null;
+}
+
+// src/graph/react/detail/sections/PipeParallelDetail.tsx
+import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function PipeParallelSection({
+  blueprint
+}) {
+  return /* @__PURE__ */ jsxs11(Fragment7, { children: [
+    /* @__PURE__ */ jsxs11("div", { children: [
+      /* @__PURE__ */ jsx11("div", { className: "detail-section-label", children: "Branches" }),
+      /* @__PURE__ */ jsx11("div", { className: "detail-steps-list", children: blueprint.parallel_sub_pipes.map((branch, idx) => /* @__PURE__ */ jsxs11("div", { className: "detail-step-item", children: [
+        /* @__PURE__ */ jsx11("span", { className: "detail-step-code", children: branch.pipe_code }),
+        branch.output_name && /* @__PURE__ */ jsxs11("span", { className: "detail-io-concept", children: [
+          "-> ",
+          branch.output_name
+        ] })
+      ] }, idx)) })
+    ] }),
+    /* @__PURE__ */ jsx11(KV, { label: "Add Each Output", value: blueprint.add_each_output }),
+    /* @__PURE__ */ jsx11(KV, { label: "Combined Output", value: blueprint.combined_output })
+  ] });
+}
+function ParallelExecutionData(_props) {
+  return null;
+}
+
+// src/graph/react/detail/sections/PipeBatchDetail.tsx
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+function PipeBatchSection({
+  blueprint,
+  executionData
+}) {
+  const itemCount = executionData == null ? void 0 : executionData.item_count;
+  return /* @__PURE__ */ jsxs12(Fragment8, { children: [
+    /* @__PURE__ */ jsx12(KV, { label: "Branch Pipe", value: blueprint.branch_pipe_code }),
+    /* @__PURE__ */ jsx12(KV, { label: "Input List Variable", value: blueprint.batch_params.input_list_stuff_name }),
+    /* @__PURE__ */ jsx12(KV, { label: "Input Item Variable", value: blueprint.batch_params.input_item_stuff_name }),
+    itemCount != null && /* @__PURE__ */ jsx12(KV, { label: "Items Processed", value: itemCount })
+  ] });
+}
+function BatchExecutionData(_props) {
+  return null;
+}
+
+// src/graph/react/detail/PipeDetailPanel.tsx
+import { Fragment as Fragment9, jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+var PIPE_TYPE_BADGES = {
+  PipeLLM: "LLM",
+  PipeExtract: "Extract",
+  PipeCompose: "Compose",
+  PipeImgGen: "ImgGen",
+  PipeSearch: "Search",
+  PipeFunc: "Func",
+  PipeSequence: "Seq",
+  PipeParallel: "Par",
+  PipeCondition: "Cond",
+  PipeBatch: "Batch"
+};
+var CONTROLLER_TYPES = /* @__PURE__ */ new Set([
+  "PipeSequence",
+  "PipeParallel",
+  "PipeCondition",
+  "PipeBatch"
+]);
+var STATUS_COLORS = {
+  succeeded: "#50FA7B",
+  failed: "#FF5555",
+  running: "#8BE9FD",
+  scheduled: "#6272a4",
+  skipped: "#6272a4"
+};
+function PipeDetailPanel({ node, spec, onConceptClick }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const pipeType = (_a = node.pipe_type) != null ? _a : "PipeFunc";
+  const isController = CONTROLLER_TYPES.has(pipeType);
+  const badge = (_b = PIPE_TYPE_BADGES[pipeType]) != null ? _b : pipeType;
+  const status = (_c = node.status) != null ? _c : "scheduled";
+  const statusColor = (_d = STATUS_COLORS[status]) != null ? _d : "#6272a4";
+  const blueprint = React5.useMemo(() => {
+    var _a2, _b2;
+    if (!node.pipe_code || !spec.pipe_registry) return void 0;
+    const directKey = `${(_b2 = (_a2 = spec.pipeline_ref) == null ? void 0 : _a2.domain) != null ? _b2 : ""}.${node.pipe_code}`;
+    const direct = getPipeBlueprint(spec, directKey);
+    if (direct) return direct;
+    for (const [ref, pipe] of Object.entries(spec.pipe_registry)) {
+      if (ref.endsWith(`.${node.pipe_code}`)) return pipe;
+    }
+    return void 0;
+  }, [node.pipe_code, spec]);
+  const inputs = (_f = (_e = node.io) == null ? void 0 : _e.inputs) != null ? _f : [];
+  const outputs = (_h = (_g = node.io) == null ? void 0 : _g.outputs) != null ? _h : [];
+  const description = (_i = blueprint == null ? void 0 : blueprint.description) != null ? _i : node.description;
+  return /* @__PURE__ */ jsxs13(Fragment9, { children: [
+    /* @__PURE__ */ jsxs13("div", { className: "detail-sticky-header", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "detail-header", children: [
+        /* @__PURE__ */ jsx13("span", { className: `detail-badge ${isController ? "detail-badge--controller" : "detail-badge--operator"}`, children: badge }),
+        /* @__PURE__ */ jsx13("span", { className: `detail-pipe-code ${isController ? "detail-pipe-code--controller" : ""}`, children: (_j = node.pipe_code) != null ? _j : "unknown" })
+      ] }),
+      /* @__PURE__ */ jsxs13("div", { className: "detail-status", children: [
+        /* @__PURE__ */ jsx13("span", { className: "detail-status-dot", style: { background: statusColor } }),
+        /* @__PURE__ */ jsx13("span", { className: "detail-status-label", style: { color: statusColor }, children: status }),
+        ((_k = node.timing) == null ? void 0 : _k.duration) != null && /* @__PURE__ */ jsx13("span", { className: "detail-duration", children: formatDuration(node.timing.duration) })
+      ] }),
+      description && /* @__PURE__ */ jsx13("div", { className: "detail-description", children: description }),
+      inputs.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Inputs" }),
+        /* @__PURE__ */ jsx13("div", { className: "detail-io-list", children: inputs.map((input, idx) => {
+          var _a2;
+          return /* @__PURE__ */ jsxs13(
+            "div",
+            {
+              className: "detail-io-pill",
+              style: { cursor: input.concept && onConceptClick ? "pointer" : void 0 },
+              onClick: () => input.concept && (onConceptClick == null ? void 0 : onConceptClick(input.concept)),
+              children: [
+                /* @__PURE__ */ jsx13("span", { className: "detail-io-name", children: (_a2 = input.name) != null ? _a2 : "unnamed" }),
+                input.concept && /* @__PURE__ */ jsx13("span", { className: "detail-io-concept", children: input.concept })
+              ]
+            },
+            idx
+          );
+        }) })
+      ] }),
+      outputs.length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
+        /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Output" }),
+        /* @__PURE__ */ jsx13("div", { className: "detail-io-list", children: outputs.map((output, idx) => {
+          var _a2;
+          return /* @__PURE__ */ jsxs13(
+            "div",
+            {
+              className: "detail-io-pill",
+              style: { cursor: output.concept && onConceptClick ? "pointer" : void 0 },
+              onClick: () => output.concept && (onConceptClick == null ? void 0 : onConceptClick(output.concept)),
+              children: [
+                /* @__PURE__ */ jsx13("span", { className: "detail-io-name", children: (_a2 = output.name) != null ? _a2 : "unnamed" }),
+                output.concept && /* @__PURE__ */ jsx13("span", { className: "detail-io-concept", children: output.concept })
+              ]
+            },
+            idx
+          );
+        }) })
+      ] }),
+      (inputs.length > 0 || outputs.length > 0) && /* @__PURE__ */ jsx13("div", { style: { borderTop: "1px solid rgba(255,255,255,0.06)", margin: "4px 0" } })
+    ] }),
+    blueprint && /* @__PURE__ */ jsx13(BlueprintSection, { blueprint, executionData: node.execution_data }),
+    node.execution_data && Object.keys(node.execution_data).length > 0 && /* @__PURE__ */ jsx13(ExecutionDataSection, { executionData: node.execution_data, pipeType }),
+    node.error && /* @__PURE__ */ jsxs13("div", { className: "detail-error", children: [
+      /* @__PURE__ */ jsx13("div", { className: "detail-error-type", children: node.error.error_type }),
+      /* @__PURE__ */ jsx13("div", { className: "detail-error-message", children: node.error.message }),
+      node.error.stack && /* @__PURE__ */ jsx13("div", { className: "detail-error-stack", children: node.error.stack })
+    ] }),
+    node.metrics && Object.keys(node.metrics).length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
+      /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Metrics" }),
+      Object.entries(node.metrics).map(([key, value]) => /* @__PURE__ */ jsx13(KV, { label: key, value: typeof value === "number" ? value.toLocaleString() : String(value) }, key))
+    ] }),
+    node.tags && Object.keys(node.tags).length > 0 && /* @__PURE__ */ jsxs13("div", { children: [
+      /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Tags" }),
+      /* @__PURE__ */ jsx13("div", { className: "detail-tags", children: Object.entries(node.tags).map(([key, value]) => /* @__PURE__ */ jsxs13("span", { className: "detail-tag", children: [
+        /* @__PURE__ */ jsxs13("span", { className: "detail-tag-key", children: [
+          key,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsx13("span", { className: "detail-tag-value", children: value })
+      ] }, key)) })
+    ] }),
+    !blueprint && /* @__PURE__ */ jsx13("div", { className: "detail-not-available", children: "Blueprint not available" })
+  ] });
+}
+function BlueprintSection({
+  blueprint,
+  executionData
+}) {
+  switch (blueprint.type) {
+    case "PipeLLM":
+      return /* @__PURE__ */ jsx13(PipeLLMSection, { blueprint, executionData });
+    case "PipeImgGen":
+      return /* @__PURE__ */ jsx13(PipeImgGenSection, { blueprint, executionData });
+    case "PipeCompose":
+      return /* @__PURE__ */ jsx13(PipeComposeSection, { blueprint, executionData });
+    case "PipeExtract":
+      return /* @__PURE__ */ jsx13(PipeExtractSection, { blueprint, executionData });
+    case "PipeSearch":
+      return /* @__PURE__ */ jsx13(PipeSearchSection, { blueprint, executionData });
+    case "PipeSequence":
+      return /* @__PURE__ */ jsx13(PipeSequenceSection, { blueprint, executionData });
+    case "PipeParallel":
+      return /* @__PURE__ */ jsx13(PipeParallelSection, { blueprint, executionData });
+    case "PipeCondition":
+      return /* @__PURE__ */ jsx13(PipeConditionSection, { blueprint, executionData });
+    case "PipeBatch":
+      return /* @__PURE__ */ jsx13(PipeBatchSection, { blueprint, executionData });
+    case "PipeFunc":
+      return null;
+  }
+}
+function ExecutionDataSection({
+  executionData,
+  pipeType
+}) {
+  switch (pipeType) {
+    case "PipeLLM":
+      return /* @__PURE__ */ jsx13(LLMExecutionData, { data: executionData });
+    case "PipeImgGen":
+      return /* @__PURE__ */ jsx13(ImgGenExecutionData, { data: executionData });
+    case "PipeExtract":
+      return /* @__PURE__ */ jsx13(ExtractExecutionData, { data: executionData });
+    case "PipeSearch":
+      return /* @__PURE__ */ jsx13(SearchExecutionData, { data: executionData });
+    case "PipeCompose":
+      return /* @__PURE__ */ jsx13(ComposeExecutionData, { data: executionData });
+    case "PipeCondition":
+      return /* @__PURE__ */ jsx13(ConditionExecutionData, { data: executionData });
+    case "PipeSequence":
+      return /* @__PURE__ */ jsx13(SequenceExecutionData, { data: executionData });
+    case "PipeParallel":
+      return /* @__PURE__ */ jsx13(ParallelExecutionData, { data: executionData });
+    case "PipeBatch":
+      return /* @__PURE__ */ jsx13(BatchExecutionData, { data: executionData });
+    default:
+      return /* @__PURE__ */ jsx13(GenericExecutionData, { data: executionData });
+  }
+}
+function GenericExecutionData({ data }) {
+  const entries = Object.entries(data);
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsxs13(Fragment9, { children: [
+    /* @__PURE__ */ jsx13("div", { className: "detail-section-label", children: "Execution" }),
+    entries.map(([key, value]) => /* @__PURE__ */ jsx13(KV, { label: key, value: String(value) }, key))
+  ] });
+}
+
+// src/graph/react/detail/ConceptDetailPanel.tsx
+import { Fragment as Fragment10, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+function ConceptDetailPanel({ concept, ioData, isDryRun, resolveStorageUrl }) {
+  return /* @__PURE__ */ jsxs14(Fragment10, { children: [
+    /* @__PURE__ */ jsxs14("div", { className: "detail-header", children: [
+      /* @__PURE__ */ jsx14("span", { className: "detail-concept-code", children: concept.code }),
+      /* @__PURE__ */ jsx14("span", { className: "detail-concept-domain", children: concept.domain_code })
+    ] }),
+    concept.description && /* @__PURE__ */ jsx14("div", { className: "detail-description", children: concept.description }),
+    concept.refines && /* @__PURE__ */ jsxs14("div", { className: "detail-refines", children: [
+      "refines ",
+      /* @__PURE__ */ jsx14("span", { className: "detail-refines-code", children: concept.refines })
+    ] }),
+    concept.json_schema ? /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Structure" }),
+      /* @__PURE__ */ jsx14(SchemaTable, { schema: concept.json_schema, isDryRun })
+    ] }) : /* @__PURE__ */ jsx14("div", { className: "detail-not-available", children: "Schema not available" }),
+    ioData && !isDryRun && /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx14("div", { className: "detail-section-label", children: "Data" }),
+      /* @__PURE__ */ jsx14(StuffViewer, { stuff: toStuffViewerData(ioData), resolveStorageUrl })
+    ] })
+  ] });
+}
+function SchemaTable({
+  schema,
+  isDryRun
+}) {
+  var _a;
+  const properties = schema.properties;
+  const required = new Set((_a = schema.required) != null ? _a : []);
+  if (!properties || Object.keys(properties).length === 0) {
+    return /* @__PURE__ */ jsx14("div", { className: "detail-not-available", children: "No fields defined" });
+  }
+  const fields = Object.entries(properties);
+  const visibleFields = isDryRun ? fields.filter(([name]) => required.has(name)) : fields;
+  return /* @__PURE__ */ jsxs14("table", { className: "detail-schema-table", children: [
+    /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs14("tr", { children: [
+      /* @__PURE__ */ jsx14("th", { children: "Field" }),
+      /* @__PURE__ */ jsx14("th", { children: "Type" }),
+      /* @__PURE__ */ jsx14("th", {}),
+      /* @__PURE__ */ jsx14("th", { children: "Description" })
+    ] }) }),
+    /* @__PURE__ */ jsx14("tbody", { children: visibleFields.map(([fieldName, fieldSchema]) => {
+      var _a2;
+      return /* @__PURE__ */ jsxs14("tr", { children: [
+        /* @__PURE__ */ jsx14("td", { className: "detail-schema-field", children: fieldName }),
+        /* @__PURE__ */ jsx14("td", { className: "detail-schema-type", children: extractType(fieldSchema) }),
+        /* @__PURE__ */ jsx14("td", { children: required.has(fieldName) && /* @__PURE__ */ jsx14("span", { className: "detail-schema-required", children: "req" }) }),
+        /* @__PURE__ */ jsx14("td", { children: (_a2 = fieldSchema.description) != null ? _a2 : "" })
+      ] }, fieldName);
+    }) })
+  ] });
+}
+function extractType(schema) {
+  var _a;
+  if (schema.type) return String(schema.type);
+  if (schema.anyOf) return "union";
+  if (schema.allOf) return "all";
+  if (schema.$ref) {
+    const ref = String(schema.$ref);
+    return (_a = ref.split("/").pop()) != null ? _a : "ref";
+  }
+  return "unknown";
+}
+function toStuffViewerData(ioData) {
+  var _a;
+  if ("digest" in ioData) return ioData;
+  return {
+    digest: (_a = ioData.digest) != null ? _a : "",
+    name: ioData.name,
+    concept: ioData.concept,
+    contentType: ioData.content_type,
+    data: ioData.data,
+    dataText: ioData.data_text,
+    dataHtml: ioData.data_html
+  };
+}
+
+// src/graph/react/rfTypes.ts
+function toAppNodes(nodes) {
+  return nodes.map((n) => ({
+    id: n.id,
+    type: n.type,
+    data: n.data,
+    position: n.position,
+    style: n.style,
+    sourcePosition: n.sourcePosition,
+    targetPosition: n.targetPosition,
+    parentId: n.parentId,
+    extent: n.extent,
+    selected: n.selected
+  }));
+}
+function toAppEdges(edges) {
+  return edges.map((e) => ({
+    id: e.id,
+    source: e.source,
+    target: e.target,
+    type: e.type,
+    animated: e.animated,
+    label: e.label,
+    labelStyle: e.labelStyle,
+    labelBgStyle: e.labelBgStyle,
+    labelBgPadding: e.labelBgPadding,
+    labelBgBorderRadius: e.labelBgBorderRadius,
+    style: e.style,
+    markerEnd: e.markerEnd
+  }));
+}
+
+// src/graph/react/viewer/renderLabel.tsx
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+function renderLabel(desc) {
+  if (desc.kind === "pipe") {
+    return /* @__PURE__ */ jsx15(
+      "div",
+      {
+        style: {
+          padding: "10px 14px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "2px",
+          textAlign: "center",
+          width: "100%",
+          boxSizing: "border-box",
+          minWidth: 0
+        },
+        title: desc.label,
+        children: /* @__PURE__ */ jsx15(
+          "span",
+          {
+            style: {
+              fontFamily: "var(--font-mono)",
+              fontSize: "13px",
+              fontWeight: 600,
+              color: "var(--color-pipe-text)",
+              maxWidth: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: desc.label
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      style: {
+        padding: "8px 24px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "2px",
+        textAlign: "center",
+        width: "100%",
+        boxSizing: "border-box",
+        minWidth: 0
+      },
+      title: desc.concept ? `${desc.label}: ${desc.concept}` : desc.label,
+      children: [
+        /* @__PURE__ */ jsx15(
+          "span",
+          {
+            style: {
+              fontFamily: "var(--font-mono)",
+              fontSize: "12px",
+              fontWeight: 600,
+              color: "var(--color-stuff-text)",
+              maxWidth: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: desc.label
+          }
+        ),
+        desc.concept && /* @__PURE__ */ jsx15(
+          "span",
+          {
+            style: {
+              fontSize: "14px",
+              color: "var(--color-stuff-text-dim)",
+              maxWidth: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            children: desc.concept
+          }
+        )
+      ]
+    }
+  );
+}
+function hydrateLabels(nodes) {
+  return nodes.map((n) => {
+    if (!n.data.labelDescriptor) return n;
+    return __spreadProps(__spreadValues({}, n), {
+      data: __spreadProps(__spreadValues({}, n.data), {
+        label: renderLabel(n.data.labelDescriptor)
+      })
+    });
+  });
+}
+
+// src/graph/react/viewer/GraphToolbar.tsx
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+var ARROW_RIGHT_ICON = /* @__PURE__ */ jsxs16("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx16("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+  /* @__PURE__ */ jsx16("polyline", { points: "12 5 19 12 12 19" })
+] });
+var ARROW_DOWN_ICON = /* @__PURE__ */ jsxs16("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx16("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+  /* @__PURE__ */ jsx16("polyline", { points: "19 12 12 19 5 12" })
+] });
+var MINUS_ICON = /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx16("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) });
+var PLUS_ICON = /* @__PURE__ */ jsxs16("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx16("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+  /* @__PURE__ */ jsx16("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+] });
+var FIT_VIEW_ICON = /* @__PURE__ */ jsxs16("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx16("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ jsx16("polyline", { points: "9 21 3 21 3 15" }),
+  /* @__PURE__ */ jsx16("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+  /* @__PURE__ */ jsx16("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+] });
+var BOXES_ICON = /* @__PURE__ */ jsxs16("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx16("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
+  /* @__PURE__ */ jsx16("path", { d: "m7 16.5-4.74-2.85" }),
+  /* @__PURE__ */ jsx16("path", { d: "m7 16.5 5-3" }),
+  /* @__PURE__ */ jsx16("path", { d: "M7 16.5v5.17" }),
+  /* @__PURE__ */ jsx16("path", { d: "M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" }),
+  /* @__PURE__ */ jsx16("path", { d: "m17 16.5-5-3" }),
+  /* @__PURE__ */ jsx16("path", { d: "m17 16.5 4.74-2.85" }),
+  /* @__PURE__ */ jsx16("path", { d: "M17 16.5v5.17" }),
+  /* @__PURE__ */ jsx16("path", { d: "M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" }),
+  /* @__PURE__ */ jsx16("path", { d: "M12 8 7.26 5.15" }),
+  /* @__PURE__ */ jsx16("path", { d: "m12 8 4.74-2.85" }),
+  /* @__PURE__ */ jsx16("path", { d: "M12 13.5V8" })
+] });
+function GraphToolbar({
+  direction,
+  onDirectionChange,
+  showControllers,
+  onShowControllersChange,
+  onZoomIn,
+  onZoomOut,
+  onFitView,
+  rightOffset = 0
+}) {
+  const isVertical = direction === GRAPH_DIRECTION.TB || direction === GRAPH_DIRECTION.BT;
+  const directionLabel = isVertical ? "Switch to horizontal layout" : "Switch to vertical layout";
+  const controllersLabel = showControllers ? "Hide pipe controllers" : "Show pipe controllers \u2014 groups pipes by their controlling pipe";
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      className: "graph-toolbar",
+      style: { right: `${rightOffset + 8}px` },
+      children: [
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: "graph-toolbar-btn",
+            onClick: () => onDirectionChange(isVertical ? GRAPH_DIRECTION.LR : GRAPH_DIRECTION.TB),
+            title: directionLabel,
+            "aria-label": directionLabel,
+            children: isVertical ? ARROW_RIGHT_ICON : ARROW_DOWN_ICON
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: `graph-toolbar-btn${showControllers ? " graph-toolbar-btn--active" : ""}`,
+            onClick: () => onShowControllersChange(!showControllers),
+            title: controllersLabel,
+            "aria-label": controllersLabel,
+            children: BOXES_ICON
+          }
+        ),
+        (onZoomOut || onZoomIn || onFitView) && /* @__PURE__ */ jsx16("div", { className: "graph-toolbar-separator" }),
+        onZoomOut && /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: "graph-toolbar-btn",
+            onClick: onZoomOut,
+            title: "Zoom out",
+            "aria-label": "Zoom out",
+            children: MINUS_ICON
+          }
+        ),
+        onZoomIn && /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: "graph-toolbar-btn",
+            onClick: onZoomIn,
+            title: "Zoom in",
+            "aria-label": "Zoom in",
+            children: PLUS_ICON
+          }
+        ),
+        onFitView && /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: "graph-toolbar-btn",
+            onClick: onFitView,
+            title: "Fit view",
+            "aria-label": "Fit view",
+            children: FIT_VIEW_ICON
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/graph/react/nodes/controller/ControllerGroupNode.tsx
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+var CONTROLLER_CONFIG = {
+  PipeSequence: { badge: "Sequence", icon: "\u2192" },
+  PipeParallel: { badge: "Parallel", icon: "//" },
+  PipeCondition: { badge: "Condition", icon: "\u25C7" },
+  PipeBatch: { badge: "Batch", icon: "\u2261" }
+};
+function getControllerConfig(pipeType) {
+  if (!pipeType) return { badge: "", icon: "" };
+  return CONTROLLER_CONFIG[pipeType];
+}
+function getControllerModifier(pipeType) {
+  if (!pipeType) return "";
+  const key = pipeType.replace("Pipe", "").toLowerCase();
+  return `controller-group--${key}`;
+}
+function ControllerGroupNode({ data }) {
+  var _a, _b;
+  const config = getControllerConfig(data.pipeType);
+  const modifier = getControllerModifier(data.pipeType);
+  const isCollapsible = (data.pipeType === "PipeParallel" || data.pipeType === "PipeBatch") && ((_a = data.childCount) != null ? _a : 0) > MAX_VISIBLE_CONTROLLER_CHILDREN;
+  const hiddenCount = isCollapsible ? ((_b = data.childCount) != null ? _b : 0) - MAX_VISIBLE_CONTROLLER_CHILDREN : 0;
+  return /* @__PURE__ */ jsxs17("div", { className: `controller-group-node ${modifier}`, children: [
+    /* @__PURE__ */ jsxs17("div", { className: "controller-group-header", children: [
+      /* @__PURE__ */ jsx17("span", { className: "controller-group-icon", children: config.icon }),
+      /* @__PURE__ */ jsx17("span", { className: "controller-group-badge", children: config.badge }),
+      data.label && /* @__PURE__ */ jsx17("span", { className: "controller-group-label", children: data.label })
+    ] }),
+    isCollapsible && /* @__PURE__ */ jsx17(
+      "button",
+      {
+        className: "controller-group-collapse",
+        onClick: (e) => {
+          var _a2;
+          e.stopPropagation();
+          (_a2 = data.onToggleCollapse) == null ? void 0 : _a2.call(data);
+        },
+        children: data.isCollapsed ? `+${hiddenCount} hidden` : "collapse"
+      }
+    )
+  ] });
+}
+var controllerNodeTypes = { controllerGroup: ControllerGroupNode };
+
+// src/graph/react/nodes/pipe/PipeCardNode.tsx
+import { Handle, Position } from "@xyflow/react";
+
+// src/graph/react/nodes/pipe/PipeCardBase.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+var PIPE_TYPE_BADGES2 = {
+  PipeLLM: "LLM",
+  PipeExtract: "Extract",
+  PipeCompose: "Compose",
+  PipeImgGen: "ImgGen",
+  PipeSearch: "Search",
+  PipeFunc: "Func"
+};
+var STATUS_CONFIG = {
+  succeeded: { color: "#50FA7B", label: "Succeeded" },
+  failed: { color: "#FF5555", label: "Failed" },
+  running: { color: "#8BE9FD", label: "Running" },
+  scheduled: { color: "#6272a4", label: "Scheduled" },
+  skipped: { color: "#6272a4", label: "Skipped" }
+};
+var MAX_VISIBLE_INPUTS = 4;
+function getBadge(pipeType) {
+  return PIPE_TYPE_BADGES2[pipeType];
+}
+function PipeCardBase({ data, children }) {
+  var _a;
+  const badge = getBadge(data.pipeType);
+  const statusConfig = (_a = STATUS_CONFIG[data.status]) != null ? _a : STATUS_CONFIG.scheduled;
+  const isRunning = data.status === "running";
+  const [inputsExpanded, setInputsExpanded] = useState2(false);
+  const hasMany = data.inputs.length > MAX_VISIBLE_INPUTS;
+  const visibleInputs = hasMany && !inputsExpanded ? data.inputs.slice(0, MAX_VISIBLE_INPUTS) : data.inputs;
+  const hiddenCount = data.inputs.length - MAX_VISIBLE_INPUTS;
+  const dirClass = data.direction === "TB" ? "pipe-card--tb" : "pipe-card--lr";
+  return /* @__PURE__ */ jsxs18("div", { className: `pipe-card ${dirClass}`, children: [
+    /* @__PURE__ */ jsxs18("div", { className: "pipe-card-header", children: [
+      /* @__PURE__ */ jsx18("span", { className: "pipe-card-badge", children: badge }),
+      /* @__PURE__ */ jsx18("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
+      /* @__PURE__ */ jsx18(
+        "span",
+        {
+          className: "pipe-card-status",
+          style: { color: statusConfig.color },
+          title: statusConfig.label,
+          children: /* @__PURE__ */ jsx18(
+            "span",
+            {
+              className: `pipe-card-status-dot ${isRunning ? "pipe-card-status-dot--pulse" : ""}`,
+              style: { background: statusConfig.color }
+            }
+          )
+        }
+      )
+    ] }),
+    data.description && /* @__PURE__ */ jsx18("span", { className: "pipe-card-description", title: data.description, children: data.description }),
+    data.inputs.length > 0 && /* @__PURE__ */ jsxs18("div", { className: "pipe-card-io", children: [
+      /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-label", children: "INPUTS" }),
+      /* @__PURE__ */ jsxs18("div", { className: "pipe-card-io-pills", children: [
+        visibleInputs.map((input) => /* @__PURE__ */ jsxs18(
+          "span",
+          {
+            className: "pipe-card-io-pill",
+            title: `${input.name}: ${input.concept}`,
+            children: [
+              /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-pill-name", children: input.name }),
+              /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-pill-concept", children: input.concept })
+            ]
+          },
+          input.name
+        )),
+        hasMany && /* @__PURE__ */ jsx18(
+          "button",
+          {
+            className: "pipe-card-io-more",
+            onClick: (e) => {
+              e.stopPropagation();
+              setInputsExpanded((v) => !v);
+            },
+            children: inputsExpanded ? "show less" : `+${hiddenCount} more`
+          }
+        )
+      ] })
+    ] }),
+    data.outputs.length > 0 && /* @__PURE__ */ jsxs18("div", { className: "pipe-card-io", children: [
+      /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-label", children: "OUTPUT" }),
+      /* @__PURE__ */ jsx18("div", { className: "pipe-card-io-pills", children: data.outputs.map((output) => /* @__PURE__ */ jsxs18(
+        "span",
+        {
+          className: "pipe-card-io-pill",
+          title: `${output.name}: ${output.concept}`,
+          children: [
+            /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-pill-name", children: output.name }),
+            /* @__PURE__ */ jsx18("span", { className: "pipe-card-io-pill-concept", children: output.concept })
+          ]
+        },
+        output.name
+      )) })
+    ] }),
+    children
+  ] });
+}
+
+// src/graph/react/nodes/pipe/pipeCardRegistry.ts
+var PIPE_CARD_REGISTRY = {
+  PipeLLM: PipeCardBase,
+  PipeExtract: PipeCardBase,
+  PipeCompose: PipeCardBase,
+  PipeImgGen: PipeCardBase,
+  PipeSearch: PipeCardBase,
+  PipeFunc: PipeCardBase
+};
+function getPipeCardComponent(pipeType) {
+  return PIPE_CARD_REGISTRY[pipeType];
+}
+
+// src/graph/react/nodes/pipe/PipeCardNode.tsx
+import { Fragment as Fragment11, jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+function PipeCardNode({ data }) {
+  var _a;
+  const Card = (_a = getPipeCardComponent(data.pipeType)) != null ? _a : PipeCardBase;
+  return /* @__PURE__ */ jsx19(Card, { data });
+}
+function PipeCardRFNode({
+  data,
+  sourcePosition = Position.Bottom,
+  targetPosition = Position.Top
+}) {
+  const payload = data.pipeCardData;
+  if (!payload) return null;
+  return /* @__PURE__ */ jsxs19(Fragment11, { children: [
+    /* @__PURE__ */ jsx19(Handle, { type: "target", position: targetPosition }),
+    /* @__PURE__ */ jsx19(PipeCardNode, { data: payload }),
+    /* @__PURE__ */ jsx19(Handle, { type: "source", position: sourcePosition })
+  ] });
+}
+
+// src/graph/react/viewer/GraphViewer.tsx
+import { Fragment as Fragment12, jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+var nodeTypes = __spreadProps(__spreadValues({}, controllerNodeTypes), {
+  pipeCard: PipeCardRFNode
+});
+function StuffNodeDetail({
+  stuffData,
+  graphspec,
+  resolveStorageUrl
+}) {
+  const conceptInfo = stuffData.concept && graphspec ? resolveConceptRef(graphspec, stuffData.concept) : void 0;
+  return /* @__PURE__ */ jsx20(Fragment12, { children: conceptInfo ? /* @__PURE__ */ jsx20(
+    ConceptDetailPanel,
+    {
+      concept: conceptInfo,
+      ioData: stuffData,
+      resolveStorageUrl
+    }
+  ) : (
+    /* Fallback: just show the StuffViewer if no concept info */
+    /* @__PURE__ */ jsx20(StuffViewer, { stuff: stuffData, resolveStorageUrl })
+  ) });
+}
+function cloneCachedNodes(nodes) {
+  return nodes.map((n) => __spreadProps(__spreadValues({}, n), {
+    position: __spreadValues({}, n.position),
+    data: __spreadValues({}, n.data),
+    style: n.style ? __spreadValues({}, n.style) : void 0
+  }));
+}
+function applyStatusOverrides(nodes, statusMap) {
+  if (!statusMap || Object.keys(statusMap).length === 0) return nodes;
+  return nodes.map((node) => {
+    var _a;
+    const pipeCode = node.data.pipeCode;
+    if (!pipeCode || !Object.hasOwn(statusMap, pipeCode)) return node;
+    const newStatus = statusMap[pipeCode];
+    if (((_a = node.data.pipeCardData) == null ? void 0 : _a.status) === newStatus) return node;
+    return __spreadProps(__spreadValues({}, node), {
+      data: __spreadProps(__spreadValues({}, node.data), {
+        nodeData: node.data.nodeData ? __spreadProps(__spreadValues({}, node.data.nodeData), { status: newStatus }) : node.data.nodeData,
+        pipeCardData: node.data.pipeCardData ? __spreadProps(__spreadValues({}, node.data.pipeCardData), { status: newStatus }) : node.data.pipeCardData
+      })
+    });
+  });
+}
+function GraphViewer(props) {
+  const {
+    graphspec,
+    config = DEFAULT_GRAPH_CONFIG,
+    initialDirection,
+    initialShowControllers,
+    hideToolbar = false,
+    onNavigateToPipe,
+    onStuffNodeClick,
+    onReactFlowInit,
+    statusMap,
+    onNodeSelect,
+    onPaneClick,
+    renderDetailExtra,
+    resolveStorageUrl
+  } = props;
+  const [direction, setDirection] = React7.useState(
+    () => {
+      var _a, _b;
+      return (_b = (_a = initialDirection != null ? initialDirection : config.direction) != null ? _a : DEFAULT_GRAPH_CONFIG.direction) != null ? _b : GRAPH_DIRECTION.TB;
+    }
+  );
+  const [showControllers, setShowControllers] = React7.useState(
+    () => {
+      var _a, _b;
+      return (_b = (_a = initialShowControllers != null ? initialShowControllers : config.showControllers) != null ? _a : DEFAULT_GRAPH_CONFIG.showControllers) != null ? _b : false;
+    }
+  );
+  const containerRef = React7.useRef(null);
+  const [detailSelection, setDetailSelection] = React7.useState(null);
+  const [conceptOverride, setConceptOverride] = React7.useState(null);
+  const {
+    width: panelWidth,
+    isDragging: isPanelDragging,
+    handleMouseDown: onResizeMouseDown
+  } = useResizable({ defaultWidth: 380, minWidth: 280, maxWidth: 800, containerRef });
+  React7.useEffect(() => {
+    setDetailSelection(null);
+    setConceptOverride(null);
+  }, [graphspec]);
+  React7.useEffect(() => {
+    var _a;
+    const el = containerRef.current;
+    if (!el) return;
+    const palette = (_a = config.paletteColors) != null ? _a : DEFAULT_GRAPH_CONFIG.paletteColors;
+    if (!palette) return;
+    for (const [cssVar, value] of Object.entries(palette)) {
+      el.style.setProperty(cssVar, value);
+    }
+    return () => {
+      for (const cssVar of Object.keys(palette)) {
+        el.style.removeProperty(cssVar);
+      }
+    };
+  }, [config.paletteColors]);
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const reactFlowRef = React7.useRef(null);
+  const initialDataRef = React7.useRef(null);
+  const layoutCacheRef = React7.useRef(null);
+  const [expandedControllers, setExpandedControllers] = React7.useState(/* @__PURE__ */ new Set());
+  const toggleCollapse = React7.useCallback((controllerId) => {
+    setExpandedControllers((prev) => {
+      const next = new Set(prev);
+      if (next.has(controllerId)) next.delete(controllerId);
+      else next.add(controllerId);
+      return next;
+    });
+  }, []);
+  const edgeType = config.edgeType || EDGE_TYPE.DEFAULT;
+  const layoutConfig = React7.useMemo(
+    () => ({ nodesep: config.nodesep, ranksep: config.ranksep }),
+    [config.nodesep, config.ranksep]
+  );
+  const showControllersRef = React7.useRef(showControllers);
+  showControllersRef.current = showControllers;
+  const directionRef = React7.useRef(direction);
+  directionRef.current = direction;
+  const layoutConfigRef = React7.useRef(layoutConfig);
+  layoutConfigRef.current = layoutConfig;
+  const initialZoomRef = React7.useRef(config.initialZoom);
+  initialZoomRef.current = config.initialZoom;
+  const panToTopRef = React7.useRef(config.panToTop);
+  panToTopRef.current = config.panToTop;
+  const expandedRef = React7.useRef(expandedControllers);
+  expandedRef.current = expandedControllers;
+  const toggleCollapseRef = React7.useRef(toggleCollapse);
+  toggleCollapseRef.current = toggleCollapse;
+  const statusMapRef = React7.useRef(statusMap);
+  statusMapRef.current = statusMap;
+  React7.useEffect(() => {
+    if (!initialDataRef.current) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const data = initialDataRef.current;
+        if (!data) return;
+        const relayouted = await getLayoutedElements(
+          data.nodes,
+          data.edges,
+          direction,
+          layoutConfig,
+          data._graphspec,
+          data._analysis
+        );
+        if (cancelled) return;
+        layoutCacheRef.current = {
+          nodes: relayouted.nodes,
+          edges: relayouted.edges,
+          controllerPositions: relayouted.controllerPositions
+        };
+        const withControllers = applyControllers(
+          cloneCachedNodes(relayouted.nodes),
+          relayouted.edges,
+          data._graphspec,
+          data._analysis,
+          showControllersRef.current,
+          expandedRef.current,
+          toggleCollapseRef.current,
+          relayouted.controllerPositions
+        );
+        setNodes(
+          applyStatusOverrides(
+            toAppNodes(hydrateLabels(withControllers.nodes)),
+            statusMapRef.current
+          )
+        );
+        setEdges(toAppEdges(withControllers.edges));
+        setTimeout(() => {
+          if (!cancelled && reactFlowRef.current) {
+            reactFlowRef.current.fitView({ padding: 0.1 });
+          }
+        }, 50);
+      } catch (err) {
+        console.error("[GraphViewer] ELK layout failed:", err);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [direction, layoutConfig]);
+  React7.useEffect(() => {
+    if (!layoutCacheRef.current || !initialDataRef.current) return;
+    const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
+    const cachedEdges = layoutCacheRef.current.edges;
+    const withControllers = applyControllers(
+      cachedNodes,
+      cachedEdges,
+      initialDataRef.current._graphspec,
+      initialDataRef.current._analysis,
+      showControllers,
+      expandedControllers,
+      toggleCollapse,
+      layoutCacheRef.current.controllerPositions
+    );
+    setNodes(
+      applyStatusOverrides(toAppNodes(hydrateLabels(withControllers.nodes)), statusMapRef.current)
+    );
+    setEdges(toAppEdges(withControllers.edges));
+  }, [showControllers, expandedControllers, toggleCollapse]);
+  React7.useEffect(() => {
+    if (!graphspec) {
+      initialDataRef.current = null;
+      layoutCacheRef.current = null;
+      setNodes([]);
+      setEdges([]);
+      return;
+    }
+    let cancelled = false;
+    setExpandedControllers(/* @__PURE__ */ new Set());
+    const { graphData, analysis } = buildGraph(graphspec, edgeType);
+    initialDataRef.current = {
+      nodes: graphData.nodes,
+      edges: graphData.edges,
+      _analysis: analysis,
+      _graphspec: graphspec
+    };
+    (async () => {
+      try {
+        const currentDirection = directionRef.current;
+        const currentLayoutConfig = layoutConfigRef.current;
+        const needsLayout = graphData.nodes.some(
+          (n) => !n.position || n.position.x === 0 && n.position.y === 0
+        );
+        const layouted = needsLayout ? await getLayoutedElements(
+          graphData.nodes,
+          graphData.edges,
+          currentDirection,
+          currentLayoutConfig,
+          graphspec,
+          analysis
+        ) : __spreadProps(__spreadValues({}, graphData), {
+          controllerPositions: {}
+        });
+        if (cancelled) return;
+        layoutCacheRef.current = {
+          nodes: layouted.nodes,
+          edges: layouted.edges,
+          controllerPositions: layouted.controllerPositions
+        };
+        const withControllers = applyControllers(
+          cloneCachedNodes(layouted.nodes),
+          layouted.edges,
+          graphspec,
+          analysis,
+          showControllersRef.current,
+          expandedRef.current,
+          toggleCollapseRef.current,
+          layouted.controllerPositions
+        );
+        setNodes(
+          applyStatusOverrides(
+            toAppNodes(hydrateLabels(withControllers.nodes)),
+            statusMapRef.current
+          )
+        );
+        setEdges(toAppEdges(withControllers.edges));
+        setTimeout(() => {
+          if (!cancelled && reactFlowRef.current) {
+            reactFlowRef.current.fitView({ padding: 0.1 });
+            if (initialZoomRef.current !== void 0 && initialZoomRef.current !== null) {
+              reactFlowRef.current.zoomTo(initialZoomRef.current);
+            }
+            if (panToTopRef.current) {
+              const vp = reactFlowRef.current.getViewport();
+              reactFlowRef.current.setViewport({ x: vp.x, y: 20, zoom: vp.zoom });
+            }
+          }
+        }, 100);
+      } catch (err) {
+        console.error("[GraphViewer] ELK layout failed:", err);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [graphspec, edgeType]);
+  React7.useEffect(() => {
+    if (!layoutCacheRef.current || !initialDataRef.current) return;
+    const cachedNodes = cloneCachedNodes(layoutCacheRef.current.nodes);
+    const cachedEdges = layoutCacheRef.current.edges;
+    const withControllers = applyControllers(
+      cachedNodes,
+      cachedEdges,
+      initialDataRef.current._graphspec,
+      initialDataRef.current._analysis,
+      showControllersRef.current,
+      expandedRef.current,
+      toggleCollapseRef.current,
+      layoutCacheRef.current.controllerPositions
+    );
+    setNodes(applyStatusOverrides(toAppNodes(hydrateLabels(withControllers.nodes)), statusMap));
+    setEdges(toAppEdges(withControllers.edges));
+  }, [statusMap]);
+  const onNodeClick = React7.useCallback(
+    (event, node) => {
+      var _a;
+      const nodeData = node.data;
+      onNodeSelect == null ? void 0 : onNodeSelect(node.id, nodeData, event);
+      if (nodeData.isController || nodeData.isPipe) {
+        const code = nodeData.pipeCode || nodeData.labelText;
+        if (code && onNavigateToPipe) {
+          onNavigateToPipe(code, (_a = nodeData.pipeCardData) == null ? void 0 : _a.status);
+        }
+      } else if (nodeData.isStuff && onStuffNodeClick && graphspec) {
+        const digest = stuffDigestFromId(node.id);
+        const sd = findStuffDataByDigest(graphspec, digest);
+        if (sd) onStuffNodeClick(sd);
+      }
+      setConceptOverride(null);
+      if ((detailSelection == null ? void 0 : detailSelection.nodeId) === node.id && !conceptOverride) {
+        setDetailSelection(null);
+      } else if (nodeData.isPipe || nodeData.isController) {
+        setDetailSelection({ kind: "pipe", nodeId: node.id, nodeData });
+      } else if (nodeData.isStuff && graphspec) {
+        const digest = stuffDigestFromId(node.id);
+        const sd = findStuffDataByDigest(graphspec, digest);
+        setDetailSelection({ kind: "stuff", nodeId: node.id, nodeData, stuffData: sd != null ? sd : void 0 });
+      }
+      setNodes((nds) => nds.map((n) => __spreadProps(__spreadValues({}, n), { selected: n.id === node.id })));
+    },
+    [setNodes, onNavigateToPipe, onNodeSelect, onStuffNodeClick, graphspec, detailSelection, conceptOverride]
+  );
+  const onInit = React7.useCallback(
+    (reactFlowInstance) => {
+      reactFlowRef.current = reactFlowInstance;
+      if (onReactFlowInit) {
+        onReactFlowInit(reactFlowInstance);
+      }
+    },
+    [onReactFlowInit]
+  );
+  const handlePaneClick = React7.useCallback(() => {
+    setDetailSelection(null);
+    setConceptOverride(null);
+    onPaneClick == null ? void 0 : onPaneClick();
+  }, [onPaneClick]);
+  const handleConceptClick = React7.useCallback(
+    (conceptCode) => {
+      if (!graphspec) return;
+      const info = resolveConceptRef(graphspec, conceptCode);
+      if (info) setConceptOverride(info);
+    },
+    [graphspec]
+  );
+  const selectedSpecNode = (detailSelection == null ? void 0 : detailSelection.kind) === "pipe" && graphspec ? graphspec.nodes.find((n) => n.pipe_code === detailSelection.nodeData.pipeCode) : void 0;
+  const detailOpen = detailSelection !== null || conceptOverride !== null;
+  return /* @__PURE__ */ jsxs20("div", { ref: containerRef, className: "react-flow-container", children: [
+    /* @__PURE__ */ jsx20(
+      ReactFlow,
+      {
+        nodes,
+        edges,
+        nodeTypes,
+        onNodesChange,
+        onEdgesChange,
+        onNodeClick,
+        onPaneClick: handlePaneClick,
+        onInit,
+        fitView: true,
+        fitViewOptions: { padding: 0.1 },
+        defaultEdgeOptions: { type: edgeType },
+        panOnScroll: true,
+        minZoom: 0.1,
+        proOptions: { hideAttribution: true },
+        children: /* @__PURE__ */ jsx20(
+          Background,
+          {
+            variant: BackgroundVariant.Dots,
+            gap: 20,
+            size: 1,
+            color: "var(--color-bg-dots)"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs20(
+      DetailPanel,
+      {
+        isOpen: detailOpen,
+        onClose: handlePaneClick,
+        width: panelWidth,
+        isDragging: isPanelDragging,
+        onResizeHandleMouseDown: onResizeMouseDown,
+        children: [
+          conceptOverride ? /* @__PURE__ */ jsx20(ConceptDetailPanel, { concept: conceptOverride }) : selectedSpecNode && graphspec ? /* @__PURE__ */ jsx20(
+            PipeDetailPanel,
+            {
+              node: selectedSpecNode,
+              spec: graphspec,
+              onConceptClick: handleConceptClick
+            }
+          ) : (detailSelection == null ? void 0 : detailSelection.stuffData) ? /* @__PURE__ */ jsx20(
+            StuffNodeDetail,
+            {
+              stuffData: detailSelection.stuffData,
+              graphspec,
+              resolveStorageUrl
+            }
+          ) : null,
+          renderDetailExtra && detailSelection && !conceptOverride && renderDetailExtra(detailSelection.nodeId, detailSelection.nodeData)
+        ]
+      }
+    ),
+    !hideToolbar && /* @__PURE__ */ jsx20(
+      GraphToolbar,
+      {
+        direction,
+        onDirectionChange: setDirection,
+        showControllers,
+        onShowControllersChange: setShowControllers,
+        onZoomIn: () => {
+          var _a;
+          return (_a = reactFlowRef.current) == null ? void 0 : _a.zoomIn();
+        },
+        onZoomOut: () => {
+          var _a;
+          return (_a = reactFlowRef.current) == null ? void 0 : _a.zoomOut();
+        },
+        onFitView: () => {
+          var _a;
+          return (_a = reactFlowRef.current) == null ? void 0 : _a.fitView({ padding: 0.1 });
+        },
+        rightOffset: detailOpen ? panelWidth : 0
+      }
+    )
+  ] });
+}
+export {
+  ConceptDetailPanel,
+  ControllerGroupNode,
+  DetailPanel,
+  GraphViewer,
+  PipeCardBase,
+  PipeCardNode,
+  PipeDetailPanel,
+  StuffViewer,
+  applyStatusOverrides,
+  controllerNodeTypes,
+  extractFilename,
+  extractInlineUrl,
+  extractStorageUri,
+  extractUrl,
+  findStuffDataByDigest,
+  getHtmlTabLabel,
+  hydrateLabels,
+  isInlineRenderableUrl,
+  isSafeDisplayUrl,
+  renderLabel,
+  resolveMimeType,
+  toAppEdges,
+  toAppNodes,
+  useResizable
+};
+//# sourceMappingURL=index.js.map