social-embeds 0.0.0 → 0.1.0

package/dist/index.js

@@ -0,0 +1,938 @@
+"use client";
+import { a as escapeAttribute, i as x$1, n as matchUrl, o as parseHtml, r as platforms, s as rebuild, t as parseEmbed } from "./parser-DVync2rz.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/loader/load-script.ts
+const ATTEMPTS$1 = 3;
+const RETRY_DELAY_MS$1 = 1e3;
+const TIMEOUT_MS = 15e3;
+const POLL_MS = 50;
+const loading = /* @__PURE__ */ new Map();
+function loadScript(script) {
+	if (typeof document === "undefined") return Promise.reject(/* @__PURE__ */ new Error("social-embeds: platform scripts load only in the browser"));
+	let promise = loading.get(script.key);
+	if (!promise) {
+		promise = load(script).catch((error) => {
+			loading.delete(script.key);
+			throw error;
+		});
+		loading.set(script.key, promise);
+	}
+	return promise;
+}
+async function load(script) {
+	if (!script.isPresent()) await ([...document.querySelectorAll("script[src]")].some((element) => script.isOwn(element.src)) ? poll(script) : add(script));
+	await script.whenPresent?.();
+}
+/** The browser reported the script as failed; its tag has been removed. */
+var LoadError = class extends Error {};
+async function add(script) {
+	const ready = script.readyCallback?.();
+	for (let attempt = 1;; attempt++) try {
+		await insert(script);
+		break;
+	} catch (error) {
+		if (!(error instanceof LoadError) || attempt >= ATTEMPTS$1) throw error;
+		await delay(RETRY_DELAY_MS$1 * 2 ** (attempt - 1));
+	}
+	await (ready ? timeout(ready, `${script.url} did not report ready`) : poll(script));
+}
+async function insert(script) {
+	const restore = script.prepare?.();
+	const loaded = new Promise((resolve, reject) => {
+		const element = document.createElement("script");
+		element.src = script.url;
+		element.async = true;
+		if (script.crossOrigin) element.crossOrigin = script.crossOrigin;
+		element.addEventListener("load", () => {
+			resolve();
+		});
+		element.addEventListener("error", () => {
+			element.remove();
+			reject(new LoadError(`social-embeds: could not load ${script.url}`));
+		});
+		document.head.appendChild(element);
+	});
+	try {
+		await timeout(loaded, `${script.url} did not load`);
+	} finally {
+		restore?.();
+	}
+}
+function poll(script) {
+	return new Promise((resolve, reject) => {
+		const deadline = Date.now() + TIMEOUT_MS;
+		const check = () => {
+			if (script.isPresent()) resolve();
+			else if (Date.now() >= deadline) reject(/* @__PURE__ */ new Error(`social-embeds: ${script.url} did not initialise`));
+			else setTimeout(check, POLL_MS);
+		};
+		check();
+	});
+}
+function timeout(promise, message) {
+	return new Promise((resolve, reject) => {
+		const timer = setTimeout(() => {
+			reject(/* @__PURE__ */ new Error(`social-embeds: ${message}`));
+		}, TIMEOUT_MS);
+		promise.then(() => {
+			clearTimeout(timer);
+			resolve();
+		}, (error) => {
+			clearTimeout(timer);
+			reject(error instanceof Error ? error : new Error(String(error)));
+		});
+	});
+}
+function delay(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+// src/loader/platform-scripts.ts
+const globals$1 = () => window;
+/**
+* The SDK refuses to parse without a Graph API version. Social plugins render with old and
+* new versions alike; this is the one Meta's Embedded Posts documentation uses.
+*/
+const FACEBOOK_SDK_VERSION = "v26.0";
+const LOCALE = /^[a-z]{2,3}_[A-Z]{2}$/;
+/** Instagram and Threads share `instgrm.Embeds`; each registers its name when loaded. */
+function embedSdkRegistered(name) {
+	return () => {
+		const embeds = globals$1().instgrm?.Embeds;
+		return embeds?.registeredEmbedSDKs?.[name] === true && typeof embeds.process === "function";
+	};
+}
+const x = {
+	key: "x",
+	url: "https://platform.twitter.com/widgets.js",
+	isOwn: (src) => /^https?:\/\/platform\.(?:twitter|x)\.com\/widgets\.js(?:[?#]|$)/.test(src),
+	isPresent: () => typeof globals$1().twttr?.widgets?.load === "function",
+	whenPresent: () => new Promise((resolve) => {
+		const ready = globals$1().twttr?.ready;
+		if (ready) ready(() => {
+			resolve();
+		});
+		else resolve();
+	})
+};
+/**
+* Instagram's and Threads' embed.js do nothing when a loaded Facebook SDK is on the page:
+* both start with `(window.FB && !window.FB.__buffer) || …`. The SDK's own stub carries
+* `__buffer` while the SDK loads, so a loaded SDK is marked the same way while the script
+* runs. Neither script reads `FB` anywhere else (docs/decisions.md D38).
+*/
+function besideFacebookSdk() {
+	const fb = globals$1().FB;
+	if (!fb || fb.__buffer) return () => {};
+	fb.__buffer = true;
+	return () => {
+		delete fb.__buffer;
+	};
+}
+const instagram = {
+	key: "instagram",
+	url: "https://www.instagram.com/embed.js",
+	isOwn: (src) => /^https?:\/\/www\.instagram\.com\/embed\.js(?:[?#]|$)/.test(src),
+	isPresent: embedSdkRegistered("instagram"),
+	prepare: besideFacebookSdk
+};
+const threads = {
+	key: "threads",
+	url: "https://www.threads.com/embed.js",
+	isOwn: (src) => /^https?:\/\/www\.threads\.(?:com|net)\/embed\.js(?:[?#]|$)/.test(src),
+	isPresent: embedSdkRegistered("threads"),
+	prepare: besideFacebookSdk
+};
+/**
+* `xfbml=0` stops the SDK from scanning the whole page; embeds are parsed explicitly. One
+* SDK serves the whole page, so the first locale requested wins.
+*/
+function facebook(locale) {
+	return {
+		key: "facebook",
+		url: `https://connect.facebook.net/${locale}/sdk.js#xfbml=0&version=${FACEBOOK_SDK_VERSION}`,
+		crossOrigin: "anonymous",
+		isOwn: (src) => /^https?:\/\/connect\.facebook\.net\/[a-z]{2,3}_[A-Z]{2}\/(?:sdk(?:\/debug)?|all)\.js(?:[?#]|$)/.test(src),
+		isPresent: () => typeof globals$1().FB?.XFBML?.parse === "function",
+		readyCallback: () => new Promise((resolve) => {
+			const previous = globals$1().fbAsyncInit;
+			globals$1().fbAsyncInit = () => {
+				previous?.();
+				resolve();
+			};
+		})
+	};
+}
+function loadPlatformScript(platform, { locale = "en_US" } = {}) {
+	switch (platform) {
+		case "x": return loadScript(x);
+		case "instagram": return loadScript(instagram);
+		case "threads": return loadScript(threads);
+		case "facebook": return LOCALE.test(locale) ? loadScript(facebook(locale)) : Promise.reject(/* @__PURE__ */ new Error(`social-embeds: invalid Facebook locale "${locale}"`));
+	}
+}
+// src/components/drivers.ts
+const globals = () => window;
+/** Calls `done` once `rendered(container)` holds, checking after every DOM change. */
+function watch(container, rendered, done) {
+	if (rendered(container)) {
+		done();
+		return () => {};
+	}
+	const observer = new MutationObserver(() => {
+		if (!rendered(container)) return;
+		observer.disconnect();
+		done();
+	});
+	observer.observe(container, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		attributeFilter: [
+			"class",
+			"style",
+			"height"
+		]
+	});
+	return () => {
+		observer.disconnect();
+	};
+}
+/**
+* widgets.js and embed.js render every blockquote with their class anywhere in the page, on
+* load and on each call, so the components write the blockquote without it. The class is
+* added once, when this embed renders; a platform that has since replaced it with its own
+* (Threads' `text-post-media-registered`) keeps that (docs/decisions.md D39).
+*/
+function reveal(container, className) {
+	const blockquote = container.querySelector("blockquote");
+	if (blockquote && !blockquote.hasAttribute("class")) blockquote.classList.add(className);
+}
+/** An iframe in `container` that the platform has given a height. */
+function hasSizedIframe(container) {
+	return [...container.querySelectorAll("iframe")].some((iframe) => Number.parseFloat(iframe.style.height) > 0);
+}
+const xDriver = {
+	load: () => loadPlatformScript("x"),
+	render(container, done) {
+		const twttr = globals().twttr;
+		const onRendered = (event) => {
+			if (event.target instanceof Node && container.contains(event.target)) done();
+		};
+		twttr?.events?.bind?.("rendered", onRendered);
+		const stop = watch(container, hasSizedIframe, done);
+		reveal(container, "twitter-tweet");
+		twttr?.widgets?.load?.(container);
+		return () => {
+			twttr?.events?.unbind?.("rendered", onRendered);
+			stop();
+		};
+	}
+};
+/** Instagram and Threads share `instgrm.Embeds.process()`, which renders both. */
+function processEmbeds() {
+	const process = globals().instgrm?.Embeds?.process;
+	if (!process) throw new Error("social-embeds: instgrm.Embeds.process is missing");
+	process();
+}
+const instagramDriver = {
+	load: () => loadPlatformScript("instagram"),
+	render(container, done) {
+		const stop = watch(container, (element) => element.querySelector("iframe.instagram-media-rendered") !== null, done);
+		reveal(container, "instagram-media");
+		processEmbeds();
+		return stop;
+	}
+};
+const threadsDriver = {
+	load: () => loadPlatformScript("threads"),
+	render(container, done) {
+		const stop = watch(container, (element) => element.querySelector("iframe") !== null && element.querySelector("blockquote") === null, done);
+		reveal(container, "text-post-media");
+		processEmbeds();
+		return stop;
+	}
+};
+const facebookDrivers = /* @__PURE__ */ new Map();
+function facebookDriver(locale) {
+	let driver = facebookDrivers.get(locale);
+	if (!driver) {
+		driver = {
+			load: () => loadPlatformScript("facebook", { locale }),
+			render(container, done) {
+				const fb = globals().FB;
+				const parse = fb?.XFBML?.parse;
+				if (!fb || !parse) throw new Error("social-embeds: FB.XFBML.parse is missing");
+				const run = () => {
+					parse(container, done);
+				};
+				try {
+					run();
+				} catch (error) {
+					if (!(error instanceof Error) || !/init not called/.test(error.message)) throw error;
+					fb.init?.({
+						xfbml: false,
+						version: FACEBOOK_SDK_VERSION
+					});
+					run();
+				}
+				return () => {};
+			}
+		};
+		facebookDrivers.set(locale, driver);
+	}
+	return driver;
+}
+// src/components/hooks.ts
+const ROOT_MARGIN = "200px 0px";
+/**
+* Whether the element has come near the viewport. Always false on the server and in the
+* first client render, so server and client markup match; true right after mount when
+* `lazy` is off or IntersectionObserver is unavailable.
+*/
+function useNearViewport(ref, lazy) {
+	const [near, setNear] = useState(false);
+	useEffect(() => {
+		const element = ref.current;
+		if (!lazy || !element || typeof IntersectionObserver === "undefined") {
+			setNear(true);
+			return;
+		}
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				setNear(true);
+				observer.disconnect();
+			}
+		}, { rootMargin: ROOT_MARGIN });
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+		};
+	}, [ref, lazy]);
+	return near;
+}
+/** Calls `onError` from an effect, once per distinct message. */
+function useReportError(message, onError) {
+	const latest = useRef(onError);
+	useEffect(() => {
+		latest.current = onError;
+	});
+	useEffect(() => {
+		if (message !== void 0) latest.current?.(new Error(message));
+	}, [message]);
+}
+// src/components/iframe-embed.tsx
+const FILL = {
+	position: "absolute",
+	inset: 0
+};
+/**
+* Group B: a responsive wrapper whose aspect ratio comes from the input, with the
+* iframe filling it. The iframe is created on the client only, so its load event is
+* never missed before hydration; the placeholder covers the box until then.
+*/
+function IframeEmbed({ src, title, allow, referrerPolicy, scrolling, ratio, size, width = "100%", maxWidth, height, placeholder, lazy = true, onLoad, style, ...rest }) {
+	const frame = useRef(null);
+	const near = useNearViewport(frame, lazy);
+	const [loaded, setLoaded] = useState(false);
+	const reported = useRef(false);
+	const aspectWidth = size?.width ?? ratio.width;
+	const aspectHeight = size?.height ?? ratio.height;
+	const wrapper = {
+		position: "relative",
+		width,
+		maxWidth,
+		...height === void 0 ? { aspectRatio: `${String(aspectWidth)} / ${String(aspectHeight)}` } : { height },
+		...style
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style: wrapper,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: frame,
+			style: FILL,
+			children: [near && /* @__PURE__ */ jsx("iframe", {
+				src,
+				title,
+				allow,
+				allowFullScreen: true,
+				referrerPolicy,
+				scrolling,
+				style: {
+					display: "block",
+					width: "100%",
+					height: "100%",
+					border: 0
+				},
+				onLoad: () => {
+					setLoaded(true);
+					if (reported.current) return;
+					reported.current = true;
+					onLoad?.();
+				}
+			}), !loaded && /* @__PURE__ */ jsx("div", {
+				style: FILL,
+				children: placeholder ?? /* @__PURE__ */ jsx(Skeleton, {})
+			})]
+		})
+	});
+}
+/** The default placeholder: a neutral box, readable on light and dark pages. */
+function Skeleton({ minHeight }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		style: {
+			width: "100%",
+			height: "100%",
+			minHeight,
+			background: "rgba(128, 128, 128, 0.12)"
+		}
+	});
+}
+// src/parser/verify.ts
+/** The kind and variant pairs the parser produces for each platform. */
+const SHAPES = {
+	x: ["post sdk"],
+	instagram: ["post sdk"],
+	threads: ["post sdk"],
+	facebook: [
+		"post sdk",
+		"video sdk",
+		"video iframe"
+	],
+	tiktok: ["video iframe"],
+	youtube: ["video iframe"]
+};
+/**
+* Checks an embed handed to a component. It may not come from this parser: a host can build
+* one, or read one back from storage.
+*
+* - Its URL must be one `matchUrl` recognises for the same platform and id, and its kind
+*   and variant a pair the parser produces, because components put the URL and id into
+*   iframe sources and platform markup.
+* - Its `fallbackHtml` must be exactly what the platform's whitelist rebuilds, because
+*   components write it into the page as HTML. For X it must also link to the same post,
+*   because widgets.js renders the post the blockquote links to. Otherwise the fallback is
+*   dropped.
+*/
+function verifyEmbed(embed) {
+	const matched = matchUrl(embed.url);
+	if (matched?.platform !== embed.platform || matched.id !== embed.id) return null;
+	if (!SHAPES[embed.platform].includes(`${embed.kind} ${embed.variant}`)) return null;
+	if (embed.fallbackHtml === void 0) return embed;
+	if (trustedFallback(embed, embed.fallbackHtml)) return embed;
+	const withoutFallback = { ...embed };
+	delete withoutFallback.fallbackHtml;
+	return withoutFallback;
+}
+function trustedFallback(embed, fallbackHtml) {
+	const whitelist = platforms.find((platform) => platform.platform === embed.platform)?.fallback;
+	const nodes = parseHtml(fallbackHtml);
+	if (!whitelist || !nodes || rebuild(nodes, whitelist) !== fallbackHtml) return false;
+	if (embed.platform !== "x") return true;
+	const [root] = parseHtml(`<blockquote class="twitter-tweet">${fallbackHtml}</blockquote>`) ?? [];
+	return root?.type === "element" && x$1.parse(root)?.id === embed.id;
+}
+// src/components/shared.ts
+const NAMES = {
+	x: "X",
+	instagram: "Instagram",
+	facebook: "Facebook",
+	threads: "Threads",
+	tiktok: "TikTok",
+	youtube: "YouTube"
+};
+/** The embed for `platform`, or a message saying why the input is not one. */
+function resolveEmbed(url, given, platform) {
+	const embed = given ?? (url === void 0 ? null : matchUrl(url));
+	if (!embed) return { error: `social-embeds: not a ${NAMES[platform]} post URL: ${String(url)}` };
+	if (embed.platform !== platform) return { error: `social-embeds: expected a ${NAMES[platform]} embed, got ${NAMES[embed.platform]}` };
+	const verified = verifyEmbed(embed);
+	if (!verified) return { error: `social-embeds: the ${NAMES[platform]} embed's url and id do not match` };
+	return { embed: verified };
+}
+/** Serialises query parameters; later entries replace earlier ones with the same name. */
+function query(...sources) {
+	const params = /* @__PURE__ */ new Map();
+	for (const source of sources) for (const [key, value] of source ?? []) params.set(key, String(value));
+	const pairs = [...params].map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
+	return pairs.length > 0 ? `?${pairs.join("&")}` : "";
+}
+/**
+* Maps option props to the platform's parameter names. Player parameters take 0 and 1,
+* so booleans become numbers; undefined props are left out.
+*/
+function playerParams(props, names) {
+	const params = [];
+	for (const [prop, name] of Object.entries(names)) {
+		const value = props[prop];
+		if (typeof value === "boolean") params.push([name, value ? 1 : 0]);
+		else if (typeof value === "string" || typeof value === "number") params.push([name, value]);
+	}
+	return params;
+}
+// src/components/facebook-video-iframe.tsx
+const ALLOW$2 = "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share";
+/**
+* Facebook video from embed code: the iframe that came in (brief §5.4), rebuilt from the
+* parsed href and parameters. Its content fills the iframe at any width, whatever its
+* `width` parameter says (docs/decisions.md D29). `FacebookEmbed` routes here.
+*/
+function FacebookVideoIframe({ embed, ...frame }) {
+	const params = Object.entries(embed.options).filter(([key]) => key !== "href");
+	return /* @__PURE__ */ jsx(IframeEmbed, {
+		...frame,
+		src: `https://www.facebook.com/plugins/video.php${query([["href", embed.url]], params)}`,
+		title: "Facebook video player",
+		allow: ALLOW$2,
+		scrolling: "no",
+		ratio: {
+			width: 16,
+			height: 9
+		},
+		size: embed.size
+	});
+}
+// src/components/markup.ts
+/** `name="value"` pairs for defined values; `true` becomes a valueless attribute. */
+function attributes(entries) {
+	let html = "";
+	for (const [name, value] of Object.entries(entries)) {
+		if (value === void 0) continue;
+		html += value === true ? ` ${name}` : ` ${name}="${escapeAttribute(String(value))}"`;
+	}
+	return html;
+}
+/**
+* Options written as the platform's `data-*` attributes, in the given order. Booleans are
+* written as `"true"`/`"false"`, as platforms document them.
+*/
+function dataAttributes(names, options) {
+	const entries = {};
+	for (const [key, name] of Object.entries(names)) {
+		const value = options[key];
+		if (value !== void 0) entries[name] = String(value);
+	}
+	return attributes(entries);
+}
+/** Embed code options first; props the host passed replace them. */
+function withProps(options, props) {
+	const merged = { ...options };
+	for (const [key, value] of Object.entries(props)) if (value !== void 0) merged[key] = value;
+	return merged;
+}
+function hasFallback(fallbackHtml) {
+	return fallbackHtml !== void 0 && fallbackHtml.trim() !== "";
+}
+// src/components/script-embed.tsx
+const ATTEMPTS = 3;
+const RENDER_TIMEOUT_MS = 15e3;
+const RETRY_DELAY_MS = 1e3;
+function toError(error) {
+	return error instanceof Error ? error : new Error(String(error));
+}
+/**
+* Group A: the platform markup is written once into a container React never updates
+* again, so the platform script can replace it in place (brief §6.3). Callers key this
+* component by `markup`, so different markup gets a fresh container.
+*/
+function ScriptEmbed({ driver, markup, hasFallback, minHeight, label, width = "100%", maxWidth, placeholder, lazy = true, onLoad, onError, style, ...rest }) {
+	const container = useRef(null);
+	const near = useNearViewport(container, lazy);
+	const [rendered, setRendered] = useState(false);
+	const callbacks = useRef({
+		onLoad,
+		onError
+	});
+	useEffect(() => {
+		callbacks.current = {
+			onLoad,
+			onError
+		};
+	});
+	useEffect(() => {
+		const element = container.current;
+		if (!near || !element) return;
+		let cancelled = false;
+		let done = false;
+		let timer;
+		let stop = () => {};
+		const finish = () => {
+			if (cancelled || done) return;
+			done = true;
+			clearTimeout(timer);
+			stop();
+			setRendered(true);
+			callbacks.current.onLoad?.();
+		};
+		const retryOrFail = (number, error) => {
+			if (cancelled || done) return;
+			stop();
+			stop = () => {};
+			if (number >= ATTEMPTS) {
+				callbacks.current.onError?.(error);
+				return;
+			}
+			timer = setTimeout(() => {
+				attempt(number + 1);
+			}, RETRY_DELAY_MS * 2 ** (number - 1));
+		};
+		const attempt = (number) => {
+			if (cancelled || done) return;
+			try {
+				stop = driver.render(element, finish);
+			} catch (error) {
+				retryOrFail(number, toError(error));
+				return;
+			}
+			timer = setTimeout(() => {
+				retryOrFail(number, /* @__PURE__ */ new Error(`social-embeds: the ${label} embed did not render`));
+			}, RENDER_TIMEOUT_MS);
+		};
+		driver.load().then(() => {
+			attempt(1);
+		}, (error) => {
+			if (!cancelled) callbacks.current.onError?.(toError(error));
+		});
+		return () => {
+			cancelled = true;
+			clearTimeout(timer);
+			stop();
+		};
+	}, [
+		near,
+		driver,
+		label
+	]);
+	const wrapper = {
+		width,
+		maxWidth,
+		...style
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		style: wrapper,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: container,
+			suppressHydrationWarning: true,
+			dangerouslySetInnerHTML: { __html: markup }
+		}), !hasFallback && !rendered && (placeholder ?? /* @__PURE__ */ jsx(Skeleton, { minHeight }))]
+	});
+}
+// src/components/facebook-embed.tsx
+const ATTRIBUTES$1 = {
+	width: "data-width",
+	showText: "data-show-text",
+	lazy: "data-lazy",
+	allowfullscreen: "data-allowfullscreen",
+	autoplay: "data-autoplay",
+	showCaptions: "data-show-captions"
+};
+/** Embedded Posts: "Max. 750 pixel"; videos have no upper limit (docs/decisions.md D33). */
+const POST_MAX_WIDTH = 750;
+/** docs/decisions.md D34. */
+const MIN_HEIGHT$3 = {
+	post: 300,
+	video: 200
+};
+/**
+* Facebook rendering rules (brief §5.4): posts always through the SDK; video embed code as
+* the iframe that came in; video URLs through the SDK. The parser has set `variant`.
+*/
+function FacebookEmbed(props) {
+	const { url, embed: given, onError, locale, showText, allowfullscreen, autoplay, showCaptions, height, ...shared } = props;
+	const { embed, error } = resolveEmbed(url, given, "facebook");
+	useReportError(error, onError);
+	if (!embed) return null;
+	if (embed.variant === "iframe") return /* @__PURE__ */ jsx(FacebookVideoIframe, {
+		...shared,
+		height,
+		embed
+	});
+	const options = withProps(embed.options, {
+		showText,
+		allowfullscreen,
+		autoplay,
+		showCaptions
+	});
+	const sdkLocale = locale ?? (typeof options.locale === "string" ? options.locale : "en_US");
+	const markup = `<div class="${embed.kind === "video" ? "fb-video" : "fb-post"}" data-href="${escapeAttribute(embed.url)}"${dataAttributes(ATTRIBUTES$1, options)}>${embed.fallbackHtml ?? ""}</div>`;
+	return /* @__PURE__ */ jsx(ScriptEmbed, {
+		maxWidth: embed.kind === "post" ? POST_MAX_WIDTH : void 0,
+		...shared,
+		onError,
+		driver: facebookDriver(sdkLocale),
+		markup,
+		hasFallback: hasFallback(embed.fallbackHtml),
+		minHeight: MIN_HEIGHT$3[embed.kind],
+		label: "Facebook"
+	}, `${sdkLocale} ${markup}`);
+}
+// src/components/instagram-embed.tsx
+/** A photo post without caption at 375px, the smallest measured (docs/decisions.md D34). */
+const MIN_HEIGHT$2 = 680;
+/**
+* embed.js copies the blockquote's inline style onto its iframe and gives the iframe no
+* width of its own, so without this the post stays 326px wide. The value is the one in
+* Instagram's own embed code (docs/decisions.md D33).
+*/
+const FLUID_WIDTH = "width:calc(100% - 2px)";
+function InstagramEmbed(props) {
+	const { url, embed: given, onError, maxWidth = 540, captioned, ...shared } = props;
+	const { embed, error } = resolveEmbed(url, given, "instagram");
+	useReportError(error, onError);
+	if (!embed) return null;
+	const options = withProps(embed.options, { captioned });
+	const markup = `<blockquote${attributes({
+		"data-instgrm-permalink": embed.url,
+		"data-instgrm-version": options.version,
+		"data-instgrm-captioned": options.captioned === true ? true : void 0,
+		style: FLUID_WIDTH
+	})}>${embed.fallbackHtml ?? ""}</blockquote>`;
+	return /* @__PURE__ */ jsx(ScriptEmbed, {
+		...shared,
+		onError,
+		maxWidth,
+		driver: instagramDriver,
+		markup,
+		hasFallback: hasFallback(embed.fallbackHtml),
+		minHeight: MIN_HEIGHT$2,
+		label: "Instagram"
+	}, markup);
+}
+// src/components/threads-embed.tsx
+/** A text-only post (docs/decisions.md D34). */
+const MIN_HEIGHT$1 = 240;
+function ThreadsEmbed(props) {
+	const { url, embed: given, onError, maxWidth = 658, theme, ...shared } = props;
+	const { embed, error } = resolveEmbed(url, given, "threads");
+	useReportError(error, onError);
+	if (!embed) return null;
+	const options = withProps(embed.options, { theme });
+	const markup = `<blockquote${attributes({
+		"data-text-post-permalink": embed.url,
+		"data-text-post-version": options.version ?? 0,
+		id: `ig-tp-${embed.id}`,
+		"data-theme": options.theme
+	})}>${embed.fallbackHtml ?? ""}</blockquote>`;
+	return /* @__PURE__ */ jsx(ScriptEmbed, {
+		...shared,
+		onError,
+		maxWidth,
+		driver: threadsDriver,
+		markup,
+		hasFallback: hasFallback(embed.fallbackHtml),
+		minHeight: MIN_HEIGHT$1,
+		label: "Threads"
+	}, markup);
+}
+// src/components/tiktok-embed.tsx
+const PARAMS$1 = {
+	controls: "controls",
+	progressBar: "progress_bar",
+	playButton: "play_button",
+	volumeControl: "volume_control",
+	fullscreenButton: "fullscreen_button",
+	timestamp: "timestamp",
+	loop: "loop",
+	autoplay: "autoplay",
+	musicInfo: "music_info",
+	description: "description",
+	rel: "rel",
+	nativeContextMenu: "native_context_menu",
+	closedCaption: "closed_caption",
+	forceMuted: "force_muted"
+};
+const ALLOW$1 = "accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture; web-share";
+/**
+* Every TikTok input renders the Embed Player iframe (docs/decisions.md D11). It is at
+* most 325px wide, the size of TikTok's own embed code (D40).
+*/
+function TikTokEmbed(props) {
+	const { url, embed: given, onError, maxWidth = 325, controls, progressBar, playButton, volumeControl, fullscreenButton, timestamp, loop, autoplay, musicInfo, description, rel, nativeContextMenu, closedCaption, forceMuted, ...frame } = props;
+	const { embed, error } = resolveEmbed(url, given, "tiktok");
+	useReportError(error, onError);
+	if (!embed) return null;
+	const params = playerParams({
+		controls,
+		progressBar,
+		playButton,
+		volumeControl,
+		fullscreenButton,
+		timestamp,
+		loop,
+		autoplay,
+		musicInfo,
+		description,
+		rel,
+		nativeContextMenu,
+		closedCaption,
+		forceMuted
+	}, PARAMS$1);
+	return /* @__PURE__ */ jsx(IframeEmbed, {
+		...frame,
+		maxWidth,
+		src: `https://www.tiktok.com/player/v1/${embed.id}${query(Object.entries(embed.options), params)}`,
+		title: "TikTok video player",
+		allow: ALLOW$1,
+		ratio: {
+			width: 9,
+			height: 16
+		},
+		size: embed.size
+	});
+}
+// src/components/x-embed.tsx
+const ATTRIBUTES = {
+	theme: "data-theme",
+	conversation: "data-conversation",
+	cards: "data-cards",
+	align: "data-align",
+	lang: "data-lang",
+	dnt: "data-dnt",
+	width: "data-width"
+};
+/** A plain text post, the smallest X renders (docs/decisions.md D34). */
+const MIN_HEIGHT = 250;
+function XEmbed(props) {
+	const { url, embed: given, onError, maxWidth = 550, theme, conversation, cards, align, lang, dnt, ...shared } = props;
+	const { embed, error } = resolveEmbed(url, given, "x");
+	useReportError(error, onError);
+	if (!embed) return null;
+	const options = withProps(embed.options, {
+		theme,
+		conversation,
+		cards,
+		align,
+		lang,
+		dnt
+	});
+	const content = embed.fallbackHtml ?? `<a href="${escapeAttribute(embed.url)}"></a>`;
+	const markup = `<blockquote${dataAttributes(ATTRIBUTES, options)}>${content}</blockquote>`;
+	return /* @__PURE__ */ jsx(ScriptEmbed, {
+		...shared,
+		onError,
+		maxWidth,
+		driver: xDriver,
+		markup,
+		hasFallback: hasFallback(embed.fallbackHtml),
+		minHeight: MIN_HEIGHT,
+		label: "X"
+	}, markup);
+}
+// src/components/youtube-embed.tsx
+const PARAMS = {
+	autoplay: "autoplay",
+	ccLangPref: "cc_lang_pref",
+	ccLoadPolicy: "cc_load_policy",
+	color: "color",
+	controls: "controls",
+	disablekb: "disablekb",
+	enablejsapi: "enablejsapi",
+	end: "end",
+	fs: "fs",
+	hl: "hl",
+	ivLoadPolicy: "iv_load_policy",
+	list: "list",
+	listType: "listType",
+	loop: "loop",
+	origin: "origin",
+	playlist: "playlist",
+	playsinline: "playsinline",
+	rel: "rel",
+	start: "start",
+	widgetReferrer: "widget_referrer"
+};
+const ALLOW = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
+function YouTubeEmbed(props) {
+	const { url, embed: given, onError, autoplay, ccLangPref, ccLoadPolicy, color, controls, disablekb, enablejsapi, end, fs, hl, ivLoadPolicy, list, listType, loop, origin, playlist, playsinline, rel, start, widgetReferrer, nocookie, ...frame } = props;
+	const { embed, error } = resolveEmbed(url, given, "youtube");
+	useReportError(error, onError);
+	if (!embed) return null;
+	const { nocookie: parsedNocookie, ...parsed } = embed.options;
+	const host = nocookie ?? parsedNocookie === true ? "https://www.youtube-nocookie.com" : "https://www.youtube.com";
+	const params = playerParams({
+		autoplay,
+		ccLangPref,
+		ccLoadPolicy,
+		color,
+		controls,
+		disablekb,
+		enablejsapi,
+		end,
+		fs,
+		hl,
+		ivLoadPolicy,
+		list,
+		listType,
+		loop,
+		origin,
+		playlist,
+		playsinline,
+		rel,
+		start,
+		widgetReferrer
+	}, PARAMS);
+	return /* @__PURE__ */ jsx(IframeEmbed, {
+		...frame,
+		src: `${host}/embed/${embed.id}${query(Object.entries(parsed), params)}`,
+		title: "YouTube video player",
+		allow: ALLOW,
+		referrerPolicy: "strict-origin-when-cross-origin",
+		ratio: embed.url.includes("/shorts/") ? {
+			width: 9,
+			height: 16
+		} : {
+			width: 16,
+			height: 9
+		},
+		size: embed.size
+	});
+}
+// src/components/social-embed.tsx
+/**
+* Recognises embed code or a post URL and renders the platform's component. `height`
+* reaches only the iframe-based embeds; the others size themselves (brief §6.1).
+*/
+function SocialEmbed(props) {
+	const { html, url, fallback, height, onError, ...shared } = props;
+	const embed = useMemo(() => html !== void 0 ? parseEmbed(html) : matchUrl(url), [html, url]);
+	useReportError(embed === null && !(html !== void 0 && fallback) ? html !== void 0 ? "social-embeds: unrecognised embed code" : `social-embeds: not a supported post URL: ${url}` : void 0, onError);
+	if (!embed) return html !== void 0 && fallback ? fallback(html) : null;
+	switch (embed.platform) {
+		case "x": return /* @__PURE__ */ jsx(XEmbed, {
+			...shared,
+			onError,
+			embed
+		});
+		case "instagram": return /* @__PURE__ */ jsx(InstagramEmbed, {
+			...shared,
+			onError,
+			embed
+		});
+		case "threads": return /* @__PURE__ */ jsx(ThreadsEmbed, {
+			...shared,
+			onError,
+			embed
+		});
+		case "facebook": return /* @__PURE__ */ jsx(FacebookEmbed, {
+			...shared,
+			height,
+			onError,
+			embed
+		});
+		case "tiktok": return /* @__PURE__ */ jsx(TikTokEmbed, {
+			...shared,
+			height,
+			onError,
+			embed
+		});
+		case "youtube": return /* @__PURE__ */ jsx(YouTubeEmbed, {
+			...shared,
+			height,
+			onError,
+			embed
+		});
+	}
+}
+export { FacebookEmbed, InstagramEmbed, SocialEmbed, ThreadsEmbed, TikTokEmbed, XEmbed, YouTubeEmbed };