@alpaca-editor/core 1.0.4033 → 1.0.4037

package/src/editor/ui/PerfectTree.tsx

@@ -373,7 +373,7 @@ const NodeContent = memo(
       event: React.DragEvent<any>;
       isMultiSelect: boolean;
     }) => void;
-    onDragEnd?: (event: React.DragEvent<any>) => void;
+    onDragEnd?: (event: React.DragEvent<any> | null) => void;
     onDragOverZone?: (
       parent: TreeNode<any> | null,
       index: number,
@@ -427,7 +427,7 @@ const NodeContent = memo(
           onStartDrag({ node, event, isMultiSelect: isMultiSelect ?? false });
         }
       },
-      [node, onStartDrag],
+      [node, onStartDrag, isSelected, selectedKeys],
     );
 
     const handleDragLeave = useCallback((event: React.DragEvent<any>) => {
@@ -642,23 +642,63 @@ export const PerfectTree = <T,>({
 
   // Global drag end handler.
   const isDraggingRef = React.useRef(false);
+  const dragTimeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
+
   useEffect(() => {
     const handleGlobalDragEnd = (event: DragEvent) => {
       if (isDraggingRef.current && onDragEnd) {
         onDragEnd(event as unknown as React.DragEvent);
         isDraggingRef.current = false;
       }
+      // Clear timeout when drag ends properly
+      if (dragTimeoutRef.current !== undefined) {
+        clearTimeout(dragTimeoutRef.current!);
+        dragTimeoutRef.current = undefined;
+      }
+    };
+
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && isDraggingRef.current && onDragEnd) {
+        onDragEnd(null);
+        isDraggingRef.current = false;
+        if (dragTimeoutRef.current !== undefined) {
+          clearTimeout(dragTimeoutRef.current!);
+          dragTimeoutRef.current = undefined;
+        }
+      }
+    };
+
+    const handleMouseLeave = (event: Event) => {
+      // Reset drag state if mouse leaves the window during a drag
+      if (isDraggingRef.current && onDragEnd) {
+        onDragEnd(null);
+        isDraggingRef.current = false;
+        if (dragTimeoutRef.current !== undefined) {
+          clearTimeout(dragTimeoutRef.current!);
+          dragTimeoutRef.current = undefined;
+        }
+      }
     };
 
     document.addEventListener("dragend", handleGlobalDragEnd);
+    document.addEventListener("keydown", handleEscapeKey);
+    window.addEventListener("mouseleave", handleMouseLeave);
+
     return () => {
       document.removeEventListener("dragend", handleGlobalDragEnd);
+      document.removeEventListener("keydown", handleEscapeKey);
+      window.removeEventListener("mouseleave", handleMouseLeave);
     };
   }, [onDragEnd]);
 
   const handleDragEnd = useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
+    (event: React.DragEvent<HTMLDivElement> | null) => {
       isDraggingRef.current = false;
+      // Clear timeout when drag ends normally
+      if (dragTimeoutRef.current !== undefined) {
+        clearTimeout(dragTimeoutRef.current!);
+        dragTimeoutRef.current = undefined;
+      }
       if (onDragEnd) {
         onDragEnd(event);
       }
@@ -666,6 +706,32 @@ export const PerfectTree = <T,>({
     [onDragEnd],
   );
 
+  // Wrapper for onStartDrag that has access to the refs
+  const handleStartDragWithTimeout = useCallback(
+    (data: {
+      node: TreeNode<T>;
+      event: React.DragEvent<any>;
+      isMultiSelect: boolean;
+    }) => {
+      // Set the dragging ref to true when drag starts
+      isDraggingRef.current = true;
+
+      // Set up a timeout to auto-reset drag state if it gets stuck
+      dragTimeoutRef.current = setTimeout(() => {
+        if (isDraggingRef.current && onDragEnd) {
+          onDragEnd(null);
+          isDraggingRef.current = false;
+        }
+      }, 30000); // 30 second timeout
+
+      // Call the original onStartDrag
+      if (onStartDrag) {
+        onStartDrag(data);
+      }
+    },
+    [onStartDrag, onDragEnd],
+  );
+
   // Scroll to selected node when scrollToSelected is enabled and selectedKeys change
   const treeRef = useRef<HTMLDivElement>(null);
 
@@ -840,7 +906,7 @@ export const PerfectTree = <T,>({
                     isSelected={isSelected}
                     onSelect={handleSelect}
                     onToggleNode={handleToggle}
-                    onStartDrag={onStartDrag}
+                    onStartDrag={handleStartDragWithTimeout}
                     onDragEnd={handleDragEnd}
                     onDragOverZone={onDragOverZone}
                     onDrop={onDrop}

package/src/editor/views/CompareView.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useEditContext } from "../client/editContext";
-import { LanguageSelector } from "../menubar/LanguageSelector";
+import { LanguageSelector } from "../../components/ui/LanguageSelector";
 import { VersionSelector } from "../menubar/VersionSelector";
 import { FullItem, ItemDescriptor, Version } from "../pageModel";
 import { usePageViewContext } from "../page-viewer/pageViewContext";
@@ -115,7 +115,7 @@ export function CompareView() {
   }
 
   const originalSelector = (
-    <div className=" gap-1 flex flex-1 flex-shrink-0 items-center justify-center border-b bg-white p-1 text-sm text-gray-600">
+    <div className="flex flex-1 flex-shrink-0 items-center justify-center gap-1 border-b bg-white p-1 text-sm text-gray-600">
       <LanguageSelector
         selectedLanguage={editContext.contentEditorItem?.descriptor?.language}
         showAllLanguagesSwitch={false}
@@ -149,7 +149,7 @@ export function CompareView() {
   );
 
   const compareToSelector = (
-    <div className="gap-1 flex flex-1 flex-shrink-0 items-center justify-center border-b bg-white p-1 text-sm text-gray-600">
+    <div className="flex flex-1 flex-shrink-0 items-center justify-center gap-1 border-b bg-white p-1 text-sm text-gray-600">
       <LanguageSelector
         selectedLanguage={compareTo?.language}
         showAllLanguagesSwitch={false}

package/src/editor/views/EditView.tsx

@@ -9,7 +9,7 @@ export function EditView() {
   if (!editContext.contentEditorItem?.descriptor)
     return (
       <div className="grid h-full w-full items-center justify-center">
-        <div className="text-sm text-gray-500">Not item selected</div>
+        <div className="text-xs text-gray-500">No item selected</div>
       </div>
     );
 

package/src/editor/views/ItemEditor.tsx

@@ -5,7 +5,7 @@ import { ItemInfo } from "../ItemInfo";
 import { useEditContext } from "../client/editContext";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 import { FullItem } from "../pageModel";
-import { LanguageSelector } from "../menubar/LanguageSelector";
+import { LanguageSelector } from "../../components/ui/LanguageSelector";
 
 export function ItemEditor({
   item,

package/src/index.ts

@@ -1,7 +1,10 @@
 export * from "./config/types";
 
 export * from "./types";
-export { useEditorSettings, useItemNameValidation } from "./editor/hooks/useEditorSettings";
+export {
+  useEditorSettings,
+  useItemNameValidation,
+} from "./editor/hooks/useEditorSettings";
 
 export { Editor } from "./editor/Editor";
 
@@ -25,10 +28,13 @@ export * from "./fonts";
 export { Card } from "./components/ui/card";
 export { Button } from "./components/ui/button";
 
-export { getFilteredInputData, setDataProperty } from "./page-wizard/utils/dataAccessor";
+export {
+  getFilteredInputData,
+  setDataProperty,
+} from "./page-wizard/utils/dataAccessor";
+
+export { LanguageSelector } from "./components/ui/LanguageSelector";
 
-export { LanguageSelector } from "./editor/menubar/LanguageSelector";
-export { SimpleLanguageSelector } from "./components/SimpleLanguageSelector";
 export type { Language } from "./editor/pageModel";
 
 export { MainContentTree } from "./editor/sidebar/MainContentTree";

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

@@ -26,7 +26,7 @@ import { usePageCreator } from "./usePageCreator";
 import { useThrottledCallback } from "use-debounce";
 import { InputTextarea } from "primereact/inputtextarea";
 import { Input } from "../../components/ui/input";
-import { LanguageSelector } from "../../editor/menubar/LanguageSelector";
+import { LanguageSelector } from "../../components/ui/LanguageSelector";
 import { EditControls } from "../../editor/menubar/toolbar-sections/EditControls";
 import {
   getFilteredInputData,
@@ -150,7 +150,7 @@ export function ContentStep({
         { editContext, createAiContext: createWizardAiContext },
         {
           allowedFunctions: ["get-children", "create-item"],
-          model: step.fields.aiModel || "gpt-4.1",
+          model: step.fields.aiModel || undefined,
         },
         { signal: abortController.signal },
         (response) => {
@@ -520,7 +520,7 @@ export function ContentStep({
             },
           ],
           { editContext, createAiContext: createWizardAiContext },
-          { model: step.fields.aiModel || "gpt-4.1" },
+          { model: step.fields.aiModel || undefined },
           { signal: abortController.signal },
           (response) => {
             try {
@@ -826,7 +826,7 @@ export function ContentStep({
         },
         {
           allowedFunctions: [],
-          model: step.fields.aiModel || "gpt-4.1",
+          model: step.fields.aiModel || undefined,
           endpoint: "/alpaca/editor/page-wizard/prompt",
         },
         { signal: localAbortController.signal },
@@ -1060,7 +1060,7 @@ export function ContentStep({
                   <div className="relative mb-4">
                     <label
                       htmlFor="language"
-                      className="mb-1 block text-sm font-medium"
+                      className="mb-1 block text-xs font-medium"
                     >
                       Language
                     </label>

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

@@ -246,7 +246,7 @@ Return a JSON object with suggested item IDs in this format:
           createAiContext: createWizardAiContext,
         },
         {
-          model: step.fields.aiModel || "gpt-4.1",
+          model: step.fields.aiModel || undefined,
           allowedFunctions: ["get-children"],
           endpoint: "/alpaca/editor/page-wizard/prompt",
         },

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

@@ -120,7 +120,7 @@ export const ImagesStep = (props: StepComponentProps) => {
           },
         ],
         { editContext: editContext!, createAiContext: createWizardAiContext },
-        { model: "gpt-4.1" },
+        { model: props.step.fields.aiModel || undefined },
         { signal: localAbortController.signal },
       );
 

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

@@ -89,7 +89,7 @@ export function LayoutStep({
           },
         ],
         { editContext, createAiContext: createWizardAiContext },
-        { model: "gpt-4.1" },
+        { model: step.fields.aiModel || undefined },
         { signal: abortController.signal },
         (response: any) => {
           try {

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

@@ -69,7 +69,7 @@ export function MetaDataStep({
             },
           ],
           { editContext, createAiContext: createWizardAiContext },
-          { model: "gpt-4.1" },
+          { model: step.fields.aiModel || undefined },
           { signal: abortController.signal },
           (response: any) => {
             try {

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

@@ -114,7 +114,7 @@ Create ${step.fields.numberOfOptions || 5} relevant options.`,
           },
         ],
         { editContext, createAiContext: createWizardAiContext },
-        { model: step.fields.aiModel || "gpt-4.1" },
+        { model: step.fields.aiModel || undefined },
         { signal: abortController.signal },
       );
 

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

@@ -42,7 +42,7 @@ export function StructureStep({
   // Get the property name from the step or use "structure" as default
   const inputProperties =
     step.fields?.inputProperties || step.fields?.propertyName || "structure";
-  const propertyName = step.fields.propertyName || "structure";
+  const propertyName = step.fields?.propertyName || "structure";
 
   useEffect(() => {
     const { value: existingStructure, error } = evaluateDataExpression(
@@ -79,8 +79,19 @@ export function StructureStep({
       inputProperties,
       data,
     );
-    if (existingStructure) {
+    if (Array.isArray(existingStructure)) {
       setStructure(existingStructure);
+    } else if (
+      existingStructure &&
+      typeof existingStructure === "object" &&
+      Array.isArray((existingStructure as any).sections)
+    ) {
+      setStructure((existingStructure as any).sections);
+    } else if (existingStructure !== undefined) {
+      console.warn(
+        "StructureStep: existing structure is not an array; ignoring value",
+        existingStructure,
+      );
     }
   }, [data, inputProperties]);
 
@@ -177,7 +188,7 @@ ${customInstructionsResult.value ? `Additional requirements: ${customInstruction
         { editContext, createAiContext: createWizardAiContext },
         {
           allowedFunctions: [],
-          model: step.fields.aiModel || "gpt-4.1",
+          model: step.fields.aiModel || undefined,
           endpoint: "/alpaca/editor/page-wizard/prompt",
         },
         undefined,
@@ -196,18 +207,31 @@ ${customInstructionsResult.value ? `Additional requirements: ${customInstruction
               sections: StructureElement[];
             };
 
-            setStructure(generatedStructure.sections);
-            setData((prevData) =>
-              setDataProperty(
-                propertyName,
-                generatedStructure.sections,
-                prevData,
-              ),
-            );
-            setInternalState((state: any) => ({
-              ...state,
-              [step.id + "structure"]: generatedStructure.sections,
-            }));
+
+            const sections: StructureElement[] | undefined = Array.isArray(
+              generatedStructure?.sections,
+            )
+              ? generatedStructure.sections
+              : undefined;
+
+            if (!sections) {
+              console.error(
+                "StructureStep: AI response missing valid 'sections' array",
+                generatedStructure,
+              );
+              setError(
+                "Failed to parse structure. The response did not include a valid 'sections' array.",
+              );
+            } else {
+              setStructure(sections);
+              setData((prevData) =>
+                setDataProperty(propertyName, sections, prevData),
+              );
+              setInternalState((state: any) => ({
+                ...state,
+                [step.id + "structure"]: sections,
+              }));
+            }
           }
         } catch (parseError) {
           console.error("Error parsing structure:", parseError);
@@ -316,7 +340,7 @@ ${customInstructionsResult.value ? `Additional requirements: ${customInstruction
           )}
 
           {/* Generated Structure */}
-          {structure.length > 0 && (
+          {(structure?.length ?? 0) > 0 && (
             <div className="space-y-4">
               <h3 className="text-sm font-medium text-gray-900">
                 Generated Structure
@@ -401,7 +425,7 @@ ${customInstructionsResult.value ? `Additional requirements: ${customInstruction
             <ActionButton onClick={generateStructure} disabled={loading}>
               <div className="flex items-center gap-2">
                 <Settings className="h-4 w-4" />
-                {structure.length > 0
+                {(structure?.length ?? 0) > 0
                   ? "Regenerate Structure"
                   : "Generate Structure"}
               </div>