rspace-online/backlog/tasks/task-2 - Phase-1-FolkJS-Foundation-Port-Simple-Shapes.md

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

Description

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

Acceptance Criteria

• #1 folk-slide component created
• #2 folk-chat component created
• #3 folk-google-item component created
• #4 folk-piano component created

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