@oneuptime/common 10.2.20 → 10.2.21
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/UI/Components/Workflow/ArgumentsForm.tsx +55 -12
- package/UI/Components/Workflow/ComponentSettingsModal.tsx +143 -255
- package/UI/Components/Workflow/ModelFieldPicker.tsx +1234 -0
- package/build/dist/UI/Components/Workflow/ArgumentsForm.js +32 -10
- package/build/dist/UI/Components/Workflow/ArgumentsForm.js.map +1 -1
- package/build/dist/UI/Components/Workflow/ComponentSettingsModal.js +57 -145
- package/build/dist/UI/Components/Workflow/ComponentSettingsModal.js.map +1 -1
- package/build/dist/UI/Components/Workflow/ModelFieldPicker.js +694 -0
- package/build/dist/UI/Components/Workflow/ModelFieldPicker.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import ComponentLoader from "../ComponentLoader/ComponentLoader";
|
|
2
2
|
import ErrorMessage from "../ErrorMessage/ErrorMessage";
|
|
3
3
|
import BasicForm from "../Forms/BasicForm";
|
|
4
|
+
import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
|
|
4
5
|
import ComponentValuePickerModal from "./ComponentValuePickerModal";
|
|
6
|
+
import ModelFieldPicker from "./ModelFieldPicker";
|
|
5
7
|
import { componentInputTypeToFormFieldType } from "./Utils";
|
|
6
8
|
import VariableModal from "./VariableModal";
|
|
7
9
|
import { ComponentInputType, } from "../../../Types/Workflow/Component";
|
|
@@ -112,9 +114,28 @@ const ArgumentsForm = (props) => {
|
|
|
112
114
|
}, fields: component.metadata.arguments &&
|
|
113
115
|
component.metadata.arguments.map((arg) => {
|
|
114
116
|
const isWorkflowSelect = arg.type === ComponentInputType.WorkflowSelect;
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
117
|
+
/*
|
|
118
|
+
* Database Select args (the "Select Fields" / "Listen on"
|
|
119
|
+
* trigger inputs) get a tree-style field picker backed by
|
|
120
|
+
* the model's schema, instead of a raw JSON textarea. We
|
|
121
|
+
* need a tableName on the component metadata to fetch the
|
|
122
|
+
* column list; without it, fall back to the JSON editor.
|
|
123
|
+
*/
|
|
124
|
+
const useFieldPicker = arg.type === ComponentInputType.Select &&
|
|
125
|
+
Boolean(component.metadata.tableName);
|
|
126
|
+
const baseField = useFieldPicker
|
|
127
|
+
? {
|
|
128
|
+
fieldType: FormFieldSchemaType.CustomComponent,
|
|
129
|
+
getCustomElement: (_values, customProps) => {
|
|
130
|
+
return (React.createElement(ModelFieldPicker, { tableName: component.metadata.tableName, initialValue: customProps.initialValue, onChange: (value) => {
|
|
131
|
+
var _a;
|
|
132
|
+
void ((_a = customProps.onChange) === null || _a === void 0 ? void 0 : _a.call(customProps, value));
|
|
133
|
+
}, placeholder: customProps.placeholder, error: customProps.error, tabIndex: customProps.tabIndex }));
|
|
134
|
+
},
|
|
135
|
+
}
|
|
136
|
+
: componentInputTypeToFormFieldType(arg.type, component.arguments && component.arguments[arg.id]
|
|
137
|
+
? component.arguments[arg.id]
|
|
138
|
+
: null);
|
|
118
139
|
/*
|
|
119
140
|
* For WorkflowSelect, inject the dynamically fetched list
|
|
120
141
|
* of workflows as dropdown options.
|
|
@@ -122,12 +143,13 @@ const ArgumentsForm = (props) => {
|
|
|
122
143
|
if (isWorkflowSelect) {
|
|
123
144
|
baseField.dropdownOptions = workflowDropdownOptions;
|
|
124
145
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
146
|
+
/*
|
|
147
|
+
* The "pick from component / variable" footer doesn't
|
|
148
|
+
* apply to the field picker (it edits a structured object,
|
|
149
|
+
* not a free-text expression) or to WorkflowSelect.
|
|
150
|
+
*/
|
|
151
|
+
const showVariableFooter = !isWorkflowSelect && !useFieldPicker;
|
|
152
|
+
return Object.assign({ title: `${arg.name}`, footerElement: showVariableFooter ? (React.createElement("div", { className: "text-gray-500" },
|
|
131
153
|
React.createElement("p", { className: "text-sm" },
|
|
132
154
|
"Pick this value from other",
|
|
133
155
|
" ",
|
|
@@ -141,7 +163,7 @@ const ArgumentsForm = (props) => {
|
|
|
141
163
|
React.createElement("button", { className: "underline text-blue-500 hover:text-blue-600 cursor-pointer", onClick: () => {
|
|
142
164
|
setSelectedArgId(arg.id);
|
|
143
165
|
setShowVariableModal(true);
|
|
144
|
-
} }, "variable.")))), description: `${arg.required ? "Required" : "Optional"}. ${arg.description}`, field: {
|
|
166
|
+
} }, "variable.")))) : undefined, description: `${arg.required ? "Required" : "Optional"}. ${arg.description}`, field: {
|
|
145
167
|
[arg.id]: true,
|
|
146
168
|
}, required: arg.required, placeholder: arg.placeholder }, baseField);
|
|
147
169
|
}) }))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArgumentsForm.js","sourceRoot":"","sources":["../../../../../UI/Components/Workflow/ArgumentsForm.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,YAAY,MAAM,8BAA8B,CAAC;AACxD,OAAO,SAAwB,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"ArgumentsForm.js","sourceRoot":"","sources":["../../../../../UI/Components/Workflow/ArgumentsForm.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import Button, { ButtonStyleType } from "../Button/Button";
|
|
|
2
2
|
import BasicForm from "../Forms/BasicForm";
|
|
3
3
|
import FormFieldSchemaType from "../Forms/Types/FormFieldSchemaType";
|
|
4
4
|
import ConfirmModal from "../Modal/ConfirmModal";
|
|
5
|
-
import
|
|
5
|
+
import Modal, { ModalWidth } from "../Modal/Modal";
|
|
6
6
|
import ArgumentsForm from "./ArgumentsForm";
|
|
7
7
|
import ComponentPortViewer from "./ComponentPortViewer";
|
|
8
8
|
import ComponentReturnValueViewer from "./ComponentReturnValueViewer";
|
|
@@ -10,13 +10,60 @@ import DocumentationViewer from "./DocumentationViewer";
|
|
|
10
10
|
import IconProp from "../../../Types/Icon/IconProp";
|
|
11
11
|
import React, { useState } from "react";
|
|
12
12
|
import Icon from "../Icon/Icon";
|
|
13
|
+
const SectionCard = (props) => {
|
|
14
|
+
const isInfo = props.tone === "info";
|
|
15
|
+
const containerClass = isInfo
|
|
16
|
+
? "rounded-lg border border-blue-100 bg-blue-50/40 p-4"
|
|
17
|
+
: "rounded-lg border border-gray-200 bg-white p-4";
|
|
18
|
+
const iconClass = isInfo ? "text-blue-500" : "text-gray-400";
|
|
19
|
+
const titleClass = isInfo
|
|
20
|
+
? "text-[11px] font-semibold uppercase tracking-wider text-blue-700"
|
|
21
|
+
: "text-[11px] font-semibold uppercase tracking-wider text-gray-500";
|
|
22
|
+
return (React.createElement("div", { className: containerClass },
|
|
23
|
+
React.createElement("div", { className: "flex items-center gap-1.5 mb-3" },
|
|
24
|
+
React.createElement(Icon, { icon: props.icon, className: `h-3.5 w-3.5 ${iconClass}` }),
|
|
25
|
+
React.createElement("span", { className: titleClass }, props.title)),
|
|
26
|
+
props.children));
|
|
27
|
+
};
|
|
13
28
|
const ComponentSettingsModal = (props) => {
|
|
14
29
|
const [component, setComponent] = useState(props.component);
|
|
15
30
|
const [hasFormValidationErrors, setHasFormValidationErrors] = useState({});
|
|
16
31
|
const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
|
|
17
|
-
|
|
32
|
+
const argumentsSection = (React.createElement(SectionCard, { icon: IconProp.Settings, title: "Configuration" },
|
|
33
|
+
React.createElement(ArgumentsForm, { graphComponents: props.graphComponents, workflowId: props.workflowId, component: component, onFormChange: (c) => {
|
|
34
|
+
setComponent(Object.assign({}, c));
|
|
35
|
+
}, onHasFormValidationErrors: (value) => {
|
|
36
|
+
setHasFormValidationErrors(Object.assign(Object.assign({}, hasFormValidationErrors), value));
|
|
37
|
+
} })));
|
|
38
|
+
const identitySection = (React.createElement(SectionCard, { icon: IconProp.Label, title: `${component.metadata.componentType} ID` },
|
|
39
|
+
React.createElement(BasicForm, { hideSubmitButton: true, initialValues: { id: component === null || component === void 0 ? void 0 : component.id }, onChange: (values) => {
|
|
40
|
+
setComponent(Object.assign(Object.assign({}, component), values));
|
|
41
|
+
}, onFormValidationErrorChanged: (hasError) => {
|
|
42
|
+
setHasFormValidationErrors(Object.assign(Object.assign({}, hasFormValidationErrors), { id: hasError }));
|
|
43
|
+
}, fields: [
|
|
44
|
+
{
|
|
45
|
+
title: "Identifier",
|
|
46
|
+
description: `Used to reference this ${component.metadata.componentType.toLowerCase()} from other components.`,
|
|
47
|
+
field: { id: true },
|
|
48
|
+
required: true,
|
|
49
|
+
fieldType: FormFieldSchemaType.Text,
|
|
50
|
+
},
|
|
51
|
+
] })));
|
|
52
|
+
const documentationSection = component.metadata
|
|
53
|
+
.documentationLink ? (React.createElement(SectionCard, { icon: IconProp.Book, title: "Documentation", tone: "info" },
|
|
54
|
+
React.createElement(DocumentationViewer, { documentationLink: component.metadata.documentationLink, workflowId: props.workflowId, webhookSecretKey: props.webhookSecretKey }))) : null;
|
|
55
|
+
const connectionsSection = (React.createElement(SectionCard, { icon: IconProp.Link, title: "Connections" },
|
|
56
|
+
React.createElement(React.Fragment, null,
|
|
57
|
+
React.createElement(ComponentPortViewer, { name: "In Ports", description: "Input connections for this component", ports: component.metadata.inPorts }),
|
|
58
|
+
React.createElement(ComponentPortViewer, { name: "Out Ports", description: "Output connections from this component", ports: component.metadata.outPorts }))));
|
|
59
|
+
const outputSection = (React.createElement(SectionCard, { icon: IconProp.ArrowCircleRight, title: "Output" },
|
|
60
|
+
React.createElement(ComponentReturnValueViewer, { name: "Return Values", description: "Values this component produces for downstream use", returnValues: component.metadata.returnValues })));
|
|
61
|
+
const hasErrors = Object.values(hasFormValidationErrors).some((v) => {
|
|
62
|
+
return v;
|
|
63
|
+
});
|
|
64
|
+
return (React.createElement(Modal, { title: props.title, description: props.description, onClose: props.onClose, onSubmit: () => {
|
|
18
65
|
return component && props.onSave(component);
|
|
19
|
-
}, leftFooterElement: React.createElement(Button, { title:
|
|
66
|
+
}, submitButtonText: "Save", modalWidth: ModalWidth.Large, disableSubmitButton: hasErrors, leftFooterElement: React.createElement(Button, { title: "Delete", icon: IconProp.Trash, buttonStyle: ButtonStyleType.DANGER_OUTLINE, onClick: () => {
|
|
20
67
|
setShowDeleteConfirmation(true);
|
|
21
68
|
} }) },
|
|
22
69
|
React.createElement(React.Fragment, null,
|
|
@@ -27,148 +74,13 @@ const ComponentSettingsModal = (props) => {
|
|
|
27
74
|
setShowDeleteConfirmation(false);
|
|
28
75
|
props.onClose();
|
|
29
76
|
}, submitButtonType: ButtonStyleType.DANGER })),
|
|
30
|
-
React.createElement("div", {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
} },
|
|
38
|
-
React.createElement("div", { style: {
|
|
39
|
-
display: "flex",
|
|
40
|
-
alignItems: "center",
|
|
41
|
-
gap: "0.5rem",
|
|
42
|
-
marginBottom: "0.5rem",
|
|
43
|
-
} },
|
|
44
|
-
React.createElement(Icon, { icon: IconProp.Label, style: {
|
|
45
|
-
color: "#64748b",
|
|
46
|
-
width: "0.875rem",
|
|
47
|
-
height: "0.875rem",
|
|
48
|
-
} }),
|
|
49
|
-
React.createElement("span", { style: {
|
|
50
|
-
fontSize: "0.8125rem",
|
|
51
|
-
fontWeight: 600,
|
|
52
|
-
color: "#334155",
|
|
53
|
-
} }, "Identity")),
|
|
54
|
-
React.createElement(BasicForm, { hideSubmitButton: true, initialValues: {
|
|
55
|
-
id: component === null || component === void 0 ? void 0 : component.id,
|
|
56
|
-
}, onChange: (values) => {
|
|
57
|
-
setComponent(Object.assign(Object.assign({}, component), values));
|
|
58
|
-
}, onFormValidationErrorChanged: (hasError) => {
|
|
59
|
-
setHasFormValidationErrors(Object.assign(Object.assign({}, hasFormValidationErrors), { id: hasError }));
|
|
60
|
-
}, fields: [
|
|
61
|
-
{
|
|
62
|
-
title: `${component.metadata.componentType} ID`,
|
|
63
|
-
description: `Unique identifier used to reference this ${component.metadata.componentType.toLowerCase()} from other components.`,
|
|
64
|
-
field: {
|
|
65
|
-
id: true,
|
|
66
|
-
},
|
|
67
|
-
required: true,
|
|
68
|
-
fieldType: FormFieldSchemaType.Text,
|
|
69
|
-
},
|
|
70
|
-
] })),
|
|
71
|
-
component.metadata.documentationLink && (React.createElement("div", { style: {
|
|
72
|
-
backgroundColor: "#eff6ff",
|
|
73
|
-
borderRadius: "10px",
|
|
74
|
-
border: "1px solid #bfdbfe",
|
|
75
|
-
padding: "1rem",
|
|
76
|
-
marginBottom: "1rem",
|
|
77
|
-
} },
|
|
78
|
-
React.createElement("div", { style: {
|
|
79
|
-
display: "flex",
|
|
80
|
-
alignItems: "center",
|
|
81
|
-
gap: "0.5rem",
|
|
82
|
-
marginBottom: "0.5rem",
|
|
83
|
-
} },
|
|
84
|
-
React.createElement(Icon, { icon: IconProp.Book, style: {
|
|
85
|
-
color: "#3b82f6",
|
|
86
|
-
width: "0.875rem",
|
|
87
|
-
height: "0.875rem",
|
|
88
|
-
} }),
|
|
89
|
-
React.createElement("span", { style: {
|
|
90
|
-
fontSize: "0.8125rem",
|
|
91
|
-
fontWeight: 600,
|
|
92
|
-
color: "#1e40af",
|
|
93
|
-
} }, "Documentation")),
|
|
94
|
-
React.createElement(DocumentationViewer, { documentationLink: component.metadata.documentationLink, workflowId: props.workflowId, webhookSecretKey: props.webhookSecretKey }))),
|
|
95
|
-
React.createElement("div", { style: {
|
|
96
|
-
backgroundColor: "#ffffff",
|
|
97
|
-
borderRadius: "10px",
|
|
98
|
-
border: "1px solid #e2e8f0",
|
|
99
|
-
padding: "1rem",
|
|
100
|
-
marginBottom: "1rem",
|
|
101
|
-
} },
|
|
102
|
-
React.createElement("div", { style: {
|
|
103
|
-
display: "flex",
|
|
104
|
-
alignItems: "center",
|
|
105
|
-
gap: "0.5rem",
|
|
106
|
-
marginBottom: "0.75rem",
|
|
107
|
-
} },
|
|
108
|
-
React.createElement(Icon, { icon: IconProp.Settings, style: {
|
|
109
|
-
color: "#64748b",
|
|
110
|
-
width: "0.875rem",
|
|
111
|
-
height: "0.875rem",
|
|
112
|
-
} }),
|
|
113
|
-
React.createElement("span", { style: {
|
|
114
|
-
fontSize: "0.8125rem",
|
|
115
|
-
fontWeight: 600,
|
|
116
|
-
color: "#334155",
|
|
117
|
-
} }, "Configuration")),
|
|
118
|
-
React.createElement(ArgumentsForm, { graphComponents: props.graphComponents, workflowId: props.workflowId, component: component, onFormChange: (component) => {
|
|
119
|
-
setComponent(Object.assign({}, component));
|
|
120
|
-
}, onHasFormValidationErrors: (value) => {
|
|
121
|
-
setHasFormValidationErrors(Object.assign(Object.assign({}, hasFormValidationErrors), value));
|
|
122
|
-
} })),
|
|
123
|
-
React.createElement("div", { style: {
|
|
124
|
-
backgroundColor: "#ffffff",
|
|
125
|
-
borderRadius: "10px",
|
|
126
|
-
border: "1px solid #e2e8f0",
|
|
127
|
-
padding: "1rem",
|
|
128
|
-
marginBottom: "1rem",
|
|
129
|
-
} },
|
|
130
|
-
React.createElement("div", { style: {
|
|
131
|
-
display: "flex",
|
|
132
|
-
alignItems: "center",
|
|
133
|
-
gap: "0.5rem",
|
|
134
|
-
marginBottom: "0.25rem",
|
|
135
|
-
} },
|
|
136
|
-
React.createElement(Icon, { icon: IconProp.Link, style: {
|
|
137
|
-
color: "#64748b",
|
|
138
|
-
width: "0.875rem",
|
|
139
|
-
height: "0.875rem",
|
|
140
|
-
} }),
|
|
141
|
-
React.createElement("span", { style: {
|
|
142
|
-
fontSize: "0.8125rem",
|
|
143
|
-
fontWeight: 600,
|
|
144
|
-
color: "#334155",
|
|
145
|
-
} }, "Connections")),
|
|
146
|
-
React.createElement(ComponentPortViewer, { name: "In Ports", description: "Input connections for this component", ports: component.metadata.inPorts }),
|
|
147
|
-
React.createElement(ComponentPortViewer, { name: "Out Ports", description: "Output connections from this component", ports: component.metadata.outPorts })),
|
|
148
|
-
React.createElement("div", { style: {
|
|
149
|
-
backgroundColor: "#ffffff",
|
|
150
|
-
borderRadius: "10px",
|
|
151
|
-
border: "1px solid #e2e8f0",
|
|
152
|
-
padding: "1rem",
|
|
153
|
-
marginBottom: "1rem",
|
|
154
|
-
} },
|
|
155
|
-
React.createElement("div", { style: {
|
|
156
|
-
display: "flex",
|
|
157
|
-
alignItems: "center",
|
|
158
|
-
gap: "0.5rem",
|
|
159
|
-
marginBottom: "0.25rem",
|
|
160
|
-
} },
|
|
161
|
-
React.createElement(Icon, { icon: IconProp.ArrowCircleRight, style: {
|
|
162
|
-
color: "#64748b",
|
|
163
|
-
width: "0.875rem",
|
|
164
|
-
height: "0.875rem",
|
|
165
|
-
} }),
|
|
166
|
-
React.createElement("span", { style: {
|
|
167
|
-
fontSize: "0.8125rem",
|
|
168
|
-
fontWeight: 600,
|
|
169
|
-
color: "#334155",
|
|
170
|
-
} }, "Output")),
|
|
171
|
-
React.createElement(ComponentReturnValueViewer, { name: "Return Values", description: "Values this component produces for downstream use", returnValues: component.metadata.returnValues })))));
|
|
77
|
+
React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4" },
|
|
78
|
+
React.createElement("div", { className: "md:col-span-2 space-y-4" }, argumentsSection),
|
|
79
|
+
React.createElement("div", { className: "md:col-span-1 space-y-4" },
|
|
80
|
+
identitySection,
|
|
81
|
+
documentationSection,
|
|
82
|
+
connectionsSection,
|
|
83
|
+
outputSection)))));
|
|
172
84
|
};
|
|
173
85
|
export default ComponentSettingsModal;
|
|
174
86
|
//# sourceMappingURL=ComponentSettingsModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentSettingsModal.js","sourceRoot":"","sources":["../../../../../UI/Components/Workflow/ComponentSettingsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,mBAAmB,MAAM,oCAAoC,CAAC;AAErE,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,
|
|
1
|
+
{"version":3,"file":"ComponentSettingsModal.js","sourceRoot":"","sources":["../../../../../UI/Components/Workflow/ComponentSettingsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,mBAAmB,MAAM,oCAAoC,CAAC;AAErE,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,0BAA0B,MAAM,8BAA8B,CAAC;AACtE,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,OAAO,QAAQ,MAAM,8BAA8B,CAAC;AAIpD,OAAO,KAAK,EAAE,EAAmC,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,IAAI,MAAM,cAAc,CAAC;AAqBhC,MAAM,WAAW,GAAwC,CACvD,KAAuB,EACT,EAAE;IAChB,MAAM,MAAM,GAAY,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC;IAC9C,MAAM,cAAc,GAAW,MAAM;QACnC,CAAC,CAAC,qDAAqD;QACvD,CAAC,CAAC,gDAAgD,CAAC;IACrD,MAAM,SAAS,GAAW,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC;IACrE,MAAM,UAAU,GAAW,MAAM;QAC/B,CAAC,CAAC,kEAAkE;QACpE,CAAC,CAAC,kEAAkE,CAAC;IAEvE,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc;QAC5B,6BAAK,SAAS,EAAC,gCAAgC;YAC7C,oBAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,eAAe,SAAS,EAAE,GAAI;YACjE,8BAAM,SAAS,EAAE,UAAU,IAAG,KAAK,CAAC,KAAK,CAAQ,CAC7C;QACL,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAsC,CAChE,KAAqB,EACP,EAAE;IAChB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAe,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1E,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CAEpE,EAAE,CAAC,CAAC;IACN,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GACvD,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE3B,MAAM,gBAAgB,GAAiB,CACrC,oBAAC,WAAW,IAAC,IAAI,EAAE,QAAQ,CAAC,QAAQ,EAAE,KAAK,EAAC,eAAe;QACzD,oBAAC,aAAa,IACZ,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,CAAC,CAAe,EAAE,EAAE;gBAChC,YAAY,mBAAM,CAAC,EAAG,CAAC;YACzB,CAAC,EACD,yBAAyB,EAAE,CAAC,KAA0B,EAAE,EAAE;gBACxD,0BAA0B,iCACrB,uBAAuB,GACvB,KAAK,EACR,CAAC;YACL,CAAC,GACD,CACU,CACf,CAAC;IAEF,MAAM,eAAe,GAAiB,CACpC,oBAAC,WAAW,IACV,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,KAAK,EAAE,GAAG,SAAS,CAAC,QAAQ,CAAC,aAAa,KAAK;QAE/C,oBAAC,SAAS,IACR,gBAAgB,EAAE,IAAI,EACtB,aAAa,EAAE,EAAE,EAAE,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,EAAE,EAAE,EACpC,QAAQ,EAAE,CAAC,MAA8B,EAAE,EAAE;gBAC3C,YAAY,iCAAM,SAAS,GAAK,MAAM,EAAG,CAAC;YAC5C,CAAC,EACD,4BAA4B,EAAE,CAAC,QAAiB,EAAE,EAAE;gBAClD,0BAA0B,iCACrB,uBAAuB,KAC1B,EAAE,EAAE,QAAQ,IACZ,CAAC;YACL,CAAC,EACD,MAAM,EAAE;gBACN;oBACE,KAAK,EAAE,YAAY;oBACnB,WAAW,EAAE,0BAA0B,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,EAAE,yBAAyB;oBAC9G,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE;oBACnB,QAAQ,EAAE,IAAI;oBACd,SAAS,EAAE,mBAAmB,CAAC,IAAI;iBACpC;aACF,GACD,CACU,CACf,CAAC;IAEF,MAAM,oBAAoB,GAAwB,SAAS,CAAC,QAAQ;SACjE,iBAAiB,CAAC,CAAC,CAAC,CACrB,oBAAC,WAAW,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM;QACjE,oBAAC,mBAAmB,IAClB,iBAAiB,EAAE,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EACvD,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,GACxC,CACU,CACf,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,kBAAkB,GAAiB,CACvC,oBAAC,WAAW,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa;QACnD;YACE,oBAAC,mBAAmB,IAClB,IAAI,EAAC,UAAU,EACf,WAAW,EAAC,sCAAsC,EAClD,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,OAAO,GACjC;YACF,oBAAC,mBAAmB,IAClB,IAAI,EAAC,WAAW,EAChB,WAAW,EAAC,wCAAwC,EACpD,KAAK,EAAE,SAAS,CAAC,QAAQ,CAAC,QAAQ,GAClC,CACD,CACS,CACf,CAAC;IAEF,MAAM,aAAa,GAAiB,CAClC,oBAAC,WAAW,IAAC,IAAI,EAAE,QAAQ,CAAC,gBAAgB,EAAE,KAAK,EAAC,QAAQ;QAC1D,oBAAC,0BAA0B,IACzB,IAAI,EAAC,eAAe,EACpB,WAAW,EAAC,mDAAmD,EAC/D,YAAY,EAAE,SAAS,CAAC,QAAQ,CAAC,YAAY,GAC7C,CACU,CACf,CAAC;IAEF,MAAM,SAAS,GAAY,MAAM,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,IAAI,CACpE,CAAC,CAAU,EAAE,EAAE;QACb,OAAO,CAAC,CAAC;IACX,CAAC,CACF,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,IACJ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,GAAG,EAAE;YACb,OAAO,SAAS,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC9C,CAAC,EACD,gBAAgB,EAAC,MAAM,EACvB,UAAU,EAAE,UAAU,CAAC,KAAK,EAC5B,mBAAmB,EAAE,SAAS,EAC9B,iBAAiB,EACf,oBAAC,MAAM,IACL,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,WAAW,EAAE,eAAe,CAAC,cAAc,EAC3C,OAAO,EAAE,GAAG,EAAE;gBACZ,yBAAyB,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC,GACD;QAGJ;YACG,sBAAsB,IAAI,CACzB,oBAAC,YAAY,IACX,KAAK,EAAE,UAAU,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,EACnD,WAAW,EAAE,wCAAwC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,EAAE,mCAAmC,EACtI,OAAO,EAAE,GAAG,EAAE;oBACZ,yBAAyB,CAAC,KAAK,CAAC,CAAC;gBACnC,CAAC,EACD,gBAAgB,EAAC,QAAQ,EACzB,QAAQ,EAAE,GAAG,EAAE;oBACb,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;oBAC1B,yBAAyB,CAAC,KAAK,CAAC,CAAC;oBACjC,KAAK,CAAC,OAAO,EAAE,CAAC;gBAClB,CAAC,EACD,gBAAgB,EAAE,eAAe,CAAC,MAAM,GACxC,CACH;YAOD,6BAAK,SAAS,EAAC,uCAAuC;gBACpD,6BAAK,SAAS,EAAC,yBAAyB,IAAE,gBAAgB,CAAO;gBACjE,6BAAK,SAAS,EAAC,yBAAyB;oBACrC,eAAe;oBACf,oBAAoB;oBACpB,kBAAkB;oBAClB,aAAa,CACV,CACF,CACL,CACG,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
|