improvement(ui): modal style standardization, select drop improvement, duplication selection fixes (#2871)

* improvement(ui): modal style standardization, select drop improvement

* consolidation, fixed canvas issues

* more

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -48,7 +48,7 @@ export const ActionBar = memo(
       collaborativeBatchToggleBlockEnabled,
       collaborativeBatchToggleBlockHandles,
     } = useCollaborativeWorkflow()
-    const { activeWorkflowId } = useWorkflowRegistry()
+    const { activeWorkflowId, setPendingSelection } = useWorkflowRegistry()
     const blocks = useWorkflowStore((state) => state.blocks)
     const subBlockStore = useSubBlockStore()
 
@@ -68,13 +68,15 @@ export const ActionBar = memo(
         subBlockValues,
       })
 
+      setPendingSelection([newId])
       collaborativeBatchAddBlocks([block], [], {}, {}, { [newId]: filteredValues })
     }, [
       blockId,
       blocks,
       activeWorkflowId,
       subBlockStore.workflowValues,
       collaborativeBatchAddBlocks,
+      setPendingSelection,
     ])
 
     /**

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx

@@ -3,13 +3,11 @@ import ReactMarkdown from 'react-markdown'
 import type { NodeProps } from 'reactflow'
 import remarkGfm from 'remark-gfm'
 import { cn } from '@/lib/core/utils/cn'
+import { BLOCK_DIMENSIONS } from '@/lib/workflows/blocks/block-dimensions'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar'
 import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
-import {
-  BLOCK_DIMENSIONS,
-  useBlockDimensions,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions'
+import { useBlockDimensions } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import type { WorkflowBlockProps } from '../workflow-block/types'
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx

@@ -11,8 +11,6 @@ import {
   ButtonGroupItem,
   Checkbox,
   Code,
-  Combobox,
-  type ComboboxOption,
   Input,
   Label,
   TagInput,
@@ -271,14 +269,6 @@ export function A2aDeploy({
     onNeedsRepublishChange?.(!!needsRepublish)
   }, [needsRepublish, onNeedsRepublishChange])
 
-  const authSchemeOptions: ComboboxOption[] = useMemo(
-    () => [
-      { label: 'API Key', value: 'apiKey' },
-      { label: 'None (Public)', value: 'none' },
-    ],
-    []
-  )
-
   const canSave = name.trim().length > 0 && description.trim().length > 0
   useEffect(() => {
     onCanSaveChange?.(canSave)
@@ -758,17 +748,18 @@ console.log(data);`
         />
       </div>
 
-      {/* Authentication */}
+      {/* Access */}
       <div>
         <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
-          Authentication
+          Access
         </Label>
-        <Combobox
-          options={authSchemeOptions}
+        <ButtonGroup
           value={authScheme}
-          onChange={(v) => setAuthScheme(v as AuthScheme)}
-          placeholder='Select authentication...'
-        />
+          onValueChange={(value) => setAuthScheme(value as AuthScheme)}
+        >
+          <ButtonGroupItem value='apiKey'>API Key</ButtonGroupItem>
+          <ButtonGroupItem value='none'>Public</ButtonGroupItem>
+        </ButtonGroup>
         <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
           {authScheme === 'none'
             ? 'Anyone can call this agent without authentication'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx

@@ -424,7 +424,7 @@ export function ChatDeploy({
             >
               Cancel
             </Button>
-            <Button variant='default' onClick={handleDelete} disabled={isDeleting}>
+            <Button variant='destructive' onClick={handleDelete} disabled={isDeleting}>
               {isDeleting ? 'Deleting...' : 'Delete'}
             </Button>
           </ModalFooter>

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

@@ -7,6 +7,7 @@ import { cn } from '@/lib/core/utils/cn'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { createMcpToolId } from '@/lib/mcp/utils'
 import { getProviderIdFromServiceId } from '@/lib/oauth'
+import { BLOCK_DIMENSIONS, HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 import {
   buildCanonicalIndex,
   evaluateSubBlockCondition,
@@ -28,11 +29,7 @@ import {
   shouldSkipBlockRender,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils'
 import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
-import {
-  BLOCK_DIMENSIONS,
-  HANDLE_POSITIONS,
-  useBlockDimensions,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions'
+import { useBlockDimensions } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions'
 import { SELECTOR_TYPES_HYDRATION_REQUIRED, type SubBlockConfig } from '@/blocks/types'
 import { getDependsOnFields } from '@/blocks/utils'
 import { useKnowledgeBase } from '@/hooks/kb/use-knowledge'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts

@@ -1,18 +1,14 @@
-export {
-  clearDragHighlights,
-  computeClampedPositionUpdates,
-  computeParentUpdateEntries,
-  getClampedPositionForNode,
-  isInEditableElement,
-  resolveParentChildSelectionConflicts,
-  validateTriggerPaste,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers'
 export { useFloatBoundarySync, useFloatDrag, useFloatResize } from './float'
+export { useAccessibleReferencePrefixes } from './use-accessible-reference-prefixes'
 export { useAutoLayout } from './use-auto-layout'
-export { BLOCK_DIMENSIONS, useBlockDimensions } from './use-block-dimensions'
+export { useBlockDimensions } from './use-block-dimensions'
+export { useBlockOutputFields } from './use-block-output-fields'
 export { useBlockVisual } from './use-block-visual'
+export { useCanvasContextMenu } from './use-canvas-context-menu'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
-export { calculateContainerDimensions, useNodeUtilities } from './use-node-utilities'
+export { useNodeUtilities } from './use-node-utilities'
 export { usePreventZoom } from './use-prevent-zoom'
 export { useScrollManagement } from './use-scroll-management'
+export { useShiftSelectionLock } from './use-shift-selection-lock'
+export { useWand, type WandConfig } from './use-wand'
 export { useWorkflowExecution } from './use-workflow-execution'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions.ts

@@ -2,9 +2,6 @@ import { useEffect, useRef } from 'react'
 import { useUpdateNodeInternals } from 'reactflow'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
-// Re-export for backwards compatibility
-export { BLOCK_DIMENSIONS, HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
-
 interface BlockDimensions {
   width: number
   height: number

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts

@@ -2,107 +2,15 @@ import { useCallback } from 'react'
 import { createLogger } from '@sim/logger'
 import { useReactFlow } from 'reactflow'
 import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS } from '@/lib/workflows/blocks/block-dimensions'
-import { getBlock } from '@/blocks/registry'
+import {
+  calculateContainerDimensions,
+  clampPositionToContainer,
+  estimateBlockDimensions,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/utils/node-position-utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const logger = createLogger('NodeUtilities')
 
-/**
- * Estimates block dimensions based on block type.
- * Uses subblock count to estimate height for blocks that haven't been measured yet.
- *
- * @param blockType - The type of block (e.g., 'condition', 'agent')
- * @returns Estimated width and height for the block
- */
-export function estimateBlockDimensions(blockType: string): { width: number; height: number } {
-  const blockConfig = getBlock(blockType)
-  const subBlockCount = blockConfig?.subBlocks?.length ?? 3
-  // Many subblocks are conditionally rendered (advanced mode, provider-specific, etc.)
-  // Use roughly half the config count as a reasonable estimate, capped between 3-7 rows
-  const estimatedRows = Math.max(3, Math.min(Math.ceil(subBlockCount / 2), 7))
-  const hasErrorRow = blockType !== 'starter' && blockType !== 'response' ? 1 : 0
-
-  const height =
-    BLOCK_DIMENSIONS.HEADER_HEIGHT +
-    BLOCK_DIMENSIONS.WORKFLOW_CONTENT_PADDING +
-    (estimatedRows + hasErrorRow) * BLOCK_DIMENSIONS.WORKFLOW_ROW_HEIGHT
-
-  return {
-    width: BLOCK_DIMENSIONS.FIXED_WIDTH,
-    height: Math.max(height, BLOCK_DIMENSIONS.MIN_HEIGHT),
-  }
-}
-
-/**
- * Clamps a position to keep a block fully inside a container's content area.
- * Content area starts after the header and padding, and ends before the right/bottom padding.
- *
- * @param position - Raw position relative to container origin
- * @param containerDimensions - Container width and height
- * @param blockDimensions - Block width and height
- * @returns Clamped position that keeps block inside content area
- */
-export function clampPositionToContainer(
-  position: { x: number; y: number },
-  containerDimensions: { width: number; height: number },
-  blockDimensions: { width: number; height: number }
-): { x: number; y: number } {
-  const { width: containerWidth, height: containerHeight } = containerDimensions
-  const { width: blockWidth, height: blockHeight } = blockDimensions
-
-  // Content area bounds (where blocks can be placed)
-  const minX = CONTAINER_DIMENSIONS.LEFT_PADDING
-  const minY = CONTAINER_DIMENSIONS.HEADER_HEIGHT + CONTAINER_DIMENSIONS.TOP_PADDING
-  const maxX = containerWidth - CONTAINER_DIMENSIONS.RIGHT_PADDING - blockWidth
-  const maxY = containerHeight - CONTAINER_DIMENSIONS.BOTTOM_PADDING - blockHeight
-
-  return {
-    x: Math.max(minX, Math.min(position.x, Math.max(minX, maxX))),
-    y: Math.max(minY, Math.min(position.y, Math.max(minY, maxY))),
-  }
-}
-
-/**
- * Calculates container dimensions based on child block positions.
- * Single source of truth for container sizing - ensures consistency between
- * live drag updates and final dimension calculations.
- *
- * @param childPositions - Array of child positions with their dimensions
- * @returns Calculated width and height for the container
- */
-export function calculateContainerDimensions(
-  childPositions: Array<{ x: number; y: number; width: number; height: number }>
-): { width: number; height: number } {
-  if (childPositions.length === 0) {
-    return {
-      width: CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
-      height: CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
-    }
-  }
-
-  let maxRight = 0
-  let maxBottom = 0
-
-  for (const child of childPositions) {
-    maxRight = Math.max(maxRight, child.x + child.width)
-    maxBottom = Math.max(maxBottom, child.y + child.height)
-  }
-
-  const width = Math.max(
-    CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
-    CONTAINER_DIMENSIONS.LEFT_PADDING + maxRight + CONTAINER_DIMENSIONS.RIGHT_PADDING
-  )
-  const height = Math.max(
-    CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
-    CONTAINER_DIMENSIONS.HEADER_HEIGHT +
-      CONTAINER_DIMENSIONS.TOP_PADDING +
-      maxBottom +
-      CONTAINER_DIMENSIONS.BOTTOM_PADDING
-  )
-
-  return { width, height }
-}
-
 /**
  * Hook providing utilities for node position, hierarchy, and dimension calculations
  */
@@ -138,15 +46,13 @@ export function useNodeUtilities(blocks: Record<string, any>) {
         }
       }
 
-      // Prefer deterministic height published by the block component; fallback to estimate
       if (block.height) {
         return {
           width: BLOCK_DIMENSIONS.FIXED_WIDTH,
           height: Math.max(block.height, BLOCK_DIMENSIONS.MIN_HEIGHT),
         }
       }
 
-      // Use shared estimation utility for blocks without measured height
       return estimateBlockDimensions(block.type)
     },
     [blocks, isContainerType]
@@ -230,8 +136,6 @@ export function useNodeUtilities(blocks: Record<string, any>) {
 
       const parentPos = getNodeAbsolutePosition(parentId)
 
-      // Child positions are stored relative to the content area (after header and padding)
-      // Add these offsets when calculating absolute position
       const headerHeight = 50
       const leftPadding = 16
       const topPadding = 16
@@ -314,7 +218,6 @@ export function useNodeUtilities(blocks: Record<string, any>) {
         })
         .map((n) => ({
           loopId: n.id,
-          // Return absolute position so callers can compute relative placement correctly
           loopPosition: getNodeAbsolutePosition(n.id),
           dimensions: {
             width: n.data?.width || CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
@@ -449,7 +352,6 @@ export function useNodeUtilities(blocks: Record<string, any>) {
         return absPos
       }
 
-      // Use known defaults per node type without type casting
       const isSubflow = node.type === 'subflowNode'
       const width = isSubflow
         ? typeof node.data?.width === 'number'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-shift-selection-lock.ts

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useState } from 'react'
+
+interface UseShiftSelectionLockProps {
+  isHandMode: boolean
+}
+
+interface UseShiftSelectionLockResult {
+  /** Whether a shift-selection is currently active (locked in until mouseup) */
+  isShiftSelecting: boolean
+  /** Handler to attach to canvas mousedown */
+  handleCanvasMouseDown: (event: React.MouseEvent) => void
+  /** Computed ReactFlow props based on current selection state */
+  selectionProps: {
+    selectionOnDrag: boolean
+    panOnDrag: [number, number] | false
+    selectionKeyCode: string | null
+  }
+}
+
+/**
+ * Locks shift-selection mode from mousedown to mouseup.
+ * Prevents selection from canceling when shift is released mid-drag.
+ */
+export function useShiftSelectionLock({
+  isHandMode,
+}: UseShiftSelectionLockProps): UseShiftSelectionLockResult {
+  const [isShiftSelecting, setIsShiftSelecting] = useState(false)
+
+  const handleCanvasMouseDown = useCallback(
+    (event: React.MouseEvent) => {
+      if (!event.shiftKey) return
+
+      const target = event.target as HTMLElement | null
+      const isPaneTarget = Boolean(target?.closest('.react-flow__pane, .react-flow__selectionpane'))
+
+      if (isPaneTarget && isHandMode) {
+        setIsShiftSelecting(true)
+      }
+
+      if (isPaneTarget) {
+        event.preventDefault()
+        window.getSelection()?.removeAllRanges()
+      }
+    },
+    [isHandMode]
+  )
+
+  useEffect(() => {
+    if (!isShiftSelecting) return
+
+    const handleMouseUp = () => setIsShiftSelecting(false)
+    window.addEventListener('mouseup', handleMouseUp)
+    return () => window.removeEventListener('mouseup', handleMouseUp)
+  }, [isShiftSelecting])
+
+  const selectionProps = {
+    selectionOnDrag: !isHandMode || isShiftSelecting,
+    panOnDrag: (isHandMode && !isShiftSelecting ? [0, 1] : false) as [number, number] | false,
+    selectionKeyCode: isShiftSelecting ? null : 'Shift',
+  }
+
+  return { isShiftSelecting, handleCanvasMouseDown, selectionProps }
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/index.ts

@@ -1,3 +1,5 @@
 export * from './auto-layout-utils'
 export * from './block-ring-utils'
+export * from './node-position-utils'
+export * from './workflow-canvas-helpers'
 export * from './workflow-execution-utils'