@pipelex/mthds-ui 0.19.0 → 0.21.0

package/dist/graph/react/index.js

@@ -8,13 +8,16 @@ import {
   buildGraph,
   buildValidationDecorations,
   findCousinControllers,
+  findStuffByDigest,
   getLayoutedElements,
   getPipeBlueprint,
   resolveConceptRef,
   resolveIssueTargetNodeId,
   validateGraphSpec
-} from "../../chunk-BFQHQQ3E.js";
-import "../../chunk-2N65P32H.js";
+} from "../../chunk-FD4PKRGZ.js";
+import {
+  parsePipeRef
+} from "../../chunk-2N65P32H.js";
 import {
   DEFAULT_GRAPH_CONFIG,
   getPaletteForTheme
@@ -43,8 +46,8 @@ import {
 // src/graph/react/index.ts
 import "./graph-core.css";
 import "./detail/DetailPanel.css";
-import "./stuff/StuffViewer.css";
 import "./viewer/GraphToolbar.css";
+import "../../styles/form-kernel.css";
 
 // src/graph/react/viewer/GraphViewer.tsx
 import React10 from "react";
@@ -101,457 +104,75 @@ function useSystemTheme(injected) {
   return React.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
 }
 
-// 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 extractInnerHtml(data) {
-  const fromObject = (obj2) => {
-    const value = obj2.inner_html;
-    if (typeof value === "string" && value.trim() !== "") return value;
-    return null;
-  };
-  if (!data || typeof data !== "object" || Array.isArray(data)) return null;
-  const obj = data;
-  const direct = fromObject(obj);
-  if (direct != null) return direct;
-  for (const value of Object.values(obj)) {
-    if (value && typeof value === "object" && !Array.isArray(value)) {
-      const nested = fromObject(value);
-      if (nested != null) return nested;
-    }
-  }
-  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 React2 from "react";
-import DOMPurify from "dompurify";
+// src/graph/react/detail/StuffResultPanel.tsx
+import * as React2 from "react";
+import {
+  buildResultField,
+  getPipeInputForm,
+  getPipeIOContract,
+  getPipeOutputForm
+} from "@pipelex/mthds-form";
+import {
+  JsonView,
+  ResultEnvProvider,
+  StuffViewer,
+  useFieldStrings
+} from "@pipelex/mthds-form/react";
 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({
+function StuffResultPanel({
+  contracts,
+  outputForm,
+  inputForm,
   stuff,
-  className,
-  resolveStorageUrl,
-  canEmbedPdf,
-  onOpenExternally
+  producerPipeRef,
+  consumer,
+  resolveUrl,
+  resolveShareUrl
 }) {
-  var _a, _b;
-  const [activeTab, setActiveTab] = React2.useState("html");
-  const [copied, setCopied] = React2.useState(false);
-  const contentRef = React2.useRef(null);
-  const httpInlineUrl = React2.useMemo(() => extractInlineUrl(stuff.data), [stuff.data]);
-  const httpExternalUrl = React2.useMemo(() => extractUrl(stuff.data), [stuff.data]);
-  const storageUri = React2.useMemo(() => extractStorageUri(stuff.data), [stuff.data]);
-  const filename = React2.useMemo(() => extractFilename(stuff.data), [stuff.data]);
-  const innerHtml = React2.useMemo(() => extractInnerHtml(stuff.data), [stuff.data]);
-  const [resolvedStorageUrl, setResolvedStorageUrl] = React2.useState(null);
-  React2.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 = React2.useMemo(
-    () => resolveMimeType(stuff.data, stuff.contentType, externalUrl != null ? externalUrl : storageUri),
-    [stuff.data, stuff.contentType, externalUrl, storageUri]
+  const field = React2.useMemo(
+    () => {
+      var _a;
+      return (_a = fromProducer(contracts, outputForm, producerPipeRef)) != null ? _a : fromConsumer(contracts, inputForm, consumer);
+    },
+    [contracts, outputForm, inputForm, producerPipeRef, consumer]
   );
-  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, jsonError } = React2.useMemo(() => {
-    if (stuff.data == null) return { jsonString: null, jsonError: null };
-    try {
-      return { jsonString: JSON.stringify(stuff.data, null, 2), jsonError: null };
-    } catch (err) {
-      return { jsonString: null, jsonError: err instanceof Error ? err.message : String(err) };
-    }
-  }, [stuff.data]);
-  React2.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 renderJsonError(detail) {
-    return /* @__PURE__ */ jsxs("div", { className: "stuff-viewer-error", role: "alert", children: [
-      /* @__PURE__ */ jsx("div", { className: "stuff-viewer-error-title", children: "Unable to serialize data" }),
-      /* @__PURE__ */ jsx("div", { className: "stuff-viewer-error-detail", children: detail })
-    ] });
-  }
-  function renderContent() {
-    var _a2;
-    if (activeTab === "html") {
-      if (isPdf) {
-        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) {
-        if (inlineUrl) {
-          return /* @__PURE__ */ jsx("div", { className: "stuff-viewer-image", children: /* @__PURE__ */ jsx("img", { src: inlineUrl, alt: (_a2 = stuff.name) != null ? _a2 : "(unnamed stuff)" }) });
-        }
-        return renderMediaFallback("Image");
-      }
-      if (innerHtml != null) {
-        return /* @__PURE__ */ jsx(
-          "iframe",
-          {
-            className: "stuff-viewer-html-frame",
-            title: stuff.name ? `${stuff.name} preview` : "HTML preview",
-            sandbox: "",
-            srcDoc: DOMPurify.sanitize(innerHtml, { WHOLE_DOCUMENT: true })
-          }
-        );
-      }
-      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) }
-          }
-        );
-      }
-      if (jsonError) return renderJsonError(jsonError);
-      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) }
-          }
-        );
-      }
-      if (jsonError) return renderJsonError(jsonError);
-      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) }
-        }
-      );
-    }
-    if (jsonError) return renderJsonError(jsonError);
-    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 = innerHtml || stuff.dataText || stuff.dataHtml || jsonString || "";
-    }
-    if (!textToCopy) return;
-    if (navigator.clipboard) {
-      navigator.clipboard.writeText(textToCopy).then(() => {
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1500);
-      }).catch(() => {
-      });
-    }
+  if (field) {
+    const panel = /* @__PURE__ */ jsx(StuffViewer, { field, value: stuff.data });
+    return resolveUrl || resolveShareUrl ? /* @__PURE__ */ jsx(ResultEnvProvider, { resolveUrl, resolveShareUrl, children: panel }) : panel;
   }
-  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(
-        innerHtml || stuff.dataHtml || jsonString || "",
-        `${stuff.name || "stuff"}.html`,
-        "text/html"
-      );
-    }
-  }
-  function handleOpenExternal() {
-    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: [
-    /* @__PURE__ */ jsxs("div", { className: "stuff-viewer-header", children: [
-      /* @__PURE__ */ jsx("h3", { className: "stuff-viewer-title", children: (_b = stuff.name) != null ? _b : "(unnamed stuff)" }),
-      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() })
+  return stuff.data === void 0 || stuff.data === null ? null : /* @__PURE__ */ jsx(UndescribedValue, { value: stuff.data });
+}
+function UndescribedValue({ value }) {
+  const s = useFieldStrings();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground", children: s.resultUndescribed }),
+    /* @__PURE__ */ jsx(JsonView, { value })
   ] });
 }
+function fromProducer(contracts, outputForm, producerPipeRef) {
+  if (!producerPipeRef) return null;
+  const parsed = parsePipeRef(producerPipeRef);
+  if (!(parsed == null ? void 0 : parsed.domainPath)) return null;
+  const descriptor = getPipeOutputForm(outputForm, parsed.domainPath, parsed.pipeCode);
+  const contract = getPipeIOContract(contracts, parsed.domainPath, parsed.pipeCode);
+  if (!descriptor || !contract) return null;
+  return buildResultField(descriptor, contract.output.json_schema);
+}
+function fromConsumer(contracts, inputForm, consumer) {
+  if (!inputForm || !consumer) return null;
+  const parsed = parsePipeRef(consumer.pipeRef);
+  if (!(parsed == null ? void 0 : parsed.domainPath)) return null;
+  const descriptor = getPipeInputForm(inputForm, parsed.domainPath, parsed.pipeCode);
+  const contract = getPipeIOContract(contracts, parsed.domainPath, parsed.pipeCode);
+  if (!descriptor || !contract) return null;
+  const slot = contract.inputs[consumer.slotName];
+  if (!slot || slot.multiplicity !== "single") return null;
+  const node = descriptor.fields.find(
+    (candidate) => candidate.name === consumer.slotName
+  );
+  if (!node) return null;
+  return buildResultField({ field: node }, slot.json_schema);
+}
 
 // src/graph/react/detail/DetailPanel.tsx
 import React3 from "react";
@@ -1689,9 +1310,7 @@ function ConceptDetailPanel({
   concept,
   ioData,
   isDryRun,
-  resolveStorageUrl,
-  canEmbedPdf,
-  onOpenExternally,
+  renderData,
   instanceKey
 }) {
   var _a;
@@ -1711,23 +1330,15 @@ function ConceptDetailPanel({
         concept,
         ioData,
         isDryRun,
-        resolveStorageUrl,
-        canEmbedPdf,
-        onOpenExternally
+        renderData
       },
       instanceKey != null ? instanceKey : `${concept.code}:${ioData && "digest" in ioData ? ioData.digest : (_a = ioData == null ? void 0 : ioData.name) != null ? _a : ""}`
     )
   ] });
 }
-function ConceptBody({
-  concept,
-  ioData,
-  isDryRun,
-  resolveStorageUrl,
-  canEmbedPdf,
-  onOpenExternally
-}) {
-  const hasData = Boolean(ioData) && !isDryRun;
+function ConceptBody({ concept, ioData, isDryRun, renderData }) {
+  const dataView = ioData && !isDryRun ? renderData == null ? void 0 : renderData() : void 0;
+  const hasData = Boolean(dataView);
   const [activeTab, setActiveTab] = React7.useState(hasData ? "data" : "structure");
   const baseId = React7.useId();
   const tabId = (tab) => `${baseId}-tab-${tab}`;
@@ -1778,15 +1389,7 @@ function ConceptBody({
       renderTab("data", "Data"),
       renderTab("structure", "Structure")
     ] }),
-    /* @__PURE__ */ jsx16("div", { role: "tabpanel", id: panelId(activeTab), "aria-labelledby": tabId(activeTab), children: activeTab === "data" ? /* @__PURE__ */ jsx16(
-      StuffViewer,
-      {
-        stuff: toStuffViewerData(ioData),
-        resolveStorageUrl,
-        canEmbedPdf,
-        onOpenExternally
-      }
-    ) : structure })
+    /* @__PURE__ */ jsx16("div", { role: "tabpanel", id: panelId(activeTab), "aria-labelledby": tabId(activeTab), children: activeTab === "data" ? dataView : structure })
   ] });
 }
 function SchemaTable({ schema }) {
@@ -1827,22 +1430,6 @@ function extractType(schema) {
   }
   return "(unresolved type)";
 }
-function toStuffViewerData(ioData) {
-  var _a;
-  if (isStuffViewerData(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
-  };
-}
-function isStuffViewerData(ioData) {
-  return "contentType" in ioData || "dataText" in ioData || "dataHtml" in ioData;
-}
 
 // src/graph/react/rfTypes.ts
 function toAppNodes(nodes) {
@@ -2893,36 +2480,44 @@ var nodeTypes = __spreadProps(__spreadValues({}, controllerNodeTypes), {
 function StuffNodeDetail({
   nodeId,
   stuffData,
+  producerPipeRef,
+  consumer,
   graphspec,
-  resolveStorageUrl,
-  canEmbedPdf,
-  onOpenExternally
+  theme,
+  contracts,
+  outputForm,
+  inputForm,
+  resolveUrl,
+  resolveShareUrl
 }) {
+  var _a;
   const conceptInfo = stuffData.concept && graphspec ? resolveConceptRef(graphspec, stuffData.concept) : void 0;
   const isDryRun = graphSpecMode(graphspec) === GRAPH_SPEC_MODE.DRY;
-  return /* @__PURE__ */ jsx24(Fragment14, { children: conceptInfo ? /* @__PURE__ */ jsx24(
-    ConceptDetailPanel,
-    {
-      concept: conceptInfo,
-      ioData: stuffData,
-      isDryRun,
-      instanceKey: nodeId,
-      resolveStorageUrl,
-      canEmbedPdf,
-      onOpenExternally
-    }
-  ) : isDryRun ? /* @__PURE__ */ jsx24("div", { className: "detail-not-available", children: "Dry run data hidden" }) : (
-    /* Fallback: just show the StuffViewer if no concept info */
-    /* @__PURE__ */ jsx24(
-      StuffViewer,
+  const renderData = contracts && outputForm ? () => /* @__PURE__ */ jsx24(
+    StuffResultPanel,
+    __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
+      contracts,
+      outputForm
+    }, inputForm ? { inputForm } : {}), {
+      stuff: stuffData
+    }), conceptInfo ? { concept: conceptInfo } : {}), producerPipeRef ? { producerPipeRef } : {}), consumer ? { consumer } : {}), resolveUrl ? { resolveUrl } : {}), resolveShareUrl ? { resolveShareUrl } : {}), {
+      theme
+    })
+  ) : void 0;
+  if (conceptInfo) {
+    return /* @__PURE__ */ jsx24(
+      ConceptDetailPanel,
       {
-        stuff: stuffData,
-        resolveStorageUrl,
-        canEmbedPdf,
-        onOpenExternally
+        concept: conceptInfo,
+        ioData: stuffData,
+        isDryRun,
+        instanceKey: nodeId,
+        renderData
       }
-    )
-  ) });
+    );
+  }
+  if (isDryRun) return /* @__PURE__ */ jsx24("div", { className: "detail-not-available", children: "Dry run data hidden" });
+  return /* @__PURE__ */ jsx24(Fragment14, { children: (_a = renderData == null ? void 0 : renderData()) != null ? _a : /* @__PURE__ */ jsx24("div", { className: "detail-not-available", children: "No data" }) });
 }
 function seedFoldedControllers(mode, controllerIds) {
   if (mode === FOLD_MODE.FOLDED) return new Set(controllerIds);
@@ -2989,9 +2584,11 @@ function GraphViewer(props) {
     onNodeSelect,
     onPaneClick,
     renderDetailExtra,
-    resolveStorageUrl,
-    canEmbedPdf,
-    onOpenExternally,
+    contracts,
+    outputForm,
+    inputForm,
+    resolveUrl,
+    resolveShareUrl,
     validationState,
     validationIssues,
     onValidationIssueClick
@@ -3492,9 +3089,8 @@ function GraphViewer(props) {
           onNavigateToPipe(code, (_a2 = nodeData.pipeCardData) == null ? void 0 : _a2.status);
         }
       } else if (nodeData.isStuff && onStuffNodeClick && graphspec) {
-        const digest = stuffDigestFromId(node.id);
-        const sd = findStuffDataByDigest(graphspec, digest);
-        if (sd) onStuffNodeClick(sd);
+        const found = findStuffByDigest(graphspec, stuffDigestFromId(node.id));
+        if (found) onStuffNodeClick(found.item);
       }
       setConceptOverride(null);
       if ((detailSelection == null ? void 0 : detailSelection.nodeId) === node.id && !conceptOverride) {
@@ -3502,13 +3098,14 @@ function GraphViewer(props) {
       } 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);
+        const found = findStuffByDigest(graphspec, stuffDigestFromId(node.id));
         setDetailSelection({
           kind: "stuff",
           nodeId: node.id,
           nodeData,
-          stuffData: sd != null ? sd : void 0
+          stuffData: found == null ? void 0 : found.item,
+          producerPipeRef: found == null ? void 0 : found.producerPipeRef,
+          consumer: found == null ? void 0 : found.consumer
         });
       }
       setNodes((nds) => nds.map((n) => __spreadProps(__spreadValues({}, n), { selected: n.id === node.id })));
@@ -3661,10 +3258,15 @@ function GraphViewer(props) {
                 {
                   nodeId: detailSelection.nodeId,
                   stuffData: detailSelection.stuffData,
+                  producerPipeRef: detailSelection.producerPipeRef,
+                  consumer: detailSelection.consumer,
                   graphspec,
-                  resolveStorageUrl,
-                  canEmbedPdf,
-                  onOpenExternally
+                  theme: resolvedTheme,
+                  contracts,
+                  outputForm,
+                  inputForm,
+                  resolveUrl,
+                  resolveShareUrl
                 }
               ) : null,
               renderDetailExtra && detailSelection && !conceptOverride && renderDetailExtra(detailSelection.nodeId, detailSelection.nodeData)
@@ -3683,22 +3285,13 @@ export {
   PipeCardBase,
   PipeCardNode,
   PipeDetailPanel,
-  StuffViewer,
+  StuffResultPanel,
   ValidationPanel,
   applyStatusOverrides,
   controllerNodeTypes,
   detectSystemTheme,
-  extractFilename,
-  extractInlineUrl,
-  extractStorageUri,
-  extractUrl,
-  findStuffDataByDigest,
-  getHtmlTabLabel,
   hydrateLabels,
-  isInlineRenderableUrl,
-  isSafeDisplayUrl,
   renderLabel,
-  resolveMimeType,
   toAppEdges,
   toAppNodes,
   useResizable,