Mini Figma Clone

<instructions>
Build the best mini-Figma clone you are capable of building. Not a demo. Not an MVP. The most complete, most polished, most architecturally sound version you can produce in one shot.
</instructions>

<mindset>
Treat this as the project you'd submit if your reputation depended on it. If you're choosing between "good enough" and "actually correct," choose correct. If you're tempted to stub something, don't. If a feature would make the tool feel real and you have the capacity to implement it, implement it. Go as deep as you can. The ceiling is your actual limit, not an arbitrary scope.

Push on every axis that matters:
- Architectural depth (real scene graph, real command pattern, real spatial indexing, real dirty-rect rendering if it helps)
- Feature completeness (if Figma has it and it's reasonable to build, build it)
- Code quality (production-grade, no shortcuts, no god files, no `any`, no copy-paste)
- Performance (60fps under load, not under toy conditions)
- UX polish (cursor states, micro-interactions, empty states, error states, keyboard affordances)
- Visual design (looks like a tool professionals would use, not a tutorial output)
</mindset>

<freedom-of-stack>
Choose whatever stack gives the best result: React, Svelte, Solid, Vue, vanilla, Canvas 2D, WebGL, WebGPU, SVG, hybrid, whatever. Any libraries except pre-made design-tool frameworks (no tldraw, excalidraw, or kits that do the hard parts for you). Konva, PixiJS, Zustand, Valtio, Yjs, immer, etc. are fine if you justify them.

Organize the codebase as a real project: package.json, tsconfig, linter, formatter, folder structure that a senior engineer would approve. Monorepo if it makes sense. Workspaces if it makes sense. Tests if you have the budget for them.
</freedom-of-stack>

<baseline-features>
Non-negotiable. These are the floor, not the ceiling.

**Canvas**: infinite pan/zoom 10%-6400%, scaling grid, rulers, 60fps with 1000+ objects.

**Objects**: Frame (with clipping and optional auto-layout: direction, gap, padding, alignment), Rectangle, Ellipse, Line, Polygon/Star optional, Text, Image (paste/drop, base64 or blob URL). All support position, size, rotation, opacity, per-corner radius, fills (solid + linear/radial gradient), strokes (width, align, dash), effects (drop shadow, inner shadow, layer blur, background blur).

**Text**: in-place editing, Google Fonts with Inter/Roboto/Poppins/Playfair/JetBrains Mono/Space Grotesk preloaded, weight 100-900, size, line-height, letter-spacing, align, color, multi-line, text-on-path optional.

**Selection and transform**: click, shift-click, marquee, lasso optional. 8 resize handles + rotation handle. Shift constrains, alt from center, 15° rotation snap. Arrow nudge 1/10px. Smart guides with pink alignment lines and distance badges. Real local-axis rotation math (this is where most implementations break).

**Panels**: left layers tree (drag reorder/reparent, hide/lock/rename, search), right properties panel (Mixed state for multi-select, color picker with hex/HSL/recent/eyedropper if feasible), top toolbar with tool shortcuts.

**Shortcuts**: Cmd+Z / Cmd+Shift+Z (100+ step history via command pattern, not snapshots), Cmd+C/V/X/D, Cmd+A, Cmd+G / Cmd+Shift+G, Cmd+] / Cmd+[ / Cmd+Shift+] / Cmd+Shift+[, Delete, Cmd+0, Cmd+1, Cmd+/, Esc. All tool letters.

**Persistence**: auto-save to localStorage (debounced, diffed if possible), restore on load, multi-document support if you're ambitious, export/import JSON, export selection or frame as PNG + SVG.
</baseline-features>

<stretch-features>
Do as many as you can without breaking the baseline.

- Components / instances with overrides
- Variants
- Boolean operations (union, subtract, intersect, exclude)
- Pen tool with bezier editing
- Vector networks
- Auto-layout that actually resolves correctly (resize-to-fit, fill-container, hug-contents)
- Constraints on children (pin left/right/center, scale)
- Alignment and distribution tools
- Multiplayer via Yjs or CRDT (even local-only simulation counts)
- Plugin API sketch
- Comments / annotations
- Prototyping links between frames with a play mode
- Design tokens / styles (color styles, text styles)
- Version history beyond undo
</stretch-features>

<code-quality>
This is the real test. The app working is the floor.

- Deliberate separation: rendering / scene graph / state / input / geometry / persistence / UI shell / commands
- Command pattern for all mutations, enabling real undo/redo and future collab
- Geometry module: matrices, transforms, hit testing, AABB, rotated bounds, all unit-testable
- Spatial index (quadtree, R-tree, or grid) for hit testing and snapping, not O(n) scans
- Dirty-rect or layered rendering if Canvas; memoized components if React; fine-grained reactivity if Solid/Svelte
- Strict TypeScript, discriminated unions for node types, no `any`, no `as unknown as` escape hatches
- Input system that handles tool modes, modifiers, and gestures without tangled conditionals
- Event pipeline clean enough that adding a new tool is a small, local change
- Error boundaries, graceful degradation, no silent failures
- README that explains stack choice, architecture, trade-offs, what's cut and why, what you'd do next, performance notes, known bugs (be honest)
</code-quality>

<deliverable>
Full project tree. Every file. No "// rest of the owl" placeholders. No TODOs in core paths. If something is genuinely cut, document it honestly in the README. If you claim a feature works, it works.

One shot. No clarifying questions. Make every decision yourself and defend it in the README.

Go as far as you can go. This is a capability test. Show the ceiling.
</deliverable>

<important>
- `<title>` and the visible app heading/branding must be your model name (e.g. "Claude Opus 4.7" or "GPT-5")
- The app must run with a single command (e.g. `npm run dev`)
- Polished, production-quality - not a prototype
</important>