@lattice-php/lattice 0.37.0 → 0.38.0
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/types/generated.d.ts +2 -0
- package/dist/ui/code-block-view.d.ts +1 -1
- package/dist/ui/code-block-view.js +27 -7
- package/dist/ui/code-block-view.js.map +1 -1
- package/dist/ui/code-block.d.ts +5 -2
- package/dist/ui/code-block.js +17 -6
- package/dist/ui/code-block.js.map +1 -1
- package/dist-standalone/chunks/{code-block-view-D464jtHN.js → code-block-view-fzD5e55N.js} +9 -9
- package/dist-standalone/lattice.css +1 -1
- package/dist-standalone/lattice.js +3 -2
- package/dist-standalone/manifest.json +1 -1
- package/package.json +1 -1
|
@@ -326,6 +326,8 @@ export type CodeBlock = {
|
|
|
326
326
|
code: string;
|
|
327
327
|
copyable: boolean;
|
|
328
328
|
language: CodeBlockLanguage;
|
|
329
|
+
lineNumbers: boolean;
|
|
330
|
+
maxHeight: number | null;
|
|
329
331
|
wrap: boolean;
|
|
330
332
|
};
|
|
331
333
|
export type CodeBlockLanguage = "text" | "json" | "javascript" | "shell" | "php";
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { CodeBlockViewProps } from './code-block.js';
|
|
2
|
-
declare function CodeBlockView({ children,
|
|
2
|
+
declare function CodeBlockView({ children, language, lineNumbers, maxHeight, wrap }: CodeBlockViewProps): import("react").JSX.Element;
|
|
3
3
|
export default CodeBlockView;
|
|
@@ -6,7 +6,7 @@ import { php } from "@codemirror/lang-php";
|
|
|
6
6
|
import { HighlightStyle, StreamLanguage, syntaxHighlighting } from "@codemirror/language";
|
|
7
7
|
import { shell } from "@codemirror/legacy-modes/mode/shell";
|
|
8
8
|
import { Compartment, EditorState } from "@codemirror/state";
|
|
9
|
-
import { EditorView } from "@codemirror/view";
|
|
9
|
+
import { EditorView, lineNumbers } from "@codemirror/view";
|
|
10
10
|
import { tags } from "@lezer/highlight";
|
|
11
11
|
//#region resources/js/ui/code-block-view.tsx
|
|
12
12
|
var languages = {
|
|
@@ -67,18 +67,26 @@ var codeBlockTheme = EditorView.theme({
|
|
|
67
67
|
overflow: "auto"
|
|
68
68
|
},
|
|
69
69
|
".cm-content": { padding: "0.75rem" },
|
|
70
|
+
".cm-gutters": {
|
|
71
|
+
backgroundColor: "transparent",
|
|
72
|
+
borderRightColor: "var(--lt-border)",
|
|
73
|
+
color: "var(--lt-muted-fg)"
|
|
74
|
+
},
|
|
75
|
+
".cm-lineNumbers .cm-gutterElement": { padding: "0 0.75rem" },
|
|
70
76
|
".cm-line": { padding: "0" }
|
|
71
77
|
});
|
|
72
|
-
|
|
73
|
-
function CodeBlockView({ children, copyable, language, wrap }) {
|
|
78
|
+
function CodeBlockView({ children, language, lineNumbers: lineNumbers$1, maxHeight, wrap }) {
|
|
74
79
|
const container = useRef(null);
|
|
80
|
+
const content = useRef(children);
|
|
81
|
+
const editor = useRef(null);
|
|
82
|
+
content.current = children;
|
|
75
83
|
useEffect(() => {
|
|
76
84
|
if (!container.current) return;
|
|
77
85
|
const languageCompartment = new Compartment();
|
|
78
86
|
const customLanguage = typeof language === "function" ? language : null;
|
|
79
87
|
const initialLanguage = typeof language === "function" ? [] : languages[language];
|
|
80
88
|
const view = new EditorView({
|
|
81
|
-
doc:
|
|
89
|
+
doc: content.current,
|
|
82
90
|
parent: container.current,
|
|
83
91
|
extensions: [
|
|
84
92
|
EditorState.readOnly.of(true),
|
|
@@ -87,10 +95,12 @@ function CodeBlockView({ children, copyable, language, wrap }) {
|
|
|
87
95
|
languageCompartment.of(initialLanguage),
|
|
88
96
|
syntaxHighlighting(highlightStyle),
|
|
89
97
|
codeBlockTheme,
|
|
90
|
-
|
|
98
|
+
lineNumbers$1 ? lineNumbers() : [],
|
|
99
|
+
maxHeight === null ? [] : EditorView.theme({ "&": { maxHeight: `${maxHeight}px` } }),
|
|
91
100
|
wrap ? EditorView.lineWrapping : []
|
|
92
101
|
]
|
|
93
102
|
});
|
|
103
|
+
editor.current = view;
|
|
94
104
|
let active = true;
|
|
95
105
|
if (customLanguage) customLanguage().then((extension) => {
|
|
96
106
|
if (active) view.dispatch({ effects: languageCompartment.reconfigure(extension) });
|
|
@@ -99,14 +109,24 @@ function CodeBlockView({ children, copyable, language, wrap }) {
|
|
|
99
109
|
});
|
|
100
110
|
return () => {
|
|
101
111
|
active = false;
|
|
112
|
+
editor.current = null;
|
|
102
113
|
view.destroy();
|
|
103
114
|
};
|
|
104
115
|
}, [
|
|
105
|
-
children,
|
|
106
|
-
copyable,
|
|
107
116
|
language,
|
|
117
|
+
lineNumbers$1,
|
|
118
|
+
maxHeight,
|
|
108
119
|
wrap
|
|
109
120
|
]);
|
|
121
|
+
useEffect(() => {
|
|
122
|
+
const view = editor.current;
|
|
123
|
+
if (!view || view.state.doc.toString() === children) return;
|
|
124
|
+
view.dispatch({ changes: {
|
|
125
|
+
from: 0,
|
|
126
|
+
to: view.state.doc.length,
|
|
127
|
+
insert: children
|
|
128
|
+
} });
|
|
129
|
+
}, [children]);
|
|
110
130
|
return /* @__PURE__ */ jsx("div", { ref: container });
|
|
111
131
|
}
|
|
112
132
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block-view.js","names":[],"sources":["../../resources/js/ui/code-block-view.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { javascript } from \"@codemirror/lang-javascript\";\nimport { json } from \"@codemirror/lang-json\";\nimport { php } from \"@codemirror/lang-php\";\nimport { HighlightStyle, StreamLanguage, syntaxHighlighting } from \"@codemirror/language\";\nimport { shell } from \"@codemirror/legacy-modes/mode/shell\";\nimport { Compartment, EditorState, type Extension } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\nimport { tags } from \"@lezer/highlight\";\nimport type { CodeBlockLanguage, CodeBlockViewProps } from \"./code-block\";\n\nconst languages: Record<CodeBlockLanguage, Extension> = {\n text: [],\n json: json(),\n javascript: javascript(),\n shell: StreamLanguage.define(shell),\n php: php(),\n};\n\nconst highlightStyle = HighlightStyle.define([\n { tag: tags.comment, color: \"var(--lt-muted-fg)\", fontStyle: \"italic\" },\n { tag: [tags.keyword, tags.operatorKeyword, tags.controlKeyword], color: \"var(--lt-primary)\" },\n { tag: [tags.string, tags.special(tags.string)], color: \"var(--lt-success)\" },\n { tag: [tags.number, tags.bool, tags.null], color: \"var(--lt-info)\" },\n { tag: [tags.function(tags.variableName), tags.labelName], color: \"var(--lt-accent-fg)\" },\n { tag: [tags.typeName, tags.className], color: \"var(--lt-danger)\" },\n { tag: tags.meta, color: \"var(--lt-muted-fg)\" },\n]);\n\nconst codeBlockTheme = EditorView.theme({\n \"&\": {\n backgroundColor: \"transparent\",\n color: \"var(--lt-fg)\",\n fontSize: \"0.75rem\",\n },\n \".cm-scroller\": {\n fontFamily: \"var(--lt-font-mono)\",\n lineHeight: \"1.5\",\n overflow: \"auto\",\n },\n \".cm-content\": { padding: \"0.75rem\" },\n \".cm-
|
|
1
|
+
{"version":3,"file":"code-block-view.js","names":[],"sources":["../../resources/js/ui/code-block-view.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { javascript } from \"@codemirror/lang-javascript\";\nimport { json } from \"@codemirror/lang-json\";\nimport { php } from \"@codemirror/lang-php\";\nimport { HighlightStyle, StreamLanguage, syntaxHighlighting } from \"@codemirror/language\";\nimport { shell } from \"@codemirror/legacy-modes/mode/shell\";\nimport { Compartment, EditorState, type Extension } from \"@codemirror/state\";\nimport { EditorView, lineNumbers as showLineNumbers } from \"@codemirror/view\";\nimport { tags } from \"@lezer/highlight\";\nimport type { CodeBlockLanguage, CodeBlockViewProps } from \"./code-block\";\n\nconst languages: Record<CodeBlockLanguage, Extension> = {\n text: [],\n json: json(),\n javascript: javascript(),\n shell: StreamLanguage.define(shell),\n php: php(),\n};\n\nconst highlightStyle = HighlightStyle.define([\n { tag: tags.comment, color: \"var(--lt-muted-fg)\", fontStyle: \"italic\" },\n { tag: [tags.keyword, tags.operatorKeyword, tags.controlKeyword], color: \"var(--lt-primary)\" },\n { tag: [tags.string, tags.special(tags.string)], color: \"var(--lt-success)\" },\n { tag: [tags.number, tags.bool, tags.null], color: \"var(--lt-info)\" },\n { tag: [tags.function(tags.variableName), tags.labelName], color: \"var(--lt-accent-fg)\" },\n { tag: [tags.typeName, tags.className], color: \"var(--lt-danger)\" },\n { tag: tags.meta, color: \"var(--lt-muted-fg)\" },\n]);\n\nconst codeBlockTheme = EditorView.theme({\n \"&\": {\n backgroundColor: \"transparent\",\n color: \"var(--lt-fg)\",\n fontSize: \"0.75rem\",\n },\n \".cm-scroller\": {\n fontFamily: \"var(--lt-font-mono)\",\n lineHeight: \"1.5\",\n overflow: \"auto\",\n },\n \".cm-content\": { padding: \"0.75rem\" },\n \".cm-gutters\": {\n backgroundColor: \"transparent\",\n borderRightColor: \"var(--lt-border)\",\n color: \"var(--lt-muted-fg)\",\n },\n \".cm-lineNumbers .cm-gutterElement\": { padding: \"0 0.75rem\" },\n \".cm-line\": { padding: \"0\" },\n});\n\nfunction CodeBlockView({ children, language, lineNumbers, maxHeight, wrap }: CodeBlockViewProps) {\n const container = useRef<HTMLDivElement>(null);\n const content = useRef(children);\n const editor = useRef<EditorView>(null);\n content.current = children;\n\n useEffect(() => {\n if (!container.current) {\n return;\n }\n\n const languageCompartment = new Compartment();\n const customLanguage = typeof language === \"function\" ? language : null;\n const initialLanguage = typeof language === \"function\" ? [] : languages[language];\n const view = new EditorView({\n doc: content.current,\n parent: container.current,\n extensions: [\n EditorState.readOnly.of(true),\n EditorView.editable.of(false),\n EditorView.contentAttributes.of({ role: \"code\" }),\n languageCompartment.of(initialLanguage),\n syntaxHighlighting(highlightStyle),\n codeBlockTheme,\n lineNumbers ? showLineNumbers() : [],\n maxHeight === null\n ? []\n : EditorView.theme({\n \"&\": { maxHeight: `${maxHeight}px` },\n }),\n wrap ? EditorView.lineWrapping : [],\n ],\n });\n editor.current = view;\n let active = true;\n\n if (customLanguage) {\n void customLanguage()\n .then((extension) => {\n if (active) {\n view.dispatch({ effects: languageCompartment.reconfigure(extension) });\n }\n })\n .catch((error: unknown) => {\n if (active) {\n console.warn(\"[lattice] CodeBlock language failed to load.\", error);\n }\n });\n }\n\n return () => {\n active = false;\n editor.current = null;\n view.destroy();\n };\n }, [language, lineNumbers, maxHeight, wrap]);\n\n useEffect(() => {\n const view = editor.current;\n\n if (!view || view.state.doc.toString() === children) {\n return;\n }\n\n view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: children } });\n }, [children]);\n\n return <div ref={container} />;\n}\n\nexport default CodeBlockView;\n"],"mappings":"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"}
|
package/dist/ui/code-block.d.ts
CHANGED
|
@@ -7,15 +7,18 @@ interface CodeBlockProps extends Omit<ComponentProps<"div">, "children"> {
|
|
|
7
7
|
children: string;
|
|
8
8
|
copyable?: boolean;
|
|
9
9
|
language?: CodeBlockLanguage | CodeBlockLanguageLoader;
|
|
10
|
+
lineNumbers?: boolean;
|
|
11
|
+
maxHeight?: number | null;
|
|
10
12
|
wrap?: boolean;
|
|
11
13
|
}
|
|
12
14
|
interface CodeBlockViewProps {
|
|
13
15
|
children: string;
|
|
14
|
-
copyable: boolean;
|
|
15
16
|
language: CodeBlockLanguage | CodeBlockLanguageLoader;
|
|
17
|
+
lineNumbers: boolean;
|
|
18
|
+
maxHeight: number | null;
|
|
16
19
|
wrap: boolean;
|
|
17
20
|
}
|
|
18
|
-
declare function CodeBlock({ "aria-label": ariaLabel, children, className, copyable, language, role, wrap, ...props }: CodeBlockProps): import("react").JSX.Element;
|
|
21
|
+
declare function CodeBlock({ "aria-label": ariaLabel, children, className, copyable, language, lineNumbers, maxHeight, role, wrap, ...props }: CodeBlockProps): import("react").JSX.Element;
|
|
19
22
|
declare const CodeBlockComponent: RendererComponent<"code-block">;
|
|
20
23
|
export default CodeBlockComponent;
|
|
21
24
|
export { CodeBlock };
|
package/dist/ui/code-block.js
CHANGED
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.js";
|
|
2
2
|
import { CopyButton } from "./copyable-text.js";
|
|
3
|
-
import { Suspense, lazy } from "react";
|
|
3
|
+
import { Fragment, Suspense, lazy } from "react";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
//#region resources/js/ui/code-block.tsx
|
|
6
6
|
var CodeBlockView = lazy(() => import("./code-block-view.js"));
|
|
7
|
-
function CodeBlock({ "aria-label": ariaLabel, children, className, copyable = false, language = "text", role = ariaLabel ? "region" : void 0, wrap = false, ...props }) {
|
|
7
|
+
function CodeBlock({ "aria-label": ariaLabel, children, className, copyable = false, language = "text", lineNumbers = false, maxHeight = null, role = ariaLabel ? "region" : void 0, wrap = false, ...props }) {
|
|
8
8
|
const fallback = /* @__PURE__ */ jsx("pre", {
|
|
9
|
-
className: cn("max-w-full overflow-
|
|
10
|
-
|
|
9
|
+
className: cn("max-w-full overflow-auto p-3 font-lt-mono text-xs", wrap && "whitespace-pre-wrap wrap-anywhere"),
|
|
10
|
+
style: { maxHeight: maxHeight ?? void 0 },
|
|
11
|
+
children: lineNumbers ? /* @__PURE__ */ jsx("code", {
|
|
12
|
+
className: "grid grid-cols-[auto_1fr]",
|
|
13
|
+
children: children.split("\n").map((line, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
className: "mr-3 border-r border-lt-border pr-3 text-right text-lt-muted-fg select-none",
|
|
16
|
+
children: index + 1
|
|
17
|
+
}), /* @__PURE__ */ jsx("span", { children: line || "" })] }, index))
|
|
18
|
+
}) : children
|
|
11
19
|
});
|
|
12
20
|
return /* @__PURE__ */ jsxs("div", {
|
|
13
21
|
"data-slot": "code-block",
|
|
@@ -19,12 +27,13 @@ function CodeBlock({ "aria-label": ariaLabel, children, className, copyable = fa
|
|
|
19
27
|
value: children,
|
|
20
28
|
label: ariaLabel ?? "code",
|
|
21
29
|
iconOnly: true,
|
|
22
|
-
className: "absolute top-
|
|
30
|
+
className: "absolute top-3 right-6 z-10 bg-lt-bg/80 hover:bg-lt-bg"
|
|
23
31
|
}) : null, /* @__PURE__ */ jsx(Suspense, {
|
|
24
32
|
fallback,
|
|
25
33
|
children: /* @__PURE__ */ jsx(CodeBlockView, {
|
|
26
|
-
copyable,
|
|
27
34
|
language,
|
|
35
|
+
lineNumbers,
|
|
36
|
+
maxHeight,
|
|
28
37
|
wrap,
|
|
29
38
|
children
|
|
30
39
|
})
|
|
@@ -34,6 +43,8 @@ function CodeBlock({ "aria-label": ariaLabel, children, className, copyable = fa
|
|
|
34
43
|
var CodeBlockComponent = ({ node }) => /* @__PURE__ */ jsx(CodeBlock, {
|
|
35
44
|
copyable: node.props.copyable,
|
|
36
45
|
language: node.props.language,
|
|
46
|
+
lineNumbers: node.props.lineNumbers,
|
|
47
|
+
maxHeight: node.props.maxHeight,
|
|
37
48
|
wrap: node.props.wrap,
|
|
38
49
|
children: node.props.code
|
|
39
50
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code-block.js","names":[],"sources":["../../resources/js/ui/code-block.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport type { ComponentProps } from \"react\";\nimport type { Extension } from \"@codemirror/state\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { CopyButton } from \"./copyable-text\";\n\nconst CodeBlockView = lazy(() => import(\"./code-block-view\"));\n\ntype CodeBlockLanguage = \"text\" | \"json\" | \"javascript\" | \"shell\" | \"php\";\ntype CodeBlockLanguageLoader = () => Promise<Extension>;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n children: string;\n copyable?: boolean;\n language?: CodeBlockLanguage | CodeBlockLanguageLoader;\n wrap?: boolean;\n}\n\ninterface CodeBlockViewProps {\n children: string;\n
|
|
1
|
+
{"version":3,"file":"code-block.js","names":[],"sources":["../../resources/js/ui/code-block.tsx"],"sourcesContent":["import { Fragment, lazy, Suspense } from \"react\";\nimport type { ComponentProps } from \"react\";\nimport type { Extension } from \"@codemirror/state\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { CopyButton } from \"./copyable-text\";\n\nconst CodeBlockView = lazy(() => import(\"./code-block-view\"));\n\ntype CodeBlockLanguage = \"text\" | \"json\" | \"javascript\" | \"shell\" | \"php\";\ntype CodeBlockLanguageLoader = () => Promise<Extension>;\n\ninterface CodeBlockProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n children: string;\n copyable?: boolean;\n language?: CodeBlockLanguage | CodeBlockLanguageLoader;\n lineNumbers?: boolean;\n maxHeight?: number | null;\n wrap?: boolean;\n}\n\ninterface CodeBlockViewProps {\n children: string;\n language: CodeBlockLanguage | CodeBlockLanguageLoader;\n lineNumbers: boolean;\n maxHeight: number | null;\n wrap: boolean;\n}\n\nfunction CodeBlock({\n \"aria-label\": ariaLabel,\n children,\n className,\n copyable = false,\n language = \"text\",\n lineNumbers = false,\n maxHeight = null,\n role = ariaLabel ? \"region\" : undefined,\n wrap = false,\n ...props\n}: CodeBlockProps) {\n const fallback = (\n <pre\n className={cn(\n \"max-w-full overflow-auto p-3 font-lt-mono text-xs\",\n wrap && \"whitespace-pre-wrap wrap-anywhere\",\n )}\n style={{ maxHeight: maxHeight ?? undefined }}\n >\n {lineNumbers ? (\n <code className=\"grid grid-cols-[auto_1fr]\">\n {children.split(\"\\n\").map((line, index) => (\n <Fragment key={index}>\n <span\n aria-hidden=\"true\"\n className=\"mr-3 border-r border-lt-border pr-3 text-right text-lt-muted-fg select-none\"\n >\n {index + 1}\n </span>\n <span>{line || \"\\u200b\"}</span>\n </Fragment>\n ))}\n </code>\n ) : (\n children\n )}\n </pre>\n );\n\n return (\n <div\n data-slot=\"code-block\"\n aria-label={ariaLabel}\n role={role}\n {...props}\n className={cn(\n \"relative max-w-full overflow-hidden rounded-lt-sm bg-lt-muted text-lt-fg\",\n className,\n )}\n >\n {copyable ? (\n <CopyButton\n value={children}\n label={ariaLabel ?? \"code\"}\n iconOnly\n className=\"absolute top-3 right-6 z-10 bg-lt-bg/80 hover:bg-lt-bg\"\n />\n ) : null}\n <Suspense fallback={fallback}>\n <CodeBlockView\n language={language}\n lineNumbers={lineNumbers}\n maxHeight={maxHeight}\n wrap={wrap}\n >\n {children}\n </CodeBlockView>\n </Suspense>\n </div>\n );\n}\n\nconst CodeBlockComponent: RendererComponent<\"code-block\"> = ({ node }) => (\n <CodeBlock\n copyable={node.props.copyable}\n language={node.props.language}\n lineNumbers={node.props.lineNumbers}\n maxHeight={node.props.maxHeight}\n wrap={node.props.wrap}\n >\n {node.props.code}\n </CodeBlock>\n);\n\nexport default CodeBlockComponent;\nexport { CodeBlock };\nexport type { CodeBlockLanguage, CodeBlockLanguageLoader, CodeBlockProps, CodeBlockViewProps };\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,WAAW,OAAO,uBAAoB;AAsB5D,SAAS,UAAU,EACjB,cAAc,WACd,UACA,WACA,WAAW,OACX,WAAW,QACX,cAAc,OACd,YAAY,MACZ,OAAO,YAAY,WAAW,KAAA,GAC9B,OAAO,OACP,GAAG,SACc;CACjB,MAAM,WACJ,oBAAC,OAAD;EACE,WAAW,GACT,qDACA,QAAQ,mCACV;EACA,OAAO,EAAE,WAAW,aAAa,KAAA,EAAU;EAE1C,UAAA,cACC,oBAAC,QAAD;GAAM,WAAU;GACb,UAAA,SAAS,MAAM,IAAI,CAAC,CAAC,KAAK,MAAM,UAC/B,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IAET,UAAA,QAAQ;GACL,CAAA,GACN,oBAAC,QAAD,EAAA,UAAO,QAAQ,IAAe,CAAA,CACtB,EAAA,GARK,KAQL,CACX;EACG,CAAA,IAEN;CAEC,CAAA;CAGP,OACE,qBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACN;EACN,GAAI;EACJ,WAAW,GACT,4EACA,SACF;EARF,UAAA,CAUG,WACC,oBAAC,YAAD;GACE,OAAO;GACP,OAAO,aAAa;GACpB,UAAA;GACA,WAAU;EACX,CAAA,IACC,MACJ,oBAAC,UAAD;GAAoB;GAClB,UAAA,oBAAC,eAAD;IACY;IACG;IACF;IACL;IAEL;GACY,CAAA;EACP,CAAA,CACP;;AAET;AAEA,IAAM,sBAAuD,EAAE,WAC7D,oBAAC,WAAD;CACE,UAAU,KAAK,MAAM;CACrB,UAAU,KAAK,MAAM;CACrB,aAAa,KAAK,MAAM;CACxB,WAAW,KAAK,MAAM;CACtB,MAAM,KAAK,MAAM;CAEhB,UAAA,KAAK,MAAM;AACH,CAAA"}
|