# Feature Spec: Whiteboard (Frihåndstavle) **Filsti:** `docs/features/whiteboard.md` ## 1. Konsept Et delt, sanntids tegnebrett for frihåndsskisser, diagrammer og visuell brainstorming. Whiteboardet er en selvstendig komponent som kan brukes i flere kontekster: i møterom, i chat-tråder knyttet til et Tema, eller alene som personlig skisseblokk. ## 2. Brukskontekster | Kontekst | Deltakere | Lagring | |---|---|---| | **Møterom** | Alle møtedeltakere i sanntid | Eksporteres som bilde ved møteslutt, knyttes til møtereferatet | | **Tema-chat** | Alle med tilgang til temaet | Lagres som vedlegg til en melding, synlig i chat-historikken | | **Personlig** | Kun brukeren selv | Privat skisse, kan deles til et Tema senere | ## 3. Sanntidssynkronisering * PG LISTEN/NOTIFY + WebSocket synkroniserer strøk (penseltype, farge, koordinater) mellom alle deltakere i sanntid. * Hvert whiteboard har en unik ID og er en node i grafen. * Tilgangskontroll følger konteksten: møterom-deltakere, tema-medlemmer, eller kun eieren for personlige tavler. ## 4. Funksjonalitet * **Tegneverktøy:** Frihåndstegning, rette linjer, rektangler, ellipser, tekst, piler. * **Interaksjon:** Fargevelger, strektykkelse, viskelær, angre/gjør om. * **Implementering:** HTML Canvas eller SVG i SvelteKit. Vurder et lett bibliotek (f.eks. tldraw, Excalidraw) hvis frihåndskvaliteten krever det — men foretrekk egenutviklet for å holde avhengigheter nede. ## 5. Lagring og Eksport * **Sanntidsdata:** Strøk-historikk lagres i PG og propageres via WebSocket. * **Eksport (PostgreSQL + filsystem):** Når tavlen "lukkes" eller deles, rendres den til PNG eller SVG og lagres som en `media_file`. Referansen knyttes til konteksten (melding, møte) via `message_attachments` eller tilsvarende. ## 6. Instruks for Claude Code * Whiteboard-komponenten skal være en gjenbrukbar Svelte-komponent som kan mountes i møterom, chat og som frittstående side. * PG-tabellen for strøk bør være enkel: `whiteboard_id`, `stroke_data` (JSON), `user_id`, `timestamp`. NOTIFY-trigger for sanntid. * Ikke bygg et fullverdig tegneprogram — start med frihåndstegning, viskelær og farger. Utvid ved behov. * Tilgang til whiteboards styres via `node_access`-matrisen.