Page Structure Editor

A React component library for building and managing page structures with real-time collaboration.

Architecture

1. Package Structure

• package/: Main library code
  • src/
    • components/
      • Editor.tsx: Main container with data initialization
      • StructureTree.tsx: Tree view container with loading states
      • StructureNode.tsx: Individual node rendering with selection
      • ErrorBoundary.tsx: Error handling wrapper
    • store/
      • structureStore.ts: Zustand store for structure and selection management
      • shortcutsStore.ts: Store for copy/paste/delete operations
    • services/
      • structureService.ts: Service layer with error handling
      • database/
        • pageStructureDB.ts: Supabase database operations
    • hooks/
      • useStructure.ts: Custom hook for structure operations
      • useShortcuts.ts: Keyboard shortcuts handler
    • lib/
      • nodeOperations.ts: Tree manipulation utilities
      • componentFactory.ts: Component creation utilities
      • supabase.ts: Supabase client configuration
    • types/
      • structure.ts: TypeScript interfaces
      • errors.ts: Custom error types

2. Data Flow

• Editor (initializes data) →
• Store (manages state) →
• StructureTree (displays data) →
• StructureNode (renders nodes with selection)
• Shortcuts (handles operations) →
• NodeOperations (manipulates tree) →
• Store (updates state)

3. Features

• Real-time structure updates using Supabase
• Tree visualization with indentation
• Component name display
• Loading and error states
• Error boundary protection
• Separated database layer
• Type-safe data transformations
• Node selection with visual feedback
• Keyboard shortcuts:
  • Copy: Cmd/Ctrl + C
  • Paste: Cmd/Ctrl + V
  • Delete: Backspace
• Smart node selection after deletion

4. Database Schema

Table: pages

• id: number (primary key)
• page_structure: jsonb (stores PageStructure)
• created_at: timestamp
• updated_at: timestamp

5. Dependencies

• zustand: ^4.5.6
• @supabase/supabase-js: ^2.48.1

6. Example Integration

• example/: Next.js project showing usage
• Simple container with Editor component
• Environment variables for Supabase configuration

7. Future Components

• Right panel (w-2/3) reserved for future components
• Structure manipulation tools
• Preview components
• Property editors