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

package/dist/domains/workflows/components/workflow-information.es.js

@@ -0,0 +1,181 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronRight, Plus } from 'lucide-react';
+import { useContext, useEffect, useState } from 'react';
+import { useWorkflowSelectedStep } from '../context/use-workflow-selected-step.es.js';
+import { WorkflowRunContext } from '../context/workflow-run-context.es.js';
+import { WorkflowRunDetail } from '../runs/workflow-run-details.es.js';
+import { WorkflowRecentRuns } from '../runs/workflow-run-list.es.js';
+import { WorkflowRunStatusBadge } from '../workflow/workflow-run-header.es.js';
+import { WorkflowTrigger } from '../workflow/workflow-trigger.es.js';
+import { panelSurfaceStyle, WorkflowPanelResizeHandle } from './workflow-layout.es.js';
+import { useWorkflow } from '../hooks/use-workflow.es.js';
+import { B as Button } from '../../../Button-B8nF87ai.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../../../collapsible-DhhP5p1j.js';
+import { S as ScrollArea } from '../../../scroll-area-DyTZoISq.js';
+import { useLinkComponent } from '../../../lib/framework.es.js';
+import { c as cn } from '../../../cn-65Adrsfj.js';
+import { t as toast } from '../../../toast-c5kCpyWt.js';
+
+const FLOATING_PANEL_SURFACE = cn(panelSurfaceStyle, "pointer-events-auto");
+function FloatingPanel({ className, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex min-h-0 min-w-0 flex-col", className), children: [
+    children,
+    /* @__PURE__ */ jsx(WorkflowPanelResizeHandle, {})
+  ] });
+}
+function NewWorkflowRunButton({ workflowId, onClick }) {
+  const { Link, paths } = useLinkComponent();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      render: /* @__PURE__ */ jsx(Link, { href: `${paths.workflowLink(workflowId)}/graph` }),
+      variant: "ghost",
+      size: "icon-md",
+      tooltip: "New workflow run",
+      onClick,
+      children: /* @__PURE__ */ jsx(Plus, {})
+    }
+  );
+}
+function WorkflowInformationTopSection({
+  children,
+  workflowId,
+  showNewRunButton,
+  onNewRun
+}) {
+  const { result } = useContext(WorkflowRunContext);
+  const [isOpen, setIsOpen] = useState(true);
+  return /* @__PURE__ */ jsx(FloatingPanel, { className: "max-h-[75%] flex-initial", children: /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      render: /* @__PURE__ */ jsx("section", {}),
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      "data-testid": "workflow-information-top-section",
+      className: cn(FLOATING_PANEL_SURFACE, "flex min-h-0 min-w-0 flex-col overflow-hidden"),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 pr-2", children: [
+          /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "flex min-w-0 flex-1 items-center gap-2 px-4 py-3 text-column text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground motion-reduce:transition-none" }),
+            /* @__PURE__ */ jsx("span", { children: "Workflow run" }),
+            !isOpen && result?.status && /* @__PURE__ */ jsx(WorkflowRunStatusBadge, { status: result.status })
+          ] }),
+          showNewRunButton && /* @__PURE__ */ jsx(
+            NewWorkflowRunButton,
+            {
+              workflowId,
+              onClick: () => {
+                setIsOpen(true);
+                onNewRun();
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { keepMounted: true, fill: true, className: "flex min-h-0 flex-col", children: /* @__PURE__ */ jsx(
+          ScrollArea,
+          {
+            "data-testid": "workflow-information-top-scroll-area",
+            className: "min-h-0 flex-1 border-t border-border/50",
+            viewPortClassName: "h-full",
+            mask: { top: false, bottom: false },
+            children
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function InitialWorkflowSidebar(props) {
+  return /* @__PURE__ */ jsx(WorkflowTrigger, { ...props });
+}
+function RunWorkflowSidebar({ runId, observeWorkflowStream, ...props }) {
+  return /* @__PURE__ */ jsx(WorkflowRunDetail, { ...props, runId, observeWorkflowStream });
+}
+function RecentWorkflowRunsSection({
+  workflowId,
+  activeRunId,
+  canDelete
+}) {
+  return /* @__PURE__ */ jsx(FloatingPanel, { className: "mt-auto max-h-[min(35%,280px)] shrink-0", children: /* @__PURE__ */ jsx("section", { className: cn(FLOATING_PANEL_SURFACE, "flex min-h-0 min-w-0 flex-col overflow-hidden"), children: /* @__PURE__ */ jsx(WorkflowRecentRuns, { workflowId, runId: activeRunId, canDelete }) }) });
+}
+function WorkflowInformation({
+  workflowId,
+  initialRunId,
+  requestContext,
+  onRequestContextChange,
+  canExecute,
+  canDelete
+}) {
+  const { data: workflow, isLoading, error } = useWorkflow(workflowId, requestContext);
+  const {
+    createWorkflowRun,
+    streamWorkflow,
+    isStreamingWorkflow,
+    observeWorkflowStream,
+    resumeWorkflow,
+    cancelWorkflowRun,
+    isCancellingWorkflowRun,
+    clearData,
+    runId: contextRunId
+  } = useContext(WorkflowRunContext);
+  const { setSelectedStepId } = useWorkflowSelectedStep();
+  const activeRunId = initialRunId || contextRunId;
+  const actionProps = {
+    workflowId,
+    workflow: workflow ?? void 0,
+    isLoading,
+    createWorkflowRun,
+    streamWorkflow,
+    resumeWorkflow,
+    isStreamingWorkflow,
+    isCancellingWorkflowRun,
+    cancelWorkflowRun,
+    requestContext,
+    onRequestContextChange,
+    canExecute
+  };
+  useEffect(() => {
+    if (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to load workflow";
+      toast.error(`Error loading workflow: ${errorMessage}`);
+    }
+  }, [error]);
+  if (error) {
+    return null;
+  }
+  if (!workflowId) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "workflow-information-panel",
+        className: "workflow-information-panel pointer-events-none flex size-full min-h-0 flex-col gap-2 p-2"
+      }
+    );
+  }
+  const resetToNewRun = () => {
+    clearData();
+    setSelectedStepId(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "workflow-information-panel",
+      className: "workflow-information-panel pointer-events-none flex size-full min-h-0 flex-col gap-2 p-2",
+      children: [
+        /* @__PURE__ */ jsx(
+          WorkflowInformationTopSection,
+          {
+            workflowId,
+            showNewRunButton: Boolean(activeRunId),
+            onNewRun: resetToNewRun,
+            children: initialRunId ? /* @__PURE__ */ jsx(RunWorkflowSidebar, { ...actionProps, runId: initialRunId, observeWorkflowStream }) : /* @__PURE__ */ jsx(InitialWorkflowSidebar, { ...actionProps })
+          }
+        ),
+        /* @__PURE__ */ jsx(RecentWorkflowRunsSection, { workflowId, activeRunId, canDelete })
+      ]
+    }
+  );
+}
+
+export { WorkflowInformation };
+//# sourceMappingURL=workflow-information.es.js.map

package/dist/domains/workflows/components/workflow-information.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-information.es.js","sources":["../../../../src/domains/workflows/components/workflow-information.tsx"],"sourcesContent":["import type { GetWorkflowResponse } from '@mastra/client-js';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport type { ContextType, ReactNode } from 'react';\nimport { useEffect, useContext, useState } from 'react';\n\nimport { useWorkflowSelectedStep } from '../context/use-workflow-selected-step';\nimport { WorkflowRunContext } from '../context/workflow-run-context';\nimport { WorkflowRunDetail } from '../runs/workflow-run-details';\nimport { WorkflowRecentRuns } from '../runs/workflow-run-list';\nimport { WorkflowRunStatusBadge } from '../workflow/workflow-run-header';\nimport { WorkflowTrigger } from '../workflow/workflow-trigger';\nimport { panelSurfaceStyle, WorkflowPanelResizeHandle } from './workflow-layout';\n\nimport { useWorkflow } from '@/domains/workflows/hooks/use-workflow';\nimport { Button } from '@/ds/components/Button';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/ds/components/Collapsible';\nimport { ScrollArea } from '@/ds/components/ScrollArea';\nimport { useLinkComponent } from '@/lib/framework';\nimport { cn } from '@/utils/cn';\nimport { toast } from '@/utils/toast';\n\nexport interface WorkflowInformationProps {\n  workflowId: string;\n  initialRunId?: string;\n  requestContext: Record<string, any>;\n  onRequestContextChange: (values: Record<string, any>) => void;\n  canExecute: boolean;\n  canDelete: boolean;\n}\n\ntype WorkflowActionProps = Pick<\n  ContextType<typeof WorkflowRunContext>,\n  | 'createWorkflowRun'\n  | 'streamWorkflow'\n  | 'resumeWorkflow'\n  | 'isStreamingWorkflow'\n  | 'isCancellingWorkflowRun'\n  | 'cancelWorkflowRun'\n>;\n\ntype InitialWorkflowSidebarProps = WorkflowActionProps & {\n  workflowId: string;\n  requestContext: Record<string, any>;\n  onRequestContextChange: (values: Record<string, any>) => void;\n  canExecute: boolean;\n  workflow?: GetWorkflowResponse;\n  isLoading: boolean;\n};\n\ntype RunWorkflowSidebarProps = InitialWorkflowSidebarProps & {\n  runId: string;\n  observeWorkflowStream?: ContextType<typeof WorkflowRunContext>['observeWorkflowStream'];\n};\n\nconst FLOATING_PANEL_SURFACE = cn(panelSurfaceStyle, 'pointer-events-auto');\n\nfunction FloatingPanel({ className, children }: { className: string; children: ReactNode }) {\n  return (\n    <div className={cn('relative flex min-h-0 min-w-0 flex-col', className)}>\n      {children}\n      <WorkflowPanelResizeHandle />\n    </div>\n  );\n}\n\nfunction NewWorkflowRunButton({ workflowId, onClick }: { workflowId: string; onClick: () => void }) {\n  const { Link, paths } = useLinkComponent();\n\n  return (\n    <Button\n      render={<Link href={`${paths.workflowLink(workflowId)}/graph`} />}\n\n      variant=\"ghost\"\n      size=\"icon-md\"\n      tooltip=\"New workflow run\"\n      onClick={onClick}\n    >\n      <Plus />\n    </Button>\n  );\n}\n\nfunction WorkflowInformationTopSection({\n  children,\n  workflowId,\n  showNewRunButton,\n  onNewRun,\n}: {\n  children: ReactNode;\n  workflowId: string;\n  showNewRunButton: boolean;\n  onNewRun: () => void;\n}) {\n  const { result } = useContext(WorkflowRunContext);\n  const [isOpen, setIsOpen] = useState(true);\n  return (\n    <FloatingPanel className=\"max-h-[75%] flex-initial\">\n      <Collapsible\n        render={<section />}\n        open={isOpen}\n        onOpenChange={setIsOpen}\n        data-testid=\"workflow-information-top-section\"\n        className={cn(FLOATING_PANEL_SURFACE, 'flex min-h-0 min-w-0 flex-col overflow-hidden')}\n      >\n        <div className=\"flex shrink-0 items-center gap-1 pr-2\">\n          <CollapsibleTrigger className=\"flex min-w-0 flex-1 items-center gap-2 px-4 py-3 text-column text-muted-foreground\">\n            <ChevronRight aria-hidden className=\"size-4 shrink-0 text-muted-foreground motion-reduce:transition-none\" />\n            <span>Workflow run</span>\n            {!isOpen && result?.status && <WorkflowRunStatusBadge status={result.status} />}\n          </CollapsibleTrigger>\n          {showNewRunButton && (\n            <NewWorkflowRunButton\n              workflowId={workflowId}\n              onClick={() => {\n                setIsOpen(true);\n                onNewRun();\n              }}\n            />\n          )}\n        </div>\n        <CollapsibleContent keepMounted fill className=\"flex min-h-0 flex-col\">\n          <ScrollArea\n            data-testid=\"workflow-information-top-scroll-area\"\n            className=\"min-h-0 flex-1 border-t border-border/50\"\n            viewPortClassName=\"h-full\"\n            mask={{ top: false, bottom: false }}\n          >\n            {children}\n          </ScrollArea>\n        </CollapsibleContent>\n      </Collapsible>\n    </FloatingPanel>\n  );\n}\n\nfunction InitialWorkflowSidebar(props: InitialWorkflowSidebarProps) {\n  return <WorkflowTrigger {...props} />;\n}\n\nfunction RunWorkflowSidebar({ runId, observeWorkflowStream, ...props }: RunWorkflowSidebarProps) {\n  return <WorkflowRunDetail {...props} runId={runId} observeWorkflowStream={observeWorkflowStream} />;\n}\n\nfunction RecentWorkflowRunsSection({\n  workflowId,\n  activeRunId,\n  canDelete,\n}: {\n  workflowId: string;\n  activeRunId?: string;\n  canDelete: boolean;\n}) {\n  return (\n    <FloatingPanel className=\"mt-auto max-h-[min(35%,280px)] shrink-0\">\n      <section className={cn(FLOATING_PANEL_SURFACE, 'flex min-h-0 min-w-0 flex-col overflow-hidden')}>\n        <WorkflowRecentRuns workflowId={workflowId} runId={activeRunId} canDelete={canDelete} />\n      </section>\n    </FloatingPanel>\n  );\n}\n\nexport function WorkflowInformation({\n  workflowId,\n  initialRunId,\n  requestContext,\n  onRequestContextChange,\n  canExecute,\n  canDelete,\n}: WorkflowInformationProps) {\n  const { data: workflow, isLoading, error } = useWorkflow(workflowId, requestContext);\n\n  const {\n    createWorkflowRun,\n    streamWorkflow,\n    isStreamingWorkflow,\n    observeWorkflowStream,\n    resumeWorkflow,\n    cancelWorkflowRun,\n    isCancellingWorkflowRun,\n    clearData,\n    runId: contextRunId,\n  } = useContext(WorkflowRunContext);\n\n  const { setSelectedStepId } = useWorkflowSelectedStep();\n\n  const activeRunId = initialRunId || contextRunId;\n\n  const actionProps = {\n    workflowId,\n    workflow: workflow ?? undefined,\n    isLoading,\n    createWorkflowRun,\n    streamWorkflow,\n    resumeWorkflow,\n    isStreamingWorkflow,\n    isCancellingWorkflowRun,\n    cancelWorkflowRun,\n    requestContext,\n    onRequestContextChange,\n    canExecute,\n  };\n\n  useEffect(() => {\n    if (error) {\n      const errorMessage = error instanceof Error ? error.message : 'Failed to load workflow';\n      toast.error(`Error loading workflow: ${errorMessage}`);\n    }\n  }, [error]);\n\n  if (error) {\n    return null;\n  }\n\n  if (!workflowId) {\n    return (\n      <div\n        data-testid=\"workflow-information-panel\"\n        className=\"workflow-information-panel pointer-events-none flex size-full min-h-0 flex-col gap-2 p-2\"\n      />\n    );\n  }\n\n  const resetToNewRun = () => {\n    clearData();\n    setSelectedStepId(null);\n  };\n\n  return (\n    <div\n      data-testid=\"workflow-information-panel\"\n      className=\"workflow-information-panel pointer-events-none flex size-full min-h-0 flex-col gap-2 p-2\"\n    >\n      <WorkflowInformationTopSection\n        workflowId={workflowId}\n        showNewRunButton={Boolean(activeRunId)}\n        onNewRun={resetToNewRun}\n      >\n        {initialRunId ? (\n          <RunWorkflowSidebar {...actionProps} runId={initialRunId} observeWorkflowStream={observeWorkflowStream} />\n        ) : (\n          <InitialWorkflowSidebar {...actionProps} />\n        )}\n      </WorkflowInformationTopSection>\n\n      <RecentWorkflowRunsSection workflowId={workflowId} activeRunId={activeRunId} canDelete={canDelete} />\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/domains/workflows/components/workflow-layout.cjs.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('../../../workflow-layout.css');const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const v4 = require('zod/v4');
+const workflowCanvasInset = require('../../../workflow-canvas-inset-CMasaX9u.cjs');
+const primitives_raisedSurface = require('../../../primitives/raised-surface.cjs.js');
+const primitives_resizeHandleIndicator = require('../../../primitives/resize-handle-indicator.cjs.js');
+const hooks_useIsMobile = require('../../../hooks/use-is-mobile.cjs.js');
+const hooks_useLocalStorageState = require('../../../hooks/use-local-storage-state.cjs.js');
+
+const LEFT_PANEL_MIN_WIDTH = 380;
+const LEFT_PANEL_WIDTH_STORAGE_KEY = "workflow-canvas-left-panel-width";
+const PANEL_GUTTER = 8;
+const KEYBOARD_RESIZE_STEP = 16;
+const panelSurfaceStyle = `${primitives_raisedSurface.raisedSurfaceStyle} rounded-studio-panel`;
+const WorkflowPanelResizeContext = React.createContext(void 0);
+function clampPanelWidth(candidate, maxWidth) {
+  return Math.max(LEFT_PANEL_MIN_WIDTH, Math.min(candidate, maxWidth));
+}
+function WorkflowPanelResizeHandle() {
+  const resize = React.useContext(WorkflowPanelResizeContext);
+  if (!resize) return null;
+  const beginResize = (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const followPointer = (event) => {
+    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+    resize.resizeTo(event.clientX);
+  };
+  const nudgeWithArrows = (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    resize.resizeBy(event.key === "ArrowRight" ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": "Resize panel",
+      "aria-valuenow": resize.width,
+      "aria-valuemin": LEFT_PANEL_MIN_WIDTH,
+      tabIndex: 0,
+      className: "group/resize pointer-events-auto absolute inset-y-0 left-full flex w-2 cursor-col-resize touch-none items-center justify-center outline-hidden",
+      onPointerDown: beginResize,
+      onPointerMove: followPointer,
+      onKeyDown: nudgeWithArrows,
+      children: /* @__PURE__ */ jsxRuntime.jsx(primitives_resizeHandleIndicator.ResizeHandleIndicator, { className: "group-hover/resize:opacity-100 group-focus-visible/resize:via-accent1 group-focus-visible/resize:opacity-100 group-active/resize:via-foreground/45 group-active/resize:opacity-100" })
+    }
+  );
+}
+const WorkflowLayout = ({ children, leftSlot }) => {
+  const isDocked = hooks_useIsMobile.useIsMobile();
+  const canvasRef = React.useRef(null);
+  const [storedWidth, setStoredWidth] = hooks_useLocalStorageState.useLocalStorageState({
+    initialKey: LEFT_PANEL_WIDTH_STORAGE_KEY,
+    defaultValue: LEFT_PANEL_MIN_WIDTH,
+    schema: v4.z.number()
+  });
+  const [maxWidth, setMaxWidth] = React.useState(Number.POSITIVE_INFINITY);
+  React.useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const measureHalfCanvas = () => setMaxWidth(Math.floor(canvas.getBoundingClientRect().width / 2));
+    measureHalfCanvas();
+    const observer = new ResizeObserver(measureHalfCanvas);
+    observer.observe(canvas);
+    return () => observer.disconnect();
+  }, [isDocked]);
+  if (isDocked) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative min-h-45 min-w-0 flex-1 overflow-hidden", children }),
+      leftSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 min-w-0 basis-[44%] overflow-hidden bg-background", children: leftSlot })
+    ] });
+  }
+  const width = clampPanelWidth(storedWidth, maxWidth);
+  const resizeTo = (clientX) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    setStoredWidth(clampPanelWidth(clientX - canvas.getBoundingClientRect().left, maxWidth));
+  };
+  const resizeBy = (delta) => setStoredWidth(clampPanelWidth(width + delta, maxWidth));
+  const canvasInset = leftSlot ? width - PANEL_GUTTER : 0;
+  const style = { "--workflow-left-panel-width": `${canvasInset}px` };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative min-h-0 min-w-0 flex-1 overflow-hidden", style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(workflowCanvasInset.WorkflowCanvasInsetContext, { value: canvasInset, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: canvasRef, className: "absolute inset-0 min-h-0 min-w-0 overflow-hidden", children }) }),
+    leftSlot && /* @__PURE__ */ jsxRuntime.jsx(WorkflowPanelResizeContext, { value: { width, resizeTo, resizeBy }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 z-10 min-w-0", style: { width }, children: leftSlot }) })
+  ] });
+};
+
+exports.WorkflowLayout = WorkflowLayout;
+exports.WorkflowPanelResizeHandle = WorkflowPanelResizeHandle;
+exports.panelSurfaceStyle = panelSurfaceStyle;
+//# sourceMappingURL=workflow-layout.cjs.js.map

package/dist/domains/workflows/components/workflow-layout.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-layout.cjs.js","sources":["../../../../src/domains/workflows/components/workflow-layout.tsx"],"sourcesContent":["import { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';\nimport type { CSSProperties, KeyboardEvent, PointerEvent } from 'react';\nimport { z } from 'zod/v4';\nimport { WorkflowCanvasInsetContext } from '@/ds/components/Workflow';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { ResizeHandleIndicator } from '@/ds/primitives/resize-handle-indicator';\nimport { useIsMobile } from '@/hooks/use-is-mobile';\nimport { useLocalStorageState } from '@/hooks/use-local-storage-state';\nimport './workflow-layout.css';\n\nexport interface WorkflowLayoutProps {\n  children: React.ReactNode;\n  leftSlot?: React.ReactNode;\n}\n\nconst LEFT_PANEL_MIN_WIDTH = 380;\nconst LEFT_PANEL_WIDTH_STORAGE_KEY = 'workflow-canvas-left-panel-width';\nconst PANEL_GUTTER = 8;\nconst KEYBOARD_RESIZE_STEP = 16;\n\n/**\n * The one surface for the workflow canvas' floating panels — information rail,\n * suspended steps, data inspector. `raisedSurfaceStyle` carries the rim, so the\n * panels never draw a border of their own; the radius belongs to the family.\n */\nexport const panelSurfaceStyle = `${raisedSurfaceStyle} rounded-studio-panel`;\n\ninterface WorkflowLayoutStyle extends CSSProperties {\n  '--workflow-left-panel-width': string;\n}\n\ninterface PanelResize {\n  width: number;\n  resizeTo: (clientX: number) => void;\n  resizeBy: (delta: number) => void;\n}\n\nconst WorkflowPanelResizeContext = createContext<PanelResize | undefined>(undefined);\n\nfunction clampPanelWidth(candidate: number, maxWidth: number) {\n  return Math.max(LEFT_PANEL_MIN_WIDTH, Math.min(candidate, maxWidth));\n}\n\nexport function WorkflowPanelResizeHandle() {\n  const resize = useContext(WorkflowPanelResizeContext);\n  if (!resize) return null;\n\n  const beginResize = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return;\n    event.preventDefault();\n    event.currentTarget.setPointerCapture(event.pointerId);\n  };\n  const followPointer = (event: PointerEvent<HTMLDivElement>) => {\n    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;\n    resize.resizeTo(event.clientX);\n  };\n  const nudgeWithArrows = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;\n    event.preventDefault();\n    resize.resizeBy(event.key === 'ArrowRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP);\n  };\n\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label=\"Resize panel\"\n      aria-valuenow={resize.width}\n      aria-valuemin={LEFT_PANEL_MIN_WIDTH}\n      tabIndex={0}\n      className=\"group/resize pointer-events-auto absolute inset-y-0 left-full flex w-2 cursor-col-resize touch-none items-center justify-center outline-hidden\"\n      onPointerDown={beginResize}\n      onPointerMove={followPointer}\n      onKeyDown={nudgeWithArrows}\n    >\n      <ResizeHandleIndicator className=\"group-hover/resize:opacity-100 group-focus-visible/resize:via-accent1 group-focus-visible/resize:opacity-100 group-active/resize:via-foreground/45 group-active/resize:opacity-100\" />\n    </div>\n  );\n}\n\nexport const WorkflowLayout = ({ children, leftSlot }: WorkflowLayoutProps) => {\n  const isDocked = useIsMobile();\n  const canvasRef = useRef<HTMLDivElement>(null);\n  const [storedWidth, setStoredWidth] = useLocalStorageState({\n    initialKey: LEFT_PANEL_WIDTH_STORAGE_KEY,\n    defaultValue: LEFT_PANEL_MIN_WIDTH,\n    schema: z.number(),\n  });\n  const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);\n\n  useLayoutEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const measureHalfCanvas = () => setMaxWidth(Math.floor(canvas.getBoundingClientRect().width / 2));\n    measureHalfCanvas();\n    const observer = new ResizeObserver(measureHalfCanvas);\n    observer.observe(canvas);\n    return () => observer.disconnect();\n  }, [isDocked]);\n\n  if (isDocked) {\n    return (\n      <div className=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">\n        <div className=\"relative min-h-45 min-w-0 flex-1 overflow-hidden\">{children}</div>\n        {leftSlot && <div className=\"min-h-0 min-w-0 basis-[44%] overflow-hidden bg-background\">{leftSlot}</div>}\n      </div>\n    );\n  }\n\n  const width = clampPanelWidth(storedWidth, maxWidth);\n  const resizeTo = (clientX: number) => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    setStoredWidth(clampPanelWidth(clientX - canvas.getBoundingClientRect().left, maxWidth));\n  };\n  const resizeBy = (delta: number) => setStoredWidth(clampPanelWidth(width + delta, maxWidth));\n\n  const canvasInset = leftSlot ? width - PANEL_GUTTER : 0;\n  const style: WorkflowLayoutStyle = { '--workflow-left-panel-width': `${canvasInset}px` };\n\n  return (\n    <div className=\"relative min-h-0 min-w-0 flex-1 overflow-hidden\" style={style}>\n      <WorkflowCanvasInsetContext value={canvasInset}>\n        <div ref={canvasRef} className=\"absolute inset-0 min-h-0 min-w-0 overflow-hidden\">\n          {children}\n        </div>\n      </WorkflowCanvasInsetContext>\n\n      {leftSlot && (\n        <WorkflowPanelResizeContext value={{ width, resizeTo, resizeBy }}>\n          <div className=\"pointer-events-none absolute inset-y-0 left-0 z-10 min-w-0\" style={{ width }}>\n            {leftSlot}\n          </div>\n        </WorkflowPanelResizeContext>\n      )}\n    </div>\n  );\n};\n"],"names":["raisedSurfaceStyle","createContext","useContext","jsx","ResizeHandleIndicator","useIsMobile","useRef","useLocalStorageState","z","useState","useLayoutEffect","jsxs","WorkflowCanvasInsetContext"],"mappings":"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"}

package/dist/domains/workflows/components/workflow-layout.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/workflows/components/workflow-layout'
+export {}

package/dist/domains/workflows/components/workflow-layout.es.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useRef, useState, useLayoutEffect, useContext } from 'react';
+import { z } from 'zod/v4';
+import { W as WorkflowCanvasInsetContext } from '../../../workflow-canvas-inset-23mBz2N6.js';
+import { raisedSurfaceStyle } from '../../../primitives/raised-surface.es.js';
+import { ResizeHandleIndicator } from '../../../primitives/resize-handle-indicator.es.js';
+import { useIsMobile } from '../../../hooks/use-is-mobile.es.js';
+import { useLocalStorageState } from '../../../hooks/use-local-storage-state.es.js';
+
+import '../../../workflow-layout.css';const LEFT_PANEL_MIN_WIDTH = 380;
+const LEFT_PANEL_WIDTH_STORAGE_KEY = "workflow-canvas-left-panel-width";
+const PANEL_GUTTER = 8;
+const KEYBOARD_RESIZE_STEP = 16;
+const panelSurfaceStyle = `${raisedSurfaceStyle} rounded-studio-panel`;
+const WorkflowPanelResizeContext = createContext(void 0);
+function clampPanelWidth(candidate, maxWidth) {
+  return Math.max(LEFT_PANEL_MIN_WIDTH, Math.min(candidate, maxWidth));
+}
+function WorkflowPanelResizeHandle() {
+  const resize = useContext(WorkflowPanelResizeContext);
+  if (!resize) return null;
+  const beginResize = (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const followPointer = (event) => {
+    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+    resize.resizeTo(event.clientX);
+  };
+  const nudgeWithArrows = (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    resize.resizeBy(event.key === "ArrowRight" ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": "Resize panel",
+      "aria-valuenow": resize.width,
+      "aria-valuemin": LEFT_PANEL_MIN_WIDTH,
+      tabIndex: 0,
+      className: "group/resize pointer-events-auto absolute inset-y-0 left-full flex w-2 cursor-col-resize touch-none items-center justify-center outline-hidden",
+      onPointerDown: beginResize,
+      onPointerMove: followPointer,
+      onKeyDown: nudgeWithArrows,
+      children: /* @__PURE__ */ jsx(ResizeHandleIndicator, { className: "group-hover/resize:opacity-100 group-focus-visible/resize:via-accent1 group-focus-visible/resize:opacity-100 group-active/resize:via-foreground/45 group-active/resize:opacity-100" })
+    }
+  );
+}
+const WorkflowLayout = ({ children, leftSlot }) => {
+  const isDocked = useIsMobile();
+  const canvasRef = useRef(null);
+  const [storedWidth, setStoredWidth] = useLocalStorageState({
+    initialKey: LEFT_PANEL_WIDTH_STORAGE_KEY,
+    defaultValue: LEFT_PANEL_MIN_WIDTH,
+    schema: z.number()
+  });
+  const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const measureHalfCanvas = () => setMaxWidth(Math.floor(canvas.getBoundingClientRect().width / 2));
+    measureHalfCanvas();
+    const observer = new ResizeObserver(measureHalfCanvas);
+    observer.observe(canvas);
+    return () => observer.disconnect();
+  }, [isDocked]);
+  if (isDocked) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative min-h-45 min-w-0 flex-1 overflow-hidden", children }),
+      leftSlot && /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0 basis-[44%] overflow-hidden bg-background", children: leftSlot })
+    ] });
+  }
+  const width = clampPanelWidth(storedWidth, maxWidth);
+  const resizeTo = (clientX) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    setStoredWidth(clampPanelWidth(clientX - canvas.getBoundingClientRect().left, maxWidth));
+  };
+  const resizeBy = (delta) => setStoredWidth(clampPanelWidth(width + delta, maxWidth));
+  const canvasInset = leftSlot ? width - PANEL_GUTTER : 0;
+  const style = { "--workflow-left-panel-width": `${canvasInset}px` };
+  return /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 min-w-0 flex-1 overflow-hidden", style, children: [
+    /* @__PURE__ */ jsx(WorkflowCanvasInsetContext, { value: canvasInset, children: /* @__PURE__ */ jsx("div", { ref: canvasRef, className: "absolute inset-0 min-h-0 min-w-0 overflow-hidden", children }) }),
+    leftSlot && /* @__PURE__ */ jsx(WorkflowPanelResizeContext, { value: { width, resizeTo, resizeBy }, children: /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 z-10 min-w-0", style: { width }, children: leftSlot }) })
+  ] });
+};
+
+export { WorkflowLayout, WorkflowPanelResizeHandle, panelSurfaceStyle };
+//# sourceMappingURL=workflow-layout.es.js.map

package/dist/domains/workflows/components/workflow-layout.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-layout.es.js","sources":["../../../../src/domains/workflows/components/workflow-layout.tsx"],"sourcesContent":["import { createContext, useContext, useLayoutEffect, useRef, useState } from 'react';\nimport type { CSSProperties, KeyboardEvent, PointerEvent } from 'react';\nimport { z } from 'zod/v4';\nimport { WorkflowCanvasInsetContext } from '@/ds/components/Workflow';\nimport { raisedSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { ResizeHandleIndicator } from '@/ds/primitives/resize-handle-indicator';\nimport { useIsMobile } from '@/hooks/use-is-mobile';\nimport { useLocalStorageState } from '@/hooks/use-local-storage-state';\nimport './workflow-layout.css';\n\nexport interface WorkflowLayoutProps {\n  children: React.ReactNode;\n  leftSlot?: React.ReactNode;\n}\n\nconst LEFT_PANEL_MIN_WIDTH = 380;\nconst LEFT_PANEL_WIDTH_STORAGE_KEY = 'workflow-canvas-left-panel-width';\nconst PANEL_GUTTER = 8;\nconst KEYBOARD_RESIZE_STEP = 16;\n\n/**\n * The one surface for the workflow canvas' floating panels — information rail,\n * suspended steps, data inspector. `raisedSurfaceStyle` carries the rim, so the\n * panels never draw a border of their own; the radius belongs to the family.\n */\nexport const panelSurfaceStyle = `${raisedSurfaceStyle} rounded-studio-panel`;\n\ninterface WorkflowLayoutStyle extends CSSProperties {\n  '--workflow-left-panel-width': string;\n}\n\ninterface PanelResize {\n  width: number;\n  resizeTo: (clientX: number) => void;\n  resizeBy: (delta: number) => void;\n}\n\nconst WorkflowPanelResizeContext = createContext<PanelResize | undefined>(undefined);\n\nfunction clampPanelWidth(candidate: number, maxWidth: number) {\n  return Math.max(LEFT_PANEL_MIN_WIDTH, Math.min(candidate, maxWidth));\n}\n\nexport function WorkflowPanelResizeHandle() {\n  const resize = useContext(WorkflowPanelResizeContext);\n  if (!resize) return null;\n\n  const beginResize = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return;\n    event.preventDefault();\n    event.currentTarget.setPointerCapture(event.pointerId);\n  };\n  const followPointer = (event: PointerEvent<HTMLDivElement>) => {\n    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;\n    resize.resizeTo(event.clientX);\n  };\n  const nudgeWithArrows = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;\n    event.preventDefault();\n    resize.resizeBy(event.key === 'ArrowRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP);\n  };\n\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label=\"Resize panel\"\n      aria-valuenow={resize.width}\n      aria-valuemin={LEFT_PANEL_MIN_WIDTH}\n      tabIndex={0}\n      className=\"group/resize pointer-events-auto absolute inset-y-0 left-full flex w-2 cursor-col-resize touch-none items-center justify-center outline-hidden\"\n      onPointerDown={beginResize}\n      onPointerMove={followPointer}\n      onKeyDown={nudgeWithArrows}\n    >\n      <ResizeHandleIndicator className=\"group-hover/resize:opacity-100 group-focus-visible/resize:via-accent1 group-focus-visible/resize:opacity-100 group-active/resize:via-foreground/45 group-active/resize:opacity-100\" />\n    </div>\n  );\n}\n\nexport const WorkflowLayout = ({ children, leftSlot }: WorkflowLayoutProps) => {\n  const isDocked = useIsMobile();\n  const canvasRef = useRef<HTMLDivElement>(null);\n  const [storedWidth, setStoredWidth] = useLocalStorageState({\n    initialKey: LEFT_PANEL_WIDTH_STORAGE_KEY,\n    defaultValue: LEFT_PANEL_MIN_WIDTH,\n    schema: z.number(),\n  });\n  const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);\n\n  useLayoutEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const measureHalfCanvas = () => setMaxWidth(Math.floor(canvas.getBoundingClientRect().width / 2));\n    measureHalfCanvas();\n    const observer = new ResizeObserver(measureHalfCanvas);\n    observer.observe(canvas);\n    return () => observer.disconnect();\n  }, [isDocked]);\n\n  if (isDocked) {\n    return (\n      <div className=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">\n        <div className=\"relative min-h-45 min-w-0 flex-1 overflow-hidden\">{children}</div>\n        {leftSlot && <div className=\"min-h-0 min-w-0 basis-[44%] overflow-hidden bg-background\">{leftSlot}</div>}\n      </div>\n    );\n  }\n\n  const width = clampPanelWidth(storedWidth, maxWidth);\n  const resizeTo = (clientX: number) => {\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    setStoredWidth(clampPanelWidth(clientX - canvas.getBoundingClientRect().left, maxWidth));\n  };\n  const resizeBy = (delta: number) => setStoredWidth(clampPanelWidth(width + delta, maxWidth));\n\n  const canvasInset = leftSlot ? width - PANEL_GUTTER : 0;\n  const style: WorkflowLayoutStyle = { '--workflow-left-panel-width': `${canvasInset}px` };\n\n  return (\n    <div className=\"relative min-h-0 min-w-0 flex-1 overflow-hidden\" style={style}>\n      <WorkflowCanvasInsetContext value={canvasInset}>\n        <div ref={canvasRef} className=\"absolute inset-0 min-h-0 min-w-0 overflow-hidden\">\n          {children}\n        </div>\n      </WorkflowCanvasInsetContext>\n\n      {leftSlot && (\n        <WorkflowPanelResizeContext value={{ width, resizeTo, resizeBy }}>\n          <div className=\"pointer-events-none absolute inset-y-0 left-0 z-10 min-w-0\" style={{ width }}>\n            {leftSlot}\n          </div>\n        </WorkflowPanelResizeContext>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAeA,MAAM,oBAAA,GAAuB,GAAA;AAC7B,MAAM,4BAAA,GAA+B,kCAAA;AACrC,MAAM,YAAA,GAAe,CAAA;AACrB,MAAM,oBAAA,GAAuB,EAAA;AAOtB,MAAM,iBAAA,GAAoB,GAAG,kBAAkB,CAAA,qBAAA;AAYtD,MAAM,0BAAA,GAA6B,cAAuC,MAAS,CAAA;AAEnF,SAAS,eAAA,CAAgB,WAAmB,QAAA,EAAkB;AAC5D,EAAA,OAAO,KAAK,GAAA,CAAI,oBAAA,EAAsB,KAAK,GAAA,CAAI,SAAA,EAAW,QAAQ,CAAC,CAAA;AACrE;AAEO,SAAS,yBAAA,GAA4B;AAC1C,EAAA,MAAM,MAAA,GAAS,WAAW,0BAA0B,CAAA;AACpD,EAAA,IAAI,CAAC,QAAQ,OAAO,IAAA;AAEpB,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwC;AAC3D,IAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACxB,IAAA,KAAA,CAAM,cAAA,EAAe;AACrB,IAAA,KAAA,CAAM,aAAA,CAAc,iBAAA,CAAkB,KAAA,CAAM,SAAS,CAAA;AAAA,EACvD,CAAA;AACA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAwC;AAC7D,IAAA,IAAI,CAAC,KAAA,CAAM,aAAA,CAAc,iBAAA,CAAkB,KAAA,CAAM,SAAS,CAAA,EAAG;AAC7D,IAAA,MAAA,CAAO,QAAA,CAAS,MAAM,OAAO,CAAA;AAAA,EAC/B,CAAA;AACA,EAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAyC;AAChE,IAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,WAAA,IAAe,KAAA,CAAM,QAAQ,YAAA,EAAc;AAC7D,IAAA,KAAA,CAAM,cAAA,EAAe;AACrB,IAAA,MAAA,CAAO,SAAS,KAAA,CAAM,GAAA,KAAQ,YAAA,GAAe,oBAAA,GAAuB,CAAC,oBAAoB,CAAA;AAAA,EAC3F,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,WAAA;AAAA,MACL,kBAAA,EAAiB,UAAA;AAAA,MACjB,YAAA,EAAW,cAAA;AAAA,MACX,iBAAe,MAAA,CAAO,KAAA;AAAA,MACtB,eAAA,EAAe,oBAAA;AAAA,MACf,QAAA,EAAU,CAAA;AAAA,MACV,SAAA,EAAU,gJAAA;AAAA,MACV,aAAA,EAAe,WAAA;AAAA,MACf,aAAA,EAAe,aAAA;AAAA,MACf,SAAA,EAAW,eAAA;AAAA,MAEX,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,SAAA,EAAU,oLAAA,EAAqL;AAAA;AAAA,GACxN;AAEJ;AAEO,MAAM,cAAA,GAAiB,CAAC,EAAE,QAAA,EAAU,UAAS,KAA2B;AAC7E,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,oBAAA,CAAqB;AAAA,IACzD,UAAA,EAAY,4BAAA;AAAA,IACZ,YAAA,EAAc,oBAAA;AAAA,IACd,MAAA,EAAQ,EAAE,MAAA;AAAO,GAClB,CAAA;AACD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,QAAA,CAAS,OAAO,iBAAiB,CAAA;AAEjE,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,SAAS,SAAA,CAAU,OAAA;AACzB,IAAA,IAAI,CAAC,MAAA,EAAQ;AACb,IAAA,MAAM,iBAAA,GAAoB,MAAM,WAAA,CAAY,IAAA,CAAK,KAAA,CAAM,OAAO,qBAAA,EAAsB,CAAE,KAAA,GAAQ,CAAC,CAAC,CAAA;AAChG,IAAA,iBAAA,EAAkB;AAClB,IAAA,MAAM,QAAA,GAAW,IAAI,cAAA,CAAe,iBAAiB,CAAA;AACrD,IAAA,QAAA,CAAS,QAAQ,MAAM,CAAA;AACvB,IAAA,OAAO,MAAM,SAAS,UAAA,EAAW;AAAA,EACnC,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sDAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kDAAA,EAAoD,QAAA,EAAS,CAAA;AAAA,MAC3E,QAAA,oBAAY,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6DAA6D,QAAA,EAAA,QAAA,EAAS;AAAA,KAAA,EACpG,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,WAAA,EAAa,QAAQ,CAAA;AACnD,EAAA,MAAM,QAAA,GAAW,CAAC,OAAA,KAAoB;AACpC,IAAA,MAAM,SAAS,SAAA,CAAU,OAAA;AACzB,IAAA,IAAI,CAAC,MAAA,EAAQ;AACb,IAAA,cAAA,CAAe,gBAAgB,OAAA,GAAU,MAAA,CAAO,uBAAsB,CAAE,IAAA,EAAM,QAAQ,CAAC,CAAA;AAAA,EACzF,CAAA;AACA,EAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAkB,cAAA,CAAe,gBAAgB,KAAA,GAAQ,KAAA,EAAO,QAAQ,CAAC,CAAA;AAE3F,EAAA,MAAM,WAAA,GAAc,QAAA,GAAW,KAAA,GAAQ,YAAA,GAAe,CAAA;AACtD,EAAA,MAAM,KAAA,GAA6B,EAAE,6BAAA,EAA+B,CAAA,EAAG,WAAW,CAAA,EAAA,CAAA,EAAK;AAEvF,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iDAAA,EAAkD,KAAA,EAC/D,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,0BAAA,EAAA,EAA2B,KAAA,EAAO,WAAA,EACjC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAK,SAAA,EAAW,SAAA,EAAU,kDAAA,EAC5B,QAAA,EACH,CAAA,EACF,CAAA;AAAA,IAEC,4BACC,GAAA,CAAC,0BAAA,EAAA,EAA2B,OAAO,EAAE,KAAA,EAAO,UAAU,QAAA,EAAS,EAC7D,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4DAAA,EAA6D,KAAA,EAAO,EAAE,KAAA,EAAM,EACxF,oBACH,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/domains/workflows/components/workflow-request-context-dialog.cjs.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const domains_requestContext_components_requestContextSchemaForm = require('../../request-context/components/request-context-schema-form.cjs.js');
+const Button = require('../../../Button-BAMnPqos.cjs');
+const dialog = require('../../../dialog-Vvcjm0rZ.cjs');
+const tooltip = require('../../../tooltip-FvWL16Xn.cjs');
+const icons_Icon = require('../../../icons/Icon.cjs.js');
+
+const WorkflowRequestContextDialog = ({
+  requestContextSchema,
+  requestContext,
+  onRequestContextChange
+}) => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-md",
+          "aria-label": "Request Context",
+          onClick: () => setOpen(true),
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.KeyRound, {}) })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Request Context" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Request Context" }),
+        /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Set request context values for this workflow run" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogBody, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { onSubmit: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
+        domains_requestContext_components_requestContextSchemaForm.RequestContextSchemaForm,
+        {
+          requestContextSchema,
+          values: requestContext,
+          onSave: onRequestContextChange
+        }
+      ) }) })
+    ] }) })
+  ] });
+};
+
+exports.WorkflowRequestContextDialog = WorkflowRequestContextDialog;
+//# sourceMappingURL=workflow-request-context-dialog.cjs.js.map

package/dist/domains/workflows/components/workflow-request-context-dialog.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-request-context-dialog.cjs.js","sources":["../../../../src/domains/workflows/components/workflow-request-context-dialog.tsx"],"sourcesContent":["import { KeyRound } from 'lucide-react';\nimport { useState } from 'react';\nimport { RequestContextSchemaForm } from '@/domains/request-context/components/request-context-schema-form';\nimport { Button } from '@/ds/components/Button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\n\nexport interface WorkflowRequestContextDialogProps {\n  requestContextSchema: string;\n  requestContext: Record<string, any>;\n  onRequestContextChange: (values: Record<string, any>) => void;\n}\n\nexport const WorkflowRequestContextDialog = ({\n  requestContextSchema,\n  requestContext,\n  onRequestContextChange,\n}: WorkflowRequestContextDialogProps) => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-md\"\n            aria-label=\"Request Context\"\n            onClick={() => setOpen(true)}\n          >\n            <Icon>\n              <KeyRound />\n            </Icon>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>Request Context</TooltipContent>\n      </Tooltip>\n\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Request Context</DialogTitle>\n            <DialogDescription>Set request context values for this workflow run</DialogDescription>\n          </DialogHeader>\n          <DialogBody>\n            {/* The dialog is a React child of the outer workflow form; without this guard,\n                the inner form's Save submit bubbles through the portal and runs the workflow. */}\n            <div onSubmit={e => e.stopPropagation()}>\n              <RequestContextSchemaForm\n                requestContextSchema={requestContextSchema}\n                values={requestContext}\n                onSave={onRequestContextChange}\n              />\n            </div>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n};\n"],"names":["useState","jsxs","Fragment","Tooltip","jsx","TooltipTrigger","Button","Icon","KeyRound","TooltipContent","Dialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogBody","RequestContextSchemaForm"],"mappings":";;;;;;;;;;;;;AAqBO,MAAM,+BAA+B,CAAC;AAAA,EAC3C,oBAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,KAAyC;AACvC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAAS,KAAK,CAAA;AAEtC,EAAA,uBACEC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAACE,eAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAACC,sBAAA,EAAA,EAAe,SAAO,IAAA,EACrB,QAAA,kBAAAD,cAAA;AAAA,QAACE,aAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,OAAA,EAAQ,OAAA;AAAA,UACR,IAAA,EAAK,SAAA;AAAA,UACL,YAAA,EAAW,iBAAA;AAAA,UACX,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,UAE3B,QAAA,kBAAAF,cAAA,CAACG,eAAA,EAAA,EACC,QAAA,kBAAAH,cAAA,CAACI,oBAAA,EAAA,EAAS,CAAA,EACZ;AAAA;AAAA,OACF,EACF,CAAA;AAAA,sBACAJ,cAAA,CAACK,0BAAe,QAAA,EAAA,iBAAA,EAAe;AAAA,KAAA,EACjC,CAAA;AAAA,mCAECC,aAAA,EAAA,EAAO,IAAA,EAAY,YAAA,EAAc,OAAA,EAChC,0CAACC,oBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAV,eAAA,CAACW,mBAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAR,cAAA,CAACS,sBAAY,QAAA,EAAA,iBAAA,EAAe,CAAA;AAAA,wBAC5BT,cAAA,CAACU,4BAAkB,QAAA,EAAA,kDAAA,EAAgD;AAAA,OAAA,EACrE,CAAA;AAAA,sBACAV,cAAA,CAACW,qBAGC,QAAA,kBAAAX,cAAA,CAAC,KAAA,EAAA,EAAI,UAAU,CAAA,CAAA,KAAK,CAAA,CAAE,iBAAgB,EACpC,QAAA,kBAAAA,cAAA;AAAA,QAACY,mFAAA;AAAA,QAAA;AAAA,UACC,oBAAA;AAAA,UACA,MAAA,EAAQ,cAAA;AAAA,UACR,MAAA,EAAQ;AAAA;AAAA,SAEZ,CAAA,EACF;AAAA,KAAA,EACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/workflows/components/workflow-request-context-dialog.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../src/domains/workflows/components/workflow-request-context-dialog'
+export {}

package/dist/domains/workflows/components/workflow-request-context-dialog.es.js

@@ -0,0 +1,49 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { KeyRound } from 'lucide-react';
+import { useState } from 'react';
+import { RequestContextSchemaForm } from '../../request-context/components/request-context-schema-form.es.js';
+import { B as Button } from '../../../Button-B8nF87ai.js';
+import { D as Dialog, d as DialogContent, g as DialogHeader, j as DialogTitle, e as DialogDescription, a as DialogBody } from '../../../dialog-Cv6zdm5E.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../../../tooltip-BrDiP0RI.js';
+import { Icon } from '../../../icons/Icon.es.js';
+
+const WorkflowRequestContextDialog = ({
+  requestContextSchema,
+  requestContext,
+  onRequestContextChange
+}) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-md",
+          "aria-label": "Request Context",
+          onClick: () => setOpen(true),
+          children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(KeyRound, {}) })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: "Request Context" })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Request Context" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Set request context values for this workflow run" })
+      ] }),
+      /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx("div", { onSubmit: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+        RequestContextSchemaForm,
+        {
+          requestContextSchema,
+          values: requestContext,
+          onSave: onRequestContextChange
+        }
+      ) }) })
+    ] }) })
+  ] });
+};
+
+export { WorkflowRequestContextDialog };
+//# sourceMappingURL=workflow-request-context-dialog.es.js.map

package/dist/domains/workflows/components/workflow-request-context-dialog.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-request-context-dialog.es.js","sources":["../../../../src/domains/workflows/components/workflow-request-context-dialog.tsx"],"sourcesContent":["import { KeyRound } from 'lucide-react';\nimport { useState } from 'react';\nimport { RequestContextSchemaForm } from '@/domains/request-context/components/request-context-schema-form';\nimport { Button } from '@/ds/components/Button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '@/ds/components/Dialog';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { Icon } from '@/ds/icons/Icon';\n\nexport interface WorkflowRequestContextDialogProps {\n  requestContextSchema: string;\n  requestContext: Record<string, any>;\n  onRequestContextChange: (values: Record<string, any>) => void;\n}\n\nexport const WorkflowRequestContextDialog = ({\n  requestContextSchema,\n  requestContext,\n  onRequestContextChange,\n}: WorkflowRequestContextDialogProps) => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-md\"\n            aria-label=\"Request Context\"\n            onClick={() => setOpen(true)}\n          >\n            <Icon>\n              <KeyRound />\n            </Icon>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>Request Context</TooltipContent>\n      </Tooltip>\n\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Request Context</DialogTitle>\n            <DialogDescription>Set request context values for this workflow run</DialogDescription>\n          </DialogHeader>\n          <DialogBody>\n            {/* The dialog is a React child of the outer workflow form; without this guard,\n                the inner form's Save submit bubbles through the portal and runs the workflow. */}\n            <div onSubmit={e => e.stopPropagation()}>\n              <RequestContextSchemaForm\n                requestContextSchema={requestContextSchema}\n                values={requestContext}\n                onSave={onRequestContextChange}\n              />\n            </div>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAqBO,MAAM,+BAA+B,CAAC;AAAA,EAC3C,oBAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,KAAyC;AACvC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,SAAO,IAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,OAAA,EAAQ,OAAA;AAAA,UACR,IAAA,EAAK,SAAA;AAAA,UACL,YAAA,EAAW,iBAAA;AAAA,UACX,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,UAE3B,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA,EACZ;AAAA;AAAA,OACF,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,kBAAe,QAAA,EAAA,iBAAA,EAAe;AAAA,KAAA,EACjC,CAAA;AAAA,wBAEC,MAAA,EAAA,EAAO,IAAA,EAAY,YAAA,EAAc,OAAA,EAChC,+BAAC,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,eAAY,QAAA,EAAA,iBAAA,EAAe,CAAA;AAAA,wBAC5B,GAAA,CAAC,qBAAkB,QAAA,EAAA,kDAAA,EAAgD;AAAA,OAAA,EACrE,CAAA;AAAA,sBACA,GAAA,CAAC,cAGC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,UAAU,CAAA,CAAA,KAAK,CAAA,CAAE,iBAAgB,EACpC,QAAA,kBAAA,GAAA;AAAA,QAAC,wBAAA;AAAA,QAAA;AAAA,UACC,oBAAA;AAAA,UACA,MAAA,EAAQ,cAAA;AAAA,UACR,MAAA,EAAQ;AAAA;AAAA,SAEZ,CAAA,EACF;AAAA,KAAA,EACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/domains/workflows/components/workflow-run-options-dialog.cjs.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const domains_workflows_components_workflowTracingRunOptions = require('./workflow-tracing-run-options.cjs.js');
+const Button = require('../../../Button-BAMnPqos.cjs');
+const dialog = require('../../../dialog-Vvcjm0rZ.cjs');
+const textFieldBlock = require('../../../text-field-block-BCOCO1W2.cjs');
+const tooltip = require('../../../tooltip-FvWL16Xn.cjs');
+const icons_Icon = require('../../../icons/Icon.cjs.js');
+
+const WorkflowRunOptionsDialog = ({ resourceId, onResourceIdChange }) => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", variant: "ghost", size: "icon-md", "aria-label": "Run Options", onClick: () => setOpen(true), children: /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, {}) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: "Run Options" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: "Run Options" }),
+        /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: "Configure resource attribution, tracing and debug options for this workflow run" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          textFieldBlock.TextFieldBlock,
+          {
+            name: "workflow-run-resource-id",
+            label: "Resource ID",
+            value: resourceId,
+            onChange: (event) => onResourceIdChange(event.target.value),
+            placeholder: "e.g. tenant-42",
+            helpText: "Ignored when server auth derives the resource ID from the user."
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(domains_workflows_components_workflowTracingRunOptions.WorkflowTracingRunOptions, { onSaved: () => setOpen(false) })
+      ] })
+    ] }) })
+  ] });
+};
+
+exports.WorkflowRunOptionsDialog = WorkflowRunOptionsDialog;
+//# sourceMappingURL=workflow-run-options-dialog.cjs.js.map