@alpaca-editor/core 1.0.3762-mono

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

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentTypeSelector = ComponentTypeSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// Component Type and Placeholder Selection UI
+function ComponentTypeSelector({ selectedComponentTypes, setSelectedComponentTypes, schema, data, setData, step, }) {
+    const [availableComponentTypes, setAvailableComponentTypes] = (0, react_1.useState)([]);
+    const [isSettingsPanelCollapsed, setIsSettingsPanelCollapsed] = (0, react_1.useState)(true);
+    const [preselectedTypes, setPreselectedTypes] = (0, react_1.useState)([]);
+    const [searchFilter, setSearchFilter] = (0, react_1.useState)("");
+    // Handle select all component types
+    const handleSelectAllComponents = () => {
+        setSelectedComponentTypes(availableComponentTypes);
+        setData({
+            ...data,
+            selectedComponentTypes: availableComponentTypes,
+        });
+    };
+    // Handle clear all component types
+    const handleClearAllComponents = () => {
+        setSelectedComponentTypes([]);
+        setData({
+            ...data,
+            selectedComponentTypes: [],
+        });
+    };
+    // Toggle component type selection
+    const toggleComponentType = (type) => {
+        setSelectedComponentTypes((prevSelected) => {
+            const newSelected = prevSelected.includes(type)
+                ? prevSelected.filter((t) => t !== type)
+                : [...prevSelected, type];
+            // Save selected types to wizard data
+            setData({
+                ...data,
+                selectedComponentTypes: newSelected,
+            });
+            return newSelected;
+        });
+    };
+    // Filter available components by search term
+    const filteredComponentTypes = availableComponentTypes.filter((type) => type.toLowerCase().includes(searchFilter.toLowerCase()));
+    // Helper function to recursively extract component types
+    const extractComponentTypes = (items) => {
+        if (!items || !Array.isArray(items))
+            return [];
+        let types = [];
+        for (const item of items) {
+            // Add the current component type if it exists
+            if ("type" in item) {
+                types.push(item.type);
+            }
+            // Process components in placeholders recursively
+            if ("placeholders" in item && Array.isArray(item.placeholders)) {
+                for (const placeholder of item.placeholders) {
+                    if (placeholder.components && Array.isArray(placeholder.components)) {
+                        types = [
+                            ...types,
+                            ...extractComponentTypes(placeholder.components),
+                        ];
+                    }
+                }
+            }
+            // Process components directly (for top-level structure)
+            if ("components" in item && Array.isArray(item.components)) {
+                types = [...types, ...extractComponentTypes(item.components)];
+            }
+        }
+        return types;
+    };
+    // Helper function to extract placeholders from the schema
+    const extractPlaceholders = (items) => {
+        if (!items || !Array.isArray(items))
+            return [];
+        let placeholders = [];
+        for (const item of items) {
+            // Add the current placeholder name if it exists
+            if ("name" in item) {
+                placeholders.push(item.name);
+            }
+            // Handle SchemaComponent objects
+            if ("placeholders" in item && Array.isArray(item.placeholders)) {
+                // Extract names from each placeholder
+                item.placeholders.forEach((placeholder) => {
+                    placeholders.push(placeholder.name);
+                    // Recursively process components in this placeholder
+                    if (placeholder.components && Array.isArray(placeholder.components)) {
+                        placeholders = [
+                            ...placeholders,
+                            ...extractPlaceholders(placeholder.components),
+                        ];
+                    }
+                });
+            }
+            // Handle SchemaPlaceholder objects
+            if ("components" in item && Array.isArray(item.components)) {
+                placeholders = [
+                    ...placeholders,
+                    ...extractPlaceholders(item.components),
+                ];
+            }
+        }
+        return placeholders;
+    };
+    // Initialize selections based on data or preselected values
+    const initializeSelections = (uniqueTypes, stepPreselectedTypes) => {
+        // Initialize selected types
+        if (data.selectedComponentTypes &&
+            Array.isArray(data.selectedComponentTypes)) {
+            // Filter out any types that are no longer available
+            const validSelectedTypes = data.selectedComponentTypes.filter((type) => uniqueTypes.includes(type));
+            setSelectedComponentTypes(validSelectedTypes.length > 0
+                ? validSelectedTypes
+                : stepPreselectedTypes.length > 0
+                    ? stepPreselectedTypes
+                    : uniqueTypes);
+        }
+        else if (stepPreselectedTypes.length > 0) {
+            // Use preselected types from step
+            setSelectedComponentTypes(stepPreselectedTypes);
+            // Update data for persistence
+            setData((prev) => ({
+                ...prev,
+                selectedComponentTypes: stepPreselectedTypes,
+            }));
+        }
+        else {
+            // Default to selecting all component types
+            setSelectedComponentTypes(uniqueTypes);
+            // Update data for persistence
+            setData((prev) => ({
+                ...prev,
+                selectedComponentTypes: uniqueTypes,
+            }));
+        }
+    };
+    // Extract component types and placeholders from wizard schema when available
+    (0, react_1.useEffect)(() => {
+        if (schema) {
+            try {
+                // Parse schema if it's a string
+                schema =
+                    typeof schema === "string"
+                        ? JSON.parse(schema)
+                        : schema;
+                // Extract component types
+                const componentTypes = extractComponentTypes(schema);
+                // Remove duplicates and sort alphabetically
+                const uniqueTypes = Array.from(new Set(componentTypes)).sort();
+                setAvailableComponentTypes(uniqueTypes);
+                // Parse preselected components from step if available
+                let stepPreselectedTypes = [];
+                if (step["preselectedComponents"]) {
+                    // Split by comma or newline and trim whitespace
+                    stepPreselectedTypes = step["preselectedComponents"]
+                        .split(/[,\n\r]+/)
+                        .map((type) => type.trim())
+                        .filter((type) => type && uniqueTypes.includes(type)); // Only include valid types
+                }
+                // Set preselected types for UI differentiation
+                setPreselectedTypes(stepPreselectedTypes);
+                // Parse preselected placeholders from step if available
+                // Initialize component types and placeholders
+                initializeSelections(uniqueTypes, stepPreselectedTypes);
+            }
+            catch (error) {
+                console.error("Error processing schema:", error);
+            }
+        }
+    }, [schema, step]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "pb-3 mt-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-medium", children: "Layout Generation Settings" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-gray-500", children: [selectedComponentTypes &&
+                                        selectedComponentTypes.length > 0 &&
+                                        `${selectedComponentTypes.length} component types`, selectedComponentTypes &&
+                                        selectedComponentTypes.length === 0 &&
+                                        "Configure what the AI will use to generate the layout"] })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setIsSettingsPanelCollapsed(!isSettingsPanelCollapsed), className: "bg-gray-200 text-gray-700 p-1 rounded flex items-center justify-center w-6 h-6 hover:bg-gray-300", title: isSettingsPanelCollapsed ? "Expand settings" : "Collapse settings", "aria-expanded": !isSettingsPanelCollapsed, children: isSettingsPanelCollapsed ? ((0, jsx_runtime_1.jsx)("span", { className: "text-lg", children: "\u2193" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-lg", children: "\u2191" })) })] }), !isSettingsPanelCollapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-2", children: (0, jsx_runtime_1.jsx)("input", { type: "text", value: searchFilter, onChange: (e) => setSearchFilter(e.target.value), placeholder: "Search components and placeholders...", className: "w-full px-3 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3 mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0 border border-gray-200 rounded p-2 bg-white", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-bold", children: "Component Types" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-gray-500 px-2 py-1 rounded-full bg-gray-200", children: [selectedComponentTypes && selectedComponentTypes.length, "of ", availableComponentTypes.length, " selected"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "mb-2", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-1 mb-2", children: selectedComponentTypes &&
+                                            selectedComponentTypes.length > 0 ? (selectedComponentTypes.map((type) => ((0, jsx_runtime_1.jsxs)("div", { className: `px-2 py-1 text-xs rounded-full flex items-center ${preselectedTypes.includes(type)
+                                                ? "bg-green-100 text-green-800"
+                                                : "bg-blue-100 text-blue-800"}`, children: [type, (0, jsx_runtime_1.jsx)("button", { onClick: () => toggleComponentType(type), className: `ml-1 ${preselectedTypes.includes(type)
+                                                        ? "text-green-600 hover:text-green-800"
+                                                        : "text-blue-600 hover:text-blue-800"}`, "aria-label": `Remove ${type}`, children: "\u00D7" })] }, type)))) : ((0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 italic", children: "No component types selected" })) }) }), (0, jsx_runtime_1.jsx)("div", { className: `max-h-28 overflow-y-auto p-1 bg-white rounded border border-gray-200 mb-2 ${filteredComponentTypes.length === 0
+                                        ? "flex justify-center items-center"
+                                        : ""}`, children: filteredComponentTypes.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-1", children: filteredComponentTypes.map((type) => {
+                                            const isSelected = selectedComponentTypes &&
+                                                selectedComponentTypes.includes(type);
+                                            const isPreselected = preselectedTypes.includes(type);
+                                            return ((0, jsx_runtime_1.jsxs)("label", { className: `flex items-center cursor-pointer p-1 rounded-md text-sm border ${isSelected
+                                                    ? isPreselected
+                                                        ? "bg-green-50 text-green-700 border-green-200"
+                                                        : "bg-blue-50 text-blue-700 border-blue-200"
+                                                    : isPreselected
+                                                        ? "bg-green-50/30 text-green-700/70 border-green-200 hover:bg-green-50/50"
+                                                        : "hover:bg-gray-100 border-transparent"}`, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isSelected, onChange: () => toggleComponentType(type), className: "mr-2" }), type, isPreselected && ((0, jsx_runtime_1.jsx)("span", { className: "ml-1 text-xs text-green-600", title: "Recommended by template", children: "\u2605" }))] }, type));
+                                        }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-gray-500 text-sm p-4", children: searchFilter
+                                            ? "No matching component types found"
+                                            : "No component types available" })) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("button", { onClick: handleSelectAllComponents, disabled: selectedComponentTypes &&
+                                                selectedComponentTypes.length ===
+                                                    availableComponentTypes.length, className: "flex-1 bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs hover:bg-gray-300 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed", children: "Select All" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleClearAllComponents, disabled: selectedComponentTypes &&
+                                                selectedComponentTypes.length === 0, className: "flex-1 bg-gray-200 text-gray-700 px-2 py-1 rounded text-xs hover:bg-gray-300 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed", children: "Clear All" })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full flex gap-2", children: !isSettingsPanelCollapsed ||
+                                        (selectedComponentTypes &&
+                                            selectedComponentTypes.length === 0 &&
+                                            preselectedTypes.length > 0) || ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-1", children: preselectedTypes.length > 0 && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                                setSelectedComponentTypes(preselectedTypes);
+                                                setData({
+                                                    ...data,
+                                                    selectedComponentTypes: preselectedTypes,
+                                                });
+                                            }, disabled: preselectedTypes.length ===
+                                                (selectedComponentTypes?.length || 0) &&
+                                                preselectedTypes.every((type) => selectedComponentTypes?.includes(type)), className: "flex-1 bg-green-500 text-white px-2 py-1 rounded text-xs hover:bg-green-600 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed", children: "Use Recommended Components" })) })) })] }) })] }))] }));
+}

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

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Components = Components;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../../editor/client/editContext");
+const SimpleIconButton_1 = require("../../editor/ui/SimpleIconButton");
+const FieldEditor_1 = require("./FieldEditor");
+const react_1 = __importDefault(require("react"));
+function Components({ pageModel, onFieldEdited, onComponentRemoved, thumbnails, setInternalState, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    if (!pageModel)
+        return (0, jsx_runtime_1.jsx)("div", { children: "No layout generated yet" });
+    // Simplified component to only render component hierarchy
+    const SimpleLayoutItem = ({ components, depth = 0, }) => {
+        if (!components)
+            return null;
+        // Generate a random pastel background color based on component type
+        const getColorForType = (type) => {
+            // Simple hash function to generate consistent colors for the same type
+            const hash = type
+                .split("")
+                .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+            const hue = hash % 360;
+            return `hsl(${hue}, 70%, 90%)`;
+        };
+        const getThumbnailUrl = (mediaId) => {
+            if (!thumbnails)
+                return;
+            return thumbnails.find((thumbnail) => thumbnail.id === mediaId)?.thumbUrl;
+        };
+        const getImage = (field) => {
+            const url = getThumbnailUrl(field.value);
+            if (url) {
+                return (0, jsx_runtime_1.jsx)("img", { src: url, alt: field.name, className: "mb-2" });
+            }
+            return field.value;
+        };
+        // Handle component with placeholders
+        const renderComponent = (component, collection) => {
+            const indent = depth * 20;
+            const componentType = component.type || "Unknown";
+            const borderColor = component.type
+                ? getColorForType(componentType)
+                : "#f0f0f0";
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", style: {
+                    marginBottom: "8px",
+                    marginLeft: indent,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 right-0", children: (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { icon: "pi pi-times", label: "Remove", onClick: () => {
+                                // Remove component from its collection
+                                const index = collection.findIndex((c) => c.id === component.id);
+                                if (index !== -1) {
+                                    collection.splice(index, 1);
+                                }
+                                onComponentRemoved(component);
+                            } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-2 px-2 py-1 rounded-md bg-white border-2", style: {
+                            borderColor,
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: component.type }), ":", " ", component.name] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500", children: component.fields?.map((field, index) => field.type === "Picture" || field.type === "Image" ? ((0, jsx_runtime_1.jsxs)("div", { className: "cursor-pointer", onClick: async () => {
+                                        const currentImage = await editContext?.itemsRepository.getItem({
+                                            id: field.value,
+                                            language: "en",
+                                            version: 1,
+                                        });
+                                        const selectedImageId = await editContext?.selectMedia({
+                                            selectedIdPath: currentImage?.idPath || "",
+                                            mode: "images",
+                                        });
+                                        if (selectedImageId) {
+                                            const newImage = await editContext?.itemsRepository.getItem({
+                                                id: selectedImageId,
+                                                language: "en",
+                                                version: 1,
+                                            });
+                                            const newThumb = {
+                                                id: newImage?.id || "",
+                                                name: newImage?.name || "",
+                                                thumbUrl: newImage?.thumbnail || "",
+                                                previewUrl: newImage?.thumbnail || "",
+                                            };
+                                            field.value = selectedImageId;
+                                            setInternalState((state) => ({
+                                                ...state,
+                                                thumbnails: [...(state.thumbnails || []), newThumb],
+                                            }));
+                                            onFieldEdited();
+                                        }
+                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "font-bold text-gray-900", children: [field.name, ":"] }), (0, jsx_runtime_1.jsx)("div", { children: getImage(field) })] }, index)) : ((0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: field, onFieldEdited: onFieldEdited }, index))) })] }), component.children && ((0, jsx_runtime_1.jsx)(SimpleLayoutItem, { components: component.children, depth: depth + 1 }))] }, component.id));
+        };
+        return components.map((component, index) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: renderComponent(component, components) }, component.id || index)));
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-y-auto inset-0 absolute", children: pageModel ? ((0, jsx_runtime_1.jsx)(SimpleLayoutItem, { components: pageModel.components })) : ((0, jsx_runtime_1.jsx)("div", { children: "No layout generated yet" })) }) }) }));
+}

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

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreatePage = CreatePage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ActionButton_1 = require("../../components/ActionButton");
+const use_debounce_1 = require("use-debounce");
+const contentService_1 = require("../../editor/services/contentService");
+const aiService_1 = require("../../editor/services/aiService");
+const service_1 = require("../service");
+const editContext_1 = require("../../editor/client/editContext");
+const LanguageSelector_1 = require("../../editor/menubar/LanguageSelector");
+function CreatePage({ wizard, parentItem, setPageItem, pageItem, pageModel, setPageModel, step, data, }) {
+    const [validationMessage, setValidationMessage] = (0, react_1.useState)();
+    const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
+    const [isGenerating, setIsGenerating] = (0, react_1.useState)(false);
+    const [language, setLanguage] = (0, react_1.useState)(parentItem.language || "en");
+    const [previousLanguage, setPreviousLanguage] = (0, react_1.useState)(language);
+    const [fullParentItem, setFullParentItem] = (0, react_1.useState)();
+    const editContext = (0, editContext_1.useEditContext)();
+    (0, react_1.useEffect)(() => {
+        if (!editContext)
+            return;
+        const generateNameAndMetaDescription = async () => {
+            const metaInstructions = step["Instructions for generating item name and meta fields"];
+            setIsGenerating(true);
+            try {
+                const abortController = new AbortController();
+                const result = await (0, aiService_1.executePrompt)([
+                    {
+                        content: `${metaInstructions?.trim()} Reply with a json object of type PageModel = { name: string; metaDescription: string; metaKeywords: string; };               
+              The item name should be a valid sitecore item name. Spaces are allowed but no special characters or Umlaute.
+              The language of the page is ${language}.
+              Input data: ${JSON.stringify(data)}`,
+                        name: "system",
+                        role: "system",
+                    },
+                ], editContext, service_1.createWizardAiContext, [""], true, { signal: abortController.signal }, "o3-mini-low", (response) => {
+                    try {
+                        const newLayout = JSON.parse(response.content);
+                        setPageModel({
+                            ...pageModel,
+                            name: newLayout.name,
+                            metaDescription: newLayout.metaDescription,
+                            metaKeywords: newLayout.metaKeywords,
+                        });
+                    }
+                    catch (parseError) { }
+                });
+                const pageModel = JSON.parse(result.content);
+                setPageModel({
+                    ...pageModel,
+                    name: pageModel.name,
+                    metaDescription: pageModel.metaDescription,
+                    metaKeywords: pageModel.metaKeywords,
+                });
+            }
+            catch (error) {
+                console.error("Error generating name and meta description", error);
+            }
+            finally {
+                setIsGenerating(false);
+            }
+        };
+        if (!pageModel.name || language !== previousLanguage) {
+            generateNameAndMetaDescription();
+            setPreviousLanguage(language);
+        }
+    }, [language, pageModel.name, previousLanguage, data, step, editContext]);
+    (0, react_1.useEffect)(() => {
+        const loadParentItem = async () => {
+            if (!parentItem)
+                return;
+            const item = await editContext?.itemsRepository.getItem(parentItem);
+            setFullParentItem(item);
+        };
+        loadParentItem();
+    }, [parentItem]);
+    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, language }, wizard.templateId, pageModel.name);
+                if (result) {
+                    editContext?.loadItem(result, { addToBrowseHistory: true });
+                    const item = await editContext?.itemsRepository.getItem(result);
+                    if (item)
+                        setPageItem(item);
+                    else
+                        console.error("Failed to load newly created item", result);
+                    console.log("Page created", result, "Page model", pageModel);
+                }
+            }
+            catch (error) {
+                console.error("Error creating page", error);
+            }
+            finally {
+                setIsBuilding(false);
+            }
+        }, 1);
+    };
+    const handleInputChange = (field, value) => {
+        const updatedPageModel = {
+            ...pageModel,
+            [field]: value,
+        };
+        setPageModel(updatedPageModel);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "pr-6", style: { viewTransitionName: "page-properties" }, 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 relative", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "language", className: "block text-sm font-medium mb-1", children: "Language" }), (0, jsx_runtime_1.jsx)("div", { className: "w-fit", children: (0, jsx_runtime_1.jsx)(LanguageSelector_1.LanguageSelector, { selectedLanguage: language, darkMode: true, disabled: isBuilding || isGenerating, onLanguageSelected: (language) => setLanguage(language.languageCode), showAllLanguages: true }) })] }), (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", disabled: !!pageItem || isBuilding || isGenerating, 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", disabled: !!pageItem || isBuilding || isGenerating, 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.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "metaKeywords", className: "block text-sm font-medium mb-1", children: "Meta Keywords" }), (0, jsx_runtime_1.jsx)("textarea", { id: "metaKeywords", disabled: !!pageItem || isBuilding || isGenerating, className: "w-full p-2 border rounded min-h-[100px]  text-sm", value: pageModel.metaKeywords, onChange: (e) => handleInputChange("metaKeywords", e.target.value), placeholder: "Enter meta keywords" })] }), !pageItem && ((0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { disabled: isBuilding || isGenerating || !!validationMessage, className: "flex-1", onClick: () => {
+                    createPage();
+                }, isLoading: isBuilding || isGenerating, loadingText: isGenerating ? "Generating..." : "Create Page", children: "Create Page" }))] }));
+}