@cere/cere-design-system 0.0.18 → 0.0.19

package/dist/index.mjs

@@ -1794,6 +1794,17 @@ var useIsMobile = () => {
 import MuiButton from "@mui/material/Button";
 import { styled } from "@mui/material/styles";
 import { jsx as jsx4 } from "react/jsx-runtime";
+var BUTTON_SPACING = {
+  borderRadius: "8px",
+  padding: "8px 16px",
+  iconMargin: "8px"
+};
+var BUTTON_TYPOGRAPHY = {
+  fontSize: "16px",
+  fontWeight: 500,
+  lineHeight: 1.5,
+  letterSpacing: "0.8px"
+};
 var StyledPrimaryButton = styled(MuiButton)(() => ({
   backgroundColor: colors.primary.main,
   color: colors.primary.contrastText,
@@ -1808,21 +1819,42 @@ var StyledPrimaryButton = styled(MuiButton)(() => ({
     color: colors.grey[500]
   }
 }));
+var iconStyles = {
+  "& > *": {
+    fontSize: BUTTON_TYPOGRAPHY.fontSize
+  }
+};
 var StyledSecondaryButton = styled(MuiButton)(() => ({
-  backgroundColor: "transparent",
-  color: colors.primary.main,
-  border: `1px solid ${colors.primary.main}`,
+  backgroundColor: deploymentSurfaceTokens.surfaceHigh,
+  color: deploymentSurfaceTokens.textPrimary,
+  border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
+  borderRadius: BUTTON_SPACING.borderRadius,
+  padding: BUTTON_SPACING.padding,
+  textTransform: "capitalize",
+  letterSpacing: BUTTON_TYPOGRAPHY.letterSpacing,
+  fontSize: BUTTON_TYPOGRAPHY.fontSize,
+  fontWeight: BUTTON_TYPOGRAPHY.fontWeight,
+  lineHeight: BUTTON_TYPOGRAPHY.lineHeight,
   "&:hover": {
     backgroundColor: colors.background.selected,
-    borderColor: colors.primary.light
+    borderColor: deploymentSurfaceTokens.strokeOutside
   },
   "&:active": {
     backgroundColor: colors.background.selected,
-    borderColor: colors.primary.dark
+    borderColor: deploymentSurfaceTokens.borderDefault
   },
   "&:disabled": {
     borderColor: colors.grey[300],
-    color: colors.grey[500]
+    color: colors.grey[500],
+    backgroundColor: colors.grey[50]
+  },
+  "& .MuiButton-startIcon": {
+    marginRight: BUTTON_SPACING.iconMargin,
+    ...iconStyles
+  },
+  "& .MuiButton-endIcon": {
+    marginLeft: BUTTON_SPACING.iconMargin,
+    ...iconStyles
   }
 }));
 var StyledTertiaryButton = styled(MuiButton)(() => ({
@@ -1838,6 +1870,11 @@ var StyledTertiaryButton = styled(MuiButton)(() => ({
     color: colors.grey[500]
   }
 }));
+var BUTTON_COMPONENTS = {
+  primary: StyledPrimaryButton,
+  secondary: StyledSecondaryButton,
+  tertiary: StyledTertiaryButton
+};
 var Button = ({
   variant = "primary",
   children,
@@ -1845,21 +1882,13 @@ var Button = ({
   endIcon,
   ...props
 }) => {
+  const ButtonComponent = BUTTON_COMPONENTS[variant];
   const buttonProps = {
     ...props,
     startIcon,
     endIcon
   };
-  switch (variant) {
-    case "primary":
-      return /* @__PURE__ */ jsx4(StyledPrimaryButton, { ...buttonProps, children });
-    case "secondary":
-      return /* @__PURE__ */ jsx4(StyledSecondaryButton, { ...buttonProps, children });
-    case "tertiary":
-      return /* @__PURE__ */ jsx4(StyledTertiaryButton, { ...buttonProps, children });
-    default:
-      return /* @__PURE__ */ jsx4(StyledPrimaryButton, { ...buttonProps, children });
-  }
+  return /* @__PURE__ */ jsx4(ButtonComponent, { ...buttonProps, children });
 };
 
 // src/components/buttons/IconButton.tsx
@@ -4976,7 +5005,6 @@ import {
   useTheme as useTheme2,
   LinearProgress as LinearProgress2
 } from "@mui/material";
-import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ChevronRightIcon2 from "@mui/icons-material/ChevronRight";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
@@ -5006,7 +5034,7 @@ var ENTITY_LABELS = {
   engagement: "Engagement",
   agent: "Agent"
 };
-var ENTITY_ICON_SIZE = 24;
+var ENTITY_ICON_SIZE = 16;
 var ENTITY_ICONS = {
   workspace: /* @__PURE__ */ jsx42(WorkOutlineIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
   stream: /* @__PURE__ */ jsx42(WavesIcon, { sx: { fontSize: ENTITY_ICON_SIZE } }),
@@ -5021,6 +5049,18 @@ var STATUS_DOT_COLORS = {
   disabled: deploymentStatusColors.disabledDim
 };
 var CHEVRON_SIZE = 16;
+var ENTITY_CHIP_STYLES = {
+  borderRadius: "12px",
+  borderWidth: "1.5px",
+  padding: { left: 0.75, right: 1, vertical: 0.25 },
+  gap: 0.5
+};
+var ENTITY_CHIP_TYPOGRAPHY = {
+  fontSize: "12px",
+  fontWeight: 500,
+  lineHeight: 1.33,
+  letterSpacing: "0.07px"
+};
 var StatusDot = styled28(Box12, {
   shouldForwardProp: (p) => p !== "status"
 })(({ status }) => ({
@@ -5036,13 +5076,13 @@ var EntityChip = ({ entityType, color }) => /* @__PURE__ */ jsxs19(
     sx: {
       display: "inline-flex",
       alignItems: "center",
-      gap: 0.5,
-      pl: 1,
-      pr: 1.5,
-      py: 0.5,
-      borderRadius: "16px",
+      gap: ENTITY_CHIP_STYLES.gap,
+      pl: ENTITY_CHIP_STYLES.padding.left,
+      pr: ENTITY_CHIP_STYLES.padding.right,
+      py: ENTITY_CHIP_STYLES.padding.vertical,
+      borderRadius: ENTITY_CHIP_STYLES.borderRadius,
       backgroundColor: deploymentSurfaceTokens.surfaceHigh,
-      border: `2px solid ${color}`,
+      border: `${ENTITY_CHIP_STYLES.borderWidth} solid ${color}`,
       flexShrink: 0
     },
     children: [
@@ -5051,8 +5091,13 @@ var EntityChip = ({ entityType, color }) => /* @__PURE__ */ jsxs19(
         Typography10,
         {
           variant: "body2",
-          fontWeight: 500,
-          sx: { color: "black", lineHeight: 1.42, fontSize: "14px", letterSpacing: "0.07px" },
+          fontWeight: ENTITY_CHIP_TYPOGRAPHY.fontWeight,
+          sx: {
+            color: "black",
+            lineHeight: ENTITY_CHIP_TYPOGRAPHY.lineHeight,
+            fontSize: ENTITY_CHIP_TYPOGRAPHY.fontSize,
+            letterSpacing: ENTITY_CHIP_TYPOGRAPHY.letterSpacing
+          },
           children: ENTITY_LABELS[entityType]
         }
       )
@@ -5115,31 +5160,42 @@ var CapacityBar = ({ value, indented = false }) => /* @__PURE__ */ jsxs19(Box12,
     }
   )
 ] });
-var CardActionList = ({ actions }) => /* @__PURE__ */ jsx42(Fragment9, { children: actions.map((action) => /* @__PURE__ */ jsxs19(
+var getActionButtonStyles = (action) => {
+  const baseStyles = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 0.5,
+    cursor: action.onClick ? "pointer" : "default",
+    background: "none",
+    font: "inherit",
+    color: deploymentSurfaceTokens.textPrimary,
+    whiteSpace: "nowrap",
+    "&:hover": action.onClick ? { opacity: 0.7 } : void 0
+  };
+  const variantStyles = action.outlined ? {
+    border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
+    borderRadius: "8px",
+    p: 1,
+    bgcolor: "white"
+  } : {
+    border: "none",
+    p: 0
+  };
+  return { ...baseStyles, ...variantStyles };
+};
+var CardAction = ({ action }) => /* @__PURE__ */ jsxs19(
   Box12,
   {
     component: action.onClick ? "button" : "span",
     onClick: action.onClick,
-    sx: {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: 0.5,
-      cursor: action.onClick ? "pointer" : "default",
-      background: "none",
-      border: "none",
-      p: 0,
-      font: "inherit",
-      color: deploymentSurfaceTokens.textPrimary,
-      whiteSpace: "nowrap",
-      "&:hover": action.onClick ? { opacity: 0.7 } : void 0
-    },
+    sx: getActionButtonStyles(action),
     children: [
       action.icon && /* @__PURE__ */ jsx42(Box12, { component: "span", sx: { display: "flex", alignItems: "center" }, children: action.icon }),
-      /* @__PURE__ */ jsx42(Typography10, { variant: "body2", fontWeight: 500, component: "span", sx: { fontSize: "14px" }, children: action.label })
+      action.label && /* @__PURE__ */ jsx42(Typography10, { variant: "body2", fontWeight: 500, component: "span", sx: { fontSize: "14px" }, children: action.label })
     ]
-  },
-  action.id
-)) });
+  }
+);
+var CardActionList = ({ actions }) => /* @__PURE__ */ jsx42(Fragment9, { children: actions.map((action) => /* @__PURE__ */ jsx42(CardAction, { action }, action.id)) });
 var DeploymentDashboardCard = ({
   entityType,
   title,
@@ -5153,20 +5209,25 @@ var DeploymentDashboardCard = ({
   expanded: controlledExpanded,
   onExpandToggle,
   onCopyId,
-  onContextMenu,
   className,
   children
 }) => {
   const theme2 = useTheme2();
   const entityColor = theme2.palette.deployment?.entity?.[entityType] ?? deploymentEntityColors[entityType];
+  const isControlled = expandable && onExpandToggle != null;
   const { expanded, toggle } = useControlledExpand(
-    expandable && onExpandToggle != null ? controlledExpanded : void 0,
-    expandable && onExpandToggle != null ? onExpandToggle : void 0
+    isControlled ? controlledExpanded : void 0,
+    isControlled ? onExpandToggle : void 0
   );
   const isWorkspace = entityType === "workspace";
   const isDeployment = entityType === "deployment";
-  const isAgent = entityType === "agent";
-  const capacityClamped = isDeployment && capacity != null ? Math.min(100, Math.max(0, capacity)) : void 0;
+  const getClampedCapacity = (capacity2) => {
+    if (!isDeployment || capacity2 == null) {
+      return void 0;
+    }
+    return Math.min(100, Math.max(0, capacity2));
+  };
+  const capacityClamped = getClampedCapacity(capacity);
   return /* @__PURE__ */ jsxs19(
     Paper,
     {
@@ -5178,7 +5239,7 @@ var DeploymentDashboardCard = ({
         boxShadow: isWorkspace ? deploymentSurfaceTokens.workspaceShadow : "none",
         px: 1,
         py: isDeployment ? 2 : 1,
-        pl: isAgent && !expandable ? 2 : 1,
+        pl: 1,
         display: "flex",
         flexDirection: "column",
         gap: 0
@@ -5196,7 +5257,7 @@ var DeploymentDashboardCard = ({
             children: [
               /* @__PURE__ */ jsxs19(Box12, { sx: { display: "flex", flexDirection: "column", gap: 0.5, minWidth: 0 }, children: [
                 /* @__PURE__ */ jsxs19(Box12, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
-                  expandable && /* @__PURE__ */ jsx42(
+                  expandable ? /* @__PURE__ */ jsx42(
                     IconButton8,
                     {
                       size: "small",
@@ -5205,7 +5266,7 @@ var DeploymentDashboardCard = ({
                       sx: { p: "5px" },
                       children: expanded ? /* @__PURE__ */ jsx42(ExpandMoreIcon, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } }) : /* @__PURE__ */ jsx42(ChevronRightIcon2, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } })
                     }
-                  ),
+                  ) : /* @__PURE__ */ jsx42(Box12, { sx: { width: 26, flexShrink: 0 } }),
                   /* @__PURE__ */ jsx42(EntityChip, { entityType, color: entityColor }),
                   /* @__PURE__ */ jsx42(
                     Typography10,
@@ -5225,7 +5286,7 @@ var DeploymentDashboardCard = ({
                     sx: {
                       display: "flex",
                       gap: 2,
-                      px: expandable ? "36px" : 0,
+                      px: "34px",
                       color: deploymentSurfaceTokens.textSecondary
                     },
                     children: [
@@ -5244,22 +5305,7 @@ var DeploymentDashboardCard = ({
               ] }),
               /* @__PURE__ */ jsxs19(Box12, { sx: { display: "flex", gap: 1, alignItems: "center", flexShrink: 0 }, children: [
                 statusIndicator != null && /* @__PURE__ */ jsx42(StatusDot, { status: statusIndicator, "aria-hidden": true }),
-                /* @__PURE__ */ jsx42(CardActionList, { actions }),
-                onContextMenu && /* @__PURE__ */ jsx42(
-                  IconButton8,
-                  {
-                    size: "small",
-                    onClick: onContextMenu,
-                    "aria-label": "Open menu",
-                    sx: {
-                      border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
-                      borderRadius: "8px",
-                      p: 1,
-                      bgcolor: "white"
-                    },
-                    children: /* @__PURE__ */ jsx42(MoreHorizIcon, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.textPrimary } })
-                  }
-                )
+                /* @__PURE__ */ jsx42(CardActionList, { actions })
               ] })
             ]
           }
@@ -5458,7 +5504,7 @@ var Rail = styled30(Box13, {
   flexShrink: 0,
   alignSelf: "stretch"
 }));
-var TreeRow = ({ node, depth, onExpandToggle, onCopyId, onContextMenu, renderCard }) => {
+var TreeRow = ({ node, depth, onExpandToggle, onCopyId, renderCard }) => {
   const hasChildren = Boolean(node.children && node.children.length > 0);
   const { expanded, toggle } = useControlledExpand(
     onExpandToggle != null ? node.expanded : void 0,
@@ -5488,7 +5534,6 @@ var TreeRow = ({ node, depth, onExpandToggle, onCopyId, onContextMenu, renderCar
             depth: depth + 1,
             onExpandToggle,
             onCopyId,
-            onContextMenu,
             renderCard
           },
           child.id
@@ -5511,7 +5556,6 @@ var TreeRow = ({ node, depth, onExpandToggle, onCopyId, onContextMenu, renderCar
       expanded,
       onExpandToggle: hasChildren ? toggle : void 0,
       onCopyId: onCopyId && node.idDisplay ? () => onCopyId(node.id) : void 0,
-      onContextMenu: onContextMenu ? (e) => onContextMenu(node.id, e) : void 0,
       children: renderedChildren
     }
   );
@@ -5521,7 +5565,6 @@ var DeploymentDashboardTree = ({
   nodes,
   onExpandToggle,
   onCopyId,
-  onContextMenu,
   renderCard
 }) => {
   return /* @__PURE__ */ jsx45(
@@ -5541,7 +5584,6 @@ var DeploymentDashboardTree = ({
           depth: 0,
           onExpandToggle,
           onCopyId,
-          onContextMenu,
           renderCard
         },
         node.id