@alpaca-editor/core 1.0.0 → 1.0.3764-editor-mono

package/dist/editor/views/ItemEditor.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemEditor = ItemEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("primereact/button");
+const EditorWarnings_1 = require("../EditorWarnings");
+const FieldList_1 = require("../FieldList");
+const ItemInfo_1 = require("../ItemInfo");
+const editContext_1 = require("../client/editContext");
+function ItemEditor({ item, compareToItem, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!editContext)
+        return;
+    if (!item)
+        item = editContext.contentEditorItem;
+    if (!item)
+        return;
+    const pageValidators = editContext.validationResult?.find((x) => x.item.id === item?.id &&
+        x.item.language === item?.language &&
+        x.item.version === item?.version)?.results || [];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 overflow-y-auto", children: [(0, jsx_runtime_1.jsx)(EditorWarnings_1.EditorWarnings, { item: item }), (0, jsx_runtime_1.jsx)(ItemInfo_1.ItemInfo, { item: item }), editContext.itemVersions.length > 0 && ((0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: [{ fields: Object.values(item.fields) }], validators: pageValidators.filter((x) => x.itemId === item.id), showStandardFieldsEnabled: true, compareToFields: compareToItem?.fields })), editContext.itemVersions.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center p-4", children: (0, jsx_runtime_1.jsxs)(button_1.Button, { onClick: async () => {
+                        await editContext.operations.createVersion(item.descriptor);
+                    }, children: ["Create First Version (", item.language, ")"] }) }))] }));
+}

package/dist/editor/views/SingleEditView.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SingleEditView = SingleEditView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const editContext_1 = require("../client/editContext");
+const PageViewer_1 = require("../page-viewer/PageViewer");
+const ItemEditor_1 = require("./ItemEditor");
+function SingleEditView({ pageViewContext, itemDescriptor, mode, name, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [item, setItem] = (0, react_1.useState)(undefined);
+    (0, react_2.useEffect)(() => {
+        async function loadItem() {
+            if (!itemDescriptor)
+                return;
+            const item = await editContext?.itemsRepository.getItem(itemDescriptor);
+            setItem(item);
+        }
+        loadItem();
+    }, [itemDescriptor]);
+    if ((item && !item.hasLayout) || pageViewContext.device === "")
+        return (0, jsx_runtime_1.jsx)(ItemEditor_1.ItemEditor, { item: item });
+    return ((0, jsx_runtime_1.jsx)(PageViewer_1.PageViewer, { mode: mode, pageViewContext: pageViewContext, showFormEditor: true, name: name, followEditsDefault: true }));
+}

package/dist/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configureForUser = exports.Editor = void 0;
+__exportStar(require("./config/types"), exports);
+var Editor_1 = require("./editor/Editor");
+Object.defineProperty(exports, "Editor", { enumerable: true, get: function () { return Editor_1.Editor; } });
+var config_1 = require("./config/config");
+Object.defineProperty(exports, "configureForUser", { enumerable: true, get: function () { return config_1.configureForUser; } });

package/dist/page-wizard/PageWizard.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageWizard = PageWizard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../editor/client/editContext");
+const SelectWizard_1 = require("./SelectWizard");
+const react_1 = require("react");
+const WizardSteps_1 = require("./WizardSteps");
+const service_1 = require("./service"); // Adjust import as needed
+const navigation_1 = require("next/navigation");
+function PageWizard() {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [wizard, setWizard] = (0, react_1.useState)(null);
+    const [parentItem, setParentItem] = (0, react_1.useState)();
+    const searchParams = (0, navigation_1.useSearchParams)();
+    // Load all wizards and check URL param on mount
+    (0, react_1.useEffect)(() => {
+        if (!editContext?.currentItemDescriptor)
+            return;
+        (0, service_1.getWizards)(editContext?.currentItemDescriptor).then((availableWizards) => {
+            // Check for wizard ID in URL
+            const params = new URLSearchParams(window.location.search);
+            const wizardName = params.get("wizard");
+            if (wizardName) {
+                // Find wizard by ID from the loaded wizards
+                const foundWizard = availableWizards.find((w) => w.name === wizardName);
+                if (foundWizard) {
+                    setWizard(foundWizard);
+                    setParentItem(editContext.currentItemDescriptor);
+                }
+            }
+        });
+    }, [searchParams]);
+    const handleSelect = (selectedWizard) => {
+        setWizard(selectedWizard);
+        // Update URL with wizard ID
+        const url = new URL(window.location.href);
+        url.searchParams.set("wizard", selectedWizard.name);
+        window.history.pushState({}, "", url);
+    };
+    const handleCancel = () => {
+        setWizard(null);
+        // Remove wizard from URL
+        const url = new URL(window.location.href);
+        url.searchParams.delete("wizard");
+        window.history.pushState({}, "", url);
+        editContext?.switchView("content-editor");
+    };
+    if (!editContext?.currentItemDescriptor)
+        return null;
+    if (!wizard) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-1000 bg-white", children: (0, jsx_runtime_1.jsx)(SelectWizard_1.SelectWizard, { parentItem: parentItem, setParentItem: setParentItem, onSelect: handleSelect }) }));
+    }
+    if (!parentItem)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-1000 bg-white text-gray-950", children: (0, jsx_runtime_1.jsx)(WizardSteps_1.WizardSteps, { wizard: wizard, onCancel: handleCancel, parentItem: parentItem, onLanguageSelected: (language) => {
+                setParentItem({
+                    ...parentItem,
+                    language: language.languageCode,
+                });
+            } }) }));
+}

package/dist/page-wizard/SelectWizard.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectWizard = SelectWizard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const service_1 = require("./service");
+const ScrollingContentTree_1 = require("../editor/ScrollingContentTree");
+const Splitter_1 = require("../editor/ui/Splitter");
+const Icons_1 = require("../editor/ui/Icons");
+const SimpleIconButton_1 = require("../editor/ui/SimpleIconButton");
+const editContext_1 = require("../editor/client/editContext");
+function SelectWizard({ parentItem, setParentItem, onSelect, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [wizards, setWizards] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        const fetchWizards = async () => {
+            if (!parentItem)
+                return;
+            const wizards = await (0, service_1.getWizards)(parentItem);
+            setWizards(wizards);
+        };
+        fetchWizards();
+    }, [parentItem]);
+    const treePanel = {
+        name: "tree",
+        defaultSize: 450,
+        content: ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full gap-2", children: (0, jsx_runtime_1.jsx)(ScrollingContentTree_1.ScrollingContentTree, { selectedItemId: parentItem?.id, onSelectionChange: (x) => {
+                    setParentItem({
+                        ...parentItem,
+                        id: x.id,
+                        language: x.language,
+                        version: x.version,
+                    });
+                } }) })),
+    };
+    const wizardPanel = {
+        name: "wizard",
+        defaultSize: "auto",
+        collapsible: false,
+        content: ((0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-2 overflow-auto", children: [!parentItem && ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full items-center justify-center text-center text-gray-500", children: "Select a parent item on the left!" })), parentItem && wizards?.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-center text-gray-500", children: "No wizards found" })), parentItem && wizards.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mx-2 flex flex-wrap gap-3", children: wizards.map((wizard) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex cursor-pointer items-center gap-2 rounded-md border border-gray-300 p-4 hover:bg-gray-100", onClick: () => onSelect(wizard), children: [(0, jsx_runtime_1.jsx)("img", { src: wizard.icon, alt: wizard.name, className: "h-10 w-10" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg", children: wizard.name }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: wizard.description })] })] }, wizard.id))) }))] })),
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col", children: [(0, jsx_runtime_1.jsxs)("h1", { className: "bg-shape-black flex w-full items-center gap-2 p-4 text-xl font-bold text-white", children: [(0, jsx_runtime_1.jsx)(Icons_1.PageWizardLogo, {}), "Select Wizard", (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-times", className: "ml-auto", onClick: () => editContext?.switchView("editor"), label: "Cancel" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 bg-gray-100 px-4 py-3 text-sm text-gray-600", children: "First select a parent item, then select a wizard to create a new page." }), (0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { panels: [treePanel, wizardPanel] })] }));
+}

package/dist/page-wizard/WizardSteps.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WizardSteps = WizardSteps;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const button_1 = require("primereact/button");
+const Icons_1 = require("../editor/ui/Icons");
+const SimpleIconButton_1 = require("../editor/ui/SimpleIconButton");
+const react_dom_1 = require("react-dom");
+const editContext_1 = require("../editor/client/editContext");
+const utils_1 = require("primereact/utils");
+// import { LanguageSelector } from "../editor/menubar/LanguageSelector";
+function WizardSteps({ wizard, onCancel, parentItem, }) {
+    const [currentStepIndex, setCurrentStepIndex] = (0, react_1.useState)(0);
+    const [data, setData] = (0, react_1.useState)({});
+    const [pageModel, setPageModel] = (0, react_1.useState)({
+        components: [],
+        name: "",
+        metaDescription: "",
+        metaKeywords: "",
+    });
+    const editContext = (0, editContext_1.useEditContext)();
+    const [internalState, setInternalState] = (0, react_1.useState)({});
+    const [stepCompleted, setStepCompleted] = (0, react_1.useState)(-1);
+    const getCurrentStep = () => {
+        const step = wizard.steps[currentStepIndex];
+        if (!step)
+            return null;
+        const type = step.type;
+        const stepId = step.id;
+        if (!type)
+            throw new Error("Step type is required");
+        // Extract component name by removing "Page Wizard" prefix and spaces
+        const componentName = type.replace("Page Wizard ", "").replace(/\s+/g, "");
+        const config = editContext?.configuration;
+        if (!config)
+            return null;
+        // Get the appropriate component based on the extracted name
+        const StepComponent = config.pageWizard.stepComponents[componentName];
+        if (StepComponent) {
+            return ((0, jsx_runtime_1.jsx)(StepComponent, { step: wizard.steps[currentStepIndex], data: data, setData: setData, setPageModel: setPageModel, pageModel: pageModel, wizard: wizard, setStepCompleted: (completed) => {
+                    if (completed) {
+                        setStepCompleted((prev) => Math.max(prev, currentStepIndex));
+                    }
+                    else {
+                        setStepCompleted(currentStepIndex - 1);
+                    }
+                }, internalState: internalState, setInternalState: setInternalState, parentItem: parentItem }, stepId));
+        }
+        return null;
+    };
+    const switchStep = (index) => {
+        document.startViewTransition(() => {
+            (0, react_dom_1.flushSync)(() => {
+                setCurrentStepIndex(index);
+            });
+        });
+    };
+    const currentStep = wizard.steps[currentStepIndex];
+    if (!currentStep)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col  flex-1 h-full justify-stretch ", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col border-b border-gray-200 bg-gray-100 flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center bg-shape-black text-white p-4 py-4", children: [(0, jsx_runtime_1.jsx)(Icons_1.PageWizardLogo, {}), " ", (0, jsx_runtime_1.jsx)("h1", { className: "text-xl font-bold text-white", children: wizard.name }), wizard.description && ((0, jsx_runtime_1.jsxs)("div", { className: "text-gray-200", children: ["- ", wizard.description] })), (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-times", className: "ml-auto", onClick: onCancel, label: "Cancel" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-col animate-fadeLeft transition-all duration-900 bg-white", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col text-sm text-gray-500 px-5 py-4", children: wizard.steps.map((step, index) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)("flex gap-4 items-center mb-5", currentStepIndex > index && "cursor-pointer"), onClick: () => index < currentStepIndex ? switchStep(index) : undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.classNames)("border-2 rounded-full w-7 h-7 p-2 flex items-center justify-center text-xs font-medium text-activeStepColor", currentStepIndex >= index
+                                                    ? "border-canvas-red text-canvas-red"
+                                                    : "border-gray-400"), children: index + 1 }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("w-auto  opacity-100", currentStepIndex === index
+                                                    ? "text-canvas-red font-semibold text-base"
+                                                    : currentStepIndex >= index
+                                                        ? "text-gray-600 text-sm"
+                                                        : "text-gray-400 text-sm"), children: step.name })] }, step.id))) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col px-8 pt-9 bg-secondary lg:pr-20 xl:pr-32 container animate-fadeIn transition-all duration-500", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-4xl font-semibold", children: currentStep?.name }), currentStep?.description && ((0, jsx_runtime_1.jsx)("div", { className: "text-base mt-2 font-light", children: currentStep.description })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 pt-8", children: getCurrentStep() })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between border-t border-gray-200 p-3", children: [(0, jsx_runtime_1.jsx)("div", { children: currentStepIndex > 0 && ((0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-arrow-left mr-2", onClick: () => switchStep(currentStepIndex - 1), disabled: currentStepIndex === 0, children: wizard.steps[currentStepIndex - 1]?.name })) }), (0, jsx_runtime_1.jsxs)("div", { children: [currentStepIndex < wizard.steps.length - 1 && ((0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-arrow-right mr-2", disabled: stepCompleted < currentStepIndex, onClick: () => switchStep(currentStepIndex + 1), children: wizard.steps[currentStepIndex + 1]?.name })), currentStepIndex === wizard.steps.length - 1 && ((0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-check", disabled: stepCompleted < currentStepIndex, onClick: () => {
+                                    editContext?.switchView("editor");
+                                }, label: "Finish", className: "ml-2" }))] })] })] }));
+}

package/dist/page-wizard/service.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWizards = getWizards;
+exports.createWizardAiContext = createWizardAiContext;
+exports.wipeComponents = wipeComponents;
+const serviceHelper_1 = require("../editor/services/serviceHelper");
+async function getWizards(parentItem) {
+    const result = await (0, serviceHelper_1.post)("/alpaca/editor/page-wizard/wizards", parentItem);
+    return result.data;
+}
+function createWizardAiContext({ editContext, }) {
+    const aiPromptUrl = "/alpaca/editor/page-wizard/prompt";
+    return {
+        // configuration.services.editorService.baseUrl +
+        endpoint: aiPromptUrl,
+        promptData: {
+            itemid: editContext.currentItemDescriptor?.id,
+            language: editContext.currentItemDescriptor?.language,
+            version: editContext.currentItemDescriptor?.version,
+        },
+    };
+}
+async function wipeComponents(pageItem) {
+    const result = await (0, serviceHelper_1.post)("/alpaca/editor/page-wizard/wipePage", pageItem);
+    return result.data;
+}

package/dist/page-wizard/startPageWizardCommand.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.startPageWizardCommand = void 0;
+exports.startPageWizardCommand = {
+    id: "startWizard",
+    label: "Start Wizard",
+    icon: "pi pi-magic",
+    execute: async (context) => {
+        if (!context.data?.item)
+            return;
+        await context.editContext.loadItem(context.data.item);
+        // Add wizard name to URL
+        if (context.data?.wizard) {
+            await context.editContext.updateUrl({
+                wizard: context.data.wizard.name,
+                view: "page-wizard",
+            });
+        }
+    },
+    disabled: () => {
+        return false;
+    },
+};

package/dist/page-wizard/steps/BuildPageStep.js

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BuildPageStep = BuildPageStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Splitter_1 = require("../../editor/ui/Splitter");
+const editContext_1 = require("../../editor/client/editContext");
+const react_1 = require("react");
+const PageViewer_1 = require("../../editor/page-viewer/PageViewer");
+const use_debounce_1 = require("use-debounce");
+const contentService_1 = require("../../editor/services/contentService");
+const ActionButton_1 = require("../../components/ActionButton");
+const Generate_1 = __importDefault(require("./Generate"));
+const usePageCreator_1 = require("./usePageCreator");
+function BuildPageStep({ data, setData, parentItem, wizard, setStepCompleted, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [createdPageDescriptor, setCreatedPageDescriptor] = (0, react_1.useState)();
+    const [pageLoaded, setPageLoaded] = (0, react_1.useState)(false);
+    const [fullParentItem, setFullParentItem] = (0, react_1.useState)();
+    const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
+    const [validationMessage, setValidationMessage] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        if (createdPageDescriptor &&
+            createdPageDescriptor.id === editContext?.page?.item?.descriptor.id)
+            setPageLoaded(true);
+    }, [editContext?.page]);
+    (0, react_1.useEffect)(() => {
+        const loadParentItem = async () => {
+            if (!parentItem)
+                return;
+            const item = await editContext?.itemsRepository.getItem(parentItem);
+            setFullParentItem(item);
+        };
+        loadParentItem();
+    }, [parentItem]);
+    (0, react_1.useEffect)(() => {
+        const buildComponents = async () => {
+            try {
+                console.log("Building components", createdPageDescriptor, editContext?.page);
+                // Recursively create components from page model
+                if (pageModel.components && pageModel.components.length > 0) {
+                    await pageCreator.createComponentsRecursively(pageModel.components, "root");
+                }
+                editContext?.requestRefresh();
+                console.log("Components built", createdPageDescriptor, editContext?.page);
+            }
+            finally {
+                setIsBuilding(false);
+            }
+        };
+        if (pageLoaded) {
+            buildComponents();
+        }
+    }, [pageLoaded]);
+    // Initialize pageModel if it doesn't exist
+    const pageModel = data.pageModel || {
+        components: [],
+        name: "",
+        metaDescription: "",
+    };
+    // Handle input changes
+    const handleInputChange = (field, value) => {
+        const updatedPageModel = {
+            ...pageModel,
+            [field]: value,
+        };
+        setData({
+            ...data,
+            pageModel: updatedPageModel,
+        });
+    };
+    const checkName = async () => {
+        if (!parentItem)
+            return;
+        let valid = !!wizard.templateId && pageModel.name.trim().length >= 3;
+        if (valid) {
+            const children = await (0, contentService_1.getChildren)(parentItem.id, editContext?.sessionId ?? "", [], false, editContext?.contentEditorItem?.language || "en");
+            if (children.find((x) => x.name.toLocaleLowerCase() ===
+                pageModel.name.trim().toLocaleLowerCase())) {
+                valid = false;
+                setValidationMessage("A page with this name already exists.");
+            }
+        }
+        else {
+            if (pageModel.name.trim().length > 0 && pageModel.name.trim().length < 3)
+                setValidationMessage("Name is too short.");
+            else
+                setValidationMessage(undefined);
+        }
+        if (valid)
+            setValidationMessage(undefined);
+        return valid;
+    };
+    const checkNameValidDebounced = (0, use_debounce_1.useDebouncedCallback)(async () => checkName(), 500);
+    (0, react_1.useEffect)(() => {
+        checkNameValidDebounced();
+    }, [pageModel.name]);
+    const createPage = () => {
+        setTimeout(async () => {
+            if (!editContext || !parentItem)
+                return;
+            try {
+                if (!(await checkName()))
+                    return;
+                setIsBuilding(true);
+                const result = await editContext.operations.createItem(parentItem, wizard.templateId, pageModel.name);
+                if (!result)
+                    return;
+                editContext?.loadItem(result, { addToBrowseHistory: true });
+                setCreatedPageDescriptor(result);
+                console.log("Page created", result, "Page model", pageModel);
+                setStepCompleted(true);
+            }
+            catch (error) {
+                console.error("Error creating page", error);
+                setIsBuilding(false);
+            }
+        }, 1);
+    };
+    const pageCreator = (0, usePageCreator_1.usePageCreator)(createdPageDescriptor, wizard, (pageModel) => setData({ ...data, pageModel }));
+    const settingsPanel = {
+        name: "settings",
+        defaultSize: 450,
+        collapsible: false,
+        content: ((0, jsx_runtime_1.jsxs)("div", { className: "pr-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium mb-1", children: "Target Parent Item" }), (0, jsx_runtime_1.jsx)("div", { className: "mb-4 text-xs break-after-all", children: fullParentItem?.path })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "pageName", className: "block text-sm font-medium mb-1", children: "Page Name" }), (0, jsx_runtime_1.jsx)("input", { id: "pageName", type: "text", className: "w-full p-2 border rounded text-sm", value: pageModel.name, onChange: (e) => handleInputChange("name", e.target.value), placeholder: "Enter page name" }), validationMessage && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 text-sm text-red-500", children: validationMessage }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "metaDescription", className: "block text-sm font-medium mb-1", children: "Meta Description" }), (0, jsx_runtime_1.jsx)("textarea", { id: "metaDescription", className: "w-full p-2 border rounded min-h-[100px]  text-sm", value: pageModel.metaDescription, onChange: (e) => handleInputChange("metaDescription", e.target.value), placeholder: "Enter meta description" })] }), (0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { disabled: isBuilding || !!validationMessage, className: "flex-1 w-full", onClick: () => {
+                        createPage();
+                    }, isLoading: isBuilding, loadingText: "Working", children: "Create Page" })] })),
+    };
+    const contentPanel = {
+        name: "content",
+        defaultSize: "auto",
+        collapsible: false,
+        content: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: pageLoaded ? "h-full" : "h-0", children: (0, jsx_runtime_1.jsx)(PageViewer_1.PageViewer, { name: "single", mode: editContext?.previewMode ? "view" : "edit", showFormEditor: false, followEditsDefault: true, pageViewContext: editContext.pageView }) }), isBuilding && !pageLoaded && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-full", children: (0, jsx_runtime_1.jsx)(Generate_1.default, { title: "Building page..." }) }))] })),
+    };
+    return (0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { panels: [settingsPanel, contentPanel] });
+}

package/dist/page-wizard/steps/CollectStep.js

@@ -0,0 +1,124 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollectStep = CollectStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const inputtext_1 = require("primereact/inputtext");
+const react_1 = require("react");
+const Splitter_1 = require("../../editor/ui/Splitter");
+const react_md_editor_1 = __importDefault(require("@uiw/react-md-editor"));
+const ActionButton_1 = require("../../components/ActionButton");
+const Icons_1 = require("../../editor/ui/Icons");
+const Spinner_1 = require("../../editor/ui/Spinner");
+function CollectStep({ data, setData, setStepCompleted, }) {
+    const [isUploading, setIsUploading] = (0, react_1.useState)(false);
+    const [isScraping, setIsScraping] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [scrapeError, setScrapeError] = (0, react_1.useState)(null);
+    const [scrapeUrl, setScrapeUrl] = (0, react_1.useState)(null);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            uploadFile(e.dataTransfer.files[0]);
+            setError(null);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (data.htmlContent) {
+            setStepCompleted(true);
+        }
+    }, [data.htmlContent]);
+    const uploadFile = async (file) => {
+        if (!file) {
+            setError("Please select a file first");
+            return;
+        }
+        try {
+            setIsUploading(true);
+            setError(null);
+            const formData = new FormData();
+            formData.append("uploadedFile", file);
+            const response = await fetch("/alpaca/editor/page-wizard/convertFile", {
+                method: "POST",
+                body: formData,
+            });
+            if (!response.ok) {
+                throw new Error(`Upload failed: ${response.status} ${response.statusText}`);
+            }
+            const htmlContent = await response.text();
+            setData((prev) => ({
+                ...prev,
+                htmlContent: htmlContent,
+            }));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Unknown error occurred");
+        }
+        finally {
+            setIsUploading(false);
+        }
+    };
+    const triggerFileInput = () => {
+        fileInputRef.current ? (fileInputRef.current.value = "") : "";
+        fileInputRef.current?.click();
+    };
+    const handleScrape = async (e) => {
+        e.preventDefault();
+        try {
+            setScrapeError(null);
+            if (!scrapeUrl) {
+                setScrapeError("Please enter a URL first");
+                return;
+            }
+            setIsScraping(true);
+            const response = await fetch("/alpaca/editor/page-wizard/scrape", {
+                method: "POST",
+                body: JSON.stringify({ url: scrapeUrl }),
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`Scraping failed: ${response.status} ${response.statusText}`);
+            }
+            const htmlContent = await response.text();
+            setData((prev) => ({
+                ...prev,
+                htmlContent: htmlContent,
+            }));
+        }
+        catch (err) {
+            setScrapeError(err instanceof Error ? err.message : "Unknown error occurred");
+        }
+        finally {
+            setIsScraping(false);
+        }
+    };
+    const uploadPanel = {
+        name: "upload",
+        defaultSize: 300,
+        collapsible: false,
+        content: ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6 items-stretch p-2 6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-semibold text-gray-700", children: "Upload a file" }), (0, jsx_runtime_1.jsx)("div", { className: `h-40 w-40 border border-dashed border-gray-300 flex flex-col justify-center items-center p-5   ${isUploading ? "bg-gray-200" : "bg-white"}`, onDrop: handleDrop, onDragOver: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)("div", { className: "text-sm font-medium flex flex-col justify-center items-center text-center gap-1", children: [!isUploading && (0, jsx_runtime_1.jsx)(Icons_1.UploadCloudIcon, {}), isUploading && (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: ".pdf,.doc,.docx", style: { display: "none" }, onChange: (e) => {
+                                            const file = e.target.files?.[0];
+                                            if (file) {
+                                                uploadFile(file);
+                                            }
+                                        }, onDrop: handleDrop, disabled: isUploading }), "Drag & Drop to upload or", (0, jsx_runtime_1.jsx)("span", { className: `text-sm font-medium  ${isUploading
+                                            ? "text-gray-500"
+                                            : "text-canvas-pink underline cursor-pointer"}  `, onClick: triggerFileInput, children: "browse" })] }) })] }), error && ((0, jsx_runtime_1.jsx)("div", { className: "text-red-500 text-sm mt-2", children: error })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-semibold text-gray-700", children: "Scrape page from URL" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { type: "text", className: "border border-gray-300 rounded-md px-3 py-2", onChange: (e) => setScrapeUrl(e.target.value) }), scrapeError && ((0, jsx_runtime_1.jsx)("div", { className: "text-red-500 text-sm mt-2", children: scrapeError })), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-2", children: (0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { type: "submit", isLoading: isScraping, onClick: handleScrape, loadingText: "Scraping...", children: "Scrape" }) })] })] })),
+    };
+    const resultPanel = {
+        name: "result",
+        defaultSize: "auto",
+        collapsible: false,
+        content: ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 w-full h-full px-4 pb-4", children: (0, jsx_runtime_1.jsx)(react_md_editor_1.default, { height: "100%", className: "max-h-full", value: data.htmlContent, preview: "edit", enableScroll: true, onChange: (val) => setData((prev) => ({
+                    ...prev,
+                    htmlContent: val || "",
+                })) }) })),
+    };
+    return ((0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { localStorageKey: "editor.page-wizard.panels", panels: [uploadPanel, resultPanel] }));
+}