markdown-flow-ui 0.1.83-beta.1 → 0.1.83-beta.10
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/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/@braintree_sanitize-url@7.1.1/node_modules/@braintree/sanitize-url/dist/index.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-input@1.8.0_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-input/es/BaseInput.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-textarea@1.10.2_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-textarea/es/ResizableTextArea.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-textarea@1.10.2_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-textarea/es/TextArea.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-textarea@1.10.2_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-textarea/es/index.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-flow@0.1.6/node_modules/remark-flow/dist/index.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-flow@0.1.6/node_modules/remark-flow/dist/remark-custom-variable.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/remark-flow@0.1.6/node_modules/remark-flow/dist/remark-interaction.js +1 -1
- package/dist/Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/style-to-object@1.0.11/node_modules/style-to-object/cjs/index.js +1 -1
- package/dist/_virtual/index10.js +2 -2
- package/dist/_virtual/index2.js +2 -5
- package/dist/_virtual/index2.js.map +1 -1
- package/dist/_virtual/index3.js +4 -2
- package/dist/_virtual/index3.js.map +1 -1
- package/dist/_virtual/index4.js +5 -4
- package/dist/_virtual/index4.js.map +1 -1
- package/dist/_virtual/index7.js +2 -2
- package/dist/components/ContentRender/IframeSandbox.d.ts +1 -0
- package/dist/components/ContentRender/IframeSandbox.js +52 -66
- package/dist/components/ContentRender/IframeSandbox.js.map +1 -1
- package/dist/components/ContentRender/SandboxApp.d.ts +0 -1
- package/dist/components/ContentRender/SandboxApp.js +81 -116
- package/dist/components/ContentRender/SandboxApp.js.map +1 -1
- package/dist/components/ContentRender/utils/split-content.d.ts +4 -1
- package/dist/components/ContentRender/utils/split-content.js +56 -25
- package/dist/components/ContentRender/utils/split-content.js.map +1 -1
- package/dist/components/ui/inputGroup/textarea.js +1 -1
- package/dist/markdown-flow-ui-lib.css +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import $ from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/hel
|
|
|
2
2
|
import oe from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/extends.js";
|
|
3
3
|
import r from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/defineProperty.js";
|
|
4
4
|
import te from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/typeof.js";
|
|
5
|
-
import d from "../../../../../../../../../_virtual/
|
|
5
|
+
import d from "../../../../../../../../../_virtual/index4.js";
|
|
6
6
|
import l, { useRef as q, cloneElement as ie } from "react";
|
|
7
7
|
import { hasPrefixSuffix as re, hasAddon as de } from "./utils/commonUtils.js";
|
|
8
8
|
var xe = /* @__PURE__ */ l.forwardRef(function(e, z) {
|
|
@@ -4,7 +4,7 @@ import w from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/hel
|
|
|
4
4
|
import J from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/typeof.js";
|
|
5
5
|
import s from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/slicedToArray.js";
|
|
6
6
|
import K from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js";
|
|
7
|
-
import Q from "../../../../../../../../../_virtual/
|
|
7
|
+
import Q from "../../../../../../../../../_virtual/index4.js";
|
|
8
8
|
import ee from "../../../../rc-resize-observer@1.4.3_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-resize-observer/es/index.js";
|
|
9
9
|
import M from "../../../../rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useLayoutEffect.js";
|
|
10
10
|
import te from "../../../../rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useMergedState.js";
|
|
@@ -4,7 +4,7 @@ import d from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/hel
|
|
|
4
4
|
import Ae from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js";
|
|
5
5
|
import x from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/slicedToArray.js";
|
|
6
6
|
import Fe from "../../../../@babel_runtime@7.28.4/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js";
|
|
7
|
-
import h from "../../../../../../../../../_virtual/
|
|
7
|
+
import h from "../../../../../../../../../_virtual/index4.js";
|
|
8
8
|
import Ne from "../../../../rc-input@1.8.0_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-input/es/BaseInput.js";
|
|
9
9
|
import Te from "../../../../rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useMergedState.js";
|
|
10
10
|
import o, { useRef as Y, useImperativeHandle as $e, useEffect as Ie } from "react";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import t from "./TextArea.js";
|
|
2
|
-
import "../../../../../../../../../_virtual/
|
|
2
|
+
import "../../../../../../../../../_virtual/index4.js";
|
|
3
3
|
import "../../../../rc-resize-observer@1.4.3_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-resize-observer/es/index.js";
|
|
4
4
|
import "../../../../rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useLayoutEffect.js";
|
|
5
5
|
import "react";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as e } from "../../../../../../../../../_virtual/
|
|
1
|
+
import { __exports as e } from "../../../../../../../../../_virtual/index2.js";
|
|
2
2
|
import { __require as _ } from "./remark-custom-variable.js";
|
|
3
3
|
import { __require as m } from "./remark-flow.js";
|
|
4
4
|
import { __require as f } from "./remark-interaction.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __exports as a } from "../../../../../../../../../_virtual/remark-custom-variable.js";
|
|
2
|
-
import g from "../../../../../../../../../_virtual/
|
|
2
|
+
import g from "../../../../../../../../../_virtual/index3.js";
|
|
3
3
|
import { __require as h } from "./interaction-parser.js";
|
|
4
4
|
var m;
|
|
5
5
|
function C() {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __exports as n } from "../../../../../../../../../_virtual/remark-interaction.js";
|
|
2
|
-
import I from "../../../../../../../../../_virtual/
|
|
2
|
+
import I from "../../../../../../../../../_virtual/index3.js";
|
|
3
3
|
import { __require as g } from "./interaction-parser.js";
|
|
4
4
|
var m;
|
|
5
5
|
function k() {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as r } from "../../../../../../../../../_virtual/
|
|
1
|
+
import { __exports as r } from "../../../../../../../../../_virtual/index7.js";
|
|
2
2
|
import { __require as p } from "../../../../inline-style-parser@0.2.4/node_modules/inline-style-parser/index.js";
|
|
3
3
|
var f;
|
|
4
4
|
function q() {
|
package/dist/_virtual/index10.js
CHANGED
package/dist/_virtual/index2.js
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import { __require as s } from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
|
|
3
|
-
var e = s();
|
|
4
|
-
const t = /* @__PURE__ */ r(e);
|
|
1
|
+
var r = {};
|
|
5
2
|
export {
|
|
6
|
-
|
|
3
|
+
r as __exports
|
|
7
4
|
};
|
|
8
5
|
//# sourceMappingURL=index2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/_virtual/index3.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import { getAugmentedNamespace as e } from "./_commonjsHelpers.js";
|
|
2
|
+
import * as r from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/unist-util-visit@5.0.0/node_modules/unist-util-visit/index.js";
|
|
3
|
+
const m = /* @__PURE__ */ e(r);
|
|
2
4
|
export {
|
|
3
|
-
|
|
5
|
+
m as default
|
|
4
6
|
};
|
|
5
7
|
//# sourceMappingURL=index3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
package/dist/_virtual/index4.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
|
|
1
|
+
import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
|
|
2
|
+
import { __require as s } from "../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js";
|
|
3
|
+
var e = s();
|
|
4
|
+
const t = /* @__PURE__ */ r(e);
|
|
4
5
|
export {
|
|
5
|
-
|
|
6
|
+
t as default
|
|
6
7
|
};
|
|
7
8
|
//# sourceMappingURL=index4.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/dist/_virtual/index7.js
CHANGED
|
@@ -1,34 +1,35 @@
|
|
|
1
1
|
import { j as l } from "../../_virtual/jsx-runtime.js";
|
|
2
|
-
import
|
|
3
|
-
import { createRoot as
|
|
4
|
-
import
|
|
5
|
-
import { splitContentSegments as
|
|
6
|
-
import
|
|
7
|
-
const
|
|
8
|
-
content:
|
|
9
|
-
type:
|
|
10
|
-
className:
|
|
2
|
+
import B, { useRef as s, useState as p, useEffect as a } from "react";
|
|
3
|
+
import { createRoot as D } from "react-dom/client";
|
|
4
|
+
import _ from "./SandboxApp.js";
|
|
5
|
+
import { splitContentSegments as P } from "./utils/split-content.js";
|
|
6
|
+
import W from "./ContentRender.js";
|
|
7
|
+
const V = ({
|
|
8
|
+
content: u,
|
|
9
|
+
type: j,
|
|
10
|
+
className: Y,
|
|
11
11
|
loadingText: v,
|
|
12
12
|
styleLoadingText: x,
|
|
13
13
|
scriptLoadingText: R,
|
|
14
|
-
fullScreenButtonText:
|
|
14
|
+
fullScreenButtonText: m,
|
|
15
|
+
hideFullScreen: y = !1,
|
|
15
16
|
mode: c = "content"
|
|
16
17
|
}) => {
|
|
17
|
-
const
|
|
18
|
-
}), [
|
|
19
|
-
const t =
|
|
18
|
+
const C = s(null), i = s(null), f = s(null), w = s(null), d = s(() => {
|
|
19
|
+
}), [, k] = p(480), [E, F] = p(0), [H, M] = p(!1), h = s(""), r = B.useMemo(() => {
|
|
20
|
+
const t = P(u).filter((o) => o.type === "sandbox");
|
|
20
21
|
return (c === "blackboard" ? t[t.length - 1]?.value || "" : t.map((o) => o.value).join(`
|
|
21
22
|
`)) || "";
|
|
22
|
-
}, [
|
|
23
|
+
}, [u, c]);
|
|
23
24
|
a(() => {
|
|
24
25
|
if (c !== "blackboard") {
|
|
25
26
|
h.current = r;
|
|
26
27
|
return;
|
|
27
28
|
}
|
|
28
29
|
const e = h.current;
|
|
29
|
-
!(e && r.startsWith(e)) && e &&
|
|
30
|
+
!(e && r.startsWith(e)) && e && F((n) => n + 1), h.current = r;
|
|
30
31
|
}, [r, c]), a(() => {
|
|
31
|
-
const e =
|
|
32
|
+
const e = i.current;
|
|
32
33
|
if (!e) return;
|
|
33
34
|
const t = e.contentDocument;
|
|
34
35
|
if (!t) return;
|
|
@@ -43,30 +44,32 @@ const U = ({
|
|
|
43
44
|
<body>
|
|
44
45
|
<div id="root"></div>
|
|
45
46
|
</body>
|
|
46
|
-
</html>`), t.close(),
|
|
47
|
+
</html>`), t.close(), w.current = t;
|
|
47
48
|
const n = t.getElementById("root");
|
|
48
49
|
if (!n) return;
|
|
49
|
-
const o =
|
|
50
|
-
|
|
50
|
+
const o = D(n);
|
|
51
|
+
f.current = o;
|
|
51
52
|
const b = () => {
|
|
52
|
-
if (!
|
|
53
|
-
const q = t.body.getBoundingClientRect(), z = t.documentElement?.getBoundingClientRect(),
|
|
54
|
-
|
|
53
|
+
if (!i.current || !t.body) return;
|
|
54
|
+
const q = t.body.getBoundingClientRect(), z = t.documentElement?.getBoundingClientRect(), I = q.height, O = z?.height || 0, S = Math.max(I, O), A = Math.max(200, Math.ceil(S));
|
|
55
|
+
k(A);
|
|
55
56
|
};
|
|
56
|
-
|
|
57
|
+
d.current = b, b();
|
|
57
58
|
const g = new ResizeObserver(() => b());
|
|
58
59
|
return g.observe(t.body), n && g.observe(n), () => {
|
|
59
|
-
g.disconnect(),
|
|
60
|
-
|
|
60
|
+
g.disconnect(), setTimeout(() => {
|
|
61
|
+
o.unmount(), f.current = null, w.current = null, d.current = () => {
|
|
62
|
+
};
|
|
63
|
+
}, 0);
|
|
61
64
|
};
|
|
62
65
|
}, []), a(() => {
|
|
63
66
|
const e = () => {
|
|
64
|
-
|
|
67
|
+
M(!!document.fullscreenElement);
|
|
65
68
|
};
|
|
66
69
|
return document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
|
|
67
70
|
}, []);
|
|
68
|
-
const
|
|
69
|
-
const e =
|
|
71
|
+
const N = () => {
|
|
72
|
+
const e = C.current || i.current;
|
|
70
73
|
if (e) {
|
|
71
74
|
if (document.fullscreenElement) {
|
|
72
75
|
document.exitFullscreen().catch(() => {
|
|
@@ -78,73 +81,56 @@ const U = ({
|
|
|
78
81
|
}
|
|
79
82
|
};
|
|
80
83
|
return a(() => {
|
|
81
|
-
const e =
|
|
84
|
+
const e = f.current;
|
|
82
85
|
e && (e.render(
|
|
83
86
|
/* @__PURE__ */ l.jsx(
|
|
84
|
-
|
|
87
|
+
_,
|
|
85
88
|
{
|
|
86
89
|
html: r,
|
|
87
90
|
loadingText: v,
|
|
88
91
|
styleLoadingText: x,
|
|
89
92
|
scriptLoadingText: R,
|
|
90
|
-
fullScreenButtonText:
|
|
91
|
-
|
|
93
|
+
fullScreenButtonText: m,
|
|
94
|
+
hideFullScreen: y,
|
|
95
|
+
resetToken: E
|
|
92
96
|
}
|
|
93
97
|
)
|
|
94
|
-
), requestAnimationFrame(() =>
|
|
98
|
+
), requestAnimationFrame(() => d.current?.()));
|
|
95
99
|
}, [
|
|
96
|
-
|
|
100
|
+
u,
|
|
97
101
|
r,
|
|
98
102
|
v,
|
|
99
103
|
x,
|
|
100
104
|
R,
|
|
101
|
-
|
|
102
|
-
|
|
105
|
+
m,
|
|
106
|
+
E
|
|
103
107
|
]), /* @__PURE__ */ l.jsxs(
|
|
104
108
|
"div",
|
|
105
109
|
{
|
|
106
|
-
ref:
|
|
107
|
-
|
|
108
|
-
width: "100%",
|
|
109
|
-
height: "100%",
|
|
110
|
-
overflow: "auto",
|
|
111
|
-
position: "relative"
|
|
112
|
-
},
|
|
110
|
+
ref: C,
|
|
111
|
+
className: "w-full h-full overflow-auto relative flex flex-col justify-center",
|
|
113
112
|
children: [
|
|
114
|
-
/* @__PURE__ */ l.jsx(
|
|
113
|
+
!y && /* @__PURE__ */ l.jsx(
|
|
115
114
|
"button",
|
|
116
115
|
{
|
|
117
116
|
type: "button",
|
|
118
|
-
onClick:
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
top: 8,
|
|
122
|
-
right: 8,
|
|
123
|
-
zIndex: 5,
|
|
124
|
-
padding: "6px 10px",
|
|
125
|
-
background: "rgba(0, 0, 0, 0.75)",
|
|
126
|
-
color: "#fff",
|
|
127
|
-
border: "none",
|
|
128
|
-
borderRadius: 6,
|
|
129
|
-
cursor: "pointer"
|
|
130
|
-
},
|
|
131
|
-
children: M ? "退出全屏" : d || "全屏浏览"
|
|
117
|
+
onClick: N,
|
|
118
|
+
className: "absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer",
|
|
119
|
+
children: H ? "退出全屏" : m || "全屏浏览"
|
|
132
120
|
}
|
|
133
121
|
),
|
|
134
|
-
c === "blackboard" &&
|
|
122
|
+
c === "blackboard" && j === "markdown" ? /* @__PURE__ */ l.jsx(W, { content: u }) : /* @__PURE__ */ l.jsx(
|
|
135
123
|
"iframe",
|
|
136
124
|
{
|
|
137
|
-
ref:
|
|
125
|
+
ref: i,
|
|
138
126
|
sandbox: "allow-scripts allow-same-origin",
|
|
139
127
|
allow: "fullscreen",
|
|
140
128
|
allowFullScreen: !0,
|
|
141
|
-
className:
|
|
129
|
+
className: "w-full h-full",
|
|
142
130
|
style: {
|
|
143
|
-
|
|
144
|
-
height: `${H}px`
|
|
131
|
+
// height: `${height}px`,
|
|
145
132
|
// margin: "16px 0",
|
|
146
|
-
}
|
|
147
|
-
title: "HTML Sandbox"
|
|
133
|
+
}
|
|
148
134
|
}
|
|
149
135
|
)
|
|
150
136
|
]
|
|
@@ -152,6 +138,6 @@ const U = ({
|
|
|
152
138
|
);
|
|
153
139
|
};
|
|
154
140
|
export {
|
|
155
|
-
|
|
141
|
+
V as default
|
|
156
142
|
};
|
|
157
143
|
//# sourceMappingURL=IframeSandbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IframeSandbox.js","sources":["../../../src/components/ContentRender/IframeSandbox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { createRoot, Root } from \"react-dom/client\";\nimport SandboxApp from \"./SandboxApp\";\nimport { splitContentSegments } from \"./utils/split-content\";\nimport ContentRender from \"./ContentRender\";\nexport interface IframeSandboxProps {\n content: string;\n className?: string;\n loadingText?: string;\n styleLoadingText?: string;\n scriptLoadingText?: string;\n fullScreenButtonText?: string;\n mode?: \"content\" | \"blackboard\";\n type: \"sandbox\" | \"markdown\";\n}\n\nconst IframeSandbox: React.FC<IframeSandboxProps> = ({\n content,\n type,\n className,\n loadingText,\n styleLoadingText,\n scriptLoadingText,\n fullScreenButtonText,\n mode = \"content\",\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const rootRef = useRef<Root | null>(null);\n const docRef = useRef<Document | null>(null);\n const updateHeightRef = useRef<() => void>(() => {});\n const [height, setHeight] = useState(480);\n const [resetToken, setResetToken] = useState(0);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const prevHtmlRef = useRef<string>(\"\");\n const htmlContent = React.useMemo(() => {\n const segments = splitContentSegments(content);\n // console.log('segments=====', segments);\n const sandboxSegments = segments.filter((seg) => seg.type === \"sandbox\");\n const sandboxContent =\n mode === \"blackboard\"\n ? sandboxSegments[sandboxSegments.length - 1]?.value || \"\"\n : sandboxSegments.map((seg) => seg.value).join(\"\\n\");\n return sandboxContent || \"\";\n }, [content, mode]);\n\n useEffect(() => {\n if (mode !== \"blackboard\") {\n prevHtmlRef.current = htmlContent;\n return;\n }\n const prev = prevHtmlRef.current;\n const isContinuation = prev && htmlContent.startsWith(prev);\n if (!isContinuation && prev) {\n setResetToken((token) => token + 1);\n }\n prevHtmlRef.current = htmlContent;\n }, [htmlContent, mode]);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (!iframe) return undefined;\n\n const doc = iframe.contentDocument;\n if (!doc) return undefined;\n\n doc.open();\n doc.write(`<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <style>\n html, body { margin: 0; padding: 0; }\n </style>\n </head>\n <body>\n <div id=\"root\"></div>\n </body>\n</html>`);\n doc.close();\n docRef.current = doc;\n\n const rootEl = doc.getElementById(\"root\");\n if (!rootEl) return undefined;\n\n const root = createRoot(rootEl);\n rootRef.current = root;\n\n const updateHeight = () => {\n if (!iframeRef.current || !doc.body) return;\n const bodyRect = doc.body.getBoundingClientRect();\n const htmlRect = doc.documentElement?.getBoundingClientRect();\n const bodyHeight = bodyRect.height;\n const htmlHeight = htmlRect?.height || 0;\n const contentHeight = Math.max(bodyHeight, htmlHeight);\n const nextHeight = Math.max(200, Math.ceil(contentHeight));\n setHeight(nextHeight);\n };\n updateHeightRef.current = updateHeight;\n\n updateHeight();\n\n const resizeObserver = new ResizeObserver(() => updateHeight());\n resizeObserver.observe(doc.body);\n if (rootEl) {\n resizeObserver.observe(rootEl);\n }\n\n return () => {\n resizeObserver.disconnect();\n root.unmount();\n rootRef.current = null;\n docRef.current = null;\n updateHeightRef.current = () => {};\n };\n }, []);\n\n useEffect(() => {\n const onFullscreenChange = () => {\n setIsFullscreen(Boolean(document.fullscreenElement));\n };\n document.addEventListener(\"fullscreenchange\", onFullscreenChange);\n return () =>\n document.removeEventListener(\"fullscreenchange\", onFullscreenChange);\n }, []);\n\n const toggleFullscreen = () => {\n const target = containerRef.current || iframeRef.current;\n if (!target) return;\n if (document.fullscreenElement) {\n document.exitFullscreen().catch(() => {});\n return;\n }\n if (target.requestFullscreen) {\n target.requestFullscreen().catch(() => {});\n }\n };\n\n useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n\n root.render(\n <SandboxApp\n html={htmlContent}\n loadingText={loadingText}\n styleLoadingText={styleLoadingText}\n scriptLoadingText={scriptLoadingText}\n fullScreenButtonText={fullScreenButtonText}\n resetToken={resetToken}\n />\n );\n requestAnimationFrame(() => updateHeightRef.current?.());\n }, [\n content,\n htmlContent,\n loadingText,\n styleLoadingText,\n scriptLoadingText,\n fullScreenButtonText,\n resetToken,\n ]);\n\n return (\n <div\n ref={containerRef}\n style={{\n width: \"100%\",\n height: \"100%\",\n overflow: \"auto\",\n position: \"relative\",\n }}\n >\n <button\n type=\"button\"\n onClick={toggleFullscreen}\n style={{\n position: \"absolute\",\n top: 8,\n right: 8,\n zIndex: 5,\n padding: \"6px 10px\",\n background: \"rgba(0, 0, 0, 0.75)\",\n color: \"#fff\",\n border: \"none\",\n borderRadius: 6,\n cursor: \"pointer\",\n }}\n >\n {isFullscreen ? \"退出全屏\" : fullScreenButtonText || \"全屏浏览\"}\n </button>\n {mode === \"blackboard\" && type === \"markdown\" ? (\n <ContentRender content={content} />\n ) : (\n <iframe\n ref={iframeRef}\n sandbox=\"allow-scripts allow-same-origin\"\n allow=\"fullscreen\"\n allowFullScreen\n className={className}\n style={{\n width: \"100%\",\n height: `${height}px`,\n // margin: \"16px 0\",\n }}\n title=\"HTML Sandbox\"\n />\n )}\n </div>\n );\n};\n\nexport default IframeSandbox;\n"],"names":["IframeSandbox","content","type","className","loadingText","styleLoadingText","scriptLoadingText","fullScreenButtonText","mode","containerRef","useRef","iframeRef","rootRef","docRef","updateHeightRef","height","setHeight","useState","resetToken","setResetToken","isFullscreen","setIsFullscreen","prevHtmlRef","htmlContent","React","sandboxSegments","splitContentSegments","seg","useEffect","prev","token","iframe","doc","rootEl","root","createRoot","updateHeight","bodyRect","htmlRect","bodyHeight","htmlHeight","contentHeight","nextHeight","resizeObserver","onFullscreenChange","toggleFullscreen","target","jsx","SandboxApp","jsxs","ContentRender"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"IframeSandbox.js","sources":["../../../src/components/ContentRender/IframeSandbox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { createRoot, Root } from \"react-dom/client\";\nimport SandboxApp from \"./SandboxApp\";\nimport { splitContentSegments } from \"./utils/split-content\";\nimport ContentRender from \"./ContentRender\";\nexport interface IframeSandboxProps {\n content: string;\n className?: string;\n loadingText?: string;\n styleLoadingText?: string;\n scriptLoadingText?: string;\n fullScreenButtonText?: string;\n hideFullScreen?: boolean;\n mode?: \"content\" | \"blackboard\";\n type: \"sandbox\" | \"markdown\";\n}\n\nconst IframeSandbox: React.FC<IframeSandboxProps> = ({\n content,\n type,\n className,\n loadingText,\n styleLoadingText,\n scriptLoadingText,\n fullScreenButtonText,\n hideFullScreen = false,\n mode = \"content\",\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const rootRef = useRef<Root | null>(null);\n const docRef = useRef<Document | null>(null);\n const updateHeightRef = useRef<() => void>(() => {});\n const [, setHeight] = useState(480);\n const [resetToken, setResetToken] = useState(0);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const prevHtmlRef = useRef<string>(\"\");\n const htmlContent = React.useMemo(() => {\n const segments = splitContentSegments(content);\n // console.log('segments=====', segments);\n const sandboxSegments = segments.filter((seg) => seg.type === \"sandbox\");\n const sandboxContent =\n mode === \"blackboard\"\n ? sandboxSegments[sandboxSegments.length - 1]?.value || \"\"\n : sandboxSegments.map((seg) => seg.value).join(\"\\n\");\n return sandboxContent || \"\";\n }, [content, mode]);\n\n useEffect(() => {\n if (mode !== \"blackboard\") {\n prevHtmlRef.current = htmlContent;\n return;\n }\n const prev = prevHtmlRef.current;\n const isContinuation = prev && htmlContent.startsWith(prev);\n if (!isContinuation && prev) {\n setResetToken((token) => token + 1);\n }\n prevHtmlRef.current = htmlContent;\n }, [htmlContent, mode]);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (!iframe) return undefined;\n\n const doc = iframe.contentDocument;\n if (!doc) return undefined;\n\n doc.open();\n doc.write(`<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <style>\n html, body { margin: 0; padding: 0; }\n </style>\n </head>\n <body>\n <div id=\"root\"></div>\n </body>\n</html>`);\n doc.close();\n docRef.current = doc;\n\n const rootEl = doc.getElementById(\"root\");\n if (!rootEl) return undefined;\n\n const root = createRoot(rootEl);\n rootRef.current = root;\n\n const updateHeight = () => {\n if (!iframeRef.current || !doc.body) return;\n const bodyRect = doc.body.getBoundingClientRect();\n const htmlRect = doc.documentElement?.getBoundingClientRect();\n const bodyHeight = bodyRect.height;\n const htmlHeight = htmlRect?.height || 0;\n const contentHeight = Math.max(bodyHeight, htmlHeight);\n const nextHeight = Math.max(200, Math.ceil(contentHeight));\n setHeight(nextHeight);\n };\n updateHeightRef.current = updateHeight;\n\n updateHeight();\n\n const resizeObserver = new ResizeObserver(() => updateHeight());\n resizeObserver.observe(doc.body);\n if (rootEl) {\n resizeObserver.observe(rootEl);\n }\n\n return () => {\n resizeObserver.disconnect();\n // Defer unmount to avoid React warning when parent is mid-render\n setTimeout(() => {\n root.unmount();\n rootRef.current = null;\n docRef.current = null;\n updateHeightRef.current = () => {};\n }, 0);\n };\n }, []);\n\n useEffect(() => {\n const onFullscreenChange = () => {\n setIsFullscreen(Boolean(document.fullscreenElement));\n };\n document.addEventListener(\"fullscreenchange\", onFullscreenChange);\n return () =>\n document.removeEventListener(\"fullscreenchange\", onFullscreenChange);\n }, []);\n\n const toggleFullscreen = () => {\n const target = containerRef.current || iframeRef.current;\n if (!target) return;\n if (document.fullscreenElement) {\n document.exitFullscreen().catch(() => {});\n return;\n }\n if (target.requestFullscreen) {\n target.requestFullscreen().catch(() => {});\n }\n };\n\n useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n\n root.render(\n <SandboxApp\n html={htmlContent}\n loadingText={loadingText}\n styleLoadingText={styleLoadingText}\n scriptLoadingText={scriptLoadingText}\n fullScreenButtonText={fullScreenButtonText}\n hideFullScreen={hideFullScreen}\n resetToken={resetToken}\n />\n );\n requestAnimationFrame(() => updateHeightRef.current?.());\n }, [\n content,\n htmlContent,\n loadingText,\n styleLoadingText,\n scriptLoadingText,\n fullScreenButtonText,\n resetToken,\n ]);\n\n return (\n <div\n ref={containerRef}\n className={\n \"w-full h-full overflow-auto relative flex flex-col justify-center\"\n }\n >\n {!hideFullScreen && (\n <button\n type=\"button\"\n onClick={toggleFullscreen}\n className={\n \"absolute top-2 right-2 z-50 p-1.5 bg-black/75 text-white rounded-md cursor-pointer\"\n }\n >\n {isFullscreen ? \"退出全屏\" : fullScreenButtonText || \"全屏浏览\"}\n </button>\n )}\n {mode === \"blackboard\" && type === \"markdown\" ? (\n <ContentRender content={content} />\n ) : (\n <iframe\n ref={iframeRef}\n sandbox=\"allow-scripts allow-same-origin\"\n allow=\"fullscreen\"\n allowFullScreen\n className={(className, \"w-full h-full\")}\n style={\n {\n // height: `${height}px`,\n // margin: \"16px 0\",\n }\n }\n />\n )}\n </div>\n );\n};\n\nexport default IframeSandbox;\n"],"names":["IframeSandbox","content","type","className","loadingText","styleLoadingText","scriptLoadingText","fullScreenButtonText","hideFullScreen","mode","containerRef","useRef","iframeRef","rootRef","docRef","updateHeightRef","setHeight","useState","resetToken","setResetToken","isFullscreen","setIsFullscreen","prevHtmlRef","htmlContent","React","sandboxSegments","splitContentSegments","seg","useEffect","prev","token","iframe","doc","rootEl","root","createRoot","updateHeight","bodyRect","htmlRect","bodyHeight","htmlHeight","contentHeight","nextHeight","resizeObserver","onFullscreenChange","toggleFullscreen","target","jsx","SandboxApp","jsxs","ContentRender"],"mappings":"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"}
|
|
@@ -1,77 +1,69 @@
|
|
|
1
|
-
import { j as
|
|
2
|
-
import { useRef as n, useState as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
5
|
-
html:
|
|
6
|
-
loadingText:
|
|
7
|
-
styleLoadingText:
|
|
8
|
-
scriptLoadingText:
|
|
9
|
-
|
|
10
|
-
resetToken: p = 0
|
|
1
|
+
import { j as v } from "../../_virtual/jsx-runtime.js";
|
|
2
|
+
import { useRef as n, useState as A, useEffect as I } from "react";
|
|
3
|
+
import K from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/loader-circle.js";
|
|
4
|
+
const Z = ({
|
|
5
|
+
html: u,
|
|
6
|
+
loadingText: B,
|
|
7
|
+
styleLoadingText: W,
|
|
8
|
+
scriptLoadingText: z,
|
|
9
|
+
resetToken: f = 0
|
|
11
10
|
}) => {
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
},
|
|
15
|
-
const a = performance.now() -
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
},
|
|
11
|
+
const q = n(null), S = n(null), [H, L] = A(!0), [V, C] = A(!1), [_, E] = A(!1), b = n([]), w = n([]), N = n(0), j = n(0), p = n(null), d = n(null), m = n(!1), h = n(!1), R = n(!1), D = n(f), O = 200, c = (t) => {
|
|
12
|
+
t.current && (clearTimeout(t.current), t.current = null);
|
|
13
|
+
}, M = (t, s, o, g) => {
|
|
14
|
+
const a = performance.now() - o.current, x = Math.max(0, O - a);
|
|
15
|
+
c(s), s.current = window.setTimeout(() => {
|
|
16
|
+
t(!1), g?.(), s.current = null;
|
|
17
|
+
}, x);
|
|
19
18
|
};
|
|
20
|
-
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
};
|
|
24
|
-
return document.addEventListener("fullscreenchange", e), () => {
|
|
25
|
-
document.removeEventListener("fullscreenchange", e);
|
|
26
|
-
};
|
|
27
|
-
}, []), v(() => {
|
|
28
|
-
const e = S.current?.ownerDocument;
|
|
29
|
-
if (!e) return;
|
|
19
|
+
I(() => {
|
|
20
|
+
const t = S.current?.ownerDocument;
|
|
21
|
+
if (!t) return;
|
|
30
22
|
const s = "sandbox-spinner-style";
|
|
31
|
-
let
|
|
32
|
-
|
|
33
|
-
}, []),
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
if (!
|
|
37
|
-
const s =
|
|
38
|
-
if (!
|
|
39
|
-
|
|
40
|
-
const
|
|
41
|
-
|
|
23
|
+
let o = t.getElementById(s);
|
|
24
|
+
o || (o = t.createElement("style"), o.id = s, o.textContent = "@keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }", t.head?.appendChild(o));
|
|
25
|
+
}, []), I(() => {
|
|
26
|
+
f !== D.current && (R.current = !1, D.current = f), c(p), c(d), m.current = !1, h.current = !1;
|
|
27
|
+
const t = S.current;
|
|
28
|
+
if (!t) return;
|
|
29
|
+
const s = t.ownerDocument, o = s?.body;
|
|
30
|
+
if (!o) return;
|
|
31
|
+
b.current.forEach((e) => e.remove()), b.current = [], w.current.forEach((e) => e.remove()), w.current = [];
|
|
32
|
+
const g = R.current;
|
|
33
|
+
L(!g), C(!1), E(!1), t.innerHTML = "";
|
|
42
34
|
const a = document.createElement("div");
|
|
43
|
-
a.innerHTML =
|
|
44
|
-
const
|
|
45
|
-
Array.from(a.querySelectorAll("style, script")).forEach((
|
|
46
|
-
if (
|
|
35
|
+
a.innerHTML = u;
|
|
36
|
+
const x = (u.match(/<script[\s>]/gi) || []).length, Q = (u.match(/<\/script>/gi) || []).length, k = x > 0 && x === Q, l = [];
|
|
37
|
+
Array.from(a.querySelectorAll("style, script")).forEach((e) => {
|
|
38
|
+
if (e.tagName.toLowerCase() === "style") {
|
|
47
39
|
const r = s.createElement("style");
|
|
48
|
-
r.textContent =
|
|
40
|
+
r.textContent = e.textContent || "", Array.from(e.attributes).forEach((i) => {
|
|
49
41
|
r.setAttribute(i.name, i.value);
|
|
50
42
|
}), l.push(r);
|
|
51
43
|
} else {
|
|
52
44
|
const r = s.createElement("script");
|
|
53
|
-
Array.from(
|
|
45
|
+
Array.from(e.attributes).forEach((i) => {
|
|
54
46
|
r.setAttribute(i.name, i.value);
|
|
55
|
-
}), r.textContent =
|
|
47
|
+
}), r.textContent = e.textContent || "", l.push(r);
|
|
56
48
|
}
|
|
57
|
-
|
|
49
|
+
e.remove();
|
|
58
50
|
});
|
|
59
|
-
const
|
|
60
|
-
(
|
|
61
|
-
),
|
|
62
|
-
(
|
|
51
|
+
const T = l.some(
|
|
52
|
+
(e) => e.tagName.toLowerCase() === "style"
|
|
53
|
+
), F = l.some(
|
|
54
|
+
(e) => e.tagName.toLowerCase() === "script"
|
|
63
55
|
);
|
|
64
|
-
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
const
|
|
68
|
-
|
|
69
|
-
if (
|
|
70
|
-
s.head?.appendChild(
|
|
56
|
+
T && (m.current = !0, N.current = performance.now(), c(p), C(!0)), F && (h.current = !0, j.current = performance.now(), c(d), E(!0));
|
|
57
|
+
const G = !!a.firstElementChild;
|
|
58
|
+
L(!G && !g), G && (R.current = !0);
|
|
59
|
+
const J = Array.from(a.childNodes);
|
|
60
|
+
t.append(...J), l.forEach((e) => {
|
|
61
|
+
if (e.tagName.toLowerCase() === "style") {
|
|
62
|
+
s.head?.appendChild(e), b.current.push(e);
|
|
71
63
|
return;
|
|
72
64
|
}
|
|
73
|
-
if (
|
|
74
|
-
const r =
|
|
65
|
+
if (k) {
|
|
66
|
+
const r = e, i = r.textContent || "";
|
|
75
67
|
if (!r.src)
|
|
76
68
|
try {
|
|
77
69
|
new Function(i);
|
|
@@ -80,86 +72,59 @@ const re = ({
|
|
|
80
72
|
return;
|
|
81
73
|
}
|
|
82
74
|
try {
|
|
83
|
-
|
|
75
|
+
o.appendChild(r), w.current.push(r);
|
|
84
76
|
} catch {
|
|
85
77
|
r.remove();
|
|
86
78
|
}
|
|
87
79
|
} else
|
|
88
|
-
|
|
80
|
+
e.remove();
|
|
89
81
|
}), requestAnimationFrame(() => {
|
|
90
|
-
|
|
82
|
+
T && M(
|
|
91
83
|
C,
|
|
84
|
+
p,
|
|
85
|
+
N,
|
|
86
|
+
() => {
|
|
87
|
+
m.current = !1;
|
|
88
|
+
}
|
|
89
|
+
), F && M(
|
|
90
|
+
E,
|
|
92
91
|
d,
|
|
93
92
|
j,
|
|
94
93
|
() => {
|
|
95
94
|
h.current = !1;
|
|
96
95
|
}
|
|
97
|
-
), G && T(
|
|
98
|
-
w,
|
|
99
|
-
m,
|
|
100
|
-
M,
|
|
101
|
-
() => {
|
|
102
|
-
y.current = !1;
|
|
103
|
-
}
|
|
104
96
|
);
|
|
105
97
|
});
|
|
106
|
-
}, [
|
|
98
|
+
}, [u, f]), I(
|
|
107
99
|
() => () => {
|
|
108
|
-
|
|
100
|
+
c(p), c(d);
|
|
109
101
|
},
|
|
110
102
|
[]
|
|
111
103
|
);
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
if (e) {
|
|
115
|
-
if (!document.fullscreenElement) {
|
|
116
|
-
e.requestFullscreen?.().catch(() => {
|
|
117
|
-
});
|
|
118
|
-
return;
|
|
119
|
-
}
|
|
120
|
-
document.exitFullscreen?.();
|
|
121
|
-
}
|
|
122
|
-
};
|
|
123
|
-
return /* @__PURE__ */ u.jsxs(
|
|
104
|
+
const y = _ || h.current ? z || "Building scripts cache..." : V || m.current ? W || "Building styles..." : H ? B || "Loading..." : null;
|
|
105
|
+
return /* @__PURE__ */ v.jsxs(
|
|
124
106
|
"div",
|
|
125
107
|
{
|
|
126
|
-
ref:
|
|
127
|
-
style: {
|
|
128
|
-
|
|
108
|
+
ref: q,
|
|
109
|
+
style: {
|
|
110
|
+
position: "relative",
|
|
111
|
+
height: "100vh",
|
|
112
|
+
display: "flex",
|
|
113
|
+
flexDirection: "column",
|
|
114
|
+
justifyContent: "center"
|
|
115
|
+
},
|
|
116
|
+
"aria-busy": !!y,
|
|
129
117
|
children: [
|
|
130
|
-
/* @__PURE__ */
|
|
118
|
+
/* @__PURE__ */ v.jsx(
|
|
131
119
|
"div",
|
|
132
120
|
{
|
|
133
121
|
ref: S,
|
|
134
122
|
style: {
|
|
135
|
-
pointerEvents:
|
|
123
|
+
pointerEvents: y ? "none" : void 0
|
|
136
124
|
}
|
|
137
125
|
}
|
|
138
126
|
),
|
|
139
|
-
/* @__PURE__ */
|
|
140
|
-
"button",
|
|
141
|
-
{
|
|
142
|
-
type: "button",
|
|
143
|
-
onClick: K,
|
|
144
|
-
style: {
|
|
145
|
-
position: "absolute",
|
|
146
|
-
top: 8,
|
|
147
|
-
right: 8,
|
|
148
|
-
zIndex: 30,
|
|
149
|
-
padding: "6px 10px",
|
|
150
|
-
borderRadius: 6,
|
|
151
|
-
border: "1px solid #cbd5e1",
|
|
152
|
-
background: "#ffffffcc",
|
|
153
|
-
color: "#0f172a",
|
|
154
|
-
fontSize: 12,
|
|
155
|
-
fontWeight: 600,
|
|
156
|
-
cursor: "pointer",
|
|
157
|
-
boxShadow: "0 4px 10px rgba(15, 23, 42, 0.08)"
|
|
158
|
-
},
|
|
159
|
-
children: O ? L || "Exit Fullscreen" : L || "Fullscreen"
|
|
160
|
-
}
|
|
161
|
-
),
|
|
162
|
-
g && /* @__PURE__ */ u.jsxs(
|
|
127
|
+
y && /* @__PURE__ */ v.jsxs(
|
|
163
128
|
"div",
|
|
164
129
|
{
|
|
165
130
|
style: {
|
|
@@ -177,15 +142,15 @@ const re = ({
|
|
|
177
142
|
zIndex: 20
|
|
178
143
|
},
|
|
179
144
|
children: [
|
|
180
|
-
/* @__PURE__ */
|
|
181
|
-
|
|
145
|
+
/* @__PURE__ */ v.jsx(
|
|
146
|
+
K,
|
|
182
147
|
{
|
|
183
148
|
"aria-hidden": !0,
|
|
184
149
|
size: 20,
|
|
185
150
|
style: { animation: "sandbox-spin 1s linear infinite" }
|
|
186
151
|
}
|
|
187
152
|
),
|
|
188
|
-
|
|
153
|
+
y
|
|
189
154
|
]
|
|
190
155
|
}
|
|
191
156
|
)
|
|
@@ -194,6 +159,6 @@ const re = ({
|
|
|
194
159
|
);
|
|
195
160
|
};
|
|
196
161
|
export {
|
|
197
|
-
|
|
162
|
+
Z as default
|
|
198
163
|
};
|
|
199
164
|
//# sourceMappingURL=SandboxApp.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SandboxApp.js","sources":["../../../src/components/ContentRender/SandboxApp.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Loader2 } from \"lucide-react\";\n\nexport interface SandboxAppProps {\n html: string;\n loadingText?: string;\n styleLoadingText?: string;\n scriptLoadingText?: string;\n fullScreenButtonText?: string;\n resetToken?: number;\n}\n\nconst SandboxApp: React.FC<SandboxAppProps> = ({\n html,\n loadingText,\n styleLoadingText,\n scriptLoadingText,\n fullScreenButtonText,\n resetToken = 0,\n}) => {\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const [isWaitingFirstDiv, setIsWaitingFirstDiv] = useState(true);\n const [isGeneratingStyles, setIsGeneratingStyles] = useState(false);\n const [isGeneratingScripts, setIsGeneratingScripts] = useState(false);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const appendedStylesRef = useRef<HTMLStyleElement[]>([]);\n const appendedScriptsRef = useRef<HTMLScriptElement[]>([]);\n const styleStartRef = useRef(0);\n const scriptStartRef = useRef(0);\n const styleTimerRef = useRef<number | null>(null);\n const scriptTimerRef = useRef<number | null>(null);\n const hasStylesRef = useRef(false);\n const hasScriptsRef = useRef(false);\n const hasRenderedContentRef = useRef(false);\n const prevResetTokenRef = useRef(resetToken);\n const MIN_LOADING_MS = 200;\n\n const clearTimer = (timerRef: React.MutableRefObject<number | null>) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n };\n\n const settleStateWithMinimumDelay = (\n setter: React.Dispatch<React.SetStateAction<boolean>>,\n timerRef: React.MutableRefObject<number | null>,\n startRef: React.MutableRefObject<number>,\n onDone?: () => void\n ) => {\n const elapsed = performance.now() - startRef.current;\n const delay = Math.max(0, MIN_LOADING_MS - elapsed);\n clearTimer(timerRef);\n timerRef.current = window.setTimeout(() => {\n setter(false);\n onDone?.();\n timerRef.current = null;\n }, delay);\n };\n\n useEffect(() => {\n const onFullscreenChange = () => {\n setIsFullscreen(!!document.fullscreenElement);\n };\n document.addEventListener(\"fullscreenchange\", onFullscreenChange);\n return () => {\n document.removeEventListener(\"fullscreenchange\", onFullscreenChange);\n };\n }, []);\n\n useEffect(() => {\n const doc = containerRef.current?.ownerDocument;\n if (!doc) return;\n const styleId = \"sandbox-spinner-style\";\n let styleEl = doc.getElementById(styleId) as HTMLStyleElement | null;\n if (!styleEl) {\n styleEl = doc.createElement(\"style\");\n styleEl.id = styleId;\n styleEl.textContent =\n \"@keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }\";\n doc.head?.appendChild(styleEl);\n }\n }, []);\n\n useEffect(() => {\n if (resetToken !== prevResetTokenRef.current) {\n hasRenderedContentRef.current = false;\n prevResetTokenRef.current = resetToken;\n }\n clearTimer(styleTimerRef);\n clearTimer(scriptTimerRef);\n hasStylesRef.current = false;\n hasScriptsRef.current = false;\n\n const container = containerRef.current;\n if (!container) return;\n const doc = container.ownerDocument;\n const body = doc?.body;\n if (!body) return;\n\n appendedStylesRef.current.forEach((node) => node.remove());\n appendedStylesRef.current = [];\n appendedScriptsRef.current.forEach((node) => node.remove());\n appendedScriptsRef.current = [];\n\n const hasRenderedBefore = hasRenderedContentRef.current;\n setIsWaitingFirstDiv(!hasRenderedBefore);\n setIsGeneratingStyles(false);\n setIsGeneratingScripts(false);\n container.innerHTML = \"\";\n const wrapper = document.createElement(\"div\");\n wrapper.innerHTML = html;\n\n const openScriptCount = (html.match(/<script[\\s>]/gi) || []).length;\n const closeScriptCount = (html.match(/<\\/script>/gi) || []).length;\n const shouldExecuteScripts =\n openScriptCount > 0 && openScriptCount === closeScriptCount;\n\n const resourceQueue: HTMLElement[] = [];\n\n Array.from(wrapper.querySelectorAll(\"style, script\")).forEach((node) => {\n if (node.tagName.toLowerCase() === \"style\") {\n const cloned = doc.createElement(\"style\");\n cloned.textContent = node.textContent || \"\";\n Array.from(node.attributes).forEach((attr) => {\n cloned.setAttribute(attr.name, attr.value);\n });\n resourceQueue.push(cloned);\n } else {\n const replacement = doc.createElement(\"script\");\n Array.from(node.attributes).forEach((attr) => {\n replacement.setAttribute(attr.name, attr.value);\n });\n replacement.textContent = node.textContent || \"\";\n resourceQueue.push(replacement);\n }\n node.remove();\n });\n\n const hasStyles = resourceQueue.some(\n (node) => node.tagName.toLowerCase() === \"style\"\n );\n const hasScripts = resourceQueue.some(\n (node) => node.tagName.toLowerCase() === \"script\"\n );\n if (hasStyles) {\n hasStylesRef.current = true;\n styleStartRef.current = performance.now();\n clearTimer(styleTimerRef);\n setIsGeneratingStyles(true);\n }\n if (hasScripts) {\n hasScriptsRef.current = true;\n scriptStartRef.current = performance.now();\n clearTimer(scriptTimerRef);\n setIsGeneratingScripts(true);\n }\n\n const hasFirstElement = !!wrapper.firstElementChild;\n setIsWaitingFirstDiv(!hasFirstElement && !hasRenderedBefore);\n if (hasFirstElement) {\n hasRenderedContentRef.current = true;\n }\n\n const contentNodes = Array.from(wrapper.childNodes);\n container.append(...contentNodes);\n\n resourceQueue.forEach((node) => {\n if (node.tagName.toLowerCase() === \"style\") {\n doc.head?.appendChild(node);\n appendedStylesRef.current.push(node as HTMLStyleElement);\n return;\n }\n\n if (shouldExecuteScripts) {\n const scriptNode = node as HTMLScriptElement;\n const scriptText = scriptNode.textContent || \"\";\n const shouldValidate = !scriptNode.src;\n\n if (shouldValidate) {\n try {\n // Validate script is syntactically complete before executing\n\n new Function(scriptText);\n } catch {\n scriptNode.remove();\n return;\n }\n }\n\n try {\n body.appendChild(scriptNode);\n appendedScriptsRef.current.push(scriptNode);\n } catch {\n scriptNode.remove();\n }\n } else {\n // Defer execution until all script tags are fully received\n node.remove();\n }\n });\n requestAnimationFrame(() => {\n if (hasStyles) {\n settleStateWithMinimumDelay(\n setIsGeneratingStyles,\n styleTimerRef,\n styleStartRef,\n () => {\n hasStylesRef.current = false;\n }\n );\n }\n if (hasScripts) {\n settleStateWithMinimumDelay(\n setIsGeneratingScripts,\n scriptTimerRef,\n scriptStartRef,\n () => {\n hasScriptsRef.current = false;\n }\n );\n }\n });\n }, [html, resetToken]);\n\n useEffect(\n () => () => {\n clearTimer(styleTimerRef);\n clearTimer(scriptTimerRef);\n },\n []\n );\n\n const overlayMessage = (() => {\n if (isGeneratingScripts || hasScriptsRef.current)\n return scriptLoadingText || \"Building scripts cache...\";\n if (isGeneratingStyles || hasStylesRef.current)\n return styleLoadingText || \"Building styles...\";\n if (isWaitingFirstDiv) return loadingText || \"Loading...\";\n return null;\n })();\n\n const handleToggleFullscreen = () => {\n const wrapper = wrapperRef.current;\n if (!wrapper) return;\n if (!document.fullscreenElement) {\n wrapper.requestFullscreen?.().catch(() => {});\n return;\n }\n document.exitFullscreen?.();\n };\n\n return (\n <div\n ref={wrapperRef}\n style={{ position: \"relative\", minHeight: 120 }}\n aria-busy={!!overlayMessage}\n >\n <div\n ref={containerRef}\n style={{\n pointerEvents: overlayMessage ? \"none\" : undefined,\n }}\n />\n <button\n type=\"button\"\n onClick={handleToggleFullscreen}\n style={{\n position: \"absolute\",\n top: 8,\n right: 8,\n zIndex: 30,\n padding: \"6px 10px\",\n borderRadius: 6,\n border: \"1px solid #cbd5e1\",\n background: \"#ffffffcc\",\n color: \"#0f172a\",\n fontSize: 12,\n fontWeight: 600,\n cursor: \"pointer\",\n boxShadow: \"0 4px 10px rgba(15, 23, 42, 0.08)\",\n }}\n >\n {isFullscreen\n ? fullScreenButtonText || \"Exit Fullscreen\"\n : fullScreenButtonText || \"Fullscreen\"}\n </button>\n {overlayMessage && (\n <div\n style={{\n position: \"absolute\",\n inset: 0,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: \"rgba(51, 51, 51, 0.80)\",\n color: \"#ffffff\",\n fontSize: 16,\n fontWeight: 700,\n gap: 10,\n pointerEvents: \"auto\",\n zIndex: 20,\n }}\n >\n <Loader2\n aria-hidden\n size={20}\n style={{ animation: \"sandbox-spin 1s linear infinite\" }}\n />\n {overlayMessage}\n </div>\n )}\n </div>\n );\n};\n\nexport default SandboxApp;\n"],"names":["SandboxApp","html","loadingText","styleLoadingText","scriptLoadingText","fullScreenButtonText","resetToken","wrapperRef","useRef","containerRef","isWaitingFirstDiv","setIsWaitingFirstDiv","useState","isGeneratingStyles","setIsGeneratingStyles","isGeneratingScripts","setIsGeneratingScripts","isFullscreen","setIsFullscreen","appendedStylesRef","appendedScriptsRef","styleStartRef","scriptStartRef","styleTimerRef","scriptTimerRef","hasStylesRef","hasScriptsRef","hasRenderedContentRef","prevResetTokenRef","MIN_LOADING_MS","clearTimer","timerRef","settleStateWithMinimumDelay","setter","startRef","onDone","elapsed","delay","useEffect","onFullscreenChange","doc","styleId","styleEl","container","body","node","hasRenderedBefore","wrapper","openScriptCount","closeScriptCount","shouldExecuteScripts","resourceQueue","cloned","attr","replacement","hasStyles","hasScripts","hasFirstElement","contentNodes","scriptNode","scriptText","overlayMessage","handleToggleFullscreen","jsxs","jsx","Loader2"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SandboxApp.js","sources":["../../../src/components/ContentRender/SandboxApp.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Loader2 } from \"lucide-react\";\n\nexport interface SandboxAppProps {\n html: string;\n loadingText?: string;\n styleLoadingText?: string;\n scriptLoadingText?: string;\n resetToken?: number;\n}\n\nconst SandboxApp: React.FC<SandboxAppProps> = ({\n html,\n loadingText,\n styleLoadingText,\n scriptLoadingText,\n resetToken = 0,\n}) => {\n const wrapperRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const [isWaitingFirstDiv, setIsWaitingFirstDiv] = useState(true);\n const [isGeneratingStyles, setIsGeneratingStyles] = useState(false);\n const [isGeneratingScripts, setIsGeneratingScripts] = useState(false);\n const appendedStylesRef = useRef<HTMLStyleElement[]>([]);\n const appendedScriptsRef = useRef<HTMLScriptElement[]>([]);\n const styleStartRef = useRef(0);\n const scriptStartRef = useRef(0);\n const styleTimerRef = useRef<number | null>(null);\n const scriptTimerRef = useRef<number | null>(null);\n const hasStylesRef = useRef(false);\n const hasScriptsRef = useRef(false);\n const hasRenderedContentRef = useRef(false);\n const prevResetTokenRef = useRef(resetToken);\n const MIN_LOADING_MS = 200;\n\n const clearTimer = (timerRef: React.MutableRefObject<number | null>) => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n };\n\n const settleStateWithMinimumDelay = (\n setter: React.Dispatch<React.SetStateAction<boolean>>,\n timerRef: React.MutableRefObject<number | null>,\n startRef: React.MutableRefObject<number>,\n onDone?: () => void\n ) => {\n const elapsed = performance.now() - startRef.current;\n const delay = Math.max(0, MIN_LOADING_MS - elapsed);\n clearTimer(timerRef);\n timerRef.current = window.setTimeout(() => {\n setter(false);\n onDone?.();\n timerRef.current = null;\n }, delay);\n };\n\n useEffect(() => {\n const doc = containerRef.current?.ownerDocument;\n if (!doc) return;\n const styleId = \"sandbox-spinner-style\";\n let styleEl = doc.getElementById(styleId) as HTMLStyleElement | null;\n if (!styleEl) {\n styleEl = doc.createElement(\"style\");\n styleEl.id = styleId;\n styleEl.textContent =\n \"@keyframes sandbox-spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }\";\n doc.head?.appendChild(styleEl);\n }\n }, []);\n\n useEffect(() => {\n if (resetToken !== prevResetTokenRef.current) {\n hasRenderedContentRef.current = false;\n prevResetTokenRef.current = resetToken;\n }\n clearTimer(styleTimerRef);\n clearTimer(scriptTimerRef);\n hasStylesRef.current = false;\n hasScriptsRef.current = false;\n\n const container = containerRef.current;\n if (!container) return;\n const doc = container.ownerDocument;\n const body = doc?.body;\n if (!body) return;\n\n appendedStylesRef.current.forEach((node) => node.remove());\n appendedStylesRef.current = [];\n appendedScriptsRef.current.forEach((node) => node.remove());\n appendedScriptsRef.current = [];\n\n const hasRenderedBefore = hasRenderedContentRef.current;\n setIsWaitingFirstDiv(!hasRenderedBefore);\n setIsGeneratingStyles(false);\n setIsGeneratingScripts(false);\n container.innerHTML = \"\";\n const wrapper = document.createElement(\"div\");\n wrapper.innerHTML = html;\n\n const openScriptCount = (html.match(/<script[\\s>]/gi) || []).length;\n const closeScriptCount = (html.match(/<\\/script>/gi) || []).length;\n const shouldExecuteScripts =\n openScriptCount > 0 && openScriptCount === closeScriptCount;\n\n const resourceQueue: HTMLElement[] = [];\n\n Array.from(wrapper.querySelectorAll(\"style, script\")).forEach((node) => {\n if (node.tagName.toLowerCase() === \"style\") {\n const cloned = doc.createElement(\"style\");\n cloned.textContent = node.textContent || \"\";\n Array.from(node.attributes).forEach((attr) => {\n cloned.setAttribute(attr.name, attr.value);\n });\n resourceQueue.push(cloned);\n } else {\n const replacement = doc.createElement(\"script\");\n Array.from(node.attributes).forEach((attr) => {\n replacement.setAttribute(attr.name, attr.value);\n });\n replacement.textContent = node.textContent || \"\";\n resourceQueue.push(replacement);\n }\n node.remove();\n });\n\n const hasStyles = resourceQueue.some(\n (node) => node.tagName.toLowerCase() === \"style\"\n );\n const hasScripts = resourceQueue.some(\n (node) => node.tagName.toLowerCase() === \"script\"\n );\n if (hasStyles) {\n hasStylesRef.current = true;\n styleStartRef.current = performance.now();\n clearTimer(styleTimerRef);\n setIsGeneratingStyles(true);\n }\n if (hasScripts) {\n hasScriptsRef.current = true;\n scriptStartRef.current = performance.now();\n clearTimer(scriptTimerRef);\n setIsGeneratingScripts(true);\n }\n\n const hasFirstElement = !!wrapper.firstElementChild;\n setIsWaitingFirstDiv(!hasFirstElement && !hasRenderedBefore);\n if (hasFirstElement) {\n hasRenderedContentRef.current = true;\n }\n\n const contentNodes = Array.from(wrapper.childNodes);\n container.append(...contentNodes);\n\n resourceQueue.forEach((node) => {\n if (node.tagName.toLowerCase() === \"style\") {\n doc.head?.appendChild(node);\n appendedStylesRef.current.push(node as HTMLStyleElement);\n return;\n }\n\n if (shouldExecuteScripts) {\n const scriptNode = node as HTMLScriptElement;\n const scriptText = scriptNode.textContent || \"\";\n const shouldValidate = !scriptNode.src;\n\n if (shouldValidate) {\n try {\n // Validate script is syntactically complete before executing\n\n new Function(scriptText);\n } catch {\n scriptNode.remove();\n return;\n }\n }\n\n try {\n body.appendChild(scriptNode);\n appendedScriptsRef.current.push(scriptNode);\n } catch {\n scriptNode.remove();\n }\n } else {\n // Defer execution until all script tags are fully received\n node.remove();\n }\n });\n requestAnimationFrame(() => {\n if (hasStyles) {\n settleStateWithMinimumDelay(\n setIsGeneratingStyles,\n styleTimerRef,\n styleStartRef,\n () => {\n hasStylesRef.current = false;\n }\n );\n }\n if (hasScripts) {\n settleStateWithMinimumDelay(\n setIsGeneratingScripts,\n scriptTimerRef,\n scriptStartRef,\n () => {\n hasScriptsRef.current = false;\n }\n );\n }\n });\n }, [html, resetToken]);\n\n useEffect(\n () => () => {\n clearTimer(styleTimerRef);\n clearTimer(scriptTimerRef);\n },\n []\n );\n\n const overlayMessage = (() => {\n if (isGeneratingScripts || hasScriptsRef.current)\n return scriptLoadingText || \"Building scripts cache...\";\n if (isGeneratingStyles || hasStylesRef.current)\n return styleLoadingText || \"Building styles...\";\n if (isWaitingFirstDiv) return loadingText || \"Loading...\";\n return null;\n })();\n\n return (\n <div\n ref={wrapperRef}\n style={{\n position: \"relative\",\n height: \"100vh\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n }}\n aria-busy={!!overlayMessage}\n >\n <div\n ref={containerRef}\n style={{\n pointerEvents: overlayMessage ? \"none\" : undefined,\n }}\n />\n {overlayMessage && (\n <div\n style={{\n position: \"absolute\",\n inset: 0,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: \"rgba(51, 51, 51, 0.80)\",\n color: \"#ffffff\",\n fontSize: 16,\n fontWeight: 700,\n gap: 10,\n pointerEvents: \"auto\",\n zIndex: 20,\n }}\n >\n <Loader2\n aria-hidden\n size={20}\n style={{ animation: \"sandbox-spin 1s linear infinite\" }}\n />\n {overlayMessage}\n </div>\n )}\n </div>\n );\n};\n\nexport default SandboxApp;\n"],"names":["SandboxApp","html","loadingText","styleLoadingText","scriptLoadingText","resetToken","wrapperRef","useRef","containerRef","isWaitingFirstDiv","setIsWaitingFirstDiv","useState","isGeneratingStyles","setIsGeneratingStyles","isGeneratingScripts","setIsGeneratingScripts","appendedStylesRef","appendedScriptsRef","styleStartRef","scriptStartRef","styleTimerRef","scriptTimerRef","hasStylesRef","hasScriptsRef","hasRenderedContentRef","prevResetTokenRef","MIN_LOADING_MS","clearTimer","timerRef","settleStateWithMinimumDelay","setter","startRef","onDone","elapsed","delay","useEffect","doc","styleId","styleEl","container","body","node","hasRenderedBefore","wrapper","openScriptCount","closeScriptCount","shouldExecuteScripts","resourceQueue","cloned","attr","replacement","hasStyles","hasScripts","hasFirstElement","contentNodes","scriptNode","scriptText","overlayMessage","jsxs","jsx","Loader2"],"mappings":"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"}
|
|
@@ -4,5 +4,8 @@ export type RenderSegment = {
|
|
|
4
4
|
} | {
|
|
5
5
|
type: "sandbox";
|
|
6
6
|
value: string;
|
|
7
|
+
} | {
|
|
8
|
+
type: "text";
|
|
9
|
+
value: string;
|
|
7
10
|
};
|
|
8
|
-
export declare const splitContentSegments: (raw: string) => RenderSegment[];
|
|
11
|
+
export declare const splitContentSegments: (raw: string, keepText?: boolean) => RenderSegment[];
|
|
@@ -1,35 +1,66 @@
|
|
|
1
|
-
const
|
|
1
|
+
const S = /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)[\s>]/i, y = [
|
|
2
2
|
/<svg[\s\S]*?<\/svg>/i,
|
|
3
3
|
/<img\b[^>]*?>/i,
|
|
4
4
|
/```mermaid[\s\S]*?```/i,
|
|
5
5
|
/```[a-zA-Z0-9]+[\s\S]*?```/i
|
|
6
|
-
],
|
|
7
|
-
let
|
|
8
|
-
for (
|
|
9
|
-
if (!(
|
|
10
|
-
|
|
6
|
+
], p = /<\/[a-z][^>]*>\s*\n(?=[^\s<])/gi, k = (t, e) => {
|
|
7
|
+
let i = t.length, n;
|
|
8
|
+
for (p.lastIndex = 0; n = p.exec(t); )
|
|
9
|
+
if (!(n.index <= e)) {
|
|
10
|
+
i = n.index + n[0].length;
|
|
11
11
|
break;
|
|
12
12
|
}
|
|
13
|
-
return
|
|
14
|
-
},
|
|
15
|
-
let
|
|
16
|
-
return
|
|
17
|
-
const
|
|
18
|
-
if (!
|
|
19
|
-
const
|
|
20
|
-
(!
|
|
21
|
-
}),
|
|
22
|
-
},
|
|
23
|
-
const
|
|
24
|
-
if (
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
13
|
+
return i;
|
|
14
|
+
}, I = (t) => {
|
|
15
|
+
let e = null;
|
|
16
|
+
return y.forEach((i) => {
|
|
17
|
+
const n = i.exec(t);
|
|
18
|
+
if (!n || typeof n.index != "number") return;
|
|
19
|
+
const s = n.index, r = n.index + n[0].length;
|
|
20
|
+
(!e || s < e.start) && (e = { start: s, end: r });
|
|
21
|
+
}), e;
|
|
22
|
+
}, B = (t) => {
|
|
23
|
+
const e = t.search(/^\s*\|.*\|\s*$/m);
|
|
24
|
+
if (e === -1) return null;
|
|
25
|
+
const i = t.slice(e).split(`
|
|
26
|
+
`);
|
|
27
|
+
let n = e;
|
|
28
|
+
const s = [];
|
|
29
|
+
for (const c of i) {
|
|
30
|
+
if (!c.trim().startsWith("|")) break;
|
|
31
|
+
s.push(c), n += c.length + 1;
|
|
32
|
+
}
|
|
33
|
+
const r = s.join(`
|
|
34
|
+
`);
|
|
35
|
+
return { start: e, block: r, end: n - 1 };
|
|
36
|
+
}, f = (t, e = !1) => {
|
|
37
|
+
const i = t.indexOf("```");
|
|
38
|
+
if (e && i !== -1 && t.indexOf("```", i + 3) === -1)
|
|
39
|
+
return [{ type: "markdown", value: t }];
|
|
40
|
+
const n = t.search(/<svg\b/i);
|
|
41
|
+
if (n !== -1 && t.indexOf("</svg>", n) === -1)
|
|
42
|
+
return [{ type: "markdown", value: t }];
|
|
43
|
+
const s = B(t);
|
|
44
|
+
if (s) {
|
|
45
|
+
const l = [], b = t.slice(0, s.start);
|
|
46
|
+
e && b.trim() && l.push({ type: "text", value: b.trim() }), l.push({ type: "markdown", value: s.block });
|
|
47
|
+
const u = t.slice(s.end);
|
|
48
|
+
return u.trim() && l.push(
|
|
49
|
+
...e ? f(u, !0) : f(u)
|
|
50
|
+
), l;
|
|
51
|
+
}
|
|
52
|
+
if (t.match(/<svg[\s\S]*?<\/svg>/i) && e)
|
|
53
|
+
return t.trim().toLowerCase().endsWith("</svg>") ? [{ type: "markdown", value: t }] : [{ type: "markdown", value: `${t}</svg>` }];
|
|
54
|
+
const c = t.search(S), o = I(t);
|
|
55
|
+
if (c === -1 && !o)
|
|
56
|
+
return e && t.trim() ? [{ type: "text", value: t }] : [];
|
|
57
|
+
const d = !!o && (c === -1 || o.start < c), m = d ? o.start : c, h = d ? o.end : k(t, m), a = [], g = t.slice(0, m), x = t.slice(m, h), v = t.slice(h);
|
|
58
|
+
return e && g.trim() && a.push({ type: "text", value: g }), a.push({
|
|
59
|
+
type: d ? "markdown" : "sandbox",
|
|
60
|
+
value: x
|
|
61
|
+
}), v.trim() && a.push(...f(v, e)), a;
|
|
31
62
|
};
|
|
32
63
|
export {
|
|
33
|
-
|
|
64
|
+
f as splitContentSegments
|
|
34
65
|
};
|
|
35
66
|
//# sourceMappingURL=split-content.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-content.js","sources":["../../../../src/components/ContentRender/utils/split-content.ts"],"sourcesContent":["export type RenderSegment =\n | { type: \"markdown\"; value: string }\n | { type: \"sandbox\"; value: string };\n\nconst SANDBOX_START_PATTERN =\n /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)[\\s>]/i;\n\nconst INLINE_SANDBOX_PATTERNS: RegExp[] = [\n /<svg[\\s\\S]*?<\\/svg>/i,\n /<img\\b[^>]*?>/i,\n /```mermaid[\\s\\S]*?```/i,\n /```[a-zA-Z0-9]+[\\s\\S]*?```/i,\n];\n\nconst closingBoundary = /<\\/[a-z][^>]*>\\s*\\n(?=[^\\s<])/gi;\n\ntype MatchResult = { start: number; end: number };\n\nconst findHtmlBlockEnd = (raw: string, startIndex: number) => {\n let blockEnd = raw.length;\n let match: RegExpExecArray | null;\n closingBoundary.lastIndex = 0;\n\n while ((match = closingBoundary.exec(raw))) {\n if (match.index <= startIndex) continue;\n blockEnd = match.index + match[0].length;\n break;\n }\n\n return blockEnd;\n};\n\nconst findInlineSandboxMatch = (raw: string): MatchResult | null => {\n let earliest: MatchResult | null = null;\n\n INLINE_SANDBOX_PATTERNS.forEach((pattern) => {\n const match = pattern.exec(raw);\n if (!match || typeof match.index !== \"number\") return;\n const start = match.index;\n const end = match.index + match[0].length;\n\n if (!earliest || start < earliest.start) {\n earliest = { start, end };\n }\n });\n\n return earliest;\n};\n\n// Split incoming markdown content into markdown and sandbox HTML segments\nexport const splitContentSegments = (raw: string): RenderSegment[] => {\n const sandboxStartIndex = raw.search(SANDBOX_START_PATTERN);\n const inlineMatch = findInlineSandboxMatch(raw);\n\n if (sandboxStartIndex === -1 && !inlineMatch) {\n return [];\n }\n\n const shouldUseInline =\n !!inlineMatch &&\n (sandboxStartIndex === -1 || inlineMatch.start < sandboxStartIndex);\n\n const startIndex = shouldUseInline ? inlineMatch!.start : sandboxStartIndex;\n const blockEnd = shouldUseInline\n ? inlineMatch!.end\n : findHtmlBlockEnd(raw, startIndex);\n\n const segments: RenderSegment[] = [];\n const matchedBlock = raw.slice(startIndex, blockEnd);\n const after = raw.slice(blockEnd);\n\n segments.push({\n type: shouldUseInline ? \"markdown\" : \"sandbox\",\n value: matchedBlock,\n });\n\n if (after.trim()) {\n segments.push(...splitContentSegments(after));\n }\n\n return segments;\n};\n"],"names":["SANDBOX_START_PATTERN","INLINE_SANDBOX_PATTERNS","closingBoundary","findHtmlBlockEnd","raw","startIndex","blockEnd","match","findInlineSandboxMatch","earliest","pattern","start","end","splitContentSegments","
|
|
1
|
+
{"version":3,"file":"split-content.js","sources":["../../../../src/components/ContentRender/utils/split-content.ts"],"sourcesContent":["export type RenderSegment =\n | { type: \"markdown\"; value: string }\n | { type: \"sandbox\"; value: string }\n | { type: \"text\"; value: string };\n\nconst SANDBOX_START_PATTERN =\n /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)[\\s>]/i;\n\nconst INLINE_SANDBOX_PATTERNS: RegExp[] = [\n /<svg[\\s\\S]*?<\\/svg>/i,\n /<img\\b[^>]*?>/i,\n /```mermaid[\\s\\S]*?```/i,\n /```[a-zA-Z0-9]+[\\s\\S]*?```/i,\n];\n\nconst closingBoundary = /<\\/[a-z][^>]*>\\s*\\n(?=[^\\s<])/gi;\n\ntype MatchResult = { start: number; end: number };\n\nconst findHtmlBlockEnd = (raw: string, startIndex: number) => {\n let blockEnd = raw.length;\n let match: RegExpExecArray | null;\n closingBoundary.lastIndex = 0;\n\n while ((match = closingBoundary.exec(raw))) {\n if (match.index <= startIndex) continue;\n blockEnd = match.index + match[0].length;\n break;\n }\n\n return blockEnd;\n};\n\nconst findInlineSandboxMatch = (raw: string): MatchResult | null => {\n let earliest: MatchResult | null = null;\n\n INLINE_SANDBOX_PATTERNS.forEach((pattern) => {\n const match = pattern.exec(raw);\n if (!match || typeof match.index !== \"number\") return;\n const start = match.index;\n const end = match.index + match[0].length;\n\n if (!earliest || start < earliest.start) {\n earliest = { start, end };\n }\n });\n\n return earliest;\n};\n\nconst extractTableBlock = (\n raw: string\n): { start: number; block: string; end: number } | null => {\n const tableStart = raw.search(/^\\s*\\|.*\\|\\s*$/m);\n if (tableStart === -1) return null;\n\n const lines = raw.slice(tableStart).split(\"\\n\");\n let endIndex = tableStart;\n const tableLines: string[] = [];\n\n for (const line of lines) {\n const trimmed = line.trim();\n if (!trimmed.startsWith(\"|\")) break;\n tableLines.push(line);\n endIndex += line.length + 1; // include newline\n }\n\n const block = tableLines.join(\"\\n\");\n return { start: tableStart, block, end: endIndex - 1 };\n};\n\n// Split incoming markdown content into markdown and sandbox HTML segments\nexport const splitContentSegments = (\n raw: string,\n keepText = false\n): RenderSegment[] => {\n const fenceStart = raw.indexOf(\"```\");\n if (keepText && fenceStart !== -1) {\n const closingFence = raw.indexOf(\"```\", fenceStart + 3);\n if (closingFence === -1) {\n return [{ type: \"markdown\", value: raw }];\n }\n }\n\n const svgOpenIndex = raw.search(/<svg\\b/i);\n if (svgOpenIndex !== -1 && raw.indexOf(\"</svg>\", svgOpenIndex) === -1) {\n return [{ type: \"markdown\", value: raw }];\n }\n\n const tableBlock = extractTableBlock(raw);\n if (tableBlock) {\n const segments: RenderSegment[] = [];\n const before = raw.slice(0, tableBlock.start);\n if (keepText && before.trim()) {\n segments.push({ type: \"text\", value: before.trim() });\n }\n segments.push({ type: \"markdown\", value: tableBlock.block });\n const after = raw.slice(tableBlock.end);\n if (after.trim()) {\n segments.push(\n ...(keepText\n ? splitContentSegments(after, true)\n : splitContentSegments(after))\n );\n }\n return segments;\n }\n\n const completeSvgMatch = raw.match(/<svg[\\s\\S]*?<\\/svg>/i);\n if (completeSvgMatch && keepText) {\n if (!raw.trim().toLowerCase().endsWith(\"</svg>\")) {\n return [{ type: \"markdown\", value: `${raw}</svg>` }];\n }\n return [{ type: \"markdown\", value: raw }];\n }\n\n const sandboxStartIndex = raw.search(SANDBOX_START_PATTERN);\n const inlineMatch = findInlineSandboxMatch(raw);\n\n if (sandboxStartIndex === -1 && !inlineMatch) {\n if (keepText && raw.trim()) {\n return [{ type: \"text\", value: raw }];\n }\n return [];\n }\n\n const shouldUseInline =\n !!inlineMatch &&\n (sandboxStartIndex === -1 || inlineMatch.start < sandboxStartIndex);\n\n const startIndex = shouldUseInline ? inlineMatch!.start : sandboxStartIndex;\n const blockEnd = shouldUseInline\n ? inlineMatch!.end\n : findHtmlBlockEnd(raw, startIndex);\n\n const segments: RenderSegment[] = [];\n const before = raw.slice(0, startIndex);\n const matchedBlock = raw.slice(startIndex, blockEnd);\n const after = raw.slice(blockEnd);\n\n if (keepText && before.trim()) {\n segments.push({ type: \"text\", value: before });\n }\n\n segments.push({\n type: shouldUseInline ? \"markdown\" : \"sandbox\",\n value: matchedBlock,\n });\n\n if (after.trim()) {\n segments.push(...splitContentSegments(after, keepText));\n }\n\n return segments;\n};\n"],"names":["SANDBOX_START_PATTERN","INLINE_SANDBOX_PATTERNS","closingBoundary","findHtmlBlockEnd","raw","startIndex","blockEnd","match","findInlineSandboxMatch","earliest","pattern","start","end","extractTableBlock","tableStart","lines","endIndex","tableLines","line","block","splitContentSegments","keepText","fenceStart","svgOpenIndex","tableBlock","segments","before","after","sandboxStartIndex","inlineMatch","shouldUseInline","matchedBlock"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { j as i } from "../../../_virtual/jsx-runtime.js";
|
|
2
2
|
import * as d from "react";
|
|
3
3
|
import n from "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-textarea@1.10.2_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-textarea/es/TextArea.js";
|
|
4
|
-
import "../../../_virtual/
|
|
4
|
+
import "../../../_virtual/index4.js";
|
|
5
5
|
import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-resize-observer@1.4.3_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-resize-observer/es/index.js";
|
|
6
6
|
import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/hooks/useLayoutEffect.js";
|
|
7
7
|
import "../../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/rc-util@5.44.4_react-dom@19.0.1_react@19.0.1__react@19.0.1/node_modules/rc-util/es/raf.js";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-space-x-reverse:0}}}@layer theme{:root,:host{--font-sans:"PingFang SC",system-ui,sans-serif;--font-mono:"JetBrains Mono",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-spin:spin 1s linear infinite;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:var(--background);--color-foreground:var(--foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-border:var(--border);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground)}}@layer base{@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:#e2e8f0}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:0 0 0 2px var(--color-primary)}@supports (color:color-mix(in lab, red, red)){:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary)10%,transparent)}}.font-mono{font-feature-settings:"liga" 0,"clig" 0,"calt" 0}}@layer components;@layer utilities{.\@container\/card-header{container:card-header/inline-size}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.top-\[50\%\]{top:50%}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.left-3{left:calc(var(--spacing)*3)}.left-\[50\%\]{left:50%}.z-10{z-index:10}.z-50{z-index:50}.order-first{order:-9999}.order-last{order:9999}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-4{margin-block:calc(var(--spacing)*4)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-\[9px\]{margin-top:9px}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-\[2px\]{margin-bottom:2px}.ml-2{margin-left:calc(var(--spacing)*2)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.list-item{display:list-item}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-48{height:calc(var(--spacing)*48)}.h-auto{height:auto}.h-full{height:100%}.max-h-\[300px\]{max-height:300px}.min-h-\[32px\]{min-height:32px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.w-24{width:calc(var(--spacing)*24)}.w-72{width:calc(var(--spacing)*72)}.w-\[360px\]{width:360px}.w-\[1024px\]{width:1024px}.w-auto{width:auto}.w-full{width:100%}.max-w-\[500px\]{max-width:500px}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\[300px\]{min-width:300px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.cursor-wait{cursor:wait}.resize{resize:both}.resize-none{resize:none}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.auto-rows-min{grid-auto-rows:min-content}.grid-rows-\[20px_1fr_20px\]{grid-template-rows:20px 1fr 20px}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-16{gap:calc(var(--spacing)*16)}.gap-\[24px\]{gap:24px}.gap-\[32px\]{gap:32px}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}.gap-x-6{column-gap:calc(var(--spacing)*6)}.gap-y-\[9px\]{row-gap:9px}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[calc\(var\(--radius\)-5px\)\]{border-radius:calc(var(--radius) - 5px)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-solid{--tw-border-style:solid;border-style:solid}.border-\[\#e5e5e5\]{border-color:#e5e5e5}.border-black\/\[\.08\]{border-color:#00000014}@supports (color:color-mix(in lab, red, red)){.border-black\/\[\.08\]{border-color:color-mix(in oklab,var(--color-black)8%,transparent)}}.border-blue-600{border-color:var(--color-blue-600)}.border-border{border-color:var(--color-border)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-muted{border-color:var(--color-muted)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-transparent{border-color:#0000}.border-white\/40{border-color:#fff6}@supports (color:color-mix(in lab, red, red)){.border-white\/40{border-color:color-mix(in oklab,var(--color-white)40%,transparent)}}.bg-\[\#111\]{background-color:#111}.bg-\[\#D7D7D7\]{background-color:#d7d7d7}.bg-accent{background-color:var(--color-accent)}.bg-background,.bg-background\/80{background-color:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab,var(--color-background)80%,transparent)}}.bg-black{background-color:var(--color-black)}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab,var(--color-black)20%,transparent)}}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/\[\.05\]{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.bg-black\/\[\.05\]{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-foreground{background-color:var(--color-foreground)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-muted\/10{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/10{background-color:color-mix(in oklab,var(--color-muted)10%,transparent)}}.bg-muted\/40{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab,var(--color-muted)40%,transparent)}}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.fill-\[\#111\]{fill:#111}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing)*0)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-0{padding-inline:calc(var(--spacing)*0)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-3{padding-top:calc(var(--spacing)*3)}.pr-0{padding-right:calc(var(--spacing)*0)}.pr-3{padding-right:calc(var(--spacing)*3)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pb-20{padding-bottom:calc(var(--spacing)*20)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.font-\[family-name\:var\(--font-geist-mono\)\]{font-family:var(--font-geist-mono)}.font-\[family-name\:var\(--font-geist-sans\)\]{font-family:var(--font-geist-sans)}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\/6{font-size:var(--text-sm);line-height:calc(var(--spacing)*6)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[16px\]{font-size:16px}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#0A0A0A\]{color:#0a0a0a}.text-background{color:var(--color-background)}.text-foreground{color:var(--color-foreground)}.text-gray-500{color:var(--color-gray-500)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-neutral-900{color:var(--color-neutral-900)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab,var(--color-white)70%,transparent)}}.text-yellow-600{color:var(--color-yellow-600)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.italic{font-style:italic}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.05\)\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.group\/input-group):has(>input) *){padding-top:calc(var(--spacing)*2.5)}.group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.group\/input-group):has(>input) *){padding-bottom:calc(var(--spacing)*2.5)}.group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.group\/input-group)[data-disabled=true] *){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--color-primary)}.selection\:bg-primary::selection{background-color:var(--color-primary)}.selection\:text-primary-foreground ::selection{color:var(--color-primary-foreground)}.selection\:text-primary-foreground::selection{color:var(--color-primary-foreground)}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:calc(var(--spacing)*7)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-foreground::file-selector-button{color:var(--color-foreground)}.placeholder\:text-\[rgba\(99\,114\,128\,1\)\]::placeholder{color:#637280}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}@media (hover:hover){.hover\:border-blue-500:hover{border-color:var(--color-blue-500)}.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-\[\#383838\]:hover{background-color:#383838}.hover\:bg-\[\#f2f2f2\]:hover{background-color:#f2f2f2}.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-primary\/90:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:underline-offset-4:hover{text-underline-offset:4px}.hover\:opacity-100:hover{opacity:1}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-\[\>\[data-align\=block-end\]\]\:h-auto:has(>[data-align=block-end]){height:auto}.has-\[\>\[data-align\=block-end\]\]\:flex-col:has(>[data-align=block-end]){flex-direction:column}.has-\[\>\[data-align\=block-start\]\]\:h-auto:has(>[data-align=block-start]){height:auto}.has-\[\>\[data-align\=block-start\]\]\:flex-col:has(>[data-align=block-start]){flex-direction:column}.has-\[\>button\]\:mr-\[-0\.45rem\]:has(>button){margin-right:-.45rem}.has-\[\>button\]\:ml-\[-0\.45rem\]:has(>button){margin-left:-.45rem}.has-\[\>kbd\]\:mr-\[-0\.35rem\]:has(>kbd){margin-right:-.35rem}.has-\[\>kbd\]\:ml-\[-0\.35rem\]:has(>kbd){margin-left:-.35rem}.has-\[\>svg\]\:p-0:has(>svg){padding:calc(var(--spacing)*0)}.has-\[\>svg\]\:px-2:has(>svg){padding-inline:calc(var(--spacing)*2)}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--spacing)*2.5)}.has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--spacing)*3)}.has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--spacing)*4)}.has-\[\>textarea\]\:h-auto:has(>textarea){height:auto}.data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--color-accent)}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:var(--color-muted-foreground)}@media (min-width:40rem){.sm\:h-12{height:calc(var(--spacing)*12)}.sm\:w-auto{width:auto}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:justify-end{justify-content:flex-end}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:var(--radius-lg)}.sm\:p-20{padding:calc(var(--spacing)*20)}.sm\:px-5{padding-inline:calc(var(--spacing)*5)}.sm\:text-left{text-align:left}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media (min-width:48rem){.md\:w-\[158px\]{width:158px}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (prefers-color-scheme:dark){.dark\:border-white\/\[\.145\]{border-color:#ffffff25}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/\[\.145\]{border-color:color-mix(in oklab,var(--color-white)14.5%,transparent)}}.dark\:bg-transparent{background-color:#0000}.dark\:bg-white\/\[\.06\]{background-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/\[\.06\]{background-color:color-mix(in oklab,var(--color-white)6%,transparent)}}.dark\:invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.dark\:hover\:bg-\[\#1a1a1a\]:hover{background-color:#1a1a1a}.dark\:hover\:bg-\[\#ccc\]:hover{background-color:#ccc}.dark\:hover\:bg-accent\/50:hover{background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--color-accent)50%,transparent)}}}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\.border-b\]\:pb-3.border-b{padding-bottom:calc(var(--spacing)*3)}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing)*6)}.\[\.border-t\]\:pt-3.border-t{padding-top:calc(var(--spacing)*3)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing)*6)}.has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has(>[data-align=block-end])>input{padding-top:calc(var(--spacing)*3)}.has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has(>[data-align=block-start])>input{padding-bottom:calc(var(--spacing)*3)}.has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-2:has(>[data-align=inline-end])>input{padding-right:calc(var(--spacing)*2)}.has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-2:has(>[data-align=inline-start])>input{padding-left:calc(var(--spacing)*2)}.\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\]>kbd{border-radius:calc(var(--radius) - 5px)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5>svg:not([class*=size-]){width:calc(var(--spacing)*3.5);height:calc(var(--spacing)*3.5)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4>svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.bg-border{background-color:#e2e8f0!important}.section-subtitle{color:#64748bb3;font-size:.75rem;line-height:1}.title-subtitle-container{align-content:flex-start;align-items:baseline;gap:.2rem .4rem;line-height:1.3}.section-title-main{font-size:1.125rem;font-weight:700}.section-title-form{font-size:1rem;font-weight:600;line-height:1.25}}#storybook-root{width:100%}:root{--background:#fff;--foreground:#171717;--primary:#0f63ee;--primary-foreground:#fff;--border:#e2e8f0;--muted:#f8fafc;--muted-foreground:#64748b;--accent:#f5f5f5;--accent-foreground:#0f172a}body{background:var(--background);color:var(--foreground);font-family:PingFang SC,Microsoft YaHei,Source Han Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-space-x-reverse:0}}}@layer theme{:root,:host{--font-sans:"PingFang SC",system-ui,sans-serif;--font-mono:"JetBrains Mono",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-lg:32rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--animate-spin:spin 1s linear infinite;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:var(--background);--color-foreground:var(--foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-border:var(--border);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground)}}@layer base{@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:#e2e8f0}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;box-shadow:0 0 0 2px var(--color-primary)}@supports (color:color-mix(in lab, red, red)){:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary)10%,transparent)}}.font-mono{font-feature-settings:"liga" 0,"clig" 0,"calt" 0}}@layer components;@layer utilities{.\@container\/card-header{container:card-header/inline-size}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.top-\[50\%\]{top:50%}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.left-3{left:calc(var(--spacing)*3)}.left-\[50\%\]{left:50%}.z-10{z-index:10}.z-50{z-index:50}.order-first{order:-9999}.order-last{order:9999}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-4{margin-block:calc(var(--spacing)*4)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-\[9px\]{margin-top:9px}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-\[2px\]{margin-bottom:2px}.ml-2{margin-left:calc(var(--spacing)*2)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.list-item{display:list-item}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.size-6{width:calc(var(--spacing)*6);height:calc(var(--spacing)*6)}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-48{height:calc(var(--spacing)*48)}.h-auto{height:auto}.h-full{height:100%}.max-h-\[300px\]{max-height:300px}.min-h-\[32px\]{min-height:32px}.min-h-screen{min-height:100vh}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.w-24{width:calc(var(--spacing)*24)}.w-72{width:calc(var(--spacing)*72)}.w-\[360px\]{width:360px}.w-\[1024px\]{width:1024px}.w-auto{width:auto}.w-full{width:100%}.max-w-\[500px\]{max-width:500px}.max-w-lg{max-width:var(--container-lg)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\[300px\]{min-width:300px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.cursor-wait{cursor:wait}.resize{resize:both}.resize-none{resize:none}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.auto-rows-min{grid-auto-rows:min-content}.grid-rows-\[20px_1fr_20px\]{grid-template-rows:20px 1fr 20px}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-16{gap:calc(var(--spacing)*16)}.gap-\[24px\]{gap:24px}.gap-\[32px\]{gap:32px}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}.gap-x-6{column-gap:calc(var(--spacing)*6)}.gap-y-\[9px\]{row-gap:9px}.self-end{align-self:flex-end}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[calc\(var\(--radius\)-5px\)\]{border-radius:calc(var(--radius) - 5px)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-solid{--tw-border-style:solid;border-style:solid}.border-\[\#e5e5e5\]{border-color:#e5e5e5}.border-black\/\[\.08\]{border-color:#00000014}@supports (color:color-mix(in lab, red, red)){.border-black\/\[\.08\]{border-color:color-mix(in oklab,var(--color-black)8%,transparent)}}.border-blue-600{border-color:var(--color-blue-600)}.border-border{border-color:var(--color-border)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-muted{border-color:var(--color-muted)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-transparent{border-color:#0000}.border-white\/40{border-color:#fff6}@supports (color:color-mix(in lab, red, red)){.border-white\/40{border-color:color-mix(in oklab,var(--color-white)40%,transparent)}}.bg-\[\#111\]{background-color:#111}.bg-\[\#D7D7D7\]{background-color:#d7d7d7}.bg-accent{background-color:var(--color-accent)}.bg-background,.bg-background\/80{background-color:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab,var(--color-background)80%,transparent)}}.bg-black{background-color:var(--color-black)}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab,var(--color-black)20%,transparent)}}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/75{background-color:#000000bf}@supports (color:color-mix(in lab, red, red)){.bg-black\/75{background-color:color-mix(in oklab,var(--color-black)75%,transparent)}}.bg-black\/\[\.05\]{background-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.bg-black\/\[\.05\]{background-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-foreground{background-color:var(--color-foreground)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-muted\/10{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/10{background-color:color-mix(in oklab,var(--color-muted)10%,transparent)}}.bg-muted\/40{background-color:var(--color-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab,var(--color-muted)40%,transparent)}}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.fill-\[\#111\]{fill:#111}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing)*0)}.p-1\.5{padding:calc(var(--spacing)*1.5)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-0{padding-inline:calc(var(--spacing)*0)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-3{padding-top:calc(var(--spacing)*3)}.pr-0{padding-right:calc(var(--spacing)*0)}.pr-3{padding-right:calc(var(--spacing)*3)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pb-20{padding-bottom:calc(var(--spacing)*20)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.font-\[family-name\:var\(--font-geist-mono\)\]{font-family:var(--font-geist-mono)}.font-\[family-name\:var\(--font-geist-sans\)\]{font-family:var(--font-geist-sans)}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\/6{font-size:var(--text-sm);line-height:calc(var(--spacing)*6)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[16px\]{font-size:16px}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-\.01em\]{--tw-tracking:-.01em;letter-spacing:-.01em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#0A0A0A\]{color:#0a0a0a}.text-background{color:var(--color-background)}.text-foreground{color:var(--color-foreground)}.text-gray-500{color:var(--color-gray-500)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-neutral-900{color:var(--color-neutral-900)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab,var(--color-white)70%,transparent)}}.text-yellow-600{color:var(--color-yellow-600)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.italic{font-style:italic}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.05\)\]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-offset-background{--tw-ring-offset-color:var(--color-background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.group\/input-group):has(>input) *){padding-top:calc(var(--spacing)*2.5)}.group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.group\/input-group):has(>input) *){padding-bottom:calc(var(--spacing)*2.5)}.group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.group\/input-group)[data-disabled=true] *){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--color-primary)}.selection\:bg-primary::selection{background-color:var(--color-primary)}.selection\:text-primary-foreground ::selection{color:var(--color-primary-foreground)}.selection\:text-primary-foreground::selection{color:var(--color-primary-foreground)}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:calc(var(--spacing)*7)}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-foreground::file-selector-button{color:var(--color-foreground)}.placeholder\:text-\[rgba\(99\,114\,128\,1\)\]::placeholder{color:#637280}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}@media (hover:hover){.hover\:border-blue-500:hover{border-color:var(--color-blue-500)}.hover\:border-transparent:hover{border-color:#0000}.hover\:bg-\[\#383838\]:hover{background-color:#383838}.hover\:bg-\[\#f2f2f2\]:hover{background-color:#f2f2f2}.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-primary\/90:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:underline-offset-4:hover{text-underline-offset:4px}.hover\:opacity-100:hover{opacity:1}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-0:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.has-\[\>\[data-align\=block-end\]\]\:h-auto:has(>[data-align=block-end]){height:auto}.has-\[\>\[data-align\=block-end\]\]\:flex-col:has(>[data-align=block-end]){flex-direction:column}.has-\[\>\[data-align\=block-start\]\]\:h-auto:has(>[data-align=block-start]){height:auto}.has-\[\>\[data-align\=block-start\]\]\:flex-col:has(>[data-align=block-start]){flex-direction:column}.has-\[\>button\]\:mr-\[-0\.45rem\]:has(>button){margin-right:-.45rem}.has-\[\>button\]\:ml-\[-0\.45rem\]:has(>button){margin-left:-.45rem}.has-\[\>kbd\]\:mr-\[-0\.35rem\]:has(>kbd){margin-right:-.35rem}.has-\[\>kbd\]\:ml-\[-0\.35rem\]:has(>kbd){margin-left:-.35rem}.has-\[\>svg\]\:p-0:has(>svg){padding:calc(var(--spacing)*0)}.has-\[\>svg\]\:px-2:has(>svg){padding-inline:calc(var(--spacing)*2)}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--spacing)*2.5)}.has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--spacing)*3)}.has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--spacing)*4)}.has-\[\>textarea\]\:h-auto:has(>textarea){height:auto}.data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--color-accent)}.data-\[state\=open\]\:text-muted-foreground[data-state=open]{color:var(--color-muted-foreground)}@media (min-width:40rem){.sm\:h-12{height:calc(var(--spacing)*12)}.sm\:w-auto{width:auto}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:justify-end{justify-content:flex-end}:where(.sm\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}.sm\:rounded-lg{border-radius:var(--radius-lg)}.sm\:p-20{padding:calc(var(--spacing)*20)}.sm\:px-5{padding-inline:calc(var(--spacing)*5)}.sm\:text-left{text-align:left}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media (min-width:48rem){.md\:w-\[158px\]{width:158px}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (prefers-color-scheme:dark){.dark\:border-white\/\[\.145\]{border-color:#ffffff25}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/\[\.145\]{border-color:color-mix(in oklab,var(--color-white)14.5%,transparent)}}.dark\:bg-transparent{background-color:#0000}.dark\:bg-white\/\[\.06\]{background-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/\[\.06\]{background-color:color-mix(in oklab,var(--color-white)6%,transparent)}}.dark\:invert{--tw-invert:invert(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}@media (hover:hover){.dark\:hover\:bg-\[\#1a1a1a\]:hover{background-color:#1a1a1a}.dark\:hover\:bg-\[\#ccc\]:hover{background-color:#ccc}.dark\:hover\:bg-accent\/50:hover{background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--color-accent)50%,transparent)}}}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.\[\.border-b\]\:pb-3.border-b{padding-bottom:calc(var(--spacing)*3)}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing)*6)}.\[\.border-t\]\:pt-3.border-t{padding-top:calc(var(--spacing)*3)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing)*6)}.has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has(>[data-align=block-end])>input{padding-top:calc(var(--spacing)*3)}.has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has(>[data-align=block-start])>input{padding-bottom:calc(var(--spacing)*3)}.has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-2:has(>[data-align=inline-end])>input{padding-right:calc(var(--spacing)*2)}.has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-2:has(>[data-align=inline-start])>input{padding-left:calc(var(--spacing)*2)}.\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\]>kbd{border-radius:calc(var(--radius) - 5px)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5>svg:not([class*=size-]){width:calc(var(--spacing)*3.5);height:calc(var(--spacing)*3.5)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4>svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.bg-border{background-color:#e2e8f0!important}.section-subtitle{color:#64748bb3;font-size:.75rem;line-height:1}.title-subtitle-container{align-content:flex-start;align-items:baseline;gap:.2rem .4rem;line-height:1.3}.section-title-main{font-size:1.125rem;font-weight:700}.section-title-form{font-size:1rem;font-weight:600;line-height:1.25}}#storybook-root{width:100%}:root{--background:#fff;--foreground:#171717;--primary:#0f63ee;--primary-foreground:#fff;--border:#e2e8f0;--muted:#f8fafc;--muted-foreground:#64748b;--accent:#f5f5f5;--accent-foreground:#0f172a}body{background:var(--background);color:var(--foreground);font-family:PingFang SC,Microsoft YaHei,Source Han Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}
|