Workflow Elements

[haydenbleasel]

This pull request introduces a new workflow diagram example and supporting components to the codebase, leveraging the @xyflow/react library for interactive flow diagrams. The main focus is on enabling visual workflow representations using reusable node and edge components, and updating dependencies accordingly. The changes span new example implementations, shared UI components, and dependency updates in multiple packages.

Key changes:

1. Workflow Diagram Example Implementation

• Added a new workflow diagram example in both apps/test and packages/examples, demonstrating the use of nodes and edges to visualize workflow steps and transitions. The example utilizes the new Canvas, Node, and Edge components, and is now included in the list of available examples. [1] [2] [3]

2. Shared Diagram Components

• Introduced new components in @repo/elements:
  • canvas.tsx: Wraps the ReactFlow component from @xyflow/react for rendering the diagram canvas.
  • edge.tsx: Provides custom animated and temporary edge types for visualizing connections between nodes, including bezier paths and motion effects.
  • node.tsx: Implements a flexible node UI based on @repo/shadcn-ui's card components, supporting customizable headers, content, and handles for connections.

3. Dependency Management

• Added @xyflow/react as a dependency to apps/test, packages/examples, and @repo/elements to enable diagram functionality. Updated pnpm-lock.yaml to reflect these changes and included related dependencies like classcat and zustand. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ai-elements-registry	Ready	Preview	Comment	Oct 4, 2025 7:53am
ai-elements-test	Ready	Preview	Comment	Oct 4, 2025 7:53am