# BasicStudio Pro — build brief

This file is the specification for turning a clickable prototype into a real app. AI coding agents read AGENTS.md automatically; humans should read it too.

- Prototype file: `prototype.html` in this folder (the clickable reference — keep its look, copy and behaviour).
- Prototype page: https://ideaxapp.com/app/basicstudio-pro-tyc6g
- Target: Desktop (1440×900)
- Original idea: "a visual studio like ide for visual basic"

## Summary
BasicStudio Pro is a visual RAD IDE for Visual Basic that brings nostalgic classic Windows desktop development to modern browsers and desktops. Users can drag and drop classic UI controls onto forms, write event-driven code, inspect and edit properties in real time, and launch interactive simulations of their desktop applications.

## Who it is for
Developers, hobbyists, and retro-computing enthusiasts building or simulating classic Visual Basic applications.

## Features (v1)
- Users can design desktop forms with drag-and-drop classic UI components like CommandButtons, TextBoxes, Labels, CheckBoxes, and PictureBoxes.
- Users can switch seamlessly between the Visual Designer view and the Code Editor view.
- Users can edit control properties in real time via the Properties Inspector pane.
- Users can manage project assets and files within the Solution Explorer tree.
- Users can run interactive simulations of their compiled applications complete with live event handling.
- Users can view live diagnostic logs, compiler alerts, and global state watcher values in the bottom console.
- Users can trigger non-intrusive toast notifications for feedback on project actions.

## Screens
- **Main IDE Workspace** — Primary layout containing the menu bar, toolbar, toolbox sidebar, central designer/code editor, and metadata sidebars.
- **Visual Designer View** — WYSIWYG form layout canvas where users position and resize classic Windows UI widgets.
- **Code Editor View** — Syntax-highlighted code editing environment for writing event handlers and application logic in Basic.
- **Interactive Simulation Sandbox** — Popup simulation overlay running the compiled form where users interact with controls and trigger event scripts.

## Data model
- **Project**: id: string, name: string, filename: string, forms: Form[]
- **Form**: id: string, name: string, filename: string, caption: string, width: number, height: number, backColor: string, widgets: Widget[], code: string
- **Widget**: id: string, name: string, type: string, caption: string, text: string, top: number, left: number, width: number, height: number, value: boolean

## Rules and behaviour
- Selecting any widget on the form updates the Properties Inspector with its specific attributes.
- Modifying properties such as Width, Height, or Caption updates the selected widget or form immediately in the designer.
- Adding a new control from the Toolbox auto-generates a default event handler code stub in the code editor.
- Running a simulation clones the form state into an isolated runtime viewport with fully interactive controls.
- Empty username validations trigger an error message modal during simulation execution.

## Stack
Desktop app → Tauri (Rust shell + React/TypeScript UI)
Tauri provides a native desktop shell with low memory usage and high performance, perfect for a responsive IDE desktop application.
Alternatives: Electron; Web app with PWA install

## Milestones
1. Milestone 1: Reproduce the prototype's screens with real components and mock data, preserving the classic VB aesthetic and styling.
2. Milestone 2: Implement fully interactive drag-and-drop and resizing for widgets on the form designer canvas.
3. Milestone 3: Build the Properties Inspector to dynamically update selected widget attributes in real time.
4. Milestone 4: Implement the Code Editor view with basic syntax highlighting and event handler stub generation.
5. Milestone 5: Build the Simulation Sandbox execution engine to test form controls and evaluate event scripts.
6. Milestone 6: Implement Solution Explorer project file management and bottom diagnostic console logging.
7. Milestone 7: Add comprehensive unit tests and configure packaging for desktop distribution.

## Working agreements
- `prototype.html` is a single self-contained file with fake in-memory data. Use it as the reference for layout and interactions; do not ship its inline scripts as-is.
- Before coding, write a short numbered plan. Build milestone 1 first and stop for review.
- Keep a README with run and test instructions up to date. Add basic tests as you go.
- Accessibility floor: 16px+ text, 4.5:1 contrast, 44px touch targets, keyboard support.
- Ask only when something is genuinely ambiguous; otherwise make a sensible choice and note it in the README.

## Optional tool integrations (MCP)
If your agent supports MCP servers, these are the relevant ones (September 2026):
- Figma: official Figma MCP server (mcp.figma.com/mcp) — design context, code generation, write-to-canvas (beta).
- Webflow / Framer / Canva: vendor MCP servers or agent connectors for marketing pages and visuals.
- Images: Nano Banana 2 or GPT Image via API for placeholder-free assets.
Prefer the browser build first; add engines and design tools only when the brief calls for them.

## Kickoff prompt
Read AGENTS.md and prototype.html first. Create a short numbered plan, then build milestone 1 with Tauri and React/TypeScript. Preserve the prototype's look, copy, and behavior. Include a README with run instructions and basic tests, and ask questions only if something is genuinely ambiguous.

---
Prototype and brief released under CC0 via ideaxapp.com. Brief generated with Google Gemini (gemini-3.5-flash-lite); review before relying on it.