fix(canvas): repair React Flow v12 and dependency upgrade regressions

Author: waleedlatif1

.devcontainer/post-create.sh

@@ -94,8 +94,8 @@ fi
 # Generate schema and run database migrations
 echo "🗃️ Running database schema generation and migrations..."
 echo "Generating schema..."
-cd apps/sim
-bunx drizzle-kit generate
+cd packages/db
+bun run db:generate
 cd ../..
 
 echo "Waiting for database to be ready..."
@@ -105,8 +105,8 @@ echo "Waiting for database to be ready..."
   while [ $timeout -gt 0 ]; do
     if PGPASSWORD=postgres psql -h db -U postgres -c '\q' 2>/dev/null; then
       echo "Database is ready!"
-      cd apps/sim
-      DATABASE_URL=postgresql://postgres:postgres@db:5432/simstudio bunx drizzle-kit push
+      cd packages/db
+      DATABASE_URL=postgresql://postgres:postgres@db:5432/simstudio bun run db:push
       cd ../..
       break
     fi

.devcontainer/sim-commands.sh

@@ -7,8 +7,8 @@
 alias sim-start="cd /workspace && bun run dev:full"
 alias sim-app="cd /workspace && bun run dev"
 alias sim-sockets="cd /workspace && bun run dev:sockets"
-alias sim-migrate="cd /workspace/apps/sim && bunx drizzle-kit push"
-alias sim-generate="cd /workspace/apps/sim && bunx drizzle-kit generate"
+alias sim-migrate="cd /workspace/packages/db && bun run db:push"
+alias sim-generate="cd /workspace/packages/db && bun run db:generate"
 alias sim-rebuild="cd /workspace && bun run build && bun run start"
 alias docs-dev="cd /workspace/apps/docs && bun run dev"
 

apps/docs/components/workflow-preview/block-preview.tsx

@@ -1,11 +1,13 @@
 'use client'
 
 import { useMemo } from 'react'
+import { CANVAS_Z_INDEX_MODE } from '@sim/workflow-renderer'
 import { type NodeTypes, ReactFlow, ReactFlowProvider } from '@xyflow/react'
 import { domAnimation, LazyMotion } from 'framer-motion'
 import '@xyflow/react/dist/style.css'
 import { BLOCK_DISPLAY_WORKFLOWS } from '@/components/workflow-preview/block-display-workflows'
 import { DocsBlockNode } from '@/components/workflow-preview/docs-block-node'
+import { usePreviewColorMode } from '@/components/workflow-preview/use-preview-color-mode'
 import { toReactFlowElements } from '@/components/workflow-preview/workflow-data'
 
 /** The hero mounts the same node type the canvas uses, so it can never drift. */
@@ -28,6 +30,7 @@ interface BlockPreviewProps {
  * `block-display-workflows.ts`.
  */
 export function BlockPreview({ type }: BlockPreviewProps) {
+  const colorMode = usePreviewColorMode()
   const workflow = BLOCK_DISPLAY_WORKFLOWS[type]
 
   const elements = useMemo(() => (workflow ? toReactFlowElements(workflow) : null), [workflow])
@@ -42,6 +45,8 @@ export function BlockPreview({ type }: BlockPreviewProps) {
       <LazyMotion features={domAnimation}>
         <ReactFlowProvider>
           <ReactFlow
+            colorMode={colorMode}
+            zIndexMode={CANVAS_Z_INDEX_MODE}
             nodes={elements.nodes}
             edges={elements.edges}
             nodeTypes={NODE_TYPES}

apps/docs/components/workflow-preview/use-preview-color-mode.ts

@@ -0,0 +1,17 @@
+'use client'
+
+import type { ColorMode } from '@xyflow/react'
+import { useTheme } from 'next-themes'
+
+/**
+ * Resolves the React Flow `colorMode` from the docs theme so the canvas
+ * wrapper's color-mode class (and the `--xy-*` palette it selects) follows
+ * dark mode instead of React Flow's default `light`.
+ */
+export function usePreviewColorMode(): ColorMode {
+  const { resolvedTheme } = useTheme()
+  // Before next-themes mounts, resolvedTheme is undefined; 'system' lets React
+  // Flow follow the OS preference instead of flashing a light-classed frame.
+  if (resolvedTheme === undefined) return 'system'
+  return resolvedTheme === 'dark' ? 'dark' : 'light'
+}

apps/docs/components/workflow-preview/workflow-preview.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Expand, X } from '@sim/emcn/icons'
+import { CANVAS_Z_INDEX_MODE } from '@sim/workflow-renderer'
 import {
   applyEdgeChanges,
   applyNodeChanges,
@@ -20,6 +21,7 @@ import { BLOCK_DISPLAY_WORKFLOWS } from '@/components/workflow-preview/block-dis
 import { BlockInspector } from '@/components/workflow-preview/block-inspector'
 import { DocsBlockNode } from '@/components/workflow-preview/docs-block-node'
 import { DocsContainerNode } from '@/components/workflow-preview/docs-container-node'
+import { usePreviewColorMode } from '@/components/workflow-preview/use-preview-color-mode'
 import {
   EASE_OUT,
   type PreviewBlock,
@@ -177,6 +179,7 @@ function PreviewFlow({
     [workflow, animate, highlightBlock, highlightEdge, selectedBlock]
   )
 
+  const colorMode = usePreviewColorMode()
   const [nodes, setNodes] = useState<PreviewNode[]>(initialNodes)
   const [edges, setEdges] = useState<PreviewFlowEdge[]>(initialEdges)
 
@@ -206,6 +209,8 @@ function PreviewFlow({
 
   return (
     <ReactFlow<PreviewNode, PreviewFlowEdge>
+      colorMode={colorMode}
+      zIndexMode={CANVAS_Z_INDEX_MODE}
       nodes={nodes}
       edges={edges}
       onNodesChange={onNodesChange}

apps/sim/app/(landing)/demo/components/demo-scheduler/cal-config.ts

@@ -20,7 +20,18 @@ export function resolveCalLink(configuredLink?: string): URL {
   return url
 }
 
-const calLinkUrl = resolveCalLink(process.env.NEXT_PUBLIC_CAL_LINK)
+/**
+ * Resolved at module scope on an eagerly-imported path, so a malformed
+ * NEXT_PUBLIC_CAL_LINK degrades to the default link instead of taking the
+ * whole /demo page down.
+ */
+const calLinkUrl = (() => {
+  try {
+    return resolveCalLink(process.env.NEXT_PUBLIC_CAL_LINK)
+  } catch {
+    return resolveCalLink(undefined)
+  }
+})()
 
 /** Exact origin used for iframe navigation, preconnect, and postMessage validation. */
 export const CAL_ORIGIN = calLinkUrl.origin

apps/sim/app/_styles/globals.css

@@ -1115,6 +1115,8 @@ input[type="search"]::-ms-clear {
   border-radius: 8px !important;
 }
 
-.react-flow__node[data-parent-node-id] .react-flow__handle {
+/* React Flow v12 no longer emits data-parent-node-id; the app stamps
+   .subflow-child-node (SUBFLOW_CHILD_NODE_CLASS) on nested nodes instead. */
+.react-flow__node.subflow-child-node .react-flow__handle {
   z-index: 30;
 }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts

@@ -7,6 +7,13 @@ import type { BlockState } from '@/stores/workflows/workflow/types'
 
 export const SUBFLOW_DROP_TARGET_CLASS = 'subflow-node-drop-target'
 
+/**
+ * Marks canvas nodes nested inside a subflow container. React Flow v11 emitted
+ * `data-parent-node-id` for this; v12 emits no parent attribute, so the app
+ * stamps its own class for the handle z-lift in `globals.css`.
+ */
+export const SUBFLOW_CHILD_NODE_CLASS = 'subflow-child-node'
+
 export function getNodeDataDimension(
   node: Pick<Node, 'data'>,
   dimension: 'width' | 'height',
@@ -55,11 +62,10 @@ function reconcileById<T extends { id: string }>(
 }
 
 /**
- * Subset comparison, deliberately asymmetric: React Flow writes `width`,
- * `height`, `positionAbsolute` and `dragging` onto the node objects it owns, so
- * a symmetric `isEqual` against a freshly derived node would never match and no
- * node would ever be reused. Only the keys the derivation itself produces are
- * compared.
+ * Subset comparison, deliberately asymmetric: React Flow writes `measured` and
+ * `dragging` onto the node objects it owns, so a symmetric `isEqual` against a
+ * freshly derived node would never match and no node would ever be reused. Only
+ * the keys the derivation itself produces are compared.
  */
 function containsDerivedValues<T extends object>(current: T, derived: T): boolean {
   for (const key of Object.keys(derived) as (keyof T)[]) {
@@ -68,12 +74,28 @@ function containsDerivedValues<T extends object>(current: T, derived: T): boolea
   return true
 }
 
-/** Reuses unchanged React Flow node objects while carrying local selection forward. */
-export function reconcileCanvasNodes(currentNodes: Node[], derivedNodes: Node[]): Node[] {
+/**
+ * Reuses unchanged React Flow node objects while carrying local selection and
+ * measured dimensions forward. `measured` must survive re-derivation: React
+ * Flow resets a node's cached handle bounds and re-measures whenever a node
+ * object arrives without it, which snaps connected edges for a frame.
+ *
+ * @param selectedIds - When provided, overrides selection instead of carrying
+ * it forward (e.g. the pending selection applied after paste/duplicate)
+ */
+export function reconcileCanvasNodes(
+  currentNodes: Node[],
+  derivedNodes: Node[],
+  selectedIds?: ReadonlySet<string>
+): Node[] {
   return reconcileById(
     currentNodes,
     derivedNodes,
-    (derivedNode, currentNode) => ({ ...derivedNode, selected: currentNode?.selected ?? false }),
+    (derivedNode, currentNode) => ({
+      ...derivedNode,
+      measured: currentNode?.measured,
+      selected: selectedIds ? selectedIds.has(derivedNode.id) : (currentNode?.selected ?? false),
+    }),
     containsDerivedValues
   )
 }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -23,6 +23,7 @@ import type { SubflowNodeData } from '@sim/workflow-renderer'
 import {
   BLOCK_DIMENSIONS,
   BLOCK_Z_BASE,
+  CANVAS_Z_INDEX_MODE,
   CONNECTION_PICKER_Z,
   CONTAINER_CHILD_Z_BASE,
   CONTAINER_DIMENSIONS,
@@ -102,6 +103,7 @@ import {
   reconcileCanvasEdges,
   reconcileCanvasNodes,
   resolveSelectionConflicts,
+  SUBFLOW_CHILD_NODE_CLASS,
   SUBFLOW_DROP_TARGET_CLASS,
   shouldHighlightContainerDropTarget,
   validateTriggerPaste,
@@ -136,6 +138,7 @@ import {
   isFolderOrAncestorLocked,
 } from '@/hooks/queries/utils/folder-tree'
 import { useUpdateWorkflow, useWorkflowMap } from '@/hooks/queries/workflows'
+import { useCanvasColorMode } from '@/hooks/use-canvas-color-mode'
 import { useCanvasViewport } from '@/hooks/use-canvas-viewport'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { useOAuthReturnForWorkflow } from '@/hooks/use-oauth-return'
@@ -342,6 +345,7 @@ const WorkflowContent = React.memo(
 
     const params = useParams()
     const router = useRouter()
+    const colorMode = useCanvasColorMode()
     const reactFlowInstance = useReactFlow()
     const { screenToFlowPosition, getNodes, setNodes } = reactFlowInstance
     const { fitViewToBounds, getViewportCenter } = useCanvasViewport(reactFlowInstance, {
@@ -2869,6 +2873,7 @@ const WorkflowContent = React.memo(
             type: 'subflowNode',
             position: block.position,
             parentId: block.data?.parentId,
+            className: block.data?.parentId ? SUBFLOW_CHILD_NODE_CLASS : undefined,
             extent: block.data?.extent || undefined,
             dragHandle: '.workflow-drag-handle',
             draggable: !workflowReadOnly && !isBlockProtected(block.id, blocks),
@@ -2907,20 +2912,21 @@ const WorkflowContent = React.memo(
         // level as a subflow container and below the edge band. A card inside a
         // container starts higher still, so it clears the parent's interactive
         // body area (which needs pointer-events for click-to-select).
-        const cardZIndex = block.data?.parentId ? CONTAINER_CHILD_Z_BASE : BLOCK_Z_BASE
+        const parentId = block.data?.parentId as string | undefined
+        const cardZIndex = parentId ? CONTAINER_CHILD_Z_BASE : BLOCK_Z_BASE
 
         // Create stable node object - React Flow will handle shallow comparison
         nodeArray.push({
           id: block.id,
           type: nodeType,
           position,
-          parentId: block.data?.parentId,
+          parentId,
+          className: parentId ? SUBFLOW_CHILD_NODE_CLASS : undefined,
           dragHandle,
           draggable: !workflowReadOnly && !isBlockProtected(block.id, blocks),
           zIndex: cardZIndex,
           extent: (() => {
             // Clamp children to subflow body (exclude header)
-            const parentId = block.data?.parentId as string | undefined
             if (!parentId) return block.data?.extent || undefined
 
             // Constrain the top and left to the container's own gutter, the same
@@ -2949,11 +2955,13 @@ const WorkflowContent = React.memo(
             onSetErrorOutputEnabled: collaborativeSetBlockErrorEnabled,
             onRemoveEdges: collaborativeBatchRemoveEdges,
           },
-          // Include dynamic dimensions for container resizing calculations (must match rendered size)
-          // Both note and workflow blocks calculate dimensions deterministically via useBlockDimensions
-          // Use estimated dimensions for blocks without measured height to ensure selection bounds are correct
-          width: getRegularBlockWidth(block.type),
-          height: block.height
+          // Seed dimensions so selection bounds and container-resize math are
+          // valid before the first measurement. These must stay `initial*`: in
+          // React Flow v12 top-level `width`/`height` become fixed inline
+          // styles that clamp the node, while `initialWidth`/`initialHeight`
+          // only stand in until the rendered content is measured.
+          initialWidth: getRegularBlockWidth(block.type),
+          initialHeight: block.height
             ? block.type === 'note'
               ? block.height
               : Math.max(block.height, BLOCK_DIMENSIONS.MIN_HEIGHT)
@@ -3003,12 +3011,12 @@ const WorkflowContent = React.memo(
         clearPendingSelection()
 
         // Apply pending selection and resolve parent-child conflicts
-        const withSelection = derivedNodes.map((node) => ({
-          ...node,
-          selected: pendingSet.has(node.id),
-        }))
-        const resolved = resolveSelectionConflicts(withSelection, blocks)
-        setDisplayNodes(resolved)
+        setDisplayNodes((currentNodes) =>
+          resolveSelectionConflicts(
+            reconcileCanvasNodes(currentNodes, derivedNodes, pendingSet),
+            blocks
+          )
+        )
         return
       }
 
@@ -5120,6 +5128,8 @@ const WorkflowContent = React.memo(
             {isWorkflowReady && (
               <>
                 <ReactFlow
+                  colorMode={colorMode}
+                  zIndexMode={CANVAS_Z_INDEX_MODE}
                   nodes={nodesForRender}
                   edges={edgesForRender}
                   onNodesChange={onNodesChange}
@@ -5197,7 +5207,6 @@ const WorkflowContent = React.memo(
                   draggable={false}
                   noWheelClassName='allow-scroll'
                   edgesFocusable={!embedded}
-                  edgesReconnectable={!embedded && effectivePermissions.canEdit}
                   className={`workflow-container h-full bg-[var(--bg)] transition-opacity duration-150 ${reactFlowStyles} ${canvasOpacityClass} ${isHandMode ? 'canvas-mode-hand' : 'canvas-mode-cursor'}`}
                   onNodeDrag={effectivePermissions.canEdit ? onNodeDrag : undefined}
                   onNodeDragStop={

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/preview-workflow.tsx

@@ -19,6 +19,7 @@ import { createLogger } from '@sim/logger'
 import {
   BLOCK_DIMENSIONS,
   BLOCK_Z_BASE,
+  CANVAS_Z_INDEX_MODE,
   CONTAINER_CHILD_Z_BASE,
   CONTAINER_DIMENSIONS,
   EDGE_Z_BASE,
@@ -27,10 +28,14 @@ import {
 } from '@sim/workflow-renderer'
 import { normalizeWorkflowEdgeHandles } from '@sim/workflow-types/workflow'
 import { WorkflowEdge } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge'
-import { estimateBlockDimensions } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
+import {
+  estimateBlockDimensions,
+  SUBFLOW_CHILD_NODE_CLASS,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
 import { PreviewBlock } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block'
 import { PreviewSubflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow'
 import { useWorkflowMap } from '@/hooks/queries/workflows'
+import { useCanvasColorMode } from '@/hooks/use-canvas-color-mode'
 import type { BlockState, WorkflowState } from '@/stores/workflows/workflow/types'
 
 const logger = createLogger('PreviewWorkflow')
@@ -251,6 +256,7 @@ export function PreviewWorkflow({
   // placeholder map must not mislabel valid workflows as deleted.
   const workflowLabelsReady = isWorkflowMapLoaded && !isWorkflowMapPlaceholderData
   const containerRef = useRef<HTMLDivElement>(null)
+  const colorMode = useCanvasColorMode()
   const nodeTypes = previewNodeTypes
   const isValidWorkflowState = workflowState?.blocks && workflowState.edges
 
@@ -429,6 +435,7 @@ export function PreviewWorkflow({
           type: 'subflowNode',
           position: block.position,
           parentId,
+          className: parentId ? SUBFLOW_CHILD_NODE_CLASS : undefined,
           extent: block.data?.extent || undefined,
           draggable: false,
           zIndex: nestingDepth,
@@ -472,6 +479,7 @@ export function PreviewWorkflow({
         type: nodeType,
         position: block.position,
         parentId,
+        className: parentId ? SUBFLOW_CHILD_NODE_CLASS : undefined,
         extent: block.data?.extent || undefined,
         draggable: false,
         zIndex: parentId ? CONTAINER_CHILD_Z_BASE : BLOCK_Z_BASE,
@@ -654,6 +662,8 @@ export function PreviewWorkflow({
           .preview-mode.interactive-nodes .react-flow__node * { cursor: pointer !important; }
         `}</style>
         <ReactFlow
+          colorMode={colorMode}
+          zIndexMode={CANVAS_Z_INDEX_MODE}
           nodes={nodes}
           edges={edges}
           nodeTypes={nodeTypes}