@djangocfg/ui-tools 2.1.157 → 2.1.159
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/README.md +164 -3
- package/dist/{Mermaid.client-KMNEPBQJ.cjs → Mermaid.client-2TAFAXPW.cjs} +100 -143
- package/dist/Mermaid.client-2TAFAXPW.cjs.map +1 -0
- package/dist/{Mermaid.client-3WPNJ4DF.mjs → Mermaid.client-HG24D5KB.mjs} +100 -143
- package/dist/Mermaid.client-HG24D5KB.mjs.map +1 -0
- package/dist/index.cjs +4 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.mjs +4 -9
- package/dist/index.mjs.map +1 -1
- package/package.json +11 -6
- package/src/tools/Mermaid/Mermaid.client.tsx +40 -56
- package/src/tools/Mermaid/Mermaid.story.tsx +195 -110
- package/src/tools/Mermaid/builders/FlowDiagram/FlowDiagram.ts +96 -0
- package/src/tools/Mermaid/builders/FlowDiagram/functions/getEdges.ts +50 -0
- package/src/tools/Mermaid/builders/FlowDiagram/functions/getNodes.ts +43 -0
- package/src/tools/Mermaid/builders/FlowDiagram/functions/getStyles.ts +90 -0
- package/src/tools/Mermaid/builders/FlowDiagram/functions/index.ts +8 -0
- package/src/tools/Mermaid/builders/FlowDiagram/index.ts +16 -0
- package/src/tools/Mermaid/builders/FlowDiagram/types.ts +130 -0
- package/src/tools/Mermaid/builders/JourneyDiagram/JourneyDiagram.ts +88 -0
- package/src/tools/Mermaid/builders/JourneyDiagram/index.ts +12 -0
- package/src/tools/Mermaid/builders/JourneyDiagram/types.ts +48 -0
- package/src/tools/Mermaid/builders/SequenceDiagram/SequenceDiagram.ts +123 -0
- package/src/tools/Mermaid/builders/SequenceDiagram/functions/getActivations.ts +30 -0
- package/src/tools/Mermaid/builders/SequenceDiagram/functions/getBlocks.ts +112 -0
- package/src/tools/Mermaid/builders/SequenceDiagram/functions/getMessages.ts +85 -0
- package/src/tools/Mermaid/builders/SequenceDiagram/functions/getNotes.ts +94 -0
- package/src/tools/Mermaid/builders/SequenceDiagram/functions/index.ts +16 -0
- package/src/tools/Mermaid/builders/SequenceDiagram/index.ts +17 -0
- package/src/tools/Mermaid/builders/SequenceDiagram/types.ts +147 -0
- package/src/tools/Mermaid/builders/core/DiagramStore.ts +138 -0
- package/src/tools/Mermaid/builders/core/index.ts +8 -0
- package/src/tools/Mermaid/builders/core/sanitize.ts +78 -0
- package/src/tools/Mermaid/builders/core/theme.ts +42 -0
- package/src/tools/Mermaid/builders/core/types.ts +183 -0
- package/src/tools/Mermaid/builders/index.ts +96 -0
- package/src/tools/Mermaid/components/MermaidFullscreenModal.tsx +78 -54
- package/src/tools/Mermaid/index.tsx +51 -12
- package/dist/Mermaid.client-3WPNJ4DF.mjs.map +0 -1
- package/dist/Mermaid.client-KMNEPBQJ.cjs.map +0 -1
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { __name } from './chunk-CGILA3WO.mjs';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { ZoomOut, RotateCcw, ZoomIn, Maximize2, X } from 'lucide-react';
|
|
3
|
+
import { Button } from '@djangocfg/ui-core/components';
|
|
4
4
|
import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
|
|
5
|
+
import { useState, useRef, useEffect, useCallback } from 'react';
|
|
5
6
|
import { createPortal } from 'react-dom';
|
|
7
|
+
import { useControls, TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
|
|
6
8
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
7
9
|
import mermaid from 'mermaid';
|
|
8
10
|
|
|
@@ -18,73 +20,24 @@ var applyMermaidTextColors = /* @__PURE__ */ __name((container, textColor) => {
|
|
|
18
20
|
});
|
|
19
21
|
}
|
|
20
22
|
}, "applyMermaidTextColors");
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const handleCopy = /* @__PURE__ */ __name(async () => {
|
|
28
|
-
await navigator.clipboard.writeText(chart);
|
|
29
|
-
setCopied(true);
|
|
30
|
-
setTimeout(() => setCopied(false), 2e3);
|
|
31
|
-
}, "handleCopy");
|
|
32
|
-
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
|
|
33
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4", children: [
|
|
34
|
-
/* @__PURE__ */ jsxs("div", { className: "flex", children: [
|
|
35
|
-
/* @__PURE__ */ jsxs(
|
|
36
|
-
"button",
|
|
37
|
-
{
|
|
38
|
-
onClick: () => setActiveTab("preview"),
|
|
39
|
-
className: `px-4 py-3 text-sm font-medium transition-colors relative ${activeTab === "preview" ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
|
|
40
|
-
children: [
|
|
41
|
-
"Preview",
|
|
42
|
-
activeTab === "preview" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary" })
|
|
43
|
-
]
|
|
44
|
-
}
|
|
45
|
-
),
|
|
46
|
-
/* @__PURE__ */ jsxs(
|
|
47
|
-
"button",
|
|
48
|
-
{
|
|
49
|
-
onClick: () => setActiveTab("code"),
|
|
50
|
-
className: `px-4 py-3 text-sm font-medium transition-colors relative ${activeTab === "code" ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
|
|
51
|
-
children: [
|
|
52
|
-
"Code",
|
|
53
|
-
activeTab === "code" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-primary" })
|
|
54
|
-
]
|
|
55
|
-
}
|
|
56
|
-
)
|
|
57
|
-
] }),
|
|
58
|
-
activeTab === "code" && /* @__PURE__ */ jsx(
|
|
59
|
-
"button",
|
|
60
|
-
{
|
|
61
|
-
onClick: handleCopy,
|
|
62
|
-
className: "flex items-center gap-2 px-3 py-1.5 text-xs font-medium bg-primary/10 hover:bg-primary/20 text-primary rounded transition-colors",
|
|
63
|
-
children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
64
|
-
/* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
|
|
65
|
-
"Copied!"
|
|
66
|
-
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
67
|
-
/* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
|
|
68
|
-
"Copy"
|
|
69
|
-
] })
|
|
70
|
-
}
|
|
71
|
-
)
|
|
72
|
-
] }),
|
|
73
|
-
/* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: activeTab === "preview" ? /* @__PURE__ */ jsx("div", { className: "p-6 flex items-center justify-center min-h-full", children: renderPreview() }) : /* @__PURE__ */ jsx("pre", { className: "p-6 text-sm font-mono text-foreground bg-muted/30 h-full overflow-auto", children: /* @__PURE__ */ jsx("code", { children: chart }) }) })
|
|
23
|
+
function ZoomControls() {
|
|
24
|
+
const { zoomIn, zoomOut, resetTransform } = useControls();
|
|
25
|
+
return /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10", children: [
|
|
26
|
+
/* @__PURE__ */ jsx(Button, { variant: "secondary", size: "icon", onClick: () => zoomOut(), children: /* @__PURE__ */ jsx(ZoomOut, { className: "h-4 w-4" }) }),
|
|
27
|
+
/* @__PURE__ */ jsx(Button, { variant: "secondary", size: "icon", onClick: () => resetTransform(), children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" }) }),
|
|
28
|
+
/* @__PURE__ */ jsx(Button, { variant: "secondary", size: "icon", onClick: () => zoomIn(), children: /* @__PURE__ */ jsx(ZoomIn, { className: "h-4 w-4" }) })
|
|
74
29
|
] });
|
|
75
|
-
}
|
|
30
|
+
}
|
|
31
|
+
__name(ZoomControls, "ZoomControls");
|
|
76
32
|
var MermaidFullscreenModal = /* @__PURE__ */ __name(({
|
|
77
33
|
isOpen,
|
|
78
34
|
svgContent,
|
|
79
35
|
isVertical,
|
|
80
36
|
theme,
|
|
81
|
-
chart,
|
|
82
37
|
fullscreenRef,
|
|
83
38
|
onClose,
|
|
84
39
|
onBackdropClick
|
|
85
40
|
}) => {
|
|
86
|
-
const t = useTypedT();
|
|
87
|
-
const diagramTitle = useMemo(() => t("tools.diagram.title"), [t]);
|
|
88
41
|
useEffect(() => {
|
|
89
42
|
if (isOpen && fullscreenRef.current) {
|
|
90
43
|
const getCSSVariable = /* @__PURE__ */ __name((variable) => {
|
|
@@ -94,52 +47,75 @@ var MermaidFullscreenModal = /* @__PURE__ */ __name(({
|
|
|
94
47
|
}, "getCSSVariable");
|
|
95
48
|
const textColor = theme === "dark" ? getCSSVariable("--foreground") || "hsl(0 0% 90%)" : getCSSVariable("--foreground") || "hsl(222.2 84% 4.9%)";
|
|
96
49
|
applyMermaidTextColors(fullscreenRef.current, textColor);
|
|
97
|
-
const svgElement = fullscreenRef.current.querySelector("svg");
|
|
98
|
-
if (svgElement) {
|
|
99
|
-
svgElement.style.display = "block";
|
|
100
|
-
svgElement.style.height = "auto";
|
|
101
|
-
svgElement.style.maxWidth = "100%";
|
|
102
|
-
if (isVertical) {
|
|
103
|
-
svgElement.style.maxWidth = "600px";
|
|
104
|
-
svgElement.style.margin = "0 auto";
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
50
|
}
|
|
108
|
-
}, [isOpen, theme, isVertical, fullscreenRef]);
|
|
51
|
+
}, [isOpen, theme, isVertical, fullscreenRef, svgContent]);
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
if (!isOpen) return;
|
|
54
|
+
const handleKeyDown = /* @__PURE__ */ __name((e) => {
|
|
55
|
+
if (e.key === "Escape") onClose();
|
|
56
|
+
}, "handleKeyDown");
|
|
57
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
58
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
59
|
+
}, [isOpen, onClose]);
|
|
109
60
|
if (!isOpen || typeof document === "undefined") return null;
|
|
110
61
|
return createPortal(
|
|
111
|
-
/* @__PURE__ */
|
|
62
|
+
/* @__PURE__ */ jsxs(
|
|
112
63
|
"div",
|
|
113
64
|
{
|
|
114
|
-
className: "fixed inset-0 z-9999
|
|
115
|
-
style: { backgroundColor: "rgb(0 0 0 / 0.75)" },
|
|
65
|
+
className: "fixed inset-0 z-9999 bg-background/95 backdrop-blur-sm",
|
|
116
66
|
onClick: onBackdropClick,
|
|
117
|
-
children:
|
|
118
|
-
/* @__PURE__ */
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
"
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
MermaidCodeViewer,
|
|
67
|
+
children: [
|
|
68
|
+
/* @__PURE__ */ jsx(
|
|
69
|
+
Button,
|
|
70
|
+
{
|
|
71
|
+
variant: "ghost",
|
|
72
|
+
size: "icon",
|
|
73
|
+
className: "absolute top-4 right-4 z-10",
|
|
74
|
+
onClick: onClose,
|
|
75
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
|
|
76
|
+
}
|
|
77
|
+
),
|
|
78
|
+
/* @__PURE__ */ jsxs(
|
|
79
|
+
TransformWrapper,
|
|
131
80
|
{
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
81
|
+
initialScale: 1,
|
|
82
|
+
minScale: 0.1,
|
|
83
|
+
maxScale: 10,
|
|
84
|
+
centerOnInit: true,
|
|
85
|
+
wheel: { step: 0.1 },
|
|
86
|
+
pinch: { step: 5 },
|
|
87
|
+
doubleClick: { mode: "reset" },
|
|
88
|
+
children: [
|
|
89
|
+
/* @__PURE__ */ jsx(ZoomControls, {}),
|
|
90
|
+
/* @__PURE__ */ jsx(
|
|
91
|
+
TransformComponent,
|
|
92
|
+
{
|
|
93
|
+
wrapperStyle: {
|
|
94
|
+
width: "100%",
|
|
95
|
+
height: "100%"
|
|
96
|
+
},
|
|
97
|
+
contentStyle: {
|
|
98
|
+
width: "100%",
|
|
99
|
+
height: "100%",
|
|
100
|
+
display: "flex",
|
|
101
|
+
alignItems: "center",
|
|
102
|
+
justifyContent: "center"
|
|
103
|
+
},
|
|
104
|
+
children: /* @__PURE__ */ jsx(
|
|
105
|
+
"div",
|
|
106
|
+
{
|
|
107
|
+
ref: fullscreenRef,
|
|
108
|
+
className: "p-8",
|
|
109
|
+
dangerouslySetInnerHTML: { __html: svgContent },
|
|
110
|
+
onClick: (e) => e.stopPropagation()
|
|
111
|
+
}
|
|
112
|
+
)
|
|
113
|
+
}
|
|
114
|
+
)
|
|
115
|
+
]
|
|
140
116
|
}
|
|
141
|
-
)
|
|
142
|
-
]
|
|
117
|
+
)
|
|
118
|
+
]
|
|
143
119
|
}
|
|
144
120
|
),
|
|
145
121
|
document.body
|
|
@@ -409,14 +385,13 @@ function useMermaidRenderer({ chart, theme, isCompact = false }) {
|
|
|
409
385
|
};
|
|
410
386
|
}
|
|
411
387
|
__name(useMermaidRenderer, "useMermaidRenderer");
|
|
412
|
-
var Mermaid = /* @__PURE__ */ __name(({
|
|
413
|
-
|
|
388
|
+
var Mermaid = /* @__PURE__ */ __name(({
|
|
389
|
+
chart,
|
|
390
|
+
className = "",
|
|
391
|
+
isCompact = false,
|
|
392
|
+
fullscreen = true
|
|
393
|
+
}) => {
|
|
414
394
|
const theme = useResolvedTheme();
|
|
415
|
-
const labels = useMemo(() => ({
|
|
416
|
-
title: t("tools.diagram.title"),
|
|
417
|
-
clickToView: t("tools.diagram.clickToView"),
|
|
418
|
-
loading: t("ui.form.loading")
|
|
419
|
-
}), [t]);
|
|
420
395
|
const { mermaidRef, svgContent, isVertical, isRendering } = useMermaidRenderer({
|
|
421
396
|
chart,
|
|
422
397
|
theme,
|
|
@@ -429,13 +404,14 @@ var Mermaid = /* @__PURE__ */ __name(({ chart, className = "", isCompact = false
|
|
|
429
404
|
closeFullscreen,
|
|
430
405
|
handleBackdropClick
|
|
431
406
|
} = useMermaidFullscreen();
|
|
432
|
-
const
|
|
433
|
-
|
|
407
|
+
const handleOpenFullscreen = /* @__PURE__ */ __name((e) => {
|
|
408
|
+
e.stopPropagation();
|
|
409
|
+
if (svgContent) {
|
|
434
410
|
openFullscreen();
|
|
435
411
|
}
|
|
436
|
-
}, "
|
|
437
|
-
|
|
438
|
-
|
|
412
|
+
}, "handleOpenFullscreen");
|
|
413
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
414
|
+
/* @__PURE__ */ jsxs("div", { className: `relative ${className}`, children: [
|
|
439
415
|
/* @__PURE__ */ jsx(
|
|
440
416
|
"div",
|
|
441
417
|
{
|
|
@@ -444,38 +420,19 @@ var Mermaid = /* @__PURE__ */ __name(({ chart, className = "", isCompact = false
|
|
|
444
420
|
style: { isolation: "isolate" }
|
|
445
421
|
}
|
|
446
422
|
),
|
|
447
|
-
isRendering && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-primary" }) })
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
] }),
|
|
461
|
-
/* @__PURE__ */ jsxs("div", { className: "relative p-4 overflow-hidden", children: [
|
|
462
|
-
/* @__PURE__ */ jsx(
|
|
463
|
-
"div",
|
|
464
|
-
{
|
|
465
|
-
ref: mermaidRef,
|
|
466
|
-
className: "flex justify-center items-center min-h-[200px]",
|
|
467
|
-
style: { isolation: "isolate" }
|
|
468
|
-
}
|
|
469
|
-
),
|
|
470
|
-
isRendering && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
|
|
471
|
-
/* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary" }),
|
|
472
|
-
/* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.loading })
|
|
473
|
-
] }) })
|
|
474
|
-
] })
|
|
475
|
-
]
|
|
476
|
-
}
|
|
477
|
-
),
|
|
478
|
-
/* @__PURE__ */ jsx(
|
|
423
|
+
isRendering && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-primary" }) }),
|
|
424
|
+
fullscreen && svgContent && !isRendering && /* @__PURE__ */ jsx(
|
|
425
|
+
Button,
|
|
426
|
+
{
|
|
427
|
+
variant: "secondary",
|
|
428
|
+
size: "icon",
|
|
429
|
+
className: "absolute bottom-2 right-2 h-8 w-8 opacity-60 hover:opacity-100 transition-opacity",
|
|
430
|
+
onClick: handleOpenFullscreen,
|
|
431
|
+
children: /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" })
|
|
432
|
+
}
|
|
433
|
+
)
|
|
434
|
+
] }),
|
|
435
|
+
fullscreen && /* @__PURE__ */ jsx(
|
|
479
436
|
MermaidFullscreenModal,
|
|
480
437
|
{
|
|
481
438
|
isOpen: isFullscreen,
|
|
@@ -493,5 +450,5 @@ var Mermaid = /* @__PURE__ */ __name(({ chart, className = "", isCompact = false
|
|
|
493
450
|
var Mermaid_client_default = Mermaid;
|
|
494
451
|
|
|
495
452
|
export { Mermaid_client_default as default };
|
|
496
|
-
//# sourceMappingURL=Mermaid.client-
|
|
497
|
-
//# sourceMappingURL=Mermaid.client-
|
|
453
|
+
//# sourceMappingURL=Mermaid.client-HG24D5KB.mjs.map
|
|
454
|
+
//# sourceMappingURL=Mermaid.client-HG24D5KB.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tools/Mermaid/utils/mermaid-helpers.ts","../src/tools/Mermaid/components/MermaidFullscreenModal.tsx","../src/tools/Mermaid/hooks/useMermaidFullscreen.ts","../src/tools/Mermaid/hooks/useMermaidCleanup.ts","../src/tools/Mermaid/hooks/useMermaidValidation.ts","../src/tools/Mermaid/hooks/useMermaidRenderer.ts","../src/tools/Mermaid/Mermaid.client.tsx"],"names":["useEffect","useCallback","applyMermaidTextColors","useRef","useState","jsxs","jsx","Button"],"mappings":"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","file":"Mermaid.client-HG24D5KB.mjs","sourcesContent":["/**\n * Helper utilities for Mermaid diagram rendering\n */\n\n// Utility function to apply text colors to Mermaid SVG\nexport const applyMermaidTextColors = (container: HTMLElement, textColor: string) => {\n const svgElement = container.querySelector('svg');\n if (svgElement) {\n // SVG text elements use 'fill'\n svgElement.querySelectorAll('text').forEach((el) => {\n (el as SVGElement).style.fill = textColor;\n });\n\n // HTML elements inside foreignObject use 'color'\n svgElement.querySelectorAll('.nodeLabel, .edgeLabel').forEach((el) => {\n (el as HTMLElement).style.color = textColor;\n });\n }\n};\n\n// Detect if diagram is vertical (tall and narrow)\nexport const isVerticalDiagram = (svgElement: SVGSVGElement): boolean => {\n const viewBox = svgElement.getAttribute('viewBox');\n if (viewBox) {\n const [, , width, height] = viewBox.split(' ').map(Number);\n return height > width * 1.5;\n }\n const bbox = svgElement.getBBox?.();\n if (bbox) {\n return bbox.height > bbox.width * 1.5;\n }\n return false;\n};\n","'use client';\n\nimport React, { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { X, ZoomIn, ZoomOut, RotateCcw } from 'lucide-react';\nimport { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch';\n\nimport { Button } from '@djangocfg/ui-core/components';\nimport { applyMermaidTextColors } from '../utils/mermaid-helpers';\n\ninterface MermaidFullscreenModalProps {\n isOpen: boolean;\n svgContent: string;\n isVertical: boolean;\n theme: string;\n chart: string;\n fullscreenRef: React.RefObject<HTMLDivElement | null>;\n onClose: () => void;\n onBackdropClick: (e: React.MouseEvent) => void;\n}\n\n// Zoom controls component\nfunction ZoomControls() {\n const { zoomIn, zoomOut, resetTransform } = useControls();\n\n return (\n <div className=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10\">\n <Button variant=\"secondary\" size=\"icon\" onClick={() => zoomOut()}>\n <ZoomOut className=\"h-4 w-4\" />\n </Button>\n <Button variant=\"secondary\" size=\"icon\" onClick={() => resetTransform()}>\n <RotateCcw className=\"h-4 w-4\" />\n </Button>\n <Button variant=\"secondary\" size=\"icon\" onClick={() => zoomIn()}>\n <ZoomIn className=\"h-4 w-4\" />\n </Button>\n </div>\n );\n}\n\nexport const MermaidFullscreenModal: React.FC<MermaidFullscreenModalProps> = ({\n isOpen,\n svgContent,\n isVertical,\n theme,\n fullscreenRef,\n onClose,\n onBackdropClick,\n}) => {\n // Apply text colors\n useEffect(() => {\n if (isOpen && fullscreenRef.current) {\n const getCSSVariable = (variable: string) => {\n if (typeof document === 'undefined') return '';\n const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();\n return value ? `hsl(${value})` : '';\n };\n\n const textColor = theme === 'dark'\n ? getCSSVariable('--foreground') || 'hsl(0 0% 90%)'\n : getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)';\n\n applyMermaidTextColors(fullscreenRef.current, textColor);\n }\n }, [isOpen, theme, isVertical, fullscreenRef, svgContent]);\n\n // Handle escape key\n useEffect(() => {\n if (!isOpen) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') onClose();\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [isOpen, onClose]);\n\n if (!isOpen || typeof document === 'undefined') return null;\n\n return createPortal(\n <div\n className=\"fixed inset-0 z-9999 bg-background/95 backdrop-blur-sm\"\n onClick={onBackdropClick}\n >\n {/* Close button */}\n <Button\n variant=\"ghost\"\n size=\"icon\"\n className=\"absolute top-4 right-4 z-10\"\n onClick={onClose}\n >\n <X className=\"h-5 w-5\" />\n </Button>\n\n {/* Zoomable diagram */}\n <TransformWrapper\n initialScale={1}\n minScale={0.1}\n maxScale={10}\n centerOnInit\n wheel={{ step: 0.1 }}\n pinch={{ step: 5 }}\n doubleClick={{ mode: 'reset' }}\n >\n <ZoomControls />\n <TransformComponent\n wrapperStyle={{\n width: '100%',\n height: '100%',\n }}\n contentStyle={{\n width: '100%',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <div\n ref={fullscreenRef}\n className=\"p-8\"\n dangerouslySetInnerHTML={{ __html: svgContent }}\n onClick={(e) => e.stopPropagation()}\n />\n </TransformComponent>\n </TransformWrapper>\n </div>,\n document.body\n );\n};\n","/**\n * Hook for managing Mermaid fullscreen modal\n */\n\nimport { useEffect, useRef, useState } from 'react';\n\nexport function useMermaidFullscreen() {\n const [isFullscreen, setIsFullscreen] = useState(false);\n const fullscreenRef = useRef<HTMLDivElement>(null);\n\n const openFullscreen = () => setIsFullscreen(true);\n const closeFullscreen = () => setIsFullscreen(false);\n\n const handleBackdropClick = (e: React.MouseEvent) => {\n if (e.target === e.currentTarget) {\n closeFullscreen();\n }\n };\n\n // Handle ESC key\n useEffect(() => {\n const handleEscKey = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isFullscreen) {\n closeFullscreen();\n }\n };\n\n if (isFullscreen) {\n document.addEventListener('keydown', handleEscKey);\n document.body.style.overflow = 'hidden';\n }\n\n return () => {\n document.removeEventListener('keydown', handleEscKey);\n document.body.style.overflow = 'unset';\n };\n }, [isFullscreen]);\n\n return {\n isFullscreen,\n fullscreenRef,\n openFullscreen,\n closeFullscreen,\n handleBackdropClick,\n };\n}\n","/**\n * Hook for cleaning up orphaned Mermaid DOM nodes\n */\n\nimport { useCallback, useEffect } from 'react';\n\nexport function useMermaidCleanup() {\n const cleanupMermaidErrors = useCallback(() => {\n if (typeof document === 'undefined') return;\n\n // Remove all orphaned mermaid elements from body\n // Mermaid can append: SVGs, divs with errors, text nodes\n\n // 1. Remove elements with mermaid-* IDs directly in body\n document.querySelectorAll('[id^=\"mermaid-\"]').forEach((node) => {\n if (node.parentNode === document.body) {\n node.remove();\n }\n });\n\n // 2. Remove elements with d prefix (mermaid diagram IDs) directly in body\n document.querySelectorAll('[id^=\"d\"]').forEach((node) => {\n if (node.parentNode === document.body && node.id.match(/^d\\d+$/)) {\n node.remove();\n }\n });\n\n // 3. Remove orphaned SVG elements that mermaid creates in body\n document.querySelectorAll('body > svg').forEach((node) => {\n // Check if it's a mermaid SVG (has mermaid classes or aria-roledescription)\n if (node.getAttribute('aria-roledescription') ||\n node.classList.contains('mermaid') ||\n node.querySelector('.mermaid') ||\n node.id?.includes('mermaid')) {\n node.remove();\n }\n });\n\n // 4. Remove any orphaned error divs with \"Syntax error\" text\n document.querySelectorAll('body > div').forEach((node) => {\n const text = node.textContent || '';\n if (text.includes('Syntax error in text') ||\n text.includes('mermaid version') ||\n node.id?.startsWith('mermaid-') ||\n node.id?.startsWith('d') && node.id.match(/^d\\d+$/)) {\n node.remove();\n }\n });\n\n // 5. Remove orphaned pre elements with error info\n document.querySelectorAll('body > pre').forEach((node) => {\n const text = node.textContent || '';\n if (text.includes('Syntax error') || text.includes('mermaid')) {\n node.remove();\n }\n });\n }, []);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n cleanupMermaidErrors();\n };\n }, [cleanupMermaidErrors]);\n\n // Removed periodic cleanup - it causes unnecessary re-renders\n // Cleanup only happens on unmount now\n\n return { cleanupMermaidErrors };\n}\n","/**\n * Hook for validating Mermaid code completeness\n */\n\nimport { useCallback } from 'react';\n\nexport function useMermaidValidation() {\n const isMermaidCodeComplete = useCallback((code: string): boolean => {\n if (!code || code.trim().length === 0) return false;\n\n const trimmed = code.trim();\n\n // Check if code has basic structure\n const lines = trimmed.split('\\n');\n if (lines.length < 2) return false; // Need at least diagram type + one element\n\n // Check for common incomplete patterns\n const lastLine = lines[lines.length - 1].trim();\n\n // Incomplete if last line ends with arrow without destination\n if (lastLine.match(/-->?\\s*$/)) return false;\n if (lastLine.match(/-->\\|[^|]*\\|\\s*$/)) return false;\n\n // Incomplete if last line ends with opening bracket/parenthesis\n if (lastLine.match(/[\\[({]\\s*$/)) return false;\n\n return true;\n }, []);\n\n return { isMermaidCodeComplete };\n}\n","/**\n * Hook for rendering Mermaid diagrams with debounce and validation\n */\n\nimport mermaid from 'mermaid';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useMermaidCleanup } from './useMermaidCleanup';\nimport { useMermaidValidation } from './useMermaidValidation';\n\ninterface UseMermaidRendererProps {\n chart: string;\n theme: string;\n isCompact?: boolean;\n}\n\ninterface MermaidRenderResult {\n mermaidRef: React.RefObject<HTMLDivElement>;\n svgContent: string;\n isVertical: boolean;\n isRendering: boolean;\n}\n\n// Utility function to apply text colors to Mermaid SVG\nconst applyMermaidTextColors = (container: HTMLElement, textColor: string) => {\n const svgElement = container.querySelector('svg');\n if (svgElement) {\n // SVG text elements use 'fill'\n svgElement.querySelectorAll('text').forEach((el) => {\n (el as SVGElement).style.fill = textColor;\n });\n\n // HTML elements inside foreignObject use 'color'\n svgElement.querySelectorAll('.nodeLabel, .edgeLabel').forEach((el) => {\n (el as HTMLElement).style.color = textColor;\n });\n }\n};\n\n// Detect if diagram is vertical (tall and narrow)\nconst isVerticalDiagram = (svgElement: SVGSVGElement): boolean => {\n const viewBox = svgElement.getAttribute('viewBox');\n if (viewBox) {\n const [, , width, height] = viewBox.split(' ').map(Number);\n return height > width * 1.5;\n }\n const bbox = svgElement.getBBox?.();\n if (bbox) {\n return bbox.height > bbox.width * 1.5;\n }\n return false;\n};\n\nexport function useMermaidRenderer({ chart, theme, isCompact = false }: UseMermaidRendererProps): MermaidRenderResult {\n const mermaidRef = useRef<HTMLDivElement>(null);\n const renderTimerRef = useRef<NodeJS.Timeout | null>(null);\n const [svgContent, setSvgContent] = useState<string>('');\n const [isVertical, setIsVertical] = useState(false);\n const [isRendering, setIsRendering] = useState(false);\n\n const { isMermaidCodeComplete } = useMermaidValidation();\n const { cleanupMermaidErrors } = useMermaidCleanup();\n\n useEffect(() => {\n // Get CSS variables for semantic colors\n const getCSSVariable = (variable: string) => {\n if (typeof document === 'undefined') return '';\n const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();\n if (!value) return '';\n // If value is already a complete color (hex, rgb, hsl with parentheses), return as-is\n if (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl(')) {\n return value;\n }\n // Otherwise assume it's HSL components and wrap in hsl()\n return `hsl(${value})`;\n };\n\n const diagramFontSize = isCompact ? '12px' : '14px';\n\n const themeVariables = theme === 'dark' ? {\n primaryColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',\n primaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',\n primaryBorderColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',\n secondaryColor: getCSSVariable('--muted') || 'hsl(217.2 32.6% 17.5%)',\n secondaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',\n secondaryBorderColor: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',\n tertiaryColor: getCSSVariable('--accent') || 'hsl(217.2 32.6% 20%)',\n tertiaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',\n tertiaryBorderColor: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',\n mainBkg: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',\n textColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',\n nodeBorder: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',\n nodeTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',\n secondBkg: getCSSVariable('--muted') || 'hsl(217.2 32.6% 17.5%)',\n lineColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',\n edgeLabelBackground: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',\n clusterBkg: getCSSVariable('--muted') || 'hsl(217.2 32.6% 12%)',\n clusterBorder: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',\n background: getCSSVariable('--background') || 'hsl(222.2 84% 4.9%)',\n labelBackground: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',\n labelTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',\n errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 62.8% 30.6%)',\n errorTextColor: 'hsl(210 40% 98%)',\n fontSize: diagramFontSize,\n fontFamily: 'Inter, system-ui, sans-serif',\n } : {\n primaryColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',\n primaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',\n primaryBorderColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',\n secondaryColor: getCSSVariable('--secondary') || 'hsl(210 40% 96.1%)',\n secondaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',\n secondaryBorderColor: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',\n tertiaryColor: getCSSVariable('--muted') || 'hsl(210 40% 96.1%)',\n tertiaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',\n tertiaryBorderColor: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',\n mainBkg: getCSSVariable('--card') || 'hsl(0 0% 100%)',\n textColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',\n nodeBorder: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',\n nodeTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',\n secondBkg: getCSSVariable('--muted') || 'hsl(210 40% 96.1%)',\n lineColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',\n edgeLabelBackground: getCSSVariable('--card') || 'hsl(0 0% 100%)',\n clusterBkg: getCSSVariable('--accent') || 'hsl(210 40% 98%)',\n clusterBorder: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',\n background: getCSSVariable('--background') || 'hsl(0 0% 100%)',\n labelBackground: getCSSVariable('--card') || 'hsl(0 0% 100%)',\n labelTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',\n errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 84.2% 60.2%)',\n errorTextColor: 'hsl(210 40% 98%)',\n fontSize: diagramFontSize,\n fontFamily: 'Inter, system-ui, sans-serif',\n };\n\n mermaid.initialize({\n startOnLoad: false,\n theme: 'base',\n securityLevel: 'loose',\n suppressErrorRendering: true, // Prevent mermaid from appending errors to body\n fontFamily: 'Inter, system-ui, sans-serif',\n flowchart: {\n useMaxWidth: true,\n htmlLabels: true,\n curve: 'basis',\n },\n themeVariables,\n });\n\n const renderChart = async () => {\n if (!mermaidRef.current || !chart) return;\n\n // Validate code completeness\n if (!isMermaidCodeComplete(chart)) {\n setIsRendering(true);\n return;\n }\n\n try {\n setIsRendering(true);\n\n // Clear container\n if (mermaidRef.current) {\n mermaidRef.current.innerHTML = '';\n }\n\n const id = `mermaid-${Math.random().toString(36).substring(2, 9)}`;\n const { svg } = await mermaid.render(id, chart);\n\n if (mermaidRef.current) {\n const textColor = theme === 'dark'\n ? getCSSVariable('--foreground') || 'hsl(0 0% 90%)'\n : getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)';\n\n const processedSvg = svg.replace(\n /<svg /,\n `<svg style=\"--mermaid-text-color: ${textColor};\" `\n );\n\n mermaidRef.current.innerHTML = processedSvg;\n setSvgContent(processedSvg);\n\n applyMermaidTextColors(mermaidRef.current, textColor);\n\n const svgElement = mermaidRef.current.querySelector('svg');\n if (svgElement) {\n svgElement.style.maxWidth = '100%';\n svgElement.style.height = 'auto';\n svgElement.style.display = 'block';\n setIsVertical(isVerticalDiagram(svgElement));\n }\n }\n\n setIsRendering(false);\n } catch (error) {\n console.error('Mermaid rendering error:', error);\n setIsRendering(false);\n cleanupMermaidErrors();\n\n if (mermaidRef.current) {\n mermaidRef.current.innerHTML = `\n <div class=\"p-4 text-destructive bg-destructive/10 border border-destructive/20 rounded-sm\">\n <p class=\"font-semibold\">Mermaid Diagram Error</p>\n <p class=\"text-sm\">${error instanceof Error ? error.message : 'Unknown error'}</p>\n </div>\n `;\n }\n }\n };\n\n // Clear previous timer\n if (renderTimerRef.current) {\n clearTimeout(renderTimerRef.current);\n }\n\n // Debounce: wait 500ms after last update\n renderTimerRef.current = setTimeout(() => {\n renderChart();\n }, 500);\n\n return () => {\n if (renderTimerRef.current) {\n clearTimeout(renderTimerRef.current);\n }\n };\n }, [chart, theme, isCompact, isMermaidCodeComplete, cleanupMermaidErrors]);\n\n return {\n mermaidRef,\n svgContent,\n isVertical,\n isRendering,\n };\n}\n","'use client';\n\nimport React from 'react';\nimport { Maximize2 } from 'lucide-react';\n\nimport { Button } from '@djangocfg/ui-core/components';\nimport { useResolvedTheme } from '@djangocfg/ui-core/hooks';\nimport { MermaidFullscreenModal } from './components/MermaidFullscreenModal';\nimport { useMermaidFullscreen } from './hooks/useMermaidFullscreen';\nimport { useMermaidRenderer } from './hooks/useMermaidRenderer';\n\ninterface MermaidProps {\n chart: string;\n className?: string;\n isCompact?: boolean;\n /** Enable click-to-fullscreen functionality (default: true) */\n fullscreen?: boolean;\n}\n\nconst Mermaid: React.FC<MermaidProps> = ({\n chart,\n className = '',\n isCompact = false,\n fullscreen = true,\n}) => {\n const theme = useResolvedTheme();\n\n // Rendering logic\n const { mermaidRef, svgContent, isVertical, isRendering } = useMermaidRenderer({\n chart,\n theme,\n isCompact,\n });\n\n // Fullscreen modal logic (only used if fullscreen prop is true)\n const {\n isFullscreen,\n fullscreenRef,\n openFullscreen,\n closeFullscreen,\n handleBackdropClick,\n } = useMermaidFullscreen();\n\n const handleOpenFullscreen = (e: React.MouseEvent) => {\n e.stopPropagation();\n if (svgContent) {\n openFullscreen();\n }\n };\n\n return (\n <>\n <div className={`relative ${className}`}>\n <div\n ref={mermaidRef}\n className=\"flex justify-center items-center\"\n style={{ isolation: 'isolate' }}\n />\n {isRendering && (\n <div className=\"absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-spin rounded-full h-6 w-6 border-b-2 border-primary\" />\n </div>\n )}\n\n {/* Fullscreen button in bottom-right corner */}\n {fullscreen && svgContent && !isRendering && (\n <Button\n variant=\"secondary\"\n size=\"icon\"\n className=\"absolute bottom-2 right-2 h-8 w-8 opacity-60 hover:opacity-100 transition-opacity\"\n onClick={handleOpenFullscreen}\n >\n <Maximize2 className=\"h-4 w-4\" />\n </Button>\n )}\n </div>\n\n {fullscreen && (\n <MermaidFullscreenModal\n isOpen={isFullscreen}\n svgContent={svgContent}\n isVertical={isVertical}\n theme={theme}\n chart={chart}\n fullscreenRef={fullscreenRef}\n onClose={closeFullscreen}\n onBackdropClick={handleBackdropClick}\n />\n )}\n </>\n );\n};\n\nexport default Mermaid;\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -19,6 +19,7 @@ var ReactMarkdown = require('react-markdown');
|
|
|
19
19
|
var remarkGfm = require('remark-gfm');
|
|
20
20
|
var components = require('@djangocfg/ui-core/components');
|
|
21
21
|
var hooks = require('@djangocfg/ui-core/hooks');
|
|
22
|
+
require('@djangocfg/ui-core/styles/palette');
|
|
22
23
|
|
|
23
24
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
24
25
|
|
|
@@ -207,14 +208,8 @@ function createLazyComponent(loader, options = {}) {
|
|
|
207
208
|
return WrappedComponent;
|
|
208
209
|
}
|
|
209
210
|
chunkWGEGR3DF_cjs.__name(createLazyComponent, "createLazyComponent");
|
|
210
|
-
var MermaidClient = React3.lazy(() => import('./Mermaid.client-
|
|
211
|
-
var LoadingFallback2 = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => /* @__PURE__ */ jsxRuntime.
|
|
212
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b border-border bg-muted/50", children: [
|
|
213
|
-
/* @__PURE__ */ jsxRuntime.jsx("h6", { className: "text-sm font-semibold text-foreground", children: "Diagram" }),
|
|
214
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Loading..." })
|
|
215
|
-
] }),
|
|
216
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary" }) }) })
|
|
217
|
-
] }), "LoadingFallback");
|
|
211
|
+
var MermaidClient = React3.lazy(() => import('./Mermaid.client-2TAFAXPW.cjs'));
|
|
212
|
+
var LoadingFallback2 = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center min-h-[100px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-primary" }) }), "LoadingFallback");
|
|
218
213
|
var Mermaid = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((props) => {
|
|
219
214
|
return /* @__PURE__ */ jsxRuntime.jsx(React3.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingFallback2, {}), children: /* @__PURE__ */ jsxRuntime.jsx(MermaidClient, { ...props }) });
|
|
220
215
|
}, "Mermaid");
|
|
@@ -695,7 +690,7 @@ var LazyMapView = createLazyComponent(
|
|
|
695
690
|
}
|
|
696
691
|
);
|
|
697
692
|
var LazyMermaid = createLazyComponent(
|
|
698
|
-
() => import('./Mermaid.client-
|
|
693
|
+
() => import('./Mermaid.client-2TAFAXPW.cjs'),
|
|
699
694
|
{
|
|
700
695
|
displayName: "LazyMermaid",
|
|
701
696
|
fallback: /* @__PURE__ */ jsxRuntime.jsx(
|