@meowdown/embed 0.3.0 → 0.3.2

package/dist/{fetch-Djnul03u.d.ts → fetch-gxdhOZP6.d.ts}

@@ -1,5 +1,4 @@
 import { HostElement, State } from "@aria-ui/core";
-//#region src/fetch.d.ts
 /**
  * Loads the snapshot for `url`. Return `undefined` when nothing was found.
  */
@@ -18,5 +17,4 @@ interface FetchProps<T> {
    */
   resolver: Resolver<T> | null;
 }
-//#endregion
 export { Resolver as n, FetchProps as t };

package/dist/{is-plain-click-QDpLdFP7.js → is-plain-click-Dbydr3nX.js}

@@ -1,7 +1,7 @@
 import { createSignal, useEffect } from "@aria-ui/core";
 import el from "crelt";
 
-//#region src/fetch.ts
+// src/fetch.ts
 /**
 * Runs `resolver(url)` whenever `data` is `null` and both `url` and `resolver`
 * are set, ignoring results that arrive after the inputs changed or the host
@@ -10,6 +10,7 @@ import el from "crelt";
 * @internal
 */
 function useFetch(host, props, label) {
+	"use no memo";
 	const fetched = createSignal(null);
 	const pending = createSignal(false);
 	useEffect(host, () => {
@@ -53,8 +54,7 @@ function isPromiseLike(value) {
 	return typeof value === "object" && value !== null && typeof value.then === "function";
 }
 
-//#endregion
-//#region src/safe-url.ts
+// src/safe-url.ts
 function getSafeUrl(value, protocols) {
 	if (Array.from(value).some((character) => {
 		return character.charCodeAt(0) <= 32 || character.charCodeAt(0) === 127;
@@ -68,8 +68,7 @@ function getSafeUrl(value, protocols) {
 	}
 }
 
-//#endregion
-//#region src/render-link.ts
+// src/render-link.ts
 function renderLink(content, destination) {
 	const href = destination && getSafeUrl(destination);
 	return href ? el("a", {
@@ -79,8 +78,7 @@ function renderLink(content, destination) {
 	}, content) : content;
 }
 
-//#endregion
-//#region src/root.ts
+// src/root.ts
 /**
 * The direct `<div data-root>` child that holds the rendered snapshot. Reused
 * across updates so other children the host appended survive; created on
@@ -96,11 +94,9 @@ function getRootContainer(host) {
 	return container;
 }
 
-//#endregion
-//#region src/is-plain-click.ts
+// src/is-plain-click.ts
 function isPlainClick(event) {
 	return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
 }
 
-//#endregion
 export { useFetch as a, getSafeUrl as i, getRootContainer as n, renderLink as r, isPlainClick as t };

package/dist/x/index.d.ts

@@ -1,7 +1,6 @@
-import { n as Resolver, t as FetchProps } from "../fetch-Djnul03u.js";
+import { n as Resolver, t as FetchProps } from "../fetch-gxdhOZP6.js";
 import { HostElement, State } from "@aria-ui/core";
 import { XPost, XPostMedia } from "@post-embed/types";
-//#region src/x/media-click.d.ts
 export declare const X_POST_MEDIA_CLICK = "meowdown-embed-media-click";
 interface XPostMediaClickDetail {
   /**
@@ -23,19 +22,13 @@ interface XPostMediaClickDetail {
   element: HTMLElement;
 }
 type XPostMediaClickEvent = CustomEvent<XPostMediaClickDetail>;
-//#endregion
-//#region src/x/x-post.d.ts
 interface XPostProps extends FetchProps<XPost> {
   mediaUrlProtocols: readonly string[] | null;
 }
 interface XPostElement extends HTMLElement, XPostProps {}
 /** @internal */
-export declare function useXPost(host: HostElement, props: State<XPostProps>): void;
-//#endregion
-//#region src/x/register.d.ts
+export declare function setupXPost(host: HostElement, props: State<XPostProps>): void;
 export declare function registerXPost(name?: string): void;
-//#endregion
-//#region src/x/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
     'meowdown-embed-x': XPostElement;
@@ -44,5 +37,4 @@ declare global {
     'meowdown-embed-media-click': XPostMediaClickEvent;
   }
 }
-//#endregion
-export type { Resolver, XPostElement, XPostMediaClickDetail, XPostMediaClickEvent, XPostProps };
+export { type Resolver, type XPostElement, type XPostMediaClickDetail, type XPostMediaClickEvent, type XPostProps, setupXPost as useXPost };

package/dist/x/index.js

@@ -1,9 +1,9 @@
-import { a as useFetch, i as getSafeUrl, n as getRootContainer, r as renderLink, t as isPlainClick } from "../is-plain-click-QDpLdFP7.js";
+import { a as useFetch, i as getSafeUrl, n as getRootContainer, r as renderLink, t as isPlainClick } from "../is-plain-click-Dbydr3nX.js";
 import { defineCustomElement, defineProps, registerCustomElement, useEffect } from "@aria-ui/core";
 import { parseXPost, parseXPostId } from "@post-embed/schema";
 import el from "crelt";
 
-//#region src/x/media-click.ts
+// src/x/media-click.ts
 const X_POST_MEDIA_CLICK = "meowdown-embed-media-click";
 /**
 * Returns false when a listener called `preventDefault()`: the host shows the
@@ -18,8 +18,7 @@ function dispatchMediaClick(target, detail) {
 	}));
 }
 
-//#endregion
-//#region src/x/render-author.ts
+// src/x/render-author.ts
 function renderAuthor(author, protocols, date) {
 	if (!author.name && !author.handle) return;
 	const validHandle = /^\w{1,15}$/.test(author.handle);
@@ -37,8 +36,15 @@ function renderAuthor(author, protocols, date) {
 	}) : void 0, el("div", { "data-author-details": "" }, el("div", { "data-author-name": "" }, el("bdi", {}, author.name || author.handle)), author.handle ? el("bdi", {}, renderLink(`@${author.handle}`, validHandle ? `https://x.com/${author.handle}` : void 0)) : void 0), date ? el("span", { "data-date": "" }, date) : void 0);
 }
 
-//#endregion
-//#region src/to-positive-number.ts
+// ../../node_modules/.pnpm/@ocavue+utils@1.11.0/node_modules/@ocavue/utils/dist/index.js
+/**
+* Returns true if the given value is not null or undefined.
+*/
+function isNotNullish(value) {
+	return value != null;
+}
+
+// src/to-positive-number.ts
 /**
 * The value rounded to an integer, or nothing unless it is a finite number
 * above zero.
@@ -47,8 +53,7 @@ function toPositiveNumber(value) {
 	if (typeof value === "number" && Number.isFinite(value) && value > 0) return Math.round(value);
 }
 
-//#endregion
-//#region src/x/sort-video-sources.ts
+// src/x/sort-video-sources.ts
 /**
 * Orders the sources the way a `<video>` should try them: it plays the first
 * `<source>` it supports, so MP4 files come before HLS playlists (which only
@@ -61,8 +66,7 @@ function sortVideoSources(sources) {
 	});
 }
 
-//#endregion
-//#region src/x/render-media.ts
+// src/x/render-media.ts
 function getSizeAttrs(media) {
 	return {
 		width: toPositiveNumber(media.width),
@@ -97,13 +101,13 @@ function getDisplayable(media, protocols) {
 			url
 		} : void 0;
 	}
-	const sources = sortVideoSources(media.sources.flatMap((source) => {
+	const sources = sortVideoSources(media.sources.map((source) => {
 		const url = getSafeMediaUrl(source.url, protocols);
-		return url ? [{
+		return url ? {
 			...source,
 			url
-		}] : [];
-	}));
+		} : null;
+	}).filter(isNotNullish));
 	if (sources.length === 0) return;
 	const poster = media.poster && getSafeMediaUrl(media.poster, protocols);
 	return {
@@ -231,8 +235,7 @@ function renderMedia(media, protocols, permalink) {
 	}));
 }
 
-//#endregion
-//#region src/x/render-shared.ts
+// src/x/render-shared.ts
 function getPermalink(post) {
 	return /^\w{1,15}$/.test(post.author.handle) && /^\d+$/.test(post.id) ? `https://x.com/${post.author.handle}/status/${post.id}` : void 0;
 }
@@ -257,8 +260,7 @@ function renderDate(post) {
 	}).format(date)), getPermalink(post));
 }
 
-//#endregion
-//#region src/x/render-post.ts
+// src/x/render-post.ts
 function renderBody(post) {
 	const permalink = getPermalink(post);
 	return el("p", {
@@ -287,10 +289,9 @@ function renderPost(post, protocols = null) {
 	return el("article", {}, el("div", { "data-content": "" }, renderAuthor(post.author, protocols, renderDate(post)), reply ? el("div", { "data-reply-to": "" }, renderLink(`Replying to @${reply.handle}`, replyUrl)) : void 0, renderBody(post), renderMedia(post.media, protocols, getPermalink(post)), post.quote ? renderQuoted(post.quote, protocols) : void 0, renderEdit(post)), el("details", { "data-show-more": "" }, el("summary", {})));
 }
 
-//#endregion
-//#region src/x/x-post.ts
+// src/x/x-post.ts
 /** @internal */
-function useXPost(host, props) {
+function setupXPost(host, props) {
 	const { fetched, pending } = useFetch(host, props, "X post");
 	useEffect(host, () => {
 		host.dataset.meowdownEmbed = "x";
@@ -315,7 +316,7 @@ function renderFallback(pending, url) {
 		"data-pending": ""
 	} : { "data-fallback": "" }, el("header", { "data-author": "" }, el("bdi", {}, "X post")), el("p", { "data-body": "" }, pending ? "Loading this post…" : "This post is unavailable."), pending ? null : el("footer", { "data-footer": "" }, permalink ? renderLink("View on X", permalink) : "No saved post could be displayed."));
 }
-const XPost = defineCustomElement(useXPost, defineProps({
+const XPost = defineCustomElement(setupXPost, defineProps({
 	data: {
 		default: null,
 		attribute: false
@@ -334,11 +335,9 @@ const XPost = defineCustomElement(useXPost, defineProps({
 	}
 }));
 
-//#endregion
-//#region src/x/register.ts
+// src/x/register.ts
 function registerXPost(name = "meowdown-embed-x") {
 	registerCustomElement(name, class extends XPost {});
 }
 
-//#endregion
-export { X_POST_MEDIA_CLICK, registerXPost, useXPost };
+export { X_POST_MEDIA_CLICK, registerXPost, setupXPost, setupXPost as useXPost };

package/dist/x/theme.css

@@ -51,6 +51,22 @@
   }
 }
 
+@keyframes meowdown-embed-fade {
+  from,
+  to {
+    mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
+    mask-size: 100% calc(var(--_body-limit) - var(--_show-more-height) - 2 * var(--_clip-gutter));
+    mask-repeat: no-repeat;
+  }
+}
+
+@keyframes meowdown-embed-show {
+  from,
+  to {
+    visibility: visible;
+  }
+}
+
 /*
  * Hard reset. `all: revert` rolls every property on every box inside the card
  * back to the user-agent default, so a host rule on `p`, `a`, `img`,
@@ -77,12 +93,13 @@
   --_tint: color-mix(in srgb, currentColor 5%, transparent);
   --_media-height: 7.5rem;
   --_show-more-height: 2rem;
+  --_max-width: 28rem;
 
   display: block;
   /* As wide as the content, between 18rem and 28rem: a short text post stays
    * small, while long text and media fill the full width. */
   width: fit-content;
-  max-width: min(28rem, 100%);
+  max-width: min(var(--_max-width), 100%);
   font: inherit;
   color: var(--meowdown-embed-color, inherit);
   text-decoration-skip-ink: none;
@@ -105,6 +122,11 @@
 [data-meowdown-embed='x'] [data-root] {
   display: block;
   position: relative;
+  /* The host's percentage `max-width` counts as `none` when a shrink-to-fit
+   * parent (an inline-block editor wrapper) measures the card, so long text
+   * would widen that parent to its own limit. A fixed cap here keeps the
+   * card's intrinsic width at 28rem. */
+  max-width: var(--_max-width);
   color: var(--meowdown-embed-color, inherit);
   background: var(--meowdown-embed-background, transparent);
   border: 1px solid var(--_hairline);
@@ -210,6 +232,9 @@
    * when the card is too tall. Then the article gives up one row, which the
    * "Show more" toggle takes, so the whole card is exactly the limit. The
    * toggle is anchored to the card's padding box, out of the article's clip.
+   * The fade and the toggle run their own animations on the article's named
+   * timeline, which update on every scroll in every engine. Firefox applies
+   * a `style()` query on an animated value only after a full restyle.
    * Browsers without scroll-driven animations show the whole card. */
   & > article {
     /* Room inside the clip for focus rings at the article's edges. */
@@ -258,6 +283,7 @@
       margin-block-end: calc(var(--_overflowing) * var(--_show-more-height) - var(--_clip-gutter));
       animation: meowdown-embed-overflowing linear both;
       animation-timeline: scroll(self);
+      scroll-timeline: --meowdown-embed-clip block;
     }
     /* Opened, or holding keyboard focus that the clip could hide. */
     & > article:has(> [data-show-more][open]),
@@ -266,21 +292,20 @@
       overflow: visible;
       margin-block-end: calc(-1 * var(--_clip-gutter));
     }
-    @container style(--_overflowing: 1) {
-      /* On the content, not the article: a mask on the article would also
-       * hide the toggle below it. */
-      & > article > [data-content] {
-        mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
-        mask-size: 100%
-          calc(var(--_body-limit) - var(--_show-more-height) - 2 * var(--_clip-gutter));
-        mask-repeat: no-repeat;
-      }
-      & > article > [data-show-more] {
-        display: block;
-        position: absolute;
-        inset-inline-start: var(--meowdown-embed-padding, 1rem);
-        bottom: var(--meowdown-embed-padding, 1rem);
-      }
+    /* On the content, not the article: a mask on the article would also
+     * hide the toggle below it. */
+    & > article > [data-content] {
+      animation: meowdown-embed-fade linear both;
+      animation-timeline: --meowdown-embed-clip;
+    }
+    & > article > [data-show-more] {
+      display: block;
+      position: absolute;
+      inset-inline-start: var(--meowdown-embed-padding, 1rem);
+      bottom: var(--meowdown-embed-padding, 1rem);
+      visibility: hidden;
+      animation: meowdown-embed-show linear both;
+      animation-timeline: --meowdown-embed-clip;
     }
     /* Opened, "Show less" sticks to the bottom of the scrollport until the
      * card's end scrolls into view. */
@@ -288,6 +313,7 @@
       display: block;
       position: sticky;
       bottom: 0.75rem;
+      visibility: visible;
       z-index: 1;
       width: fit-content;
       margin: 0.5rem auto 0;

package/dist/youtube/index.d.ts

@@ -1,7 +1,6 @@
-import { n as Resolver, t as FetchProps } from "../fetch-Djnul03u.js";
+import { n as Resolver, t as FetchProps } from "../fetch-gxdhOZP6.js";
 import { HostElement, State } from "@aria-ui/core";
 import { YouTubeVideo } from "@post-embed/types";
-//#region src/youtube/video-click.d.ts
 export declare const YOUTUBE_VIDEO_CLICK = "meowdown-embed-youtube-click";
 interface YouTubeVideoClickDetail {
   /**
@@ -28,8 +27,6 @@ interface YouTubeVideoClickDetail {
   element: HTMLElement;
 }
 type YouTubeVideoClickEvent = CustomEvent<YouTubeVideoClickDetail>;
-//#endregion
-//#region src/youtube/youtube-video.d.ts
 interface YouTubeVideoProps extends FetchProps<YouTubeVideo> {
   /**
    * `link` (default) opens the watch page; `inline` swaps in the YouTube
@@ -39,12 +36,8 @@ interface YouTubeVideoProps extends FetchProps<YouTubeVideo> {
 }
 interface YouTubeVideoElement extends HTMLElement, YouTubeVideoProps {}
 /** @internal */
-export declare function useYouTubeVideo(host: HostElement, props: State<YouTubeVideoProps>): void;
-//#endregion
-//#region src/youtube/register.d.ts
+export declare function setupYouTubeVideo(host: HostElement, props: State<YouTubeVideoProps>): void;
 export declare function registerYouTubeVideo(name?: string): void;
-//#endregion
-//#region src/youtube/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
     'meowdown-embed-youtube': YouTubeVideoElement;
@@ -53,5 +46,4 @@ declare global {
     'meowdown-embed-youtube-click': YouTubeVideoClickEvent;
   }
 }
-//#endregion
-export type { Resolver, YouTubeVideoClickDetail, YouTubeVideoClickEvent, YouTubeVideoElement, YouTubeVideoProps };
+export { type Resolver, type YouTubeVideoClickDetail, type YouTubeVideoClickEvent, type YouTubeVideoElement, type YouTubeVideoProps, setupYouTubeVideo as useYouTubeVideo };

package/dist/youtube/index.js

@@ -1,9 +1,9 @@
-import { a as useFetch, i as getSafeUrl, n as getRootContainer, r as renderLink, t as isPlainClick } from "../is-plain-click-QDpLdFP7.js";
+import { a as useFetch, i as getSafeUrl, n as getRootContainer, r as renderLink, t as isPlainClick } from "../is-plain-click-Dbydr3nX.js";
 import { defineCustomElement, defineProps, registerCustomElement, useEffect } from "@aria-ui/core";
 import { parseYouTubeVideo } from "@post-embed/schema";
 import el from "crelt";
 
-//#region src/youtube/parse-url.ts
+// src/youtube/parse-url.ts
 const YOUTUBE_HOSTS = /^(?:www\.|m\.)?(?:youtube\.com|youtube-nocookie\.com)$/i;
 const YOUTU_BE_HOST = /^(?:www\.)?youtu\.be$/i;
 const VIDEO_ID = /^[\w-]{11}$/;
@@ -56,8 +56,7 @@ function getEmbedUrl(ref) {
 	return `https://www.youtube-nocookie.com/embed/${ref.videoId}?${params}`;
 }
 
-//#endregion
-//#region src/youtube/video-click.ts
+// src/youtube/video-click.ts
 const YOUTUBE_VIDEO_CLICK = "meowdown-embed-youtube-click";
 /**
 * Returns false when a listener called `preventDefault()`: the host plays the
@@ -72,8 +71,7 @@ function dispatchVideoClick(target, detail) {
 	}));
 }
 
-//#endregion
-//#region src/youtube/render-video.ts
+// src/youtube/render-video.ts
 function renderFrame(ref, title) {
 	return el("iframe", {
 		src: getEmbedUrl(ref),
@@ -144,10 +142,9 @@ function renderVideo(video, ref, playback) {
 	}, title), video.author_name ? renderLink(el("span", { "data-author": "" }, video.author_name), video.author_url) : void 0));
 }
 
-//#endregion
-//#region src/youtube/youtube-video.ts
+// src/youtube/youtube-video.ts
 /** @internal */
-function useYouTubeVideo(host, props) {
+function setupYouTubeVideo(host, props) {
 	const { fetched, pending } = useFetch(host, props, "YouTube video");
 	useEffect(host, () => {
 		host.dataset.meowdownEmbed = "youtube";
@@ -166,7 +163,7 @@ function renderFallback(pending) {
 		"data-pending": ""
 	} : { "data-fallback": "" }, el("div", { "data-details": "" }, el("span", { "data-title": "" }, "YouTube video")), el("p", { "data-body": "" }, pending ? "Loading this video…" : "This video is unavailable."), pending ? null : el("footer", { "data-footer": "" }, "No saved video could be displayed."));
 }
-const YouTubeVideoCustomElement = defineCustomElement(useYouTubeVideo, defineProps({
+const YouTubeVideoCustomElement = defineCustomElement(setupYouTubeVideo, defineProps({
 	data: {
 		default: null,
 		attribute: false
@@ -186,11 +183,9 @@ const YouTubeVideoCustomElement = defineCustomElement(useYouTubeVideo, definePro
 	}
 }));
 
-//#endregion
-//#region src/youtube/register.ts
+// src/youtube/register.ts
 function registerYouTubeVideo(name = "meowdown-embed-youtube") {
 	registerCustomElement(name, class extends YouTubeVideoCustomElement {});
 }
 
-//#endregion
-export { YOUTUBE_VIDEO_CLICK, registerYouTubeVideo, useYouTubeVideo };
+export { YOUTUBE_VIDEO_CLICK, registerYouTubeVideo, setupYouTubeVideo, setupYouTubeVideo as useYouTubeVideo };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/embed",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -31,10 +31,10 @@
   "devDependencies": {
     "@meowdown/vitest": "0.0.0",
     "@ocavue/tsconfig": "^0.7.1",
-    "@ocavue/utils": "^1.8.0",
-    "@vitest/browser-playwright": "^5.0.1",
-    "tsdown": "^0.23.0",
-    "vitest": "^5.0.1"
+    "@ocavue/utils": "^1.11.0",
+    "@vitest/browser-playwright": "^5.0.5",
+    "tsdown": "^0.23.3",
+    "vitest": "^5.0.5"
   },
   "publishConfig": {
     "access": "public"