@pipelex/mthds-ui 0.7.0 → 0.8.0

package/dist/graph/react/index.js

@@ -16,7 +16,7 @@ import {
   resolveConceptRef,
   stuffDigestFromId,
   validateGraphSpec
-} from "../../chunk-ILX53OYM.js";
+} from "../../chunk-7VQUZ35P.js";
 import {
   __spreadProps,
   __spreadValues
@@ -1133,6 +1133,7 @@ var PIPE_TYPE_BADGES = {
   PipeImgGen: "ImgGen",
   PipeSearch: "Search",
   PipeFunc: "Func",
+  PipeSignature: "Signature",
   PipeSequence: "Seq",
   PipeParallel: "Par",
   PipeCondition: "Cond",
@@ -1287,6 +1288,10 @@ function BlueprintSection({
       return /* @__PURE__ */ jsx13(PipeBatchSection, { blueprint, executionData });
     case "PipeFunc":
       return null;
+    case "PipeSignature":
+      return /* @__PURE__ */ jsx13("div", { className: "detail-not-available", children: "Signature stub \u2014 declared but not yet implemented." });
+    default:
+      return null;
   }
 }
 function ExecutionDataSection({
@@ -2004,6 +2009,7 @@ var PIPE_TYPE_BADGES2 = {
   PipeImgGen: "ImgGen",
   PipeSearch: "Search",
   PipeFunc: "Func",
+  PipeSignature: "Signature",
   PipeSequence: "Sequence",
   PipeParallel: "Parallel",
   PipeCondition: "Condition",
@@ -2035,14 +2041,16 @@ function PipeCardBase({ data, children }) {
   const statusConfig = STATUS_CONFIG[data.status];
   const isRunning = data.status === "running";
   const isController = isControllerType(data.pipeType);
+  const isSignature = data.pipeType === "PipeSignature";
   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";
   const controllerClass = isController ? " pipe-card--controller" : "";
-  const badgeClass = isController ? "pipe-card-badge pipe-card-badge--controller" : "pipe-card-badge";
-  return /* @__PURE__ */ jsxs18("div", { className: `pipe-card ${dirClass}${controllerClass}`, children: [
+  const signatureClass = isSignature ? " pipe-card--signature" : "";
+  const badgeClass = isController ? "pipe-card-badge pipe-card-badge--controller" : isSignature ? "pipe-card-badge pipe-card-badge--signature" : "pipe-card-badge";
+  return /* @__PURE__ */ jsxs18("div", { className: `pipe-card ${dirClass}${controllerClass}${signatureClass}`, children: [
     /* @__PURE__ */ jsxs18("div", { className: "pipe-card-header", children: [
       /* @__PURE__ */ jsx18("span", { className: badgeClass, children: badge }),
       /* @__PURE__ */ jsx18("span", { className: "pipe-card-code", title: data.pipeCode, children: data.pipeCode }),
@@ -2133,6 +2141,7 @@ var PIPE_CARD_REGISTRY = {
   PipeImgGen: PipeCardBase,
   PipeSearch: PipeCardBase,
   PipeFunc: PipeCardBase,
+  PipeSignature: PipeCardBase,
   PipeSequence: PipeCardBase,
   PipeParallel: PipeCardBase,
   PipeCondition: PipeCardBase,
@@ -2733,103 +2742,96 @@ function GraphViewer(props) {
       expandAllDisabled: foldedControllers.size === 0
     };
   }, [showControllers, allControllerIds, foldedControllers]);
-  return /* @__PURE__ */ jsxs20(
-    "div",
-    {
-      ref: containerRef,
-      className: `react-flow-container react-flow-container--theme-${theme}`,
-      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 },
-            panActivationKeyCode: null,
-            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,
-                {
-                  nodeId: detailSelection.nodeId,
-                  stuffData: detailSelection.stuffData,
-                  graphspec,
-                  resolveStorageUrl,
-                  canEmbedPdf,
-                  onOpenExternally
-                }
-              ) : null,
-              renderDetailExtra && detailSelection && !conceptOverride && renderDetailExtra(detailSelection.nodeId, detailSelection.nodeData)
-            ]
-          }
-        ),
-        !hideToolbar && /* @__PURE__ */ jsx20(
-          GraphToolbar,
+  return /* @__PURE__ */ jsxs20("div", { ref: containerRef, className: `react-flow-container react-flow-container--theme-${theme}`, 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 },
+        panActivationKeyCode: null,
+        children: /* @__PURE__ */ jsx20(
+          Background,
           {
-            direction,
-            onDirectionChange: setDirection,
-            showControllers,
-            onShowControllersChange: setShowControllers,
-            onZoomIn: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn();
-            },
-            onZoomOut: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomOut();
-            },
-            onFitView: () => {
-              var _a2;
-              return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 });
-            },
-            onFoldAll: foldAllProps.onFoldAll,
-            onExpandAll: foldAllProps.onExpandAll,
-            foldAllDisabled: foldAllProps.foldAllDisabled,
-            expandAllDisabled: foldAllProps.expandAllDisabled,
-            theme: showThemeToggle ? theme : void 0,
-            onThemeChange: showThemeToggle ? setTheme : void 0,
-            rightOffset: detailOpen ? panelWidth : 0
+            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,
+            {
+              nodeId: detailSelection.nodeId,
+              stuffData: detailSelection.stuffData,
+              graphspec,
+              resolveStorageUrl,
+              canEmbedPdf,
+              onOpenExternally
+            }
+          ) : null,
+          renderDetailExtra && detailSelection && !conceptOverride && renderDetailExtra(detailSelection.nodeId, detailSelection.nodeData)
+        ]
+      }
+    ),
+    !hideToolbar && /* @__PURE__ */ jsx20(
+      GraphToolbar,
+      {
+        direction,
+        onDirectionChange: setDirection,
+        showControllers,
+        onShowControllersChange: setShowControllers,
+        onZoomIn: () => {
+          var _a2;
+          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomIn();
+        },
+        onZoomOut: () => {
+          var _a2;
+          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.zoomOut();
+        },
+        onFitView: () => {
+          var _a2;
+          return (_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 });
+        },
+        onFoldAll: foldAllProps.onFoldAll,
+        onExpandAll: foldAllProps.onExpandAll,
+        foldAllDisabled: foldAllProps.foldAllDisabled,
+        expandAllDisabled: foldAllProps.expandAllDisabled,
+        theme: showThemeToggle ? theme : void 0,
+        onThemeChange: showThemeToggle ? setTheme : void 0,
+        rightOffset: detailOpen ? panelWidth : 0
+      }
+    )
+  ] });
 }
 export {
   ConceptDetailPanel,