@alpaca-editor/core 1.0.3978 → 1.0.3980

package/src/editor/Terminal.tsx

@@ -8,6 +8,8 @@ import React, {
 import { Button } from "primereact/button";
 import { InputTextarea } from "primereact/inputtextarea";
 import { classNames } from "primereact/utils";
+import { SimpleIconButton } from "./ui/SimpleIconButton";
+import { Trash2, Send } from "lucide-react";
 
 type Message = {
   text: React.ReactNode;
@@ -161,14 +163,14 @@ export const Terminal = forwardRef<
   return (
     <div className={classNames("flex h-full flex-col", className)}>
       <div className="flex items-center justify-between gap-2 border-b border-gray-200 p-1 text-xs">
-        <button
+        <SimpleIconButton
           onClick={() => {
             setMessages([]);
             onReset();
           }}
-        >
-          <i className="pi pi-trash m-1 text-sm" />
-        </button>
+          icon={<Trash2 size={16} strokeWidth={1} />}
+          label="Clear terminal"
+        />
         {toolbar}
       </div>
       <div className="flex-1 overflow-x-hidden overflow-y-auto p-2">
@@ -212,13 +214,12 @@ export const Terminal = forwardRef<
         />
         <div className="flex items-center justify-between py-1">
           {statusbar}
-          <Button
-            icon={"pi pi-send"}
-            text
-            size="small"
+          <SimpleIconButton
+            icon={<Send size={16} strokeWidth={1} />}
             className="tour-send-button"
             onClick={submit}
             disabled={prompt.trim().length === 0}
+            label="Send"
           />
         </div>
       </div>

package/src/editor/ai/AiTerminal.tsx

@@ -14,6 +14,7 @@ import { AiResponseMessage } from "./AiResponseMessage";
 import { AiProfile, loadAiProfiles } from "../services/aiService";
 import { EditOperation } from "../../types";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { Settings } from "lucide-react";
 
 type Response = {
   messages: Message[];
@@ -80,6 +81,8 @@ export function AiTerminal({
   const selection = editContext.selection;
   const terminalRef = useRef<{ submit: () => void }>(null);
   const [responseMessages, setResponseMessages] = useState<Message[]>([]);
+  const [showSettings, setShowSettings] = useState(false);
+  const settingsRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (options?.initialPrompt && !initialPromptExecuted && model) {
@@ -116,6 +119,25 @@ export function AiTerminal({
     messagesRef.current = responseMessages;
   }, [responseMessages]);
 
+  // Handle click outside for settings popover
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        settingsRef.current &&
+        !settingsRef.current.contains(event.target as Node)
+      ) {
+        setShowSettings(false);
+      }
+    }
+
+    if (showSettings) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [showSettings]);
+
   function handleResponse(
     response: Response,
     terminalCallback: (text: React.ReactNode, finished: boolean) => void,
@@ -328,7 +350,7 @@ export function AiTerminal({
             setPrompt={setPrompt}
             statusbar=<div className="flex flex-1 items-center justify-between gap-1">
               <a
-                className="ml-1 flex cursor-pointer items-center gap-1 text-xs text-blue-300"
+                className="ml-1 flex cursor-pointer items-center gap-1 text-xs"
                 onClick={() => {
                   setShowPredefined(!showPredefined);
                 }}
@@ -367,21 +389,42 @@ export function AiTerminal({
               )}
             </div>
             toolbar=<div className="flex items-stretch gap-1">
-              <Dropdown
-                className="text-sm"
-                value={activeProfile}
-                onChange={(e) => setActiveProfile(e.value)}
-                optionLabel="name"
-                options={profiles}
-              />
-              {activeProfile && (
-                <Dropdown
-                  className="text-sm"
-                  value={model}
-                  onChange={(e) => setModel(e.value)}
-                  options={activeProfile.models}
+              <div className="relative" ref={settingsRef}>
+                <SimpleIconButton
+                  icon={<Settings size={16} strokeWidth={1} />}
+                  label="Settings"
+                  onClick={() => setShowSettings(!showSettings)}
                 />
-              )}
+                {showSettings && (
+                  <div className="absolute top-8 right-0 z-50 flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-3 shadow-lg">
+                    <div className="flex flex-col gap-1">
+                      <label className="text-xs font-medium text-gray-700">
+                        Profile
+                      </label>
+                      <Dropdown
+                        className="text-sm"
+                        value={activeProfile}
+                        onChange={(e) => setActiveProfile(e.value)}
+                        optionLabel="name"
+                        options={profiles}
+                      />
+                    </div>
+                    {activeProfile && (
+                      <div className="flex flex-col gap-1">
+                        <label className="text-xs font-medium text-gray-700">
+                          Model
+                        </label>
+                        <Dropdown
+                          className="text-sm"
+                          value={model}
+                          onChange={(e) => setModel(e.value)}
+                          options={activeProfile.models}
+                        />
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
               {closeButton}
             </div>
             commandHandler={(v, callback) => {

package/src/editor/client/EditorClient.tsx

@@ -68,6 +68,10 @@ import { FieldEditorPopup, FieldEditorPopupRef } from "../FieldEditorPopup";
 
 import { Command, CommandData } from "../commands/commands";
 import { AiPopup, AiPopupRef } from "../ai/AiPopup";
+import {
+  EditorFormPopup,
+  EditorFormPopupRef,
+} from "../page-viewer/EditorFormPopup";
 
 import { ComponentDetails } from "../services/componentDesignerService";
 import {
@@ -219,6 +223,7 @@ export function EditorClient({
 
   const aiPopupRef = React.useRef<AiPopupRef>(null);
   const fieldEditorPopupRef = React.useRef<FieldEditorPopupRef>(null);
+  const editorFormPopupRef = React.useRef<EditorFormPopupRef>(null);
 
   const [validationResult, setValidationResult] = useState<
     ValidationResult[] | undefined
@@ -306,7 +311,7 @@ export function EditorClient({
         language: entry.itemLanguage,
         hasLayout: false, // This will need to be determined from the item
         templateName: "", // This will need to be determined from the item
-        icon: undefined,
+        icon: entry.icon,
       }),
     );
   });
@@ -328,6 +333,7 @@ export function EditorClient({
   const [showRightSidebar, setShowRightSidebar] = useState(
     userPreferences.showRightSidebar ?? true,
   );
+  const [activeEditorTab, setActiveEditorTab] = useState<string | null>(null);
   const [hideNonEditableComponents, setHideNonEditableComponents] = useState(
     userPreferences.hideNonEditableComponents ?? false,
   );
@@ -1970,6 +1976,13 @@ export function EditorClient({
         setCurrentOverlay("fields");
         fieldEditorPopupRef.current?.show(fields, sections, ev);
       },
+      showEditorFormPopup: (
+        event: MouseEvent<HTMLElement>,
+        activeTab?: string,
+      ) => {
+        setCurrentOverlay("editor-form");
+        editorFormPopupRef.current?.show(event, activeTab);
+      },
       inserting,
       validating,
       validationResult,
@@ -2117,6 +2130,8 @@ export function EditorClient({
       setEnableCompletions,
       showRightSidebar,
       setShowRightSidebar: handleSetShowRightSidebar,
+      activeEditorTab,
+      setActiveEditorTab,
       hideNonEditableComponents,
       setHideNonEditableComponents: handleSetHideNonEditableComponents,
       quotaInfo,
@@ -2204,6 +2219,8 @@ export function EditorClient({
     setShowSuggestedEditsDiff,
     showRightSidebar,
     handleSetShowRightSidebar,
+    activeEditorTab,
+    setActiveEditorTab,
     hideNonEditableComponents,
     handleSetHideNonEditableComponents,
     quotaInfo,
@@ -2256,6 +2273,10 @@ export function EditorClient({
                     <Shrink className="h-5 w-5" />
                   </button>
                 </div>
+                <EditorFormPopup
+                  ref={editorFormPopupRef}
+                  pageViewContext={pageViewContext}
+                />
                 {showFullscreenHint && (
                   <div
                     className="fixed inset-0"
@@ -2308,6 +2329,10 @@ export function EditorClient({
 
                 <AiPopup ref={aiPopupRef} />
                 <FieldEditorPopup ref={fieldEditorPopupRef} />
+                <EditorFormPopup
+                  ref={editorFormPopupRef}
+                  pageViewContext={pageViewContext}
+                />
                 {isTourActive && (
                   <Tour tourStopCallback={() => setIsTourActive(false)} />
                 )}

package/src/editor/client/editContext.ts

@@ -251,6 +251,10 @@ export type EditContextType = {
     aiTerminalOptions?: AiTerminalOptions,
   ) => void;
   showFieldEditorPopup: (fields: Field[], sections: string[], ev: any) => void;
+  showEditorFormPopup: (
+    event: MouseEvent<HTMLElement>,
+    activeTab?: string,
+  ) => void;
   validationResult: ValidationResult[] | undefined;
   contentEditorItem: FullItem | undefined;
 
@@ -326,6 +330,9 @@ export type EditContextType = {
   showRightSidebar: boolean;
   setShowRightSidebar: React.Dispatch<React.SetStateAction<boolean>>;
 
+  activeEditorTab: string | null;
+  setActiveEditorTab: React.Dispatch<React.SetStateAction<string | null>>;
+
   hideNonEditableComponents: boolean;
   setHideNonEditableComponents: React.Dispatch<React.SetStateAction<boolean>>;
 

package/src/editor/commands/componentCommands.tsx

@@ -165,18 +165,23 @@ async function getDesignCommand(
   return {
     id: "design",
     icon: <Palette size={defaultIconSize} />,
-    label: "Design",
+    label: "Open Design Options",
     disabled: () => false,
     execute: async (context: CommandContext<any>) => {
-      if (!context.event) {
-        console.warn("Design command executed without event context");
-        return;
+      // Check if we're in fullscreen mode
+      if (editContext.pageView.fullscreen) {
+        // In fullscreen mode, show the EditorForm popup
+        if (!context.event) {
+          console.warn(
+            "Design command executed without event context in fullscreen mode",
+          );
+          return;
+        }
+        editContext.showEditorFormPopup(context.event as any, "design");
+      } else {
+        // Switch to the design tab
+        editContext.setActiveEditorTab("design");
       }
-      editContext.showFieldEditorPopup(
-        item.fields || [],
-        ["Design", "Rendering"],
-        context.event,
-      );
     },
     visibilityScopes: ["editFrame", "contextMenu"],
   };

package/src/editor/media-selector/Preview.tsx

@@ -42,11 +42,13 @@ export function Preview({ selectedImage }: { selectedImage?: Thumbnail }) {
         <div>Updated by: {selectedImage.updatedBy}</div>
       </div>
 
-      <img
-        src={selectedImage?.previewUrl}
-        className="object-contain"
-        fetchPriority="high"
-      />
+      <div className="flex min-h-0 flex-1 items-center justify-center">
+        <img
+          src={selectedImage?.previewUrl}
+          className="max-h-full max-w-full object-contain"
+          fetchPriority="high"
+        />
+      </div>
     </div>
   );
 }

package/src/editor/page-editor-chrome/FrameMenu.tsx

@@ -7,6 +7,12 @@ import { Component } from "../pageModel";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 import { ArrowUpFromDot } from "lucide-react";
 import { cn } from "../../lib/utils";
+import { PlaceholderDropZone } from "./PlaceholderDropZone";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
 
 import { ComponentCommand } from "../commands/componentCommands";
 
@@ -248,6 +254,31 @@ export function FrameMenu({
   const isMultiSelected = editContext.selection.length > 1;
   if (!componentRect) return null;
 
+  // Check if the component's placeholder can accept more components
+  const placeholder = component.parentPlaceholder;
+  const canAppend =
+    placeholder?.editable &&
+    placeholder?.insertOptions?.some(
+      (option) => !option.isHidden && !option.isInvalid,
+    );
+
+  // Calculate position for the append dropzone (bottom center of component)
+  const appendPosition = canAppend
+    ? {
+        x: componentRect.x + componentRect.width / 2,
+        y: componentRect.y + componentRect.height,
+      }
+    : null;
+
+  // Calculate the index after the current component
+  const appendIndex = placeholder
+    ? placeholder.components.findIndex((c) => c.id === component.id) + 1
+    : 0;
+
+  // Create a dummy element for the dropzone positioning
+  const dummyElement =
+    typeof document !== "undefined" ? document.createElement("div") : null;
+
   return (
     <>
       <div
@@ -312,27 +343,51 @@ export function FrameMenu({
             {editContext.mode === "edit" && (
               <div className="flex items-center gap-2.5 text-sm">
                 {buttons.map((b, i) => (
-                  <div
-                    className="cursor-pointer hover:text-gray-200"
-                    title={b.label}
-                    key={i}
-                    onClick={(ev) => {
-                      ev.stopPropagation();
-                      b.onClick(ev);
-                    }}
-                  >
-                    {typeof b.icon === "string" ? (
-                      <i className={b.icon + " cursor-pointer text-sm"} />
-                    ) : (
-                      b.icon
-                    )}
-                  </div>
+                  <Tooltip key={i}>
+                    <TooltipTrigger asChild>
+                      <div
+                        className="cursor-pointer hover:text-gray-200"
+                        onClick={(ev) => {
+                          ev.stopPropagation();
+                          b.onClick(ev);
+                        }}
+                      >
+                        {typeof b.icon === "string" ? (
+                          <i className={b.icon + " cursor-pointer text-sm"} />
+                        ) : (
+                          b.icon
+                        )}
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent>{b.label}</TooltipContent>
+                  </Tooltip>
                 ))}
               </div>
             )}
           </div>
         )}
       </div>
+
+      {/* Reuse PlaceholderDropZone for append functionality */}
+      {canAppend &&
+        !isReadonly &&
+        editContext.mode === "edit" &&
+        placeholder &&
+        appendPosition &&
+        dummyElement && (
+          <PlaceholderDropZone
+            className="bg-component-blue/40 hover:bg-component-blue rounded-md"
+            insertMenuTitle="Append"
+            placeholder={placeholder}
+            description={`Append to ${placeholder.name}`}
+            index={appendIndex}
+            parentName={component.name}
+            spotPosition={appendPosition}
+            spotPositionElement={dummyElement}
+            spotPositionAnchor="top"
+            size="small"
+          />
+        )}
     </>
   );
 }

package/src/editor/page-editor-chrome/PlaceholderDropZone.tsx

@@ -7,6 +7,7 @@ import { MenuItem } from "primereact/menuitem";
 
 import { getAbsoluteIconUrl } from "../utils";
 import { Placeholder } from "../pageModel";
+import { cn } from "../../lib/utils";
 
 export function PlaceholderDropZone({
   placeholder,
@@ -17,6 +18,8 @@ export function PlaceholderDropZone({
   spotPositionElement,
   spotPositionAnchor,
   size,
+  className,
+  insertMenuTitle,
 }: {
   placeholder: Placeholder;
   description?: string;
@@ -26,6 +29,8 @@ export function PlaceholderDropZone({
   spotPositionElement: Element;
   size: "large" | "small";
   spotPositionAnchor: "top" | "bottom" | "left" | "right";
+  className?: string;
+  insertMenuTitle?: string;
 }) {
   const [isHovering, setIsHovering] = useState(false);
 
@@ -130,7 +135,7 @@ export function PlaceholderDropZone({
           if (insertOptions.length > 0)
             editContext.showContextMenu(e, [
               {
-                label: "Insert",
+                label: insertMenuTitle || "Insert",
                 disabled: true,
                 className: "border-b border-gray-400 pb-2 pl-2",
                 template: () => {
@@ -144,11 +149,12 @@ export function PlaceholderDropZone({
         className="placeholder placeholder-dropzone cursor-pointer"
       >
         <div
-          className={classNames(
+          className={cn(
             isHovering
-              ? "z-30 h-20 w-20 shadow-xl shadow-black shadow-blue-500/50"
+              ? "z-30 h-20 w-20 shadow-xl"
               : "z-30 h-10 w-10 hover:scale-[1.1]",
             "test-ph-dropzone tour-placeholder-dropzone absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-blue-500 p-2 text-center text-sm text-white opacity-100 transition-all duration-300 ease-in-out",
+            className,
           )}
           data-testid="placeholder-dropzone-button"
         >

package/src/editor/page-editor-chrome/useInlineAICompletion.tsx

@@ -10,6 +10,11 @@ import { useDebouncedCallback } from "use-debounce";
 import { PageViewContext } from "../page-viewer/pageViewContext";
 import { useEditContext } from "../client/editContext";
 import { executePrompt } from "../services/aiService";
+import {
+  generatePageContext,
+  getCachedContext,
+  PageContext,
+} from "../services/contextService";
 
 export function useInlineAiCompletion({
   pageViewContext,
@@ -316,22 +321,43 @@ export function useInlineAiCompletion({
       }
     }
 
+    if (!editContext) return null;
+
+    // Get page context for better completions
+    let pageContext: PageContext | null = getCachedContext(editContext);
+    if (!pageContext) {
+      try {
+        pageContext = await generatePageContext(editContext, pageViewContext);
+      } catch (error) {
+        console.warn("Failed to generate page context:", error);
+        // Continue without context
+      }
+    }
+
+    // Create context-aware completion prompt
+    const systemPrompt = pageContext
+      ? `You are a content completion tool for a ${pageContext.pageType} page titled "${pageContext.pageTitle}". 
+
+Page context: ${pageContext.abstract}
+
+Field being edited: ${fieldName || fieldId}
+
+ONLY provide the completion text (what comes after the user's text), never repeat any part of what the user wrote. Your completion should flow naturally from the user's text and be relevant to the page context and field being edited.`
+      : "You are a sentence completion tool. ONLY provide the completion text (what comes after the user's text), never repeat any part of what the user wrote. Your completion should flow naturally from the user's text.";
+
     const messages = [
       {
         name: "system",
         role: "system",
-        content:
-          "You are a sentence completion tool. ONLY provide the completion text (what comes after the user's text), never repeat any part of what the user wrote. Your completion should flow naturally from the user's text.",
+        content: systemPrompt,
       },
       {
         name: "user",
         role: "user",
-        content: `Complete this sentence. ONLY provide the completion (do not repeat my text): ${contentUpToCursor}`,
+        content: `Complete this text. ONLY provide the completion (do not repeat my text): ${contentUpToCursor}`,
       },
     ];
 
-    if (!editContext) return null;
-
     // Show loading indicator
     setIsLoading(true);
     startLoadingAnimation();

package/src/editor/page-viewer/EditorForm.tsx

@@ -18,18 +18,38 @@ export function EditorForm({
   readonly,
   compareView,
   onCollapse,
+  initialActiveTab,
 }: {
   pageViewContext?: PageViewContext;
   readonly?: boolean;
   compareView: boolean;
   onCollapse?: () => void;
+  initialActiveTab?: string | null;
 }) {
   const editContext = useEditContext()!;
   if (!pageViewContext) pageViewContext = editContext.pageView;
 
   const insertMode =
     editContext.insertMode && editContext.mode === "edit" && !compareView;
-  const [activeTabKey, setActiveTabKey] = useState("content");
+  const [activeTabKey, setActiveTabKey] = useState(
+    initialActiveTab || "content",
+  );
+
+  // Switch to the tab requested by the EditContext
+  useEffect(() => {
+    if (editContext.activeEditorTab) {
+      setActiveTabKey(editContext.activeEditorTab);
+      // Clear the request after switching
+      editContext.setActiveEditorTab(null);
+    }
+  }, [editContext.activeEditorTab, editContext.setActiveEditorTab]);
+
+  // Set initial active tab if provided
+  useEffect(() => {
+    if (initialActiveTab) {
+      setActiveTabKey(initialActiveTab);
+    }
+  }, [initialActiveTab]);
   const [item, setItem] = useState<RenderedItem>();
   const [component, setComponent] = useState<Component>();
   const [fullItem, setFullItem] = useState<FullItem>();

package/src/editor/page-viewer/EditorFormPopup.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import {
+  SyntheticEvent,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { EditorForm } from "./EditorForm";
+import { PageViewContext } from "./pageViewContext";
+import {
+  Popover,
+  PopoverContent,
+  PopoverAnchor,
+} from "../../components/ui/popover";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
+import { X } from "lucide-react";
+
+export interface EditorFormPopupRef {
+  show: (event: SyntheticEvent, activeTab?: string) => void;
+  close: () => void;
+}
+
+interface EditorFormPopupProps {
+  pageViewContext?: PageViewContext;
+}
+
+export const EditorFormPopup = forwardRef<
+  EditorFormPopupRef,
+  EditorFormPopupProps
+>(({ pageViewContext }, ref) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [anchorPosition, setAnchorPosition] = useState({ x: 0, y: 0 });
+  const [requestedTab, setRequestedTab] = useState<string | null>(null);
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    show: (ev: SyntheticEvent, activeTab?: string) => {
+      setRequestedTab(activeTab || null);
+
+      // Get the position from the event to position the anchor
+      const rect = (ev.target as HTMLElement)?.getBoundingClientRect();
+      if (rect) {
+        setAnchorPosition({
+          x: rect.left + rect.width / 2,
+          y: rect.top + rect.height / 2,
+        });
+      }
+
+      setIsOpen(true);
+    },
+    close: () => {
+      setIsOpen(false);
+      setRequestedTab(null);
+    },
+  }));
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      {/* Invisible anchor positioned at the click location */}
+      <PopoverAnchor asChild>
+        <div
+          ref={anchorRef}
+          style={{
+            position: "fixed",
+            left: anchorPosition.x,
+            top: anchorPosition.y,
+            width: 1,
+            height: 1,
+            pointerEvents: "none",
+            zIndex: -1,
+          }}
+        />
+      </PopoverAnchor>
+
+      <PopoverContent
+        className="h-[600px] w-[400px] p-0"
+        align="start"
+        onClick={(ev) => ev.stopPropagation()}
+      >
+        <div className="flex h-full w-full flex-col">
+          <div className="flex items-center justify-between border-b p-2">
+            <h3 className="text-sm font-medium">Editor Form</h3>
+            <SimpleIconButton
+              icon={<X strokeWidth={1} />}
+              onClick={() => setIsOpen(false)}
+              label="Close"
+            />
+          </div>
+          <div className="flex-1 overflow-hidden">
+            <EditorForm
+              pageViewContext={pageViewContext}
+              readonly={false}
+              compareView={false}
+              onCollapse={() => setIsOpen(false)}
+              initialActiveTab={requestedTab}
+            />
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+});