@omg-dev/sdk 0.4.29 → 0.4.31

package/src/feedback/gestures.ts

@@ -1,296 +0,0 @@
-// @omg-dev/sdk/feedback — gesture triggers for the feedback widget.
-//
-// Dependency-free. Detects the gestures a user can use to summon the feedback
-// panel from anywhere in a running app:
-//
-//   - "shake"        device shake (accelerometer; iOS needs a permission grant)
-//   - "swipe-up"     swipe IN from the bottom edge
-//   - "swipe-down"   swipe IN from the top edge
-//   - "swipe-left"   swipe IN from the right edge
-//   - "swipe-right"  swipe IN from the left edge
-//   - "two-finger-press"  press-and-hold with two fingers (no OS-gesture conflict)
-//
-// Edge swipes overlap with OS gestures on some platforms (iOS Safari: left/right
-// edge = back/forward, bottom = home, top = control center). The default is the
-// conflict-free, permission-free "two-finger-press" — the developer opts into
-// edge swipes and "shake" explicitly. Every detector is a no-op on platforms
-// that lack the relevant input (no touch / no motion), so enabling any is safe.
-//
-// "shake" is deliberately NOT a default: iOS gates the accelerometer behind a
-// DeviceMotionEvent permission it refuses to persist across PWA launches, so a
-// shake default forces users to re-grant motion access every session. The
-// always-anchored feedback button (VibesFeedback `showButton`, on by default)
-// is the reliable cross-platform summon; shake is an opt-in bonus.
-
-import { useEffect, useRef, useState } from "react"
-
-export type FeedbackGesture =
-  | "shake"
-  | "swipe-up"
-  | "swipe-down"
-  | "swipe-left"
-  | "swipe-right"
-  | "two-finger-press"
-
-/** Default gestures when the host doesn't specify any. Permission-free and
- * OS-gesture-safe — notably excludes "shake" (see the note above). */
-export const DEFAULT_GESTURES: FeedbackGesture[] = ["two-finger-press"]
-
-export type MotionPermission = "granted" | "denied" | "prompt" | "unsupported"
-
-export interface GestureOptions {
-  /** Which gestures arm the trigger. Default: ["shake", "two-finger-press"]. */
-  gestures?: FeedbackGesture[]
-  /** Distance (px) from an edge a touch must START within to count as an edge swipe. Default 28. */
-  edgeSize?: number
-  /** Travel (px) a swipe must cover to fire. Default 90. */
-  swipeThreshold?: number
-  /** Max duration (ms) for a swipe — longer = a scroll/drag, ignored. Default 600. */
-  swipeMaxDuration?: number
-  /** Accelerometer delta that counts as a shake "jolt". Default 24. */
-  shakeThreshold?: number
-  /** Min hold (ms) for the two-finger press. Default 450. */
-  pressDuration?: number
-  /** Quiet period (ms) after a trigger before another can fire. Default 1200. */
-  cooldown?: number
-}
-
-const DEFAULTS: Required<Omit<GestureOptions, "gestures">> = {
-  edgeSize: 28,
-  swipeThreshold: 90,
-  swipeMaxDuration: 600,
-  shakeThreshold: 24,
-  pressDuration: 450,
-  cooldown: 1200,
-}
-
-function hasWindow(): boolean {
-  return typeof window !== "undefined" && typeof document !== "undefined"
-}
-
-// DeviceMotionEvent.requestPermission exists only on iOS 13+ Safari.
-type MotionCtor = {
-  requestPermission?: () => Promise<"granted" | "denied">
-}
-
-export function motionPermissionState(): MotionPermission {
-  if (!hasWindow() || typeof (window as unknown as { DeviceMotionEvent?: unknown }).DeviceMotionEvent === "undefined") {
-    return "unsupported"
-  }
-  const ctor = (window as unknown as { DeviceMotionEvent: MotionCtor }).DeviceMotionEvent
-  // If the gated API exists we must ask; otherwise motion is freely available.
-  return typeof ctor.requestPermission === "function" ? "prompt" : "granted"
-}
-
-/**
- * Ask for accelerometer access (iOS 13+). MUST be called from inside a user
- * gesture handler (tap), or iOS rejects it. No-op elsewhere (returns true).
- */
-export async function requestMotionPermission(): Promise<boolean> {
-  const state = motionPermissionState()
-  if (state === "granted") return true
-  if (state === "unsupported") return false
-  const ctor = (window as unknown as { DeviceMotionEvent: MotionCtor }).DeviceMotionEvent
-  try {
-    const res = await ctor.requestPermission!()
-    return res === "granted"
-  } catch {
-    return false
-  }
-}
-
-/**
- * Attach gesture listeners to the document. Returns a teardown function.
- * `onTrigger` fires (debounced by `cooldown`) whenever any armed gesture
- * completes. Pure DOM — usable without React.
- */
-export function attachGestureListeners(onTrigger: () => void, options: GestureOptions = {}): () => void {
-  if (!hasWindow()) return () => {}
-
-  const opts = { ...DEFAULTS, ...options }
-  const gestures = new Set<FeedbackGesture>(options.gestures ?? DEFAULT_GESTURES)
-  const cleanups: Array<() => void> = []
-
-  let lastTrigger = 0
-  function fire() {
-    const now = Date.now()
-    if (now - lastTrigger < opts.cooldown) return
-    lastTrigger = now
-    // A short haptic confirms the gesture registered (mobile only).
-    try {
-      ;(navigator as unknown as { vibrate?: (p: number) => void }).vibrate?.(12)
-    } catch {
-      /* no haptics */
-    }
-    onTrigger()
-  }
-
-  // ── edge swipes ──────────────────────────────────────────────────────────
-  const wantsSwipe =
-    gestures.has("swipe-up") || gestures.has("swipe-down") || gestures.has("swipe-left") || gestures.has("swipe-right")
-  if (wantsSwipe) {
-    let sx = 0
-    let sy = 0
-    let st = 0
-    let fromEdge: "top" | "bottom" | "left" | "right" | null = null
-
-    const onStart = (e: TouchEvent) => {
-      if (e.touches.length !== 1) {
-        fromEdge = null
-        return
-      }
-      const t = e.touches[0]
-      sx = t.clientX
-      sy = t.clientY
-      st = Date.now()
-      const w = window.innerWidth
-      const h = window.innerHeight
-      fromEdge =
-        gestures.has("swipe-down") && sy <= opts.edgeSize
-          ? "top"
-          : gestures.has("swipe-up") && sy >= h - opts.edgeSize
-            ? "bottom"
-            : gestures.has("swipe-right") && sx <= opts.edgeSize
-              ? "left"
-              : gestures.has("swipe-left") && sx >= w - opts.edgeSize
-                ? "right"
-                : null
-    }
-    const onEnd = (e: TouchEvent) => {
-      if (!fromEdge) return
-      const edge = fromEdge
-      fromEdge = null
-      const t = e.changedTouches[0]
-      if (!t) return
-      const dx = t.clientX - sx
-      const dy = t.clientY - sy
-      if (Date.now() - st > opts.swipeMaxDuration) return
-      const passed =
-        (edge === "bottom" && -dy >= opts.swipeThreshold && Math.abs(dy) > Math.abs(dx)) ||
-        (edge === "top" && dy >= opts.swipeThreshold && Math.abs(dy) > Math.abs(dx)) ||
-        (edge === "right" && -dx >= opts.swipeThreshold && Math.abs(dx) > Math.abs(dy)) ||
-        (edge === "left" && dx >= opts.swipeThreshold && Math.abs(dx) > Math.abs(dy))
-      if (passed) fire()
-    }
-    document.addEventListener("touchstart", onStart, { passive: true })
-    document.addEventListener("touchend", onEnd, { passive: true })
-    cleanups.push(() => {
-      document.removeEventListener("touchstart", onStart)
-      document.removeEventListener("touchend", onEnd)
-    })
-  }
-
-  // ── two-finger press-and-hold ──────────────────────────────────────────────
-  if (gestures.has("two-finger-press")) {
-    let timer: ReturnType<typeof setTimeout> | null = null
-    const clear = () => {
-      if (timer) {
-        clearTimeout(timer)
-        timer = null
-      }
-    }
-    const onStart = (e: TouchEvent) => {
-      if (e.touches.length === 2) {
-        clear()
-        timer = setTimeout(fire, opts.pressDuration)
-      } else {
-        clear()
-      }
-    }
-    document.addEventListener("touchstart", onStart, { passive: true })
-    document.addEventListener("touchend", clear, { passive: true })
-    document.addEventListener("touchmove", clear, { passive: true })
-    document.addEventListener("touchcancel", clear, { passive: true })
-    cleanups.push(() => {
-      clear()
-      document.removeEventListener("touchstart", onStart)
-      document.removeEventListener("touchend", clear)
-      document.removeEventListener("touchmove", clear)
-      document.removeEventListener("touchcancel", clear)
-    })
-  }
-
-  // ── shake ──────────────────────────────────────────────────────────────────
-  if (gestures.has("shake")) {
-    let lx = 0
-    let ly = 0
-    let lz = 0
-    let seeded = false
-    let jolts = 0
-    let windowStart = 0
-    const onMotion = (e: DeviceMotionEvent) => {
-      const a = e.accelerationIncludingGravity
-      if (!a || a.x == null || a.y == null || a.z == null) return
-      if (!seeded) {
-        lx = a.x
-        ly = a.y
-        lz = a.z
-        seeded = true
-        return
-      }
-      const delta = Math.abs(a.x - lx) + Math.abs(a.y - ly) + Math.abs(a.z - lz)
-      lx = a.x
-      ly = a.y
-      lz = a.z
-      if (delta < opts.shakeThreshold) return
-      const now = Date.now()
-      if (now - windowStart > 1000) {
-        windowStart = now
-        jolts = 0
-      }
-      // A real shake is several jolts in quick succession, not one bump.
-      if (++jolts >= 3) {
-        jolts = 0
-        fire()
-      }
-    }
-    window.addEventListener("devicemotion", onMotion)
-    cleanups.push(() => window.removeEventListener("devicemotion", onMotion))
-  }
-
-  return () => {
-    for (const c of cleanups) c()
-  }
-}
-
-/**
- * React hook: arm the feedback gestures and call `onTrigger` when one fires.
- * Returns the motion-permission state + a primer to request it (iOS).
- */
-export function useFeedbackGesture(
-  onTrigger: () => void,
-  options: GestureOptions & { enabled?: boolean } = {},
-): { motionPermission: MotionPermission; requestMotionPermission: () => Promise<boolean> } {
-  const cb = useRef(onTrigger)
-  cb.current = onTrigger
-  const [motionPermission, setMotionPermission] = useState<MotionPermission>(() => motionPermissionState())
-
-  const { enabled = true } = options
-  // Re-arm when the gesture SET or tuning changes — not on every render.
-  const sig = JSON.stringify({
-    g: options.gestures ?? DEFAULT_GESTURES,
-    e: options.edgeSize,
-    s: options.swipeThreshold,
-    d: options.swipeMaxDuration,
-    t: options.shakeThreshold,
-    p: options.pressDuration,
-    c: options.cooldown,
-    enabled,
-  })
-
-  useEffect(() => {
-    if (!enabled) return
-    const detach = attachGestureListeners(() => cb.current(), options)
-    return detach
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sig])
-
-  return {
-    motionPermission,
-    requestMotionPermission: async () => {
-      const ok = await requestMotionPermission()
-      setMotionPermission(ok ? "granted" : "denied")
-      return ok
-    },
-  }
-}

package/src/feedback/index.ts

@@ -1,18 +0,0 @@
-// @omg-dev/sdk/feedback — gesture-summoned feedback widget + trace capture.
-//
-// Re-exported from the SDK root (`@omg-dev/sdk`) as well, because the publish
-// workflow rewrites `exports` to only "." — subpath imports like
-// `@omg-dev/sdk/feedback` don't resolve in production deploy builds.
-
-export { VibesFeedback, type VibesFeedbackProps, type FeedbackReport } from "./VibesFeedback"
-export {
-  useFeedbackGesture,
-  attachGestureListeners,
-  requestMotionPermission,
-  motionPermissionState,
-  type FeedbackGesture,
-  type GestureOptions,
-  type MotionPermission,
-} from "./gestures"
-export { installTrace, getTrace, clearTrace, type Breadcrumb, type BreadcrumbKind, type TraceOptions } from "./trace"
-export { captureScreenshot, type ScreenshotOptions } from "./screenshot"

package/src/feedback/screenshot.ts

@@ -1,37 +0,0 @@
-// @omg-dev/sdk/feedback — client-side screenshot capture.
-//
-// Lazily imports `modern-screenshot` only when a capture is requested, so it's
-// a separate chunk and never weighs down the app's main bundle. Rasterizes the
-// live DOM (what the user is looking at) — the platform's server-side
-// thumbnailer re-navigates the URL and loses the user's current state, so it
-// can't be used for "capture the app in place".
-//
-// The widget's own nodes are tagged `data-vibes-feedback` and filtered out, so
-// the panel/backdrop/button never appear in the shot.
-
-export interface ScreenshotOptions {
-  /** Device-pixel scale, capped. Default min(devicePixelRatio, 2). */
-  scale?: number
-  /** Element to capture. Default document.body. */
-  target?: HTMLElement
-}
-
-export async function captureScreenshot(options: ScreenshotOptions = {}): Promise<string | null> {
-  if (typeof document === "undefined" || typeof window === "undefined") return null
-  const target = options.target ?? document.body
-  if (!target) return null
-  try {
-    // Dynamic import → lazy chunk. Wrapped so a missing/older bundle that
-    // lacks the dep degrades to "no screenshot" instead of throwing.
-    const mod = (await import("modern-screenshot")) as {
-      domToPng: (node: HTMLElement, opts?: Record<string, unknown>) => Promise<string>
-    }
-    return await mod.domToPng(target, {
-      scale: options.scale ?? Math.min(window.devicePixelRatio || 1, 2),
-      backgroundColor: getComputedStyle(document.body).backgroundColor || "#ffffff",
-      filter: (node: Node) => !(node instanceof HTMLElement && node.hasAttribute("data-vibes-feedback")),
-    })
-  } catch {
-    return null
-  }
-}

package/src/feedback/trace.ts

@@ -1,166 +0,0 @@
-// @omg-dev/sdk/feedback — client trace ring buffer.
-//
-// Installs lightweight, low-overhead breadcrumb collectors so a feedback report
-// can carry the recent runtime trace: console errors/warnings, uncaught errors,
-// unhandled rejections, and network (fetch) failures + slow calls. Bounded ring
-// buffer (default 50) so memory stays flat. install() is idempotent and returns
-// a teardown; getTrace() snapshots the current buffer for a report.
-//
-// This mirrors the platform's existing vite-plugin error reporter (which
-// postMessages `vibes:runtime-error` to the dashboard) but runs entirely inside
-// the app so it works in published deploys too, not just the dev preview.
-
-export type BreadcrumbKind = "console" | "error" | "rejection" | "network" | "nav"
-
-export interface Breadcrumb {
-  at: number
-  kind: BreadcrumbKind
-  /** "error" | "warn" for console; HTTP method for network; etc. */
-  level?: string
-  message: string
-  /** Extra structured detail (url, status, durationMs, stack…). */
-  data?: Record<string, unknown>
-}
-
-interface Installed {
-  buffer: Breadcrumb[]
-  teardown: () => void
-  max: number
-}
-
-let installed: Installed | null = null
-
-function push(b: Breadcrumb) {
-  if (!installed) return
-  installed.buffer.push(b)
-  if (installed.buffer.length > installed.max) installed.buffer.shift()
-}
-
-function safeString(v: unknown): string {
-  if (typeof v === "string") return v
-  if (v instanceof Error) return v.message
-  try {
-    return JSON.stringify(v)
-  } catch {
-    return String(v)
-  }
-}
-
-export interface TraceOptions {
-  /** Max breadcrumbs retained. Default 50. */
-  max?: number
-  /** Patch console.error/warn. Default true. */
-  console?: boolean
-  /** Capture window error + unhandledrejection. Default true. */
-  errors?: boolean
-  /** Wrap fetch to record failures + slow (>2s) calls. Default true. */
-  network?: boolean
-}
-
-/** Begin collecting breadcrumbs. Idempotent — a second call is a no-op. */
-export function installTrace(options: TraceOptions = {}): () => void {
-  if (installed) return installed.teardown
-  if (typeof window === "undefined") return () => {}
-
-  const max = options.max ?? 50
-  const buffer: Breadcrumb[] = []
-  const cleanups: Array<() => void> = []
-  installed = { buffer, teardown: () => {}, max }
-
-  // ── console.error / console.warn ──────────────────────────────────────────
-  if (options.console !== false && typeof console !== "undefined") {
-    for (const level of ["error", "warn"] as const) {
-      const orig = console[level]
-      if (typeof orig !== "function") continue
-      console[level] = (...args: unknown[]) => {
-        push({ at: Date.now(), kind: "console", level, message: args.map(safeString).join(" ").slice(0, 1000) })
-        return (orig as (...a: unknown[]) => void).apply(console, args)
-      }
-      cleanups.push(() => {
-        console[level] = orig as typeof console.error
-      })
-    }
-  }
-
-  // ── uncaught errors + rejections ──────────────────────────────────────────
-  if (options.errors !== false) {
-    const onError = (e: ErrorEvent) => {
-      push({
-        at: Date.now(),
-        kind: "error",
-        message: e.message || "Uncaught error",
-        data: { source: e.filename, line: e.lineno, col: e.colno, stack: e.error?.stack?.slice(0, 2000) },
-      })
-    }
-    const onRejection = (e: PromiseRejectionEvent) => {
-      const r = e.reason as unknown
-      push({
-        at: Date.now(),
-        kind: "rejection",
-        message: safeString(r).slice(0, 1000),
-        data: { stack: (r as Error)?.stack?.slice(0, 2000) },
-      })
-    }
-    window.addEventListener("error", onError)
-    window.addEventListener("unhandledrejection", onRejection)
-    cleanups.push(() => {
-      window.removeEventListener("error", onError)
-      window.removeEventListener("unhandledrejection", onRejection)
-    })
-  }
-
-  // ── fetch failures + slow calls ───────────────────────────────────────────
-  if (options.network !== false && typeof window.fetch === "function") {
-    const origFetch = window.fetch.bind(window)
-    window.fetch = async (...args: Parameters<typeof fetch>) => {
-      const started = Date.now()
-      const url = typeof args[0] === "string" ? args[0] : (args[0] as Request)?.url ?? String(args[0])
-      const method = (args[1]?.method ?? (args[0] as Request)?.method ?? "GET").toUpperCase()
-      try {
-        const res = await origFetch(...args)
-        const durationMs = Date.now() - started
-        // Only breadcrumb the interesting cases — errors and slow calls — so we
-        // don't drown the buffer in routine 200s.
-        if (!res.ok || durationMs > 2000) {
-          push({
-            at: started,
-            kind: "network",
-            level: method,
-            message: `${res.status} ${method} ${url}`.slice(0, 500),
-            data: { status: res.status, durationMs },
-          })
-        }
-        return res
-      } catch (err) {
-        push({
-          at: started,
-          kind: "network",
-          level: method,
-          message: `FAILED ${method} ${url}`.slice(0, 500),
-          data: { error: safeString(err), durationMs: Date.now() - started },
-        })
-        throw err
-      }
-    }
-    cleanups.push(() => {
-      window.fetch = origFetch
-    })
-  }
-
-  const teardown = () => {
-    for (const c of cleanups) c()
-    installed = null
-  }
-  installed.teardown = teardown
-  return teardown
-}
-
-/** Snapshot the current breadcrumbs (most-recent last). Empty if not installed. */
-export function getTrace(): Breadcrumb[] {
-  return installed ? [...installed.buffer] : []
-}
-
-/** Clear the buffer without uninstalling (e.g. after a report is sent). */
-export function clearTrace(): void {
-  if (installed) installed.buffer.length = 0
-}