When pinning a shape again after unpinning, leftover state from the
previous session was causing the shape to jump/resize unexpectedly.
Changes:
- Add clearPinState() helper to reset all refs and cancel animations
- Add cleanShapeMeta() helper to remove all pin-related meta properties
- Clear all state immediately when pinning starts (before setting new state)
- Clear refs immediately when unpinning (not in setTimeout)
- Remove pinnedAtZoom from meta cleanup (legacy from CSS scaling)
- Don't call updatePinnedPosition() on pin start - shape is already
at correct position, only need to listen for future camera changes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace tick event with store.listen to react synchronously when the
camera record changes. This eliminates the one-frame delay that was
causing the shape and its indicator to lag behind camera movements.
Changes:
- Use editor.store.listen instead of editor.on('tick')
- Filter for camera record changes specifically
- Remove position threshold for maximum responsiveness
- Remove unused pinnedAtZoom since CSS scaling was removed
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Pinned shapes should only stay fixed in screen position, not fixed in
visual size. The CSS transform: scale() was causing shapes to appear
differently sized when pinned.
Now pinned shapes:
- Stay at a fixed screen position (don't move when panning)
- Scale normally with zoom (get bigger/smaller like other shapes)
- Don't change appearance when pin is toggled
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace requestAnimationFrame polling with tldraw's 'tick' event which
fires synchronously with the render cycle. This ensures the pinned shape
position is updated BEFORE rendering, eliminating the visual lag where
the shape appeared to "chase" the camera during zooming.
Changes:
- Use editor.on('tick') instead of requestAnimationFrame polling
- Remove throttling (no longer needed with tick event)
- Reduce position tolerance from 0.5 to 0.01 for more precise tracking
- Simplify code by removing unnecessary camera tracking refs
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
When unpinning a shape, the previous code set pinnedAtZoom, originalX, and
originalY to undefined in shape.meta. This caused a ValidationError because
tldraw requires JSON serializable values (undefined is not valid JSON).
Fixed by using object destructuring to exclude these properties from meta
instead of setting them to undefined.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Pinned shapes now stay exactly the same size visually during zoom
- Uses CSS transform scale instead of changing w/h props
- Content inside shapes renders identically at all zoom levels
- Stores pinnedAtZoom in shape.meta for reference
- Returns to original position smoothly when unpinned
- Removed size-changing logic that was causing content reflow issues
The transform approach ensures text, UI elements, and all content
inside pinned shapes remain pixel-perfect regardless of canvas zoom.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Move "Create Tool" to top of context menu
- Move "Shortcut to Frames" to second position
- Remove "Collections" submenu (functionality still available via keyboard shortcuts)
- Cleaner menu structure prioritizing creation tools
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Updated CustomToolbar.tsx to use MycroZineGenerator tool
- Updated CustomContextMenu.tsx to use MycroZineGenerator in Create Tool submenu
- Updated overrides.tsx with MycroZineGenerator tool definition
- Removed all references to old MycrozineTemplate
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add validation for highlight shapes (same as draw)
- Improve segment validation to check for NaN/Infinity in point coordinates
- Add more custom shape types to valid shapes list
- Fix arrow shape validation (use start/end props instead of points array)
- Fix line shape validation (uses object format for points, not array)
- Better error messages for invalid shapes
Prevents "No nearest point found" errors when importing older files
with malformed path geometry data.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Re-enable Map tool in CustomToolbar and CustomContextMenu
- Add GPS location sharing state and UI to MapShapeUtil
- Show collaborator locations on map with colored markers
- Add toggle button to share/stop sharing your location
- Cleanup GPS watch and markers on component unmount
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Preserve tldraw-user-id-* and crypto keys on logout (prevents duplicate cursors)
- Add session-logged-in event for immediate tool enabling after login
- Add session-cleared event for component state cleanup
- Clear only session-specific data (permissions, graph cache, room ID)
- CryptIDDropdown: reset connections state on logout
- useNetworkGraph: clear graph cache on logout
The key fix is preserving tldraw user IDs across login/logout cycles.
Previously, clearing these IDs caused each login to create a new presence
record while old ones persisted in Automerge, resulting in stacked cursors.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add openCommandPalette() export function for manual triggering
- Update ? button to open the colorful Command Palette modal instead of dropdown
- Add support for manual opening with Escape and click-outside to close
- Clean up unused shortcut dropdown code and state
- Maintain Ctrl+Shift hold behavior for quick access
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove separate BoardSettingsDropdown button from UI panel
- Add board protection toggle and editor management to existing settings dropdown
- Show protection section only for admins (board owner or global admin)
- Add ability to toggle view-only mode for protected boards
- Add editor management UI with invite and remove functionality
- Fix TypeScript type annotations for API responses
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added the board settings dropdown between ShareBoardButton and StarBoardButton.
Provides access to:
- Board protection toggle (view-only mode)
- Editor management for protected boards
- Admin request functionality
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
NEW PERMISSION MODEL:
- All users (including anonymous) can now EDIT by default
- Boards can be marked as "protected" by admin - only listed editors can edit
- Global admins (jeffemmett@gmail.com) have admin on ALL boards
- Added BoardSettingsDropdown with view-only toggle for admins
Backend changes:
- Added is_protected column to boards table
- Added global_admins table
- New getEffectivePermission logic prioritizes: token > global admin > owner > protection status
- New API endpoints: /auth/global-admin-status, /admin/request, /boards/:id/info, /boards/:id/editors
- Admin request sends email via Resend API
Frontend changes:
- BoardSettingsDropdown component with protection toggle and editor management
- Updated AuthContext and Board.tsx to default to 'edit' permission
- isReadOnly now only true for protected boards where user is not an editor
Task: task-052
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add "(you)" indicator on tooltip when hovering current user's node
- Ensure current user always appears in graph even with no connections
- Add new participants immediately to graph (no 30s delay)
- Implement "leave" message protocol for presence cleanup:
- Client sends leave message before disconnecting
- Server broadcasts leave to other clients on disconnect
- Clients remove presence records on receiving leave
- Generate consistent user colors from CryptID username (not session ID)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
When the browser reloads without network connectivity, the canvas now
automatically loads from local IndexedDB storage and renders the last
known state.
Changes:
- Board.tsx: Updated render condition to allow rendering when offline
with local data (isOfflineWithLocalData flag)
- useAutomergeStoreV2: Added isNetworkOnline parameter and offline fast
path that immediately loads records from Automerge doc without waiting
for network patches
- useAutomergeSyncRepo: Passes isNetworkOnline to useAutomergeStoreV2
- ConnectionStatusIndicator: Updated messaging to clarify users are
viewing locally cached canvas when offline
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add dropdown menu when clicking user nodes in network graph with options:
- Connect with <username>
- Navigate to <username> (pan to cursor)
- Screenfollow <username> (follow camera)
- Open <username>'s profile
- Fix tool visibility for logged-in users (timing issue with read-only mode)
- Fix 401 errors by correcting localStorage key from 'cryptid_session' to 'canvas_auth_session'
- Remove "(anonymous)" suffix from usernames in tooltips
- Simplify node colors to use user's profile/presence color
- Clear permission cache on logout to prevent stale state
- Various UI improvements to auth components and network graph
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add useMaximize hook to all shapes using StandardizedToolWrapper:
- MapShapeUtil, MultmuxShapeUtil, MarkdownShapeUtil
- ObsNoteShapeUtil, ImageGenShapeUtil, VideoGenShapeUtil
- HolonShapeUtil, PromptShapeUtil, EmbedShapeUtil
- FathomMeetingsBrowserShapeUtil, FathomNoteShapeUtil
- HolonBrowserShapeUtil, ObsidianBrowserShapeUtil
- TranscriptionShapeUtil, VideoChatShapeUtil
All tools now have maximize/fullscreen functionality via the
standardized header bar.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add maximize/fullscreen button to standardized header bar
- Create useMaximize hook for shape utils to enable fullscreen
- Shape fills viewport when maximized, restores on Esc or toggle
- Implement on ChatBoxShapeUtil as example (other shapes can add easily)
- Button shows ⤢ for maximize, ⊡ for exit fullscreen
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove blocking await adapter.whenReady() that prevented offline mode
- Load from IndexedDB immediately without waiting for network
- Set handle and mark as ready BEFORE network sync for instant UI
- Background server sync with 5-second timeout
- Continue with local data if network is unavailable
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add InviteDialog component with tabbed interface for sharing boards
- Add ShareBoardButton component to toolbar
- Integrate qrcode.react for QR code generation
- Implement Web NFC API for NFC tag writing
- Add placeholder for audio connect feature (coming soon)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Created single grey oval container for all top-right menu items
- Order: CryptID -> Star -> Gear -> Question mark
- Added vertical separator lines between each menu item
- Consistent styling with rounded container and subtle shadow
- Removed separate styling for individual buttons
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Social Network Graph:
- Dark/black theme with semi-transparent background
- Arrow markers on edges showing connection direction
- Color-coded arrows: grey (default), yellow (connected), green (trusted)
- Updated header, stats, and icon button colors for dark theme
MI (Mycelial Intelligence) Bar:
- Responsive width: full width on mobile, percentage on narrow, fixed on desktop
- Position: moves to bottom on mobile (above toolbar), stays at top on desktop
- Smooth transitions when resizing
- Smaller max height on mobile (300px vs 400px)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Network Graph:
- Add graceful fallback when API returns 401 or other errors
- Falls back to showing room participants as nodes
- Prevents error spam in console for unauthenticated users
Map Shape (linter changes):
- Add isFetchingNearby state for loading indicator
- Improve addAnnotation to accept name/color options
- Add logging for Find Nearby debugging
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
UI Changes:
- Add CryptIDDropdown component with Google integration under Integrations
- Remove user presence avatars (moved to network graph)
- New top-right layout: CryptID -> Star -> Gear dropdown -> Question mark
- Settings gear shows dropdown with dark mode toggle + All Settings link
- Network graph label changed to "Social Network"
- Network graph shows for all users including anonymous
- Solo users see themselves as a lone node
Map Shape Fixes:
- Fix stale closure bug: tool clicks now work using activeToolRef
- Fix wheel scroll: native event listener prevents tldraw capture
- Add pointerEvents: 'auto' to map container for proper mouse interaction
Bug Fix:
- Add Map shape sanitization in AutomergeToTLStore for pinnedToView/isMinimized
- Prevents "Expected boolean, got undefined" errors on old Map data
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Wrap map component in StandardizedToolWrapper with header bar
- Add onPointerDown={stopPropagation} to all sidebar interactive elements
- Add handleMapWheel that forwards wheel zoom to map component
- Add pinnedToView, tags, isMinimized props for consistency
- Fix TypeScript type for stopPropagation handler
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix unused parameter errors (prefix with underscore)
- Fix TrustCircleManager API: add getTrustLevel/setTrustLevel methods
- Fix MyceliumNetwork method calls: addNode→createNode, addHypha→createHypha
- Fix createCommitment signature to use CommitmentParams object
- Fix GeohashCommitment type with proper geohash field
- Fix PRECISION_CELL_SIZE usage (returns {lat,lng} object)
- Add type assertions for fetch response data
- Fix MapCanvas attributionControl type
- Fix GPSCollaborationLayer markerStyle merge with defaults
- Update MapShapeUtil with better event handling:
- Raise z-index to 10000 for all map buttons
- Add pointerEvents: auto for button clickability
- Add handleWheel with preventDefault to enable map zoom
- Add capturePointerEvents for proper interaction
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Shows all collaborators currently on the canvas with their connection status:
- Green border: Trusted (edit access)
- Yellow border: Connected (view access)
- Grey border: Not connected
Users can:
- Add unconnected users as Connected or Trusted
- Upgrade Connected users to Trusted
- Downgrade Trusted users to Connected
- Remove connections
Also fixes TypeScript errors in networking module.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add permission fetching and state management in Board.tsx
- Fetch user's permission level when board loads
- Set tldraw to read-only mode when user has 'view' permission
- Show AnonymousViewerBanner for unauthenticated users
- Banner prompts CryptID sign-up with your specified messaging
- Update permission state when user authenticates
- Wire up permission API routes in worker/worker.ts
- GET /boards/:boardId/permission
- GET /boards/:boardId/permissions (admin)
- POST /boards/:boardId/permissions (admin)
- DELETE /boards/:boardId/permissions/:userId (admin)
- PATCH /boards/:boardId (admin)
- Add X-CryptID-PublicKey to CORS allowed headers
- Add PUT, PATCH, DELETE to CORS allowed methods
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Phase 1 of user permissions feature:
- Add board permissions schema to D1 database
- boards table with owner, default_permission, is_public
- board_permissions table for per-user permissions
- Add permission types (PermissionLevel) to worker and client
- Implement permission API handlers in worker/boardPermissions.ts
- GET /boards/:boardId/permission - check user's permission
- GET /boards/:boardId/permissions - list all (admin only)
- POST /boards/:boardId/permissions - grant permission (admin)
- DELETE /boards/:boardId/permissions/:userId - revoke (admin)
- PATCH /boards/:boardId - update board settings (admin)
- Update AuthContext with permission fetching and caching
- fetchBoardPermission() - fetch and cache permission for a board
- canEdit() - check if user can edit current board
- isAdmin() - check if user is admin for current board
- Create AnonymousViewerBanner component with CryptID signup prompt
- Add CSS styles for anonymous viewer banner
- Fix automerge sync manager to flush saves on peer disconnect
Permission levels:
- view: Read-only, cannot create/edit/delete shapes
- edit: Can modify board contents
- admin: Full access + permission management
Next steps:
- Integrate with Board component for read-only mode
- Wire up permission checking in Automerge sync
- Add permission management UI for admins
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add src/open-mapping/** to tsconfig exclude (21K lines, to harden later)
- Delete MapShapeUtil.backup.tsx
- Fix ConnectionStatus type in OfflineIndicator
- Fix data type assertions in MapShapeUtil (routing/search)
- Fix GoogleDataService.authenticate() call with required param
- Add ts-expect-error for Automerge NetworkAdapter 'ready' event
- Add .wasm?module type declaration for Wrangler imports
- Include GPS location sharing enhancements in MapShapeUtil
TypeScript now compiles cleanly. Vite build needs NODE_OPTIONS for memory.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add Google Workspace integration directly in user dropdown (CustomPeopleMenu)
- Shows connection status (Connected/Not Connected)
- Connect button to trigger OAuth flow
- Browse Data button to open GoogleExportBrowser modal
- Add toggleable keyboard shortcuts panel (? icon)
- Shows full names of tools and actions with their shortcuts
- Organized by category: Tools, Custom Tools, Actions, Custom Actions
- Toggle on/off by clicking, closes when clicking outside
- Import GoogleExportBrowser component for data browsing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add VisibilityChangeModal for confirming visibility changes
- Add VisibilityChangeManager to handle events and drag detection
- GoogleItem shapes now dispatch visibility change events on badge click
- Support both local->shared and shared->local transitions
- Auto-detect when GoogleItems are dragged outside PrivateWorkspace
- Session storage for "don't ask again" preference
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Privacy-aware item shapes for Google Export data:
- GoogleItemShapeUtil: Custom shape for Google items with:
- Visual distinction: dashed border + shaded overlay for LOCAL items
- Solid border for SHARED items
- Privacy badge (🔒 local, 🌐 shared) in top-right corner
- Click badge to trigger visibility change (Phase 5)
- Service icon, title, preview, date display
- Optional thumbnail support for photos
- Dark mode support
- GoogleItemTool: Tool for creating GoogleItem shapes
- Updated ShareableItem type to include `service` and `thumbnailUrl`
- Updated usePrivateWorkspace hook to create GoogleItem shapes
instead of placeholder text shapes
Items added from GoogleExportBrowser now appear as proper
GoogleItem shapes with privacy indicators inside the workspace.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- PrivateWorkspaceShapeUtil: Frosted glass container shape with:
- Dashed indigo border for visual distinction
- Pin/collapse/close buttons in header
- Dark mode support
- Position/size persistence to localStorage
- Helper functions for zone detection
- PrivateWorkspaceTool: Tool for creating workspace zones
- usePrivateWorkspace hook:
- Creates/toggles workspace visibility
- Listens for 'add-google-items-to-canvas' events
- Places items inside the private zone
- Persists visibility state
- PrivateWorkspaceManager: Headless component that manages
workspace lifecycle inside Tldraw context
Items added from GoogleExportBrowser will now appear in the
Private Workspace zone as placeholder text shapes (Phase 4
will add proper GoogleItemShape with visual badges).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Rename component file and interface for consistent naming
- Update all imports and state variables in UserSettingsModal
- Better reflects the purpose as a data export browser
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Phase 2 of Data Sovereignty Zone implementation:
- Create GoogleDataBrowser component with service tabs (Gmail, Drive, Photos, Calendar)
- Searchable item list with checkboxes for multi-select
- Select All/Clear functionality
- Dark mode support with consistent styling
- "Add to Private Workspace" button
- Privacy note explaining local-only encryption
- Emits 'add-google-items-to-canvas' event for Board.tsx integration
Integration with UserSettingsModal:
- Import and render GoogleDataBrowser when "Open Data Browser" clicked
- Handler for adding selected items to canvas
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Phase 1 of Data Sovereignty Zone implementation:
- Add Google Workspace section to Settings > Integrations tab
- Show connection status, import counts (emails, files, photos, events)
- Connect/Disconnect Google account buttons
- "Open Data Browser" button (Phase 2 will implement the browser)
- Add getStoredCounts() and getInstance() to GoogleDataService
Privacy messaging: "Your data is encrypted with AES-256 and stored
only in your browser. Choose what to share to the board."
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Bring in all the latest changes from main including:
- Index validation and migration for tldraw shapes
- UserSettingsModal with integrations tab
- CryptID authentication updates
- AI services (image gen, video gen, mycelial intelligence)
- Automerge sync improvements
- Various UI improvements
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Jeff Emmett