# @blinksgg/canvas v1.0 Release Plan **Current version:** 0.36.0 "Gesture Pipeline" **Target:** 1.0.0 "Stable Canvas" **Status:** Pre-release audit complete --- ## Executive Summary The canvas package is **v1.0-ready in its core**. 72 test suites, zero TODO/FIXME comments, clean TypeScript, comprehensive docs. The remaining work falls into two categories: **API stabilization** (naming/export cleanup before locking semver) and **test coverage for complex hooks** (should-have). --- ## Current State Assessment ### What's Solid (No Work Needed) | Area | Evidence | |------|----------| | Core state management | 100% test coverage, 25+ atom modules | | Gesture pipeline v2 | 13 test suites, 4-layer architecture, specificity scoring | | Command system | 4 test suites, 50+ built-in commands, keyboard shortcuts | | Error handling | Error boundaries, rollback on failed mutations, 6 catch blocks | | Documentation | 1,050-line README, PRINCIPLES.md, CHANGELOG, architecture docs | | Performance | React Compiler, virtualization, spatial grid, structural equality | | Type safety | `tsc --noEmit` clean, zero `@ts-ignore` in production code | | Code quality | Zero TODO/FIXME/HACK comments | ### What Needs Work ```mermaid flowchart LR subgraph MUST["Must-Have (Phase 1)"] API[API Stabilization
naming + export audit] HOOK_TESTS[Hook Tests
useNodeDrag, useNodeResize] end subgraph SHOULD["Should-Have (Phase 2)"] COMP_TESTS[Component Tests
CommandLine, NodePorts] MIGRATION[Migration Guide
v0.x → v1.0] PEERDEP[Peer Dep Cleanup
optional vs required] end subgraph NICE["Nice-to-Have (Phase 3)"] PLUGIN[Plugin API
extensible architecture] DEV_OVERLAY[Dev Overlay
debug panel] MULTI[Multi-user Cursors
realtime presence] end MUST --> SHOULD --> NICE ``` --- ## Phase 1: Must-Have (Target: v0.37–v0.39) ### 1.1 API Stabilization **Why:** Once v1.0 ships, every export is a semver contract. Clean up naming inconsistencies and remove anything that shouldn't be public. **Tasks:** | Task | Details | |------|---------| | Audit atom naming | Ensure all public atoms follow `{noun}{Verb}Atom` pattern (e.g., `selectedNodeIdsAtom`, not mixed styles) | | Review `core/index.ts` exports | Currently `export *` for 22 modules. Evaluate if any internal atoms leak that shouldn't be public | | Gesture v2 namespace | Currently `gesturesV2` namespace on root. Decide: keep namespace (safe) or flatten (breaking). Recommend: keep namespace for v1.0, flatten in v2.0 | | `onAction` callback type | Already fixed: `InputEvent` union. Document the narrowing pattern (`event.kind === 'key'` guard) in README | | DB layer optionality | Mark `@blinksgg/canvas/db` exports as `@experimental` or document clearly that the storage adapter API may change | | Component prop stability | Review all component Props interfaces. Add `@public` JSDoc to stable ones, `@beta` to ones that may change | **Deliverable:** `docs/api-stability.md` documenting what's stable vs experimental. --- ### 1.2 Hook Test Coverage **Why:** `useNodeDrag` (450 lines) and `useNodeResize` (280 lines) are the two most complex hooks. They're tested indirectly via component tests but have no isolated unit coverage. A regression here breaks the core experience. **Tasks:** | Hook | Lines | Priority | What to test | |------|-------|----------|--------------| | `useNodeDrag` | 450 | HIGH | Drag start/move/end, snap-to-grid, group drag, history push, persistence callback, cancel | | `useNodeResize` | 280 | HIGH | Resize all 8 directions, min size enforcement, snap, history push, persistence callback | | `useForceLayout` | 350 | MEDIUM | Layout converges, cancellation, `onPositionsChanged` callback | | `useAnimatedLayout` | 180 | MEDIUM | Animation interpolation, cancel mid-animation, reduced-motion skip | | `useCommandLine` | 80 | LOW | Open/close state, search filtering | **Test approach:** Use Jotai test store + mock graph. No React rendering needed for most — test via `store.set()` / `store.get()` on the atoms the hooks wrap. --- ## Phase 2: Should-Have (Target: v0.40–v0.42) ### 2.1 Component Test Coverage Current: 39/50+ components tested (78%). Add tests for: | Component | Why | Approach | |-----------|-----|----------| | `CommandLine` | Complex keyboard-driven UI with state machine | Render test with mock command registry | | `NodeContextMenu` | Adaptive layout (bottom sheet vs dialog) | Render test with open/close/action | | `NodePorts` | Port expansion, compatibility checking, hit targets | Render test with port definitions | | `EdgeRenderer` | Search dimming, animation classes, path calculation | Snapshot test with mock edges | | `SettingsPanel` | Headless styling, preset management | Render test with className props | ### 2.2 Peer Dependency Cleanup Split peer deps into required and optional with clear messaging: ```json { "peerDependencies": { "react": "^19.0.0", "react-dom": "^19.0.0", "jotai": "^2.6.0" }, "peerDependenciesMeta": { "d3-force": { "optional": true }, "@tanstack/react-query": { "optional": true }, "jotai-tanstack-query": { "optional": true }, "@blocknote/core": { "optional": true }, "@blocknote/react": { "optional": true }, "@blocknote/shadcn": { "optional": true } } } ``` Document in README which features require which optional deps. ### 2.3 Migration Guide Create `docs/migration-v1.md`: - Breaking changes since v0.6 (React 19, gesture v2, removed exports) - `onAction` type change (`GestureEvent` → `InputEvent`) - Gesture system v1 → v2 mapping table - Storage adapter migration (Supabase provider → adapter pattern) - Import path changes ### 2.4 apps/web Integration Audit The main app (`apps/web`) uses canvas via 21 import files with clean wrapper patterns: - Hook wrappers: `useNodeDrag`, `useNodeResize` add React Query persistence - Component wrappers: `EdgeOverlay`, `NodeContextMenu`, `LockedNodeOverlay` add app-specific behavior - Provider wrapper: `AppCommandProvider` binds commands to React Query mutations - Re-export hub: `store.ts` centralizes all canvas atoms **Action:** Verify none of these wrappers depend on internal/unstable exports. If any do, either promote those exports to public API or refactor the wrappers. --- ## Phase 3: Nice-to-Have (v1.x Roadmap) These are post-v1.0 features from TODO.md, scoped for minor releases: ### v1.1 — Plugin API - Standardize `registerAction()` + `registerCommand()` as the plugin surface - Document custom node type registration (`createComponentRegistry`) - Export gesture binding builder for third-party gesture definitions - Example: "How to build a custom node type" tutorial ### v1.2 — Dev Overlay - Floating debug panel (FPS, graph stats, event log, perf metrics) - Toggle with keyboard shortcut (`Ctrl+Shift+D`) - Useful for consumers debugging their canvas integrations - Currently roughed out in the demo's FPS counter and sidebar stats ### v1.3 — Multi-user Cursors - Realtime cursor presence via storage adapter subscription - `CursorOverlay` component showing remote user positions - Requires extending `CanvasStorageAdapter` with presence methods - Heaviest lift — new atoms, components, and adapter interface changes --- ## Release Checklist ``` Pre-release: [ ] Phase 1.1 — API audit (naming, exports, @public/@beta tags) [ ] Phase 1.2 — Hook tests (useNodeDrag, useNodeResize minimum) [ ] Phase 2.2 — Peer dep cleanup (peerDependenciesMeta) [ ] Phase 2.3 — Migration guide Release: [ ] Bump version to 1.0.0 in package.json + src/index.ts [ ] Update CHANGELOG.md with v1.0.0 entry [ ] Update README.md hero section ("v1.0 — Stable Release") [ ] Update TODO.md (move completed items, update roadmap) [ ] Rebuild: pnpm --filter @blinksgg/canvas build [ ] Run full test suite: pnpm --filter @blinksgg/canvas test [ ] Type check: pnpm --filter @blinksgg/canvas check-types [ ] Tag: git tag v1.0.0 [ ] Update canvas-demo to showcase v1.0 features Post-release: [ ] Phase 2.4 — apps/web integration audit [ ] Phase 3.1 — Plugin API (v1.1) [ ] Phase 3.2 — Dev Overlay (v1.2) ``` --- ## Risk Assessment | Risk | Likelihood | Impact | Mitigation | |------|-----------|--------|------------| | API audit reveals breaking changes needed | LOW | HIGH | If found, ship as v1.0-rc.1 for consumer testing before final | | Force layout d3-force peer dep confusion | LOW | LOW | Already optional; document clearly | | React 19 min version locks out consumers | LOW | MEDIUM | React 19 is stable and widely adopted; acceptable trade-off | --- ## Metrics for Success | Metric | Target | |--------|--------| | Test suites | 80+ (currently 72) | | TypeScript errors | 0 (currently 0) | | TODO/FIXME in source | 0 (currently 0) | | Hook test coverage | useNodeDrag + useNodeResize isolated tests | | README completeness | Migration guide, perf guide | | Demo coverage | All exported components wired (done in v0.15 demo) |