docs: use Starlight FileTree component for component hierarchy sections

Convert ASCII tree diagrams to Starlight's <FileTree> component in
architecture-overview and components reference pages (.md → .mdx).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: d34dman

…t/docs/concepts/architecture-overview.md …/docs/concepts/architecture-overview.mdxapps/docs/src/content/docs/concepts/architecture-overview.md renamed to apps/docs/src/content/docs/concepts/architecture-overview.mdx apps/docs/src/content/docs/concepts/architecture-overview.md renamed to apps/docs/src/content/docs/concepts/architecture-overview.mdx

@@ -67,29 +67,33 @@ Import from the most specific module possible to minimize bundle size.
 
 When you mount `mountFlowDropApp()`, this is the component tree:
 
-```
-App
-├── Navbar
-│   ├── Logo
-│   ├── WorkflowName (editable)
-│   ├── Save / Export buttons
-│   ├── Custom NavbarActions
-│   └── ThemeToggle / Settings
-├── NodeSidebar
-│   ├── Search
-│   └── CategoryGroups
-│       └── NodeCards (draggable)
-├── WorkflowEditor (@xyflow/svelte canvas)
-│   ├── Nodes (WorkflowNode, SimpleNode, GatewayNode, etc.)
-│   │   └── Ports (input/output handles)
-│   ├── Edges (styled by category)
-│   └── ConnectionLine
-├── ConfigPanel (right side, on node click)
-│   ├── NodeHeader (name, type, icon)
-│   └── SchemaForm (generated from configSchema)
-│       └── FormFields (text, select, code, template, etc.)
-└── ToastContainer
-```
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- App
+  - Navbar
+    - Logo
+    - WorkflowName (editable)
+    - Save / Export buttons
+    - Custom NavbarActions
+    - ThemeToggle / Settings
+  - NodeSidebar
+    - Search
+    - CategoryGroups
+      - NodeCards (draggable)
+  - WorkflowEditor (@xyflow/svelte canvas)
+    - Nodes (WorkflowNode, SimpleNode, GatewayNode, etc.)
+      - Ports (input/output handles)
+    - Edges (styled by category)
+    - ConnectionLine
+  - ConfigPanel (right side, on node click)
+    - NodeHeader (name, type, icon)
+    - SchemaForm (generated from configSchema)
+      - FormFields (text, select, code, template, etc.)
+  - ToastContainer
+
+</FileTree>
 
 `mountWorkflowEditor()` mounts just the canvas — no navbar, no sidebar.
 

…src/content/docs/reference/components.md …rc/content/docs/reference/components.mdxapps/docs/src/content/docs/reference/components.md renamed to apps/docs/src/content/docs/reference/components.mdx apps/docs/src/content/docs/reference/components.md renamed to apps/docs/src/content/docs/reference/components.mdx

@@ -332,14 +332,18 @@ const app = await mountFlowDropApp(document.getElementById('editor'), {
 
 ## Component Hierarchy
 
-```
-App
-├── Navbar (Logo, workflow name, save/export, custom actions)
-├── NodeSidebar (search, category groups, draggable node cards)
-├── WorkflowEditor (SvelteFlow canvas)
-│   └── UniversalNode
-│       ├── NodeStatusOverlay
-│       └── [Node Component] (WorkflowNode, SimpleNode, etc.)
-└── ConfigSidebar
-    └── ConfigForm (JSON Schema form with template variables)
-```
+import { FileTree } from '@astrojs/starlight/components';
+
+<FileTree>
+
+- App
+  - Navbar (Logo, workflow name, save/export, custom actions)
+  - NodeSidebar (search, category groups, draggable node cards)
+  - WorkflowEditor (SvelteFlow canvas)
+    - UniversalNode
+      - NodeStatusOverlay
+      - [Node Component] (WorkflowNode, SimpleNode, etc.)
+  - ConfigSidebar
+    - ConfigForm (JSON Schema form with template variables)
+
+</FileTree>