Build your own vector canvas editor (a personal Figma)

Build a single-page vector canvas editor scaffold. Requirements:
- Svelte 5 with Vite: npm create vite@latest canvas-editor -- --template svelte, dev server on localhost:5173
- src/lib/document.js exports createDocument() returning { id, name, schemaVersion: 1, shapes: [] }, where a shape is { id, type: 'rect' | 'ellipse' | 'text', x, y, width, height, fill, stroke, strokeWidth, cornerRadius }
- src/lib/render.js exports render(ctx, doc) that clears the canvas and draws shapes in array order
- Seed the app with 3 rects, including one frame-sized backdrop, and 1 text node, so the first paint shows 4 shapes
- Full-window canvas element with devicePixelRatio scaling so edges stay crisp
- No backend, no router, no state library; module-level state is fine
- No secrets are needed today; if any key ever appears it goes in .env and stays uncommitted
- Out of scope: pan, zoom, undo, and any networking; do not add a sync layer
Pain warning: canvas text metrics vary by platform, so fix text nodes at fontSize 16 with the default font for now.

Add selection, move and resize to the canvas editor. Requirements:
- Reuse src/lib/document.js shapes and src/lib/render.js; track the selection in a new src/lib/editorState.js
- Click selects the topmost shape whose bounds contain the pointer; clicking empty canvas deselects; Escape deselects
- Dragging the body moves the selected shape; 8 square handles (corner handles 8px, edge handles 6px) resize it with a minimum size of 8x8
- Holding Shift while dragging a corner handle preserves aspect ratio
- Draw outlines and handles in a new src/lib/overlay.js so render.js stays a pure function
- Cursor feedback: move cursor over the body, directional resize cursors over each handle
- Out of scope: multi-select, grouping, snapping, and rotation; do not add them
Verify against a rect, an ellipse and a text node; if resize misbehaves for one type, report it rather than silently special-casing.

Add a properties panel bound to the selected shape. Requirements:
- A right-side panel 240px wide with fill (color input), stroke (color input), strokeWidth (number input, min 0) and cornerRadius (number input, min 0)
- Edits mutate the shape immediately and trigger render; no Apply button
- With nothing selected, show the document name and shape count instead of controls
- Text nodes get a text-content textarea alongside their fill control
- Show cornerRadius for rects only; hide the field for ellipses and text
- Store all colors as hex strings in the document so future JSON export round-trips cleanly
- Out of scope: gradients, opacity, typography settings, saved style libraries
Known friction: number inputs fire events faster than renders want; batch updates with requestAnimationFrame if typing feels laggy.

Add a layers panel with drag-reorder. Requirements:
- New LayersPanel.svelte docked left, 200px wide, one row per shape showing the type initial and a shortened shape.id
- Rows render in the same order as document.shapes; the top row paints last, matching canvas stacking
- Reorder with HTML5 drag-and-drop or pointer events; on drop, splice document.shapes to match the list and call render
- Clicking a row selects that shape and syncs the properties panel from the previous step
- Double-clicking a row renames it via a new name property on the shape model
- Out of scope: nested groups, visibility toggles, locks, thumbnails
Acceptance check: drag a text row above a rect row and confirm the canvas repaint order matches immediately, no reload.

Add persistence and JSON import/export to the canvas editor. Requirements:
- src/lib/storage.js opens an IndexedDB database named canvas-editor with an object store called documents keyed by id
- Save 500ms after the last mutation using a debounce helper; restore the newest saved document on startup
- Export JSON downloads <docname>.json via Blob and URL.createObjectURL; Import JSON reads with FileReader, checks that shapes is an Array, then loads it
- Reject files whose schemaVersion is missing or not 1, with a visible inline message
- Use IndexedDB only; leave localStorage untouched
- Out of scope: cloud sync, encryption, multi-document tabs, and conflict resolution between autosave versions
Test honestly: export, make a bad edit, refresh, import, and confirm ids, names, positions and hex colors come back unchanged in the JSON.

Add SVG and PNG export for the current selection. Requirements:
- src/lib/exportSvg.js maps each selected shape to SVG elements: rect with rx for cornerRadius, ellipse, text as a text element; wrap them in an svg element with xmlns and a viewBox sized to the selection bounding box plus 16px padding
- src/lib/exportPng.js turns that SVG string into a blob URL, draws it onto an offscreen canvas at 2x scale, and downloads a PNG via toBlob
- Two toolbar buttons, active only while a selection exists
- fill, stroke, strokeWidth, cornerRadius and text content must all appear in the SVG output
- Write README.md covering: what it is (a single-player canvas sketch), how to run it (npm install, npm run dev), the schemaVersion note, and pointers to Penpot and Excalidraw for anyone needing real-time collaboration
- Out of scope: PDF export, SVG import, clipboard copy, print stylesheets
Check by exporting one shape of each type and opening the resulting SVG in a fresh browser tab.