Add Hierarchical Display Patterns #19

Implement tree structure visualization and navigation patterns for parent-child node relationships.

Dependencies

• Create TextNode with Inline Editing #18

Related Issues

• Enhanced BaseNode with Hierarchical Circle Indicators + TextNode Implementation #4

Requirements

• Tree indentation: Visual nesting through CSS margin/padding based on depth level
• Parent-child relationships: Visual connection between parent nodes and their children
• Mock hierarchical data: Sample nested TextNode structure for testing
• Expand/collapse: Toggle visibility of child nodes (basic implementation)
• Breadcrumb navigation: Show node path from root to current selection
• Tree operations: Mock functions for add child, move node, delete node
• Depth limiting: Handle deep nesting gracefully (visual and performance)

Technical Implementation

• File Location: Create src/lib/components/NodeTree.svelte wrapper component
• Indentation: CSS margin-left: calc(var(--ns-spacing-4) * depth) for nesting levels
• Mock Data: Create hierarchical data structure with parent/child relationships
• Expand/Collapse: Use Svelte stores for collapsed state management
• Breadcrumbs: Create src/lib/components/NodeBreadcrumb.svelte component
• Tree Operations: Mock functions in mockTextService.ts for hierarchy management

Mock Data Structure

interface HierarchicalNode {
  id: string;
  content: string;
  parentId?: string;
  children: string[];
  depth: number;
  isCollapsed: boolean;
}

Component Integration

<\!-- NodeTree.svelte -->
{#each visibleNodes as node}
  <div style="margin-left: calc(var(--ns-spacing-4) * {node.depth})">
    <TextNode 
      nodeId={node.id}
      content={node.content}
      hasChildren={node.children.length > 0}
      on:toggleChildren={handleToggle}
    />
  </div>
{/each}

Acceptance Criteria

• Nested nodes display with proper indentation (increasing left margin)
• Parent nodes show ring indicator when they have children
• Expand/collapse functionality works correctly
• Tree structure is visually clear and navigable
• Mock data demonstrates realistic hierarchical content
• Breadcrumb navigation shows current node path
• Deep nesting (5+ levels) renders without layout issues