@alpaca-editor/core 1.0.3914 → 1.0.3916

package/src/config/config.tsx

@@ -129,6 +129,7 @@ const defaultRichTextEditorProfile: RichTextEditorProfile = {
 
 export const contentItemId = "0DE95AE4-41AB-4D01-9EB0-67441B7C2450";
 export const templatesRootItemId = "3c1715fe-6a13-4fcf-845f-de308ba9741d";
+export const rootItemId = "11111111-1111-1111-1111-111111111111";
 
 const openTargetActionButton: ClientFieldButton = {
   label: "Open target item",

package/src/config/types.ts

@@ -16,7 +16,11 @@ import {
   LocalizeItemCommand,
 } from "../editor/commands/itemCommands";
 import { User } from "../types";
-import { WizardData, WizardPageModel } from "../page-wizard/PageWizard";
+import {
+  WizardData,
+  WizardPageModel,
+  WizardStep,
+} from "../page-wizard/PageWizard";
 import { Wizard } from "../page-wizard/PageWizard";
 
 export type RichTextEditorProfile = {
@@ -266,7 +270,7 @@ export type TranslationStatus = {
 };
 
 export interface StepComponentProps {
-  step: any;
+  step: WizardStep;
 
   data: WizardData;
   setData: React.Dispatch<React.SetStateAction<WizardData>>;

package/src/editor/Titlebar.tsx

@@ -46,8 +46,11 @@ export function Titlebar() {
     <div className="z-1 flex min-h-11 items-center justify-between gap-1 bg-gradient-to-r from-gray-900 from-10% to-indigo-950">
       <div className="relative flex items-center justify-center gap-2 pl-2 font-bold text-white">
         <a
-          href="/sitecore/shell/sitecore/client/Applications/Launchpad"
-          className="glow-text flex items-center"
+          //href="/sitecore/shell/sitecore/client/Applications/Launchpad"
+          onClick={() => {
+            editContext.switchView("splash-screen");
+          }}
+          className="glow-text flex cursor-pointer items-center"
         >
           <Logo className="h-6 w-6" />
           <span className="ml-2 font-mono">{title}</span>

package/src/editor/client/EditorClient.tsx

@@ -402,7 +402,9 @@ export function EditorClient({
     if (socket.readyState !== WebSocket.OPEN) {
       const url = "/alpaca/editor/client";
       await post(url, clientInfoMessage);
-    } else socket.send(JSON.stringify(clientInfoMessage));
+    } else {
+      socket.send(JSON.stringify(clientInfoMessage));
+    }
   };
 
   const startTour = () => {
@@ -740,9 +742,9 @@ export function EditorClient({
         ? parseInt(searchParams.get("version")!)
         : 0);
 
-    if (itemid && viewName === "splash-screen") {
-      setViewName("page-editor");
-    }
+    // if (itemid && viewName === "splash-screen") {
+    //   setViewName("page-editor");
+    // }
 
     if (!itemId || !language) return;
 
@@ -788,7 +790,7 @@ export function EditorClient({
 
   useEffect(() => {
     sendClientInfo();
-  }, [currentItemRef.current]);
+  }, [currentItemDescriptor]);
 
   const loadComments = useCallback(async () => {
     if (!currentItemDescriptor) return;
@@ -2043,7 +2045,6 @@ export function EditorClient({
     timings,
     startTour,
     viewName,
-    setViewName,
     compareMode,
     setCompareMode,
     addSocketMessageListener,

package/src/editor/ui/CopyMoveTargetSelectorDialog.tsx

@@ -1,6 +1,6 @@
 import { Button } from "primereact/button";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import { FullItem, ItemDescriptor } from "../pageModel";
 import { Dialog } from "primereact/dialog";
@@ -8,6 +8,7 @@ import DialogButtons from "./DialogButtons";
 import { DialogProps } from "../client/editContext";
 import { ScrollingContentTree } from "../ScrollingContentTree";
 import { EditContextType } from "../client/editContext";
+import { rootItemId } from "../../config/config";
 
 export type CopyMoveTargetSelectorDialogProps = {
   items: FullItem[];
@@ -46,6 +47,7 @@ export function CopyMoveTargetSelectorDialog(
           <ScrollingContentTree
             selectedItemId={selectedItem?.id}
             expandedItemId={props.items[0]?.id}
+            rootItemId={rootItemId}
             onSelectionChange={(node) => {
               if (!props.items[0]) return;
               if (!node[0]) setSelectedItem(null);

package/src/page-wizard/PageWizard.tsx

@@ -50,7 +50,9 @@ export type WizardStep = {
   id: string;
   name: string;
   description: string;
-  [property: string]: string;
+  type: string;
+  fields: { [key: string]: string };
+  children?: WizardStep[];
 };
 
 export type WizardData = {

package/src/page-wizard/WizardSteps.tsx

@@ -356,7 +356,7 @@ export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
     if (StepComponent) {
       return (
         <StepComponent
-          step={wizard.steps[currentStepIndex]}
+          step={step}
           data={data}
           setData={setData}
           setPageModel={setPageModel}

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

@@ -1,13 +1,13 @@
 import { InputText } from "primereact/inputtext";
 import { useEffect, useRef, useState } from "react";
 import { WizardData } from "../PageWizard";
-import { Splitter, SplitterPanel } from "../../editor/ui/Splitter";
-import MDEditor from "@uiw/react-md-editor";
+
 import { StepComponentProps } from "../../config/types";
 import { ActionButton } from "../../components/ActionButton";
 import { UploadIcon, DocumentIcon } from "../../editor/ui/Icons";
 import { Spinner } from "../../editor/ui/Spinner";
 import { Card } from "../../components/ui/card";
+import { Button } from "../../components/ui/button";
 import { LinkIcon } from "lucide-react";
 import { InputTextarea } from "primereact/inputtextarea";
 
@@ -25,22 +25,24 @@ export function CollectStep({
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // Extract configuration from step
-  const enableUpload = step?.enableUpload === "1";
-  const enableScrape = step?.enableScrape === "1";
-  const enableText = step?.enableText === "1";
+  const enableUpload = step?.fields.enableUpload === "1";
+  const enableScrape = step?.fields.enableScrape === "1";
+  const enableText = step?.fields.enableText === "1";
 
-  const uploadTitle = step?.uploadTitle || "Upload a file (optional)";
+  const uploadTitle = step?.fields.uploadTitle || "Upload a file (optional)";
   const uploadDescription =
-    step?.uploadDescription || "Upload a file to the page";
+    step?.fields.uploadDescription || "Upload a file to the page";
 
-  const scrapeTitle = step?.scrapeTitle || "Scrape page from URL (optional)";
+  const scrapeTitle =
+    step?.fields.scrapeTitle || "Scrape page from URL (optional)";
   const scrapeDescription =
-    step?.scrapeDescription ||
+    step?.fields.scrapeDescription ||
     "Only scrape websites you have permission to access. You are responsible for complying with the website's terms of service and all applicable laws.";
 
-  const textTitle = step?.textTitle || "Text";
+  const textTitle = step?.fields.textTitle || "Text";
   const textDescription =
-    step?.textDescription || "Provide the text you want to use for the page";
+    step?.fields.textDescription ||
+    "Provide the text you want to use for the page";
 
   const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
@@ -256,7 +258,7 @@ export function CollectStep({
           className={`${!enableUpload && !enableScrape ? "md:col-span-2" : enableUpload && enableScrape ? "md:col-span-2" : ""}`}
         >
           <InputTextarea
-            className="max-h-full w-full"
+            className="border-theme-secondary max-h-full w-full text-sm"
             value={data.htmlContent}
             rows={20}
             onChange={(e) =>
@@ -266,6 +268,29 @@ export function CollectStep({
               }))
             }
           />
+          {step.children && step.children.length > 0 && (
+            <div>
+              <div className="mt-2 mb-1 text-sm font-semibold">
+                Use example prompts:
+              </div>
+              <div className="flex gap-2">
+                {step.children.map((child) => (
+                  <Button
+                    variant="outline"
+                    key={child.id}
+                    onClick={() => {
+                      setData((prev: WizardData) => ({
+                        ...prev,
+                        htmlContent: child.fields.text,
+                      }));
+                    }}
+                  >
+                    {child.fields.title}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
         </Card>
       )}
     </div>

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

@@ -216,9 +216,9 @@ export function ComponentTypeSelector({
 
         // Parse preselected components from step if available
         let stepPreselectedTypes: string[] = [];
-        if (step["preselectedComponents"]) {
+        if (step.fields["preselectedComponents"]) {
           // Split by comma or newline and trim whitespace
-          stepPreselectedTypes = step["preselectedComponents"]
+          stepPreselectedTypes = step.fields["preselectedComponents"]
             .split(/[,\n\r]+/)
             .map((type: string) => type.trim())
             .filter((type: string) => type && uniqueTypes.includes(type)); // Only include valid types

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

@@ -191,7 +191,7 @@ export function ContentStep({
     if (!internalState.layoutInstructions) {
       setInternalState({
         ...internalState,
-        layoutInstructions: step.instructions,
+        layoutInstructions: step.fields.instructions,
       });
     }
 
@@ -242,8 +242,8 @@ export function ContentStep({
         ) {
           // Parse preselected components from step if available
           let stepPreselectedTypes: string[] = [];
-          if (step["preselectedComponents"]) {
-            stepPreselectedTypes = step["preselectedComponents"]
+          if (step.fields["preselectedComponents"]) {
+            stepPreselectedTypes = step.fields["preselectedComponents"]
               .split(/[,\n\r]+/)
               .map((type: string) => type.trim())
               .filter((type: string) => type && uniqueTypes.includes(type));
@@ -289,7 +289,7 @@ export function ContentStep({
 
     const generatePageName = async () => {
       const metaInstructions =
-        step["Instructions for generating item name and meta fields"];
+        step.fields["Instructions for generating item name and meta fields"];
 
       setIsGenerating(true);
 
@@ -519,7 +519,7 @@ export function ContentStep({
         createWizardAiContext,
         { allowedFunctions: [] },
         { signal: localAbortController.signal },
-        step.aiModel || "gpt-4.1",
+        step.fields.aiModel || "gpt-4.1",
         (response) => {
           try {
             const newLayout = JSON.parse(response.content) as WizardPageModel;

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

@@ -74,7 +74,7 @@ export const ImagesStep = (props: StepComponentProps) => {
 
   const editContext = useEditContext();
 
-  const propName = props.step.propertyName || "images";
+  const propName = props.step.fields.propertyName || "images";
 
   const [showFolderDialog, setShowFolderDialog] = useState<boolean>(false);
   const [collapsedSections, setCollapsedSections] = useState<Set<number>>(
@@ -106,7 +106,7 @@ export const ImagesStep = (props: StepComponentProps) => {
                      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.                 
                      Response JSON format: { images: Image[] } type Image = { title: string,  keywords: string[] }
                      Input data: ${JSON.stringify(props.data)}
-                     Instructions: ${props.step.instructions}`,
+                     Instructions: ${props.step.fields.instructions}`,
 
             name: "system",
             role: "system",

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

@@ -44,7 +44,7 @@ export function LayoutStep({
   }, [data.pageModel, isLoading]);
 
   useEffect(() => {
-    setCustomInstructions(step.instructions);
+    setCustomInstructions(step.fields.instructions);
   }, []);
 
   const createLayout = async () => {
@@ -133,10 +133,10 @@ export function LayoutStep({
     if (!selectedComponentTypes.length) return;
 
     // Only set custom instructions if they're not already set or if step.instructions has changed
-    if (customInstructions !== step.instructions) {
-      setCustomInstructions(step.instructions);
+    if (customInstructions !== step.fields.instructions) {
+      setCustomInstructions(step.fields.instructions);
     }
-  }, [step.instructions, selectedComponentTypes]);
+  }, [step.fields.instructions, selectedComponentTypes]);
 
   // Custom instructions panel
   const customInstructionsPanel = () => {

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

@@ -50,7 +50,7 @@ export function MetaDataStep({
 
     const generateMetaFields = async () => {
       const metaInstructions =
-        step["Instructions for generating item name and meta fields"];
+        step.fields["Instructions for generating item name and meta fields"];
 
       setIsGenerating(true);
 

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

@@ -35,10 +35,10 @@ export function SelectStep({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
-  const [instructions, setInstructions] = useState(step.instructions);
+  const [instructions, setInstructions] = useState(step.fields.instructions);
 
   // Get the property name from the step or use "choice" as default
-  const propertyName = step.propertyName || "selectedOptions";
+  const propertyName = step.fields.propertyName || "selectedOptions";
 
   useEffect(() => {
     if (data[propertyName]?.length) {
@@ -64,7 +64,7 @@ export function SelectStep({
 
     try {
       // Create a prompt based on step instructions and data
-      const prompt = `${instructions}\n\nCurrent data: ${JSON.stringify(
+      const prompt = `${step.fields.systemInstructions}\n${instructions}\n\nCurrent data: ${JSON.stringify(
         data,
         null,
         2,
@@ -91,7 +91,7 @@ export function SelectStep({
         createWizardAiContext,
         { allowedFunctions: [] },
         undefined,
-        step.aiModel || "gpt-4.1",
+        step.fields.aiModel || "gpt-4.1",
       );
 
       // Parse the result and set options
@@ -131,7 +131,7 @@ export function SelectStep({
       return;
     }
     generateOptions();
-  }, [step.instructions, internalState]);
+  }, [step.fields.instructions, internalState]);
 
   // Sync data[propertyName] with selectedOptions state
   useEffect(() => {
@@ -180,9 +180,12 @@ export function SelectStep({
   return (
     <div className="flex h-full flex-col md:flex-row">
       <WizardBox
-        title="Configuration"
+        title={step.fields.configureTitle || "Configuration"}
         icon={<Settings />}
-        description="Configure instructions and regenerate options"
+        description={
+          step.fields.configureDescription ||
+          "Configure instructions and regenerate options"
+        }
         className="md:w-96"
       >
         <div className="flex h-full flex-col items-stretch">
@@ -193,7 +196,7 @@ export function SelectStep({
                 className="h-48 w-full text-sm"
                 value={instructions}
                 onChange={(e) => setInstructions(e.target.value)}
-                placeholder="Enter instructions for the options"
+                placeholder="Enter instructions for generating the options"
               />
             </div>
           </div>
@@ -212,15 +215,22 @@ export function SelectStep({
       </WizardBox>
       <WizardBoxConnector />
       <WizardBox
-        title="Select Options"
+        title={step.fields.selectOptionsTitle || "Select Options"}
         icon={<CheckSquare />}
-        description="Choose from the generated options below"
+        description={
+          step.fields.selectOptionsDescription ||
+          "Choose from the generated options below"
+        }
         className="flex-1"
       >
         <div className="h-full">
           {loading && (
             <div className="flex h-full items-center justify-center">
-              <Generate title="Generating options..." />
+              <Generate
+                title={
+                  step.fields.generatingOptionsText || "Generating options..."
+                }
+              />
             </div>
           )}
           {!loading && (

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3914";
-export const buildDate = "2025-06-02 01:46:23";
+export const version = "1.0.3916";
+export const buildDate = "2025-06-02 14:37:59";

package/src/splash-screen/SplashScreen.tsx

@@ -134,6 +134,25 @@ export function SplashScreen() {
                 <ActionButton onClick={() => editContext?.startTour()}>
                   Take tour <MagicEditIcon />
                 </ActionButton>
+                <ActionButton
+                  onClick={() => {
+                    window.open(
+                      "/sitecore/shell/sitecore/client/Applications/Launchpad",
+                      "_blank",
+                    );
+                  }}
+                >
+                  Open Sitecore Launchpad
+                </ActionButton>
+
+                <ActionButton
+                  className="mt-6 md:mt-18"
+                  onClick={() => {
+                    editContext?.switchView("page-editor");
+                  }}
+                >
+                  Return to editor
+                </ActionButton>
               </div>
             </div>
           </Card>