@omg-dev/sdk 0.4.24

package/dist/OmgBadge-LAcimQp0.mjs

@@ -0,0 +1,345 @@
+import { t as VibesFeedback } from "./VibesFeedback-BF2Vf6FK.mjs";
+import { 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";
+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 {}
+}
+function OmgBadge({ href = "https://omg.dev", label = "What is omg?" }) {
+	const [open, setOpen] = useState(false);
+	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 /* @__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 };