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

package/dist/splash-screen/SplashScreen.js

@@ -0,0 +1,81 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplashScreen = SplashScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../editor/client/editContext");
+const SimpleTabs_1 = require("../editor/ui/SimpleTabs");
+const ScrollingContentTree_1 = require("../editor/ScrollingContentTree");
+const NewPage_1 = require("./NewPage");
+const navigation_1 = require("next/navigation");
+const SimpleIconButton_1 = require("../editor/ui/SimpleIconButton");
+function SplashScreen() {
+    const savedHistory = typeof window !== "undefined"
+        ? localStorage.getItem("editor.browseHistory")
+        : null;
+    const [selectedPage, setSelectedPage] = (0, react_1.useState)(null);
+    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
+    const editContext = (0, editContext_1.useEditContext)();
+    const recentPages = savedHistory
+        ? JSON.parse(savedHistory)
+        : [];
+    const searchParams = new URLSearchParams(window.location.search);
+    const [history, setHistory] = (0, react_1.useState)();
+    const router = (0, navigation_1.useRouter)();
+    const pathname = (0, navigation_1.usePathname)();
+    (0, react_1.useEffect)(() => {
+        const fetchItems = async () => {
+            const pages = await editContext?.itemsRepository.getItems(recentPages);
+            setHistory(pages);
+        };
+        fetchItems();
+    }, [editContext?.itemsRepository]);
+    (0, react_1.useEffect)(() => {
+        if (recentPages.length > 0 && recentPages[0])
+            setSelectedPage(recentPages[0]);
+        if (searchParams.get("create") === "1")
+            setActiveTab(1);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (activeTab === 0) {
+            router.replace(pathname);
+        }
+        else {
+            router.replace(`${pathname}?create=1`);
+        }
+    }, [activeTab]);
+    if (searchParams.has("itemid"))
+        return;
+    const tabs = [
+        {
+            content: ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 gap-4 p-2 text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative w-2/3", children: (0, jsx_runtime_1.jsx)(ScrollingContentTree_1.ScrollingContentTree, { selectedItemId: selectedPage?.id, onSelectionChange: (selection) => {
+                                const selectedItem = selection[0];
+                                if (selectedItem)
+                                    editContext?.loadItem({
+                                        id: selectedItem.id,
+                                        language: selectedItem.language ?? "en",
+                                        version: selectedItem.version,
+                                    });
+                            } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex w-1/3 flex-col border-l pl-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-3 font-bold", children: "Recent Pages" }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsx)("ul", { className: "absolute inset-0 overflow-auto", children: history?.map((page, index) => ((0, jsx_runtime_1.jsxs)("li", { onMouseOver: () => setSelectedPage(page), onClick: () => {
+                                            editContext?.switchView("page-editor");
+                                            editContext?.loadItem({
+                                                id: page.id,
+                                                language: page.language ?? "en",
+                                                version: 0,
+                                            });
+                                        }, className: "flex cursor-pointer items-center gap-2 p-2 text-xs hover:bg-gray-100", children: [page.icon && ((0, jsx_runtime_1.jsx)("img", { src: page.icon, width: "16", height: "16" })), " ", page.name, " ", (0, jsx_runtime_1.jsxs)("span", { className: "text-gray-500", children: ["(", page.language, ")"] })] }, index))) }) })] })] })),
+            label: "Open Page",
+            id: "open-page-tab",
+        },
+        {
+            content: ((0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-1 flex-col", children: (0, jsx_runtime_1.jsx)(NewPage_1.NewPage, { selectedItemId: selectedPage?.id }) })),
+            label: "New Page",
+            id: "new-page-tab",
+            testId: "new-page-tab",
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full items-center justify-center bg-gray-100", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative h-3/4 w-2/3 space-y-8 rounded-lg bg-white p-6 p-8 shadow-lg", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col", children: (0, jsx_runtime_1.jsx)(SimpleTabs_1.SimpleTabs, { tabs: tabs, activeTab: activeTab, setActiveTab: setActiveTab }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end", children: (0, jsx_runtime_1.jsxs)("a", { className: "flex cursor-pointer items-center text-xs text-blue-600", onClick: () => editContext?.startTour(), children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-arrow-right mr-2" }), " Take Tour"] }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 right-0 p-2", children: (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-times", onClick: () => editContext?.switchView(editContext.contentEditorItem?.hasLayout
+                            ? "page-editor"
+                            : "content-editor"), label: "Close" }) })] }) }));
+}

package/dist/tour/Tour.js

@@ -0,0 +1,321 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tour = Tour;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_components_1 = require("../client-components");
+const utils_1 = require("primereact/utils");
+function Tour({ tourStopCallback }) {
+    const [currentStep, setCurrentStep] = (0, react_1.useState)("start-tour");
+    const [show, setShow] = (0, react_1.useState)(true);
+    const editContext = (0, client_components_1.useEditContext)();
+    const [focusRect, setFocusRect] = (0, react_1.useState)(null);
+    const [pointToRect, setPointToRect] = (0, react_1.useState)(null);
+    const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+    const waitForElement = (selector, timeout = 0) => {
+        if (selector.startsWith("iframe:")) {
+            return waitForElementInIframe(selector.substring(7), timeout);
+        }
+        return new Promise((resolve) => {
+            const startTime = Date.now();
+            const checkForElement = () => {
+                const element = document.querySelector(selector);
+                if (element) {
+                    let rect = element.getBoundingClientRect();
+                    const extendFocus = step?.extendFocus || 10;
+                    rect = new DOMRect(rect.left - extendFocus / 2, rect.top - extendFocus / 2, rect.width + extendFocus, rect.height + extendFocus);
+                    resolve(rect);
+                }
+                else if (timeout > 0 && Date.now() - startTime >= timeout) {
+                    resolve(undefined);
+                }
+                else {
+                    requestAnimationFrame(checkForElement);
+                }
+            };
+            checkForElement();
+        });
+    };
+    const waitForElementInIframe = (selector, timeout = 0) => {
+        return new Promise((resolve, reject) => {
+            const startTime = Date.now();
+            const checkForElement = () => {
+                const iframe = document.querySelector("iframe.page-iframe");
+                if (iframe && iframe.contentDocument) {
+                    const element = iframe.contentDocument.querySelector(selector);
+                    if (element) {
+                        const elementRect = element.getBoundingClientRect();
+                        const iframeRect = iframe.getBoundingClientRect();
+                        let rect = new DOMRect(elementRect.left + iframeRect.left, elementRect.top + iframeRect.top, elementRect.width, elementRect.height);
+                        const extendFocus = step?.extendFocus || 10;
+                        rect = new DOMRect(rect.left - extendFocus / 2, rect.top - extendFocus / 2, rect.width + extendFocus, rect.height + extendFocus);
+                        resolve(rect);
+                    }
+                    else if (timeout > 0 && Date.now() - startTime >= timeout) {
+                        resolve(undefined);
+                    }
+                    else {
+                        requestAnimationFrame(checkForElement);
+                    }
+                }
+                else if (Date.now() - startTime >= timeout) {
+                    reject(new Error(`Timeout waiting for iframe: ${selector}`));
+                }
+                else {
+                    requestAnimationFrame(checkForElement);
+                }
+            };
+            checkForElement();
+        });
+    };
+    const waitForElementToDisappear = (selector) => {
+        return new Promise((resolve) => {
+            const checkForElement = () => {
+                const element = document.querySelector(selector);
+                if (!element) {
+                    resolve();
+                }
+                else {
+                    requestAnimationFrame(checkForElement);
+                }
+            };
+            checkForElement();
+        });
+    };
+    const waitForInput = (selector, minNumberOfCharacters = 1) => {
+        return new Promise((resolve) => {
+            const checkForInput = () => {
+                const input = document.querySelector(selector);
+                let inputValue = "";
+                if (input?.getAttribute("contenteditable")) {
+                    console.log("contenteditable", input.innerText);
+                    inputValue = input.innerText;
+                }
+                else if (input &&
+                    input.value.length >= minNumberOfCharacters) {
+                    inputValue = input.value;
+                }
+                if (inputValue.length >= minNumberOfCharacters) {
+                    console.log("input found", inputValue);
+                    resolve();
+                }
+                else {
+                    requestAnimationFrame(checkForInput);
+                }
+            };
+            checkForInput();
+        });
+    };
+    function setNativeValue(element, value) {
+        const valueSetter = Object.getOwnPropertyDescriptor(element.constructor.prototype, "value")?.set;
+        const prototype = Object.getPrototypeOf(element);
+        const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, "value")?.set;
+        if (valueSetter && valueSetter !== prototypeValueSetter) {
+            prototypeValueSetter?.call(element, value);
+        }
+        else {
+            valueSetter?.call(element, value);
+        }
+        const event = new Event("input", { bubbles: true });
+        element.dispatchEvent(event);
+    }
+    async function simulateTyping(element, text, interval = 35) {
+        let i = 0;
+        while (i <= text.length) {
+            const currentText = text.substring(0, i);
+            setNativeValue(element, currentText);
+            i++;
+            const randomDelay = interval * (0.5 + Math.random());
+            await delay(randomDelay);
+        }
+    }
+    /**
+     * Stops the tour and resets the state.
+     */
+    const stopTour = () => {
+        setCurrentStep("start-tour");
+        setFocusRect(null);
+        tourStopCallback();
+    };
+    const tours = editContext.configuration.tours;
+    const tour = tours[editContext.configuration.activeTour];
+    const tourSteps = tour.getSteps({
+        editContext: editContext,
+        nextStep: (stepId) => setCurrentStep(stepId),
+        stopTour: () => tourStopCallback(),
+        waitForElement,
+        waitForElementToDisappear,
+        setFocusRect,
+        delay,
+        waitForInput: waitForInput,
+        simulateTyping,
+    });
+    const step = tourSteps[currentStep];
+    if (!step)
+        return null;
+    (0, react_1.useEffect)(() => {
+        const runStep = async () => {
+            setShow(false);
+            setFocusRect(null);
+            await delay(500);
+            const step = tourSteps[currentStep];
+            if (!step)
+                return;
+            console.log("step", currentStep, step);
+            if (step.prepareAction) {
+                await step.prepareAction();
+            }
+            if (step.focusElement) {
+                const rect = await waitForElement(step.focusElement, 5000);
+                if (!rect)
+                    setCurrentStep("error");
+                else
+                    setFocusRect(rect);
+            }
+            setShow(true);
+            if (step.waitForUserInput) {
+                const nextStep = (await step.waitForUserInput()) || step.nextStep;
+                if (nextStep) {
+                    setCurrentStep(nextStep);
+                }
+                else
+                    console.log("no next step defined for step", currentStep);
+            }
+            else {
+                if (step.waitForElement) {
+                    await waitForElement(step.waitForElement);
+                    if (step.nextStep) {
+                        setCurrentStep(step.nextStep);
+                    }
+                }
+            }
+        };
+        runStep();
+    }, [currentStep]);
+    (0, react_1.useEffect)(() => {
+        const getPointTo = async () => {
+            let pointToRect = focusRect;
+            if (step.getPointTo) {
+                const pointTo = step.getPointTo();
+                if (pointTo) {
+                    pointToRect = pointTo;
+                }
+            }
+            if (step.pointToElement) {
+                const rect = await waitForElement(step.pointToElement, 5000);
+                if (rect) {
+                    pointToRect = rect;
+                }
+            }
+            setPointToRect(pointToRect);
+        };
+        getPointTo();
+    }, [focusRect, currentStep]);
+    if (!step) {
+        throw new Error(`Tour step ${currentStep} not found`);
+    }
+    const bubblePosition = step.bubblePosition || "right";
+    const bubbleStyle = {};
+    let boxStyle = {
+        position: "fixed",
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+    };
+    let arrowStyle = {};
+    if (pointToRect) {
+        if (bubblePosition === "right") {
+            boxStyle = {
+                position: "absolute",
+                left: pointToRect.left + pointToRect.width,
+                top: pointToRect.top - 10,
+                alignItems: "flex-start",
+            };
+            arrowStyle = {
+                marginLeft: "-20px",
+            };
+            bubbleStyle.marginLeft = "80px";
+            bubbleStyle.marginTop = "-20px";
+        }
+        if (bubblePosition === "left") {
+            boxStyle = {
+                position: "absolute",
+                right: window.innerWidth - pointToRect.left,
+                top: pointToRect.top + pointToRect.height / 2,
+                alignItems: "flex-end",
+            };
+            arrowStyle = {
+                marginRight: "-20px",
+            };
+        }
+        if (bubblePosition === "bottom") {
+            boxStyle = {
+                position: "absolute",
+                left: pointToRect.left + pointToRect.width / 2,
+                top: pointToRect.top + pointToRect.height,
+                transform: "translate(-50%, 0)",
+            };
+            if (step.flipArrow) {
+                arrowStyle = {
+                    transform: "scaleX(-1)",
+                };
+            }
+        }
+        if (bubblePosition === "top-right") {
+            boxStyle = {
+                position: "absolute",
+                left: pointToRect.left + pointToRect.width,
+                bottom: window.innerHeight - pointToRect.top,
+                transform: "translate(-50%, 0)",
+                flexDirection: "column-reverse",
+            };
+            arrowStyle = {
+                transform: "rotate(180deg)",
+            };
+            if (step.flipArrow) {
+                arrowStyle = {
+                    transform: "scaleX(-1)",
+                };
+            }
+        }
+    }
+    const arrowRotation = bubblePosition === "right" ? "-a-rotate-90" : "";
+    const overlayStyle = {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        backgroundColor: "rgba(0, 0, 0, 0.3)",
+        pointerEvents: "auto",
+        clipPath: focusRect
+            ? `polygon(0% 0%, 0% 100%,  ${focusRect.left}px 100%, ${focusRect.left}px ${focusRect.top}px, ${focusRect.left + focusRect.width}px ${focusRect.top}px, ${focusRect.left + focusRect.width}px ${focusRect.top + focusRect.height}px, ${focusRect.left}px ${focusRect.top + focusRect.height}px,  ${focusRect.left}px 100%, 100% 100%, 100% 0%)`
+            : "none",
+        // clipPath: focusPosition
+        //   ? `path('M 0 0 H 100% V 100% H 0 Z M ${focusPosition.left}px ${focusPosition.top}px H ${focusPosition.left + focusPosition.width}px V ${focusPosition.top + focusPosition.height}px H ${focusPosition.left}px Z')`
+        //   : 'none',
+    };
+    if (!show) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "overlay", style: overlayStyle });
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "overlay", style: overlayStyle }), (0, jsx_runtime_1.jsxs)("div", { style: boxStyle, className: "text-gray-800 flex flex-col items-center fade-in", children: [focusRect && ((0, jsx_runtime_1.jsx)("svg", { width: "100px", height: "100px", viewBox: "0 -7.89 113.08 113.08", xmlns: "http://www.w3.org/2000/svg", className: (0, utils_1.classNames)("pointer-events-none", arrowRotation), style: arrowStyle, children: (0, jsx_runtime_1.jsx)("path", { style: { stroke: "#0000ff", fill: "#0000ff" }, d: "M20.1871 175C15.7485 172.891 13.0008 172.469 12.1553 170.992C8.98489 165.508 5.39173 160.024 3.70083 153.908C-1.37187 137.666 -0.737781 121.214 2.64402 104.762C8.35081 76.7092 21.0325 51.8201 36.8847 28.1966C38.5756 25.6655 40.0552 23.1344 41.7461 20.3924C41.7461 20.1814 41.5347 19.7596 41.112 19.1268C36.462 20.3923 31.6007 21.6579 26.9507 22.7125C24.4144 23.1344 21.4552 23.1344 18.9189 22.2907C17.4394 21.8688 15.3258 19.5486 15.3258 18.0722C15.3258 16.1739 16.8053 13.8537 18.0735 12.1663C19.1303 11.1117 21.0326 10.9008 22.7235 10.4789C35.4052 7.31508 48.087 3.72935 60.9801 0.776411C71.9709 -1.75468 75.564 1.83105 74.9299 12.5882C74.2959 23.7672 74.0845 34.9462 73.6618 45.9142C73.4505 49.289 72.8164 52.8747 72.3936 56.6714C63.5164 52.6638 63.5164 52.6638 60.346 18.494C47.0301 33.2588 38.1529 49.289 29.9098 65.7411C21.6666 82.1932 16.1712 99.489 13.2121 117.839C10.2531 136.823 13.8462 154.751 20.1871 175Z", fill: "#0D1927" }) })), (0, jsx_runtime_1.jsx)("style", { children: `
+                        @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');                        
+                        .handwritten {
+                            font-family: 'Caveat', cursive;
+                        }
+                        .fade-background {
+                            background: radial-gradient(circle, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0) 90%);
+                        }
+                        .fade-in {
+                            animation: fadeIn 0.5s ease-in-out;
+                        }
+                        @keyframes fadeIn {
+                            from { opacity: 0; }
+                            to { opacity: 1; }
+                        }
+                    ` }), (0, jsx_runtime_1.jsxs)("div", { className: `relative flex items-stretch justify-center bg-gray-50 rounded-lg border border-gray-800 gap-6 shadow-2xl`, style: bubbleStyle, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs font-bold cursor-pointer flex items-center gap-2 absolute top-0 right-0 mr-2 mt-2", onClick: stopTour, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-times" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center justify-center gap-2 bg-gray-200 p-6 rounded-l-lg", children: (0, jsx_runtime_1.jsx)(AlpacaIcon, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end justify-center gap-3 p-4 ", children: [(0, jsx_runtime_1.jsxs)("div", { className: "opacity-100 text-2xl font-bold handwritten text-center flex flex-col items-center max-w-[450px]", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-4xl mb-4", children: step.title }), (0, jsx_runtime_1.jsx)("div", { children: step.description })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-2", children: step.buttons &&
+                                            step.buttons.map((button, index) => ((0, jsx_runtime_1.jsx)("button", { onClick: button.onClick, className: button.className, children: button.label }, index))) })] })] })] })] }));
+}
+function AlpacaIcon() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { height: "80px", width: "80px", version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: [(0, jsx_runtime_1.jsx)("path", { style: { fill: "#EBE4DD" }, d: "M102.989,153.011v153.011C119.613,428.825,184.332,506.115,256,506.115\r\n\ts136.387-77.29,153.012-200.092V153.011H102.989z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#D8CCBC" }, d: "M255.999,153.011v353.103H256c71.668,0,136.387-77.29,153.012-200.092V153.011H255.999z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#A58868" }, d: "M273.655,435.494h-35.31c0,41.195-17.007,41.195-29.425,41.195V512\r\n\tc16.246,0,34.206-4.021,47.08-18.162C268.873,507.979,286.834,512,303.08,512v-35.31C290.662,476.69,273.655,476.69,273.655,435.494\r\n\tz" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#947859" }, d: "M273.655,435.494H256v58.343C268.873,507.979,286.834,512,303.08,512v-35.31\r\n\tC290.662,476.69,273.655,476.69,273.655,435.494z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#EBE4DD" }, d: "M126.529,0C81.025,0,44.138,36.888,44.138,82.391s36.888,82.391,82.391,82.391V0z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#D8CCBC" }, d: "M385.471,164.782c45.503,0,82.391-36.888,82.391-82.391S430.975,0,385.471,0V164.782z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#BFA993" }, d: "M490.407,247.172c0.643-3.83,0.996-7.758,0.996-11.77c0-39.003-31.618-70.621-70.621-70.621\r\n\ts-70.621,31.618-70.621,70.621c0,4.012,0.352,7.94,0.995,11.77H490.407z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#EDEDED" }, d: "M420.782,306.023c39.003,0,70.621-31.618,70.621-70.621H350.161\r\n\tC350.161,274.405,381.779,306.023,420.782,306.023z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#454449" }, d: "M397.241,235.401c0,12.981,10.559,23.54,23.538,23.54h0.002c12.981,0.001,23.54-10.559,23.54-23.54\r\n\tH397.241z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#BFA993" }, d: "M160.844,247.172c0.643-3.83,0.995-7.758,0.995-11.77c0-39.003-31.618-70.621-70.621-70.621\r\n\tS20.598,196.4,20.598,235.402c0,4.012,0.352,7.94,0.995,11.77H160.844z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#EDEDED" }, d: "M91.218,306.023c39.003,0,70.621-31.618,70.621-70.621H20.598\r\n\tC20.598,274.405,52.216,306.023,91.218,306.023z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#454449" }, d: "M67.678,235.401c0,12.981,10.559,23.54,23.538,23.54h0.002c12.981,0.001,23.54-10.559,23.54-23.54\r\n\tH67.678z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#D8CCBC" }, d: "M391.356,107.187c0-15.527,4.902-33.778-5.082-46.69c-8.818-11.403-28.519-12.694-43.229-20.793\r\n\tc-12.822-7.059-23.38-23.527-39.415-27.235c-14.505-3.356-31.411,6.442-47.63,6.442c-16.218,0-33.125-9.796-47.631-6.442\r\n\tc-16.036,3.708-26.595,20.178-39.415,27.237c-14.71,8.099-34.41,9.391-43.227,20.792c-9.985,12.912-5.082,31.161-5.082,46.689\r\n\ts-4.902,33.778,5.082,46.69c8.818,11.403,28.519,12.693,43.229,20.793c12.821,7.059,23.379,23.527,39.413,27.235\r\n\tc14.505,3.356,31.412-6.442,47.63-6.442s33.125,9.796,47.632,6.442c16.034-3.708,26.592-20.176,39.413-27.237\r\n\tc14.709-8.099,34.411-9.391,43.228-20.792C396.259,140.965,391.356,122.715,391.356,107.187z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#BFA993" }, d: "M386.274,60.497c-8.818-11.403-28.519-12.694-43.229-20.793\r\n\tc-12.822-7.059-23.38-23.527-39.415-27.235c-14.505-3.356-31.411,6.442-47.63,6.442v176.552c16.218,0,33.125,9.796,47.632,6.442\r\n\tc16.034-3.708,26.592-20.176,39.413-27.237c14.709-8.099,34.411-9.391,43.228-20.792c9.985-12.912,5.082-31.161,5.082-46.689\r\n\tS396.259,73.409,386.274,60.497z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#58575D" }, d: "M293.664,406.069c-6.186,18.772-22.763,39.469-37.664,39.784\r\n\tc-14.901-0.315-31.478-21.012-37.664-39.784c-2.858-9.591,4.529-17.529,16.478-17.655c14.124,0,28.248,0,42.372,0\r\n\tC289.136,388.54,296.522,396.476,293.664,406.069z" }), (0, jsx_runtime_1.jsx)("path", { style: { fill: "#454449" }, d: "M277.186,388.414c-7.062,0-14.124,0-21.186,0v57.439c14.901-0.315,31.478-21.012,37.664-39.784\r\n\tC296.522,396.476,289.136,388.54,277.186,388.414z" })] }));
+}

package/dist/tour/default-tour.js

@@ -0,0 +1,231 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultTourSteps = getDefaultTourSteps;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function getDefaultTourSteps({ editContext, nextStep, stopTour, waitForElement, waitForElementToDisappear, setFocusRect, delay, waitForInput, simulateTyping, }, config) {
+    const tourSteps = {
+        "start-tour": {
+            title: "Welcome to the AI Editor Tour!",
+            description: "I will show you around the editor and how to use the most important features.",
+            prepareAction: async () => {
+                editContext?.openSplashScreen();
+            },
+            buttons: [
+                {
+                    label: ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-play" }), " Start Tour"] })),
+                    onClick: () => {
+                        nextStep("new-page");
+                    },
+                    className: "button button-primary mt-2",
+                },
+                {
+                    label: ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-times" }), " No thanks"] })),
+                    onClick: () => {
+                        stopTour();
+                    },
+                    className: "button button-secondary mt-2",
+                },
+            ],
+        },
+        "new-page": {
+            description: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Click on the ", (0, jsx_runtime_1.jsx)("b", { children: "New Page" }), " tab to create a new page"] })),
+            focusElement: "#new-page-tab",
+            waitForUserInput: async () => {
+                await waitForElement("#new-page-tab.active-tab");
+            },
+            nextStep: "pick-location",
+        },
+        "pick-location": {
+            description: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select the ", (0, jsx_runtime_1.jsx)("b", { children: "Playground" }), " folder as the parent for your new page"] })),
+            focusElement: ".tour-pick-location",
+            waitForUserInput: async () => {
+                await new Promise((resolve) => {
+                    const checkForElement = () => {
+                        const elements = document.querySelectorAll(".p-highlight");
+                        for (const element of elements) {
+                            if (element.textContent?.trim() === "Playground") {
+                                setFocusRect(element.getBoundingClientRect());
+                                resolve();
+                                return;
+                            }
+                        }
+                        requestAnimationFrame(checkForElement);
+                    };
+                    checkForElement();
+                });
+            },
+            getPointTo: () => {
+                const elements = document.querySelectorAll(".p-treenode-label");
+                for (const element of elements) {
+                    if (element.textContent?.trim() === "Playground") {
+                        return element.getBoundingClientRect();
+                    }
+                }
+                return undefined;
+            },
+            nextStep: "choose-template",
+        },
+        "choose-template": {
+            description: "Select a template for your page",
+            focusElement: ".tour-choose-template",
+            waitForUserInput: async () => {
+                await waitForElement(".tour-selected-template");
+            },
+            bubblePosition: "left",
+            nextStep: "enter-name",
+        },
+        "enter-name": {
+            description: "Enter a name for your page",
+            focusElement: "#new-page-name",
+            bubblePosition: "left",
+            waitForUserInput: async () => {
+                await waitForElement("#create-new-page-button:not(.p-disabled)");
+            },
+            nextStep: "create-page",
+        },
+        "create-page": {
+            description: "Click the Create button",
+            focusElement: "#create-new-page-button",
+            waitForUserInput: async () => {
+                await waitForElement("#insert-component-button");
+            },
+            nextStep: "ready-to-add-component",
+        },
+        "ready-to-add-component": {
+            description: "Wanna add a component to your beautiful empty page?",
+            buttons: [
+                {
+                    label: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-arrow-right" }), " I'm ready, lets go!"] })),
+                    onClick: () => nextStep("insert-component"),
+                },
+            ],
+        },
+        "insert-component": {
+            description: "Excellent, click on the plus button to insert a component.",
+            focusElement: "#insert-component-button",
+            waitForUserInput: async () => {
+                await waitForElement(".tour-component-palette");
+            },
+            nextStep: "drag-component",
+        },
+        "drag-component": {
+            description: `Drag and drop a ${config.firstComponentTemplateName} component to your page.`,
+            focusElement: `#insert-component-${config.firstComponentTemplateId}`,
+            waitForUserInput: async () => {
+                await waitForElement(".tour-placeholder-dropzone");
+            },
+            nextStep: "drop-component-on-placeholder",
+        },
+        "drop-component-on-placeholder": {
+            description: "Drop the component onto this placeholder!",
+            focusElement: ".tour-placeholder-dropzone",
+            bubblePosition: "left",
+            extendFocus: 70,
+            waitForUserInput: async () => {
+                await waitForElementToDisappear(".tour-placeholder-dropzone");
+                await delay(400);
+                if (!document.querySelector(".tour-component-palette")) {
+                    return "enter-title";
+                }
+                return "drag-component";
+            },
+            nextStep: "enter-title",
+        },
+        "enter-title": {
+            description: `Excellent! Now lets fill in the fields. First enter a ${config.firstComponentTextFieldName}`,
+            focusElement: `[data-field-id='${config.firstComponentTextFieldId}']`,
+            waitForUserInput: async () => {
+                await delay(5000);
+                await waitForInput(`[data-field-id='${config.firstComponentTextFieldId}'] input`, 5);
+            },
+            nextStep: "see-content-update",
+        },
+        "see-content-update": {
+            description: "See how the content is automatically updating on your page?",
+            focusElement: `[data-field-id='${config.firstComponentTextFieldId}']`,
+            pointToElement: `iframe:[data-fieldid='${config.firstComponentTextFieldId}']`,
+            bubblePosition: "bottom",
+            flipArrow: true,
+            waitForUserInput: async () => {
+                await delay(5000);
+                await waitForInput(`[data-field-id='${config.firstComponentTextFieldId}'] input`, 5);
+            },
+            nextStep: "edit-content-inline",
+        },
+        "edit-content-inline": {
+            description: "You can also directly edit the content on the page. Click on the [Introduction] placeholder here and start typing!",
+            focusElement: `iframe:[data-fieldid='${config.firstComponentRichTextFieldId}']`,
+            bubblePosition: "bottom",
+            flipArrow: true,
+            waitForUserInput: async () => {
+                await delay(5000);
+                await waitForInput(`[data-field-id='${config.firstComponentRichTextFieldId}'] [contenteditable]`, 5);
+            },
+            nextStep: "ai-intro",
+        },
+        "ai-intro": {
+            description: "But hey, this is an AI editor, so why not let the AI do some of the work for you?",
+            buttons: [
+                {
+                    label: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-arrow-right" }), " Great, show me!"] })),
+                    onClick: () => nextStep("ai-sidebar"),
+                },
+            ],
+        },
+        "ai-sidebar": {
+            description: "Click on the AI sidebar to open the AI chat.",
+            focusElement: `[data-sidebarview-name='ai']`,
+            nextStep: "ai-terminal",
+            waitForElement: "[data-sidebarview-name='ai'].a-active",
+        },
+        "ai-terminal": {
+            description: "Let me take control and add tell the AI to add some more components.",
+            focusElement: `.tour-ai-terminal textarea`,
+            waitForUserInput: async () => {
+                await delay(1000);
+                const aiTerminal = document.querySelector(".tour-ai-terminal textarea");
+                if (aiTerminal) {
+                    aiTerminal.focus();
+                    await simulateTyping(aiTerminal, `Plase add three components of type ${config.firstComponentTemplateName} with some funny dummy content to the page.`);
+                }
+            },
+            bubblePosition: "top-right",
+            nextStep: "ai-submit",
+        },
+        "ai-submit": {
+            description: "Click on the Send button to submit the prompt to the AI.",
+            focusElement: ".tour-ai-terminal .tour-send-button",
+            bubblePosition: "top-right",
+            nextStep: "ai-watch-components-added",
+            waitForElement: ".tour-ai-terminal .a-prompt",
+        },
+        "ai-watch-components-added": {
+            description: "Watch how the AI adds the components to the page. This can take a few seconds.",
+            focusElement: ".tour-ai-terminal",
+            pointToElement: ".tour-ai-terminal .a-prompt",
+            waitForElement: ".tour-ai-response-message-changes",
+            nextStep: "congratulations",
+        },
+        congratulations: {
+            title: "Congratulations!",
+            description: "You have completed the tour and are now an AI Editor Pro!",
+            buttons: [
+                {
+                    label: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-check" }), " Finish Tour"] })),
+                    onClick: () => stopTour(),
+                    className: "button button-primary mt-2",
+                },
+            ],
+        },
+        error: {
+            description: "Oops, something went wrong.",
+            buttons: [
+                {
+                    label: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "pi pi-check" }), " Close"] })),
+                    onClick: () => stopTour(),
+                },
+            ],
+        },
+    };
+    return tourSteps;
+}