Build your own Illustrator.

# Build an original app inspired by Illustrator

You are an experienced product designer and full-stack engineer. Build a working, polished MVP from the brief below. Implement the core journeys end to end; a static mockup is not sufficient. Inspect the current environment, make sensible implementation decisions, and get started. Ask a question only if a missing answer genuinely blocks implementation.

Starting platform: Desktop. Explicit customized Product & audience and Tech stack requirements take precedence over this starting target.

## Product & audience
Build an original vector illustration app called Pathwork, inspired by Illustrator. It is for creating icons, diagrams, and simple scalable illustrations. The core journey is creating an artboard, drawing and adjusting shapes and paths, organizing layers, and exporting a clean SVG. Focus on a few accurate tools rather than an imitation of every professional feature.

## Design
Use an original browser editor with a neutral canvas, compact tool rail, artboard/layer navigator, and contextual style inspector. Show selected anchor points, direction handles, alignment guides, and a clear active tool. Use responsive panels and a keyboard-friendly object navigator.

## Features
1. Artboards and shapes: create multiple named artboards; add rectangles, ellipses, lines, and text; set fill, stroke, corner radius, and opacity; move, resize, rotate, and align objects.

2. Path editing: draw open or closed paths using a pen tool; add/delete anchors; move cubic Bézier control handles; switch between corner and smooth points. Keep editing coordinates independent of zoom.

3. Object organization: group/ungroup, reorder, hide, and lock objects. Support nesting and multi-selection with consistent transforms and an explicit z-order.

4. Typography and output: edit text with locally available licensed fonts. Export artboards as SVG and optionally PNG; document whether text stays as text and whether fonts need to be available to the recipient.

5. Projects and history: undo/redo grouped operations, autosave, and import/export an app-owned JSON scene. Limit imported SVG to a safe supported subset and reject active content.

## Tech stack
For a new browser project, use TypeScript with React and a serializable SVG scene model. Use established geometry utilities where they help, but keep path semantics under explicit control. SVG is the source of truth for rendering and exports. Isolate canvas interactions from document commands and persistence. Use IndexedDB for projects and raster assets. Do not promise Adobe .ai file compatibility or unlimited SVG import.

## Data & behavior
Document; Artboard {id, name, bounds, order}; Object {id, artboardId, parentId, type, transform, style, order, locked, visible}; Path {id, anchors, closed, fillRule}; TextNode {text, font, style}; Asset; HistoryCommand. Serialize path points in document units and preserve transforms, IDs, and ordering through save/reload.

Acceptance checks and scope:
Test a closed Bézier path, smooth/corner transitions, grouped transforms, undo after deleting an anchor, SVG reopen in a separate viewer, and exported dimensions. Reject SVG scripts, unsafe external references, and event handlers. Exclude full .ai interchange, complete font outlining, advanced mesh gradients, arbitrary boolean path operations, and print production features.

## Originality and assets
The named product is a reference for general workflows only. Use an original product name, visual identity, wording, layout, and assets. Do not copy proprietary code, branded logos, distinctive screens, private APIs, paid templates, or protected media. Use original or appropriately licensed sample data and assets. Build from this brief rather than scraping the reference service. Do not imply affiliation with the referenced company.

## Implementation quality
- Make every visible control work, with clear loading, success, empty, validation, and failure states. Remove controls for unimplemented features.
- Support the target platform and responsive or resizable layouts where appropriate. Use platform-appropriate accessibility semantics, labels, keyboard operation, visible focus, sufficient contrast, and reduced-motion preferences. Provide alternatives for drag-only interactions.
- Validate inputs at the relevant boundary. Treat imported or user-generated content as untrusted; render it safely. Confirm destructive actions or offer undo.
- Keep state changes reliable across navigation and reloads. Never silently lose edits. Handle persistence and network errors with an actionable message.
- Keep the scope realistic. Prioritize the complete primary journey. If a custom Features section differs from the baseline, update the data model, design, and acceptance checks to match it; explicit custom requirements take precedence over baseline assumptions.
- Provide realistic original sample content and a useful empty state. Keep sample data clearly separate from user-created data.

## Delivery and verification
1. Inspect the repository and outline the implementation in a few sentences.
2. Implement the app and connect its actual data flow. Continue until the primary journey works.
3. Run appropriate checks and test the acceptance cases above on the target platform. Verify responsive layouts and keyboard navigation when browser tools are available. For native projects, build with the available SDK and test an emulator or device when possible; report any missing native verification honestly. For games, verify the rules and gameplay loop, not only the menus.
4. Fix observed failures, then provide the runnable result, setup/run instructions, a brief explanation of what is implemented, and any specific configuration or verification limits.

This is a focused MVP. Do not add billing, AI services, or unrelated features unless explicitly requested in the brief. Start building now.