Execute implementation plans 010-017

Author: rezailmi

.github/workflows/publish.yml

@@ -28,12 +28,12 @@ on:
       unpublish_versions:
         description: Space-separated versions to unpublish (unpublish only)
         required: false
-        default: "0.1.0-beta.3 0.1.0-beta.4 0.1.0-beta.5 0.1.0-beta.6 0.1.0-beta.7 0.1.0-beta.8"
+        default: '0.1.0-beta.3 0.1.0-beta.4 0.1.0-beta.5 0.1.0-beta.6 0.1.0-beta.7 0.1.0-beta.8'
         type: string
       confirm_unpublish:
         description: Type UNPUBLISH to confirm unpublish task
         required: false
-        default: ""
+        default: ''
         type: string
 
 permissions:
@@ -64,6 +64,9 @@ jobs:
       - name: Typecheck
         run: bunx tsc --noEmit
 
+      - name: Lint (non-blocking baseline)
+        run: bun run lint || true
+
       - name: Test
         run: bunx vitest run
 

.prettierignore

@@ -0,0 +1,5 @@
+dist
+.claude
+node_modules
+bun.lock
+*.d.ts

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "es5"
+}

bun.lock

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import reactHooks from 'eslint-plugin-react-hooks'
+import prettier from 'eslint-config-prettier'
+
+export default tseslint.config(
+  {
+    ignores: [
+      'dist/**',
+      '**/dist/**',
+      'node_modules/**',
+      '**/node_modules/**',
+      'dev/**',
+      '.claude/**',
+      '**/*.d.ts',
+    ],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+    },
+  },
+  prettier
+)

eslint.config.mjs

@@ -70,6 +70,7 @@
     "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
+    "@eslint/js": "10.0.1",
     "@tailwindcss/cli": "^4.1.0",
     "@tailwindcss/vite": "^4.1.0",
     "@testing-library/react": "^16.3.2",
@@ -80,15 +81,20 @@
     "commander": "^13.1.0",
     "concurrently": "^9.1.0",
     "esbuild": "^0.24.0",
+    "eslint": "10.5.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-react-hooks": "7.1.1",
     "jsdom": "^28.0.0",
     "picocolors": "^1.1.1",
+    "prettier": "3.8.4",
     "prompts": "^2.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^4.1.0",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.3.5",
     "typescript": "^5.9.3",
+    "typescript-eslint": "8.61.0",
     "vite": "^7.3.1",
     "vitest": "^4.0.18"
   },
@@ -99,6 +105,11 @@
     "build": "tsup",
     "pretest": "bun run build",
     "test": "vitest run",
+    "test:fast": "vitest run",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "predev": "mkdir -p dist && tailwindcss -i ./src/styles.css -o ./dist/styles.css -m",
     "dev": "concurrently \"tailwindcss -i ./src/styles.css -o ./dist/styles.css -w\" \"tsup --watch --ignore-watch dist\"",
     "dev:app": "vite",

package.json

@@ -22,14 +22,14 @@ These eight plans expand the former "Backlog" section into self-contained handof
 
 | Plan | Title | Priority | Effort | Depends on | Status |
 |------|-------|----------|--------|------------|--------|
-| 010  | Extract one cohesive cluster (computed-style getters) out of the `utils.ts` god module | P2 | M | — (recommend 014 first) | TODO |
-| 011  | Unit tests for interaction-overlay / multi-selection-overlay / canvas-store | P2 | M | — | TODO |
-| 012  | Reduce repeated full-subtree `getComputedStyle` in `replaceSelectionColor` (profile-gated) | P3 | S–M | — | TODO (Step 0 gate may → REJECTED) |
-| 013  | Add ESLint + Prettier with a non-blocking CI baseline | P3 | M | — | TODO |
-| 014  | Add `test:fast` script that skips the prebuild on the inner loop | P3 | S | — | TODO |
-| 015  | Add a protocol `version` field to the preload DevTools hook | P3 | S | — | TODO |
-| 016  | Correct drag/resize scale-divisor math for rotated elements (artifact-gated) | P3 | S–M | — | TODO (Step 0 gate may → REJECTED) |
-| 017  | Wire the panel footer send/export in the provider path (makes 007's footer states reachable) | P2 | S | relates to 007 | TODO |
+| 010  | Extract one cohesive cluster (computed-style getters) out of the `utils.ts` god module | P2 | M | — (recommend 014 first) | DONE |
+| 011  | Unit tests for interaction-overlay / multi-selection-overlay / canvas-store | P2 | M | — | DONE |
+| 012  | Reduce repeated full-subtree `getComputedStyle` in `replaceSelectionColor` (profile-gated) | P3 | S–M | — | REJECTED (no hot-path evidence; avoid speculative behavior change) |
+| 013  | Add ESLint + Prettier with a non-blocking CI baseline | P3 | M | — | DONE |
+| 014  | Add `test:fast` script that skips the prebuild on the inner loop | P3 | S | — | DONE |
+| 015  | Add a protocol `version` field to the preload DevTools hook | P3 | S | — | DONE |
+| 016  | Correct drag/resize scale-divisor math for rotated elements (artifact-gated) | P3 | S–M | — | DONE |
+| 017  | Wire the panel footer send/export in the provider path (makes 007's footer states reachable) | P2 | S | relates to 007 | DONE |
 
 Status values: TODO | IN PROGRESS | DONE | BLOCKED (with one-line reason) | REJECTED (with one-line rationale)
 

plans/README.md

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import { afterEach, describe, expect, it } from 'vitest'
+import { act, cleanup, render, screen } from '@testing-library/react'
+import {
+  getBodyOffset,
+  getCanvasSnapshot,
+  registerCanvasStoreOwner,
+  setBodyOffset,
+  setCanvasSnapshot,
+  useCanvasSnapshot,
+} from './canvas-store'
+
+describe('canvas-store', () => {
+  afterEach(() => {
+    cleanup()
+    setCanvasSnapshot({ active: false, zoom: 1, panX: 0, panY: 0 })
+    setBodyOffset({ x: 0, y: 0 })
+  })
+
+  it('returns the default snapshot before any set', () => {
+    expect(getCanvasSnapshot()).toEqual({ active: false, zoom: 1, panX: 0, panY: 0 })
+  })
+
+  it('round-trips canvas snapshots', () => {
+    const next = { active: true, zoom: 1.5, panX: 24, panY: -8 }
+    setCanvasSnapshot(next)
+
+    expect(getCanvasSnapshot()).toBe(next)
+  })
+
+  it('notifies useCanvasSnapshot subscribers on updates', () => {
+    function SnapshotReader() {
+      const snapshot = useCanvasSnapshot()
+      return (
+        <output>{`${snapshot.active}:${snapshot.zoom}:${snapshot.panX}:${snapshot.panY}`}</output>
+      )
+    }
+
+    render(<SnapshotReader />)
+    expect(screen.getByText('false:1:0:0')).toBeTruthy()
+
+    act(() => {
+      setCanvasSnapshot({ active: true, zoom: 2, panX: 10, panY: 20 })
+    })
+
+    expect(screen.getByText('true:2:10:20')).toBeTruthy()
+  })
+
+  it('round-trips body offsets', () => {
+    setBodyOffset({ x: 12, y: -4 })
+    expect(getBodyOffset()).toEqual({ x: 12, y: -4 })
+  })
+
+  it('owner disposers are idempotent enough to avoid negative counts', () => {
+    const disposeFirst = registerCanvasStoreOwner()
+    const disposeSecond = registerCanvasStoreOwner()
+
+    expect(() => {
+      disposeSecond()
+      disposeSecond()
+      disposeFirst()
+    }).not.toThrow()
+  })
+})

src/canvas-store.test.tsx

@@ -0,0 +1,52 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { dedupeConnectedElements, getGroupBounds } from './multi-selection-overlay'
+
+describe('multi-selection-overlay helpers', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('returns zero bounds for an empty group', () => {
+    expect(getGroupBounds([])).toEqual({ left: 0, top: 0, right: 0, bottom: 0 })
+  })
+
+  it('returns the rect bounds for a single item', () => {
+    expect(getGroupBounds([new DOMRect(10, 20, 30, 40)])).toEqual({
+      left: 10,
+      top: 20,
+      right: 40,
+      bottom: 60,
+    })
+  })
+
+  it('returns the min/max envelope for multiple items', () => {
+    expect(
+      getGroupBounds([
+        new DOMRect(10, 20, 30, 40),
+        new DOMRect(5, 25, 10, 10),
+        new DOMRect(50, 2, 8, 16),
+      ])
+    ).toEqual({
+      left: 5,
+      top: 2,
+      right: 58,
+      bottom: 60,
+    })
+  })
+
+  it('dedupes connected elements in input order', () => {
+    const first = document.createElement('div')
+    const second = document.createElement('section')
+    document.body.append(first, second)
+
+    expect(dedupeConnectedElements([first, second, first])).toEqual([first, second])
+  })
+
+  it('filters detached elements', () => {
+    const connected = document.createElement('div')
+    const detached = document.createElement('aside')
+    document.body.appendChild(connected)
+
+    expect(dedupeConnectedElements([detached, connected])).toEqual([connected])
+  })
+})

src/multi-selection-overlay.test.ts

@@ -12,7 +12,7 @@ export interface MultiSelectionOverlayProps {
   selectedElements: HTMLElement[]
 }
 
-function dedupeConnectedElements(elements: HTMLElement[]): HTMLElement[] {
+export function dedupeConnectedElements(elements: HTMLElement[]): HTMLElement[] {
   const seen = new Set<HTMLElement>()
   const result: HTMLElement[] = []
 
@@ -25,35 +25,40 @@ function dedupeConnectedElements(elements: HTMLElement[]): HTMLElement[] {
   return result
 }
 
-function getGroupBounds(rects: DOMRect[]) {
+export function getGroupBounds(rects: DOMRect[]) {
   if (rects.length === 0) {
     return { left: 0, top: 0, right: 0, bottom: 0 }
   }
-  return rects.reduce((bounds, rect) => ({
-    left: Math.min(bounds.left, rect.left),
-    top: Math.min(bounds.top, rect.top),
-    right: Math.max(bounds.right, rect.right),
-    bottom: Math.max(bounds.bottom, rect.bottom),
-  }), {
-    left: rects[0].left,
-    top: rects[0].top,
-    right: rects[0].right,
-    bottom: rects[0].bottom,
-  })
+  return rects.reduce(
+    (bounds, rect) => ({
+      left: Math.min(bounds.left, rect.left),
+      top: Math.min(bounds.top, rect.top),
+      right: Math.max(bounds.right, rect.right),
+      bottom: Math.max(bounds.bottom, rect.bottom),
+    }),
+    {
+      left: rects[0].left,
+      top: rects[0].top,
+      right: rects[0].right,
+      bottom: rects[0].bottom,
+    }
+  )
 }
 
 export function MultiSelectionOverlay({ selectedElements }: MultiSelectionOverlayProps) {
   const elements = React.useMemo(
     () => dedupeConnectedElements(selectedElements),
-    [selectedElements],
+    [selectedElements]
   )
   const [selectionRects, setSelectionRects] = React.useState<SelectionRect[]>([])
 
   const updateRects = React.useCallback(() => {
-    setSelectionRects(elements.map((element) => ({
-      element,
-      rect: element.getBoundingClientRect(),
-    })))
+    setSelectionRects(
+      elements.map((element) => ({
+        element,
+        rect: element.getBoundingClientRect(),
+      }))
+    )
   }, [elements])
 
   React.useLayoutEffect(() => {