@omg-dev/sdk 0.4.24

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@omg-dev/sdk",
+  "version": "0.4.24",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./feedback/auto": {
+      "types": "./src/feedback/auto.tsx",
+      "default": "./dist/feedback/auto.mjs"
+    },
+    "./brand/auto": {
+      "types": "./src/brand/auto.tsx",
+      "default": "./dist/brand/auto.mjs"
+    }
+  },
+  "dependencies": {
+    "better-auth": "^1.2.0",
+    "@better-auth/passkey": "^1.2.0",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "modern-screenshot": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BennyKok/vibes.git"
+  },
+  "homepage": "https://docs.omg.dev",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/auth/auto-prompt.tsx

@@ -0,0 +1,50 @@
+// @omg-dev/sdk/auth — Auto-prompt overlay.
+//
+// Listens for the bridge's auth-required signal (fired by any SDK request that
+// comes back 401 / WS `auth_required`) and surfaces <VibesLogin /> in a
+// lightweight modal overlay. Mounted by <VibesAuthProvider> unless the app
+// opts out with `autoPrompt={false}`. Lives in its own file (not react.tsx) to
+// avoid a react.tsx ↔ login.tsx import cycle.
+
+import { useEffect, useState } from "react"
+import { subscribeAuthRequired } from "./bridge"
+import { useUser } from "./react"
+import { VibesLogin } from "./login"
+
+export function VibesAuthAutoPrompt() {
+  const user = useUser()
+  const [open, setOpen] = useState(false)
+
+  // Open on any auth-required signal.
+  useEffect(() => subscribeAuthRequired(() => setOpen(true)), [])
+
+  // Close automatically once the user is signed in.
+  useEffect(() => {
+    if (user) setOpen(false)
+  }, [user])
+
+  if (!open || user) return null
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      onClick={(e) => {
+        // Click on the backdrop (not the card) dismisses.
+        if (e.target === e.currentTarget) setOpen(false)
+      }}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483000,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.5)",
+        backdropFilter: "blur(2px)",
+      }}
+    >
+      <VibesLogin subtitle="Sign in to continue." />
+    </div>
+  )
+}

package/src/auth/bridge.ts

@@ -0,0 +1,63 @@
+// @omg-dev/sdk/auth — Module-scoped bridge so useCollection can read the
+// current auth token without importing React from the main entrypoint.
+// VibesAuthProvider sets this on every token change.
+
+import type { VibesUser } from "./client"
+
+interface AuthSnapshot {
+  user: VibesUser | null
+  token: string | null
+  /**
+   * True once the initial session check AND the first token-fetch attempt have
+   * settled. While false, a scoped-collection `auth_required` is treated as a
+   * transient "still loading" state — not a real signed-out signal — so apps
+   * don't flash a scary error or pop the login dialog during startup.
+   */
+  authReady: boolean
+}
+
+let current: AuthSnapshot = { user: null, token: null, authReady: false }
+
+type AuthChangeListener = (snap: AuthSnapshot) => void
+const authChangeListeners = new Set<AuthChangeListener>()
+
+export function setAuthContext(snap: AuthSnapshot) {
+  current = snap
+  for (const cb of authChangeListeners) cb(snap)
+}
+
+export function getAuthContext(): AuthSnapshot {
+  return current
+}
+
+/**
+ * Subscribe to auth snapshot changes (user / token / authReady). Returns an
+ * unsubscribe fn. Data hooks use this to re-establish a subscription when the
+ * JWT finishes loading (null→token) or on sign-out (token→null) — without it
+ * the WS connects once, often before getToken() resolves, and never retries
+ * with a bearer.
+ */
+export function subscribeAuthChange(cb: AuthChangeListener): () => void {
+  authChangeListeners.add(cb)
+  return () => authChangeListeners.delete(cb)
+}
+
+// ── Auth-required signal ───────────────────────────────────────────────────────
+// Fired whenever a request comes back with the server's "auth required" signal
+// (REST 401 or WS `auth_required`). VibesAuthProvider subscribes to this to
+// auto-open the login UI. Lives in the bridge (not React) so the non-React
+// fetch/WS helpers in the main entrypoint can notify without importing React.
+
+type AuthRequiredListener = () => void
+const authRequiredListeners = new Set<AuthRequiredListener>()
+
+/** Subscribe to auth-required signals. Returns an unsubscribe fn. */
+export function subscribeAuthRequired(cb: AuthRequiredListener): () => void {
+  authRequiredListeners.add(cb)
+  return () => authRequiredListeners.delete(cb)
+}
+
+/** Notify all subscribers that a request hit the server's auth-required signal. */
+export function notifyAuthRequired(): void {
+  for (const cb of authRequiredListeners) cb()
+}

package/src/auth/client.ts

@@ -0,0 +1,222 @@
+// @omg-dev/sdk/auth — Auth client and token manager
+
+import { createAuthClient } from "better-auth/react"
+import { passkeyClient } from "@better-auth/passkey/client"
+import { magicLinkClient, emailOTPClient } from "better-auth/client/plugins"
+
+export interface VibesUser {
+  id: string
+  email: string
+  name?: string
+}
+
+export interface VibesAuthConfig {
+  /** App ID registered with the auth service */
+  appId: string
+  /** Auth service URL. Defaults to https://auth.omg.dev */
+  authUrl?: string
+  /** JWT mint endpoint. Defaults to `${authUrl}/token`. */
+  tokenUrl?: string
+}
+
+export interface VibesAuthClient {
+  /** The underlying Better Auth client */
+  authClient: ReturnType<typeof createAuthClient>
+  /** App ID for JWT token requests */
+  appId: string
+  /** Auth service base URL */
+  authUrl: string
+  /** JWT mint endpoint */
+  tokenUrl: string
+  /** Fetch a JWT for this app. Uses the session cookie automatically. */
+  getToken: () => Promise<string | null>
+  /** Clear the cached token */
+  clearToken: () => void
+}
+
+const DEFAULT_AUTH_URL = "https://auth.omg.dev"
+
+// Same-origin Worker bridge prefix for cross-site app hosts. On *.omgs.app the
+// shared `.omg.dev` cookie can't reach auth.omg.dev, so the WHOLE better-auth
+// surface (sign-in, email-OTP send/verify, get-session, sign-out, passkey) and
+// the slug-JWT mint are routed through `${origin}/__vibes/auth/*`, which the
+// Worker forwards server-side and whose Set-Cookie it rewrites host-only. Must
+// match AUTH_BRIDGE_PREFIX in apps/infra/worker/src/auth-bridge.ts.
+const AUTH_BRIDGE_PREFIX = "/__vibes/auth"
+
+/**
+ * Derive the appId from the current host. The slug is the first DNS label.
+ * Canonical deployed apps live at `<slug>.apps.omg.dev`; cross-site app hosts
+ * (no shared `.omg.dev` cookie) live at `<slug>.omgs.app`. Returns null when
+ * the host doesn't match (local dev, custom domains).
+ */
+export function deriveAppId(host?: string): string | null {
+  const h = host ?? (typeof window !== "undefined" ? window.location.host : "")
+  if (host === undefined) {
+    const injected = readInjectedAppId()
+    if (injected) return injected
+  }
+  const m = /^([a-z0-9-]+)\.apps\.omg\.dev$/.exec(h) ?? /^([a-z0-9-]+)\.omgs\.app$/.exec(h)
+  return m ? m[1] : null
+}
+
+/**
+ * A cross-site app host is one served outside the shared `.omg.dev` cookie
+ * scope, so the slug JWT must be minted same-origin (the Worker reads the
+ * first-party `omg_access` cookie and exchanges it). Today that's `*.omgs.app`.
+ * Custom domains are out of scope here — they fall through to the default
+ * `${authUrl}/token` for now.
+ */
+function isCrossSiteAppHost(host: string): boolean {
+  return host.endsWith(".omgs.app")
+}
+
+export function deriveTokenUrl(authUrl = DEFAULT_AUTH_URL): string {
+  // Preview injection always wins.
+  const injected = readInjectedTokenUrl()
+  if (injected) return injected
+  // On cross-site app hosts (e.g. *.omgs.app) the shared .omg.dev cookie isn't
+  // available cross-origin, so mint the token via the same-origin Worker path.
+  if (typeof window !== "undefined" && isCrossSiteAppHost(window.location.host)) {
+    return new URL("/__omg/auth/token", window.location.origin).toString()
+  }
+  // apps.omg.dev / dashboard: unchanged — cross-origin auth.omg.dev with the
+  // shared .omg.dev cookie.
+  return `${authUrl}/token`
+}
+
+function readInjectedAppId(): string | null {
+  if (typeof window === "undefined") return null
+  const value = (window as unknown as { __VIBES_APP_ID?: unknown }).__VIBES_APP_ID
+  return typeof value === "string" && /^[a-z0-9-]+$/.test(value) ? value : null
+}
+
+function readInjectedTokenUrl(): string | null {
+  if (typeof window === "undefined") return null
+  const value = (window as unknown as { __VIBES_AUTH_TOKEN_URL?: unknown }).__VIBES_AUTH_TOKEN_URL
+  if (typeof value !== "string" || !value.trim()) return null
+  try {
+    return new URL(value, window.location.origin).toString()
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Same-origin session-read endpoint, injected by the vite-plugin in preview
+ * (`{sandboxId}-5173.preview.omg.dev`). Present only there; null for deployed
+ * apps and local dev.
+ */
+function readInjectedSessionUrl(): string | null {
+  if (typeof window === "undefined") return null
+  const value = (window as unknown as { __VIBES_AUTH_SESSION_URL?: unknown }).__VIBES_AUTH_SESSION_URL
+  if (typeof value !== "string" || !value.trim()) return null
+  try {
+    return new URL(value, window.location.origin).toString()
+  } catch {
+    return null
+  }
+}
+
+export function createVibesAuth(config: VibesAuthConfig): VibesAuthClient {
+  const authUrl = config.authUrl ?? DEFAULT_AUTH_URL
+
+  // On a cross-site app host (*.omgs.app) the browser can't send the shared
+  // `.omg.dev` cookie to auth.omg.dev, so point the better-auth client AND the
+  // token mint at the same-origin Worker bridge. The bridge forwards to
+  // auth.omg.dev server-side and rewrites the session Set-Cookie host-only, so
+  // sign-in / OTP-verify / get-session all land first-party to omgs.app. On
+  // apps.omg.dev (same registrable domain) and local dev this is a no-op.
+  const crossSite =
+    typeof window !== "undefined" && isCrossSiteAppHost(window.location.host)
+  const bridgeBase = crossSite ? `${window.location.origin}${AUTH_BRIDGE_PREFIX}` : null
+
+  // better-auth client appends `/api/auth/<endpoint>` to baseURL, so a bridge
+  // base of `${origin}/__vibes/auth` yields `${origin}/__vibes/auth/api/auth/…`.
+  const baseURL = bridgeBase ?? authUrl
+  const tokenUrl = config.tokenUrl ?? (bridgeBase ? `${bridgeBase}/token` : deriveTokenUrl(authUrl))
+
+  // In preview, the better-auth client's only cross-origin call is the
+  // get-session read to auth.omg.dev. That credentialed cross-origin GET is the
+  // one auth request that third-party-cookie blocking / Safari ITP can silently
+  // drop — making a signed-in dashboard user look signed-out and popping a
+  // needless login. Token minting already dodges this via the same-origin
+  // `/__vibes/auth/token` bridge (cookie forwarded server-side); do the same for
+  // the session read so preview auto-signs-in from the shared .omg.dev session.
+  // Everything else (sign-in, sign-out, OTP verify) is left untouched.
+  const sessionUrl = readInjectedSessionUrl()
+  const customFetchImpl: typeof fetch = (input, init) => {
+    const url =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url
+    if (sessionUrl && url.includes("/api/auth/get-session")) {
+      const qs = url.includes("?") ? url.slice(url.indexOf("?")) : ""
+      return fetch(sessionUrl + qs, { ...init, credentials: "include" })
+    }
+    return fetch(input, init)
+  }
+
+  const authClient = createAuthClient({
+    baseURL,
+    ...(sessionUrl ? { fetchOptions: { customFetchImpl } } : {}),
+    plugins: [
+      magicLinkClient(),
+      // email-otp registers /sign-in/email-otp on the $sessionSignal atom —
+      // useSession refetches right after a successful code verify, so guards
+      // and the auto-prompt dialog close without any redirect.
+      emailOTPClient(),
+      passkeyClient(),
+    ],
+  })
+
+  let cachedToken: string | null = null
+  let tokenExp: number = 0
+
+  async function getToken(): Promise<string | null> {
+    // Return cached token if still valid (with 60s buffer)
+    if (cachedToken && Date.now() < tokenExp - 60_000) {
+      return cachedToken
+    }
+
+    try {
+      const res = await fetch(tokenUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include", // send .omg.dev cookie
+        body: JSON.stringify({ appId: config.appId }),
+      })
+
+      if (!res.ok) {
+        cachedToken = null
+        tokenExp = 0
+        return null
+      }
+
+      const data = await res.json() as { token: string; expiresAt: string }
+      cachedToken = data.token
+
+      // Parse expiry from response or JWT
+      if (data.expiresAt) {
+        tokenExp = new Date(data.expiresAt).getTime()
+      } else {
+        // Fallback: decode JWT exp claim
+        try {
+          const payload = JSON.parse(atob(data.token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))
+          tokenExp = (payload.exp ?? 0) * 1000
+        } catch {
+          tokenExp = Date.now() + 3600_000 // default 1hr
+        }
+      }
+
+      return cachedToken
+    } catch {
+      return null
+    }
+  }
+
+  function clearToken() {
+    cachedToken = null
+    tokenExp = 0
+  }
+
+  return { authClient, appId: config.appId, authUrl, tokenUrl, getToken, clearToken }
+}

package/src/auth/fetch.ts

@@ -0,0 +1,23 @@
+// @omg-dev/sdk/auth — Fetch wrapper with JWT Bearer token
+
+import type { VibesAuthClient } from "./client"
+
+/**
+ * Creates a fetch wrapper that automatically attaches the JWT Bearer token.
+ * If no token is available (user not signed in), falls through without auth header.
+ */
+export function vibesFetch(client: VibesAuthClient) {
+  return async function (
+    input: RequestInfo | URL,
+    init?: RequestInit
+  ): Promise<Response> {
+    const token = await client.getToken()
+
+    const headers = new Headers(init?.headers)
+    if (token) {
+      headers.set("Authorization", `Bearer ${token}`)
+    }
+
+    return fetch(input, { ...init, headers })
+  }
+}

package/src/auth/guard.tsx

@@ -0,0 +1,24 @@
+// @omg-dev/sdk/auth — Gate children behind a logged-in user.
+
+import type { ReactNode } from "react"
+import { useUser, useVibesAuth } from "./react"
+import { VibesLogin } from "./login"
+
+export function VibesAuthGuard({
+  children,
+  fallback,
+  loadingFallback,
+}: {
+  children: ReactNode
+  /** Replace the default <VibesLogin/> when the user is signed-out. */
+  fallback?: ReactNode
+  /** Optional placeholder while the session is still resolving. */
+  loadingFallback?: ReactNode
+}) {
+  const { loading } = useVibesAuth()
+  const user = useUser()
+
+  if (loading) return <>{loadingFallback ?? null}</>
+  if (!user) return <>{fallback ?? <VibesLogin />}</>
+  return <>{children}</>
+}

package/src/auth/index.ts

@@ -0,0 +1,23 @@
+// @omg-dev/sdk/auth — Client-side auth for apps on omg.dev
+//
+// Auto-login via cross-subdomain cookie on .omg.dev,
+// JWT token management via auth.omg.dev/token,
+// and React hooks for auth state.
+
+export { createVibesAuth, deriveAppId, deriveTokenUrl } from "./client"
+export {
+  VibesAuthProvider,
+  useVibesAuth,
+  useVibesToken,
+  useAuth,
+  useUser,
+} from "./react"
+export { vibesFetch } from "./fetch"
+export { VibesLogin } from "./login"
+export { mailAppForEmail } from "./mail-apps"
+export type { MailApp } from "./mail-apps"
+export { VibesAuthGuard } from "./guard"
+export { VibesAuthAutoPrompt } from "./auto-prompt"
+export { getAuthContext, subscribeAuthRequired, notifyAuthRequired } from "./bridge"
+export type { VibesAuthConfig, VibesAuthClient, VibesUser } from "./client"
+export type { VibesAuthContextValue } from "./react"