@alpaca-editor/core 1.0.3767 → 1.0.3768

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

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditButton = EditButton;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function EditButton({ field, onEdit, className = "" }) {
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onEdit, className: `inline-flex items-center justify-center p-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${className}`, "aria-label": `Edit ${field.name || "field"}`, title: `Edit ${field.name || "field"}`, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" }) }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+export function EditButton({ field, onEdit, className = "" }) {
+    return (_jsx("button", { type: "button", onClick: onEdit, className: `inline-flex items-center justify-center p-1 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${className}`, "aria-label": `Edit ${field.name || "field"}`, title: `Edit ${field.name || "field"}`, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" }) }) }));
 }

package/dist/page-wizard/steps/FieldEditor.d.ts

@@ -0,0 +1,5 @@
+import { WizardField } from "../PageWizard";
+export declare function FieldEditor({ field, onFieldEdited, }: {
+    field: WizardField;
+    onFieldEdited: () => void;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldEditor = FieldEditor;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const editor_1 = require("primereact/editor");
-function FieldEditor({ field, onFieldEdited, }) {
-    const [fieldValue, setFieldValue] = (0, react_1.useState)("");
-    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Editor } from "primereact/editor";
+export function FieldEditor({ field, onFieldEdited, }) {
+    const [fieldValue, setFieldValue] = useState("");
+    const [isEditing, setIsEditing] = useState(false);
+    useEffect(() => {
         if (isEditing) {
             const value = field.value;
             setFieldValue(typeof value === "string" ? value : "");
         }
     }, [isEditing]);
     if (!isEditing) {
-        return ((0, jsx_runtime_1.jsxs)("div", { onClick: () => setIsEditing(true), className: "cursor-pointer mb-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "font-bold text-gray-900", children: [field.name, ":"] }), (0, jsx_runtime_1.jsx)("div", { className: "text-gray-700 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:my-1 [&_p]:my-1", dangerouslySetInnerHTML: { __html: field.value } })] }));
+        return (_jsxs("div", { onClick: () => setIsEditing(true), className: "cursor-pointer mb-2", children: [_jsxs("div", { className: "font-bold text-gray-900", children: [field.name, ":"] }), _jsx("div", { className: "text-gray-700 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:my-1 [&_p]:my-1", dangerouslySetInnerHTML: { __html: field.value } })] }));
     }
     const isRichText = field.type === "Rich Text";
     const handleSave = () => {
@@ -26,5 +23,5 @@ function FieldEditor({ field, onFieldEdited, }) {
     const handleCancel = () => {
         setIsEditing(false);
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-1000", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-full max-w-lg", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-lg font-medium text-gray-900 mb-4", children: ["Edit ", field.name || "Field"] }), isRichText ? ((0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)(editor_1.Editor, { className: "w-full h-64 p-2 border border-gray-300 rounded-md", value: fieldValue, onTextChange: (e) => setFieldValue(e.htmlValue || "") }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)("textarea", { className: "w-full p-2 border border-gray-300 rounded-md", value: fieldValue, onChange: (e) => setFieldValue(e.target.value) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end space-x-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleCancel, className: "inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", children: "Cancel" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleSave, className: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", children: "Save" })] })] }) }));
+    return (_jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-1000", children: _jsxs("div", { className: "bg-white rounded-lg shadow-xl p-6 w-full max-w-lg", children: [_jsxs("h3", { className: "text-lg font-medium text-gray-900 mb-4", children: ["Edit ", field.name || "Field"] }), isRichText ? (_jsx("div", { className: "mb-4", children: _jsx(Editor, { className: "w-full h-64 p-2 border border-gray-300 rounded-md", value: fieldValue, onTextChange: (e) => setFieldValue(e.htmlValue || "") }) })) : (_jsx("div", { className: "mb-4", children: _jsx("textarea", { className: "w-full p-2 border border-gray-300 rounded-md", value: fieldValue, onChange: (e) => setFieldValue(e.target.value) }) })), _jsxs("div", { className: "flex justify-end space-x-3", children: [_jsx("button", { type: "button", onClick: handleCancel, className: "inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", children: "Cancel" }), _jsx("button", { type: "button", onClick: handleSave, className: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", children: "Save" })] })] }) }));
 }

package/dist/page-wizard/steps/Generate.d.ts

@@ -0,0 +1,5 @@
+interface GenerateProps {
+    title: string;
+}
+declare function Generate({ title }: GenerateProps): import("react/jsx-runtime").JSX.Element;
+export default Generate;

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

@@ -1,11 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("primereact/utils");
-const Icons_1 = require("../../editor/ui/Icons");
-const Icons_2 = require("../../editor/ui/Icons");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "primereact/utils";
+import { SparkleIconBig } from "../../editor/ui/Icons";
+import { SparkleIconSmall } from "../../editor/ui/Icons";
 function Generate({ title }) {
     console.log("Generate", title);
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("flex flex-col justify-center items-center h-full transition-all duration-300 animate-fadeIn text-canvas-pink"), children: (0, jsx_runtime_1.jsxs)("div", { className: "mb-20", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center ml-20 animate-sparkle w-auto min-h-10 delay-700", children: (0, jsx_runtime_1.jsx)(Icons_2.SparkleIconSmall, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center ml-5 animate-sparkle w-auto min-h-20", children: (0, jsx_runtime_1.jsx)(Icons_1.SparkleIconBig, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center mr-20 animate-sparkle w-auto min-h-10 delay-500", children: (0, jsx_runtime_1.jsx)(Icons_2.SparkleIconSmall, {}) })] }) }));
+    return (_jsx("div", { className: classNames("flex flex-col justify-center items-center h-full transition-all duration-300 animate-fadeIn text-canvas-pink"), children: _jsxs("div", { className: "mb-20", children: [_jsx("div", { className: "flex justify-center ml-20 animate-sparkle w-auto min-h-10 delay-700", children: _jsx(SparkleIconSmall, {}) }), _jsx("div", { className: "flex justify-center ml-5 animate-sparkle w-auto min-h-20", children: _jsx(SparkleIconBig, {}) }), _jsx("div", { className: "flex justify-center mr-20 animate-sparkle w-auto min-h-10 delay-500", children: _jsx(SparkleIconSmall, {}) })] }) }));
 }
-exports.default = Generate;
+export default Generate;

package/dist/page-wizard/steps/ImagesStep.d.ts

@@ -0,0 +1,2 @@
+import { StepComponentProps } from "../../config/types";
+export declare const ImagesStep: (props: StepComponentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,27 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImagesStep = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ScrollingContentTree_1 = require("../../editor/ScrollingContentTree");
-const Splitter_1 = require("../../editor/ui/Splitter");
-const editContext_1 = require("../../editor/client/editContext");
-const aiService_1 = require("../../editor/services/aiService");
-const service_1 = require("../service");
-const ActionButton_1 = require("../../components/ActionButton");
-const utils_1 = require("primereact/utils");
-const button_1 = require("primereact/button");
-const dialog_1 = require("primereact/dialog");
-const ImagesStep = (props) => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ScrollingContentTree } from "../../editor/ScrollingContentTree";
+import { Splitter } from "../../editor/ui/Splitter";
+import { useEditContext } from "../../editor/client/editContext";
+import { executePrompt, executeSearch } from "../../editor/services/aiService";
+import { createWizardAiContext } from "../service";
+import { ActionButton } from "../../components/ActionButton";
+import { classNames } from "primereact/utils";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+export const ImagesStep = (props) => {
     const mediaRootId = "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1";
-    const [selectedFolderId, setSelectedFolderId] = (0, react_1.useState)(mediaRootId);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    const editContext = (0, editContext_1.useEditContext)();
+    const [selectedFolderId, setSelectedFolderId] = useState(mediaRootId);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const editContext = useEditContext();
     const propName = props.step.propertyName || "images";
-    const [showFolderDialog, setShowFolderDialog] = (0, react_1.useState)(false);
-    const [selectedFolder, setSelectedFolder] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
+    const [showFolderDialog, setShowFolderDialog] = useState(false);
+    const [selectedFolder, setSelectedFolder] = useState();
+    useEffect(() => {
         if (props.data[propName]?.length > 0) {
             props.setStepCompleted(true);
         }
@@ -35,7 +32,7 @@ const ImagesStep = (props) => {
         }));
         try {
             // First, ask AI for keywords based on the content
-            const aiPromptResult = await (0, aiService_1.executePrompt)([
+            const aiPromptResult = await executePrompt([
                 {
                     content: `You are an AI assistant for building a web page. You will later have to create images for the page. 
                      Please anaylze the provided data and suggest a number of images and specific keywords per image. The keywords will be used to find matching images in the image library.                 
@@ -45,11 +42,11 @@ const ImagesStep = (props) => {
                     name: "system",
                     role: "system",
                 },
-            ], editContext, service_1.createWizardAiContext, [""], true, undefined, "o3-mini-low");
+            ], editContext, createWizardAiContext, [""], true, undefined, "o3-mini-low");
             const images = JSON.parse(aiPromptResult.content).images;
             // Create an array of promises for all search operations
             const searchPromises = images.map(async (image) => {
-                const searchResult = await (0, aiService_1.executeSearch)({
+                const searchResult = await executeSearch({
                     query: image.keywords.join(" "),
                     rootItemIds: selectedFolderId ? [selectedFolderId] : undefined,
                     editContext: editContext,
@@ -97,7 +94,7 @@ const ImagesStep = (props) => {
             setIsLoading(false);
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const loadFolder = async () => {
             if (selectedFolderId) {
                 const item = await editContext?.itemsRepository.getItem({
@@ -116,25 +113,25 @@ const ImagesStep = (props) => {
         {
             name: "Settings",
             defaultSize: 400,
-            content: ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col gap-2 pr-6 pb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative mb-2 rounded-md border border-gray-400 bg-white p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-2 text-sm font-bold text-gray-800", children: "Image library folder" }), selectedFolder && ((0, jsx_runtime_1.jsx)("div", { className: "mb-2 text-sm text-gray-500", children: selectedFolder.path })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Change Folder", onClick: () => {
+            content: (_jsxs("div", { className: "flex h-full flex-col gap-2 pr-6 pb-4", children: [_jsxs("div", { className: "relative mb-2 rounded-md border border-gray-400 bg-white p-4", children: [_jsx("div", { className: "mb-2 text-sm font-bold text-gray-800", children: "Image library folder" }), selectedFolder && (_jsx("div", { className: "mb-2 text-sm text-gray-500", children: selectedFolder.path })), _jsx(Button, { label: "Change Folder", onClick: () => {
                                     setShowFolderDialog(true);
-                                } }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "Select Folder", visible: showFolderDialog, onHide: () => {
+                                } }), _jsx(Dialog, { header: "Select Folder", visible: showFolderDialog, onHide: () => {
                                     setShowFolderDialog(false);
-                                }, style: { width: "50vw", height: "50vh" }, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex h-full flex-col", children: (0, jsx_runtime_1.jsx)(ScrollingContentTree_1.ScrollingContentTree, { rootItemId: mediaRootId, onSelectionChange: (selection) => {
+                                }, style: { width: "50vw", height: "50vh" }, children: _jsx("div", { className: "relative flex h-full flex-col", children: _jsx(ScrollingContentTree, { rootItemId: mediaRootId, onSelectionChange: (selection) => {
                                             const selectedNode = selection[0];
                                             if (selectedNode)
                                                 setSelectedFolderId(selectedNode.id);
                                             else
                                                 setSelectedFolderId(mediaRootId);
                                             setShowFolderDialog(false);
-                                        } }) }) })] }), (0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { onClick: findMatchingImages, isLoading: isLoading, disabled: isLoading, loadingText: "Searching...", children: "Find Matching Images" })] })),
+                                        } }) }) })] }), _jsx(ActionButton, { onClick: findMatchingImages, isLoading: isLoading, disabled: isLoading, loadingText: "Searching...", children: "Find Matching Images" })] })),
         },
         {
             name: "Images",
             defaultSize: "auto",
-            content: ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-4 p-4 pt-0", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [error && (0, jsx_runtime_1.jsx)("div", { className: "text-red-500", children: error }), props.data[propName]?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-4", children: props.data[propName]?.map((image, index) => ((0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.classNames)("rounded border border-gray-400 bg-white p-4 text-sm", index % 2 === 0
+            content: (_jsx("div", { className: "absolute inset-0 overflow-auto", children: _jsx("div", { className: "flex flex-col gap-4 p-4 pt-0", children: _jsxs("div", { className: "flex items-center gap-4", children: [error && _jsx("div", { className: "text-red-500", children: error }), props.data[propName]?.length > 0 && (_jsx("div", { className: "flex flex-col gap-4", children: props.data[propName]?.map((image, index) => (_jsxs("span", { className: classNames("rounded border border-gray-400 bg-white p-4 text-sm", index % 2 === 0
                                         ? "animate-fadeRight"
-                                        : "animate-fadeLeft"), children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-3 text-lg", children: image.title }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-5", children: image.options?.map((option, thumbnailIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex h-28 w-28 cursor-pointer items-center justify-center border border-gray-400", onClick: () => {
+                                        : "animate-fadeLeft"), children: [_jsx("div", { className: "mb-3 text-lg", children: image.title }), _jsx("div", { className: "flex flex-wrap gap-5", children: image.options?.map((option, thumbnailIndex) => (_jsxs("div", { className: "relative flex h-28 w-28 cursor-pointer items-center justify-center border border-gray-400", onClick: () => {
                                                     props.setData((prevData) => ({
                                                         ...prevData,
                                                         [propName]: prevData[propName].map((img, imgIndex) => ({
@@ -149,11 +146,10 @@ const ImagesStep = (props) => {
                                                                     : option),
                                                         })),
                                                     }));
-                                                }, children: [(0, jsx_runtime_1.jsx)("img", { src: option.thumbUrl, alt: option.name }, thumbnailIndex), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)("peer ring-offset-background focus-visible:ring-ring pointer-events-none absolute right-1 bottom-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", option.selected
+                                                }, children: [_jsx("img", { src: option.thumbUrl, alt: option.name }, thumbnailIndex), _jsx("div", { className: classNames("peer ring-offset-background focus-visible:ring-ring pointer-events-none absolute right-1 bottom-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", option.selected
                                                             ? "text-canvas-pink border-canvas-pink bg-white"
-                                                            : ""), children: option.selected && ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M20 6 9 17l-5-5" }) })) })] }, thumbnailIndex))) })] }, index))) }))] }) }) })),
+                                                            : ""), children: option.selected && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })) })] }, thumbnailIndex))) })] }, index))) }))] }) }) })),
         },
     ];
-    return (0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { panels: panels });
+    return _jsx(Splitter, { panels: panels });
 };
-exports.ImagesStep = ImagesStep;

package/dist/page-wizard/steps/LayoutStep.d.ts

@@ -0,0 +1,2 @@
+import { StepComponentProps } from "../../config/types";
+export declare function LayoutStep({ wizard, step, data, setData, setStepCompleted, internalState, setInternalState, }: StepComponentProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,33 +1,30 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutStep = LayoutStep;
-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 Components_1 = require("./Components");
-const Splitter_1 = require("../../editor/ui/Splitter");
-const schema_1 = require("./schema");
-const ActionButton_1 = require("../../components/ActionButton");
-const ComponentTypesSelector_1 = require("./ComponentTypesSelector");
-function LayoutStep({ wizard, step, data, setData, setStepCompleted, internalState, setInternalState, }) {
-    const editContext = (0, editContext_1.useEditContext)();
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useEditContext } from "../../editor/client/editContext";
+import { executePrompt } from "../../editor/services/aiService";
+import { createWizardAiContext } from "../service";
+import { Components } from "./Components";
+import { Splitter } from "../../editor/ui/Splitter";
+import { convertPageSchemaToWizardComponents } from "./schema";
+import { ActionButton } from "../../components/ActionButton";
+import { ComponentTypeSelector } from "./ComponentTypesSelector";
+export function LayoutStep({ wizard, step, data, setData, setStepCompleted, internalState, setInternalState, }) {
+    const editContext = useEditContext();
     const abortController = new AbortController();
     const localAbortController = abortController || new AbortController();
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [message, setMessage] = (0, react_1.useState)();
-    const [selectedComponentTypes, setSelectedComponentTypes] = (0, react_1.useState)([]);
-    const [customInstructions, setCustomInstructions] = (0, react_1.useState)();
+    const [isLoading, setIsLoading] = useState(false);
+    const [message, setMessage] = useState();
+    const [selectedComponentTypes, setSelectedComponentTypes] = useState([]);
+    const [customInstructions, setCustomInstructions] = useState();
     if (!editContext) {
         return null;
     }
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (data.pageModel?.components?.length) {
             setStepCompleted(!isLoading);
         }
     }, [data.pageModel, isLoading]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         setCustomInstructions(step.instructions);
     }, []);
     const createLayout = async () => {
@@ -38,8 +35,8 @@ function LayoutStep({ wizard, step, data, setData, setStepCompleted, internalSta
                 ? JSON.parse(wizard.schema)
                 : wizard.schema;
             // Filter the schema based on selected component types and placeholders
-            const filteredSchema = (0, schema_1.convertPageSchemaToWizardComponents)(schema, selectedComponentTypes);
-            const result = await (0, aiService_1.executePrompt)([
+            const filteredSchema = convertPageSchemaToWizardComponents(schema, selectedComponentTypes);
+            const result = await executePrompt([
                 {
                     content: `${customInstructions?.trim()} Reply with a json object of type PageModel = { name: string; metaDescription: string; components: Component[]; message: string; }; 
               Component = {  name: string, type: string;  fields: Field[]; placeholder?: string; children?: Component[]; }; 
@@ -56,7 +53,7 @@ function LayoutStep({ wizard, step, data, setData, setStepCompleted, internalSta
                     name: "system",
                     role: "system",
                 },
-            ], editContext, service_1.createWizardAiContext, [""], true, { signal: localAbortController.signal }, "o3-mini-low", (response) => {
+            ], editContext, createWizardAiContext, [""], true, { signal: localAbortController.signal }, "o3-mini-low", (response) => {
                 try {
                     const newLayout = JSON.parse(response.content);
                     if (newLayout) {
@@ -89,7 +86,7 @@ function LayoutStep({ wizard, step, data, setData, setStepCompleted, internalSta
     const regenerateLayout = () => {
         createLayout();
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!selectedComponentTypes.length)
             return;
         // Only set custom instructions if they're not already set or if step.instructions has changed
@@ -99,22 +96,22 @@ function LayoutStep({ wizard, step, data, setData, setStepCompleted, internalSta
     }, [step.instructions, selectedComponentTypes]);
     // Custom instructions panel
     const customInstructionsPanel = () => {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-bold", children: "Instructions" }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3 text-xs text-gray-500", children: "Provide guidance for the AI when generating your layout" }), (0, jsx_runtime_1.jsx)("textarea", { value: customInstructions, onChange: (e) => setCustomInstructions(e.target.value), placeholder: "Example: Make it modern and minimalist. Focus on images. Include a hero section at the top.", className: "w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 h-48", disabled: isLoading })] }));
+        return (_jsxs("div", { className: "mb-4", children: [_jsx("h3", { className: "text-sm font-bold", children: "Instructions" }), _jsx("div", { className: "mb-3 text-xs text-gray-500", children: "Provide guidance for the AI when generating your layout" }), _jsx("textarea", { value: customInstructions, onChange: (e) => setCustomInstructions(e.target.value), placeholder: "Example: Make it modern and minimalist. Focus on images. Include a hero section at the top.", className: "w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 h-48", disabled: isLoading })] }));
     };
     const settingsPanel = {
         name: "Settings",
         collapsible: false,
         defaultSize: 450,
-        content: ((0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 overflow-auto flex flex-col h-full pr-4", children: [customInstructionsPanel(), (0, jsx_runtime_1.jsx)(ComponentTypesSelector_1.ComponentTypeSelector, { selectedComponentTypes: selectedComponentTypes, setSelectedComponentTypes: setSelectedComponentTypes, schema: wizard.schema, data: data, setData: setData, step: step }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { onClick: regenerateLayout, disabled: isLoading || selectedComponentTypes.length === 0, isLoading: isLoading, loadingText: "Working", className: "flex-1", children: data.pageModel ? "Regenerate Layout" : "Generate Layout" }), isLoading && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+        content: (_jsxs("div", { className: "absolute inset-0 overflow-auto flex flex-col h-full pr-4", children: [customInstructionsPanel(), _jsx(ComponentTypeSelector, { selectedComponentTypes: selectedComponentTypes, setSelectedComponentTypes: setSelectedComponentTypes, schema: wizard.schema, data: data, setData: setData, step: step }), _jsxs("div", { className: "flex gap-2", children: [_jsx(ActionButton, { onClick: regenerateLayout, disabled: isLoading || selectedComponentTypes.length === 0, isLoading: isLoading, loadingText: "Working", className: "flex-1", children: data.pageModel ? "Regenerate Layout" : "Generate Layout" }), isLoading && (_jsxs("button", { onClick: () => {
                                 localAbortController.abort();
                                 setIsLoading(false);
-                            }, className: "bg-red-500 text-white px-2 py-1 rounded text-xs hover:bg-red-600 flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "pi pi-times" }), "Abort"] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 p-2", children: message })] })),
+                            }, className: "bg-red-500 text-white px-2 py-1 rounded text-xs hover:bg-red-600 flex items-center gap-1", children: [_jsx("span", { className: "pi pi-times" }), "Abort"] }))] }), _jsx("div", { className: "text-xs text-gray-500 p-2", children: message })] })),
     };
     const layoutPanel = {
         name: "Layout",
         defaultSize: "auto",
         collapsible: false,
-        content: ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-2 flex flex-col justify-center items-center text-gray-600", children: (0, jsx_runtime_1.jsx)(Components_1.Components, { pageModel: data.pageModel, onComponentRemoved: () => setData({ ...data }), onFieldEdited: () => setData({ ...data }), thumbnails: internalState.thumbnails, setInternalState: setInternalState }) })),
+        content: (_jsx("div", { className: "absolute inset-2 flex flex-col justify-center items-center text-gray-600", children: _jsx(Components, { pageModel: data.pageModel, onComponentRemoved: () => setData({ ...data }), onFieldEdited: () => setData({ ...data }), thumbnails: internalState.thumbnails, setInternalState: setInternalState }) })),
     };
-    return ((0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { panels: [settingsPanel, layoutPanel], localStorageKey: "editor.page-wizard.layout" }));
+    return (_jsx(Splitter, { panels: [settingsPanel, layoutPanel], localStorageKey: "editor.page-wizard.layout" }));
 }

package/dist/page-wizard/steps/SelectStep.d.ts

@@ -0,0 +1,2 @@
+import { StepComponentProps } from "../../config/types";
+export declare function SelectStep({ step, data, setData, setStepCompleted, internalState, setInternalState, }: StepComponentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,35 +1,29 @@
-"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);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useEditContext } from "../../editor/client/editContext";
+import { executePrompt } from "../../editor/services/aiService";
+import { createWizardAiContext } from "../service";
+import { classNames } from "primereact/utils";
+import { Splitter } from "../../editor/ui/Splitter";
+import { InputTextarea } from "primereact/inputtextarea";
+import { ActionButton } from "../../components/ActionButton";
+import Generate from "./Generate";
+export function SelectStep({ step, data, setData, setStepCompleted, internalState, setInternalState, }) {
+    const editContext = useEditContext();
+    const [options, setOptions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [instructions, setInstructions] = useState(step.instructions);
     // Get the property name from the step or use "choice" as default
     const propertyName = step.propertyName || "selectedOptions";
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (data[propertyName]?.length) {
             setStepCompleted(true);
         }
     }, [data]);
     // Initialize the property in data
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!data[propertyName]) {
             setData((prevData) => ({
                 ...prevData,
@@ -46,7 +40,7 @@ function SelectStep({ step, data, setData, setStepCompleted, internalState, setI
             // 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)([
+            const result = await 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.            
@@ -60,7 +54,7 @@ function SelectStep({ step, data, setData, setStepCompleted, internalState, setI
                     name: "user",
                     role: "user",
                 },
-            ], editContext, service_1.createWizardAiContext, [""], true, undefined, step.aiModel || "o3-mini-low");
+            ], editContext, createWizardAiContext, [""], true, undefined, step.aiModel || "o3-mini-low");
             // Parse the result and set options
             if (result && result.content) {
                 try {
@@ -92,7 +86,7 @@ function SelectStep({ step, data, setData, setStepCompleted, internalState, setI
         }
     };
     // Generate options on component mount
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (internalState[step.id + "options"]?.length > 0) {
             setOptions(internalState[step.id + "options"]);
             return;
@@ -100,7 +94,7 @@ function SelectStep({ step, data, setData, setStepCompleted, internalState, setI
         generateOptions();
     }, [editContext, step.instructions, internalState]);
     // Sync data[propertyName] with selectedOptions state
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const currentSelections = data[propertyName] || [];
         setSelectedOptions(currentSelections.map((option) => option.id));
     }, [data, propertyName]);
@@ -127,24 +121,24 @@ function SelectStep({ step, data, setData, setStepCompleted, internalState, setI
         });
     };
     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" })] }));
+        return (_jsxs("div", { className: "text-red-500 p-4", children: [error, _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) => {
+        content: (_jsxs("div", { className: "p-4 h-full", children: [loading && (_jsx("div", { className: "flex items-center justify-center h-full", children: _jsx(Generate, { title: "Generating options..." }) })), !loading && (_jsx("div", { children: options.length === 0 ? (_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
+                        return (_jsxs("div", { className: 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));
+                                : "text-gray-600 border-gray-300"), onClick: () => handleOptionSelect(option), children: [_jsxs("div", { className: "flex flex-col flex-1 cursor-pointer", children: [_jsx("div", { className: "font-medium", children: option.title }), _jsx("div", { className: "text-xs text-gray-600", children: option.description })] }), isSelected && (_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" })] })),
+        content: (_jsxs("div", { className: "flex flex-col gap-2 pr-6", children: [_jsx("h3", { className: "text-sm font-bold", children: "Instructions" }), _jsx(InputTextarea, { className: "h-48 text-sm", value: instructions, onChange: (e) => setInstructions(e.target.value), placeholder: "Enter instructions for the options" }), _jsx(ActionButton, { onClick: generateOptions, isLoading: loading, disabled: loading, loadingText: "Thinking...", children: "Regenerate Options" })] })),
     };
-    return (0, jsx_runtime_1.jsx)(Splitter_1.Splitter, { panels: [settingsPanel, optionsPanel] });
+    return _jsx(Splitter, { panels: [settingsPanel, optionsPanel] });
 }

package/dist/page-wizard/steps/schema.d.ts

@@ -0,0 +1,13 @@
+import { WizardSchemaComponent, PageSchema } from "../PageWizard";
+export declare function convertPageSchemaToWizardComponents(pageSchema: PageSchema, whitelist: string[]): WizardSchemaComponent[];
+/**
+ * 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.
+ */
+export declare function getPlaceholder(schema: PageSchema, parentComponentType: string, childComponentType: string): string | undefined;

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

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertPageSchemaToWizardComponents = convertPageSchemaToWizardComponents;
-exports.getPlaceholder = getPlaceholder;
-function convertPageSchemaToWizardComponents(pageSchema, whitelist) {
+export function convertPageSchemaToWizardComponents(pageSchema, whitelist) {
     const componentMap = new Map();
     /**
      * Recursively processes a SchemaComponent.
@@ -83,7 +79,7 @@ function convertPageSchemaToWizardComponents(pageSchema, whitelist) {
  * @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) {
+export 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

package/dist/page-wizard/steps/usePageCreator.d.ts

@@ -0,0 +1,6 @@
+import { Dispatch, SetStateAction } from "react";
+import { Wizard, WizardPageComponent, WizardPageModel } from "../PageWizard";
+import { ItemDescriptor } from "../../editor/pageModel";
+export declare function usePageCreator(pageItem: ItemDescriptor | undefined, wizard: Wizard, setPageModel: Dispatch<SetStateAction<WizardPageModel>>): {
+    createComponentsRecursively: (components: WizardPageComponent[], parentComponentType: string, parentComponentId?: string, parentPath?: number[]) => Promise<void>;
+};

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

@@ -1,15 +1,12 @@
-"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)();
+import { useMemo } from "react";
+import { useEditContextRef } from "../../editor/client/editContext";
+import { useEditContext } from "../../editor/client/editContext";
+import { getComponentById } from "../../editor/componentTreeHelper";
+import { getPlaceholder } from "./schema";
+import { normalizeGuid } from "../../editor/utils";
+export function usePageCreator(pageItem, wizard, setPageModel) {
+    const editContext = useEditContext();
+    const editContextRef = useEditContextRef();
     // Function to build a map of all components from wizard schema
     const buildComponentTypeMap = () => {
         const componentMap = new Map();
@@ -46,7 +43,7 @@ function usePageCreator(pageItem, wizard, setPageModel) {
         return { componentMap, fieldIdsMap };
     };
     // Build the component type to typeId map
-    const mappings = (0, react_1.useMemo)(() => buildComponentTypeMap(), [wizard.schema]);
+    const mappings = useMemo(() => buildComponentTypeMap(), [wizard.schema]);
     const createNewComponent = async (component, parentComponentType, index, parentComponentId) => {
         if (!editContext)
             return undefined;
@@ -56,9 +53,9 @@ function usePageCreator(pageItem, wizard, setPageModel) {
         // 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);
+            getPlaceholder(wizard.schema, parentComponentType, component.type);
         const placeholderId = parentComponentId
-            ? placeholderKey + "_" + (0, utils_1.normalizeGuid)(parentComponentId)
+            ? placeholderKey + "_" + normalizeGuid(parentComponentId)
             : placeholderKey;
         if (!placeholderId) {
             console.error("Placeholder ID not found", component);
@@ -78,7 +75,7 @@ function usePageCreator(pageItem, wizard, setPageModel) {
         const maxAttempts = 40;
         while (!createdComponent && attempts < maxAttempts) {
             if (editContextRef.current?.page) {
-                createdComponent = (0, componentTreeHelper_1.getComponentById)(componentId, editContextRef.current?.page);
+                createdComponent = getComponentById(componentId, editContextRef.current?.page);
                 if (createdComponent) {
                     break;
                 }

package/dist/splash-screen/NewPage.d.ts

@@ -0,0 +1,3 @@
+export declare function NewPage({ selectedItemId }: {
+    selectedItemId?: string;
+}): import("react/jsx-runtime").JSX.Element;