@alpaca-editor/core 1.0.3955 → 1.0.3959

package/src/tour/Tour.tsx

@@ -9,6 +9,7 @@ import { ActionButton } from "../components/ActionButton";
 export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
   const [currentStep, setCurrentStep] = useState<string>("start-tour");
   const [show, setShow] = useState(true);
+  const [bubbleVisible, setBubbleVisible] = useState(true);
   const editContext = useEditContext();
   const [focusRect, setFocusRect] = useState<DOMRect | null>(null);
   const [pointToRect, setPointToRect] = useState<DOMRect | null>(null);
@@ -36,7 +37,6 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
             rect.width + extendFocus,
             rect.height + extendFocus,
           );
-
           resolve(rect);
         } else if (timeout > 0 && Date.now() - startTime >= timeout) {
           resolve(undefined);
@@ -178,6 +178,16 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
       await delay(randomDelay);
     }
   }
+  /**
+   * Animated step change with fade out/in transition
+   */
+  const animatedStepChange = async (newStepId: string) => {
+    setBubbleVisible(false); // Fade out
+    await delay(200); // Wait for fade out
+    setCurrentStep(newStepId); // Change content
+    await delay(50); // Small delay
+    setBubbleVisible(true); // Fade in
+  };
 
   /**
    * Stops the tour and resets the state.
@@ -191,10 +201,9 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
   const tours = editContext!.configuration.tours;
   const tour =
     tours[editContext!.configuration.activeTour as keyof typeof tours];
-
   const tourSteps = tour.getSteps({
     editContext: editContext as EditContextType,
-    nextStep: (stepId) => setCurrentStep(stepId),
+    nextStep: (stepId) => animatedStepChange(stepId),
     stopTour: () => tourStopCallback(),
     waitForElement,
     waitForElementToDisappear,
@@ -224,22 +233,20 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
 
       if (step.focusElement) {
         const rect = await waitForElement(step.focusElement, 5000);
-        if (!rect) setCurrentStep("error");
+        if (!rect) animatedStepChange("error");
         else setFocusRect(rect);
       }
 
-      setShow(true);
-
-      if (step.waitForUserInput) {
+      setShow(true);      if (step.waitForUserInput) {
         const nextStep = (await step.waitForUserInput()) || step.nextStep;
         if (nextStep) {
-          setCurrentStep(nextStep);
+          animatedStepChange(nextStep);
         } else console.log("no next step defined for step", currentStep);
       } else {
         if (step.waitForElement) {
           await waitForElement(step.waitForElement);
           if (step.nextStep) {
-            setCurrentStep(step.nextStep);
+            animatedStepChange(step.nextStep);
           }
         }
       }
@@ -274,8 +281,23 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
   if (!step) {
     throw new Error(`Tour step ${currentStep} not found`);
   }
-
-  const bubblePosition = step.bubblePosition || "right";
+  // On mobile, always use bottom or top positioning for better UX
+  const isMobile = window.innerWidth < 768;
+  let bubblePosition: "left" | "right" | "bottom" | "top-right" = step.bubblePosition as
+    | "left"
+    | "right"
+    | "bottom"
+    | "top-right"
+    || "right";
+  
+  if (isMobile) {
+    // On mobile, prefer bottom positioning, but use top if element is in bottom half of screen
+    if (pointToRect && pointToRect.top > window.innerHeight / 2) {
+      bubblePosition = "top-right"; // We'll use top-right but modify it for mobile
+    } else {
+      bubblePosition = "bottom";
+    }
+  }
   const bubbleStyle: React.CSSProperties = {};
 
   let boxStyle: React.CSSProperties = {
@@ -312,12 +334,12 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
       arrowStyle = {
         marginRight: "-20px",
       };
-    }
-
+    }    
+    
     if (bubblePosition === "bottom") {
       boxStyle = {
         position: "absolute",
-        left: pointToRect.left + pointToRect.width / 2,
+        left: isMobile ? "50%" : pointToRect.left + pointToRect.width / 2,
         top: pointToRect.top + pointToRect.height,
         transform: "translate(-50%, 0)",
       };
@@ -331,7 +353,7 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
     if (bubblePosition === "top-right") {
       boxStyle = {
         position: "absolute",
-        left: pointToRect.left + pointToRect.width,
+        left: isMobile ? "50%" : pointToRect.left + pointToRect.width,
         bottom: window.innerHeight - pointToRect.top,
         transform: "translate(-50%, 0)",
         flexDirection: "column-reverse",
@@ -344,11 +366,60 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
         arrowStyle = {
           transform: "scaleX(-1)",
         };
+      }    }   
+  }
+
+  // Viewport correction: ensure bubble stays within screen bounds
+  const getCorrectedBoxStyle = (style: React.CSSProperties): React.CSSProperties => {
+    if (!pointToRect) return style;
+    
+    const correctedStyle = { ...style };
+    const margin = 10; // Small margin from screen edges
+    
+    // For absolute positioning, check if bubble would be outside viewport
+    if (correctedStyle.position === 'absolute') {
+      // If bubble would be too far down, move it up (can overlap with target element)
+      if (typeof correctedStyle.top === 'number') {
+        const maxTop = window.innerHeight - 250; // Reserve 250px for bubble height
+        if (correctedStyle.top > maxTop) {
+          correctedStyle.top = Math.max(margin, maxTop);
+        }
+      }
+      
+      // If bubble would be too far right, move it left
+      if (typeof correctedStyle.left === 'number') {
+        const bubbleWidth = isMobile ? window.innerWidth * 0.95 : 500;
+        const maxLeft = window.innerWidth - bubbleWidth - margin;
+        if (correctedStyle.left > maxLeft) {
+          correctedStyle.left = Math.max(margin, maxLeft);
+        }
+      }
+      
+      // Handle right positioning
+      if (typeof correctedStyle.right === 'number') {
+        const bubbleWidth = isMobile ? window.innerWidth * 0.95 : 500;
+        if (correctedStyle.right > window.innerWidth - bubbleWidth - margin) {
+          correctedStyle.right = margin;
+        }
+      }
+      
+      // Handle bottom positioning - if too high, place at bottom of screen
+      if (typeof correctedStyle.bottom === 'number') {
+        const maxBottom = window.innerHeight - 250;
+        if (correctedStyle.bottom > maxBottom) {
+          delete correctedStyle.bottom;
+          correctedStyle.top = window.innerHeight - 200 - margin; // Place near bottom
+        }
       }
     }
-  }
+    
+    return correctedStyle;
+  };
 
-  const arrowRotation = bubblePosition === "right" ? "-a-rotate-90" : "";
+  // Apply viewport correction
+  boxStyle = getCorrectedBoxStyle(boxStyle);
+
+  const arrowRotation = bubblePosition === "right" ? "-rotate-90" : "";
 
   const overlayStyle: React.CSSProperties = {
     position: "fixed",
@@ -358,6 +429,7 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
     height: "100%",
     backgroundColor: "rgba(0, 0, 0, 0.3)",
     pointerEvents: "auto",
+    transition: "all 0.2s ease-in-out",
     clipPath: focusRect
       ? `polygon(0% 0%, 0% 100%,  ${focusRect.left}px 100%, ${
           focusRect.left
@@ -380,26 +452,30 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
   return (
     <>
       <div className="overlay" style={overlayStyle}></div>
-
+      
       <div
         style={boxStyle}
-        className="fade-in flex flex-col items-center text-gray-800"
+        className={`fade-in flex flex-col items-center text-gray-800 transition-opacity duration-200 ${
+          bubbleVisible ? 'opacity-100' : 'opacity-0'
+        }`}
       >
         {focusRect && (
-          <svg
-            width="100px"
-            height="100px"
-            viewBox="0 -7.89 113.08 113.08"
-            xmlns="http://www.w3.org/2000/svg"
-            className={classNames("pointer-events-none", arrowRotation)}
-            style={arrowStyle}
-          >
+          <div className="pointer-events-none">
+            <svg
+              width="100px"
+              height="100px"
+              viewBox="0 -7.89 113.08 113.08"
+              xmlns="http://www.w3.org/2000/svg"
+              className={classNames("pointer-events-none", arrowRotation)}
+              style={arrowStyle}
+            >
             <path
               style={{ stroke: "#0000ff", fill: "#0000ff" }}
               d="M20.1871 175C15.7485 172.891 13.0008 172.469 12.1553 170.992C8.98489 165.508 5.39173 160.024 3.70083 153.908C-1.37187 137.666 -0.737781 121.214 2.64402 104.762C8.35081 76.7092 21.0325 51.8201 36.8847 28.1966C38.5756 25.6655 40.0552 23.1344 41.7461 20.3924C41.7461 20.1814 41.5347 19.7596 41.112 19.1268C36.462 20.3923 31.6007 21.6579 26.9507 22.7125C24.4144 23.1344 21.4552 23.1344 18.9189 22.2907C17.4394 21.8688 15.3258 19.5486 15.3258 18.0722C15.3258 16.1739 16.8053 13.8537 18.0735 12.1663C19.1303 11.1117 21.0326 10.9008 22.7235 10.4789C35.4052 7.31508 48.087 3.72935 60.9801 0.776411C71.9709 -1.75468 75.564 1.83105 74.9299 12.5882C74.2959 23.7672 74.0845 34.9462 73.6618 45.9142C73.4505 49.289 72.8164 52.8747 72.3936 56.6714C63.5164 52.6638 63.5164 52.6638 60.346 18.494C47.0301 33.2588 38.1529 49.289 29.9098 65.7411C21.6666 82.1932 16.1712 99.489 13.2121 117.839C10.2531 136.823 13.8462 154.751 20.1871 175Z"
               fill="#0D1927"
-            />
+              />
           </svg>
+          </div>
         )}
 
         <style>
@@ -421,16 +497,28 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
                     `}
         </style>
         <div
-          className={`border-theme-secondary relative flex items-stretch justify-center gap-6 rounded-lg border bg-gray-50 shadow-2xl`}
+          className={`border-theme-secondary relative flex rounded-lg border bg-gray-50 shadow-2xl ${
+            isMobile 
+              ? 'w-[95vw] flex-col items-center gap-3 p-4' 
+              : 'items-stretch justify-center gap-6'
+          }`}
           style={bubbleStyle}
-        >
-          <div className="flex flex-col items-end justify-end gap-2 pt-5">
-            <div className="bg-wizard-tour aspect-square w-40"></div>
+        > 
+          <div className={`flex flex-col gap-2 ${
+            isMobile ? 'items-center justify-center' : 'items-end justify-end pt-5'
+          }`}>
+            <div className={`bg-wizard-tour aspect-square ${
+              isMobile ? 'w-20' : 'w-40'
+            }`}></div>
           </div>
-          <div className="flex flex-col items-end justify-between gap-3 p-6">
+          <div className={`flex flex-col gap-3 ${
+            isMobile ? 'items-center justify-center p-3' : 'items-end justify-between p-6'
+          }`}>
             {/* Step Content */}
             <div className="flex items-start">
-              <div className="flex max-w-[450px] flex-col gap-2 text-center text-2xl text-gray-800">
+              <div className={`flex flex-col gap-2 text-center text-gray-800 ${
+                isMobile ? 'max-w-[80vw] text-lg' : 'max-w-[450px] text-2xl'
+              }`}>
                 <div className="flex items-center gap-3">
                   <Logo className="w-8" />
                   <div className="text-xl font-bold">{step.title}</div>
@@ -440,6 +528,9 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
               <button
                 className="text-2xs flex cursor-pointer items-center gap-2 font-bold"
                 onClick={stopTour}
+                type="button"
+                title="Close tour"
+                aria-label="Close tour"
               >
                 <X className="h-4 w-4" />
               </button>

package/src/tour/default-tour.tsx

@@ -52,8 +52,8 @@ export function getDefaultTourSteps(
           className: "button button-secondary mt-2",
         },
       ],
-    },
-    "new-page": {
+    },    "new-page": {
+      title: "Create a New Page",
       description: (
         <>
           Click on the <b>New Page</b> tab to create a new page
@@ -65,30 +65,39 @@ export function getDefaultTourSteps(
         await waitForElement(".tour-pick-location");
       },
       nextStep: "pick-location",
-    },
-    "pick-location": {
+    },    "pick-location": {
+      title: "Choose Location",
       description: (
         <>
           Open up a folder for your page
         </>
       ),
-      focusElement: ".tree-container",
-      bubblePosition: "bottom",
+      focusElement: ".tour-pick-location",
+      bubblePosition: "right",
       waitForUserInput: async () => {
         await waitForElement(".bg-theme-secondary-light");
       },
       nextStep: "choose-template",
-    },
-    "choose-template": {
+    },    "choose-template": {
+      title: "Select Template",
       description: "Select a template for your page",
       focusElement: ".tour-choose-template",
       waitForUserInput: async () => {
-        await waitForElement(".bg-theme-secondary-light");
+        return new Promise<void>((resolve) => {
+          const templateArea = document.querySelector(".tour-choose-template");
+          if (templateArea) {
+            const handleClick = () => {
+              templateArea.removeEventListener("click", handleClick);
+              resolve();
+            };
+            templateArea.addEventListener("click", handleClick);
+          }
+        });
       },
       bubblePosition: "left",
       nextStep: "enter-name",
-    },
-    "enter-name": {
+    },    "enter-name": {
+      title: "Name Your Page",
       description: "Enter a name for your page",
       focusElement: "#new-page-name",
       bubblePosition: "left",
@@ -96,25 +105,25 @@ export function getDefaultTourSteps(
         await waitForElement("#create-new-page-button:not([disabled])");
       },
       nextStep: "create-page",
-    },
-    "create-page": {
+    },    "create-page": {
+      title: "Create Page",
       description: "Click the Create button",
       focusElement: "#create-new-page-button",
-      bubblePosition: "bottom",
+      bubblePosition: "left",
       waitForUserInput: async () => {
         // wait for loading spinner
         await waitForElement(".pi-cog");
       },
       nextStep: "loading",
-    },
-    "loading": {
+    },    "loading": {
+      title: "Loading...",
       description: "Waiting for your new page...",
       waitForUserInput: async () => {
         await waitForElementToDisappear(".pi-cog");
       },
       nextStep: "ready-to-add-component",
-    },
-    "ready-to-add-component": {
+    },    "ready-to-add-component": {
+      title: "Ready to Add Components",
       description: "Wanna add a component to your beautiful empty page?",
       buttons: [
         {
@@ -132,8 +141,8 @@ export function getDefaultTourSteps(
           },
         },
       ],
-    },
-    "insert-component": {
+    },    "insert-component": {
+      title: "Insert Component",
       description: "Excellent, click on the plus button to insert a component.",
       focusElement: "#insert-component-button",
       bubblePosition: "bottom",
@@ -141,17 +150,17 @@ export function getDefaultTourSteps(
         await waitForElement(".tour-component-palette");
       },
       nextStep: "drag-component",
-    },
-    "drag-component": {
+    },    "drag-component": {
+      title: "Drag & Drop Component",
       description: `Drag and drop a ${config.firstComponentTemplateName} component to your page.`,
       focusElement: `#insert-component-${config.firstComponentTemplateId}`,
-      bubblePosition: "bottom",
+      bubblePosition: "right",
       waitForUserInput: async () => {
         await waitForElement(".tour-placeholder-dropzone");
       },
       nextStep: "drop-component-on-placeholder",
-    },
-    "drop-component-on-placeholder": {
+    },    "drop-component-on-placeholder": {
+      title: "Drop Here!",
       description: "Drop the component onto this placeholder!",
       focusElement: ".tour-placeholder-dropzone",
       bubblePosition: "left",
@@ -165,8 +174,8 @@ export function getDefaultTourSteps(
         return "drag-component";
       },
       nextStep: "enter-title",
-    },
-    "enter-title": {
+    },    "enter-title": {
+      title: "Fill in Content",
       description: `Excellent! Now lets fill in the fields. First enter a ${config.firstComponentTextFieldName}`,
       focusElement: `[data-field-id='${config.firstComponentTextFieldId}']`,
       waitForUserInput: async () => {
@@ -177,8 +186,8 @@ export function getDefaultTourSteps(
         );
       },
       nextStep: "see-content-update",
-    },
-    "see-content-update": {
+    },    "see-content-update": {
+      title: "Live Updates",
       description:
         "See how the content is automatically updating on your page?",
       focusElement: `[data-field-id='${config.firstComponentTextFieldId}']`,
@@ -193,8 +202,8 @@ export function getDefaultTourSteps(
         );
       },
       nextStep: "edit-content-inline",
-    },
-    "edit-content-inline": {
+    },    "edit-content-inline": {
+      title: "Inline Editing",
       description:
         "You can also directly edit the content on the page. Click on the [Introduction] placeholder here and start typing!",
       focusElement: `iframe:[data-fieldid='${config.firstComponentRichTextFieldId}']`,
@@ -208,8 +217,8 @@ export function getDefaultTourSteps(
         );
       },
       nextStep: "ai-intro",
-    },
-    "ai-intro": {
+    },    "ai-intro": {
+      title: "AI-Powered Editing",
       description:
         "But hey, this is an AI editor, so why not let the AI do some of the work for you?",
       buttons: [
@@ -222,16 +231,17 @@ export function getDefaultTourSteps(
           onClick: () => nextStep("ai-sidebar"),
         },
       ],
-    },
-    "ai-sidebar": {
+    },    "ai-sidebar": {
+      title: "Open AI Chat",
       description: "Click on the AI sidebar to open the AI chat.",
       focusElement: `[data-sidebarview-name='ai']`,
+      bubblePosition: "right",
       nextStep: "ai-terminal",
       waitForElement: "[data-sidebarview-name='ai'].active",
-    },
-    "ai-terminal": {
+    },    "ai-terminal": {
+      title: "AI Assistant",
       description:
-        "Let me take control and add tell the AI to add some more components.",
+        "Let me take control and tell the AI to add some more components.",
       focusElement: `.tour-ai-terminal textarea`,
       waitForUserInput: async () => {
         await delay(1000);
@@ -240,25 +250,25 @@ export function getDefaultTourSteps(
           (aiTerminal as HTMLTextAreaElement).focus();
           await simulateTyping(
             aiTerminal as HTMLTextAreaElement,
-            `Plase add three components of type ${config.firstComponentTemplateName} with some funny dummy content to the page.`,
+            `Please add three components of type ${config.firstComponentTemplateName} with some funny dummy content to the page.`,
           );
         }
       },
       bubblePosition: "top-right",
       nextStep: "ai-submit",
-    },
-    "ai-submit": {
+    },    "ai-submit": {
+      title: "Send AI Request",
       description: "Click on the Send button to submit the prompt to the AI.",
       focusElement: ".tour-ai-terminal .tour-send-button",
       bubblePosition: "top-right",
       nextStep: "ai-watch-components-added",
-      waitForElement: ".tour-ai-terminal .a-prompt",
-    },
-    "ai-watch-components-added": {
+      waitForElement: ".tour-ai-terminal .prompt",
+    },    "ai-watch-components-added": {
+      title: "AI Magic in Action",
       description:
         "Watch how the AI adds the components to the page. This can take a few seconds.",
       focusElement: ".tour-ai-terminal",
-      pointToElement: ".tour-ai-terminal .a-prompt",
+      pointToElement: ".tour-ai-terminal .prompt",
       waitForElement: ".tour-ai-response-message-changes",
       nextStep: "congratulations",
     },

package/src/types.ts

@@ -152,6 +152,8 @@ export type View = {
 export type UserInfo = {
   user: User;
   views: View[];
+  browseHistory?: UserBrowseHistoryEntry[];
+  preferences: UserPreferences;
 };
 
 export type User = {
@@ -162,6 +164,12 @@ export type User = {
   isLimitedPreviewUser?: boolean;
 };
 
+export type UserPreferences = {
+  pinnedViews?: string[];
+  showViewNames?: boolean;
+  showRightSidebar?: boolean;
+};
+
 export type HistoryEntry = {
   name: string;
   path: string;
@@ -173,6 +181,18 @@ export type HistoryEntry = {
   language: string;
 };
 
+export type UserBrowseHistoryEntry = {
+  id: number;
+  userName: string;
+  itemId: string;
+  itemLanguage: string;
+  itemVersion: number;
+  visitedAt: string;
+  sessionId?: string;
+  itemPath: string;
+  itemName: string;
+};
+
 export type FieldHistoryItem = {
   user: string;
   date: string;
@@ -320,7 +340,7 @@ export interface SuggestedEdit {
   author?: string;
   authorDisplayName?: string;
   created?: string;
-  status: string;
+  status: "rejected" | "applied" | "pending";
   updatedBy?: string;
   updated?: string;
   comments?: string;