fix(deps): preserve runtime and canvas behavior (#7366)

* fix(deps): preserve runtime and canvas behavior

* fix(demo): validate Cal embed configuration

* fix(deps): preserve runtime compatibility

Author: waleedlatif1

.dockerignore

@@ -32,7 +32,9 @@ Dockerfile*
 
 # Build artifacts and caches
 .next
+**/.next
 .turbo
+**/.turbo
 .cache
 dist
 build

.github/workflows/ci.yml

@@ -266,7 +266,7 @@ jobs:
             echo "ERROR: DEV_TRIGGER_ACCESS_TOKEN and TRIGGER_PROJECT_ID repo secrets must both be set" >&2
             exit 1
           fi
-          bunx trigger.dev@4.5.7 deploy --env preview --branch dev-sim
+          bunx trigger.dev@4.5.12 deploy --env preview --branch dev-sim
 
   # Main/staging: build AMD64 images and push sha-tagged images to ECR + GHCR.
   # Runs in parallel with tests — only immutable sha tags are pushed here, and

apps/desktop/package.json

@@ -50,7 +50,7 @@
     "@sim/tsconfig": "workspace:*",
     "@types/micromatch": "4.0.10",
     "@types/node": "24.2.1",
-    "electron": "43.4.1",
+    "electron": "43.5.0",
     "electron-builder": "26.15.3",
     "esbuild": "0.28.1",
     "jsdom": "^26.0.0",

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

@@ -1,13 +1,13 @@
 'use client'
 
 import { useMemo } from 'react'
-import { CANVAS_Z_INDEX_MODE } from '@sim/workflow-renderer'
+import { CANVAS_Z_INDEX_MODE, useCanvasColorMode } 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 { FitViewAfterInit } from '@/components/workflow-preview/fit-view-after-init'
 import { toReactFlowElements } from '@/components/workflow-preview/workflow-data'
 
 /** The hero mounts the same node type the canvas uses, so it can never drift. */
@@ -30,7 +30,7 @@ interface BlockPreviewProps {
  * `block-display-workflows.ts`.
  */
 export function BlockPreview({ type }: BlockPreviewProps) {
-  const colorMode = usePreviewColorMode()
+  const colorMode = useCanvasColorMode()
   const workflow = BLOCK_DISPLAY_WORKFLOWS[type]
 
   const elements = useMemo(() => (workflow ? toReactFlowElements(workflow) : null), [workflow])
@@ -51,8 +51,6 @@ export function BlockPreview({ type }: BlockPreviewProps) {
             edges={elements.edges}
             nodeTypes={NODE_TYPES}
             proOptions={PRO_OPTIONS}
-            fitView
-            fitViewOptions={FIT_VIEW_OPTIONS}
             minZoom={0.2}
             maxZoom={1.3}
             nodesDraggable={false}
@@ -64,8 +62,9 @@ export function BlockPreview({ type }: BlockPreviewProps) {
             panOnDrag={false}
             panOnScroll={false}
             preventScrolling={false}
-            className='h-full w-full'
+            className='h-full w-full [--xy-background-color:var(--bg)]'
           />
+          <FitViewAfterInit options={FIT_VIEW_OPTIONS} />
         </ReactFlowProvider>
       </LazyMotion>
     </div>

apps/docs/components/workflow-preview/fit-view-after-init.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useEffect } from 'react'
+import { type FitViewOptions, useNodesInitialized, useReactFlow } from '@xyflow/react'
+
+interface FitViewAfterInitProps {
+  options: FitViewOptions
+}
+
+/** Fits a v12 canvas only after every node has real measured dimensions. */
+export function FitViewAfterInit({ options }: FitViewAfterInitProps) {
+  const nodesInitialized = useNodesInitialized()
+  const { fitView } = useReactFlow()
+
+  useEffect(() => {
+    if (nodesInitialized) void fitView(options)
+  }, [fitView, nodesInitialized, options])
+
+  return null
+}

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

@@ -2,7 +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 { CANVAS_Z_INDEX_MODE, useCanvasColorMode } from '@sim/workflow-renderer'
 import {
   applyEdgeChanges,
   applyNodeChanges,
@@ -21,7 +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 { FitViewAfterInit } from '@/components/workflow-preview/fit-view-after-init'
 import {
   EASE_OUT,
   type PreviewBlock,
@@ -179,7 +179,8 @@ function PreviewFlow({
     [workflow, animate, highlightBlock, highlightEdge, selectedBlock]
   )
 
-  const colorMode = usePreviewColorMode()
+  const colorMode = useCanvasColorMode()
+
   const [nodes, setNodes] = useState<PreviewNode[]>(initialNodes)
   const [edges, setEdges] = useState<PreviewFlowEdge[]>(initialEdges)
 
@@ -208,34 +209,35 @@ function PreviewFlow({
   )
 
   return (
-    <ReactFlow<PreviewNode, PreviewFlowEdge>
-      colorMode={colorMode}
-      zIndexMode={CANVAS_Z_INDEX_MODE}
-      nodes={nodes}
-      edges={edges}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onNodeClick={onNodeClick ? (_, node) => onNodeClick(node.id) : undefined}
-      onPaneClick={onPaneClick}
-      nodeTypes={NODE_TYPES}
-      edgeTypes={EDGE_TYPES}
-      defaultEdgeOptions={{ type: 'previewEdge' }}
-      elementsSelectable={false}
-      nodesDraggable
-      nodesConnectable={false}
-      zoomOnScroll={interactive}
-      zoomOnDoubleClick={interactive}
-      panOnScroll={false}
-      zoomOnPinch
-      panOnDrag
-      preventScrolling={interactive}
-      autoPanOnNodeDrag={false}
-      proOptions={PRO_OPTIONS}
-      minZoom={0.1}
-      fitView
-      fitViewOptions={interactive ? LIGHTBOX_FIT_VIEW_OPTIONS : FIT_VIEW_OPTIONS}
-      className='h-full w-full'
-    />
+    <>
+      <ReactFlow<PreviewNode, PreviewFlowEdge>
+        colorMode={colorMode}
+        zIndexMode={CANVAS_Z_INDEX_MODE}
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={onNodeClick ? (_, node) => onNodeClick(node.id) : undefined}
+        onPaneClick={onPaneClick}
+        nodeTypes={NODE_TYPES}
+        edgeTypes={EDGE_TYPES}
+        defaultEdgeOptions={{ type: 'previewEdge' }}
+        elementsSelectable={false}
+        nodesDraggable
+        nodesConnectable={false}
+        zoomOnScroll={interactive}
+        zoomOnDoubleClick={interactive}
+        panOnScroll={false}
+        zoomOnPinch
+        panOnDrag
+        preventScrolling={interactive}
+        autoPanOnNodeDrag={false}
+        proOptions={PRO_OPTIONS}
+        minZoom={0.1}
+        className='h-full w-full [--xy-background-color:var(--bg)]'
+      />
+      <FitViewAfterInit options={interactive ? LIGHTBOX_FIT_VIEW_OPTIONS : FIT_VIEW_OPTIONS} />
+    </>
   )
 }
 

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

@@ -5,21 +5,20 @@ import { chipBorderShadowRing, cn } from '@sim/emcn'
 import dynamic from 'next/dynamic'
 import { preconnect } from 'react-dom'
 import { DemoForm, type DemoLead } from '@/app/(landing)/demo/components/demo-form'
-import { CAL_ORIGIN } from '@/app/(landing)/demo/components/demo-scheduler/cal-config'
 import { applyLegacyInertFallback } from '@/app/(landing)/demo/components/legacy-inert-fallback'
 
 const importScheduler = () => import('@/app/(landing)/demo/components/demo-scheduler')
 
 /**
  * Warm the entire booking path while the visitor fills the form: preconnect to
- * the configured Cal origin, then load the scheduler chunk and the
+ * app.cal.com, then load the scheduler chunk, Cal.com's embed.js, and the
  * booker iframe assets (via the embed's `preload` instruction). Fired on first
  * form focus so nothing Cal.com-related competes with initial page load — the
  * connection handshake overlaps the chunk import, and it all finishes long
  * before the visitor submits.
  */
 function preloadScheduler() {
-  preconnect(CAL_ORIGIN)
+  preconnect('https://app.cal.com')
   return importScheduler().then((m) => m.preloadCalEmbed())
 }