@bendyline/squisq-react 2.11.15 → 2.11.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-LR3AIGDD.js → chunk-4L5MZ5OL.js} +50 -1
- package/dist/{chunk-VUMNXXK4.js → chunk-5JGUJDPD.js} +6 -5
- package/dist/{chunk-P3FJ3YKS.js → chunk-62UYYVCB.js} +3 -3
- package/dist/{chunk-6PUMLLJH.js → chunk-BSDTS72D.js} +2 -2
- package/dist/{chunk-U2FIZWAL.js → chunk-CYXFNHWK.js} +160 -16
- package/dist/{chunk-WHVSQ42V.js → chunk-GFUEFU6X.js} +2 -2
- package/dist/{chunk-WLUZTUNZ.js → chunk-RJ3SNKB7.js} +6 -50
- package/dist/{chunk-7T26IKW2.js → chunk-UD3VI5UB.js} +1 -1
- package/dist/{chunk-KDTKUE53.js → chunk-VZ43ACHC.js} +1 -1
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.js +2 -2
- package/dist/index.js +9 -9
- package/dist/json-view/index.js +4 -4
- package/dist/layers/index.js +3 -3
- package/dist/markdown/index.js +3 -3
- package/dist/page/index.js +6 -6
- package/dist/player/index.js +7 -7
- package/dist/squisq-player.full.global.js +379 -378
- package/dist/squisq-player.global.js +71 -70
- package/dist/standalone-source.js +1 -1
- package/package.json +2 -2
|
@@ -49,10 +49,59 @@ function useMediaUrl(relativePath, basePath) {
|
|
|
49
49
|
return needsProvider ? url : fallback;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
+
// src/mermaid/mermaidRuntime.ts
|
|
53
|
+
import { buildMermaidThemeVariables } from "@bendyline/squisq/schemas";
|
|
54
|
+
import { DEFAULT_THEME } from "@bendyline/squisq/doc";
|
|
55
|
+
var mermaidPromise = null;
|
|
56
|
+
var MERMAID_BASE_CONFIG = {
|
|
57
|
+
startOnLoad: false,
|
|
58
|
+
securityLevel: "strict",
|
|
59
|
+
suppressErrorRendering: true,
|
|
60
|
+
deterministicIds: false,
|
|
61
|
+
logLevel: "error"
|
|
62
|
+
};
|
|
63
|
+
async function loadMermaid() {
|
|
64
|
+
if (!mermaidPromise) {
|
|
65
|
+
mermaidPromise = import("mermaid").then(({ default: mermaid }) => mermaid).catch((error) => {
|
|
66
|
+
mermaidPromise = null;
|
|
67
|
+
throw error;
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
return mermaidPromise;
|
|
71
|
+
}
|
|
72
|
+
function enqueue(run) {
|
|
73
|
+
const host = globalThis;
|
|
74
|
+
const previous = host.__squisqMermaidWorkQueue ?? Promise.resolve();
|
|
75
|
+
const result = previous.then(run, run);
|
|
76
|
+
host.__squisqMermaidWorkQueue = result.then(
|
|
77
|
+
() => void 0,
|
|
78
|
+
() => void 0
|
|
79
|
+
);
|
|
80
|
+
return result;
|
|
81
|
+
}
|
|
82
|
+
function renderMermaidSvg(id, source, container, theme = DEFAULT_THEME) {
|
|
83
|
+
return enqueue(async () => {
|
|
84
|
+
const mermaid = await loadMermaid();
|
|
85
|
+
mermaid.initialize({
|
|
86
|
+
...MERMAID_BASE_CONFIG,
|
|
87
|
+
theme: "base",
|
|
88
|
+
themeVariables: buildMermaidThemeVariables(theme)
|
|
89
|
+
});
|
|
90
|
+
const { svg, diagramType } = await mermaid.render(id, source, container);
|
|
91
|
+
return { svg, diagramType };
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
function mermaidRenderErrorMessage(error) {
|
|
95
|
+
const raw = error instanceof Error ? error.message : String(error);
|
|
96
|
+
return raw.split(/\r?\n/).map((line) => line.trimEnd()).filter(Boolean).slice(0, 6).join("\n") || "Unknown Mermaid rendering error.";
|
|
97
|
+
}
|
|
98
|
+
|
|
52
99
|
export {
|
|
53
100
|
MediaContext,
|
|
54
101
|
ResourcePolicyContext,
|
|
55
102
|
useResourcePolicy,
|
|
56
103
|
useMediaProvider,
|
|
57
|
-
useMediaUrl
|
|
104
|
+
useMediaUrl,
|
|
105
|
+
renderMermaidSvg,
|
|
106
|
+
mermaidRenderErrorMessage
|
|
58
107
|
};
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import {
|
|
2
2
|
BlockRenderer,
|
|
3
3
|
LinearDocView
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-62UYYVCB.js";
|
|
5
5
|
import {
|
|
6
6
|
isCaptureDrivenVideo,
|
|
7
7
|
seekVideoToFrame
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-GFUEFU6X.js";
|
|
9
9
|
import {
|
|
10
10
|
useAudioSync,
|
|
11
11
|
useDocPlayback,
|
|
12
12
|
useMediaSchedule,
|
|
13
13
|
useViewportOrientation
|
|
14
|
-
} from "./chunk-
|
|
14
|
+
} from "./chunk-CYXFNHWK.js";
|
|
15
15
|
import {
|
|
16
16
|
useAutoSurface
|
|
17
17
|
} from "./chunk-TT6ENR6T.js";
|
|
18
18
|
import {
|
|
19
19
|
MarkdownRenderer
|
|
20
|
-
} from "./chunk-
|
|
20
|
+
} from "./chunk-BSDTS72D.js";
|
|
21
21
|
import {
|
|
22
22
|
useMediaProvider,
|
|
23
23
|
useMediaUrl,
|
|
24
24
|
useResourcePolicy
|
|
25
|
-
} from "./chunk-
|
|
25
|
+
} from "./chunk-4L5MZ5OL.js";
|
|
26
26
|
|
|
27
27
|
// src/MediaClipLayer.tsx
|
|
28
28
|
import { useEffect, useRef } from "react";
|
|
@@ -2833,6 +2833,7 @@ function DocPlayerContent({
|
|
|
2833
2833
|
blocks: expandedBlocks,
|
|
2834
2834
|
suppressOutgoingForNextBlock
|
|
2835
2835
|
} = useDocPlayback(doc, currentTime, {
|
|
2836
|
+
basePath,
|
|
2836
2837
|
viewport: activeViewport,
|
|
2837
2838
|
theme: effectiveTheme,
|
|
2838
2839
|
motion: motionProp,
|
|
@@ -9,17 +9,17 @@ import {
|
|
|
9
9
|
TreeLayer,
|
|
10
10
|
VideoLayer,
|
|
11
11
|
getTransitionClass
|
|
12
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-GFUEFU6X.js";
|
|
13
13
|
import {
|
|
14
14
|
useAutoSurface
|
|
15
15
|
} from "./chunk-TT6ENR6T.js";
|
|
16
16
|
import {
|
|
17
17
|
InlineVideoPlayer,
|
|
18
18
|
MarkdownRenderer
|
|
19
|
-
} from "./chunk-
|
|
19
|
+
} from "./chunk-BSDTS72D.js";
|
|
20
20
|
import {
|
|
21
21
|
useMediaUrl
|
|
22
|
-
} from "./chunk-
|
|
22
|
+
} from "./chunk-4L5MZ5OL.js";
|
|
23
23
|
|
|
24
24
|
// src/BlockRenderer.tsx
|
|
25
25
|
import { useId, useLayoutEffect, useRef, useState } from "react";
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
MermaidDiagram
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-RJ3SNKB7.js";
|
|
4
4
|
import {
|
|
5
5
|
useMediaProvider,
|
|
6
6
|
useMediaUrl
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-4L5MZ5OL.js";
|
|
8
8
|
|
|
9
9
|
// src/hooks/FenceRendererContext.tsx
|
|
10
10
|
import { createContext, useContext } from "react";
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
|
+
renderMermaidSvg,
|
|
3
|
+
useMediaProvider,
|
|
2
4
|
useResourcePolicy
|
|
3
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-4L5MZ5OL.js";
|
|
4
6
|
|
|
5
7
|
// src/hooks/useMediaSchedule.ts
|
|
6
8
|
import { useMemo } from "react";
|
|
@@ -475,7 +477,7 @@ function useAudioSync(audioRef, track, basePath = "", enabled = true, mode = "me
|
|
|
475
477
|
}
|
|
476
478
|
|
|
477
479
|
// src/hooks/useDocPlayback.ts
|
|
478
|
-
import { useMemo as
|
|
480
|
+
import { useMemo as useMemo4, useCallback as useCallback2, useRef as useRef2 } from "react";
|
|
479
481
|
import { resolveMotionForDoc } from "@bendyline/squisq/schemas";
|
|
480
482
|
import {
|
|
481
483
|
DEFAULT_THEME,
|
|
@@ -485,11 +487,145 @@ import {
|
|
|
485
487
|
} from "@bendyline/squisq/schemas";
|
|
486
488
|
import {
|
|
487
489
|
expandDocBlocks,
|
|
488
|
-
flattenRenderableBlocks,
|
|
490
|
+
flattenRenderableBlocks as flattenRenderableBlocks2,
|
|
489
491
|
isTemplateBlock,
|
|
490
492
|
resolvePersistentLayers,
|
|
491
493
|
VIEWPORT_PRESETS
|
|
492
494
|
} from "@bendyline/squisq/doc";
|
|
495
|
+
|
|
496
|
+
// src/hooks/useFeatureMediaAspectRatios.ts
|
|
497
|
+
import { useEffect as useEffect2, useMemo as useMemo3, useState as useState2 } from "react";
|
|
498
|
+
import {
|
|
499
|
+
extractImages,
|
|
500
|
+
extractEmbeddedVideos,
|
|
501
|
+
flattenRenderableBlocks
|
|
502
|
+
} from "@bendyline/squisq/doc";
|
|
503
|
+
import { isResourceUrlAllowed as isResourceUrlAllowed2 } from "@bendyline/squisq/markdown";
|
|
504
|
+
var EMPTY_RATIOS = {};
|
|
505
|
+
var ratioCache = /* @__PURE__ */ new Map();
|
|
506
|
+
var diagramSequence = 0;
|
|
507
|
+
function probeAspectRatio(kind, url, report) {
|
|
508
|
+
let element;
|
|
509
|
+
let size;
|
|
510
|
+
if (kind === "image") {
|
|
511
|
+
const image = new Image();
|
|
512
|
+
element = image;
|
|
513
|
+
size = () => [image.naturalWidth, image.naturalHeight];
|
|
514
|
+
} else {
|
|
515
|
+
const video = document.createElement("video");
|
|
516
|
+
video.preload = "metadata";
|
|
517
|
+
video.muted = true;
|
|
518
|
+
element = video;
|
|
519
|
+
size = () => [video.videoWidth, video.videoHeight];
|
|
520
|
+
}
|
|
521
|
+
const event = kind === "image" ? "load" : "loadedmetadata";
|
|
522
|
+
let released = false;
|
|
523
|
+
const cleanup = () => {
|
|
524
|
+
if (released) return;
|
|
525
|
+
released = true;
|
|
526
|
+
clearTimeout(timeout);
|
|
527
|
+
element.removeEventListener(event, loaded);
|
|
528
|
+
element.removeEventListener("error", cleanup);
|
|
529
|
+
element.removeAttribute("src");
|
|
530
|
+
if (element instanceof HTMLVideoElement) element.load();
|
|
531
|
+
};
|
|
532
|
+
const loaded = () => {
|
|
533
|
+
const [width, height] = size();
|
|
534
|
+
if (width > 0 && height > 0) report(width / height);
|
|
535
|
+
cleanup();
|
|
536
|
+
};
|
|
537
|
+
const timeout = setTimeout(cleanup, 8e3);
|
|
538
|
+
element.addEventListener(event, loaded);
|
|
539
|
+
element.addEventListener("error", cleanup);
|
|
540
|
+
element.src = url;
|
|
541
|
+
return cleanup;
|
|
542
|
+
}
|
|
543
|
+
function useFeatureMediaAspectRatios(blocks, basePath, theme) {
|
|
544
|
+
const provider = useMediaProvider();
|
|
545
|
+
const policy = useResourcePolicy();
|
|
546
|
+
const sourceKey = useMemo3(() => {
|
|
547
|
+
const sources = /* @__PURE__ */ new Map();
|
|
548
|
+
for (const block of flattenRenderableBlocks(blocks ?? [])) {
|
|
549
|
+
if (block.summaryLayout !== "feature") continue;
|
|
550
|
+
for (const image of extractImages(block.contents))
|
|
551
|
+
sources.set(image.src, { kind: "image", source: image.src });
|
|
552
|
+
for (const video of extractEmbeddedVideos(block.contents))
|
|
553
|
+
sources.set(video.src, { kind: "video", source: video.src });
|
|
554
|
+
for (const node of block.contents ?? []) {
|
|
555
|
+
if (node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid")
|
|
556
|
+
sources.set(node.value, { kind: "mermaid", source: node.value });
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
return JSON.stringify([...sources.values()]);
|
|
560
|
+
}, [blocks]);
|
|
561
|
+
const scope = useMemo3(
|
|
562
|
+
() => ({ sourceKey, provider, policy, basePath, theme }),
|
|
563
|
+
[sourceKey, provider, policy, basePath, theme]
|
|
564
|
+
);
|
|
565
|
+
const [result, setResult] = useState2();
|
|
566
|
+
useEffect2(() => {
|
|
567
|
+
if (typeof document === "undefined") return;
|
|
568
|
+
let current = true;
|
|
569
|
+
const cleanups = [];
|
|
570
|
+
const ratios = {};
|
|
571
|
+
const report = (source, ratio) => {
|
|
572
|
+
if (!current || !Number.isFinite(ratio) || ratio <= 0) return;
|
|
573
|
+
ratios[source] = ratio;
|
|
574
|
+
setResult({ scope, ratios: { ...ratios } });
|
|
575
|
+
};
|
|
576
|
+
const sources = JSON.parse(sourceKey);
|
|
577
|
+
for (const { kind, source } of sources) {
|
|
578
|
+
if (kind === "mermaid") {
|
|
579
|
+
void renderMermaidSvg(
|
|
580
|
+
`squisq-feature-measure-${++diagramSequence}`,
|
|
581
|
+
source,
|
|
582
|
+
void 0,
|
|
583
|
+
theme
|
|
584
|
+
).then(({ svg }) => {
|
|
585
|
+
if (!current) return;
|
|
586
|
+
const viewBox = new DOMParser().parseFromString(svg, "image/svg+xml").documentElement.getAttribute("viewBox")?.trim().split(/[\s,]+/).map(Number);
|
|
587
|
+
if (viewBox?.length === 4 && viewBox[2] > 0 && viewBox[3] > 0)
|
|
588
|
+
report(source, viewBox[2] / viewBox[3]);
|
|
589
|
+
}).catch(() => {
|
|
590
|
+
});
|
|
591
|
+
continue;
|
|
592
|
+
}
|
|
593
|
+
const resolve = async () => {
|
|
594
|
+
const absolute = /^(?:[a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(source);
|
|
595
|
+
const fallback = absolute ? source : `${basePath.replace(/\/$/, "")}/${source}`;
|
|
596
|
+
let url = fallback;
|
|
597
|
+
if (!absolute && provider) {
|
|
598
|
+
try {
|
|
599
|
+
url = await provider.resolveUrl(source);
|
|
600
|
+
} catch {
|
|
601
|
+
}
|
|
602
|
+
}
|
|
603
|
+
if (!current || !isResourceUrlAllowed2(url, policy)) return;
|
|
604
|
+
const cacheKey = `${kind}:${url}`;
|
|
605
|
+
const cached = ratioCache.get(cacheKey);
|
|
606
|
+
if (cached !== void 0) {
|
|
607
|
+
report(source, cached);
|
|
608
|
+
return;
|
|
609
|
+
}
|
|
610
|
+
cleanups.push(
|
|
611
|
+
probeAspectRatio(kind, url, (ratio) => {
|
|
612
|
+
if (!current) return;
|
|
613
|
+
ratioCache.set(cacheKey, ratio);
|
|
614
|
+
report(source, ratio);
|
|
615
|
+
})
|
|
616
|
+
);
|
|
617
|
+
};
|
|
618
|
+
void resolve();
|
|
619
|
+
}
|
|
620
|
+
return () => {
|
|
621
|
+
current = false;
|
|
622
|
+
cleanups.forEach((cleanup) => cleanup());
|
|
623
|
+
};
|
|
624
|
+
}, [sourceKey, provider, policy, basePath, theme, scope]);
|
|
625
|
+
return result?.scope === scope ? result.ratios : EMPTY_RATIOS;
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
// src/hooks/useDocPlayback.ts
|
|
493
629
|
function useDocPlayback(script, currentTime, options = {}) {
|
|
494
630
|
const {
|
|
495
631
|
viewport = VIEWPORT_PRESETS.landscape,
|
|
@@ -497,14 +633,20 @@ function useDocPlayback(script, currentTime, options = {}) {
|
|
|
497
633
|
onSeek,
|
|
498
634
|
useAudioSegmentTiming = true,
|
|
499
635
|
deterministicTransitions = false,
|
|
500
|
-
motion: motionOverride
|
|
636
|
+
motion: motionOverride,
|
|
637
|
+
basePath = "."
|
|
501
638
|
} = options;
|
|
502
|
-
const
|
|
639
|
+
const mediaAspectRatios = useFeatureMediaAspectRatios(
|
|
640
|
+
script?.blocks,
|
|
641
|
+
basePath,
|
|
642
|
+
theme ?? DEFAULT_THEME
|
|
643
|
+
);
|
|
644
|
+
const blocks = useMemo4(() => {
|
|
503
645
|
if (!script?.blocks) {
|
|
504
646
|
return [];
|
|
505
647
|
}
|
|
506
648
|
const hasChildren = script.blocks.some((b) => b.children && b.children.length > 0);
|
|
507
|
-
const flatBlocks = hasChildren ?
|
|
649
|
+
const flatBlocks = hasChildren ? flattenRenderableBlocks2(script.blocks) : script.blocks;
|
|
508
650
|
const hasTemplates = flatBlocks.some(isTemplateBlock);
|
|
509
651
|
const resolvedTheme = theme ?? DEFAULT_THEME;
|
|
510
652
|
const persistentLayers = resolvePersistentLayers(
|
|
@@ -519,6 +661,7 @@ function useDocPlayback(script, currentTime, options = {}) {
|
|
|
519
661
|
const expanded = expandDocBlocks(flatBlocks, {
|
|
520
662
|
audioSegments,
|
|
521
663
|
viewport,
|
|
664
|
+
mediaAspectRatios,
|
|
522
665
|
persistentLayers,
|
|
523
666
|
theme,
|
|
524
667
|
motion: resolveMotionForDoc(
|
|
@@ -546,24 +689,25 @@ function useDocPlayback(script, currentTime, options = {}) {
|
|
|
546
689
|
script?.motion,
|
|
547
690
|
script?.frontmatter,
|
|
548
691
|
motionOverride,
|
|
692
|
+
mediaAspectRatios,
|
|
549
693
|
viewport,
|
|
550
694
|
theme,
|
|
551
695
|
useAudioSegmentTiming
|
|
552
696
|
]);
|
|
553
|
-
const currentBlock =
|
|
554
|
-
const currentBlockIndex =
|
|
697
|
+
const currentBlock = useMemo4(() => getBlockAtTime(blocks, currentTime), [blocks, currentTime]);
|
|
698
|
+
const currentBlockIndex = useMemo4(
|
|
555
699
|
() => currentBlock ? blocks.indexOf(currentBlock) : -1,
|
|
556
700
|
[blocks, currentBlock]
|
|
557
701
|
);
|
|
558
|
-
const blockTime =
|
|
702
|
+
const blockTime = useMemo4(() => {
|
|
559
703
|
if (!currentBlock) return 0;
|
|
560
704
|
return Math.max(0, currentTime - currentBlock.startTime);
|
|
561
705
|
}, [currentBlock, currentTime]);
|
|
562
|
-
const blockProgress =
|
|
706
|
+
const blockProgress = useMemo4(() => {
|
|
563
707
|
if (!currentBlock || currentBlock.duration === 0) return 0;
|
|
564
708
|
return Math.min(1, blockTime / currentBlock.duration);
|
|
565
709
|
}, [currentBlock, blockTime]);
|
|
566
|
-
const docProgress =
|
|
710
|
+
const docProgress = useMemo4(() => {
|
|
567
711
|
if (!script || script.duration === 0) return 0;
|
|
568
712
|
return Math.min(1, currentTime / script.duration);
|
|
569
713
|
}, [script, currentTime]);
|
|
@@ -630,7 +774,7 @@ function useDocPlayback(script, currentTime, options = {}) {
|
|
|
630
774
|
}
|
|
631
775
|
|
|
632
776
|
// src/hooks/useViewportOrientation.ts
|
|
633
|
-
import { useState as
|
|
777
|
+
import { useState as useState3, useEffect as useEffect3, useMemo as useMemo5 } from "react";
|
|
634
778
|
import {
|
|
635
779
|
VIEWPORT_PRESETS as VIEWPORT_PRESETS2
|
|
636
780
|
} from "@bendyline/squisq/doc";
|
|
@@ -656,11 +800,11 @@ function getViewportForOrientation(orientation) {
|
|
|
656
800
|
}
|
|
657
801
|
}
|
|
658
802
|
function useViewportOrientation() {
|
|
659
|
-
const [windowSize, setWindowSize] =
|
|
803
|
+
const [windowSize, setWindowSize] = useState3(() => ({
|
|
660
804
|
width: typeof window !== "undefined" ? window.innerWidth : 1920,
|
|
661
805
|
height: typeof window !== "undefined" ? window.innerHeight : 1080
|
|
662
806
|
}));
|
|
663
|
-
|
|
807
|
+
useEffect3(() => {
|
|
664
808
|
if (typeof window === "undefined") return;
|
|
665
809
|
const handleResize = () => {
|
|
666
810
|
setWindowSize({
|
|
@@ -679,11 +823,11 @@ function useViewportOrientation() {
|
|
|
679
823
|
clearTimeout(timeoutId);
|
|
680
824
|
};
|
|
681
825
|
}, []);
|
|
682
|
-
const orientation =
|
|
826
|
+
const orientation = useMemo5(
|
|
683
827
|
() => getOrientationFromWindow(windowSize.width, windowSize.height),
|
|
684
828
|
[windowSize.width, windowSize.height]
|
|
685
829
|
);
|
|
686
|
-
const viewport =
|
|
830
|
+
const viewport = useMemo5(() => getViewportForOrientation(orientation), [orientation]);
|
|
687
831
|
return {
|
|
688
832
|
viewport,
|
|
689
833
|
orientation,
|
|
@@ -1,62 +1,18 @@
|
|
|
1
|
+
import {
|
|
2
|
+
mermaidRenderErrorMessage,
|
|
3
|
+
renderMermaidSvg
|
|
4
|
+
} from "./chunk-4L5MZ5OL.js";
|
|
5
|
+
|
|
1
6
|
// src/mermaid/MermaidDiagram.tsx
|
|
2
7
|
import { useEffect, useState } from "react";
|
|
3
|
-
import { DEFAULT_THEME as DEFAULT_THEME2 } from "@bendyline/squisq/doc";
|
|
4
|
-
|
|
5
|
-
// src/mermaid/mermaidRuntime.ts
|
|
6
|
-
import { buildMermaidThemeVariables } from "@bendyline/squisq/schemas";
|
|
7
8
|
import { DEFAULT_THEME } from "@bendyline/squisq/doc";
|
|
8
|
-
var mermaidPromise = null;
|
|
9
|
-
var MERMAID_BASE_CONFIG = {
|
|
10
|
-
startOnLoad: false,
|
|
11
|
-
securityLevel: "strict",
|
|
12
|
-
suppressErrorRendering: true,
|
|
13
|
-
deterministicIds: false,
|
|
14
|
-
logLevel: "error"
|
|
15
|
-
};
|
|
16
|
-
async function loadMermaid() {
|
|
17
|
-
if (!mermaidPromise) {
|
|
18
|
-
mermaidPromise = import("mermaid").then(({ default: mermaid }) => mermaid).catch((error) => {
|
|
19
|
-
mermaidPromise = null;
|
|
20
|
-
throw error;
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
return mermaidPromise;
|
|
24
|
-
}
|
|
25
|
-
function enqueue(run) {
|
|
26
|
-
const host = globalThis;
|
|
27
|
-
const previous = host.__squisqMermaidWorkQueue ?? Promise.resolve();
|
|
28
|
-
const result = previous.then(run, run);
|
|
29
|
-
host.__squisqMermaidWorkQueue = result.then(
|
|
30
|
-
() => void 0,
|
|
31
|
-
() => void 0
|
|
32
|
-
);
|
|
33
|
-
return result;
|
|
34
|
-
}
|
|
35
|
-
function renderMermaidSvg(id, source, container, theme = DEFAULT_THEME) {
|
|
36
|
-
return enqueue(async () => {
|
|
37
|
-
const mermaid = await loadMermaid();
|
|
38
|
-
mermaid.initialize({
|
|
39
|
-
...MERMAID_BASE_CONFIG,
|
|
40
|
-
theme: "base",
|
|
41
|
-
themeVariables: buildMermaidThemeVariables(theme)
|
|
42
|
-
});
|
|
43
|
-
const { svg, diagramType } = await mermaid.render(id, source, container);
|
|
44
|
-
return { svg, diagramType };
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
function mermaidRenderErrorMessage(error) {
|
|
48
|
-
const raw = error instanceof Error ? error.message : String(error);
|
|
49
|
-
return raw.split(/\r?\n/).map((line) => line.trimEnd()).filter(Boolean).slice(0, 6).join("\n") || "Unknown Mermaid rendering error.";
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// src/mermaid/MermaidDiagram.tsx
|
|
53
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
54
10
|
var renderSequence = 0;
|
|
55
11
|
function MermaidDiagram({
|
|
56
12
|
source,
|
|
57
13
|
className,
|
|
58
14
|
ariaLabel = "Mermaid diagram",
|
|
59
|
-
theme =
|
|
15
|
+
theme = DEFAULT_THEME
|
|
60
16
|
}) {
|
|
61
17
|
const [svg, setSvg] = useState("");
|
|
62
18
|
const [error, setError] = useState("");
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -114,6 +114,8 @@ interface PlaybackActions {
|
|
|
114
114
|
suppressOutgoingForNextBlock: (blockId: string) => void;
|
|
115
115
|
}
|
|
116
116
|
interface UseDocPlaybackOptions {
|
|
117
|
+
/** Fallback media root for intrinsic feature metadata. */
|
|
118
|
+
basePath?: string;
|
|
117
119
|
/** Target viewport used to materialize template blocks. */
|
|
118
120
|
viewport?: ViewportConfig;
|
|
119
121
|
/** Active theme used for materialization and transition defaults. */
|
package/dist/hooks/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
useDocPlayback,
|
|
7
7
|
useMediaSchedule,
|
|
8
8
|
useViewportOrientation
|
|
9
|
-
} from "../chunk-
|
|
9
|
+
} from "../chunk-CYXFNHWK.js";
|
|
10
10
|
import {
|
|
11
11
|
useAutoSurface
|
|
12
12
|
} from "../chunk-TT6ENR6T.js";
|
|
@@ -16,7 +16,7 @@ import {
|
|
|
16
16
|
useMediaProvider,
|
|
17
17
|
useMediaUrl,
|
|
18
18
|
useResourcePolicy
|
|
19
|
-
} from "../chunk-
|
|
19
|
+
} from "../chunk-4L5MZ5OL.js";
|
|
20
20
|
export {
|
|
21
21
|
MediaContext,
|
|
22
22
|
ResourcePolicyContext,
|
package/dist/index.js
CHANGED
|
@@ -15,10 +15,10 @@ import {
|
|
|
15
15
|
formatTime,
|
|
16
16
|
resolveDocPlayerAppearance,
|
|
17
17
|
useMediaClipDurations
|
|
18
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-5JGUJDPD.js";
|
|
19
19
|
import {
|
|
20
20
|
PaginatedDocView
|
|
21
|
-
} from "./chunk-
|
|
21
|
+
} from "./chunk-UD3VI5UB.js";
|
|
22
22
|
import {
|
|
23
23
|
BlockRenderer,
|
|
24
24
|
CanvasSection,
|
|
@@ -26,7 +26,7 @@ import {
|
|
|
26
26
|
PageSectionView,
|
|
27
27
|
PageViewContext,
|
|
28
28
|
usePageView
|
|
29
|
-
} from "./chunk-
|
|
29
|
+
} from "./chunk-62UYYVCB.js";
|
|
30
30
|
import {
|
|
31
31
|
ImageLayer,
|
|
32
32
|
MapLayer,
|
|
@@ -39,7 +39,7 @@ import {
|
|
|
39
39
|
VideoLayer,
|
|
40
40
|
getAnimationStyle,
|
|
41
41
|
getTransitionClass
|
|
42
|
-
} from "./chunk-
|
|
42
|
+
} from "./chunk-GFUEFU6X.js";
|
|
43
43
|
import {
|
|
44
44
|
useModalDialog
|
|
45
45
|
} from "./chunk-65POMKHR.js";
|
|
@@ -48,11 +48,11 @@ import {
|
|
|
48
48
|
useDocPlayback,
|
|
49
49
|
useMediaSchedule,
|
|
50
50
|
useViewportOrientation
|
|
51
|
-
} from "./chunk-
|
|
51
|
+
} from "./chunk-CYXFNHWK.js";
|
|
52
52
|
import {
|
|
53
53
|
JsonView,
|
|
54
54
|
createJsonFormFenceRenderer
|
|
55
|
-
} from "./chunk-
|
|
55
|
+
} from "./chunk-VZ43ACHC.js";
|
|
56
56
|
import {
|
|
57
57
|
useAutoSurface
|
|
58
58
|
} from "./chunk-TT6ENR6T.js";
|
|
@@ -64,17 +64,17 @@ import {
|
|
|
64
64
|
MarkdownRenderer,
|
|
65
65
|
useAnimatedImage,
|
|
66
66
|
useFenceRenderers
|
|
67
|
-
} from "./chunk-
|
|
67
|
+
} from "./chunk-BSDTS72D.js";
|
|
68
68
|
import {
|
|
69
69
|
MermaidDiagram
|
|
70
|
-
} from "./chunk-
|
|
70
|
+
} from "./chunk-RJ3SNKB7.js";
|
|
71
71
|
import {
|
|
72
72
|
MediaContext,
|
|
73
73
|
ResourcePolicyContext,
|
|
74
74
|
useMediaProvider,
|
|
75
75
|
useMediaUrl,
|
|
76
76
|
useResourcePolicy
|
|
77
|
-
} from "./chunk-
|
|
77
|
+
} from "./chunk-4L5MZ5OL.js";
|
|
78
78
|
export {
|
|
79
79
|
AnimatedImageControls,
|
|
80
80
|
BlockRenderer,
|
package/dist/json-view/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import {
|
|
2
2
|
JsonView,
|
|
3
3
|
createJsonFormFenceRenderer
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-VZ43ACHC.js";
|
|
5
5
|
import "../chunk-TT6ENR6T.js";
|
|
6
|
-
import "../chunk-
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
6
|
+
import "../chunk-BSDTS72D.js";
|
|
7
|
+
import "../chunk-RJ3SNKB7.js";
|
|
8
|
+
import "../chunk-4L5MZ5OL.js";
|
|
9
9
|
export {
|
|
10
10
|
JsonView,
|
|
11
11
|
createJsonFormFenceRenderer
|
package/dist/layers/index.js
CHANGED
|
@@ -8,9 +8,9 @@ import {
|
|
|
8
8
|
TextLayer,
|
|
9
9
|
TreeLayer,
|
|
10
10
|
VideoLayer
|
|
11
|
-
} from "../chunk-
|
|
12
|
-
import "../chunk-
|
|
13
|
-
import "../chunk-
|
|
11
|
+
} from "../chunk-GFUEFU6X.js";
|
|
12
|
+
import "../chunk-RJ3SNKB7.js";
|
|
13
|
+
import "../chunk-4L5MZ5OL.js";
|
|
14
14
|
export {
|
|
15
15
|
ImageLayer,
|
|
16
16
|
MapLayer,
|
package/dist/markdown/index.js
CHANGED
|
@@ -2,11 +2,11 @@ import {
|
|
|
2
2
|
FenceRendererContext,
|
|
3
3
|
MarkdownRenderer,
|
|
4
4
|
useFenceRenderers
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-BSDTS72D.js";
|
|
6
6
|
import {
|
|
7
7
|
MermaidDiagram
|
|
8
|
-
} from "../chunk-
|
|
9
|
-
import "../chunk-
|
|
8
|
+
} from "../chunk-RJ3SNKB7.js";
|
|
9
|
+
import "../chunk-4L5MZ5OL.js";
|
|
10
10
|
export {
|
|
11
11
|
FenceRendererContext,
|
|
12
12
|
MarkdownRenderer,
|
package/dist/page/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import {
|
|
2
2
|
PaginatedDocView
|
|
3
|
-
} from "../chunk-
|
|
3
|
+
} from "../chunk-UD3VI5UB.js";
|
|
4
4
|
import {
|
|
5
5
|
CanvasSection,
|
|
6
6
|
LinearDocView,
|
|
7
7
|
PageSectionView,
|
|
8
8
|
PageViewContext,
|
|
9
9
|
usePageView
|
|
10
|
-
} from "../chunk-
|
|
11
|
-
import "../chunk-
|
|
10
|
+
} from "../chunk-62UYYVCB.js";
|
|
11
|
+
import "../chunk-GFUEFU6X.js";
|
|
12
12
|
import "../chunk-TT6ENR6T.js";
|
|
13
|
-
import "../chunk-
|
|
14
|
-
import "../chunk-
|
|
15
|
-
import "../chunk-
|
|
13
|
+
import "../chunk-BSDTS72D.js";
|
|
14
|
+
import "../chunk-RJ3SNKB7.js";
|
|
15
|
+
import "../chunk-4L5MZ5OL.js";
|
|
16
16
|
export {
|
|
17
17
|
CanvasSection,
|
|
18
18
|
LinearDocView,
|