@alpaca-editor/core 1.0.3896 → 1.0.3898

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

@@ -2,7 +2,6 @@ import { StepComponentProps } from "../../config/types";
 import { useEffect, useState } from "react";
 import { ScrollingContentTree } from "../../editor/ScrollingContentTree";
 import { ItemTreeNodeData } from "../../editor/services/contentService";
-import { Splitter, SplitterPanel } from "../../editor/ui/Splitter";
 import { useEditContext } from "../../editor/client/editContext";
 import { executePrompt, executeSearch } from "../../editor/services/aiService";
 import { createWizardAiContext } from "../service";
@@ -11,6 +10,10 @@ import { classNames } from "primereact/utils";
 import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
 import { FullItem } from "../../editor/pageModel";
+import { WizardBox } from "../WizardBox";
+import { WizardBoxConnector } from "../WizardBoxConnector";
+import { Settings, Images, ChevronDown, Check } from "lucide-react";
+
 type Thumbnail = {
   id: string;
   name: string;
@@ -36,6 +39,9 @@ export const ImagesStep = (props: StepComponentProps) => {
   const propName = props.step.propertyName || "images";
 
   const [showFolderDialog, setShowFolderDialog] = useState<boolean>(false);
+  const [collapsedSections, setCollapsedSections] = useState<Set<number>>(
+    new Set(),
+  );
 
   const [selectedFolder, setSelectedFolder] = useState<FullItem>();
 
@@ -158,160 +164,174 @@ export const ImagesStep = (props: StepComponentProps) => {
     loadFolder();
   }, [selectedFolderId]);
 
-  const panels: SplitterPanel[] = [
-    {
-      name: "Settings",
-      defaultSize: 400,
-      content: (
-        <div className="flex h-full flex-col gap-2 pr-6 pb-4">
-          <div className="relative mb-2 rounded-md border border-gray-400 bg-white p-4">
-            <div className="mb-2 text-sm font-bold text-gray-800">
-              Image library folder
-            </div>
-            {selectedFolder && (
-              <div className="mb-2 text-sm text-gray-500">
-                {selectedFolder.path}
+  return (
+    <div className="flex h-full">
+      <WizardBox
+        title="Settings"
+        icon={<Settings />}
+        description="Configure image search settings and find matching images"
+        className="w-96"
+      >
+        <div className="flex h-full flex-col gap-4">
+          <div className="flex-1 overflow-y-auto">
+            <div className="relative mb-4 rounded-md border border-gray-400 bg-white p-4">
+              <div className="mb-2 text-sm font-bold text-gray-800">
+                Image library folder
               </div>
-            )}
-            <Button
-              label="Change Folder"
-              onClick={() => {
-                setShowFolderDialog(true);
-              }}
-            />
-            <Dialog
-              header="Select Folder"
-              visible={showFolderDialog}
-              onHide={() => {
-                setShowFolderDialog(false);
-              }}
-              style={{ width: "50vw", height: "50vh" }}
-            >
-              <div className="flex h-full flex-col p-1">
-                <div className="relative flex-1">
-                  <ScrollingContentTree
-                    rootItemId={mediaRootId}
-                    onSelectionChange={(selection) => {
-                      const selectedNode = selection[0] as ItemTreeNodeData;
-                      if (selectedNode) setSelectedFolderId(selectedNode.id);
-                      else setSelectedFolderId(mediaRootId);
-                      setShowFolderDialog(false);
-                    }}
-                  />
+              {selectedFolder && (
+                <div className="mb-2 text-sm text-gray-500">
+                  {selectedFolder.path}
                 </div>
-              </div>
-            </Dialog>
+              )}
+              <Button
+                label="Change Folder"
+                onClick={() => {
+                  setShowFolderDialog(true);
+                }}
+              />
+              <Dialog
+                header="Select Folder"
+                visible={showFolderDialog}
+                onHide={() => {
+                  setShowFolderDialog(false);
+                }}
+                style={{ width: "50vw", height: "50vh" }}
+              >
+                <div className="flex h-full flex-col p-1">
+                  <div className="relative flex-1">
+                    <ScrollingContentTree
+                      rootItemId={mediaRootId}
+                      onSelectionChange={(selection) => {
+                        const selectedNode = selection[0] as ItemTreeNodeData;
+                        if (selectedNode) setSelectedFolderId(selectedNode.id);
+                        else setSelectedFolderId(mediaRootId);
+                        setShowFolderDialog(false);
+                      }}
+                    />
+                  </div>
+                </div>
+              </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>
-          <ActionButton
-            onClick={findMatchingImages}
-            isLoading={isLoading}
-            disabled={isLoading}
-            loadingText="Searching..."
-          >
-            Find Matching Images
-          </ActionButton>
         </div>
-      ),
-    },
-    {
-      name: "Images",
-      defaultSize: "auto",
-      content: (
+      </WizardBox>
+      <WizardBoxConnector className="mt-6" />
+      <WizardBox
+        title="Images"
+        icon={<Images />}
+        description="Select images from the search results"
+        noPadding={true}
+        className="relative flex-1"
+      >
         <div className="absolute inset-0 overflow-auto">
-          <div className="flex flex-col gap-4 p-4 pt-0">
-            <div className="flex items-center gap-4">
-              {error && <div className="text-red-500">{error}</div>}
+          <div className="p-6">
+            {error && <div className="mb-4 text-red-500">{error}</div>}
 
-              {props.data[propName]?.length > 0 && (
-                <div className="flex flex-col gap-4">
-                  {props.data[propName]?.map((image: Image, index: number) => (
-                    <span
-                      key={index}
-                      className={classNames(
-                        "rounded border border-gray-400 bg-white p-4 text-sm",
-                        index % 2 === 0
-                          ? "animate-fadeRight"
-                          : "animate-fadeLeft",
-                      )}
-                    >
-                      <div className="mb-3 text-lg">{image.title}</div>
-                      <div className="flex flex-wrap gap-5">
-                        {image.options?.map(
-                          (option: Thumbnail, thumbnailIndex: number) => (
-                            <div
-                              key={thumbnailIndex}
-                              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: Image, imgIndex: number) =>
-                                      ({
-                                        ...img,
-                                        options:
-                                          imgIndex !== index
-                                            ? img.options
-                                            : img.options?.map(
-                                                (
-                                                  option,
-                                                  optionIndex: number,
-                                                ) =>
-                                                  optionIndex === thumbnailIndex
-                                                    ? {
-                                                        ...option,
-                                                        selected:
-                                                          !option.selected,
-                                                      }
-                                                    : option,
-                                              ),
-                                      }) as Image,
-                                  ),
-                                }));
-                              }}
-                            >
-                              <img
-                                key={thumbnailIndex}
-                                src={option.thumbUrl}
-                                alt={option.name}
-                              />
+            {props.data[propName]?.length > 0 && (
+              <div className="space-y-6">
+                {props.data[propName]?.map((image: Image, index: number) => {
+                  const isCollapsed = collapsedSections.has(index);
+
+                  return (
+                    <div key={index} className="space-y-4">
+                      <button
+                        onClick={() => {
+                          const newCollapsed = new Set(collapsedSections);
+                          if (isCollapsed) {
+                            newCollapsed.delete(index);
+                          } else {
+                            newCollapsed.add(index);
+                          }
+                          setCollapsedSections(newCollapsed);
+                        }}
+                        className="flex w-full items-center justify-between text-left"
+                      >
+                        <h3 className="text-lg font-medium text-gray-900">
+                          {image.title}
+                        </h3>
+                        <ChevronDown
+                          className={classNames(
+                            "h-5 w-5 text-gray-500 transition-transform",
+                            isCollapsed ? "-rotate-90" : "rotate-0",
+                          )}
+                        />
+                      </button>
+
+                      {!isCollapsed && (
+                        <div className="grid grid-cols-6 gap-4">
+                          {image.options?.map(
+                            (option: Thumbnail, thumbnailIndex: number) => (
                               <div
+                                key={thumbnailIndex}
                                 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",
+                                  "relative aspect-square cursor-pointer overflow-hidden rounded-lg border-2 transition-all",
                                   option.selected
-                                    ? "text-canvas-pink border-canvas-pink bg-white"
-                                    : "",
+                                    ? "border-purple-500 ring-2 ring-purple-200"
+                                    : "border-gray-200 hover:border-gray-300",
                                 )}
+                                onClick={() => {
+                                  props.setData((prevData) => ({
+                                    ...prevData,
+                                    [propName]: prevData[propName].map(
+                                      (img: Image, imgIndex: number) =>
+                                        ({
+                                          ...img,
+                                          options:
+                                            imgIndex !== index
+                                              ? img.options
+                                              : img.options?.map(
+                                                  (
+                                                    option,
+                                                    optionIndex: number,
+                                                  ) =>
+                                                    optionIndex ===
+                                                    thumbnailIndex
+                                                      ? {
+                                                          ...option,
+                                                          selected:
+                                                            !option.selected,
+                                                        }
+                                                      : option,
+                                                ),
+                                        }) as Image,
+                                    ),
+                                  }));
+                                }}
                               >
+                                <img
+                                  src={option.thumbUrl}
+                                  alt={option.name}
+                                  className="h-full w-full object-cover"
+                                />
                                 {option.selected && (
-                                  <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"
-                                  >
-                                    <path d="M20 6 9 17l-5-5"></path>
-                                  </svg>
+                                  <div className="absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full bg-purple-500 text-white">
+                                    <Check className="h-4 w-4" />
+                                  </div>
                                 )}
                               </div>
-                            </div>
-                          ),
-                        )}
-                      </div>
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
+                            ),
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
           </div>
         </div>
-      ),
-    },
-  ];
-
-  return <Splitter panels={panels} />;
+      </WizardBox>
+    </div>
+  );
 };

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

@@ -4,11 +4,14 @@ import { useEditContext } from "../../editor/client/editContext";
 import { executePrompt } from "../../editor/services/aiService";
 import { createWizardAiContext } from "../service";
 import { classNames } from "primereact/utils";
-import { Splitter, SplitterPanel } from "../../editor/ui/Splitter";
 import { InputTextarea } from "primereact/inputtextarea";
 import { StepComponentProps } from "../../config/types";
 import { ActionButton } from "../../components/ActionButton";
 import Generate from "./Generate";
+import { WizardBox } from "../WizardBox";
+import { WizardBoxConnector } from "../WizardBoxConnector";
+import { Settings, CheckSquare } from "lucide-react";
+
 type Option = {
   title: string;
   description: string;
@@ -174,82 +177,95 @@ export function SelectStep({
     );
   }
 
-  const optionsPanel: SplitterPanel = {
-    name: "options",
-    defaultSize: "auto",
-    content: (
-      <div className="h-full p-4">
-        {loading && (
-          <div className="flex h-full items-center justify-center">
-            <Generate title="Generating options..." />
+  return (
+    <div className="flex h-full">
+      <WizardBox
+        title="Configuration"
+        icon={<Settings />}
+        description="Configure instructions and regenerate options"
+        className="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">
+              <h3 className="text-sm font-bold">Instructions</h3>
+              <InputTextarea
+                className="h-48 w-full text-sm"
+                value={instructions}
+                onChange={(e) => setInstructions(e.target.value)}
+                placeholder="Enter instructions for the options"
+              />
+            </div>
           </div>
-        )}
-        {!loading && (
-          <div>
-            {options.length === 0 ? (
-              <div className="p-4 text-gray-500">
-                No options available. Try refreshing the page.
-              </div>
-            ) : (
-              options.map((option, index) => {
-                const isSelected = selectedOptions.includes(option.id);
-
-                return (
-                  <div
-                    key={option.id}
-                    className={classNames(
-                      "mb-3 flex items-center rounded border-2 bg-white p-3",
-                      index % 2 === 0
-                        ? "animate-fadeRight"
-                        : "animate-fadeLeft",
-                      isSelected
-                        ? "text-canvas-pink border-canvas-pink"
-                        : "border-gray-300 text-gray-600",
-                    )}
-                    onClick={() => handleOptionSelect(option)}
-                  >
-                    <div className="flex flex-1 cursor-pointer flex-col">
-                      <div className="font-medium">{option.title}</div>
-                      <div className="text-xs text-gray-600">
-                        {option.description}
-                      </div>
-                    </div>
-                    {isSelected && (
-                      <div className="text-canvas-pink ml-2">✓</div>
-                    )}
-                  </div>
-                );
-              })
-            )}
+          <div className="py-2">
+            <ActionButton
+              onClick={generateOptions}
+              isLoading={loading}
+              disabled={loading}
+              loadingText="Thinking..."
+              className="w-full"
+            >
+              Regenerate Options
+            </ActionButton>
           </div>
-        )}
-      </div>
-    ),
-  };
+        </div>
+      </WizardBox>
+      <WizardBoxConnector className="mt-6" />
+      <WizardBox
+        title="Select Options"
+        icon={<CheckSquare />}
+        description="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..." />
+            </div>
+          )}
+          {!loading && (
+            <div>
+              {options.length === 0 ? (
+                <div className="p-4 text-gray-500">
+                  No options available. Try refreshing the page.
+                </div>
+              ) : (
+                options.map((option, index) => {
+                  const isSelected = selectedOptions.includes(option.id);
 
-  const settingsPanel: SplitterPanel = {
-    name: "settings",
-    defaultSize: 400,
-    content: (
-      <div className="flex flex-col gap-2 pr-6">
-        <h3 className="text-sm font-bold">Instructions</h3>
-        <InputTextarea
-          className="h-48 text-sm"
-          value={instructions}
-          onChange={(e) => setInstructions(e.target.value)}
-          placeholder="Enter instructions for the options"
-        />
-        <ActionButton
-          onClick={generateOptions}
-          isLoading={loading}
-          disabled={loading}
-          loadingText="Thinking..."
-        >
-          Regenerate Options
-        </ActionButton>
-      </div>
-    ),
-  };
-
-  return <Splitter panels={[settingsPanel, optionsPanel]} />;
+                  return (
+                    <div
+                      key={option.id}
+                      className={classNames(
+                        "mb-3 flex items-center rounded border-2 bg-white p-3",
+                        index % 2 === 0
+                          ? "animate-fadeRight"
+                          : "animate-fadeLeft",
+                        isSelected
+                          ? "text-theme-secondary border-theme-secondary"
+                          : "border-gray-300 text-gray-600",
+                      )}
+                      onClick={() => handleOptionSelect(option)}
+                    >
+                      <div className="flex flex-1 cursor-pointer flex-col">
+                        <div className="font-medium">{option.title}</div>
+                        <div className="text-xs text-gray-600">
+                          {option.description}
+                        </div>
+                      </div>
+                      {isSelected && (
+                        <div className="bg-theme-secondary ml-2 flex h-6 w-6 items-center justify-center rounded-full text-white">
+                          ✓
+                        </div>
+                      )}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          )}
+        </div>
+      </WizardBox>
+    </div>
+  );
 }

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

@@ -10,8 +10,9 @@ 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";
+import { getItemDescriptor, normalizeGuid } from "../../editor/utils";
 import { ItemDescriptor } from "../../editor/pageModel";
+import { generateImage } from "../../editor/services/aiService";
 
 export function usePageCreator(
   pageItem: ItemDescriptor | undefined,
@@ -169,8 +170,6 @@ export function usePageCreator(
 
     const { fieldIdsMap, componentMap } = mappings;
 
-    console.log("Creating components recursively", components);
-
     // Process each component in the array
     for (let i = 0; i < components.length; i++) {
       //console.log("Processing component", i);
@@ -238,18 +237,45 @@ export function usePageCreator(
           let value = field.value as any;
 
           if (field.type === "Picture") {
-            value = {
-              Variants: [{ Name: "Landscape", MediaId: field.value }],
-            };
-            rawValue = JSON.stringify(value);
-          }
+            console.log("#### Editing picture field", field);
+            if (rawValue.startsWith("generate:")) {
+              rawValue = rawValue.slice(9);
+              const image = await generateImage({
+                ...fieldDescriptor,
+                prompt: rawValue,
+                sessionId: editContext.sessionId,
+                pageItem: getItemDescriptor(pageItem),
+              });
+            } else {
+              if (rawValue.startsWith("id:")) {
+                rawValue = rawValue.slice(3);
+                const imageId = rawValue.split(":")[1];
+                if (imageId) {
+                  value = {
+                    Variants: [{ Name: "Landscape", MediaId: imageId }],
+                  };
+                }
+                await editContext.operations.editField({
+                  field: fieldDescriptor,
+                  value: value,
+                  rawValue: value,
+                  refresh: "none",
+                });
+              }
+            }
 
-          await editContext.operations.editField({
-            field: fieldDescriptor,
-            value: value,
-            rawValue: rawValue,
-            refresh: "none",
-          });
+            // value = {
+            //   Variants: [{ Name: "Landscape", MediaId: field.value }],
+            // };
+            // rawValue = JSON.stringify(value);
+          } else {
+            await editContext.operations.editField({
+              field: fieldDescriptor,
+              value: value,
+              rawValue: rawValue,
+              refresh: "none",
+            });
+          }
 
           setPageModel((prev) => {
             const component = findComponent(prev.components, componentPath);

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3896";
-export const buildDate = "2025-05-23 09:37:52";
+export const version = "1.0.3898";
+export const buildDate = "2025-05-25 15:23:00";