From fb1b8a8d45f05cdda90736f58245c50dd940eb28 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 29 Sep 2026 04:44:15 +0100
Subject: [PATCH] feat: add live cursors + touchpad page (#1977)

---
 app/app.vue              |   2 +-
 app/pages/touchpad.vue   | 416 +++++++++++++++++++++++++++++++++++++++
 budget.json              |   2 +-
 nuxt.config.ts           |   1 +
 partykit/cursors.ts      | 262 ++++++++++++++++++++++++
 partykit/server.ts       |  37 +++-
 test/unit/bundle.spec.ts |   2 +-
 7 files changed, 717 insertions(+), 5 deletions(-)
 create mode 100644 app/pages/touchpad.vue
 create mode 100644 partykit/cursors.ts

diff --git a/app/app.vue b/app/app.vue
index a9616413..7db759f9 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -30,7 +30,7 @@ defineOgImage('DefaultImage', {
   tags: [],
 })
 
-const isAdmin = computed(() => route.path === '/admin' || route.path.startsWith('/admin/'))
+const isAdmin = computed(() => route.path === '/admin' || route.path.startsWith('/admin/') || route.path === '/touchpad')
 
 // TODO: interactive components within server components
 const highlightIslands = ref(false)
diff --git a/app/pages/touchpad.vue b/app/pages/touchpad.vue
new file mode 100644
index 00000000..50b67a78
--- /dev/null
+++ b/app/pages/touchpad.vue
@@ -0,0 +1,416 @@
+<template>
+  <div
+    class="touchpad fixed inset-0 grid gap-4 bg-background text-primary font-sans select-none touch-none"
+    :style="{ '--me': me?.color || 'rgb(var(--muted))' }"
+  >
+    <header class="touchpad-header flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <span
+          class="block w-8 h-8 rounded-full bg-[var(--me)] transition-colors duration-300"
+          aria-hidden="true"
+        />
+        <div class="leading-none">
+          <p class="text-xs uppercase tracking-widest text-muted">
+            {{ me ? 'you are' : status === 'open' ? 'joining…' : 'connecting…' }}
+          </p>
+          <p class="text-2xl font-semibold mt-1 lowercase">
+            {{ me?.name || '\u00A0' }}
+          </p>
+        </div>
+      </div>
+      <span
+        class="block w-2 h-2 rounded-full"
+        :class="status === 'open' ? 'bg-green-500' : 'bg-red-500 animate-pulse'"
+        :aria-label="status === 'open' ? 'connected' : 'reconnecting'"
+      />
+    </header>
+
+    <section
+      class="touchpad-map-wrap flex flex-col gap-2"
+      aria-hidden="true"
+    >
+      <p
+        v-if="scene?.title"
+        class="text-lg text-center"
+      >
+        {{ scene.title }}
+      </p>
+      <div
+        ref="map"
+        class="relative w-full aspect-video bg-accent"
+      >
+        <div
+          v-for="zone in scene?.zones || []"
+          :key="zone.id"
+          class="touchpad-zone absolute flex items-center justify-center p-1 text-sm text-center leading-tight transition duration-200"
+          :class="{
+            'is-active': zone.id === currentZone,
+            'is-winner': zone.id === winner,
+            'opacity-30': winner && zone.id !== winner,
+          }"
+          :style="{
+            'left': `${zone.x * 100}%`,
+            'top': `${zone.y * 100}%`,
+            'width': `${zone.w * 100}%`,
+            'height': `${zone.h * 100}%`,
+            '--zone': zone.color,
+          }"
+        >
+          <span>{{ zone.label }}</span>
+        </div>
+        <span
+          class="absolute -top-1.5 -left-1.5 w-3 h-3 rounded-full bg-[var(--me)] ring-2 ring-primary will-change-transform"
+          :style="{ transform: `translate(${pos.x * mapSize.w}px, ${pos.y * mapSize.h}px)` }"
+        />
+      </div>
+      <p class="min-h-[1.25em] text-sm text-center text-muted">
+        <template v-if="winner && winnerLabel">
+          🎉 {{ winnerLabel }}
+        </template>
+        <template v-else-if="scene?.zones?.length">
+          {{ currentZoneLabel ? `voting for ${currentZoneLabel}` : 'move into a zone to vote' }}
+        </template>
+        <template v-else>
+          drag to move · tap to click
+        </template>
+      </p>
+    </section>
+
+    <div
+      ref="surface"
+      class="touchpad-surface relative min-h-32 overflow-hidden touch-none cursor-crosshair bg-accent"
+      @pointerdown="onDown"
+      @pointermove="onMove"
+      @pointerup="onUp"
+      @pointercancel="onCancel"
+      @contextmenu.prevent
+    >
+      <span
+        v-for="ripple in ripples"
+        :key="ripple.id"
+        class="touchpad-ripple absolute w-12 h-12 -ml-6 -mt-6 border-2 border-[var(--me)] rounded-full pointer-events-none"
+        :style="{ left: `${ripple.x}px`, top: `${ripple.y}px` }"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import PartySocket from 'partysocket'
+
+interface Zone { id: string, label: string, color: string, x: number, y: number, w: number, h: number }
+interface Scene { title?: string, zones: Zone[] }
+interface Me { id: string, name: string, color: string }
+
+useHead({
+  title: 'touchpad',
+  htmlAttrs: { class: 'touchpad-root' },
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover' },
+  ],
+})
+
+const status = ref<'connecting' | 'open' | 'closed'>('connecting')
+const me = ref<Me>()
+const scene = ref<Scene | null>(null)
+const winner = ref<string | null>(null)
+const pos = reactive({ x: 0.5, y: 0.5 })
+const surface = useTemplateRef<HTMLElement>('surface')
+const mapEl = useTemplateRef<HTMLElement>('map')
+const ripples = ref<Array<{ id: number, x: number, y: number }>>([])
+const mapSize = reactive({ w: 0, h: 0 })
+
+const currentZone = computed(() => scene.value?.zones.find(z => pos.x >= z.x && pos.x <= z.x + z.w && pos.y >= z.y && pos.y <= z.y + z.h)?.id ?? null)
+const currentZoneLabel = computed(() => scene.value?.zones.find(z => z.id === currentZone.value)?.label)
+const winnerLabel = computed(() => scene.value?.zones.find(z => z.id === winner.value)?.label)
+
+const vibrate = (pattern: number | number[]) => navigator.vibrate?.(pattern)
+
+watch(currentZone, zone => {
+  if (zone) vibrate(10)
+})
+
+let socket: PartySocket | undefined
+let dirty = false
+let sendTimer: ReturnType<typeof setInterval> | undefined
+
+function send (msg: Record<string, unknown>) {
+  if (socket?.readyState === WebSocket.OPEN) socket.send(JSON.stringify(msg))
+}
+
+function getId () {
+  let id = localStorage.getItem('touchpad-id')
+  if (!id) {
+    id = globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}${Math.random().toString(36).slice(2)}`
+    localStorage.setItem('touchpad-id', id)
+  }
+  return id
+}
+
+function setPos (x: number, y: number) {
+  x = Math.min(1, Math.max(0, x))
+  y = Math.min(1, Math.max(0, y))
+  if (x === pos.x && y === pos.y) return
+  pos.x = x
+  pos.y = y
+  dirty = true
+}
+
+/* gesture handling */
+const SENSITIVITY = 1 / 380
+const ACCELERATION = 0.6
+const FRICTION = 0.004
+const MAX_SPEED = 0.003
+const TAP_MAX_MS = 250
+const TAP_MAX_PX = 10
+
+let activePointer: number | null = null
+let last = { x: 0, y: 0, t: 0 }
+let start = { x: 0, y: 0, t: 0 }
+let travelled = 0
+let velocity = { x: 0, y: 0 }
+let inertiaFrame: number | undefined
+
+function stopInertia () {
+  if (inertiaFrame) cancelAnimationFrame(inertiaFrame)
+  inertiaFrame = undefined
+}
+
+function onDown (e: PointerEvent) {
+  if (activePointer !== null) return
+  e.preventDefault()
+  stopInertia()
+  activePointer = e.pointerId
+  surface.value?.setPointerCapture(e.pointerId)
+  start = last = { x: e.clientX, y: e.clientY, t: e.timeStamp }
+  travelled = 0
+  velocity = { x: 0, y: 0 }
+}
+
+function onMove (e: PointerEvent) {
+  if (e.pointerId !== activePointer) return
+  e.preventDefault()
+  const events = e.getCoalescedEvents?.() || [e]
+  for (const ev of events) {
+    const dx = ev.clientX - last.x
+    const dy = ev.clientY - last.y
+    const dt = Math.max(8, ev.timeStamp - last.t)
+    const dist = Math.hypot(dx, dy)
+    travelled += dist
+    const gain = SENSITIVITY * (1 + ACCELERATION * Math.min(3, dist / dt))
+    const mx = dx * gain
+    // y is scaled by the slide aspect ratio so equal finger movement is equal on-screen movement
+    const my = dy * gain * (16 / 9)
+    setPos(pos.x + mx, pos.y + my)
+    const k = 0.35
+    velocity = { x: velocity.x * (1 - k) + (mx / dt) * k, y: velocity.y * (1 - k) + (my / dt) * k }
+    const speed = Math.hypot(velocity.x, velocity.y)
+    if (speed > MAX_SPEED) velocity = { x: velocity.x / speed * MAX_SPEED, y: velocity.y / speed * MAX_SPEED }
+    last = { x: ev.clientX, y: ev.clientY, t: ev.timeStamp }
+  }
+}
+
+function onUp (e: PointerEvent) {
+  if (e.pointerId !== activePointer) return
+  activePointer = null
+  const isTap = e.timeStamp - start.t < TAP_MAX_MS && travelled < TAP_MAX_PX
+  if (isTap) {
+    tap(e)
+    return
+  }
+  if (e.timeStamp - last.t > 60) return
+  let prev = performance.now()
+  const step = (now: number) => {
+    const dt = Math.min(50, now - prev)
+    prev = now
+    const decay = Math.exp(-FRICTION * dt)
+    velocity.x *= decay
+    velocity.y *= decay
+    setPos(pos.x + velocity.x * dt, pos.y + velocity.y * dt)
+    if (Math.hypot(velocity.x, velocity.y) > 0.00002) inertiaFrame = requestAnimationFrame(step)
+    else inertiaFrame = undefined
+  }
+  inertiaFrame = requestAnimationFrame(step)
+}
+
+function onCancel (e: PointerEvent) {
+  if (e.pointerId === activePointer) activePointer = null
+}
+
+let rippleId = 0
+function tap (e: PointerEvent) {
+  dirty = false
+  send({ t: 'tap', x: pos.x, y: pos.y })
+  vibrate(5)
+  const rect = surface.value!.getBoundingClientRect()
+  const id = rippleId++
+  ripples.value.push({ id, x: e.clientX - rect.left, y: e.clientY - rect.top })
+  setTimeout(() => {
+    ripples.value = ripples.value.filter(r => r.id !== id)
+  }, 600)
+}
+
+/* wake lock keeps the phone from sleeping mid-talk */
+let wakeLock: { release: () => Promise<void> } | undefined
+async function requestWakeLock () {
+  try {
+    wakeLock = await (navigator as any).wakeLock?.request('screen')
+  }
+  catch {
+    // unsupported or denied
+  }
+}
+function onVisibility () {
+  if (document.visibilityState === 'visible') {
+    requestWakeLock()
+    if (socket && socket.readyState !== WebSocket.OPEN) socket.reconnect()
+  }
+}
+
+let resizeObserver: ResizeObserver | undefined
+
+onMounted(() => {
+  const params = new URLSearchParams(location.search)
+  const host = params.get('host') || (import.meta.dev ? 'localhost:1999' : 'v.danielroe.partykit.dev')
+  socket = new PartySocket({ host, room: 'cursors', query: { role: 'phone' } })
+
+  socket.addEventListener('open', () => {
+    status.value = 'open'
+    send({ t: 'hello', id: getId() })
+  })
+  socket.addEventListener('close', () => {
+    status.value = 'closed'
+  })
+  socket.addEventListener('message', event => {
+    let msg: any
+    try {
+      msg = JSON.parse(event.data)
+    }
+    catch {
+      return
+    }
+    switch (msg.t) {
+      case 'you':
+        me.value = { id: msg.id, name: msg.name, color: msg.color }
+        if (typeof msg.x === 'number' && typeof msg.y === 'number') {
+          pos.x = msg.x
+          pos.y = msg.y
+        }
+        break
+      case 'scene':
+        scene.value = msg.scene
+        winner.value = null
+        break
+      case 'result':
+        winner.value = msg.zoneId
+        vibrate(msg.zoneId === currentZone.value ? [30, 60, 30, 60, 80] : 20)
+        break
+      case 'reset':
+        stopInertia()
+        setPos(0.5, 0.5)
+        break
+    }
+  })
+
+  sendTimer = setInterval(() => {
+    if (!dirty) return
+    dirty = false
+    send({ t: 'p', x: pos.x, y: pos.y })
+  }, 33)
+
+  const map = mapEl.value
+  if (map) {
+    resizeObserver = new ResizeObserver(() => {
+      mapSize.w = map.clientWidth
+      mapSize.h = map.clientHeight
+    })
+    resizeObserver.observe(map)
+  }
+
+  requestWakeLock()
+  document.addEventListener('visibilitychange', onVisibility)
+})
+
+onBeforeUnmount(() => {
+  stopInertia()
+  clearInterval(sendTimer)
+  resizeObserver?.disconnect()
+  document.removeEventListener('visibilitychange', onVisibility)
+  wakeLock?.release().catch(() => {})
+  socket?.close()
+})
+</script>
+
+<style>
+html.touchpad-root,
+html.touchpad-root body {
+  overscroll-behavior: none;
+  overflow: hidden;
+  height: 100%;
+}
+</style>
+
+<style scoped>
+.touchpad {
+  grid-template-rows: auto auto 1fr;
+  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.touchpad-zone {
+  border: 2px solid var(--zone);
+  background: color-mix(in srgb, var(--zone) 12%, transparent);
+}
+
+.touchpad-zone.is-active {
+  background: color-mix(in srgb, var(--zone) 40%, transparent);
+}
+
+.touchpad-zone.is-winner {
+  background: var(--zone);
+  color: #111827;
+}
+
+.touchpad-surface {
+  background-image: radial-gradient(circle at center, rgb(var(--muted) / 25%) 1px, transparent 1.5px);
+  background-size: 22px 22px;
+}
+
+.touchpad-ripple {
+  animation: ripple 0.6s ease-out forwards;
+}
+
+@media (orientation: landscape) and (height <= 600px) {
+  .touchpad {
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    grid-template-rows: auto 1fr;
+  }
+
+  .touchpad-header {
+    grid-column: 1;
+  }
+
+  .touchpad-map-wrap {
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  .touchpad-surface {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+  }
+}
+
+@keyframes ripple {
+  from {
+    opacity: 1;
+    transform: scale(0.4);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+</style>
diff --git a/budget.json b/budget.json
index ede86610..9627e1a0 100644
--- a/budget.json
+++ b/budget.json
@@ -8,7 +8,7 @@
       },
       {
         "resourceType": "script",
-        "budget": 111
+        "budget": 113
       },
       {
         "resourceType": "stylesheet",
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d2f68cee..e1405335 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -192,6 +192,7 @@ export default defineNuxtConfig({
     // redirects
     '/feed.xml': { redirect: '/rss.xml' },
     '/work': { redirect: '/projects' },
+    '/pad': { redirect: '/touchpad' },
     '/thumbnail/**': { cache: { maxAge: 60 * 60 * 24 * 365 } },
     '/blog/a-virtuous-cycle': { redirect: '/blog/virtuous-circle' },
     '/blog/ai-writes-my-code': { redirect: 'https://www.youtube.com/watch?v=Zfs3BJZxKkc' },
diff --git a/partykit/cursors.ts b/partykit/cursors.ts
new file mode 100644
index 00000000..18669bfd
--- /dev/null
+++ b/partykit/cursors.ts
@@ -0,0 +1,262 @@
+import type * as Party from 'partykit/server'
+
+export interface Cursor {
+  id: string
+  name: string
+  color: string
+  x: number
+  y: number
+}
+
+export interface Zone {
+  id: string
+  label: string
+  color: string
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export interface Scene {
+  title?: string
+  zones: Zone[]
+}
+
+interface ConnState {
+  role: 'host' | 'phone'
+  id?: string
+}
+
+const ADJECTIVES = ['Brave', 'Sleepy', 'Jolly', 'Sneaky', 'Fuzzy', 'Clever', 'Bouncy', 'Cosy', 'Zippy', 'Plucky', 'Witty', 'Sunny', 'Mighty', 'Curious', 'Dapper', 'Nimble', 'Gentle', 'Merry', 'Bold', 'Quirky']
+const NOUNS = ['Knedlík', 'Trdelník', 'Golem', 'Krtek', 'Pivo', 'Koláček', 'Rohlík', 'Vltava', 'Klobása', 'Švejk', 'Beaver', 'Otter', 'Lynx', 'Heron', 'Badger', 'Hedgehog', 'Stork', 'Marten', 'Owl', 'Carp']
+const COLORS = ['#ff5d8f', '#ffb347', '#ffe156', '#8ce99a', '#38d9a9', '#4dabf7', '#748ffc', '#b197fc', '#f783ac', '#ff8787', '#63e6be', '#74c0fc', '#ffa94d', '#d0bfff', '#a9e34b', '#66d9e8']
+
+const BROADCAST_INTERVAL = 33
+const MAX_CURSORS = 500
+
+const clamp = (n: unknown) => typeof n === 'number' && Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : 0.5
+
+export default class CursorsParty implements Party.Server {
+  cursors = new Map<string, Cursor>()
+  online = new Map<string, Set<string>>()
+  scene: Scene | null = null
+  pending = new Map<string, { x: number, y: number }>()
+  timer: ReturnType<typeof setTimeout> | undefined
+  assigned = 0
+
+  constructor (readonly room: Party.Room) {}
+
+  async onStart () {
+    this.scene = await this.room.storage.get<Scene | null>('scene') ?? null
+    const stored = await this.room.storage.get<Cursor[]>('cursors')
+    for (const c of stored || []) this.cursors.set(c.id, c)
+    this.assigned = this.cursors.size
+  }
+
+  onConnect (conn: Party.Connection<ConnState>, ctx: Party.ConnectionContext) {
+    const params = new URL(ctx.request.url).searchParams
+    const token = this.room.env.CURSORS_HOST_TOKEN as string | undefined
+    const role = params.get('role') === 'host' && (!token || params.get('token') === token) ? 'host' : 'phone'
+    conn.setState({ role })
+    if (role === 'host') {
+      conn.send(JSON.stringify({ t: 'sync', cursors: this.onlineCursors() }))
+      conn.send(JSON.stringify({ t: 'scene', scene: this.scene }))
+    }
+    else {
+      conn.send(JSON.stringify({ t: 'scene', scene: this.scene }))
+    }
+  }
+
+  onMessage (raw: string | ArrayBuffer | ArrayBufferView, conn: Party.Connection<ConnState>) {
+    if (typeof raw !== 'string' || raw.length > 20_000) return
+    let msg: Record<string, any>
+    try {
+      msg = JSON.parse(raw)
+    }
+    catch {
+      return
+    }
+    if (!msg || typeof msg !== 'object') return
+    const state = conn.state
+    if (!state) return
+
+    if (state.role === 'host') {
+      this.onHostMessage(msg)
+      return
+    }
+
+    switch (msg.t) {
+      case 'hello': {
+        const id = typeof msg.id === 'string' && msg.id.length >= 16 && msg.id.length <= 64 ? msg.id : conn.id
+        if (state.id && state.id !== id) this.detach(state.id, conn.id)
+        conn.setState({ role: 'phone', id })
+        let cursor = this.cursors.get(id)
+        if (!cursor) {
+          const n = this.assigned++
+          cursor = {
+            id,
+            name: this.makeName(n),
+            color: COLORS[n % COLORS.length]!,
+            x: 0.5,
+            y: 0.5,
+          }
+          this.cursors.set(id, cursor)
+          this.evict()
+          this.persist()
+        }
+        if (typeof msg.name === 'string' && msg.name.trim()) {
+          cursor.name = msg.name.trim().slice(0, 32)
+          this.persist()
+        }
+        const conns = this.online.get(id) ?? new Set()
+        const wasOnline = conns.size > 0
+        conns.add(conn.id)
+        this.online.set(id, conns)
+        conn.send(JSON.stringify({ t: 'you', ...cursor }))
+        if (!wasOnline) this.toHosts({ t: 'join', ...cursor })
+        break
+      }
+      case 'p': {
+        const cursor = state.id && this.cursors.get(state.id)
+        if (!cursor) return
+        cursor.x = clamp(msg.x)
+        cursor.y = clamp(msg.y)
+        this.pending.set(cursor.id, { x: cursor.x, y: cursor.y })
+        this.schedule()
+        break
+      }
+      case 'tap': {
+        const cursor = state.id && this.cursors.get(state.id)
+        if (!cursor) return
+        cursor.x = clamp(msg.x)
+        cursor.y = clamp(msg.y)
+        this.pending.delete(cursor.id)
+        this.toHosts({ t: 'tap', id: cursor.id, x: cursor.x, y: cursor.y })
+        break
+      }
+    }
+  }
+
+  onClose (conn: Party.Connection<ConnState>) {
+    const id = conn.state?.role === 'phone' ? conn.state.id : undefined
+    if (id) this.detach(id, conn.id)
+  }
+
+  onError (conn: Party.Connection<ConnState>) {
+    this.onClose(conn)
+  }
+
+  onHostMessage (msg: Record<string, any>) {
+    switch (msg.t) {
+      case 'scene': {
+        this.scene = sanitiseScene(msg.scene)
+        this.room.storage.put('scene', this.scene)
+        const payload = JSON.stringify({ t: 'scene', scene: this.scene })
+        this.room.broadcast(payload)
+        break
+      }
+      case 'result':
+        this.toPhones({ t: 'result', zoneId: typeof msg.zoneId === 'string' ? msg.zoneId : null })
+        break
+      case 'reset':
+        for (const [id, cursor] of this.cursors) {
+          cursor.x = 0.5
+          cursor.y = 0.5
+          if (this.online.get(id)?.size) this.pending.set(id, { x: 0.5, y: 0.5 })
+        }
+        this.schedule()
+        this.toPhones({ t: 'reset' })
+        break
+      case 'clear':
+        // forget all names/colours, e.g. between rehearsal and the real talk
+        this.cursors.clear()
+        this.assigned = 0
+        this.room.storage.delete('cursors')
+        for (const conn of this.room.getConnections<ConnState>()) {
+          if (conn.state?.role === 'phone') conn.close(4000, 'reset')
+        }
+        this.online.clear()
+        this.toHosts({ t: 'sync', cursors: [] })
+        break
+    }
+  }
+
+  detach (id: string, connId: string) {
+    const conns = this.online.get(id)
+    if (!conns) return
+    conns.delete(connId)
+    if (conns.size) return
+    this.online.delete(id)
+    this.pending.delete(id)
+    this.toHosts({ t: 'leave', id })
+    this.persist()
+  }
+
+  evict () {
+    for (const id of this.cursors.keys()) {
+      if (this.cursors.size <= MAX_CURSORS) return
+      if (!this.online.get(id)?.size) this.cursors.delete(id)
+    }
+  }
+
+  schedule () {
+    if (this.timer) return
+    this.timer = setTimeout(() => {
+      this.timer = undefined
+      for (const [id, { x, y }] of this.pending) this.toHosts({ t: 'p', id, x, y })
+      this.pending.clear()
+    }, BROADCAST_INTERVAL)
+  }
+
+  onlineCursors () {
+    return [...this.online.keys()].map(id => this.cursors.get(id)).filter(Boolean) as Cursor[]
+  }
+
+  makeName (n: number) {
+    const adj = ADJECTIVES[n % ADJECTIVES.length]
+    const noun = NOUNS[(n * 7 + Math.floor(n / ADJECTIVES.length)) % NOUNS.length]
+    return `${adj} ${noun}`
+  }
+
+  persistTimer: ReturnType<typeof setTimeout> | undefined
+  persist () {
+    if (this.persistTimer) return
+    this.persistTimer = setTimeout(() => {
+      this.persistTimer = undefined
+      this.room.storage.put('cursors', [...this.cursors.values()])
+    }, 1000)
+  }
+
+  toHosts (msg: unknown) {
+    const payload = JSON.stringify(msg)
+    for (const conn of this.room.getConnections<ConnState>()) {
+      if (conn.state?.role === 'host') conn.send(payload)
+    }
+  }
+
+  toPhones (msg: unknown) {
+    const payload = JSON.stringify(msg)
+    for (const conn of this.room.getConnections<ConnState>()) {
+      if (conn.state?.role === 'phone') conn.send(payload)
+    }
+  }
+}
+
+function sanitiseScene (scene: unknown): Scene | null {
+  if (!scene || typeof scene !== 'object') return null
+  const s = scene as Record<string, any>
+  const zones = Array.isArray(s.zones) ? s.zones : []
+  return {
+    title: typeof s.title === 'string' ? s.title.slice(0, 200) : undefined,
+    zones: zones.slice(0, 16).map((z: Record<string, any>, i: number) => ({
+      id: String(z?.id ?? i),
+      label: String(z?.label ?? ''),
+      color: typeof z?.color === 'string' ? z.color : COLORS[i % COLORS.length]!,
+      x: clamp(z?.x),
+      y: clamp(z?.y),
+      w: clamp(z?.w),
+      h: clamp(z?.h),
+    })),
+  }
+}
diff --git a/partykit/server.ts b/partykit/server.ts
index 54b631f1..42ec9c4c 100644
--- a/partykit/server.ts
+++ b/partykit/server.ts
@@ -1,8 +1,27 @@
 import type { PartyKitServer, Room } from 'partykit/server'
-import { isValidEmoji } from '#shared/utils/emoji'
+import { isValidEmoji } from '../shared/utils/emoji'
+import CursorsParty from './cursors'
+
+const cursorParties = new Map<string, Promise<CursorsParty>>()
+function getCursors (room: Room) {
+  let party = cursorParties.get(room.id)
+  if (!party) {
+    const instance = new CursorsParty(room)
+    party = instance.onStart().then(() => instance, err => {
+      cursorParties.delete(room.id)
+      throw err
+    })
+    cursorParties.set(room.id, party)
+  }
+  return party
+}
 
 export default {
-  async onConnect (ws, party) {
+  async onConnect (ws, party, ctx) {
+    if (party.id === 'cursors') {
+      return getCursors(party).then(c => c.onConnect(ws, ctx))
+    }
+
     // 1. send current vote count if applicable
     ws.send(`count:${await getCount(party)}`)
 
@@ -63,6 +82,10 @@ export default {
     return new Response('Invalid request', { status: 422 })
   },
   async onMessage (message, ws, party) {
+    if (party.id === 'cursors') {
+      return getCursors(party).then(c => c.onMessage(message, ws))
+    }
+
     const messageStr = message.toString()
 
     // 8. handle clearing votes from slide deck
@@ -99,6 +122,16 @@ export default {
       party.broadcast(messageStr)
     }
   },
+  async onClose (ws, party) {
+    if (party.id === 'cursors') {
+      return getCursors(party).then(c => c.onClose(ws))
+    }
+  },
+  async onError (ws, _err, party) {
+    if (party.id === 'cursors') {
+      return getCursors(party).then(c => c.onError(ws))
+    }
+  },
 } satisfies PartyKitServer
 
 const getCount = (room: Room) => room.storage.get<number>('count').then(r => r || 0)
diff --git a/test/unit/bundle.spec.ts b/test/unit/bundle.spec.ts
index 1f42488a..c5cf15f8 100644
--- a/test/unit/bundle.spec.ts
+++ b/test/unit/bundle.spec.ts
@@ -63,7 +63,7 @@ describe('project sizes', () => {
 
     expect
       .soft(roundToKilobytes(stats.client.totalBytes))
-      .toMatchInlineSnapshot(`"270k"`)
+      .toMatchInlineSnapshot(`"276k"`)
     expect.soft(stats.client.files.map(f => f.replace(/\..*\.js/, '.js')).sort())
       .toMatchInlineSnapshot(`
         [
-- 
2.51.2