@omg-dev/sdk 0.4.29 → 0.4.31

package/src/brand/OmgBadge.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useId, useState, type CSSProperties } from "react"
-import { VibesFeedback } from "../feedback/VibesFeedback"
+import { useId, useState, type CSSProperties } from "react"
 
 export interface OmgBadgeProps {
   /** Link used by the dialog CTA. Default: https://omg.dev */
@@ -13,169 +12,29 @@ const BRAND = "#FF5530"
 const Z_BADGE = 2147482000
 const Z_DIALOG = 2147483100
 
-// Cross-process signal the brand badge dispatches to summon the (button-less)
-// feedback sheet it mounts. Bundling feedback INTO this badge is deliberate:
-// one floating control in the corner, not three.
-export const FEEDBACK_OPEN_EVENT = "vibes:feedback:open"
-
-// Build-time gate (set by @omg-dev/vite-plugin via `define`). True when the app
-// has feedback enabled AND the brand badge owns it. Falls back to true when the
-// badge is used outside the plugin (it's only auto-injected by the plugin, so
-// in practice the define is always present in published bundles).
-declare const __VIBES_BRAND_FEEDBACK__: boolean | undefined
-function feedbackBundled(): boolean {
-  try {
-    return typeof __VIBES_BRAND_FEEDBACK__ === "undefined" ? true : __VIBES_BRAND_FEEDBACK__
-  } catch {
-    return true
-  }
-}
-
-// ── Remix ("Make it mine") gating ────────────────────────────────────────────
-// The badge's first job on a PUBLIC Explore-listed app is the recipient→creator
-// hinge: a visitor who only has the shared link can fork the app back on
-// omg.dev. Private (not listed) apps keep the plain branding badge only —
-// remixBySlug rejects them, so the CTA must never appear. Once dismissed, the
-// SAME badge collapses to branding — the omg mark never leaves, only the CTA.
-const DISMISS_KEY = "vibes-remix:dismissed"
-const REMIX_ORIGIN =
-  (typeof import.meta !== "undefined" &&
-    (import.meta as { env?: Record<string, string | undefined> }).env?.VITE_REMIX_ORIGIN) ||
-  "https://omg.dev"
-// Control-plane host for the unauthenticated isRemixable probe. Overridable for
-// self-host; defaults to production. CORS is open for this path only (Caddy).
-const CONTROLPLANE_URL = (
-  (typeof import.meta !== "undefined" &&
-    (import.meta as { env?: Record<string, string | undefined> }).env?.VITE_CONTROLPLANE_URL) ||
-  "https://backend.omg.dev"
-).replace(/\/$/, "")
-
-function appSlug(): string | null {
-  if (typeof import.meta === "undefined") return null
-  const env = (import.meta as { env?: Record<string, string | undefined> }).env
-  const slug = env?.VITE_APP_SLUG?.trim()
-  if (!slug || !/^[a-z0-9-]+$/.test(slug)) return null
-  return slug
-}
-
-function isDismissed(): boolean {
-  try {
-    return localStorage.getItem(DISMISS_KEY) === "1"
-  } catch {
-    return false
-  }
-}
-
-function setDismissedFlag() {
-  try {
-    localStorage.setItem(DISMISS_KEY, "1")
-  } catch {
-    /* private mode */
-  }
-}
-
-/** Live check: only Explore-listed public apps may show "Make it mine". Fail closed. */
-async function fetchRemixable(slug: string): Promise<boolean> {
-  try {
-    const res = await fetch(`${CONTROLPLANE_URL}/api/projects/isRemixable`, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({ slug }),
-      // Public boolean; no credentials. Avoid caching a stale private→public flip.
-      cache: "no-store",
-    })
-    if (!res.ok) return false
-    const data = (await res.json()) as { remixable?: unknown }
-    return data?.remixable === true
-  } catch {
-    return false
-  }
-}
-
 export function OmgBadge({
   href = "https://omg.dev",
   label = "What is omg?",
 }: OmgBadgeProps) {
   const [open, setOpen] = useState(false)
-  // Fail closed: start as branding. Promote to remix only after the public
-  // catalog confirms this slug is listed — never flash "Make it mine" on a
-  // private published app while the probe is in flight.
-  const slug = appSlug()
-  const [remix, setRemix] = useState(false)
   const titleId = useId()
   const descriptionId = useId()
   const markId = useId().replace(/[^a-zA-Z0-9_-]/g, "")
 
-  useEffect(() => {
-    if (!slug || isDismissed()) return
-    let cancelled = false
-    void fetchRemixable(slug).then((ok) => {
-      if (!cancelled && ok && !isDismissed()) setRemix(true)
-    })
-    return () => {
-      cancelled = true
-    }
-  }, [slug])
-
-  function dismissRemix() {
-    setDismissedFlag()
-    setRemix(false)
-  }
-
-  function summonFeedback() {
-    setOpen(false)
-    if (typeof window !== "undefined") {
-      window.dispatchEvent(new CustomEvent(FEEDBACK_OPEN_EVENT))
-    }
-  }
-
   return (
     <>
-      {remix && slug ? (
-        // Remix state: the omg mark + "Make it mine" CTA. Tapping the pill body
-        // navigates to the dashboard to fork the app; the ✕ collapses to the
-        // branding badge. ?ref=pwa attributes the click on /remix.
-        <a
-          href={`${REMIX_ORIGIN}/remix/${slug}?ref=pwa`}
-          aria-label="Make this app mine"
-          data-vibes-feedback=""
-          style={badgeStyle}
-        >
-          <OmgMark size={18} id={`remix-${markId}`} />
-          <span style={badgeTextStyle}>Make it mine</span>
-          <button
-            type="button"
-            aria-label="Dismiss"
-            onClick={(event) => {
-              event.preventDefault()
-              event.stopPropagation()
-              dismissRemix()
-            }}
-            style={dismissStyle}
-          >
-            <svg aria-hidden="true" width="13" height="13" viewBox="0 0 24 24" fill="none">
-              <path d="M6 6l12 12M18 6 6 18" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
-            </svg>
-          </button>
-        </a>
-      ) : (
-        // Branding state: the omg mark + "omg". Opens the "Built with omg"
-        // dialog, which also hosts the feedback entry.
-        <button
-          type="button"
-          aria-label={label}
-          data-vibes-feedback=""
-          onClick={() => setOpen(true)}
-          style={badgeStyle}
-        >
-          <OmgMark size={18} id={`badge-${markId}`} />
-          <span style={badgeTextStyle}>omg</span>
-        </button>
-      )}
+      <button
+        type="button"
+        aria-label={label}
+        onClick={() => setOpen(true)}
+        style={badgeStyle}
+      >
+        <OmgMark size={18} id={`badge-${markId}`} />
+        <span style={badgeTextStyle}>omg</span>
+      </button>
 
       {open && (
         <div
-          data-vibes-feedback=""
           role="presentation"
           style={backdropStyle}
           onMouseDown={(event) => {
@@ -213,20 +72,9 @@ export function OmgBadge({
             <a href={href} target="_blank" rel="noopener noreferrer" style={ctaStyle}>
               Learn about omg
             </a>
-            {feedbackBundled() && (
-              <button type="button" onClick={summonFeedback} style={secondaryStyle}>
-                Send feedback
-              </button>
-            )}
           </div>
         </div>
       )}
-
-      {/* Feedback is bundled into the badge — a button-less sheet summoned from
-          the dialog (or by gesture), so there's no second floating control. */}
-      {feedbackBundled() && (
-        <VibesFeedback showButton={false} accent={BRAND} title="Send feedback" />
-      )}
     </>
   )
 }
@@ -288,20 +136,6 @@ const badgeTextStyle: CSSProperties = {
   padding: "0 3px",
 }
 
-const dismissStyle: CSSProperties = {
-  width: 22,
-  height: 22,
-  flex: "0 0 auto",
-  borderRadius: 999,
-  border: "none",
-  background: "rgba(20, 16, 12, 0.06)",
-  color: "#6b6459",
-  display: "grid",
-  placeItems: "center",
-  cursor: "pointer",
-  padding: 0,
-}
-
 const backdropStyle: CSSProperties = {
   position: "fixed",
   inset: 0,
@@ -383,21 +217,3 @@ const ctaStyle: CSSProperties = {
   textDecoration: "none",
   letterSpacing: 0,
 }
-
-const secondaryStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "100%",
-  height: 44,
-  marginTop: 8,
-  borderRadius: 12,
-  background: "transparent",
-  border: "1px solid rgba(21, 17, 13, 0.14)",
-  color: "#15110d",
-  fontSize: 15,
-  fontWeight: 650,
-  cursor: "pointer",
-  fontFamily: font,
-  letterSpacing: 0,
-}

package/src/brand/auto.tsx

@@ -4,13 +4,6 @@
 // app's React tree so it survives user app rewrites and does not require each
 // generated app to carry attribution code in its source.
 //
-// One control, not three: this badge is the "Make it mine" remix CTA on a fresh
-// visit to a PUBLIC (Explore-listed) app (same omg mark), collapses to the plain
-// branding badge on dismiss or when the app is private, and bundles the
-// (button-less) feedback sheet, summoned from its dialog. The vite-plugin
-// therefore skips the standalone feedback/auto + remix-cta imports whenever
-// this badge is enabled (the default).
-
 import { createRoot } from "react-dom/client"
 import { OmgBadge } from "./OmgBadge"
 
@@ -21,8 +14,6 @@ function mount() {
   if (document.getElementById(HOST_ID)) return
   const host = document.createElement("div")
   host.id = HOST_ID
-  // Feedback screenshots should capture the app, not platform chrome.
-  host.setAttribute("data-vibes-feedback", "")
   document.body.appendChild(host)
   createRoot(host).render(<OmgBadge />)
 }

package/src/index.ts

@@ -14,9 +14,6 @@ export * from "./auth/index"
 // Storage surface — useUpload() + <VibesUpload />. Re-exported here for
 // the same publish-workflow reason as auth (only "." subpath survives).
 export * from "./storage/index"
-// Feedback surface — <VibesFeedback /> gesture widget + trace capture.
-// Re-exported here for the same publish-workflow reason (only "." survives).
-export * from "./feedback/index"
 // Brand surface — <OmgBadge /> platform attribution badge.
 export * from "./brand/index"
 // Notifications surface — durable in-app inbox + Web Push registration.

package/src/sandbox.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, it } from "vitest";
 import { createSandbox, forkSandbox, runtimeClaims } from "./sandbox";
 
+it("exports the funded transcription capability", () => {
+  expect(runtimeClaims.speechTranscribe).toBe("speech.transcribe");
+});
+
 describe("sandbox SDK", () => {
   it("posts create requests to the sandbox router", async () => {
     const calls: Array<{ url: string; body: unknown }> = [];

package/src/sandbox.ts

@@ -1,6 +1,7 @@
 export const runtimeClaims = {
   llmInvoke: "llm.invoke",
   mediaInvoke: "media.invoke",
+  speechTranscribe: "speech.transcribe",
   browserUse: "browser.use",
   sandboxCreate: "sandbox.create",
   sandboxDelegate: "sandbox.delegate",

package/dist/OmgBadge-CDnTIlnn.mjs

@@ -1,371 +0,0 @@
-import { t as VibesFeedback } from "./VibesFeedback-BF2Vf6FK.mjs";
-import { useEffect, useId, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/brand/OmgBadge.tsx
-const BRAND = "#FF5530";
-const Z_BADGE = 2147482e3;
-const Z_DIALOG = 2147483100;
-const FEEDBACK_OPEN_EVENT = "vibes:feedback:open";
-function feedbackBundled() {
-	try {
-		return typeof __VIBES_BRAND_FEEDBACK__ === "undefined" ? true : __VIBES_BRAND_FEEDBACK__;
-	} catch {
-		return true;
-	}
-}
-const DISMISS_KEY = "vibes-remix:dismissed";
-const REMIX_ORIGIN = typeof import.meta !== "undefined" && import.meta.env?.VITE_REMIX_ORIGIN || "https://omg.dev";
-const CONTROLPLANE_URL = (typeof import.meta !== "undefined" && import.meta.env?.VITE_CONTROLPLANE_URL || "https://backend.omg.dev").replace(/\/$/, "");
-function appSlug() {
-	if (typeof import.meta === "undefined") return null;
-	const slug = import.meta.env?.VITE_APP_SLUG?.trim();
-	if (!slug || !/^[a-z0-9-]+$/.test(slug)) return null;
-	return slug;
-}
-function isDismissed() {
-	try {
-		return localStorage.getItem(DISMISS_KEY) === "1";
-	} catch {
-		return false;
-	}
-}
-function setDismissedFlag() {
-	try {
-		localStorage.setItem(DISMISS_KEY, "1");
-	} catch {}
-}
-/** Live check: only Explore-listed public apps may show "Make it mine". Fail closed. */
-async function fetchRemixable(slug) {
-	try {
-		const res = await fetch(`${CONTROLPLANE_URL}/api/projects/isRemixable`, {
-			method: "POST",
-			headers: { "content-type": "application/json" },
-			body: JSON.stringify({ slug }),
-			cache: "no-store"
-		});
-		if (!res.ok) return false;
-		return (await res.json())?.remixable === true;
-	} catch {
-		return false;
-	}
-}
-function OmgBadge({ href = "https://omg.dev", label = "What is omg?" }) {
-	const [open, setOpen] = useState(false);
-	const slug = appSlug();
-	const [remix, setRemix] = useState(false);
-	const titleId = useId();
-	const descriptionId = useId();
-	const markId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
-	useEffect(() => {
-		if (!slug || isDismissed()) return;
-		let cancelled = false;
-		fetchRemixable(slug).then((ok) => {
-			if (!cancelled && ok && !isDismissed()) setRemix(true);
-		});
-		return () => {
-			cancelled = true;
-		};
-	}, [slug]);
-	function dismissRemix() {
-		setDismissedFlag();
-		setRemix(false);
-	}
-	function summonFeedback() {
-		setOpen(false);
-		if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent(FEEDBACK_OPEN_EVENT));
-	}
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		remix && slug ? /* @__PURE__ */ jsxs("a", {
-			href: `${REMIX_ORIGIN}/remix/${slug}?ref=pwa`,
-			"aria-label": "Make this app mine",
-			"data-vibes-feedback": "",
-			style: badgeStyle,
-			children: [
-				/* @__PURE__ */ jsx(OmgMark, {
-					size: 18,
-					id: `remix-${markId}`
-				}),
-				/* @__PURE__ */ jsx("span", {
-					style: badgeTextStyle,
-					children: "Make it mine"
-				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-label": "Dismiss",
-					onClick: (event) => {
-						event.preventDefault();
-						event.stopPropagation();
-						dismissRemix();
-					},
-					style: dismissStyle,
-					children: /* @__PURE__ */ jsx("svg", {
-						"aria-hidden": "true",
-						width: "13",
-						height: "13",
-						viewBox: "0 0 24 24",
-						fill: "none",
-						children: /* @__PURE__ */ jsx("path", {
-							d: "M6 6l12 12M18 6 6 18",
-							stroke: "currentColor",
-							strokeWidth: "2.4",
-							strokeLinecap: "round"
-						})
-					})
-				})
-			]
-		}) : /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-label": label,
-			"data-vibes-feedback": "",
-			onClick: () => setOpen(true),
-			style: badgeStyle,
-			children: [/* @__PURE__ */ jsx(OmgMark, {
-				size: 18,
-				id: `badge-${markId}`
-			}), /* @__PURE__ */ jsx("span", {
-				style: badgeTextStyle,
-				children: "omg"
-			})]
-		}),
-		open && /* @__PURE__ */ jsx("div", {
-			"data-vibes-feedback": "",
-			role: "presentation",
-			style: backdropStyle,
-			onMouseDown: (event) => {
-				if (event.target === event.currentTarget) setOpen(false);
-			},
-			children: /* @__PURE__ */ jsxs("div", {
-				role: "dialog",
-				"aria-modal": "true",
-				"aria-labelledby": titleId,
-				"aria-describedby": descriptionId,
-				style: dialogStyle,
-				children: [
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						"aria-label": "Close",
-						onClick: () => setOpen(false),
-						style: closeButtonStyle,
-						children: /* @__PURE__ */ jsx("svg", {
-							"aria-hidden": "true",
-							width: "18",
-							height: "18",
-							viewBox: "0 0 24 24",
-							fill: "none",
-							children: /* @__PURE__ */ jsx("path", {
-								d: "M6 6l12 12M18 6 6 18",
-								stroke: "currentColor",
-								strokeWidth: "2",
-								strokeLinecap: "round"
-							})
-						})
-					}),
-					/* @__PURE__ */ jsx("div", {
-						style: markWrapStyle,
-						children: /* @__PURE__ */ jsx(OmgMark, {
-							size: 34,
-							id: `dialog-${markId}`
-						})
-					}),
-					/* @__PURE__ */ jsx("h2", {
-						id: titleId,
-						style: titleStyle,
-						children: "Built with omg"
-					}),
-					/* @__PURE__ */ jsx("p", {
-						id: descriptionId,
-						style: bodyStyle,
-						children: "omg turns a plain-language idea into a real app, then hosts it with sign-in, data storage, and publishing already handled."
-					}),
-					/* @__PURE__ */ jsx("a", {
-						href,
-						target: "_blank",
-						rel: "noopener noreferrer",
-						style: ctaStyle,
-						children: "Learn about omg"
-					}),
-					feedbackBundled() && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: summonFeedback,
-						style: secondaryStyle,
-						children: "Send feedback"
-					})
-				]
-			})
-		}),
-		feedbackBundled() && /* @__PURE__ */ jsx(VibesFeedback, {
-			showButton: false,
-			accent: BRAND,
-			title: "Send feedback"
-		})
-	] });
-}
-function OmgMark({ size, id }) {
-	const maskId = `omg-mark-cut-${id}`;
-	return /* @__PURE__ */ jsxs("svg", {
-		"aria-hidden": "true",
-		width: size,
-		height: size,
-		viewBox: "0 0 100 100",
-		fill: "none",
-		style: {
-			display: "block",
-			flex: "0 0 auto"
-		},
-		children: [/* @__PURE__ */ jsxs("mask", {
-			id: maskId,
-			children: [/* @__PURE__ */ jsx("rect", {
-				width: "100",
-				height: "100",
-				fill: "white"
-			}), /* @__PURE__ */ jsx("circle", {
-				cx: "71",
-				cy: "29",
-				r: size <= 16 ? 16.5 : size <= 20 ? 15.2 : size <= 32 ? 14 : 13.2,
-				fill: "black"
-			})]
-		}), /* @__PURE__ */ jsx("circle", {
-			cx: "50",
-			cy: "50",
-			r: "44",
-			fill: BRAND,
-			mask: `url(#${maskId})`
-		})]
-	});
-}
-const font = "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif";
-const badgeStyle = {
-	position: "fixed",
-	right: "max(14px, env(safe-area-inset-right))",
-	bottom: "calc(16px + env(safe-area-inset-bottom))",
-	zIndex: Z_BADGE,
-	height: 38,
-	padding: "0 8px 0 10px",
-	border: "1px solid rgba(20, 16, 12, 0.12)",
-	borderRadius: 999,
-	background: "rgba(255, 255, 255, 0.94)",
-	color: "#15110d",
-	boxShadow: "0 8px 28px rgba(0, 0, 0, 0.16)",
-	display: "inline-flex",
-	alignItems: "center",
-	gap: 7,
-	fontFamily: font,
-	cursor: "pointer",
-	textDecoration: "none",
-	WebkitTapHighlightColor: "transparent",
-	backdropFilter: "blur(10px)"
-};
-const badgeTextStyle = {
-	fontSize: 13,
-	lineHeight: "18px",
-	fontWeight: 700,
-	letterSpacing: 0,
-	padding: "0 3px"
-};
-const dismissStyle = {
-	width: 22,
-	height: 22,
-	flex: "0 0 auto",
-	borderRadius: 999,
-	border: "none",
-	background: "rgba(20, 16, 12, 0.06)",
-	color: "#6b6459",
-	display: "grid",
-	placeItems: "center",
-	cursor: "pointer",
-	padding: 0
-};
-const backdropStyle = {
-	position: "fixed",
-	inset: 0,
-	zIndex: Z_DIALOG,
-	display: "grid",
-	placeItems: "center",
-	padding: "24px 16px calc(24px + env(safe-area-inset-bottom))",
-	background: "rgba(15, 13, 11, 0.34)",
-	boxSizing: "border-box"
-};
-const dialogStyle = {
-	position: "relative",
-	width: "min(100%, 360px)",
-	borderRadius: 18,
-	padding: "26px 22px 20px",
-	background: "#fffaf4",
-	color: "#15110d",
-	boxShadow: "0 24px 70px rgba(0, 0, 0, 0.28)",
-	border: "1px solid rgba(21, 17, 13, 0.08)",
-	fontFamily: font,
-	boxSizing: "border-box"
-};
-const closeButtonStyle = {
-	position: "absolute",
-	top: 10,
-	right: 10,
-	width: 34,
-	height: 34,
-	borderRadius: 999,
-	border: "none",
-	background: "transparent",
-	color: "#6b6459",
-	display: "grid",
-	placeItems: "center",
-	cursor: "pointer"
-};
-const markWrapStyle = {
-	width: 52,
-	height: 52,
-	borderRadius: 16,
-	display: "grid",
-	placeItems: "center",
-	background: "#fff",
-	boxShadow: "inset 0 0 0 1px rgba(21, 17, 13, 0.08)",
-	marginBottom: 16
-};
-const titleStyle = {
-	margin: 0,
-	color: "#15110d",
-	fontSize: 23,
-	lineHeight: "28px",
-	fontWeight: 750,
-	letterSpacing: 0
-};
-const bodyStyle = {
-	margin: "10px 0 18px",
-	color: "#5f574d",
-	fontSize: 15,
-	lineHeight: "22px",
-	letterSpacing: 0
-};
-const ctaStyle = {
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	width: "100%",
-	height: 44,
-	borderRadius: 12,
-	background: "#15110d",
-	color: "#fffaf4",
-	fontSize: 15,
-	fontWeight: 700,
-	textDecoration: "none",
-	letterSpacing: 0
-};
-const secondaryStyle = {
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	width: "100%",
-	height: 44,
-	marginTop: 8,
-	borderRadius: 12,
-	background: "transparent",
-	border: "1px solid rgba(21, 17, 13, 0.14)",
-	color: "#15110d",
-	fontSize: 15,
-	fontWeight: 650,
-	cursor: "pointer",
-	fontFamily: font,
-	letterSpacing: 0
-};
-//#endregion
-export { OmgBadge as t };