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 2 added the testing subsystem, complexity analysis, file management, and dashboard.
Package Diagram - Module Structure
Detailed package organization with dependencies. Sprint 2 added testing, file management, and example modules.
Layer Diagram - Architectural Layers
Clear separation of concerns across layers. Sprint 2 added Testing and File Management cross-cutting concerns.
Dependency Graph - Module Dependencies
Internal module dependencies and import relationships. Sprint 2 shows the expanded dependency graph with testing and file management modules.
Technology Stack Diagram
External dependencies and their roles. Sprint 2 added testing tools.
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 # Auth API routes
│ │ └── files/
│ │ ├── index.ts # GET list, POST create
│ │ ├── [fileId].ts # GET download, PUT save, PATCH rename, DELETE
│ │ └── [fileId]/
│ │ └── versions/
│ │ ├── index.ts # GET version list
│ │ └── [versionId].ts # GET specific version
│ │
│ ├── 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
│ │ └── Counter.tsx # Demo component
│ │
│ ├── store/ # State management
│ │ ├── machineStore.ts # Machine state store
│ │ └── codegen.ts # Code generation
│ │
│ ├── engine/ # Core TM logic
│ │ ├── types.ts # Type definitions (Variant, multi-tape)
│ │ ├── parser.ts # DSL parser
│ │ ├── simulator.ts # TM simulator + complexity
│ │ ├── marker.ts # Test runner engine
│ │ ├── testParser.ts # Test DSL parser
│ │ └── tmUtils.ts # Variant/transition utilities
│ │
│ ├── 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
│ │
│ └── css/ # Styles
│ └── retro.css # Retro theme
│
├── public/ # Static assets
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript config
└── package.json # Dependencies