@alpaca-editor/core 1.0.3762-mono

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

@@ -0,0 +1,150 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectStep = SelectStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editContext_1 = require("../../editor/client/editContext");
+const aiService_1 = require("../../editor/services/aiService");
+const service_1 = require("../service");
+const utils_1 = require("primereact/utils");
+const Splitter_1 = require("../../editor/ui/Splitter");
+const inputtextarea_1 = require("primereact/inputtextarea");
+const ActionButton_1 = require("../../components/ActionButton");
+const Generate_1 = __importDefault(require("./Generate"));
+function SelectStep({ step, data, setData, setStepCompleted, internalState, setInternalState, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [options, setOptions] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);
+    const [instructions, setInstructions] = (0, react_1.useState)(step.instructions);
+    // Get the property name from the step or use "choice" as default
+    const propertyName = step.propertyName || "selectedOptions";
+    (0, react_1.useEffect)(() => {
+        if (data[propertyName]?.length) {
+            setStepCompleted(true);
+        }
+    }, [data]);
+    // Initialize the property in data
+    (0, react_1.useEffect)(() => {
+        if (!data[propertyName]) {
+            setData((prevData) => ({
+                ...prevData,
+                [propertyName]: [],
+            }));
+        }
+    }, [propertyName, setData]);
+    const generateOptions = async () => {
+        if (!editContext)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            // Create a prompt based on step instructions and data
+            const prompt = `${instructions}\n\nCurrent data: ${JSON.stringify(data, null, 2)}`;
+            // Call the executePrompt function with the prompt
+            const result = await (0, aiService_1.executePrompt)([
+                {
+                    content: `You are a helpful assistant that generates options for a wizard select step.
+              Generate a JSON array of options based on the instructions and current data.            
+              ONLY respond with a valid JSON array without any explanation or additional text.
+              JSON format: {options: {title: string, description: string}[] }`,
+                    name: "system",
+                    role: "system",
+                },
+                {
+                    content: prompt,
+                    name: "user",
+                    role: "user",
+                },
+            ], editContext, service_1.createWizardAiContext, [""], true, undefined, step.aiModel || "o3-mini-low");
+            // Parse the result and set options
+            if (result && result.content) {
+                try {
+                    const generatedOptions = JSON.parse(result.content);
+                    for (let i = 0; i < generatedOptions.options.length; i++) {
+                        generatedOptions.options[i].id = i.toString();
+                    }
+                    setOptions(generatedOptions.options);
+                    setInternalState((state) => ({
+                        ...state,
+                        [step.id + "options"]: generatedOptions.options,
+                    }));
+                }
+                catch (parseError) {
+                    console.error("Error parsing options:", parseError);
+                    setError("Failed to parse options. The response was not in the expected format.");
+                }
+            }
+            else {
+                setError("No options were generated. Please try again.");
+            }
+        }
+        catch (err) {
+            setError("Failed to generate options. Please try again.");
+            console.error("Error generating options:", err);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    // Generate options on component mount
+    (0, react_1.useEffect)(() => {
+        if (internalState[step.id + "options"]?.length > 0) {
+            setOptions(internalState[step.id + "options"]);
+            return;
+        }
+        generateOptions();
+    }, [editContext, step.instructions, internalState]);
+    // Sync data[propertyName] with selectedOptions state
+    (0, react_1.useEffect)(() => {
+        const currentSelections = data[propertyName] || [];
+        setSelectedOptions(currentSelections.map((option) => option.id));
+    }, [data, propertyName]);
+    // Handle option selection
+    const handleOptionSelect = (option) => {
+        setData((prevData) => {
+            const currentData = [
+                ...(prevData[propertyName] || []),
+            ];
+            const isSelected = currentData.some((o) => o.id === option.id);
+            let updatedData;
+            if (isSelected) {
+                // Remove option if already selected
+                updatedData = currentData.filter((o) => o.id !== option.id);
+            }
+            else {
+                // Add option if not selected
+                updatedData = [...currentData, option];
+            }
+            return {
+                ...prevData,
+                [propertyName]: updatedData,
+            };
+        });
+    };
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "text-red-500 p-4", children: [error, (0, jsx_runtime_1.jsx)("button", { className: "ml-4 px-2 py-1 bg-blue-500 text-white rounded", onClick: () => window.location.reload(), children: "Retry" })] }));
+    }
+    const optionsPanel = {
+        name: "options",
+        defaultSize: "auto",
+        content: ((0, jsx_runtime_1.jsxs)("div", { className: "p-4 h-full", children: [loading && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-full", children: (0, jsx_runtime_1.jsx)(Generate_1.default, { title: "Generating options..." }) })), !loading && ((0, jsx_runtime_1.jsx)("div", { children: options.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "text-gray-500 p-4", children: "No options available. Try refreshing the page." })) : (options.map((option, index) => {
+                        const isSelected = selectedOptions.includes(option.id);
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)("mb-3 flex items-center p-3 rounded bg-white border-2", index % 2 === 0
+                                ? "animate-fadeRight"
+                                : "animate-fadeLeft", isSelected
+                                ? "text-canvas-pink border-canvas-pink"
+                                : "text-gray-600 border-gray-300"), onClick: () => handleOptionSelect(option), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col flex-1 cursor-pointer", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium", children: option.title }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600", children: option.description })] }), isSelected && ((0, jsx_runtime_1.jsx)("div", { className: "text-canvas-pink ml-2", children: "\u2713" }))] }, option.id));
+                    })) }))] })),
+    };
+    const settingsPanel = {
+        name: "settings",
+        defaultSize: 400,
+        content: ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 pr-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-bold", children: "Instructions" }), (0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { className: "h-48 text-sm", value: instructions, onChange: (e) => setInstructions(e.target.value), placeholder: "Enter instructions for the options" }), (0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { onClick: generateOptions, isLoading: loading, disabled: loading, loadingText: "Thinking...", children: "Regenerate Options" })] })),
+    };
+    return (0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { panels: [settingsPanel, optionsPanel] });
+}

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

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertPageSchemaToWizardComponents = convertPageSchemaToWizardComponents;
+exports.getPlaceholder = getPlaceholder;
+function convertPageSchemaToWizardComponents(pageSchema, whitelist) {
+    const componentMap = new Map();
+    /**
+     * Recursively processes a SchemaComponent.
+     *
+     * @param component - The current SchemaComponent to process.
+     * @param parentPlaceholder - The name of the placeholder where the component appears.
+     * @param isRoot - True if the component is at the root level.
+     * @param parentAccumulator - The accumulator of the parent component (if the parent is allowed).
+     */
+    function processComponent(component, parentPlaceholder, isRoot, parentAccumulator) {
+        const isAllowed = whitelist.includes(component.type);
+        let currentAccumulator = undefined;
+        if (isAllowed) {
+            // If a parent accumulator exists (and is allowed), record the child's type as a valid child type.
+            if (parentAccumulator) {
+                parentAccumulator.validChildComponentTypes.add(component.type);
+            }
+            if (componentMap.has(component.typeId)) {
+                currentAccumulator = componentMap.get(component.typeId);
+                currentAccumulator.validParentPlaceholders.add(parentPlaceholder);
+                // Mark as allowed on root if encountered at the root level in any instance.
+                if (isRoot) {
+                    currentAccumulator.allowedOnRoot = true;
+                }
+            }
+            else {
+                currentAccumulator = {
+                    name: component.typeId, // using typeId as the wizard component name
+                    type: component.type,
+                    fields: component.fields.map((field) => ({
+                        name: field.name,
+                        type: field.type,
+                    })),
+                    validParentPlaceholders: new Set([parentPlaceholder]),
+                    validChildComponentTypes: new Set(),
+                    allowedOnRoot: isRoot,
+                };
+                componentMap.set(component.typeId, currentAccumulator);
+            }
+        }
+        // Process child components regardless of whether the current component is allowed.
+        for (const placeholder of component.placeholders) {
+            for (const child of placeholder.components) {
+                processComponent(child, placeholder.name, false, currentAccumulator);
+            }
+        }
+    }
+    // Process each top-level component in the PageSchema.
+    for (const placeholder of pageSchema) {
+        for (const component of placeholder.components) {
+            processComponent(component, placeholder.name, true);
+        }
+    }
+    // Convert accumulators to final WizardSchemaComponent objects.
+    const wizardComponents = [];
+    for (const acc of componentMap.values()) {
+        const wizardComponent = {
+            type: acc.type,
+            fields: acc.fields,
+            allowedChildrenComponentTypes: Array.from(acc.validChildComponentTypes),
+            allowedOnRoot: acc.allowedOnRoot,
+        };
+        // Only include validParentPlaceholders if there is more than one.
+        if (acc.validParentPlaceholders.size > 1) {
+            wizardComponent.availableParentPlaceholders = Array.from(acc.validParentPlaceholders);
+        }
+        wizardComponents.push(wizardComponent);
+    }
+    return wizardComponents;
+}
+/**
+ * Finds a placeholder (by its name) where a child component of type `childComponentType`
+ * can be placed inside a parent of type `parentComponentType`. For a parentComponentType
+ * equal to "root" (case‑insensitive), the function searches among top‑level placeholders.
+ *
+ * @param schema - The PageSchema (an array of SchemaPlaceholders).
+ * @param parentComponentType - The type of the parent component, or "root" to indicate top‑level.
+ * @param childComponentType - The type of the child component to place.
+ * @returns The name of a valid placeholder or undefined if none is found.
+ */
+function getPlaceholder(schema, parentComponentType, childComponentType) {
+    // Check for the special case where we want to place at the root level.
+    if (parentComponentType.toLowerCase() === "root") {
+        // First, look for a top-level placeholder that already contains a component
+        // of the given childComponentType.
+        for (const topPlaceholder of schema) {
+            if (topPlaceholder.components.some((c) => c.type === childComponentType)) {
+                return topPlaceholder.name;
+            }
+        }
+        // If not found, return the first top-level placeholder that is empty.
+        for (const topPlaceholder of schema) {
+            if (topPlaceholder.components.length === 0) {
+                return topPlaceholder.name;
+            }
+        }
+        return undefined;
+    }
+    // Recursive helper to search through nested SchemaComponents.
+    function searchComponents(components) {
+        for (const component of components) {
+            // If this component matches the desired parent type, check its placeholders.
+            if (component.type === parentComponentType) {
+                // First, try to find a placeholder that already has a child of the desired type.
+                for (const placeholder of component.placeholders) {
+                    if (placeholder.components.some((child) => child.type === childComponentType)) {
+                        return placeholder.name;
+                    }
+                }
+                // Otherwise, pick an empty placeholder.
+                for (const placeholder of component.placeholders) {
+                    if (placeholder.components.length === 0) {
+                        return placeholder.name;
+                    }
+                }
+            }
+            // Recurse into any placeholders in the current component.
+            for (const placeholder of component.placeholders) {
+                const result = searchComponents(placeholder.components);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return undefined;
+    }
+    // Search through all top-level placeholders' components.
+    for (const topPlaceholder of schema) {
+        const result = searchComponents(topPlaceholder.components);
+        if (result) {
+            return result;
+        }
+    }
+    return undefined;
+}

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

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageCreator = usePageCreator;
+const react_1 = require("react");
+const editContext_1 = require("../../editor/client/editContext");
+const editContext_2 = require("../../editor/client/editContext");
+const componentTreeHelper_1 = require("../../editor/componentTreeHelper");
+const schema_1 = require("./schema");
+const utils_1 = require("../../editor/utils");
+function usePageCreator(pageItem, wizard, setPageModel) {
+    const editContext = (0, editContext_2.useEditContext)();
+    const editContextRef = (0, editContext_1.useEditContextRef)();
+    // Function to build a map of all components from wizard schema
+    const buildComponentTypeMap = () => {
+        const componentMap = new Map();
+        const fieldIdsMap = new Map();
+        const placeholderMap = new Map();
+        const processComponentsRecursively = (components) => {
+            for (const component of components) {
+                // Store the mapping from component type to typeId
+                componentMap.set(component.type, component.typeId);
+                placeholderMap.set(component.typeId, component.type);
+                // Process nested components in placeholders
+                if (component.placeholders && component.placeholders.length > 0) {
+                    for (const placeholder of component.placeholders) {
+                        if (placeholder.components && placeholder.components.length > 0) {
+                            processComponentsRecursively(placeholder.components);
+                        }
+                    }
+                }
+                if (component.fields && component.fields.length > 0) {
+                    for (const field of component.fields) {
+                        fieldIdsMap.set(component.typeId + "_" + field.name, field.id);
+                    }
+                }
+            }
+        };
+        // Start processing from the root level of the schema
+        if (wizard.schema && wizard.schema.length > 0) {
+            for (const placeholder of wizard.schema) {
+                if (placeholder.components && placeholder.components.length > 0) {
+                    processComponentsRecursively(placeholder.components);
+                }
+            }
+        }
+        return { componentMap, fieldIdsMap };
+    };
+    // Build the component type to typeId map
+    const mappings = (0, react_1.useMemo)(() => buildComponentTypeMap(), [wizard.schema]);
+    const createNewComponent = async (component, parentComponentType, index, parentComponentId) => {
+        if (!editContext)
+            return undefined;
+        const { componentMap } = mappings;
+        // Get the typeId from the map using the component type
+        const typeId = componentMap.get(component.type) || component.type;
+        // 1. Add the component to the placeholder
+        console.log(`Adding component ${component.type} (typeId: ${typeId}) to placeholder ${parentComponentId} at index ${index}`);
+        const placeholderKey = component.placeholder ||
+            (0, schema_1.getPlaceholder)(wizard.schema, parentComponentType, component.type);
+        const placeholderId = parentComponentId
+            ? placeholderKey + "_" + (0, utils_1.normalizeGuid)(parentComponentId)
+            : placeholderKey;
+        if (!placeholderId) {
+            console.error("Placeholder ID not found", component);
+            return undefined;
+        }
+        const addComponentOp = await editContext.operations.addComponent(typeId, // Use typeId instead of just type
+        placeholderId, index);
+        if (!addComponentOp?.componentId) {
+            console.error("Failed to add component", component, "Result Op:", addComponentOp);
+            return undefined;
+        }
+        // Wait for the component to be created
+        const componentId = addComponentOp.componentId;
+        console.log("Waiting for component to be created", componentId);
+        let createdComponent;
+        let attempts = 0;
+        const maxAttempts = 40;
+        while (!createdComponent && attempts < maxAttempts) {
+            if (editContextRef.current?.page) {
+                createdComponent = (0, componentTreeHelper_1.getComponentById)(componentId, editContextRef.current?.page);
+                if (createdComponent) {
+                    break;
+                }
+            }
+            if (createdComponent)
+                break;
+            await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 100ms between attempts
+            attempts++;
+        }
+        if (!createdComponent) {
+            console.error("Timeout waiting for component to appear in page model", componentId);
+        }
+        const componentDescriptor = {
+            ...addComponentOp.mainItem,
+            id: addComponentOp.componentId,
+        };
+        console.log("Component created:", componentDescriptor);
+        return componentDescriptor;
+    };
+    const findComponent = (components, path) => {
+        const child = components[path[0]];
+        if (!child)
+            return null;
+        if (path.length === 1)
+            return child;
+        return findComponent(child.children || [], path.slice(1));
+    };
+    // Function to recursively create components from the page model
+    const createComponentsRecursively = async (components, parentComponentType, parentComponentId, parentPath) => {
+        if (!editContext || !pageItem)
+            return;
+        const { fieldIdsMap, componentMap } = mappings;
+        // Process each component in the array
+        for (let i = 0; i < components.length; i++) {
+            const component = components[i];
+            const componentPath = [...(parentPath || []), i];
+            if (!component?.id) {
+                if (!component?.type || !component?.fields) {
+                    continue;
+                }
+                const descriptor = await createNewComponent(component, parentComponentType, i, parentComponentId);
+                if (!descriptor)
+                    continue;
+                component.id = descriptor.id;
+                setPageModel((prev) => {
+                    const component = findComponent(prev.components, componentPath);
+                    if (component) {
+                        component.id = descriptor.id;
+                    }
+                    return {
+                        ...prev,
+                    };
+                });
+            }
+            if (component.fields && component.fields.length > 0) {
+                const typeId = componentMap.get(component.type) || component.type;
+                // 2. Edit fields of the component
+                for (const field of component.fields) {
+                    if (!field.name ||
+                        !field.value ||
+                        field.value + field.type === field.writtenValue) {
+                        continue;
+                    }
+                    const fieldId = fieldIdsMap.get(typeId + "_" + field.name);
+                    if (!fieldId) {
+                        console.error("Field not found", field);
+                        continue;
+                    }
+                    const fieldDescriptor = {
+                        fieldId: fieldId.toLowerCase().replace(/[{}]/g, ""),
+                        item: {
+                            id: component.id,
+                            language: pageItem.language,
+                            version: pageItem.version,
+                        },
+                    };
+                    console.log(`Editing field ${field.name} of component ${component.id} with value ${field.value}`);
+                    let rawValue = field.value;
+                    let value = field.value;
+                    if (field.type === "Picture") {
+                        value = {
+                            Variants: [{ Name: "Landscape", MediaId: field.value }],
+                        };
+                        rawValue = JSON.stringify(value);
+                    }
+                    await editContext.operations.editField({
+                        field: fieldDescriptor,
+                        value: value,
+                        rawValue: rawValue,
+                        refresh: "none",
+                    });
+                    setPageModel((prev) => {
+                        const component = findComponent(prev.components, componentPath);
+                        if (component) {
+                            const prevField = component.fields.find((f) => f.name === field.name);
+                            if (prevField) {
+                                prevField.writtenValue = field.value + field.type;
+                            }
+                        }
+                        return {
+                            ...prev,
+                        };
+                    });
+                }
+            }
+            // 3. Recursively process placeholders
+            if (component.children && component.children.length > 0) {
+                await createComponentsRecursively(component.children, component.type, component.id, componentPath);
+            }
+        }
+    };
+    return { createComponentsRecursively };
+}

package/dist/splash-screen/NewPage.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewPage = NewPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ScrollingContentTree_1 = require("../editor/ScrollingContentTree");
+const contentService_1 = require("../editor/services/contentService");
+const editService_1 = require("../editor/services/editService");
+const inputtext_1 = require("primereact/inputtext");
+const button_1 = require("primereact/button");
+const utils_1 = require("../editor/utils");
+const utils_2 = require("primereact/utils");
+const client_components_1 = require("../client-components");
+const SectionHeadline_1 = require("./SectionHeadline");
+const use_debounce_1 = require("use-debounce");
+const service_1 = require("../page-wizard/service");
+function NewPage({ selectedItemId }) {
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
+    const [isValid, setIsValid] = (0, react_1.useState)(false);
+    const [insertOptions, setInsertOptions] = (0, react_1.useState)(null);
+    const [validationMessage, setValidationMessage] = (0, react_1.useState)(null);
+    const [selectedTemplate, setSelectedTemplate] = (0, react_1.useState)();
+    const [name, setName] = (0, react_1.useState)("");
+    const editContext = (0, client_components_1.useEditContext)();
+    const [wizards, setWizards] = (0, react_1.useState)([]);
+    const insertOptionsAndWizards = (0, react_1.useMemo)(() => {
+        return [...(insertOptions || []), ...(wizards || [])];
+    }, [insertOptions, wizards]);
+    (0, react_1.useEffect)(() => {
+        const loadOptions = async () => {
+            if (!selectedItem)
+                return;
+            const item = (0, utils_1.getItemDescriptor)(selectedItem);
+            const insertOptions = await (0, editService_1.loadInsertOptions)(item);
+            const pageInsertOptions = insertOptions?.filter((x) => x.hasLayout);
+            setInsertOptions(pageInsertOptions);
+            setSelectedTemplate(pageInsertOptions?.[0]?.id);
+        };
+        const loadWizards = async () => {
+            if (!selectedItem)
+                return;
+            const item = (0, utils_1.getItemDescriptor)(selectedItem);
+            const wizards = await (0, service_1.getWizards)(item);
+            setWizards(wizards);
+        };
+        loadOptions();
+        loadWizards();
+    }, [selectedItem]);
+    (0, react_1.useEffect)(() => {
+        const loadItem = async () => {
+            const itemId = selectedItemId ||
+                editContext?.configuration.editor.dialogs.newPage.expandTreeNode;
+            if (!itemId)
+                return;
+            const item = await editContext.itemsRepository.getItem({
+                id: itemId,
+                language: "en",
+                version: 0,
+            });
+            if (item)
+                setSelectedItem(item);
+        };
+        loadItem();
+    }, [selectedItemId]);
+    const isValidDebounced = (0, use_debounce_1.useDebouncedCallback)(async () => {
+        if (!selectedItem)
+            return;
+        let valid = !!selectedTemplate && name.trim().length >= 3;
+        if (valid) {
+            const children = await (0, contentService_1.getChildren)(selectedItem.id, editContext?.sessionId ?? "", [], false, editContext?.contentEditorItem?.language || "en");
+            if (children.find((x) => x.name.toLocaleLowerCase() === name.trim().toLocaleLowerCase())) {
+                valid = false;
+                setValidationMessage("A page with this name already exists.");
+            }
+        }
+        else {
+            if (name.trim().length > 0 && name.trim().length < 3)
+                setValidationMessage("Name is too short.");
+            else
+                setValidationMessage(null);
+        }
+        if (valid)
+            setValidationMessage(null);
+        setIsValid(valid);
+    }, 500);
+    (0, react_1.useEffect)(() => {
+        isValidDebounced();
+    }, [name]);
+    const handleOk = async () => {
+        if (!selectedItem || !selectedTemplate)
+            return;
+        const result = await (0, editService_1.executeCreateItem)((0, utils_1.getItemDescriptor)(selectedItem), selectedTemplate, name);
+        if (result.response.ok) {
+            editContext?.switchView("page-editor");
+            if (result.data)
+                editContext?.loadItem(result.data);
+        }
+        else {
+            editContext.showToast({
+                severity: "error",
+                summary: "Error",
+                detail: "Failed to create item",
+            });
+        }
+    };
+    const launchWizard = (ev) => {
+        const wizard = wizards?.find((x) => x.id === selectedTemplate);
+        if (!wizard || !selectedItem)
+            return;
+        editContext?.executeCommand({
+            command: editContext?.configuration.pageWizard.startWizardCommand,
+            data: {
+                wizard,
+                item: selectedItem,
+            },
+            event: ev,
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "tour-pick-location flex w-1/2 flex-col", children: [(0, jsx_runtime_1.jsx)(SectionHeadline_1.SectionHeadline, { children: "1. Pick Location" }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)(ScrollingContentTree_1.ScrollingContentTree, { selectedItemId: selectedItem?.id || selectedItemId, onSelectionChange: (selection) => {
+                                    const selected = selection[0];
+                                    if (selected)
+                                        setSelectedItem(selected);
+                                } }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "w-1/2 border-l pl-7", children: [(0, jsx_runtime_1.jsx)(SectionHeadline_1.SectionHeadline, { className: "tour-choose-template", children: "2. Choose a Template or Wizard" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-1 flex min-h-12 flex-wrap gap-3", children: [!insertOptions?.length && ((0, jsx_runtime_1.jsx)("div", { children: "No page templates available here." })), insertOptionsAndWizards?.map((option) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => setSelectedTemplate(option.id), className: (0, utils_2.classNames)("mb-2 flex cursor-pointer flex-col items-center bg-gray-100 p-2 text-sm", selectedTemplate === option.id
+                                    ? "tour-selected-template bg-gray-200 outline outline-2 outline-offset-2 outline-gray-200"
+                                    : "bg-gray-100"), children: [(0, jsx_runtime_1.jsx)("img", { src: (0, utils_1.getAbsoluteIconUrl)(option.icon), width: "32", height: "32" }), option.name] }, option.id)))] }), selectedTemplate &&
+                        wizards?.find((x) => x.id === selectedTemplate) && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: launchWizard, label: "Start Wizard", id: "launch-wizard-button" }) })), selectedTemplate &&
+                        insertOptions?.find((x) => x.id === selectedTemplate) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SectionHeadline_1.SectionHeadline, { children: "3. Name Your Page" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { className: "w-full", value: name, id: "new-page-name", onChange: (e) => setName(e.target.value), onKeyDown: (ev) => {
+                                    if (ev.key === "Enter" && isValid)
+                                        handleOk();
+                                }, "data-testid": "new-page-name" }), validationMessage && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 text-red-500", children: validationMessage })), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleOk, label: "Create", disabled: !isValid, id: "create-new-page-button" }) })] }))] })] }));
+}

package/dist/splash-screen/SectionHeadline.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionHeadline = SectionHeadline;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+const Icons_1 = require("../editor/ui/Icons");
+function SectionHeadline({ children, className, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)("mt-2 mb-2 font-bold flex gap-2 items-center w-fit", className), children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowRightIcon, {}), " ", children] }));
+}