@omg-dev/pwa 0.4.24

package/dist/remix-cta.mjs

@@ -0,0 +1,122 @@
+import { o as isInIframe } from "./core-YJoFChtB.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createRoot } from "react-dom/client";
+//#region src/remix-cta.tsx
+const DISMISS_KEY = "vibes-remix:dismissed";
+const REMIX_ORIGIN = typeof import.meta !== "undefined" && import.meta.env?.VITE_REMIX_ORIGIN || "https://omg.dev";
+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 setDismissed() {
+	try {
+		localStorage.setItem(DISMISS_KEY, "1");
+	} catch {}
+}
+const STYLE_ID = "vibes-remix-cta-styles";
+function ensureStyles() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById(STYLE_ID)) return;
+	const el = document.createElement("style");
+	el.id = STYLE_ID;
+	el.textContent = `
+.vremix {
+  position: fixed;
+  right: max(16px, env(safe-area-inset-right));
+  bottom: max(16px, env(safe-area-inset-bottom));
+  z-index: 2147482000;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px 9px 14px;
+  border-radius: 9999px;
+  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: #fff;
+  background: #18181b;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
+  text-decoration: none;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 0.3s ease, transform 0.3s ease, background 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+.vremix.vremix-in { opacity: 1; transform: translateY(0); }
+.vremix:hover { background: #000; }
+.vremix-spark { width: 14px; height: 14px; display: block; }
+.vremix-close {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px; margin-left: 2px;
+  border-radius: 9999px; border: 0; cursor: pointer;
+  background: rgba(255, 255, 255, 0.14); color: #fff;
+  font: 600 12px/1 system-ui, sans-serif;
+}
+.vremix-close:hover { background: rgba(255, 255, 255, 0.26); }
+@media (prefers-color-scheme: light) {
+  .vremix { background: #18181b; }
+}`;
+	document.head.appendChild(el);
+}
+function RemixCta({ slug }) {
+	return /* @__PURE__ */ jsxs("a", {
+		className: "vremix",
+		href: `${REMIX_ORIGIN}/remix/${slug}?ref=pwa`,
+		ref: (node) => {
+			if (node) requestAnimationFrame(() => node.classList.add("vremix-in"));
+		},
+		children: [
+			/* @__PURE__ */ jsx("svg", {
+				className: "vremix-spark",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M12 3l1.9 4.6L18.5 9.5 13.9 11.4 12 16l-1.9-4.6L5.5 9.5l4.6-1.9L12 3z",
+					fill: "currentColor"
+				})
+			}),
+			"Make it mine",
+			/* @__PURE__ */ jsx("button", {
+				className: "vremix-close",
+				"aria-label": "Dismiss",
+				onClick: (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					setDismissed();
+					const host = document.getElementById("vibes-remix-cta");
+					if (host) host.remove();
+				},
+				children: "×"
+			})
+		]
+	});
+}
+function shouldShow() {
+	if (typeof window === "undefined" || typeof document === "undefined") return false;
+	if (isInIframe()) return false;
+	if (isDismissed()) return false;
+	return appSlug() !== null;
+}
+function mount() {
+	if (!shouldShow()) return;
+	const slug = appSlug();
+	if (!slug) return;
+	ensureStyles();
+	const host = document.createElement("div");
+	host.id = "vibes-remix-cta";
+	document.body.appendChild(host);
+	createRoot(host).render(/* @__PURE__ */ jsx(RemixCta, { slug }));
+}
+if (typeof window !== "undefined") if (document.readyState === "complete") setTimeout(mount, 1800);
+else window.addEventListener("load", () => setTimeout(mount, 1800), { once: true });
+//#endregion
+export {};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@omg-dev/pwa",
+  "version": "0.4.24",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./auto": {
+      "types": "./src/auto.tsx",
+      "default": "./dist/auto.mjs"
+    },
+    "./remix-cta": {
+      "types": "./src/remix-cta.tsx",
+      "default": "./dist/remix-cta.mjs"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.4.5"
+  },
+  "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/auto.tsx

@@ -0,0 +1,55 @@
+// @omg-dev/pwa/auto — soft install prompt, injected into published builds by
+// @omg-dev/vite-plugin (appended import in the app entry; see its pwa.ts).
+//
+// Mounts OUTSIDE the app's React tree (own root, own DOM node) so it
+// survives whatever the build agent does to App.tsx/main.tsx. Policy is
+// deliberately conservative:
+//   - never in an iframe (dashboard preview pane)
+//   - never when already running standalone / installed
+//   - mobile platforms only — desktop visitors aren't nagged
+//   - second visit onwards, shown ONCE; an explicit dismiss is forever
+//
+// Apps that want more control: vibes({ pwa: { autoPrompt: false } }) in
+// vite.config.ts and place <VibesInstallPrompt/> from @omg-dev/pwa manually.
+
+import { createRoot } from "react-dom/client"
+import {
+  countVisit,
+  detectPlatform,
+  isDismissed,
+  isInIframe,
+  isStandalone,
+  setAutoShown,
+  wasAutoShown,
+} from "./core"
+import { VibesInstallPrompt } from "./react"
+
+function shouldAutoShow(): boolean {
+  if (typeof window === "undefined" || typeof document === "undefined") return false
+  if (isInIframe()) return false
+  if (isStandalone()) return false
+  if (isDismissed() || wasAutoShown()) return false
+  const platform = detectPlatform()
+  if (platform !== "ios-safari" && platform !== "ios-chrome" && platform !== "ios-other" && platform !== "android") {
+    return false
+  }
+  return countVisit() >= 2
+}
+
+function mount() {
+  if (!shouldAutoShow()) return
+  setAutoShown()
+  const host = document.createElement("div")
+  host.id = "vibes-pwa-auto"
+  document.body.appendChild(host)
+  createRoot(host).render(<VibesInstallPrompt variant="floating" />)
+}
+
+if (typeof window !== "undefined") {
+  // Give the app a moment to settle before sliding anything in.
+  if (document.readyState === "complete") {
+    setTimeout(mount, 2500)
+  } else {
+    window.addEventListener("load", () => setTimeout(mount, 2500), { once: true })
+  }
+}

package/src/core.ts

@@ -0,0 +1,197 @@
+// @omg-dev/pwa — platform detection + beforeinstallprompt capture.
+//
+// The capture listener must be installed before Chrome fires
+// `beforeinstallprompt` (shortly after load), so this module attaches it at
+// import time. The store lives on `window` so the auto-injected entry and an
+// app-imported copy of this module always share one capture — a second copy
+// evaluating is a no-op.
+
+export interface BeforeInstallPromptEvent extends Event {
+  prompt(): Promise<void>
+  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>
+}
+
+export type InstallPlatform =
+  | "ios-safari" // Safari on iPhone/iPad — Share (toolbar) → Add to Home Screen
+  | "ios-chrome" // Chrome on iOS — Share (top bar) → Add to Home Screen
+  | "ios-other" // other iOS browsers — share sheet → Add to Home Screen (iOS ≥16.4)
+  | "android" // Chromium-family mobile — native prompt or ⋮ → Add to Home screen
+  | "desktop-chrome" // Chrome/Edge desktop — omnibox install icon
+  | "desktop-safari" // macOS Safari — File → Add to Dock
+  | "unsupported" // desktop Firefox, webviews, …
+
+export function detectPlatform(): InstallPlatform {
+  if (typeof navigator === "undefined") return "unsupported"
+  const ua = navigator.userAgent
+  const isIOS =
+    /iPad|iPhone|iPod/.test(ua) ||
+    // iPadOS reports itself as a Mac; touch points give it away.
+    (/Mac/.test(ua) && navigator.maxTouchPoints > 1)
+  if (isIOS) {
+    if (/CriOS/.test(ua)) return "ios-chrome"
+    if (/FxiOS|EdgiOS|OPiOS|OPT\//.test(ua)) return "ios-other"
+    if (/Safari/.test(ua)) return "ios-safari"
+    // In-app webviews (Instagram, Gmail, …) have no share-sheet install row.
+    return "unsupported"
+  }
+  if (/Android/.test(ua)) {
+    // Android webviews can't install.
+    if (/; wv\)/.test(ua)) return "unsupported"
+    return "android"
+  }
+  if (/Edg\//.test(ua)) return "desktop-chrome"
+  if (/Chrome|Chromium/.test(ua)) return "desktop-chrome"
+  if (/Safari/.test(ua)) return "desktop-safari"
+  return "unsupported"
+}
+
+export function isStandalone(): boolean {
+  if (typeof window === "undefined") return false
+  if (window.matchMedia?.("(display-mode: standalone)").matches) return true
+  return (navigator as { standalone?: boolean }).standalone === true
+}
+
+/** True inside any iframe — e.g. the omg dashboard's preview pane. The
+ * install UI must never render there: the iframe URL is not the app URL. */
+export function isInIframe(): boolean {
+  try {
+    return window.self !== window.top
+  } catch {
+    return true // cross-origin parent → definitely framed
+  }
+}
+
+// ── install-prompt store (window singleton) ─────────────────────────────────
+
+export interface InstallState {
+  canPrompt: boolean
+  installed: boolean
+}
+
+interface PwaStore {
+  bip: BeforeInstallPromptEvent | null
+  snapshot: InstallState
+  subs: Set<() => void>
+}
+
+const SERVER_SNAPSHOT: InstallState = { canPrompt: false, installed: false }
+
+function getStore(): PwaStore | null {
+  if (typeof window === "undefined") return null
+  const w = window as typeof window & { __vibesPwaStore?: PwaStore }
+  if (!w.__vibesPwaStore) {
+    const store: PwaStore = {
+      bip: null,
+      snapshot: { canPrompt: false, installed: isStandalone() },
+      subs: new Set(),
+    }
+    w.__vibesPwaStore = store
+    window.addEventListener("beforeinstallprompt", (e) => {
+      e.preventDefault() // suppress Chrome's mini-infobar; we prompt on tap
+      store.bip = e as BeforeInstallPromptEvent
+      publish(store)
+    })
+    window.addEventListener("appinstalled", () => {
+      store.bip = null
+      store.snapshot = { canPrompt: false, installed: true }
+      for (const cb of store.subs) cb()
+    })
+  }
+  return w.__vibesPwaStore
+}
+
+function publish(store: PwaStore) {
+  store.snapshot = { canPrompt: !!store.bip, installed: store.snapshot.installed }
+  for (const cb of store.subs) cb()
+}
+
+// Attach the capture listener as early as possible.
+getStore()
+
+export function subscribeInstallState(cb: () => void): () => void {
+  const store = getStore()
+  if (!store) return () => {}
+  store.subs.add(cb)
+  return () => store.subs.delete(cb)
+}
+
+export function getInstallState(): InstallState {
+  return getStore()?.snapshot ?? SERVER_SNAPSHOT
+}
+
+export function getServerInstallState(): InstallState {
+  return SERVER_SNAPSHOT
+}
+
+/** Fire the captured native install prompt (Chromium only). Resolves
+ * "unavailable" when no prompt was captured OR prompt() itself fails
+ * (emulated/headless contexts) — callers fall back to the guide. */
+export async function promptNativeInstall(): Promise<"accepted" | "dismissed" | "unavailable"> {
+  const store = getStore()
+  if (!store?.bip) return "unavailable"
+  const ev = store.bip
+  store.bip = null
+  try {
+    await ev.prompt()
+    const { outcome } = await ev.userChoice
+    if (outcome === "accepted") store.snapshot = { canPrompt: false, installed: true }
+    publish(store)
+    return outcome
+  } catch {
+    publish(store)
+    return "unavailable"
+  }
+}
+
+// ── persistence (per-origin localStorage) ────────────────────────────────────
+
+const KEY_DISMISSED = "vibes-pwa:dismissed"
+const KEY_VISITS = "vibes-pwa:visits"
+const KEY_AUTO_SHOWN = "vibes-pwa:auto-shown"
+const SESSION_COUNTED = "vibes-pwa:counted"
+
+function lsGet(key: string): string | null {
+  try {
+    return localStorage.getItem(key)
+  } catch {
+    return null // private mode / storage disabled
+  }
+}
+
+function lsSet(key: string, value: string) {
+  try {
+    localStorage.setItem(key, value)
+  } catch {
+    /* private mode */
+  }
+}
+
+export function isDismissed(): boolean {
+  return lsGet(KEY_DISMISSED) === "1"
+}
+
+export function setDismissed() {
+  lsSet(KEY_DISMISSED, "1")
+}
+
+export function wasAutoShown(): boolean {
+  return lsGet(KEY_AUTO_SHOWN) === "1"
+}
+
+export function setAutoShown() {
+  lsSet(KEY_AUTO_SHOWN, "1")
+}
+
+/** Count one visit per browser session; returns the running total. */
+export function countVisit(): number {
+  const prev = Number(lsGet(KEY_VISITS) ?? "0") || 0
+  try {
+    if (sessionStorage.getItem(SESSION_COUNTED) === "1") return prev
+    sessionStorage.setItem(SESSION_COUNTED, "1")
+  } catch {
+    return prev + 1 // can't dedupe — count it, don't persist double
+  }
+  const next = prev + 1
+  lsSet(KEY_VISITS, String(next))
+  return next
+}

package/src/icons.tsx

@@ -0,0 +1,134 @@
+// @omg-dev/pwa — inline SVG glyphs (lucide-style strokes, currentColor).
+// Dependency-free so the package adds nothing to user-app bundles.
+
+interface IconProps {
+  size?: number
+  className?: string
+}
+
+function svgProps({ size = 18, className }: IconProps) {
+  return {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round" as const,
+    strokeLinejoin: "round" as const,
+    className,
+    "aria-hidden": true,
+  }
+}
+
+/** iOS share: square with arrow up through the top. */
+export function ShareIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7" />
+      <polyline points="16 6 12 2 8 6" />
+      <line x1="12" y1="2" x2="12" y2="15" />
+    </svg>
+  )
+}
+
+export function SquarePlusIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <rect width="18" height="18" x="3" y="3" rx="3" />
+      <path d="M8 12h8" />
+      <path d="M12 8v8" />
+    </svg>
+  )
+}
+
+export function EllipsisVerticalIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <circle cx="12" cy="5" r="1" fill="currentColor" />
+      <circle cx="12" cy="12" r="1" fill="currentColor" />
+      <circle cx="12" cy="19" r="1" fill="currentColor" />
+    </svg>
+  )
+}
+
+export function ChevronLeftIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  )
+}
+
+export function ChevronRightIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  )
+}
+
+export function BookIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
+    </svg>
+  )
+}
+
+export function CopySquaresIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <rect width="14" height="14" x="8" y="8" rx="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  )
+}
+
+/** Chrome's omnibox install glyph: monitor with a down arrow. */
+export function MonitorDownIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <path d="M12 13V7" />
+      <path d="m15 10-3 3-3-3" />
+      <rect width="20" height="14" x="2" y="3" rx="2" />
+      <path d="M12 17v4" />
+      <path d="M8 21h8" />
+    </svg>
+  )
+}
+
+export function SmartphoneIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <rect width="14" height="20" x="5" y="2" rx="2" />
+      <path d="M12 18h.01" />
+    </svg>
+  )
+}
+
+export function XIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  )
+}
+
+export function CheckIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  )
+}
+
+export function LockIcon(p: IconProps) {
+  return (
+    <svg {...svgProps(p)}>
+      <rect width="18" height="11" x="3" y="11" rx="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </svg>
+  )
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+// @omg-dev/pwa — universal "Add to Home Screen" onboarding.
+//
+// Shared between the omg dashboard (workspace:*) and user-generated apps
+// (registry + template bake). Self-contained styling — no Tailwind classes,
+// no CSS imports; themes itself from the host's shadcn CSS variables with
+// sane light/dark fallbacks.
+
+export {
+  detectPlatform,
+  isStandalone,
+  isInIframe,
+  promptNativeInstall,
+  isDismissed,
+  setDismissed,
+  countVisit,
+  type InstallPlatform,
+  type InstallState,
+  type BeforeInstallPromptEvent,
+} from "./core"
+
+export { useInstallPrompt, InstallGuide, VibesInstallPrompt, defaultAppName } from "./react"