Migrate consumers to @workflowbuilder/ui (2/3: consumers)

.changeset/move-ui-library-in-repo.md

@@ -0,0 +1,7 @@
+---
+'@workflowbuilder/sdk': minor
+---
+
+Consume the UI component library from the in-repo `@workflowbuilder/ui` (Base UI) instead of the published `@synergycodes/overflow-ui`.
+
+The SDK previously bundled `@synergycodes/overflow-ui@1.0.0-beta.27` (built on MUI / Mantine / Emotion / Floating UI). It now bundles the in-repo `@workflowbuilder/ui@2.0.0`, rebuilt on [Base UI](https://base-ui.com/). `@base-ui/react` is now a regular dependency of the SDK (installed automatically, not bundled) rather than an inlined implementation detail. Bundled component visuals and interaction details change accordingly; the SDK's own public API surface is unchanged, but the internal DOM structure and class names of all bundled UI changed (MUI Base + Mantine → Base UI) — styles or tests written against those internal class names may need updating.

apps/ai-studio/package.json

@@ -13,9 +13,12 @@
     "test:watch": "vitest --passWithNoTests"
   },
   "dependencies": {
+    "@base-ui/react": "catalog:",
+    "@jsonforms/core": "^3.4.1",
+    "@jsonforms/react": "^3.4.1",
     "@phosphor-icons/react": "^2.1.7",
-    "@synergycodes/overflow-ui": "1.0.0-beta.27",
     "@workflow-builder/types": "workspace:*",
+    "@workflowbuilder/ui": "workspace:*",
     "@xyflow/react": "catalog:",
     "clsx": "^2.1.1",
     "html-to-image": "1.11.11",

apps/ai-studio/src/components/controls/ai-studio-controls.tsx

@@ -1,5 +1,5 @@
-import { NavButton } from '@synergycodes/overflow-ui';
 import { Icon, getStoreEdges, getStoreNodes } from '@workflowbuilder/sdk';
+import { NavButton } from '@workflowbuilder/ui';
 import clsx from 'clsx';
 import { useCallback } from 'react';
 

apps/ai-studio/src/plugins/undo-redo/components/buttons-undo-redo/buttons-undo-redo.tsx

@@ -1,5 +1,5 @@
-import { NavButton } from '@synergycodes/overflow-ui';
 import { Icon, useStore } from '@workflowbuilder/sdk';
+import { NavButton } from '@workflowbuilder/ui';
 import { useTranslation } from 'react-i18next';
 
 import { redo, undo, useUndoRedoStore } from '../../stores/use-undo-redo-store';

apps/ai-studio/vite.config.mts

@@ -5,20 +5,12 @@ import { defineConfig } from 'vite';
 import svgr from 'vite-plugin-svgr';
 
 export default defineConfig(() => {
-  const shouldUseLocalOverflowUI = process.env.LOCAL_OVERFLOW_UI === 'true';
-
   const sdkDirectory = path.resolve(import.meta.dirname, '../../packages/sdk');
 
   return {
     plugins: [svgr(), react()],
     resolve: {
       alias: [
-        ...(shouldUseLocalOverflowUI
-          ? Object.entries(getLocalOverflowUIAliases()).map(([find, replacement]) => ({
-              find,
-              replacement,
-            }))
-          : []),
         {
           find: /^@workflowbuilder\/sdk\/style\.css$/,
           replacement: path.resolve(sdkDirectory, 'src/index.css'),
@@ -27,14 +19,6 @@ export default defineConfig(() => {
           find: /^@workflowbuilder\/sdk$/,
           replacement: path.resolve(sdkDirectory, 'src/index.ts'),
         },
-        // overflow-ui doesn't expose ./dist/index.css via package.json exports
-        {
-          find: 'overflow-ui-css',
-          replacement: path.resolve(
-            sdkDirectory,
-            'node_modules/@synergycodes/overflow-ui/dist/index.css',
-          ),
-        },
         // SDK source files use @/ to refer to their own root (packages/sdk/src/...).
         // AI Studio files do not use @/ (they import via @workflowbuilder/sdk subpaths),
         // so it's safe to point @/ at the SDK root for cross-package alias parity.
@@ -56,12 +40,3 @@ export default defineConfig(() => {
     },
   };
 });
-
-function getLocalOverflowUIAliases(): Record<string, string> {
-  const distribution = path.resolve(import.meta.dirname, '../../../overflow-ui/packages/ui/dist');
-
-  return {
-    '@synergycodes/overflow-ui/tokens.css': path.join(distribution, 'tokens.css'),
-    '@synergycodes/overflow-ui': path.join(distribution, 'overflow-ui.js'),
-  };
-}

apps/backend/README.md

@@ -79,7 +79,6 @@ All scripts run from the monorepo root. Grouped by purpose:
 | `dev:backend`   | Backend only (Hono server with `tsx watch`)                                                              |
 | `dev:worker`    | Execution worker only (Temporal worker with `tsx watch`)                                                 |
 | `dev:docs`      | Docs site (Astro)                                                                                        |
-| `dev:local`     | Demo frontend with `LOCAL_OVERFLOW_UI=true` (linked local overflow-ui)                                   |
 
 ### Infra (Docker lifecycle)
 

apps/demo/package.json

@@ -16,9 +16,12 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@base-ui/react": "catalog:",
+    "@jsonforms/core": "^3.4.1",
+    "@jsonforms/react": "^3.4.1",
     "@microsoft/clarity": "^1.0.0",
     "@phosphor-icons/react": "^2.1.7",
-    "@synergycodes/overflow-ui": "1.0.0-beta.27",
+    "@workflowbuilder/ui": "workspace:*",
     "@xyflow/react": "catalog:",
     "ajv": "catalog:",
     "clsx": "^2.1.1",

apps/demo/src/app/components/multi-port-node/multi-port-node-template.tsx

@@ -1,6 +1,6 @@
-import { NodeDescription, NodeIcon, NodePanel } from '@synergycodes/overflow-ui';
 import { Icon, defineNodeTemplate, getHandleId, statusOptions } from '@workflowbuilder/sdk';
 import type { NodeDataProperties, WorkflowNodeTemplateProps } from '@workflowbuilder/sdk';
+import { NodeDescription, NodeIcon, NodePanel } from '@workflowbuilder/ui';
 import { Handle, Position } from '@xyflow/react';
 import clsx from 'clsx';
 import { memo, useMemo } from 'react';

apps/demo/src/app/plugins/undo-redo/components/buttons-undo-redo/buttons-undo-redo.tsx

@@ -1,5 +1,5 @@
-import { NavButton } from '@synergycodes/overflow-ui';
 import { Icon, useStore } from '@workflowbuilder/sdk';
+import { NavButton } from '@workflowbuilder/ui';
 import { useTranslation } from 'react-i18next';
 
 import { redo, undo, useUndoRedoStore } from '../../stores/use-undo-redo-store';

apps/demo/vite.config.mts

@@ -16,7 +16,6 @@ import {
 export default defineConfig(({ mode }) => {
   const isProduction = mode === 'production';
   const isAnalyze = process.env.ANALYZE === 'true';
-  const shouldUseLocalOverflowUI = process.env.LOCAL_OVERFLOW_UI === 'true';
 
   const plugins: PluginOption[] = [];
 
@@ -52,12 +51,6 @@ export default defineConfig(({ mode }) => {
     plugins,
     resolve: {
       alias: [
-        ...(shouldUseLocalOverflowUI
-          ? Object.entries(getLocalOverflowUIAliases()).map(([find, replacement]) => ({
-              find,
-              replacement,
-            }))
-          : []),
         {
           find: /^@workflowbuilder\/sdk\/style\.css$/,
           replacement: path.resolve(sdkDirectory, 'src/index.css'),
@@ -66,14 +59,6 @@ export default defineConfig(({ mode }) => {
           find: /^@workflowbuilder\/sdk$/,
           replacement: path.resolve(sdkDirectory, 'src/index.ts'),
         },
-        // overflow-ui doesn't expose ./dist/index.css via package.json exports
-        {
-          find: 'overflow-ui-css',
-          replacement: path.resolve(
-            sdkDirectory,
-            'node_modules/@synergycodes/overflow-ui/dist/index.css',
-          ),
-        },
         // SDK source files use @/ to refer to their own root (packages/sdk/src/...).
         // Demo files do not use @/ (they import via @workflowbuilder/sdk subpaths),
         // so it's safe to point @/ at the SDK root for cross-package alias parity with sdk's vite.config.
@@ -96,15 +81,6 @@ export default defineConfig(({ mode }) => {
   };
 });
 
-function getLocalOverflowUIAliases(): Record<string, string> {
-  const distribution = path.resolve(import.meta.dirname, '../../../overflow-ui/packages/ui/dist');
-
-  return {
-    '@synergycodes/overflow-ui/tokens.css': path.join(distribution, 'tokens.css'),
-    '@synergycodes/overflow-ui': path.join(distribution, 'overflow-ui.js'),
-  };
-}
-
 type EnvMode = 'demo' | 'production' | 'development' | 'staging';
 const fileReplacementsMap: Record<EnvMode, FileReplacement[]> = {
   demo: [],

apps/docs/src/content/docs/get-started/theming.md

@@ -23,4 +23,4 @@ Provide the font yourself (via `@font-face`, `@fontsource/<font>`, etc.) — the
 
 ## Other tokens
 
-The SDK exposes a small surface of `--wb-*` variables (background, scrollbar, transitions) plus the larger `--ax-*` design-token set re-exported from `@synergycodes/overflow-ui`. See [Design System & Customization](/overview/features/design-system-and-customization/) for the full token map.
+The SDK exposes a small surface of `--wb-*` variables (background, scrollbar, transitions) plus the larger `--ax-*` design-token set re-exported from `@workflowbuilder/ui`. See [Design System & Customization](/overview/features/design-system-and-customization/) for the full token map.

apps/docs/src/content/docs/guides/add-a-custom-node.mdx

@@ -197,9 +197,9 @@ The built-in renderer gives every node a header and one input + one output handl
 `my-node-template.tsx`:
 
 ```tsx
-import { NodeDescription, NodeIcon, NodePanel } from '@synergycodes/overflow-ui';
 import { Icon, getHandleId } from '@workflowbuilder/sdk';
 import type { WorkflowNodeTemplateProps } from '@workflowbuilder/sdk';
+import { NodeDescription, NodeIcon, NodePanel } from '@workflowbuilder/ui';
 import { Handle, Position } from '@xyflow/react';
 import { memo, useMemo } from 'react';
 
@@ -230,7 +230,7 @@ export const MyNodeTemplate = memo(
 );
 ```
 
-The example composes the node from `@synergycodes/overflow-ui` primitives (`NodePanel.Root`, `NodePanel.Header`, `NodePanel.Handles`) — the same building blocks Workflow Builder uses for its own node renderers, so the result matches the editor's visual language out of the box.
+The example composes the node from `@workflowbuilder/ui` primitives (`NodePanel.Root`, `NodePanel.Header`, `NodePanel.Handles`) — the same building blocks Workflow Builder uses for its own node renderers, so the result matches the editor's visual language out of the box.
 
 The component receives [`WorkflowNodeTemplateProps`](/api/components/workflownodetemplateprops/). Use [`getHandleId`](/api/utilities/gethandleid/) for handle IDs and pass `innerId` when a node has more than one handle of the same type. If your template needs typed access to `data.properties`, wrap the component in [`defineNodeTemplate`](/api/components/definenodetemplate/) to bind a schema-derived properties type.
 

apps/docs/src/content/docs/node-schemas/form-layouts.md

@@ -97,11 +97,11 @@ Text-only elements that don't bind to a property. Use them when the property pan
 
 Plain text label — uses the editor's default body styling.
 
-| Prop       | Type     | Required | Notes                                                                                          |
-| ---------- | -------- | -------- | ---------------------------------------------------------------------------------------------- |
-| `text`     | string   | yes      | The label text.                                                                                |
-| `required` | boolean  | no       | Append a `*` to indicate the following section contains required fields.                       |
-| `size`     | ItemSize | no       | Visual size — `'small'`, `'medium'` (default), `'large'`. Type re-exported from `overflow-ui`. |
+| Prop       | Type     | Required | Notes                                                                                                  |
+| ---------- | -------- | -------- | ------------------------------------------------------------------------------------------------------ |
+| `text`     | string   | yes      | The label text.                                                                                        |
+| `required` | boolean  | no       | Append a `*` to indicate the following section contains required fields.                               |
+| `size`     | ItemSize | no       | Visual size — `'small'`, `'medium'` (default), `'large'`. Type re-exported from `@workflowbuilder/ui`. |
 
 ```ts
 { type: 'Label', text: 'Connection details' }

docs/how-to-change-css-tokens.md

@@ -1,7 +1,7 @@
 # How to change css tokens?
 
-You can use our enterprise version with available figma design kit. We store tokens (colors) in `packages/sdk/src/index.css`, you'll find a CSS import: `@import '@synergycodes/overflow-ui/tokens.css';` with our figma you replace that import with generated from figma desing kit.
+You can use our enterprise version with available figma design kit. We store tokens (colors) in `packages/sdk/src/index.css`, you'll find a CSS import: `@import '@workflowbuilder/ui/tokens.css';` with our figma you replace that import with generated from figma desing kit.
 
-Alternatively, if you want to stay with community version and do not pay for the licenses, you can look inside `node_modules` at `packages/sdk/node_modules/@synergycodes/overflow-ui/dist/tokens.css`, check the variable names, and manually set some or all of the colors in your repository to overwrite them.
+Alternatively, if you want to stay with community version and do not pay for the licenses, you can look inside `node_modules` at `packages/sdk/node_modules/@workflowbuilder/ui/dist/tokens.css`, check the variable names, and manually set some or all of the colors in your repository to overwrite them.
 
-`@synergycodes/overflow-ui` is our library for UI elements [overflow-ui](https://github.com/synergycodes/overflow-ui)
+`@workflowbuilder/ui` is our in-repo library for UI elements, living at `packages/ui`.

package.json

@@ -11,7 +11,6 @@
     "dev:backend": "pnpm --filter backend dev",
     "dev:worker": "pnpm --filter execution-worker dev",
     "dev:docs": "pnpm --filter @workflow-builder/docs dev",
-    "dev:local": "LOCAL_OVERFLOW_UI=true pnpm --filter @workflow-builder/demo dev",
     "infra:up": "docker compose -f apps/backend/docker-compose.yml up -d",
     "infra:down": "docker compose -f apps/backend/docker-compose.yml down",
     "infra:wait": "node tools/wait-for-temporal.mjs",

packages/sdk/README.md

@@ -212,7 +212,7 @@ The editor exposes a small set of CSS custom properties for top-level styling. O
 
 Available `--wb-*` tokens: `--wb-background-color`, `--wb-font-family`, `--wb-transition`, plus scrollbar styling (`--wb-scroll-width`, `--wb-scroll-radius`, `--wb-scroll-thumb-color`, `--wb-scroll-thumb-hover-color`, `--wb-scroll-track-color`).
 
-Deeper color and spacing customization (palette, semantic UI tokens) goes through the `--ax-*` token layer from `@synergycodes/overflow-ui`. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/).
+Deeper color and spacing customization (palette, semantic UI tokens) goes through the `--ax-*` token layer from `@workflowbuilder/ui`. Full guide: [Design system and customization](https://www.workflowbuilder.io/docs/overview/features/design-system-and-customization/).
 
 ## CSS — global resets
 

packages/sdk/package.json

@@ -70,12 +70,12 @@
     "zustand": "^5.0.0"
   },
   "dependencies": {
+    "@base-ui/react": "catalog:",
     "@cfworker/json-schema": "4.1.1",
     "@fontsource/poppins": "^5.2.7",
     "@jsonforms/core": "^3.4.0",
     "@jsonforms/react": "^3.4.0",
     "@phosphor-icons/react": "^2.1.7",
-    "@synergycodes/overflow-ui": "1.0.0-beta.27",
     "ace-builds": "^1.43.4",
     "ajv": "catalog:",
     "clsx": "^2.1.1",
@@ -95,6 +95,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@workflow-builder/icons": "workspace:*",
     "@workflow-builder/types": "workspace:*",
+    "@workflowbuilder/ui": "workspace:*",
     "eslint-plugin-react": "7.37.2",
     "eslint-plugin-react-hooks": "5.1.0-rc.1",
     "eslint-plugin-tsdoc": "^0.4.0",

packages/sdk/src/components/button-submit/button-submit.tsx

@@ -1,5 +1,5 @@
 import { Spinner } from '@phosphor-icons/react';
-import { Button } from '@synergycodes/overflow-ui';
+import { Button } from '@workflowbuilder/ui';
 import clsx from 'clsx';
 
 import styles from './button-submit.module.css';

packages/sdk/src/components/form/form-control-with-label/form-control-with-label.tsx

@@ -1,4 +1,4 @@
-import type { ItemSize } from '@synergycodes/overflow-ui';
+import type { ItemSize } from '@workflowbuilder/ui';
 import clsx from 'clsx';
 import type { PropsWithChildren } from 'react';
 

packages/sdk/src/components/form/label/label.tsx

@@ -1,5 +1,5 @@
 import { Asterisk } from '@phosphor-icons/react';
-import type { ItemSize } from '@synergycodes/overflow-ui';
+import type { ItemSize } from '@workflowbuilder/ui';
 import clsx from 'clsx';
 
 import styles from './label.module.css';

packages/sdk/src/components/sidebar/sidebar.tsx

@@ -1,4 +1,4 @@
-import { Separator } from '@synergycodes/overflow-ui';
+import { Separator } from '@workflowbuilder/ui';
 import clsx from 'clsx';
 
 import styles from './sidebar.module.css';

packages/sdk/src/features/app-bar/components/controls/controls.tsx

@@ -1,5 +1,5 @@
 import { DotsThreeVertical } from '@phosphor-icons/react';
-import { Menu, type MenuItemProps, NavButton } from '@synergycodes/overflow-ui';
+import { Menu, type MenuItemProps, NavButton } from '@workflowbuilder/ui';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 

packages/sdk/src/features/app-bar/components/project-selection/project-selection.spec.tsx

@@ -1,11 +1,11 @@
-import type { MenuItemProps } from '@synergycodes/overflow-ui';
 import { fireEvent, render, screen } from '@testing-library/react';
+import type { MenuItemProps } from '@workflowbuilder/ui';
 import { describe, expect, it, vi } from 'vitest';
 
 // Render the menu's `items` inline so we can assert on them without driving the
-// real overflow-ui popover. The component also imports Input/NavButton, so the
+// real menu popover. The component also imports Input/NavButton, so the
 // mock must expose them too.
-vi.mock('@synergycodes/overflow-ui', () => ({
+vi.mock('@workflowbuilder/ui', () => ({
   Menu: ({ items }: { items: MenuItemProps[] }) => (
     <ul>
       {items.map((item) => (

packages/sdk/src/features/app-bar/components/project-selection/project-selection.tsx

@@ -1,5 +1,5 @@
 import { CaretDown } from '@phosphor-icons/react';
-import { Input, Menu, NavButton } from '@synergycodes/overflow-ui';
+import { Input, Menu, NavButton } from '@workflowbuilder/ui';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

packages/sdk/src/features/app-bar/components/toggle-dark-mode/toggle-dark-mode.tsx

@@ -1,5 +1,5 @@
 import { MoonStars, Sun } from '@phosphor-icons/react';
-import { IconSwitch } from '@synergycodes/overflow-ui';
+import { IconSwitch } from '@workflowbuilder/ui';
 
 import { useTheme } from '../../../../hooks/use-theme';
 

packages/sdk/src/features/app-bar/components/toggle-read-only-mode/toggle-read-only-mode.tsx

@@ -1,5 +1,5 @@
 import { PencilSimple, PencilSimpleSlash } from '@phosphor-icons/react';
-import { IconSwitch } from '@synergycodes/overflow-ui';
+import { IconSwitch } from '@workflowbuilder/ui';
 
 import { useStore } from '../../../../store/store';
 

packages/sdk/src/features/app-bar/functions/get-controls-dots-items.tsx

@@ -1,4 +1,4 @@
-import type { MenuItemProps } from '@synergycodes/overflow-ui';
+import type { MenuItemProps } from '@workflowbuilder/ui';
 import i18n from 'i18next';
 
 import { Icon } from '@workflow-builder/icons';

packages/sdk/src/features/diagram/edges/edge-label-renderer/edge-label-renderer.tsx

@@ -1,4 +1,4 @@
-import { EdgeLabel as Label } from '@synergycodes/overflow-ui';
+import { EdgeLabel as Label } from '@workflowbuilder/ui';
 import { EdgeLabelRenderer } from '@xyflow/react';
 import type { CSSProperties } from 'react';
 
@@ -18,7 +18,7 @@ type EdgeLabelProps = {
 /**
  * Renders a label (text or icon) at fixed canvas coordinates, used by edge
  * components to attach descriptive content along their path. Built on top
- * of xyflow's `<EdgeLabelRenderer>` and styled via overflow-ui's
+ * of xyflow's `<EdgeLabelRenderer>` and styled via `@workflowbuilder/ui`'s
  * `<EdgeLabel>` primitive so hover / selected states match the rest of
  * the editor.
  *

packages/sdk/src/features/diagram/edges/label-edge/use-label-edge-hover.ts

@@ -1,4 +1,4 @@
-import { type EdgeState, useEdgeStyle } from '@synergycodes/overflow-ui';
+import { type EdgeState, useEdgeStyle } from '@workflowbuilder/ui';
 import { useState } from 'react';
 
 import { useStore } from '../../../../store/store';

packages/sdk/src/features/diagram/edges/self-connecting-edge/self-connecting-edge.tsx

@@ -1,4 +1,4 @@
-import { type EdgeState, useEdgeStyle } from '@synergycodes/overflow-ui';
+import { type EdgeState, useEdgeStyle } from '@workflowbuilder/ui';
 import type { EdgeProps } from '@xyflow/react';
 
 import type { WorkflowBuilderEdge } from '../../../../node/node-data';