@alpaca-editor/core 1.0.4095 → 1.0.4097

package/src/editor/FieldActionsOverlay.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect } from "react";
-import { OverlayPanel } from "primereact/overlaypanel";
+import { Popover, PopoverContent, PopoverAnchor } from "../components/ui/popover";
+import { Button } from "../components/ui/button";
+import { ArrowLeft } from "lucide-react";
 import { FieldButton, FieldButtonParameter } from "./pageModel";
 
 interface FieldActionsOverlayProps {
@@ -33,7 +35,8 @@ const FieldActionsOverlay = React.forwardRef<
     },
     ref,
   ) => {
-    const overlayRef = useRef<OverlayPanel>(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [anchorPosition, setAnchorPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
     const [selectedParameterizedAction, setSelectedParameterizedAction] =
       useState<FieldButton | null>(null);
     const [parameterValues, setParameterValues] = useState<
@@ -44,7 +47,7 @@ const FieldActionsOverlay = React.forwardRef<
 
     useEffect(() => {
       if (currentOverlay !== overlayId) {
-        overlayRef.current?.hide();
+        setIsOpen(false);
         resetParameterizedAction();
       }
     }, [currentOverlay, overlayId]);
@@ -68,7 +71,7 @@ const FieldActionsOverlay = React.forwardRef<
         setParameterValues(initialValues);
       } else {
         onActionClick(action);
-        overlayRef.current?.hide();
+        setIsOpen(false);
       }
     }
 
@@ -79,7 +82,7 @@ const FieldActionsOverlay = React.forwardRef<
           parameterValues,
         );
         resetParameterizedAction();
-        overlayRef.current?.hide();
+        setIsOpen(false);
       }
     }
 
@@ -89,7 +92,7 @@ const FieldActionsOverlay = React.forwardRef<
 
     function cancelParameterizedAction(): void {
       resetParameterizedAction();
-      overlayRef.current?.hide();
+      setIsOpen(false);
     }
 
     function updateParameterValue(paramId: string, value: string): void {
@@ -164,23 +167,28 @@ const FieldActionsOverlay = React.forwardRef<
       }
     }
 
+    function getAnchorPositionFromEvent(event: any): { x: number; y: number } {
+      try {
+        const target = event?.target as HTMLElement | null;
+        if (target && typeof target.getBoundingClientRect === "function") {
+          const rect = target.getBoundingClientRect();
+          return { x: rect.left + rect.width / 2, y: rect.top + rect.height };
+        }
+        if (typeof event?.clientX === "number" && typeof event?.clientY === "number") {
+          return { x: event.clientX, y: event.clientY };
+        }
+      } catch {}
+      return { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+    }
+
     function show(event: any, actionToSelect?: FieldButton): void {
-      // Set overlay state first, then show
+      // Track which overlay is active
       setCurrentOverlay(overlayId);
 
-      // Check if this is a synthetic event (from context menu) or real event (from button click)
-      if (
-        event &&
-        event.isTrusted === false &&
-        event.target &&
-        event.target.style
-      ) {
-        // This is likely our synthetic event with a positioned target element
-        overlayRef.current?.toggle(event, event.target);
-      } else {
-        // This is a normal event, use standard positioning
-        overlayRef.current?.toggle(event);
-      }
+      // Compute anchor position from the event (real or synthetic)
+      const pos = getAnchorPositionFromEvent(event);
+      setAnchorPosition(pos);
+      setIsOpen(true);
 
       // Use the passed actionToSelect or fall back to preSelectedAction prop
       const actionToAutoSelect = actionToSelect || preSelectedAction;
@@ -191,20 +199,15 @@ const FieldActionsOverlay = React.forwardRef<
         actionToAutoSelect.parameters &&
         actionToAutoSelect.parameters.length > 0
       ) {
-        // Use longer timeout to ensure overlay is stable
+        // Small delay to ensure the popover is visible before rendering inputs
         setTimeout(() => {
           handleActionClick(actionToAutoSelect);
         }, 50);
-      } else {
-        console.log(
-          "Not auto-selecting - actionToAutoSelect:",
-          actionToAutoSelect,
-        );
       }
     }
 
     function hide(): void {
-      overlayRef.current?.hide();
+      setIsOpen(false);
     }
 
     React.useImperativeHandle(ref, () => ({
@@ -213,74 +216,93 @@ const FieldActionsOverlay = React.forwardRef<
     }));
 
     return (
-      <OverlayPanel ref={overlayRef} className="p-1">
-        {selectedParameterizedAction ? (
-          <div className="min-w-64 p-2">
-            <div className="mb-2">
-              <div className="mb-2 flex items-center">
-                {!hideBackButton && (
-                  <button
-                    className="mr-2 text-xs hover:text-gray-400"
-                    onClick={goBackToActionList}
-                  >
-                    <i className="pi pi-arrow-left" />
-                  </button>
-                )}
-                <span className="text-xs font-semibold">
-                  {selectedParameterizedAction.label}
-                </span>
-              </div>
-              <div className="mb-3 text-xs text-gray-600">
-                {selectedParameterizedAction.description}
-              </div>
-
-              {selectedParameterizedAction.parameters?.map((param, index) => (
-                <div key={param.id} className="mb-3">
-                  <label className="mb-1 block text-xs font-medium">
-                    {param.label}
-                    {param.required && (
-                      <span className="ml-1 text-red-500">*</span>
-                    )}
-                  </label>
-                  {renderParameterInput(param, index === 0)}
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverAnchor asChild>
+          <div
+            style={{
+              position: "fixed",
+              left: anchorPosition.x,
+              top: anchorPosition.y,
+              width: 1,
+              height: 1,
+              pointerEvents: "none",
+              zIndex: -1,
+            }}
+          />
+        </PopoverAnchor>
+        <PopoverContent
+          className="w-auto p-1"
+          align="start"
+          side="bottom"
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {selectedParameterizedAction ? (
+            <div className="min-w-64 p-2">
+              <div className="mb-2">
+                <div className="mb-2 flex items-center">
+                  {!hideBackButton && (
+                    <Button
+                      size="xs"
+                      variant="ghost"
+                      className="mr-2"
+                      onClick={goBackToActionList}
+                      aria-label="Back"
+                    >
+                      <ArrowLeft size={14} strokeWidth={1} />
+                    </Button>
+                  )}
+                  <span className="text-xs font-semibold">
+                    {selectedParameterizedAction.label}
+                  </span>
                 </div>
-              ))}
+                <div className="mb-3 text-xs text-gray-600">
+                  {selectedParameterizedAction.description}
+                </div>
+
+                {selectedParameterizedAction.parameters?.map((param, index) => (
+                  <div key={param.id} className="mb-3">
+                    <label className="mb-1 block text-xs font-medium">
+                      {param.label}
+                      {param.required && (
+                        <span className="ml-1 text-red-500">*</span>
+                      )}
+                    </label>
+                    {renderParameterInput(param, index === 0)}
+                  </div>
+                ))}
 
-              <div className="mt-1 text-xs text-gray-500">
-                Ctrl+Enter to execute, Esc to cancel
+                <div className="mt-1 text-xs text-gray-500">
+                  Ctrl+Enter to execute, Esc to cancel
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <Button size="xs" onClick={executeParameterizedAction} disabled={!areRequiredParametersFilled()}>
+                  Execute
+                </Button>
+                <Button size="xs" variant="outline" onClick={cancelParameterizedAction}>
+                  Cancel
+                </Button>
               </div>
             </div>
-            <div className="flex gap-2">
-              <button
-                className="rounded bg-blue-500 px-3 py-1 text-xs text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
-                onClick={executeParameterizedAction}
-                disabled={!areRequiredParametersFilled()}
-              >
-                Execute
-              </button>
-              <button
-                className="rounded bg-gray-300 px-3 py-1 text-xs text-gray-700 hover:bg-gray-400"
-                onClick={cancelParameterizedAction}
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        ) : (
-          <>
-            {generatorButtons?.map((x) => (
-              <button
-                key={x.id}
-                className="block cursor-pointer p-1 text-xs hover:text-gray-400"
-                onClick={() => handleActionClick(x)}
-              >
-                {x.icon && <i className={x.icon + " mr-2 text-xs"} />}
-                {x.label}
-              </button>
-            ))}
-          </>
-        )}
-      </OverlayPanel>
+          ) : (
+            <>
+              {generatorButtons?.map((x) => (
+                <Button
+                  key={x.id}
+                  size="xs"
+                  variant="ghost"
+                  className="block w-full justify-start"
+                  onClick={() => handleActionClick(x)}
+                >
+                  {x.icon && <i className={x.icon + " mr-2 text-xs"} />}
+                  {x.label}
+                </Button>
+              ))}
+            </>
+          )}
+        </PopoverContent>
+      </Popover>
     );
   },
 );

package/src/editor/FieldListField.tsx

@@ -293,7 +293,10 @@ export default function FieldListField({
 
           {fieldLockedBySession &&
             fieldLockedBySession.sessionId !== editContext.sessionId && (
-              <div className="bg-pink-400 p-1 text-xs text-white">
+              <div
+                className="rounded-sm px-1.5 py-0.5 text-xs text-white"
+                style={{ backgroundColor: fieldLockedBySession.color }}
+              >
                 locked by {fieldLockedBySession.user.name}
               </div>
             )}

package/src/editor/LinkEditorDialog.tsx

@@ -154,7 +154,7 @@ export function LinkEditorDialog({
                   tabs={tabs}
                   activeTab={activeTabIndex}
                   setActiveTab={setActiveTabIndex}
-                  className="flex items-center justify-center border-b border-gray-200 pt-2 text-xs"
+                  className="flex items-center justify-center border-b border-gray-200 pt-4 text-xs"
                   tabClassName="text-xs"
                 />
               )}