@alpaca-editor/core 1.0.4014 → 1.0.4017

package/src/editor/sidebar/ComponentPalette.tsx

@@ -7,7 +7,7 @@ import { InsertOption } from "../../types";
 
 import { useEditContext } from "../client/editContext";
 import { FilterInput, highlightMatch } from "../../components/FilterInput";
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 
 export function ComponentPalette({}: {}) {
   const editContext = useEditContext()!;
@@ -16,6 +16,41 @@ export function ComponentPalette({}: {}) {
 
   const insertOptions = getInsertOptionsForCurrentSelection(editContext);
 
+  // Auto-focus filter input when typing
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      // Only handle if the filter input is not already focused
+      if (document.activeElement === filterRef.current) {
+        return;
+      }
+
+      // Only handle printable characters (not special keys like arrows, escape, etc.)
+      if (
+        event.key.length === 1 &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.altKey
+      ) {
+        // Focus the filter input
+        filterRef.current?.focus();
+
+        // Clear current filter and set to the typed character
+        setFilter(event.key);
+
+        // Prevent the default action to avoid any other handlers
+        event.preventDefault();
+      }
+    }
+
+    // Add event listener to the document
+    document.addEventListener("keydown", handleKeyDown);
+
+    // Cleanup
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
   const insertOptionsByGroup = insertOptions.reduce(
     (acc, value) => {
       const group = value.group || "Other";

package/src/editor/sidebar/Debug.tsx

@@ -7,6 +7,7 @@ import { getComponentByIdFromHeadlessLayout } from "../componentTreeHelper";
 import { ObjectInspector, ObjectLabel, ObjectRootLabel } from "react-inspector";
 import { Component } from "../pageModel";
 import { useEditContext } from "../client/editContext";
+import { usePageViewContext } from "../page-viewer/pageViewContext";
 
 import { getPageJson } from "../services/contentService";
 
@@ -17,20 +18,27 @@ export function Debug({}: {}) {
   const editContext = useEditContext();
   if (!editContext) return;
 
+  const pageViewContext = usePageViewContext({
+    pageItemDescriptor: editContext.contentEditorItem?.descriptor,
+    itemsRepository: editContext.itemsRepository,
+    configuration: editContext.configuration,
+  });
+
   useEffect(() => {
     const loadLayout = async () => {
-      if (
-        !editContext.contentEditorItem ||
-        !editContext.contentEditorItem.hasLayout
-      )
-        return;
+      // Only load layout for headless page items
+      if (!editContext.contentEditorItem || !pageViewContext.isHeadless) return;
       const layout = await getPageJson(
         editContext.contentEditorItem.descriptor,
       );
       setPageLayout(layout);
     };
     loadLayout();
-  }, [editContext.contentEditorItem, editContext.itemsRepository.revision]);
+  }, [
+    editContext.contentEditorItem,
+    editContext.itemsRepository.revision,
+    pageViewContext.isHeadless,
+  ]);
 
   const page = pageLayout; // editContext.page;
   let component = null;

package/src/editor/ui/ItemSearch.tsx

@@ -27,6 +27,7 @@ interface SearchProps {
   language?: string;
   resultClassName?: string;
   autoFocus?: boolean;
+  disabled?: boolean;
 }
 
 export const ItemSearch: React.FC<SearchProps> = ({
@@ -36,6 +37,7 @@ export const ItemSearch: React.FC<SearchProps> = ({
   language,
   resultClassName,
   autoFocus = false,
+  disabled = false,
 }) => {
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<ResultItem[]>([]);
@@ -44,7 +46,7 @@ export const ItemSearch: React.FC<SearchProps> = ({
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleSearch = useDebouncedCallback(async (searchPrompt: string) => {
-    if (!editContext) return;
+    if (!editContext || disabled) return;
 
     setLoading(true);
     const currentQuery = searchPrompt;
@@ -97,13 +99,13 @@ export const ItemSearch: React.FC<SearchProps> = ({
   }, 600);
 
   useEffect(() => {
-    if (query) {
+    if (query && !disabled) {
       setLoading(true);
       handleSearch(query);
     } else {
       setResults([]);
     }
-  }, [query]);
+  }, [query, disabled]);
 
   useEffect(() => {
     if (inputRef.current && autoFocus) {
@@ -122,6 +124,7 @@ export const ItemSearch: React.FC<SearchProps> = ({
           autoFocus={autoFocus}
           placeholder="Search..."
           loading={loading}
+          disabled={disabled}
         />
       </div>
       {results.length > 0 && (

package/src/editor/ui/SimpleTabs.tsx

@@ -1,4 +1,5 @@
 import { twMerge } from "tailwind-merge";
+import { Spinner } from "./Spinner";
 
 export type Tab = {
   label: string;
@@ -14,12 +15,14 @@ export function SimpleTabs({
   activeTab,
   className,
   tabClassName,
+  isLoading = false,
 }: {
   tabs: Tab[];
   setActiveTab: (index: number) => void;
   activeTab: number;
   className?: string;
   tabClassName?: string;
+  isLoading?: boolean;
 }) {
   if (activeTab > tabs.length - 1) {
     activeTab = 0;
@@ -33,7 +36,7 @@ export function SimpleTabs({
 
   return (
     <>
-      <div className={twMerge("flex flex-wrap gap-2", className)}>
+      <div className={twMerge("flex items-start gap-2", className)}>
         {tabs.map((tab, index) => (
           <button
             id={tab.id}
@@ -56,7 +59,13 @@ export function SimpleTabs({
             <span className="truncate">{tab.label}</span>
           </button>
         ))}
+        {isLoading && (
+          <div className="flex items-center">
+            <Spinner size="md" />
+          </div>
+        )}
       </div>
+
       {tabs[activeTab]?.content}
     </>
   );

package/src/editor/ui/Spinner.tsx

@@ -1,7 +1,7 @@
 export function Spinner({
   size = "4xl",
 }: {
-  size?: "2xl" | "3xl" | "4xl" | "5xl";
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl";
 }) {
   return (
     <i

package/src/page-wizard/WizardSteps.tsx

@@ -127,9 +127,8 @@ function NavigationSteps({
       <div className="p-2.5 text-xs">
         <div className="flex items-center gap-3 md:justify-center">
           {wizard.steps.map((step, index) => (
-            <>
+            <React.Fragment key={step.id}>
               <div
-                key={step.id}
                 ref={(el) => {
                   stepRefs.current[index] = el;
                 }}
@@ -177,7 +176,7 @@ function NavigationSteps({
                   )}
                 />
               )}
-            </>
+            </React.Fragment>
           ))}
         </div>
       </div>

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

@@ -164,7 +164,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 ${
+            className={`border-theme-secondary flex flex-col items-center justify-center border border-dashed p-8 ${
               isUploading ? "" : "bg-white"
             }`}
             onDrop={handleDrop}

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

@@ -27,6 +27,7 @@ import { useThrottledCallback } from "use-debounce";
 import { InputTextarea } from "primereact/inputtextarea";
 import { InputText } from "primereact/inputtext";
 import { LanguageSelector } from "../../editor/menubar/LanguageSelector";
+import { EditControls } from "../../editor/menubar/toolbar-sections/EditControls";
 import { getFilteredInputData } from "../utils/dataAccessor";
 
 import { WizardBox } from "../WizardBox";
@@ -188,7 +189,7 @@ export function ContentStep({
   ]);
 
   useEffect(() => {
-    editContext?.setMode("edit");
+    editContext?.setMode("preview");
     if (!internalState.layoutInstructions) {
       setInternalState({
         ...internalState,
@@ -670,9 +671,10 @@ export function ContentStep({
           description="Configure the page name, target location and language for your new page"
           collapsible="yes"
           summary={
-            <div className="text-xs text-gray-500">
-              Folder: {fullParentItem?.path}, Language: {language}, Name:{" "}
-              {pageModel.name || "Not set"}
+            <div className="flex flex-col gap-2 text-xs break-all text-gray-500">
+              <div>Folder: {fullParentItem?.path}</div>
+              <div>Language: {language}</div>
+              <div>Name: {pageModel.name || "Not set"}</div>
             </div>
           }
           className="w-full md:w-96"
@@ -680,7 +682,7 @@ export function ContentStep({
           <div className="flex flex-col items-stretch">
             <div className="relative flex-1">
               {isGenerating ? (
-                <div className="flex h-full items-center justify-center pb-4">
+                <div className="mt-4 flex h-full items-center justify-center pb-4">
                   <Generate title="Generating page name..." size="medium" />
                 </div>
               ) : (
@@ -845,6 +847,7 @@ export function ContentStep({
             noPadding={true}
             className="flex-1"
             showFullscreenButton={true}
+            headerActions={<EditControls hideSuggestions />}
           >
             <div
               className={cn(
@@ -852,13 +855,16 @@ export function ContentStep({
                 pageLoaded ? "h-full" : "h-0",
               )}
             >
-              <PageViewer
-                name="single"
-                compareView={false}
-                showFormEditor={false}
-                followEditsDefault={true}
-                pageViewContext={editContext!.pageView}
-              />
+              <div className="bg-gray-5 h-full">
+                <PageViewer
+                  name="single"
+                  compareView={false}
+                  showFormEditor={editContext?.mode === "edit"}
+                  followEditsDefault={true}
+                  pageViewContext={editContext!.pageView}
+                  noMargins={true}
+                />
+              </div>
             </div>
           </WizardBox>
         </>

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

@@ -28,10 +28,6 @@ export function FindItemsStep({
   const [selectedItems, setSelectedItems] = useState<ItemTreeNodeData[]>([]);
   const [rootItemIds, setRootItemIds] = useState<string[]>([]);
   const [selectedValues, setSelectedValues] = useState<string[]>([]);
-  const [aiSuggestions, setAiSuggestions] = useState<string[]>([]);
-  const [aiSuggestedItems, setAiSuggestedItems] = useState<ItemTreeNodeData[]>(
-    [],
-  );
   const [loadingAI, setLoadingAI] = useState(false);
   const [loadingAIItems, setLoadingAIItems] = useState(false);
   const [aiError, setAiError] = useState<string | null>(null);
@@ -147,8 +143,6 @@ export function FindItemsStep({
           hasLayout: false,
         }));
 
-        setAiSuggestedItems(suggestedItems);
-
         // Auto-apply suggestions
         const itemsToApply = multiSelect
           ? suggestedItems
@@ -156,12 +150,6 @@ export function FindItemsStep({
 
         if (itemsToApply.length > 0) {
           handleSelectionChange(itemsToApply);
-
-          // Clear suggestions after applying them
-          setTimeout(() => {
-            setAiSuggestions([]);
-            setAiSuggestedItems([]);
-          }, 2000); // Show the "applied" message for 2 seconds before clearing
         }
       }
     } catch (error) {
@@ -251,11 +239,10 @@ Return a JSON object with suggested item IDs in this format:
             };
 
             const suggestionIds = suggestions.suggestions || [];
-            setAiSuggestions(suggestionIds);
             setAiError(null); // Clear any previous errors
             console.log("AI Reasoning:", suggestions.reasoning);
 
-            // Fetch full item details for the suggestions
+            // Fetch full item details for the suggestions and apply them directly
             await fetchAISuggestedItems(suggestionIds);
           }
         } catch (parseError) {
@@ -466,42 +453,6 @@ Return a JSON object with suggested item IDs in this format:
             {aiError}
           </div>
         )}
-
-        {/* AI Suggestions Applied */}
-        {(aiSuggestions.length > 0 || aiSuggestedItems.length > 0) && (
-          <div className="rounded-md bg-green-50 p-3">
-            <h4 className="text-sm font-medium text-green-900">
-              AI Suggestions Applied (
-              {Math.max(aiSuggestions.length, aiSuggestedItems.length)}):
-            </h4>
-            <div className="mt-2 flex flex-wrap gap-2">
-              {aiSuggestedItems.length > 0
-                ? aiSuggestedItems.map((item) => (
-                    <span
-                      key={item.id}
-                      className="inline-flex items-center gap-1 rounded-md bg-green-100 px-2 py-1 text-xs text-green-800"
-                    >
-                      {item.icon && (
-                        <img src={item.icon} alt="" className="h-3 w-3" />
-                      )}
-                      {item.name}
-                    </span>
-                  ))
-                : aiSuggestions.map((suggestionId) => (
-                    <span
-                      key={suggestionId}
-                      className="inline-flex items-center rounded-md bg-green-100 px-2 py-1 text-xs text-green-800"
-                    >
-                      {suggestionId}
-                    </span>
-                  ))}
-            </div>
-            <p className="mt-2 text-xs text-green-700">
-              These items were automatically selected by AI based on your input
-              data.
-            </p>
-          </div>
-        )}
       </div>
 
       <div className="flex-1 overflow-hidden rounded-md border border-gray-300">

package/src/page-wizard/steps/usePageCreator.ts

@@ -131,7 +131,7 @@ export function usePageCreator(
     }
 
     // Wait for the component to be created
-    const componentId = addComponentOp.componentId;
+    const componentId = stripGuid(addComponentOp.componentId);
     console.log("! Waiting for component to be created", componentId);
 
     let createdComponent;
@@ -148,9 +148,8 @@ export function usePageCreator(
           break;
         }
       }
-      if (createdComponent) break;
 
-      await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 100ms between attempts
+      await new Promise((resolve) => setTimeout(resolve, 200)); // Wait 100ms between attempts
       console.log("! Waiting for component to be created", componentId);
       attempts++;
     }

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4014";
-export const buildDate = "2025-07-24 02:03:40";
+export const version = "1.0.4017";
+export const buildDate = "2025-07-24 21:01:29";

package/styles.css

@@ -1,4 +1,5 @@
 @import "tw-animate-css";
+@import "react-day-picker/style.css";
 * {
   font-family:
     var(--font-inter),