Implement Tree Editor with visual preview and documentation updates

Tree Editor Features:
- Zustand store with immer middleware and zundo for undo/redo
- Form-based node editing (Decision, Action, Solution types)
- Visual tree preview with solution connection indicators
- NodePicker with type-grouped dropdown (Decisions/Actions/Solutions)
- SharedLinksMap for detecting nodes with multiple sources
- Modal component with scrollable body, fixed header/footer

New Components:
- TreeEditorLayout, TreeMetadataForm, NodeList, NodeEditorModal
- NodeFormDecision, NodeFormAction, NodeFormResolution
- DynamicArrayField, NodePicker
- TreePreviewPanel, TreePreviewNode

Documentation:
- Updated README.md status to Phase 2
- Added Tree Editor details to CURRENT-STATE.md
- Added modal/Zustand lessons to LESSONS-LEARNED.md
- Updated file structure in CLAUDE-SETUP.md
- Added Tree Editor progress to PROGRESS.md

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-01-28 03:00:00 -05:00
parent 088333174c
commit 4cee013733
26 changed files with 4073 additions and 91 deletions

View File

@@ -0,0 +1,44 @@
import { TreeMetadataForm } from './TreeMetadataForm'
import { NodeList } from './NodeList'
import { TreePreviewPanel } from '@/components/tree-preview/TreePreviewPanel'
import { cn } from '@/lib/utils'
interface TreeEditorLayoutProps {
isMobile?: boolean
}
export function TreeEditorLayout({ isMobile = false }: TreeEditorLayoutProps) {
return (
<div
className={cn(
'flex flex-1 overflow-hidden',
isMobile ? 'flex-col' : 'flex-row'
)}
>
{/* Left Panel - Form Editor */}
<div
className={cn(
'flex flex-col overflow-y-auto border-border bg-background',
isMobile ? 'h-full w-full border-b' : 'w-3/5 border-r'
)}
>
<div className="space-y-4 p-4">
<TreeMetadataForm />
<NodeList />
</div>
</div>
{/* Right Panel - Preview */}
<div
className={cn(
'flex-1 overflow-hidden bg-muted/30',
isMobile ? 'hidden' : 'block'
)}
>
<TreePreviewPanel />
</div>
</div>
)
}
export default TreeEditorLayout