@omg-dev/sdk 0.4.24

package/src/brand/OmgBadge.tsx

@@ -0,0 +1,366 @@
+import { useId, useState, type CSSProperties } from "react"
+import { VibesFeedback } from "../feedback/VibesFeedback"
+
+export interface OmgBadgeProps {
+  /** Link used by the dialog CTA. Default: https://omg.dev */
+  href?: string
+  /** Accessible label for the floating badge button. */
+  label?: string
+}
+
+// The one brand colour. Don't recolour it — the coral IS the brand.
+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 PUBLISHED app is the recipient→creator hinge: a
+// visitor who only has the shared link can fork the app back on omg.dev. Once
+// they dismiss that, the SAME badge collapses to plain branding — the omg mark
+// never leaves, only the call-to-action does.
+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"
+
+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 */
+  }
+}
+
+export function OmgBadge({
+  href = "https://omg.dev",
+  label = "What is omg?",
+}: OmgBadgeProps) {
+  const [open, setOpen] = useState(false)
+  // "Make it mine" shows only on a published app (slug baked in) that the
+  // visitor hasn't dismissed yet. Dismissing keeps the badge — it just drops to
+  // the branding state — so the omg mark stays put.
+  const slug = appSlug()
+  const [remix, setRemix] = useState(() => slug !== null && !isDismissed())
+  const titleId = useId()
+  const descriptionId = useId()
+  const markId = useId().replace(/[^a-zA-Z0-9_-]/g, "")
+
+  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>
+      )}
+
+      {open && (
+        <div
+          data-vibes-feedback=""
+          role="presentation"
+          style={backdropStyle}
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget) setOpen(false)
+          }}
+        >
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={titleId}
+            aria-describedby={descriptionId}
+            style={dialogStyle}
+          >
+            <button
+              type="button"
+              aria-label="Close"
+              onClick={() => setOpen(false)}
+              style={closeButtonStyle}
+            >
+              <svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none">
+                <path d="M6 6l12 12M18 6 6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+              </svg>
+            </button>
+
+            <div style={markWrapStyle}>
+              <OmgMark size={34} id={`dialog-${markId}`} />
+            </div>
+            <h2 id={titleId} style={titleStyle}>
+              Built with omg
+            </h2>
+            <p id={descriptionId} style={bodyStyle}>
+              omg turns a plain-language idea into a real app, then hosts it with sign-in,
+              data storage, and publishing already handled.
+            </p>
+            <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" />
+      )}
+    </>
+  )
+}
+
+// The Gasp — a filled coral disc with a single circular bite at the top-right
+// (the startled "o" mouth). Matches the canonical mark in apps/web; the bite
+// radius nudges up at small sizes so the gap survives anti-aliasing. The old
+// badge mark cut a centred hole + a side dot, which was NOT the brand mark.
+function OmgMark({ size, id }: { size: number; id: string }) {
+  const maskId = `omg-mark-cut-${id}`
+  const biteR = size <= 16 ? 16.5 : size <= 20 ? 15.2 : size <= 32 ? 14 : 13.2
+  return (
+    <svg
+      aria-hidden="true"
+      width={size}
+      height={size}
+      viewBox="0 0 100 100"
+      fill="none"
+      style={{ display: "block", flex: "0 0 auto" }}
+    >
+      <mask id={maskId}>
+        <rect width="100" height="100" fill="white" />
+        <circle cx="71" cy="29" r={biteR} fill="black" />
+      </mask>
+      <circle cx="50" cy="50" r="44" fill={BRAND} mask={`url(#${maskId})`} />
+    </svg>
+  )
+}
+
+const font = "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
+
+const badgeStyle: CSSProperties = {
+  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: CSSProperties = {
+  fontSize: 13,
+  lineHeight: "18px",
+  fontWeight: 700,
+  letterSpacing: 0,
+  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,
+  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: CSSProperties = {
+  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: CSSProperties = {
+  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: CSSProperties = {
+  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: CSSProperties = {
+  margin: 0,
+  color: "#15110d",
+  fontSize: 23,
+  lineHeight: "28px",
+  fontWeight: 750,
+  letterSpacing: 0,
+}
+
+const bodyStyle: CSSProperties = {
+  margin: "10px 0 18px",
+  color: "#5f574d",
+  fontSize: 15,
+  lineHeight: "22px",
+  letterSpacing: 0,
+}
+
+const ctaStyle: CSSProperties = {
+  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: 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

@@ -0,0 +1,35 @@
+// @omg-dev/sdk/brand/auto — the single omg badge for published apps.
+//
+// Injected into published builds by @omg-dev/vite-plugin. It mounts outside the
+// 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 (same omg mark), collapses to the plain branding badge on dismiss, 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"
+
+const HOST_ID = "vibes-brand-badge-auto"
+
+function mount() {
+  if (typeof window === "undefined" || typeof document === "undefined") return
+  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 />)
+}
+
+if (typeof window !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", mount, { once: true })
+  } else {
+    mount()
+  }
+}

package/src/brand/index.ts

@@ -0,0 +1 @@
+export { OmgBadge, type OmgBadgeProps } from "./OmgBadge"