@alpaca-editor/core 1.0.3903 → 1.0.3905

package/src/components/ui/card.tsx

@@ -1,4 +1,6 @@
 import { cn } from "../../lib/utils";
+import { useState, useEffect } from "react";
+import { Expand, Shrink } from "lucide-react";
 
 /**
  * A reusable card component with header (icon, title, description) and content area.
@@ -11,6 +13,12 @@ export function Card({
   description,
   className,
   noPadding,
+  collapsible = "no",
+  defaultCollapsed = "no",
+  summary,
+  footer,
+  showFullscreenButton = false,
+  onFullscreen,
 }: {
   children: React.ReactNode;
   icon: React.ReactNode;
@@ -18,27 +26,335 @@ export function Card({
   description: string;
   className?: string;
   noPadding?: boolean;
+  collapsible?: "yes" | "no" | "mobileOnly";
+  defaultCollapsed?: "yes" | "no" | "mobileOnly";
+  summary?: React.ReactNode;
+  footer?: React.ReactNode;
+  showFullscreenButton?: boolean;
+  onFullscreen?: () => void;
 }) {
+  const [isExpanded, setIsExpanded] = useState(() => {
+    if (defaultCollapsed === "yes") return false; // Starts collapsed
+    if (defaultCollapsed === "no") return true; // Starts expanded
+    if (defaultCollapsed === "mobileOnly") return false; // Starts collapsed on mobile, but we'll handle desktop separately
+    return true; // Default
+  });
+
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const isCollapsibleEnabled = collapsible !== "no";
+
+  // Prevent body scroll when fullscreen is active
+  useEffect(() => {
+    if (isFullscreen) {
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }
+  }, [isFullscreen]);
+
+  // Check if collapsible behavior should be active (considering mobile-only options)
+  const isCollapsibleActive = () => {
+    if (collapsible === "no") return false;
+    if (collapsible === "mobileOnly") {
+      // Only collapsible on mobile - we'll handle this with CSS classes
+      return true;
+    }
+    return true; // For "yes"
+  };
+
+  // Determine what content to show based on collapsible state
+  const getContentToShow = () => {
+    if (!isCollapsibleEnabled) return children;
+
+    return isExpanded ? children : summary;
+  };
+
+  const shouldShowContent = () => {
+    if (!isCollapsibleEnabled) return true;
+
+    // Always show content area if we have either main content or summary
+    if (!isExpanded && summary) return true;
+    if (isExpanded) return true;
+
+    return false;
+  };
+
+  const toggleExpanded = () => {
+    if (isCollapsibleActive()) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+
+  const handleFullscreen = () => {
+    setIsFullscreen(true);
+    onFullscreen?.();
+  };
+
+  const handleExitFullscreen = () => {
+    setIsFullscreen(false);
+  };
+
   return (
-    <div
-      className={cn(
-        "flex h-full flex-col gap-2 rounded-md bg-white",
-        className,
+    <>
+      {/* Blurred background overlay - only visible in fullscreen */}
+      {isFullscreen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm md:hidden"
+          onClick={handleExitFullscreen}
+        />
       )}
-    >
-      <div className="flex flex-col justify-between gap-1 p-6 pb-2">
-        <div className="flex items-center gap-2">
-          <div className="text-theme-secondary flex h-4 w-4 items-center justify-center rounded-full">
-            {icon}
+
+      <div
+        className={cn(
+          "flex flex-col rounded-md bg-white transition-all duration-300 ease-in-out",
+          className,
+          isFullscreen && [
+            // Fullscreen styles - only on mobile
+            "fixed inset-0 z-50 mx-0 mt-[30px] h-[calc(100vh-60px)] shadow-xl md:relative md:inset-auto md:mx-auto md:mt-0 md:h-auto md:shadow-none",
+          ],
+        )}
+      >
+        <div
+          className={cn(
+            "flex flex-col justify-between gap-1 p-4 pb-2 md:p-6",
+            isCollapsibleEnabled && "cursor-pointer",
+          )}
+          onClick={isCollapsibleEnabled ? toggleExpanded : undefined}
+        >
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <div className="text-theme-secondary flex h-4 w-4 items-center justify-center rounded-full">
+                {icon}
+              </div>
+              <div className="text-base font-bold text-neutral-800">
+                {title}
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {/* Fullscreen button - only on mobile */}
+              {showFullscreenButton && (
+                <button
+                  onClick={handleFullscreen}
+                  className={cn(
+                    "flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden",
+                    isFullscreen && "hidden",
+                  )}
+                  aria-label="Open fullscreen"
+                >
+                  <Expand className="h-4 w-4" />
+                </button>
+              )}
+
+              {/* Exit fullscreen button - only visible in fullscreen */}
+              {showFullscreenButton && isFullscreen && (
+                <button
+                  onClick={handleExitFullscreen}
+                  className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
+                  aria-label="Exit fullscreen"
+                >
+                  <Shrink className="h-4 w-4" />
+                </button>
+              )}
+
+              {/* Show toggle in header when no summary is provided */}
+              {isCollapsibleEnabled && !summary && (
+                <>
+                  {collapsible === "yes" && (
+                    <button
+                      onClick={toggleExpanded}
+                      className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700"
+                      aria-label={isExpanded ? "Collapse" : "Expand"}
+                    >
+                      <svg
+                        className={cn(
+                          "h-4 w-4 transition-transform duration-200",
+                          isExpanded ? "rotate-180" : "rotate-0",
+                        )}
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </button>
+                  )}
+                  {collapsible === "mobileOnly" && (
+                    <button
+                      onClick={toggleExpanded}
+                      className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
+                      aria-label={isExpanded ? "Collapse" : "Expand"}
+                    >
+                      <svg
+                        className={cn(
+                          "h-4 w-4 transition-transform duration-200",
+                          isExpanded ? "rotate-180" : "rotate-0",
+                        )}
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </button>
+                  )}
+                </>
+              )}
+            </div>
           </div>
-          <div className="text-base font-bold text-neutral-800">{title}</div>
+          <div className="mb-1 text-xs text-neutral-500">{description}</div>
         </div>
-        <div className="mb-1 text-xs text-neutral-500">{description}</div>
-      </div>
 
-      <div className={cn("flex-1", noPadding ? "" : "p-6 pt-0", className)}>
-        {children}
+        {shouldShowContent() && (
+          <div
+            className={cn(
+              "flex-1 transition-all duration-300 ease-in-out",
+              noPadding ? "" : "p-6 pt-0",
+              isFullscreen && "overflow-hidden",
+              // Handle responsive behavior for mobile-only collapsible options
+              collapsible === "mobileOnly" &&
+                !isExpanded &&
+                summary &&
+                "block md:hidden",
+              collapsible === "mobileOnly" && isExpanded && "block",
+              className,
+            )}
+          >
+            {!isExpanded && summary && isCollapsibleEnabled ? (
+              <div className="flex items-start justify-between gap-2">
+                <div className="flex-1">{summary}</div>
+                {/* Show toggle button next to summary when summary exists */}
+                {collapsible === "yes" && (
+                  <button
+                    onClick={toggleExpanded}
+                    className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700"
+                    aria-label="Expand"
+                  >
+                    <svg
+                      className="h-4 w-4 rotate-0 transition-transform duration-200"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </button>
+                )}
+                {collapsible === "mobileOnly" && (
+                  <button
+                    onClick={toggleExpanded}
+                    className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
+                    aria-label="Expand"
+                  >
+                    <svg
+                      className="h-4 w-4 rotate-0 transition-transform duration-200"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            ) : (
+              <>
+                {isExpanded && isCollapsibleEnabled && summary ? (
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex-1">{children}</div>
+                    {/* Show toggle button next to content when summary exists */}
+                    {collapsible === "yes" && (
+                      <button
+                        onClick={toggleExpanded}
+                        className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700"
+                        aria-label="Collapse"
+                      >
+                        <svg
+                          className="h-4 w-4 rotate-180 transition-transform duration-200"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M19 9l-7 7-7-7"
+                          />
+                        </svg>
+                      </button>
+                    )}
+                    {collapsible === "mobileOnly" && (
+                      <button
+                        onClick={toggleExpanded}
+                        className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
+                        aria-label="Collapse"
+                      >
+                        <svg
+                          className="h-4 w-4 rotate-180 transition-transform duration-200"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M19 9l-7 7-7-7"
+                          />
+                        </svg>
+                      </button>
+                    )}
+                  </div>
+                ) : (
+                  getContentToShow()
+                )}
+              </>
+            )}
+          </div>
+        )}
+
+        {/* Show full content on desktop when using mobile-only collapsible options */}
+        {collapsible === "mobileOnly" && (
+          <div
+            className={cn(
+              "hidden flex-1 transition-all duration-300 ease-in-out md:block",
+              noPadding ? "" : "p-6 pt-0",
+              className,
+            )}
+          >
+            {children}
+          </div>
+        )}
+
+        {/* Footer - always displayed regardless of collapsed state */}
+        {footer && (
+          <div className="border-t border-gray-100 p-4 pt-0 md:p-6 md:pt-0">
+            {footer}
+          </div>
+        )}
       </div>
-    </div>
+    </>
   );
 }

package/src/config/config.tsx

@@ -94,7 +94,8 @@ import { LayoutStep } from "../page-wizard/steps/LayoutStep";
 import { BuildPageStep } from "../page-wizard/steps/BuildPageStep";
 import { SelectStep } from "../page-wizard/steps/SelectStep";
 import { ImagesStep } from "../page-wizard/steps/ImagesStep";
-import { CreatePageAndLayoutStep } from "../page-wizard/steps/CreatePageAndLayoutStep";
+import { ContentStep } from "../page-wizard/steps/ContentStep";
+import { SetupPageStep } from "../page-wizard/steps/SetupPageStep";
 import { getWizards } from "../page-wizard/service";
 
 import { startPageWizardCommand } from "../page-wizard/startPageWizardCommand";
@@ -323,7 +324,8 @@ export const getConfiguration = (): EditorConfiguration => {
         BuildPageStep,
         SelectStep,
         ImagesStep,
-        CreatePageAndLayoutStep,
+        ContentStep,
+        SetupPageStep,
       },
     },
 

package/src/config/types.ts

@@ -267,11 +267,14 @@ export type TranslationStatus = {
 
 export interface StepComponentProps {
   step: any;
+
   data: WizardData;
   setData: React.Dispatch<React.SetStateAction<WizardData>>;
   wizard: Wizard;
   parentItem?: ItemDescriptor;
   setStepCompleted: (completed: boolean) => void;
+  setBeforeNextCallback?: (callback: (() => Promise<boolean>) | null) => void;
+
   internalState: any;
   setInternalState: Dispatch<SetStateAction<any>>;
   pageModel: WizardPageModel;

package/src/editor/MobileLayout.tsx

@@ -51,15 +51,13 @@ export function MobileLayout(props: MainLayoutProps) {
   return (
     <div className={cn("flex flex-col select-none", className)}>
       {editContext?.configuration.editor.titlebar}
-      <div className="flex flex-1">
-        <div className="flex-1">
-          <Splitter
-            panels={panels}
-            direction="vertical"
-            localStorageKey="mobile-layout-splitter"
-          />
-        </div>
-      </div>
+
+      <Splitter
+        panels={panels}
+        direction="vertical"
+        localStorageKey="mobile-layout-splitter"
+      />
+
       {!props.view.hideViewSelector && <ViewSelector />}
       {/* <div className="text-2xs fixed right-0 bottom-0 z-50 flex flex-col rounded-tl-2xl bg-gray-50/70 px-1 pt-1 text-center font-mono text-gray-400">
         <div title={buildDate}>{version}</div>

package/src/editor/PictureEditor.tsx

@@ -22,10 +22,16 @@ export function PictureEditor({
   const editContext = useEditContext();
 
   const variant = field.value?.variants?.find((v) => v.name === variantName);
-  const raw =
-    field?.rawValue && field?.rawValue[0] === "{"
-      ? (JSON.parse(field?.rawValue) as PictureRawValue)
-      : ({ Variants: [] } as PictureRawValue);
+  const raw = (() => {
+    try {
+      return field?.rawValue && field?.rawValue[0] === "{"
+        ? (JSON.parse(field?.rawValue) as PictureRawValue)
+        : ({ Variants: [] } as PictureRawValue);
+    } catch (error) {
+      console.warn("Failed to parse picture field raw value:", error);
+      return { Variants: [] } as PictureRawValue;
+    }
+  })();
 
   const rawVariant = raw.Variants?.find((x) => x.Name == variantName);
 
@@ -57,7 +63,7 @@ export function PictureEditor({
         refresh: "immediate",
       });
     },
-    [field, variant]
+    [field, variant],
   );
 
   const videoSelected = useCallback(
@@ -79,7 +85,7 @@ export function PictureEditor({
         refresh: "immediate",
       });
     },
-    [field, variant]
+    [field, variant],
   );
 
   async function selectMedia(mode: MediaSelectorMode) {
@@ -117,21 +123,21 @@ export function PictureEditor({
               behavior: "instant",
               left: 0,
               top: e.deltaY,
-            }
+            },
           );
         editContext?.pageView.editorIframeRef!.current?.contentWindow?.document.body?.scrollBy(
           {
             behavior: "instant",
             left: 0,
             top: e.deltaY,
-          }
+          },
         );
       }}
       style={style}
       data-testid="select-media"
     >
       {showMenu && (
-        <div className="p-3 grid grid-cols-2 gap-1.5 items-stretch justify-center text-sm min-w-48">
+        <div className="grid min-w-48 grid-cols-2 items-stretch justify-center gap-1.5 p-3 text-sm">
           <Btn
             label="Select"
             icon="pi pi-image"
@@ -196,7 +202,7 @@ function Btn({
 }) {
   return (
     <button
-      className={`btn bg-gray-500 text-white p-1.5 rounded-lg opacity-70 border hover:opacity-85 gap-1.5 flex items-center cursor-pointer ${className}`}
+      className={`btn flex cursor-pointer items-center gap-1.5 rounded-lg border bg-gray-500 p-1.5 text-white opacity-70 hover:opacity-85 ${className}`}
       onClick={onClick}
       data-testid={testId}
     >

package/src/editor/client/editContext.ts

@@ -51,7 +51,11 @@ import { ItemsRepository } from "./itemsRepository";
 import { MediaSelectorMode } from "../media-selector/MediaSelector";
 import { ComponentCommand } from "../commands/componentCommands";
 import { AiTerminalOptions } from "../ai/AiTerminal";
-import { Wizard } from "../../page-wizard/PageWizard";
+import {
+  Wizard,
+  WizardData,
+  WizardPageModel,
+} from "../../page-wizard/PageWizard";
 export type DragObject = {
   type: "template" | "component" | "link-component" | "items";
   typeId: string;
@@ -322,6 +326,24 @@ export type EditContextType = {
     setParentItem: React.Dispatch<
       React.SetStateAction<ItemDescriptor | undefined>
     >;
+    // Wizard step state
+    currentStepIndex: number;
+    setCurrentStepIndex: React.Dispatch<React.SetStateAction<number>>;
+    data: WizardData;
+    setData: React.Dispatch<React.SetStateAction<WizardData>>;
+    pageModel: WizardPageModel;
+    setPageModel: React.Dispatch<React.SetStateAction<WizardPageModel>>;
+    internalState: any;
+    setInternalState: React.Dispatch<React.SetStateAction<any>>;
+    stepCompleted: number;
+    setStepCompleted: React.Dispatch<React.SetStateAction<number>>;
+    pageItem: ItemDescriptor | undefined;
+    setPageItem: React.Dispatch<
+      React.SetStateAction<ItemDescriptor | undefined>
+    >;
+    beforeNextCallbackRef: React.MutableRefObject<
+      (() => Promise<boolean>) | null
+    >;
   };
 
   webSocketMessages: WebSocketMessage[];

package/src/editor/page-editor-chrome/CommentHighlighting.tsx

@@ -103,7 +103,12 @@ export function CommentHighlighting({
 
   if (!rects || rects.length === 0) {
     let fallbackElement = fieldElement;
-    if (!fallbackElement && comment.itemId && editContext.page) {
+    if (
+      !fallbackElement &&
+      comment.itemId &&
+      editContext.page &&
+      iframe.contentWindow?.document.body
+    ) {
       const componentStart = iframe.contentWindow?.document.body.querySelector(
         "[data-component-start='" + comment.itemId + "']",
       );

package/src/editor/ui/Splitter.tsx

@@ -260,7 +260,16 @@ export const Splitter: React.FC<SplitterProps> = ({
             }
           }
         }}
-      ></div>
+      >
+        {/* Visual indicator line for mobile splitters */}
+        <div
+          className={`${
+            isHorizontal
+              ? "h-8 w-[2px] bg-gray-500 md:hidden"
+              : "h-[2px] w-8 bg-gray-500 md:hidden"
+          }`}
+        />
+      </div>
     );
   };
 

package/src/page-wizard/WizardBoxConnector.tsx

@@ -1,21 +1,56 @@
 import { cn } from "../lib/utils";
 
-export function WizardBoxConnector({ className }: { className?: string }) {
+export function WizardBoxConnector({
+  className,
+  direction,
+}: {
+  className?: string;
+  direction?: "horizontal" | "vertical";
+}) {
   return (
-    <div className={cn("mr-[-3px] ml-[-3px]", className)}>
-      <svg
-        className={className}
-        width="31"
-        height="40"
-        viewBox="0 0 31 40"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+    <>
+      <div
+        className={cn(
+          "mt-[-3px] mb-[-3px] flex items-center justify-center",
+          className,
+          (!direction || direction === "horizontal") && "md:hidden",
+        )}
       >
-        <path
-          d="M3.04199 0C3.55018 6.15949 8.70936 11 15 11C21.2906 11 26.4498 6.1595 26.958 0H31V40H27C27 33.3726 21.6274 28 15 28C8.37258 28 3 33.3726 3 40H0V0H3.04199Z"
-          fill="white"
-        />
-      </svg>
-    </div>
+        <svg
+          width="40"
+          height="31"
+          viewBox="0 0 40 31"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M40 3.04199C33.8405 3.55018 29 8.70936 29 15C29 21.2906 33.8405 26.4498 40 26.958L40 31L-1.35505e-06 31L-1.18021e-06 27C6.62741 27 12 21.6274 12 15C12 8.37258 6.62741 3 -1.31134e-07 3L0 -1.74846e-06L40 0L40 3.04199Z"
+            fill="white"
+          />
+        </svg>
+      </div>
+
+      <div
+        className={cn(
+          "mt-6 mr-[-3px] ml-[-3px] hidden",
+          className,
+          (!direction || direction === "horizontal") && "md:block",
+        )}
+      >
+        <svg
+          className={className}
+          width="31"
+          height="40"
+          viewBox="0 0 31 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3.04199 0C3.55018 6.15949 8.70936 11 15 11C21.2906 11 26.4498 6.1595 26.958 0H31V40H27C27 33.3726 21.6274 28 15 28C8.37258 28 3 33.3726 3 40H0V0H3.04199Z"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </>
   );
 }