@mastra/playground-ui 59.0.0 → 60.0.0-alpha.1

package/dist/workflow-edge-data-button-DW6nxxNz.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const workflowCodeDialogContent = require('./workflow-code-dialog-content-BirYxjKN.cjs');
+const Button = require('./Button-BAMnPqos.cjs');
+const dialog = require('./dialog-Vvcjm0rZ.cjs');
+const Txt = require('./Txt-DPmEpNbp.cjs');
+const primitives_raisedSurface = require('./primitives/raised-surface.cjs.js');
+const utils_cn = require('./cn-DG0X1KEP.cjs');
+
+const WorkflowEdgeDataButton = ({
+  previousStepId,
+  output,
+  label,
+  selected,
+  onInspect
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const dataLabel = label ?? (previousStepId ? `${previousStepId} output` : "Previous output");
+  if (output === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        size: "sm",
+        variant: "ghost",
+        onClick: onInspect ?? (() => setIsOpen(true)),
+        "aria-label": `View ${dataLabel}`,
+        "aria-pressed": selected,
+        className: utils_cn.cn(
+          primitives_raisedSurface.raisedSurfaceStyle,
+          primitives_raisedSurface.surfaceStateLayerStyle,
+          "h-7 rounded-lg px-2 text-foreground aria-pressed:before:bg-fill"
+        ),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Database, { className: "text-accent1" }),
+        children: "Data"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "w-full max-w-3xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Step output" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogBody, { className: "overflow-auto", style: { maxHeight: 700 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 rounded-lg border border-border bg-background p-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "caption", tone: "ink", className: "mb-2 block", children: dataLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(workflowCodeDialogContent.WorkflowCodeContent, { data: output })
+      ] }) })
+    ] }) })
+  ] });
+};
+
+exports.WorkflowEdgeDataButton = WorkflowEdgeDataButton;
+//# sourceMappingURL=workflow-edge-data-button-DW6nxxNz.cjs.map

package/dist/workflow-edge-data-button-DW6nxxNz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-edge-data-button-DW6nxxNz.cjs","sources":["../src/ds/components/Workflow/data/workflow-edge-data-button.tsx"],"sourcesContent":["import { Database } from 'lucide-react';\nimport { useState } from 'react';\nimport type { MouseEventHandler } from 'react';\nimport { WorkflowCodeContent } from './workflow-code-dialog-content';\nimport { Button } from '@/ds/components/Button';\nimport { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle } from '@/ds/components/Dialog';\nimport { Txt } from '@/ds/components/Txt';\nimport { raisedSurfaceStyle, surfaceStateLayerStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface WorkflowEdgeDataButtonProps {\n  previousStepId?: string;\n  output?: unknown;\n  label?: string;\n  selected?: boolean;\n  onInspect?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const WorkflowEdgeDataButton = ({\n  previousStepId,\n  output,\n  label,\n  selected,\n  onInspect,\n}: WorkflowEdgeDataButtonProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const dataLabel = label ?? (previousStepId ? `${previousStepId} output` : 'Previous output');\n\n  if (output === undefined) {\n    return null;\n  }\n\n  return (\n    <>\n      <Button\n        size=\"sm\"\n        variant=\"ghost\"\n        onClick={onInspect ?? (() => setIsOpen(true))}\n        aria-label={`View ${dataLabel}`}\n        aria-pressed={selected}\n        className={cn(\n          raisedSurfaceStyle,\n          surfaceStateLayerStyle,\n          'h-7 rounded-lg px-2 text-foreground aria-pressed:before:bg-fill',\n        )}\n        icon={<Database className=\"text-accent1\" />}\n      >\n        Data\n      </Button>\n\n      <Dialog open={isOpen} onOpenChange={setIsOpen}>\n        <DialogContent className=\"w-full max-w-3xl\">\n          <DialogHeader>\n            <DialogTitle>Step output</DialogTitle>\n          </DialogHeader>\n          <DialogBody className=\"overflow-auto\" style={{ maxHeight: 700 }}>\n            <div className=\"min-w-0 rounded-lg border border-border bg-background p-3\">\n              <Txt variant=\"caption\" tone=\"ink\" className=\"mb-2 block\">\n                {dataLabel}\n              </Txt>\n              <WorkflowCodeContent data={output} />\n            </div>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n};\n"],"names":["useState","jsxs","Fragment","jsx","Button","cn","raisedSurfaceStyle","surfaceStateLayerStyle","Database","Dialog","DialogContent","DialogHeader","DialogTitle","DialogBody","Txt","WorkflowCodeContent"],"mappings":";;;;;;;;;;;;AAkBO,MAAM,yBAAyB,CAAC;AAAA,EACrC,cAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,KAAmC;AACjC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC1C,EAAA,MAAM,SAAA,GAAY,KAAA,KAAU,cAAA,GAAiB,CAAA,EAAG,cAAc,CAAA,OAAA,CAAA,GAAY,iBAAA,CAAA;AAE1E,EAAA,IAAI,WAAW,MAAA,EAAW;AACxB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,IAAA;AAAA,QACL,OAAA,EAAQ,OAAA;AAAA,QACR,OAAA,EAAS,SAAA,KAAc,MAAM,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,QAC3C,YAAA,EAAY,QAAQ,SAAS,CAAA,CAAA;AAAA,QAC7B,cAAA,EAAc,QAAA;AAAA,QACd,SAAA,EAAWC,WAAA;AAAA,UACTC,2CAAA;AAAA,UACAC,+CAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAA,kBAAMJ,cAAA,CAACK,oBAAA,EAAA,EAAS,SAAA,EAAU,cAAA,EAAe,CAAA;AAAA,QAC1C,QAAA,EAAA;AAAA;AAAA,KAED;AAAA,oBAEAL,cAAA,CAACM,iBAAO,IAAA,EAAM,MAAA,EAAQ,cAAc,SAAA,EAClC,QAAA,kBAAAR,eAAA,CAACS,oBAAA,EAAA,EAAc,SAAA,EAAU,kBAAA,EACvB,QAAA,EAAA;AAAA,sBAAAP,cAAA,CAACQ,mBAAA,EAAA,EACC,QAAA,kBAAAR,cAAA,CAACS,kBAAA,EAAA,EAAY,QAAA,EAAA,aAAA,EAAW,CAAA,EAC1B,CAAA;AAAA,sBACAT,cAAA,CAACU,iBAAA,EAAA,EAAW,SAAA,EAAU,eAAA,EAAgB,KAAA,EAAO,EAAE,SAAA,EAAW,GAAA,EAAI,EAC5D,QAAA,kBAAAZ,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2DAAA,EACb,QAAA,EAAA;AAAA,wBAAAE,cAAA,CAACW,WAAI,OAAA,EAAQ,SAAA,EAAU,MAAK,KAAA,EAAM,SAAA,EAAU,cACzC,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,wBACAX,cAAA,CAACY,6CAAA,EAAA,EAAoB,IAAA,EAAM,MAAA,EAAQ;AAAA,OAAA,EACrC,CAAA,EACF;AAAA,KAAA,EACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/workflow-graph-placeholder-DHPA04Oz.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const skeleton = require('./skeleton-cXUjPrq9.cjs');
+
+function WorkflowGraphPlaceholder(props) {
+  if (props.isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-full" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircleIcon, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      "We couldn't find ",
+      props.workflowName,
+      " workflow."
+    ] })
+  ] }) });
+}
+
+exports.WorkflowGraphPlaceholder = WorkflowGraphPlaceholder;
+//# sourceMappingURL=workflow-graph-placeholder-DHPA04Oz.cjs.map

package/dist/workflow-graph-placeholder-DHPA04Oz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-graph-placeholder-DHPA04Oz.cjs","sources":["../src/ds/components/Workflow/graph/workflow-graph-placeholder.tsx"],"sourcesContent":["import { AlertCircleIcon } from 'lucide-react';\nimport { Skeleton } from '@/ds/components/Skeleton';\n\nexport type WorkflowGraphPlaceholderProps = { isLoading: true } | { isLoading?: false; workflowName: string };\n\nexport function WorkflowGraphPlaceholder(props: WorkflowGraphPlaceholderProps) {\n  if (props.isLoading) {\n    return (\n      <div className=\"p-4\">\n        <Skeleton className=\"h-full\" />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"grid h-full place-items-center\">\n      <div className=\"flex flex-col items-center gap-2\">\n        <AlertCircleIcon />\n        <div>We couldn&apos;t find {props.workflowName} workflow.</div>\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","Skeleton","jsxs","AlertCircleIcon"],"mappings":";;;;;;AAKO,SAAS,yBAAyB,KAAA,EAAsC;AAC7E,EAAA,IAAI,MAAM,SAAA,EAAW;AACnB,IAAA,uBACEA,cAAA,CAAC,SAAI,SAAA,EAAU,KAAA,EACb,yCAACC,iBAAA,EAAA,EAAS,SAAA,EAAU,UAAS,CAAA,EAC/B,CAAA;AAAA,EAEJ;AAEA,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAU,kCACb,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kCAAA,EACb,QAAA,EAAA;AAAA,oBAAAF,cAAA,CAACG,2BAAA,EAAA,EAAgB,CAAA;AAAA,oCAChB,KAAA,EAAA,EAAI,QAAA,EAAA;AAAA,MAAA,mBAAA;AAAA,MAAuB,KAAA,CAAM,YAAA;AAAA,MAAa;AAAA,KAAA,EAAU;AAAA,GAAA,EAC3D,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/workflow-graph-placeholder-I4TzvbtB.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AlertCircleIcon } from 'lucide-react';
+import { S as Skeleton } from './skeleton-BsRAXyh5.js';
+
+function WorkflowGraphPlaceholder(props) {
+  if (props.isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "grid h-full place-items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ jsx(AlertCircleIcon, {}),
+    /* @__PURE__ */ jsxs("div", { children: [
+      "We couldn't find ",
+      props.workflowName,
+      " workflow."
+    ] })
+  ] }) });
+}
+
+export { WorkflowGraphPlaceholder as W };
+//# sourceMappingURL=workflow-graph-placeholder-I4TzvbtB.js.map

package/dist/workflow-graph-placeholder-I4TzvbtB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-graph-placeholder-I4TzvbtB.js","sources":["../src/ds/components/Workflow/graph/workflow-graph-placeholder.tsx"],"sourcesContent":["import { AlertCircleIcon } from 'lucide-react';\nimport { Skeleton } from '@/ds/components/Skeleton';\n\nexport type WorkflowGraphPlaceholderProps = { isLoading: true } | { isLoading?: false; workflowName: string };\n\nexport function WorkflowGraphPlaceholder(props: WorkflowGraphPlaceholderProps) {\n  if (props.isLoading) {\n    return (\n      <div className=\"p-4\">\n        <Skeleton className=\"h-full\" />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"grid h-full place-items-center\">\n      <div className=\"flex flex-col items-center gap-2\">\n        <AlertCircleIcon />\n        <div>We couldn&apos;t find {props.workflowName} workflow.</div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAKO,SAAS,yBAAyB,KAAA,EAAsC;AAC7E,EAAA,IAAI,MAAM,SAAA,EAAW;AACnB,IAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAU,KAAA,EACb,8BAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAS,CAAA,EAC/B,CAAA;AAAA,EAEJ;AAEA,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAU,kCACb,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,kCAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA;AAAA,yBAChB,KAAA,EAAA,EAAI,QAAA,EAAA;AAAA,MAAA,mBAAA;AAAA,MAAuB,KAAA,CAAM,YAAA;AAAA,MAAa;AAAA,KAAA,EAAU;AAAA,GAAA,EAC3D,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/workflow-layout.css

@@ -0,0 +1,9 @@
+/* The submit row is rendered by the shared form, so only the panel that hosts it can pin it. */
+.workflow-information-panel [data-slot='form-submit-row'] {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  padding-block: 12px;
+  background: var(--card);
+  box-shadow: 0 -1px var(--border);
+}

package/dist/workflow-nested-graph-C_H2PZWK.js

@@ -0,0 +1,297 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useMemo, useState } from 'react';
+import { useCurrentRun } from './domains/workflows/context/use-current-run.es.js';
+import { useWorkflowGraphNodes } from './domains/workflows/workflow/use-workflow-graph-nodes.es.js';
+import { WorkflowRunContext } from './domains/workflows/context/workflow-run-context.es.js';
+import { groupWorkflowEdgeData } from './domains/workflows/workflow/data/workflow-edge-data-groups.es.js';
+import { buildStepsFlow } from './domains/workflows/workflow/utils.es.js';
+import { getWorkflowBoundaryData } from './domains/workflows/workflow/workflow-boundary-data.es.js';
+import { WorkflowDataEdge } from './domains/workflows/workflow/workflow-data-edge.es.js';
+import { useWorkflowSelectedStep } from './domains/workflows/context/use-workflow-selected-step.es.js';
+import { useWorkflowStepDetail } from './domains/workflows/context/workflow-step-detail-context.es.js';
+import { resolveStepSpan, isAwaitingInput } from './domains/workflows/context/workflow-step-timing.es.js';
+import { useWaitingStepKey } from './domains/workflows/workflow/use-workflow-trigger.es.js';
+import { ReactFlowProvider } from '@xyflow/react';
+import { Repeat2 } from 'lucide-react';
+import { WorkflowGraphBoundary } from './domains/workflows/workflow/workflow-graph-boundary.es.js';
+import { getWorkflowGraphGroups } from './domains/workflows/workflow/workflow-graph-groups.es.js';
+import { getWorkflowIterationScopes } from './domains/workflows/workflow/workflow-iteration-scopes.es.js';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from './select-Dkmx3L5p.js';
+import { W as WORKFLOW_BOUNDARY_NODE_TYPE, a as WORKFLOW_DATA_EDGE_TYPE } from './types-CvneO3z0.js';
+import { f as WorkflowNodeFrame, c as WorkflowConditionCard, g as WorkflowStepCardView, W as WorkflowBoundaryNode, e as WorkflowGraphCanvas } from './workflow-condition-card-ByvSwtXl.js';
+import { T as Txt } from './Txt-BP1SRHmL.js';
+import { getWorkflowCardKind } from './domains/workflows/workflow/workflow-node-kind.es.js';
+import { WorkflowStepActionBar } from './domains/workflows/workflow/workflow-step-action-bar.es.js';
+import { WORKFLOW_STEP_NODE_TYPE } from './domains/workflows/workflow/workflow-step-node-utils.es.js';
+
+function WorkflowBodyGraph({
+  stepGraph,
+  workflowName,
+  isForEach,
+  requestContext
+}) {
+  return /* @__PURE__ */ jsxs("section", { "aria-label": isForEach ? "Loop body" : "Nested workflow", className: "flex h-full min-h-0 flex-col", children: [
+    isForEach && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-start gap-2 px-4 py-3 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Repeat2, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(Txt, { variant: "meta", children: "Runs for every item. All items finish before the workflow continues." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+      WorkflowNestedGraph,
+      {
+        stepGraph,
+        embedded: true,
+        workflowName,
+        isForEach,
+        requestContext
+      }
+    ) }) })
+  ] });
+}
+
+const getDisplayStatus = (step) => {
+  const isTripwire = step?.status === "failed" && step?.tripwire !== void 0;
+  const displayStatus = step && isAwaitingInput(step) ? "suspended" : step?.status;
+  return {
+    displayStatus: isTripwire ? "tripwire" : displayStatus,
+    isTripwire
+  };
+};
+const WorkflowStepCard = ({
+  data,
+  parentWorkflowName,
+  stepsFlow,
+  requestContext
+}) => {
+  const { steps } = useCurrentRun();
+  const { selectedStepId, setSelectedStepId, hoverStepId, setHoverStepId } = useWorkflowSelectedStep();
+  const { showNestedGraph } = useWorkflowStepDetail();
+  const waitingStepKey = useWaitingStepKey();
+  const { label, stepId, description } = data;
+  const mapConfig = data.mapConfig ?? ("step" in data.workflowStep ? data.workflowStep.step?.mapConfig : void 0);
+  const stepGraph = data.stepGraph ?? ("step" in data.workflowStep ? data.workflowStep.step?.serializedStepFlow : void 0) ?? (data.workflowStep.kind === "nested-workflow-step" && data.workflowStep.flow.type === "workflow" ? data.workflowStep.flow.serializedStepFlow : void 0);
+  const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;
+  const stepKey = parentWorkflowName ? `${parentWorkflowName}.${stepId || label}` : stepId || label;
+  const isSelected = selectedStepId === stepKey;
+  const isWaiting = waitingStepKey === stepKey;
+  const isHovered = hoverStepId === stepKey;
+  const step = steps[stepKey];
+  const { displayStatus, isTripwire } = getDisplayStatus(step);
+  const stepSpan = step ? resolveStepSpan(step) : void 0;
+  return /* @__PURE__ */ jsx(
+    WorkflowStepCardView,
+    {
+      label: data.mapContext?.label ?? label,
+      nodeKind: getWorkflowCardKind(data.workflowStep),
+      onSelect: () => setSelectedStepId(stepKey),
+      initiallyOpen: !parentWorkflowName,
+      body: stepGraph?.length ? /* @__PURE__ */ jsx(
+        WorkflowBodyGraph,
+        {
+          stepGraph,
+          workflowName: fullLabel,
+          isForEach: data.isForEach,
+          requestContext
+        }
+      ) : void 0,
+      description: description ?? data.mapContext?.description,
+      displayStatus,
+      isNestedWorkflowStep: data.workflowStep.kind === "nested-workflow-step",
+      stepKey,
+      isSelected,
+      isWaiting,
+      isHovered,
+      onHoverChange: (isHovered2) => setHoverStepId(isHovered2 ? stepKey : null),
+      duration: data.duration,
+      date: data.date,
+      isForEach: data.isForEach,
+      foreachProgress: step?.foreachProgress,
+      mapConfig,
+      canSuspend: data.canSuspend,
+      stepGraph,
+      startedAt: stepSpan?.start,
+      endedAt: stepSpan?.end,
+      spansSuspension: stepSpan?.spansSuspension,
+      actionBar: /* @__PURE__ */ jsx(
+        WorkflowStepActionBar,
+        {
+          stepName: label,
+          stepId,
+          resumeData: step?.resumeData,
+          error: isTripwire ? void 0 : step?.error,
+          tripwire: isTripwire ? step?.tripwire : void 0,
+          mapConfig,
+          onShowNestedGraph: stepGraph ? () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }) : void 0,
+          stepKey,
+          stepsFlow,
+          requestContext
+        }
+      )
+    }
+  );
+};
+const WorkflowConditionNodeCard = ({
+  data,
+  parentWorkflowName,
+  requestContext
+}) => {
+  const { steps } = useCurrentRun();
+  const conditions = data.conditions ?? [];
+  const previousStepId = data.previousStepId && (parentWorkflowName ? `${parentWorkflowName}.${data.previousStepId}` : data.previousStepId);
+  const previousStep = previousStepId ? steps[previousStepId] : void 0;
+  const { displayStatus: previousDisplayStatus, isTripwire } = getDisplayStatus(previousStep);
+  return /* @__PURE__ */ jsx(
+    WorkflowConditionCard,
+    {
+      conditions,
+      previousDisplayStatus,
+      actionBar: /* @__PURE__ */ jsx(
+        WorkflowStepActionBar,
+        {
+          stepName: data.nextStepId ?? data.label,
+          mapConfig: data.mapConfig,
+          tripwire: isTripwire ? previousStep?.tripwire : void 0,
+          requestContext
+        }
+      )
+    }
+  );
+};
+function WorkflowGraphNode({
+  data,
+  parentWorkflowName,
+  stepsFlow,
+  requestContext
+}) {
+  const content = data.workflowStep.kind === "conditional" ? /* @__PURE__ */ jsx(WorkflowConditionNodeCard, { data, parentWorkflowName, requestContext }) : /* @__PURE__ */ jsx(
+    WorkflowStepCard,
+    {
+      data,
+      parentWorkflowName,
+      stepsFlow,
+      requestContext
+    }
+  );
+  return /* @__PURE__ */ jsx(WorkflowNodeFrame, { withoutTopHandle: data.withoutTopHandle, withoutBottomHandle: data.withoutBottomHandle, children: content });
+}
+
+const getScopedStepId = (stepId, workflowName) => stepId && workflowName ? `${workflowName}.${stepId}` : stepId;
+const useWorkflowGraphRuntime = ({
+  edges,
+  workflowName,
+  requestContext
+}) => {
+  const { steps } = useCurrentRun();
+  const workflowRun = useContext(WorkflowRunContext);
+  const workflowSucceeded = workflowName ? steps[workflowName]?.status === "success" || getWorkflowBoundaryData(steps, workflowName).output !== void 0 : workflowRun.result?.status === "success";
+  const stepsFlow = useMemo(() => buildStepsFlow(edges), [edges]);
+  const nodeTypes = useMemo(
+    () => ({
+      [WORKFLOW_STEP_NODE_TYPE]: (props) => /* @__PURE__ */ jsx(
+        WorkflowGraphNode,
+        {
+          parentWorkflowName: workflowName,
+          ...props,
+          stepsFlow,
+          requestContext
+        }
+      ),
+      [WORKFLOW_BOUNDARY_NODE_TYPE]: (props) => /* @__PURE__ */ jsx(WorkflowBoundaryNode, { ...props })
+    }),
+    [stepsFlow, workflowName, requestContext]
+  );
+  const edgeTypes = useMemo(
+    () => ({
+      [WORKFLOW_DATA_EDGE_TYPE]: (props) => /* @__PURE__ */ jsx(WorkflowDataEdge, { parentWorkflowName: workflowName, ...props })
+    }),
+    [workflowName]
+  );
+  const styledEdges = useMemo(
+    () => groupWorkflowEdgeData(edges).map((edge) => {
+      const previousStepId = getScopedStepId(edge.data?.previousStepId, workflowName);
+      const nextStepId = getScopedStepId(edge.data?.nextStepId, workflowName);
+      const previousStepSucceeded = steps[previousStepId ?? ""]?.status === "success";
+      const nextStepStatus = steps[nextStepId ?? ""]?.status;
+      let isFinishedEdge = previousStepSucceeded && nextStepStatus !== "skipped";
+      if (edge.data?.boundaryPayload === "workflow-output") {
+        isFinishedEdge = workflowSucceeded;
+      } else if (edge.data?.boundaryPayload === "workflow-input" || edge.data?.conditionNode) {
+        isFinishedEdge = Boolean(nextStepStatus) && nextStepStatus !== "skipped";
+      }
+      return {
+        ...edge,
+        type: WORKFLOW_DATA_EDGE_TYPE,
+        animated: isFinishedEdge ? false : edge.animated,
+        data: {
+          ...edge.data,
+          edgeStatus: isFinishedEdge ? "success" : "idle"
+        },
+        style: {
+          ...edge.style,
+          stroke: isFinishedEdge ? "#22c55e" : "#8e8e8e",
+          strokeDasharray: isFinishedEdge ? "none" : edge.style?.strokeDasharray
+        }
+      };
+    }),
+    [edges, steps, workflowName, workflowSucceeded]
+  );
+  return { edgeTypes, nodeTypes, stepsFlow, styledEdges };
+};
+
+function WorkflowNestedGraph(props) {
+  const layoutKey = useMemo(
+    () => `${props.workflowName}:${JSON.stringify(props.stepGraph)}`,
+    [props.workflowName, props.stepGraph]
+  );
+  return /* @__PURE__ */ jsx(WorkflowGraphBoundary, { stepGraph: props.stepGraph, children: /* @__PURE__ */ jsx(WorkflowNestedGraphContent, { ...props }) }, layoutKey);
+}
+function WorkflowNestedGraphContent({
+  stepGraph,
+  workflowName,
+  isForEach,
+  embedded,
+  requestContext
+}) {
+  const { nodes, edges, onNodesChange } = useWorkflowGraphNodes(stepGraph);
+  const { steps } = useCurrentRun();
+  const iterations = getWorkflowIterationScopes(Object.keys(steps), workflowName);
+  const [selectedIteration, setSelectedIteration] = useState();
+  const activeIteration = iterations.find((iteration) => iteration.value === selectedIteration) ?? iterations[0];
+  const { edgeTypes, nodeTypes, styledEdges } = useWorkflowGraphRuntime({
+    edges,
+    workflowName: activeIteration?.value ?? workflowName,
+    requestContext
+  });
+  const labeledNodes = useMemo(
+    () => nodes.map((node) => {
+      if (!isForEach || node.type !== WORKFLOW_BOUNDARY_NODE_TYPE) return node;
+      const label = node.data.boundaryRole === "start" ? "Each item" : "Item result";
+      return { ...node, data: { ...node.data, label } };
+    }),
+    [nodes, isForEach]
+  );
+  const groups = useMemo(() => getWorkflowGraphGroups(nodes), [nodes]);
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex size-full flex-col", children: [
+    activeIteration && /* @__PURE__ */ jsxs("div", { className: "nodrag nopan flex items-center gap-3 border-b border-border px-4 py-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: "Iteration" }),
+      /* @__PURE__ */ jsxs(Select, { value: activeIteration.value, onValueChange: setSelectedIteration, items: iterations, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": "Loop item", size: "sm", className: "w-36", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: iterations.map((iteration) => /* @__PURE__ */ jsx(SelectItem, { value: iteration.value, children: iteration.label }, iteration.value)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
+      WorkflowGraphCanvas,
+      {
+        variant: embedded ? "inline" : "nested",
+        groups,
+        nodes: labeledNodes,
+        edges: styledEdges,
+        edgeTypes,
+        nodeTypes,
+        onNodesChange
+      }
+    ) })
+  ] });
+}
+
+export { WorkflowNestedGraph as W, WorkflowBodyGraph as a, WorkflowGraphNode as b, useWorkflowGraphRuntime as u };
+//# sourceMappingURL=workflow-nested-graph-C_H2PZWK.js.map

package/dist/workflow-nested-graph-C_H2PZWK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-nested-graph-C_H2PZWK.js","sources":["../src/domains/workflows/workflow/workflow-body-graph.tsx","../src/domains/workflows/workflow/workflow-graph-node.tsx","../src/domains/workflows/workflow/use-workflow-graph-runtime.tsx","../src/domains/workflows/workflow/workflow-nested-graph.tsx"],"sourcesContent":["import type { SerializedStepFlowEntry } from '@mastra/core/workflows';\nimport { ReactFlowProvider } from '@xyflow/react';\nimport { Repeat2 } from 'lucide-react';\nimport { WorkflowNestedGraph } from './workflow-nested-graph';\nimport { Txt } from '@/ds/components/Txt';\n\nexport function WorkflowBodyGraph({\n  stepGraph,\n  workflowName,\n  isForEach,\n  requestContext,\n}: {\n  stepGraph: SerializedStepFlowEntry[];\n  workflowName: string;\n  isForEach?: boolean;\n  requestContext: Record<string, any>;\n}) {\n  return (\n    <section aria-label={isForEach ? 'Loop body' : 'Nested workflow'} className=\"flex h-full min-h-0 flex-col\">\n      {isForEach && (\n        <div className=\"flex shrink-0 items-start gap-2 px-4 py-3 text-muted-foreground\">\n          <Repeat2 aria-hidden className=\"mt-0.5 size-4 shrink-0 text-muted-foreground\" />\n          <Txt variant=\"meta\">Runs for every item. All items finish before the workflow continues.</Txt>\n        </div>\n      )}\n      <div className=\"min-h-0 flex-1 overflow-hidden\">\n        <ReactFlowProvider>\n          <WorkflowNestedGraph\n            stepGraph={stepGraph}\n            embedded\n            workflowName={workflowName}\n            isForEach={isForEach}\n            requestContext={requestContext}\n          />\n        </ReactFlowProvider>\n      </div>\n    </section>\n  );\n}\n","import type { NodeProps } from '@xyflow/react';\n\nimport { useCurrentRun } from '../context/use-current-run';\nimport type { Step } from '../context/use-current-run';\nimport { useWorkflowSelectedStep } from '../context/use-workflow-selected-step';\nimport { useWorkflowStepDetail } from '../context/workflow-step-detail-context';\nimport { isAwaitingInput, resolveStepSpan } from '../context/workflow-step-timing';\nimport { useWaitingStepKey } from './use-workflow-trigger';\nimport { WorkflowBodyGraph } from './workflow-body-graph';\nimport { getWorkflowCardKind } from './workflow-node-kind';\nimport { WorkflowStepActionBar } from './workflow-step-action-bar';\nimport type { WorkflowStepNode, WorkflowStepNodeData } from './workflow-step-node-utils';\nimport { WorkflowNodeFrame, WorkflowConditionCard, WorkflowStepCardView } from '@/ds/components/Workflow';\nimport type { WorkflowCardDisplayStatus } from '@/ds/components/Workflow';\n\nexport interface WorkflowGraphNodeProps {\n  parentWorkflowName?: string;\n  stepsFlow: Record<string, string[]>;\n  requestContext: Record<string, any>;\n}\n\nconst getDisplayStatus = (step?: Step): { displayStatus: WorkflowCardDisplayStatus; isTripwire: boolean } => {\n  const isTripwire = step?.status === 'failed' && step?.tripwire !== undefined;\n  const displayStatus = step && isAwaitingInput(step) ? 'suspended' : step?.status;\n  return {\n    displayStatus: isTripwire ? 'tripwire' : displayStatus,\n    isTripwire,\n  };\n};\n\nconst WorkflowStepCard = ({\n  data,\n  parentWorkflowName,\n  stepsFlow,\n  requestContext,\n}: {\n  data: WorkflowStepNodeData;\n  parentWorkflowName?: string;\n  stepsFlow: Record<string, string[]>;\n  requestContext: Record<string, any>;\n}) => {\n  const { steps } = useCurrentRun();\n  const { selectedStepId, setSelectedStepId, hoverStepId, setHoverStepId } = useWorkflowSelectedStep();\n  const { showNestedGraph } = useWorkflowStepDetail();\n  const waitingStepKey = useWaitingStepKey();\n  const { label, stepId, description } = data;\n  const mapConfig = data.mapConfig ?? ('step' in data.workflowStep ? data.workflowStep.step?.mapConfig : undefined);\n  const stepGraph =\n    data.stepGraph ??\n    ('step' in data.workflowStep ? data.workflowStep.step?.serializedStepFlow : undefined) ??\n    (data.workflowStep.kind === 'nested-workflow-step' && data.workflowStep.flow.type === 'workflow'\n      ? data.workflowStep.flow.serializedStepFlow\n      : undefined);\n  const fullLabel = parentWorkflowName ? `${parentWorkflowName}.${label}` : label;\n  const stepKey = parentWorkflowName ? `${parentWorkflowName}.${stepId || label}` : stepId || label;\n  const isSelected = selectedStepId === stepKey;\n  const isWaiting = waitingStepKey === stepKey;\n  const isHovered = hoverStepId === stepKey;\n  const step = steps[stepKey];\n  const { displayStatus, isTripwire } = getDisplayStatus(step);\n  const stepSpan = step ? resolveStepSpan(step) : undefined;\n\n  return (\n    <WorkflowStepCardView\n      label={data.mapContext?.label ?? label}\n      nodeKind={getWorkflowCardKind(data.workflowStep)}\n      onSelect={() => setSelectedStepId(stepKey)}\n      initiallyOpen={!parentWorkflowName}\n      body={\n        stepGraph?.length ? (\n          <WorkflowBodyGraph\n            stepGraph={stepGraph}\n            workflowName={fullLabel}\n            isForEach={data.isForEach}\n            requestContext={requestContext}\n          />\n        ) : undefined\n      }\n      description={description ?? data.mapContext?.description}\n      displayStatus={displayStatus}\n      isNestedWorkflowStep={data.workflowStep.kind === 'nested-workflow-step'}\n      stepKey={stepKey}\n      isSelected={isSelected}\n      isWaiting={isWaiting}\n      isHovered={isHovered}\n      onHoverChange={isHovered => setHoverStepId(isHovered ? stepKey : null)}\n      duration={data.duration}\n      date={data.date}\n      isForEach={data.isForEach}\n      foreachProgress={step?.foreachProgress}\n      mapConfig={mapConfig}\n      canSuspend={data.canSuspend}\n      stepGraph={stepGraph}\n      startedAt={stepSpan?.start}\n      endedAt={stepSpan?.end}\n      spansSuspension={stepSpan?.spansSuspension}\n      actionBar={\n        <WorkflowStepActionBar\n          stepName={label}\n          stepId={stepId}\n          resumeData={step?.resumeData}\n          error={isTripwire ? undefined : step?.error}\n          tripwire={isTripwire ? step?.tripwire : undefined}\n          mapConfig={mapConfig}\n          onShowNestedGraph={stepGraph ? () => showNestedGraph({ label, fullStep: fullLabel, stepGraph }) : undefined}\n          stepKey={stepKey}\n          stepsFlow={stepsFlow}\n          requestContext={requestContext}\n        />\n      }\n    />\n  );\n};\n\nconst WorkflowConditionNodeCard = ({\n  data,\n  parentWorkflowName,\n  requestContext,\n}: {\n  data: WorkflowStepNodeData;\n  parentWorkflowName?: string;\n  requestContext: Record<string, any>;\n}) => {\n  const { steps } = useCurrentRun();\n  const conditions = data.conditions ?? [];\n  const previousStepId =\n    data.previousStepId && (parentWorkflowName ? `${parentWorkflowName}.${data.previousStepId}` : data.previousStepId);\n  const previousStep = previousStepId ? steps[previousStepId] : undefined;\n  const { displayStatus: previousDisplayStatus, isTripwire } = getDisplayStatus(previousStep);\n\n  return (\n    <WorkflowConditionCard\n      conditions={conditions}\n      previousDisplayStatus={previousDisplayStatus}\n      actionBar={\n        <WorkflowStepActionBar\n          stepName={data.nextStepId ?? data.label}\n          mapConfig={data.mapConfig}\n          tripwire={isTripwire ? previousStep?.tripwire : undefined}\n          requestContext={requestContext}\n        />\n      }\n    />\n  );\n};\n\nexport function WorkflowGraphNode({\n  data,\n  parentWorkflowName,\n  stepsFlow,\n  requestContext,\n}: NodeProps<WorkflowStepNode> & WorkflowGraphNodeProps) {\n  const content =\n    data.workflowStep.kind === 'conditional' ? (\n      <WorkflowConditionNodeCard data={data} parentWorkflowName={parentWorkflowName} requestContext={requestContext} />\n    ) : (\n      <WorkflowStepCard\n        data={data}\n        parentWorkflowName={parentWorkflowName}\n        stepsFlow={stepsFlow}\n        requestContext={requestContext}\n      />\n    );\n\n  return (\n    <WorkflowNodeFrame withoutTopHandle={data.withoutTopHandle} withoutBottomHandle={data.withoutBottomHandle}>\n      {content}\n    </WorkflowNodeFrame>\n  );\n}\n","import type { EdgeProps, NodeProps } from '@xyflow/react';\nimport { useContext, useMemo } from 'react';\n\nimport { useCurrentRun } from '../context/use-current-run';\nimport { WorkflowRunContext } from '../context/workflow-run-context';\nimport { groupWorkflowEdgeData } from './data/workflow-edge-data-groups';\nimport { buildStepsFlow } from './utils';\nimport type { WorkflowGraphEdge } from './utils';\nimport { getWorkflowBoundaryData } from './workflow-boundary-data';\nimport { WorkflowDataEdge } from './workflow-data-edge';\nimport { WorkflowGraphNode } from './workflow-graph-node';\nimport { WORKFLOW_BOUNDARY_NODE_TYPE, WORKFLOW_STEP_NODE_TYPE } from './workflow-step-node-utils';\nimport type { WorkflowBoundaryNode as WorkflowBoundaryNodeType, WorkflowStepNode } from './workflow-step-node-utils';\nimport { WorkflowBoundaryNode, WORKFLOW_DATA_EDGE_TYPE } from '@/ds/components/Workflow';\n\nconst getScopedStepId = (stepId: string | undefined, workflowName?: string) =>\n  stepId && workflowName ? `${workflowName}.${stepId}` : stepId;\n\nexport const useWorkflowGraphRuntime = ({\n  edges,\n  workflowName,\n  requestContext,\n}: {\n  edges: WorkflowGraphEdge[];\n  workflowName?: string;\n  requestContext: Record<string, any>;\n}) => {\n  const { steps } = useCurrentRun();\n  const workflowRun = useContext(WorkflowRunContext);\n  const workflowSucceeded = workflowName\n    ? steps[workflowName]?.status === 'success' || getWorkflowBoundaryData(steps, workflowName).output !== undefined\n    : workflowRun.result?.status === 'success';\n  const stepsFlow = useMemo(() => buildStepsFlow(edges), [edges]);\n  const nodeTypes = useMemo(\n    () => ({\n      [WORKFLOW_STEP_NODE_TYPE]: (props: NodeProps<WorkflowStepNode>) => (\n        <WorkflowGraphNode\n          parentWorkflowName={workflowName}\n          {...props}\n          stepsFlow={stepsFlow}\n          requestContext={requestContext}\n        />\n      ),\n      [WORKFLOW_BOUNDARY_NODE_TYPE]: (props: NodeProps<WorkflowBoundaryNodeType>) => (\n        <WorkflowBoundaryNode {...props} />\n      ),\n    }),\n    [stepsFlow, workflowName, requestContext],\n  );\n  const edgeTypes = useMemo(\n    () => ({\n      [WORKFLOW_DATA_EDGE_TYPE]: (props: EdgeProps<WorkflowGraphEdge>) => (\n        <WorkflowDataEdge parentWorkflowName={workflowName} {...props} />\n      ),\n    }),\n    [workflowName],\n  );\n  const styledEdges = useMemo(\n    () =>\n      groupWorkflowEdgeData(edges).map(edge => {\n        const previousStepId = getScopedStepId(edge.data?.previousStepId, workflowName);\n        const nextStepId = getScopedStepId(edge.data?.nextStepId, workflowName);\n        const previousStepSucceeded = steps[previousStepId ?? '']?.status === 'success';\n        const nextStepStatus = steps[nextStepId ?? '']?.status;\n        let isFinishedEdge = previousStepSucceeded && nextStepStatus !== 'skipped';\n        if (edge.data?.boundaryPayload === 'workflow-output') {\n          isFinishedEdge = workflowSucceeded;\n        } else if (edge.data?.boundaryPayload === 'workflow-input' || edge.data?.conditionNode) {\n          isFinishedEdge = Boolean(nextStepStatus) && nextStepStatus !== 'skipped';\n        }\n\n        return {\n          ...edge,\n          type: WORKFLOW_DATA_EDGE_TYPE,\n          animated: isFinishedEdge ? false : edge.animated,\n          data: {\n            ...edge.data,\n            edgeStatus: isFinishedEdge ? 'success' : 'idle',\n          },\n          style: {\n            ...edge.style,\n            stroke: isFinishedEdge ? '#22c55e' : '#8e8e8e',\n            strokeDasharray: isFinishedEdge ? 'none' : edge.style?.strokeDasharray,\n          },\n        };\n      }),\n    [edges, steps, workflowName, workflowSucceeded],\n  );\n\n  return { edgeTypes, nodeTypes, stepsFlow, styledEdges };\n};\n","import type { SerializedStepFlowEntry } from '@mastra/core/workflows';\n\nimport { useMemo, useState } from 'react';\nimport { useCurrentRun } from '../context/use-current-run';\nimport { useWorkflowGraphNodes } from './use-workflow-graph-nodes';\nimport { useWorkflowGraphRuntime } from './use-workflow-graph-runtime';\nimport { WorkflowGraphBoundary } from './workflow-graph-boundary';\nimport { getWorkflowGraphGroups } from './workflow-graph-groups';\nimport { getWorkflowIterationScopes } from './workflow-iteration-scopes';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ds/components/Select';\nimport { WorkflowGraphCanvas, WORKFLOW_BOUNDARY_NODE_TYPE } from '@/ds/components/Workflow';\n\nexport interface WorkflowNestedGraphProps {\n  stepGraph: SerializedStepFlowEntry[];\n  workflowName: string;\n  isForEach?: boolean;\n  embedded?: boolean;\n  requestContext: Record<string, any>;\n}\n\nexport function WorkflowNestedGraph(props: WorkflowNestedGraphProps) {\n  const layoutKey = useMemo(\n    () => `${props.workflowName}:${JSON.stringify(props.stepGraph)}`,\n    [props.workflowName, props.stepGraph],\n  );\n  return (\n    <WorkflowGraphBoundary key={layoutKey} stepGraph={props.stepGraph}>\n      <WorkflowNestedGraphContent {...props} />\n    </WorkflowGraphBoundary>\n  );\n}\n\nfunction WorkflowNestedGraphContent({\n  stepGraph,\n  workflowName,\n  isForEach,\n  embedded,\n  requestContext,\n}: WorkflowNestedGraphProps) {\n  const { nodes, edges, onNodesChange } = useWorkflowGraphNodes(stepGraph);\n  const { steps } = useCurrentRun();\n  const iterations = getWorkflowIterationScopes(Object.keys(steps), workflowName);\n  const [selectedIteration, setSelectedIteration] = useState<string>();\n  const activeIteration = iterations.find(iteration => iteration.value === selectedIteration) ?? iterations[0];\n\n  const { edgeTypes, nodeTypes, styledEdges } = useWorkflowGraphRuntime({\n    edges,\n    workflowName: activeIteration?.value ?? workflowName,\n    requestContext,\n  });\n\n  const labeledNodes = useMemo(\n    () =>\n      nodes.map(node => {\n        if (!isForEach || node.type !== WORKFLOW_BOUNDARY_NODE_TYPE) return node;\n        const label = node.data.boundaryRole === 'start' ? 'Each item' : 'Item result';\n        return { ...node, data: { ...node.data, label } };\n      }),\n    [nodes, isForEach],\n  );\n  const groups = useMemo(() => getWorkflowGraphGroups(nodes), [nodes]);\n\n  return (\n    <div className=\"relative flex size-full flex-col\">\n      {activeIteration && (\n        <div className=\"nodrag nopan flex items-center gap-3 border-b border-border px-4 py-2\">\n          <span className=\"text-caption text-muted-foreground\">Iteration</span>\n          <Select value={activeIteration.value} onValueChange={setSelectedIteration} items={iterations}>\n            <SelectTrigger aria-label=\"Loop item\" size=\"sm\" className=\"w-36\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {iterations.map(iteration => (\n                <SelectItem key={iteration.value} value={iteration.value}>\n                  {iteration.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      )}\n      <div className=\"min-h-0 flex-1\">\n        <WorkflowGraphCanvas\n          variant={embedded ? 'inline' : 'nested'}\n          groups={groups}\n          nodes={labeledNodes}\n          edges={styledEdges}\n          edgeTypes={edgeTypes}\n          nodeTypes={nodeTypes}\n          onNodesChange={onNodesChange}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["isHovered"],"mappings":"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"}