improvement(docs): simplify expanded workflows to an interactive canvas

Author: waleedlatif1

apps/docs/DESIGN_SYSTEM.md

@@ -69,7 +69,7 @@ Disclosures use a 16px chevron, 8px label gap, a 38px desktop summary (44px touc
 | Open navigation rows | `components/ui/cards.tsx` |
 | CLI command grids | `components/ui/command-table.tsx` |
 | Canonical provider marks | `components/ui/integration-icon.tsx` |
-| Original workflow graph/configuration | `components/workflow-preview/workflow-preview.tsx`, `block-inspector.tsx` |
+| Original workflow graph | `components/workflow-preview/workflow-preview.tsx` |
 | Complete nested workflow results, copy, download | `components/workflow-preview/output-bundle.tsx` |
 | Real component/state gallery | `components/docs/gallery.tsx` |
 

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

@@ -57,7 +57,7 @@ export const DocsBlockNode = memo(function DocsBlockNode({
   id,
   data,
 }: NodeProps<DocsBlockNodeType>) {
-  const { selectBlock, renderDetails } = useContext(PreviewSelectionContext)
+  const selectBlock = useContext(PreviewSelectionContext)
   const {
     name,
     blockType,
@@ -181,7 +181,6 @@ export const DocsBlockNode = memo(function DocsBlockNode({
         }
         rows={rows}
       />
-      {renderDetails(id)}
     </m.div>
   )
 })

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

@@ -27,8 +27,7 @@ export const DocsContainerNode = memo(function DocsContainerNode({
   id,
   data,
 }: NodeProps<DocsContainerNodeType>) {
-  const { selectBlock, renderDetails } = useContext(PreviewSelectionContext)
-  const details = renderDetails(id)
+  const selectBlock = useContext(PreviewSelectionContext)
   const subflowData: SubflowNodeData = {
     kind: data.blockType === 'parallel' ? 'parallel' : 'loop',
     name: data.name,
@@ -40,7 +39,7 @@ export const DocsContainerNode = memo(function DocsContainerNode({
   }
 
   return (
-    <div className={cn('relative size-full', data.isDimmed && DIMMED_PREVIEW_CLASS)}>
+    <div className={cn('size-full', data.isDimmed && DIMMED_PREVIEW_CLASS)}>
       <SubflowNodeView
         id={id}
         data={subflowData}
@@ -49,11 +48,8 @@ export const DocsContainerNode = memo(function DocsContainerNode({
         isFocused={false}
         nestingLevel={0}
         canEditWorkflow={false}
-        onSelect={() => selectBlock?.(id)}
+        onSelect={selectBlock ? () => selectBlock(id) : undefined}
       />
-      {details && (
-        <div className='absolute inset-x-3 top-12 bottom-3 z-10 overflow-y-auto'>{details}</div>
-      )}
     </div>
   )
 })

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

@@ -1,12 +1,7 @@
 'use client'
 
-import { createContext, type ReactNode } from 'react'
+import { createContext } from 'react'
 
-interface PreviewSelection {
-  selectBlock?: (blockId: string) => void
-  renderDetails: (blockId: string) => ReactNode
-}
-
-export const PreviewSelectionContext = createContext<PreviewSelection>({
-  renderDetails: () => null,
-})
+export const PreviewSelectionContext = createContext<((blockId: string) => void) | undefined>(
+  undefined
+)

apps/docs/components/workflow-preview/preview-selection-context.ts

@@ -90,8 +90,6 @@ export const DIMMED_PREVIEW_CLASS =
 export interface HighlightOptions {
   highlightBlock?: string
   highlightEdge?: string
-  /** Ring one block (selection) without dimming the rest. */
-  selectedBlock?: string
 }
 
 /** Semantic container depth used for z-order while docs positions stay flattened. */
@@ -124,7 +122,7 @@ export function toReactFlowElements(
   animate = false,
   highlight: HighlightOptions = {}
 ): { nodes: PreviewNode[]; edges: PreviewFlowEdge[] } {
-  const { highlightBlock, highlightEdge, selectedBlock } = highlight
+  const { highlightBlock, highlightEdge } = highlight
   const hasHighlight = Boolean(highlightBlock || highlightEdge)
   const blockIndexMap = new Map(workflow.blocks.map((b, i) => [b.id, i]))
 
@@ -146,14 +144,7 @@ export function toReactFlowElements(
     const commonNode = {
       id: block.id,
       position,
-      zIndex:
-        selectedBlock === block.id
-          ? CONTAINER_CHILD_Z_BASE + 10
-          : isContainer
-            ? nestingDepth
-            : block.parentId
-              ? CONTAINER_CHILD_Z_BASE
-              : BLOCK_Z_BASE,
+      zIndex: isContainer ? nestingDepth : block.parentId ? CONTAINER_CHILD_Z_BASE : BLOCK_Z_BASE,
       ...(block.size ? { style: { width: block.size.width, height: block.size.height } } : {}),
       draggable: true,
       selectable: false,
@@ -175,8 +166,8 @@ export function toReactFlowElements(
         parentId: block.parentId,
         index,
         animate,
-        isHighlighted: highlightBlock === block.id || selectedBlock === block.id,
-        isDimmed: hasHighlight && highlightBlock !== block.id && selectedBlock !== block.id,
+        isHighlighted: highlightBlock === block.id,
+        isDimmed: hasHighlight && highlightBlock !== block.id,
       }
       return {
         ...commonNode,
@@ -202,8 +193,8 @@ export function toReactFlowElements(
       parentId: block.parentId,
       index,
       animate,
-      isHighlighted: highlightBlock === block.id || selectedBlock === block.id,
-      isDimmed: hasHighlight && highlightBlock !== block.id && selectedBlock !== block.id,
+      isHighlighted: highlightBlock === block.id,
+      isDimmed: hasHighlight && highlightBlock !== block.id,
     }
     return {
       ...commonNode,