@alpaca-editor/core 1.0.3902 → 1.0.3904

package/src/page-wizard/steps/ImagesStep.tsx

@@ -164,13 +164,29 @@ export const ImagesStep = (props: StepComponentProps) => {
     loadFolder();
   }, [selectedFolderId]);
 
+  function SearchButton() {
+    return (
+      <ActionButton
+        onClick={findMatchingImages}
+        isLoading={isLoading}
+        disabled={isLoading}
+        className="w-full"
+      >
+        Find Matching Images
+      </ActionButton>
+    );
+  }
+
   return (
-    <div className="flex h-full">
+    <div className="flex h-full flex-col md:flex-row">
       <WizardBox
         title="Settings"
         icon={<Settings />}
         description="Configure image search settings and find matching images"
         className="w-96"
+        collapsible="mobileOnly"
+        defaultCollapsed="mobileOnly"
+        footer={<SearchButton />}
       >
         <div className="flex h-full flex-col gap-4">
           <div className="flex-1 overflow-y-auto">
@@ -213,20 +229,9 @@ export const ImagesStep = (props: StepComponentProps) => {
               </Dialog>
             </div>
           </div>
-          <div className="flex-shrink-0">
-            <ActionButton
-              onClick={findMatchingImages}
-              isLoading={isLoading}
-              disabled={isLoading}
-              loadingText="Searching..."
-              className="w-full"
-            >
-              Find Matching Images
-            </ActionButton>
-          </div>
         </div>
       </WizardBox>
-      <WizardBoxConnector className="mt-6" />
+      <WizardBoxConnector />
       <WizardBox
         title="Images"
         icon={<Images />}
@@ -235,7 +240,7 @@ export const ImagesStep = (props: StepComponentProps) => {
         className="relative flex-1"
       >
         <div className="absolute inset-0 overflow-auto">
-          <div className="p-6">
+          <div className="p-3 md:p-6">
             {error && <div className="mb-4 text-red-500">{error}</div>}
 
             {props.data[propName]?.length > 0 && (
@@ -257,7 +262,7 @@ export const ImagesStep = (props: StepComponentProps) => {
                         }}
                         className="flex w-full items-center justify-between text-left"
                       >
-                        <h3 className="text-lg font-medium text-gray-900">
+                        <h3 className="font-medium text-gray-900 md:text-lg">
                           {image.title}
                         </h3>
                         <ChevronDown

package/src/page-wizard/steps/SelectStep.tsx

@@ -178,16 +178,16 @@ export function SelectStep({
   }
 
   return (
-    <div className="flex h-full">
+    <div className="flex h-full flex-col md:flex-row">
       <WizardBox
         title="Configuration"
         icon={<Settings />}
         description="Configure instructions and regenerate options"
-        className="w-96"
+        className="md:w-96"
       >
         <div className="flex h-full flex-col items-stretch">
           <div className="relative flex-1">
-            <div className="absolute inset-0 overflow-y-auto pr-6">
+            <div className="absolute inset-0 overflow-y-auto">
               <h3 className="text-sm font-bold">Instructions</h3>
               <InputTextarea
                 className="h-48 w-full text-sm"
@@ -210,7 +210,7 @@ export function SelectStep({
           </div>
         </div>
       </WizardBox>
-      <WizardBoxConnector className="mt-6" />
+      <WizardBoxConnector />
       <WizardBox
         title="Select Options"
         icon={<CheckSquare />}

package/src/page-wizard/steps/SetupPageStep.tsx

@@ -0,0 +1,329 @@
+import { useEffect, useState, useCallback } from "react";
+import { FullItem } from "../../editor/pageModel";
+import { WizardPageModel } from "../PageWizard";
+import { executePrompt } from "../../editor/services/aiService";
+import { createWizardAiContext } from "../service";
+import { useEditContext } from "../../editor/client/editContext";
+import { LanguageSelector } from "../../editor/menubar/LanguageSelector";
+import { InputText } from "primereact/inputtext";
+import { InputTextarea } from "primereact/inputtextarea";
+import { WizardBox } from "../WizardBox";
+import { WizardBoxConnector } from "../WizardBoxConnector";
+import { Settings, FileText } from "lucide-react";
+import { StepComponentProps } from "../../config/types";
+import Generate from "./Generate";
+import { getChildren } from "../../editor/services/contentService";
+
+export function SetupPageStep({
+  wizard,
+  parentItem,
+  pageModel,
+  setPageModel,
+  step,
+  data,
+  setStepCompleted,
+}: StepComponentProps) {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [language, setLanguage] = useState<string>(
+    parentItem?.language || "en",
+  );
+  const [previousLanguage, setPreviousLanguage] = useState<string>(language);
+  const [fullParentItem, setFullParentItem] = useState<FullItem>();
+  const [nameValidation, setNameValidation] = useState<{
+    isValid: boolean;
+    message?: string;
+  }>({ isValid: false });
+
+  const editContext = useEditContext();
+
+  const checkPageName = useCallback(async () => {
+    if (!parentItem) {
+      setNameValidation({ isValid: false, message: "No parent item" });
+      return false;
+    }
+
+    // Check if page name is valid
+    if (!pageModel.name || pageModel.name.trim().length < 3) {
+      setNameValidation({
+        isValid: false,
+        message: "Page name must be at least 3 characters long",
+      });
+      return false;
+    }
+
+    try {
+      // Check if page with same name already exists
+      const children = await getChildren(
+        parentItem.id,
+        editContext?.sessionId ?? "",
+        [],
+        false,
+        editContext?.contentEditorItem?.language || "en",
+      );
+
+      if (
+        children.find(
+          (x) =>
+            x.name.toLocaleLowerCase() ===
+            pageModel.name.trim().toLocaleLowerCase(),
+        )
+      ) {
+        setNameValidation({
+          isValid: false,
+          message: "A page with this name already exists",
+        });
+        return false;
+      }
+
+      setNameValidation({ isValid: true });
+      return true;
+    } catch (error) {
+      setNameValidation({
+        isValid: false,
+        message: "Error checking page name",
+      });
+      return false;
+    }
+  }, [
+    parentItem,
+    pageModel.name,
+    editContext?.sessionId,
+    editContext?.contentEditorItem?.language,
+  ]);
+
+  // Check page name whenever it changes
+  useEffect(() => {
+    if (pageModel.name) {
+      checkPageName();
+    }
+  }, [pageModel.name, checkPageName]);
+
+  // Mark step as completed when page name is valid
+  useEffect(() => {
+    if (nameValidation.isValid) {
+      setStepCompleted(true);
+    } else {
+      setStepCompleted(false);
+    }
+  }, [nameValidation.isValid, setStepCompleted]);
+
+  useEffect(() => {
+    if (!editContext) return;
+
+    if (editContext.mode !== "edit") {
+      editContext.setMode("edit");
+    }
+  }, [editContext]);
+
+  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 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,
+          createWizardAiContext,
+          {},
+          { signal: abortController.signal },
+          "o3-mini-low",
+          (response) => {
+            try {
+              const newLayout = JSON.parse(response.content) as WizardPageModel;
+
+              setPageModel({
+                ...pageModel,
+                name: newLayout.name,
+                metaDescription: newLayout.metaDescription,
+                metaKeywords: newLayout.metaKeywords,
+              });
+            } catch (parseError: unknown) {}
+          },
+        );
+
+        const pageModel = JSON.parse(result.content) as WizardPageModel;
+        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) generateNameAndMetaDescription();
+  }, []);
+
+  useEffect(() => {
+    const loadParentItem = async () => {
+      if (!parentItem) return;
+      const item = await editContext?.itemsRepository.getItem(parentItem);
+      setFullParentItem(item);
+    };
+    loadParentItem();
+  }, [parentItem]);
+
+  const handleInputChange = (field: keyof typeof pageModel, value: string) => {
+    const updatedPageModel = {
+      ...pageModel,
+      [field]: value,
+    };
+
+    setPageModel(updatedPageModel);
+  };
+
+  return (
+    <div className="flex h-full flex-col md:flex-row">
+      <WizardBox
+        title="Page Setup"
+        icon={<Settings />}
+        description="Configure the target location and language for your new page"
+        collapsible="mobileOnly"
+        defaultCollapsed="mobileOnly"
+        summary={
+          <div className="text-xs text-gray-500">
+            Folder: {fullParentItem?.path}, Language: {language}
+          </div>
+        }
+      >
+        <div className="flex flex-col items-stretch">
+          <div className="relative flex-1">
+            <div className="mb-4">
+              <div className="mb-1 text-sm font-medium">Target Parent Item</div>
+              <div className="mb-4 break-after-all text-xs">
+                {fullParentItem?.path}
+              </div>
+            </div>
+            <div className="relative mb-4">
+              <label
+                htmlFor="language"
+                className="mb-1 block text-sm font-medium"
+              >
+                Language
+              </label>
+              <div className="w-fit">
+                <LanguageSelector
+                  selectedLanguage={language}
+                  darkMode={true}
+                  disabled={isGenerating}
+                  onLanguageSelected={(language) =>
+                    setLanguage(language.languageCode)
+                  }
+                  showAllLanguages={true}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </WizardBox>
+      <WizardBoxConnector />
+      <WizardBox
+        title="Page Details"
+        icon={<FileText />}
+        description="Define the page name and meta information for SEO optimization"
+        className="flex-1"
+      >
+        <div className="flex h-full flex-col items-stretch">
+          <div className="relative flex-1">
+            {isGenerating ? (
+              <div className="flex h-full items-center justify-center">
+                <Generate title="Generating page details..." />
+              </div>
+            ) : (
+              <>
+                <div className="mb-4">
+                  <label
+                    htmlFor="pageName"
+                    className="mb-1 block text-sm font-medium"
+                  >
+                    Page Name
+                  </label>
+                  <InputText
+                    id="pageName"
+                    type="text"
+                    disabled={false}
+                    className={`w-full rounded border p-2 text-sm ${
+                      !nameValidation.isValid
+                        ? "border-red-500"
+                        : nameValidation.isValid && pageModel.name
+                          ? "border-green-500"
+                          : ""
+                    }`}
+                    value={pageModel.name}
+                    onChange={(e) => handleInputChange("name", e.target.value)}
+                    placeholder="Enter page name"
+                  />
+                  {nameValidation.message && !nameValidation.isValid && (
+                    <div className="mt-1 text-xs text-red-600">
+                      {nameValidation.message}
+                    </div>
+                  )}
+                  {nameValidation.isValid && pageModel.name && (
+                    <div className="mt-1 text-xs text-green-600">
+                      ✓ Page name is available
+                    </div>
+                  )}
+                </div>
+
+                <div className="mb-4">
+                  <label
+                    htmlFor="metaDescription"
+                    className="mb-1 block text-sm font-medium"
+                  >
+                    Meta Description
+                  </label>
+                  <InputTextarea
+                    id="metaDescription"
+                    className="min-h-[100px] w-full rounded border p-2 text-sm"
+                    value={pageModel.metaDescription}
+                    onChange={(e) =>
+                      handleInputChange("metaDescription", e.target.value)
+                    }
+                    placeholder="Enter meta description"
+                  />
+                </div>
+                <div className="mb-4">
+                  <label
+                    htmlFor="metaKeywords"
+                    className="mb-1 block text-sm font-medium"
+                  >
+                    Meta Keywords
+                  </label>
+                  <InputTextarea
+                    id="metaKeywords"
+                    className="min-h-[100px] w-full rounded border p-2 text-sm"
+                    value={pageModel.metaKeywords}
+                    onChange={(e) =>
+                      handleInputChange("metaKeywords", e.target.value)
+                    }
+                    placeholder="Enter meta keywords"
+                  />
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </WizardBox>
+    </div>
+  );
+}

package/src/page-wizard/steps/usePageCreator.ts

@@ -78,7 +78,7 @@ export function usePageCreator(
 
     // 1. Add the component to the placeholder
     console.log(
-      `Adding component ${component.type} (typeId: ${typeId}) to placeholder ${parentComponentId} at index ${index}`,
+      `! Adding component ${component.type} (typeId: ${typeId}) to placeholder ${parentComponentId} at index ${index}`,
     );
 
     const placeholderKey =
@@ -112,7 +112,7 @@ export function usePageCreator(
 
     // Wait for the component to be created
     const componentId = addComponentOp.componentId;
-    console.log("Waiting for component to be created", componentId);
+    console.log("! Waiting for component to be created", componentId);
 
     let createdComponent;
     let attempts = 0;
@@ -131,7 +131,7 @@ export function usePageCreator(
       if (createdComponent) break;
 
       await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 100ms between attempts
-      console.log("Waiting for component to be created", componentId);
+      console.log("! Waiting for component to be created", componentId);
       attempts++;
     }
 
@@ -147,7 +147,7 @@ export function usePageCreator(
       id: addComponentOp.componentId,
     };
 
-    console.log("Component created:", componentDescriptor);
+    console.log("! Component created:", componentDescriptor);
 
     return componentDescriptor;
   };

package/src/page-wizard/usePageWizard.ts

@@ -1,5 +1,5 @@
-import { useMemo, useState } from "react";
-import { Wizard } from "./PageWizard";
+import React, { useMemo, useState, useRef } from "react";
+import { Wizard, WizardData, WizardPageModel } from "./PageWizard";
 import { ItemDescriptor } from "../editor/pageModel";
 
 export const usePageWizard = () => {
@@ -7,8 +7,73 @@ export const usePageWizard = () => {
   const [parentItem, setParentItem] = useState<ItemDescriptor | undefined>(
     undefined,
   );
+
+  // Wizard step state that should persist across re-renders
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [data, setData] = useState<WizardData>({});
+  const [pageModel, setPageModel] = useState<WizardPageModel>({
+    components: [],
+    name: "",
+    metaDescription: "",
+    metaKeywords: "",
+  });
+  const [internalState, setInternalState] = useState<any>({});
+  const [stepCompleted, setStepCompleted] = useState(-1);
+  const [pageItem, setPageItem] = useState<ItemDescriptor>();
+  const beforeNextCallbackRef = useRef<(() => Promise<boolean>) | null>(null);
+
+  // Reset wizard step state when wizard changes
+  const setWizardWithReset = (
+    value: React.SetStateAction<Wizard | undefined>,
+  ) => {
+    const newWizard = typeof value === "function" ? value(wizard) : value;
+    if (newWizard !== wizard) {
+      setCurrentStepIndex(0);
+      setData({});
+      setPageModel({
+        components: [],
+        name: "",
+        metaDescription: "",
+        metaKeywords: "",
+      });
+      setInternalState({});
+      setStepCompleted(-1);
+      setPageItem(undefined);
+      beforeNextCallbackRef.current = null;
+    }
+    setWizard(newWizard);
+  };
+
   return useMemo(
-    () => ({ wizard, setWizard, parentItem, setParentItem }),
-    [wizard, setWizard, parentItem, setParentItem],
+    () => ({
+      wizard,
+      setWizard: setWizardWithReset,
+      parentItem,
+      setParentItem,
+      // Wizard step state
+      currentStepIndex,
+      setCurrentStepIndex,
+      data,
+      setData,
+      pageModel,
+      setPageModel,
+      internalState,
+      setInternalState,
+      stepCompleted,
+      setStepCompleted,
+      pageItem,
+      setPageItem,
+      beforeNextCallbackRef,
+    }),
+    [
+      wizard,
+      parentItem,
+      currentStepIndex,
+      data,
+      pageModel,
+      internalState,
+      stepCompleted,
+      pageItem,
+    ],
   );
 };

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3902";
-export const buildDate = "2025-05-27 01:50:51";
+export const version = "1.0.3904";
+export const buildDate = "2025-05-27 21:08:17";

package/src/splash-screen/NewPage.tsx

@@ -152,6 +152,7 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
           title="Pick Location"
           description="Select where to create your new page"
           noPadding
+          className="h-full"
         >
           <div className="relative h-full">
             <div className="absolute inset-0 overflow-auto">
@@ -168,15 +169,11 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
       </div>
 
       {/* Card Connector - only visible when location is selected */}
-      {selectedItem && (
-        <div className="hidden items-start justify-center pt-10 md:flex">
-          <CardConnector />
-        </div>
-      )}
+      {selectedItem && <CardConnector />}
 
       {/* Second card - only visible when location is selected */}
       {selectedItem && (
-        <div className="flex-1">
+        <div className="flex flex-1 flex-col">
           <Card
             icon={<i className="pi pi-palette text-sm"></i>}
             title="Choose Template or Wizard"
@@ -194,7 +191,7 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
                     className={classNames(
                       "mb-2 flex cursor-pointer flex-col items-center rounded 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"
+                        ? "tour-selected-template bg-gray-200 outline-2 outline-offset-2 outline-gray-200"
                         : "bg-gray-100",
                     )}
                   >
@@ -219,12 +216,20 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
                     />
                   </div>
                 )}
-              {selectedTemplate &&
-                insertOptions?.find((x) => x.id === selectedTemplate) && (
-                  <div className="mt-6 border-t pt-4">
-                    <div className="mb-3 text-base font-bold text-neutral-800">
-                      Name Your Page
-                    </div>
+            </div>
+          </Card>
+
+          {/* Name Your Page card - only visible when template is selected */}
+          {selectedTemplate &&
+            insertOptions?.find((x) => x.id === selectedTemplate) && (
+              <>
+                <CardConnector direction="vertical" />
+                <Card
+                  icon={<i className="pi pi-file-edit text-sm"></i>}
+                  title="Name Your Page"
+                  description="Enter a name for your new page"
+                >
+                  <div>
                     <InputText
                       className="w-full"
                       value={name}
@@ -234,6 +239,7 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
                         if (ev.key === "Enter" && isValid) handleOk();
                       }}
                       data-testid="new-page-name"
+                      placeholder="Enter page name..."
                     />
                     {validationMessage && (
                       <div className="mt-2 text-red-500">
@@ -249,9 +255,9 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
                       />
                     </div>
                   </div>
-                )}
-            </div>
-          </Card>
+                </Card>
+              </>
+            )}
         </div>
       )}
     </div>

package/src/splash-screen/SplashScreen.tsx

@@ -84,6 +84,7 @@ export function SplashScreen() {
               title="Browse Content"
               description="Navigate through your content structure"
               noPadding
+              className="h-full"
             >
               <div className="relative h-full">
                 <ScrollingContentTree
@@ -104,6 +105,7 @@ export function SplashScreen() {
               title="Recent Pages"
               description="Quick access to your recently viewed pages"
               noPadding
+              className="h-full"
             >
               <div className="relative h-full">
                 <ul className="absolute inset-0 overflow-auto p-6 pt-0">
@@ -144,7 +146,7 @@ export function SplashScreen() {
 
   return (
     <div className="flex h-full items-center justify-center bg-gray-100">
-      <div className="relative h-full w-full space-y-8 rounded-lg bg-white p-4 shadow-lg md:h-3/4 md:w-2/3 md:p-8">
+      <div className="relative h-full w-full space-y-8 rounded-lg p-4 shadow-lg md:h-3/4 md:w-2/3 md:p-8">
         <div className="flex h-full flex-col">
           <div className="flex flex-1 flex-col">
             <SimpleTabs

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

@@ -1,12 +0,0 @@
-import { FullItem, ItemDescriptor } from "../../editor/pageModel";
-import { Wizard, WizardData, WizardPageModel, WizardStep } from "../PageWizard";
-export declare function CreatePage({ wizard, parentItem, setPageItem, pageItem, pageModel, setPageModel, step, data, }: {
-    wizard: Wizard;
-    parentItem: ItemDescriptor;
-    setPageItem: (item: FullItem) => void;
-    pageItem?: FullItem;
-    pageModel: WizardPageModel;
-    setPageModel: (model: WizardPageModel) => void;
-    step: WizardStep;
-    data: WizardData;
-}): import("react/jsx-runtime").JSX.Element;