makethisbetter 1.0.0

package/src/record/session.ts

@@ -0,0 +1,139 @@
+import type { ShadowContainer } from '../widget/shadow'
+
+type RRWebEvent = Record<string, unknown>
+type StopFn = () => void
+
+interface RRWebRecordFn {
+  (options: { emit: (event: RRWebEvent) => void }): StopFn
+  addCustomEvent: (tag: string, payload: Record<string, unknown>) => void
+}
+
+export interface RecordingResult {
+  events: RRWebEvent[]
+  duration: number
+}
+
+const MAX_DURATION_S = 60
+const RRWEB_CDN = 'https://cdn.jsdelivr.net/npm/rrweb@2/dist/rrweb.min.js'
+
+let rrwebLoaded: Promise<RRWebRecordFn> | null = null
+
+function loadRrweb(): Promise<RRWebRecordFn> {
+  if (rrwebLoaded) return rrwebLoaded
+  rrwebLoaded = loadViaImport().catch(() => loadViaCdn())
+  return rrwebLoaded
+}
+
+async function loadViaImport(): Promise<RRWebRecordFn> {
+  const mod = await import('rrweb')
+  return mod.record as unknown as RRWebRecordFn
+}
+
+function loadViaCdn(): Promise<RRWebRecordFn> {
+  return new Promise((resolve, reject) => {
+    const win = globalThis as unknown as Window & { rrweb?: { record: RRWebRecordFn } }
+    if (win.rrweb?.record) { resolve(win.rrweb.record); return }
+    const script = document.createElement('script')
+    script.src = RRWEB_CDN
+    script.onload = () => {
+      const w = globalThis as unknown as Window & { rrweb?: { record: RRWebRecordFn } }
+      if (w.rrweb?.record) resolve(w.rrweb.record)
+      else reject(new Error('rrweb global not found after script load'))
+    }
+    script.onerror = () => reject(new Error('Failed to load rrweb from CDN'))
+    document.head.appendChild(script)
+  })
+}
+
+export class RecordSession {
+  private events: RRWebEvent[] = []
+  private stopFn: StopFn | null = null
+  private startedAt = 0
+  private timer: ReturnType<typeof setTimeout> | null = null
+  private clickHandler: ((e: MouseEvent) => void) | null = null
+  private shadow: ShadowContainer
+  private onMaxReached?: () => void
+  private stopped = false
+
+  constructor(shadow: ShadowContainer, onMaxReached?: () => void) {
+    this.shadow = shadow
+    this.onMaxReached = onMaxReached
+  }
+
+  async start(): Promise<void> {
+    const record = await loadRrweb()
+
+    this.startedAt = Date.now()
+    this.stopped = false
+
+    this.stopFn = record({
+      emit: (event: RRWebEvent) => {
+        if (!this.stopped) this.events.push(event)
+      },
+    })
+
+    this.clickHandler = (e: MouseEvent) => {
+      this.showClickRipple(e.clientX, e.clientY)
+      record.addCustomEvent?.('mtb-click', {
+        x: e.clientX,
+        y: e.clientY,
+        target: e.target instanceof HTMLElement ? e.target.tagName : '',
+      })
+    }
+    document.addEventListener('click', this.clickHandler, true)
+
+    this.timer = setTimeout(() => {
+      this.onMaxReached?.()
+    }, MAX_DURATION_S * 1000)
+  }
+
+  stop(): RecordingResult {
+    this.stopped = true
+    this.stopFn?.()
+    this.stopFn = null
+    this.cleanupTimer()
+    this.cleanupClickHandler()
+
+    return {
+      events: this.events,
+      duration: this.getDuration(),
+    }
+  }
+
+  getDuration(): number {
+    if (this.startedAt === 0) return 0
+    return Math.round((Date.now() - this.startedAt) / 1000)
+  }
+
+  destroy(): void {
+    this.stopped = true
+    this.stopFn?.()
+    this.stopFn = null
+    this.cleanupTimer()
+    this.cleanupClickHandler()
+    this.events = []
+    this.startedAt = 0
+  }
+
+  private cleanupTimer(): void {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+  }
+
+  private cleanupClickHandler(): void {
+    if (this.clickHandler) {
+      document.removeEventListener('click', this.clickHandler, true)
+      this.clickHandler = null
+    }
+  }
+
+  private showClickRipple(x: number, y: number): void {
+    const ripple = this.shadow.el<HTMLDivElement>('div', 'mtb-click-ripple')
+    ripple.style.left = `${x}px`
+    ripple.style.top = `${y}px`
+    this.shadow.append(ripple)
+    ripple.addEventListener('animationend', () => ripple.remove())
+  }
+}

package/src/screenshot/capture.test.ts

@@ -0,0 +1,68 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { toPng } from 'html-to-image'
+import { captureScreenshot } from './capture'
+import type { Annotation } from '../types'
+
+vi.mock('html-to-image', () => ({
+  toPng: vi.fn(async () => 'data:image/png;base64,AA=='),
+}))
+
+const toPngMock = vi.mocked(toPng)
+
+describe('captureScreenshot', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+    toPngMock.mockClear()
+  })
+
+  it('captures a png blob', async () => {
+    const blob = await captureScreenshot()
+
+    expect(blob).toBeInstanceOf(Blob)
+    expect(blob?.type).toBe('image/png')
+    expect(toPngMock).toHaveBeenCalledWith(
+      document.body,
+      expect.objectContaining({
+        cacheBust: true,
+        skipAutoScale: false,
+      }),
+    )
+  })
+
+  it('mounts pin annotations during capture and removes them after capture', async () => {
+    let captureText = ''
+    toPngMock.mockImplementationOnce(async () => {
+      captureText = document.querySelector<HTMLElement>('[data-mtb-capture-annotations]')?.textContent ?? ''
+      return 'data:image/png;base64,AA=='
+    })
+
+    const annotation: Annotation = { type: 'pin', x: 40, y: 60 }
+    await captureScreenshot([annotation])
+
+    expect(captureText).toContain('1')
+    expect(document.querySelector('[data-mtb-capture-annotations]')).toBeNull()
+  })
+
+  it('mounts draw annotations during capture', async () => {
+    let drawPath: string | null = null
+    toPngMock.mockImplementationOnce(async () => {
+      drawPath = document.querySelector('[data-mtb-capture-annotations] path')?.getAttribute('d') ?? null
+      return 'data:image/png;base64,AA=='
+    })
+
+    const annotation: Annotation = { type: 'draw', x: 50, y: 50, drawPath: 'M 10 10 L 90 90' }
+    await captureScreenshot([annotation])
+
+    expect(drawPath).toBe('M 10 10 L 90 90')
+  })
+
+  it('returns null and cleans up if capture fails', async () => {
+    toPngMock.mockRejectedValueOnce(new Error('capture failed'))
+
+    const annotation: Annotation = { type: 'pin', x: 40, y: 60 }
+    const blob = await captureScreenshot([annotation])
+
+    expect(blob).toBeNull()
+    expect(document.querySelector('[data-mtb-capture-annotations]')).toBeNull()
+  })
+})

package/src/screenshot/capture.ts

@@ -0,0 +1,96 @@
+import { toPng } from 'html-to-image'
+import type { Annotation } from '../types'
+
+export async function captureScreenshot(annotations: Annotation[] = []): Promise<Blob | null> {
+  const annotationLayer = mountCaptureAnnotations(annotations)
+
+  try {
+    const dataUrl = await toPng(document.body, {
+      cacheBust: true,
+      skipAutoScale: false,
+      filter: (node) => {
+        if (node instanceof HTMLElement && node.id === 'mtb-widget-host') return false
+        return true
+      },
+    })
+    return dataUrlToBlob(dataUrl)
+  } catch {
+    return null
+  } finally {
+    annotationLayer?.remove()
+  }
+}
+
+function mountCaptureAnnotations(annotations: Annotation[]): HTMLDivElement | null {
+  if (annotations.length === 0) return null
+
+  const layer = document.createElement('div')
+  layer.setAttribute('data-mtb-capture-annotations', 'true')
+  layer.setAttribute('aria-hidden', 'true')
+  layer.style.cssText = 'position:fixed;inset:0;pointer-events:none;z-index:2147483645;'
+
+  for (const [index, annotation] of annotations.entries()) {
+    if (annotation.type === 'pin') {
+      layer.appendChild(buildCapturePin(annotation, index + 1))
+    } else if (annotation.type === 'draw' && annotation.drawPath) {
+      layer.appendChild(buildCaptureDraw(annotation.drawPath))
+    }
+  }
+
+  document.body.appendChild(layer)
+  return layer
+}
+
+function buildCapturePin(annotation: Annotation, index: number): HTMLDivElement {
+  const pin = document.createElement('div')
+  pin.textContent = String(index)
+  pin.style.cssText = [
+    'position:fixed',
+    `left:${annotation.x}px`,
+    `top:${annotation.y}px`,
+    'width:22px',
+    'height:22px',
+    'border-radius:50% 50% 50% 2px',
+    'background:#059669',
+    'border:2px solid #fff',
+    'display:flex',
+    'align-items:center',
+    'justify-content:center',
+    'font:700 10px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif',
+    'color:#fff',
+    'box-shadow:0 2px 8px rgba(5,150,105,0.45)',
+    'transform:translate(-50%,-50%)',
+  ].join(';')
+  return pin
+}
+
+function buildCaptureDraw(drawPath: string): SVGSVGElement {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  svg.setAttribute('width', '100%')
+  svg.setAttribute('height', '100%')
+  svg.setAttribute('viewBox', `0 0 ${window.innerWidth} ${window.innerHeight}`)
+  svg.style.cssText = 'position:fixed;inset:0;width:100%;height:100%;overflow:visible;'
+
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+  path.setAttribute('d', drawPath)
+  path.setAttribute('fill', 'none')
+  path.setAttribute('stroke', '#059669')
+  path.setAttribute('stroke-width', '3.5')
+  path.setAttribute('stroke-linecap', 'round')
+  path.setAttribute('stroke-linejoin', 'round')
+  path.setAttribute('filter', 'drop-shadow(0 1px 2px rgba(5,150,105,0.35))')
+  svg.appendChild(path)
+
+  return svg
+}
+
+function dataUrlToBlob(dataUrl: string): Blob {
+  const [header, data] = dataUrl.split(',')
+  const mime = header.match(/:(.*?);/)?.[1] ?? 'image/png'
+  const binary = atob(data)
+  const bytes = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i)
+  }
+  return new Blob([bytes], { type: mime })
+}