@meowdown/core 0.72.1 → 0.74.0

package/dist/index.d.ts

@@ -7,7 +7,8 @@ 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 { Resolver, XPostMediaClickEvent } from "@meowdown/embed/x";
+import { YouTubeVideoClickEvent } from "@meowdown/embed/youtube";
 import { render } from "katex";
 import { XPost, YouTubeVideo } from "@post-embed/types";
 import { VirtualElement } from "@floating-ui/dom";
@@ -656,6 +657,11 @@ interface ImageClickPayload {
    * from it; a touch surface delivers the `touchend` instead of a click.
    */
   event: MouseEvent | TouchEvent | KeyboardEvent;
+  /**
+   * The rendered `<img>` of a click or tap, for example to zoom a lightbox
+   * from. A key press has none.
+   */
+  element?: HTMLImageElement | undefined;
   /**
    * Whether the platform's mod key (`Command` on Apple, `Ctrl` elsewhere) was held
    * beyond the gesture that triggered the activation.
@@ -823,7 +829,7 @@ interface ImageOptions {
   mediaUrlProtocols?: string[];
   /**
    * Resolve the data behind a YouTube video URL, rendered as a
-   * `post-embed-youtube-video` card. Defaults to `defaultResolveYouTubeVideo`,
+   * `meowdown-embed-youtube` card. Defaults to `defaultResolveYouTubeVideo`,
    * which reads YouTube's oEmbed endpoint.
    */
   resolveYouTubeVideo?: YouTubeVideoResolver;
@@ -1070,10 +1076,39 @@ export declare function inlineTextToMarkChunksWithContext(marks: TypedMarkBuilde
  */
 type MarkMode = 'hide' | 'focus' | 'show';
 //#endregion
+//#region src/extensions/x-post-media-click.d.ts
+/**
+ * Receives the `meowdown-embed-media-click` event of an X post card. Its
+ * `detail` holds the activated photo or video, its sibling items, and the
+ * rendered thumbnail element. Call `event.preventDefault()` to cancel the
+ * card's own default (open the photo URL, play the video in place).
+ */
+type XPostMediaClickHandler = (event: XPostMediaClickEvent) => void;
+/**
+ * Call `onClick` when the user activates a photo or video inside an X post
+ * card.
+ */
+export declare function defineXPostMediaClickHandler(getOnClick?: (state: EditorState) => XPostMediaClickHandler | undefined): PlainExtension;
+//#endregion
+//#region src/extensions/youtube-video-click.d.ts
+/**
+ * Receives the `meowdown-embed-youtube-click` event of a YouTube card. Its
+ * `detail` holds the video, the player URL, and the rendered thumbnail
+ * element. Call `event.preventDefault()` to cancel the card's own default
+ * (play the video in place).
+ */
+type YouTubeVideoClickHandler = (event: YouTubeVideoClickEvent) => void;
+/**
+ * Call `onClick` when the user activates the poster of a YouTube card.
+ */
+export declare function defineYouTubeVideoClickHandler(getOnClick?: (state: EditorState) => YouTubeVideoClickHandler | undefined): PlainExtension;
+//#endregion
 //#region src/extensions/editor-config-types.d.ts
 interface EditorConfig extends InlineMarkOptions, FollowLinkHandlers, FilePasteOptions, FileViewOptions, ImageOptions {
   markMode?: MarkMode;
   onExitBoundary?: ExitBoundaryHandler;
+  onXPostMediaClick?: XPostMediaClickHandler;
+  onYouTubeVideoClick?: YouTubeVideoClickHandler;
   embedPaste?: boolean;
   linkPaste?: boolean;
   bulletAfterHeading?: boolean;
@@ -1226,7 +1261,7 @@ declare function defineEditorExtensionImpl(options: EditorExtensionOptions): imp
   Marks: {
     mdPack: MdPackAttrs;
   };
-}>]>, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").Extension<import("@prosekit/core").ExtensionTyping<any, any, any>>, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").Union<readonly [import("@prosekit/core").Extension<{
+}>]>, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").Extension<import("@prosekit/core").ExtensionTyping<any, any, any>>, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").PlainExtension, import("@prosekit/core").Union<readonly [import("@prosekit/core").Extension<{
   Commands: {
     insertSoftBreak: [];
   };
@@ -1639,4 +1674,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 EditorConfig, 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 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, defineSearchStatusHandler, getSearchStatus, isCodeBlockPreviewHiddenDecoration, withPriority };
+export { type AcceptPendingReplacementOptions, type CheckRoundTripOptions, type CodeBlockAttrs, type CodeBlockFenceStyle, type CodeToken, type DocToMarkdownOptions, type EditorConfig, 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 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 XPostMediaClickHandler, type XPostResolver, type YouTubeVideoClickHandler, type YouTubeVideoResolver, defineCodeBlockPreviewPlugin, definePlaceholder, defineSearchStatusHandler, getSearchStatus, isCodeBlockPreviewHiddenDecoration, withPriority };

package/dist/index.js

@@ -34,8 +34,8 @@ import { defineListCommands, defineListDropIndicator, defineListKeymap, defineLi
 import { chainCommands, lift, newlineInCode, splitBlock } from "@prosekit/pm/commands";
 import { closeHistory } from "@prosekit/pm/history";
 import { defineHorizontalRule } from "@prosekit/extensions/horizontal-rule";
-import { registerXPost } from "@post-embed/elements/x";
-import { registerYouTubeVideo } from "@post-embed/elements/youtube";
+import { X_POST_MEDIA_CLICK, registerXPost } from "@meowdown/embed/x";
+import { YOUTUBE_VIDEO_CLICK, registerYouTubeVideo } from "@meowdown/embed/youtube";
 import { registerResizableHandleElement, registerResizableRootElement } from "@prosekit/web/resizable";
 import { fromSyndication } from "@post-embed/exporter/x/syndication";
 import { XPostSchema, YouTubeVideoSchema } from "@post-embed/schema";
@@ -3104,6 +3104,9 @@ function getClosestImagePreview(target) {
 	if (!preview || preview.dataset.postEmbed != null) return;
 	return preview;
 }
+function getPreviewImage(preview) {
+	return preview.querySelector("img") ?? void 0;
+}
 function findImageAt(state, pos) {
 	const range = getMarkRangeAt(state, pos, "mdImage");
 	if (!range) return;
@@ -3164,6 +3167,7 @@ function defineImageClickHandler(getOnClick) {
 			src: hit.src,
 			alt: hit.alt,
 			event,
+			element: getPreviewImage(preview),
 			mod: isModEvent(event)
 		});
 		return true;
@@ -3216,6 +3220,7 @@ function defineImageClickHandler(getOnClick) {
 					src: hit.src,
 					alt: hit.alt,
 					event,
+					element: getPreviewImage(preview),
 					mod: isModEvent(event)
 				});
 				return true;
@@ -3593,6 +3598,16 @@ function defineHTMLComment() {
 	});
 }
 
+//#endregion
+//#region src/utils/to-positive-number.ts
+/**
+* The value rounded to an integer, or nothing unless it is a finite number
+* above zero.
+*/
+function toPositiveNumber(value) {
+	if (typeof value === "number" && Number.isFinite(value) && value > 0) return Math.round(value);
+}
+
 //#endregion
 //#region src/extensions/magic-comment.ts
 const MAGIC_COMMENT_RE = /^<!--\s*(\{[\s\S]*?\})\s*-->/;
@@ -3623,9 +3638,6 @@ function parseMagicComment(comment) {
 		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. `--` inside a JSON
 * string becomes `--`: the inline comment rule of `@lezer/markdown`
@@ -3673,7 +3685,12 @@ const defaultResolveXPost = cached(async (url) => {
 	const response = await fetch(X_POST_API + id);
 	if (!response.ok) return;
 	const json = await response.json();
-	return fromSyndication(json.data);
+	const result = fromSyndication(json.data);
+	if (result.issues) {
+		console.warn(`[meowdown] Invalid X post data for ${url}:`, result.issues);
+		return;
+	}
+	return result.value;
 });
 const YOUTUBE_OEMBED_API = "https://www.youtube.com/oembed?format=json&url=";
 const defaultResolveYouTubeVideo = cached(async (url) => {
@@ -3964,14 +3981,14 @@ var ImageMarkView = class {
 		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");
+			const element = document.createElement("meowdown-embed-x");
 			element.mediaUrlProtocols = this.#mediaUrlProtocols ?? null;
 			element.resolver = this.#resolveXPost;
 			element.url = src;
 			return element;
 		}
 		registerYouTubeVideo();
-		const element = document.createElement("post-embed-youtube-video");
+		const element = document.createElement("meowdown-embed-youtube");
 		element.playback = "inline";
 		element.data = saved?.kind === "youtube-video" ? saved.data : null;
 		element.resolver = this.#persisting(kind, this.#resolveYouTubeVideo);
@@ -7599,10 +7616,47 @@ function defineWikilink() {
 	});
 }
 
+//#endregion
+//#region src/extensions/x-post-media-click.ts
+const xPostMediaClickKey = new PluginKey("meowdown-x-post-media-click");
+/**
+* Call `onClick` when the user activates a photo or video inside an X post
+* card.
+*/
+function defineXPostMediaClickHandler(getOnClick) {
+	return definePlugin(new Plugin({
+		key: xPostMediaClickKey,
+		props: { handleDOMEvents: { [X_POST_MEDIA_CLICK]: (view, event) => {
+			const handler = getOnClick?.(view.state);
+			if (!handler) return false;
+			handler(event);
+			return event.defaultPrevented;
+		} } }
+	}));
+}
+
+//#endregion
+//#region src/extensions/youtube-video-click.ts
+const youTubeVideoClickKey = new PluginKey("meowdown-youtube-video-click");
+/**
+* Call `onClick` when the user activates the poster of a YouTube card.
+*/
+function defineYouTubeVideoClickHandler(getOnClick) {
+	return definePlugin(new Plugin({
+		key: youTubeVideoClickKey,
+		props: { handleDOMEvents: { [YOUTUBE_VIDEO_CLICK]: (view, event) => {
+			const handler = getOnClick?.(view.state);
+			if (!handler) return false;
+			handler(event);
+			return event.defaultPrevented;
+		} } }
+	}));
+}
+
 //#endregion
 //#region src/extensions/extension.ts
 function defineEditorExtensionImpl(options) {
-	return union(defineMeowdownParagraph(), defineDoc(), defineDocFrontmatterAttr(), defineText(), defineBlockquote(), defineMeowdownList(), defineHeading(), defineTable(), defineCodeBlock$1(), defineMeowdownHorizontalRule(), defineHTMLComment(), defineInlineMarks(), defineEditorConfig(options), defineImage(getEditorConfig), defineFileView(getEditorConfig), defineModClickPrevention(), defineFileClickHandler((state) => getEditorConfig(state).onFileClick), defineImageClickHandler((state) => getEditorConfig(state).onImageClick), defineWikilinkClickHandler((state) => getEditorConfig(state).onWikilinkClick), defineTagClickHandler((state) => getEditorConfig(state).onTagClick), defineLinkClickHandler((state) => getEditorConfig(state).onLinkClick), defineFollowLinkHandler(getEditorConfig), defineExitBoundaryHandler((state) => getEditorConfig(state).onExitBoundary), defineFilePaste(getEditorConfig), defineEmbedPaste((state) => !!getEditorConfig(state).embedPaste), defineLinkPaste((state) => !!getEditorConfig(state).linkPaste), defineBulletAfterHeading((state) => !!getEditorConfig(state).bulletAfterHeading), defineSubstitution((state) => !!getEditorConfig(state).substitution), defineWikilinkTrigger((state) => !!getEditorConfig(state).wikilinkEnabled), definePlaceholder$1({
+	return union(defineMeowdownParagraph(), defineDoc(), defineDocFrontmatterAttr(), defineText(), defineBlockquote(), defineMeowdownList(), defineHeading(), defineTable(), defineCodeBlock$1(), defineMeowdownHorizontalRule(), defineHTMLComment(), defineInlineMarks(), defineEditorConfig(options), defineImage(getEditorConfig), defineFileView(getEditorConfig), defineModClickPrevention(), defineFileClickHandler((state) => getEditorConfig(state).onFileClick), defineImageClickHandler((state) => getEditorConfig(state).onImageClick), defineXPostMediaClickHandler((state) => getEditorConfig(state).onXPostMediaClick), defineYouTubeVideoClickHandler((state) => getEditorConfig(state).onYouTubeVideoClick), defineWikilinkClickHandler((state) => getEditorConfig(state).onWikilinkClick), defineTagClickHandler((state) => getEditorConfig(state).onTagClick), defineLinkClickHandler((state) => getEditorConfig(state).onLinkClick), defineFollowLinkHandler(getEditorConfig), defineExitBoundaryHandler((state) => getEditorConfig(state).onExitBoundary), defineFilePaste(getEditorConfig), defineEmbedPaste((state) => !!getEditorConfig(state).embedPaste), defineLinkPaste((state) => !!getEditorConfig(state).linkPaste), defineBulletAfterHeading((state) => !!getEditorConfig(state).bulletAfterHeading), defineSubstitution((state) => !!getEditorConfig(state).substitution), defineWikilinkTrigger((state) => !!getEditorConfig(state).wikilinkEnabled), definePlaceholder$1({
 		placeholder: (state) => {
 			const placeholder = getEditorConfig(state).placeholder;
 			return typeof placeholder === "function" ? placeholder(state) : placeholder ?? "";
@@ -8987,4 +9041,4 @@ function getVirtualElementFromRange(view, range) {
 }
 
 //#endregion
-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, getEditorConfig, getFileKind, getIsComposing, getLinkText, getLinkUnitAt, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunks, inlineTextToMarkChunksWithContext, insertLink, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isMarkOfType, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, parsePostEmbedSnapshot, parseWikiEmbed, removeLink, renderMathInto, updateEditorConfig, 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, defineXPostMediaClickHandler, defineYouTubeVideoClickHandler, docToMarkdown, formatFileSize, formatSizedWikiEmbed, getCodeTokens, getEditorConfig, getFileKind, getIsComposing, getLinkText, getLinkUnitAt, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunks, inlineTextToMarkChunksWithContext, insertLink, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isMarkOfType, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, parsePostEmbedSnapshot, parseWikiEmbed, removeLink, renderMathInto, updateEditorConfig, updateLink, wikiEmbedBasename, withPriority };

package/dist/style.css

@@ -148,63 +148,74 @@
     display: none;
   }
 
-  @property --post-embed-color {
+  @property --meowdown-embed-color {
     syntax: "*";
     inherits: true
   }
 
-  @property --post-embed-background {
+  @property --meowdown-embed-background {
     syntax: "*";
     inherits: true
   }
 
-  @property --post-embed-border-color {
+  @property --meowdown-embed-border-color {
     syntax: "*";
     inherits: true
   }
 
-  @property --post-embed-radius {
+  @property --meowdown-embed-radius {
     syntax: "*";
     inherits: true
   }
 
-  @property --post-embed-padding {
+  @property --meowdown-embed-padding {
     syntax: "*";
     inherits: true
   }
 
-  @property --post-embed-muted-color {
+  @property --meowdown-embed-muted-color {
     syntax: "*";
     inherits: true
   }
 
-  @property --post-embed-link-color {
+  @property --meowdown-embed-link-color {
     syntax: "*";
     inherits: true
   }
 
-  [data-post-embed="x-post"] [data-root], [data-post-embed="x-post"] [data-root] *, [data-post-embed="x-post"] [data-root] :before, [data-post-embed="x-post"] [data-root] :after {
+  [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-post-embed="x-post"] {
-    --_hairline: var(--post-embed-border-color, color-mix(in srgb, currentColor 14%, transparent));
-    --_muted: var(--post-embed-muted-color, color-mix(in srgb, currentColor 55%, transparent));
-    --_link: var(--post-embed-link-color, #1d9bf0);
+  [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);
+    --_media-height: 7.5rem;
+    width: fit-content;
+    max-width: min(28rem, 100%);
     font: inherit;
-    color: var(--post-embed-color, inherit);
+    color: var(--meowdown-embed-color, inherit);
     text-decoration-skip-ink: none;
     display: block;
   }
 
-  [data-post-embed="x-post"] [data-root] {
-    color: var(--post-embed-color, inherit);
-    background: var(--post-embed-background, transparent);
+  [data-meowdown-embed="x"] [data-root]:before {
+    content: "";
+    width: calc(18rem - 2 * var(--meowdown-embed-padding, 1rem) - 2px);
+    max-width: 100%;
+    height: 0;
+    display: block;
+  }
+
+  [data-meowdown-embed="x"] [data-root] {
+    color: var(--meowdown-embed-color, inherit);
+    background: var(--meowdown-embed-background, transparent);
     border: 1px solid var(--_hairline);
-    border-radius: var(--post-embed-radius, .75rem);
-    padding: var(--post-embed-padding, 1rem);
+    border-radius: var(--meowdown-embed-radius, .75rem);
+    padding: var(--meowdown-embed-padding, 1rem);
     letter-spacing: normal;
     text-align: start;
     text-transform: none;
@@ -266,7 +277,7 @@
     }
 
     & [data-avatar][data-shape="square"] {
-      border-radius: .5rem;
+      border-radius: .375rem;
     }
 
     & [data-avatar][data-shape="hexagon"] {
@@ -290,31 +301,53 @@
 
     & [data-author-details] > bdi {
       color: var(--_muted);
+      font-size: .9375em;
     }
 
     & [data-author-details] > bdi > a {
       color: inherit;
     }
 
+    & [data-date] {
+      white-space: nowrap;
+      color: var(--_muted);
+      flex: none;
+      align-self: flex-start;
+      padding-inline-start: .25rem;
+      font-size: .8125em;
+      line-height: 1.3rem;
+      display: block;
+    }
+
+    & [data-date] > a {
+      color: inherit;
+    }
+
     & [data-reply-to] {
       color: var(--_muted);
       margin-block-start: .625rem;
-      font-size: .9375em;
+      font-size: .875em;
       display: block;
     }
 
     & [data-body] {
-      margin-block: .625rem 0;
+      margin-block: .75rem 0;
       font-size: 1em;
       line-height: 1.5;
       display: block;
     }
 
+    & [data-reply-to] + [data-body] {
+      margin-block-start: .375rem;
+    }
+
     & [data-text] {
       white-space: pre-wrap;
     }
 
     & [data-media] {
+      height: var(--_media-height);
+      max-width: calc(2 * var(--_media-height));
       background: var(--_hairline);
       border-radius: .5rem;
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -324,48 +357,113 @@
       overflow: hidden;
     }
 
-    & [data-media][data-count="1"] {
-      grid-template-columns: minmax(0, 1fr);
-    }
-
     & [data-media-item] {
       min-width: 0;
       display: block;
+      position: relative;
       overflow: hidden;
     }
 
+    & [data-media-item]:after {
+      content: "";
+      border-radius: inherit;
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 10%, transparent);
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+    }
+
     & [data-media-item] > a {
       height: 100%;
       display: block;
     }
 
-    & [data-media-item] img, & [data-media-item] video {
-      object-fit: contain;
+    & [data-media-item] > [data-poster] {
       background: var(--_tint);
       width: 100%;
-      height: auto;
-      max-height: 32rem;
-      display: block;
+      height: 100%;
+      font: inherit;
+      color: inherit;
+      cursor: pointer;
+      border: 0;
+      padding: 0;
+      position: relative;
     }
 
-    & [data-media]:not([data-count="1"]) [data-media-item] img {
-      aspect-ratio: 1;
+    & [data-play] {
+      background: #0009;
+      border-radius: 50%;
+      width: 2.25rem;
+      height: 2.25rem;
+      position: absolute;
+      inset: 50% auto auto 50%;
+      translate: -50% -50%;
+    }
+
+    & [data-play]:after {
+      content: "";
+      border-block: .375rem solid #0000;
+      border-inline-start: .6rem solid #fff;
+      position: absolute;
+      inset: 50% auto auto 54%;
+      translate: -50% -50%;
+    }
+
+    & [data-media-item] img, & [data-media-item] video {
       object-fit: cover;
+      background: var(--_tint);
+      width: 100%;
       height: 100%;
+      display: block;
+    }
+
+    & [data-media-item][data-orientation="portrait"] :is(img, video) {
+      object-position: center 30%;
     }
 
     & [data-media][data-count="3"] [data-media-item]:first-child {
       grid-row: span 2;
     }
 
+    & [data-media]:is([data-count="1"], :has(video)) {
+      background: none;
+      border-radius: 0;
+      max-width: none;
+      height: auto;
+      display: block;
+      overflow: visible;
+    }
+
+    & [data-media]:is([data-count="1"], :has(video)) > [data-media-item] {
+      width: calc(var(--_media-height) * (var(--_ratio, 16 / 9)));
+      max-width: 100%;
+      aspect-ratio: var(--_ratio, 16 / 9);
+      border-radius: .5rem;
+    }
+
+    & [data-media]:has(video) > [data-media-item] + [data-media-item] {
+      margin-block-start: .375rem;
+    }
+
+    & [data-media-item]:has( > video) {
+      --_media-height: 20rem;
+    }
+
+    & [data-media-item]:has( > [data-media-error]:not([hidden])) {
+      aspect-ratio: auto;
+      width: auto;
+    }
+
     & [data-media-unavailable], & [data-media-error] {
       color: var(--_muted);
       background: var(--_tint);
+      border-radius: .5rem;
       padding: .75rem 1rem;
       display: block;
     }
 
     & [data-quoted] {
+      --_media-height: 5rem;
       border: 1px solid var(--_hairline);
       border-radius: .5rem;
       margin-block-start: .75rem;
@@ -373,59 +471,119 @@
       display: block;
     }
 
-    & [data-quoted] [data-author] {
-      gap: .5rem;
-    }
-
     & [data-quoted] [data-avatar] {
       width: 1.375rem;
       height: 1.375rem;
     }
 
     & [data-quoted] [data-author-details] {
-      flex-wrap: wrap;
       align-items: baseline;
       gap: 0 .35rem;
+      line-height: 1.375rem;
       display: flex;
     }
 
+    & [data-quoted] [data-author-name], & [data-quoted] [data-author-details] > bdi {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      min-width: 0;
+      display: block;
+      overflow: hidden;
+    }
+
+    & [data-quoted] [data-author-name] {
+      flex: 0 auto;
+    }
+
+    & [data-quoted] [data-author-details] > bdi {
+      flex: 0 100 auto;
+      min-width: 2.5rem;
+      font-size: .9375em;
+    }
+
+    & [data-quoted] [data-date] {
+      align-self: center;
+    }
+
     & [data-quoted] [data-body] {
-      margin-block-start: .375rem;
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+      -webkit-box-orient: vertical;
+      margin-block-start: .25rem;
       font-size: .9375em;
+      display: -webkit-box;
+      overflow: hidden;
     }
 
     & [data-quoted] [data-media] {
       border-radius: .375rem;
-    }
-
-    & [data-quoted] [data-footer] {
       margin-block-start: .5rem;
-      font-size: .8125em;
     }
 
-    & [data-footer] {
-      color: var(--_muted);
-      flex-wrap: wrap;
-      align-items: center;
-      gap: .25rem 0;
-      margin-block-start: .625rem;
-      font-size: .875em;
-      display: flex;
+    & [data-quoted] [data-play] {
+      scale: .75;
     }
 
-    & [data-footer] > a {
-      color: inherit;
+    & [data-quoted]:has( > [data-media]):not(:has( > [data-media] [data-poster],  > [data-media] video)) {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas: "head head"
+                           "body media"
+                           "foot foot";
+      column-gap: .75rem;
+      display: grid;
+
+      & > [data-author] {
+        grid-area: head;
+      }
+
+      & > [data-body] {
+        grid-area: body;
+      }
+
+      & > [data-footer] {
+        grid-area: foot;
+      }
+
+      & > [data-media] {
+        grid-area: media;
+        width: 4rem;
+        height: 4rem;
+        margin-block-start: .375rem;
+        display: block;
+        position: relative;
+      }
+
+      & > [data-media] > [data-media-item] {
+        width: 100%;
+        height: 100%;
+      }
+
+      & > [data-media] > [data-media-item]:nth-child(n+2) {
+        display: none;
+      }
+
+      & > [data-media]:not([data-count="1"]):after {
+        content: attr(data-count);
+        text-align: center;
+        color: #fff;
+        pointer-events: none;
+        background: #0000009e;
+        border-radius: .625rem;
+        min-width: 1.25rem;
+        padding: 0 .3125rem;
+        font-size: .6875rem;
+        font-weight: 600;
+        line-height: 1.25rem;
+        position: absolute;
+        inset: auto .25rem .25rem auto;
+      }
     }
 
-    & [data-footer] > [data-edited]:before {
-      content: "";
-      vertical-align: middle;
-      background: currentColor;
-      border-radius: 50%;
-      width: 3px;
-      height: 3px;
-      margin-inline: .45rem;
-      display: inline-block;
+    & [data-footer] {
+      color: var(--_muted);
+      margin-block-start: .5rem;
+      font-size: .8125em;
+      display: block;
     }
 
     & [data-edited] {
@@ -437,16 +595,16 @@
     }
   }
 
-  @layer post-embed {
-    :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);
+  @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");
       font: inherit;
-      color: var(--post-embed-color, inherit);
+      color: var(--meowdown-embed-color, inherit);
       display: block;
 
       & :where([data-root]) {
@@ -551,7 +709,7 @@
       & :where([data-fallback]) {
         border: 1px solid var(--_hairline);
         border-radius: var(--_radius);
-        padding: var(--post-embed-padding, 1rem);
+        padding: var(--meowdown-embed-padding, 1rem);
       }
 
       & :where([data-fallback] [data-details]) {
@@ -1075,9 +1233,12 @@
     padding: 2px 6px;
   }
 
-  .ProseMirror .md-image-view-preview post-embed-x-post, .ProseMirror .md-image-view-preview post-embed-youtube-video {
+  .ProseMirror .md-image-view-preview meowdown-embed-x, .ProseMirror .md-image-view-preview meowdown-embed-youtube {
     -webkit-user-select: text;
     user-select: text;
+  }
+
+  .ProseMirror .md-image-view-preview meowdown-embed-youtube {
     max-width: 550px;
     display: block;
   }
@@ -1095,7 +1256,7 @@
     height: auto !important;
   }
 
-  .ProseMirror .md-embed-resizable post-embed-youtube-video {
+  .ProseMirror .md-embed-resizable meowdown-embed-youtube {
     width: 100%;
     max-width: none;
   }
@@ -1246,7 +1407,7 @@
     }
 
     & .md-image-view-preview[data-post-embed] {
-      border-radius: var(--post-embed-radius, .75rem);
+      border-radius: var(--meowdown-embed-radius, .75rem);
       overflow: visible;
     }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/core",
   "type": "module",
-  "version": "0.72.1",
+  "version": "0.74.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,16 +25,16 @@
     "@codemirror/language-data": "^6.5.2",
     "@floating-ui/dom": "^1.8.0",
     "@lezer/highlight": "^1.2.3",
+    "@meowdown/embed": "^0.2.0",
     "@meowdown/markdown": "^0.72.0",
     "@ocavue/utils": "^1.8.0",
-    "@post-embed/elements": "^0.5.0",
-    "@post-embed/exporter": "^0.4.1",
-    "@post-embed/schema": "^0.5.0",
-    "@post-embed/types": "^0.4.0",
-    "@prosekit/core": "^0.13.2",
-    "@prosekit/extensions": "^0.18.2",
-    "@prosekit/pm": "^0.1.19",
-    "@prosekit/web": "^0.9.2",
+    "@post-embed/exporter": "^0.5.0",
+    "@post-embed/schema": "^0.5.2",
+    "@post-embed/types": "^0.5.0",
+    "@prosekit/core": "^0.13.3",
+    "@prosekit/extensions": "^0.18.3",
+    "@prosekit/pm": "^0.1.20",
+    "@prosekit/web": "^0.9.3",
     "hast-util-to-mdast": "^10.1.2",
     "katex": "^0.18.7",
     "lru.min": "^1.1.5",