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@1.0.0-beta.28`, rebuilt on [Base UI](https://base-ui.com/), together with `@base-ui/react` (both are inlined into the SDK bundle, so SDK consumers gain no new peer dependency). Bundled component visuals and interaction details change accordingly; the SDK's own public API surface is unchanged.

apps/ai-studio/package.json

@@ -13,11 +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",
     "immer": "^10.1.1",

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/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,11 +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/help/components/app-bar/get-app-bar-button.tsx

@@ -1,6 +1,6 @@
-import { NavButton } from '@synergycodes/overflow-ui';
 import { Icon } from '@workflowbuilder/sdk';
 import type { TranslationKey, WBIcon } from '@workflowbuilder/sdk';
+import { NavButton } from '@workflowbuilder/ui';
 import i18n from 'i18next';
 
 import { openNoAccessModal } from '../../functions/open-no-access-modal';

apps/demo/src/app/plugins/help/components/footer-support-button.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@synergycodes/overflow-ui';
+import { Button } from '@workflowbuilder/ui';
 import { useTranslation } from 'react-i18next';
 
 import { openHelpModal } from '../functions/open-help-modal';

apps/demo/src/app/plugins/help/functions/add-items-to-dots.tsx

@@ -1,5 +1,5 @@
-import { type MenuItemProps } from '@synergycodes/overflow-ui';
 import { Icon } from '@workflowbuilder/sdk';
+import { type MenuItemProps } from '@workflowbuilder/ui';
 import i18n from 'i18next';
 
 import { openNoAccessModal } from './open-no-access-modal';

apps/demo/src/app/plugins/help/modals/sales-contact/sales-contact.tsx

@@ -1,5 +1,5 @@
 import { LinkedinLogo, PaperPlaneRight } from '@phosphor-icons/react';
-import { Avatar, Button } from '@synergycodes/overflow-ui';
+import { Avatar, Button } from '@workflowbuilder/ui';
 import clsx from 'clsx';
 
 import styles from './sales-contact.module.css';

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

@@ -204,9 +204,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';
 
@@ -237,7 +237,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' }