@meowdown/core 0.69.0 → 0.70.0

package/dist/index.d.ts

@@ -8,7 +8,9 @@ import { EditorView } from "@prosekit/pm/view";
 import { EditorNode, Mark, ProseMirrorNode } from "@prosekit/pm/model";
 import { ListAttrs } from "@prosekit/extensions/list";
 import { HorizontalRuleExtension } from "@prosekit/extensions/horizontal-rule";
+import { Resolver } from "@post-embed/elements/x";
 import { render } from "katex";
+import { XPost, YouTubeVideo } from "@post-embed/types";
 import { VirtualElement } from "@floating-ui/dom";
 //#region src/converters/check-roundtrip.d.ts
 /**
@@ -202,6 +204,10 @@ interface MdImageAttrs {
    * Display height in CSS pixels from the trailing comment, or `null`.
    */
   height: number | null;
+  /**
+   * The saved post-embed snapshot from the trailing comment, or `null`.
+   */
+  snapshot: object | null;
   /**
    * `wikiEmbed` when the source is `![[target]]`; otherwise `null`.
    */
@@ -1034,62 +1040,6 @@ export declare const codeBlockLanguages: ReadonlyArray<LanguageItem>;
  */
 export declare function defineEmbedPaste(): PlainExtension;
 //#endregion
-//#region src/extensions/embed-types.d.ts
-/**
- * A framework-agnostic description of an embed iframe. Both the editor's DOM
- * mark view and the static React renderer build their own `<iframe>` from it, so
- * the URL/attribute logic lives in one place while each side renders natively.
- */
-interface EmbedDescriptor {
-  readonly kind: 'tweet' | 'youtube';
-  /**
-   * Stable identity for the widget, unique per rendered embed (e.g. the video or
-   * tweet id). Keeps ProseMirror from rebuilding the iframe on every edit, and
-   * keys the React element, so the embed never reloads.
-   */
-  readonly key: string;
-  /**
-   * The iframe `src`.
-   */
-  readonly src: string;
-  /**
-   * The iframe `title`.
-   */
-  readonly title: string;
-  /**
-   * The iframe `class`, e.g. `md-embed md-embed-tweet`.
-   */
-  readonly className: string;
-  /**
-   * The iframe `data-testid`.
-   */
-  readonly testid: string;
-  /**
-   * The iframe `allow` policy, when the embed needs one.
-   */
-  readonly allow?: string;
-  /**
-   * Whether the iframe is fullscreen-capable.
-   */
-  readonly allowFullscreen?: boolean;
-}
-//#endregion
-//#region src/extensions/tweet.d.ts
-/**
- * `Tweet.html` reports its rendered height via `postMessage`; size the iframe to
- * fit and pass each reported height to `onHeight`. Returns a cleanup that
- * removes the listener. The cleanup also runs once the iframe leaves the DOM, so
- * the editor's DOM mark view (which has no destroy hook) is covered, while a
- * React caller can call it on unmount.
- */
-export declare function listenForTweetHeight(iframe: HTMLIFrameElement, onHeight?: (height: number) => void): () => void;
-//#endregion
-//#region src/extensions/embed.d.ts
-/**
- * Detect a tweet/YouTube embed in an image `src`, or `undefined` for a plain image.
- */
-export declare function matchEmbed(src: string): EmbedDescriptor | undefined;
-//#endregion
 //#region src/extensions/exit-boundary.d.ts
 /**
  * Payload for {@link ExitBoundaryHandler}.
@@ -1363,6 +1313,39 @@ interface FollowLinkHandlers {
  */
 export declare function defineFollowLinkHandler(handlers: FollowLinkHandlers): PlainExtension;
 //#endregion
+//#region src/extensions/post-embed.d.ts
+type XPostResolver = Resolver<XPost>;
+type YouTubeVideoResolver = Resolver<YouTubeVideo>;
+type PostEmbedKind = 'x-post' | 'youtube-video';
+/**
+ * The post id of an X status URL, or `undefined` for any other `src`.
+ */
+export declare function parseXPostId(src: string): string | undefined;
+/**
+ * The post-embed card an image `src` renders as, or `undefined` for a plain image.
+ */
+export declare function matchPostEmbed(src: string): PostEmbedKind | undefined;
+export declare const defaultResolveXPost: XPostResolver;
+export declare const defaultResolveYouTubeVideo: YouTubeVideoResolver;
+/**
+ * The `snapshot` field of an image's magic comment: the card kind and the
+ * data post-embed renders. The kind is stored explicitly, so a saved snapshot
+ * is validated once, against the schema it names.
+ */
+type PostEmbedSnapshot = {
+  kind: 'x-post';
+  data: XPost;
+} | {
+  kind: 'youtube-video';
+  data: YouTubeVideo;
+};
+/**
+ * The snapshot a card renders from a saved JSON object, or `undefined` when
+ * the object does not validate. Unknown fields are dropped, so a persisted
+ * snapshot is exactly what the card needs.
+ */
+export declare function parsePostEmbedSnapshot(value: unknown): PostEmbedSnapshot | undefined;
+//#endregion
 //#region src/extensions/image.d.ts
 type ImageUrlResolver = (src: string) => string | undefined;
 /**
@@ -1375,12 +1358,17 @@ interface ImageOptions {
    */
   resolveImageUrl?: ImageUrlResolver;
   /**
-   * Whether to write the height a tweet embed reports back into the trailing
-   * size comment, so the next load can seed the iframe at its final height.
-   * Defaults to `true`; disable when the document must never change without a
-   * user edit (e.g. deterministic tests).
+   * Resolve the data behind an X post URL, rendered as a `post-embed-x-post`
+   * card. Defaults to `defaultResolveXPost`, which fetches through
+   * react-tweet's hosted proxy.
+   */
+  resolveXPost?: XPostResolver;
+  /**
+   * Resolve the data behind a YouTube video URL, rendered as a
+   * `post-embed-youtube-video` card. Defaults to `defaultResolveYouTubeVideo`,
+   * which reads YouTube's oEmbed endpoint.
    */
-  persistTweetHeight?: boolean;
+  resolveYouTubeVideo?: YouTubeVideoResolver;
 }
 /**
  * Show an `src` as-is when it is an http(s) URL, otherwise skip rendering it.
@@ -1641,4 +1629,4 @@ export declare function getSelectedText(state: EditorState): string;
  */
 export declare function getVirtualElementFromRange(view: EditorView, range: PositionRange): VirtualElement;
 //#endregion
-export { type AcceptPendingReplacementOptions, type CheckRoundTripOptions, type CodeBlockAttrs, type CodeBlockFenceStyle, type CodeToken, type DocToMarkdownOptions, type EditorExtension, type EditorExtensionOptions, type EmbedDescriptor, type ExitBoundaryHandler, type ExitBoundaryOptions, type FileClickHandler, type FileClickPayload, type FileInfo, type FileInfoResolver, type FileLinkOptions, type FileLinkPayload, type FileLinkResolver, type FilePasteHandler, type FilePasteOptions, type FileSaveErrorHandler, type FileViewOptions, type FollowLinkHandlers, type ImageClickHandler, type ImageClickPayload, type ImageOptions, type InlineMarkContext, type InlineMarkOptions, type KaTeXRender, type LanguageItem, type LinkAttrs, type LinkClickHandler, type LinkClickPayload, type LinkCopyHandler, type LinkCopyPayload, type LinkEditHandler, type LinkEditOptions, type LinkHoverHandler, type LinkHoverOptions, type LinkPreview, type LinkPreviewResolver, type LinkUnit, type ListMarker, type MarkChunk, type MarkMode, type MarkName, type MarkdownToDocOptions, type MdFileAttrs, type MdImageAttrs, type MdLinkTextAttrs, type MdMathAttrs, type MdWikilinkAttrs, type MeowdownCodeBlockAttrs, type MeowdownHTMLCommentAttrs, type MeowdownListAttrs, type MeowdownTableCellAttrs, type NodeName, type ParsedWikiEmbed, type PendingReplacement, type PendingReplacementEvent, type PendingReplacementHandler, type PendingReplacementMode, type PendingReplacementOutcome, type PlaceholderOptions, type PositionRange, Priority, type ReferenceDefinition, type ReferenceDefinitionIndex, type ReferenceDefinitions, type RoundTripFidelity, type SearchStatus, type SearchStatusHandler, type StartPendingReplacementOptions, type TableColumnAlign, type TagClickHandler, type TagClickPayload, type TypedEditor, type TypedMarkBuilders, type VirtualElement, type WikiEmbedOptions, type WikiEmbedResolution, type WikiEmbedResolver, type WikilinkClickHandler, type WikilinkClickPayload, type WikilinkHoverHandler, type WikilinkHoverHit, type WikilinkOptions, type WikilinkPayload, type WikilinkResolution, type WikilinkResolver, defineCodeBlockPreviewPlugin, definePlaceholder, defineReadonly, defineSearchStatusHandler, getSearchStatus, isCodeBlockPreviewHiddenDecoration, withPriority };
+export { type AcceptPendingReplacementOptions, type CheckRoundTripOptions, type CodeBlockAttrs, type CodeBlockFenceStyle, type CodeToken, type DocToMarkdownOptions, type EditorExtension, type EditorExtensionOptions, type ExitBoundaryHandler, type ExitBoundaryOptions, type FileClickHandler, type FileClickPayload, type FileInfo, type FileInfoResolver, type FileLinkOptions, type FileLinkPayload, type FileLinkResolver, type FilePasteHandler, type FilePasteOptions, type FileSaveErrorHandler, type FileViewOptions, type FollowLinkHandlers, type ImageClickHandler, type ImageClickPayload, type ImageOptions, type InlineMarkContext, type InlineMarkOptions, type KaTeXRender, type LanguageItem, type LinkAttrs, type LinkClickHandler, type LinkClickPayload, type LinkCopyHandler, type LinkCopyPayload, type LinkEditHandler, type LinkEditOptions, type LinkHoverHandler, type LinkHoverOptions, type LinkPreview, type LinkPreviewResolver, type LinkUnit, type ListMarker, type MarkChunk, type MarkMode, type MarkName, type MarkdownToDocOptions, type MdFileAttrs, type MdImageAttrs, type MdLinkTextAttrs, type MdMathAttrs, type MdWikilinkAttrs, type MeowdownCodeBlockAttrs, type MeowdownHTMLCommentAttrs, type MeowdownListAttrs, type MeowdownTableCellAttrs, type NodeName, type ParsedWikiEmbed, type PendingReplacement, type PendingReplacementEvent, type PendingReplacementHandler, type PendingReplacementMode, type PendingReplacementOutcome, type PlaceholderOptions, type PositionRange, type PostEmbedKind, type PostEmbedSnapshot, Priority, type ReferenceDefinition, type ReferenceDefinitionIndex, type ReferenceDefinitions, type RoundTripFidelity, type SearchStatus, type SearchStatusHandler, type StartPendingReplacementOptions, type TableColumnAlign, type TagClickHandler, type TagClickPayload, type TypedEditor, type TypedMarkBuilders, type VirtualElement, type WikiEmbedOptions, type WikiEmbedResolution, type WikiEmbedResolver, type WikilinkClickHandler, type WikilinkClickPayload, type WikilinkHoverHandler, type WikilinkHoverHit, type WikilinkOptions, type WikilinkPayload, type WikilinkResolution, type WikilinkResolver, type XPostResolver, type YouTubeVideoResolver, defineCodeBlockPreviewPlugin, definePlaceholder, defineReadonly, defineSearchStatusHandler, getSearchStatus, isCodeBlockPreviewHiddenDecoration, withPriority };

package/dist/index.js

@@ -40,6 +40,12 @@ import { normalizeIdentifier } from "micromark-util-normalize-identifier";
 import { createListRenderingPlugin, createSafariInputMethodWorkaroundPlugin, createToggleCollapsedCommand, defaultAttributesGetter, enterCommand, findCheckboxInListItem, handleListMarkerMouseDown, joinListElements, listToDOM, unwrapListSlice, wrappingListInputRule } from "prosemirror-flat-list";
 import { defineTableCellSpec, defineTableCommands, defineTableDropIndicator, defineTableEditingPlugin, defineTableHeaderCellSpec, defineTableRowSpec, defineTableSpec, deleteTable, isCellSelection } from "@prosekit/extensions/table";
 import { closeHistory } from "@prosekit/pm/history";
+import { fromSyndication } from "@post-embed/exporter/x/syndication";
+import { XPostSchema, YouTubeVideoSchema } from "@post-embed/schema";
+import { createLRU } from "lru.min";
+import * as v from "valibot";
+import { registerXPost } from "@post-embed/elements/x";
+import { registerYouTubeVideo } from "@post-embed/elements/youtube";
 import { registerResizableHandleElement, registerResizableRootElement } from "@prosekit/web/resizable";
 import { InputRule } from "@prosekit/pm/inputrules";
 
@@ -2844,8 +2850,8 @@ const emptyBatchSetMarkStep = new BatchSetMarkStep([]);
 
 //#endregion
 //#region src/extensions/magic-comment.ts
-const MAGIC_COMMENT_RE = /^<!--\s*(\{[^}]*\})\s*-->$/;
-const TRAILING_MAGIC_COMMENT_RE = /(?:<!--\s*\{[^}]*\}\s*-->)+$/;
+const MAGIC_COMMENT_RE = /^<!--\s*(\{[\s\S]*?\})\s*-->/;
+const TRAILING_MAGIC_COMMENT_RE = /(?:<!--\s*\{[\s\S]*?\}\s*-->)+$/;
 /**
 * Read the metadata out of a `<!-- {...} -->` comment, or `undefined` when the
 * text is not a comment carrying at least one recognized field.
@@ -2863,21 +2869,28 @@ function parseMagicComment(comment) {
 	const width = toPositiveNumber(data.width);
 	const height = toPositiveNumber(data.height);
 	const noLink = data.noLink === true ? true : void 0;
-	if (!width && !height && !noLink) return;
+	const snapshot = isObject(data.snapshot) && !Array.isArray(data.snapshot) ? data.snapshot : void 0;
+	if (!width && !height && !noLink && !snapshot) return;
 	return {
 		width,
 		height,
-		noLink
+		noLink,
+		snapshot
 	};
 }
 function toPositiveNumber(value) {
 	if (typeof value === "number" && Number.isFinite(value) && value > 0) return Math.round(value);
 }
 /**
-* The canonical comment meowdown writes for the metadata.
+* The canonical comment meowdown writes for the metadata. `--` inside a JSON
+* string becomes `--`: the inline comment rule of `@lezer/markdown`
+* (CommonMark 0.30) ends a comment at any `--`, so a snapshot text holding a
+* double dash would otherwise cut the comment short. Outside strings JSON
+* only writes `-` as a number sign, never doubled, so the escape keeps the
+* JSON valid and `JSON.parse` restores the text.
 */
 function formatMagicComment(magic) {
-	return `<!-- ${JSON.stringify(magic)} -->`;
+	return `<!-- ${JSON.stringify(magic).replaceAll("--", String.raw`-\u002d`)} -->`;
 }
 /**
 * Drop the trailing run of magic comments from the source text.
@@ -3491,6 +3504,7 @@ function walkImage(node, parentMarks, text, marks, out, options, context, traili
 	const title = resolution.title;
 	const width = trailing?.magic.width ?? null;
 	const height = trailing?.magic.height ?? null;
+	const snapshot = trailing?.magic.snapshot ?? null;
 	const to = trailing?.to ?? node.to;
 	emit(out, node.from, to, [
 		...parentMarks,
@@ -3501,6 +3515,7 @@ function walkImage(node, parentMarks, text, marks, out, options, context, traili
 			title,
 			width,
 			height,
+			snapshot,
 			syntax: null,
 			wikiTarget: null
 		})
@@ -3574,6 +3589,7 @@ function walkWikiEmbed(node, parentMarks, text, marks, out, options) {
 				title: "",
 				width: embed.width,
 				height: embed.height,
+				snapshot: null,
 				syntax: "wikiEmbed",
 				wikiTarget: embed.target
 			})
@@ -3872,6 +3888,7 @@ function defineMdImage() {
 			title: { default: "" },
 			width: { default: null },
 			height: { default: null },
+			snapshot: { default: null },
 			syntax: { default: null },
 			wikiTarget: { default: null }
 		},
@@ -6896,105 +6913,38 @@ const codeBlockLanguages = languages.map((language) => ({
 })).filter((language) => !excludeLanguages.has(language.label)).concat(extraLanguages).sort((a, b) => a.label.localeCompare(b.label));
 
 //#endregion
-//#region src/utils/prefers-dark-color-scheme.ts
-/**
-* Whether the user prefers a dark color scheme. Returns `false` in non-browser
-* (SSR) environments where `window` is unavailable.
-*/
-function prefersDarkColorScheme() {
-	if (typeof window === "undefined") return false;
-	return window.matchMedia("(prefers-color-scheme: dark)").matches;
+//#region src/extensions/paste.ts
+function getPastedText(event, slice) {
+	const fromClipboard = event.clipboardData?.getData("text/plain");
+	if (fromClipboard) return fromClipboard;
+	return slice.content.textBetween(0, slice.content.size, "\n");
 }
 
 //#endregion
-//#region src/extensions/tweet.ts
-const TWEET_HOSTS = /^(?:www\.|mobile\.)?(?:twitter\.com|x\.com)$/i;
+//#region src/extensions/post-embed.ts
+const X_POST_HOSTS = /^(?:www\.|mobile\.)?(?:twitter\.com|x\.com)$/i;
 const STATUS_ID = /\/status(?:es)?\/(\d+)/;
-function parseTweetId(src) {
-	let url;
+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 parseURL(src) {
 	try {
-		url = new URL(src);
+		return new URL(src);
 	} catch {
 		return;
 	}
-	if (!TWEET_HOSTS.test(url.hostname)) return void 0;
-	return STATUS_ID.exec(url.pathname)?.[1];
 }
-const matchTweet = (src) => {
-	const tweetId = parseTweetId(src);
-	if (!tweetId) return;
-	const theme = prefersDarkColorScheme() ? "dark" : "light";
-	return {
-		kind: "tweet",
-		key: `tweet:${tweetId}`,
-		src: `https://platform.twitter.com/embed/Tweet.html?id=${tweetId}&theme=${theme}&dnt=true`,
-		title: "Tweet",
-		className: "md-embed md-embed-tweet",
-		testid: "tweet-embed"
-	};
-};
 /**
-* `Tweet.html` reports its rendered height via `postMessage`; size the iframe to
-* fit and pass each reported height to `onHeight`. Returns a cleanup that
-* removes the listener. The cleanup also runs once the iframe leaves the DOM, so
-* the editor's DOM mark view (which has no destroy hook) is covered, while a
-* React caller can call it on unmount.
+* The post id of an X status URL, or `undefined` for any other `src`.
 */
-function listenForTweetHeight(iframe, onHeight) {
-	const onMessage = (event) => {
-		if (event.source !== iframe.contentWindow) return;
-		try {
-			const height = event.data?.["twttr.embed"]?.params?.[0]?.height;
-			if (typeof height === "number" && height > 0) {
-				applyTweetHeight(iframe, height);
-				onHeight?.(height);
-			}
-		} catch (error) {
-			console.warn("[meowdown] failed to parse tweet resize message:", error);
-		}
-	};
-	window.addEventListener("message", onMessage);
-	let cleaned = false;
-	const cleanup = () => {
-		if (cleaned) return;
-		cleaned = true;
-		window.removeEventListener("message", onMessage);
-		observer.disconnect();
-	};
-	const observer = new MutationObserver(() => {
-		if (!iframe.isConnected) cleanup();
-	});
-	observer.observe(document.body, {
-		childList: true,
-		subtree: true
-	});
-	return cleanup;
-}
-/**
-* Size a tweet iframe.
-*/
-function applyTweetHeight(iframe, height) {
-	if (height && height > 0) {
-		iframe.style.height = `${height}px`;
-		iframe.dataset.sized = "";
-	}
+function parseXPostId(src) {
+	const url = parseURL(src);
+	if (!url || !X_POST_HOSTS.test(url.hostname)) return void 0;
+	return STATUS_ID.exec(url.pathname)?.[1];
 }
-
-//#endregion
-//#region src/extensions/youtube.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}$/;
-/**
-* Extract `{ videoId, startSeconds? }` from any watch/shorts/embed/live/`youtu.be` URL.
-*/
-function parseYouTube(src) {
-	let url;
-	try {
-		url = new URL(src);
-	} catch {
-		return;
-	}
+function isYouTubeVideo(src) {
+	const url = parseURL(src);
+	if (!url) return false;
 	let videoId = null;
 	if (YOUTU_BE_HOST.test(url.hostname)) videoId = url.pathname.slice(1);
 	else if (YOUTUBE_HOSTS.test(url.hostname)) {
@@ -7002,58 +6952,68 @@ function parseYouTube(src) {
 		if (url.pathname === "/watch") videoId = url.searchParams.get("v");
 		else if (firstSegment === "shorts" || firstSegment === "embed" || firstSegment === "live") videoId = secondSegment ?? null;
 	}
-	if (!videoId || !VIDEO_ID.test(videoId)) return void 0;
-	const timeParam = url.searchParams.get("start") ?? url.searchParams.get("t");
-	const startSeconds = timeParam ? parseStartSeconds(timeParam) : void 0;
-	return {
-		videoId,
-		startSeconds
-	};
+	return videoId !== null && VIDEO_ID.test(videoId);
 }
 /**
-* `90`, `90s`, `1m30s`, `1h2m3s` to seconds.
+* The post-embed card an image `src` renders as, or `undefined` for a plain image.
 */
-function parseStartSeconds(value) {
-	if (/^\d+$/.test(value)) return Number(value);
-	const matched = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(value);
-	if (!matched || !matched[1] && !matched[2] && !matched[3]) return void 0;
-	return Number(matched[1] ?? 0) * 3600 + Number(matched[2] ?? 0) * 60 + Number(matched[3] ?? 0);
+function matchPostEmbed(src) {
+	if (parseXPostId(src) !== void 0) return "x-post";
+	if (isYouTubeVideo(src)) return "youtube-video";
 }
-const matchYouTube = (src) => {
-	const parsed = parseYouTube(src);
-	if (!parsed) return;
-	const query = parsed.startSeconds ? `?start=${parsed.startSeconds}` : "";
-	return {
-		kind: "youtube",
-		key: `youtube:${parsed.videoId}:${parsed.startSeconds ?? 0}`,
-		src: `https://www.youtube-nocookie.com/embed/${parsed.videoId}${query}`,
-		title: "YouTube video",
-		className: "md-embed md-embed-youtube",
-		testid: "youtube-embed",
-		allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen",
-		allowFullscreen: true
-	};
-};
-
-//#endregion
-//#region src/extensions/embed.ts
-const EMBED_MATCHERS = [matchYouTube, matchTweet];
 /**
-* Detect a tweet/YouTube embed in an image `src`, or `undefined` for a plain image.
+* Wrap a loader in a 64-entry LRU keyed by URL. A settled URL answers
+* synchronously, so a revisited document renders its cards in the first
+* frame; the first visit returns the in-flight load.
 */
-function matchEmbed(src) {
-	for (const match of EMBED_MATCHERS) {
-		const descriptor = match(src);
-		if (descriptor) return descriptor;
-	}
+function cached(load) {
+	const cache = createLRU({ max: 64 });
+	return (url) => {
+		if (cache.has(url)) return cache.get(url);
+		const pending = load(url).then((value) => {
+			cache.set(url, value);
+			return value;
+		}, (error) => {
+			cache.delete(url);
+			throw error;
+		});
+		cache.set(url, pending);
+		return pending;
+	};
 }
-
-//#endregion
-//#region src/extensions/paste.ts
-function getPastedText(event, slice) {
-	const fromClipboard = event.clipboardData?.getData("text/plain");
-	if (fromClipboard) return fromClipboard;
-	return slice.content.textBetween(0, slice.content.size, "\n");
+const X_POST_API = "https://react-tweet.vercel.app/api/tweet/";
+const defaultResolveXPost = cached(async (url) => {
+	const id = parseXPostId(url);
+	if (id === void 0) return;
+	const response = await fetch(X_POST_API + id);
+	if (!response.ok) return;
+	const json = await response.json();
+	return fromSyndication(json.data);
+});
+const YOUTUBE_OEMBED_API = "https://www.youtube.com/oembed?format=json&url=";
+const defaultResolveYouTubeVideo = cached(async (url) => {
+	const response = await fetch(YOUTUBE_OEMBED_API + encodeURIComponent(url));
+	if (!response.ok) return;
+	return {
+		url,
+		...await response.json()
+	};
+});
+const PostEmbedSnapshotSchema = v.variant("kind", [v.object({
+	kind: v.literal("x-post"),
+	data: XPostSchema
+}), v.object({
+	kind: v.literal("youtube-video"),
+	data: YouTubeVideoSchema
+})]);
+/**
+* The snapshot a card renders from a saved JSON object, or `undefined` when
+* the object does not validate. Unknown fields are dropped, so a persisted
+* snapshot is exactly what the card needs.
+*/
+function parsePostEmbedSnapshot(value) {
+	const result = v.safeParse(PostEmbedSnapshotSchema, value);
+	return result.success ? result.output : void 0;
 }
 
 //#endregion
@@ -7062,7 +7022,7 @@ const embedPasteKey = new PluginKey("meowdown-embed-paste");
 function detectEmbedUrl(text) {
 	const trimmed = text.trim();
 	if (!trimmed || /\s/.test(trimmed)) return void 0;
-	return matchEmbed(trimmed) ? trimmed : void 0;
+	return matchPostEmbed(trimmed) ? trimmed : void 0;
 }
 function insertEmbedFromPaste(view, url) {
 	const { from, to } = view.state.selection;
@@ -7794,28 +7754,6 @@ function defaultResolveImageUrl(src) {
 */
 const MAX_DISPLAY_HEIGHT = 500;
 /**
-* Build the iframe DOM for an embed descriptor and start its height listener.
-* A persisted tweet height seeds the iframe before `Tweet.html` reports the
-* real one, so a revisited tweet keeps its space instead of shifting layout.
-*/
-function buildEmbedIframe(embed, height, onHeight) {
-	const iframe = document.createElement("iframe");
-	iframe.src = embed.src;
-	iframe.title = embed.title;
-	iframe.className = embed.className;
-	iframe.dataset.testid = embed.testid;
-	iframe.loading = "lazy";
-	iframe.referrerPolicy = "strict-origin-when-cross-origin";
-	iframe.setAttribute("frameborder", "0");
-	if (embed.allow) iframe.allow = embed.allow;
-	if (embed.allowFullscreen) iframe.allowFullscreen = true;
-	if (embed.kind === "tweet") {
-		applyTweetHeight(iframe, height);
-		listenForTweetHeight(iframe, onHeight);
-	}
-	return iframe;
-}
-/**
 * Write a persisted display size onto a resizable resizable root.
 */
 function applySize(root, width, height) {
@@ -7883,40 +7821,59 @@ function commitImageSize(view, content, rawWidth, rawHeight) {
 	}, true);
 }
 /**
-* Ignore reported tweet heights this close to the persisted one. Fonts, theme,
-* and container width nudge the rendered height by a few pixels per device;
-* writing those back would churn the document on every open.
+* Persist a resized width into the trailing magic comment. A card's height is
+* its content's, so any persisted height is dropped rather than carried over.
 */
-const TWEET_HEIGHT_TOLERANCE = 8;
+function commitEmbedWidth(view, content, rawWidth) {
+	const pos = view.posAtDOM(content, 0);
+	const range = getMarkRangeAt(view.state, pos, "mdImage");
+	if (!range) return;
+	rewriteMagicComment(view, range, {
+		width: Math.round(rawWidth),
+		height: void 0
+	}, true);
+}
 /**
-* Persist the height a tweet embed reported, so the next load can seed the
-* iframe before the tweet renders. A passive metadata write: outside undo
-* history, skipped in read-only views, and skipped inside the tolerance.
+* Persist a resolved snapshot into the trailing magic comment. The whole
+* `![alt](src)<!-- ... -->` range is rewritten, not just the comment: the
+* transaction stays out of history, and undoing the edit that inserted the
+* image must delete the snapshot with it. prosemirror-history maps the
+* inverse deletion through this step, and a position at the end of a
+* replaced range maps to the end of the replacement, so the mapped deletion
+* covers the comment. An insertion at the range end would survive that undo
+* as an orphan comment rendered as plain text.
 */
-function commitTweetHeight(view, content, height) {
-	if (!view.editable || !content.isConnected) return;
+function commitSnapshot(view, content, src, snapshot) {
 	const pos = view.posAtDOM(content, 0);
 	const range = getMarkRangeAt(view.state, pos, "mdImage");
 	if (!range) return;
-	const attrs = range.mark.attrs;
-	if (attrs.height != null && Math.abs(height - attrs.height) <= TWEET_HEIGHT_TOLERANCE) return;
-	rewriteMagicComment(view, range, { height: Math.round(height) }, false);
+	if (range.mark.attrs.src !== src) return;
+	const current = view.state.doc.textBetween(range.from, range.to);
+	const base = stripMagicComment(current);
+	const comment = formatMagicComment({
+		...parseMagicComment(current.slice(base.length)),
+		snapshot
+	});
+	if (base + comment === current) return;
+	view.dispatch(view.state.tr.insertText(base + comment, range.from, range.to).setMeta("addToHistory", false));
 }
 var ImageMarkView = class {
 	#dom;
 	#contentDOM;
 	#view;
 	#resolveImageUrl;
-	#persistTweetHeight;
+	#resolveXPost;
+	#resolveYouTubeVideo;
 	#attrs;
 	#resizableRoot;
 	#image;
-	#tweetIframe;
+	#destroyed = false;
 	constructor(mark, view, options) {
 		this.#attrs = mark.attrs;
 		this.#view = view;
 		this.#resolveImageUrl = options.resolveImageUrl;
-		this.#persistTweetHeight = options.persistTweetHeight ?? true;
+		this.#resolveXPost = options.resolveXPost ?? defaultResolveXPost;
+		this.#resolveYouTubeVideo = options.resolveYouTubeVideo ?? defaultResolveYouTubeVideo;
 		this.#dom = document.createElement("span");
 		this.#dom.className = "md-image-view md-atom-view";
 		this.#contentDOM = document.createElement("span");
@@ -7939,67 +7896,105 @@ var ImageMarkView = class {
 	update(mark) {
 		const next = mark.attrs;
 		const previous = this.#attrs;
-		if (next.src !== previous.src) return false;
+		if (next.src !== previous.src || next.snapshot !== previous.snapshot) return false;
 		this.#attrs = next;
 		if (this.#image && next.alt !== previous.alt) this.#image.alt = next.alt;
 		if (this.#resizableRoot && (next.width !== previous.width || next.height !== previous.height)) {
 			if (this.#image) applyImageDisplaySize(this.#resizableRoot, this.#image, next.width, next.height);
 			else applySize(this.#resizableRoot, next.width, next.height);
 		}
-		if (this.#tweetIframe && next.height !== previous.height) applyTweetHeight(this.#tweetIframe, next.height);
 		return true;
 	}
 	ignoreMutation(mutation) {
 		return !this.#contentDOM.contains(mutation.target);
 	}
+	destroy() {
+		this.#destroyed = true;
+	}
 	/**
-	* Build the inline preview for the image `src`: an embed iframe or a resizable `<img>`.
+	* Build the inline preview for the image `src`: a post-embed card or a
+	* resizable `<img>`.
 	*/
 	#renderPreview() {
 		const { src } = this.#attrs;
-		const embed = matchEmbed(src);
-		if (embed) {
-			const wrapper = document.createElement("span");
-			wrapper.className = "md-image-view-preview md-atom-view-preview";
-			const onHeight = this.#persistTweetHeight ? (height) => {
-				commitTweetHeight(this.#view, this.#contentDOM, height);
-			} : void 0;
-			const iframe = buildEmbedIframe(embed, this.#attrs.height, onHeight);
-			if (embed.kind === "tweet") this.#tweetIframe = iframe;
-			wrapper.appendChild(embed.kind === "youtube" ? this.#buildResizableEmbed(iframe) : iframe);
+		const wrapper = document.createElement("span");
+		wrapper.className = "md-image-view-preview md-atom-view-preview";
+		const kind = matchPostEmbed(src);
+		if (kind) {
+			wrapper.dataset.testid = `${kind}-embed`;
+			wrapper.appendChild(this.#buildPostEmbed(kind, src));
 			return wrapper;
 		}
 		const url = (this.#resolveImageUrl ?? defaultResolveImageUrl)(src);
 		if (!url) return void 0;
-		const wrapper = document.createElement("span");
-		wrapper.className = "md-image-view-preview md-atom-view-preview";
 		wrapper.dataset.testid = "image-preview";
 		wrapper.appendChild(this.#buildResizableImage(url));
 		return wrapper;
 	}
 	/**
-	* A resizable YouTube embed: the same resizable web component as images, with
-	* the player's fixed 16:9 ratio, so a drag only ever picks a width. Releasing
-	* a drag writes the size into the markdown source as a
-	* `<!-- {"width":N,"height":M} -->` comment, exactly like an image.
+	* A post-embed card renders a saved snapshot as is. Without one (or with
+	* one that does not validate or names another kind) it loads through the
+	* resolver, rendering its own pending and unavailable states, and the first
+	* answer is written back into the source so the next open renders in the
+	* first frame with no request.
 	*/
-	#buildResizableEmbed(iframe) {
+	#buildPostEmbed(kind, src) {
+		const saved = this.#attrs.snapshot == null ? void 0 : parsePostEmbedSnapshot(this.#attrs.snapshot);
+		if (kind === "x-post") {
+			registerXPost();
+			const element = document.createElement("post-embed-x-post");
+			element.data = saved?.kind === "x-post" ? saved.data : null;
+			element.resolver = this.#persisting(kind, this.#resolveXPost);
+			element.url = src;
+			return element;
+		}
+		registerYouTubeVideo();
+		const element = document.createElement("post-embed-youtube-video");
+		element.playback = "inline";
+		element.data = saved?.kind === "youtube-video" ? saved.data : null;
+		element.resolver = this.#persisting(kind, this.#resolveYouTubeVideo);
+		element.url = src;
+		return this.#buildResizableVideo(element);
+	}
+	/**
+	* Wrap a resolver so its first valid answer is persisted under `kind`.
+	* post-embed only calls it while `data` is null, and logs a rejection
+	* itself.
+	*/
+	#persisting(kind, resolver) {
+		return (url) => {
+			const result = resolver(url);
+			Promise.resolve(result).then((value) => {
+				if (this.#destroyed || value == null) return;
+				const snapshot = parsePostEmbedSnapshot({
+					kind,
+					data: value
+				});
+				if (snapshot) commitSnapshot(this.#view, this.#contentDOM, url, snapshot);
+			}, () => {});
+			return result;
+		};
+	}
+	/**
+	* A resizable video card: the same resizable web component as images, but
+	* only the dragged width is persisted, as `<!-- {"width":N} -->`; the card
+	* keeps its content height.
+	*/
+	#buildResizableVideo(element) {
 		registerResizableRootElement();
 		registerResizableHandleElement();
 		const root = document.createElement("prosekit-resizable-root");
 		root.className = "md-embed-resizable";
 		root.dataset.testid = "embed-resizable";
-		root.setAttribute("data-aspect-ratio", String(16 / 9));
-		applySize(root, this.#attrs.width, this.#attrs.height);
-		root.appendChild(iframe);
+		applySize(root, this.#attrs.width, null);
+		root.appendChild(element);
 		const handle = document.createElement("prosekit-resizable-handle");
 		handle.className = "md-image-resize-handle";
 		handle.setAttribute("position", "bottom-right");
 		handle.addEventListener("click", (event) => event.stopPropagation());
 		root.appendChild(handle);
 		root.addEventListener("resizeEnd", (event) => {
-			const { width: nextWidth, height: nextHeight } = event.detail;
-			commitImageSize(this.#view, this.#contentDOM, nextWidth, nextHeight);
+			commitEmbedWidth(this.#view, this.#contentDOM, event.detail.width);
 		});
 		this.#resizableRoot = root;
 		return root;
@@ -8864,4 +8859,4 @@ function getVirtualElementFromRange(view, range) {
 }
 
 //#endregion
-export { EDITOR_KEY_BINDINGS, Priority, buildFileMarkdown, checkRoundTrip, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineCodeBlockSyntaxHighlight, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineHTMLComment, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkCommands, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, defineMath, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSearchStatusHandler, defineSubstitution, defineTagClickHandler, defineViewAttributes, defineVirtualCaret, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, docToMarkdown, formatFileSize, formatSizedWikiEmbed, getCodeTokens, getFileKind, getIsComposing, getLinkText, getLinkUnitAt, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunks, inlineTextToMarkChunksWithContext, insertLink, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isMarkOfType, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, listenForTweetHeight, loadKaTeX, markdownToDoc, matchEmbed, normalizeHref, parseWikiEmbed, removeLink, renderMathInto, updateLink, wikiEmbedBasename, withPriority };
+export { EDITOR_KEY_BINDINGS, Priority, buildFileMarkdown, checkRoundTrip, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defaultResolveXPost, defaultResolveYouTubeVideo, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineCodeBlockSyntaxHighlight, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineHTMLComment, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkCommands, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, defineMath, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSearchStatusHandler, defineSubstitution, defineTagClickHandler, defineViewAttributes, defineVirtualCaret, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, docToMarkdown, formatFileSize, formatSizedWikiEmbed, getCodeTokens, getFileKind, getIsComposing, getLinkText, getLinkUnitAt, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunks, inlineTextToMarkChunksWithContext, insertLink, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isMarkOfType, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, matchPostEmbed, normalizeHref, parsePostEmbedSnapshot, parseWikiEmbed, parseXPostId, removeLink, renderMathInto, updateLink, wikiEmbedBasename, withPriority };

package/dist/style.css

@@ -147,6 +147,454 @@
   .prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
     display: none;
   }
+
+  @property --post-embed-color {
+    syntax: "*";
+    inherits: true
+  }
+
+  @property --post-embed-background {
+    syntax: "*";
+    inherits: true
+  }
+
+  @property --post-embed-border-color {
+    syntax: "*";
+    inherits: true
+  }
+
+  @property --post-embed-radius {
+    syntax: "*";
+    inherits: true
+  }
+
+  @property --post-embed-padding {
+    syntax: "*";
+    inherits: true
+  }
+
+  @property --post-embed-muted-color {
+    syntax: "*";
+    inherits: true
+  }
+
+  @property --post-embed-link-color {
+    syntax: "*";
+    inherits: true
+  }
+
+  @layer post-embed {
+    :where([data-post-embed="x-post"]) {
+      --_hairline: var(--post-embed-border-color, color-mix(in srgb, currentColor 15%, transparent));
+      --_muted: var(--post-embed-muted-color, color-mix(in srgb, currentColor 58%, transparent));
+      --_link: var(--post-embed-link-color, #1d9bf0);
+      --_badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.4 2 3.1-.5 1.1 3 2.9 1.3-.5 3.1 2 2.4-2 2.4.5 3.1-2.9 1.3-1.1 3-3.1-.5-2.4 2-2.4-2-3.1.5-1.1-3-2.9-1.3.5-3.1L1 12l2-2.4-.5-3.1 2.9-1.3 1.1-3 3.1.5z'/%3E%3C/svg%3E");
+      --_check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      font: inherit;
+      color: var(--post-embed-color, inherit);
+      display: block;
+
+      & :where([data-root]) {
+        background: var(--post-embed-background, transparent);
+        border: 1px solid var(--_hairline);
+        border-radius: var(--post-embed-radius, 1rem);
+        padding: var(--post-embed-padding, 1rem);
+        overflow-wrap: anywhere;
+        line-height: 1.4;
+        position: relative;
+      }
+
+      & :where([hidden]) {
+        display: none !important;
+      }
+
+      & :where(a) {
+        color: var(--_link);
+        text-decoration: none;
+      }
+
+      & :where(a:hover) {
+        text-underline-offset: .15em;
+        text-decoration: underline;
+      }
+
+      & :where(a:focus-visible, button:focus-visible) {
+        outline: 2px solid var(--_link);
+        outline-offset: 2px;
+        border-radius: 4px;
+      }
+
+      & :where([data-author]) {
+        align-items: center;
+        gap: .75rem;
+        display: flex;
+      }
+
+      & :where([data-avatar]) {
+        object-fit: cover;
+        border-radius: 50%;
+        flex: none;
+        width: 3rem;
+        height: 3rem;
+      }
+
+      & :where([data-avatar][data-shape="square"]) {
+        border-radius: .5rem;
+      }
+
+      & :where([data-avatar][data-shape="hexagon"]) {
+        clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+      }
+
+      & :where([data-author-details]) {
+        min-width: 0;
+        color: var(--_muted);
+        flex: 1;
+        line-height: 1.3;
+      }
+
+      & :where([data-author-name]) {
+        color: var(--post-embed-color, inherit);
+        flex-wrap: wrap;
+        align-items: center;
+        gap: .25rem;
+        font-weight: 700;
+        display: flex;
+      }
+
+      & :where([data-author-details] > bdi > a) {
+        color: inherit;
+      }
+
+      & :where([data-verified]) {
+        color: #0000;
+        --_badge-color: #1d9bf0;
+        width: 1.2em;
+        height: 1.2em;
+        display: inline-block;
+        position: relative;
+        overflow: hidden;
+      }
+
+      & :where([data-verified="business"]) {
+        --_badge-color: #e2b719;
+      }
+
+      & :where([data-verified="government"]) {
+        --_badge-color: #829aab;
+      }
+
+      & :where([data-verified]):before {
+        content: "";
+        background: var(--_badge-color);
+        mask: var(--_badge) center / contain no-repeat;
+        position: absolute;
+        inset: 0;
+      }
+
+      & :where([data-verified]):after {
+        content: "";
+        mask: var(--_check) center / contain no-repeat;
+        background: #fff;
+        position: absolute;
+        inset: 0;
+      }
+
+      & :where([data-label]) {
+        color: var(--_muted);
+        align-items: center;
+        gap: .25rem;
+        font-size: .8em;
+        font-weight: 500;
+        display: inline-flex;
+      }
+
+      & :where([data-label] img) {
+        border-radius: 2px;
+        width: 1.1em;
+        height: 1.1em;
+      }
+
+      & :where([data-reply-to]) {
+        color: var(--_muted);
+        margin-block-start: .75rem;
+        font-size: .9375em;
+      }
+
+      & :where([data-body]) {
+        margin-block: .75rem 0;
+        font-size: 1.0625em;
+        line-height: 1.45;
+      }
+
+      & :where([data-text]) {
+        white-space: pre-wrap;
+      }
+
+      & :where([data-media]) {
+        border: 1px solid var(--_hairline);
+        border-radius: 1rem;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 2px;
+        margin-block-start: .75rem;
+        display: grid;
+        overflow: hidden;
+      }
+
+      & :where([data-media][data-count="1"]) {
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      & :where([data-media-item]) {
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      & :where([data-media-item] > a) {
+        height: 100%;
+        display: block;
+      }
+
+      & :where([data-media-item] img, [data-media-item] video) {
+        object-fit: contain;
+        background: color-mix(in srgb, currentColor 6%, transparent);
+        width: 100%;
+        height: auto;
+        max-height: 36rem;
+        display: block;
+      }
+
+      & :where([data-media]:not([data-count="1"]) [data-media-item] img) {
+        aspect-ratio: 1;
+        object-fit: cover;
+        height: 100%;
+      }
+
+      & :where([data-media][data-count="3"] [data-media-item]:first-child) {
+        grid-row: span 2;
+      }
+
+      & :where([data-media-unavailable], [data-media-error]) {
+        color: var(--_muted);
+        background: color-mix(in srgb, currentColor 4%, transparent);
+        padding: .75rem 1rem;
+      }
+
+      & :where([data-quoted]) {
+        border: 1px solid var(--_hairline);
+        border-radius: 1rem;
+        margin-block-start: .75rem;
+        padding: .75rem;
+      }
+
+      & :where([data-quoted] [data-author]) {
+        gap: .5rem;
+      }
+
+      & :where([data-quoted] [data-avatar]) {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      & :where([data-quoted] [data-author-details]) {
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: 0 .35rem;
+        display: flex;
+      }
+
+      & :where([data-quoted] [data-body]) {
+        margin-block-start: .375rem;
+        font-size: 1em;
+      }
+
+      & :where([data-quoted] [data-media]) {
+        border-radius: .75rem;
+      }
+
+      & :where([data-quoted] [data-footer]) {
+        margin-block-start: .5rem;
+        font-size: .875em;
+      }
+
+      & :where([data-footer]) {
+        color: var(--_muted);
+        flex-wrap: wrap;
+        align-items: center;
+        gap: .25rem 0;
+        margin-block-start: .75rem;
+        font-size: .9375em;
+        display: flex;
+      }
+
+      & :where([data-footer] > a) {
+        color: inherit;
+      }
+
+      & :where([data-footer] > [data-edited]):before {
+        content: "";
+        vertical-align: middle;
+        background: currentColor;
+        border-radius: 50%;
+        width: 3px;
+        height: 3px;
+        margin-inline: .45rem;
+        display: inline-block;
+      }
+
+      & :where([data-edited]) {
+        font-style: normal;
+      }
+
+      & :where([data-fallback] [data-body]) {
+        color: var(--_muted);
+      }
+    }
+
+    :where([data-post-embed="youtube-video"]) {
+      --_hairline: var(--post-embed-border-color, color-mix(in srgb, currentColor 15%, transparent));
+      --_muted: var(--post-embed-muted-color, color-mix(in srgb, currentColor 58%, transparent));
+      --_link: var(--post-embed-link-color, #1d9bf0);
+      --_radius: var(--post-embed-radius, 1rem);
+      --_page: var(--post-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");
+      font: inherit;
+      color: var(--post-embed-color, inherit);
+      display: block;
+
+      & :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-underline-offset: .15em;
+        text-decoration: underline;
+      }
+
+      & :where(a:focus-visible, button:focus-visible) {
+        outline: 2px solid var(--_link);
+        outline-offset: 2px;
+        border-radius: 4px;
+      }
+
+      & :where(article) {
+        max-width: 100%;
+        position: relative;
+      }
+
+      & :where([data-orientation="portrait"]) {
+        max-width: 22rem;
+        margin-inline: auto;
+      }
+
+      & :where([data-poster], iframe) {
+        aspect-ratio: 16 / 9;
+        border-radius: var(--_radius);
+        background: color-mix(in srgb, currentColor 6%, transparent);
+        border: 0;
+        width: 100%;
+        display: block;
+        position: relative;
+        overflow: hidden;
+      }
+
+      & :where([data-orientation="portrait"] [data-poster], [data-orientation="portrait"] iframe) {
+        aspect-ratio: 9 / 16;
+      }
+
+      & :where(button[data-poster]) {
+        font: inherit;
+        color: inherit;
+        cursor: pointer;
+        padding: 0;
+      }
+
+      & :where([data-poster] img) {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        inset: 0;
+      }
+
+      & :where([data-play]) {
+        background: var(--_play) center / contain no-repeat;
+        width: 68px;
+        height: 48px;
+        position: absolute;
+        inset: 50% auto auto 50%;
+        translate: -50% -50%;
+      }
+
+      & :where([data-details]) {
+        pointer-events: none;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: .125rem;
+        display: flex;
+        position: absolute;
+        inset: 0 0 auto;
+      }
+
+      & :where([data-details] a, [data-details] span) {
+        pointer-events: auto;
+      }
+
+      & :where([data-title]) {
+        color: inherit;
+        font-size: 1.0625em;
+        font-weight: 700;
+      }
+
+      & :where([data-details] > a:has([data-author]), [data-author]) {
+        color: inherit;
+        font-size: .875em;
+      }
+
+      & :where([data-fallback]) {
+        border: 1px solid var(--_hairline);
+        border-radius: var(--_radius);
+        padding: var(--post-embed-padding, 1rem);
+      }
+
+      & :where([data-fallback] [data-details]) {
+        position: static;
+      }
+
+      & :where([data-body]) {
+        color: var(--_muted);
+        margin-block: .5rem 0;
+      }
+
+      & :where([data-footer]) {
+        color: var(--_muted);
+        margin-block-start: .75rem;
+        font-size: .9375em;
+        display: block;
+      }
+
+      & :where([data-details]) {
+        border-radius: var(--_radius) var(--_radius) 0 0;
+        color: #fff;
+        background: linear-gradient(#000000b8, #0000);
+        padding: .875rem 1rem 2.5rem;
+      }
+
+      & :where([data-details] > a:has([data-author]), [data-author]) {
+        color: #ffffffd1;
+      }
+    }
+  }
 }
 
 @layer meowdown.theme {
@@ -640,39 +1088,25 @@
     padding: 2px 6px;
   }
 
-  .ProseMirror .md-embed-youtube {
-    aspect-ratio: 16 / 9;
-    border-radius: var(--meowdown-image-radius, .5rem);
-    border: 0;
-    width: 100%;
-    max-width: 100%;
-    display: block;
-  }
-
-  .ProseMirror .md-embed-tweet {
-    border: 0;
-    width: 100%;
+  .ProseMirror .md-image-view-preview post-embed-x-post, .ProseMirror .md-image-view-preview post-embed-youtube-video {
+    -webkit-user-select: text;
+    user-select: text;
     max-width: 550px;
     display: block;
   }
 
-  .ProseMirror .md-embed-tweet:not([data-sized]) {
-    min-height: 250px;
-  }
-
   .ProseMirror .md-embed-resizable {
     isolation: isolate;
     min-width: 2.5rem;
     max-width: 100%;
-    min-height: 2.5rem;
     display: block;
     position: relative;
+    height: auto !important;
   }
 
-  .ProseMirror .md-embed-resizable .md-embed-youtube {
-    aspect-ratio: auto;
+  .ProseMirror .md-embed-resizable post-embed-youtube-video {
     width: 100%;
-    height: 100%;
+    max-width: none;
   }
 
   .ProseMirror .md-embed-resizable[data-resizing] iframe {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/core",
   "type": "module",
-  "version": "0.69.0",
+  "version": "0.70.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,12 +26,17 @@
     "@floating-ui/dom": "^1.8.0",
     "@lezer/highlight": "^1.2.3",
     "@ocavue/utils": "^1.8.0",
+    "@post-embed/elements": "^0.2.0",
+    "@post-embed/exporter": "^0.2.0",
+    "@post-embed/schema": "^0.2.0",
+    "@post-embed/types": "^0.2.0",
     "@prosekit/core": "^0.13.2",
     "@prosekit/extensions": "^0.18.2",
     "@prosekit/pm": "^0.1.19",
     "@prosekit/web": "^0.9.2",
     "hast-util-to-mdast": "^10.1.2",
     "katex": "^0.18.5",
+    "lru.min": "^1.1.5",
     "mdast-util-to-markdown": "^2.1.2",
     "micromark-util-decode-string": "^2.0.1",
     "micromark-util-normalize-identifier": "^2.0.1",
@@ -43,7 +48,8 @@
     "remark-stringify": "^11.0.0",
     "unicode-by-name": "^0.2.0",
     "unified": "^11.0.5",
-    "@meowdown/markdown": "^0.69.0"
+    "valibot": "^1.4.2",
+    "@meowdown/markdown": "^0.70.0"
   },
   "devDependencies": {
     "@ocavue/tsconfig": "^0.7.1",