@cere/cere-design-system 0.1.0 → 0.2.0

package/dist/tokens.css

@@ -1,78 +1,52 @@
-/*
- * @cere/cere-design-system — root CSS tokens.
- *
- * Mirror of `webSurfaceTokens` / `motion` / `borderRadius` / font families.
- * Import once at app root:  import '@cere/cere-design-system/tokens.css';
- *
- * The companion test (src/theme/__tests__/webSurfaceTokens.test.ts) locks
- * this file against the JS token modules — if values drift, the build fails.
+/**
+ * Do not edit directly, this file was auto-generated.
  */
 
 :root {
-  /* Brand */
-  --c-violet:         #aa44f2;
-  --c-violet-tint:    #a54aff;
-  --c-violet-light:   #f0e0fb;
-  --c-violet-dark:    #7c59ac;
-  --c-pink:           #f941e6;
-  --c-pink-light:     #fcdff9;
-  --c-red:            #ff4f59;
-  --c-green:          #49bf63;
-  --c-blue-light:     #e7f4fe;
-  --c-blue-dark:      #598ab8;
-
-  /* ROB extended */
-  --rob-fandango:        #BD32A7;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'HumanSans', sans-serif;
+  --font-display: 'Inter', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --c-violet-light: #f0e0fb;
+  --c-violet: #aa44f2;
+  --c-violet-dark: #7c59ac;
+  --c-violet-tint: #a54aff;
+  --c-pink: #f941e6;
+  --c-pink-light: #fcdff9;
+  --c-red: #ff4f59;
+  --c-green: #49bf63;
+  --c-blue-light: #e7f4fe;
+  --c-blue-dark: #598ab8;
+  --surface-low: #f5f1f7;
+  --surface-mid: #f5f1f7;
+  --surface-high: #fefcff;
+  --surface-contrast: #ffffff;
+  --bg-default: #f5f5f5;
+  --bg-dim: #e6e0e9;
+  --bg-success: #eef5f0;
+  --bg-warning: #fef8e8;
+  --bg-danger: #f9dedc;
+  --text-on-danger: #8c1d18;
+  --text-primary: #1d1b20;
+  --text-secondary: #5f5c64;
+  --text-muted: #938f99;
+  --stroke-on-low: #e6e0e9;
+  --stroke-on-med: #dad1e0;
+  --rob-fandango: #BD32A7;
   --rob-electric-violet: #8B00EC;
-  --rob-ultra-violet:    #6750A4;
-  --rob-bright-1:        #5311e3;
-  --rob-near-black-2:    #0d0627;
-  --rob-near-black-4:    #23194b;
-  --rob-periwinkle:      #D0BCFF;
-
-  /* Surfaces */
-  --surface-low:       #f5f1f7;
-  --surface-mid:       #f5f1f7;
-  --surface-high:      #fefcff;
-  --surface-contrast:  #ffffff;
-
-  /* Backgrounds */
-  --bg-default:        #f5f5f5;
-  --bg-dim:            #e6e0e9;
-  --bg-success:        #eef5f0;
-  --bg-warning:        #fef8e8;
-  --bg-danger:         #f9dedc;
-  /* Foreground for content sitting on var(--bg-danger). NOT a surface. */
-  --text-on-danger:    #8c1d18;
-
-  /* Text */
-  --text-primary:    #1d1b20;
-  --text-secondary:  #5f5c64;
-  --text-muted:      #938f99;
-  --text-link:       #aa44f2;
-
-  /* Strokes */
-  --stroke-on-low:    #e6e0e9;
-  --stroke-on-med:    #dad1e0;
-
-  /* Radius */
-  --radius-sm:   8px;
-  --radius-md:   12px;
-  --radius-lg:   16px;
-  --radius-xl:   20px;
-  --radius-pill: 999px;
-
-  /* Elevation */
-  --shadow-sm:    0px 2px 8px rgba(0,0,0,0.04);
-  --shadow-md:    0px 4px 20px rgba(0,0,0,0.05);
+  --rob-ultra-violet: #6750A4;
+  --rob-periwinkle: #D0BCFF;
+  --rob-bright-1: #5311e3;
+  --rob-near-black-2: #0d0627;
+  --rob-near-black-4: #23194b;
+  --shadow-sm: 0px 2px 8px rgba(0,0,0,0.04);
+  --shadow-md: 0px 4px 20px rgba(0,0,0,0.05);
   --shadow-focus: 0 0 0 4px rgba(170,68,242,0.25);
-
-  /* Motion */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-pill: 999px;
+  --dur-fast: 120ms;
   --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --dur-fast:      120ms;
-
-  /* Type */
-  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-display: 'Inter', sans-serif;
-  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --text-link: #aa44f2;
 }

package/dist/utilities.js

@@ -4,16 +4,14 @@
 
 
 
-var _chunk463SRKKDjs = require('./chunk-463SRKKD.js');
 
+var _chunkHJ24WKU4js = require('./chunk-HJ24WKU4.js');
 
-var _chunkAIY6222Qjs = require('./chunk-AIY6222Q.js');
 
 
 
 
 
 
-
-exports.BytesSize = _chunkAIY6222Qjs.BytesSize; exports.Markdown = _chunk463SRKKDjs.Markdown; exports.OnboardingProvider = _chunk463SRKKDjs.OnboardingProvider; exports.QRCode = _chunk463SRKKDjs.QRCode; exports.Truncate = _chunk463SRKKDjs.Truncate; exports.useOnboarding = _chunk463SRKKDjs.useOnboarding;
+exports.BytesSize = _chunkHJ24WKU4js.BytesSize; exports.Markdown = _chunkHJ24WKU4js.Markdown; exports.OnboardingProvider = _chunkHJ24WKU4js.OnboardingProvider; exports.QRCode = _chunkHJ24WKU4js.QRCode; exports.Truncate = _chunkHJ24WKU4js.Truncate; exports.useOnboarding = _chunkHJ24WKU4js.useOnboarding;
 //# sourceMappingURL=utilities.js.map

package/dist/utilities.js.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/utilities.js"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACF,sDAA4B;AAC5B;AACE;AACF,sDAA4B;AAC5B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,+SAAC","file":"/home/runner/work/cere-design-system/cere-design-system/dist/utilities.js"}
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/utilities.js"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACF,sDAA4B;AAC5B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,+SAAC","file":"/home/runner/work/cere-design-system/cere-design-system/dist/utilities.js"}

package/dist/utilities.mjs

@@ -1,13 +1,11 @@
 import {
+  BytesSize,
   Markdown,
   OnboardingProvider,
   QRCode,
   Truncate,
   useOnboarding
-} from "./chunk-QY65OUAC.mjs";
-import {
-  BytesSize
-} from "./chunk-QD6RLAO2.mjs";
+} from "./chunk-SSFALO6S.mjs";
 export {
   BytesSize,
   Markdown,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cere/cere-design-system",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Cere Network Design System - UI component library built with Material UI and React",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -61,18 +61,23 @@
       "import": "./dist/carousel.mjs",
       "require": "./dist/carousel.js"
     },
-    "./tokens.css": "./dist/tokens.css"
+    "./tokens.css": "./dist/tokens.css",
+    "./fonts/inter.css": "./dist/fonts/inter.css",
+    "./fonts/human-sans.css": "./dist/fonts/human-sans.css"
   },
   "sideEffects": [
     "**/*.css",
-    "./dist/tokens.css"
+    "./dist/tokens.css",
+    "./dist/fonts/inter.css",
+    "./dist/fonts/human-sans.css"
   ],
   "files": [
     "dist",
     ".specify/memory"
   ],
   "scripts": {
-    "build": "tsup",
+    "tokens:build": "style-dictionary build --config style-dictionary.config.mjs",
+    "build": "npm run tokens:build && tsup",
     "dev": "tsup --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -85,9 +90,13 @@
     "lint:fix": "eslint . --ext ts,tsx --fix",
     "type-check": "tsc --noEmit",
     "check-types:ci": "tsc --noEmit",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "changeset": "changeset",
+    "version:changesets": "changeset version",
+    "release": "npm run build && changeset publish"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
     "byte-size": "^9.0.0",
     "date-fns": "^3.6.0",
     "github-markdown-css": "^5.6.1",
@@ -110,8 +119,7 @@
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-react": "^8.0.0",
     "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0",
-    "reactflow": "^11.11.4"
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "embla-carousel-autoplay": {
@@ -123,6 +131,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.0",
+    "@changesets/cli": "^2.31.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@jest/globals": "^29.7.0",
@@ -145,28 +154,33 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/byte-size": "^8.1.2",
     "@types/jest": "^29.5.14",
+    "@types/jest-image-snapshot": "^6.4.1",
     "@types/node": "^22.13.10",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "concurrently": "^9.2.3",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.11",
     "eslint-plugin-storybook": "^0.11.2",
-    "embla-carousel-autoplay": "^8.6.0",
-    "embla-carousel-react": "^8.6.0",
+    "http-server": "^14.1.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-image-snapshot": "^6.5.2",
     "monaco-editor": "^0.55.1",
     "playwright": "^1.48.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "reactflow": "^11.11.4",
     "storybook": "^8.4.7",
+    "style-dictionary": "^4.4.0",
     "ts-jest": "^29.2.5",
     "tsup": "^8.3.5",
     "typescript": "^5.2.2",

package/dist/WorkflowNode-BnxXO6t_.d.mts

@@ -1,46 +0,0 @@
-import React__default from 'react';
-import { PaperProps } from '@mui/material/Paper';
-
-/** All supported workflow node types */
-type WorkflowNodeType = 'start' | 'input' | 'stream' | 'rafts' | 'cubbies' | 'events' | 'trigger' | 'action' | 'aiModel' | 'aiAgent' | 'condition' | 'output' | 'end' | 'parallel' | 'merge';
-interface WorkflowNodeProps extends Omit<PaperProps, 'title'> {
-    /** The workflow node type — drives accent color, default icon, and badge label */
-    nodeType: WorkflowNodeType;
-    /** Primary title displayed in the node */
-    title: string;
-    /** Optional description text below the title */
-    description?: string;
-    /** Override the default icon for this node type */
-    icon?: React__default.ReactNode;
-    /** Override the default badge label for this node type */
-    badgeLabel?: string;
-    /** Whether the node is currently selected (highlights border with accent color) */
-    selected?: boolean;
-    /** Optional className */
-    className?: string;
-    /** Renders left/right connector dots to match the design spec */
-    showSideDots?: boolean;
-}
-/** Human-readable labels for each node type (matches Figma badge text) */
-declare const WORKFLOW_NODE_LABELS: Record<WorkflowNodeType, string>;
-/** Shared elevation shadow for workflow node cards and connector handles (Figma 277-8244) */
-declare const WORKFLOW_NODE_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1)";
-/**
- * WorkflowNode — visual card for a workflow editor node.
- *
- * Renders a card with a colored left border strip, title, optional description,
- * and a type badge/chip. Designed to integrate with FlowEditor (ReactFlow)
- * via the WorkflowNodeHandle wrapper.
- *
- * @example
- * ```tsx
- * <WorkflowNode
- *   nodeType="trigger"
- *   title="HTTP Trigger"
- *   description="Listens for incoming webhook calls"
- * />
- * ```
- */
-declare const WorkflowNode: React__default.FC<WorkflowNodeProps>;
-
-export { WORKFLOW_NODE_LABELS as W, WORKFLOW_NODE_SHADOW as a, WorkflowNode as b, type WorkflowNodeProps as c, type WorkflowNodeType as d };

package/dist/WorkflowNode-BnxXO6t_.d.ts

@@ -1,46 +0,0 @@
-import React__default from 'react';
-import { PaperProps } from '@mui/material/Paper';
-
-/** All supported workflow node types */
-type WorkflowNodeType = 'start' | 'input' | 'stream' | 'rafts' | 'cubbies' | 'events' | 'trigger' | 'action' | 'aiModel' | 'aiAgent' | 'condition' | 'output' | 'end' | 'parallel' | 'merge';
-interface WorkflowNodeProps extends Omit<PaperProps, 'title'> {
-    /** The workflow node type — drives accent color, default icon, and badge label */
-    nodeType: WorkflowNodeType;
-    /** Primary title displayed in the node */
-    title: string;
-    /** Optional description text below the title */
-    description?: string;
-    /** Override the default icon for this node type */
-    icon?: React__default.ReactNode;
-    /** Override the default badge label for this node type */
-    badgeLabel?: string;
-    /** Whether the node is currently selected (highlights border with accent color) */
-    selected?: boolean;
-    /** Optional className */
-    className?: string;
-    /** Renders left/right connector dots to match the design spec */
-    showSideDots?: boolean;
-}
-/** Human-readable labels for each node type (matches Figma badge text) */
-declare const WORKFLOW_NODE_LABELS: Record<WorkflowNodeType, string>;
-/** Shared elevation shadow for workflow node cards and connector handles (Figma 277-8244) */
-declare const WORKFLOW_NODE_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1)";
-/**
- * WorkflowNode — visual card for a workflow editor node.
- *
- * Renders a card with a colored left border strip, title, optional description,
- * and a type badge/chip. Designed to integrate with FlowEditor (ReactFlow)
- * via the WorkflowNodeHandle wrapper.
- *
- * @example
- * ```tsx
- * <WorkflowNode
- *   nodeType="trigger"
- *   title="HTTP Trigger"
- *   description="Listens for incoming webhook calls"
- * />
- * ```
- */
-declare const WorkflowNode: React__default.FC<WorkflowNodeProps>;
-
-export { WORKFLOW_NODE_LABELS as W, WORKFLOW_NODE_SHADOW as a, WorkflowNode as b, type WorkflowNodeProps as c, type WorkflowNodeType as d };

package/dist/chunk-27JEWSWA.mjs

@@ -1,233 +0,0 @@
-// src/components/layout/WorkflowNode/WorkflowNode.tsx
-import { Paper, Box, Typography } from "@mui/material";
-import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
-import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
-import WavesIcon from "@mui/icons-material/Waves";
-import LinkIcon from "@mui/icons-material/Link";
-import CloudIcon from "@mui/icons-material/Cloud";
-import BoltIcon from "@mui/icons-material/Bolt";
-import FlashOnIcon from "@mui/icons-material/FlashOn";
-import PlayArrowIcon from "@mui/icons-material/PlayArrow";
-import PsychologyIcon from "@mui/icons-material/Psychology";
-import SmartToyOutlinedIcon from "@mui/icons-material/SmartToyOutlined";
-import CallSplitIcon from "@mui/icons-material/CallSplit";
-import SendIcon from "@mui/icons-material/Send";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import ForkRightIcon from "@mui/icons-material/ForkRight";
-import CallMergeIcon from "@mui/icons-material/CallMerge";
-import { useTheme } from "@mui/material";
-import { jsx, jsxs } from "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__ */ jsx(PlayCircleOutlineIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  input: /* @__PURE__ */ jsx(CloudDownloadIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  stream: /* @__PURE__ */ jsx(WavesIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  rafts: /* @__PURE__ */ jsx(LinkIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  cubbies: /* @__PURE__ */ jsx(CloudIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  events: /* @__PURE__ */ jsx(BoltIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  trigger: /* @__PURE__ */ jsx(FlashOnIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  action: /* @__PURE__ */ jsx(PlayArrowIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  aiModel: /* @__PURE__ */ jsx(PsychologyIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  aiAgent: /* @__PURE__ */ jsx(SmartToyOutlinedIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  condition: /* @__PURE__ */ jsx(CallSplitIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  output: /* @__PURE__ */ jsx(SendIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  end: /* @__PURE__ */ jsx(CheckCircleOutlineIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  parallel: /* @__PURE__ */ jsx(ForkRightIcon, { sx: { fontSize: NODE_ICON_SIZE } }),
-  merge: /* @__PURE__ */ jsx(CallMergeIcon, { sx: { fontSize: NODE_ICON_SIZE } })
-};
-var BADGE_TYPOGRAPHY = {
-  fontSize: "12px",
-  fontWeight: 500,
-  lineHeight: 1.33
-};
-var SideConnectorDot = ({
-  accentColor,
-  side
-}) => /* @__PURE__ */ jsx(
-  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__ */ jsxs(
-  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__ */ jsx(Box, { sx: { color: badgeText, display: "flex", alignItems: "center" }, children: icon ?? WORKFLOW_NODE_ICONS[nodeType] }),
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "body2",
-          component: "span",
-          sx: {
-            color: badgeText,
-            fontWeight: BADGE_TYPOGRAPHY.fontWeight,
-            fontSize: BADGE_TYPOGRAPHY.fontSize,
-            lineHeight: BADGE_TYPOGRAPHY.lineHeight
-          },
-          children: label ?? WORKFLOW_NODE_LABELS[nodeType]
-        }
-      )
-    ]
-  }
-);
-var WorkflowNode = ({
-  nodeType,
-  title,
-  description,
-  icon,
-  badgeLabel,
-  selected = false,
-  className,
-  showSideDots = true,
-  sx,
-  ...paperProps
-}) => {
-  const theme = useTheme();
-  const nodeTokens = theme.palette.workflow.node[nodeType];
-  const chrome = theme.palette.workflow.chrome;
-  const accentColor = nodeTokens.accent;
-  return /* @__PURE__ */ jsxs(
-    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__ */ jsx(SideConnectorDot, { accentColor, side: "left" }),
-        showSideDots && /* @__PURE__ */ jsx(SideConnectorDot, { accentColor, side: "right" }),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            sx: {
-              flex: 1,
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              gap: 2,
-              px: 2,
-              py: 2,
-              minWidth: 0
-            },
-            children: [
-              /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1 }, children: [
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "subtitle2",
-                    noWrap: true,
-                    sx: {
-                      color: chrome.titleText,
-                      fontSize: "16px",
-                      fontWeight: 500,
-                      lineHeight: "24px",
-                      letterSpacing: "-0.3125px"
-                    },
-                    children: title
-                  }
-                ),
-                description && /* @__PURE__ */ jsx(
-                  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__ */ jsx(
-                NodeTypeBadge,
-                {
-                  nodeType,
-                  badgeBackground: nodeTokens.badgeBg,
-                  badgeBorder: nodeTokens.badgeBorder,
-                  badgeText: nodeTokens.badgeText,
-                  icon,
-                  label: badgeLabel
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-export {
-  WORKFLOW_NODE_LABELS,
-  WORKFLOW_NODE_SHADOW,
-  WorkflowNode
-};
-//# sourceMappingURL=chunk-27JEWSWA.mjs.map

package/dist/chunk-27JEWSWA.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/WorkflowNode/WorkflowNode.tsx"],"sourcesContent":["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"],"mappings":"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","names":[]}