@meowdown/embed 0.0.1

package/README.md

@@ -0,0 +1,70 @@
+# @meowdown/embed
+
+Web components for rendering saved X posts and YouTube videos, used by [`@meowdown/core`](https://www.npmjs.com/package/@meowdown/core).
+
+```sh
+npm install @meowdown/embed
+```
+
+```ts
+import '@meowdown/embed/x/theme.css'
+
+import { registerXPost } from '@meowdown/embed/x'
+import type { XPost } from '@post-embed/types'
+
+export function showPost(container: HTMLElement, post: XPost) {
+  registerXPost()
+  const element = document.createElement('meowdown-embed-x')
+  element.data = post
+  container.append(element)
+  return element
+}
+```
+
+`XPost` is a small snapshot with only what the card renders: the author, the body split into text and link segments, media, an optional quote and reply target, the edit state. Assign a new `XPost` object to `element.data` to update the post, or `null` to clear it. The theme import is optional.
+
+`@post-embed/exporter` produces `XPost` values: `fromSyndication` from the syndication API data X's own embeds use, `observeXTweets` from the GraphQL responses of the x.com page.
+
+## Loading a snapshot by URL
+
+Set `element.url` and `element.resolver` to let the element load its own snapshot. The element calls `resolver(url)` whenever `data` is `null` and both are set, and renders whatever it returns (a snapshot, a promise of one, or `undefined` when nothing was found). Results from a superseded `url` are dropped. While a promise is pending the fallback card carries a `data-pending` attribute. A saved `data` always wins over the fetched snapshot.
+
+```ts
+import { fromSyndication } from '@post-embed/exporter/x/syndication'
+
+const element = document.createElement('meowdown-embed-x')
+element.resolver = async (url) => {
+  const id = new URL(url).pathname.split('/').at(-1)
+  const response = await fetch(`/api/tweet/${id}`)
+  return response.ok ? fromSyndication(await response.json()) : undefined
+}
+element.url = 'https://x.com/jack/status/20'
+```
+
+The syndication API X's own embeds read from does not allow cross-origin requests, so `resolver` for X posts usually goes through your server.
+
+## YouTube video
+
+```ts
+import '@meowdown/embed/youtube/theme.css'
+
+import { registerYouTubeVideo } from '@meowdown/embed/youtube'
+import type { YouTubeVideo } from '@post-embed/types'
+
+export function showVideo(container: HTMLElement, url: string) {
+  registerYouTubeVideo()
+  const element = document.createElement('meowdown-embed-youtube')
+  element.resolver = async (url) => {
+    const response = await fetch(
+      `https://www.youtube.com/oembed?url=${encodeURIComponent(url)}&format=json`,
+    )
+    if (!response.ok) return
+    return { url, ...(await response.json()) } as YouTubeVideo
+  }
+  element.url = url
+  container.append(element)
+  return element
+}
+```
+
+The snapshot is the YouTube oEmbed response plus the video `url`; YouTube's oEmbed endpoint allows cross-origin requests, so `resolver` can call it directly, or assign a saved snapshot to `element.data` instead. The element renders a card with the poster, title, channel, and a "Watch on YouTube" link, and never creates an iframe unless you set `playback="inline"` (as an attribute or `element.playback = 'inline'`). In inline mode the poster becomes a play button, and clicking it swaps in the `youtube-nocookie.com` player. The poster loads from the saved `thumbnail_url`; point it at your own copy if the page must not contact Google's image CDN.

package/dist/fetch-Djnul03u.d.ts

@@ -0,0 +1,22 @@
+import { HostElement, State } from "@aria-ui/core";
+//#region src/fetch.d.ts
+/**
+ * Loads the snapshot for `url`. Return `undefined` when nothing was found.
+ */
+type Resolver<T> = (url: string) => T | undefined | PromiseLike<T | undefined>;
+interface FetchProps<T> {
+  /**
+   * A saved snapshot. When set, it is rendered as is and `url` is not fetched.
+   */
+  data: T | null;
+  /**
+   * The URL to pass to `resolver` when `data` is `null`.
+   */
+  url: string | null;
+  /**
+   * Called with `url` to load the snapshot when `data` is `null`.
+   */
+  resolver: Resolver<T> | null;
+}
+//#endregion
+export { Resolver as n, FetchProps as t };

package/dist/render-link-BqiZxTy9.js

@@ -0,0 +1,100 @@
+import { createSignal, useEffect } from "@aria-ui/core";
+import el from "crelt";
+
+//#region src/fetch.ts
+/**
+* Runs `resolver(url)` whenever `data` is `null` and both `url` and `resolver`
+* are set, ignoring results that arrive after the inputs changed or the host
+* disconnected.
+*
+* @internal
+*/
+function useFetch(host, props, label) {
+	const fetched = createSignal(null);
+	const pending = createSignal(false);
+	useEffect(host, () => {
+		const url = props.url.get();
+		const resolver = props.resolver.get();
+		fetched.set(null);
+		pending.set(false);
+		if (props.data.get() != null || !url || !resolver) return;
+		let active = true;
+		const settle = (value) => {
+			if (!active) return;
+			fetched.set(value ?? null);
+			pending.set(false);
+		};
+		const fail = (error) => {
+			if (!active) return;
+			console.error(`[meowdown] Failed to fetch ${label}:`, error);
+			settle(void 0);
+		};
+		let result;
+		try {
+			result = resolver(url);
+		} catch (error) {
+			fail(error);
+			return;
+		}
+		if (isPromiseLike(result)) {
+			pending.set(true);
+			result.then(settle, fail);
+		} else settle(result);
+		return () => {
+			active = false;
+		};
+	});
+	return {
+		fetched,
+		pending
+	};
+}
+function isPromiseLike(value) {
+	return typeof value === "object" && value !== null && typeof value.then === "function";
+}
+
+//#endregion
+//#region src/root.ts
+/**
+* The direct `<div data-root>` child that holds the rendered snapshot. Reused
+* across updates so other children the host appended survive; created on
+* first use.
+*/
+function getRootContainer(host) {
+	let container = host.querySelector(":scope > div[data-root]");
+	if (!container) {
+		container = host.ownerDocument.createElement("div");
+		container.dataset.root = "";
+		host.append(container);
+	}
+	return container;
+}
+
+//#endregion
+//#region src/safe-url.ts
+function getSafeUrl(value, protocols) {
+	if (Array.from(value).some((character) => {
+		return character.charCodeAt(0) <= 32 || character.charCodeAt(0) === 127;
+	})) return;
+	try {
+		const url = new URL(value);
+		if (url.username || url.password) return;
+		if (url.protocol === "https:" || url.protocol === "http:" || protocols?.includes(url.protocol)) return url.href;
+	} catch {
+		return;
+	}
+}
+
+//#endregion
+//#region src/render-link.ts
+function renderLink(content, destination) {
+	const href = destination && getSafeUrl(destination);
+	return href ? el("a", {
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer"
+	}, content) : content;
+}
+
+//#endregion
+export { useFetch as i, getSafeUrl as n, getRootContainer as r, renderLink as t };

package/dist/x/index.d.ts

@@ -0,0 +1,22 @@
+import { n as Resolver, t as FetchProps } from "../fetch-Djnul03u.js";
+import { HostElement, State } from "@aria-ui/core";
+import { XPost } from "@post-embed/types";
+//#region src/x/x-post.d.ts
+interface XPostProps extends FetchProps<XPost> {
+  mediaUrlProtocols: readonly string[] | null;
+}
+interface XPostElement extends HTMLElement, XPostProps {}
+/** @internal */
+export declare function useXPost(host: HostElement, props: State<XPostProps>): void;
+//#endregion
+//#region src/x/register.d.ts
+export declare function registerXPost(name?: string): void;
+//#endregion
+//#region src/x/index.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'meowdown-embed-x': XPostElement;
+  }
+}
+//#endregion
+export type { Resolver, XPostElement, XPostProps };

package/dist/x/index.js

@@ -0,0 +1,233 @@
+import { i as useFetch, n as getSafeUrl, r as getRootContainer, t as renderLink } from "../render-link-BqiZxTy9.js";
+import { defineCustomElement, defineProps, registerCustomElement, useEffect } from "@aria-ui/core";
+import { parseXPost, parseXPostId } from "@post-embed/schema";
+import el from "crelt";
+
+//#region src/x/render-author.ts
+function renderAuthor(author, protocols, date) {
+	if (!author.name && !author.handle) return;
+	const validHandle = /^\w{1,15}$/.test(author.handle);
+	const avatar = author.avatar && getSafeUrl(author.avatar, protocols);
+	return el("header", { "data-author": "" }, avatar ? el("img", {
+		"data-avatar": "",
+		"data-shape": author.avatarShape,
+		src: avatar,
+		alt: "",
+		width: 48,
+		height: 48,
+		loading: "lazy",
+		decoding: "async",
+		referrerpolicy: "no-referrer"
+	}) : void 0, el("div", { "data-author-details": "" }, el("div", { "data-author-name": "" }, el("bdi", {}, author.name || author.handle)), author.handle ? el("bdi", {}, renderLink(`@${author.handle}`, validHandle ? `https://x.com/${author.handle}` : void 0)) : void 0), date ? el("span", { "data-date": "" }, date) : void 0);
+}
+
+//#endregion
+//#region src/x/render-media.ts
+function dimension(value) {
+	return Number.isFinite(value) && value > 0 ? Math.round(value) : void 0;
+}
+function sizeAttrs(media) {
+	const width = dimension(media.width);
+	const height = dimension(media.height);
+	return {
+		width,
+		height,
+		style: width && height ? `--_ratio: ${width} / ${height}` : void 0
+	};
+}
+function getOrientation(media) {
+	const width = dimension(media.width);
+	const height = dimension(media.height);
+	if (!width || !height) return;
+	return height > width * 1.1 ? "portrait" : width > height * 1.1 ? "landscape" : "square";
+}
+function renderUnavailable(permalink) {
+	return el("div", { "data-media-unavailable": "" }, "Media unavailable. ", renderLink("View on X", permalink));
+}
+function renderItem(media, protocols, permalink) {
+	const error = el("div", {
+		"data-media-error": "",
+		hidden: true
+	}, "Media could not be loaded. ", renderLink("View on X", permalink));
+	let content;
+	if (media.type === "photo") {
+		const url = getSafeUrl(media.url, protocols);
+		if (media.unavailable || !url) return renderUnavailable(permalink);
+		const image = el("img", {
+			src: url,
+			alt: media.alt || "Post image",
+			...sizeAttrs(media),
+			loading: "lazy",
+			decoding: "async",
+			referrerpolicy: "no-referrer"
+		});
+		const link = el("a", {
+			href: url,
+			target: "_blank",
+			rel: "noopener noreferrer"
+		}, image);
+		image.addEventListener("error", () => {
+			link.hidden = true;
+			error.hidden = false;
+		});
+		content = link;
+	} else {
+		const sources = media.sources.flatMap((source) => {
+			const url = getSafeUrl(source.url, protocols);
+			return url ? [{
+				...source,
+				url
+			}] : [];
+		}).sort((a, b) => {
+			return Number(b.type === "video/mp4") - Number(a.type === "video/mp4") || (b.bitrate || 0) - (a.bitrate || 0);
+		}).map((source) => el("source", {
+			src: source.url,
+			type: source.type
+		}));
+		if (media.unavailable || sources.length === 0) return renderUnavailable(permalink);
+		const gif = media.type === "gif";
+		const video = el("video", {
+			controls: true,
+			playsInline: true,
+			preload: "none",
+			"aria-label": gif ? "Animated GIF" : "Post video",
+			poster: media.poster && getSafeUrl(media.poster, protocols),
+			...sizeAttrs(media),
+			loop: gif
+		}, sources, renderLink("Watch on X", permalink));
+		video.muted = gif;
+		const showError = () => {
+			video.hidden = true;
+			error.hidden = false;
+		};
+		video.addEventListener("error", showError);
+		let failedSources = 0;
+		for (const source of sources) source.addEventListener("error", () => {
+			failedSources++;
+			if (failedSources === sources.length) showError();
+		}, { once: true });
+		content = video;
+	}
+	return el("div", {
+		"data-media-item": "",
+		"data-orientation": getOrientation(media)
+	}, content, error);
+}
+function renderMedia(media, protocols, permalink) {
+	if (!media?.length) return;
+	return el("div", {
+		"data-media": "",
+		"data-count": String(media.length)
+	}, media.map((item) => renderItem(item, protocols, permalink)));
+}
+
+//#endregion
+//#region src/x/render-shared.ts
+function getPermalink(post) {
+	return /^\w{1,15}$/.test(post.author.handle) && /^\d+$/.test(post.id) ? `https://x.com/${post.author.handle}/status/${post.id}` : void 0;
+}
+/**
+* The post date as a permalink: month and day, plus the year when it is not
+* the current one. The full date and time are the tooltip.
+*/
+function renderDate(post) {
+	const date = new Date(post.createdAt);
+	if (!Number.isFinite(date.getTime())) return;
+	const sameYear = date.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear();
+	return renderLink(el("time", {
+		datetime: date.toISOString(),
+		title: new Intl.DateTimeFormat(void 0, {
+			dateStyle: "medium",
+			timeStyle: "short"
+		}).format(date)
+	}, new Intl.DateTimeFormat(void 0, {
+		month: "short",
+		day: "numeric",
+		year: sameYear ? void 0 : "numeric"
+	}).format(date)), getPermalink(post));
+}
+
+//#endregion
+//#region src/x/render-post.ts
+function renderBody(post) {
+	const permalink = getPermalink(post);
+	return el("p", {
+		"data-body": "",
+		dir: "auto",
+		lang: post.lang || void 0
+	}, el("span", { "data-text": "" }, post.body.map((segment) => {
+		return segment.type === "link" ? renderLink(segment.text, segment.url) : segment.text.split("\n").map((line, index) => {
+			return [index ? el("br", {}) : void 0, line];
+		});
+	})), post.truncated && permalink ? [" ", renderLink("Show more", permalink)] : void 0);
+}
+function renderEdit(post) {
+	const edited = post.edit === "stale" ? el("span", { "data-edited": "" }, "This is an earlier version. ", renderLink("View latest", getPermalink(post))) : post.edit === "edited" ? el("span", { "data-edited": "" }, "Edited") : void 0;
+	return edited ? el("footer", { "data-footer": "" }, edited) : void 0;
+}
+function renderQuoted(post, protocols) {
+	return el("article", {
+		"data-quoted": "",
+		"aria-label": "Quoted post"
+	}, renderAuthor(post.author, protocols, renderDate(post)), renderBody(post), renderMedia(post.media, protocols, getPermalink(post)), renderEdit(post));
+}
+function renderPost(post, protocols = null) {
+	const reply = post.replyTo;
+	const replyUrl = reply && /^\w{1,15}$/.test(reply.handle) && /^\d+$/.test(reply.id) ? `https://x.com/${reply.handle}/status/${reply.id}` : void 0;
+	return el("article", {}, renderAuthor(post.author, protocols, renderDate(post)), reply ? el("div", { "data-reply-to": "" }, renderLink(`Replying to @${reply.handle}`, replyUrl)) : void 0, renderBody(post), renderMedia(post.media, protocols, getPermalink(post)), post.quote ? renderQuoted(post.quote, protocols) : void 0, renderEdit(post));
+}
+
+//#endregion
+//#region src/x/x-post.ts
+/** @internal */
+function useXPost(host, props) {
+	const { fetched, pending } = useFetch(host, props, "X post");
+	useEffect(host, () => {
+		host.dataset.meowdownEmbed = "x";
+		const container = getRootContainer(host);
+		const data = props.data.get() ?? fetched.get();
+		const result = data == null ? void 0 : parseXPost(data);
+		if (result?.issues) console.error("[meowdown] Invalid X post data:", result.issues);
+		const protocols = props.mediaUrlProtocols.get();
+		const url = props.url.get();
+		const value = result && !result.issues ? result.value : void 0;
+		const valid = value && (props.data.get() != null || !url || parseXPostId(url) === value.id);
+		container.replaceChildren(valid ? renderPost(value, protocols) : renderFallback(pending.get()));
+		return () => {
+			for (const video of container.querySelectorAll("video")) video.pause();
+		};
+	});
+}
+function renderFallback(pending) {
+	return el("article", pending ? {
+		"data-fallback": "",
+		"data-pending": ""
+	} : { "data-fallback": "" }, el("header", { "data-author": "" }, el("bdi", {}, "X post")), el("p", { "data-body": "" }, pending ? "Loading this post…" : "This post is unavailable."), pending ? null : el("footer", { "data-footer": "" }, "No saved post could be displayed."));
+}
+const XPost = defineCustomElement(useXPost, defineProps({
+	data: {
+		default: null,
+		attribute: false
+	},
+	url: {
+		default: null,
+		attribute: false
+	},
+	resolver: {
+		default: null,
+		attribute: false
+	},
+	mediaUrlProtocols: {
+		default: null,
+		attribute: false
+	}
+}));
+
+//#endregion
+//#region src/x/register.ts
+function registerXPost(name = "meowdown-embed-x") {
+	registerCustomElement(name, class extends XPost {});
+}
+
+//#endregion
+export { registerXPost, useXPost };

package/dist/x/theme.css

@@ -0,0 +1,395 @@
+@property --meowdown-embed-color {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-background {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-border-color {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-radius {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-padding {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-muted-color {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-link-color {
+  syntax: '*';
+  inherits: true;
+}
+
+/*
+ * Hard reset. `all: revert` rolls every property on every box inside the card
+ * back to the user-agent default, so a host rule on `p`, `a`, `img`,
+ * `article`, `header`, or `footer` (a prose stylesheet, a CSS reset, an
+ * editor theme) cannot reach in. The reset sits at specificity (0,2,0);
+ * every rule below is more specific and re-applies the card's own values,
+ * including the UA defaults the card does not want (`p` margins, `a` colors).
+ */
+[data-meowdown-embed='x'] [data-root],
+[data-meowdown-embed='x'] [data-root] *,
+[data-meowdown-embed='x'] [data-root] *::before,
+[data-meowdown-embed='x'] [data-root] *::after {
+  all: revert;
+  box-sizing: border-box;
+}
+
+[data-meowdown-embed='x'] {
+  --_hairline: var(
+    --meowdown-embed-border-color,
+    color-mix(in srgb, currentColor 14%, transparent)
+  );
+  --_muted: var(--meowdown-embed-muted-color, color-mix(in srgb, currentColor 55%, transparent));
+  --_link: var(--meowdown-embed-link-color, #1d9bf0);
+  --_tint: color-mix(in srgb, currentColor 5%, transparent);
+
+  display: block;
+  /* As wide as the content, between 18rem and 28rem: a short text post stays
+   * small, while long text and media fill the full width. */
+  width: fit-content;
+  max-width: min(28rem, 100%);
+  font: inherit;
+  color: var(--meowdown-embed-color, inherit);
+  text-decoration-skip-ink: none;
+}
+
+/*
+ * The minimum width. A percentage `min-width` on the host resolves to nothing
+ * inside a shrink-to-fit parent (an inline-block editor wrapper), and a fixed
+ * one overflows a narrow container. A zero-height spacer instead raises the
+ * card's intrinsic width to 18rem and still yields to the host's `max-width`.
+ */
+[data-meowdown-embed='x'] [data-root]::before {
+  content: '';
+  display: block;
+  width: calc(18rem - 2 * var(--meowdown-embed-padding, 0.75rem));
+  max-width: 100%;
+  height: 0;
+}
+
+[data-meowdown-embed='x'] [data-root] {
+  display: block;
+  position: relative;
+  color: var(--meowdown-embed-color, inherit);
+  background: var(--meowdown-embed-background, var(--_tint));
+  border-radius: var(--meowdown-embed-radius, 0.75rem);
+  padding: var(--meowdown-embed-padding, 0.75rem);
+  font-size: 1em;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: normal;
+  text-align: start;
+  text-transform: none;
+  text-indent: 0;
+  text-shadow: none;
+  word-spacing: normal;
+  font-variant: normal;
+  hyphens: manual;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  cursor: auto;
+
+  & [hidden] {
+    display: none !important;
+  }
+  & p {
+    margin: 0;
+  }
+  & a {
+    color: var(--_link);
+    text-decoration: none;
+    cursor: pointer;
+  }
+  & a:hover {
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  & a:focus-visible {
+    outline: 2px solid var(--_link);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  /* Header */
+  & [data-author] {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+  & [data-avatar] {
+    display: block;
+    flex: none;
+    width: 2rem;
+    height: 2rem;
+    object-fit: cover;
+    border-radius: 50%;
+    background: var(--_tint);
+  }
+  & [data-avatar][data-shape='square'] {
+    border-radius: 0.375rem;
+  }
+  & [data-avatar][data-shape='hexagon'] {
+    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+  }
+  & [data-author-details] {
+    display: block;
+    min-width: 0;
+    flex: 1;
+    line-height: 1.25;
+  }
+  & [data-author-name] {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+    font-weight: 600;
+  }
+  & [data-author-details] > bdi {
+    font-size: 0.875em;
+    color: var(--_muted);
+  }
+  & [data-author-details] > bdi > a {
+    color: inherit;
+  }
+  & [data-date] {
+    display: block;
+    flex: none;
+    align-self: flex-start;
+    padding-inline-start: 0.25rem;
+    font-size: 0.8125em;
+    line-height: 1.25rem;
+    white-space: nowrap;
+    color: var(--_muted);
+  }
+  & [data-date] > a {
+    color: inherit;
+  }
+
+  /* Body */
+  & [data-reply-to] {
+    display: block;
+    margin-block-start: 0.375rem;
+    font-size: 0.8125em;
+    color: var(--_muted);
+  }
+  & [data-body] {
+    display: block;
+    margin-block: 0.625rem 0;
+    font-size: 1em;
+    line-height: 1.5;
+  }
+  & [data-reply-to] + [data-body] {
+    margin-block-start: 0.25rem;
+  }
+  & [data-text] {
+    white-space: pre-wrap;
+  }
+
+  /* Media */
+  & [data-media] {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 2px;
+    margin-block-start: 0.75rem;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: var(--_hairline);
+  }
+  & [data-media][data-count='1'] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  & [data-media-item] {
+    display: block;
+    position: relative;
+    min-width: 0;
+    overflow: hidden;
+  }
+  /* A hairline keeps white screenshots from dissolving into the card. */
+  & [data-media-item]::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
+    pointer-events: none;
+  }
+  & [data-media-item] > a {
+    display: block;
+    height: 100%;
+  }
+  /* A single photo or video fills the width at its own ratio, up to 20rem
+   * tall; taller media is cropped and the photo links to the original. */
+  & [data-media-item] img,
+  & [data-media-item] video {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: var(--_ratio, auto);
+    max-height: 20rem;
+    object-fit: cover;
+    background: var(--_tint);
+  }
+  & [data-media-item][data-orientation='portrait'] :is(img, video) {
+    object-position: center 30%;
+  }
+  & [data-media]:not([data-count='1']) [data-media-item] :is(img, video) {
+    height: 100%;
+    aspect-ratio: 3 / 2;
+  }
+  & [data-media][data-count='3'] [data-media-item]:first-child {
+    grid-row: span 2;
+  }
+  & [data-media][data-count='3'] [data-media-item]:first-child :is(img, video) {
+    aspect-ratio: auto;
+  }
+  & [data-media-unavailable],
+  & [data-media-error] {
+    display: block;
+    padding: 0.75rem 1rem;
+    color: var(--_muted);
+    background: var(--_tint);
+  }
+
+  /* Quoted post */
+  & [data-quoted] {
+    display: block;
+    margin-block-start: 0.75rem;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    background: var(--_tint);
+  }
+  & [data-quoted] [data-avatar] {
+    width: 1.375rem;
+    height: 1.375rem;
+  }
+  & [data-quoted] [data-author-details] {
+    display: flex;
+    align-items: baseline;
+    gap: 0 0.35rem;
+    line-height: 1.375rem;
+  }
+  & [data-quoted] [data-author-name],
+  & [data-quoted] [data-author-details] > bdi {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  & [data-quoted] [data-author-name] {
+    flex: 0 1 auto;
+  }
+  & [data-quoted] [data-author-details] > bdi {
+    flex: 0 100 auto;
+    min-width: 2.5rem;
+    font-size: 0.9375em;
+  }
+  & [data-quoted] [data-date] {
+    align-self: center;
+  }
+  & [data-quoted] [data-body] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow: hidden;
+    margin-block-start: 0.25rem;
+    font-size: 0.9375em;
+  }
+  & [data-quoted] [data-media] {
+    margin-block-start: 0.5rem;
+    border-radius: 0.375rem;
+  }
+  & [data-quoted] [data-media-item] :is(img, video) {
+    max-height: 10rem;
+  }
+  /* Quoted photos shrink to one thumbnail beside the text, with a count
+   * badge; a quoted video or GIF stays below the text so its player works. */
+  & [data-quoted]:has(> [data-media]):not(:has(> [data-media] video)) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'head head'
+      'body media'
+      'foot foot';
+    column-gap: 0.75rem;
+
+    & > [data-author] {
+      grid-area: head;
+    }
+    & > [data-body] {
+      grid-area: body;
+    }
+    & > [data-footer] {
+      grid-area: foot;
+    }
+    & > [data-media] {
+      grid-area: media;
+      position: relative;
+      display: block;
+      width: 4rem;
+      height: 4rem;
+      margin-block-start: 0.375rem;
+    }
+    & > [data-media] > [data-media-item] {
+      width: 100%;
+      height: 100%;
+    }
+    & > [data-media] > [data-media-item]:nth-child(n + 2) {
+      display: none;
+    }
+    & > [data-media] > [data-media-item] img {
+      height: 100%;
+      max-height: none;
+      aspect-ratio: auto;
+    }
+    & > [data-media]:not([data-count='1'])::after {
+      content: attr(data-count);
+      position: absolute;
+      inset: auto 0.25rem 0.25rem auto;
+      min-width: 1.25rem;
+      padding: 0 0.3125rem;
+      border-radius: 0.625rem;
+      font-size: 0.6875rem;
+      font-weight: 600;
+      line-height: 1.25rem;
+      text-align: center;
+      color: #fff;
+      background: rgb(0 0 0 / 0.62);
+      pointer-events: none;
+    }
+  }
+
+  /* Footer: only the edit state; the date lives in the header. */
+  & [data-footer] {
+    display: block;
+    margin-block-start: 0.5rem;
+    font-size: 0.8125em;
+    color: var(--_muted);
+  }
+  & [data-edited] {
+    font-style: normal;
+  }
+
+  /* Fallback */
+  & [data-fallback] [data-body] {
+    color: var(--_muted);
+  }
+}

package/dist/youtube/index.d.ts

@@ -0,0 +1,26 @@
+import { n as Resolver, t as FetchProps } from "../fetch-Djnul03u.js";
+import { HostElement, State } from "@aria-ui/core";
+import { YouTubeVideo } from "@post-embed/types";
+//#region src/youtube/youtube-video.d.ts
+interface YouTubeVideoProps extends FetchProps<YouTubeVideo> {
+  /**
+   * `link` (default) opens the watch page; `inline` swaps in the YouTube
+   * player after a click on the poster.
+   */
+  playback: string;
+}
+interface YouTubeVideoElement extends HTMLElement, YouTubeVideoProps {}
+/** @internal */
+export declare function useYouTubeVideo(host: HostElement, props: State<YouTubeVideoProps>): void;
+//#endregion
+//#region src/youtube/register.d.ts
+export declare function registerYouTubeVideo(name?: string): void;
+//#endregion
+//#region src/youtube/index.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'meowdown-embed-youtube': YouTubeVideoElement;
+  }
+}
+//#endregion
+export type { Resolver, YouTubeVideoElement, YouTubeVideoProps };

package/dist/youtube/index.js

@@ -0,0 +1,164 @@
+import { i as useFetch, n as getSafeUrl, r as getRootContainer, t as renderLink } from "../render-link-BqiZxTy9.js";
+import { defineCustomElement, defineProps, registerCustomElement, useEffect } from "@aria-ui/core";
+import { parseYouTubeVideo } from "@post-embed/schema";
+import el from "crelt";
+
+//#region src/youtube/parse-url.ts
+const YOUTUBE_HOSTS = /^(?:www\.|m\.)?(?:youtube\.com|youtube-nocookie\.com)$/i;
+const YOUTU_BE_HOST = /^(?:www\.)?youtu\.be$/i;
+const VIDEO_ID = /^[\w-]{11}$/;
+function parseYouTubeUrl(value) {
+	let url;
+	try {
+		url = new URL(value);
+	} catch {
+		return;
+	}
+	let videoId = null;
+	let short = false;
+	if (YOUTU_BE_HOST.test(url.hostname)) videoId = url.pathname.slice(1);
+	else if (YOUTUBE_HOSTS.test(url.hostname)) {
+		const [, first, second] = url.pathname.split("/");
+		if (url.pathname === "/watch") videoId = url.searchParams.get("v");
+		else if (first === "shorts" || first === "embed" || first === "live") {
+			videoId = second ?? null;
+			short = first === "shorts";
+		}
+	}
+	if (!videoId || !VIDEO_ID.test(videoId)) return;
+	const time = url.searchParams.get("start") ?? url.searchParams.get("t") ?? "";
+	return {
+		videoId,
+		startSeconds: parseStartSeconds(time),
+		short
+	};
+}
+/**
+* `90`, `90s`, `1m30s`, `1h2m3s` to seconds; anything else is `0`.
+*/
+function parseStartSeconds(value) {
+	if (!value) return 0;
+	if (/^\d+$/.test(value)) return Number(value);
+	const matched = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(value);
+	if (!matched) return 0;
+	return Number(matched[1] ?? 0) * 3600 + Number(matched[2] ?? 0) * 60 + Number(matched[3] ?? 0);
+}
+function getWatchUrl(ref) {
+	const time = ref.startSeconds ? `&t=${ref.startSeconds}` : "";
+	return `https://www.youtube.com/watch?v=${ref.videoId}${time}`;
+}
+function getEmbedUrl(ref) {
+	const params = new URLSearchParams({
+		autoplay: "1",
+		playsinline: "1"
+	});
+	if (ref.startSeconds) params.set("start", String(ref.startSeconds));
+	return `https://www.youtube-nocookie.com/embed/${ref.videoId}?${params}`;
+}
+
+//#endregion
+//#region src/youtube/render-video.ts
+function renderFrame(ref, title) {
+	return el("iframe", {
+		src: getEmbedUrl(ref),
+		title,
+		allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen",
+		allowfullscreen: true,
+		referrerpolicy: "strict-origin-when-cross-origin"
+	});
+}
+function renderVideo(video, ref, playback) {
+	const watchUrl = getWatchUrl(ref);
+	const title = video.title || "YouTube video";
+	const poster = getSafeUrl(video.thumbnail_url);
+	const external = {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	};
+	const posterContent = [poster ? el("img", {
+		src: poster,
+		alt: "",
+		width: video.thumbnail_width || void 0,
+		height: video.thumbnail_height || void 0,
+		loading: "lazy",
+		decoding: "async",
+		referrerpolicy: "no-referrer"
+	}) : void 0, el("span", {
+		"data-play": "",
+		"aria-hidden": "true"
+	})];
+	let posterElement;
+	if (playback === "inline") {
+		const button = el("button", {
+			"data-poster": "",
+			type: "button",
+			"aria-label": `Play: ${title}`
+		}, posterContent);
+		button.addEventListener("click", () => {
+			const frame = renderFrame(ref, title);
+			button.replaceWith(frame);
+			frame.focus();
+		});
+		posterElement = button;
+	} else posterElement = el("a", {
+		"data-poster": "",
+		href: watchUrl,
+		...external
+	}, posterContent);
+	return el("article", { "data-orientation": ref.short ? "portrait" : void 0 }, posterElement, el("div", { "data-details": "" }, el("a", {
+		"data-title": "",
+		href: watchUrl,
+		...external
+	}, title), video.author_name ? renderLink(el("span", { "data-author": "" }, video.author_name), video.author_url) : void 0));
+}
+
+//#endregion
+//#region src/youtube/youtube-video.ts
+/** @internal */
+function useYouTubeVideo(host, props) {
+	const { fetched, pending } = useFetch(host, props, "YouTube video");
+	useEffect(host, () => {
+		host.dataset.meowdownEmbed = "youtube";
+		const container = getRootContainer(host);
+		const data = props.data.get() ?? fetched.get();
+		const playback = props.playback.get() === "inline" ? "inline" : "link";
+		const result = data == null ? void 0 : parseYouTubeVideo(data);
+		if (result?.issues) console.error("[meowdown] Invalid YouTube video data:", result.issues);
+		const ref = result && !result.issues ? parseYouTubeUrl(result.value.url) : void 0;
+		container.replaceChildren(result && !result.issues && ref ? renderVideo(result.value, ref, playback) : renderFallback(pending.get()));
+	});
+}
+function renderFallback(pending) {
+	return el("article", pending ? {
+		"data-fallback": "",
+		"data-pending": ""
+	} : { "data-fallback": "" }, el("div", { "data-details": "" }, el("span", { "data-title": "" }, "YouTube video")), el("p", { "data-body": "" }, pending ? "Loading this video…" : "This video is unavailable."), pending ? null : el("footer", { "data-footer": "" }, "No saved video could be displayed."));
+}
+const YouTubeVideoCustomElement = defineCustomElement(useYouTubeVideo, defineProps({
+	data: {
+		default: null,
+		attribute: false
+	},
+	url: {
+		default: null,
+		attribute: false
+	},
+	resolver: {
+		default: null,
+		attribute: false
+	},
+	playback: {
+		default: "link",
+		attribute: "playback",
+		type: "string"
+	}
+}));
+
+//#endregion
+//#region src/youtube/register.ts
+function registerYouTubeVideo(name = "meowdown-embed-youtube") {
+	registerCustomElement(name, class extends YouTubeVideoCustomElement {});
+}
+
+//#endregion
+export { registerYouTubeVideo, useYouTubeVideo };

package/dist/youtube/theme.css

@@ -0,0 +1,173 @@
+@property --meowdown-embed-color {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-background {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-border-color {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-radius {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-padding {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-muted-color {
+  syntax: '*';
+  inherits: true;
+}
+
+@property --meowdown-embed-link-color {
+  syntax: '*';
+  inherits: true;
+}
+
+@layer meowdown-embed {
+  :where([data-meowdown-embed='youtube']) {
+    --_hairline: var(
+      --meowdown-embed-border-color,
+      color-mix(in srgb, currentColor 15%, transparent)
+    );
+    --_muted: var(--meowdown-embed-muted-color, color-mix(in srgb, currentColor 58%, transparent));
+    --_link: var(--meowdown-embed-link-color, #1d9bf0);
+    --_radius: var(--meowdown-embed-radius, 1rem);
+    --_page: var(--meowdown-embed-background, Canvas);
+    --_play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24S67.94 13.05 66.52 7.74z' fill='%23f00'/%3E%3Cpath d='M45 24 27 14v20z' fill='%23fff'/%3E%3C/svg%3E");
+
+    display: block;
+    font: inherit;
+    color: var(--meowdown-embed-color, inherit);
+
+    :where([data-root]) {
+      overflow-wrap: anywhere;
+      line-height: 1.35;
+    }
+    :where([hidden]) {
+      display: none !important;
+    }
+    :where(a) {
+      color: var(--_link);
+      text-decoration: none;
+    }
+    :where(a:hover) {
+      text-decoration: underline;
+      text-underline-offset: 0.15em;
+    }
+    :where(a:focus-visible, button:focus-visible) {
+      outline: 2px solid var(--_link);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+
+    /* The card is the poster. The article is the positioned box that the
+     * details overlay hangs from. */
+    :where(article) {
+      position: relative;
+      max-width: 100%;
+    }
+    :where([data-orientation='portrait']) {
+      max-width: 22rem;
+      margin-inline: auto;
+    }
+    :where([data-poster], iframe) {
+      position: relative;
+      display: block;
+      width: 100%;
+      aspect-ratio: 16 / 9;
+      border: 0;
+      border-radius: var(--_radius);
+      overflow: hidden;
+      background: color-mix(in srgb, currentColor 6%, transparent);
+    }
+    :where([data-orientation='portrait'] [data-poster], [data-orientation='portrait'] iframe) {
+      aspect-ratio: 9 / 16;
+    }
+    :where(button[data-poster]) {
+      padding: 0;
+      font: inherit;
+      color: inherit;
+      cursor: pointer;
+    }
+    :where([data-poster] img) {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    /* YouTube's own large play button: the 68x48 shape from the embedded
+     * player, red with a white triangle. */
+    :where([data-play]) {
+      position: absolute;
+      inset: 50% auto auto 50%;
+      width: 68px;
+      height: 48px;
+      translate: -50% -50%;
+      background: var(--_play) center / contain no-repeat;
+    }
+
+    /* Details: absolutely positioned over the top of the poster by default.
+     * Variants move or restyle it. */
+    :where([data-details]) {
+      position: absolute;
+      inset: 0 0 auto 0;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.125rem;
+      pointer-events: none;
+    }
+    :where([data-details] a, [data-details] span) {
+      pointer-events: auto;
+    }
+    :where([data-title]) {
+      font-size: 1.0625em;
+      font-weight: 700;
+      color: inherit;
+    }
+    :where([data-details] > a:has([data-author]), [data-author]) {
+      font-size: 0.875em;
+      color: inherit;
+    }
+    /* Fallback and pending states keep a plain bordered box. */
+    :where([data-fallback]) {
+      border: 1px solid var(--_hairline);
+      border-radius: var(--_radius);
+      padding: var(--meowdown-embed-padding, 1rem);
+    }
+    :where([data-fallback] [data-details]) {
+      position: static;
+    }
+    :where([data-body]) {
+      margin-block: 0.5rem 0;
+      color: var(--_muted);
+    }
+    :where([data-footer]) {
+      display: block;
+      margin-block-start: 0.75rem;
+      font-size: 0.9375em;
+      color: var(--_muted);
+    }
+
+    :where([data-details]) {
+      padding: 0.875rem 1rem 2.5rem;
+      border-radius: var(--_radius) var(--_radius) 0 0;
+      background: linear-gradient(rgb(0 0 0 / 0.72), rgb(0 0 0 / 0));
+      color: #fff;
+    }
+    :where([data-details] > a:has([data-author]), [data-author]) {
+      color: rgb(255 255 255 / 0.82);
+    }
+  }
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@meowdown/embed",
+  "type": "module",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/prosekit/meowdown",
+    "directory": "packages/embed"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    "./x": "./src/x/index.ts",
+    "./x/theme.css": "./src/x/theme.css",
+    "./youtube": "./src/youtube/index.ts",
+    "./youtube/theme.css": "./src/youtube/theme.css"
+  },
+  "files": [
+    "./dist/**/*.js",
+    "./dist/**/*.d.ts",
+    "./dist/**/*.css"
+  ],
+  "scripts": {
+    "build": "tsdown"
+  },
+  "dependencies": {
+    "@aria-ui/core": "^0.2.1",
+    "@post-embed/schema": "^0.5.0",
+    "@post-embed/types": "^0.4.0",
+    "crelt": "^1.0.7"
+  },
+  "devDependencies": {
+    "@meowdown/vitest": "workspace:*",
+    "@ocavue/tsconfig": "^0.7.1",
+    "@ocavue/utils": "^1.8.0",
+    "@vitest/browser-playwright": "^5.0.1",
+    "tsdown": "^0.23.0",
+    "vitest": "^5.0.1"
+  },
+  "publishConfig": {
+    "exports": {
+      "./x": "./dist/x/index.js",
+      "./x/theme.css": "./dist/x/theme.css",
+      "./youtube": "./dist/youtube/index.js",
+      "./youtube/theme.css": "./dist/youtube/theme.css"
+    },
+    "access": "public"
+  }
+}