@meowdown/react 0.71.4 → 0.72.0

package/README.md

@@ -49,11 +49,12 @@ export function App() {
 
 ## Components
 
-| Component           | Description                                                                                                                |
-| ------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `MeowdownEditor`    | The editor. Callbacks and resolvers must be stable; pass them via `useCallback`.                                           |
-| `MarkdownView`      | Read-only Markdown renderer. `interactive={false}` renders passive content for previews.                                   |
-| `WikilinkHoverCard` | Mount inside `MeowdownEditor`; renders host content for the hovered wiki link's `target`. Return `null` to render no card. |
+| Component                                          | Description                                                                                                                                                                                                                                |
+| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `MeowdownEditor`                                   | The editor. Callbacks and resolvers must be stable; pass them via `useCallback`.                                                                                                                                                           |
+| `MarkdownView`                                     | Read-only Markdown renderer. `interactive={false}` renders passive content for previews.                                                                                                                                                   |
+| `WikilinkHoverCard`                                | Mount inside `MeowdownEditor`; renders host content for the hovered wiki link's `target`. Return `null` to render no card.                                                                                                                 |
+| `LightboxRoot` / `LightboxImage` / `LightboxVideo` | Full-window image and video preview driven by `useLightbox()`. Compose your own close controls inside `LightboxRoot`, and call `lightbox.open(item, element)` from `onImageClick` or `onXPostMediaClick` to zoom from the clicked element. |
 
 Common `MeowdownEditor` props:
 
@@ -61,7 +62,7 @@ Common `MeowdownEditor` props:
 | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
 | `mode`                                                                                                        | `'focus'` (default), `'show'`, or `'hide'`: how much Markdown syntax stays in view |
 | `searchQuery` / `onSearchChange`                                                                              | Find in document, with `EditorHandle.findNext()` / `findPrevious()`                |
-| `onWikilinkClick` / `onLinkClick` / `onTagClick` / `onImageClick` / `onFileClick`                             | Click handling for the rendered atoms                                              |
+| `onWikilinkClick` / `onLinkClick` / `onTagClick` / `onImageClick` / `onFileClick` / `onXPostMediaClick`       | Click handling for the rendered atoms                                              |
 | `resolveImageUrl` / `resolveWikiEmbed` / `resolveWikilink` / `resolveFileLink` / `resolveFileInfo`            | Resolve and classify local content                                                 |
 | `onFilePaste`                                                                                                 | Persist pasted or dropped files                                                    |
 | `onSlashMenuSearch` / `onTagSearch` / `onWikilinkSearch` / `onSelectionMenuSearch`                            | Search menus for `/`, `#`, `[[`, and selection commands                            |

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode, Ref } from "react";
-import { AcceptPendingReplacementOptions, ExitBoundaryHandler, FileClickHandler, FileInfoResolver, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, LinkPreview, LinkPreviewResolver, LinkPreviewResolver as LinkPreviewResolver$1, ListMarker, MarkMode, PendingReplacement, PendingReplacementOutcome, PlaceholderOptions, SearchStatusHandler, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikiEmbedResolver, WikilinkClickHandler, WikilinkHoverHit, WikilinkResolver, XPostResolver, XPostResolver as XPostResolver$1, YouTubeVideoResolver, YouTubeVideoResolver as YouTubeVideoResolver$1 } from "@meowdown/core";
+import { ComponentProps, ReactElement, ReactNode, Ref } from "react";
+import { AcceptPendingReplacementOptions, ExitBoundaryHandler, FileClickHandler, FileInfoResolver, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, LinkPreview, LinkPreviewResolver, LinkPreviewResolver as LinkPreviewResolver$1, ListMarker, MarkMode, PendingReplacement, PendingReplacementOutcome, PlaceholderOptions, SearchStatusHandler, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikiEmbedResolver, WikilinkClickHandler, WikilinkHoverHit, WikilinkResolver, XPostMediaClickHandler, XPostResolver, XPostResolver as XPostResolver$1, YouTubeVideoResolver, YouTubeVideoResolver as YouTubeVideoResolver$1 } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
 import { ReactNodeViewComponent, ReactNodeViewComponent as ReactNodeViewComponent$1, useEditor, useExtension, useKeymap } from "@prosekit/react";
 //#region src/utils/date-format.d.ts
@@ -419,7 +419,7 @@ interface EditorProps {
   mediaUrlProtocols?: string[];
   /**
    * Resolves the data behind a YouTube video URL, directly or as a promise;
-   * the video renders as a `post-embed-youtube-video` card. Defaults to
+   * the video renders as a `meowdown-embed-youtube` card. Defaults to
    * `defaultResolveYouTubeVideo`, which reads YouTube's oEmbed endpoint. Pass
    * a stable function (e.g. from `useCallback`).
    */
@@ -447,6 +447,15 @@ interface EditorProps {
    * Pass a stable function (e.g. from `useCallback`).
    */
   onImageClick?: ImageClickHandler;
+  /**
+   * Called with the `meowdown-embed-media-click` event when the user
+   * activates a photo or video inside an X post card. Its `detail` holds the
+   * item, its siblings, and the rendered thumbnail element. Call
+   * `event.preventDefault()` to stop the card from opening the photo URL or
+   * playing the video in place, then show the media yourself, for example in
+   * a lightbox. Pass a stable function (e.g. from `useCallback`).
+   */
+  onXPostMediaClick?: XPostMediaClickHandler;
   /**
    * Auto-embeds a pasted tweet or YouTube link as a rich embed; one undo turns
    * the embed back into the raw link. On by default.
@@ -545,7 +554,7 @@ interface EditorProps {
  *
  * Callbacks and resolvers should be stable; pass them via `useCallback`.
  */
-export declare function MeowdownEditor({ mode, initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, frontmatter, blockHandle, caretGlide, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }: EditorProps): ReactElement;
+export declare function MeowdownEditor({ mode, initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, embedPaste, linkPaste, bulletAfterHeading, substitution, frontmatter, blockHandle, caretGlide, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }: EditorProps): ReactElement;
 //#endregion
 //#region src/components/markdown-view.d.ts
 /**
@@ -635,7 +644,7 @@ interface MarkdownViewProps {
    */
   resolveFileInfo?: FileInfoResolver;
   /**
-   * Resolve the data behind an X post URL, rendered as a `post-embed-x-post`
+   * Resolve the data behind an X post URL, rendered as a `meowdown-embed-x`
    * card. Defaults to `defaultResolveXPost`.
    */
   resolveXPost?: XPostResolver$1;
@@ -645,7 +654,7 @@ interface MarkdownViewProps {
   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`.
    */
   resolveYouTubeVideo?: YouTubeVideoResolver$1;
   /**
@@ -660,6 +669,12 @@ interface MarkdownViewProps {
    * Called when a rendered image is clicked. Pass a stable function.
    */
   onImageClick?: ImageClickHandler;
+  /**
+   * Called when a photo or video inside an X post card is activated. Call
+   * `event.preventDefault()` to stop the card from opening the photo URL or
+   * playing the video in place.
+   */
+  onXPostMediaClick?: XPostMediaClickHandler;
   /**
    * Called when a rendered file pill is clicked. Pass a stable function.
    */
@@ -684,7 +699,134 @@ interface MarkdownViewProps {
  * Callbacks (`onWikilinkClick`, etc.) and resolvers should be stable; pass them via
  * `useCallback` to avoid re-rendering the whole tree.
  */
-export declare function MarkdownView({ markdown, markMode, frontmatter, interactive, expandCollapsed, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onWikilinkClick, onLinkClick, onImageClick, onFileClick, onTaskClick, className }: MarkdownViewProps): ReactElement;
+export declare function MarkdownView({ markdown, markMode, frontmatter, interactive, expandCollapsed, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onWikilinkClick, onLinkClick, onImageClick, onXPostMediaClick, onFileClick, onTaskClick, className }: MarkdownViewProps): ReactElement;
+//#endregion
+//#region src/hooks/use-lightbox.d.ts
+/**
+ * Something a lightbox can show.
+ */
+type LightboxItem = LightboxImageItem | LightboxVideoItem;
+interface LightboxImageItem {
+  type: 'image';
+  /**
+   * A URL the browser can load, already resolved from the Markdown `src`.
+   */
+  src: string;
+  alt?: string | undefined;
+}
+interface LightboxVideoItem {
+  type: 'video';
+  /**
+   * In the order the browser should try them.
+   */
+  sources: Array<{
+    src: string;
+    type?: string | undefined;
+  }>;
+  /**
+   * URL of the image the player shows until the first video frame is ready.
+   */
+  poster?: string | undefined;
+  /**
+   * Width of the video itself, in pixels (not the size it is displayed at).
+   * With `height` it gives the player its aspect ratio before the video's
+   * metadata loads, so the open zoom ends on the right box.
+   */
+  width?: number | undefined;
+  /**
+   * Height of the video itself, in pixels.
+   */
+  height?: number | undefined;
+  /**
+   * Play like a GIF: muted, looping, without controls.
+   */
+  gif?: boolean | undefined;
+  alt?: string | undefined;
+}
+interface LightboxCloseOptions {
+  /**
+   * Close without the zoom back to the thumbnail, for example after the
+   * content was dragged off screen.
+   */
+  instant?: boolean | undefined;
+}
+/**
+ * State and commands for a {@link LightboxRoot}, from {@link useLightbox}.
+ */
+interface LightboxController {
+  readonly item: LightboxItem | null;
+  /**
+   * Show `item`. Pass the clicked thumbnail as `element` to zoom the lightbox
+   * out of it, and back into it on close. The element only has to be in the
+   * document; React does not need to render it. Without an element, in a
+   * browser without View Transitions, or under reduced motion, the lightbox
+   * opens and closes without the zoom.
+   */
+  readonly open: (item: LightboxItem, element?: HTMLElement | null) => void;
+  readonly close: (options?: LightboxCloseOptions) => void;
+  /**
+   * The zoom back to the thumbnail is over.
+   *
+   * @internal
+   */
+  readonly onExited: () => void;
+}
+/**
+ * Owns which item a {@link LightboxRoot} shows. Opening and closing run as
+ * React transitions, so the `<ViewTransition>` inside the root animates them.
+ *
+ * The thumbnail is not rendered by this hook's component (it may not be
+ * rendered by React at all), so its half of the shared transition is set by
+ * hand: it carries the name while the browser captures the page without the
+ * lightbox, and loses it while the lightbox is mounted.
+ */
+export declare function useLightbox(): LightboxController;
+//#endregion
+//#region src/components/lightbox-image.d.ts
+/**
+ * Props for {@link LightboxImage}. Other props land on the `<img>`.
+ */
+interface LightboxImageProps extends Omit<ComponentProps<'img'>, 'src' | 'alt'> {
+  readonly item: LightboxImageItem;
+}
+/**
+ * The image of a lightbox. It is the element the opened thumbnail zooms into.
+ */
+export declare function LightboxImage({ item, className, style, ...props }: LightboxImageProps): ReactNode;
+//#endregion
+//#region src/components/lightbox-root.d.ts
+/**
+ * Props for {@link LightboxRoot}. Other props land on the `<dialog>`.
+ */
+interface LightboxRootProps extends Omit<ComponentProps<'dialog'>, 'children' | 'ref' | 'open' | 'onCancel' | 'onClose'> {
+  /**
+   * From {@link useLightbox}.
+   */
+  readonly lightbox: LightboxController;
+  /**
+   * Render the open item. Put a {@link LightboxImage} somewhere inside, along
+   * with whatever closes the lightbox.
+   */
+  readonly children: (item: LightboxItem) => ReactNode;
+}
+/**
+ * The full-window modal shell of a lightbox. It renders nothing while no item
+ * is open, and `Escape` closes it.
+ */
+export declare function LightboxRoot({ lightbox, children, className, ...props }: LightboxRootProps): ReactNode;
+//#endregion
+//#region src/components/lightbox-video.d.ts
+/**
+ * Props for {@link LightboxVideo}. Other props land on the `<video>`.
+ */
+interface LightboxVideoProps extends Omit<ComponentProps<'video'>, 'src' | 'poster' | 'children'> {
+  readonly item: LightboxVideoItem;
+}
+/**
+ * The video of a lightbox. It starts playing as soon as it opens: the click
+ * that opened the lightbox is the user gesture that allows sound.
+ */
+export declare function LightboxVideo({ item, className, style, ...props }: LightboxVideoProps): ReactNode;
 //#endregion
 //#region src/components/wikilink-hover-card.d.ts
 /**
@@ -711,4 +853,4 @@ interface WikilinkHoverCardProps {
  */
 export declare function WikilinkHoverCard({ children, className }: WikilinkHoverCardProps): ReactNode;
 //#endregion
-export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, type LinkPreview, type LinkPreviewResolver, type MarkdownViewProps, type PendingReplacementResolveHandler, type ReactNodeViewComponent, type SelectionHint, type SelectionJSON, type SelectionMenuContext, type SelectionMenuItem, type SelectionMenuSearchHandler, type SlashMenuItem, type SlashMenuSearchHandler, type TagItem, type TagSearchHandler, type TaskClickHandler, type TaskClickPayload, type TimeFormat, type WikilinkHoverCardProps, type WikilinkItem, type WikilinkSearchHandler, type XPostResolver, type YouTubeVideoResolver, useEditor, useExtension, useKeymap };
+export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, type LightboxCloseOptions, type LightboxController, type LightboxImageItem, type LightboxImageProps, type LightboxItem, type LightboxRootProps, type LightboxVideoItem, type LightboxVideoProps, type LinkPreview, type LinkPreviewResolver, type MarkdownViewProps, type PendingReplacementResolveHandler, type ReactNodeViewComponent, type SelectionHint, type SelectionJSON, type SelectionMenuContext, type SelectionMenuItem, type SelectionMenuSearchHandler, type SlashMenuItem, type SlashMenuSearchHandler, type TagItem, type TagSearchHandler, type TaskClickHandler, type TaskClickPayload, type TimeFormat, type WikilinkHoverCardProps, type WikilinkItem, type WikilinkSearchHandler, type XPostResolver, type YouTubeVideoResolver, useEditor, useExtension, useKeymap };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { clsx } from "clsx/lite";
-import { Fragment, cloneElement, createElement, memo, useCallback, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, ViewTransition, cloneElement, createElement, memo, startTransition, useCallback, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defaultResolveXPost, defaultResolveYouTubeVideo, defineCodeBlockPreviewPlugin, defineEditorExtension, defineLinkEditKeymap, defineLinkHoverHandler, definePendingReplacementHandler, defineSearchStatusHandler, defineVirtualCaret, defineWikilinkHoverHandler, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getLinkText, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, parsePostEmbedSnapshot, renderMathInto, updateEditorConfig } from "@meowdown/core";
 import { clamp } from "@ocavue/utils";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, defineUpdateHandler, isTextSelection, union } from "@prosekit/core";
@@ -15,9 +15,9 @@ import { Popover } from "@base-ui/react/popover";
 import { AutocompleteEmpty, AutocompleteItem, AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from "@prosekit/react/autocomplete";
 import { MenuItem, MenuPopup, MenuPositioner } from "@prosekit/react/menu";
 import { TableHandleColumnMenuRoot, TableHandleColumnMenuTrigger, TableHandleColumnPopup, TableHandleColumnPositioner, TableHandleDragPreview, TableHandleDropIndicator, TableHandleRoot, TableHandleRowMenuRoot, TableHandleRowMenuTrigger, TableHandleRowPopup, TableHandleRowPositioner } from "@prosekit/react/table-handle";
+import { X_POST_MEDIA_CLICK, registerXPost } from "@meowdown/embed/x";
+import { registerYouTubeVideo } from "@meowdown/embed/youtube";
 import { matchEmbed } from "@meowdown/markdown";
-import { registerXPost } from "@post-embed/elements/x";
-import { registerYouTubeVideo } from "@post-embed/elements/youtube";
 import { Mark } from "@prosekit/pm/model";
 import { BOOLEAN, OVERLOADED_BOOLEAN, getPropertyInfo, possibleStandardNames } from "react-property";
 import { PreviewCard } from "@base-ui/react/preview-card";
@@ -1848,7 +1848,7 @@ function findHeadingPosition(doc, fragment) {
 	});
 	return match;
 }
-function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution = true, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, searchQuery = "", onSearchChange, timeFormat, editorClassName, CodeBlockView, ref, children }) {
+function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, embedPaste, linkPaste, bulletAfterHeading, substitution = true, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, searchQuery = "", onSearchChange, timeFormat, editorClassName, CodeBlockView, ref, children }) {
 	const suppressDocChangeRef = useRef(false);
 	const handleDocChange = useMemo(() => {
 		if (!onDocChange) return;
@@ -1876,6 +1876,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 		onFilePaste,
 		onFileSaveError,
 		onImageClick,
+		onXPostMediaClick,
 		embedPaste,
 		linkPaste,
 		bulletAfterHeading,
@@ -1903,6 +1904,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 		onFilePaste,
 		onFileSaveError,
 		onImageClick,
+		onXPostMediaClick,
 		embedPaste,
 		linkPaste,
 		bulletAfterHeading,
@@ -2105,7 +2107,7 @@ const CARET_GLIDE_OFF = { "--meowdown-caret-glide": "0ms" };
 *
 * Callbacks and resolvers should be stable; pass them via `useCallback`.
 */
-function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste = true, linkPaste = true, bulletAfterHeading = false, substitution = true, frontmatter = false, blockHandle = true, caretGlide = true, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }) {
+function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, embedPaste = true, linkPaste = true, bulletAfterHeading = false, substitution = true, frontmatter = false, blockHandle = true, caretGlide = true, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }) {
 	const childRef = useRef(null);
 	useImperativeHandle(handleRef, () => {
 		function getMarkdown() {
@@ -2231,6 +2233,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			onFilePaste,
 			onFileSaveError,
 			onImageClick,
+			onXPostMediaClick,
 			embedPaste,
 			linkPaste,
 			bulletAfterHeading,
@@ -2388,12 +2391,12 @@ function PostEmbed(props) {
 		contentEditable: false,
 		"data-testid": `${kind}-embed`,
 		"data-post-embed": kind,
-		children: kind === "x-post" ? createElement("post-embed-x-post", {
+		children: kind === "x-post" ? createElement("meowdown-embed-x", {
 			data: null,
 			url: src,
 			resolver: resolveXPost ?? defaultResolveXPost,
 			mediaUrlProtocols: mediaUrlProtocols ?? null
-		}) : createElement("post-embed-youtube-video", {
+		}) : createElement("meowdown-embed-youtube", {
 			data: saved?.kind === "youtube-video" ? saved.data : null,
 			url: src,
 			resolver: resolveYouTubeVideo,
@@ -2435,6 +2438,7 @@ function ImagePreview(props) {
 					src,
 					alt,
 					event: event.nativeEvent,
+					element: event.currentTarget,
 					mod: isModEvent(event)
 				});
 			} : void 0,
@@ -2861,7 +2865,7 @@ const MarkdownBlock = memo(function MarkdownBlock({ node, taskBase, context, ref
 * Callbacks (`onWikilinkClick`, etc.) and resolvers should be stable; pass them via
 * `useCallback` to avoid re-rendering the whole tree.
 */
-function MarkdownView({ markdown, markMode = "hide", frontmatter = false, interactive = true, expandCollapsed = false, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onWikilinkClick, onLinkClick, onImageClick, onFileClick, onTaskClick, className }) {
+function MarkdownView({ markdown, markMode = "hide", frontmatter = false, interactive = true, expandCollapsed = false, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onWikilinkClick, onLinkClick, onImageClick, onXPostMediaClick, onFileClick, onTaskClick, className }) {
 	const context = useMemo(() => ({
 		interactive,
 		expandCollapsed,
@@ -2904,7 +2908,14 @@ function MarkdownView({ markdown, markMode = "hide", frontmatter = false, intera
 			definitionsKey: definitionsSignature(referenceDefinitions)
 		};
 	}, [markdown, frontmatter]);
+	const handleXPostMediaClick = interactive ? onXPostMediaClick : void 0;
+	const rootRef = useCallback((root) => {
+		if (!handleXPostMediaClick) return;
+		root.addEventListener(X_POST_MEDIA_CLICK, handleXPostMediaClick);
+		return () => root.removeEventListener(X_POST_MEDIA_CLICK, handleXPostMediaClick);
+	}, [handleXPostMediaClick]);
 	return /* @__PURE__ */ jsx("div", {
+		ref: rootRef,
 		className: clsx("ProseMirror", "meowdown-content", className),
 		"data-mark-mode": markMode,
 		children: blocks.map(({ node, taskBase }, index) => /* @__PURE__ */ jsx(MarkdownBlock, {
@@ -2917,6 +2928,161 @@ function MarkdownView({ markdown, markMode = "hide", frontmatter = false, intera
 	});
 }
 
+//#endregion
+//#region src/hooks/use-lightbox.ts
+/**
+* The `view-transition-name` shared by the opened thumbnail and the lightbox
+* content, so the browser zooms between them.
+*/
+const LIGHTBOX_TRANSITION_NAME = "meowdown-lightbox-media";
+function setTransitionName(element, name) {
+	if (element) element.style.viewTransitionName = name;
+}
+/**
+* Owns which item a {@link LightboxRoot} shows. Opening and closing run as
+* React transitions, so the `<ViewTransition>` inside the root animates them.
+*
+* The thumbnail is not rendered by this hook's component (it may not be
+* rendered by React at all), so its half of the shared transition is set by
+* hand: it carries the name while the browser captures the page without the
+* lightbox, and loses it while the lightbox is mounted.
+*/
+function useLightbox() {
+	const [item, setItem] = useState(null);
+	const sourceRef = useRef(null);
+	const instantRef = useRef(false);
+	const open = useCallback((nextItem, element) => {
+		setTransitionName(sourceRef.current, "");
+		sourceRef.current = element ?? null;
+		setTransitionName(sourceRef.current, LIGHTBOX_TRANSITION_NAME);
+		startTransition(() => setItem(nextItem));
+	}, []);
+	const close = useCallback((options) => {
+		instantRef.current = options?.instant === true;
+		if (instantRef.current) setItem(null);
+		else startTransition(() => setItem(null));
+	}, []);
+	const isOpen = item != null;
+	useLayoutEffect(() => {
+		if (!isOpen) return;
+		setTransitionName(sourceRef.current, "");
+		return () => {
+			const source = sourceRef.current;
+			if (!instantRef.current && source?.isConnected) setTransitionName(source, LIGHTBOX_TRANSITION_NAME);
+			else sourceRef.current = null;
+		};
+	}, [isOpen]);
+	const onExited = useCallback(() => {
+		setTransitionName(sourceRef.current, "");
+		sourceRef.current = null;
+	}, []);
+	return useMemo(() => ({
+		item,
+		open,
+		close,
+		onExited
+	}), [
+		item,
+		open,
+		close,
+		onExited
+	]);
+}
+
+//#endregion
+//#region src/components/lightbox.module.css
+var lightbox_module_default = {
+	"Dialog": "meow_Dialog_VENw2q",
+	"Image": "meow_Image_VENw2q",
+	"Video": "meow_Video_VENw2q"
+};
+
+//#endregion
+//#region src/components/lightbox-image.tsx
+/**
+* The image of a lightbox. It is the element the opened thumbnail zooms into.
+*/
+function LightboxImage({ item, className, style, ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		draggable: false,
+		...props,
+		src: item.src,
+		alt: item.alt ?? "",
+		className: clsx(lightbox_module_default.Image, className),
+		style: {
+			...style,
+			viewTransitionName: LIGHTBOX_TRANSITION_NAME
+		}
+	});
+}
+
+//#endregion
+//#region src/components/lightbox-root.tsx
+const DIALOG_TRANSITION_CLASS = "meowdown-lightbox-dialog";
+function showModal(dialog) {
+	const active = document.activeElement;
+	if (active instanceof HTMLElement && active.isContentEditable) active.blur();
+	dialog.showModal();
+	return () => dialog.close();
+}
+/**
+* The full-window modal shell of a lightbox. It renders nothing while no item
+* is open, and `Escape` closes it.
+*/
+function LightboxRoot({ lightbox, children, className, ...props }) {
+	const { item, close, onExited } = lightbox;
+	if (!item) return null;
+	return /* @__PURE__ */ jsx(ViewTransition, {
+		default: DIALOG_TRANSITION_CLASS,
+		onExit: () => onExited,
+		children: /* @__PURE__ */ jsx("dialog", {
+			"aria-label": item.type === "video" ? "Video preview" : "Image preview",
+			...props,
+			ref: showModal,
+			className: clsx(lightbox_module_default.Dialog, className),
+			onCancel: (event) => {
+				event.preventDefault();
+				close();
+			},
+			onClose: (event) => {
+				if (!event.currentTarget.open) close({ instant: true });
+			},
+			children: children(item)
+		})
+	});
+}
+
+//#endregion
+//#region src/components/lightbox-video.tsx
+/**
+* The video of a lightbox. It starts playing as soon as it opens: the click
+* that opened the lightbox is the user gesture that allows sound.
+*/
+function LightboxVideo({ item, className, style, ...props }) {
+	const gif = item.gif === true;
+	return /* @__PURE__ */ jsx("video", {
+		controls: !gif,
+		loop: gif,
+		muted: gif,
+		autoPlay: true,
+		playsInline: true,
+		"aria-label": item.alt,
+		...props,
+		poster: item.poster,
+		width: item.width,
+		height: item.height,
+		className: clsx(lightbox_module_default.Video, className),
+		style: {
+			...style,
+			viewTransitionName: LIGHTBOX_TRANSITION_NAME
+		},
+		children: item.sources.map((source) => /* @__PURE__ */ jsx("source", {
+			src: source.src,
+			type: source.type
+		}, source.src))
+	});
+}
+
 //#endregion
 //#region src/components/wikilink-hover-card.module.css
 var wikilink_hover_card_module_default = {
@@ -2999,4 +3165,4 @@ function WikilinkHoverCard({ children, className }) {
 }
 
 //#endregion
-export { MarkdownView, MeowdownEditor, WikilinkHoverCard, useEditor, useExtension, useKeymap };
+export { LightboxImage, LightboxRoot, LightboxVideo, MarkdownView, MeowdownEditor, WikilinkHoverCard, useEditor, useExtension, useKeymap, useLightbox };

package/dist/style.css

@@ -1058,6 +1058,40 @@
     display: block;
   }
 }
+.meow_Dialog_VENw2q {
+  all: revert;
+  box-sizing: border-box;
+  width: 100dvw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  padding: var(--meowdown-lightbox-padding, 1.5rem);
+  background: var(--meowdown-lightbox-backdrop, #000c);
+  border: 0;
+  outline: none;
+  margin: 0;
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+
+  &::backdrop {
+    background: none;
+  }
+}
+
+.meow_Image_VENw2q {
+  user-select: none;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.meow_Video_VENw2q {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+  position: relative;
+}
 .meow_Positioner_HMEwgW {
   z-index: 50;
   width: var(--positioner-width);
@@ -1114,3 +1148,28 @@
     flex: 1 0 auto;
   }
 }
+
+::view-transition-group(.meowdown-lightbox-dialog), ::view-transition-group(meowdown-lightbox-media) {
+  animation-duration: var(--meowdown-lightbox-duration, .18s);
+  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
+}
+
+::view-transition-group(.meowdown-lightbox-dialog) {
+  z-index: 1;
+}
+
+::view-transition-group(meowdown-lightbox-media) {
+  z-index: 2;
+}
+
+::view-transition-old(meowdown-lightbox-media), ::view-transition-new(meowdown-lightbox-media) {
+  object-fit: contain;
+  height: 100%;
+  overflow: clip;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(meowdown-lightbox-media), ::view-transition-old(meowdown-lightbox-media), ::view-transition-new(meowdown-lightbox-media), ::view-transition-group(.meowdown-lightbox-dialog), ::view-transition-old(.meowdown-lightbox-dialog), ::view-transition-new(.meowdown-lightbox-dialog) {
+    animation: none;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.71.4",
+  "version": "0.72.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,14 +22,14 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.8.0",
-    "@meowdown/core": "0.72.1",
+    "@meowdown/core": "0.73.0",
+    "@meowdown/embed": "0.1.0",
     "@meowdown/markdown": "0.72.0",
     "@ocavue/utils": "^1.8.0",
-    "@post-embed/elements": "^0.5.0",
-    "@post-embed/types": "^0.4.0",
-    "@prosekit/core": "^0.13.2",
-    "@prosekit/pm": "^0.1.19",
-    "@prosekit/react": "^0.8.2",
+    "@post-embed/types": "^0.5.0",
+    "@prosekit/core": "^0.13.3",
+    "@prosekit/pm": "^0.1.20",
+    "@prosekit/react": "^0.8.3",
     "beautiful-mermaid": "^1.1.3",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",
@@ -37,8 +37,8 @@
     "react-property": "^2.0.2"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -61,7 +61,7 @@
     "react-dom": "^19.3.0",
     "tsdown": "^0.23.0",
     "vitest": "^5.0.1",
-    "vitest-browser-commands": "^0.4.1",
+    "vitest-browser-commands": "^0.5.0",
     "vitest-browser-react": "^2.3.0"
   },
   "publishConfig": {