@alpaca-editor/core 1.0.4170 → 1.0.4173

package/src/editor/utils/keyboardNavigation.ts

@@ -23,6 +23,8 @@ export interface KeyboardNavigationDependencies {
     data?: any;
     event?: React.SyntheticEvent;
   }) => Promise<any>;
+  showQuickSwitcher?: (show: boolean) => void;
+  cycleQuickSwitcher?: (direction: "next" | "prev" | "up" | "down") => void;
 }
 
 export function useKeyboardNavigation(deps: KeyboardNavigationDependencies) {
@@ -36,6 +38,8 @@ export function useKeyboardNavigation(deps: KeyboardNavigationDependencies) {
     loadItem,
     showInfoToast,
     executeCommand,
+    showQuickSwitcher,
+    cycleQuickSwitcher,
   } = deps;
 
   const handleKeyDownDebounced = useDebouncedCallback(
@@ -169,6 +173,18 @@ export function useKeyboardNavigation(deps: KeyboardNavigationDependencies) {
       );
 
       if (command) {
+        // Check if user is typing in an input field
+        const target = event.target as HTMLElement;
+        const isTyping =
+          target instanceof HTMLInputElement ||
+          target instanceof HTMLTextAreaElement ||
+          target.isContentEditable;
+
+        // Don't execute commands when typing in text fields
+        // F2 works everywhere except when typing
+        // Delete also won't trigger when typing
+        if (isTyping) return;
+
         event.preventDefault();
         const contentEditorItem = editContextRef.current?.contentEditorItem;
         if (!contentEditorItem) return;
@@ -211,6 +227,80 @@ export function useKeyboardNavigation(deps: KeyboardNavigationDependencies) {
         return;
       }
 
+      // Check if quick switcher is currently visible
+      const isQuickSwitcherVisible = editContextRef.current
+        ? (editContextRef.current as any).isQuickSwitcherVisible
+        : false;
+
+      // Handle navigation keys when switcher is visible (check this FIRST)
+      if (isQuickSwitcherVisible && editContextRef.current) {
+        // Shift key acts as ArrowRight for easy one-handed navigation
+        if (event.key === "Shift" && event.ctrlKey) {
+          console.log(`[KeyNav] Shift pressed (Ctrl held) - moving right`);
+          event.preventDefault();
+          event.stopPropagation();
+          cycleQuickSwitcher?.("next");
+          return;
+        }
+
+        // Arrow keys for navigation
+        if (
+          event.key === "ArrowLeft" ||
+          event.key === "ArrowRight" ||
+          event.key === "ArrowUp" ||
+          event.key === "ArrowDown"
+        ) {
+          console.log(`[KeyNav] Arrow key navigation: ${event.key}`);
+          event.preventDefault();
+          event.stopPropagation();
+
+          let direction: "next" | "prev" | "up" | "down";
+          switch (event.key) {
+            case "ArrowLeft":
+              direction = "prev";
+              break;
+            case "ArrowRight":
+              direction = "next";
+              break;
+            case "ArrowUp":
+              direction = "up";
+              break;
+            case "ArrowDown":
+              direction = "down";
+              break;
+          }
+          cycleQuickSwitcher?.(direction);
+          return;
+        }
+
+        // Enter or Escape to close
+        if (event.key === "Enter" || event.key === "Escape") {
+          console.log(
+            `[KeyNav] ${event.key} pressed - closing switcher with selection: ${event.key === "Enter"}`,
+          );
+          event.preventDefault();
+          event.stopPropagation();
+          // showQuickSwitcher(false) will be handled by the Enter key handler in EditorShell
+          // For now, we just let the keyup handler in EditorShell handle it
+          return;
+        }
+      }
+
+      // Handle quick switcher trigger (Ctrl+Shift pressed together) - only if NOT already visible
+      if (
+        !isQuickSwitcherVisible &&
+        ((event.key === "Shift" && event.ctrlKey) ||
+          (event.key === "Control" && event.shiftKey)) &&
+        editContextRef.current &&
+        browseHistory.length > 1
+      ) {
+        console.log("[KeyNav] Quick switcher trigger: Ctrl+Shift");
+        event.preventDefault();
+        event.stopPropagation();
+        showQuickSwitcher?.(true);
+        return;
+      }
+
       const target = event.target as HTMLElement;
       const isTyping =
         target instanceof HTMLInputElement ||
@@ -230,7 +320,13 @@ export function useKeyboardNavigation(deps: KeyboardNavigationDependencies) {
       }
       handleKeyDownDebounced(event);
     },
-    [handleKeyDownDebounced, editContextRef],
+    [
+      handleKeyDownDebounced,
+      editContextRef,
+      showQuickSwitcher,
+      cycleQuickSwitcher,
+      browseHistory,
+    ],
   );
 
   return { handleKeyDown };

package/src/editor/views/SingleEditView.tsx

@@ -38,23 +38,37 @@ export function SingleEditView({
       item?.templateId?.toLowerCase() ===
       "fe5dd826-48c6-436d-b87a-7c4210c7413b";
 
-    if (isMediaFolder) {
-      return <MediaFolderEditView item={item} />;
+    // Check if this is the media library root item (typically has template ID eb22c1a2-8899-4d2d-b36c-4aeb209e66b7)
+    const isMediaLibraryRoot =
+      item?.id?.toLowerCase() === "3d6658d8-a0bf-4e75-b3e2-d050fabcf4e1";
+
+    if (isMediaFolder || isMediaLibraryRoot) {
+      return (
+        <div data-view="media-folder-edit-view" className="h-full w-full">
+          <MediaFolderEditView item={item} />
+        </div>
+      );
     }
 
-    return <ItemEditor item={item} />;
+    return (
+      <div data-view="item-editor-view" className="h-full w-full">
+        <ItemEditor item={item} />
+      </div>
+    );
   }
 
   return (
-    <PageViewer
-      pageViewContext={pageViewContext}
-      showFormEditor={
-        editContext?.viewName == "page-editor" || !editContext?.isMobile
-      }
-      compareView={compareView}
-      name={name}
-      followEditsDefault={false}
-      className={className}
-    />
+    <div data-view="single-edit-view" className="h-full w-full">
+      <PageViewer
+        pageViewContext={pageViewContext}
+        showFormEditor={
+          editContext?.viewName == "page-editor" || !editContext?.isMobile
+        }
+        compareView={compareView}
+        name={name}
+        followEditsDefault={false}
+        className={className}
+      />
+    </div>
   );
 }

package/src/index.ts

@@ -8,7 +8,7 @@ export {
 
 export { Editor } from "./editor/Editor";
 
-export { configureForUser, defaultPictureVariantButtons } from "./config/config";
+export { configureForUser } from "./config/config";
 
 export type { DialogProps } from "./editor/client/editContext";
 export { useEditContext } from "./editor/client/editContext";
@@ -30,8 +30,8 @@ export {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogFooter, 
-  DialogClose
+  DialogFooter,
+  DialogClose,
 } from "./components/ui/dialog";
 export { Input } from "./components/ui/input";
 export { Select } from "./components/ui/select";

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4170";
-export const buildDate = "2025-10-17 01:45:57";
+export const version = "1.0.4173";
+export const buildDate = "2025-10-20 01:57:31";

package/src/splash-screen/SplashScreen.tsx

@@ -7,12 +7,18 @@ import { Wizard } from "../page-wizard/PageWizard";
 import { ActionButton } from "../components/ActionButton";
 import { RecentPages } from "./RecentPages";
 import { Spinner } from "../editor/ui/Spinner";
-import { PanelsTopLeft } from "lucide-react";
+import { PanelsTopLeft, Bot } from "lucide-react";
+
+import { AgentProfilesOverview } from "../editor/ai/AgentProfilesOverview";
+import { AiProfile, loadAiProfiles } from "../editor/services/aiService";
+import { contentItemId } from "../config/config";
 
 export function SplashScreen() {
   const editContext = useEditContext();
   const [demoId, setDemoId] = useState<string | null>(null);
   const [demoWizard, setDemoWizard] = useState<Wizard | null>(null);
+  const [profiles, setProfiles] = useState<AiProfile[] | null>(null);
+  const [loadingProfiles, setLoadingProfiles] = useState(false);
 
   useEffect(() => {
     // Check for demoId in URL parameters
@@ -45,6 +51,28 @@ export function SplashScreen() {
     loadDemoData();
   }, [demoId]);
 
+  useEffect(() => {
+    const loadProfiles = async () => {
+      try {
+        if (!editContext) return;
+        // Prefer demo item when present; otherwise current item; fallback to optional (server provides defaults)
+        const itemDescriptor = demoId
+          ? { id: demoId, language: "en", version: 0 }
+          : editContext.currentItemDescriptor || undefined;
+        setLoadingProfiles(true);
+        const list = await loadAiProfiles(itemDescriptor);
+        setProfiles(list || []);
+      } catch (e) {
+        console.error("Failed to load AI profiles on splash:", e);
+        setProfiles([]);
+      } finally {
+        setLoadingProfiles(false);
+      }
+    };
+
+    loadProfiles();
+  }, [editContext?.currentItemDescriptor?.id, demoId]);
+
   const launchDemoWizard = () => {
     if (!demoWizard || !demoId || !editContext) return;
 
@@ -129,6 +157,53 @@ export function SplashScreen() {
                 <RecentPages />
               </div>
             </div>
+            {/* Agent Profiles Overview Card (Demo view) */}
+            <Card
+              title="AI Agent Profiles"
+              description="Choose a profile to start a new agent"
+              icon={<Bot strokeWidth={1} />}
+              className="w-full md:max-w-screen-xl"
+            >
+              {loadingProfiles ? (
+                <div className="flex h-80 items-center justify-center text-xs text-gray-500">
+                  Loading profiles...
+                </div>
+              ) : profiles && profiles.length > 0 ? (
+                <AgentProfilesOverview
+                  profiles={profiles}
+                  onSelectProfile={(profileId) => {
+                    // Switch to agents overview to show both overview and agents panel
+                    editContext?.switchView("agents-overview");
+                    editContext?.setShowAgentsPanel?.(true);
+                    // Longer delay to allow view switch and Agents panel to mount
+                    setTimeout(() => {
+                      try {
+                        const selectedProfile = profiles.find(
+                          (p) => p.id === profileId,
+                        );
+                        window.dispatchEvent(
+                          new CustomEvent("editor:addNewAgent", {
+                            detail: {
+                              metadata: {
+                                profile: selectedProfile?.name,
+                                additionalData: {
+                                  profileId: selectedProfile?.id,
+                                  profileName: selectedProfile?.name,
+                                },
+                              },
+                            },
+                          }),
+                        );
+                      } catch {}
+                    }, 500);
+                  }}
+                />
+              ) : (
+                <div className="flex h-80 items-center justify-center text-xs text-gray-500">
+                  No agent profiles available
+                </div>
+              )}
+            </Card>
           </div>
           <div className="bg-wizard absolute inset-0" />
         </div>
@@ -136,7 +211,7 @@ export function SplashScreen() {
     );
   } else {
     return (
-      <div className="flex h-full w-full gap-2 bg-gray-100 md:items-center md:justify-center">
+      <div className="flex h-full w-full flex-col gap-2 bg-gray-100 md:items-center md:justify-center">
         <div className="z-10 flex flex-1 flex-col items-stretch gap-4 p-4 md:min-h-[40vh] md:max-w-screen-xl md:flex-row">
           <Card
             title=<span className="tracking-wides text-2xl font-extralight">
@@ -162,6 +237,14 @@ export function SplashScreen() {
                 >
                   Open existing page
                 </ActionButton>
+                <ActionButton
+                  onClick={() => {
+                    editContext?.switchView("agents-overview");
+                    editContext?.setShowAgentsPanel?.(true);
+                  }}
+                >
+                  My Agents <Bot strokeWidth={1} />
+                </ActionButton>
                 <ActionButton onClick={() => editContext?.startTour()}>
                   Take tour <MagicEditIcon />
                 </ActionButton>
@@ -191,6 +274,55 @@ export function SplashScreen() {
             <RecentPages />
           </div>
         </div>
+        {/* Agent Profiles Overview Card */}
+        <div className="z-10 mt-2 flex w-full max-w-screen-xl flex-1 px-4">
+          <Card
+            title="AI Agent Profiles"
+            description="Choose a profile to start a new agent"
+            icon={<Bot strokeWidth={1} />}
+            className="w-full"
+          >
+            {loadingProfiles ? (
+              <div className="flex h-80 items-center justify-center text-xs text-gray-500">
+                Loading profiles...
+              </div>
+            ) : profiles && profiles.length > 0 ? (
+              <AgentProfilesOverview
+                profiles={profiles}
+                onSelectProfile={(profileId) => {
+                  // Switch to agents overview to show both overview and agents panel
+                  editContext?.switchView("agents-overview");
+                  editContext?.setShowAgentsPanel?.(true);
+                  // Longer delay to allow view switch and Agents panel to mount
+                  setTimeout(() => {
+                    try {
+                      const selectedProfile = profiles.find(
+                        (p) => p.id === profileId,
+                      );
+                      window.dispatchEvent(
+                        new CustomEvent("editor:addNewAgent", {
+                          detail: {
+                            metadata: {
+                              profile: selectedProfile?.name,
+                              additionalData: {
+                                profileId: selectedProfile?.id,
+                                profileName: selectedProfile?.name,
+                              },
+                            },
+                          },
+                        }),
+                      );
+                    } catch {}
+                  }, 500);
+                }}
+              />
+            ) : (
+              <div className="flex h-80 items-center justify-center text-xs text-gray-500">
+                No agent profiles available
+              </div>
+            )}
+          </Card>
+        </div>
         <div className="bg-wizard absolute inset-0" />
       </div>
     );

package/src/types.ts

@@ -70,7 +70,8 @@ export type EditOperation = {
     | "synchronize-components"
     | "link-component"
     | "duplicate-components"
-    | "rename-item";
+    | "rename-item"
+    | "change-template";
 
   date: string;
   id: string;
@@ -91,6 +92,13 @@ export type RenameItemOperation = EditOperation & {
   oldName?: string;
 };
 
+export type ChangeTemplateOperation = EditOperation & {
+  type: "change-template";
+  itemId: string;
+  newTemplateId: string;
+  oldTemplateId?: string;
+};
+
 export type EditFieldOperation = EditOperation & {
   type: "edit-field";
   itemId: string;