refactor: migrate consumers to @workflowbuilder/ui and fix Base UI API breaks

Author: librowski-synergy

.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';