@pipelex/mthds-ui 0.31.0 → 0.33.0

package/README.md

@@ -94,6 +94,7 @@ Without `pipeIoContracts` and `outputForm` the panel shows each concept's struct
 | `graphStyle`         | `GraphStyleId`                                    | `"detailed"`           | The style the graph is drawn in: `detailed` or `simple`        |
 | `styleMenu`          | `boolean \| GraphStyleId[]`                       | —                      | Offer a style menu in the toolbar (opt-in)                     |
 | `onGraphStyleChange` | `(style: GraphStyleId) => void`                   | —                      | Called when the style changes, so the host can keep the choice |
+| `interactive`        | `boolean`                                         | `true`                 | `false` draws a still picture sized to its content             |
 
 The `simple` style draws the method as a flowchart in plain words: steps titled by their descriptions, only the method's inputs and final output as data, decisions with their outcomes, and loops as "for each". See [docs/graph-styles.md](docs/graph-styles.md).
 
@@ -101,6 +102,8 @@ The `simple` style draws the method as a flowchart in plain words: steps titled
 
 The graph container uses `position: absolute; inset: 0` to fill its parent. Make sure the parent element has `position: relative` and a defined height (e.g. `h-full`, `flex-1`, or an explicit height).
 
+The still presentation (`interactive={false}`) is the exception: its container flows in its parent and takes the height the drawing needs, so the parent gives it a width and no height. See [docs/still-presentation.md](docs/still-presentation.md).
+
 ## GraphSpec
 
 GraphSpec is the data format that describes a pipeline execution graph. It's generated by Pipelex when running or validating MTHDS method bundles.

package/dist/{chunk-BXRVND2C.js → chunk-ABUDTHWF.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-2N65P32H.js";
 import {
   DEFAULT_GRAPH_CONFIG
-} from "./chunk-7H3RHOYA.js";
+} from "./chunk-K2C5FU4W.js";
 import {
   ARROW_CLOSED_MARKER,
   BINDING_STEP_TYPE,
@@ -31,7 +31,7 @@ import {
   nodeWidth,
   stuffDigestFromId,
   stuffNodeId
-} from "./chunk-QRO3TYZE.js";
+} from "./chunk-TMZ2JR2J.js";
 import {
   __objRest,
   __spreadProps,
@@ -480,6 +480,20 @@ function getPipeBlueprint(spec, pipeRef) {
   var _a;
   return (_a = spec.pipe_registry) == null ? void 0 : _a[pipeRef];
 }
+function resolveNodeBlueprint(spec, node) {
+  var _a;
+  const registry = spec.pipe_registry;
+  if (!registry || isBindingNode(node) || !node.pipe_code) return void 0;
+  if (node.domain_code) return registry[makePipeRef(node.domain_code, node.pipe_code)];
+  const pipelineDomain = (_a = spec.pipeline_ref) == null ? void 0 : _a.domain;
+  if (pipelineDomain) {
+    const inPipelineDomain = registry[makePipeRef(pipelineDomain, node.pipe_code)];
+    if (inPipelineDomain) return inPipelineDomain;
+  }
+  const suffix = `.${node.pipe_code}`;
+  const matches = Object.keys(registry).filter((ref) => ref.endsWith(suffix));
+  return matches.length === 1 ? registry[matches[0]] : void 0;
+}
 function getConceptInfo(spec, conceptRef) {
   var _a;
   return (_a = spec.concept_registry) == null ? void 0 : _a[conceptRef];
@@ -501,7 +515,7 @@ function ioPill(item) {
     concept: item.concept ? item.concept + multiplicitySuffix(item.multiplicity) : ""
   };
 }
-function buildPipeCardPayload(node, graphMode) {
+function buildPipeCardPayload(node, graphMode, blueprint) {
   const payload = {
     pipeCode: node.pipe_code,
     pipeType: node.pipe_type,
@@ -512,6 +526,10 @@ function buildPipeCardPayload(node, graphMode) {
   };
   if (graphMode !== void 0) payload.graphMode = graphMode;
   if (node.tags !== void 0) payload.tags = node.tags;
+  const docGenFormat = (blueprint == null ? void 0 : blueprint.type) === "PipeDocGen" ? blueprint.doc_gen_format : void 0;
+  if (typeof docGenFormat === "string" && docGenFormat.trim() !== "") {
+    payload.docGenFormat = docGenFormat.trim();
+  }
   return payload;
 }
 
@@ -546,7 +564,11 @@ function buildDataflowGraph(graphspec, analysis, edgeType) {
     const pipeNode = asCardNode(node, `nodes[${node.id}]`);
     const isFailed = pipeNode.status === "failed";
     const label = pipeNode.pipe_code;
-    const pipeCardData = buildPipeCardPayload(pipeNode, graphMode);
+    const pipeCardData = buildPipeCardPayload(
+      pipeNode,
+      graphMode,
+      resolveNodeBlueprint(graphspec, pipeNode)
+    );
     nodes.push({
       id: pipeNode.id,
       type: NODE_TYPE_PIPE_CARD,
@@ -812,7 +834,11 @@ function applyFolds(graphData, analysis, graphspec, foldedSet, onToggleFold) {
     if (outermostFoldedAncestor(folded, childToCtrl, foldedSet)) continue;
     const specNode = findSpecNode(graphspec, folded);
     if (!specNode) continue;
-    const payload = buildPipeCardPayload(asPipeCallNode(specNode, folded), graphMode);
+    const payload = buildPipeCardPayload(
+      asPipeCallNode(specNode, folded),
+      graphMode,
+      resolveNodeBlueprint(graphspec, specNode)
+    );
     if (onToggleFold) {
       payload.onExpand = (options) => onToggleFold(folded, options);
     }
@@ -2829,7 +2855,7 @@ function simpleEdge(id, source, target, label) {
       fontWeight: 600,
       fill: "var(--ctrl-condition-text)"
     };
-    edge.labelBgStyle = { fill: "var(--color-bg)", fillOpacity: 0.92 };
+    edge.labelBgStyle = { fill: "var(--simple-edge-label-bg, var(--color-bg))", fillOpacity: 0.92 };
     edge.labelBgPadding = [...EDGE_LABEL_PADDING];
     edge.labelBgBorderRadius = 4;
     edge.labelSize = simpleEdgeLabelSize(label);
@@ -2919,6 +2945,7 @@ export {
   buildDataflowAnalysis,
   buildChildToControllerMap,
   getPipeBlueprint,
+  resolveNodeBlueprint,
   getConceptInfo,
   resolveConceptRef,
   buildPipeCardPayload,
@@ -2983,4 +3010,4 @@ export {
   applySimpleFrames,
   GRAPH_STYLE_PIPELINES
 };
-//# sourceMappingURL=chunk-BXRVND2C.js.map
+//# sourceMappingURL=chunk-ABUDTHWF.js.map