@cere/cere-design-system 0.0.27 → 0.0.29

package/dist/index.mjs

@@ -6604,6 +6604,7 @@ import { jsx as jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
 var WorkflowTopBar = ({
   title = "Agent visualization flow chart",
   executionId,
+  executionIdLabel = "Job ID",
   onExecutionIdChange,
   onClearExecutionId,
   submitLabel = "Submit",
@@ -6691,7 +6692,7 @@ var WorkflowTopBar = ({
                                   fontSize: 12,
                                   display: "block"
                                 },
-                                children: "Execution CID"
+                                children: executionIdLabel
                               }
                             ),
                             /* @__PURE__ */ jsx58(
@@ -6699,7 +6700,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,
@@ -6717,7 +6718,7 @@ var WorkflowTopBar = ({
                             IconButton11,
                             {
                               size: "small",
-                              "aria-label": "Clear execution ID",
+                              "aria-label": `Clear ${executionIdLabel.toLowerCase()}`,
                               onClick: onClearExecutionId,
                               sx: { color: "#4A4458", ml: 1 },
                               children: /* @__PURE__ */ jsx58(CancelIcon, { fontSize: "small" })
@@ -6781,7 +6782,7 @@ import {
 } from "@mui/material";
 import CloseIcon4 from "@mui/icons-material/Close";
 import ContentCopyOutlinedIcon from "@mui/icons-material/ContentCopyOutlined";
-import { jsx as jsx59, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx59, jsxs as jsxs27 } from "react/jsx-runtime";
 var INSPECTOR_WIDTH = 320;
 var DIVIDER_COLOR = "#D6CEDD";
 var MUTED_TEXT_COLOR = "#938F99";
@@ -6807,6 +6808,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,
@@ -6898,11 +6903,13 @@ var WorkflowSideInspector = ({
             )
           ] }),
           /* @__PURE__ */ jsx59(Divider8, { sx: { borderColor: DIVIDER_COLOR } }),
-          /* @__PURE__ */ jsxs27(Box20, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-            /* @__PURE__ */ jsx59(InfoBlock, { label: "Input", value: inputValue }),
-            /* @__PURE__ */ jsx59(InfoBlock, { label: "Output", value: outputValue })
+          (showInput || showOutput) && /* @__PURE__ */ jsxs27(Fragment12, { children: [
+            /* @__PURE__ */ jsxs27(Box20, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showInput && /* @__PURE__ */ jsx59(InfoBlock, { label: "Input", value: inputValue }),
+              showOutput && /* @__PURE__ */ jsx59(InfoBlock, { label: "Output", value: outputValue })
+            ] }),
+            /* @__PURE__ */ jsx59(Divider8, { sx: { borderColor: DIVIDER_COLOR } })
           ] }),
-          /* @__PURE__ */ jsx59(Divider8, { sx: { borderColor: DIVIDER_COLOR } }),
           /* @__PURE__ */ jsxs27(Box20, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
             /* @__PURE__ */ jsx59(Typography18, { variant: "body2", sx: { color: MUTED_TEXT_COLOR }, children: "Cubby ID" }),
             /* @__PURE__ */ jsx59(
@@ -6918,11 +6925,13 @@ var WorkflowSideInspector = ({
             )
           ] }),
           /* @__PURE__ */ jsx59(Divider8, { sx: { borderColor: DIVIDER_COLOR } }),
-          /* @__PURE__ */ jsxs27(Box20, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-            /* @__PURE__ */ jsx59(InfoBlock, { label: "Timestamp", value: timestamp }),
-            /* @__PURE__ */ jsx59(InfoBlock, { label: "Duration", value: duration })
-          ] }),
-          /* @__PURE__ */ jsx59(Divider8, { sx: { borderColor: DIVIDER_COLOR } })
+          (showTimestamp || showDuration) && /* @__PURE__ */ jsxs27(Fragment12, { children: [
+            /* @__PURE__ */ jsxs27(Box20, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              showTimestamp && /* @__PURE__ */ jsx59(InfoBlock, { label: "Timestamp", value: timestamp }),
+              showDuration && /* @__PURE__ */ jsx59(InfoBlock, { label: "Duration", value: duration })
+            ] }),
+            /* @__PURE__ */ jsx59(Divider8, { sx: { borderColor: DIVIDER_COLOR } })
+          ] })
         ] }),
         actionLabel && /* @__PURE__ */ jsx59(Button, { variant: "primary", fullWidth: true, onClick: onAction, children: actionLabel })
       ]
@@ -7957,9 +7966,9 @@ var Truncate = ({
 
 // src/components/utilities/BytesSize/BytesSize.tsx
 import size from "byte-size";
-import { Fragment as Fragment12, jsx as jsx87 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx87 } from "react/jsx-runtime";
 var BytesSize = ({ bytes }) => {
-  return /* @__PURE__ */ jsx87(Fragment12, { children: size(bytes).toString() });
+  return /* @__PURE__ */ jsx87(Fragment13, { children: size(bytes).toString() });
 };
 
 // src/components/utilities/QRCode/QRCode.tsx
@@ -8311,7 +8320,7 @@ var SummaryStats = ({ items }) => {
 };
 
 // src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
-import { Fragment as Fragment13, jsx as jsx94, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx94, jsxs as jsxs46 } from "react/jsx-runtime";
 var ChartContainer = styled45(Box28)({
   position: "relative",
   height: 320
@@ -8539,7 +8548,7 @@ var TimeSeriesGraph = ({
             }
           )
         ] }),
-        shouldShowSummary && /* @__PURE__ */ jsxs46(Fragment13, { children: [
+        shouldShowSummary && /* @__PURE__ */ jsxs46(Fragment14, { children: [
           /* @__PURE__ */ jsx94(Divider11, {}),
           /* @__PURE__ */ jsx94(SummaryStats, { items: summaryItems })
         ] })
@@ -8574,7 +8583,11 @@ var FlowEditor = ({
   backgroundVariant = BackgroundVariant.Dots,
   showControls = true,
   showMinimap = false,
+  showBorder = true,
+  borderRadius = 1,
+  nodesDraggable = true,
   containerProps,
+  minimapProps,
   onInit,
   ...reactFlowProps
 }) => {
@@ -8587,19 +8600,22 @@ var FlowEditor = ({
     },
     [onInit]
   );
+  const { sx: containerSx, ...restContainerProps } = containerProps ?? {};
   return /* @__PURE__ */ jsx95(ReactFlowProvider, { children: /* @__PURE__ */ jsx95(
     Box29,
     {
-      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__ */ jsxs47(
         ReactFlow,
         {
@@ -8610,6 +8626,7 @@ var FlowEditor = ({
           nodeTypes,
           edgeTypes,
           onInit: handleInit,
+          nodesDraggable,
           connectionLineType: ConnectionLineType.SmoothStep,
           defaultEdgeOptions: {
             style: {
@@ -8644,7 +8661,8 @@ var FlowEditor = ({
                 maskColor: `${theme2.palette.background.paper}80`,
                 style: {
                   backgroundColor: theme2.palette.background.paper
-                }
+                },
+                ...minimapProps
               }
             )
           ]
@@ -9058,7 +9076,7 @@ import { Panel as Panel2 } from "reactflow";
 
 // src/components/third-party/WorkflowNodeHandle.tsx
 import { Handle, Position } from "reactflow";
-import { Fragment as Fragment14, jsx as jsx97, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx97, jsxs as jsxs49 } from "react/jsx-runtime";
 var WorkflowNodeHandle = ({
   data,
   selected
@@ -9072,7 +9090,7 @@ var WorkflowNodeHandle = ({
     background: handleColor,
     boxShadow: WORKFLOW_NODE_SHADOW
   };
-  return /* @__PURE__ */ jsxs49(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs49(Fragment15, { children: [
     /* @__PURE__ */ jsx97(Handle, { type: "target", position: Position.Left, style: handleStyle }),
     /* @__PURE__ */ jsx97(
       WorkflowNode,