@omg-dev/pwa 0.4.24

package/dist/react-Q0c2GHRr.mjs

@@ -0,0 +1,726 @@
+import { a as isDismissed, c as promptNativeInstall, d as subscribeInstallState, i as getServerInstallState, n as detectPlatform, o as isInIframe, r as getInstallState, u as setDismissed } from "./core-YJoFChtB.mjs";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/styles.ts
+const STYLE_ID = "vibes-pwa-styles";
+function ensureStyles() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById("vibes-pwa-styles")) return;
+	const el = document.createElement("style");
+	el.id = STYLE_ID;
+	el.textContent = CSS;
+	document.head.appendChild(el);
+}
+const CSS = `
+.vpwa {
+  --vpwa-bg: #ffffff;
+  --vpwa-fg: #18181b;
+  --vpwa-muted: #71717a;
+  --vpwa-surface: #f4f4f5;
+  --vpwa-border: rgba(0, 0, 0, 0.1);
+  --vpwa-accent: #2563eb;
+  --vpwa-accent-fg: #ffffff;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+.vpwa *, .vpwa *::before, .vpwa *::after { box-sizing: border-box; }
+@media (prefers-color-scheme: dark) {
+  .vpwa {
+    --vpwa-bg: #1c1c1e;
+    --vpwa-fg: #f4f4f5;
+    --vpwa-muted: #a1a1aa;
+    --vpwa-surface: #2c2c2e;
+    --vpwa-border: rgba(255, 255, 255, 0.12);
+    --vpwa-accent: #3b82f6;
+  }
+}
+
+/* ── overlay + sheet ─────────────────────────────────────────────────── */
+.vpwa-overlay {
+  position: fixed; inset: 0; z-index: 2147483000;
+  display: flex; align-items: flex-end; justify-content: center;
+}
+.vpwa-backdrop {
+  position: absolute; inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0; transition: opacity 0.25s ease;
+}
+.vpwa-open .vpwa-backdrop { opacity: 1; }
+.vpwa-sheet {
+  position: relative; width: 100%; max-width: 430px;
+  background: var(--card, var(--vpwa-bg));
+  color: var(--card-foreground, var(--vpwa-fg));
+  border: 1px solid var(--border, var(--vpwa-border)); border-bottom: none;
+  border-radius: 24px 24px 0 0;
+  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
+  padding: 8px 24px calc(24px + env(safe-area-inset-bottom));
+  transform: translateY(100%);
+  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+}
+.vpwa-open .vpwa-sheet { transform: translateY(0); }
+@media (min-width: 640px) {
+  .vpwa-overlay { align-items: center; padding: 24px; }
+  .vpwa-sheet {
+    border-radius: 24px; border-bottom: 1px solid var(--border, var(--vpwa-border));
+    padding: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
+    transform: translateY(12px); opacity: 0;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+  }
+  .vpwa-open .vpwa-sheet { transform: translateY(0); opacity: 1; }
+  .vpwa-handle { display: none; }
+}
+.vpwa-handle {
+  width: 40px; height: 4px; border-radius: 999px;
+  background: var(--muted-foreground, var(--vpwa-muted));
+  opacity: 0.25; margin: 4px auto 16px;
+}
+.vpwa-x {
+  position: absolute; top: 14px; right: 14px;
+  width: 32px; height: 32px; border-radius: 999px;
+  display: flex; align-items: center; justify-content: center;
+  border: none; background: transparent; cursor: pointer;
+  color: var(--muted-foreground, var(--vpwa-muted));
+}
+.vpwa-x:hover { background: var(--muted, var(--vpwa-surface)); }
+
+.vpwa-title {
+  margin: 0 24px 4px 0; font-size: 17px; font-weight: 600;
+  letter-spacing: -0.01em; line-height: 1.3;
+}
+.vpwa-sub {
+  margin: 0 0 20px; font-size: 13px; line-height: 1.45;
+  color: var(--muted-foreground, var(--vpwa-muted));
+}
+
+/* ── steps ───────────────────────────────────────────────────────────── */
+.vpwa-steps { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
+.vpwa-step { display: flex; flex-direction: column; gap: 8px; }
+.vpwa-stephead { display: flex; align-items: baseline; gap: 10px; }
+.vpwa-stepnum {
+  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
+  color: var(--muted-foreground, var(--vpwa-muted));
+}
+.vpwa-steptext { font-size: 14px; font-weight: 500; }
+.vpwa-stepcap { font-weight: 400; color: var(--muted-foreground, var(--vpwa-muted)); }
+
+/* ── mocks ───────────────────────────────────────────────────────────── */
+.vpwa-toolbar {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px;
+  background: var(--muted, var(--vpwa-surface));
+  border-radius: 12px; padding: 10px 16px;
+  color: var(--muted-foreground, var(--vpwa-muted));
+}
+.vpwa-toolbar svg { display: block; }
+.vpwa-omnibox {
+  display: flex; align-items: center; gap: 10px;
+  background: var(--muted, var(--vpwa-surface));
+  border-radius: 999px; padding: 8px 14px;
+  color: var(--muted-foreground, var(--vpwa-muted));
+  font-size: 13px;
+}
+.vpwa-omnibox-url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.7; }
+.vpwa-sheetrow {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  background: var(--background, var(--vpwa-bg));
+  border: 1px solid var(--border, var(--vpwa-border));
+  border-radius: 12px; padding: 11px 14px;
+  font-size: 14px; font-weight: 500;
+}
+.vpwa-confirm {
+  display: flex; align-items: center; justify-content: space-between;
+  background: var(--muted, var(--vpwa-surface));
+  border-radius: 12px; padding: 11px 16px; font-size: 14px;
+  color: var(--muted-foreground, var(--vpwa-muted));
+}
+.vpwa-confirm b { color: var(--primary, var(--vpwa-accent)); font-weight: 600; }
+.vpwa-target {
+  color: var(--primary, var(--vpwa-accent));
+  animation: vpwa-pulse 2s ease-in-out infinite;
+}
+@keyframes vpwa-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .vpwa-target { animation: none; }
+  .vpwa-sheet, .vpwa-backdrop, .vpwa-banner { transition: none; }
+}
+
+/* ── buttons ─────────────────────────────────────────────────────────── */
+.vpwa-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
+.vpwa-btn {
+  width: 100%; height: 44px; border-radius: 12px; border: none; cursor: pointer;
+  background: var(--primary, var(--vpwa-accent));
+  color: var(--primary-foreground, var(--vpwa-accent-fg));
+  font-size: 15px; font-weight: 600; font-family: inherit;
+}
+.vpwa-btn:active { opacity: 0.85; }
+.vpwa-btn-ghost {
+  width: 100%; height: 40px; border-radius: 12px; border: none; cursor: pointer;
+  background: transparent; font-family: inherit;
+  color: var(--muted-foreground, var(--vpwa-muted));
+  font-size: 14px; font-weight: 500;
+}
+.vpwa-btn-ghost:hover { background: var(--muted, var(--vpwa-surface)); }
+
+/* ── banner (floating / inline prompt) ───────────────────────────────── */
+.vpwa-banner {
+  display: flex; align-items: center; gap: 12px;
+  background: var(--card, var(--vpwa-bg));
+  color: var(--card-foreground, var(--vpwa-fg));
+  border: 1px solid var(--border, var(--vpwa-border));
+  border-radius: 16px; padding: 12px 12px 12px 14px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+.vpwa-banner-floating {
+  position: fixed; left: 16px; right: 16px;
+  bottom: calc(16px + env(safe-area-inset-bottom));
+  z-index: 2147482999; max-width: 430px; margin: 0 auto;
+  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
+  transform: translateY(calc(100% + 32px));
+  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+}
+.vpwa-banner-floating.vpwa-in { transform: translateY(0); }
+.vpwa-chip {
+  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+  background: color-mix(in srgb, var(--primary, var(--vpwa-accent)) 12%, transparent);
+  color: var(--primary, var(--vpwa-accent));
+}
+.vpwa-banner-text { flex: 1; min-width: 0; }
+.vpwa-banner-title {
+  margin: 0; font-size: 14px; font-weight: 600;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.vpwa-banner-cap {
+  margin: 0; font-size: 12px;
+  color: var(--muted-foreground, var(--vpwa-muted));
+}
+.vpwa-btn-sm {
+  height: 32px; padding: 0 14px; border-radius: 999px; border: none;
+  cursor: pointer; flex-shrink: 0; font-family: inherit;
+  background: var(--primary, var(--vpwa-accent));
+  color: var(--primary-foreground, var(--vpwa-accent-fg));
+  font-size: 13px; font-weight: 600;
+}
+.vpwa-banner .vpwa-x { position: static; width: 28px; height: 28px; flex-shrink: 0; }
+`;
+//#endregion
+//#region src/icons.tsx
+function svgProps({ size = 18, className }) {
+	return {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className,
+		"aria-hidden": true
+	};
+}
+/** iOS share: square with arrow up through the top. */
+function ShareIcon(p) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...svgProps(p),
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7" }),
+			/* @__PURE__ */ jsx("polyline", { points: "16 6 12 2 8 6" }),
+			/* @__PURE__ */ jsx("line", {
+				x1: "12",
+				y1: "2",
+				x2: "12",
+				y2: "15"
+			})
+		]
+	});
+}
+function SquarePlusIcon(p) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...svgProps(p),
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				width: "18",
+				height: "18",
+				x: "3",
+				y: "3",
+				rx: "3"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M8 12h8" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 8v8" })
+		]
+	});
+}
+function EllipsisVerticalIcon(p) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...svgProps(p),
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "5",
+				r: "1",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "1",
+				fill: "currentColor"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "19",
+				r: "1",
+				fill: "currentColor"
+			})
+		]
+	});
+}
+function ChevronLeftIcon(p) {
+	return /* @__PURE__ */ jsx("svg", {
+		...svgProps(p),
+		children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+	});
+}
+function ChevronRightIcon(p) {
+	return /* @__PURE__ */ jsx("svg", {
+		...svgProps(p),
+		children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+	});
+}
+function BookIcon(p) {
+	return /* @__PURE__ */ jsx("svg", {
+		...svgProps(p),
+		children: /* @__PURE__ */ jsx("path", { d: "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" })
+	});
+}
+function CopySquaresIcon(p) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...svgProps(p),
+		children: [/* @__PURE__ */ jsx("rect", {
+			width: "14",
+			height: "14",
+			x: "8",
+			y: "8",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })]
+	});
+}
+/** Chrome's omnibox install glyph: monitor with a down arrow. */
+function MonitorDownIcon(p) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...svgProps(p),
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M12 13V7" }),
+			/* @__PURE__ */ jsx("path", { d: "m15 10-3 3-3-3" }),
+			/* @__PURE__ */ jsx("rect", {
+				width: "20",
+				height: "14",
+				x: "2",
+				y: "3",
+				rx: "2"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 17v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M8 21h8" })
+		]
+	});
+}
+function SmartphoneIcon(p) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...svgProps(p),
+		children: [/* @__PURE__ */ jsx("rect", {
+			width: "14",
+			height: "20",
+			x: "5",
+			y: "2",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 18h.01" })]
+	});
+}
+function XIcon(p) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...svgProps(p),
+		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+	});
+}
+function CheckIcon(p) {
+	return /* @__PURE__ */ jsx("svg", {
+		...svgProps(p),
+		children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+	});
+}
+function LockIcon(p) {
+	return /* @__PURE__ */ jsxs("svg", {
+		...svgProps(p),
+		children: [/* @__PURE__ */ jsx("rect", {
+			width: "18",
+			height: "11",
+			x: "3",
+			y: "11",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })]
+	});
+}
+//#endregion
+//#region src/react.tsx
+function useInstallPrompt() {
+	const state = useSyncExternalStore(subscribeInstallState, getInstallState, getServerInstallState);
+	const platform = useMemo(detectPlatform, []);
+	return {
+		platform,
+		installed: state.installed,
+		/** Chromium captured `beforeinstallprompt` — one-tap install available. */
+		canPrompt: state.canPrompt,
+		supported: platform !== "unsupported" || state.canPrompt,
+		promptInstall: promptNativeInstall
+	};
+}
+function defaultAppName() {
+	if (typeof document === "undefined") return "this app";
+	return document.title.trim() || "this app";
+}
+function IosToolbarMock() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "vpwa-toolbar",
+		"aria-hidden": true,
+		children: [
+			/* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+			/* @__PURE__ */ jsx(ChevronRightIcon, {}),
+			/* @__PURE__ */ jsx("span", {
+				className: "vpwa-target",
+				children: /* @__PURE__ */ jsx(ShareIcon, { size: 20 })
+			}),
+			/* @__PURE__ */ jsx(BookIcon, {}),
+			/* @__PURE__ */ jsx(CopySquaresIcon, {})
+		]
+	});
+}
+function IosChromeBarMock() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "vpwa-omnibox",
+		"aria-hidden": true,
+		children: [
+			/* @__PURE__ */ jsx(LockIcon, { size: 14 }),
+			/* @__PURE__ */ jsx("span", {
+				className: "vpwa-omnibox-url",
+				children: typeof location !== "undefined" ? location.host : "example.app"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "vpwa-target",
+				children: /* @__PURE__ */ jsx(ShareIcon, { size: 18 })
+			})
+		]
+	});
+}
+function AndroidBarMock() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "vpwa-omnibox",
+		"aria-hidden": true,
+		children: [
+			/* @__PURE__ */ jsx(LockIcon, { size: 14 }),
+			/* @__PURE__ */ jsx("span", {
+				className: "vpwa-omnibox-url",
+				children: typeof location !== "undefined" ? location.host : "example.app"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "vpwa-target",
+				children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, { size: 18 })
+			})
+		]
+	});
+}
+function OmniboxInstallMock() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "vpwa-omnibox",
+		"aria-hidden": true,
+		children: [
+			/* @__PURE__ */ jsx(LockIcon, { size: 14 }),
+			/* @__PURE__ */ jsx("span", {
+				className: "vpwa-omnibox-url",
+				children: typeof location !== "undefined" ? location.host : "example.app"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "vpwa-target",
+				children: /* @__PURE__ */ jsx(MonitorDownIcon, { size: 18 })
+			})
+		]
+	});
+}
+function SheetRowMock({ label }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "vpwa-sheetrow",
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", {
+			className: "vpwa-target",
+			children: /* @__PURE__ */ jsx(SquarePlusIcon, { size: 20 })
+		})]
+	});
+}
+function ConfirmMock({ confirm }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "vpwa-confirm",
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx("span", { children: "Cancel" }), /* @__PURE__ */ jsx("b", { children: confirm })]
+	});
+}
+function stepsFor(platform) {
+	switch (platform) {
+		case "ios-safari": return [
+			{
+				text: "Tap Share",
+				caption: "in the toolbar",
+				mock: /* @__PURE__ */ jsx(IosToolbarMock, {})
+			},
+			{
+				text: "Tap Add to Home Screen",
+				caption: "scroll down to find it",
+				mock: /* @__PURE__ */ jsx(SheetRowMock, { label: "Add to Home Screen" })
+			},
+			{
+				text: "Tap Add",
+				mock: /* @__PURE__ */ jsx(ConfirmMock, { confirm: "Add" })
+			}
+		];
+		case "ios-chrome": return [
+			{
+				text: "Tap Share",
+				caption: "next to the address bar",
+				mock: /* @__PURE__ */ jsx(IosChromeBarMock, {})
+			},
+			{
+				text: "Tap Add to Home Screen",
+				caption: "scroll down to find it",
+				mock: /* @__PURE__ */ jsx(SheetRowMock, { label: "Add to Home Screen" })
+			},
+			{
+				text: "Tap Add",
+				mock: /* @__PURE__ */ jsx(ConfirmMock, { confirm: "Add" })
+			}
+		];
+		case "ios-other": return [
+			{ text: "Open the browser menu and tap Share" },
+			{
+				text: "Tap Add to Home Screen",
+				mock: /* @__PURE__ */ jsx(SheetRowMock, { label: "Add to Home Screen" })
+			},
+			{
+				text: "Tap Add",
+				mock: /* @__PURE__ */ jsx(ConfirmMock, { confirm: "Add" })
+			}
+		];
+		case "android": return [
+			{
+				text: "Tap the menu",
+				caption: "top right",
+				mock: /* @__PURE__ */ jsx(AndroidBarMock, {})
+			},
+			{
+				text: "Tap Add to Home screen",
+				mock: /* @__PURE__ */ jsx(SheetRowMock, { label: "Add to Home screen" })
+			},
+			{
+				text: "Tap Add",
+				mock: /* @__PURE__ */ jsx(ConfirmMock, { confirm: "Add" })
+			}
+		];
+		case "desktop-chrome": return [{
+			text: "Click the install icon",
+			caption: "right side of the address bar",
+			mock: /* @__PURE__ */ jsx(OmniboxInstallMock, {})
+		}, {
+			text: "Click Install",
+			mock: /* @__PURE__ */ jsx(ConfirmMock, { confirm: "Install" })
+		}];
+		case "desktop-safari": return [{ text: "Open File in the menu bar" }, {
+			text: "Click Add to Dock",
+			mock: /* @__PURE__ */ jsx(SheetRowMock, { label: "Add to Dock" })
+		}];
+		case "unsupported": return null;
+	}
+}
+function InstallGuide({ open, onClose, appName }) {
+	const { platform, canPrompt, installed, promptInstall } = useInstallPrompt();
+	const name = appName ?? defaultAppName();
+	const [mounted, setMounted] = useState(open);
+	const [shown, setShown] = useState(false);
+	useEffect(() => {
+		ensureStyles();
+		if (open) {
+			setMounted(true);
+			const raf = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)));
+			return () => cancelAnimationFrame(raf);
+		}
+		setShown(false);
+		const t = setTimeout(() => setMounted(false), 300);
+		return () => clearTimeout(t);
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", onKey);
+		const prevOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.removeEventListener("keydown", onKey);
+			document.body.style.overflow = prevOverflow;
+		};
+	}, [open, onClose]);
+	const onNativeInstall = useCallback(async () => {
+		if (await promptInstall() === "accepted") onClose();
+	}, [promptInstall, onClose]);
+	if (!mounted || typeof document === "undefined") return null;
+	const steps = stepsFor(platform);
+	let body;
+	if (installed) body = /* @__PURE__ */ jsxs("div", {
+		className: "vpwa-sheetrow",
+		children: [/* @__PURE__ */ jsx("span", { children: "Already installed" }), /* @__PURE__ */ jsx("span", {
+			className: "vpwa-target",
+			children: /* @__PURE__ */ jsx(CheckIcon, { size: 20 })
+		})]
+	});
+	else if (canPrompt) body = /* @__PURE__ */ jsxs("div", {
+		className: "vpwa-actions",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "vpwa-btn",
+			onClick: () => void onNativeInstall(),
+			children: "Install"
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "vpwa-btn-ghost",
+			onClick: onClose,
+			children: "Not now"
+		})]
+	});
+	else if (steps) body = /* @__PURE__ */ jsx("ol", {
+		className: "vpwa-steps",
+		children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", {
+			className: "vpwa-step",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "vpwa-stephead",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "vpwa-stepnum",
+					children: i + 1
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "vpwa-steptext",
+					children: [step.text, step.caption ? /* @__PURE__ */ jsxs("span", {
+						className: "vpwa-stepcap",
+						children: [" — ", step.caption]
+					}) : null]
+				})]
+			}), step.mock]
+		}, step.text))
+	});
+	else body = /* @__PURE__ */ jsx("p", {
+		className: "vpwa-sub",
+		style: { margin: 0 },
+		children: "This browser can’t install apps. Open this page in Chrome, Edge, or Safari to install."
+	});
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		className: `vpwa vpwa-overlay${shown ? " vpwa-open" : ""}`,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": `Install ${name}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "vpwa-backdrop",
+			onClick: onClose
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "vpwa-sheet",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: "vpwa-handle" }),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "vpwa-x",
+					onClick: onClose,
+					"aria-label": "Close",
+					children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
+				}),
+				/* @__PURE__ */ jsxs("h2", {
+					className: "vpwa-title",
+					children: ["Install ", name]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "vpwa-sub",
+					children: "Add it to your home screen — full screen, one tap away."
+				}),
+				body
+			]
+		})]
+	}), document.body);
+}
+function VibesInstallPrompt({ appName, variant = "inline", className }) {
+	const { installed, canPrompt, supported, promptInstall } = useInstallPrompt();
+	const [dismissed, setDismissedState] = useState(isDismissed);
+	const [guideOpen, setGuideOpen] = useState(false);
+	const [entered, setEntered] = useState(variant !== "floating");
+	useEffect(() => {
+		ensureStyles();
+		if (variant === "floating") {
+			const t = setTimeout(() => setEntered(true), 50);
+			return () => clearTimeout(t);
+		}
+	}, [variant]);
+	if (typeof window === "undefined") return null;
+	if (isInIframe() || installed || dismissed || !supported) return null;
+	const name = appName ?? defaultAppName();
+	const dismiss = () => {
+		setDismissed();
+		setDismissedState(true);
+	};
+	const onInstall = async () => {
+		if (canPrompt) {
+			if (await promptInstall() === "unavailable") setGuideOpen(true);
+			return;
+		}
+		setGuideOpen(true);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: [
+			"vpwa",
+			"vpwa-banner",
+			variant === "floating" ? "vpwa-banner-floating" : "",
+			variant === "floating" && entered ? "vpwa-in" : "",
+			className ?? ""
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "vpwa-chip",
+				children: /* @__PURE__ */ jsx(SmartphoneIcon, { size: 18 })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "vpwa-banner-text",
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: "vpwa-banner-title",
+					children: ["Install ", name]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "vpwa-banner-cap",
+					children: "Add to home screen"
+				})]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "vpwa-btn-sm",
+				onClick: () => void onInstall(),
+				children: "Install"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "vpwa-x",
+				onClick: dismiss,
+				"aria-label": "Dismiss",
+				children: /* @__PURE__ */ jsx(XIcon, { size: 14 })
+			})
+		]
+	}), /* @__PURE__ */ jsx(InstallGuide, {
+		open: guideOpen,
+		onClose: () => setGuideOpen(false),
+		appName
+	})] });
+}
+//#endregion
+export { useInstallPrompt as i, VibesInstallPrompt as n, defaultAppName as r, InstallGuide as t };