feat: Add node containers and styles

[lornakelly]

Closes #87

Summary

Add container node types (Do, For, Fork, TryCatch, Try and Catch) into styled nodes

Changes

• Replace placeholder node with new Container Node
• Add container badges for compete and while
• Add custom badge for custom types for call node (replaced icon badge)
• Other styling:
  • Renamed styling classes for leaf node
  • Restyled leaf nodes to have badge at bottom so node name gets full width
  • Restyled custom badges
  • Select node style changes to be more obvious
  • Improved colour contrast so it is more readable
  • Increased leaf node size
  • Moved leaf styles into custom-nodes layer

Example screenshots:

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates the diagram editor’s node visuals by splitting leaf vs container node configs, introducing dedicated container node rendering/styling, and adjusting layout defaults to match the new UI.

Changes:

• Split node visual config into leafNodeConfigMap and containerNodeConfigMap, and add getNodeVisualConfig.
• Introduce new LeafNodeContent / ContainerNodeContent rendering and refresh node/badge styling.
• Update DEFAULT_NODE_SIZE and adjust tests accordingly.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/serverless-workflow-diagram-editor/src/react-flow/nodes/taskNodeConfig.ts	Adds container-node configs and a shared resolver for node visual config.
packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx	Splits node rendering into leaf/container components; updates badge behavior.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css	Adds container node styling and refreshes leaf node/badge styles.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/autoLayout.ts	Updates default node dimensions.
packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/taskNodeConfig.test.ts	Expands config tests to cover container nodes and resolver behavior.
packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/Nodes.test.tsx	Updates node rendering expectations and adds container badge assertions.
packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/autoLayout.integration.test.ts	Updates expected default node size.
packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/diagramBuilder.test.ts	Moves CATCH_CONTAINER_NODE_TYPE import to the new source of truth.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/diagramBuilder.ts	Moves CATCH_CONTAINER_NODE_TYPE import to the new source of truth.
packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx	Uses getNodeVisualConfig instead of leaf-only config mapping.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx	Formatting-only change (line wrapping).
.changeset/node-container-styling.md	Publishes a minor release note for styling updates.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[netlify]

✅ Deploy Preview for swf-editor ready!

Name	Link
🔨 Latest commit	5e4abf8
🔍 Latest deploy log	https://app.netlify.com/projects/swf-editor/deploys/6a26d85d80ee420008ff41cb
😎 Deploy Preview	https://deploy-preview-172--swf-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[fantonangeli]

LGTM

[lornakelly]

@ricardozanini can you please merge when you get a chance