@bendyline/squisq-react 2.11.6 → 2.11.8

package/README.md

@@ -38,24 +38,25 @@ state rather than crashing.
 
 ## Components
 
-| Component              | Description                                                         |
-| ---------------------- | ------------------------------------------------------------------- |
-| `DocPlayer`            | Main document player with timed playback, audio sync, and controls  |
-| `LinearDocView`        | Scroll-based linear rendering of all blocks                         |
-| `BlockRenderer`        | SVG-based renderer for a single block                               |
-| `MarkdownRenderer`     | Renders Squisq markdown as a visual document                        |
-| `DocPlayerWithSidebar` | DocPlayer with a sidebar navigation panel                           |
-| `CaptionOverlay`       | Timed caption/subtitle overlay                                      |
-| `DocProgressBar`       | Playback progress indicator                                         |
-| `DocControlsOverlay`   | Floating playback controls                                          |
-| `DocControlsBottom`    | Bottom-bar playback controls                                        |
-| `DocControlsSidebar`   | Sidebar navigation controls                                         |
-| `DocControlsSlideshow` | Slideshow-style navigation controls                                 |
-| `SocialCaptionOverlay` | Large centered word-by-word (TikTok/Reels-style) captions           |
-| `InlineVideoPlayer`    | Native `<video>` wrapper resolving `src`/`poster` via MediaContext  |
-| `InlineAudioPlayer`    | Native `<audio>` wrapper resolving `src` via MediaContext           |
-| `MediaClipLayer`       | Hidden `<audio>`/`<video>` elements for timed media clips           |
-| `JsonView`             | Read-only viewer for JSON values bound to a Squisq-annotated schema |
+| Component               | Description                                                         |
+| ----------------------- | ------------------------------------------------------------------- |
+| `DocPlayer`             | Main document player with timed playback, audio sync, and controls  |
+| `LinearDocView`         | Scroll-based linear rendering of all blocks                         |
+| `BlockRenderer`         | SVG-based renderer for a single block                               |
+| `MarkdownRenderer`      | Renders Squisq markdown as a visual document                        |
+| `DocPlayerWithSidebar`  | DocPlayer with a sidebar navigation panel                           |
+| `CaptionOverlay`        | Timed caption/subtitle overlay                                      |
+| `DocProgressBar`        | Playback progress indicator                                         |
+| `DocControlsOverlay`    | Floating playback controls                                          |
+| `DocControlsBottom`     | Bottom-bar playback controls                                        |
+| `DocControlsSidebar`    | Sidebar navigation controls                                         |
+| `DocControlsSlideshow`  | Slideshow-style navigation controls                                 |
+| `SocialCaptionOverlay`  | Large centered word-by-word (TikTok/Reels-style) captions           |
+| `InlineVideoPlayer`     | Native `<video>` wrapper resolving `src`/`poster` via MediaContext  |
+| `InlineAudioPlayer`     | Native `<audio>` wrapper resolving `src` via MediaContext           |
+| `AnimatedImageControls` | Play/pause controls over an animated GIF/WebP/APNG image            |
+| `MediaClipLayer`        | Hidden `<audio>`/`<video>` elements for timed media clips           |
+| `JsonView`              | Read-only viewer for JSON values bound to a Squisq-annotated schema |
 
 ### Fenced-code copy control
 

package/dist/{chunk-ZY5N3JPM.js → chunk-6PUMLLJH.js}

@@ -57,13 +57,198 @@ function InlineAudioPlayer({
   return /* @__PURE__ */ jsx2("span", { className: `squisq-inline-audio-player ${className ?? ""}`.trim(), children: /* @__PURE__ */ jsx2("audio", { src: resolvedSrc, controls, preload }) });
 }
 
+// src/animatedImage/AnimatedImageControls.tsx
+import { useLayoutEffect, useRef } from "react";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var FORMAT_LABELS = { gif: "GIF", webp: "WEBP", png: "APNG" };
+function AnimatedImageControls({ playback, imageRef }) {
+  const canvasRef = useRef(null);
+  const { info, status, displaySrc } = playback;
+  const paused = status === "paused";
+  const animated = info?.animated ?? false;
+  useLayoutEffect(() => {
+    if (!paused || !animated) return;
+    const image = imageRef.current;
+    const canvas = canvasRef.current;
+    if (!image || !canvas) return;
+    const draw = () => {
+      if (!image.naturalWidth || !image.naturalHeight) return;
+      canvas.width = image.naturalWidth;
+      canvas.height = image.naturalHeight;
+      canvas.getContext("2d")?.drawImage(image, 0, 0);
+    };
+    if (image.complete && image.naturalWidth) {
+      draw();
+      return;
+    }
+    image.addEventListener("load", draw, { once: true });
+    return () => image.removeEventListener("load", draw);
+  }, [paused, animated, displaySrc, imageRef]);
+  if (!info || !animated) return null;
+  const label = status === "playing" ? "Pause animation" : status === "ended" ? "Replay animation" : "Play animation";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    paused && /* @__PURE__ */ jsx3(
+      "canvas",
+      {
+        ref: canvasRef,
+        className: "squisq-animated-image-still",
+        "aria-hidden": "true",
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "squisq-animated-image-toggle",
+        "data-status": status,
+        "aria-label": label,
+        title: label,
+        style: { position: "absolute", top: 8, left: 8 },
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          if (status === "playing") playback.pause();
+          else playback.play();
+        },
+        children: [
+          /* @__PURE__ */ jsx3(StatusGlyph, { status }),
+          /* @__PURE__ */ jsx3("span", { className: "squisq-animated-image-format", children: FORMAT_LABELS[info.format] })
+        ]
+      }
+    )
+  ] });
+}
+function StatusGlyph({ status }) {
+  const path = status === "playing" ? "M2.5 1.5h2.75v9H2.5zM6.75 1.5H9.5v9H6.75z" : status === "ended" ? "M6 1.5V0L3.5 2.25 6 4.5V3a3 3 0 1 1-3 3H1.5A4.5 4.5 0 1 0 6 1.5z" : "M3 1.5v9l7.5-4.5z";
+  return /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 12 12", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx3("path", { d: path }) });
+}
+
+// src/animatedImage/useAnimatedImage.ts
+import { useCallback, useEffect, useRef as useRef2, useState } from "react";
+import {
+  inspectAnimatedImage,
+  mayBeAnimatedImage
+} from "@bendyline/squisq/imageEdit";
+var INSPECTION_CACHE_LIMIT = 64;
+var inspections = /* @__PURE__ */ new Map();
+function inspectUrl(url) {
+  const cached = inspections.get(url);
+  if (cached) return cached;
+  const pending = fetch(url).then((response) => response.ok ? response.arrayBuffer() : null).then((buffer) => buffer ? inspectAnimatedImage(buffer) : null).catch(() => null);
+  if (!/^data:/i.test(url)) {
+    inspections.set(url, pending);
+    if (inspections.size > INSPECTION_CACHE_LIMIT) {
+      const oldest = inspections.keys().next().value;
+      if (oldest !== void 0) inspections.delete(oldest);
+    }
+  }
+  return pending;
+}
+function inspectableUrl(url) {
+  if (/^(?:blob|data):/i.test(url)) return url;
+  if (typeof document === "undefined") return null;
+  try {
+    const parsed = new URL(url, document.baseURI);
+    if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return null;
+    return parsed.origin === window.location.origin ? parsed.href : null;
+  } catch {
+    return null;
+  }
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function initialStatus() {
+  return prefersReducedMotion() ? "paused" : "playing";
+}
+function useAnimatedImage(src, resolvedUrl) {
+  const [info, setInfo] = useState(null);
+  const [status, setStatus] = useState(initialStatus);
+  const [replayUrl, setReplayUrl] = useState(null);
+  const [run, setRun] = useState(0);
+  const generationRef = useRef2(0);
+  const replayUrlRef = useRef2(null);
+  const swapReplayUrl = useCallback((next) => {
+    if (replayUrlRef.current) URL.revokeObjectURL(replayUrlRef.current);
+    replayUrlRef.current = next;
+    setReplayUrl(next);
+  }, []);
+  useEffect(() => {
+    setInfo(null);
+    const url = resolvedUrl && mayBeAnimatedImage(src) ? inspectableUrl(resolvedUrl) : null;
+    if (!url) return;
+    let cancelled = false;
+    void inspectUrl(url).then((next) => {
+      if (!cancelled) setInfo(next);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src, resolvedUrl]);
+  useEffect(() => {
+    generationRef.current++;
+    swapReplayUrl(null);
+    setStatus(initialStatus());
+  }, [resolvedUrl, swapReplayUrl]);
+  useEffect(
+    () => () => {
+      if (replayUrlRef.current) URL.revokeObjectURL(replayUrlRef.current);
+    },
+    []
+  );
+  useEffect(() => {
+    if (status !== "playing" || !info?.animated || info.playCount === 0) return;
+    const timer = setTimeout(() => setStatus("ended"), info.durationMs * info.playCount);
+    return () => clearTimeout(timer);
+  }, [status, info, run]);
+  const play = useCallback(() => {
+    const generation = ++generationRef.current;
+    const start = (url) => {
+      if (generation !== generationRef.current) {
+        if (url) URL.revokeObjectURL(url);
+        return;
+      }
+      if (url) swapReplayUrl(url);
+      setStatus("playing");
+      setRun((n) => n + 1);
+    };
+    fetch(replayUrl ?? resolvedUrl).then((response) => response.blob()).then(
+      (blob) => start(URL.createObjectURL(blob)),
+      // Unreadable now: resume the image as it is rather than stay stuck.
+      () => start(null)
+    );
+  }, [replayUrl, resolvedUrl, swapReplayUrl]);
+  const pause = useCallback(() => {
+    generationRef.current++;
+    setStatus("paused");
+  }, []);
+  return {
+    info,
+    animated: info?.animated ?? false,
+    displaySrc: replayUrl ?? resolvedUrl,
+    status,
+    play,
+    pause
+  };
+}
+
 // src/MarkdownRenderer.tsx
-import { Component, Fragment, useEffect, useRef, useState } from "react";
+import { Component, Fragment as Fragment2, useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
+import { mayBeAnimatedImage as mayBeAnimatedImage2 } from "@bendyline/squisq/imageEdit";
 import {
   sanitizeHtmlNodes,
   sanitizeUrl
 } from "@bendyline/squisq/markdown";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var DEFAULT_CTX = { htmlPolicy: "sanitize" };
 var CODE_COPY_LABELS = {
   idle: "Copy",
@@ -86,15 +271,15 @@ function CodeBlock({
   language,
   ctx
 }) {
-  const [status, setStatus] = useState("idle");
-  const resetTimer = useRef();
-  useEffect(
+  const [status, setStatus] = useState2("idle");
+  const resetTimer = useRef3();
+  useEffect2(
     () => () => {
       if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
     },
     []
   );
-  const pre = /* @__PURE__ */ jsx3("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx3("code", { className: language ? `language-${language}` : void 0, children: value }) });
+  const pre = /* @__PURE__ */ jsx4("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx4("code", { className: language ? `language-${language}` : void 0, children: value }) });
   if (!ctx.showCodeCopyButton) return pre;
   const handleCopy = async () => {
     if (status === "copying") return;
@@ -108,9 +293,9 @@ function CodeBlock({
     if (resetTimer.current !== void 0) clearTimeout(resetTimer.current);
     resetTimer.current = setTimeout(() => setStatus("idle"), 1600);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "squisq-md-code-frame", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "squisq-md-code-frame", children: [
     pre,
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -143,7 +328,7 @@ function HostFence({
 }) {
   const renderer = ctx.fenceRenderers?.[lang];
   if (!renderer) return null;
-  return /* @__PURE__ */ jsx3("div", { className: `squisq-md-fence-widget squisq-md-fence-widget-${lang}`, "data-fence-lang": lang, children: renderer({
+  return /* @__PURE__ */ jsx4("div", { className: `squisq-md-fence-widget squisq-md-fence-widget-${lang}`, "data-fence-lang": lang, children: renderer({
     lang,
     ...node.meta != null ? { meta: node.meta } : {},
     value: node.value,
@@ -157,37 +342,37 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
     switch (node.type) {
       case "text": {
         if (!node.value.includes("\n")) {
-          return /* @__PURE__ */ jsx3(Fragment, { children: node.value }, key);
+          return /* @__PURE__ */ jsx4(Fragment2, { children: node.value }, key);
         }
         const parts = node.value.split("\n");
-        return /* @__PURE__ */ jsx3(Fragment, { children: parts.map((part, j) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          j > 0 && /* @__PURE__ */ jsx3("br", {}),
+        return /* @__PURE__ */ jsx4(Fragment2, { children: parts.map((part, j) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          j > 0 && /* @__PURE__ */ jsx4("br", {}),
           part
         ] }, j)) }, key);
       }
       case "emphasis":
-        return /* @__PURE__ */ jsx3("em", { className: "squisq-md-em", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx4("em", { className: "squisq-md-em", children: renderInline(node.children, key, ctx) }, key);
       case "strong":
-        return /* @__PURE__ */ jsx3("strong", { className: "squisq-md-strong", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx4("strong", { className: "squisq-md-strong", children: renderInline(node.children, key, ctx) }, key);
       case "delete":
-        return /* @__PURE__ */ jsx3("del", { className: "squisq-md-del", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx4("del", { className: "squisq-md-del", children: renderInline(node.children, key, ctx) }, key);
       case "superscript":
-        return /* @__PURE__ */ jsx3("sup", { className: "squisq-md-sup", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx4("sup", { className: "squisq-md-sup", children: renderInline(node.children, key, ctx) }, key);
       case "subscript":
-        return /* @__PURE__ */ jsx3("sub", { className: "squisq-md-sub", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx4("sub", { className: "squisq-md-sub", children: renderInline(node.children, key, ctx) }, key);
       case "inlineCode":
-        return /* @__PURE__ */ jsx3("code", { className: "squisq-md-inline-code", children: node.value }, key);
+        return /* @__PURE__ */ jsx4("code", { className: "squisq-md-inline-code", children: node.value }, key);
       case "link": {
         if (ctx.accessoryPaths?.has(node.url)) {
-          return /* @__PURE__ */ jsxs(
+          return /* @__PURE__ */ jsxs2(
             "span",
             {
               className: "squisq-md-attachment",
               "data-attachment-path": node.url,
               title: node.title ?? `Attachment: ${node.url}`,
               children: [
-                /* @__PURE__ */ jsx3("i", { className: "fa-solid fa-paperclip", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx3("span", { className: "squisq-md-attachment-label", children: renderInline(node.children, key, ctx) })
+                /* @__PURE__ */ jsx4("i", { className: "fa-solid fa-paperclip", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx4("span", { className: "squisq-md-attachment-label", children: renderInline(node.children, key, ctx) })
               ]
             },
             key
@@ -195,9 +380,9 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
         }
         const href = sanitizeUrl(node.url, "link", { extraLinkSchemes: ctx.linkSchemes });
         if (!href) {
-          return /* @__PURE__ */ jsx3("span", { className: "squisq-md-link squisq-md-link--blocked", children: renderInline(node.children, key, ctx) }, key);
+          return /* @__PURE__ */ jsx4("span", { className: "squisq-md-link squisq-md-link--blocked", children: renderInline(node.children, key, ctx) }, key);
         }
-        return /* @__PURE__ */ jsx3(
+        return /* @__PURE__ */ jsx4(
           "a",
           {
             className: "squisq-md-link",
@@ -211,13 +396,13 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
         );
       }
       case "image":
-        return /* @__PURE__ */ jsx3(MdImage, { src: node.url, alt: node.alt ?? "", title: node.title ?? void 0 }, key);
+        return /* @__PURE__ */ jsx4(MdImage, { src: node.url, alt: node.alt ?? "", title: node.title ?? void 0 }, key);
       case "break":
-        return /* @__PURE__ */ jsx3("br", {}, key);
+        return /* @__PURE__ */ jsx4("br", {}, key);
       case "inlineMath":
-        return /* @__PURE__ */ jsx3("code", { className: "squisq-md-inline-math", children: node.value }, key);
+        return /* @__PURE__ */ jsx4("code", { className: "squisq-md-inline-math", children: node.value }, key);
       case "inlineIcon":
-        return /* @__PURE__ */ jsx3(
+        return /* @__PURE__ */ jsx4(
           "i",
           {
             className: `fa-${node.family} fa-${node.name}`,
@@ -228,25 +413,25 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
         );
       case "htmlInline":
         if (ctx.htmlPolicy === "strip") return null;
-        return /* @__PURE__ */ jsx3("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
+        return /* @__PURE__ */ jsx4("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
       case "footnoteReference":
-        return /* @__PURE__ */ jsx3("sup", { className: "squisq-md-footnote-ref", children: /* @__PURE__ */ jsxs("a", { href: `#fn-${node.identifier}`, children: [
+        return /* @__PURE__ */ jsx4("sup", { className: "squisq-md-footnote-ref", children: /* @__PURE__ */ jsxs2("a", { href: `#fn-${node.identifier}`, children: [
           "[",
           node.label ?? node.identifier,
           "]"
         ] }) }, key);
       case "linkReference":
-        return /* @__PURE__ */ jsx3("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx4("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key, ctx) }, key);
       case "imageReference":
-        return /* @__PURE__ */ jsxs("span", { className: "squisq-md-image-ref", children: [
+        return /* @__PURE__ */ jsxs2("span", { className: "squisq-md-image-ref", children: [
           "[",
           node.alt ?? node.identifier,
           "]"
         ] }, key);
       case "textDirective":
-        return /* @__PURE__ */ jsx3("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key, ctx) }, key);
+        return /* @__PURE__ */ jsx4("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key, ctx) }, key);
       case "mention":
-        return /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsxs2(
           "span",
           {
             className: "squisq-md-mention mention",
@@ -269,32 +454,32 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
 function renderBlock(node, key, ctx = DEFAULT_CTX) {
   switch (node.type) {
     case "paragraph":
-      return /* @__PURE__ */ jsx3("p", { className: "squisq-md-p", children: renderInline(node.children, key, ctx) }, key);
+      return /* @__PURE__ */ jsx4("p", { className: "squisq-md-p", children: renderInline(node.children, key, ctx) }, key);
     case "heading": {
       const Tag = `h${node.depth}`;
-      return /* @__PURE__ */ jsx3(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key, ctx) }, key);
+      return /* @__PURE__ */ jsx4(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key, ctx) }, key);
     }
     case "blockquote":
-      return /* @__PURE__ */ jsx3("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key, ctx) }, key);
+      return /* @__PURE__ */ jsx4("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key, ctx) }, key);
     case "list":
       if (node.ordered) {
-        return /* @__PURE__ */ jsx3("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
+        return /* @__PURE__ */ jsx4("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
       }
-      return /* @__PURE__ */ jsx3("ul", { className: "squisq-md-list squisq-md-ul", children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
+      return /* @__PURE__ */ jsx4("ul", { className: "squisq-md-list squisq-md-ul", children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
     case "code": {
       const fenceLang = node.lang?.trim().toLowerCase();
       if (fenceLang && ctx.fenceRenderers?.[fenceLang]) {
-        return /* @__PURE__ */ jsx3(
+        return /* @__PURE__ */ jsx4(
           FenceWidgetBoundary,
           {
-            fallback: /* @__PURE__ */ jsx3(CodeBlock, { value: node.value, language: node.lang, ctx }),
-            children: /* @__PURE__ */ jsx3(HostFence, { node, lang: fenceLang, ctx })
+            fallback: /* @__PURE__ */ jsx4(CodeBlock, { value: node.value, language: node.lang, ctx }),
+            children: /* @__PURE__ */ jsx4(HostFence, { node, lang: fenceLang, ctx })
           },
           key
         );
       }
       if (fenceLang === "mermaid") {
-        return /* @__PURE__ */ jsx3(
+        return /* @__PURE__ */ jsx4(
           MermaidDiagram,
           {
             source: node.value,
@@ -305,39 +490,39 @@ function renderBlock(node, key, ctx = DEFAULT_CTX) {
           key
         );
       }
-      return /* @__PURE__ */ jsx3(CodeBlock, { value: node.value, language: node.lang, ctx }, key);
+      return /* @__PURE__ */ jsx4(CodeBlock, { value: node.value, language: node.lang, ctx }, key);
     }
     case "thematicBreak":
-      return /* @__PURE__ */ jsx3("hr", { className: "squisq-md-hr" }, key);
+      return /* @__PURE__ */ jsx4("hr", { className: "squisq-md-hr" }, key);
     case "table":
       return renderTable(node.children, node.align, key, ctx);
     case "htmlBlock":
       if (ctx.htmlPolicy === "strip") return null;
-      return /* @__PURE__ */ jsx3("div", { className: "squisq-md-html-block", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
+      return /* @__PURE__ */ jsx4("div", { className: "squisq-md-html-block", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`, ctx) }, key);
     case "math":
-      return /* @__PURE__ */ jsx3("pre", { className: "squisq-md-math-block", children: /* @__PURE__ */ jsx3("code", { children: node.value }) }, key);
+      return /* @__PURE__ */ jsx4("pre", { className: "squisq-md-math-block", children: /* @__PURE__ */ jsx4("code", { children: node.value }) }, key);
     case "definition":
       return null;
     case "footnoteDefinition":
-      return /* @__PURE__ */ jsxs("div", { className: "squisq-md-footnote-def", id: `fn-${node.identifier}`, children: [
-        /* @__PURE__ */ jsx3("sup", { children: node.label ?? node.identifier }),
+      return /* @__PURE__ */ jsxs2("div", { className: "squisq-md-footnote-def", id: `fn-${node.identifier}`, children: [
+        /* @__PURE__ */ jsx4("sup", { children: node.label ?? node.identifier }),
         renderBlocks(node.children, key, ctx)
       ] }, key);
     case "containerDirective":
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs2(
         "div",
         {
           className: `squisq-md-directive squisq-md-directive-${node.name}`,
           "data-directive": node.name,
           children: [
-            node.label && /* @__PURE__ */ jsx3("div", { className: "squisq-md-directive-label", children: node.label }),
+            node.label && /* @__PURE__ */ jsx4("div", { className: "squisq-md-directive-label", children: node.label }),
             renderBlocks(node.children, key, ctx)
           ]
         },
         key
       );
     case "leafDirective":
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx4(
         "div",
         {
           className: `squisq-md-directive squisq-md-directive-${node.name}`,
@@ -347,11 +532,11 @@ function renderBlock(node, key, ctx = DEFAULT_CTX) {
         key
       );
     case "definitionList":
-      return /* @__PURE__ */ jsx3("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
+      return /* @__PURE__ */ jsx4("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
         if (child.type === "definitionTerm") {
-          return /* @__PURE__ */ jsx3("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`, ctx) }, `${key}dt${i}`);
+          return /* @__PURE__ */ jsx4("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`, ctx) }, `${key}dt${i}`);
         }
-        return /* @__PURE__ */ jsx3("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`, ctx) }, `${key}dd${i}`);
+        return /* @__PURE__ */ jsx4("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`, ctx) }, `${key}dd${i}`);
       }) }, key);
     default:
       return null;
@@ -359,15 +544,15 @@ function renderBlock(node, key, ctx = DEFAULT_CTX) {
 }
 function renderListItem(item, key, ctx = DEFAULT_CTX) {
   const isTask = item.checked !== null && item.checked !== void 0;
-  return /* @__PURE__ */ jsxs("li", { className: `squisq-md-li${isTask ? " squisq-md-task" : ""}`, children: [
-    isTask && /* @__PURE__ */ jsx3("input", { type: "checkbox", checked: !!item.checked, readOnly: true, className: "squisq-md-checkbox" }),
+  return /* @__PURE__ */ jsxs2("li", { className: `squisq-md-li${isTask ? " squisq-md-task" : ""}`, children: [
+    isTask && /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: !!item.checked, readOnly: true, className: "squisq-md-checkbox" }),
     renderBlocks(item.children, key, ctx)
   ] }, key);
 }
 function renderTable(rows, align, key, ctx = DEFAULT_CTX) {
   const [headerRow, ...bodyRows] = rows;
-  return /* @__PURE__ */ jsxs("table", { className: "squisq-md-table", children: [
-    headerRow && /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { children: headerRow.children.map((cell, ci) => /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("table", { className: "squisq-md-table", children: [
+    headerRow && /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsx4("tr", { children: headerRow.children.map((cell, ci) => /* @__PURE__ */ jsx4(
       "th",
       {
         className: "squisq-md-th",
@@ -376,7 +561,7 @@ function renderTable(rows, align, key, ctx = DEFAULT_CTX) {
       },
       `${key}th${ci}`
     )) }) }),
-    bodyRows.length > 0 && /* @__PURE__ */ jsx3("tbody", { children: bodyRows.map((row, ri) => /* @__PURE__ */ jsx3("tr", { children: row.children.map((cell, ci) => /* @__PURE__ */ jsx3(
+    bodyRows.length > 0 && /* @__PURE__ */ jsx4("tbody", { children: bodyRows.map((row, ri) => /* @__PURE__ */ jsx4("tr", { children: row.children.map((cell, ci) => /* @__PURE__ */ jsx4(
       "td",
       {
         className: "squisq-md-td",
@@ -393,8 +578,34 @@ function renderBlocks(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
 function MdImage({ src, alt, title }) {
   const safeSrc = sanitizeUrl(src, "media");
   const resolved = useMediaUrl(safeSrc ?? "", ".");
+  const imageRef = useRef3(null);
+  const playback = useAnimatedImage(safeSrc ?? "", resolved);
   if (!safeSrc) return null;
-  return /* @__PURE__ */ jsx3("img", { className: "squisq-md-image", src: resolved, alt, title });
+  if (!mayBeAnimatedImage2(safeSrc)) {
+    return /* @__PURE__ */ jsx4("img", { className: "squisq-md-image", src: resolved, alt, title });
+  }
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className: "squisq-animated-image",
+      "data-animated": playback.animated ? "true" : void 0,
+      style: { position: "relative", display: "inline-block", maxWidth: "100%" },
+      children: [
+        /* @__PURE__ */ jsx4(
+          "img",
+          {
+            ref: imageRef,
+            className: "squisq-md-image",
+            src: playback.displaySrc,
+            alt,
+            title,
+            style: { display: "block", maxWidth: "100%" }
+          }
+        ),
+        /* @__PURE__ */ jsx4(AnimatedImageControls, { playback, imageRef })
+      ]
+    }
+  );
 }
 function resolveHtmlNodes(nodes, htmlPolicy) {
   if (htmlPolicy === "strip") return [];
@@ -466,7 +677,7 @@ function renderHtmlElement(el, key, ctx) {
   if (tagName === "video") {
     const src = sanitizeUrl(el.attributes.src ?? "", "media") ?? "";
     const poster = sanitizeUrl(el.attributes.poster ?? "", "media") ?? void 0;
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       InlineVideoPlayer,
       {
         src,
@@ -481,7 +692,7 @@ function renderHtmlElement(el, key, ctx) {
   }
   if (tagName === "audio") {
     const src = sanitizeUrl(el.attributes.src ?? "", "media") ?? "";
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       InlineAudioPlayer,
       {
         src,
@@ -494,9 +705,9 @@ function renderHtmlElement(el, key, ctx) {
   const Tag = tagName;
   const props = reactPropsFromAttrs(el.attributes, ctx);
   if (el.selfClosing) {
-    return /* @__PURE__ */ jsx3(Tag, { ...props }, key);
+    return /* @__PURE__ */ jsx4(Tag, { ...props }, key);
   }
-  return /* @__PURE__ */ jsx3(Tag, { ...props, children: renderHtmlNodes(el.children, `${key}c`, ctx) }, key);
+  return /* @__PURE__ */ jsx4(Tag, { ...props, children: renderHtmlNodes(el.children, `${key}c`, ctx) }, key);
 }
 function renderHtmlNodes(nodes, keyPrefix, ctx = DEFAULT_CTX) {
   return nodes.map((node, i) => {
@@ -505,7 +716,7 @@ function renderHtmlNodes(nodes, keyPrefix, ctx = DEFAULT_CTX) {
       case "htmlElement":
         return renderHtmlElement(node, key, ctx);
       case "htmlText":
-        return /* @__PURE__ */ jsx3(Fragment, { children: node.value }, key);
+        return /* @__PURE__ */ jsx4(Fragment2, { children: node.value }, key);
       case "htmlComment":
         return null;
       default:
@@ -527,8 +738,8 @@ function MarkdownRenderer({
 }) {
   const ambientFenceRenderers = useFenceRenderers();
   const mediaProvider = useMediaProvider();
-  const [accessoryPaths, setAccessoryPaths] = useState(NO_ACCESSORY_PATHS);
-  useEffect(() => {
+  const [accessoryPaths, setAccessoryPaths] = useState2(NO_ACCESSORY_PATHS);
+  useEffect2(() => {
     if (!mediaProvider) {
       setAccessoryPaths(clearAccessoryPaths);
       return;
@@ -547,7 +758,7 @@ function MarkdownRenderer({
     };
   }, [mediaProvider]);
   if (!nodes || nodes.length === 0) return null;
-  return /* @__PURE__ */ jsx3("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", {
+  return /* @__PURE__ */ jsx4("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", {
     htmlPolicy,
     linkSchemes,
     theme,
@@ -563,5 +774,7 @@ export {
   useFenceRenderers,
   InlineVideoPlayer,
   InlineAudioPlayer,
+  AnimatedImageControls,
+  useAnimatedImage,
   MarkdownRenderer
 };

package/dist/{chunk-ITQ4K5N6.js → chunk-KDTKUE53.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-TT6ENR6T.js";
 import {
   MarkdownRenderer
-} from "./chunk-ZY5N3JPM.js";
+} from "./chunk-6PUMLLJH.js";
 
 // src/jsonView/useJsonViewTokens.ts
 import { useMemo } from "react";