@omg-dev/sdk 0.4.29 → 0.4.31

package/dist/feedback/auto.mjs

@@ -1,26 +0,0 @@
-import { t as VibesFeedback } from "../VibesFeedback-BF2Vf6FK.mjs";
-import { jsx } from "react/jsx-runtime";
-import { createRoot } from "react-dom/client";
-//#region src/feedback/auto.tsx
-const HOST_ID = "vibes-feedback-auto";
-function isInIframe() {
-	try {
-		return window.self !== window.top;
-	} catch {
-		return true;
-	}
-}
-function mount() {
-	if (typeof window === "undefined" || typeof document === "undefined") return;
-	if (isInIframe()) return;
-	if (document.getElementById(HOST_ID)) return;
-	const host = document.createElement("div");
-	host.id = HOST_ID;
-	host.setAttribute("data-vibes-feedback", "");
-	document.body.appendChild(host);
-	createRoot(host).render(/* @__PURE__ */ jsx(VibesFeedback, {}));
-}
-if (typeof window !== "undefined") if (document.readyState === "complete") mount();
-else window.addEventListener("load", mount, { once: true });
-//#endregion
-export {};

package/src/feedback/VibesFeedback.tsx

@@ -1,360 +0,0 @@
-// @omg-dev/sdk/feedback — gesture-summoned feedback widget.
-//
-// Drop <VibesFeedback /> anywhere in an app and a feedback panel is summoned by
-// a gesture (shake the phone by default, or an edge swipe / two-finger press).
-// It captures the user's message + the recent runtime trace (and a screenshot
-// when a capture fn is supplied) and submits a report.
-//
-// Self-contained styles (inline + one injected <style> for the sheet
-// animation) — it does NOT depend on the host app's Tailwind, so it looks right
-// in any vibes app. Opt-in: the app renders it explicitly (auto-injection via
-// the vite-plugin can come later behind a flag).
-
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react"
-import { getAuthContext } from "../auth/bridge"
-import { useUpload } from "../storage/useUpload"
-import { useFeedbackGesture, DEFAULT_GESTURES, type FeedbackGesture } from "./gestures"
-import { installTrace, getTrace, clearTrace, type Breadcrumb } from "./trace"
-import { captureScreenshot as builtinCapture } from "./screenshot"
-
-export interface FeedbackReport {
-  message: string
-  /** Durable storage key of the uploaded screenshot, when captured + uploaded. */
-  screenshotKey?: string
-  /** Presigned URL for the screenshot (short-lived; for immediate display). */
-  screenshotUrl?: string
-  /** Recent runtime breadcrumbs (console/error/rejection/network). */
-  trace: Breadcrumb[]
-  /** Signed-in app user's email, when available (best-effort attribution). */
-  reporterEmail?: string
-  pageUrl: string
-  userAgent: string
-}
-
-export interface VibesFeedbackProps {
-  /** Gestures that summon the panel. Default: two-finger press (permission-free).
-   * "shake" is opt-in — iOS won't persist its motion grant across PWA launches. */
-  gestures?: FeedbackGesture[]
-  /** Render the always-anchored floating feedback button. Default true — it's the
-   * reliable, permission-free way to summon the panel on every platform. */
-  showButton?: boolean
-  /** Max breadcrumbs to retain + attach. Default 50. */
-  traceLimit?: number
-  /** Attach a screenshot of the app (lazy-loaded rasterizer). Default true. */
-  screenshot?: boolean
-  /** Override screenshot capture — returns a data URL (or null). Defaults to the built-in DOM rasterizer. */
-  captureScreenshot?: () => Promise<string | null>
-  /** Submit handler. When omitted, POSTs JSON to the agent `/_report` route (→ orchestrator → control-plane). */
-  onSubmit?: (report: FeedbackReport) => Promise<void>
-  /** Accent color. Default indigo. */
-  accent?: string
-  /** Panel heading. Default "Send feedback". */
-  title?: string
-}
-
-const STYLE_ID = "vibes-feedback-styles"
-function ensureStyles() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID)) return
-  const el = document.createElement("style")
-  el.id = STYLE_ID
-  el.textContent = `
-@keyframes vibes-fb-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
-@keyframes vibes-fb-fade { from { opacity: 0; } to { opacity: 1; } }
-.vibes-fb-sheet { animation: vibes-fb-in .26s cubic-bezier(.22,1,.36,1); }
-.vibes-fb-backdrop { animation: vibes-fb-fade .2s ease-out; }
-.vibes-fb-btn:active { transform: scale(.96); }
-`
-  document.head.appendChild(el)
-}
-
-// Default transport: POST the report to the in-VM agent's `/_report` route.
-// The agent forwards it to the orchestrator (svc token + X-On-Behalf-Of: slug),
-// which emits a signed `bug.report.submitted` webhook to the control-plane —
-// so a report from any deployed app lands in the LFG triage panel, no builder
-// JWT required. Works in the dev preview sandbox too (same agent).
-async function defaultSubmit(report: FeedbackReport): Promise<void> {
-  const res = await fetch("/_report", {
-    method: "POST",
-    headers: { "content-type": "application/json" },
-    body: JSON.stringify(report),
-  })
-  if (!res.ok) throw new Error(`Feedback failed (${res.status})`)
-}
-
-export function VibesFeedback({
-  gestures,
-  showButton = true,
-  traceLimit = 50,
-  screenshot = true,
-  captureScreenshot,
-  onSubmit,
-  accent = "#6366f1",
-  title = "Send feedback",
-}: VibesFeedbackProps) {
-  const [open, setOpen] = useState(false)
-  const [message, setMessage] = useState("")
-  const [shot, setShot] = useState<string | null>(null)
-  const [trace, setTrace] = useState<Breadcrumb[]>([])
-  const [sending, setSending] = useState(false)
-  const [done, setDone] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const { upload } = useUpload()
-
-  // The active capturer: explicit override, else the built-in unless disabled.
-  const capturer = useMemo(
-    () => captureScreenshot ?? (screenshot ? () => builtinCapture() : null),
-    [captureScreenshot, screenshot],
-  )
-
-  // Collect breadcrumbs for the whole app lifetime, not just while open.
-  useEffect(() => installTrace({ max: traceLimit }), [traceLimit])
-
-  const summon = useCallback(() => {
-    ensureStyles()
-    setTrace(getTrace())
-    setMessage("")
-    setShot(null)
-    setError(null)
-    setDone(false)
-    setOpen(true)
-    // Capture AFTER paint so the screenshot reflects the current view; the
-    // panel/backdrop are tagged data-vibes-feedback and filtered out of it.
-    if (capturer) {
-      capturer()
-        .then((s: string | null) => setShot(s))
-        .catch(() => setShot(null))
-    }
-  }, [capturer])
-
-  const { motionPermission, requestMotionPermission } = useFeedbackGesture(summon, { gestures })
-
-  // External summon: the brand badge bundles this widget button-less and opens
-  // it from its dialog via a window event, so feedback is one control with the
-  // omg badge instead of a second floating button.
-  useEffect(() => {
-    if (typeof window === "undefined") return
-    const onOpen = () => summon()
-    window.addEventListener("vibes:feedback:open", onOpen)
-    return () => window.removeEventListener("vibes:feedback:open", onOpen)
-  }, [summon])
-
-  // Only shake needs the accelerometer; without it we must never trip iOS's
-  // motion-permission prompt (it can't be persisted, so priming it just nags
-  // the user on every session). Compute against the same default the gesture
-  // hook uses so an app that never opts into shake is never prompted.
-  const shakeEnabled = (gestures ?? DEFAULT_GESTURES).includes("shake")
-
-  // iOS chicken-and-egg (shake only): on iOS 13+ the `devicemotion` stream stays
-  // silent until permission is granted, and the grant must originate from a user
-  // gesture — but the only gesture that would summon our panel is the shake we
-  // can't yet detect. Prime it on the first tap anywhere so a later shake fires.
-  // No-op elsewhere: off iOS `motionPermission` is "granted"/"unsupported".
-  const primedRef = useRef(false)
-  useEffect(() => {
-    if (!shakeEnabled || motionPermission !== "prompt" || primedRef.current) return
-    const prime = () => {
-      if (primedRef.current) return
-      primedRef.current = true
-      void requestMotionPermission()
-    }
-    window.addEventListener("pointerdown", prime, { once: true, capture: true })
-    return () => window.removeEventListener("pointerdown", prime, { capture: true })
-  }, [shakeEnabled, motionPermission, requestMotionPermission])
-
-  // Upload the screenshot to app storage (Tigris-backed via the agent presign)
-  // and return a durable key + short-lived URL. Best-effort — a failure just
-  // drops the screenshot, the rest of the report still sends.
-  async function uploadShot(dataUrl: string): Promise<{ screenshotKey?: string; screenshotUrl?: string }> {
-    try {
-      const blob = await (await fetch(dataUrl)).blob()
-      const key = `feedback/${Date.now()}-${Math.random().toString(36).slice(2, 8)}.png`
-      const res = await upload(blob, { key, scope: "app", contentType: "image/png" })
-      return { screenshotKey: res.key, screenshotUrl: res.downloadUrl }
-    } catch {
-      return {}
-    }
-  }
-
-  async function send() {
-    const text = message.trim()
-    if (!text || sending) return
-    setSending(true)
-    setError(null)
-    const shotRefs = shot ? await uploadShot(shot) : {}
-    const { user } = getAuthContext()
-    const report: FeedbackReport = {
-      message: text,
-      ...shotRefs,
-      trace,
-      reporterEmail: (user as { email?: string } | null)?.email,
-      pageUrl: typeof window !== "undefined" ? window.location.href : "",
-      userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "",
-    }
-    try {
-      await (onSubmit ?? defaultSubmit)(report)
-      clearTrace()
-      setDone(true)
-      setTimeout(() => setOpen(false), 1100)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Couldn't send. Try again.")
-    } finally {
-      setSending(false)
-    }
-  }
-
-  const sheet: CSSProperties = {
-    position: "fixed",
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 2147483000,
-    margin: "0 auto",
-    maxWidth: 480,
-    background: "#fff",
-    color: "#0b0b0f",
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    padding: "16px 16px calc(16px + env(safe-area-inset-bottom))",
-    boxShadow: "0 -8px 40px rgba(0,0,0,.22)",
-    fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
-  }
-
-  return (
-    <>
-      {showButton && (
-        <button
-          aria-label="Send feedback"
-          data-vibes-feedback=""
-          className="vibes-fb-btn"
-          onClick={() => {
-            // Tapping the button just summons the panel — it never needs motion.
-            // Only ask for the accelerometer here when shake is actually armed,
-            // so a tap can't surface an unsolicited iOS permission prompt.
-            if (shakeEnabled && motionPermission === "prompt") void requestMotionPermission()
-            summon()
-          }}
-          style={{
-            position: "fixed",
-            right: 16,
-            bottom: "calc(16px + env(safe-area-inset-bottom))",
-            zIndex: 2147482000,
-            width: 44,
-            height: 44,
-            borderRadius: 999,
-            border: "none",
-            background: accent,
-            color: "#fff",
-            display: "grid",
-            placeItems: "center",
-            boxShadow: "0 4px 16px rgba(0,0,0,.25)",
-            cursor: "pointer",
-            transition: "transform .12s ease",
-          }}
-        >
-          {/* megaphone glyph */}
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="m3 11 18-5v12L3 14v-3z" />
-            <path d="M11.6 16.8a3 3 0 1 1-5.8-1.6" />
-          </svg>
-        </button>
-      )}
-
-      {open && (
-        <>
-          <div
-            className="vibes-fb-backdrop"
-            data-vibes-feedback=""
-            onClick={() => !sending && setOpen(false)}
-            style={{ position: "fixed", inset: 0, zIndex: 2147482900, background: "rgba(0,0,0,.4)" }}
-          />
-          <div className="vibes-fb-sheet" data-vibes-feedback="" role="dialog" aria-label={title} style={sheet}>
-            <div style={{ width: 36, height: 4, borderRadius: 999, background: "#e2e2e8", margin: "0 auto 12px" }} />
-            {done ? (
-              <div style={{ textAlign: "center", padding: "20px 0 28px" }}>
-                <div style={{ fontSize: 32, marginBottom: 6 }}>✓</div>
-                <div style={{ fontWeight: 600 }}>Thanks — sent.</div>
-              </div>
-            ) : (
-              <>
-                <div style={{ fontWeight: 650, fontSize: 17, marginBottom: 10 }}>{title}</div>
-                <textarea
-                  autoFocus
-                  value={message}
-                  onChange={(e) => setMessage(e.target.value)}
-                  placeholder="What happened?"
-                  disabled={sending}
-                  style={{
-                    width: "100%",
-                    minHeight: 96,
-                    resize: "none",
-                    borderRadius: 12,
-                    border: "1px solid #e3e3ea",
-                    padding: 12,
-                    fontSize: 15,
-                    fontFamily: "inherit",
-                    outline: "none",
-                    boxSizing: "border-box",
-                  }}
-                />
-
-                {shot && (
-                  <img
-                    src={shot}
-                    alt="screenshot"
-                    style={{ marginTop: 10, width: "100%", maxHeight: 160, objectFit: "cover", borderRadius: 10, border: "1px solid #eee" }}
-                  />
-                )}
-
-                <div style={{ marginTop: 8, fontSize: 12, color: "#8a8a96" }}>
-                  {trace.length > 0 ? `${trace.length} trace event${trace.length === 1 ? "" : "s"} attached` : "No errors captured"}
-                  {capturer ? (shot ? " · screenshot ready" : " · capturing screenshot…") : ""}
-                </div>
-
-                {error && <div style={{ marginTop: 8, fontSize: 13, color: "#d4163c" }}>{error}</div>}
-
-                <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
-                  <button
-                    onClick={() => setOpen(false)}
-                    disabled={sending}
-                    style={{
-                      flex: "0 0 auto",
-                      height: 44,
-                      padding: "0 16px",
-                      borderRadius: 12,
-                      border: "1px solid #e3e3ea",
-                      background: "#fff",
-                      color: "#0b0b0f",
-                      fontSize: 15,
-                      cursor: "pointer",
-                    }}
-                  >
-                    Cancel
-                  </button>
-                  <button
-                    className="vibes-fb-btn"
-                    onClick={send}
-                    disabled={!message.trim() || sending}
-                    style={{
-                      flex: 1,
-                      height: 44,
-                      borderRadius: 12,
-                      border: "none",
-                      background: message.trim() && !sending ? accent : "#c7c7d1",
-                      color: "#fff",
-                      fontSize: 15,
-                      fontWeight: 600,
-                      cursor: message.trim() && !sending ? "pointer" : "default",
-                      transition: "transform .12s ease, background .12s ease",
-                    }}
-                  >
-                    {sending ? "Sending…" : "Send"}
-                  </button>
-                </div>
-              </>
-            )}
-          </div>
-        </>
-      )}
-    </>
-  )
-}

package/src/feedback/auto.tsx

@@ -1,47 +0,0 @@
-// @omg-dev/sdk/feedback/auto — report-a-bug widget, injected into published
-// builds by @omg-dev/vite-plugin (appended import in the app entry; see index.ts).
-//
-// Mounts <VibesFeedback/> OUTSIDE the app's React tree (own root, own DOM
-// node) so it survives whatever the build agent does to App.tsx/main.tsx.
-// An always-anchored floating button summons the feedback sheet (a two-finger
-// press also works; shake is opt-in — iOS won't persist its motion grant). The
-// report lands in the builder's LFG triage panel via the agent /_report route.
-//
-// Never mounts in the dashboard preview iframe — a shake there is meaningless
-// and the report would have no published slug to attribute to. Apps that want
-// manual placement opt out via vibes({ feedback: false }) and render
-// <VibesFeedback/> from @omg-dev/sdk/feedback themselves.
-
-import { createRoot } from "react-dom/client"
-import { VibesFeedback } from "./VibesFeedback"
-
-const HOST_ID = "vibes-feedback-auto"
-
-function isInIframe(): boolean {
-  try {
-    return window.self !== window.top
-  } catch {
-    // Cross-origin access throws — we're framed.
-    return true
-  }
-}
-
-function mount() {
-  if (typeof window === "undefined" || typeof document === "undefined") return
-  if (isInIframe()) return
-  if (document.getElementById(HOST_ID)) return
-  const host = document.createElement("div")
-  host.id = HOST_ID
-  // Exclude the whole widget subtree from its own screenshot rasterizer.
-  host.setAttribute("data-vibes-feedback", "")
-  document.body.appendChild(host)
-  createRoot(host).render(<VibesFeedback />)
-}
-
-if (typeof window !== "undefined") {
-  if (document.readyState === "complete") {
-    mount()
-  } else {
-    window.addEventListener("load", mount, { once: true })
-  }
-}