@cere/cere-design-system 0.0.18 → 0.0.19

package/dist/index.d.mts

@@ -152,9 +152,24 @@ declare const useIsMobile: () => boolean;
 
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 interface ButtonProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
+    /**
+     * The visual style variant of the button
+     * - primary: Filled button with primary color background
+     * - secondary: Outlined button with transparent background and border
+     * - tertiary: Text button with no background or border
+     */
     variant?: ButtonVariant;
+    /**
+     * The size of the button
+     */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * Icon element to display before the button text
+     */
     startIcon?: React__default.ReactNode;
+    /**
+     * Icon element to display after the button text
+     */
     endIcon?: React__default.ReactNode;
 }
 declare const Button: React__default.FC<ButtonProps>;
@@ -1131,6 +1146,7 @@ interface DeploymentCardAction {
     icon?: React__default.ReactNode;
     onClick?: () => void;
     highlight?: boolean;
+    outlined?: boolean;
 }
 interface DeploymentDashboardCardProps {
     /** Entity type: drives chip color and icon (Figma 15-1725, 15-1276) */
@@ -1157,8 +1173,6 @@ interface DeploymentDashboardCardProps {
     onExpandToggle?: () => void;
     /** When copy ID is clicked */
     onCopyId?: () => void;
-    /** Open context menu (three-dots) */
-    onContextMenu?: (e: React__default.MouseEvent) => void;
     /** Optional className */
     className?: string;
     /** Child content rendered inside the card border (used by tree to nest children) */
@@ -1223,8 +1237,6 @@ interface DeploymentDashboardTreeProps {
     onExpandToggle?: (nodeId: string) => void;
     /** When a card's copy-ID button is clicked */
     onCopyId?: (nodeId: string) => void;
-    /** Open context menu for node */
-    onContextMenu?: (nodeId: string, e: React__default.MouseEvent) => void;
     /** Override row content; default: render DeploymentDashboardCard from node data */
     renderCard?: (node: DeploymentTreeNode) => React__default.ReactNode;
 }

package/dist/index.d.ts

@@ -152,9 +152,24 @@ declare const useIsMobile: () => boolean;
 
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 interface ButtonProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
+    /**
+     * The visual style variant of the button
+     * - primary: Filled button with primary color background
+     * - secondary: Outlined button with transparent background and border
+     * - tertiary: Text button with no background or border
+     */
     variant?: ButtonVariant;
+    /**
+     * The size of the button
+     */
     size?: 'small' | 'medium' | 'large';
+    /**
+     * Icon element to display before the button text
+     */
     startIcon?: React__default.ReactNode;
+    /**
+     * Icon element to display after the button text
+     */
     endIcon?: React__default.ReactNode;
 }
 declare const Button: React__default.FC<ButtonProps>;
@@ -1131,6 +1146,7 @@ interface DeploymentCardAction {
     icon?: React__default.ReactNode;
     onClick?: () => void;
     highlight?: boolean;
+    outlined?: boolean;
 }
 interface DeploymentDashboardCardProps {
     /** Entity type: drives chip color and icon (Figma 15-1725, 15-1276) */
@@ -1157,8 +1173,6 @@ interface DeploymentDashboardCardProps {
     onExpandToggle?: () => void;
     /** When copy ID is clicked */
     onCopyId?: () => void;
-    /** Open context menu (three-dots) */
-    onContextMenu?: (e: React__default.MouseEvent) => void;
     /** Optional className */
     className?: string;
     /** Child content rendered inside the card border (used by tree to nest children) */
@@ -1223,8 +1237,6 @@ interface DeploymentDashboardTreeProps {
     onExpandToggle?: (nodeId: string) => void;
     /** When a card's copy-ID button is clicked */
     onCopyId?: (nodeId: string) => void;
-    /** Open context menu for node */
-    onContextMenu?: (nodeId: string, e: React__default.MouseEvent) => void;
     /** Override row content; default: render DeploymentDashboardCard from node data */
     renderCard?: (node: DeploymentTreeNode) => React__default.ReactNode;
 }

package/dist/index.js

@@ -1956,6 +1956,17 @@ var useIsMobile = () => {
 var import_Button = __toESM(require("@mui/material/Button"));
 var import_styles2 = require("@mui/material/styles");
 var import_jsx_runtime4 = require("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 = (0, import_styles2.styled)(import_Button.default)(() => ({
   backgroundColor: colors.primary.main,
   color: colors.primary.contrastText,
@@ -1970,21 +1981,42 @@ var StyledPrimaryButton = (0, import_styles2.styled)(import_Button.default)(() =
     color: colors.grey[500]
   }
 }));
+var iconStyles = {
+  "& > *": {
+    fontSize: BUTTON_TYPOGRAPHY.fontSize
+  }
+};
 var StyledSecondaryButton = (0, import_styles2.styled)(import_Button.default)(() => ({
-  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 = (0, import_styles2.styled)(import_Button.default)(() => ({
@@ -2000,6 +2032,11 @@ var StyledTertiaryButton = (0, import_styles2.styled)(import_Button.default)(()
     color: colors.grey[500]
   }
 }));
+var BUTTON_COMPONENTS = {
+  primary: StyledPrimaryButton,
+  secondary: StyledSecondaryButton,
+  tertiary: StyledTertiaryButton
+};
 var Button = ({
   variant = "primary",
   children,
@@ -2007,21 +2044,13 @@ var Button = ({
   endIcon,
   ...props
 }) => {
+  const ButtonComponent = BUTTON_COMPONENTS[variant];
   const buttonProps = {
     ...props,
     startIcon,
     endIcon
   };
-  switch (variant) {
-    case "primary":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledPrimaryButton, { ...buttonProps, children });
-    case "secondary":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledSecondaryButton, { ...buttonProps, children });
-    case "tertiary":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledTertiaryButton, { ...buttonProps, children });
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledPrimaryButton, { ...buttonProps, children });
-  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonComponent, { ...buttonProps, children });
 };
 
 // src/components/buttons/IconButton.tsx
@@ -5029,7 +5058,6 @@ var ListItem4 = ({
 
 // src/components/layout/DeploymentDashboardCard/DeploymentDashboardCard.tsx
 var import_material27 = require("@mui/material");
-var import_MoreHoriz = __toESM(require("@mui/icons-material/MoreHoriz"));
 var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
 var import_ChevronRight2 = __toESM(require("@mui/icons-material/ChevronRight"));
 var import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"));
@@ -5059,7 +5087,7 @@ var ENTITY_LABELS = {
   engagement: "Engagement",
   agent: "Agent"
 };
-var ENTITY_ICON_SIZE = 24;
+var ENTITY_ICON_SIZE = 16;
 var ENTITY_ICONS = {
   workspace: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_WorkOutline.default, { sx: { fontSize: ENTITY_ICON_SIZE } }),
   stream: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_Waves.default, { sx: { fontSize: ENTITY_ICON_SIZE } }),
@@ -5074,6 +5102,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 = (0, import_styles26.styled)(import_material27.Box, {
   shouldForwardProp: (p) => p !== "status"
 })(({ status }) => ({
@@ -5089,13 +5129,13 @@ var EntityChip = ({ entityType, color }) => /* @__PURE__ */ (0, import_jsx_runti
     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: [
@@ -5104,8 +5144,13 @@ var EntityChip = ({ entityType, color }) => /* @__PURE__ */ (0, import_jsx_runti
         import_material27.Typography,
         {
           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]
         }
       )
@@ -5168,31 +5213,42 @@ var CapacityBar = ({ value, indented = false }) => /* @__PURE__ */ (0, import_js
     }
   )
 ] });
-var CardActionList = ({ actions }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+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__ */ (0, import_jsx_runtime42.jsxs)(
   import_material27.Box,
   {
     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__ */ (0, import_jsx_runtime42.jsx)(import_material27.Box, { component: "span", sx: { display: "flex", alignItems: "center" }, children: action.icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_material27.Typography, { variant: "body2", fontWeight: 500, component: "span", sx: { fontSize: "14px" }, children: action.label })
+      action.label && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_material27.Typography, { variant: "body2", fontWeight: 500, component: "span", sx: { fontSize: "14px" }, children: action.label })
     ]
-  },
-  action.id
-)) });
+  }
+);
+var CardActionList = ({ actions }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CardAction, { action }, action.id)) });
 var DeploymentDashboardCard = ({
   entityType,
   title,
@@ -5206,20 +5262,25 @@ var DeploymentDashboardCard = ({
   expanded: controlledExpanded,
   onExpandToggle,
   onCopyId,
-  onContextMenu,
   className,
   children
 }) => {
   const theme2 = (0, import_material27.useTheme)();
   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__ */ (0, import_jsx_runtime42.jsxs)(
     import_material27.Paper,
     {
@@ -5231,7 +5292,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
@@ -5249,7 +5310,7 @@ var DeploymentDashboardCard = ({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_material27.Box, { sx: { display: "flex", flexDirection: "column", gap: 0.5, minWidth: 0 }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_material27.Box, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
-                  expandable && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  expandable ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     import_material27.IconButton,
                     {
                       size: "small",
@@ -5258,7 +5319,7 @@ var DeploymentDashboardCard = ({
                       sx: { p: "5px" },
                       children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ExpandMore.default, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_ChevronRight2.default, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.accentBlue } })
                     }
-                  ),
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_material27.Box, { sx: { width: 26, flexShrink: 0 } }),
                   /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EntityChip, { entityType, color: entityColor }),
                   /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     import_material27.Typography,
@@ -5278,7 +5339,7 @@ var DeploymentDashboardCard = ({
                     sx: {
                       display: "flex",
                       gap: 2,
-                      px: expandable ? "36px" : 0,
+                      px: "34px",
                       color: deploymentSurfaceTokens.textSecondary
                     },
                     children: [
@@ -5297,22 +5358,7 @@ var DeploymentDashboardCard = ({
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_material27.Box, { sx: { display: "flex", gap: 1, alignItems: "center", flexShrink: 0 }, children: [
                 statusIndicator != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StatusDot, { status: statusIndicator, "aria-hidden": true }),
-                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CardActionList, { actions }),
-                onContextMenu && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                  import_material27.IconButton,
-                  {
-                    size: "small",
-                    onClick: onContextMenu,
-                    "aria-label": "Open menu",
-                    sx: {
-                      border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
-                      borderRadius: "8px",
-                      p: 1,
-                      bgcolor: "white"
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_MoreHoriz.default, { sx: { fontSize: CHEVRON_SIZE, color: deploymentSurfaceTokens.textPrimary } })
-                  }
-                )
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CardActionList, { actions })
               ] })
             ]
           }
@@ -5511,7 +5557,7 @@ var Rail = (0, import_styles28.styled)(import_material29.Box, {
   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,
@@ -5541,7 +5587,6 @@ var TreeRow = ({ node, depth, onExpandToggle, onCopyId, onContextMenu, renderCar
             depth: depth + 1,
             onExpandToggle,
             onCopyId,
-            onContextMenu,
             renderCard
           },
           child.id
@@ -5564,7 +5609,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
     }
   );
@@ -5574,7 +5618,6 @@ var DeploymentDashboardTree = ({
   nodes,
   onExpandToggle,
   onCopyId,
-  onContextMenu,
   renderCard
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -5594,7 +5637,6 @@ var DeploymentDashboardTree = ({
           depth: 0,
           onExpandToggle,
           onCopyId,
-          onContextMenu,
           renderCard
         },
         node.id