@parhelia/core 0.1.12903 → 0.1.12905

package/dist/editor/page-editor-chrome/FrameMenu.js

@@ -1,138 +1,107 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useEditContext } from "../client/editContext";
+import { findComponentRect } from "../utils";
+import { useThrottledCallback } from "use-debounce";
 import { cn } from "../../lib/utils";
 import { PlaceholderDropZone } from "./PlaceholderDropZone";
-import { buildComponentContextMenuItems } from "../ContextMenu";
+import { showComponentContextMenu } from "../ContextMenu";
 import { getComponentById } from "../componentTreeHelper";
-import { loadFieldButtons } from "../services/editService";
-import { normalizeMarkerId } from "../utils";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
-import { componentFrameBgColorVariants, componentFrameBgHoverColorVariants, componentFrameBorderColorVariants, } from "../componentFrameColors";
 import { GripVertical, ArrowUpFromDot, Sparkles } from "lucide-react";
-import { useComponentDragHandle } from "./useComponentDragHandle";
-import { measureBridgeComponentRect, rectEquals, } from "./overlay/geometry";
-import { useOverlayMeasurement } from "./overlay/useOverlayMeasurement";
-function componentOverlayMeasurementEquals(previous, next) {
-    if (previous.componentKey !== next.componentKey)
-        return false;
-    if (!rectEquals(previous.rect, next.rect))
-        return false;
-    if (previous.elements.length !== next.elements.length)
-        return false;
-    return previous.elements.every((element, index) => element === next.elements[index]);
-}
-function bridgeIdsMatch(left, right) {
-    const normalizedLeft = normalizeMarkerId(left);
-    const normalizedRight = normalizeMarkerId(right);
-    return (!!normalizedLeft && !!normalizedRight && normalizedLeft === normalizedRight);
-}
-function fieldMatchesBridgeId(field, fieldId) {
-    return (bridgeIdsMatch(field.id, fieldId) ||
-        bridgeIdsMatch(field.name, fieldId) ||
-        bridgeIdsMatch(field.displayName, fieldId));
-}
-export function FrameMenu(props) {
+import { setMultiDragImage, setComponentDragImage } from "../ui/DragPreview";
+export function FrameMenu({ component, compareView, pageViewContext, }) {
     const editContext = useEditContext();
-    if (!props.component || !editContext)
-        return null;
-    return _jsx(FrameMenuContent, { ...props, editContext: editContext });
-}
-function FrameMenuContent({ component, isSelected = true, compareView, pageViewContext, editContext, }) {
-    const frameRef = useRef(null);
+    const resizeObserverRef = useRef(null);
+    const mutationObserverRef = useRef(null);
     const headerRef = useRef(null);
-    const previousFrameRef = useRef(null);
-    const frameAnimationFrameRef = useRef(null);
-    const frameAnimationTimeoutRef = useRef(null);
-    const isHoverFrame = !isSelected;
+    const pendingDragStartTimeoutRef = useRef(null);
     const [commands, setCommands] = useState([]);
-    const [commandComponentKey, setCommandComponentKey] = useState(null);
+    const [componentRect, setComponentRect] = useState();
     const [isHeaderWiderThanComponent, setIsHeaderWiderThanComponent] = useState(false);
-    const componentFrameKey = normalizeMarkerId(component.id) || component.id;
-    const componentMeasurement = useOverlayMeasurement((metrics) => {
-        const bridgeResult = measureBridgeComponentRect(pageViewContext.bridgeGeometry, component, metrics);
-        if (bridgeResult?.rect) {
-            return { ...bridgeResult, componentKey: componentFrameKey };
-        }
-        return { componentKey: componentFrameKey, rect: null, elements: [] };
-    }, [component, componentFrameKey, pageViewContext.bridgeGeometry], {
-        initialValue: { componentKey: null, rect: null, elements: [] },
-        equals: componentOverlayMeasurementEquals,
-        interests: ["viewport", "layout", "adornment-data"],
-        validateBeforePaint: true,
-    });
-    const isCurrentComponentMeasurement = componentMeasurement.componentKey === componentFrameKey;
-    const componentRect = componentMeasurement.rect ?? undefined;
-    useLayoutEffect(() => {
-        if (!componentRect || !isCurrentComponentMeasurement)
+    const updatePosition = () => {
+        if (!component || !editContext || !pageViewContext)
             return;
-        const previous = previousFrameRef.current;
-        previousFrameRef.current = {
-            componentKey: componentFrameKey,
-            rect: componentRect,
-        };
-        const frameElement = frameRef.current;
-        if (!frameElement ||
-            isHoverFrame ||
-            !previous ||
-            previous.componentKey === componentFrameKey ||
-            window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+        const iframe = pageViewContext.editorIframe;
+        if (!iframe)
             return;
-        }
-        const deltaX = previous.rect.x - componentRect.x;
-        const deltaY = previous.rect.y - componentRect.y;
-        const scaleX = previous.rect.width > 0 && componentRect.width > 0
-            ? previous.rect.width / componentRect.width
-            : 1;
-        const scaleY = previous.rect.height > 0 && componentRect.height > 0
-            ? previous.rect.height / componentRect.height
-            : 1;
-        const shouldAnimate = Math.hypot(deltaX, deltaY) > 1 ||
-            Math.abs(scaleX - 1) > 0.01 ||
-            Math.abs(scaleY - 1) > 0.01;
-        if (!shouldAnimate)
+        const resetSelection = () => {
+            setComponentRect(undefined);
+        };
+        const componentRect = findComponentRect(iframe, component)?.rect;
+        if (!componentRect) {
+            resetSelection();
             return;
-        if (frameAnimationFrameRef.current !== null) {
-            window.cancelAnimationFrame(frameAnimationFrameRef.current);
-            frameAnimationFrameRef.current = null;
-        }
-        if (frameAnimationTimeoutRef.current !== null) {
-            window.clearTimeout(frameAnimationTimeoutRef.current);
-            frameAnimationTimeoutRef.current = null;
         }
-        frameElement.style.transition = "none";
-        frameElement.style.transformOrigin = "top left";
-        frameElement.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
-        frameElement.style.willChange = "transform";
-        frameAnimationFrameRef.current = window.requestAnimationFrame(() => {
-            frameAnimationFrameRef.current = null;
-            frameElement.style.transition =
-                "transform 220ms cubic-bezier(0.2, 0, 0, 1)";
-            frameElement.style.transform = "translate(0px, 0px) scale(1, 1)";
-            frameAnimationTimeoutRef.current = window.setTimeout(() => {
-                frameElement.style.transition = "";
-                frameElement.style.transform = "";
-                frameElement.style.transformOrigin = "";
-                frameElement.style.willChange = "";
-                frameAnimationTimeoutRef.current = null;
-            }, 260);
-        });
-    }, [
-        componentFrameKey,
-        componentRect,
-        isCurrentComponentMeasurement,
-        isHoverFrame,
-    ]);
+        setComponentRect(componentRect);
+    };
+    const updatePositionThrottled = useThrottledCallback(updatePosition, 10, {
+        leading: true,
+        trailing: true,
+    });
+    // Cleanup effect to prevent memory leaks and state updates after unmount
     useEffect(() => {
         return () => {
-            if (frameAnimationFrameRef.current !== null) {
-                window.cancelAnimationFrame(frameAnimationFrameRef.current);
-            }
-            if (frameAnimationTimeoutRef.current !== null) {
-                window.clearTimeout(frameAnimationTimeoutRef.current);
+            updatePositionThrottled.cancel?.();
+            if (pendingDragStartTimeoutRef.current) {
+                clearTimeout(pendingDragStartTimeoutRef.current);
+                pendingDragStartTimeoutRef.current = null;
             }
         };
     }, []);
+    // Effect to handle changes in the observed element
+    useEffect(() => {
+        if (component) {
+            const iframe = pageViewContext.editorIframe;
+            if (!iframe)
+                return;
+            mutationObserverRef.current = new MutationObserver(() => {
+                updatePositionThrottled();
+            });
+            if (!iframe.contentDocument)
+                return;
+            mutationObserverRef.current.observe(iframe.contentDocument, {
+                childList: true, // observe direct children changes
+                subtree: true, // observe all descendants changes
+                characterData: true, // observe text changes
+                //attributes: true, // observe attribute changes (like style or class)
+            });
+            // Create a new ResizeObserver instance
+            resizeObserverRef.current = new ResizeObserver(() => {
+                updatePositionThrottled();
+            });
+            const scrollContainer = iframe.contentWindow?.document.scrollingElement ||
+                iframe.contentWindow?.document.body;
+            scrollContainer?.addEventListener("scroll", updatePositionThrottled);
+            iframe.contentWindow?.addEventListener("scroll", updatePositionThrottled);
+            const componentRect = findComponentRect(iframe, component);
+            if (!componentRect) {
+                updatePositionThrottled();
+                return;
+            }
+            // Immediately set the rect so frame renders right away
+            updatePositionThrottled();
+            componentRect.elements.forEach((componentElement) => {
+                resizeObserverRef.current.observe(componentElement);
+            });
+            // Store references for cleanup
+            const scrollContainerRef = scrollContainer;
+            const iframeWindowRef = iframe.contentWindow;
+            return () => {
+                if (mutationObserverRef.current) {
+                    mutationObserverRef.current.disconnect();
+                    mutationObserverRef.current = null;
+                }
+                if (resizeObserverRef.current) {
+                    resizeObserverRef.current.disconnect();
+                    resizeObserverRef.current = null;
+                }
+                // Clean up scroll event listeners
+                scrollContainerRef?.removeEventListener("scroll", updatePositionThrottled);
+                iframeWindowRef?.removeEventListener("scroll", updatePositionThrottled);
+            };
+        }
+    }, [component]);
     // Effect to measure header width and compare with componentRect
     useEffect(() => {
         if (!headerRef.current || !componentRect)
@@ -148,21 +117,26 @@ function FrameMenuContent({ component, isSelected = true, compareView, pageViewC
             headerResizeObserver.disconnect();
         };
     }, [componentRect]);
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            updatePositionThrottled();
+        }, 100);
+        return () => clearTimeout(timeoutId);
+    }, [
+        pageViewContext?.scroll,
+        pageViewContext?.viewport,
+        pageViewContext?.device,
+        pageViewContext?.fullscreen,
+        pageViewContext?.zoom,
+    ]);
+    if (!component || !editContext)
+        return null;
     // const commands = editContext.getComponentCommands([component]);
     useEffect(() => {
-        let cancelled = false;
-        if (!isSelected) {
-            return () => {
-                cancelled = true;
-            };
-        }
         // Load commands asynchronously - don't block rendering
         async function loadCommands() {
             const commands = await editContext.getComponentCommands([component]);
-            if (!cancelled) {
-                setCommands(commands);
-                setCommandComponentKey(componentFrameKey);
-            }
+            setCommands(commands);
         }
         // Use requestIdleCallback or setTimeout to defer command loading, allowing frame to render first
         if (typeof requestIdleCallback !== "undefined") {
@@ -176,22 +150,11 @@ function FrameMenuContent({ component, isSelected = true, compareView, pageViewC
                 loadCommands();
             }, 0);
         }
-        return () => {
-            cancelled = true;
-        };
-    }, [component, componentFrameKey, isSelected]);
+    }, [component]);
     // Determine if draggable - layout components should not be draggable when showLayoutComponents is disabled
     const isLayoutReadonlyCheck = component.layoutId && !editContext.showLayoutComponents;
     const isDraggable = component.canBeMoved && !isLayoutReadonlyCheck;
-    // Whole-component pointer drag (replaces native HTML5 DnD): forwards a
-    // client-space gesture stream to the shared DragInsertionOverlay orchestration.
-    const { onPointerDown: onGripPointerDown } = useComponentDragHandle({
-        component,
-        pageViewContext,
-        enabled: isSelected && isDraggable,
-    });
-    const visibleCommands = commandComponentKey === componentFrameKey ? commands : [];
-    const commandButtons = visibleCommands
+    const commandButtons = commands
         .filter((x) => !editContext.isCommandDisabled({ command: x }) &&
         x.visibilityScopes.indexOf("editFrame") >= 0)
         .map((x) => ({
@@ -208,14 +171,78 @@ function FrameMenuContent({ component, isSelected = true, compareView, pageViewC
         },
     }));
     const customButtons = []; // TODO
-    const buttons = isSelected ? [...customButtons, ...commandButtons] : [];
+    const buttons = [...customButtons, ...commandButtons];
+    function handleDragStart(event) {
+        if (!component?.datasourceItem || !editContext)
+            return;
+        // Set custom drag image with background for both single and multi-select
+        const selectedCount = editContext?.selection?.length || 0;
+        if (selectedCount > 1) {
+            setMultiDragImage(event, selectedCount, "components");
+        }
+        else {
+            // Calculate color for drag image
+            const isShared = component.isShared;
+            const isLayout = component.layoutId;
+            const isLayoutReadonly = isLayout && !editContext.showLayoutComponents;
+            const isReadonly = editContext.mode === "preview" || compareView || isLayoutReadonly;
+            let dragColor = "default";
+            if (isReadonly && !isLayoutReadonly)
+                dragColor = "readonly";
+            else if (editContext?.mode === "suggestions")
+                dragColor = "suggestions";
+            else if (isLayout)
+                dragColor = "layout";
+            else if (isShared)
+                dragColor = "shared";
+            else if (component.canBeMoved)
+                dragColor = "default";
+            else
+                dragColor = "nonMovable";
+            // Use custom drag image for single component to ensure background is visible
+            setComponentDragImage(event, component.name, dragColor);
+        }
+        // Allow both copy and move from component drag origins
+        try {
+            event.dataTransfer.effectAllowed = "copyMove";
+        }
+        catch { }
+        event.dataTransfer.setData("componentId", component.id);
+        pendingDragStartTimeoutRef.current = setTimeout(() => {
+            if (!component?.datasourceItem)
+                return;
+            const language = pageViewContext.page.item.language;
+            const version = pageViewContext.page.item.version;
+            const selectedIds = (editContext?.selection?.length || 0) > 1
+                ? editContext.selection
+                : [component.id];
+            const componentsToDrag = selectedIds.map((id) => ({
+                id,
+                language,
+                version,
+            }));
+            editContext.dragStart({
+                type: "component",
+                typeId: component.typeId,
+                templateId: component.datasourceItem?.templateId,
+                name: component.name,
+                components: componentsToDrag,
+            });
+        }, 50);
+        event.stopPropagation();
+    }
+    function handleDragEnd() {
+        if (pendingDragStartTimeoutRef.current) {
+            clearTimeout(pendingDragStartTimeoutRef.current);
+            pendingDragStartTimeoutRef.current = null;
+        }
+        editContext.dragEnd();
+    }
     const isShared = component.isShared;
     const isLayout = component.layoutId;
     // Layout components should be read-only when showLayoutComponents is disabled
     const isLayoutReadonly = isLayout && !editContext.showLayoutComponents;
     const isReadonly = editContext.mode === "preview" || compareView || isLayoutReadonly;
-    const isInsertMode = editContext.mode === "edit" &&
-        (editContext.insertMode || !!editContext.selectedForInsertion);
     function getColor() {
         if (isReadonly && !isLayoutReadonly)
             return "readonly";
@@ -230,27 +257,42 @@ function FrameMenuContent({ component, isSelected = true, compareView, pageViewC
         return "nonMovable";
     }
     const color = getColor();
+    const colorVariants = {
+        shared: "border-orange-400",
+        readonly: "border-gray-400",
+        layout: "border-purple-400",
+        default: "border-component-blue",
+        nonMovable: "border-red-400",
+        suggestions: "border-teal-400",
+    };
+    const bgColorVariants = {
+        shared: "bg-orange-400",
+        readonly: "bg-gray-400",
+        layout: "bg-purple-400",
+        default: "bg-component-blue",
+        nonMovable: "bg-red-400",
+        suggestions: "bg-teal-400",
+    };
+    const dropzoneColorVariants = {
+        shared: "bg-orange-400/40 hover:bg-orange-400",
+        readonly: "bg-gray-400/40 hover:bg-gray-400",
+        layout: "bg-purple-400/40 hover:bg-purple-400",
+        default: "bg-component-blue/40 hover:bg-component-blue",
+        nonMovable: "bg-red-400/40 hover:bg-red-400",
+        suggestions: "bg-teal-400/40 hover:bg-teal-400",
+    };
     // Calculate initial estimation for the header width
-    const estimatedHeaderWidth = isHoverFrame
-        ? component.name.length * 6 + 12
-        : buttons.length * 30 + component.name.length * 8; // Approximate width calculation
+    const estimatedHeaderWidth = buttons.length * 30 + component.name.length * 8; // Approximate width calculation
     const initialIsHeaderWiderThanComponent = estimatedHeaderWidth > (componentRect?.width || 0);
     useEffect(() => {
         setIsHeaderWiderThanComponent(initialIsHeaderWiderThanComponent);
     }, [initialIsHeaderWiderThanComponent]);
-    const isMultiSelected = isSelected && editContext.selection.length > 1;
+    const isMultiSelected = editContext.selection.length > 1;
     if (!componentRect)
         return null;
-    const headerHeight = isHoverFrame ? 20 : 36;
     // Check if the component's placeholder can accept more components
     const placeholder = component.parentPlaceholder;
-    const parentComponent = placeholder?.parentComponent;
-    const rootComponentId = pageViewContext.page?.rootComponent.id;
-    const selectableParentComponent = parentComponent && parentComponent.id !== rootComponentId
-        ? parentComponent
-        : undefined;
     const canAppend = !isMultiSelected &&
-        !isInsertMode &&
         placeholder?.editable &&
         placeholder?.insertOptions?.some((option) => !option.isHidden && !option.isInvalid);
     // Calculate position for the append dropzone (bottom center of component)
@@ -264,92 +306,14 @@ function FrameMenuContent({ component, isSelected = true, compareView, pageViewC
     const appendIndex = placeholder
         ? placeholder.components.findIndex((c) => c.id === component.id) + 1
         : 0;
+    // Determine a real element to anchor the insertion animation (bottom of component)
+    const appendAnchorElement = pageViewContext.editorIframe
+        ? findComponentRect(pageViewContext.editorIframe, component)?.elements[findComponentRect(pageViewContext.editorIframe, component).elements
+            .length - 1]
+        : null;
     if (componentRect.width === 0 && componentRect.height === 0) {
         return null;
     }
-    const resolveBridgeFieldAtPoint = async (clientX, clientY) => {
-        const selectedRange = editContext.selectedRange;
-        if (selectedRange?.text &&
-            selectedRange.fieldId &&
-            selectedRange.itemId &&
-            selectedRange.language &&
-            typeof selectedRange.version === "number") {
-            const selectedItem = {
-                id: selectedRange.itemId,
-                language: selectedRange.language,
-                version: selectedRange.version,
-                database: pageViewContext.page?.item.database,
-            };
-            const fullItem = await editContext.itemsRepository.getItem(selectedItem);
-            const selectedField = fullItem?.fields.find((candidate) => fieldMatchesBridgeId(candidate, selectedRange.fieldId));
-            if (selectedField) {
-                return {
-                    fieldId: selectedField.id,
-                    item: selectedItem,
-                };
-            }
-        }
-        const iframeRect = pageViewContext.editorIframe?.getBoundingClientRect();
-        const geometry = pageViewContext.bridgeGeometry;
-        if (!iframeRect || !geometry)
-            return undefined;
-        const hostX = clientX - iframeRect.left;
-        const hostY = clientY - iframeRect.top;
-        const fieldTarget = geometry.targets
-            .filter((target) => {
-            if (target.kind !== "field" || !target.fieldId)
-                return false;
-            const rect = target.rect;
-            return (hostX >= rect.left &&
-                hostX <= rect.right &&
-                hostY >= rect.top &&
-                hostY <= rect.bottom);
-        })
-            .sort((left, right) => left.rect.width * left.rect.height -
-            right.rect.width * right.rect.height)[0];
-        if (!fieldTarget?.fieldId)
-            return undefined;
-        const candidateItems = [];
-        const addCandidateItem = (item) => {
-            if (!item?.id || !item.language || typeof item.version !== "number") {
-                return;
-            }
-            if (candidateItems.some((candidate) => bridgeIdsMatch(candidate.id, item.id) &&
-                candidate.language.toLowerCase() === item.language.toLowerCase() &&
-                candidate.version === item.version)) {
-                return;
-            }
-            candidateItems.push({
-                id: item.id,
-                language: item.language,
-                version: item.version,
-                name: item.name,
-                displayName: item.displayName,
-                path: item.path,
-                database: item.database,
-            });
-        };
-        addCandidateItem(component.datasourceItem);
-        component.items?.forEach(addCandidateItem);
-        addCandidateItem(pageViewContext.page?.item);
-        for (const item of candidateItems) {
-            const fullItem = await editContext.itemsRepository.getItem(item);
-            const field = fullItem?.fields.find((candidate) => fieldMatchesBridgeId(candidate, fieldTarget.fieldId));
-            if (field) {
-                return {
-                    fieldId: field.id,
-                    item,
-                };
-            }
-        }
-        const fallbackItem = candidateItems[0];
-        if (!fallbackItem)
-            return undefined;
-        return {
-            fieldId: fieldTarget.fieldId,
-            item: fallbackItem,
-        };
-    };
     const handleHeaderContextMenu = async (e) => {
         if (!editContext)
             return;
@@ -360,17 +324,15 @@ function FrameMenuContent({ component, isSelected = true, compareView, pageViewC
         const clientX = e.clientX;
         const clientY = e.clientY;
         const { shiftKey, altKey, ctrlKey } = e;
-        const selectedComponents = isSelected && (editContext.selection?.length || 0) > 0
+        const selectedComponents = (editContext.selection?.length || 0) > 0
             ? editContext.selection
                 .map((id) => pageViewContext.page
                 ? getComponentById(id, pageViewContext.page)
                 : undefined)
                 .filter((x) => x)
             : [component];
-        const field = await resolveBridgeFieldAtPoint(clientX, clientY);
-        const fieldButtons = field ? await loadFieldButtons(field) : [];
-        const menuItems = await buildComponentContextMenuItems(selectedComponents, editContext, field, fieldButtons);
-        if (menuItems.length > 0) {
+        const showMenu = await showComponentContextMenu(selectedComponents, editContext);
+        if (showMenu) {
             const syntheticEvent = new MouseEvent("contextmenu", {
                 bubbles: true,
                 cancelable: true,
@@ -381,45 +343,42 @@ function FrameMenuContent({ component, isSelected = true, compareView, pageViewC
                 altKey,
                 ctrlKey,
             });
-            editContext.showContextMenu(syntheticEvent, menuItems);
+            showMenu(syntheticEvent);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: frameRef, className: cn("pointer-events-none absolute inset-0 rounded-bl-xs", isHoverFrame ? "border" : "border-2", isHoverFrame
-                    ? "border-neutral-grey-50"
-                    : componentFrameBorderColorVariants[color], "tour-frame-menu", !isHoverFrame &&
-                    !isMultiSelected &&
-                    isHeaderWiderThanComponent &&
-                    "border-t-0", !isMultiSelected && !isHeaderWiderThanComponent && "rounded-tl-xs", isMultiSelected && "rounded-t-xs"), style: {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("pointer-events-none absolute inset-0 rounded-bl-xs border-2", colorVariants[color], "tour-frame-menu animate-in fade-in zoom-in-95 opacity-70 duration-100", "transition-opacity duration-100 ease-out hover:opacity-100", !isMultiSelected && isHeaderWiderThanComponent && "border-t-0", !isMultiSelected && !isHeaderWiderThanComponent && "rounded-tl-xs", isMultiSelected && "rounded-t-xs"), style: {
                     // Make the surrounding frame 1px larger on all sides
                     left: componentRect.x - 2,
                     top: componentRect.y - 2,
                     width: (componentRect.width ?? 0) + 4,
                     height: componentRect.height + 4,
                     zIndex: 8,
-                }, "data-testid": "frame-menu", children: _jsxs("div", { ref: headerRef, className: cn("editframe-menu absolute z-1000 flex items-center text-white", isHoverFrame
-                        ? "pointer-events-none px-1.5 text-[10px] leading-none font-medium"
-                        : "pointer-events-auto pr-4 text-base", isHoverFrame
-                        ? "bg-neutral-grey-50"
-                        : componentFrameBgColorVariants[color], !isHoverFrame && componentFrameBgHoverColorVariants[color], !isHoverFrame &&
-                        "animate-in slide-in-from-top-2 fade-in duration-100", !isHoverFrame && "transition-colors duration-100 ease-out", isMultiSelected || componentRect.y - headerHeight < 0
+                    transition: "left 0.15s ease-out, top 0.15s ease-out, width 0.15s ease-out, height 0.15s ease-out",
+                }, "data-testid": "frame-menu", children: _jsxs("div", { ref: headerRef, className: cn("editframe-menu pointer-events-auto absolute z-1000 flex items-center pr-4 text-base text-white", bgColorVariants[color], "animate-in slide-in-from-top-2 fade-in duration-100", "transition-all duration-100 ease-out", isMultiSelected || componentRect.y - 36 < 0
                         ? "rounded-bl"
-                        : "rounded-t", !isHoverFrame && isHeaderWiderThanComponent && "rounded-bl", isHoverFrame && "max-w-48 rounded-t"), style: {
+                        : "rounded-t", isHeaderWiderThanComponent && "rounded-bl"), style: {
                         right: "-1.5px",
-                        top: isMultiSelected || componentRect.y < headerHeight
-                            ? 0
-                            : -headerHeight,
+                        top: isMultiSelected || componentRect.y - 36 < 0 ? "0" : undefined,
+                        bottom: isMultiSelected
+                            ? undefined
+                            : componentRect.y - 36 >= 0
+                                ? componentRect.height + 1 + "px"
+                                : undefined,
                         zIndex: 800,
-                        height: headerHeight + "px",
-                    }, onContextMenu: isSelected ? handleHeaderContextMenu : undefined, children: [_jsxs("div", { onPointerDown: isSelected ? onGripPointerDown : undefined, className: cn("group flex min-w-0 items-center gap-1 text-nowrap", "transition-colors duration-150 ease-out", isHoverFrame ? "max-w-full truncate" : "p-2 text-sm", isSelected && isDraggable ? "cursor-move" : "cursor-default", isSelected && !isDraggable && "pl-6"), children: [isSelected && isDraggable && (_jsx(GripVertical, { strokeWidth: 1, className: "h-4 w-4 transition-transform duration-150 ease-out" })), _jsx("span", { className: "min-w-0 truncate", children: component.name }), isSelected && component.hasPersonalization && (_jsxs(Tooltip, { delayDuration: 500, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "inline-flex h-4 w-4 items-center justify-center rounded-full bg-white/20", "data-testid": "component-personalization-badge", children: _jsx(Sparkles, { height: 12, width: 12 }) }) }), _jsx(TooltipContent, { children: "Personalized" })] })), isSelected && selectableParentComponent && (_jsxs(Tooltip, { delayDuration: 500, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "cursor-pointer opacity-0 transition-opacity group-hover:opacity-100", onClick: () => {
-                                                    editContext.select([selectableParentComponent.id]);
-                                                }, children: _jsx(ArrowUpFromDot, { height: 14, width: 14 }) }) }), _jsx(TooltipContent, { children: "Select parent" })] }))] }), isSelected && editContext.mode === "edit" && !isMultiSelected && (_jsx("div", { className: "flex items-center gap-2.5 text-sm", children: buttons.map((b, i) => (_jsxs(Tooltip, { delayDuration: 500, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "hover:text-neutral-grey-15 cursor-pointer transition-colors duration-150 ease-out", onClick: (ev) => {
+                        height: "36px",
+                        transition: "bottom 0.15s ease-out, top 0.15s ease-out",
+                    }, onContextMenu: handleHeaderContextMenu, children: [_jsxs("div", { draggable: isDraggable, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: cn("group flex items-center gap-1 p-2 text-sm text-nowrap", "transition-all duration-150 ease-out", isDraggable ? "cursor-move" : "cursor-default", !isDraggable && "pl-6"), children: [isDraggable && (_jsx(GripVertical, { strokeWidth: 1, className: "h-4 w-4 transition-transform duration-150 ease-out" })), component.name, component.hasPersonalization && (_jsxs(Tooltip, { delayDuration: 500, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "inline-flex h-4 w-4 items-center justify-center rounded-full bg-white/20", "data-testid": "component-personalization-badge", children: _jsx(Sparkles, { height: 12, width: 12 }) }) }), _jsx(TooltipContent, { children: "Personalized" })] })), component.parentPlaceholder?.parentComponent && (_jsxs(Tooltip, { delayDuration: 500, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "cursor-pointer opacity-0 transition-opacity group-hover:opacity-100", onClick: () => {
+                                                    editContext.select([
+                                                        component.parentPlaceholder?.parentComponent.id || "",
+                                                    ]);
+                                                }, children: _jsx(ArrowUpFromDot, { height: 14, width: 14 }) }) }), _jsx(TooltipContent, { children: "Select parent" })] }))] }), editContext.mode === "edit" && !isMultiSelected && (_jsx("div", { className: "flex items-center gap-2.5 text-sm", children: buttons.map((b, i) => (_jsxs(Tooltip, { delayDuration: 500, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "cursor-pointer transition-all duration-150 ease-out hover:scale-110 hover:text-gray-200", onClick: (ev) => {
                                                 ev.stopPropagation();
                                                 b.onClick(ev);
-                                            }, "data-testid": `frame-menu-${b.id}`, children: typeof b.icon === "string" ? (_jsx("i", { className: b.icon + " cursor-pointer text-sm" })) : (b.icon) }) }), _jsx(TooltipContent, { children: b.label })] }, i))) }))] }) }), isSelected &&
-                canAppend &&
+                                            }, "data-testid": `frame-menu-${b.id}`, children: typeof b.icon === "string" ? (_jsx("i", { className: b.icon + " cursor-pointer text-sm" })) : (b.icon) }) }), _jsx(TooltipContent, { children: b.label })] }, i))) }))] }) }), canAppend &&
                 !isReadonly &&
                 editContext.mode === "edit" &&
                 placeholder &&
-                appendPosition && (_jsx(PlaceholderDropZone, { frameColor: color, pillLabel: "Append component", onDragHandlePointerDown: isDraggable ? onGripPointerDown : undefined, insertMenuTitle: "Append", placeholder: placeholder, description: `Append to ${placeholder.name}`, index: appendIndex, parentName: component.name, spotPosition: appendPosition, spotPositionElement: null, spotPositionAnchor: "bottom", size: "large", typeIdOnCtrlClick: component.typeId }))] }));
+                appendPosition &&
+                appendAnchorElement && (_jsx(PlaceholderDropZone, { className: `${dropzoneColorVariants[color]} rounded-md`, insertMenuTitle: "Append", placeholder: placeholder, description: `Append to ${placeholder.name}`, index: appendIndex, parentName: component.name, spotPosition: appendPosition, spotPositionElement: appendAnchorElement, spotPositionAnchor: "bottom", size: "small", typeIdOnCtrlClick: component.typeId }))] }));
 }
 //# sourceMappingURL=FrameMenu.js.map