@omg-dev/pwa 0.4.33 → 0.4.35

package/dist/auto.mjs

@@ -1,4 +1,4 @@
-import { a as countVisit, c as isInIframe, d as setAutoShown, l as isStandalone, n as VibesInstallPrompt, o as detectPlatform, p as wasAutoShown, s as isDismissed } from "./react-BYbYeTts.mjs";
+import { a as countVisit, c as isInIframe, f as setAutoShown, l as isIosInstallPlatform, m as wasAutoShown, n as VibesInstallPrompt, o as detectPlatform, s as isDismissed, u as isStandalone } from "./react-BHavFwjG.mjs";
 import { jsx } from "react/jsx-runtime";
 import { createRoot } from "react-dom/client";
 //#region src/auto.tsx
@@ -8,7 +8,7 @@ function shouldAutoShow() {
 	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;
+	if (!isIosInstallPlatform(platform) && platform !== "android") return false;
 	return countVisit() >= 2;
 }
 function mount() {

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import { a as countVisit, c as isInIframe, f as setDismissed, i as useInstallPrompt, l as isStandalone, n as VibesInstallPrompt, o as detectPlatform, r as defaultAppName, s as isDismissed, t as InstallGuide, u as promptNativeInstall } from "./react-BYbYeTts.mjs";
-export { InstallGuide, VibesInstallPrompt, countVisit, defaultAppName, detectPlatform, isDismissed, isInIframe, isStandalone, promptNativeInstall, setDismissed, useInstallPrompt };
+import { a as countVisit, c as isInIframe, d as promptNativeInstall, i as useInstallPrompt, l as isIosInstallPlatform, n as VibesInstallPrompt, o as detectPlatform, p as setDismissed, r as defaultAppName, s as isDismissed, t as InstallGuide, u as isStandalone } from "./react-BHavFwjG.mjs";
+export { InstallGuide, VibesInstallPrompt, countVisit, defaultAppName, detectPlatform, isDismissed, isInIframe, isIosInstallPlatform, isStandalone, promptNativeInstall, setDismissed, useInstallPrompt };

package/dist/{react-BYbYeTts.mjs → react-BHavFwjG.mjs}

@@ -2,6 +2,9 @@ import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from
 import { createPortal } from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/core.ts
+function isIosInstallPlatform(platform) {
+	return platform === "ios-safari" || platform === "ios-chrome" || platform === "ios-other";
+}
 function detectPlatform() {
 	if (typeof navigator === "undefined") return "unsupported";
 	const ua = navigator.userAgent;
@@ -198,6 +201,7 @@ const CSS = `
 .vpwa-open .vpwa-backdrop { opacity: 1; }
 .vpwa-sheet {
   position: relative; width: 100%; max-width: 430px;
+  max-height: calc(100dvh - 12px); overflow-y: auto; overscroll-behavior: contain;
   background: var(--card, var(--vpwa-bg));
   color: var(--card-foreground, var(--vpwa-fg));
   border: 1px solid var(--border, var(--vpwa-border)); border-bottom: none;
@@ -253,6 +257,46 @@ const CSS = `
 .vpwa-steptext { font-size: 14px; font-weight: 500; }
 .vpwa-stepcap { font-weight: 400; color: var(--muted-foreground, var(--vpwa-muted)); }
 
+/* ── iOS walkthrough video ──────────────────────────────────────────── */
+.vpwa-video-guide {
+  display: flex; flex-direction: column; align-items: center; gap: 10px;
+  margin: 0; padding: 0;
+}
+.vpwa-video-frame {
+  position: relative; overflow: hidden;
+  width: min(100%, 31.5dvh, 292.5px);
+  aspect-ratio: 9 / 16;
+  border: 1px solid var(--border, var(--vpwa-border)); border-radius: 18px;
+  background: #000;
+  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
+}
+.vpwa-video {
+  display: block; width: 100%; height: 100%;
+  object-fit: cover;
+}
+.vpwa-video-loading {
+  position: absolute; inset: 0;
+  display: flex; align-items: flex-end; justify-content: center;
+  padding: 20px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.48), transparent 42%);
+  pointer-events: none;
+}
+.vpwa-video-loading span {
+  color: transparent; font-size: 12px; font-weight: 600; line-height: 1;
+  letter-spacing: 0.01em;
+  background: linear-gradient(100deg, rgba(255,255,255,0.46) 20%, #fff 45%, rgba(255,255,255,0.46) 70%);
+  background-size: 220% 100%; background-clip: text; -webkit-background-clip: text;
+  animation: vpwa-text-shimmer 1.6s ease-in-out infinite;
+}
+@keyframes vpwa-text-shimmer {
+  from { background-position: 100% 0; }
+  to { background-position: -100% 0; }
+}
+.vpwa-video-guide figcaption {
+  max-width: 32rem; color: var(--muted-foreground, var(--vpwa-muted));
+  font-size: 12px; line-height: 1.45; text-align: center;
+}
+
 /* ── mocks ───────────────────────────────────────────────────────────── */
 .vpwa-toolbar {
   display: flex; align-items: center; justify-content: space-between; gap: 16px;
@@ -293,6 +337,7 @@ const CSS = `
 }
 @media (prefers-reduced-motion: reduce) {
   .vpwa-target { animation: none; }
+  .vpwa-video-loading span { animation: none; color: rgba(255,255,255,0.82); }
   .vpwa-sheet, .vpwa-backdrop, .vpwa-banner { transition: none; }
 }
 
@@ -690,15 +735,19 @@ function stepsFor(platform) {
 		case "unsupported": return null;
 	}
 }
-function InstallGuide({ open, onClose, appName }) {
+function InstallGuide({ open, onClose, appName, iosVideoSrc, iosVideoPoster }) {
 	const { platform, canPrompt, installed, promptInstall } = useInstallPrompt();
 	const name = appName ?? defaultAppName();
 	const [mounted, setMounted] = useState(open);
 	const [shown, setShown] = useState(false);
+	const [videoFailed, setVideoFailed] = useState(false);
+	const [videoLoading, setVideoLoading] = useState(true);
 	useEffect(() => {
 		ensureStyles();
 		if (open) {
 			setMounted(true);
+			setVideoFailed(false);
+			setVideoLoading(true);
 			const raf = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)));
 			return () => cancelAnimationFrame(raf);
 		}
@@ -746,6 +795,33 @@ function InstallGuide({ open, onClose, appName }) {
 			children: "Not now"
 		})]
 	});
+	else if (isIosInstallPlatform(platform) && iosVideoSrc && !videoFailed) body = /* @__PURE__ */ jsxs("figure", {
+		className: "vpwa-video-guide",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "vpwa-video-frame",
+			children: [/* @__PURE__ */ jsx("video", {
+				className: "vpwa-video",
+				src: iosVideoSrc,
+				poster: iosVideoPoster,
+				autoPlay: true,
+				disablePictureInPicture: true,
+				loop: true,
+				muted: true,
+				playsInline: true,
+				preload: "auto",
+				"aria-label": "iOS Add to Home Screen walkthrough",
+				onCanPlay: () => setVideoLoading(false),
+				onPlaying: () => setVideoLoading(false),
+				onWaiting: () => setVideoLoading(true),
+				onError: () => setVideoFailed(true)
+			}), videoLoading ? /* @__PURE__ */ jsx("div", {
+				className: "vpwa-video-loading",
+				role: "status",
+				"aria-label": "Loading walkthrough video",
+				children: /* @__PURE__ */ jsx("span", { children: "Loading walkthrough…" })
+			}) : null]
+		}), /* @__PURE__ */ jsx("figcaption", { children: "Open your browser’s Share menu, choose Add to Home Screen, then tap Add." })]
+	});
 	else if (steps) body = /* @__PURE__ */ jsx("ol", {
 		className: "vpwa-steps",
 		children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", {
@@ -872,4 +948,4 @@ function VibesInstallPrompt({ appName, variant = "inline", className }) {
 	})] });
 }
 //#endregion
-export { countVisit as a, isInIframe as c, setAutoShown as d, setDismissed as f, useInstallPrompt as i, isStandalone as l, VibesInstallPrompt as n, detectPlatform as o, wasAutoShown as p, defaultAppName as r, isDismissed as s, InstallGuide as t, promptNativeInstall as u };
+export { countVisit as a, isInIframe as c, promptNativeInstall as d, setAutoShown as f, useInstallPrompt as i, isIosInstallPlatform as l, wasAutoShown as m, VibesInstallPrompt as n, detectPlatform as o, setDismissed as p, defaultAppName as r, isDismissed as s, InstallGuide as t, isStandalone as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omg-dev/pwa",
-  "version": "0.4.33",
+  "version": "0.4.35",
   "type": "module",
   "exports": {
     ".": {

package/src/auto.tsx

@@ -18,6 +18,7 @@ import {
   detectPlatform,
   isDismissed,
   isInIframe,
+  isIosInstallPlatform,
   isStandalone,
   setAutoShown,
   wasAutoShown,
@@ -30,7 +31,7 @@ function shouldAutoShow(): boolean {
   if (isStandalone()) return false
   if (isDismissed() || wasAutoShown()) return false
   const platform = detectPlatform()
-  if (platform !== "ios-safari" && platform !== "ios-chrome" && platform !== "ios-other" && platform !== "android") {
+  if (!isIosInstallPlatform(platform) && platform !== "android") {
     return false
   }
   return countVisit() >= 2

package/src/core.ts

@@ -20,6 +20,12 @@ export type InstallPlatform =
   | "desktop-safari" // macOS Safari — File → Add to Dock
   | "unsupported" // desktop Firefox, webviews, …
 
+export function isIosInstallPlatform(
+  platform: InstallPlatform,
+): platform is "ios-safari" | "ios-chrome" | "ios-other" {
+  return platform === "ios-safari" || platform === "ios-chrome" || platform === "ios-other"
+}
+
 export function detectPlatform(): InstallPlatform {
   if (typeof navigator === "undefined") return "unsupported"
   const ua = navigator.userAgent

package/src/index.ts

@@ -9,6 +9,7 @@ export {
   detectPlatform,
   isStandalone,
   isInIframe,
+  isIosInstallPlatform,
   promptNativeInstall,
   isDismissed,
   setDismissed,

package/src/react.tsx

@@ -13,6 +13,7 @@ import {
   getServerInstallState,
   isDismissed,
   isInIframe,
+  isIosInstallPlatform,
   promptNativeInstall,
   setDismissed,
   subscribeInstallState,
@@ -169,10 +170,16 @@ export function InstallGuide({
   open,
   onClose,
   appName,
+  iosVideoSrc,
+  iosVideoPoster,
 }: {
   open: boolean
   onClose: () => void
   appName?: string
+  /** Optional iOS walkthrough video. Static steps remain the load-failure fallback. */
+  iosVideoSrc?: string
+  /** Optional poster shown while the iOS walkthrough video loads. */
+  iosVideoPoster?: string
 }) {
   const { platform, canPrompt, installed, promptInstall } = useInstallPrompt()
   const name = appName ?? defaultAppName()
@@ -180,11 +187,15 @@ export function InstallGuide({
   // `shown` drives the CSS open state one frame after mount.
   const [mounted, setMounted] = useState(open)
   const [shown, setShown] = useState(false)
+  const [videoFailed, setVideoFailed] = useState(false)
+  const [videoLoading, setVideoLoading] = useState(true)
 
   useEffect(() => {
     ensureStyles()
     if (open) {
       setMounted(true)
+      setVideoFailed(false)
+      setVideoLoading(true)
       const raf = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)))
       return () => cancelAnimationFrame(raf)
     }
@@ -235,6 +246,37 @@ export function InstallGuide({
         </button>
       </div>
     )
+  } else if (isIosInstallPlatform(platform) && iosVideoSrc && !videoFailed) {
+    body = (
+      <figure className="vpwa-video-guide">
+        <div className="vpwa-video-frame">
+          <video
+            className="vpwa-video"
+            src={iosVideoSrc}
+            poster={iosVideoPoster}
+            autoPlay
+            disablePictureInPicture
+            loop
+            muted
+            playsInline
+            preload="auto"
+            aria-label="iOS Add to Home Screen walkthrough"
+            onCanPlay={() => setVideoLoading(false)}
+            onPlaying={() => setVideoLoading(false)}
+            onWaiting={() => setVideoLoading(true)}
+            onError={() => setVideoFailed(true)}
+          />
+          {videoLoading ? (
+            <div className="vpwa-video-loading" role="status" aria-label="Loading walkthrough video">
+              <span>Loading walkthrough…</span>
+            </div>
+          ) : null}
+        </div>
+        <figcaption>
+          Open your browser’s Share menu, choose Add to Home Screen, then tap Add.
+        </figcaption>
+      </figure>
+    )
   } else if (steps) {
     body = (
       <ol className="vpwa-steps">

package/src/styles.ts

@@ -54,6 +54,7 @@ const CSS = `
 .vpwa-open .vpwa-backdrop { opacity: 1; }
 .vpwa-sheet {
   position: relative; width: 100%; max-width: 430px;
+  max-height: calc(100dvh - 12px); overflow-y: auto; overscroll-behavior: contain;
   background: var(--card, var(--vpwa-bg));
   color: var(--card-foreground, var(--vpwa-fg));
   border: 1px solid var(--border, var(--vpwa-border)); border-bottom: none;
@@ -109,6 +110,46 @@ const CSS = `
 .vpwa-steptext { font-size: 14px; font-weight: 500; }
 .vpwa-stepcap { font-weight: 400; color: var(--muted-foreground, var(--vpwa-muted)); }
 
+/* ── iOS walkthrough video ──────────────────────────────────────────── */
+.vpwa-video-guide {
+  display: flex; flex-direction: column; align-items: center; gap: 10px;
+  margin: 0; padding: 0;
+}
+.vpwa-video-frame {
+  position: relative; overflow: hidden;
+  width: min(100%, 31.5dvh, 292.5px);
+  aspect-ratio: 9 / 16;
+  border: 1px solid var(--border, var(--vpwa-border)); border-radius: 18px;
+  background: #000;
+  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
+}
+.vpwa-video {
+  display: block; width: 100%; height: 100%;
+  object-fit: cover;
+}
+.vpwa-video-loading {
+  position: absolute; inset: 0;
+  display: flex; align-items: flex-end; justify-content: center;
+  padding: 20px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.48), transparent 42%);
+  pointer-events: none;
+}
+.vpwa-video-loading span {
+  color: transparent; font-size: 12px; font-weight: 600; line-height: 1;
+  letter-spacing: 0.01em;
+  background: linear-gradient(100deg, rgba(255,255,255,0.46) 20%, #fff 45%, rgba(255,255,255,0.46) 70%);
+  background-size: 220% 100%; background-clip: text; -webkit-background-clip: text;
+  animation: vpwa-text-shimmer 1.6s ease-in-out infinite;
+}
+@keyframes vpwa-text-shimmer {
+  from { background-position: 100% 0; }
+  to { background-position: -100% 0; }
+}
+.vpwa-video-guide figcaption {
+  max-width: 32rem; color: var(--muted-foreground, var(--vpwa-muted));
+  font-size: 12px; line-height: 1.45; text-align: center;
+}
+
 /* ── mocks ───────────────────────────────────────────────────────────── */
 .vpwa-toolbar {
   display: flex; align-items: center; justify-content: space-between; gap: 16px;
@@ -149,6 +190,7 @@ const CSS = `
 }
 @media (prefers-reduced-motion: reduce) {
   .vpwa-target { animation: none; }
+  .vpwa-video-loading span { animation: none; color: rgba(255,255,255,0.82); }
   .vpwa-sheet, .vpwa-backdrop, .vpwa-banner { transition: none; }
 }