---
id: task-8
title: Port shared hooks as FolkJS utilities
status: Done
assignee: []
created_date: '2026-01-02 16:10'
updated_date: '2026-01-02 18:45'
labels:
  - foundation
  - utilities
  - migration
dependencies: []
priority: high
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Convert canvas-website React hooks to FolkJS-compatible utilities:

1. **useMaximize** → maximizeShape(shape) utility
   - Store original dimensions
   - Animate to viewport fill
   - Restore on toggle

2. **usePinnedToView** → PinnedViewManager class
   - Keep shape fixed as camera moves
   - Support multiple pin positions
   - Zero-lag with requestAnimationFrame

3. **Shape serialization** - toJSON/fromJSON pattern
   - Already implemented in folk-markdown
   - Standardize across all shapes

These utilities enable the StandardizedToolWrapper features (maximize, pin, close) across all FolkJS shapes.
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [x] #1 maximizeShape utility working
- [x] #2 PinnedViewManager class working
- [x] #3 All shapes have consistent toJSON/fromJSON
<!-- AC:END -->

## Notes

### Implementation Complete

Created three utility implementations:

1. **maximize.ts** - `maximizeShape()`, `restoreShape()`, `toggleMaximize()`, `isMaximized()`
   - Uses WeakMap to store original dimensions
   - Animates with 0.3s CSS transitions
   - Accounts for canvas transforms

2. **pinned-view.ts** - `PinnedViewManager` class
   - 9 preset positions + 'current' for in-place pinning
   - RequestAnimationFrame for zero-lag viewport tracking
   - Compensates for canvas pan/zoom transforms
   - Singleton pattern via `getPinnedViewManager()`

3. **folk-shape.ts** - Base `toJSON()` method
   - Returns type, id, x, y, width, height, rotation
   - Subclasses override and extend

All utilities exported from `lib/index.ts`.