---
id: task-2
title: 'Phase 1: FolkJS Foundation - Port Simple Shapes'
status: Done
assignee: []
created_date: '2026-01-02 14:42'
updated_date: '2026-01-02 19:00'
labels:
  - foundation
  - migration
  - shapes
dependencies: []
priority: high
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
Port the 4 simplest shapes from canvas-website to FolkJS web components:
- SlideShapeUtil (passive display)
- ChatBoxShapeUtil (real-time chat)
- GoogleItemShapeUtil (data display)
- SharedPianoShapeUtil (interactive music)

Key simplifications vs tldraw:
- No BaseBoxShapeUtil inheritance, use FolkShape directly
- No React - pure web components with lit-style templates
- Hooks become class methods or standalone utilities
- StandardizedToolWrapper already ported as FolkWrapper
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [x] #1 folk-slide component created
- [x] #2 folk-chat component created
- [x] #3 folk-google-item component created
- [x] #4 folk-piano component created
<!-- AC:END -->

## Notes

### Implementation Complete

Created 4 FolkJS web components:

1. **folk-slide.ts** (`lib/folk-slide.ts`)
   - Simple slide container with dashed border
   - Label display (e.g., "Slide 1")
   - Minimal implementation for presentation mode

2. **folk-chat.ts** (`lib/folk-chat.ts`)
   - Real-time chat with message list
   - Username prompt with localStorage persistence
   - Message input form with send button
   - Orange header theme matching original
   - Emits `message` events for sync integration

3. **folk-google-item.ts** (`lib/folk-google-item.ts`)
   - Data card for Gmail/Drive/Photos/Calendar items
   - Visibility toggle (local/shared)
   - Service icons and relative date formatting
   - Dark mode support
   - Helper function `createGoogleItemProps()`

4. **folk-piano.ts** (`lib/folk-piano.ts`)
   - Chrome Music Lab Shared Piano iframe embed
   - Loading/error states with retry
   - Minimize/expand toggle
   - Sandboxed with audio/MIDI permissions

All components:
- Extend FolkShape base class
- Use CSS-in-JS via template literals
- Support drag from header/container via `data-drag`
- Implement `toJSON()` for Automerge sync
- Registered in `canvas.html` with toolbar buttons