Can I vibecode Eraser?

text
Build a deliberately narrow, personal substitute for Eraser. Do not attempt to build a full clone or an enterprise-grade collaborative diagramming tool. You must use exactly this technology stack: React, TypeScript, Vite as the build tool, and IndexedDB for local data persistence. Do not introduce any alternative frameworks or state management libraries outside of the standard React ecosystem.

The primary objective is to build a browser-based technical diagram editor optimized for speed and clarity. The editor must support dragging and dropping nodes, resizing elements, connecting nodes with intelligent routing lines (e.g., orthogonal or curved arrows), keyboard shortcuts for common actions (copy, paste, undo, redo, delete), automatic saving of the canvas state, and the ability to export the final diagram as either an SVG or a high-resolution PNG. 

Start the project from an empty folder and deliver a complete, functioning application. The default mode must be single-user and strictly private. All user data, including the diagram state and history, must be stored locally within the browser using IndexedDB. Do not add any analytics, telemetry, advertising trackers, or third-party user account systems. Any required configuration variables or secrets (if applicable) must be stored in a `.env` file, accompanied by a `.env.example`, and never committed to version control. 

Populate the application with realistic, clearly labeled sample diagrams (e.g., a simple system architecture or flowchart) that the user can easily modify or delete. Implement the smallest, most polished interface necessary to complete the core diagramming loop end-to-end. The interface must include explicit, well-designed states for an empty workspace, loading data, input validation errors, success confirmations, and critical failures. Implement a feature to export the raw JSON state of the canvas and import it later, ensuring the user's data is never permanently trapped in the application.

Ensure the user interface is accessible, featuring logical keyboard navigation, ARIA labels where appropriate, visible focus states, and sensible contrast ratios. Validate any untrusted input, such as uploaded JSON files, and ensure private file contents are never logged to the console. 

Deliberately exclude the paid-product advantages of Eraser: high-fidelity import/export to proprietary formats, presentation modes, enterprise access controls, real-time multiplayer cursors, and collaborative commenting features. Do not fake integrations, network effects, or proprietary model quality. Write focused unit tests for the core data model (e.g., shape coordinates and connection logic). Add one end-to-end smoke test that proves the canvas interactions work correctly. Provide a detailed README including setup instructions, architectural choices, data location, and backup methods. Include package.json scripts for install, development, test, build, and a production-style preview. Run all tests and build before finishing, actively fixing any errors that occur.