@cere/cere-design-system 0.0.27 → 0.0.29

package/dist/index.d.mts

@@ -32,7 +32,7 @@ import { BoxProps as BoxProps$1 } from '@mui/material/Box';
 import { AlertProps as AlertProps$1 } from '@mui/material/Alert';
 import { SnackbarProps as SnackbarProps$1 } from '@mui/material/Snackbar';
 import { QRCodeProps as QRCodeProps$1 } from 'react-qr-code';
-import { ReactFlowProps, Node, Edge, OnNodesChange, OnEdgesChange, NodeTypes, EdgeTypes, BackgroundVariant, ReactFlowInstance, NodeProps } from 'reactflow';
+import { ReactFlowProps, Node, Edge, OnNodesChange, OnEdgesChange, NodeTypes, EdgeTypes, BackgroundVariant, MiniMapProps, ReactFlowInstance, NodeProps } from 'reactflow';
 export { Background, BackgroundVariant, ConnectionLineType, Controls, Edge, EdgeTypes, MiniMap, Node, NodeTypes, OnEdgesChange, OnNodesChange, Panel, ReactFlowInstance } from 'reactflow';
 import { Monaco } from '@monaco-editor/react';
 import { editor } from 'monaco-editor';
@@ -1681,11 +1681,13 @@ declare const AppBar: React__default.FC<AppBarProps>;
 interface WorkflowTopBarProps extends Omit<BoxProps$1, 'title'> {
     /** Heading shown at the left side of the bar. */
     title?: string;
-    /** Execution identifier displayed in the CID field. */
+    /** Job identifier displayed in the Job ID field. */
     executionId: string;
-    /** Called when the execution ID value changes. */
+    /** Label shown above the job ID input. Defaults to "Job ID". */
+    executionIdLabel?: string;
+    /** Called when the job ID value changes. */
     onExecutionIdChange?: (value: string) => void;
-    /** Called when the execution ID clear action is pressed. */
+    /** Called when the job ID clear action is pressed. */
     onClearExecutionId?: () => void;
     /** Submit button label. */
     submitLabel?: string;
@@ -1730,6 +1732,14 @@ interface WorkflowSideInspectorProps extends PaperProps$1 {
     timestamp?: string;
     /** Duration value shown in metadata section. */
     duration?: string;
+    /** Whether to show the Input field in the details section. Defaults to true. */
+    showInput?: boolean;
+    /** Whether to show the Output field in the details section. Defaults to true. */
+    showOutput?: boolean;
+    /** Whether to show the Timestamp field in the metadata section. Defaults to true. */
+    showTimestamp?: boolean;
+    /** Whether to show the Duration field in the metadata section. Defaults to true. */
+    showDuration?: boolean;
     /** Bottom CTA label. Set to `undefined` or `null` to hide the button. */
     actionLabel?: string | null;
     /** Called when close button is pressed. */
@@ -2226,10 +2236,30 @@ interface FlowEditorProps extends Omit<ReactFlowProps, 'nodes' | 'edges'> {
      * @default false
      */
     showMinimap?: boolean;
+    /**
+     * Allow nodes to be dragged by the user
+     * @default true
+     */
+    nodesDraggable?: boolean;
+    /**
+     * Show border around the container
+     * @default true
+     */
+    showBorder?: boolean;
+    /**
+     * Border radius of the container in theme spacing units (e.g. 1 = 8px, 2 = 16px)
+     * @default 1
+     */
+    borderRadius?: number;
     /**
      * Container props
      */
     containerProps?: BoxProps;
+    /**
+     * Props passed directly to the ReactFlow MiniMap component, allowing full customization
+     * of colors, mask, style, and any other MiniMap option. Consumer values override defaults.
+     */
+    minimapProps?: Partial<MiniMapProps>;
     /**
      * Callback when flow instance is initialized
      */

package/dist/index.d.ts

@@ -32,7 +32,7 @@ import { BoxProps as BoxProps$1 } from '@mui/material/Box';
 import { AlertProps as AlertProps$1 } from '@mui/material/Alert';
 import { SnackbarProps as SnackbarProps$1 } from '@mui/material/Snackbar';
 import { QRCodeProps as QRCodeProps$1 } from 'react-qr-code';
-import { ReactFlowProps, Node, Edge, OnNodesChange, OnEdgesChange, NodeTypes, EdgeTypes, BackgroundVariant, ReactFlowInstance, NodeProps } from 'reactflow';
+import { ReactFlowProps, Node, Edge, OnNodesChange, OnEdgesChange, NodeTypes, EdgeTypes, BackgroundVariant, MiniMapProps, ReactFlowInstance, NodeProps } from 'reactflow';
 export { Background, BackgroundVariant, ConnectionLineType, Controls, Edge, EdgeTypes, MiniMap, Node, NodeTypes, OnEdgesChange, OnNodesChange, Panel, ReactFlowInstance } from 'reactflow';
 import { Monaco } from '@monaco-editor/react';
 import { editor } from 'monaco-editor';
@@ -1681,11 +1681,13 @@ declare const AppBar: React__default.FC<AppBarProps>;
 interface WorkflowTopBarProps extends Omit<BoxProps$1, 'title'> {
     /** Heading shown at the left side of the bar. */
     title?: string;
-    /** Execution identifier displayed in the CID field. */
+    /** Job identifier displayed in the Job ID field. */
     executionId: string;
-    /** Called when the execution ID value changes. */
+    /** Label shown above the job ID input. Defaults to "Job ID". */
+    executionIdLabel?: string;
+    /** Called when the job ID value changes. */
     onExecutionIdChange?: (value: string) => void;
-    /** Called when the execution ID clear action is pressed. */
+    /** Called when the job ID clear action is pressed. */
     onClearExecutionId?: () => void;
     /** Submit button label. */
     submitLabel?: string;
@@ -1730,6 +1732,14 @@ interface WorkflowSideInspectorProps extends PaperProps$1 {
     timestamp?: string;
     /** Duration value shown in metadata section. */
     duration?: string;
+    /** Whether to show the Input field in the details section. Defaults to true. */
+    showInput?: boolean;
+    /** Whether to show the Output field in the details section. Defaults to true. */
+    showOutput?: boolean;
+    /** Whether to show the Timestamp field in the metadata section. Defaults to true. */
+    showTimestamp?: boolean;
+    /** Whether to show the Duration field in the metadata section. Defaults to true. */
+    showDuration?: boolean;
     /** Bottom CTA label. Set to `undefined` or `null` to hide the button. */
     actionLabel?: string | null;
     /** Called when close button is pressed. */
@@ -2226,10 +2236,30 @@ interface FlowEditorProps extends Omit<ReactFlowProps, 'nodes' | 'edges'> {
      * @default false
      */
     showMinimap?: boolean;
+    /**
+     * Allow nodes to be dragged by the user
+     * @default true
+     */
+    nodesDraggable?: boolean;
+    /**
+     * Show border around the container
+     * @default true
+     */
+    showBorder?: boolean;
+    /**
+     * Border radius of the container in theme spacing units (e.g. 1 = 8px, 2 = 16px)
+     * @default 1
+     */
+    borderRadius?: number;
     /**
      * Container props
      */
     containerProps?: BoxProps;
+    /**
+     * Props passed directly to the ReactFlow MiniMap component, allowing full customization
+     * of colors, mask, style, and any other MiniMap option. Consumer values override defaults.
+     */
+    minimapProps?: Partial<MiniMapProps>;
     /**
      * Callback when flow instance is initialized
      */

package/dist/index.js

@@ -6651,6 +6651,7 @@ var import_jsx_runtime58 = require("react/jsx-runtime");
 var WorkflowTopBar = ({
   title = "Agent visualization flow chart",
   executionId,
+  executionIdLabel = "Job ID",
   onExecutionIdChange,
   onClearExecutionId,
   submitLabel = "Submit",
@@ -6738,7 +6739,7 @@ var WorkflowTopBar = ({
                                   fontSize: 12,
                                   display: "block"
                                 },
-                                children: "Execution CID"
+                                children: executionIdLabel
                               }
                             ),
                             /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
@@ -6746,7 +6747,7 @@ var WorkflowTopBar = ({
                               {
                                 value: executionId,
                                 onChange: (event) => onExecutionIdChange?.(event.target.value),
-                                inputProps: { "aria-label": "Execution CID value" },
+                                inputProps: { "aria-label": executionIdLabel },
                                 sx: {
                                   width: "100%",
                                   mt: 0.25,
@@ -6764,7 +6765,7 @@ var WorkflowTopBar = ({
                             import_material39.IconButton,
                             {
                               size: "small",
-                              "aria-label": "Clear execution ID",
+                              "aria-label": `Clear ${executionIdLabel.toLowerCase()}`,
                               onClick: onClearExecutionId,
                               sx: { color: "#4A4458", ml: 1 },
                               children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_Cancel.default, { fontSize: "small" })
@@ -6847,6 +6848,10 @@ var WorkflowSideInspector = ({
   cubbyId = "ID:S8787",
   timestamp = "2026-02-11 14:32:10",
   duration = "120ms",
+  showInput = true,
+  showOutput = true,
+  showTimestamp = true,
+  showDuration = true,
   actionLabel,
   onClose,
   onCopyCubbyId,
@@ -6938,11 +6943,13 @@ var WorkflowSideInspector = ({
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Input", value: inputValue }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Output", value: outputValue })
+          (showInput || showOutput) && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showInput && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Input", value: inputValue }),
+              showOutput && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Output", value: outputValue })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } }),
           /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Typography, { variant: "body2", sx: { color: MUTED_TEXT_COLOR }, children: "Cubby ID" }),
             /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -6958,11 +6965,13 @@ var WorkflowSideInspector = ({
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Timestamp", value: timestamp }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Duration", value: duration })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } })
+          (showTimestamp || showDuration) && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_material40.Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showTimestamp && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Timestamp", value: timestamp }),
+              showDuration && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InfoBlock, { label: "Duration", value: duration })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_material40.Divider, { sx: { borderColor: DIVIDER_COLOR } })
+          ] })
         ] }),
         actionLabel && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: "primary", fullWidth: true, onClick: onAction, children: actionLabel })
       ]
@@ -8586,7 +8595,11 @@ var FlowEditor = ({
   backgroundVariant = import_reactflow.BackgroundVariant.Dots,
   showControls = true,
   showMinimap = false,
+  showBorder = true,
+  borderRadius = 1,
+  nodesDraggable = true,
   containerProps,
+  minimapProps,
   onInit,
   ...reactFlowProps
 }) => {
@@ -8599,19 +8612,22 @@ var FlowEditor = ({
     },
     [onInit]
   );
+  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_reactflow.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     import_material72.Box,
     {
-      sx: {
-        width: "100%",
-        height: typeof height === "number" ? `${height}px` : height,
-        border: `1px solid ${theme2.palette.divider}`,
-        borderRadius: theme2.shape.borderRadius,
-        overflow: "hidden",
-        backgroundColor: theme2.palette.background.paper,
-        ...containerProps?.sx
-      },
-      ...containerProps,
+      sx: [
+        {
+          width: "100%",
+          height: typeof height === "number" ? `${height}px` : height,
+          overflow: "hidden",
+          ...showBorder && { border: `1px solid ${theme2.palette.divider}` },
+          borderRadius,
+          backgroundColor: theme2.palette.background.paper
+        },
+        ...Array.isArray(containerSx) ? containerSx : [containerSx]
+      ],
+      ...restContainerProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
         import_reactflow.default,
         {
@@ -8622,6 +8638,7 @@ var FlowEditor = ({
           nodeTypes,
           edgeTypes,
           onInit: handleInit,
+          nodesDraggable,
           connectionLineType: import_reactflow.ConnectionLineType.SmoothStep,
           defaultEdgeOptions: {
             style: {
@@ -8656,7 +8673,8 @@ var FlowEditor = ({
                 maskColor: `${theme2.palette.background.paper}80`,
                 style: {
                   backgroundColor: theme2.palette.background.paper
-                }
+                },
+                ...minimapProps
               }
             )
           ]