@bendyline/squisq-react 2.4.4 → 2.4.6

package/NOTICE.md

@@ -6,12 +6,13 @@ Third-party components remain under their respective license terms.
 
 ## Runtime, peer, and bundled dependencies
 
-| Package            | Version              | License | Repository                            |
-| ------------------ | -------------------- | ------- | ------------------------------------- |
-| mermaid            | 11.16.0              | MIT     | https://github.com/mermaid-js/mermaid |
-| preact _(bundled)_ | 10.29.0              | MIT     | https://github.com/preactjs/preact    |
-| react _(peer)_     | ^18.0.0 \|\| ^19.0.0 | MIT     | https://github.com/facebook/react     |
-| react-dom _(peer)_ | ^18.0.0 \|\| ^19.0.0 | MIT     | https://github.com/facebook/react     |
+| Package                       | Version              | License                       | Repository                                  |
+| ----------------------------- | -------------------- | ----------------------------- | ------------------------------------------- |
+| @fortawesome/fontawesome-free | 7.2.0                | CC-BY-4.0 AND OFL-1.1 AND MIT | https://github.com/FortAwesome/Font-Awesome |
+| mermaid                       | 11.16.0              | MIT                           | https://github.com/mermaid-js/mermaid       |
+| preact _(bundled)_            | 10.29.0              | MIT                           | https://github.com/preactjs/preact          |
+| react _(peer)_                | ^18.0.0 \|\| ^19.0.0 | MIT                           | https://github.com/facebook/react           |
+| react-dom _(peer)_            | ^18.0.0 \|\| ^19.0.0 | MIT                           | https://github.com/facebook/react           |
 
 Mermaid is Copyright (c) 2014-2022 Knut Sveidqvist and is distributed under
 the MIT License. Preact is used by the standalone browser bundles. Exact

package/README.md

@@ -91,9 +91,10 @@ useDocPlayback(doc, currentTime, { viewport, theme, onSeek });
 
 ## Standalone Player
 
-A self-contained global build is available for non-React environments. It
-exposes a `SquisqPlayer` global with `mount`, `getHandle`, `unmount`, and
-`version`. `mount` returns an instance handle.
+A global build is available for non-React environments. It exposes a
+`SquisqPlayer` global with `mount`, `getHandle`, `unmount`, and `version`.
+`mount` returns an instance handle. Load the package stylesheet alongside the
+raw global build so authored Font Awesome icons can use the shared webfonts.
 
 The default build is the light player and omits Mermaid's multi-megabyte parser
 and layout engines. Documents that contain Mermaid fences should use the full
@@ -108,6 +109,7 @@ top-level `window.seekTo` / `window.getDuration` properties.
 Interactive mount:
 
 ```html
+<link rel="stylesheet" href="https://unpkg.com/@bendyline/squisq-react/dist/styles/index.css" />
 <script src="https://unpkg.com/@bendyline/squisq-react/dist/squisq-player.global.js"></script>
 <div id="player"></div>
 <script>
@@ -138,12 +140,13 @@ content. Embedded video, timed media, captions, audio, and document timing stay
 active; this makes the option suitable for compact MP4 and animated-GIF export.
 
 For build-time embedding, `@bendyline/squisq-react/standalone-source` exports
-the same bundle as a string constant (`PLAYER_BUNDLE`) — used by
-`@bendyline/squisq-formats` and the CLI to produce single-file HTML exports.
+the player as a self-contained string constant (`PLAYER_BUNDLE`) with the
+shared icon styles composed once. It is used by `@bendyline/squisq-formats`
+and the CLI to produce single-file HTML and rendered video exports.
 
 ## Styles
 
-Import the animation CSS for block transitions:
+Import the package CSS for block transitions and Font Awesome inline icons:
 
 ```ts
 import '@bendyline/squisq-react/styles';

package/dist/{chunk-AKPXDG4E.js → chunk-7CDO336T.js}

@@ -1,7 +1,7 @@
 import {
   BlockRenderer,
   LinearDocView
-} from "./chunk-EJMUO6VX.js";
+} from "./chunk-ICM7AWQT.js";
 import {
   useAudioSync,
   useDocPlayback,
@@ -1545,6 +1545,14 @@ var VIDEO_TIME_TOLERANCE_SECONDS = 0.01;
 function formatMediaTime(time) {
   return Number.isFinite(time) ? `${time.toFixed(3)}s` : String(time);
 }
+function reachableMediaTime(video, targetTime) {
+  const duration = video.duration;
+  if (!Number.isFinite(duration)) return targetTime;
+  return Math.max(0, Math.min(targetTime, duration));
+}
+function isAtReachableMediaTime(video, targetTime) {
+  return Math.abs(video.currentTime - reachableMediaTime(video, targetTime)) <= VIDEO_TIME_TOLERANCE_SECONDS;
+}
 function isVisiblyPresented(video) {
   if (!video.isConnected) return false;
   const view = video.ownerDocument.defaultView;
@@ -1559,7 +1567,7 @@ function isVisiblyPresented(video) {
 }
 function seekVideoToFrame(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIMEOUT_MS) {
   video.pause();
-  const alreadyReady = !video.seeking && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && Math.abs(video.currentTime - targetTime) <= VIDEO_TIME_TOLERANCE_SECONDS;
+  const alreadyReady = !video.seeking && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && isAtReachableMediaTime(video, targetTime);
   if (alreadyReady) return Promise.resolve();
   return new Promise((resolve, reject) => {
     let settled = false;
@@ -1586,12 +1594,12 @@ function seekVideoToFrame(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIM
       cleanup();
       reject(
         new Error(
-          `Video frame did not become ready at ${formatMediaTime(targetTime)} within ${timeoutMs}ms (currentTime=${formatMediaTime(video.currentTime)}, readyState=${video.readyState}, seeking=${String(video.seeking)}, visible=${String(isVisiblyPresented(video))}).`
+          `Video frame did not become ready at ${formatMediaTime(targetTime)} within ${timeoutMs}ms (currentTime=${formatMediaTime(video.currentTime)}, reachableTime=${formatMediaTime(reachableMediaTime(video, targetTime))}, duration=${formatMediaTime(video.duration)}, readyState=${video.readyState}, seeking=${String(video.seeking)}, visible=${String(isVisiblyPresented(video))}).`
         )
       );
     };
     const requestPresentedFrame = () => {
-      if (settled || video.seeking || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA || Math.abs(video.currentTime - targetTime) > VIDEO_TIME_TOLERANCE_SECONDS) {
+      if (settled || video.seeking || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA || !isAtReachableMediaTime(video, targetTime)) {
         return;
       }
       if (typeof video.requestVideoFrameCallback !== "function" || !isVisiblyPresented(video)) {
@@ -1613,7 +1621,7 @@ function seekVideoToFrame(video, targetTime, timeoutMs = DEFAULT_VIDEO_FRAME_TIM
     video.addEventListener("loadeddata", handleMediaReady);
     video.addEventListener("canplay", handleMediaReady);
     try {
-      video.currentTime = targetTime;
+      video.currentTime = reachableMediaTime(video, targetTime);
       queueMicrotask(requestPresentedFrame);
     } catch (error) {
       settled = true;

package/dist/{chunk-NANF7REM.js → chunk-DJRYQQXB.js}

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

package/dist/{chunk-EJMUO6VX.js → chunk-ICM7AWQT.js}

@@ -16,7 +16,7 @@ import {
 import {
   InlineVideoPlayer,
   MarkdownRenderer
-} from "./chunk-D7KN4CRG.js";
+} from "./chunk-VMPQEUJH.js";
 import {
   useMediaUrl
 } from "./chunk-LR3AIGDD.js";

package/dist/{chunk-D7KN4CRG.js → chunk-VMPQEUJH.js}

@@ -103,6 +103,16 @@ function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
         return /* @__PURE__ */ jsx3("br", {}, key);
       case "inlineMath":
         return /* @__PURE__ */ jsx3("code", { className: "squisq-md-inline-math", children: node.value }, key);
+      case "inlineIcon":
+        return /* @__PURE__ */ jsx3(
+          "i",
+          {
+            className: `fa-${node.family} fa-${node.name}`,
+            "data-icon": node.token,
+            "aria-hidden": "true"
+          },
+          key
+        );
       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);

package/dist/index.d.ts

@@ -17,8 +17,9 @@ import '@bendyline/squisq/jsonForm';
  * Standalone Entry Point — IIFE bundle for self-contained HTML rendering.
  *
  * This file is the entry point for the standalone `squisq-player.iife.js` bundle.
- * It bundles Preact (via preact/compat), squisq core, and all rendering components
- * into a single self-contained script that can be loaded in any HTML page.
+ * It bundles Preact (via preact/compat), squisq core, rendering components, and
+ * animation CSS. Raw-script consumers load the package stylesheet for shared
+ * icon webfonts; standalone-source and the CLI compose those styles once.
  *
  * The bundle exposes a global `SquisqPlayer` object with methods to mount
  * interactive or static document views into any DOM element.

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   formatTime,
   resolveDocPlayerAppearance,
   useMediaClipDurations
-} from "./chunk-AKPXDG4E.js";
+} from "./chunk-7CDO336T.js";
 import {
   BlockRenderer,
   CanvasSection,
@@ -20,7 +20,7 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "./chunk-EJMUO6VX.js";
+} from "./chunk-ICM7AWQT.js";
 import {
   ImageLayer,
   MapLayer,
@@ -45,7 +45,7 @@ import {
 } from "./chunk-BOZJ655L.js";
 import {
   JsonView
-} from "./chunk-NANF7REM.js";
+} from "./chunk-DJRYQQXB.js";
 import {
   useAutoSurface
 } from "./chunk-TT6ENR6T.js";
@@ -53,7 +53,7 @@ import {
   InlineAudioPlayer,
   InlineVideoPlayer,
   MarkdownRenderer
-} from "./chunk-D7KN4CRG.js";
+} from "./chunk-VMPQEUJH.js";
 import {
   MermaidDiagram
 } from "./chunk-WLUZTUNZ.js";

package/dist/json-view/index.js

@@ -1,8 +1,8 @@
 import {
   JsonView
-} from "../chunk-NANF7REM.js";
+} from "../chunk-DJRYQQXB.js";
 import "../chunk-TT6ENR6T.js";
-import "../chunk-D7KN4CRG.js";
+import "../chunk-VMPQEUJH.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {

package/dist/markdown/index.js

@@ -1,6 +1,6 @@
 import {
   MarkdownRenderer
-} from "../chunk-D7KN4CRG.js";
+} from "../chunk-VMPQEUJH.js";
 import {
   MermaidDiagram
 } from "../chunk-WLUZTUNZ.js";

package/dist/page/index.js

@@ -4,10 +4,10 @@ import {
   PageSectionView,
   PageViewContext,
   usePageView
-} from "../chunk-EJMUO6VX.js";
+} from "../chunk-ICM7AWQT.js";
 import "../chunk-TI5X7SBC.js";
 import "../chunk-TT6ENR6T.js";
-import "../chunk-D7KN4CRG.js";
+import "../chunk-VMPQEUJH.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {

package/dist/player/index.js

@@ -10,17 +10,17 @@ import {
   MediaClipLayer,
   SocialCaptionOverlay,
   formatTime
-} from "../chunk-AKPXDG4E.js";
+} from "../chunk-7CDO336T.js";
 import {
   BlockRenderer
-} from "../chunk-EJMUO6VX.js";
+} from "../chunk-ICM7AWQT.js";
 import "../chunk-TI5X7SBC.js";
 import "../chunk-BOZJ655L.js";
 import "../chunk-TT6ENR6T.js";
 import {
   InlineAudioPlayer,
   InlineVideoPlayer
-} from "../chunk-D7KN4CRG.js";
+} from "../chunk-VMPQEUJH.js";
 import "../chunk-WLUZTUNZ.js";
 import "../chunk-LR3AIGDD.js";
 export {