@alpaca-editor/core 1.0.3762-mono

package/dist/editor/sidebar/Translations.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Translation = Translation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("primereact/button");
+const editContext_1 = require("../client/editContext");
+const SimpleTable_1 = require("../ui/SimpleTable");
+const translationService_1 = require("../services/translationService");
+const react_1 = require("react");
+const progressbar_1 = require("primereact/progressbar");
+const checkbox_1 = require("primereact/checkbox");
+const itemutils_1 = require("../utils/itemutils");
+const dropdown_1 = require("primereact/dropdown");
+function Translation() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [translationStatus, setTranslationStatus] = (0, react_1.useState)(null);
+    const [translationProviders, setTranslationProviders] = (0, react_1.useState)(null);
+    const [translationProvider, setTranslationProvider] = (0, react_1.useState)(localStorage.getItem("editor.translationProvider") || null);
+    if (!editContext)
+        return null;
+    (0, react_1.useEffect)(() => {
+        if (translationProvider) {
+            localStorage.setItem("editor.translationProvider", translationProvider);
+        }
+    }, [translationProvider]);
+    const languages = editContext?.itemLanguages || [];
+    const [translationProgress, setTranslationProgress] = (0, react_1.useState)(new Map());
+    const item = editContext.contentEditorItem;
+    const [checkedLanguages, setCheckedLanguages] = (0, react_1.useState)([]);
+    const selectLanguage = (language) => {
+        if (!item)
+            return;
+        if (!language.versions) {
+            (0, itemutils_1.confirmCreateVersion)(editContext, language);
+            return;
+        }
+        editContext.loadItem({
+            ...item.descriptor,
+            language: language.languageCode,
+            version: 0,
+        });
+    };
+    const languageName = (language) => {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: " flex gap-2", onClick: () => selectLanguage(language), children: [(0, jsx_runtime_1.jsx)("img", { src: language.icon, className: "h-5" }), " ", language.name] }, language.languageCode));
+    };
+    const translate = async (languageCode) => {
+        if (!item)
+            return;
+        const status = translationStatus?.find((x) => x.targetLanguage === languageCode);
+        if (!status)
+            return;
+        if (status.sourceLanguage === languageCode)
+            return;
+        setTranslationProgress((p) => {
+            p.set(languageCode, { progress: 0, message: "" });
+            return new Map(p);
+        });
+        await (0, translationService_1.requestTranslation)({
+            itemId: item.descriptor.id,
+            targetLanguage: languageCode,
+            sourceLanguage: status.sourceLanguage,
+            sessionId: editContext.sessionId,
+            provider: translationProvider || "",
+        });
+        loadTranslationStatus();
+    };
+    const loadTranslationStatus = async () => {
+        if (!item)
+            return;
+        const status = await (0, translationService_1.getTranslationStatus)(item.descriptor.id);
+        setTranslationStatus(status.data || []);
+    };
+    const loadTranslationProviders = async () => {
+        const providers = await (0, translationService_1.getTranslationProviders)();
+        setTranslationProviders(providers.data || []);
+        if (!translationProvider) {
+            setTranslationProvider(providers.data?.[0] || null);
+        }
+    };
+    const createVersions = async () => {
+        if (!item)
+            return;
+        checkedLanguages.forEach((language) => {
+            editContext.operations.createVersion({
+                id: item.descriptor.id,
+                language: language,
+                version: 0,
+            });
+        });
+    };
+    (0, react_1.useEffect)(() => {
+        loadTranslationStatus();
+        setTranslationProgress(new Map());
+    }, [editContext.currentItemDescriptor?.id]);
+    (0, react_1.useEffect)(() => {
+        loadTranslationProviders();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const removeSocketMessageListener = editContext.addSocketMessageListener((message) => {
+            if (message.type === "translation-started" ||
+                message.type === "translation-finished" ||
+                message.type === "translation-error") {
+                if (message.payload.itemId === item?.descriptor.id) {
+                    loadTranslationStatus();
+                }
+            }
+            if (message.type === "translation-progress") {
+                if (message.payload.itemId === item?.descriptor.id) {
+                    setTranslationProgress((p) => {
+                        p.set(message.payload.language, message.payload);
+                        return new Map(p);
+                    });
+                }
+            }
+        });
+        return removeSocketMessageListener;
+    }, [editContext, setTranslationProgress]);
+    const languageData = languages.map((x) => ({
+        ...x,
+        translationStatus: translationStatus?.find((y) => y.targetLanguage === x.languageCode),
+        translationProgress: translationProgress.get(x.languageCode),
+    }));
+    languageData.sort((a, b) => {
+        // Sort languages with 0 versions to bottom
+        if (a.versions === 0 && b.versions > 0)
+            return 1;
+        if (b.versions === 0 && a.versions > 0)
+            return -1;
+        // Sort by name for languages that both have versions or both don't
+        return a.name.localeCompare(b.name);
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex p-3 gap-2 justify-end items-center w-full bg-gray-50 flex-wrap", children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: translationProviders || [], onChange: (e) => setTranslationProvider(e.value), value: translationProvider }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", icon: "pi pi-sparkles", onClick: () => {
+                            checkedLanguages.forEach((x) => translate(x));
+                            setCheckedLanguages([]);
+                        }, disabled: checkedLanguages.length === 0, label: "Translate" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", icon: "pi pi-plus", onClick: () => {
+                            createVersions();
+                            setCheckedLanguages([]);
+                        }, disabled: checkedLanguages.length === 0, label: "Create Versions" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 relative", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-y-auto absolute inset-0", children: (0, jsx_runtime_1.jsx)(SimpleTable_1.SimpleTable, { columns: [
+                            {
+                                header: "",
+                                body: (x) => ((0, jsx_runtime_1.jsx)("div", { onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checkedLanguages.includes(x.languageCode), onChange: (ev) => {
+                                            setCheckedLanguages(ev.checked
+                                                ? [...checkedLanguages, x.languageCode]
+                                                : checkedLanguages.filter((y) => y !== x.languageCode));
+                                        } }) })),
+                            },
+                            { header: "Language", body: languageName },
+                            { header: "Ver.", body: (x) => x.versions.toString() },
+                            {
+                                header: "Src",
+                                body: (x) => x.translationStatus?.sourceLanguage,
+                            },
+                            {
+                                header: "Status",
+                                body: (x) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [x.translationStatus?.status === "In Progress" && ((0, jsx_runtime_1.jsxs)("div", { className: "w-full relative", children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { style: { height: "20px" }, value: (x.translationProgress?.progress || 0) * 100, showValue: false }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex items-center justify-center text-white", children: x.translationProgress?.message })] })), x.translationStatus?.status !== "In Progress" && ((0, jsx_runtime_1.jsx)("div", { title: x.translationStatus?.message, children: x.translationStatus?.status || "Not started" }))] })),
+                            },
+                        ], items: languageData, onRowClick: (data) => selectLanguage(data.item), rowClassName: (item) => item.languageCode == editContext.currentItemDescriptor?.language
+                            ? "bg-neutral-100"
+                            : "" }) }) })] }));
+}

package/dist/editor/sidebar/Validation.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Validation = Validation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const progressspinner_1 = require("primereact/progressspinner");
+const editContext_1 = require("../client/editContext");
+const SimpleTable_1 = require("../ui/SimpleTable");
+function Validation() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const validationResults = editContext?.validationResult?.flatMap((x) => x.results.map((y) => ({
+        ...y,
+        language: x.item.language,
+        version: x.item.version,
+    })));
+    if (!validationResults)
+        return null;
+    const nameBodyTemplate = (validationResult) => {
+        const id = validationResult.itemId +
+            validationResult.language +
+            validationResult.version;
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 items-center", children: (0, jsx_runtime_1.jsxs)("span", { className: `name-tooltip-${id} break-all`, style: { position: "relative" }, children: [validationResult.itemName, " ", (0, jsx_runtime_1.jsxs)("span", { className: "text-gray-500", children: ["(", validationResult.language, ", ", validationResult.itemName, ")"] })] }) }));
+    };
+    const validationTemplate = (validationResult) => {
+        return (0, jsx_runtime_1.jsx)("div", { children: validationResult.message });
+    };
+    const columns = [
+        { body: nameBodyTemplate, header: "Item" },
+        {
+            body: validationTemplate,
+            align: "center",
+            header: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-check" }),
+        },
+    ];
+    if (validationResults.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "text-gray-600 text-sm text-center p-4", children: "No validation results" }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [editContext?.validating && ((0, jsx_runtime_1.jsx)("div", { className: "text-center p-3", children: (0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "20px", height: "20px" } }) })), !editContext?.validating && ((0, jsx_runtime_1.jsx)(SimpleTable_1.SimpleTable, { items: validationResults, columns: columns, onRowClick: async (data) => {
+                    const itemDescriptor = {
+                        id: data.item.itemId,
+                        language: data.item.language,
+                        version: data.item.version,
+                    };
+                    const item = await editContext?.itemsRepository.getItem(itemDescriptor);
+                    if (!item || !editContext)
+                        return;
+                    editContext.setCenterPanelView(editContext.configuration.editor.views.find((x) => x.name === "content-editor")?.defaultCenterPanelView);
+                    editContext.setFocusedField({
+                        item: itemDescriptor,
+                        fieldId: data.item.fieldId,
+                    }, true);
+                } }))] }));
+}

package/dist/editor/sidebar/ViewSelector.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewSelector = ViewSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+const editContext_1 = require("../client/editContext");
+function ViewSelector() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const views = editContext?.configuration.editor.views.filter((x) => !x.hidden) ?? [];
+    return ((0, jsx_runtime_1.jsx)("div", { className: "shadow-right-soft z-10 flex w-11 max-w-11 flex-col gap-1 bg-gray-100", children: views
+            .filter((x) => x.icon)
+            .map((x, i) => ((0, jsx_runtime_1.jsx)("div", { title: x.title, className: (0, utils_1.classNames)(editContext?.viewName == x.name
+                ? "active text-gray-900"
+                : "text-gray-400 hover:text-gray-900", "cursor-pointer p-3"), "data-sidebarview-name": x.name, onClick: () => editContext?.switchView(x.name), children: typeof x.icon === "string" ? ((0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(x.icon), style: { fontSize: "1.25rem" } })) : (x.icon) }, i))) }));
+}

package/dist/editor/sidebar/Workbox.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Workbox = Workbox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const tooltip_1 = require("primereact/tooltip");
+const button_1 = require("primereact/button");
+const react_1 = require("react");
+const overlaypanel_1 = require("primereact/overlaypanel");
+const utils_1 = require("primereact/utils");
+const SimpleTable_1 = require("../ui/SimpleTable");
+function Workbox() {
+    const [validationOverlayItem, setValidationOverlayItem] = (0, react_1.useState)();
+    const editContext = (0, editContext_1.useEditContext)();
+    const validationResult = editContext?.validationResult;
+    if (!editContext)
+        return null;
+    const validationOverlay = (0, react_1.useRef)(null);
+    const nameBodyTemplate = (wbItem) => {
+        const id = wbItem.item.id + wbItem.item.language + wbItem.item.version;
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 items-center", children: (0, jsx_runtime_1.jsxs)("span", { className: `name-tooltip-${id} break-all`, style: { position: "relative" }, children: [wbItem.name, " ", (0, jsx_runtime_1.jsxs)("span", { className: "text-gray-500", children: ["(", wbItem.item.language, ", ", wbItem.item.version, ")"] }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: `.a-name-tooltip-${id}`, content: wbItem.path })] }) }));
+    };
+    const stateBodyTemplate = (item) => {
+        if (item.isPublishable) {
+            const targets = Object.keys(item.publishStatus);
+            return targets.map((x) => ((0, jsx_runtime_1.jsxs)("div", { children: [targets.length > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("b", { children: x }), ":"] })), item.publishStatus[x]] }, x)));
+        }
+        else
+            return item.workflowState;
+    };
+    const actionsBodyTemplate = (item) => {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-1", children: !item.isFinalState &&
+                item.workflowCommands?.map((action) => {
+                    return ((0, jsx_runtime_1.jsx)(button_1.Button, { label: action.name, className: "text-xs p-1", onClick: () => editContext.operations.executeWorkflowCommand(item.item, action.id), size: "small" }, action.id));
+                }) }));
+    };
+    const validationTemplate = (item) => {
+        const validator = validationResult?.find((x) => x.item.id === item.item.id &&
+            x.item.language === item.item.language &&
+            x.item.version === item.item.version);
+        if (!validator || !validator.results.length)
+            return null;
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("cursor-pointer", getValidationErrorLevelClass(validator.results.reduce((prev, curr) => Math.max(prev, curr.result), 0))), onClick: (ev) => {
+                setValidationOverlayItem(item);
+                validationOverlay.current?.toggle(ev);
+            }, children: validator.results.length }));
+    };
+    if (!editContext.workboxItems)
+        return null;
+    const overlayResult = validationResult?.find((x) => x.item.id === validationOverlayItem?.item.id &&
+        x.item.language === validationOverlayItem?.item.language &&
+        x.item.version === validationOverlayItem?.item.version);
+    const getValidationErrorLevelClass = (level) => {
+        switch (level) {
+            case 0:
+                return "text-green-600";
+            case 1:
+                return "text-blue-600";
+            case 2:
+                return "text-yellow-600";
+            case 3:
+                return "text-orange-600";
+            case 4:
+            case 5:
+                return "text-red-600";
+        }
+    };
+    const columns = [
+        { body: nameBodyTemplate, header: "Item" },
+        { body: stateBodyTemplate, header: "State" },
+        { body: actionsBodyTemplate, header: "Actions" },
+        {
+            body: validationTemplate,
+            align: "center",
+            header: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-check" }),
+        },
+    ];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SimpleTable_1.SimpleTable, { items: editContext.workboxItems, columns: columns }), (0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { ref: validationOverlay, children: (0, jsx_runtime_1.jsxs)("table", { className: "text-xs border-spacing-1 border-separate m-3", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: "text-left", children: "Item" }), (0, jsx_runtime_1.jsx)("th", { className: "text-left", children: "Field" }), (0, jsx_runtime_1.jsx)("th", { className: "text-left", children: "Validator" }), (0, jsx_runtime_1.jsx)("th", { className: "text-left", children: "Message" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: overlayResult &&
+                                overlayResult.results.map((x) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: x.itemName }), (0, jsx_runtime_1.jsx)("td", { children: x.fieldName }), (0, jsx_runtime_1.jsx)("td", { children: x.validator }), (0, jsx_runtime_1.jsx)("td", { className: (0, utils_1.classNames)("text-xs break-all max-w-48", getValidationErrorLevelClass(x.result)), children: x.message })] }, x.fieldId + x.itemId))) })] }) })] }));
+}

package/dist/editor/ui/CenteredMessage.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CenteredMessage = CenteredMessage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function CenteredMessage({ children }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center items-center h-full text-gray-500", children: children }));
+}

package/dist/editor/ui/CopyToClipboardButton.js

@@ -0,0 +1,17 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyToClipboardButton = CopyToClipboardButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+function CopyToClipboardButton({ text }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const handleCopyToClipboard = (text) => {
+        navigator.clipboard.writeText(text);
+        editContext.showToast({
+            summary: "Copied to clipboard",
+            severity: "success",
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)("span", { className: "ml-1 cursor-pointer", onClick: () => handleCopyToClipboard(text), children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-copy text-xs" }) }));
+}

package/dist/editor/ui/DialogButtons.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DialogButtons;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function DialogButtons({ children, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-end gap-3 p-4 border-t", children: children }));
+}

package/dist/editor/ui/Icons.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WizardIcon = WizardIcon;
+exports.BugIcon = BugIcon;
+exports.EditIcon = EditIcon;
+exports.JsonIcon = JsonIcon;
+exports.GraphQLIcon = GraphQLIcon;
+exports.ArrowDownIcon = ArrowDownIcon;
+exports.ArrowRightIcon = ArrowRightIcon;
+exports.PuzzleIcon = PuzzleIcon;
+exports.NavigatorIcon = NavigatorIcon;
+exports.FormEditIcon = FormEditIcon;
+exports.RotateDeviceIcon = RotateDeviceIcon;
+exports.CompareIcon = CompareIcon;
+exports.CommentIcon = CommentIcon;
+exports.PageWizardIcon = PageWizardIcon;
+exports.PageWizardLogo = PageWizardLogo;
+exports.UploadCloudIcon = UploadCloudIcon;
+exports.SparkleIconBig = SparkleIconBig;
+exports.SparkleIconSmall = SparkleIconSmall;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function WizardIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: className, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" }) }));
+}
+function BugIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: className, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082" }) }));
+}
+function EditIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: className, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" }) }));
+}
+function JsonIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { fill: "#000000", version: "1.1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 58 58", className: className, children: (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: "M50.949,12.187l-1.361-1.361l-9.504-9.505c-0.001-0.001-0.001-0.001-0.002-0.001l-0.77-0.771\r\n\t\tC38.957,0.195,38.486,0,37.985,0H8.963C7.776,0,6.5,0.916,6.5,2.926V39v16.537V56c0,0.837,0.841,1.652,1.836,1.909\r\n\t\tc0.051,0.014,0.1,0.033,0.152,0.043C8.644,57.983,8.803,58,8.963,58h40.074c0.16,0,0.319-0.017,0.475-0.048\r\n\t\tc0.052-0.01,0.101-0.029,0.152-0.043C50.659,57.652,51.5,56.837,51.5,56v-0.463V39V13.978C51.5,13.211,51.407,12.644,50.949,12.187\r\n\t\tz M39.5,3.565L47.935,12H39.5V3.565z M8.963,56c-0.071,0-0.135-0.025-0.198-0.049C8.61,55.877,8.5,55.721,8.5,55.537V41h41v14.537\r\n\t\tc0,0.184-0.11,0.34-0.265,0.414C49.172,55.975,49.108,56,49.037,56H8.963z M8.5,39V2.926C8.5,2.709,8.533,2,8.963,2h28.595\r\n\t\tC37.525,2.126,37.5,2.256,37.5,2.391V13.78c-0.532-0.48-1.229-0.78-2-0.78c-0.553,0-1,0.448-1,1s0.447,1,1,1c0.552,0,1,0.449,1,1v4\r\n\t\tc0,1.2,0.542,2.266,1.382,3c-0.84,0.734-1.382,1.8-1.382,3v4c0,0.551-0.448,1-1,1c-0.553,0-1,0.448-1,1s0.447,1,1,1\r\n\t\tc1.654,0,3-1.346,3-3v-4c0-1.103,0.897-2,2-2c0.553,0,1-0.448,1-1s-0.447-1-1-1c-1.103,0-2-0.897-2-2v-4\r\n\t\tc0-0.771-0.301-1.468-0.78-2h11.389c0.135,0,0.265-0.025,0.391-0.058c0,0.015,0.001,0.021,0.001,0.036V39H8.5z" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.354,51.43c-0.019,0.446-0.171,0.764-0.458,0.95s-0.672,0.28-1.155,0.28c-0.191,0-0.396-0.022-0.615-0.068\r\n\t\ts-0.429-0.098-0.629-0.157s-0.385-0.123-0.554-0.191s-0.299-0.135-0.39-0.198l-0.697,1.107c0.183,0.137,0.405,0.26,0.67,0.369\r\n\t\ts0.54,0.207,0.827,0.294s0.565,0.15,0.834,0.191s0.504,0.062,0.704,0.062c0.401,0,0.791-0.039,1.169-0.116\r\n\t\tc0.378-0.077,0.713-0.214,1.005-0.41s0.524-0.456,0.697-0.779s0.26-0.723,0.26-1.196v-7.848h-1.668V51.43z" }), (0, jsx_runtime_1.jsx)("path", { d: "M25.083,49.064c-0.314-0.228-0.654-0.422-1.019-0.581s-0.702-0.323-1.012-0.492s-0.569-0.364-0.779-0.588\r\n\t\ts-0.314-0.518-0.314-0.882c0-0.146,0.036-0.299,0.109-0.458s0.173-0.303,0.301-0.431s0.273-0.234,0.438-0.321\r\n\t\ts0.337-0.139,0.52-0.157c0.328-0.027,0.597-0.032,0.807-0.014s0.378,0.05,0.506,0.096s0.226,0.091,0.294,0.137\r\n\t\ts0.13,0.082,0.185,0.109c0.009-0.009,0.036-0.055,0.082-0.137s0.101-0.185,0.164-0.308s0.132-0.255,0.205-0.396\r\n\t\ts0.137-0.271,0.191-0.39c-0.265-0.173-0.61-0.299-1.039-0.376s-0.853-0.116-1.271-0.116c-0.41,0-0.8,0.063-1.169,0.191\r\n\t\ts-0.692,0.313-0.971,0.554s-0.499,0.535-0.663,0.882S20.4,46.13,20.4,46.576c0,0.492,0.104,0.902,0.314,1.23\r\n\t\ts0.474,0.613,0.793,0.854s0.661,0.451,1.025,0.629s0.704,0.355,1.019,0.533s0.576,0.376,0.786,0.595s0.314,0.483,0.314,0.793\r\n\t\tc0,0.511-0.148,0.896-0.444,1.155s-0.723,0.39-1.278,0.39c-0.183,0-0.378-0.019-0.588-0.055s-0.419-0.084-0.629-0.144\r\n\t\ts-0.412-0.123-0.608-0.191s-0.357-0.139-0.485-0.212l-0.287,1.176c0.155,0.137,0.34,0.253,0.554,0.349s0.439,0.171,0.677,0.226\r\n\t\tc0.237,0.055,0.472,0.094,0.704,0.116s0.458,0.034,0.677,0.034c0.511,0,0.966-0.077,1.367-0.232s0.738-0.362,1.012-0.622\r\n\t\ts0.485-0.561,0.636-0.902s0.226-0.695,0.226-1.06c0-0.538-0.104-0.978-0.314-1.319S25.397,49.292,25.083,49.064z" }), (0, jsx_runtime_1.jsx)("path", { d: "M34.872,45.072c-0.378-0.429-0.82-0.754-1.326-0.978s-1.06-0.335-1.661-0.335s-1.155,0.111-1.661,0.335\r\n\t\ts-0.948,0.549-1.326,0.978s-0.675,0.964-0.889,1.606s-0.321,1.388-0.321,2.235s0.107,1.595,0.321,2.242s0.511,1.185,0.889,1.613\r\n\t\ts0.82,0.752,1.326,0.971s1.06,0.328,1.661,0.328s1.155-0.109,1.661-0.328s0.948-0.542,1.326-0.971s0.675-0.966,0.889-1.613\r\n\t\ts0.321-1.395,0.321-2.242s-0.107-1.593-0.321-2.235S35.25,45.501,34.872,45.072z M34.195,50.698\r\n\t\tc-0.137,0.487-0.326,0.882-0.567,1.183s-0.515,0.518-0.82,0.649s-0.627,0.198-0.964,0.198c-0.328,0-0.641-0.07-0.937-0.212\r\n\t\ts-0.561-0.364-0.793-0.67s-0.415-0.699-0.547-1.183s-0.203-1.066-0.212-1.75c0.009-0.702,0.082-1.294,0.219-1.777\r\n\t\tc0.137-0.483,0.326-0.877,0.567-1.183s0.515-0.521,0.82-0.649s0.627-0.191,0.964-0.191c0.328,0,0.641,0.068,0.937,0.205\r\n\t\ts0.561,0.36,0.793,0.67s0.415,0.704,0.547,1.183s0.203,1.06,0.212,1.743C34.405,49.616,34.332,50.211,34.195,50.698z" }), (0, jsx_runtime_1.jsx)("polygon", { points: "44.012,50.869 40.061,43.924 38.393,43.924 38.393,54 40.061,54 40.061,47.055 44.012,54 45.68,54 45.68,43.924 \r\n\t\t44.012,43.924 \t" }), (0, jsx_runtime_1.jsx)("path", { d: "M20.5,20v-4c0-0.551,0.448-1,1-1c0.553,0,1-0.448,1-1s-0.447-1-1-1c-1.654,0-3,1.346-3,3v4c0,1.103-0.897,2-2,2\r\n\t\tc-0.553,0-1,0.448-1,1s0.447,1,1,1c1.103,0,2,0.897,2,2v4c0,1.654,1.346,3,3,3c0.553,0,1-0.448,1-1s-0.447-1-1-1\r\n\t\tc-0.552,0-1-0.449-1-1v-4c0-1.2-0.542-2.266-1.382-3C19.958,22.266,20.5,21.2,20.5,20z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "28.5", cy: "19.5", r: "1.5" }), (0, jsx_runtime_1.jsx)("path", { d: "M28.5,25c-0.553,0-1,0.448-1,1v3c0,0.552,0.447,1,1,1s1-0.448,1-1v-3C29.5,25.448,29.053,25,28.5,25z" })] }) }));
+}
+function GraphQLIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", id: "GraphQL_Logo", x: "0px", y: "0px", viewBox: "0 0 400 400", enableBackground: "new 0 0 400 400", className: className, children: (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { x: "122", y: "-0.4", transform: "matrix(-0.866 -0.5 0.5 -0.866 163.3196 363.3136)", fill: "#E535AB", width: "16.6", height: "320.3" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { x: "39.8", y: "272.2", fill: "#E535AB", width: "320.3", height: "16.6" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { x: "37.9", y: "312.2", transform: "matrix(-0.866 -0.5 0.5 -0.866 83.0693 663.3409)", fill: "#E535AB", width: "185", height: "16.6" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { x: "177.1", y: "71.1", transform: "matrix(-0.866 -0.5 0.5 -0.866 463.3409 283.0693)", fill: "#E535AB", width: "185", height: "16.6" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { x: "122.1", y: "-13", transform: "matrix(-0.5 -0.866 0.866 -0.5 126.7903 232.1221)", fill: "#E535AB", width: "16.6", height: "185" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { x: "109.6", y: "151.6", transform: "matrix(-0.5 -0.866 0.866 -0.5 266.0828 473.3766)", fill: "#E535AB", width: "320.3", height: "16.6" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { x: "52.5", y: "107.5", fill: "#E535AB", width: "16.6", height: "185" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { x: "330.9", y: "107.5", fill: "#E535AB", width: "16.6", height: "185" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { x: "262.4", y: "240.1", transform: "matrix(-0.5 -0.866 0.866 -0.5 126.7953 714.2875)", fill: "#E535AB", width: "14.5", height: "160.9" }) }) }), (0, jsx_runtime_1.jsx)("path", { fill: "#E535AB", d: "M369.5,297.9c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8   C373.5,259.9,379.2,281.2,369.5,297.9" }), (0, jsx_runtime_1.jsx)("path", { fill: "#E535AB", d: "M90.9,137c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8   C94.8,99,100.5,120.3,90.9,137" }), (0, jsx_runtime_1.jsx)("path", { fill: "#E535AB", d: "M30.5,297.9c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7   C61.4,320.3,40.1,314.6,30.5,297.9" }), (0, jsx_runtime_1.jsx)("path", { fill: "#E535AB", d: "M309.1,137c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7   C340.1,159.4,318.7,153.7,309.1,137" }), (0, jsx_runtime_1.jsx)("path", { fill: "#E535AB", d: "M200,395.8c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9   C234.9,380.1,219.3,395.8,200,395.8" }), (0, jsx_runtime_1.jsx)("path", { fill: "#E535AB", d: "M200,74c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9   C234.9,58.4,219.3,74,200,74" })] }) }));
+}
+function ArrowDownIcon() {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "10", height: "5", viewBox: "0 0 10 5", fill: "currentColor", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 5L9.33013 0.5H0.669873L5 5Z" }) }));
+}
+function ArrowRightIcon() {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "5", height: "10", viewBox: "0 0 5 10", fill: "currentColor", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 5L0.669873 9.33013V0.669873L5 5Z" }) }));
+}
+function PuzzleIcon() {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z" }) }));
+}
+function NavigatorIcon() {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "18", height: "16", viewBox: "0 0 16 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M8.27572 8.58057L0.942383 4.58057L8.27572 0.580566L15.609 4.58057L8.27572 8.58057ZM8.27572 11.2472L1.32572 7.4639L2.72572 6.69723L8.27572 9.73057L13.8257 6.69723L15.2257 7.4639L8.27572 11.2472ZM8.27572 13.9139L1.32572 10.1306L2.72572 9.3639L8.27572 12.3972L13.8257 9.3639L15.2257 10.1306L8.27572 13.9139ZM8.27572 7.0639L12.8257 4.58057L8.27572 2.09723L3.72572 4.58057L8.27572 7.0639Z", fill: "#6b7280" }) }));
+}
+function FormEditIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: className, children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5" }) }));
+}
+function RotateDeviceIcon({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", className: className, stroke: "currentColor", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { d: "M21.323 8.616l-4.94-4.94a1.251 1.251 0 0 0-1.767 0l-10.94 10.94a1.251 1.251 0 0 0 0 1.768l4.94 4.94a1.25 1.25 0 0 0 1.768 0l10.94-10.94a1.251 1.251 0 0 0 0-1.768zM14 5.707L19.293 11 11.5 18.793 6.207 13.5zm-4.323 14.91a.25.25 0 0 1-.354 0l-1.47-1.47.5-.5-2-2-.5.5-1.47-1.47a.25.25 0 0 1 0-.354L5.5 14.207l5.293 5.293zm10.94-10.94l-.617.616L14.707 5l.616-.616a.25.25 0 0 1 .354 0l4.94 4.94a.25.25 0 0 1 0 .353zm1.394 6.265V18a3.003 3.003 0 0 1-3 3h-3.292l1.635 1.634-.707.707-2.848-2.847 2.848-2.848.707.707L15.707 20h3.304a2.002 2.002 0 0 0 2-2v-2.058zM4 9H3V7a3.003 3.003 0 0 1 3-3h3.293L7.646 2.354l.707-.707 2.848 2.847L8.354 7.34l-.707-.707L9.28 5H6a2.002 2.002 0 0 0-2 2z" }), (0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" })] }));
+}
+function CompareIcon({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", className: className, stroke: "currentColor", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2 4h9v1H3v15h8v1H2zm10 19h1V2h-1zM8.283 10.283l-.566-.566L4.934 12.5l2.783 2.783.566-.566L6.566 13H11v-1H6.566zM14 12h4.08l-1.54-1.54.92-.92 2.96 2.96-2.96 2.96-.92-.92L18.08 13H14v8h9V4h-9z" }), (0, jsx_runtime_1.jsx)("path", { fill: "none", d: "M0 0h24v24H0z" })] }));
+}
+function CommentIcon({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { version: "1.1", id: "Capa_1", className: className, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 529.668 529.668", xmlSpace: "preserve", stroke: "currentColor", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), (0, jsx_runtime_1.jsx)("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("g", { id: "SVGRepo_iconCarrier", children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: "M45.175,529.668l108.887-117.085h330.431V0H45.894L45.175,529.668z M383.896,173.016c20.527,0,37.164,16.64,37.164,37.164 c0,20.527-16.641,37.164-37.164,37.164s-37.164-16.641-37.164-37.164C346.731,189.653,363.372,173.016,383.896,173.016z M265.192,173.016c20.526,0,37.165,16.64,37.165,37.164c0,20.527-16.641,37.164-37.165,37.164 c-20.523,0-37.164-16.641-37.164-37.164C228.028,189.653,244.668,173.016,265.192,173.016z M146.488,173.016 c20.527,0,37.164,16.64,37.164,37.164c0,20.527-16.641,37.164-37.164,37.164c-20.526,0-37.164-16.641-37.164-37.164 C109.325,189.653,125.965,173.016,146.488,173.016z" }), " "] }) }) })] }));
+}
+function PageWizardIcon({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 512 512", xmlSpace: "preserve", className: className, stroke: "currentColor", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("path", { d: "M454.32,219.727l-38.766-51.947l20.815-61.385c2.046-6.032,0.489-12.704-4.015-17.208\r\n\t\t\tc-4.504-4.504-11.175-6.061-17.208-4.015l-61.384,20.815l-51.949-38.766c-5.103-3.81-11.929-4.392-17.605-1.499\r\n\t\t\tc-5.676,2.893-9.217,8.755-9.136,15.125l0.829,64.815l-52.923,37.426c-5.201,3.678-7.863,9.989-6.867,16.282\r\n\t\t\tc0.996,6.291,5.479,11.471,11.561,13.363l43.843,13.629L14.443,483.432c-6.535,6.534-6.535,17.131,0,23.666s17.131,6.535,23.666,0\r\n\t\t\tl257.072-257.073l13.629,43.844c1.891,6.082,7.071,10.565,13.363,11.561c0.876,0.138,1.75,0.206,2.622,0.206\r\n\t\t\tc5.375,0,10.494-2.595,13.66-7.072l37.426-52.923l64.815,0.828c0.071,0.001,0.143,0.001,0.214,0.001\r\n\t\t\tc6.287,0,12.051-3.525,14.909-9.137C458.711,231.658,458.129,224.833,454.32,219.727z M367.51,212.063\r\n\t\t\tc-5.516-0.077-10.697,2.574-13.876,7.071l-22.929,32.421c-12.767-41.075-12.097-40.949-15.933-44.786\r\n\t\t\tc-4.112-4.112-4.736-3.485-44.786-15.934l32.423-22.928c4.496-3.181,7.14-8.37,7.071-13.876l-0.508-39.706l31.825,23.748\r\n\t\t\tc4.415,3.294,10.167,4.206,15.382,2.437l37.606-12.753l-12.753,37.607c-1.769,5.217-0.859,10.969,2.437,15.382l23.748,31.825\r\n\t\t\tL367.51,212.063z" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("polygon", { points: "173.373,67.274 160.014,42.848 146.656,67.274 122.23,80.632 146.656,93.992 160.014,118.417 173.373,93.992 \r\n\t\t\t197.799,80.632 \t\t" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("polygon", { points: "362.946,384.489 352.14,364.731 341.335,384.489 321.577,395.294 341.335,406.1 352.14,425.856 362.946,406.1 \r\n\t\t\t382.703,395.294 \t\t" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("polygon", { points: "378.142,19.757 367.337,0 356.531,19.757 336.774,30.563 356.531,41.369 367.337,61.126 378.142,41.369 \r\n\t\t\t397.9,30.563 \t\t" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("polygon", { points: "490.635,142.513 484.167,130.689 477.701,142.513 465.876,148.979 477.701,155.446 484.167,167.27 \r\n\t\t\t490.635,155.446 502.458,148.979 \t\t" }) }) }), (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("polygon", { points: "492.626,294.117 465.876,301.951 439.128,294.117 446.962,320.865 439.128,347.615 465.876,339.781 \r\n\t\t\t492.626,347.615 484.791,320.865 \t\t" }) }) })] }));
+}
+function PageWizardLogo() {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "60", height: "60", fill: "white", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 46.05 48.36", className: "transition-all duration-300 ease-linear", children: (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: "M45.4,18.34h-1.53c-.3,0-.55.25-.55.55s.25.55.55.55h1.53c.3,0,.55-.25.55-.55s-.25-.55-.55-.55Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M45.4,20.96h-1.53c-.3,0-.55.25-.55.55s.25.55.55.55h1.53c.3,0,.55-.25.55-.55s-.25-.55-.55-.55Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M31.05,43.46h-1.83c-.3,0-.55.25-.55.55s.25.55.55.55h1.83c.3,0,.55-.25.55-.55s-.25-.55-.55-.55Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M31.05,45.36h-1.83c-.3,0-.55.25-.55.55s.25.55.55.55h1.83c.3,0,.55-.25.55-.55s-.25-.55-.55-.55Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M31.05,47.26h-1.83c-.3,0-.55.25-.55.55s.25.55.55.55h1.83c.3,0,.55-.25.55-.55s-.25-.55-.55-.55Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.48,43.46h-1.83c-.3,0-.55.25-.55.55s.25.55.55.55h1.83c.3,0,.55-.25.55-.55s-.25-.55-.55-.55Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.48,45.36h-1.83c-.3,0-.55.25-.55.55s.25.55.55.55h1.83c.3,0,.55-.25.55-.55s-.25-.55-.55-.55Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.48,47.26h-1.83c-.3,0-.55.25-.55.55s.25.55.55.55h1.83c.3,0,.55-.25.55-.55s-.25-.55-.55-.55Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M44.5,25.33h-1.53c-.3,0-.55.25-.55.55s.25.55.55.55h1.53c.3,0,.55-.25.55-.55s-.25-.55-.55-.55Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M44.5,27.95h-1.53c-.3,0-.55.25-.55.55s.25.55.55.55h1.53c.3,0,.55-.25.55-.55s-.25-.55-.55-.55Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.28,31.16c0-.63-.51-1.14-1.14-1.14s-1.14.51-1.14,1.14.51,1.14,1.14,1.14,1.14-.51,1.14-1.14Z" }), (0, jsx_runtime_1.jsx)("ellipse", { cx: "1.39", cy: "23.4", rx: "1.14", ry: "1.14" }), (0, jsx_runtime_1.jsx)("ellipse", { cx: "1.14", cy: "18.37", rx: "1.14", ry: "1.14" }), (0, jsx_runtime_1.jsx)("path", { d: "M5.49,34.6c-.63,0-1.14.51-1.14,1.14s.51,1.14,1.14,1.14,1.14-.51,1.14-1.14-.51-1.14-1.14-1.14Z" }), (0, jsx_runtime_1.jsx)("ellipse", { cx: "16.56", cy: "10.01", rx: "1.14", ry: "1.14" }), (0, jsx_runtime_1.jsx)("ellipse", { cx: "14.51", cy: "3.52", rx: "1.14", ry: "1.14" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.82,8.7c.06,0,.11-.01.15-.03.01,0,.03,0,.04-.01l1.78,1.97c-.05.13-.07.25-.07.36,0,.63.51,1.14,1.14,1.14s1.14-.51,1.14-1.14-.51-1.14-1.14-1.14c-.08,0-.15.02-.21.04,0,0-.02,0-.03,0l-1.74-1.93c.05-.13.08-.27.08-.42,0-.63-.51-1.14-1.14-1.14s-1.14.51-1.14,1.14.51,1.14,1.14,1.14Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M8.12,16c0-.17-.08-.33-.21-.43l-3.13-2.43s0-.02,0-.02c0-.03.02-.06.02-.09,0-.63-.51-1.14-1.14-1.14s-1.14.51-1.14,1.14.51,1.14,1.14,1.14c.16,0,.31-.04.48-.12l2.88,2.23v8.98l-3.5,3.05s-.03,0-.04-.01c-.06-.02-.13-.04-.2-.04-.63,0-1.14.51-1.14,1.14s.51,1.14,1.14,1.14,1.14-.51,1.14-1.14c0-.11-.02-.23-.07-.36l3.58-3.12c.12-.11.19-.26.19-.41v-9.5Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M29.14,37.09v-4.15c1.03-.63,1.96-1.41,2.75-2.32h4.19c.16,0,.3-.07.41-.18l3.89-4.32c.09-.1.14-.24.14-.38l-.11-6.71c.36-.21.58-.58.58-.98,0-.63-.51-1.14-1.14-1.14s-1.14.51-1.14,1.14c0,.41.23.78.59.99l.11,6.5-3.59,3.98h-3.08c1.38-2.01,2.11-4.35,2.11-6.78,0-6.59-5.32-11.95-11.86-11.95-.31,0-.61.02-.9.04V3.31c.37-.2.6-.58.6-.99,0-.63-.51-1.14-1.14-1.14s-1.14.51-1.14,1.14c0,.4.21.76.57.97v7.68c-2.72.47-5.21,1.89-7.02,4.01-1.84,2.16-2.85,4.91-2.85,7.75,0,3.04,1.15,5.94,3.23,8.17,0,0,0,0,0,0,0,.03-.01.05-.01.09v3.4l-3.91,3.32c-.15-.06-.29-.09-.44-.09-.63,0-1.14.51-1.14,1.14s.51,1.14,1.14,1.14,1.14-.51,1.14-1.14c0-.05-.01-.09-.02-.13,0-.01,0-.02,0-.04l4.15-3.53c.12-.1.19-.26.19-.42v-2.71c.95.79,2.02,1.43,3.19,1.9v5.31l-2.23,2.46c-.2.22-.19.57.04.78.1.09.23.14.37.14.15,0,.3-.07.41-.18l2.37-2.61c.09-.1.14-.23.14-.37v-5.14c1.08.31,2.17.47,3.27.47.02,0,.03,0,.05,0v13.12c0,.3.25.55.55.55s.55-.25.55-.55v-13.18c1.34-.13,2.66-.5,3.9-1.09v3.56c0,.3.25.55.55.55s.55-.25.55-.55ZM33.75,22.74c0,5.98-4.83,10.85-10.76,10.85s-10.76-4.87-10.76-10.85,4.83-10.85,10.76-10.85,10.76,4.87,10.76,10.85Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M42.45,32.42l-5.81,6.04h-3.46c-.14,0-.28.06-.39.16l-1.19,1.17s-.03,0-.04-.01c-.06-.02-.11-.03-.18-.03-.63,0-1.14.51-1.14,1.14s.51,1.14,1.14,1.14,1.14-.51,1.14-1.14c0-.12-.02-.25-.07-.38l.96-.94h3.47c.15,0,.29-.06.4-.17l5.97-6.21c.1-.11.16-.25.15-.39s-.06-.28-.17-.39c-.22-.21-.56-.2-.78.01Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M26.92,5.8c.3,0,.55-.25.55-.55v-2.82c0-.3-.25-.55-.55-.55s-.55.25-.55.55v2.82c0,.3.25.55.55.55Z" }), (0, jsx_runtime_1.jsx)("rect", { x: "26.61", y: "17.46", width: "2.63", height: "9.29" }), (0, jsx_runtime_1.jsx)("path", { d: "M19.17,17.46l-4.1,9.29h2.68l.72-1.8h3.94l.72,1.8h2.73l-4.11-9.29h-2.59ZM19.25,23l1.19-2.97,1.19,2.97h-2.38Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M41.16,3.12c.87.24,1.45.79,1.71,1.65.1.31.17.62.25.94,0,.02.02.03.02.05.09-.31.17-.62.26-.93.22-.8.73-1.35,1.52-1.63.27-.09.55-.15.83-.22.11-.03.21-.05.32-.08-.03-.01-.04-.02-.05-.02-.3-.08-.6-.15-.89-.23-.83-.23-1.4-.75-1.67-1.56-.1-.3-.17-.61-.25-.92-.02-.05-.03-.1-.04-.15-.02.01-.02.02-.02.03-.08.29-.15.58-.23.88-.21.81-.71,1.36-1.51,1.66-.2.07-.42.12-.63.17-.17.05-.35.09-.54.14h0s.04.03.05.03c.3.08.59.15.89.23Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M31.32,8.28c2.09.57,3.47,1.9,4.1,3.96.23.75.4,1.51.6,2.26.01.04.02.08.03.11.21-.76.4-1.5.61-2.25.54-1.93,1.75-3.25,3.64-3.93.64-.23,1.32-.36,1.99-.54.25-.07.5-.13.77-.2-.06-.02-.09-.03-.12-.04-.71-.19-1.43-.36-2.15-.56-2-.55-3.36-1.79-4.02-3.75-.25-.72-.4-1.47-.6-2.22-.03-.12-.07-.24-.1-.36-.03.02-.03.04-.04.06-.18.7-.37,1.41-.56,2.11-.52,1.94-1.73,3.28-3.63,3.98-.49.18-1.01.28-1.51.42-.42.11-.84.22-1.29.33h0c.07.03.1.03.13.04.71.18,1.43.36,2.14.55Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M45.1,12.83c-.83-.23-1.4-.75-1.67-1.56-.1-.3-.17-.61-.25-.92-.02-.05-.03-.1-.04-.15-.02.01-.02.02-.02.03-.08.29-.15.58-.23.88-.21.81-.71,1.36-1.51,1.66-.2.07-.42.12-.63.17-.17.05-.35.09-.54.14h0s.04.03.05.03c.3.08.59.15.89.23.87.24,1.45.79,1.71,1.65.1.31.17.62.25.94,0,.02.02.03.02.05.09-.31.17-.62.26-.93.22-.8.73-1.35,1.52-1.63.27-.09.55-.15.83-.22.11-.03.21-.05.32-.08-.03-.01-.04-.02-.05-.02-.3-.08-.6-.15-.89-.23Z" })] }) }));
+}
+function UploadCloudIcon() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_237_1224)", children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.5658 3.52275C14.1894 1.26035 17.5356 0.0108636 21 0C28.0613 0 33.9229 5.25 34.5608 12.0199C38.7397 12.6105 42 16.1096 42 20.4041C42 25.1186 38.0677 28.875 33.3034 28.875H26.25C25.9019 28.875 25.5681 28.7367 25.3219 28.4906C25.0758 28.2444 24.9375 27.9106 24.9375 27.5625C24.9375 27.2144 25.0758 26.8806 25.3219 26.6344C25.5681 26.3883 25.9019 26.25 26.25 26.25H33.306C36.6949 26.25 39.375 23.5935 39.375 20.4041C39.375 17.2121 36.6975 14.5556 33.3034 14.5556H31.9909V13.2431C31.9935 7.41563 27.111 2.625 21 2.625C18.1647 2.63633 15.4267 3.66039 13.2799 5.5125C11.2928 7.224 10.2533 9.28725 10.2533 10.9069V12.0829L9.08512 12.2115C5.418 12.6131 2.625 15.624 2.625 19.2097C2.625 23.0606 5.85375 26.25 9.92513 26.25H15.75C16.0981 26.25 16.4319 26.3883 16.6781 26.6344C16.9242 26.8806 17.0625 27.2144 17.0625 27.5625C17.0625 27.9106 16.9242 28.2444 16.6781 28.4906C16.4319 28.7367 16.0981 28.875 15.75 28.875H9.92513C4.4835 28.875 0 24.5858 0 19.2097C0 14.5819 3.32325 10.7494 7.72275 9.77812C8.09812 7.51275 9.555 5.25525 11.5658 3.52275Z", fill: "#69635F" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.0699 10.8827C20.1918 10.7604 20.3366 10.6635 20.4961 10.5973C20.6555 10.5311 20.8265 10.4971 20.9991 10.4971C21.1718 10.4971 21.3427 10.5311 21.5022 10.5973C21.6616 10.6635 21.8065 10.7604 21.9284 10.8827L29.8034 18.7577C30.0498 19.0041 30.1883 19.3384 30.1883 19.6869C30.1883 20.0355 30.0498 20.3697 29.8034 20.6162C29.5569 20.8626 29.2227 21.0011 28.8741 21.0011C28.5256 21.0011 28.1913 20.8626 27.9449 20.6162L22.3116 14.9803V38.0619C22.3116 38.41 22.1733 38.7439 21.9272 38.99C21.6811 39.2361 21.3472 39.3744 20.9991 39.3744C20.651 39.3744 20.3172 39.2361 20.071 38.99C19.8249 38.7439 19.6866 38.41 19.6866 38.0619V14.9803L14.0534 20.6162C13.8069 20.8626 13.4727 21.0011 13.1241 21.0011C12.7756 21.0011 12.4413 20.8626 12.1949 20.6162C11.9484 20.3697 11.81 20.0355 11.81 19.6869C11.81 19.3384 11.9484 19.0041 12.1949 18.7577L20.0699 10.8827Z", fill: "#69635F" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_237_1224", children: (0, jsx_runtime_1.jsx)("rect", { width: "42", height: "42", fill: "white" }) }) })] }));
+}
+function SparkleIconBig() {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "80", height: "75", viewBox: "10 20 50 50", stroke: "currentColor", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M32.4918 26.0411L33.5 21L34.5082 26.0411C36.3703 35.3518 43.6482 42.6297 52.9589 44.4918L58 45.5L52.9589 46.5082C43.6482 48.3703 36.3703 55.6482 34.5082 64.9589L33.5 70L32.4918 64.9589C30.6297 55.6482 23.3518 48.3703 14.0411 46.5082L9 45.5L14.0411 44.4918C23.3518 42.6297 30.6297 35.3518 32.4918 26.0411Z" }) }));
+}
+function SparkleIconSmall() {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "35", viewBox: "15 20 40 50", stroke: "currentColor", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M32.4918 26.0411L33.5 21L34.5082 26.0411C36.3703 35.3518 43.6482 42.6297 52.9589 44.4918L58 45.5L52.9589 46.5082C43.6482 48.3703 36.3703 55.6482 34.5082 64.9589L33.5 70L32.4918 64.9589C30.6297 55.6482 23.3518 48.3703 14.0411 46.5082L9 45.5L14.0411 44.4918C23.3518 42.6297 30.6297 35.3518 32.4918 26.0411Z" }) }));
+}

package/dist/editor/ui/ItemNameDialog.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemNameDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog_1 = require("primereact/dialog");
+const react_1 = require("react");
+const DialogButtons_1 = __importDefault(require("./DialogButtons"));
+const button_1 = require("primereact/button");
+const inputtext_1 = require("primereact/inputtext");
+exports.ItemNameDialog = (0, react_1.forwardRef)((_props, ref) => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [props, setProps] = (0, react_1.useState)();
+    const [name, setName] = (0, react_1.useState)("");
+    const nameRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        setName(props?.name || "");
+    }, [props]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        show: (props) => {
+            setVisible(true);
+            setProps(props);
+        },
+    }));
+    if (!visible)
+        return null;
+    if (!props)
+        return null;
+    const isValidName = name.trim().length > 0;
+    const handleOk = () => {
+        setVisible(false);
+        props?.accept(name);
+        props.onClose?.(name);
+    };
+    return ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { visible: visible, onHide: () => {
+            setVisible(false);
+        }, onShow: () => {
+            nameRef.current?.focus();
+        }, style: { width: "400px" }, header: props?.title ?? "Name", children: [(0, jsx_runtime_1.jsxs)("div", { className: "py-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm my-2", children: props.message || "Enter a name for the new item:" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { ref: nameRef, value: name, className: "w-full", onChange: (e) => setName(e.target.value), onKeyDown: (ev) => {
+                            if (ev.key === "Enter" && isValidName)
+                                handleOk();
+                        } })] }), (0, jsx_runtime_1.jsxs)(DialogButtons_1.default, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleOk, label: "Ok", disabled: !isValidName }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => props.onClose?.(null), label: "Cancel" })] })] }));
+});

package/dist/editor/ui/ItemNameDialogNew.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemNameDialog = ItemNameDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog_1 = require("primereact/dialog");
+const react_1 = require("react");
+const DialogButtons_1 = __importDefault(require("./DialogButtons"));
+const button_1 = require("primereact/button");
+const inputtext_1 = require("primereact/inputtext");
+const editContext_1 = require("../client/editContext");
+const contentService_1 = require("../services/contentService");
+const use_debounce_1 = require("use-debounce");
+function ItemNameDialog(props) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [name, setName] = (0, react_1.useState)("");
+    const [validationError, setValidationError] = (0, react_1.useState)();
+    const [isValid, setIsValid] = (0, react_1.useState)(false);
+    const nameRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        setName(props?.name || "");
+    }, [props]);
+    const checkNameValidDebounced = (0, use_debounce_1.useDebouncedCallback)(async () => checkName(), 500);
+    (0, react_1.useEffect)(() => {
+        checkNameValidDebounced();
+    }, [name]);
+    const checkName = async () => {
+        let valid = name.trim().length > 0;
+        if (!props.parentItem) {
+            setIsValid(valid);
+            setValidationError(valid ? undefined : "Name is required");
+            return;
+        }
+        if (valid) {
+            const children = await (0, contentService_1.getChildren)(props.parentItem.id, editContext?.sessionId ?? "", [], false, props.parentItem?.language || "en");
+            if (children.find((x) => x.name.toLocaleLowerCase() === name.trim().toLocaleLowerCase() &&
+                (props.itemId ? x.id !== props.itemId : true))) {
+                valid = false;
+                setValidationError("A page with this name already exists.");
+            }
+        }
+        if (valid)
+            setValidationError(undefined);
+        setIsValid(valid);
+        return valid;
+    };
+    const handleOk = () => {
+        props.onClose?.(name);
+    };
+    return ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { visible: true, onHide: () => {
+            props.onClose?.(null);
+        }, onShow: () => {
+            nameRef.current?.focus();
+            nameRef.current?.select();
+        }, style: { width: "400px" }, header: props?.title ?? "Name", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm my-2", children: props.message || "Enter a name for the new item:" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { ref: nameRef, value: name, className: "w-full", onChange: (e) => setName(e.target.value), onKeyDown: (ev) => {
+                            if (ev.key === "Enter" && isValid)
+                                handleOk();
+                        } }), validationError && ((0, jsx_runtime_1.jsx)("div", { className: "text-red-500 mt-2", children: validationError }))] }), (0, jsx_runtime_1.jsxs)(DialogButtons_1.default, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleOk, label: "Ok", disabled: !isValid }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => props.onClose?.(null), label: "Cancel" })] })] }));
+}