@alpaca-editor/core 1.0.3907 → 1.0.3911

package/src/editor/client/EditorClient.tsx

@@ -832,7 +832,10 @@ export function EditorClient({
   const page = pageViewContext.page;
 
   useEffect(() => {
-    const isLoading = !page || (page?.editRevision ?? "") != (revision ?? "");
+    const isLoading =
+      !!contentEditorItem &&
+      contentEditorItem.hasLayout &&
+      (!page || (page?.editRevision ?? "") != (revision ?? ""));
     setIsRefreshing(isLoading && viewName === "page-editor");
     if (!isLoading) setInserting(undefined);
   }, [page, viewName, revision]);
@@ -1433,7 +1436,7 @@ export function EditorClient({
 
   const loadWorkboxDebounced = useDebouncedCallback(
     (items: ItemDescriptor[]) => loadWorkbox(items),
-    3000,
+    5000,
   );
 
   useEffect(() => {

package/src/editor/menubar/ActionsMenu.tsx

@@ -31,6 +31,7 @@ export function ActionsMenu({ isMobile }: { isMobile: boolean }) {
   }));
 
   if (isMobile) {
+    console.log("isMobile", itemGroups);
     return (
       <div className="text-sm text-gray-200">
         {itemGroups.map((group, groupIndex) => (

package/src/editor/menubar/SecondaryControls.tsx

@@ -3,7 +3,7 @@ import { ItemLanguageVersion } from "./ItemLanguageVersion";
 import { ActiveUsers } from "./ActiveUsers";
 import { ActionsMenu } from "./ActionsMenu";
 import { Separator } from "../menubar/Separator";
-import { ArrowRightIcon } from "../ui/Icons";
+
 export function SecondaryControls() {
   const editContext = useEditContext();
 

package/src/editor/ui/Icons.tsx

@@ -686,3 +686,23 @@ export function Logo({ className }: { className?: string }) {
     </svg>
   );
 }
+export function MagicEditIcon() {
+  return (
+    <svg
+      width="21"
+      height="17"
+      viewBox="0 0 21 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.4141 5.70117C20.7921 5.32317 21.0001 4.82117 21.0001 4.28717C21.0001 3.75317 20.7921 3.25117 20.4141 2.87317L18.8281 1.28717C18.4501 0.909172 17.9481 0.701172 17.4141 0.701172C16.8801 0.701172 16.3781 0.909172 16.0011 1.28617L5.36914 11.8852V16.3002H9.78214L20.4141 5.70117ZM7.36914 14.3002V12.7152L14.4091 5.69717L15.9951 7.28317L8.95614 14.3002H7.36914Z"
+        fill="white"
+      />
+      <path
+        d="M0.376146 4.6906C0.63534 4.62716 0.873518 4.56373 1.1117 4.50029C1.39891 4.42276 1.69313 4.35932 1.97334 4.26064C3.05916 3.85183 3.74567 3.0765 4.03989 1.9558C4.14497 1.54699 4.25005 1.13818 4.35513 0.736414C4.35513 0.722317 4.35513 0.715269 4.37615 0.701172C4.39716 0.771656 4.41117 0.842141 4.43219 0.912625C4.54427 1.34258 4.63534 1.77254 4.77545 2.19544C5.15373 3.3232 5.93131 4.04919 7.07317 4.36637C7.47947 4.47915 7.89278 4.57782 8.29909 4.6906C8.3201 4.6906 8.33411 4.69765 8.36914 4.71174C8.21502 4.75403 8.07492 4.78928 7.92781 4.82452C7.54953 4.93025 7.16424 5.00778 6.79296 5.13465C5.71415 5.52232 5.02063 6.2906 4.7124 7.40426C4.59331 7.83421 4.48823 8.26417 4.36214 8.70117C4.36214 8.68003 4.34813 8.65888 4.34112 8.63774C4.22904 8.20073 4.13096 7.76373 3.99786 7.33377C3.64059 6.14258 2.85601 5.3743 1.65811 5.04302C1.2518 4.93025 0.845498 4.83157 0.439193 4.72584C0.418178 4.72584 0.404167 4.71879 0.369141 4.7047L0.376146 4.6906Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/src/editor/ui/Spinner.tsx

@@ -3,5 +3,9 @@ export function Spinner({
 }: {
   size?: "2xl" | "3xl" | "4xl" | "5xl";
 }) {
-  return <i className={`pi pi-cog pi-spin text-${size} text-gray-600`}></i>;
+  return (
+    <i
+      className={`pi pi-cog pi-spin text-${size} text-theme-secondary-light`}
+    ></i>
+  );
 }

package/src/page-wizard/WizardSteps.tsx

@@ -407,7 +407,7 @@ export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
   };
 
   const handleFinish = () => {
-    editContext?.switchView("editor", { skipConfirmation: true });
+    editContext?.switchView("page-editor", { skipConfirmation: true });
   };
 
   const currentStep = wizard.steps[currentStepIndex];

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

@@ -154,7 +154,7 @@ export function CollectStep({
           {error && <div className="mt-2 text-sm text-red-500">{error}</div>}
           <div
             className={`flex flex-col items-center justify-center border border-dashed border-gray-300 p-8 ${
-              isUploading ? "bg-gray-200" : "bg-white"
+              isUploading ? "" : "bg-white"
             }`}
             onDrop={handleDrop}
             onDragOver={(e) => e.preventDefault()}
@@ -182,34 +182,38 @@ export function CollectStep({
                 </svg>
               )}
               {isUploading && <Spinner />}
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                accept=".pdf,.doc,.docx"
-                style={{ display: "none" }}
-                onChange={(e) => {
-                  const file = e.target.files?.[0];
-                  if (file) {
-                    uploadFile(file);
-                  }
-                }}
-                onDrop={handleDrop}
-                disabled={isUploading}
-              />
-              <div className="flex items-center gap-1">
-                <span
-                  className={`text-sm font-medium ${
-                    isUploading
-                      ? "text-gray-500"
-                      : "text-theme-secondary cursor-pointer underline"
-                  } `}
-                  onClick={triggerFileInput}
-                >
-                  Click
-                </span>
-                or drag & drop to upload
-              </div>
+              {!isUploading && (
+                <>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    accept=".pdf,.doc,.docx"
+                    style={{ display: "none" }}
+                    onChange={(e) => {
+                      const file = e.target.files?.[0];
+                      if (file) {
+                        uploadFile(file);
+                      }
+                    }}
+                    onDrop={handleDrop}
+                    disabled={isUploading}
+                  />
+                  <div className="flex items-center gap-1">
+                    <span
+                      className={`text-sm font-medium ${
+                        isUploading
+                          ? "text-gray-500"
+                          : "text-theme-secondary cursor-pointer underline"
+                      } `}
+                      onClick={triggerFileInput}
+                    >
+                      Click
+                    </span>
+                    or drag & drop to upload
+                  </div>
+                </>
+              )}
             </div>
           </div>
         </Card>

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

@@ -249,17 +249,11 @@ export function ComponentTypeSelector({
         />
       </div>
 
-      <div className="mb-3 flex flex-col gap-3">
+      <div className="mb-3 flex flex-col gap-3 py-2">
         {/* Component Types Section */}
-        <div className="min-w-0 flex-1 rounded border border-gray-200 bg-white p-2">
+        <div className="min-w-0 flex-1 rounded">
           <div className="mb-2 flex items-center justify-between">
             <h4 className="text-sm font-bold">Component Types</h4>
-            <span className="rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-500">
-              {selectedComponentTypes && Array.isArray(selectedComponentTypes)
-                ? selectedComponentTypes.length
-                : 0}{" "}
-              of {availableComponentTypes.length} selected
-            </span>
           </div>
 
           {/* Selected component tags */}
@@ -323,7 +317,7 @@ export function ComponentTypeSelector({
                 return (
                   <div
                     key={type}
-                    className={`relative cursor-pointer rounded-lg border p-4 transition-all ${
+                    className={`relative cursor-pointer rounded-lg border p-2 transition-all ${
                       isSelected
                         ? "border-theme-secondary bg-theme-secondary-50"
                         : "border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50"
@@ -334,22 +328,7 @@ export function ComponentTypeSelector({
                       <div className="min-w-0 flex-1">
                         <div className="mb-1 flex items-center gap-2">
                           <div className="flex items-center gap-2">
-                            <svg
-                              className="h-5 w-5 text-gray-400"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="M4 6h16M4 10h16M4 14h16M4 18h16"
-                              />
-                            </svg>
-                            <h3 className="font-medium text-gray-900">
-                              {type}
-                            </h3>
+                            <h3 className="text-sm text-gray-900">{type}</h3>
                             {isPreselected && (
                               <span
                                 className="text-theme-secondary text-sm"

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

@@ -519,7 +519,7 @@ export function ContentStep({
         createWizardAiContext,
         { allowedFunctions: [] },
         { signal: localAbortController.signal },
-        step.aiModel || "o3-mini-low",
+        step.aiModel || "gpt-4.1",
         (response) => {
           try {
             const newLayout = JSON.parse(response.content) as WizardPageModel;

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

@@ -18,6 +18,7 @@ type Thumbnail = {
   id: string;
   name: string;
   thumbUrl?: string;
+  previewUrl?: string;
   description?: string;
   selected?: boolean;
 };
@@ -28,6 +29,43 @@ type Image = {
   options?: Thumbnail[];
 };
 
+// Responsive image component that chooses the best image size
+const ResponsiveImage = ({
+  thumbUrl,
+  previewUrl,
+  alt,
+  className,
+}: {
+  thumbUrl?: string;
+  previewUrl?: string;
+  alt: string;
+  className?: string;
+}) => {
+  // If we have both URLs, use srcset to let browser choose
+  if (thumbUrl && previewUrl) {
+    return (
+      <img
+        src={thumbUrl} // fallback for older browsers
+        srcSet={`${thumbUrl} 96w, ${previewUrl} 400w`}
+        sizes="(max-width: 640px) calc(50vw - 1rem), (max-width: 768px) calc(33vw - 1rem), calc(16.666vw - 1rem)"
+        alt={alt}
+        className={className}
+        loading="lazy"
+      />
+    );
+  }
+
+  // Fallback to available URL
+  return (
+    <img
+      src={previewUrl || thumbUrl}
+      alt={alt}
+      className={className}
+      loading="lazy"
+    />
+  );
+};
+
 export const ImagesStep = (props: StepComponentProps) => {
   const mediaRootId = "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1";
   const [selectedFolderId, setSelectedFolderId] = useState<string>(mediaRootId);
@@ -78,7 +116,7 @@ export const ImagesStep = (props: StepComponentProps) => {
         createWizardAiContext,
         {},
         undefined,
-        "o3-mini-low",
+        "gpt-4.1",
       );
       const images = JSON.parse(aiPromptResult.content).images;
 
@@ -99,6 +137,7 @@ export const ImagesStep = (props: StepComponentProps) => {
               name: thumbnail.name,
               id: thumbnail.id,
               thumbUrl: thumbnail.thumbUrl,
+              previewUrl: thumbnail.previewUrl,
               description: thumbnail.description,
             }),
           );
@@ -314,8 +353,9 @@ export const ImagesStep = (props: StepComponentProps) => {
                                   }));
                                 }}
                               >
-                                <img
-                                  src={option.thumbUrl}
+                                <ResponsiveImage
+                                  thumbUrl={option.thumbUrl}
+                                  previewUrl={option.previewUrl}
                                   alt={option.name}
                                   className="h-full w-full object-cover"
                                 />

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

@@ -89,7 +89,7 @@ export function LayoutStep({
         createWizardAiContext,
         {},
         { signal: localAbortController.signal },
-        "o3-mini-low",
+        "gpt-4.1",
         (response) => {
           try {
             const newLayout = JSON.parse(response.content) as WizardPageModel;

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

@@ -72,7 +72,7 @@ export function MetaDataStep({
           createWizardAiContext,
           {},
           { signal: abortController.signal },
-          "o3-mini-low",
+          "gpt-4.1",
           (response) => {
             try {
               const newLayout = JSON.parse(response.content) as WizardPageModel;

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3907";
-export const buildDate = "2025-05-28 14:23:13";
+export const version = "1.0.3911";
+export const buildDate = "2025-05-29 17:38:34";

package/src/splash-screen/NewPage.tsx

@@ -10,7 +10,6 @@ import {
   loadInsertOptions,
 } from "../editor/services/editService";
 import { InputText } from "primereact/inputtext";
-import { Button } from "primereact/button";
 import { getAbsoluteIconUrl, getItemDescriptor } from "../editor/utils";
 import { classNames } from "primereact/utils";
 import { useEditContext } from "../client-components";
@@ -22,6 +21,10 @@ import { getWizards } from "../page-wizard/service";
 import { Wizard } from "../page-wizard/PageWizard";
 import { Card } from "../components/ui/card";
 import { CardConnector } from "../components/ui/CardConnector";
+import { Logo } from "../editor/ui/Icons";
+import { ActionButton } from "../components/ActionButton";
+import { FilePenLine, Palette } from "lucide-react";
+
 export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
   const [selectedItem, setSelectedItem] = useState<ItemDescriptor | null>(null);
   const [isValid, setIsValid] = useState<boolean>(false);
@@ -145,121 +148,147 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
   };
 
   return (
-    <div className="flex h-full flex-col bg-gray-50 p-4 md:flex-row">
-      <div className="tour-pick-location flex-1">
-        <Card
-          icon={<i className="pi pi-map-marker text-sm"></i>}
-          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">
-              <ScrollingContentTree
-                selectedItemId={selectedItem?.id || selectedItemId}
-                onSelectionChange={(selection) => {
-                  const selected = selection[0] as ItemTreeNodeData;
-                  if (selected) setSelectedItem(selected);
-                }}
-              />
-            </div>
+    <div className="flex h-full flex-col gap-6 bg-gray-100 p-4 md:p-8">
+      {/* Header with icon, title, description, and back button */}
+      <div className="flex gap-4">
+        <Logo className="h-8 w-8" />
+        <div className="flex-1 text-neutral-800">
+          <div className="text-lg font-semibold md:text-xl">
+            Create New Page
           </div>
-        </Card>
-      </div>
+          <div className="mt-1 text-xs font-light md:text-sm">
+            Select a location, choose a template or wizard, and name your new
+            page
+          </div>
+        </div>
 
-      {/* Card Connector - only visible when location is selected */}
-      {selectedItem && <CardConnector />}
+        <div className="flex items-start">
+          <ActionButton onClick={() => editContext?.switchView("open-page")}>
+            Open Existing
+          </ActionButton>
+        </div>
+      </div>
 
-      {/* Second card - only visible when location is selected */}
-      {selectedItem && (
-        <div className="flex flex-1 flex-col">
+      {/* Content */}
+      <div className="flex flex-1 flex-col md:flex-row">
+        <div className="tour-pick-location flex-1">
           <Card
-            icon={<i className="pi pi-palette text-sm"></i>}
-            title="Choose Template or Wizard"
-            description="Select a template or wizard to create your page"
+            icon={<i className="pi pi-map-marker text-sm"></i>}
+            title="Pick Location"
+            description="Select where to create your new page"
+            noPadding
+            className="h-full"
           >
-            <div className="tour-choose-template">
-              <div className="flex min-h-12 flex-wrap gap-3">
-                {!insertOptions?.length && (
-                  <div>No page templates available here.</div>
-                )}
-                {insertOptionsAndWizards?.map((option) => (
-                  <div
-                    key={option.id}
-                    onClick={() => setSelectedTemplate(option.id)}
-                    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-2 outline-offset-2 outline-gray-200"
-                        : "bg-gray-100",
-                    )}
-                  >
-                    {
-                      <img
-                        src={getAbsoluteIconUrl(option.icon)}
-                        width="32"
-                        height="32"
-                      ></img>
-                    }
-                    {option.name}
-                  </div>
-                ))}
+            <div className="h-full px-4 pb-4 md:px-6">
+              <div className="relative h-full">
+                <div className="absolute inset-0 overflow-auto">
+                  <ScrollingContentTree
+                    selectedItemId={selectedItem?.id || selectedItemId}
+                    onSelectionChange={(selection) => {
+                      const selected = selection[0] as ItemTreeNodeData;
+                      if (selected) setSelectedItem(selected);
+                    }}
+                  />
+                </div>
               </div>
-              {selectedTemplate &&
-                wizards?.find((x) => x.id === selectedTemplate) && (
-                  <div className="mt-4">
-                    <Button
-                      onClick={launchWizard}
-                      label="Start Wizard"
-                      id="launch-wizard-button"
-                    />
-                  </div>
-                )}
             </div>
           </Card>
+        </div>
 
-          {/* 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}
-                      id="new-page-name"
-                      onChange={(e) => setName(e.target.value)}
-                      onKeyDown={(ev) => {
-                        if (ev.key === "Enter" && isValid) handleOk();
-                      }}
-                      data-testid="new-page-name"
-                      placeholder="Enter page name..."
-                    />
-                    {validationMessage && (
-                      <div className="mt-2 text-red-500">
-                        {validationMessage}
-                      </div>
-                    )}
+        {/* Card Connector - only visible when location is selected */}
+        {selectedItem && <CardConnector />}
+
+        {/* Second card - only visible when location is selected */}
+        {selectedItem && (
+          <div className="flex flex-1 flex-col">
+            <Card
+              icon={<Palette className="h-4 w-4" />}
+              title="Choose Template or Wizard"
+              description="Select a template or wizard to create your page"
+            >
+              <div className="tour-choose-template">
+                <div className="flex min-h-8 flex-wrap gap-3">
+                  {!insertOptions?.length && (
+                    <div className="text-sm text-gray-500">
+                      You cannot insert content at the selected location.
+                    </div>
+                  )}
+                  {insertOptionsAndWizards?.map((option) => (
+                    <div
+                      key={option.id}
+                      onClick={() => setSelectedTemplate(option.id)}
+                      className={classNames(
+                        "hover:border-theme-secondary flex h-23 min-w-34 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-gray-200 text-xs",
+                        selectedTemplate === option.id
+                          ? "bg-theme-secondary-light border-theme-secondary"
+                          : "bg-white",
+                      )}
+                    >
+                      {
+                        <img
+                          src={getAbsoluteIconUrl(option.icon)}
+                          width="32"
+                          height="32"
+                        ></img>
+                      }
+                      {option.name}
+                    </div>
+                  ))}
+                </div>
+                {selectedTemplate &&
+                  wizards?.find((x) => x.id === selectedTemplate) && (
                     <div className="mt-4">
-                      <Button
-                        onClick={handleOk}
-                        label="Create"
-                        disabled={!isValid}
-                        id="create-new-page-button"
+                      <ActionButton onClick={launchWizard} isLoading={false}>
+                        Start wizard
+                      </ActionButton>
+                    </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={<FilePenLine />}
+                    title="Name Your Page"
+                    description="Enter a name for your new page"
+                  >
+                    <div>
+                      <InputText
+                        className="w-full rounded p-1.5 text-xs"
+                        value={name}
+                        id="new-page-name"
+                        onChange={(e) => setName(e.target.value)}
+                        onKeyDown={(ev) => {
+                          if (ev.key === "Enter" && isValid) handleOk();
+                        }}
+                        data-testid="new-page-name"
+                        placeholder="Enter page name..."
                       />
+                      {validationMessage && (
+                        <div className="mt-2 text-red-500">
+                          {validationMessage}
+                        </div>
+                      )}
+                      <div className="mt-4">
+                        <ActionButton
+                          onClick={handleOk}
+                          disabled={!isValid}
+                          isLoading={false}
+                        >
+                          Create page
+                        </ActionButton>
+                      </div>
                     </div>
-                  </div>
-                </Card>
-              </>
-            )}
-        </div>
-      )}
+                  </Card>
+                </>
+              )}
+          </div>
+        )}
+      </div>
     </div>
   );
 }