@alpaca-editor/core 1.0.3898 → 1.0.3899

package/src/editor/ui/Splitter.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
 import { flushSync } from "react-dom";
+
 export type SplitterPanel = {
   defaultSize: number | "auto";
   name: string;
@@ -13,6 +14,7 @@ interface SplitterProps {
   localStorageKey?: string;
   expandLabel?: React.ReactNode;
   growablePanelIndex?: number; // Index of the panel that grows/shrinks
+  direction?: "horizontal" | "vertical"; // New prop for direction
 }
 
 type StoredSizes = { panels: PanelSizes; lastCollapsed: boolean };
@@ -22,6 +24,7 @@ export const Splitter: React.FC<SplitterProps> = ({
   panels,
   localStorageKey = "splitter-sizes",
   expandLabel = "Expand",
+  direction = "horizontal", // Default to horizontal for backward compatibility
 }) => {
   const totalPanels = panels.length;
 
@@ -86,79 +89,6 @@ export const Splitter: React.FC<SplitterProps> = ({
     }
   };
 
-  const handleResize = useCallback(
-    (index: number, event: React.MouseEvent<HTMLDivElement>) => {
-      event.preventDefault();
-
-      const iframes = splitterRef.current?.querySelectorAll("iframe");
-      iframes?.forEach((iframe) => {
-        iframe.classList.add("pointer-events-none");
-      });
-
-      const startX = event.clientX;
-      // create a copy with the panel name
-      const initialSizes = panelSizes ? { ...panelSizes } : {};
-
-      const panelElement = panelRefs.current[index];
-      const nextPanelElement = panelRefs.current[index + 1];
-
-      if (!panelElement || !nextPanelElement || !splitterRef.current) {
-        return;
-      }
-
-      const panelWidth = panelElement.offsetWidth;
-      const nextPanelWidth = nextPanelElement.offsetWidth;
-
-      setIsResizing(true);
-
-      const onMouseMove = (moveEvent: MouseEvent) => {
-        const delta = moveEvent.clientX - startX;
-        const newPanelWidth = panelWidth + delta;
-        const newNextPanelWidth = nextPanelWidth - delta;
-
-        const minPanelWidth = 50;
-        const minNextPanelWidth = 50;
-
-        if (
-          newNextPanelWidth < minPanelWidth &&
-          index == panels.length - 2 &&
-          lastPanelCollapsible
-        ) {
-          setIsLastPanelCollapsed(true);
-          setPanelSizes(initialSizes);
-        }
-
-        if (
-          newPanelWidth < minPanelWidth ||
-          newNextPanelWidth < minNextPanelWidth
-        ) {
-          return;
-        }
-
-        const updatedSizes: PanelSizes = { ...initialSizes };
-        updatedSizes[panels[index]!.name] = newPanelWidth;
-        updatedSizes[panels[index + 1]!.name] = newNextPanelWidth;
-        setPanelSizes(updatedSizes);
-      };
-
-      const onMouseUp = () => {
-        setTimeout(() => {
-          setIsResizing(false);
-        }, 100);
-        iframes?.forEach((iframe) => {
-          iframe.classList.remove("pointer-events-none");
-        });
-
-        document.removeEventListener("mousemove", onMouseMove);
-        document.removeEventListener("mouseup", onMouseUp, true);
-      };
-
-      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener("mouseup", onMouseUp, true);
-    },
-    [panels, panelSizes],
-  );
-
   const isLastResizer = (index: number) => index === panels.length - 2;
 
   const getFlexBasis = (index: number): string => {
@@ -182,11 +112,16 @@ export const Splitter: React.FC<SplitterProps> = ({
   };
 
   const getExpandButton = () => {
+    const isHorizontal = direction === "horizontal";
+
     return (
       <div
         onClick={!isResizing ? toggleLastPanelCollapse : undefined}
         className="flex cursor-pointer items-center justify-center bg-gray-200 p-1 text-gray-500 select-none hover:bg-blue-700 hover:text-white"
-        style={{ writingMode: "vertical-rl", userSelect: "none" }}
+        style={{
+          writingMode: isHorizontal ? "vertical-rl" : "horizontal-tb",
+          userSelect: "none",
+        }}
       >
         {expandLabel}
       </div>
@@ -194,27 +129,162 @@ export const Splitter: React.FC<SplitterProps> = ({
   };
 
   const getSplitter = (index: number) => {
+    const isHorizontal = direction === "horizontal";
+
+    const handleDragStart = (
+      clientX: number,
+      clientY: number,
+      event: React.MouseEvent | React.TouchEvent,
+    ) => {
+      const rect = (event.target as HTMLElement).getBoundingClientRect();
+      const relativeY = clientY - rect.top;
+
+      event.stopPropagation();
+      event.preventDefault();
+
+      const isHorizontal = direction === "horizontal";
+      const startCoord = isHorizontal ? clientX : clientY;
+      const initialSizes = panelSizes ? { ...panelSizes } : {};
+
+      const panelElement = panelRefs.current[index];
+      const nextPanelElement = panelRefs.current[index + 1];
+
+      if (!panelElement || !nextPanelElement) {
+        return;
+      }
+
+      const panelSize = isHorizontal
+        ? panelElement.offsetWidth
+        : panelElement.offsetHeight;
+      const nextPanelSize = isHorizontal
+        ? nextPanelElement.offsetWidth
+        : nextPanelElement.offsetHeight;
+
+      setIsResizing(true);
+
+      // Disable pointer events on panel content during drag
+      const allPanels = splitterRef.current?.querySelectorAll(".relative");
+      allPanels?.forEach((panel) => {
+        (panel as HTMLElement).style.pointerEvents = "none";
+        // Also disable on all child elements that might capture events
+        const childElements = panel.querySelectorAll("*");
+        childElements.forEach((child) => {
+          (child as HTMLElement).style.pointerEvents = "none";
+        });
+      });
+
+      let isDragging = true;
+
+      const handleMove = (moveClientX: number, moveClientY: number) => {
+        if (!isDragging) return;
+
+        const currentCoord = isHorizontal ? moveClientX : moveClientY;
+        const delta = currentCoord - startCoord;
+        const newPanelSize = panelSize + delta;
+        const newNextPanelSize = nextPanelSize - delta;
+
+        const minPanelSize = 50;
+        if (newPanelSize < minPanelSize || newNextPanelSize < minPanelSize) {
+          return;
+        }
+
+        const updatedSizes: PanelSizes = { ...initialSizes };
+        updatedSizes[panels[index]!.name] = newPanelSize;
+        updatedSizes[panels[index + 1]!.name] = newNextPanelSize;
+        setPanelSizes(updatedSizes);
+      };
+
+      const handleEnd = () => {
+        isDragging = false;
+        setIsResizing(false);
+
+        // Re-enable pointer events on panel content
+        allPanels?.forEach((panel) => {
+          (panel as HTMLElement).style.pointerEvents = "";
+          // Also re-enable on all child elements
+          const childElements = panel.querySelectorAll("*");
+          childElements.forEach((child) => {
+            (child as HTMLElement).style.pointerEvents = "";
+          });
+        });
+
+        // Remove all event listeners
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+        window.removeEventListener("touchmove", onTouchMove);
+        window.removeEventListener("touchend", onTouchEnd);
+      };
+
+      const onMouseMove = (moveEvent: MouseEvent) => {
+        handleMove(moveEvent.clientX, moveEvent.clientY);
+      };
+
+      const onMouseUp = () => {
+        handleEnd();
+      };
+
+      const onTouchMove = (moveEvent: TouchEvent) => {
+        if (moveEvent.touches.length === 1) {
+          const touch = moveEvent.touches[0];
+          if (touch) {
+            handleMove(touch.clientX, touch.clientY);
+          }
+        }
+      };
+
+      const onTouchEnd = () => {
+        handleEnd();
+      };
+
+      // Add both mouse and touch event listeners
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("touchmove", onTouchMove, { passive: false });
+      window.addEventListener("touchend", onTouchEnd);
+    };
+
     if (lastPanelCollapsible && isLastPanelCollapsed && isLastResizer(index)) {
       return getExpandButton();
     }
 
     return (
       <div
-        className={
-          "relative z-1000 flex w-[4px] cursor-ew-resize items-center justify-center bg-gray-200 select-none hover:bg-blue-700"
-        }
+        className={`relative flex ${
+          isHorizontal
+            ? "h-full w-[4px] w-[12px] cursor-ew-resize md:w-[4px]"
+            : "h-[12px] h-[20px] w-full cursor-ns-resize md:h-[12px]"
+        } shrink-0 items-center justify-center bg-gray-300 select-none hover:bg-gray-400`}
+        style={{
+          touchAction: "none",
+          minHeight: isHorizontal ? undefined : "12px",
+          minWidth: isHorizontal ? "4px" : undefined,
+          boxSizing: "border-box",
+          userSelect: "none",
+          zIndex: 9999, // Ensure we're above any nested splitters
+        }}
         onDoubleClick={
           isLastResizer(index) ? toggleLastPanelCollapse : undefined
         }
         onMouseDown={(event) => {
-          handleResize(index, event);
+          handleDragStart(event.clientX, event.clientY, event);
+        }}
+        onTouchStart={(event) => {
+          if (event.touches.length === 1) {
+            const touch = event.touches[0];
+            if (touch) {
+              handleDragStart(touch.clientX, touch.clientY, event);
+            }
+          }
         }}
       ></div>
     );
   };
 
   return (
-    <div className="flex h-full w-full overflow-hidden" ref={splitterRef}>
+    <div
+      className={`flex ${direction === "horizontal" ? "flex-row" : "flex-col"} h-full w-full overflow-hidden`}
+      ref={splitterRef}
+    >
       {panels.map((panel, index) => (
         <React.Fragment key={panel.name}>
           <div
@@ -227,7 +297,8 @@ export const Splitter: React.FC<SplitterProps> = ({
                 index,
               )}`,
 
-              minWidth: 0,
+              minWidth: direction === "horizontal" ? 0 : undefined,
+              minHeight: direction === "vertical" ? 0 : undefined,
               display:
                 (panel.collapsible &&
                   isLastPanelCollapsed &&
@@ -241,6 +312,7 @@ export const Splitter: React.FC<SplitterProps> = ({
           </div>
           {index < panels.length - 1 &&
             !panels[index]?.hidden &&
+            !panels[index + 1]?.hidden &&
             getSplitter(index)}
         </React.Fragment>
       ))}

package/src/index.ts

@@ -19,3 +19,5 @@ export { requestTranslation } from "./editor/services/translationService";
 export { defaultTranslateAll } from "./editor/commands/localizeItem/LocalizeItemUtils";
 
 export * from "./fonts";
+
+export { Card } from "./components/ui/card";

package/src/page-wizard/WizardBox.tsx

@@ -1,40 +1,4 @@
-import { cn } from "../lib/utils";
+import { Card } from "../components/ui/card";
 
-export function WizardBox({
-  children,
-  icon,
-  title,
-  description,
-  className,
-  noPadding,
-}: {
-  children: React.ReactNode;
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  className?: string;
-  noPadding?: boolean;
-}) {
-  return (
-    <div
-      className={cn(
-        "flex h-full flex-col gap-2 rounded-md bg-white",
-        className,
-      )}
-    >
-      <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>
-          <div className="text-base font-bold text-neutral-800">{title}</div>
-        </div>
-        <div className="mb-2 text-xs text-neutral-500">{description}</div>
-      </div>
-
-      <div className={cn("flex-1", noPadding ? "" : "p-6 pt-0", className)}>
-        {children}
-      </div>
-    </div>
-  );
-}
+// Re-export Card as WizardBox for backward compatibility
+export const WizardBox = Card;

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

@@ -7,7 +7,7 @@ import { StepComponentProps } from "../../config/types";
 import { ActionButton } from "../../components/ActionButton";
 import { UploadIcon, DocumentIcon } from "../../editor/ui/Icons";
 import { Spinner } from "../../editor/ui/Spinner";
-import { WizardBox } from "../WizardBox";
+import { Card } from "../../components/ui/card";
 import { LinkIcon } from "lucide-react";
 import { InputTextarea } from "primereact/inputtextarea";
 
@@ -171,12 +171,13 @@ export function CollectStep({
   return (
     <div className="absolute inset-0 overflow-auto">
       <div className="grid grid-cols-2 gap-4">
-        <WizardBox
+        <Card
           icon={<UploadIcon className="text-theme-secondary" />}
           title="Upload a file  (optional)"
           description="Upload a file to the page"
           className="flex-1"
         >
+          {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"
@@ -237,15 +238,13 @@ export function CollectStep({
               </div>
             </div>
           </div>
-        </WizardBox>
-        <WizardBox
+        </Card>
+        <Card
           icon={<LinkIcon className="text-theme-secondary" />}
           title="Scrape page from URL (optional)"
           description="Upload a file to the page"
           className="flex-1"
         >
-          {error && <div className="mt-2 text-sm text-red-500">{error}</div>}
-
           <div className="flex flex-col gap-2">
             <div className="text-sm font-semibold text-gray-700">
               <div className="text-xs font-normal text-gray-500">
@@ -273,8 +272,8 @@ export function CollectStep({
               </ActionButton>
             </div>
           </div>
-        </WizardBox>
-        <WizardBox
+        </Card>
+        <Card
           icon={<DocumentIcon className="text-theme-secondary" />}
           title="Text"
           description="Provide the text you want to use for the page"
@@ -291,7 +290,7 @@ export function CollectStep({
               }))
             }
           />
-        </WizardBox>
+        </Card>
       </div>
     </div>
   );

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.3898";
-export const buildDate = "2025-05-25 15:23:00";
+export const version = "1.0.3899";
+export const buildDate = "2025-05-26 01:54:10";

package/src/splash-screen/NewPage.tsx

@@ -20,6 +20,8 @@ import { ItemDescriptor } from "../editor/pageModel";
 import { useDebouncedCallback } from "use-debounce";
 import { getWizards } from "../page-wizard/service";
 import { Wizard } from "../page-wizard/PageWizard";
+import { Card } from "../components/ui/card";
+import { CardConnector } from "../components/ui/CardConnector";
 export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
   const [selectedItem, setSelectedItem] = useState<ItemDescriptor | null>(null);
   const [isValid, setIsValid] = useState<boolean>(false);
@@ -143,90 +145,115 @@ export function NewPage({ selectedItemId }: { selectedItemId?: string }) {
   };
 
   return (
-    <div className="flex h-full gap-3">
-      <div className="tour-pick-location flex w-1/2 flex-col">
-        <SectionHeadline>1. Pick Location</SectionHeadline>
-        <div className="relative flex-1">
-          <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 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
+        >
+          <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>
-        </div>
+        </Card>
       </div>
-      <div className="w-1/2 border-l pl-7">
-        <SectionHeadline className="tour-choose-template">
-          2. Choose a Template or Wizard
-        </SectionHeadline>
-        <div className="mt-1 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 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"
-                  : "bg-gray-100",
-              )}
-            >
-              {
-                <img
-                  src={getAbsoluteIconUrl(option.icon)}
-                  width="32"
-                  height="32"
-                ></img>
-              }
-              {option.name}
-            </div>
-          ))}
+
+      {/* Card Connector - only visible when location is selected */}
+      {selectedItem && (
+        <div className="hidden items-start justify-center pt-10 md:flex">
+          <CardConnector />
         </div>
-        {selectedTemplate &&
-          wizards?.find((x) => x.id === selectedTemplate) && (
-            <div className="mt-4">
-              <Button
-                onClick={launchWizard}
-                label="Start Wizard"
-                id="launch-wizard-button"
-              />
-            </div>
-          )}
-        {selectedTemplate &&
-          insertOptions?.find((x) => x.id === selectedTemplate) && (
-            <>
-              <SectionHeadline>3. Name Your Page</SectionHeadline>
-
-              <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"
-              />
-              {validationMessage && (
-                <div className="mt-2 text-red-500">{validationMessage}</div>
-              )}
-              <div className="mt-4">
-                <Button
-                  onClick={handleOk}
-                  label="Create"
-                  disabled={!isValid}
-                  id="create-new-page-button"
-                />
+      )}
+
+      {/* Second card - only visible when location is selected */}
+      {selectedItem && (
+        <div className="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"
+          >
+            <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 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>
-            </>
-          )}
-      </div>
+              {selectedTemplate &&
+                wizards?.find((x) => x.id === selectedTemplate) && (
+                  <div className="mt-4">
+                    <Button
+                      onClick={launchWizard}
+                      label="Start Wizard"
+                      id="launch-wizard-button"
+                    />
+                  </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>
+                    <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"
+                    />
+                    {validationMessage && (
+                      <div className="mt-2 text-red-500">
+                        {validationMessage}
+                      </div>
+                    )}
+                    <div className="mt-4">
+                      <Button
+                        onClick={handleOk}
+                        label="Create"
+                        disabled={!isValid}
+                        id="create-new-page-button"
+                      />
+                    </div>
+                  </div>
+                )}
+            </div>
+          </Card>
+        </div>
+      )}
     </div>
   );
 }