@pipelex/mthds-ui 0.5.0 → 0.5.2

package/dist/graph/react/index.js

@@ -10,7 +10,7 @@ import {
   getPipeBlueprint,
   resolveConceptRef,
   stuffDigestFromId
-} from "../../chunk-CCUSQM3E.js";
+} from "../../chunk-OMJ6DRXM.js";
 import {
   __spreadProps,
   __spreadValues
@@ -176,7 +176,13 @@ function downloadUrl(url, filename) {
   link.target = "_blank";
   link.click();
 }
-function StuffViewer({ stuff, className, resolveStorageUrl }) {
+function StuffViewer({
+  stuff,
+  className,
+  resolveStorageUrl,
+  canEmbedPdf,
+  onOpenExternally
+}) {
   var _a;
   const [activeTab, setActiveTab] = React.useState("html");
   const [copied, setCopied] = React.useState(false);
@@ -242,10 +248,29 @@ function StuffViewer({ stuff, className, resolveStorageUrl }) {
   function renderContent() {
     if (activeTab === "html") {
       if (isPdf) {
-        if (inlineUrl) {
+        const canEmbed = canEmbedPdf !== false;
+        if (canEmbed && 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" }) });
         }
+        if (externalUrl) {
+          const displayName = filename || stuff.name;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "stuff-viewer-local-file stuff-viewer-local-file--button",
+              onClick: handleOpenExternal,
+              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__ */ jsx("div", { className: "stuff-viewer-local-file-hint", children: "Click to open PDF externally" })
+                ] })
+              ]
+            }
+          );
+        }
         return renderMediaFallback("PDF");
       }
       if (isImage) {
@@ -351,9 +376,12 @@ function StuffViewer({ stuff, className, resolveStorageUrl }) {
     }
   }
   function handleOpenExternal() {
-    if (externalUrl) {
-      window.open(externalUrl, "_blank", "noopener,noreferrer");
+    if (!externalUrl) return;
+    if (onOpenExternally) {
+      onOpenExternally(externalUrl, filename != null ? filename : void 0);
+      return;
     }
+    window.open(externalUrl, "_blank", "noopener,noreferrer");
   }
   const rootClass = ["stuff-viewer", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
@@ -541,10 +569,7 @@ function KV({
     /* @__PURE__ */ jsx3("span", { className: "detail-kv-value", children: String(value) })
   ] });
 }
-function PromptBlock({
-  label,
-  text
-}) {
+function PromptBlock({ label, text }) {
   if (!text) return null;
   return /* @__PURE__ */ jsxs3("div", { children: [
     /* @__PURE__ */ jsx3("div", { className: "detail-section-label", children: label }),
@@ -591,37 +616,36 @@ function PromptToggle({
     });
   }
   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__ */ 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",
                 {
@@ -652,11 +676,11 @@ function PromptToggle({
                 }
               ),
               showTemplate ? "template" : "rendered"
-            ]
-          }
-        )
-      ] })
-    ] }),
+            ] })
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx3(
       "div",
       {
@@ -696,9 +720,27 @@ function PipeLLMSection({
     /* @__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` }),
+    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,
       {
@@ -755,7 +797,13 @@ function PipeImgGenSection({
     /* @__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 })
+    /* @__PURE__ */ jsx5(
+      KV,
+      {
+        label: "Images",
+        value: (_c = executionData == null ? void 0 : executionData.nb_images) != null ? _c : blueprint.output_multiplicity
+      }
+    )
   ] });
 }
 function ImgGenExecutionData(_props) {
@@ -846,7 +894,7 @@ function FieldBlock({ label, value }) {
 function ConstructFieldsBlock({
   blueprint,
   depth,
-  resolvedFields
+  fieldResolutions
 }) {
   const leafFields = [];
   const nestedFields = [];
@@ -870,14 +918,13 @@ function ConstructFieldsBlock({
       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;
+      var _a, _b;
+      const renderedForField = (_a = fieldResolutions == null ? void 0 : fieldResolutions[name]) == null ? void 0 : _a.rendered;
       return /* @__PURE__ */ jsx8("div", { style: indentStyle, children: /* @__PURE__ */ jsx8(
         PromptToggle,
         {
           label: `Template \u2014 ${name}`,
-          templateText: (_a = field.template) != null ? _a : null,
+          templateText: (_b = field.template) != null ? _b : null,
           renderedText: renderedForField
         }
       ) }, name);
@@ -906,7 +953,7 @@ function ConstructFieldsBlock({
           {
             blueprint: field.nested,
             depth: depth + 1,
-            resolvedFields: resolvedFields && typeof resolvedFields[name] === "object" && resolvedFields[name] !== null ? resolvedFields[name] : null
+            fieldResolutions: null
           }
         )
       ] }, name);
@@ -920,7 +967,7 @@ function PipeComposeSection({
   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 fieldResolutions = (_a = executionData == null ? void 0 : executionData.fields) != null ? _a : null;
   const constructBlueprint = blueprint.construct_blueprint;
   const hasConstruct = constructBlueprint !== null && Object.keys(constructBlueprint.fields).length > 0;
   return /* @__PURE__ */ jsxs8(Fragment5, { children: [
@@ -942,7 +989,7 @@ function PipeComposeSection({
         {
           blueprint: constructBlueprint,
           depth: 0,
-          resolvedFields
+          fieldResolutions
         }
       )
     ] })
@@ -972,7 +1019,14 @@ function PipeConditionSection({
           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 })
+            /* @__PURE__ */ jsx9(
+              "span",
+              {
+                className: "detail-kv-value",
+                style: selectedOutcome === pipeCode ? { color: "#50FA7B" } : void 0,
+                children: pipeCode
+              }
+            )
           ]
         },
         outcome
@@ -1103,8 +1157,20 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
   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__ */ 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 } }),
@@ -1161,7 +1227,14 @@ function PipeDetailPanel({ node, spec, onConceptClick }) {
     ] }),
     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))
+      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" }),
@@ -1241,7 +1314,14 @@ function GenericExecutionData({ data }) {
 
 // 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 }) {
+function ConceptDetailPanel({
+  concept,
+  ioData,
+  isDryRun,
+  resolveStorageUrl,
+  canEmbedPdf,
+  onOpenExternally
+}) {
   return /* @__PURE__ */ jsxs14(Fragment10, { children: [
     /* @__PURE__ */ jsxs14("div", { className: "detail-header", children: [
       /* @__PURE__ */ jsx14("span", { className: "detail-concept-code", children: concept.code }),
@@ -1258,7 +1338,15 @@ function ConceptDetailPanel({ concept, ioData, isDryRun, resolveStorageUrl }) {
     ] }) : /* @__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 })
+      /* @__PURE__ */ jsx14(
+        StuffViewer,
+        {
+          stuff: toStuffViewerData(ioData),
+          resolveStorageUrl,
+          canEmbedPdf,
+          onOpenExternally
+        }
+      )
     ] })
   ] });
 }
@@ -1449,39 +1537,117 @@ function hydrateLabels(nodes) {
 
 // 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" })
-] });
+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,
@@ -1495,71 +1661,64 @@ function GraphToolbar({
   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
-          }
-        )
-      ]
-    }
-  );
+  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
@@ -1752,7 +1911,9 @@ var nodeTypes = __spreadProps(__spreadValues({}, controllerNodeTypes), {
 function StuffNodeDetail({
   stuffData,
   graphspec,
-  resolveStorageUrl
+  resolveStorageUrl,
+  canEmbedPdf,
+  onOpenExternally
 }) {
   const conceptInfo = stuffData.concept && graphspec ? resolveConceptRef(graphspec, stuffData.concept) : void 0;
   return /* @__PURE__ */ jsx20(Fragment12, { children: conceptInfo ? /* @__PURE__ */ jsx20(
@@ -1760,11 +1921,21 @@ function StuffNodeDetail({
     {
       concept: conceptInfo,
       ioData: stuffData,
-      resolveStorageUrl
+      resolveStorageUrl,
+      canEmbedPdf,
+      onOpenExternally
     }
   ) : (
     /* Fallback: just show the StuffViewer if no concept info */
-    /* @__PURE__ */ jsx20(StuffViewer, { stuff: stuffData, resolveStorageUrl })
+    /* @__PURE__ */ jsx20(
+      StuffViewer,
+      {
+        stuff: stuffData,
+        resolveStorageUrl,
+        canEmbedPdf,
+        onOpenExternally
+      }
+    )
   ) });
 }
 function cloneCachedNodes(nodes) {
@@ -1804,7 +1975,9 @@ function GraphViewer(props) {
     onNodeSelect,
     onPaneClick,
     renderDetailExtra,
-    resolveStorageUrl
+    resolveStorageUrl,
+    canEmbedPdf,
+    onOpenExternally
   } = props;
   const [direction, setDirection] = React7.useState(
     () => {
@@ -2067,11 +2240,24 @@ function GraphViewer(props) {
       } 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 });
+        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]
+    [
+      setNodes,
+      onNavigateToPipe,
+      onNodeSelect,
+      onStuffNodeClick,
+      graphspec,
+      detailSelection,
+      conceptOverride
+    ]
   );
   const onInit = React7.useCallback(
     (reactFlowInstance) => {
@@ -2115,6 +2301,7 @@ function GraphViewer(props) {
         panOnScroll: true,
         minZoom: 0.1,
         proOptions: { hideAttribution: true },
+        panActivationKeyCode: null,
         children: /* @__PURE__ */ jsx20(
           Background,
           {
@@ -2147,7 +2334,9 @@ function GraphViewer(props) {
             {
               stuffData: detailSelection.stuffData,
               graphspec,
-              resolveStorageUrl
+              resolveStorageUrl,
+              canEmbedPdf,
+              onOpenExternally
             }
           ) : null,
           renderDetailExtra && detailSelection && !conceptOverride && renderDetailExtra(detailSelection.nodeId, detailSelection.nodeData)