@alpaca-editor/core 1.0.4134 → 1.0.4140

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

@@ -1,7 +1,7 @@
 "use client";
 
 import ContentTree from "../ContentTree";
-import { Splitter, SplitterPanel } from "primereact/splitter";
+import { Splitter } from "../ui/Splitter";
 import { useEffect, useState } from "react";
 import { ItemTreeNodeData, getChildren } from "../services/contentService";
 import { useEditContext } from "../client/editContext";
@@ -189,126 +189,147 @@ export const TreeSelector = ({
 
   return (
     <>
-      <Splitter className="flex-1 border-0">
-        <SplitterPanel size={25} className="flex flex-col">
-          <div className="relative flex-1">
-            {history.length > 0 && (
-              <div className="absolute top-2 right-2 z-50">
-                <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-8 w-8 p-0"
-                        >
-                          <ClockIcon className="h-4 w-4" />
-                        </Button>
-                      </PopoverTrigger>
-                    </TooltipTrigger>
-                    <TooltipContent>Recent Locations</TooltipContent>
-                  </Tooltip>
-                  <PopoverContent
-                    className="pointer-events-auto w-64 p-2"
-                    onPointerDown={(e) => e.stopPropagation()}
-                    onPointerMove={(e) => e.stopPropagation()}
-                    onPointerEnter={(e) => e.stopPropagation()}
-                    onPointerLeave={(e) => e.stopPropagation()}
-                    onClick={(e) => e.stopPropagation()}
-                    onMouseDown={(e) => e.stopPropagation()}
-                    onMouseMove={(e) => e.stopPropagation()}
-                    onMouseEnter={(e) => e.stopPropagation()}
-                    onMouseLeave={(e) => e.stopPropagation()}
-                  >
-                    <div className="mb-2 flex items-center gap-1 text-xs font-medium text-gray-700">
-                      <ClockIcon className="h-3 w-3" />
-                      Recent Locations
-                    </div>
-                    {history.map((x) => (
-                      <div
-                        key={x.idPath}
-                        className="cursor-pointer rounded px-2 py-1 text-xs hover:bg-gray-100"
-                        onMouseDown={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setSelectedFolderId(x.id);
-                          setExpandedIdPath(x.idPath);
-                          // Close the popover after selection
-                          setIsPopoverOpen(false);
-                        }}
+      <Splitter
+        className="flex-1"
+        direction="horizontal"
+        panels={[
+          {
+            name: "tree",
+            defaultSize: 300,
+            content: (
+              <div className="relative flex h-full flex-col">
+                {history.length > 0 && (
+                  <div className="absolute top-2 right-2 z-50">
+                    <Popover
+                      open={isPopoverOpen}
+                      onOpenChange={setIsPopoverOpen}
+                    >
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <PopoverTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-8 w-8 p-0"
+                            >
+                              <ClockIcon className="h-4 w-4" />
+                            </Button>
+                          </PopoverTrigger>
+                        </TooltipTrigger>
+                        <TooltipContent>Recent Locations</TooltipContent>
+                      </Tooltip>
+                      <PopoverContent
+                        className="pointer-events-auto w-64 p-2"
+                        onPointerDown={(e) => e.stopPropagation()}
+                        onPointerMove={(e) => e.stopPropagation()}
+                        onPointerEnter={(e) => e.stopPropagation()}
+                        onPointerLeave={(e) => e.stopPropagation()}
+                        onClick={(e) => e.stopPropagation()}
+                        onMouseDown={(e) => e.stopPropagation()}
+                        onMouseMove={(e) => e.stopPropagation()}
+                        onMouseEnter={(e) => e.stopPropagation()}
+                        onMouseLeave={(e) => e.stopPropagation()}
                       >
-                        {x.name}
-                      </div>
-                    ))}
-                  </PopoverContent>
-                </Popover>
+                        <div className="mb-2 flex items-center gap-1 text-xs font-medium text-gray-700">
+                          <ClockIcon className="h-3 w-3" />
+                          Recent Locations
+                        </div>
+                        {history.map((x) => (
+                          <div
+                            key={x.idPath}
+                            className="cursor-pointer rounded px-2 py-1 text-xs hover:bg-gray-100"
+                            onMouseDown={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              setSelectedFolderId(x.id);
+                              setExpandedIdPath(x.idPath);
+                              // Close the popover after selection
+                              setIsPopoverOpen(false);
+                            }}
+                          >
+                            {x.name}
+                          </div>
+                        ))}
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                )}
+                <div
+                  data-testid="media-selector-tree"
+                  className={`absolute inset-0 overflow-auto p-2 ${isPopoverOpen ? "pointer-events-none" : ""}`}
+                >
+                  <ContentTree
+                    rootItemIds={["3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1"]}
+                    selectionMode="single"
+                    selectedItemIds={selection}
+                    templateIds={["FE5DD826-48C6-436D-B87A-7C4210C7413B"]}
+                    onItemInserted={(item) => {
+                      setSelectedFolderId(item.id);
+                    }}
+                    expandIdPath={
+                      expandedIdPath ?? "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1"
+                    }
+                    onSelectionChange={(selection) => {
+                      const selectedNode = selection[0] as ItemTreeNodeData;
+                      if (selectedNode) setSelectedFolderId(selectedNode.id);
+                      else setSelectedFolderId(undefined);
+                    }}
+                    language={language}
+                  />
+                </div>
               </div>
-            )}
-            <div
-              data-testid="media-selector-tree"
-              className={`absolute inset-0 overflow-auto p-2 ${isPopoverOpen ? "pointer-events-none" : ""}`}
-            >
-              <ContentTree
-                rootItemIds={["3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1"]}
-                selectionMode="single"
-                selectedItemIds={selection}
-                templateIds={["FE5DD826-48C6-436D-B87A-7C4210C7413B"]}
-                onItemInserted={(item) => {
-                  setSelectedFolderId(item.id);
-                }}
-                expandIdPath={
-                  expandedIdPath ?? "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1"
-                }
-                onSelectionChange={(selection) => {
-                  const selectedNode = selection[0] as ItemTreeNodeData;
-                  if (selectedNode) setSelectedFolderId(selectedNode.id);
-                  else setSelectedFolderId(undefined);
-                }}
-                language={language}
-              />
-            </div>
-          </div>
-        </SplitterPanel>
-        <SplitterPanel className="relative">
-          <div className="flex h-full w-full flex-col gap-2">
-            <AiImageSearchPrompt onSearchPromptChange={searchDebounced} />
+            ),
+          },
+          {
+            name: "thumbnails",
+            defaultSize: "auto",
+            content: (
+              <div className="relative flex h-full w-full flex-col gap-2">
+                <AiImageSearchPrompt onSearchPromptChange={searchDebounced} />
 
-            <div className="relative flex-1">
-              {loadingThumbnails && (
-                <div className="flex h-full items-center">
-                  <Loader2 className="h-6 w-6 animate-spin" />
+                <div className="relative flex-1">
+                  {loadingThumbnails && (
+                    <div className="flex h-full items-center">
+                      <Loader2 className="h-6 w-6 animate-spin" />
+                    </div>
+                  )}
+                  {!loadingThumbnails && (
+                    <Thumbnails
+                      images={images ?? []}
+                      selectedImage={selectedImage}
+                      setSelectedImage={setSelectedImage}
+                      onMediaSelected={() => {
+                        updateHistory();
+                        onMediaSelected(selectedImage!.id);
+                      }}
+                      onHide={onHide}
+                    />
+                  )}
                 </div>
-              )}
-              {!loadingThumbnails && (
-                <Thumbnails
-                  images={images ?? []}
-                  selectedImage={selectedImage}
-                  setSelectedImage={setSelectedImage}
-                  onMediaSelected={() => {
-                    updateHistory();
-                    onMediaSelected(selectedImage!.id);
-                  }}
-                  onHide={onHide}
-                />
-              )}
-            </div>
-            {selectedFolderId && (
-              <div className="border-gray-3 border-t">
-                <UploadZone
-                  selectedFolderId={selectedFolderId}
-                  uploadCompleted={() => {
-                    loadThumbnailsAndSelectImage();
-                  }}
-                />
+                {selectedFolderId && (
+                  <div className="border-gray-3 border-t">
+                    <UploadZone
+                      selectedFolderId={selectedFolderId}
+                      uploadCompleted={() => {
+                        loadThumbnailsAndSelectImage();
+                      }}
+                    />
+                  </div>
+                )}
+              </div>
+            ),
+          },
+          {
+            name: "preview",
+            defaultSize: 250,
+            content: (
+              <div className="relative h-full">
+                <Preview selectedImage={selectedImage} />
               </div>
-            )}
-          </div>
-        </SplitterPanel>
-        <SplitterPanel className="relative">
-          <Preview selectedImage={selectedImage} />
-        </SplitterPanel>
-      </Splitter>
+            ),
+          },
+        ]}
+      />
       <DialogButtons>
         <Button variant="ghost" onClick={() => onHide()}>
           Cancel

package/src/editor/menubar/toolbar-sections/UtilityControls.tsx

@@ -4,9 +4,12 @@ import { Layers } from "lucide-react";
 import { SecretAgentIcon } from "../../ui/Icons";
 import { EnterFullScreenIcon } from "@radix-ui/react-icons";
 import { CompareIcon } from "../../ui/Icons";
+import { useAgentStatus } from "../../ai/useAgentStatus";
+import { AgentStatusBadge } from "../../ai/AgentStatusBadge";
 
 export function UtilityControls() {
   const editContext = useEditContext();
+  const agentStatus = useAgentStatus();
 
   if (!editContext) return null;
 
@@ -38,7 +41,12 @@ export function UtilityControls() {
         />
       )}
       <SimpleIconButton
-        icon={<SecretAgentIcon />}
+        icon={
+          <div className="relative">
+            <SecretAgentIcon />
+            <AgentStatusBadge status={agentStatus} />
+          </div>
+        }
         label="Agents"
         size="large"
         data-testid="agents-panel-button"

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

@@ -45,9 +45,9 @@ export function PlaceholderDropZone({
   const [isHovering, setIsHovering] = useState(false);
 
   const editContext = useEditContext();
-  if (!editContext) return;
 
   function dragOver(ev: any) {
+    console.log("dragOver", editContext?.mode, editContext?.readonly);
     if (editContext?.mode !== "edit" || editContext?.readonly) {
       ev.dataTransfer.dropEffect = "none";
       return;
@@ -85,7 +85,7 @@ export function PlaceholderDropZone({
   if (size === "small") overlayStyle.transform = "scale(0.5)";
 
   useEffect(() => {
-    if (isHovering) {
+    if (isHovering && editContext) {
       editContext.setStatusMessage(
         <div>
           Drop into placeholder <span className="font-bold">{parentName}</span>{" "}
@@ -93,10 +93,13 @@ export function PlaceholderDropZone({
           at position <span className="font-bold">{index + 1}</span>
         </div>,
       );
-    } else {
+    } else if (editContext) {
       editContext.setStatusMessage("");
     }
-  }, [isHovering]);
+  }, [isHovering, editContext]);
+
+  // Return null after all hooks have been called to avoid breaking React's Rules of Hooks
+  if (!editContext || editContext.readonly) return null;
 
   const ctrlTypeOption = typeIdOnCtrlClick
     ? placeholder.insertOptions?.find((x) => x.typeId === typeIdOnCtrlClick)

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

@@ -1,5 +1,5 @@
 import { Select } from "../../components/ui/select";
-import { InputNumber } from "primereact/inputnumber";
+import { Input } from "../../components/ui/input";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { RotateDeviceIcon } from "../ui/Icons";
 import { useDebouncedCallback } from "use-debounce";
@@ -39,20 +39,24 @@ export function DeviceToolbar({
         onValueChange={(value) => pageViewContext.setDevice(value)}
         placeholder="Select device"
       />
-      <InputNumber
-        size={4}
+      <Input
+        type="number"
         max={10000}
-        className="text-sm"
-        value={pageViewContext.deviceWidth}
-        onChange={(e) => debouncedSetDeviceWidth(e.value || undefined)}
+        className="w-16 text-sm"
+        value={pageViewContext.deviceWidth || ""}
+        onChange={(e) =>
+          debouncedSetDeviceWidth(Number(e.target.value) || undefined)
+        }
       />
       x
-      <InputNumber
-        size={4}
+      <Input
+        type="number"
         max={10000}
-        className="text-sm"
-        value={pageViewContext.deviceHeight}
-        onChange={(e) => debouncedSetDeviceHeight(e.value || undefined)}
+        className="w-16 text-sm"
+        value={pageViewContext.deviceHeight || ""}
+        onChange={(e) =>
+          debouncedSetDeviceHeight(Number(e.target.value) || undefined)
+        }
       />
       <SimpleIconButton
         icon={

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

@@ -24,7 +24,7 @@ import {
 
 import { getComponentById } from "../componentTreeHelper";
 import { buildComponentContextMenuItems } from "../ContextMenu";
-import { loadFieldButtons } from "../services/editService";
+import { loadFieldButtons, releaseFieldLocks } from "../services/editService";
 import { usePathname } from "next/navigation";
 import { EditorWarnings } from "../EditorWarnings";
 import {
@@ -188,7 +188,7 @@ export function PageViewerFrame({
         : pageViewContext.editUrl;
 
     const renderUrl = new URL(urlPath, window.location.origin);
-    renderUrl.searchParams.set("edit_rev", editContext.revision ?? uuid());
+    renderUrl.searchParams.set("edit_rev", uuid());
 
     if (iframeRef.current?.contentWindow?.requestRefresh) {
       console.log("Integration - requesting refresh");
@@ -441,17 +441,17 @@ export function PageViewerFrame({
         if (owner?.layoutId) return;
       }
 
-      fieldsContextRef.current?.setFocusedField(
-        {
-          fieldId: fieldId,
-          item: {
-            id: fieldElement.getAttribute("data-itemid") || "",
-            language: fieldElement.getAttribute("data-language") || "",
-            version: parseInt(fieldElement.getAttribute("data-version") || "0"),
-          },
-        },
-        editContext.mode === "edit",
-      );
+      // fieldsContextRef.current?.setFocusedField(
+      //   {
+      //     fieldId: fieldId,
+      //     item: {
+      //       id: fieldElement.getAttribute("data-itemid") || "",
+      //       language: fieldElement.getAttribute("data-language") || "",
+      //       version: parseInt(fieldElement.getAttribute("data-version") || "0"),
+      //     },
+      //   },
+      //   editContext.mode === "edit",
+      // );
 
       // Compute the global offsets relative to the field element.
       const globalStartOffset = getGlobalTextOffset(
@@ -572,6 +572,8 @@ export function PageViewerFrame({
         //}
       } else editContextRef.current?.select([]);
 
+      console.log("componentId", componentId);
+
       if (
         (editContextRef.current?.mode === "edit" &&
           pageViewContextRef.current?.page?.item.canWriteItem) ||
@@ -616,9 +618,13 @@ export function PageViewerFrame({
           // Clicked inside iframe but not on a field: clear focused field
           fieldsContextRef.current?.setFocusedField(undefined, false);
           fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
+          // Release field locks when unfocusing field
+          if (editContextRef.current?.sessionId) {
+            releaseFieldLocks(editContextRef.current.sessionId);
+          }
         }
       }
-      //Forward events so primereact overlays can close
+
       const clickEvent = new MouseEvent("click", {
         view: window,
         bubbles: true,