# Refactoring Roadmap

Comprehensive audit of vibe-coding leftovers and structural debt.

## 🔴 Critical (Architectural Debt)

### 1. `src/stores/editor.ts` — 2,505 lines, the God Store

One closure captures ~30 mutable `let` variables and exposes ~80 methods covering: file I/O, undo, pen tool, layout, selection, export, import, clipboard, images, paging, zooming, autosave, file watching, component ops, text editing.

**Refactoring:** Extract `createEditor()` to `packages/core/src/editor/` folder with domain modules sharing an `EditorContext` interface. App store becomes a thin Vue wrapper.

**Status:** ✅ Done — 13 modules, largest 394 lines. App store: 747 lines.

### 2. `src/composables/use-canvas-input.ts` — 1,501 lines, the Input Monolith

Handles 8 drag types, touch/gesture, wheel zoom, double-click, hit testing, snap guides, auto-layout indicators, reparenting, and hover cursors — all in one function.

**Refactoring:** Extract by concern:
- `use-drag-move.ts` — move with snap, reparent, auto-layout break
- `use-drag-resize.ts` — resize with aspect ratio
- `use-drag-rotate.ts` — rotation with snap
- `use-touch-input.ts` — touch/gesture/pinch
- `use-hit-test.ts` — hit testing (already pure functions)

### 3. State is fully mutable to all consumers

`editor.state` is a raw `shallowReactive` — every composable mutates it freely (`store.state.panX = ...`, `store.state.zoom = ...`). Zero uses of `readonly`/`shallowReadonly` anywhere.

**Refactoring:** Expose `shallowReadonly(state)` as the public API, add explicit setter methods for mutations that need to happen from outside the store.

## 🟡 Medium (Code Quality)

### 4. Fire-and-forget async calls — 10+ unhandled

Multiple `void asyncFn()` calls where rejections are silently swallowed:
- `void switchPage()` in `addPage`/`deletePage`
- `void reloadFromDisk()` in file watcher
- `void loadFontsForNodes()` in paste handler
- `saveFigFile`, `writeFile`, `reloadFromDisk` — no try/catch, silent data loss risk

**Refactoring:** Wrap fire-and-forget calls in a `safeFire(promise, context)` helper that catches and shows a toast. Add try/catch to all async store methods.

### 5. Module-level state in composables

`use-chat.ts` declares all state (`providerID`, `apiKey`, `modelID`, etc.) at module scope outside the composable function. `use-menu.ts` calls `useFileDialog()` and `useEditorStore()` at module scope — technically incorrect for VueUse composables that expect `setup()` context.

**Refactoring:** Move state inside the composable function or convert `use-chat.ts` to a proper store. Move `useFileDialog()` inside the exported function.

### 6. Bounding-box computation duplicated ~10 times

The `let minX = Infinity; ... Math.min/max` pattern appears in `editor.ts` (7×), `tools/read.ts`, `tools/vector.ts`, `clipboard.ts`, `renderer/overlays.ts`, `figma-api.ts`.

**Refactoring:** Add a generic `computeBounds(items, getRect): Rect` to `geometry.ts`, replace all copies.

### 7. "Node not found" guard repeated 44 times in tools

Every tool function starts with `const node = figma.getNodeById(id); if (!node) return { error: ... }`.

**Refactoring:** Add `requireNode(figma, id)` to `tools/schema.ts` that either returns the node or throws a typed error caught by the tool executor.

### 8. Barrel import overuse — 58 consumers use `@open-pencil/core` vs 2 using subpaths

Subpath exports (`/scene-graph`, `/tools`, `/renderer`, etc.) exist but are almost unused. The barrel `export * from './constants'` dumps 91 exports.

**Refactoring:** Migrate app imports to use subpath exports. Improves tree-shaking and makes dependency intent explicit.

### 9. `kiwi-serialize.ts` misplaced

495-line file at the core root that imports exclusively from `./kiwi/*`. Belongs inside `kiwi/`.

**Refactoring:** Move to `packages/core/src/kiwi/kiwi-serialize.ts`, update imports.

### 10. `tools/stock-photo.ts` throws instead of returning `{ error }`

All other tools return `{ error: string }` for AI consumers, but `stock-photo.ts` throws.

**Refactoring:** Change to return `{ error }` like all other tools.

## 🟢 Low Priority (Polish)

### 11. Large Vue components (8 over 300 lines)

| Lines | Component | Split into |
|-------|-----------|-----------|
| 553 | `VariablesDialog.vue` | `VariablesTable` + `VariableCell` + dialog wrapper |
| 537 | `LayoutSection.vue` | auto-layout vs absolute sections |
| 504 | `FillPicker.vue` | extract `GradientEditor` |
| 503 | `LayerTree.vue` | extract drag-to-reparent composable |
| 388 | `Toolbar.vue` | extract action menu sub-components |
| 382 | `StrokeSection.vue` | extract shared paint picker with FillSection |
| 337 | `NodeContextMenuContent.vue` | group into sub-menus |
| 314 | `ProviderSettings.vue` | extract per-provider form components |

### 12. Icon import bloat

`Toolbar.vue` (14 icon imports), `LayerTree.vue` (13), `MobileHud.vue` (5). Extract icon maps to shared utils.

### 13. Unscoped `<style>` in `CodePanel.vue`

8 `.token.*` rules leak globally. Scope or move to `app.css`.

### 14. Dead exports (7 functions)

- `copyFill`, `copyStroke`, `copyEffect`, `copyStyleRun` in `copy.ts` (only array variants used)
- `createPropertyChange` in `undo.ts`
- `designTokens` in `tools/codegen.ts`
- `queryFonts` in `fonts.ts`

### 15. Renderer circular imports

`renderer.ts` ↔ `ai-overlays.ts` and `renderer.ts` ↔ `rulers.ts` — runtime cycles through type + value imports. Extract a `SkiaRendererContext` interface to break the cycle.

### 16. Duplicate font weight maps

Weight-to-name mapping exists in both `figma-api-proxy.ts` and `fonts.ts`. Extract to a shared constant.

### 17. Rotated corners reimplemented

`renderer/overlays.ts` and `snap.ts` reimplement `rotatedCorners()` instead of importing from `geometry.ts`.

### 18. Duplicate .fig scaffold/zip assembly

Same DOCUMENT NodeChange in `clipboard.ts` and `fig-export.ts`. Same zip structure in `fig-export-worker.ts` and `fig-export.ts`.

### 19. Group/Frame/Component/ComponentSet creation — 4× copy-paste

Lines ~1215, ~1295, ~1390, ~1460 in editor.ts each follow the identical 50-line pattern: compute bbox → calculate parent offset → find z-index → create container → reparent children → push undo. Only the node type and a few props differ. ~200 lines that should be `wrapSelectionInContainer(type, extraProps)`.

### 20. `console.warn`/`console.error` (30 total)

All legitimate error handlers but would benefit from a structured logger. The bare `console.error(e)` in `EditorView.vue:67` should add context.

---

## Editor Folder Split Plan

Target: `packages/core/src/editor/`

```
packages/core/src/editor/
├── index.ts              # re-export createEditor, types, constants
├── types.ts              # EditorState, EditorOptions, Tool, EditorToolDef
├── context.ts            # EditorContext interface (shared deps all modules access)
├── create.ts             # createEditor() assembler
├── viewport.ts           # screenToCanvas, applyZoom, pan, zoomToBounds/Fit/100/Selection
├── selection.ts          # select, clearSelection, selectAll, setMarquee, setSnapGuides, ...
├── pages.ts              # switchPage, addPage, deletePage, renamePage, pageViewports
├── shapes.ts             # createShape, adoptNodesIntoSection, pen*, vector bounds
├── structure.ts          # group, ungroup, wrapInAutoLayout, reorder, reparent, bringToFront/sendToBack
├── components.ts         # createComponent, componentSet, createInstance, detach, goToMain, sync
├── clipboard.ts          # duplicateSelected, writeCopyData, pasteFromHTML, deleteSelected
├── undo.ts               # commitMove/Resize/Rotation/NodeUpdate, undo/redo, snapshot
├── text.ts               # startTextEditing, commitTextEdit
└── nodes.ts              # updateNode, updateNodeWithUndo, setLayoutMode, visibility/lock, rename, moveToPage
```

Each module exports a factory: `createXxxActions(ctx: EditorContext) => { ... }`.
`create.ts` assembles context + all modules, spreads into a flat return object.
`Editor` type = `ReturnType<typeof createEditor>` — unchanged for all consumers.