@cere/cere-design-system 0.0.44 → 0.1.0

package/dist/chunk-U2QHFISG.js

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/components/layout/Link.tsx
+var _Link = require('@mui/material/Link'); var _Link2 = _interopRequireDefault(_Link);
+var _styles = require('@mui/material/styles');
+var _jsxruntime = require('react/jsx-runtime');
+var StyledLink = _styles.styled.call(void 0, (0, _Link2.default))(({ theme }) => ({
+  color: theme.palette.primary.main,
+  "&:hover": {
+    color: theme.palette.primary.light
+  }
+}));
+var Link = ({ underline = "hover", ...props }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledLink, { underline, ...props });
+};
+
+
+
+exports.Link = Link;
+//# sourceMappingURL=chunk-U2QHFISG.js.map

package/dist/chunk-U2QHFISG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-U2QHFISG.js","../src/components/layout/Link.tsx"],"names":[],"mappings":"AAAA;ACCA,sFAAmD;AACnD,8CAAuB;AAad,+CAAA;AART,IAAM,WAAA,EAAa,4BAAA,mBAAc,CAAA,CAAE,CAAC,EAAE,MAAM,CAAA,EAAA,GAAA,CAAO;AAAA,EACjD,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,OAAA,CAAQ,IAAA;AAAA,EAC7B,SAAA,EAAW;AAAA,IACT,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,OAAA,CAAQ;AAAA,EAC/B;AACF,CAAA,CAAE,CAAA;AAEK,IAAM,KAAA,EAA4B,CAAC,EAAE,UAAA,EAAY,OAAA,EAAS,GAAG,MAAM,CAAA,EAAA,GAAM;AAC9E,EAAA,uBAAO,6BAAA,UAAC,EAAA,EAAW,SAAA,EAAuB,GAAG,MAAA,CAAO,CAAA;AACtD,CAAA;ADHA;AACA;AACE;AACF,oBAAC","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-U2QHFISG.js","sourcesContent":[null,"import React from 'react';\nimport MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';\nimport { styled } from '@mui/material/styles';\nexport interface LinkProps extends MuiLinkProps {\n  underline?: 'none' | 'hover' | 'always';\n}\n\nconst StyledLink = styled(MuiLink)(({ theme }) => ({\n  color: theme.palette.primary.main,\n  '&:hover': {\n    color: theme.palette.primary.light,\n  },\n}));\n\nexport const Link: React.FC<LinkProps> = ({ underline = 'hover', ...props }) => {\n  return <StyledLink underline={underline} {...props} />;\n};\n\n"]}

package/dist/chunk-UPGFBPFX.mjs

@@ -0,0 +1,25 @@
+// src/components/icons/CereIcon.tsx
+import * as React from "react";
+import SvgIcon from "@mui/material/SvgIcon";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CereIcon = React.forwardRef(
+  function CereIcon2(props, ref) {
+    const reactId = React.useId();
+    const clipId = `cere-icon-clip-${reactId}`;
+    return /* @__PURE__ */ jsxs(SvgIcon, { ref, ...props, viewBox: "0 0 24 28", children: [
+      /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12.77 26.848c-5.95 0-10.572-2.88-12.063-7.515l-.334-1.037.978-.471c.103-.051 2.668-1.35 2.509-3.901-.169-2.695-2.339-3.96-2.431-4.012L.475 9.37l.412-1.025C2.838 3.601 7.28.77 12.77.77c4.314 0 8.095 1.698 10.37 4.658l.575.748-4.535 6.146-1.013-.984c-.02-.019-2.175-2.069-4.678-2.08-2.411-.012-3.362.902-3.401.941L8.3 8.473c.164-.175 1.695-1.733 5.199-1.707 2.232.01 4.161 1.084 5.3 1.896l1.778-2.41c-1.845-1.91-4.636-2.99-7.808-2.99-4.095 0-7.459 1.91-9.182 5.155 1.042.879 2.57 2.62 2.742 5.35.185 2.95-1.692 4.806-2.913 5.692 1.445 3.043 4.932 4.895 9.354 4.895 3.063 0 6.198-1.2 8.134-3.053l-2.023-2.55c-1.077.768-2.917 1.764-5.323 1.89-3.416.177-5.436-1.404-5.52-1.471l1.536-1.954c.047.035 1.42 1.065 3.855.936 2.884-.15 4.734-2.012 4.75-2.032l.98-1.002.874 1.094 4.088 5.155-.627.779c-2.3 2.856-6.508 4.702-10.726 4.702Z",
+          fill: "currentColor"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("path", { fill: "currentColor", transform: "translate(.373 .77)", d: "M0 0h23.615v26.36H0z" }) }) })
+    ] });
+  }
+);
+
+export {
+  CereIcon
+};
+//# sourceMappingURL=chunk-UPGFBPFX.mjs.map

package/dist/chunk-UPGFBPFX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/icons/CereIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport SvgIcon, { type SvgIconProps } from '@mui/material/SvgIcon';\n\nexport const CereIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(\n  function CereIcon(props, ref) {\n    const reactId = React.useId();\n    const clipId = `cere-icon-clip-${reactId}`;\n    return (\n      <SvgIcon ref={ref} {...props} viewBox=\"0 0 24 28\">\n        <g clipPath={`url(#${clipId})`}>\n          <path\n            d=\"M12.77 26.848c-5.95 0-10.572-2.88-12.063-7.515l-.334-1.037.978-.471c.103-.051 2.668-1.35 2.509-3.901-.169-2.695-2.339-3.96-2.431-4.012L.475 9.37l.412-1.025C2.838 3.601 7.28.77 12.77.77c4.314 0 8.095 1.698 10.37 4.658l.575.748-4.535 6.146-1.013-.984c-.02-.019-2.175-2.069-4.678-2.08-2.411-.012-3.362.902-3.401.941L8.3 8.473c.164-.175 1.695-1.733 5.199-1.707 2.232.01 4.161 1.084 5.3 1.896l1.778-2.41c-1.845-1.91-4.636-2.99-7.808-2.99-4.095 0-7.459 1.91-9.182 5.155 1.042.879 2.57 2.62 2.742 5.35.185 2.95-1.692 4.806-2.913 5.692 1.445 3.043 4.932 4.895 9.354 4.895 3.063 0 6.198-1.2 8.134-3.053l-2.023-2.55c-1.077.768-2.917 1.764-5.323 1.89-3.416.177-5.436-1.404-5.52-1.471l1.536-1.954c.047.035 1.42 1.065 3.855.936 2.884-.15 4.734-2.012 4.75-2.032l.98-1.002.874 1.094 4.088 5.155-.627.779c-2.3 2.856-6.508 4.702-10.726 4.702Z\"\n            fill=\"currentColor\"\n          />\n        </g>\n        <defs>\n          <clipPath id={clipId}>\n            <path fill=\"currentColor\" transform=\"translate(.373 .77)\" d=\"M0 0h23.615v26.36H0z\" />\n          </clipPath>\n        </defs>\n      </SvgIcon>\n    );\n  },\n);\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,OAAO,aAAoC;AAOrC,SAEI,KAFJ;AALC,IAAM,WAAiB;AAAA,EAC5B,SAASA,UAAS,OAAO,KAAK;AAC5B,UAAM,UAAgB,YAAM;AAC5B,UAAM,SAAS,kBAAkB,OAAO;AACxC,WACE,qBAAC,WAAQ,KAAW,GAAG,OAAO,SAAQ,aACpC;AAAA,0BAAC,OAAE,UAAU,QAAQ,MAAM,KACzB;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA;AAAA,MACP,GACF;AAAA,MACA,oBAAC,UACC,8BAAC,cAAS,IAAI,QACZ,8BAAC,UAAK,MAAK,gBAAe,WAAU,uBAAsB,GAAE,wBAAuB,GACrF,GACF;AAAA,OACF;AAAA,EAEJ;AACF;","names":["CereIcon"]}

package/dist/chunk-X7E6GMFL.js

@@ -0,0 +1,233 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/components/layout/WorkflowNode/WorkflowNode.tsx
+var _material = require('@mui/material');
+var _PlayCircleOutline = require('@mui/icons-material/PlayCircleOutline'); var _PlayCircleOutline2 = _interopRequireDefault(_PlayCircleOutline);
+var _CloudDownload = require('@mui/icons-material/CloudDownload'); var _CloudDownload2 = _interopRequireDefault(_CloudDownload);
+var _Waves = require('@mui/icons-material/Waves'); var _Waves2 = _interopRequireDefault(_Waves);
+var _Link = require('@mui/icons-material/Link'); var _Link2 = _interopRequireDefault(_Link);
+var _Cloud = require('@mui/icons-material/Cloud'); var _Cloud2 = _interopRequireDefault(_Cloud);
+var _Bolt = require('@mui/icons-material/Bolt'); var _Bolt2 = _interopRequireDefault(_Bolt);
+var _FlashOn = require('@mui/icons-material/FlashOn'); var _FlashOn2 = _interopRequireDefault(_FlashOn);
+var _PlayArrow = require('@mui/icons-material/PlayArrow'); var _PlayArrow2 = _interopRequireDefault(_PlayArrow);
+var _Psychology = require('@mui/icons-material/Psychology'); var _Psychology2 = _interopRequireDefault(_Psychology);
+var _SmartToyOutlined = require('@mui/icons-material/SmartToyOutlined'); var _SmartToyOutlined2 = _interopRequireDefault(_SmartToyOutlined);
+var _CallSplit = require('@mui/icons-material/CallSplit'); var _CallSplit2 = _interopRequireDefault(_CallSplit);
+var _Send = require('@mui/icons-material/Send'); var _Send2 = _interopRequireDefault(_Send);
+var _CheckCircleOutline = require('@mui/icons-material/CheckCircleOutline'); var _CheckCircleOutline2 = _interopRequireDefault(_CheckCircleOutline);
+var _ForkRight = require('@mui/icons-material/ForkRight'); var _ForkRight2 = _interopRequireDefault(_ForkRight);
+var _CallMerge = require('@mui/icons-material/CallMerge'); var _CallMerge2 = _interopRequireDefault(_CallMerge);
+
+var _jsxruntime = require('react/jsx-runtime');
+var WORKFLOW_NODE_LABELS = {
+  start: "Start",
+  input: "Input",
+  stream: "Stream",
+  rafts: "Rafts",
+  cubbies: "Cubbies",
+  events: "Events",
+  trigger: "Trigger",
+  action: "Action",
+  aiModel: "AI Model",
+  aiAgent: "Agent",
+  condition: "Condition",
+  output: "Output",
+  end: "End",
+  parallel: "Parallel",
+  merge: "Merge"
+};
+var NODE_ICON_SIZE = 18;
+var WORKFLOW_NODE_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1)";
+var WORKFLOW_NODE_ICONS = {
+  start: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PlayCircleOutline2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  input: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CloudDownload2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  stream: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Waves2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  rafts: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Link2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  cubbies: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Cloud2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  events: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Bolt2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FlashOn2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  action: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PlayArrow2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  aiModel: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Psychology2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  aiAgent: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _SmartToyOutlined2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  condition: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CallSplit2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  output: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Send2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  end: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircleOutline2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  parallel: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ForkRight2.default, { sx: { fontSize: NODE_ICON_SIZE } }),
+  merge: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CallMerge2.default, { sx: { fontSize: NODE_ICON_SIZE } })
+};
+var BADGE_TYPOGRAPHY = {
+  fontSize: "12px",
+  fontWeight: 500,
+  lineHeight: 1.33
+};
+var SideConnectorDot = ({
+  accentColor,
+  side
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _material.Box,
+  {
+    "data-testid": `workflow-node-dot-${side}`,
+    sx: (theme) => ({
+      position: "absolute",
+      top: "50%",
+      [side]: "-4px",
+      transform: "translateY(-50%)",
+      width: "8px",
+      height: "8px",
+      borderRadius: "999px",
+      border: `2px solid ${theme.palette.common.white}`,
+      backgroundColor: accentColor,
+      boxShadow: WORKFLOW_NODE_SHADOW,
+      zIndex: 1,
+      pointerEvents: "none"
+    })
+  }
+);
+var NodeTypeBadge = ({ nodeType, badgeBackground, badgeBorder, badgeText, icon, label }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  _material.Box,
+  {
+    sx: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 1,
+      px: 1,
+      py: 0.5,
+      borderRadius: "999px",
+      backgroundColor: badgeBackground,
+      border: `1px solid ${badgeBorder}`,
+      flexShrink: 0
+    },
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { color: badgeText, display: "flex", alignItems: "center" }, children: _nullishCoalesce(icon, () => ( WORKFLOW_NODE_ICONS[nodeType])) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _material.Typography,
+        {
+          variant: "body2",
+          component: "span",
+          sx: {
+            color: badgeText,
+            fontWeight: BADGE_TYPOGRAPHY.fontWeight,
+            fontSize: BADGE_TYPOGRAPHY.fontSize,
+            lineHeight: BADGE_TYPOGRAPHY.lineHeight
+          },
+          children: _nullishCoalesce(label, () => ( WORKFLOW_NODE_LABELS[nodeType]))
+        }
+      )
+    ]
+  }
+);
+var WorkflowNode = ({
+  nodeType,
+  title,
+  description,
+  icon,
+  badgeLabel,
+  selected = false,
+  className,
+  showSideDots = true,
+  sx,
+  ...paperProps
+}) => {
+  const theme = _material.useTheme.call(void 0, );
+  const nodeTokens = theme.palette.workflow.node[nodeType];
+  const chrome = theme.palette.workflow.chrome;
+  const accentColor = nodeTokens.accent;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _material.Paper,
+    {
+      elevation: 0,
+      className,
+      sx: [
+        {
+          display: "flex",
+          flexDirection: "row",
+          position: "relative",
+          overflow: "visible",
+          border: `1px solid ${selected ? accentColor : nodeTokens.cardBorder}`,
+          borderRadius: "14px",
+          minWidth: 220,
+          maxWidth: 460,
+          minHeight: "76px",
+          backgroundColor: "common.white",
+          boxShadow: WORKFLOW_NODE_SHADOW,
+          transition: "border-color 0.15s ease"
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      ...paperProps,
+      children: [
+        showSideDots && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SideConnectorDot, { accentColor, side: "left" }),
+        showSideDots && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SideConnectorDot, { accentColor, side: "right" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _material.Box,
+          {
+            sx: {
+              flex: 1,
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: 2,
+              px: 2,
+              py: 2,
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { sx: { minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _material.Typography,
+                  {
+                    variant: "subtitle2",
+                    noWrap: true,
+                    sx: {
+                      color: chrome.titleText,
+                      fontSize: "16px",
+                      fontWeight: 500,
+                      lineHeight: "24px",
+                      letterSpacing: "-0.3125px"
+                    },
+                    children: title
+                  }
+                ),
+                description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _material.Typography,
+                  {
+                    variant: "body2",
+                    sx: {
+                      color: chrome.descriptionText,
+                      fontSize: "12px",
+                      lineHeight: "16px",
+                      mt: 0.25,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      display: "-webkit-box",
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: "vertical"
+                    },
+                    children: description
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                NodeTypeBadge,
+                {
+                  nodeType,
+                  badgeBackground: nodeTokens.badgeBg,
+                  badgeBorder: nodeTokens.badgeBorder,
+                  badgeText: nodeTokens.badgeText,
+                  icon,
+                  label: badgeLabel
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+
+
+
+
+exports.WORKFLOW_NODE_LABELS = WORKFLOW_NODE_LABELS; exports.WORKFLOW_NODE_SHADOW = WORKFLOW_NODE_SHADOW; exports.WorkflowNode = WorkflowNode;
+//# sourceMappingURL=chunk-X7E6GMFL.js.map

package/dist/chunk-X7E6GMFL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-X7E6GMFL.js","../src/components/layout/WorkflowNode/WorkflowNode.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-X7E6GMFL.js","sourcesContent":[null,"import React from 'react';\nimport { Paper, Box, Typography } from '@mui/material';\nimport type { PaperProps as MuiPaperProps } from '@mui/material/Paper';\nimport PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';\nimport CloudDownloadIcon from '@mui/icons-material/CloudDownload';\nimport WavesIcon from '@mui/icons-material/Waves';\nimport LinkIcon from '@mui/icons-material/Link';\nimport CloudIcon from '@mui/icons-material/Cloud';\nimport BoltIcon from '@mui/icons-material/Bolt';\nimport FlashOnIcon from '@mui/icons-material/FlashOn';\nimport PlayArrowIcon from '@mui/icons-material/PlayArrow';\nimport PsychologyIcon from '@mui/icons-material/Psychology';\nimport SmartToyOutlinedIcon from '@mui/icons-material/SmartToyOutlined';\nimport CallSplitIcon from '@mui/icons-material/CallSplit';\nimport SendIcon from '@mui/icons-material/Send';\nimport CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';\nimport ForkRightIcon from '@mui/icons-material/ForkRight';\nimport CallMergeIcon from '@mui/icons-material/CallMerge';\nimport { useTheme } from '@mui/material';\nimport type { Theme } from '@mui/material/styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** All supported workflow node types */\nexport type WorkflowNodeType =\n  | 'start'\n  | 'input'\n  | 'stream'\n  | 'rafts'\n  | 'cubbies'\n  | 'events'\n  | 'trigger'\n  | 'action'\n  | 'aiModel'\n  | 'aiAgent'\n  | 'condition'\n  | 'output'\n  | 'end'\n  | 'parallel'\n  | 'merge';\n\nexport interface WorkflowNodeProps extends Omit<MuiPaperProps, 'title'> {\n  /** The workflow node type — drives accent color, default icon, and badge label */\n  nodeType: WorkflowNodeType;\n  /** Primary title displayed in the node */\n  title: string;\n  /** Optional description text below the title */\n  description?: string;\n  /** Override the default icon for this node type */\n  icon?: React.ReactNode;\n  /** Override the default badge label for this node type */\n  badgeLabel?: string;\n  /** Whether the node is currently selected (highlights border with accent color) */\n  selected?: boolean;\n  /** Optional className */\n  className?: string;\n  /** Renders left/right connector dots to match the design spec */\n  showSideDots?: boolean;\n}\n\n// ---------------------------------------------------------------------------\n// Constants\n// ---------------------------------------------------------------------------\n\n/** Human-readable labels for each node type (matches Figma badge text) */\nexport const WORKFLOW_NODE_LABELS: Record<WorkflowNodeType, string> = {\n  start: 'Start',\n  input: 'Input',\n  stream: 'Stream',\n  rafts: 'Rafts',\n  cubbies: 'Cubbies',\n  events: 'Events',\n  trigger: 'Trigger',\n  action: 'Action',\n  aiModel: 'AI Model',\n  aiAgent: 'Agent',\n  condition: 'Condition',\n  output: 'Output',\n  end: 'End',\n  parallel: 'Parallel',\n  merge: 'Merge',\n};\n\nconst NODE_ICON_SIZE = 18;\n\n/** Shared elevation shadow for workflow node cards and connector handles (Figma 277-8244) */\nexport const WORKFLOW_NODE_SHADOW = '0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1)';\n\n/** Default icon for each node type */\nconst WORKFLOW_NODE_ICONS: Record<WorkflowNodeType, React.ReactElement> = {\n  start: <PlayCircleOutlineIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  input: <CloudDownloadIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  stream: <WavesIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  rafts: <LinkIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  cubbies: <CloudIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  events: <BoltIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  trigger: <FlashOnIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  action: <PlayArrowIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  aiModel: <PsychologyIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  aiAgent: <SmartToyOutlinedIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  condition: <CallSplitIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  output: <SendIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  end: <CheckCircleOutlineIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  parallel: <ForkRightIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n  merge: <CallMergeIcon sx={{ fontSize: NODE_ICON_SIZE }} />,\n};\n\nconst BADGE_TYPOGRAPHY = {\n  fontSize: '12px',\n  fontWeight: 500,\n  lineHeight: 1.33,\n} as const;\n\n// ---------------------------------------------------------------------------\n// Sub-components\n// ---------------------------------------------------------------------------\n\n/** Circular connector marker used on left and right sides of the node card */\nconst SideConnectorDot: React.FC<{ accentColor: string; side: 'left' | 'right' }> = ({\n  accentColor,\n  side,\n}) => (\n  <Box\n    data-testid={`workflow-node-dot-${side}`}\n    sx={(theme) => ({\n      position: 'absolute',\n      top: '50%',\n      [side]: '-4px',\n      transform: 'translateY(-50%)',\n      width: '8px',\n      height: '8px',\n      borderRadius: '999px',\n      border: `2px solid ${theme.palette.common.white}`,\n      backgroundColor: accentColor,\n      boxShadow: WORKFLOW_NODE_SHADOW,\n      zIndex: 1,\n      pointerEvents: 'none',\n    })}\n  />\n);\n\n/** Outlined soft badge pill showing node type icon + label (Figma 277-8244) */\nconst NodeTypeBadge: React.FC<{\n  nodeType: WorkflowNodeType;\n  badgeBackground: string;\n  badgeBorder: string;\n  badgeText: string;\n  icon?: React.ReactNode;\n  label?: string;\n}> = ({ nodeType, badgeBackground, badgeBorder, badgeText, icon, label }) => (\n  <Box\n    sx={{\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      gap: 1,\n      px: 1,\n      py: 0.5,\n      borderRadius: '999px',\n      backgroundColor: badgeBackground,\n      border: `1px solid ${badgeBorder}`,\n      flexShrink: 0,\n    }}\n  >\n    <Box sx={{ color: badgeText, display: 'flex', alignItems: 'center' }}>\n      {icon ?? WORKFLOW_NODE_ICONS[nodeType]}\n    </Box>\n    <Typography\n      variant=\"body2\"\n      component=\"span\"\n      sx={{\n        color: badgeText,\n        fontWeight: BADGE_TYPOGRAPHY.fontWeight,\n        fontSize: BADGE_TYPOGRAPHY.fontSize,\n        lineHeight: BADGE_TYPOGRAPHY.lineHeight,\n      }}\n    >\n      {label ?? WORKFLOW_NODE_LABELS[nodeType]}\n    </Typography>\n  </Box>\n);\n\n// ---------------------------------------------------------------------------\n// Main component\n// ---------------------------------------------------------------------------\n\n/**\n * WorkflowNode — visual card for a workflow editor node.\n *\n * Renders a card with a colored left border strip, title, optional description,\n * and a type badge/chip. Designed to integrate with FlowEditor (ReactFlow)\n * via the WorkflowNodeHandle wrapper.\n *\n * @example\n * ```tsx\n * <WorkflowNode\n *   nodeType=\"trigger\"\n *   title=\"HTTP Trigger\"\n *   description=\"Listens for incoming webhook calls\"\n * />\n * ```\n */\nexport const WorkflowNode: React.FC<WorkflowNodeProps> = ({\n  nodeType,\n  title,\n  description,\n  icon,\n  badgeLabel,\n  selected = false,\n  className,\n  showSideDots = true,\n  sx,\n  ...paperProps\n}) => {\n  const theme = useTheme() as Theme;\n  const nodeTokens = theme.palette.workflow.node[nodeType];\n  const chrome = theme.palette.workflow.chrome;\n  const accentColor = nodeTokens.accent;\n\n  return (\n    <Paper\n      elevation={0}\n      className={className}\n      sx={[\n        {\n          display: 'flex',\n          flexDirection: 'row',\n          position: 'relative',\n          overflow: 'visible',\n          border: `1px solid ${selected ? accentColor : nodeTokens.cardBorder}`,\n          borderRadius: '14px',\n          minWidth: 220,\n          maxWidth: 460,\n          minHeight: '76px',\n          backgroundColor: 'common.white',\n          boxShadow: WORKFLOW_NODE_SHADOW,\n          transition: 'border-color 0.15s ease',\n        },\n        ...(Array.isArray(sx) ? sx : [sx]),\n      ]}\n      {...paperProps}\n    >\n      {showSideDots && <SideConnectorDot accentColor={accentColor} side=\"left\" />}\n      {showSideDots && <SideConnectorDot accentColor={accentColor} side=\"right\" />}\n\n      <Box\n        sx={{\n          flex: 1,\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          gap: 2,\n          px: 2,\n          py: 2,\n          minWidth: 0,\n        }}\n      >\n        {/* Left: title + description */}\n        <Box sx={{ minWidth: 0, flex: 1 }}>\n          <Typography\n            variant=\"subtitle2\"\n            noWrap\n            sx={{\n              color: chrome.titleText,\n              fontSize: '16px',\n              fontWeight: 500,\n              lineHeight: '24px',\n              letterSpacing: '-0.3125px',\n            }}\n          >\n            {title}\n          </Typography>\n          {description && (\n            <Typography\n              variant=\"body2\"\n              sx={{\n                color: chrome.descriptionText,\n                fontSize: '12px',\n                lineHeight: '16px',\n                mt: 0.25,\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                display: '-webkit-box',\n                WebkitLineClamp: 2,\n                WebkitBoxOrient: 'vertical',\n              }}\n            >\n              {description}\n            </Typography>\n          )}\n        </Box>\n\n        {/* Right: filled type badge */}\n        <NodeTypeBadge\n          nodeType={nodeType}\n          badgeBackground={nodeTokens.badgeBg}\n          badgeBorder={nodeTokens.badgeBorder}\n          badgeText={nodeTokens.badgeText}\n          icon={icon}\n          label={badgeLabel}\n        />\n      </Box>\n    </Paper>\n  );\n};\n"]}