From 96f40b71600d5f59e946a1ce9aa5693e0514b0d4 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Wed, 4 Mar 2026 11:41:56 -0800
Subject: [PATCH 1/8] fix(subflows): recurse into all descendants for lock,
 enable, and protection checks

---
 .../panel/components/editor/editor.tsx        |  21 +-
 .../components/subflows/subflow-node.tsx      | 118 ++++++------
 .../utils/block-protection-utils.ts           |  25 +--
 .../[workspaceId]/w/[workflowId]/workflow.tsx |  10 +-
 apps/sim/hooks/use-collaborative-workflow.ts  |  32 +---
 apps/sim/socket/database/operations.ts        | 179 +++++++-----------
 apps/sim/stores/workflows/workflow/store.ts   |  34 ++--
 apps/sim/stores/workflows/workflow/utils.ts   |  41 ++--
 8 files changed, 196 insertions(+), 264 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 42e88b22a50..597f8213438 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -40,6 +40,7 @@ import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/component
 import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
 import { getSubBlockStableKey } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils'
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import { isBlockProtected } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils'
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import type { SubBlockType } from '@/blocks/types'
@@ -107,12 +108,11 @@ export function Editor() {
 
   const userPermissions = useUserPermissionsContext()
 
-  // Check if block is locked (or inside a locked container) and compute edit permission
+  // Check if block is locked (or inside a locked ancestor) and compute edit permission
   // Locked blocks cannot be edited by anyone (admins can only lock/unlock)
   const blocks = useWorkflowStore((state) => state.blocks)
-  const parentId = currentBlock?.data?.parentId as string | undefined
-  const isParentLocked = parentId ? (blocks[parentId]?.locked ?? false) : false
-  const isLocked = (currentBlock?.locked ?? false) || isParentLocked
+  const isLocked = currentBlockId ? isBlockProtected(currentBlockId, blocks) : false
+  const isAncestorLocked = isLocked && !(currentBlock?.locked ?? false)
   const canEditBlock = userPermissions.canEdit && !isLocked
 
   const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
@@ -247,10 +247,7 @@ export function Editor() {
     const block = blocks[blockId]
     if (!block) return
 
-    const parentId = block.data?.parentId as string | undefined
-    const isParentLocked = parentId ? (blocks[parentId]?.locked ?? false) : false
-    const isLocked = (block.locked ?? false) || isParentLocked
-    if (!userPermissions.canEdit || isLocked) return
+    if (!userPermissions.canEdit || isBlockProtected(blockId, blocks)) return
 
     renamingBlockIdRef.current = blockId
     setEditedName(block.name || '')
@@ -364,11 +361,11 @@ export function Editor() {
           )}
         </div>
         <div className='flex shrink-0 items-center gap-[8px]'>
-          {/* Locked indicator - clickable to unlock if user has admin permissions, block is locked, and parent is not locked */}
+          {/* Locked indicator - clickable to unlock if user has admin permissions, block is locked directly, and not locked by an ancestor */}
           {isLocked && currentBlock && (
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
-                {userPermissions.canAdmin && currentBlock.locked && !isParentLocked ? (
+                {userPermissions.canAdmin && currentBlock.locked && !isAncestorLocked ? (
                   <Button
                     variant='ghost'
                     className='p-0'
@@ -385,8 +382,8 @@ export function Editor() {
               </Tooltip.Trigger>
               <Tooltip.Content side='top'>
                 <p>
-                  {isParentLocked
-                    ? 'Parent container is locked'
+                  {isAncestorLocked
+                    ? 'Ancestor container is locked'
                     : userPermissions.canAdmin && currentBlock.locked
                       ? 'Unlock block'
                       : 'Block is locked'}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index 81507596317..31846ff41c2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -1,4 +1,4 @@
-import { memo, useMemo, useRef } from 'react'
+import { memo, useMemo } from 'react'
 import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { Handle, type NodeProps, Position, useReactFlow } from 'reactflow'
 import { Badge } from '@/components/emcn'
@@ -28,6 +28,28 @@ export interface SubflowNodeData {
   executionStatus?: 'success' | 'error' | 'not-executed'
 }
 
+const HANDLE_STYLE = {
+  top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`,
+  transform: 'translateY(-50%)',
+} as const
+
+/**
+ * Reusable class names for Handle components.
+ * Matches the styling pattern from workflow-block.tsx.
+ */
+const getHandleClasses = (position: 'left' | 'right') => {
+  const baseClasses = '!z-[10] !cursor-crosshair !border-none !transition-[colors] !duration-150'
+  const colorClasses = '!bg-[var(--workflow-edge)]'
+
+  const positionClasses = {
+    left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-11px] hover:!w-[10px] hover:!rounded-l-full',
+    right:
+      '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-11px] hover:!w-[10px] hover:!rounded-r-full',
+  }
+
+  return cn(baseClasses, colorClasses, positionClasses[position])
+}
+
 /**
  * Subflow node component for loop and parallel execution containers.
  * Renders a resizable container with a header displaying the block name and icon,
@@ -38,7 +60,6 @@ export interface SubflowNodeData {
  */
 export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<SubflowNodeData>) => {
   const { getNodes } = useReactFlow()
-  const blockRef = useRef<HTMLDivElement>(null)
   const userPermissions = useUserPermissionsContext()
 
   const currentWorkflow = useCurrentWorkflow()
@@ -52,7 +73,6 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
   const isLocked = currentBlock?.locked ?? false
   const isPreview = data?.isPreview || false
 
-  // Focus state
   const setCurrentBlockId = usePanelEditorStore((state) => state.setCurrentBlockId)
   const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
   const isFocused = currentBlockId === id
@@ -84,7 +104,7 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
     }
 
     return level
-  }, [id, data?.parentId, getNodes])
+  }, [data?.parentId, getNodes])
 
   const startHandleId = data.kind === 'loop' ? 'loop-start-source' : 'parallel-start-source'
   const endHandleId = data.kind === 'loop' ? 'loop-end-source' : 'parallel-end-source'
@@ -92,27 +112,6 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
   const blockIconBg = data.kind === 'loop' ? '#2FB3FF' : '#FEE12B'
   const blockName = data.name || (data.kind === 'loop' ? 'Loop' : 'Parallel')
 
-  /**
-   * Reusable styles and positioning for Handle components.
-   * Matches the styling pattern from workflow-block.tsx.
-   */
-  const getHandleClasses = (position: 'left' | 'right') => {
-    const baseClasses = '!z-[10] !cursor-crosshair !border-none !transition-[colors] !duration-150'
-    const colorClasses = '!bg-[var(--workflow-edge)]'
-
-    const positionClasses = {
-      left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-11px] hover:!w-[10px] hover:!rounded-l-full',
-      right:
-        '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-11px] hover:!w-[10px] hover:!rounded-r-full',
-    }
-
-    return cn(baseClasses, colorClasses, positionClasses[position])
-  }
-
-  const getHandleStyle = () => {
-    return { top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`, transform: 'translateY(-50%)' }
-  }
-
   /**
    * Determine the ring styling based on subflow state priority:
    * 1. Focused (selected in editor), selected (shift-click/box), or preview selected - blue ring
@@ -127,46 +126,35 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
     diffStatus === 'new' ||
     diffStatus === 'edited' ||
     !!runPathStatus
+
   /**
-   * Compute the outline color for the subflow ring.
-   * Uses CSS outline instead of box-shadow ring because in ReactFlow v11,
-   * child nodes are DOM children of parent nodes and paint over the parent's
-   * internal ring overlay. Outline renders on the element's own compositing
-   * layer, so it stays visible above nested child nodes.
+   * Compute the ring color for the subflow selection indicator.
+   * Uses boxShadow to match the ring styling of regular workflow blocks.
    */
-  const outlineColor = hasRing
-    ? isFocused || isSelected || isPreviewSelected
-      ? 'var(--brand-secondary)'
-      : diffStatus === 'new'
-        ? 'var(--brand-tertiary-2)'
-        : diffStatus === 'edited'
-          ? 'var(--warning)'
-          : runPathStatus === 'success'
-            ? executionStatus
-              ? 'var(--brand-tertiary-2)'
-              : 'var(--border-success)'
-            : runPathStatus === 'error'
-              ? 'var(--text-error)'
-              : undefined
-    : undefined
+  const getRingColor = (): string | undefined => {
+    if (!hasRing) return undefined
+    if (isFocused || isSelected || isPreviewSelected) return 'var(--brand-secondary)'
+    if (diffStatus === 'new') return 'var(--brand-tertiary-2)'
+    if (diffStatus === 'edited') return 'var(--warning)'
+    if (runPathStatus === 'success') {
+      return executionStatus ? 'var(--brand-tertiary-2)' : 'var(--border-success)'
+    }
+    if (runPathStatus === 'error') return 'var(--text-error)'
+    return undefined
+  }
+  const ringColor = getRingColor()
 
   return (
     <div className='group pointer-events-none relative'>
       <div
-        ref={blockRef}
-        className={cn(
-          'relative select-none rounded-[8px] border border-[var(--border-1)]',
-          'transition-block-bg'
-        )}
+        className='relative select-none rounded-[8px] border border-[var(--border-1)] transition-block-bg'
         style={{
           width: data.width || 500,
           height: data.height || 300,
-          position: 'relative',
           overflow: 'visible',
           pointerEvents: 'none',
-          ...(outlineColor && {
-            outline: `1.75px solid ${outlineColor}`,
-            outlineOffset: '-1px',
+          ...(ringColor && {
+            boxShadow: `0 0 0 1.75px ${ringColor}`,
           }),
         }}
         data-node-id={id}
@@ -181,9 +169,7 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
         {/* Header Section — only interactive area for dragging */}
         <div
           onClick={() => setCurrentBlockId(id)}
-          className={cn(
-            'workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] [&:active]:cursor-grabbing'
-          )}
+          className='workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] [&:active]:cursor-grabbing'
           style={{ pointerEvents: 'auto' }}
         >
           <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
@@ -209,6 +195,13 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
           </div>
         </div>
 
+        {/* Click-catching background — selects this subflow when the body area is clicked */}
+        <div
+          className='absolute inset-0 top-[44px] rounded-b-[8px]'
+          style={{ pointerEvents: isPreview ? 'none' : 'auto' }}
+          onClick={() => setCurrentBlockId(id)}
+        />
+
         {!isPreview && (
           <div
             className='absolute right-[8px] bottom-[8px] z-20 flex h-[32px] w-[32px] cursor-se-resize items-center justify-center text-muted-foreground'
@@ -217,12 +210,9 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
         )}
 
         <div
-          className='h-[calc(100%-50px)] pt-[16px] pr-[80px] pb-[16px] pl-[16px]'
+          className='relative h-[calc(100%-50px)] pt-[16px] pr-[80px] pb-[16px] pl-[16px]'
           data-dragarea='true'
-          style={{
-            position: 'relative',
-            pointerEvents: 'none',
-          }}
+          style={{ pointerEvents: 'none' }}
         >
           {/* Subflow Start */}
           <div
@@ -255,7 +245,7 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
           position={Position.Left}
           className={getHandleClasses('left')}
           style={{
-            ...getHandleStyle(),
+            ...HANDLE_STYLE,
             pointerEvents: 'auto',
           }}
         />
@@ -266,7 +256,7 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
           position={Position.Right}
           className={getHandleClasses('right')}
           style={{
-            ...getHandleStyle(),
+            ...HANDLE_STYLE,
             pointerEvents: 'auto',
           }}
           id={endHandleId}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils.ts
index 602a8d784a8..0b68d585539 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils.ts
@@ -1,4 +1,7 @@
 import type { BlockState } from '@/stores/workflows/workflow/types'
+import { isBlockProtected } from '@/stores/workflows/workflow/utils'
+
+export { isBlockProtected }
 
 /**
  * Result of filtering protected blocks from a deletion operation
@@ -12,28 +15,6 @@ export interface FilterProtectedBlocksResult {
   allProtected: boolean
 }
 
-/**
- * Checks if a block is protected from editing/deletion.
- * A block is protected if it is locked or if its parent container is locked.
- *
- * @param blockId - The ID of the block to check
- * @param blocks - Record of all blocks in the workflow
- * @returns True if the block is protected
- */
-export function isBlockProtected(blockId: string, blocks: Record<string, BlockState>): boolean {
-  const block = blocks[blockId]
-  if (!block) return false
-
-  // Block is locked directly
-  if (block.locked) return true
-
-  // Block is inside a locked container
-  const parentId = block.data?.parentId
-  if (parentId && blocks[parentId]?.locked) return true
-
-  return false
-}
-
 /**
  * Checks if an edge is protected from modification.
  * An edge is protected only if its target block is protected.
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 3b4559fde92..6e5ca937293 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -207,6 +207,7 @@ const reactFlowStyles = [
   '[&_.react-flow__renderer]:!bg-[var(--bg)]',
   '[&_.react-flow__viewport]:!bg-[var(--bg)]',
   '[&_.react-flow__background]:hidden',
+  '[&_.react-flow__node-subflowNode.selected]:!shadow-none',
 ].join(' ')
 const reactFlowFitViewOptions = { padding: 0.6, maxZoom: 1.0 } as const
 const reactFlowProOptions = { hideAttribution: true } as const
@@ -2412,6 +2413,12 @@ const WorkflowContent = React.memo(() => {
       const nodeType = block.type === 'note' ? 'noteBlock' : 'workflowBlock'
       const dragHandle = block.type === 'note' ? '.note-drag-handle' : '.workflow-drag-handle'
 
+      // Compute zIndex for blocks inside containers so they render above the
+      // parent subflow's interactive body area (which needs pointer-events for
+      // click-to-select). Container nodes use zIndex: depth (0, 1, 2...),
+      // so child blocks use a baseline that is always above any container.
+      const childZIndex = block.data?.parentId ? 1000 : undefined
+
       // Create stable node object - React Flow will handle shallow comparison
       nodeArray.push({
         id: block.id,
@@ -2420,6 +2427,7 @@ const WorkflowContent = React.memo(() => {
         parentId: block.data?.parentId,
         dragHandle,
         draggable: !isBlockProtected(block.id, blocks),
+        ...(childZIndex !== undefined && { zIndex: childZIndex }),
         extent: (() => {
           // Clamp children to subflow body (exclude header)
           const parentId = block.data?.parentId as string | undefined
@@ -3847,7 +3855,7 @@ const WorkflowContent = React.memo(() => {
               elevateEdgesOnSelect={true}
               onlyRenderVisibleElements={false}
               deleteKeyCode={null}
-              elevateNodesOnSelect={true}
+              elevateNodesOnSelect={false}
               autoPanOnConnect={effectivePermissions.canEdit}
               autoPanOnNodeDrag={effectivePermissions.canEdit}
             />
diff --git a/apps/sim/hooks/use-collaborative-workflow.ts b/apps/sim/hooks/use-collaborative-workflow.ts
index 83fdd5ed17b..151427f5e41 100644
--- a/apps/sim/hooks/use-collaborative-workflow.ts
+++ b/apps/sim/hooks/use-collaborative-workflow.ts
@@ -27,6 +27,7 @@ import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { filterNewEdges, filterValidEdges, mergeSubblockState } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { BlockState, Loop, Parallel, Position } from '@/stores/workflows/workflow/types'
+import { findAllDescendantNodes, isBlockProtected } from '@/stores/workflows/workflow/utils'
 
 const logger = createLogger('CollaborativeWorkflow')
 
@@ -748,9 +749,7 @@ export function useCollaborativeWorkflow() {
       const block = blocks[id]
 
       if (block) {
-        const parentId = block.data?.parentId
-        const isParentLocked = parentId ? blocks[parentId]?.locked : false
-        if (block.locked || isParentLocked) {
+        if (isBlockProtected(id, blocks)) {
           logger.error('Cannot rename locked block')
           useNotificationStore.getState().addNotification({
             level: 'info',
@@ -858,7 +857,7 @@ export function useCollaborativeWorkflow() {
       const previousStates: Record<string, boolean> = {}
       const validIds: string[] = []
 
-      // For each ID, collect non-locked blocks and their children for undo/redo
+      // For each ID, collect non-locked blocks and their descendants for undo/redo
       for (const id of ids) {
         const block = currentBlocks[id]
         if (!block) continue
@@ -868,11 +867,11 @@ export function useCollaborativeWorkflow() {
         validIds.push(id)
         previousStates[id] = block.enabled
 
-        // If it's a loop or parallel, also capture children's previous states for undo/redo
+        // If it's a loop or parallel, also capture descendants' previous states for undo/redo
         if (block.type === 'loop' || block.type === 'parallel') {
-          Object.entries(currentBlocks).forEach(([blockId, b]) => {
-            if (b.data?.parentId === id && !b.locked) {
-              previousStates[blockId] = b.enabled
+          findAllDescendantNodes(id, currentBlocks).forEach((descId) => {
+            if (!currentBlocks[descId]?.locked) {
+              previousStates[descId] = currentBlocks[descId]?.enabled ?? true
             }
           })
         }
@@ -1038,21 +1037,12 @@ export function useCollaborativeWorkflow() {
 
       const blocks = useWorkflowStore.getState().blocks
 
-      const isProtected = (blockId: string): boolean => {
-        const block = blocks[blockId]
-        if (!block) return false
-        if (block.locked) return true
-        const parentId = block.data?.parentId
-        if (parentId && blocks[parentId]?.locked) return true
-        return false
-      }
-
       const previousStates: Record<string, boolean> = {}
       const validIds: string[] = []
 
       for (const id of ids) {
         const block = blocks[id]
-        if (block && !isProtected(id)) {
+        if (block && !isBlockProtected(id, blocks)) {
           previousStates[id] = block.horizontalHandles ?? false
           validIds.push(id)
         }
@@ -1100,10 +1090,8 @@ export function useCollaborativeWorkflow() {
         previousStates[id] = block.locked ?? false
 
         if (block.type === 'loop' || block.type === 'parallel') {
-          Object.entries(currentBlocks).forEach(([blockId, b]) => {
-            if (b.data?.parentId === id) {
-              previousStates[blockId] = b.locked ?? false
-            }
+          findAllDescendantNodes(id, currentBlocks).forEach((descId) => {
+            previousStates[descId] = currentBlocks[descId]?.locked ?? false
           })
         }
       }
diff --git a/apps/sim/socket/database/operations.ts b/apps/sim/socket/database/operations.ts
index 51245f763b3..5a60c437db7 100644
--- a/apps/sim/socket/database/operations.ts
+++ b/apps/sim/socket/database/operations.ts
@@ -39,6 +39,51 @@ const db = socketDb
 const DEFAULT_LOOP_ITERATIONS = 5
 const DEFAULT_PARALLEL_COUNT = 5
 
+/** Minimal block shape needed for protection and descendant checks */
+interface DbBlockRef {
+  id: string
+  locked?: boolean | null
+  data: unknown
+}
+
+/**
+ * Checks if a block is protected (locked or inside a locked ancestor).
+ * Works with raw DB records.
+ */
+function isDbBlockProtected(blockId: string, blocksById: Record<string, DbBlockRef>): boolean {
+  const block = blocksById[blockId]
+  if (!block) return false
+  if (block.locked) return true
+  let parentId = (block.data as Record<string, unknown> | null)?.parentId as string | undefined
+  while (parentId) {
+    if (blocksById[parentId]?.locked) return true
+    parentId = (blocksById[parentId]?.data as Record<string, unknown> | null)?.parentId as
+      | string
+      | undefined
+  }
+  return false
+}
+
+/**
+ * Finds all descendant block IDs of a container (recursive).
+ * Works with raw DB block arrays.
+ */
+function findDbDescendants(containerId: string, allBlocks: DbBlockRef[]): string[] {
+  const descendants: string[] = []
+  const stack = [containerId]
+  while (stack.length > 0) {
+    const current = stack.pop()!
+    for (const b of allBlocks) {
+      const pid = (b.data as Record<string, unknown> | null)?.parentId
+      if (pid === current) {
+        descendants.push(b.id)
+        stack.push(b.id)
+      }
+    }
+  }
+  return descendants
+}
+
 /**
  * Shared function to handle auto-connect edge insertion
  * @param tx - Database transaction
@@ -753,20 +798,8 @@ async function handleBlocksOperationTx(
         allBlocks.map((b: BlockRecord) => [b.id, b])
       )
 
-      // Helper to check if a block is protected (locked or inside locked parent)
-      const isProtected = (blockId: string): boolean => {
-        const block = blocksById[blockId]
-        if (!block) return false
-        if (block.locked) return true
-        const parentId = (block.data as Record<string, unknown> | null)?.parentId as
-          | string
-          | undefined
-        if (parentId && blocksById[parentId]?.locked) return true
-        return false
-      }
-
       // Filter out protected blocks from deletion request
-      const deletableIds = ids.filter((id) => !isProtected(id))
+      const deletableIds = ids.filter((id) => !isDbBlockProtected(id, blocksById))
       if (deletableIds.length === 0) {
         logger.info('All requested blocks are protected, skipping deletion')
         return
@@ -778,18 +811,14 @@ async function handleBlocksOperationTx(
         )
       }
 
-      // Collect all block IDs including children of subflows
+      // Collect all block IDs including all descendants of subflows
       const allBlocksToDelete = new Set<string>(deletableIds)
 
       for (const id of deletableIds) {
         const block = blocksById[id]
         if (block && isSubflowBlockType(block.type)) {
-          // Include all children of the subflow (they should be deleted with parent)
-          for (const b of allBlocks) {
-            const parentId = (b.data as Record<string, unknown> | null)?.parentId
-            if (parentId === id) {
-              allBlocksToDelete.add(b.id)
-            }
+          for (const descId of findDbDescendants(id, allBlocks)) {
+            allBlocksToDelete.add(descId)
           }
         }
       }
@@ -902,19 +931,18 @@ async function handleBlocksOperationTx(
       )
       const blocksToToggle = new Set<string>()
 
-      // Collect all blocks to toggle including children of containers
+      // Collect all blocks to toggle including descendants of containers
       for (const id of blockIds) {
         const block = blocksById[id]
         if (!block || block.locked) continue
 
         blocksToToggle.add(id)
 
-        // If it's a loop or parallel, also include all children
+        // If it's a loop or parallel, also include all non-locked descendants
         if (block.type === 'loop' || block.type === 'parallel') {
-          for (const b of allBlocks) {
-            const parentId = (b.data as Record<string, unknown> | null)?.parentId
-            if (parentId === id && !b.locked) {
-              blocksToToggle.add(b.id)
+          for (const descId of findDbDescendants(id, allBlocks)) {
+            if (!blocksById[descId]?.locked) {
+              blocksToToggle.add(descId)
             }
           }
         }
@@ -966,20 +994,10 @@ async function handleBlocksOperationTx(
         allBlocks.map((b: HandleBlockRecord) => [b.id, b])
       )
 
-      // Helper to check if a block is protected (locked or inside locked parent)
-      const isProtected = (blockId: string): boolean => {
-        const block = blocksById[blockId]
-        if (!block) return false
-        if (block.locked) return true
-        const parentId = (block.data as Record<string, unknown> | null)?.parentId as
-          | string
-          | undefined
-        if (parentId && blocksById[parentId]?.locked) return true
-        return false
-      }
-
       // Filter to only toggle handles on unprotected blocks
-      const blocksToToggle = blockIds.filter((id) => blocksById[id] && !isProtected(id))
+      const blocksToToggle = blockIds.filter(
+        (id) => blocksById[id] && !isDbBlockProtected(id, blocksById)
+      )
       if (blocksToToggle.length === 0) {
         logger.info('All requested blocks are protected, skipping handles toggle')
         break
@@ -1025,20 +1043,17 @@ async function handleBlocksOperationTx(
       )
       const blocksToToggle = new Set<string>()
 
-      // Collect all blocks to toggle including children of containers
+      // Collect all blocks to toggle including descendants of containers
       for (const id of blockIds) {
         const block = blocksById[id]
         if (!block) continue
 
         blocksToToggle.add(id)
 
-        // If it's a loop or parallel, also include all children
+        // If it's a loop or parallel, also include all descendants
         if (block.type === 'loop' || block.type === 'parallel') {
-          for (const b of allBlocks) {
-            const parentId = (b.data as Record<string, unknown> | null)?.parentId
-            if (parentId === id) {
-              blocksToToggle.add(b.id)
-            }
+          for (const descId of findDbDescendants(id, allBlocks)) {
+            blocksToToggle.add(descId)
           }
         }
       }
@@ -1088,31 +1103,19 @@ async function handleBlocksOperationTx(
         allBlocks.map((b: ParentBlockRecord) => [b.id, b])
       )
 
-      // Helper to check if a block is protected (locked or inside locked parent)
-      const isProtected = (blockId: string): boolean => {
-        const block = blocksById[blockId]
-        if (!block) return false
-        if (block.locked) return true
-        const currentParentId = (block.data as Record<string, unknown> | null)?.parentId as
-          | string
-          | undefined
-        if (currentParentId && blocksById[currentParentId]?.locked) return true
-        return false
-      }
-
       for (const update of updates) {
         const { id, parentId, position } = update
         if (!id) continue
 
         // Skip protected blocks (locked or inside locked container)
-        if (isProtected(id)) {
+        if (isDbBlockProtected(id, blocksById)) {
           logger.info(`Skipping block ${id} parent update - block is protected`)
           continue
         }
 
-        // Skip if trying to move into a locked container
-        if (parentId && blocksById[parentId]?.locked) {
-          logger.info(`Skipping block ${id} parent update - target parent ${parentId} is locked`)
+        // Skip if trying to move into a locked container (or any of its ancestors)
+        if (parentId && isDbBlockProtected(parentId, blocksById)) {
+          logger.info(`Skipping block ${id} parent update - target parent ${parentId} is protected`)
           continue
         }
 
@@ -1235,18 +1238,7 @@ async function handleEdgeOperationTx(tx: any, workflowId: string, operation: str
         }
       }
 
-      const isBlockProtected = (blockId: string): boolean => {
-        const block = blocksById[blockId]
-        if (!block) return false
-        if (block.locked) return true
-        const parentId = (block.data as Record<string, unknown> | null)?.parentId as
-          | string
-          | undefined
-        if (parentId && blocksById[parentId]?.locked) return true
-        return false
-      }
-
-      if (isBlockProtected(payload.target)) {
+      if (isDbBlockProtected(payload.target, blocksById)) {
         logger.info(`Skipping edge add - target block is protected`)
         break
       }
@@ -1334,18 +1326,7 @@ async function handleEdgeOperationTx(tx: any, workflowId: string, operation: str
         }
       }
 
-      const isBlockProtected = (blockId: string): boolean => {
-        const block = blocksById[blockId]
-        if (!block) return false
-        if (block.locked) return true
-        const parentId = (block.data as Record<string, unknown> | null)?.parentId as
-          | string
-          | undefined
-        if (parentId && blocksById[parentId]?.locked) return true
-        return false
-      }
-
-      if (isBlockProtected(edgeToRemove.targetBlockId)) {
+      if (isDbBlockProtected(edgeToRemove.targetBlockId, blocksById)) {
         logger.info(`Skipping edge remove - target block is protected`)
         break
       }
@@ -1455,19 +1436,8 @@ async function handleEdgesOperationTx(
         }
       }
 
-      const isBlockProtected = (blockId: string): boolean => {
-        const block = blocksById[blockId]
-        if (!block) return false
-        if (block.locked) return true
-        const parentId = (block.data as Record<string, unknown> | null)?.parentId as
-          | string
-          | undefined
-        if (parentId && blocksById[parentId]?.locked) return true
-        return false
-      }
-
       const safeEdgeIds = edgesToRemove
-        .filter((e: EdgeToRemove) => !isBlockProtected(e.targetBlockId))
+        .filter((e: EdgeToRemove) => !isDbBlockProtected(e.targetBlockId, blocksById))
         .map((e: EdgeToRemove) => e.id)
 
       if (safeEdgeIds.length === 0) {
@@ -1552,20 +1522,9 @@ async function handleEdgesOperationTx(
         }
       }
 
-      const isBlockProtected = (blockId: string): boolean => {
-        const block = blocksById[blockId]
-        if (!block) return false
-        if (block.locked) return true
-        const parentId = (block.data as Record<string, unknown> | null)?.parentId as
-          | string
-          | undefined
-        if (parentId && blocksById[parentId]?.locked) return true
-        return false
-      }
-
       // Filter edges - only add edges where target block is not protected
       const safeEdges = (edges as Array<Record<string, unknown>>).filter(
-        (e) => !isBlockProtected(e.target as string)
+        (e) => !isDbBlockProtected(e.target as string, blocksById)
       )
 
       if (safeEdges.length === 0) {
diff --git a/apps/sim/stores/workflows/workflow/store.ts b/apps/sim/stores/workflows/workflow/store.ts
index ed8db278fa2..57d013d07d2 100644
--- a/apps/sim/stores/workflows/workflow/store.ts
+++ b/apps/sim/stores/workflows/workflow/store.ts
@@ -20,8 +20,10 @@ import type {
   WorkflowStore,
 } from '@/stores/workflows/workflow/types'
 import {
+  findAllDescendantNodes,
   generateLoopBlocks,
   generateParallelBlocks,
+  isBlockProtected,
   wouldCreateCycle,
 } from '@/stores/workflows/workflow/utils'
 
@@ -374,7 +376,7 @@ export const useWorkflowStore = create<WorkflowStore>()(
         const blocksToToggle = new Set<string>()
 
         // For each ID, collect blocks to toggle (skip locked blocks entirely)
-        // If it's a container, also include non-locked children
+        // If it's a container, also include non-locked descendants
         for (const id of ids) {
           const block = currentBlocks[id]
           if (!block) continue
@@ -384,11 +386,11 @@ export const useWorkflowStore = create<WorkflowStore>()(
 
           blocksToToggle.add(id)
 
-          // If it's a loop or parallel, also include non-locked children
+          // If it's a loop or parallel, also include non-locked descendants
           if (block.type === 'loop' || block.type === 'parallel') {
-            Object.entries(currentBlocks).forEach(([blockId, b]) => {
-              if (b.data?.parentId === id && !b.locked) {
-                blocksToToggle.add(blockId)
+            findAllDescendantNodes(id, currentBlocks).forEach((descId) => {
+              if (!currentBlocks[descId]?.locked) {
+                blocksToToggle.add(descId)
               }
             })
           }
@@ -415,18 +417,8 @@ export const useWorkflowStore = create<WorkflowStore>()(
         const currentBlocks = get().blocks
         const newBlocks = { ...currentBlocks }
 
-        // Helper to check if a block is protected (locked or inside locked parent)
-        const isProtected = (blockId: string): boolean => {
-          const block = currentBlocks[blockId]
-          if (!block) return false
-          if (block.locked) return true
-          const parentId = block.data?.parentId
-          if (parentId && currentBlocks[parentId]?.locked) return true
-          return false
-        }
-
         for (const id of ids) {
-          if (!newBlocks[id] || isProtected(id)) continue
+          if (!newBlocks[id] || isBlockProtected(id, currentBlocks)) continue
           newBlocks[id] = {
             ...newBlocks[id],
             horizontalHandles: !newBlocks[id].horizontalHandles,
@@ -1267,19 +1259,17 @@ export const useWorkflowStore = create<WorkflowStore>()(
         const blocksToToggle = new Set<string>()
 
         // For each ID, collect blocks to toggle
-        // If it's a container, also include all children
+        // If it's a container, also include all descendants
         for (const id of ids) {
           const block = currentBlocks[id]
           if (!block) continue
 
           blocksToToggle.add(id)
 
-          // If it's a loop or parallel, also include all children
+          // If it's a loop or parallel, also include all descendants
           if (block.type === 'loop' || block.type === 'parallel') {
-            Object.entries(currentBlocks).forEach(([blockId, b]) => {
-              if (b.data?.parentId === id) {
-                blocksToToggle.add(blockId)
-              }
+            findAllDescendantNodes(id, currentBlocks).forEach((descId) => {
+              blocksToToggle.add(descId)
             })
           }
         }
diff --git a/apps/sim/stores/workflows/workflow/utils.ts b/apps/sim/stores/workflows/workflow/utils.ts
index dc200792a2a..ceca48adda7 100644
--- a/apps/sim/stores/workflows/workflow/utils.ts
+++ b/apps/sim/stores/workflows/workflow/utils.ts
@@ -143,21 +143,40 @@ export function findAllDescendantNodes(
   blocks: Record<string, BlockState>
 ): string[] {
   const descendants: string[] = []
-  const findDescendants = (parentId: string) => {
-    const children = Object.values(blocks)
-      .filter((block) => block.data?.parentId === parentId)
-      .map((block) => block.id)
-
-    children.forEach((childId) => {
-      descendants.push(childId)
-      findDescendants(childId)
-    })
+  const stack = [containerId]
+  while (stack.length > 0) {
+    const current = stack.pop()!
+    for (const block of Object.values(blocks)) {
+      if (block.data?.parentId === current) {
+        descendants.push(block.id)
+        stack.push(block.id)
+      }
+    }
   }
-
-  findDescendants(containerId)
   return descendants
 }
 
+/**
+ * Checks if a block is protected from editing/deletion.
+ * A block is protected if it is locked or if any ancestor container is locked.
+ *
+ * @param blockId - The ID of the block to check
+ * @param blocks - Record of all blocks in the workflow
+ * @returns True if the block is protected
+ */
+export function isBlockProtected(blockId: string, blocks: Record<string, BlockState>): boolean {
+  const block = blocks[blockId]
+  if (!block) return false
+  if (block.locked) return true
+
+  let parentId = block.data?.parentId
+  while (parentId) {
+    if (blocks[parentId]?.locked) return true
+    parentId = blocks[parentId]?.data?.parentId
+  }
+  return false
+}
+
 /**
  * Builds a complete collection of loops from the UI blocks
  *

From 23dc61947598467dd0a03542daf4ab204d97c6cf Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Wed, 4 Mar 2026 11:56:00 -0800
Subject: [PATCH 2/8] fix(subflows): prevent container resize on initial render
 and clean up code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add canvasReadyRef to skip container dimension recalculation during
  ReactFlow init — position changes from extent clamping fired before
  block heights are measured, causing containers to resize on page load
- Resolve globals.css merge conflict, remove global z-index overrides
  (handled via ReactFlow zIndex prop instead)
- Clean up subflow-node: hoist static helpers to module scope, remove
  unused ref, fix nested ternary readability, rename outlineColor→ringColor

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/sim/app/_styles/globals.css              |  5 ++
 .../[workspaceId]/w/[workflowId]/workflow.tsx | 78 +++++++++----------
 2 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 1a74ca50dfe..1a1fd7aade1 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -843,3 +843,8 @@ input[type="search"]::-ms-clear {
 .react-flow__node[data-parent-node-id] .react-flow__handle {
   z-index: 30;
 }
+
+.workflow-container .react-flow__edge-interaction {
+  stroke: none !important;
+  pointer-events: all;
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 6e5ca937293..e585e35b938 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -196,16 +196,11 @@ const edgeTypes: EdgeTypes = {
 const defaultEdgeOptions = { type: 'custom' }
 
 const reactFlowStyles = [
-  'bg-[var(--bg)]',
   '[&_.react-flow__edges]:!z-0',
   '[&_.react-flow__node]:z-[21]',
   '[&_.react-flow__handle]:!z-[30]',
-  '[&_.react-flow__edge-labels]:!z-[60]',
-  '[&_.react-flow__pane]:!bg-[var(--bg)]',
   '[&_.react-flow__pane]:select-none',
   '[&_.react-flow__selectionpane]:select-none',
-  '[&_.react-flow__renderer]:!bg-[var(--bg)]',
-  '[&_.react-flow__viewport]:!bg-[var(--bg)]',
   '[&_.react-flow__background]:hidden',
   '[&_.react-flow__node-subflowNode.selected]:!shadow-none',
 ].join(' ')
@@ -231,6 +226,7 @@ interface BlockData {
  */
 const WorkflowContent = React.memo(() => {
   const [isCanvasReady, setIsCanvasReady] = useState(false)
+  const canvasReadyRef = useRef(false)
   const [potentialParentId, setPotentialParentId] = useState<string | null>(null)
   const [selectedEdges, setSelectedEdges] = useState<SelectedEdgesMap>(new Map())
   const [isErrorConnectionDrag, setIsErrorConnectionDrag] = useState(false)
@@ -2244,6 +2240,7 @@ const WorkflowContent = React.memo(() => {
       clearDiff()
 
       // Reset canvas ready state when loading a new workflow
+      canvasReadyRef.current = false
       setIsCanvasReady(false)
 
       setActiveWorkflow(currentId)
@@ -2715,26 +2712,29 @@ const WorkflowContent = React.memo(() => {
 
       // Handle position changes (e.g., from keyboard arrow key movement)
       // Update container dimensions when child nodes are moved and persist to backend
-      // Only persist if not in a drag operation (drag-end is handled by onNodeDragStop)
-      const isInDragOperation =
-        getDragStartPosition() !== null || multiNodeDragStartRef.current.size > 0
-      const keyboardPositionUpdates: Array<{ id: string; position: { x: number; y: number } }> = []
-      for (const change of changes) {
-        if (
-          change.type === 'position' &&
-          !change.dragging &&
-          'position' in change &&
-          change.position
-        ) {
-          updateContainerDimensionsDuringMove(change.id, change.position)
-          if (!isInDragOperation) {
-            keyboardPositionUpdates.push({ id: change.id, position: change.position })
+      // Skip during initial render — ReactFlow fires position changes from extent clamping
+      // before block heights are measured, which would incorrectly resize containers.
+      if (canvasReadyRef.current) {
+        const isInDragOperation =
+          getDragStartPosition() !== null || multiNodeDragStartRef.current.size > 0
+        const keyboardPositionUpdates: Array<{ id: string; position: { x: number; y: number } }> =
+          []
+        for (const change of changes) {
+          if (
+            change.type === 'position' &&
+            !change.dragging &&
+            'position' in change &&
+            change.position
+          ) {
+            updateContainerDimensionsDuringMove(change.id, change.position)
+            if (!isInDragOperation) {
+              keyboardPositionUpdates.push({ id: change.id, position: change.position })
+            }
           }
         }
-      }
-      // Persist keyboard movements to backend for collaboration sync
-      if (keyboardPositionUpdates.length > 0) {
-        collaborativeBatchUpdatePositions(keyboardPositionUpdates)
+        if (keyboardPositionUpdates.length > 0) {
+          collaborativeBatchUpdatePositions(keyboardPositionUpdates)
+        }
       }
     },
     [
@@ -3776,21 +3776,20 @@ const WorkflowContent = React.memo(() => {
   return (
     <div className='flex h-full w-full flex-col overflow-hidden'>
       <div className='relative h-full w-full flex-1'>
-        {/* Loading spinner - always mounted, animation paused when hidden to avoid overhead */}
-        <div
-          className={`absolute inset-0 z-[5] flex items-center justify-center bg-[var(--bg)] transition-opacity duration-150 ${isWorkflowReady ? 'pointer-events-none opacity-0' : 'opacity-100'}`}
-        >
-          <div
-            className={`h-[18px] w-[18px] rounded-full ${isWorkflowReady ? '' : 'animate-spin'}`}
-            style={{
-              background:
-                'conic-gradient(from 0deg, hsl(var(--muted-foreground)) 0deg 120deg, transparent 120deg 180deg, hsl(var(--muted-foreground)) 180deg 300deg, transparent 300deg 360deg)',
-              mask: 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-              WebkitMask:
-                'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
-            }}
-          />
-        </div>
+        {!isWorkflowReady && (
+          <div className='absolute inset-0 z-[5] flex items-center justify-center bg-[var(--bg)]'>
+            <div
+              className='h-[18px] w-[18px] animate-spin rounded-full'
+              style={{
+                background:
+                  'conic-gradient(from 0deg, hsl(var(--muted-foreground)) 0deg 120deg, transparent 120deg 180deg, hsl(var(--muted-foreground)) 180deg 300deg, transparent 300deg 360deg)',
+                mask: 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
+                WebkitMask:
+                  'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
+              }}
+            />
+          </div>
+        )}
 
         {isWorkflowReady && (
           <>
@@ -3812,6 +3811,7 @@ const WorkflowContent = React.memo(() => {
               onInit={(instance) => {
                 requestAnimationFrame(() => {
                   instance.fitView(reactFlowFitViewOptions)
+                  canvasReadyRef.current = true
                   setIsCanvasReady(true)
                 })
               }}
@@ -3843,7 +3843,7 @@ const WorkflowContent = React.memo(() => {
               noWheelClassName='allow-scroll'
               edgesFocusable={true}
               edgesUpdatable={effectivePermissions.canEdit}
-              className={`workflow-container h-full transition-opacity duration-150 ${reactFlowStyles} ${isCanvasReady ? 'opacity-100' : 'opacity-0'} ${isHandMode ? 'canvas-mode-hand' : 'canvas-mode-cursor'}`}
+              className={`workflow-container h-full bg-[var(--bg)] ${reactFlowStyles} ${isCanvasReady ? 'opacity-100' : 'opacity-0'} ${isHandMode ? 'canvas-mode-hand' : 'canvas-mode-cursor'}`}
               onNodeDrag={effectivePermissions.canEdit ? onNodeDrag : undefined}
               onNodeDragStop={effectivePermissions.canEdit ? onNodeDragStop : undefined}
               onSelectionDragStart={effectivePermissions.canEdit ? onSelectionDragStart : undefined}

From f9202adc3ac12322185ef24d382ed8697deb7291 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Wed, 4 Mar 2026 12:00:39 -0800
Subject: [PATCH 3/8] fix(subflows): use full ancestor-chain protection for
 descendant enable-toggle

The enable-toggle for descendants was checking only direct `locked` status
instead of walking the full ancestor chain via `isBlockProtected`. This meant
a block nested 2+ levels inside a locked subflow could still be toggled.
Also added TSDoc clarifying why boxShadow works for subflow ring indicators.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../w/[workflowId]/components/subflows/subflow-node.tsx       | 4 +++-
 apps/sim/hooks/use-collaborative-workflow.ts                  | 2 +-
 apps/sim/socket/database/operations.ts                        | 2 +-
 apps/sim/stores/workflows/workflow/store.ts                   | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index 31846ff41c2..592901ca536 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -129,7 +129,9 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
 
   /**
    * Compute the ring color for the subflow selection indicator.
-   * Uses boxShadow to match the ring styling of regular workflow blocks.
+   * Uses boxShadow (not CSS outline) to match the ring styling of regular workflow blocks.
+   * This works because ReactFlow renders child nodes as sibling divs at the viewport level
+   * (not as DOM children), so children at zIndex 1000 don't clip the parent's boxShadow.
    */
   const getRingColor = (): string | undefined => {
     if (!hasRing) return undefined
diff --git a/apps/sim/hooks/use-collaborative-workflow.ts b/apps/sim/hooks/use-collaborative-workflow.ts
index 151427f5e41..ccc6b0fbd46 100644
--- a/apps/sim/hooks/use-collaborative-workflow.ts
+++ b/apps/sim/hooks/use-collaborative-workflow.ts
@@ -870,7 +870,7 @@ export function useCollaborativeWorkflow() {
         // If it's a loop or parallel, also capture descendants' previous states for undo/redo
         if (block.type === 'loop' || block.type === 'parallel') {
           findAllDescendantNodes(id, currentBlocks).forEach((descId) => {
-            if (!currentBlocks[descId]?.locked) {
+            if (!isBlockProtected(descId, currentBlocks)) {
               previousStates[descId] = currentBlocks[descId]?.enabled ?? true
             }
           })
diff --git a/apps/sim/socket/database/operations.ts b/apps/sim/socket/database/operations.ts
index 5a60c437db7..558a962842b 100644
--- a/apps/sim/socket/database/operations.ts
+++ b/apps/sim/socket/database/operations.ts
@@ -941,7 +941,7 @@ async function handleBlocksOperationTx(
         // If it's a loop or parallel, also include all non-locked descendants
         if (block.type === 'loop' || block.type === 'parallel') {
           for (const descId of findDbDescendants(id, allBlocks)) {
-            if (!blocksById[descId]?.locked) {
+            if (!isDbBlockProtected(descId, blocksById)) {
               blocksToToggle.add(descId)
             }
           }
diff --git a/apps/sim/stores/workflows/workflow/store.ts b/apps/sim/stores/workflows/workflow/store.ts
index 57d013d07d2..075d4941ada 100644
--- a/apps/sim/stores/workflows/workflow/store.ts
+++ b/apps/sim/stores/workflows/workflow/store.ts
@@ -389,7 +389,7 @@ export const useWorkflowStore = create<WorkflowStore>()(
           // If it's a loop or parallel, also include non-locked descendants
           if (block.type === 'loop' || block.type === 'parallel') {
             findAllDescendantNodes(id, currentBlocks).forEach((descId) => {
-              if (!currentBlocks[descId]?.locked) {
+              if (!isBlockProtected(descId, currentBlocks)) {
                 blocksToToggle.add(descId)
               }
             })

From e9389783a63fb307062a1a7c4c360483bdf92571 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Wed, 4 Mar 2026 12:14:18 -0800
Subject: [PATCH 4/8] revert(subflows): remove canvasReadyRef height-gating
 approach

The canvasReadyRef gating in onNodesChange didn't fully fix the
container resize-on-load issue. Reverting to address properly later.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../[workspaceId]/w/[workflowId]/workflow.tsx | 42 ++++++++-----------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index e585e35b938..f96e82f2e44 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -226,7 +226,6 @@ interface BlockData {
  */
 const WorkflowContent = React.memo(() => {
   const [isCanvasReady, setIsCanvasReady] = useState(false)
-  const canvasReadyRef = useRef(false)
   const [potentialParentId, setPotentialParentId] = useState<string | null>(null)
   const [selectedEdges, setSelectedEdges] = useState<SelectedEdgesMap>(new Map())
   const [isErrorConnectionDrag, setIsErrorConnectionDrag] = useState(false)
@@ -2240,7 +2239,6 @@ const WorkflowContent = React.memo(() => {
       clearDiff()
 
       // Reset canvas ready state when loading a new workflow
-      canvasReadyRef.current = false
       setIsCanvasReady(false)
 
       setActiveWorkflow(currentId)
@@ -2712,29 +2710,26 @@ const WorkflowContent = React.memo(() => {
 
       // Handle position changes (e.g., from keyboard arrow key movement)
       // Update container dimensions when child nodes are moved and persist to backend
-      // Skip during initial render — ReactFlow fires position changes from extent clamping
-      // before block heights are measured, which would incorrectly resize containers.
-      if (canvasReadyRef.current) {
-        const isInDragOperation =
-          getDragStartPosition() !== null || multiNodeDragStartRef.current.size > 0
-        const keyboardPositionUpdates: Array<{ id: string; position: { x: number; y: number } }> =
-          []
-        for (const change of changes) {
-          if (
-            change.type === 'position' &&
-            !change.dragging &&
-            'position' in change &&
-            change.position
-          ) {
-            updateContainerDimensionsDuringMove(change.id, change.position)
-            if (!isInDragOperation) {
-              keyboardPositionUpdates.push({ id: change.id, position: change.position })
-            }
+      // Only persist if not in a drag operation (drag-end is handled by onNodeDragStop)
+      const isInDragOperation =
+        getDragStartPosition() !== null || multiNodeDragStartRef.current.size > 0
+      const keyboardPositionUpdates: Array<{ id: string; position: { x: number; y: number } }> = []
+      for (const change of changes) {
+        if (
+          change.type === 'position' &&
+          !change.dragging &&
+          'position' in change &&
+          change.position
+        ) {
+          updateContainerDimensionsDuringMove(change.id, change.position)
+          if (!isInDragOperation) {
+            keyboardPositionUpdates.push({ id: change.id, position: change.position })
           }
         }
-        if (keyboardPositionUpdates.length > 0) {
-          collaborativeBatchUpdatePositions(keyboardPositionUpdates)
-        }
+      }
+      // Persist keyboard movements to backend for collaboration sync
+      if (keyboardPositionUpdates.length > 0) {
+        collaborativeBatchUpdatePositions(keyboardPositionUpdates)
       }
     },
     [
@@ -3811,7 +3806,6 @@ const WorkflowContent = React.memo(() => {
               onInit={(instance) => {
                 requestAnimationFrame(() => {
                   instance.fitView(reactFlowFitViewOptions)
-                  canvasReadyRef.current = true
                   setIsCanvasReady(true)
                 })
               }}

From 8a8a9d53a84d8f1190eafa0f09c26ee97f1cce47 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Wed, 4 Mar 2026 12:15:07 -0800
Subject: [PATCH 5/8] fix: remove unintentional edge-interaction CSS from
 globals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Leftover from merge conflict resolution — not part of this PR's changes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/sim/app/_styles/globals.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 1a1fd7aade1..1a74ca50dfe 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -843,8 +843,3 @@ input[type="search"]::-ms-clear {
 .react-flow__node[data-parent-node-id] .react-flow__handle {
   z-index: 30;
 }
-
-.workflow-container .react-flow__edge-interaction {
-  stroke: none !important;
-  pointer-events: all;
-}

From dc4778ddfc77ae8ca49fd513ed13f647221f02ec Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Wed, 4 Mar 2026 14:51:16 -0800
Subject: [PATCH 6/8] fix(editor): correct isAncestorLocked when block and
 ancestor both locked, restore fade-in transition

isAncestorLocked was derived from isBlockProtected which short-circuits
on block.locked, so a self-locked block inside a locked ancestor showed
"Unlock block" instead of "Ancestor container is locked". Now walks the
ancestor chain independently.

Also restores the accidentally removed transition-opacity duration-150
class on the ReactFlow container.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/panel/components/editor/editor.tsx      | 10 +++++++++-
 .../[workspaceId]/w/[workflowId]/workflow.tsx          |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 597f8213438..0578615762d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -112,7 +112,15 @@ export function Editor() {
   // Locked blocks cannot be edited by anyone (admins can only lock/unlock)
   const blocks = useWorkflowStore((state) => state.blocks)
   const isLocked = currentBlockId ? isBlockProtected(currentBlockId, blocks) : false
-  const isAncestorLocked = isLocked && !(currentBlock?.locked ?? false)
+  const isAncestorLocked = (() => {
+    if (!currentBlockId) return false
+    let parentId = currentBlock?.data?.parentId as string | undefined
+    while (parentId) {
+      if (blocks[parentId]?.locked) return true
+      parentId = blocks[parentId]?.data?.parentId as string | undefined
+    }
+    return false
+  })()
   const canEditBlock = userPermissions.canEdit && !isLocked
 
   const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index f96e82f2e44..a5cbcee712b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -3837,7 +3837,7 @@ const WorkflowContent = React.memo(() => {
               noWheelClassName='allow-scroll'
               edgesFocusable={true}
               edgesUpdatable={effectivePermissions.canEdit}
-              className={`workflow-container h-full bg-[var(--bg)] ${reactFlowStyles} ${isCanvasReady ? 'opacity-100' : 'opacity-0'} ${isHandMode ? 'canvas-mode-hand' : 'canvas-mode-cursor'}`}
+              className={`workflow-container h-full bg-[var(--bg)] transition-opacity duration-150 ${reactFlowStyles} ${isCanvasReady ? 'opacity-100' : 'opacity-0'} ${isHandMode ? 'canvas-mode-hand' : 'canvas-mode-cursor'}`}
               onNodeDrag={effectivePermissions.canEdit ? onNodeDrag : undefined}
               onNodeDragStop={effectivePermissions.canEdit ? onNodeDragStop : undefined}
               onSelectionDragStart={effectivePermissions.canEdit ? onSelectionDragStart : undefined}

From f1a09ca5f51ba6fe0457e06df4e0e8ed18e717c3 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Wed, 4 Mar 2026 15:09:00 -0800
Subject: [PATCH 7/8] fix(subflows): use full ancestor-chain protection for
 top-level enable-toggle, restore edge-label z-index

The top-level block check in batchToggleEnabled used block.locked (self
only) while descendants used isBlockProtected (full ancestor chain). A
block inside a locked ancestor but not itself locked would bypass the
check. Now all three layers (store, collaborative hook, DB operations)
consistently use isBlockProtected/isDbBlockProtected at both levels.

Also restores the accidentally removed edge-labels z-index rule, bumped
from 60 to 1001 so labels render above child nodes (zIndex: 1000).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx   | 1 +
 apps/sim/hooks/use-collaborative-workflow.ts                  | 4 ++--
 apps/sim/socket/database/operations.ts                        | 2 +-
 apps/sim/stores/workflows/workflow/store.ts                   | 4 ++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index a5cbcee712b..577af370cb3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -199,6 +199,7 @@ const reactFlowStyles = [
   '[&_.react-flow__edges]:!z-0',
   '[&_.react-flow__node]:z-[21]',
   '[&_.react-flow__handle]:!z-[30]',
+  '[&_.react-flow__edge-labels]:!z-[1001]',
   '[&_.react-flow__pane]:select-none',
   '[&_.react-flow__selectionpane]:select-none',
   '[&_.react-flow__background]:hidden',
diff --git a/apps/sim/hooks/use-collaborative-workflow.ts b/apps/sim/hooks/use-collaborative-workflow.ts
index ccc6b0fbd46..db3ac1a6c66 100644
--- a/apps/sim/hooks/use-collaborative-workflow.ts
+++ b/apps/sim/hooks/use-collaborative-workflow.ts
@@ -862,8 +862,8 @@ export function useCollaborativeWorkflow() {
         const block = currentBlocks[id]
         if (!block) continue
 
-        // Skip locked blocks
-        if (block.locked) continue
+        // Skip protected blocks (locked or inside a locked ancestor)
+        if (isBlockProtected(id, currentBlocks)) continue
         validIds.push(id)
         previousStates[id] = block.enabled
 
diff --git a/apps/sim/socket/database/operations.ts b/apps/sim/socket/database/operations.ts
index 558a962842b..554bb6d3e00 100644
--- a/apps/sim/socket/database/operations.ts
+++ b/apps/sim/socket/database/operations.ts
@@ -934,7 +934,7 @@ async function handleBlocksOperationTx(
       // Collect all blocks to toggle including descendants of containers
       for (const id of blockIds) {
         const block = blocksById[id]
-        if (!block || block.locked) continue
+        if (!block || isDbBlockProtected(id, blocksById)) continue
 
         blocksToToggle.add(id)
 
diff --git a/apps/sim/stores/workflows/workflow/store.ts b/apps/sim/stores/workflows/workflow/store.ts
index 075d4941ada..ba9c9bd35fb 100644
--- a/apps/sim/stores/workflows/workflow/store.ts
+++ b/apps/sim/stores/workflows/workflow/store.ts
@@ -381,8 +381,8 @@ export const useWorkflowStore = create<WorkflowStore>()(
           const block = currentBlocks[id]
           if (!block) continue
 
-          // Skip locked blocks entirely (including their children)
-          if (block.locked) continue
+          // Skip protected blocks entirely (locked or inside a locked ancestor)
+          if (isBlockProtected(id, currentBlocks)) continue
 
           blocksToToggle.add(id)
 

From bf6104ff1a22fea222933a81f3b1a27df8eb47f5 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Wed, 4 Mar 2026 15:25:31 -0800
Subject: [PATCH 8/8] fix(subflows): extract isAncestorProtected utility, add
 cycle detection to all traversals

- Extract isAncestorProtected from utils.ts so editor.tsx doesn't
  duplicate the ancestor-chain walk. isBlockProtected now delegates to it.
- Add visited-set cycle detection to all ancestor walks
  (isBlockProtected, isAncestorProtected, isDbBlockProtected) and
  descendant searches (findAllDescendantNodes, findDbDescendants) to
  guard against corrupt parentId references.
- Document why click-catching div has no event bubbling concern
  (ReactFlow renders children as viewport siblings, not DOM children).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../panel/components/editor/editor.tsx        | 15 ++++------
 .../components/subflows/subflow-node.tsx      |  6 +++-
 .../utils/block-protection-utils.ts           |  4 +--
 apps/sim/socket/database/operations.ts        |  7 ++++-
 apps/sim/stores/workflows/workflow/utils.ts   | 30 ++++++++++++++-----
 5 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 0578615762d..35d7bc5c673 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -40,7 +40,10 @@ import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/component
 import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
 import { getSubBlockStableKey } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils'
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
-import { isBlockProtected } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils'
+import {
+  isAncestorProtected,
+  isBlockProtected,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils'
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import type { SubBlockType } from '@/blocks/types'
@@ -112,15 +115,7 @@ export function Editor() {
   // Locked blocks cannot be edited by anyone (admins can only lock/unlock)
   const blocks = useWorkflowStore((state) => state.blocks)
   const isLocked = currentBlockId ? isBlockProtected(currentBlockId, blocks) : false
-  const isAncestorLocked = (() => {
-    if (!currentBlockId) return false
-    let parentId = currentBlock?.data?.parentId as string | undefined
-    while (parentId) {
-      if (blocks[parentId]?.locked) return true
-      parentId = blocks[parentId]?.data?.parentId as string | undefined
-    }
-    return false
-  })()
+  const isAncestorLocked = currentBlockId ? isAncestorProtected(currentBlockId, blocks) : false
   const canEditBlock = userPermissions.canEdit && !isLocked
 
   const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index 592901ca536..9118e0dd9b7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -197,7 +197,11 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
           </div>
         </div>
 
-        {/* Click-catching background — selects this subflow when the body area is clicked */}
+        {/*
+         * Click-catching background — selects this subflow when the body area is clicked.
+         * No event bubbling concern: ReactFlow renders child nodes as viewport-level siblings,
+         * not as DOM children of this component, so child clicks never reach this div.
+         */}
         <div
           className='absolute inset-0 top-[44px] rounded-b-[8px]'
           style={{ pointerEvents: isPreview ? 'none' : 'auto' }}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils.ts
index 0b68d585539..ddf80d336b6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-protection-utils.ts
@@ -1,7 +1,7 @@
 import type { BlockState } from '@/stores/workflows/workflow/types'
-import { isBlockProtected } from '@/stores/workflows/workflow/utils'
+import { isAncestorProtected, isBlockProtected } from '@/stores/workflows/workflow/utils'
 
-export { isBlockProtected }
+export { isAncestorProtected, isBlockProtected }
 
 /**
  * Result of filtering protected blocks from a deletion operation
diff --git a/apps/sim/socket/database/operations.ts b/apps/sim/socket/database/operations.ts
index 554bb6d3e00..d157feb0f41 100644
--- a/apps/sim/socket/database/operations.ts
+++ b/apps/sim/socket/database/operations.ts
@@ -54,8 +54,10 @@ function isDbBlockProtected(blockId: string, blocksById: Record<string, DbBlockR
   const block = blocksById[blockId]
   if (!block) return false
   if (block.locked) return true
+  const visited = new Set<string>()
   let parentId = (block.data as Record<string, unknown> | null)?.parentId as string | undefined
-  while (parentId) {
+  while (parentId && !visited.has(parentId)) {
+    visited.add(parentId)
     if (blocksById[parentId]?.locked) return true
     parentId = (blocksById[parentId]?.data as Record<string, unknown> | null)?.parentId as
       | string
@@ -70,9 +72,12 @@ function isDbBlockProtected(blockId: string, blocksById: Record<string, DbBlockR
  */
 function findDbDescendants(containerId: string, allBlocks: DbBlockRef[]): string[] {
   const descendants: string[] = []
+  const visited = new Set<string>()
   const stack = [containerId]
   while (stack.length > 0) {
     const current = stack.pop()!
+    if (visited.has(current)) continue
+    visited.add(current)
     for (const b of allBlocks) {
       const pid = (b.data as Record<string, unknown> | null)?.parentId
       if (pid === current) {
diff --git a/apps/sim/stores/workflows/workflow/utils.ts b/apps/sim/stores/workflows/workflow/utils.ts
index ceca48adda7..65d9f3fb20c 100644
--- a/apps/sim/stores/workflows/workflow/utils.ts
+++ b/apps/sim/stores/workflows/workflow/utils.ts
@@ -143,9 +143,12 @@ export function findAllDescendantNodes(
   blocks: Record<string, BlockState>
 ): string[] {
   const descendants: string[] = []
+  const visited = new Set<string>()
   const stack = [containerId]
   while (stack.length > 0) {
     const current = stack.pop()!
+    if (visited.has(current)) continue
+    visited.add(current)
     for (const block of Object.values(blocks)) {
       if (block.data?.parentId === current) {
         descendants.push(block.id)
@@ -156,6 +159,25 @@ export function findAllDescendantNodes(
   return descendants
 }
 
+/**
+ * Checks if any ancestor container of a block is locked.
+ * Unlike {@link isBlockProtected}, this ignores the block's own locked state.
+ *
+ * @param blockId - The ID of the block to check
+ * @param blocks - Record of all blocks in the workflow
+ * @returns True if any ancestor is locked
+ */
+export function isAncestorProtected(blockId: string, blocks: Record<string, BlockState>): boolean {
+  const visited = new Set<string>()
+  let parentId = blocks[blockId]?.data?.parentId
+  while (parentId && !visited.has(parentId)) {
+    visited.add(parentId)
+    if (blocks[parentId]?.locked) return true
+    parentId = blocks[parentId]?.data?.parentId
+  }
+  return false
+}
+
 /**
  * Checks if a block is protected from editing/deletion.
  * A block is protected if it is locked or if any ancestor container is locked.
@@ -168,13 +190,7 @@ export function isBlockProtected(blockId: string, blocks: Record<string, BlockSt
   const block = blocks[blockId]
   if (!block) return false
   if (block.locked) return true
-
-  let parentId = block.data?.parentId
-  while (parentId) {
-    if (blocks[parentId]?.locked) return true
-    parentId = blocks[parentId]?.data?.parentId
-  }
-  return false
+  return isAncestorProtected(blockId, blocks)
 }
 
 /**