Development View
The Development View describes the system's software organization, including module structure, package dependencies, and layering.
Component Diagram - System Architecture
High-level component organization and dependencies. Sprint 3 adds compiler diagnostics, contributor management, and Yjs-based real-time collaboration.
Package Diagram - Module Structure
Detailed package organization with dependencies, including the collaboration client and server plugin.
Layer Diagram - Architectural Layers
Separation of the browser UI, domain logic, server APIs, and external persistence/collaboration services.
Dependency Graph - Module Dependencies
Key module dependencies for machine editing, compilation, persistence, and collaboration.
Technology Stack Diagram
External dependencies and their roles in the Sprint 3 application.
File Structure
fla--/
├── src/
│ ├── app.tsx # Root application component
│ ├── entry-client.tsx # Client entry point
│ ├── entry-server.tsx # Server entry point
│ ├── authStore.ts # Global auth state
│ │
│ ├── routes/ # File-based routing
│ │ ├── index.tsx # Dashboard (document gallery)
│ │ ├── index.css # Dashboard styles
│ │ ├── editor.tsx # TM Editor page
│ │ ├── editor/
│ │ │ └── [name].tsx # Example template editor
│ │ ├── documents/
│ │ │ └── [fileId].tsx # Saved document editor
│ │ ├── login.tsx # Login page
│ │ ├── about.tsx # About page
│ │ ├── [...404].tsx # 404 handler
│ │ └── api/
│ │ ├── auth/[...all].ts
│ │ ├── files/ # File, version, and contributor APIs
│ │ └── users/search.ts
│ │
│ ├── components/ # Reusable UI components
│ │ ├── DiagramView.tsx # Canvas diagram editor
│ │ ├── CodeEditor.tsx # Code panel container
│ │ ├── Editor.tsx # Main editor orchestrator
│ │ ├── Toolbar.tsx # Simulation controls
│ │ ├── tmParser.tsx # CodeMirror wrapper
│ │ ├── TransitionPanel.tsx # Transition form
│ │ ├── TransitionForm.tsx # Transition edit form
│ │ ├── TestPanel.tsx # Test DSL editor + results
│ │ ├── TestModal.tsx # Test case management modal
│ │ ├── TapeVisualizer.tsx # Multi-tape visualization
│ │ ├── TapeViewer.tsx # Single tape display
│ │ ├── ComplexityPanel.tsx # Complexity analysis panel
│ │ ├── ComplexityPlot.tsx # Complexity chart
│ │ ├── ComplexityDisplay.tsx # Complexity metrics display
│ │ ├── MachineThumbnail.tsx # Document thumbnail preview
│ │ ├── ComputationTree.tsx # Nondeterministic computation tree
│ │ ├── InviteModal.tsx # Contributor management
│ │ ├── GBAFilter.tsx # Global UI filter
│ │ └── Counter.tsx # Demo component
│ │
│ ├── store/ # State management
│ │ ├── machineStore.ts # Machine state store
│ │ └── codegen.ts # Code generation
│ │
│ ├── engine/ # Core TM logic
│ │ ├── types.ts # Machine and configuration types
│ │ ├── compiler/ # Parser, AST, and semantic analyzer
│ │ ├── computational.ts # Computational machine validation
│ │ ├── simulator.ts # TM simulator + complexity
│ │ ├── marker.ts # Test runner engine
│ │ ├── testParser.ts # Test DSL parser
│ │ └── tmUtils.ts # Variant/transition utilities
│ ├── collab/ # Yjs session and collaborator colors
│ ├── server/plugins/ # Nitro y-websocket plugin
│ │
│ ├── examples/ # Example machine definitions
│ │ ├── 0n1n.json # 0^n1^n example
│ │ └── multitape-copy.json # Multi-tape copy example
│ │
│ ├── lib/ # Utilities
│ │ ├── auth.ts # Server auth config
│ │ ├── auth-client.ts # Client auth
│ │ ├── db.ts # PostgreSQL connection pool
│ │ └── examples.ts # Example JSON loader
│ │
│ ├── styles/ # Global styles and theme
│ └── pages/ # Non-route page assets
│
├── public/ # Static assets
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript config
└── package.json # Dependencies