@alpaca-editor/core 1.0.3997 → 1.0.4007

package/src/editor/fieldTypes.ts

@@ -124,7 +124,7 @@ export type DateField = Field & {
   value: DateFieldValue;
 };
 
-export type DateFieldValue = Field & {
+export type DateFieldValue = {
   date: string;
 };
 

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

@@ -70,7 +70,8 @@ export function AiImageSearch({
         );
 
         setLoadingPrompt(false);
-        const newPrompt = result.responseText.replaceAll("\n", "");
+        const lastMessage = result?.messages?.[result.messages.length - 1];
+        const newPrompt = lastMessage?.content?.replaceAll("\n", "") || "";
         setPrompt(newPrompt);
       } catch (error) {
         if (error instanceof Error && error.name !== "AbortError") {

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

@@ -53,7 +53,8 @@ export function AiImageSearchPrompt({
         );
 
         setLoadingPrompt(false);
-        const newPrompt = result.responseText.replaceAll("\n", "");
+        const lastMessage = result?.messages?.[result.messages.length - 1];
+        const newPrompt = lastMessage?.content?.replaceAll("\n", "") || "";
         setPrompt(newPrompt);
       } catch (error) {
         if (error instanceof Error && error.name !== "AbortError") {

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

@@ -137,7 +137,7 @@ export function PlaceholderDropZone({
               {
                 label: insertMenuTitle || "Insert",
                 disabled: true,
-                className: "border-b border-gray-400 pb-2 pl-2",
+                className: "border-b border-gray-400 pb-2 pl-2 text-xs",
                 template: () => {
                   return <span className="text-sm text-black">Insert</span>;
                 },

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

@@ -5,6 +5,7 @@ import { RotateDeviceIcon } from "../ui/Icons";
 import { useDebouncedCallback } from "use-debounce";
 import { PageViewContext } from "./pageViewContext";
 import { EditorConfiguration } from "../../config/types";
+import { cn } from "../../lib/utils";
 
 export function DeviceToolbar({
   pageViewContext,
@@ -17,17 +18,17 @@ export function DeviceToolbar({
     (width: number | undefined) => {
       pageViewContext.setDeviceWidth(width);
     },
-    400
+    400,
   );
   const debouncedSetDeviceHeight = useDebouncedCallback(
     (height: number | undefined) => {
       pageViewContext.setDeviceHeight(height);
     },
-    400
+    400,
   );
 
   return (
-    <div className="flex justify-center w-full items-center bg-gray-100 p-1 z-1000 text-sm gap-2 border-b">
+    <div className="bg-gray-4 z-1000 mb-2 flex w-full items-center justify-center gap-2 text-sm">
       <Dropdown
         options={configuration.devices.map((x) => ({
           label: x.name,
@@ -53,6 +54,7 @@ export function DeviceToolbar({
       />
       <SimpleIconButton
         icon="pi pi-lock"
+        className="hover:bg-gray-3"
         selected={pageViewContext.lockHeight || false}
         onClick={() =>
           pageViewContext.setLockHeight(!pageViewContext.lockHeight)
@@ -60,10 +62,20 @@ export function DeviceToolbar({
         label="Lock Height"
       />
       <SimpleIconButton
-        icon={<RotateDeviceIcon className="w-4 h-4" />}
+        className="hover:bg-gray-3"
+        icon={
+          <RotateDeviceIcon
+            className={cn(
+              "h-4 w-4 transition-transform duration-300",
+              pageViewContext.rotate ? "rotate-90" : "",
+            )}
+          />
+        }
         selected={pageViewContext.rotate || false}
         onClick={() => pageViewContext.setRotate(!pageViewContext.rotate)}
-        label="Rotate"
+        label={
+          pageViewContext.rotate ? "Switch to Portrait" : "Switch to Landscape"
+        }
       />
     </div>
   );

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

@@ -123,9 +123,14 @@ export function MiniMap({
     }
 
     if (correspondingNode && originalNode) {
-      if (originalNode.tagName === "HEAD")
+      if (originalNode.tagName === "HEAD") {
         correspondingNode.innerHTML = originalNode.innerHTML;
-      else {
+      } else if (
+        correspondingNode.parentNode?.nodeType === Node.DOCUMENT_NODE
+      ) {
+        // Can't use outerHTML when parent is the document node
+        correspondingNode.innerHTML = originalNode.innerHTML;
+      } else {
         correspondingNode.outerHTML = originalNode.outerHTML;
       }
     }

package/src/editor/services/aiService.ts

@@ -34,6 +34,15 @@ type Message = {
   role: string;
 };
 
+export interface ExecutePromptResponse {
+  editOperations: any[];
+  messages: Message[];
+  numInputTokens: number;
+  numOutputTokens: number;
+  numCachedTokens: number;
+  state: string;
+}
+
 export async function executePrompt(
   messages: Message[],
   editContext: EditContextType,
@@ -48,7 +57,7 @@ export async function executePrompt(
   options?: RequestInit,
   model?: string,
   callback?: (response: any) => void,
-): Promise<any> {
+): Promise<ExecutePromptResponse | null> {
   const context = createAiContext({ editContext });
 
   const response = await fetch(context.endpoint, {

package/src/editor/sidebar/Insert.tsx

@@ -16,7 +16,7 @@ export function Insert() {
       content: (
         <div className="relative flex-1">
           <div className="absolute inset-0 overflow-auto">
-            <MainContentTree mode="insert" />
+            <MainContentTree mode="insert-component" />
           </div>
         </div>
       ),

package/src/editor/sidebar/MainContentTree.tsx

@@ -10,7 +10,7 @@ export function MainContentTree({
   mode,
   rootItemId,
 }: {
-  mode: "insert" | "normal" | "select-page";
+  mode: "insert-component" | "normal" | "select-page";
   rootItemId?: string;
 }) {
   const editContext = useEditContext();
@@ -22,17 +22,28 @@ export function MainContentTree({
   const [selectedItemIds, setSelectedItemIds] = useState<string[]>([]);
 
   const isDraggable = useCallback(
-    (x: ItemTreeNodeData) => {
-      return (
-        mode === "insert" &&
-        insertOptions?.find(
-          (insertOption: InsertOption) =>
-            insertOption.typeId == x.templateId ||
-            insertOption.compatibleTypeIds?.find(
-              (compatibleTemplate) => compatibleTemplate == x.templateId,
-            ) !== undefined,
-        ) !== undefined
-      );
+    (item: ItemTreeNodeData) => {
+      // Only allow dragging in insert-component mode
+      if (mode !== "insert-component") {
+        return true;
+      }
+
+      if (!insertOptions) return false;
+
+      // Check if the item's template is compatible with any insert option
+      return insertOptions.some((insertOption) => {
+        // Direct type match
+        if (insertOption.typeId === item.templateId) {
+          return true;
+        }
+
+        // Compatible type match
+        return (
+          insertOption.compatibleTypeIds?.some(
+            (compatibleTypeId) => compatibleTypeId === item.templateId,
+          ) ?? false
+        );
+      });
     },
     [mode, insertOptions],
   );
@@ -73,12 +84,13 @@ export function MainContentTree({
                 ? selectedItem?.idPath.split("/").slice(0, -1).join("/")
                 : undefined
             }
+            scrollToSelected={true}
             className="h-full"
             selectPagesOnly={mode === "select-page"}
-            selectionMode={mode == "insert" ? "none" : "multiple"}
+            selectionMode={mode == "insert-component" ? "none" : "multiple"}
             selectedItemIds={selectedItemIds}
             onSelectionChange={(selection) => {
-              if (mode === "insert") return;
+              if (mode === "insert-component") return;
               const selectedItems = selection as ItemTreeNodeData[];
               setSelectedItemIds(selectedItems.map((x) => x.id));
               if (selectedItems.length > 0 && selectedItems[0])
@@ -88,6 +100,7 @@ export function MainContentTree({
                   version: selectedItems[0].version,
                 });
             }}
+            showGrabCursorForDraggableNodes={mode === "insert-component"}
             isDraggable={isDraggable}
             renderNode={(node, defaultRenderer) => (
               <div className="group flex w-full gap-4">

package/src/editor/ui/Icons.tsx

@@ -393,14 +393,25 @@ export function FormEditIcon({ className }: { className?: string }) {
 export function RotateDeviceIcon({ className }: { className?: string }) {
   return (
     <svg
-      viewBox="0 0 24 24"
+      width="16"
+      height="18"
+      viewBox="0 0 16 18"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
-      stroke="currentColor"
-      fill="currentColor"
     >
-      <path d="M21.323 8.616l-4.94-4.94a1.251 1.251 0 0 0-1.767 0l-10.94 10.94a1.251 1.251 0 0 0 0 1.768l4.94 4.94a1.25 1.25 0 0 0 1.768 0l10.94-10.94a1.251 1.251 0 0 0 0-1.768zM14 5.707L19.293 11 11.5 18.793 6.207 13.5zm-4.323 14.91a.25.25 0 0 1-.354 0l-1.47-1.47.5-.5-2-2-.5.5-1.47-1.47a.25.25 0 0 1 0-.354L5.5 14.207l5.293 5.293zm10.94-10.94l-.617.616L14.707 5l.616-.616a.25.25 0 0 1 .354 0l4.94 4.94a.25.25 0 0 1 0 .353zm1.394 6.265V18a3.003 3.003 0 0 1-3 3h-3.292l1.635 1.634-.707.707-2.848-2.847 2.848-2.848.707.707L15.707 20h3.304a2.002 2.002 0 0 0 2-2v-2.058zM4 9H3V7a3.003 3.003 0 0 1 3-3h3.293L7.646 2.354l.707-.707 2.848 2.847L8.354 7.34l-.707-.707L9.28 5H6a2.002 2.002 0 0 0-2 2z" />
-      <path fill="none" d="M0 0h24v24H0z" />
+      <path
+        d="M10.24 9C10.8561 9 11.1641 9 11.3994 9.12456C11.6064 9.23413 11.7746 9.40897 11.8801 9.62401C12 9.86848 12 10.1885 12 10.8286L12 15.1714C12 15.8115 12 16.1315 11.8801 16.376C11.7746 16.591 11.6064 16.7659 11.3994 16.8754C11.1641 17 10.8561 17 10.24 17L2.76 17C2.14394 17 1.83591 17 1.60061 16.8754C1.39363 16.7659 1.22535 16.591 1.11989 16.376C0.999999 16.1315 0.999999 15.8115 0.999999 15.1714L1 10.8286C1 10.1885 1 9.86848 1.11989 9.62401C1.22535 9.40897 1.39363 9.23413 1.60061 9.12456C1.83591 9 2.14394 9 2.76 9L10.24 9Z"
+        stroke="#111111"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M15 11L15 9.11111C15 7.24427 15 6.31085 14.6321 5.59781C14.3086 4.9706 13.7923 4.46067 13.1572 4.14109C12.4353 3.77778 11.4902 3.77778 9.6 3.77778L6 3.77778M6 3.77778L8.8125 6.55556M6 3.77778L8.8125 1"
+        stroke="#111111"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </svg>
   );
 }

package/src/editor/ui/ItemNameDialogNew.tsx

@@ -1,4 +1,9 @@
-import { Dialog } from "primereact/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog";
 
 import { useEffect, useRef, useState } from "react";
 import DialogButtons from "./DialogButtons";
@@ -32,6 +37,12 @@ export function ItemNameDialog(
     setName(props?.name || "");
   }, [props]);
 
+  // Focus and select the input when dialog opens
+  useEffect(() => {
+    nameRef.current?.focus();
+    nameRef.current?.select();
+  }, []);
+
   const checkNameValidDebounced = useDebouncedCallback(
     async () => checkName(),
     500,
@@ -81,38 +92,39 @@ export function ItemNameDialog(
 
   return (
     <Dialog
-      visible={true}
-      onHide={() => {
-        props.onClose?.(null);
-      }}
-      onShow={() => {
-        nameRef.current?.focus();
-        nameRef.current?.select();
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) {
+          props.onClose?.(null);
+        }
       }}
-      style={{ width: "400px" }}
-      header={props?.title ?? "Name"}
     >
-      <div className="p-3">
-        <div className="my-2 text-sm">
-          {props.message || "Enter a name for the new item:"}
+      <DialogContent style={{ width: "400px" }}>
+        <DialogHeader>
+          <DialogTitle>{props?.title ?? "Name"}</DialogTitle>
+        </DialogHeader>
+        <div className="p-3">
+          <div className="my-2 text-sm">
+            {props.message || "Enter a name for the new item:"}
+          </div>
+          <InputText
+            ref={nameRef}
+            value={name}
+            className="w-full"
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(ev) => {
+              if (ev.key === "Enter" && isValid) handleOk();
+            }}
+          />
+          {validationError && (
+            <div className="mt-2 text-red-500">{validationError}</div>
+          )}
         </div>
-        <InputText
-          ref={nameRef}
-          value={name}
-          className="w-full"
-          onChange={(e) => setName(e.target.value)}
-          onKeyDown={(ev) => {
-            if (ev.key === "Enter" && isValid) handleOk();
-          }}
-        />
-        {validationError && (
-          <div className="mt-2 text-red-500">{validationError}</div>
-        )}
-      </div>
-      <DialogButtons>
-        <Button onClick={handleOk} label="Ok" disabled={!isValid} />
-        <Button onClick={() => props.onClose?.(null)} label="Cancel" />
-      </DialogButtons>
+        <DialogButtons>
+          <Button onClick={handleOk} label="Ok" disabled={!isValid} />
+          <Button onClick={() => props.onClose?.(null)} label="Cancel" />
+        </DialogButtons>
+      </DialogContent>
     </Dialog>
   );
 }

package/src/editor/ui/PerfectTree.tsx

@@ -16,6 +16,8 @@ export interface TreeNode<T = any> {
   data?: T;
   /** Indicates if the node is expandable (has or can have children) */
   hasChildren?: boolean;
+  /** Indicates if the node can be dragged */
+  isDraggable?: boolean;
   /**
    * If present, contains the node's children.
    * Use undefined to signal that children have not yet been loaded.
@@ -530,7 +532,7 @@ const NodeContent = memo(
     return (
       <div
         className="tree-node mb-0.5 flex cursor-pointer items-center"
-        draggable={enableDragAndDrop}
+        draggable={enableDragAndDrop && !!node.isDraggable}
         onClick={handleSelect}
         onDragStart={(event) => handleDragStart(event)}
         onDragEnd={onDragEnd as any}

package/src/editor/ui/Spinner.tsx

@@ -4,6 +4,8 @@ export function Spinner({
   size?: "2xl" | "3xl" | "4xl" | "5xl";
 }) {
   return (
-    <i className={`pi pi-cog pi-spin text-${size} text-theme-secondary/40`}></i>
+    <i
+      className={`pi pi-spin pi-spinner text-${size} text-theme-secondary/40`}
+    ></i>
   );
 }

package/src/editor/utils.ts

@@ -465,6 +465,10 @@ export const getAbsolutePosition = (
 //   return null;
 // }
 
+export function stripGuid(id: string) {
+  return id.replace(/[{}]/g, "").toLowerCase();
+}
+
 export function normalizeGuid(id: string) {
   id = id.toUpperCase();
 

package/src/editor/views/CompareView.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { EditorMode, useEditContext } from "../client/editContext";
+import { useEditContext } from "../client/editContext";
 import { LanguageSelector } from "../menubar/LanguageSelector";
 import { VersionSelector } from "../menubar/VersionSelector";
 import { FullItem, ItemDescriptor, Version } from "../pageModel";

package/src/page-wizard/PageWizard.tsx

@@ -13,7 +13,10 @@ export type Wizard = {
   templateId: string;
 };
 
-export type PageSchema = SchemaPlaceholder[];
+export type PageSchema = {
+  placeholders: SchemaPlaceholder[];
+  pageFields: SchemaField[];
+};
 
 export type SchemaComponent = {
   type: string;
@@ -65,6 +68,7 @@ export type WizardPageModel = {
   metaKeywords: string;
   message?: string;
   images?: Thumbnail[];
+  fields: WizardField[];
 };
 
 export type WizardPageComponent = {

package/src/page-wizard/WizardSteps.tsx

@@ -330,6 +330,7 @@ export function WizardSteps({ wizard, parentItem }: WizardStepsProps) {
     name: "",
     metaDescription: "",
     metaKeywords: "",
+    fields: [],
   };
   const setPageModel = pageWizard?.setPageModel ?? (() => {});
   const internalState = pageWizard?.internalState ?? {};

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

@@ -15,6 +15,7 @@ export function ComponentTypeSelector({
   data,
   setData,
   step,
+  availableComponentTypes,
 }: {
   selectedComponentTypes?: string[];
   setSelectedComponentTypes: Dispatch<SetStateAction<string[]>>;
@@ -22,10 +23,8 @@ export function ComponentTypeSelector({
   data: WizardData;
   setData: (data: WizardData) => void;
   step: WizardStep;
+  availableComponentTypes?: string[];
 }) {
-  const [availableComponentTypes, setAvailableComponentTypes] = useState<
-    string[]
-  >([]);
   const [preselectedTypes, setPreselectedTypes] = useState<string[]>([]);
   const [searchFilter, setSearchFilter] = useState<string>("");
 
@@ -38,11 +37,13 @@ export function ComponentTypeSelector({
 
   // Handle select all component types
   const handleSelectAllComponents = () => {
-    setSelectedComponentTypes(availableComponentTypes);
-    setData({
-      ...data,
-      selectedComponentTypes: availableComponentTypes,
-    });
+    if (availableComponentTypes) {
+      setSelectedComponentTypes(availableComponentTypes);
+      setData({
+        ...data,
+        selectedComponentTypes: availableComponentTypes,
+      });
+    }
   };
 
   // Handle clear all component types
@@ -86,56 +87,28 @@ export function ComponentTypeSelector({
   };
 
   // Filter available components by search term
-  const filteredComponentTypes = availableComponentTypes.filter((type) =>
-    type.toLowerCase().includes(searchFilter.toLowerCase()),
-  );
+  const filteredComponentTypes =
+    availableComponentTypes?.filter((type) =>
+      type.toLowerCase().includes(searchFilter.toLowerCase()),
+    ) || [];
 
-  // Helper function to recursively extract component types
-  const extractComponentTypes = (
+  // Helper function to extract placeholders from the schema
+  const extractPlaceholders = (
     items: PageSchema | SchemaComponent[],
   ): string[] => {
-    if (!items || !Array.isArray(items)) return [];
-
-    let types: string[] = [];
-
-    for (const item of items) {
-      // Add the current component type if it exists
-      if ("type" in item) {
-        types.push(item.type);
-      }
+    if (!items) return [];
 
-      // Process components in placeholders recursively
-      if ("placeholders" in item && Array.isArray(item.placeholders)) {
-        for (const placeholder of item.placeholders) {
-          if (placeholder.components && Array.isArray(placeholder.components)) {
-            types = [
-              ...types,
-              ...extractComponentTypes(placeholder.components),
-            ];
-          }
-        }
-      }
-
-      // Process components directly (for top-level structure)
-      if ("components" in item && Array.isArray(item.components)) {
-        types = [...types, ...extractComponentTypes(item.components)];
-      }
+    if (items && "placeholders" in items) {
+      return items.placeholders.map((placeholder) => placeholder.name);
     }
 
-    return types;
-  };
-
-  // Helper function to extract placeholders from the schema
-  const extractPlaceholders = (
-    items: PageSchema | SchemaComponent[],
-  ): string[] => {
-    if (!items || !Array.isArray(items)) return [];
+    if (!Array.isArray(items)) return [];
 
     let placeholders: string[] = [];
 
     for (const item of items) {
       // Add the current placeholder name if it exists
-      if ("name" in item) {
+      if ("name" in item && typeof item.name === "string") {
         placeholders.push(item.name);
       }
 
@@ -167,75 +140,20 @@ export function ComponentTypeSelector({
     return placeholders;
   };
 
-  // Initialize selections based on data or preselected values
-  const initializeSelections = (
-    uniqueTypes: string[],
-    stepPreselectedTypes: string[],
-  ) => {
-    // Initialize selected types from data (parent component should have already initialized this)
-    if (
-      data.selectedComponentTypes &&
-      Array.isArray(data.selectedComponentTypes)
-    ) {
-      // Filter out any types that are no longer available
-      const validSelectedTypes = data.selectedComponentTypes.filter((type) =>
-        uniqueTypes.includes(type),
-      );
-      setSelectedComponentTypes(validSelectedTypes);
-    } else {
-      // Fallback initialization if parent didn't handle it
-      const initialSelection =
-        stepPreselectedTypes.length > 0 ? stepPreselectedTypes : uniqueTypes;
-      setSelectedComponentTypes(initialSelection);
-      setData({
-        ...data,
-        selectedComponentTypes: initialSelection,
-      });
-    }
-  };
-
-  // Extract component types and placeholders from wizard schema when available
+  // Initialize preselected types from step configuration
   useEffect(() => {
-    if (schema) {
-      try {
-        // Parse schema if it's a string
-        schema =
-          typeof schema === "string"
-            ? (JSON.parse(schema) as PageSchema)
-            : schema;
-
-        // Extract component types
-        const componentTypes = extractComponentTypes(schema);
-
-        // Remove duplicates and sort alphabetically
-        const uniqueTypes = Array.from(
-          new Set(componentTypes),
-        ).sort() as string[];
-
-        setAvailableComponentTypes(uniqueTypes);
-
-        // Parse preselected components from step if available
-        let stepPreselectedTypes: string[] = [];
-        if (step.fields["preselectedComponents"]) {
-          // Split by comma or newline and trim whitespace
-          stepPreselectedTypes = step.fields["preselectedComponents"]
-            .split(/[,\n\r]+/)
-            .map((type: string) => type.trim())
-            .filter((type: string) => type && uniqueTypes.includes(type)); // Only include valid types
-        }
-
-        // Set preselected types for UI differentiation
-        setPreselectedTypes(stepPreselectedTypes);
-
-        // Parse preselected placeholders from step if available
-
-        // Initialize component types and placeholders
-        initializeSelections(uniqueTypes, stepPreselectedTypes);
-      } catch (error) {
-        console.error("Error processing schema:", error);
-      }
+    if (availableComponentTypes && step.fields["preselectedComponents"]) {
+      // Parse preselected components from step if available
+      const stepPreselectedTypes = step.fields["preselectedComponents"]
+        .split(/[,\n\r]+/)
+        .map((type: string) => type.trim())
+        .filter(
+          (type: string) => type && availableComponentTypes.includes(type),
+        );
+
+      setPreselectedTypes(stepPreselectedTypes);
     }
-  }, [schema, step]);
+  }, [availableComponentTypes, step]);
 
   return (
     <div className="space-y-4">
@@ -371,7 +289,7 @@ export function ComponentTypeSelector({
                 );
               })
             ) : (
-              <div className="p-8 text-center text-gray-500">
+              <div className="p-8 text-center text-sm text-gray-500">
                 {searchFilter
                   ? "No matching component types found"
                   : "No component types available"}
@@ -386,6 +304,7 @@ export function ComponentTypeSelector({
               disabled={
                 selectedComponentTypes &&
                 Array.isArray(selectedComponentTypes) &&
+                availableComponentTypes &&
                 selectedComponentTypes.length === availableComponentTypes.length
               }
               className="flex-1 rounded bg-gray-200 px-2 py-1 text-xs text-gray-700 hover:bg-gray-300 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400"