@parhelia/core 0.3.12771 → 0.3.12788

package/dist/editor/sidebar/ComponentTree.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { providerDistinguishesSharedComponents } from "../services/contentService";
 import { useCanvasSelection, useEditContext, useEditContextRef, } from "../client/editContext";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -15,8 +15,10 @@ import { SimpleIconButton, SimpleIconButtonStyleProvider, } from "../ui/SimpleIc
 import { Spinner } from "../ui/Spinner";
 import { SearchInput } from "../../components/SearchInput";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../../components/ui/tooltip";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
 import { cn } from "../../lib/utils";
 import { InsertComponentMenu } from "../page-editor-chrome/InsertComponentMenu";
+import { buildComponentDragObject } from "../page-editor-chrome/componentDragObject";
 import { useSharedComponentPublishState } from "./useSharedComponentPublishState";
 const publishStateDisplay = {
     success: {
@@ -53,7 +55,8 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
     const [nodeDictionary, setNodeDictionary] = useState({});
     const [isTreeReady, setIsTreeReady] = useState(false);
     const [treeKey, setTreeKey] = useState(null);
-    const [activeInsertBelowKey, setActiveInsertBelowKey] = useState(null);
+    const [activeInsertTargetKey, setActiveInsertTargetKey] = useState(null);
+    const [hoveredInsertTargetKey, setHoveredInsertTargetKey] = useState(null);
     let editContextRef = useEditContextRef();
     const editContext = useEditContext();
     const canvasSelection = useCanvasSelection();
@@ -79,7 +82,6 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
     const getSharedPublishState = useSharedComponentPublishState(page, pageLanguage);
     const treeRef = useRef(null);
     const confirmDialogRef = useRef(null);
-    const pendingDragStartTimeoutRef = useRef(null);
     // Helper function to clean placeholder labels by removing _{guid} pattern
     function cleanPlaceholderLabel(label) {
         return label.replace(/_{[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}}$/, "");
@@ -190,7 +192,7 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
     const selection = canvasSelection;
     useEffect(() => {
         if (editContext?.currentOverlay !== "context-menu") {
-            setActiveInsertBelowKey(null);
+            setActiveInsertTargetKey(null);
         }
     }, [editContext?.currentOverlay]);
     useEffect(() => {
@@ -724,7 +726,7 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
         }
     }, [expandedKeys, handleCollapseItem]);
     // Handle collapsing nodes
-    const getPlaceholder = (node) => {
+    const getPlaceholder = useCallback((node) => {
         if (!node)
             return null;
         if (node.type === "placeholder") {
@@ -737,7 +739,7 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
                 return editablePlaceholders[0];
         }
         return null;
-    };
+    }, []);
     const getPlaceholderWithSettingsItem = (node) => {
         if (!node)
             return null;
@@ -755,14 +757,14 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
         return null;
     };
     // Resolve placeholder and correct index for drop zones even when placeholders are hidden/flattened
-    const getSiblingsForParent = (parent) => {
+    const getSiblingsForParent = useCallback((parent) => {
         if (!parent)
             return rootNodes || [];
         const parentNode = nodeDictionary[parent.key];
         return (parentNode?.children ||
             []);
-    };
-    const findNearestComponentNeighbor = (siblings, index) => {
+    }, [nodeDictionary, rootNodes]);
+    const findNearestComponentNeighbor = useCallback((siblings, index) => {
         // Prefer right neighbor
         for (let i = index; i < siblings.length; i++) {
             if (siblings[i]?.type === "component")
@@ -774,8 +776,8 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
                 return siblings[j];
         }
         return null;
-    };
-    const resolveDropContext = (dragOverParent, index) => {
+    }, []);
+    const resolveDropContext = useCallback((dragOverParent, index) => {
         // Direct placeholder parent
         if (dragOverParent && dragOverParent.type === "placeholder") {
             const placeholder = dragOverParent.data;
@@ -836,7 +838,7 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
             return { placeholder: ph, indexInPlaceholder };
         }
         return { placeholder: null, indexInPlaceholder: 0 };
-    };
+    }, [findNearestComponentNeighbor, getSiblingsForParent]);
     // Handle drag over node (memoized)
     const handleDragOverZone = useCallback((dragOverNode, index, event) => {
         if (!editContext?.dragObject)
@@ -847,7 +849,7 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
         const isValid = isValidPlaceholder(placeholder, editContext.dragObject);
         event.dataTransfer.dropEffect = isValid ? "move" : "none";
         return isValid;
-    }, [editContext?.dragObject]);
+    }, [editContext?.dragObject, resolveDropContext]);
     // Handle drop on node (memoized)
     const handleDropZone = useCallback((droppedOnNode, index, event) => {
         // When dropping on a node (index < 0), use legacy behavior
@@ -862,7 +864,7 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
         if (!placeholder)
             return;
         editContext.droppedInPlaceholder(placeholder.key, indexInPlaceholder);
-    }, [editContext]);
+    }, [editContext, getPlaceholder, resolveDropContext]);
     // Memoize isValidDropZone callback
     const handleIsValidDropZone = useCallback((parent, index) => {
         const { placeholder } = resolveDropContext(parent, index);
@@ -872,7 +874,7 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
             return false;
         const result = isValidPlaceholder(placeholder, editContext.dragObject);
         return result;
-    }, [editContext?.dragObject]);
+    }, [editContext?.dragObject, resolveDropContext]);
     // Memoize onStartDrag callback
     const handleStartDrag = useCallback((data) => {
         const component = data.node.data;
@@ -881,85 +883,99 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
         // Align with FrameMenu: include componentId and allowed effect
         data.event.dataTransfer.setData("componentId", component.id);
         data.event.dataTransfer.effectAllowed = "copyMove";
-        // Only create drag object for components with datasourceItem
-        if (!component?.datasourceItem)
-            return;
-        pendingDragStartTimeoutRef.current = setTimeout(() => {
-            if (!pageLanguage || pageVersion == null)
-                return;
-            const language = pageLanguage;
-            const version = pageVersion;
-            const currentSelection = editContext?.getSelection() ?? [];
-            const selectedIds = currentSelection.length > 1 && currentSelection.includes(component.id)
-                ? currentSelection
-                : [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);
-        // Prevent any upstream handlers from interfering
+        // Prevent any upstream handlers from interfering.
         data.event.stopPropagation();
-    }, [editContext]);
+        if (!pageLanguage || pageVersion == null)
+            return;
+        const currentSelection = editContext?.getSelection() ?? [];
+        const selectedIds = currentSelection.length > 1 && currentSelection.includes(component.id)
+            ? currentSelection
+            : [component.id];
+        editContext?.dragStart(buildComponentDragObject(component, selectedIds, {
+            language: pageLanguage,
+            version: pageVersion,
+        }));
+    }, [editContext, pageLanguage, pageVersion]);
     // Memoize onDragEnd callback
     const handleDragEnd = useCallback((event) => {
-        if (pendingDragStartTimeoutRef.current) {
-            clearTimeout(pendingDragStartTimeoutRef.current);
-            pendingDragStartTimeoutRef.current = null;
-        }
         editContext.dragEnd();
     }, [editContext]);
-    // Cleanup pending drag start timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (pendingDragStartTimeoutRef.current) {
-                clearTimeout(pendingDragStartTimeoutRef.current);
-                pendingDragStartTimeoutRef.current = null;
-            }
-        };
-    }, []);
-    // Whether a component can have a sibling inserted right after it. Mirrors the
-    // on-canvas "append" affordance: the parent placeholder must be editable and
-    // expose at least one visible insert option.
-    const canInsertBelow = useCallback((component) => {
+    // A tree insertion target is useful only when its placeholder is editable and
+    // has at least one visible component option.
+    const canInsertIntoPlaceholder = useCallback((placeholder) => {
         if (!editContext || editContext.readonly || editContext.mode !== "edit") {
             return false;
         }
-        const placeholder = component.parentPlaceholder;
-        if (!placeholder?.editable)
+        if (!placeholder.editable)
             return false;
         return getVisibleInsertOptions(placeholder.insertOptions).length > 0;
     }, [editContext]);
-    const getInsertBelowOptions = useCallback((component) => {
-        const placeholder = component.parentPlaceholder;
-        if (!placeholder?.editable)
+    const getPlaceholderInsertOptions = useCallback((placeholder) => {
+        if (!placeholder.editable)
             return [];
         return getVisibleInsertOptions(placeholder.insertOptions);
     }, []);
-    // Add a component directly after the given one. The menu itself is the same
-    // popover used by WYSIWYG placeholder dropzones; this keeps only the
-    // component-tree-specific insertion index here.
-    const handleInsertBelowSelect = useCallback(async (component, option) => {
+    const handleInsertSelect = useCallback(async (placeholder, insertIndex, option) => {
         const ctx = editContextRef.current;
-        setActiveInsertBelowKey(null);
+        setActiveInsertTargetKey(null);
         if (!ctx || ctx.readonly || ctx.mode !== "edit")
             return;
-        const placeholder = component.parentPlaceholder;
-        if (!placeholder?.editable)
+        if (!placeholder.editable)
             return;
-        const insertIndex = placeholder.components.findIndex((c) => c.id === component.id) + 1;
         await editContextRef.current?.operations.addComponent(option.typeId, placeholder.key, insertIndex, pageItemDescriptor);
     }, [editContextRef, pageItemDescriptor]);
-    const handleInsertBelowOpenChange = useCallback((component, open) => {
-        setActiveInsertBelowKey(open ? component.id : null);
+    const handleInsertOpenChange = useCallback((targetKey, open) => {
+        setActiveInsertTargetKey(open ? targetKey : null);
+    }, []);
+    const handleNodeInsertTargetHover = useCallback((node, event) => {
+        const treeNode = node;
+        if (treeNode.type !== "component") {
+            return;
+        }
+        const component = treeNode.data;
+        const parentPlaceholder = component.parentPlaceholder;
+        const canInsertSibling = !!parentPlaceholder && canInsertIntoPlaceholder(parentPlaceholder);
+        const componentIndex = parentPlaceholder?.components.findIndex((sibling) => sibling.id === component.id) ?? -1;
+        const precedingComponent = componentIndex > 0
+            ? parentPlaceholder?.components[componentIndex - 1]
+            : undefined;
+        const precedingGapTargetKey = precedingComponent
+            ? `below:${precedingComponent.id}`
+            : `above:${component.id}`;
+        const innerPlaceholders = component.placeholders?.filter(canInsertIntoPlaceholder) ?? [];
+        const innerTargetKey = innerPlaceholders.length === 1
+            ? getPlaceholderInsertTargetKey(component, innerPlaceholders[0])
+            : innerPlaceholders.length > 1
+                ? getPlaceholderPickerTargetKey(component)
+                : null;
+        const rowRect = event.currentTarget.getBoundingClientRect();
+        const relativeY = Math.max(0, Math.min(rowRect.height, event.clientY - rowRect.top));
+        const verticalRatio = rowRect.height > 0 ? relativeY / rowRect.height : 0;
+        let targetKey = null;
+        if (canInsertSibling && innerTargetKey) {
+            targetKey =
+                verticalRatio < 1 / 3
+                    ? precedingGapTargetKey
+                    : verticalRatio > 2 / 3
+                        ? `below:${component.id}`
+                        : innerTargetKey;
+        }
+        else if (innerTargetKey) {
+            targetKey = innerTargetKey;
+        }
+        else if (canInsertSibling) {
+            targetKey =
+                verticalRatio < 1 / 2
+                    ? precedingGapTargetKey
+                    : `below:${component.id}`;
+        }
+        setHoveredInsertTargetKey((current) => current === targetKey ? current : targetKey);
+    }, [canInsertIntoPlaceholder]);
+    const handleNodeInsertTargetLeave = useCallback(() => {
+        setHoveredInsertTargetKey(null);
+    }, []);
+    const handleInsertTargetHover = useCallback((targetKey) => {
+        setHoveredInsertTargetKey(targetKey);
     }, []);
     // Check if we have a valid page model
     const hasPageModel = page && page.rootComponent && page.item;
@@ -998,44 +1014,49 @@ export function ComponentTree({ pageViewContext, itemDescriptor, item, isLoading
     };
     // Only show error if page model failed to load (not if page is just empty)
     if (hasInvalidPageModel && isTreeReady && !isSlotLoading && !isRefreshing) {
-        return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx(SimpleIconButtonStyleProvider, { selectedClassName: "bg-neutral-grey-5 text-neutral-grey-100", children: _jsxs("div", { className: "border-border-default badge-pad flex items-center justify-between border-b", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx(SimpleIconButton, { icon: _jsx(Plus, { strokeWidth: 1, className: "h-5 w-5" }), label: "Add component", size: "small", className: "h-[30px] w-[30px]", "data-testid": "component-tree-add-component", selected: insertMode, disabled: !canWriteItem ||
+        return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx(SimpleIconButtonStyleProvider, { selectedClassName: "bg-neutral-grey-5 text-neutral-grey-100", children: _jsxs("div", { className: "border-border-default badge-pad flex items-center justify-between border-b", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx(SimpleIconButton, { icon: _jsx(Plus, { size: 16, strokeWidth: 1, absoluteStrokeWidth: true, className: "m-0.5" }), label: "Add component (Insert)", size: "small", className: "min-w-0 shrink gap-1.5 px-2 py-1 [&>svg]:shrink-0", "data-testid": "component-tree-add-component", selected: insertMode, showTooltip: false, disabled: !canWriteItem ||
                                         !editContext ||
                                         editContext.readonly ||
-                                        editContext.mode !== "edit", onClick: toggleInsertMode }) }), _jsx("div", { className: "flex items-center gap-1", children: _jsx(SimpleIconButton, { icon: _jsx(LayoutTemplate, { strokeWidth: 1, className: "h-5 w-5" }), label: editContext?.showLayoutComponents
+                                        editContext.mode !== "edit", onClick: toggleInsertMode, children: _jsx("span", { className: "min-w-0 truncate", children: "Add component" }) }) }), _jsx("div", { className: "flex items-center gap-1", children: _jsx(SimpleIconButton, { icon: _jsx(LayoutTemplate, { strokeWidth: 1, className: "h-5 w-5" }), label: editContext?.showLayoutComponents
                                         ? "Hide layout"
                                         : "Show layout", size: "small", className: "h-[30px] w-[30px]", selected: editContext?.showLayoutComponents, "data-testid": "component-tree-toggle-layout", onClick: () => editContext?.setShowLayoutComponents(!editContext.showLayoutComponents) }) })] }) }), _jsx("div", { className: "text-neutral-grey-50 flex flex-1 items-center justify-center text-xs", children: "Page did not load. Please refresh or try again." }), _jsx(ConfirmationDialog, { ref: confirmDialogRef })] }));
     }
-    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx(SimpleIconButtonStyleProvider, { selectedClassName: "bg-neutral-grey-5 text-neutral-grey-100", children: _jsxs("div", { className: "border-border-default badge-pad flex items-center justify-between border-b", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx(SimpleIconButton, { icon: _jsx(Plus, { strokeWidth: 1, className: "h-4 w-4" }), label: "Add component", size: "small", "data-testid": "component-tree-add-component", selected: insertMode, disabled: !canWriteItem ||
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx(SimpleIconButtonStyleProvider, { selectedClassName: "bg-neutral-grey-5 text-neutral-grey-100", children: _jsxs("div", { className: "border-border-default badge-pad flex items-center justify-between border-b", children: [_jsx("div", { className: "flex items-center gap-1", children: _jsx(SimpleIconButton, { icon: _jsx(Plus, { size: 16, strokeWidth: 1, absoluteStrokeWidth: true, className: "m-0.5" }), label: "Add component (Insert)", size: "small", className: "min-w-0 shrink gap-1.5 px-2 py-1 [&>svg]:shrink-0", "data-testid": "component-tree-add-component", selected: insertMode, showTooltip: false, disabled: !canWriteItem ||
                                     !editContext ||
                                     editContext.readonly ||
-                                    editContext.mode !== "edit", onClick: toggleInsertMode }) }), _jsx("div", { className: "flex items-center gap-1", children: _jsx(SimpleIconButton, { icon: _jsx(LayoutTemplate, { strokeWidth: 1, className: "h-5 w-5" }), label: editContext?.showLayoutComponents
+                                    editContext.mode !== "edit", onClick: toggleInsertMode, children: _jsx("span", { className: "min-w-0 truncate", children: "Add component" }) }) }), _jsx("div", { className: "flex items-center gap-1", children: _jsx(SimpleIconButton, { icon: _jsx(LayoutTemplate, { strokeWidth: 1, className: "h-5 w-5" }), label: editContext?.showLayoutComponents
                                     ? "Hide layout"
-                                    : "Show layout", size: "small", className: "h-[30px] w-[30px]", selected: editContext?.showLayoutComponents, "data-testid": "component-tree-toggle-layout", onClick: () => editContext?.setShowLayoutComponents(!editContext.showLayoutComponents) }) })] }) }), _jsx("div", { className: "border-border-default border-b p-2", "data-testid": "component-tree-search", children: _jsx(SearchInput, { value: filter, onChange: setFilter, className: "w-full", placeholder: "Search IDs, names, types..." }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto overflow-x-hidden p-2", ref: treeRef, "data-testid": "component-tree", children: isFiltering && visibleRootNodes.length === 0 ? (_jsxs("div", { className: "text-neutral-grey-50 flex h-full items-center justify-center px-4 text-center text-xs", children: ["No components match \"", filter.trim(), "\"."] })) : (_jsx(PerfectTree, { nodes: visibleRootNodes, isDragging: !isFiltering && !!editContext?.dragObject, multiDragNoun: "components", selectedKeys: selectedItems, expandedKeys: expandedItems, onToggleExpand: isFiltering ? undefined : handleToggle, onSelect: handleTreeSelection, onContextMenu: handleTreeContextMenu, enableDragAndDrop: !isFiltering, onDragOverZone: handleDragOverZone, isValidDropZone: handleIsValidDropZone, onStartDrag: handleStartDrag, onDragEnd: handleDragEnd, onDrop: handleDropZone, renderNodePrefix: (node) => {
+                                    : "Show layout", size: "small", className: "h-[30px] w-[30px]", selected: editContext?.showLayoutComponents, "data-testid": "component-tree-toggle-layout", onClick: () => editContext?.setShowLayoutComponents(!editContext.showLayoutComponents) }) })] }) }), _jsx("div", { className: "border-border-default border-b p-2", "data-testid": "component-tree-search", children: _jsx(SearchInput, { value: filter, onChange: setFilter, className: "w-full", placeholder: "Search IDs, names, types..." }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto overflow-x-hidden p-2", ref: treeRef, "data-testid": "component-tree", children: isFiltering && visibleRootNodes.length === 0 ? (_jsxs("div", { className: "text-neutral-grey-50 flex h-full items-center justify-center px-4 text-center text-xs", children: ["No components match \"", filter.trim(), "\"."] })) : (_jsx(PerfectTree, { nodes: visibleRootNodes, isDragging: !isFiltering && !!editContext?.dragObject, multiDragNoun: "components", selectedKeys: selectedItems, expandedKeys: expandedItems, onToggleExpand: isFiltering ? undefined : handleToggle, onSelect: handleTreeSelection, onContextMenu: handleTreeContextMenu, enableDragAndDrop: !isFiltering, onDragOverZone: handleDragOverZone, isValidDropZone: handleIsValidDropZone, onStartDrag: handleStartDrag, onDragEnd: handleDragEnd, onDrop: handleDropZone, onNodeMouseMove: handleNodeInsertTargetHover, onNodeMouseLeave: handleNodeInsertTargetLeave, renderNodePrefix: (node) => {
                         const treeNode = node;
                         if (treeNode.type !== "component")
                             return null;
-                        return (_jsx("span", { className: cn("text-neutral-grey-50 hover:text-neutral-grey-100 flex h-[23px] w-4 flex-none cursor-grab items-center justify-center transition-colors active:cursor-grabbing"), "data-testid": "component-tree-drag-handle", "aria-hidden": "true", children: _jsx(GripVertical, { strokeWidth: 1, className: "h-4 w-4" }) }));
+                        return (_jsx("span", { className: cn("text-neutral-grey-50 hover:text-neutral-grey-100 group-hover:text-neutral-grey-100 flex h-[23px] w-4 flex-none cursor-grab items-center justify-center transition-colors active:cursor-grabbing"), "data-testid": "component-tree-drag-handle", "aria-hidden": "true", children: _jsx(GripVertical, { strokeWidth: 1, className: "h-4 w-4" }) }));
                     }, renderToggleIcon: () => (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", className: "text-neutral-grey-100", "aria-hidden": "true", children: _jsx("path", { d: "M9 6L4.5 1.66987L4.5 10.3301L9 6Z", fill: "currentColor" }) })), suppressDefaultNodeChrome: (node) => node.type === "component", getRowClassName: (node, _depth, { isSelected, isDragOver }) => {
                         const nodeType = node.type;
                         if (nodeType === "component") {
-                            return cn("group mb-1.5 gap-1 rounded-[4px] border px-1 py-2 transition-colors", isDragOver
+                            return cn("group mb-2 gap-1 rounded-[2px] border px-1 py-2 transition-colors", isDragOver
                                 ? "border-component-default bg-component-default/10"
                                 : isSelected
                                     ? "border-border-default bg-neutral-grey-5"
                                     : "border-border-default hover:border-neutral-grey-50");
                         }
-                        if (nodeType === "page" || nodeType === "placeholder") {
-                            return "mb-1.5 [&>div:last-child]:py-2 [&[data-selected=true]>div:last-child]:bg-neutral-grey-5";
+                        if (nodeType === "page") {
+                            return cn("mb-1.5 [&>div:last-child]:py-2 [&[data-selected=true]>div:last-child]:bg-neutral-grey-5", isSelected && "bg-neutral-grey-5");
+                        }
+                        if (nodeType === "placeholder") {
+                            return cn("mb-1.5 [&>div:last-child]:py-2 [&[data-selected=true]>div:last-child]:bg-neutral-grey-5", isSelected && "bg-neutral-grey-5");
                         }
                         return undefined;
                     }, renderNode: (node) => {
                         const treeNode = node;
                         return renderNode(treeNode, filter, {
-                            canInsertBelow,
-                            getInsertBelowOptions,
-                            onInsertBelowSelect: handleInsertBelowSelect,
-                            onInsertBelowOpenChange: handleInsertBelowOpenChange,
-                            isInsertBelowActive: activeInsertBelowKey === treeNode.key,
+                            canInsertIntoPlaceholder,
+                            getPlaceholderInsertOptions,
+                            onInsertSelect: handleInsertSelect,
+                            onInsertOpenChange: handleInsertOpenChange,
+                            onInsertTargetHover: handleInsertTargetHover,
+                            activeInsertTargetKey,
+                            hoveredInsertTargetKey,
                         });
                     } })) }), _jsx(ConfirmationDialog, { ref: confirmDialogRef })] }));
 }
@@ -1043,34 +1064,106 @@ function renderNode(node, filter = "", opts) {
     const trimmedFilter = filter.trim();
     const filterDetails = trimmedFilter ? getNodeFilterDetails(node) : null;
     const component = node.type === "component" ? node.data : null;
-    const showInsertBelow = !!component && (opts?.canInsertBelow?.(component) ?? false);
-    const isInsertBelowActive = !!opts?.isInsertBelowActive;
-    const insertBelowOptions = showInsertBelow && component
-        ? (opts?.getInsertBelowOptions?.(component) ?? [])
+    const parentPlaceholder = component?.parentPlaceholder;
+    const showSiblingInsertTargets = !!parentPlaceholder &&
+        (opts?.canInsertIntoPlaceholder?.(parentPlaceholder) ?? false);
+    const componentIndex = component && parentPlaceholder
+        ? parentPlaceholder.components.findIndex((item) => item.id === component.id)
+        : -1;
+    const siblingInsertOptions = showSiblingInsertTargets && parentPlaceholder
+        ? (opts?.getPlaceholderInsertOptions?.(parentPlaceholder) ?? [])
         : [];
-    return (_jsxs("div", { className: `component-tree-node ${node.type ? `component-tree-${node.type}` : ""}`, "data-component-node": node.type === "component" ? "true" : undefined, "data-testid": "component-tree-node", "data-component-key": node.key, "data-component-type": node.type, children: [_jsxs("div", { className: "text-neutral-grey-100 flex items-center gap-2 text-[12px]", children: [typeof node.icon === "string" ? (_jsx("i", { className: node.icon })) : (node.icon), _jsx("span", { className: node.className, "data-testid": "component-tree-node-label", children: highlightSearchMatch(node.label, trimmedFilter) }), node.tags?.map((x) => (_jsx("div", { children: _jsxs("span", { id: `id-${node.key}-${x.id}`, className: "ml-2 flex rounded p-0.5 px-1.5 text-xs text-white", style: {
-                                backgroundColor: x.color,
-                                marginLeft: "8px",
-                                fontSize: "10px",
-                            }, title: x.tooltip, onClick: x.onClick
-                                ? (e) => {
-                                    e.stopPropagation();
-                                    x.onClick();
-                                }
-                                : undefined, children: [x.icon, highlightSearchMatch(x.value, trimmedFilter)] }) }, `tag-${node.key}-${x.id}`)))] }), filterDetails ? (_jsx("div", { className: "text-neutral-grey-50 mt-0.5 ml-6 truncate text-[10px]", title: filterDetails, children: highlightSearchMatch(filterDetails, trimmedFilter) })) : null, showInsertBelow ? (_jsxs(Tooltip, { children: [_jsx(InsertComponentMenu, { open: isInsertBelowActive, onOpenChange: (open) => opts?.onInsertBelowOpenChange?.(component, open), title: "Insert below", options: insertBelowOptions, onSelect: (option) => opts?.onInsertBelowSelect?.(component, option), side: "right", align: "start", sideOffset: 12, children: _jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-testid": "component-tree-insert-below", "data-active": isInsertBelowActive ? "true" : undefined, "aria-label": "Insert component below", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
-                                    e.stopPropagation();
-                                    if (e.ctrlKey || e.metaKey) {
-                                        e.preventDefault();
-                                        const matchingOption = getMatchingInsertBelowOption(component, insertBelowOptions);
-                                        if (matchingOption) {
-                                            opts?.onInsertBelowSelect?.(component, matchingOption);
+    const isBetweenGap = !!parentPlaceholder &&
+        componentIndex >= 0 &&
+        componentIndex < parentPlaceholder.components.length - 1;
+    const placeholderInsertTargets = component?.placeholders?.filter((placeholder) => opts?.canInsertIntoPlaceholder?.(placeholder) ?? false) ?? [];
+    return (_jsxs("div", { className: `component-tree-node w-full min-w-0 ${node.type ? `component-tree-${node.type}` : ""}`, "data-component-node": node.type === "component" ? "true" : undefined, "data-testid": "component-tree-node", "data-component-key": node.key, "data-component-type": node.type, children: [_jsxs("div", { className: "text-neutral-grey-100 flex min-w-0 items-center gap-2 text-[12px]", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [typeof node.icon === "string" ? (_jsx("i", { className: node.icon })) : (node.icon), _jsx("span", { className: cn("truncate", node.className), "data-testid": "component-tree-node-label", children: highlightSearchMatch(node.label, trimmedFilter) }), node.tags?.map((x) => (_jsx("div", { children: _jsxs("span", { id: `id-${node.key}-${x.id}`, className: "ml-2 flex rounded p-0.5 px-1.5 text-xs text-white", style: {
+                                        backgroundColor: x.color,
+                                        marginLeft: "8px",
+                                        fontSize: "10px",
+                                    }, title: x.tooltip, onClick: x.onClick
+                                        ? (e) => {
+                                            e.stopPropagation();
+                                            x.onClick();
                                         }
-                                    }
-                                }, className: cn("bg-component-default absolute bottom-0 left-1/2 z-20 flex h-6 w-6 -translate-x-1/2 translate-y-1/2 items-center justify-center rounded-[4px] text-white transition-all hover:brightness-105 active:scale-95", isInsertBelowActive
-                                    ? "pointer-events-auto opacity-100"
-                                    : "pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 focus-visible:pointer-events-auto focus-visible:opacity-100"), children: _jsx(Plus, { className: "h-4 w-4", strokeWidth: 1 }) }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 8, children: "Insert component below" })] })) : null] }));
+                                        : undefined, children: [x.icon, highlightSearchMatch(x.value, trimmedFilter)] }) }, `tag-${node.key}-${x.id}`)))] }), component && placeholderInsertTargets.length > 0 ? (_jsx(ComponentTreePlaceholderInsertControl, { component: component, placeholders: placeholderInsertTargets, activeTargetKey: opts?.activeInsertTargetKey, hoveredTargetKey: opts?.hoveredInsertTargetKey, getOptions: (placeholder) => opts?.getPlaceholderInsertOptions?.(placeholder) ?? [], onOpenChange: opts?.onInsertOpenChange, onSelect: (placeholder, option) => opts?.onInsertSelect?.(placeholder, placeholder.components.length, option) })) : null] }), filterDetails ? (_jsx("div", { className: "text-neutral-grey-50 mt-0.5 ml-6 truncate text-[10px]", title: filterDetails, children: highlightSearchMatch(filterDetails, trimmedFilter) })) : null, showSiblingInsertTargets && parentPlaceholder && componentIndex >= 0 ? (_jsxs(_Fragment, { children: [componentIndex === 0 ? (_jsx(ComponentTreeGapInsertControl, { placement: "above", targetKey: `above:${component.id}`, activeTargetKey: opts?.activeInsertTargetKey, hoveredTargetKey: opts?.hoveredInsertTargetKey, onHoverTarget: opts?.onInsertTargetHover, testId: "component-tree-insert-above", title: "Insert above", ariaLabel: "Insert component above", options: siblingInsertOptions, onOpenChange: opts?.onInsertOpenChange, onSelect: (option) => opts?.onInsertSelect?.(parentPlaceholder, componentIndex, option), quickInsertComponent: component })) : null, _jsx(ComponentTreeGapInsertControl, { placement: "below", targetKey: `below:${component.id}`, activeTargetKey: opts?.activeInsertTargetKey, hoveredTargetKey: opts?.hoveredInsertTargetKey, onHoverTarget: opts?.onInsertTargetHover, testId: "component-tree-insert-below", title: isBetweenGap ? "Insert between" : "Insert below", ariaLabel: isBetweenGap
+                            ? "Insert component between"
+                            : "Insert component below", options: siblingInsertOptions, onOpenChange: opts?.onInsertOpenChange, onSelect: (option) => opts?.onInsertSelect?.(parentPlaceholder, componentIndex + 1, option), quickInsertComponent: component })] })) : null] }));
+}
+function ComponentTreePlaceholderInsertControl({ component, placeholders, activeTargetKey, hoveredTargetKey, getOptions, onOpenChange, onSelect, }) {
+    const [selectedPlaceholder, setSelectedPlaceholder] = useState(null);
+    const pickerTargetKey = getPlaceholderPickerTargetKey(component);
+    const selectedTargetKey = selectedPlaceholder
+        ? getPlaceholderInsertTargetKey(component, selectedPlaceholder)
+        : null;
+    if (placeholders.length === 1) {
+        const placeholder = placeholders[0];
+        const targetKey = getPlaceholderInsertTargetKey(component, placeholder);
+        const label = cleanComponentTreePlaceholderLabel(placeholder);
+        return (_jsx("div", { className: "ml-auto flex max-w-[60%] min-w-0 shrink items-center justify-end", "data-testid": "component-tree-placeholder-actions", children: _jsx(ComponentTreeInsertButton, { targetKey: targetKey, activeTargetKey: activeTargetKey, hoverVisible: hoveredTargetKey === targetKey, testId: "component-tree-insert-placeholder", title: `Insert into ${label}`, ariaLabel: `Insert component into ${label} placeholder`, options: getOptions(placeholder), onOpenChange: onOpenChange, onSelect: (option) => onSelect(placeholder, option), className: "relative h-6 w-6 shrink-0", children: _jsx(Plus, { className: "h-4 w-4", strokeWidth: 1 }) }) }));
+    }
+    if (selectedPlaceholder &&
+        selectedTargetKey &&
+        activeTargetKey === selectedTargetKey) {
+        const label = cleanComponentTreePlaceholderLabel(selectedPlaceholder);
+        return (_jsx("div", { className: "ml-auto flex max-w-[60%] min-w-0 shrink items-center justify-end", "data-testid": "component-tree-placeholder-actions", children: _jsx(ComponentTreeInsertButton, { targetKey: selectedTargetKey, activeTargetKey: activeTargetKey, hoverVisible: hoveredTargetKey === selectedTargetKey, testId: "component-tree-insert-placeholder", title: `Insert into ${label}`, ariaLabel: `Insert component into ${label} placeholder`, options: getOptions(selectedPlaceholder), onOpenChange: (targetKey, open) => {
+                    if (!open)
+                        setSelectedPlaceholder(null);
+                    onOpenChange?.(targetKey, open);
+                }, onSelect: (option) => {
+                    setSelectedPlaceholder(null);
+                    onSelect(selectedPlaceholder, option);
+                }, className: "relative h-6 w-6 shrink-0", children: _jsx(Plus, { className: "h-4 w-4", strokeWidth: 1 }) }) }));
+    }
+    const pickerOpen = activeTargetKey === pickerTargetKey;
+    const pickerHoverVisible = hoveredTargetKey === pickerTargetKey;
+    return (_jsx("div", { className: "ml-auto flex max-w-[60%] min-w-0 shrink items-center justify-end", "data-testid": "component-tree-placeholder-actions", children: _jsxs(Popover, { open: pickerOpen, onOpenChange: (open) => onOpenChange?.(pickerTargetKey, open), children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-testid": "component-tree-insert-placeholder", "data-insert-target": pickerTargetKey, "data-active": pickerOpen ? "true" : undefined, "aria-label": "Choose a placeholder to insert a component into", onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), className: cn("bg-component-default relative flex h-6 w-6 shrink-0 items-center justify-center rounded-[4px] text-white transition-all hover:brightness-105 active:scale-95", pickerOpen || pickerHoverVisible
+                            ? "pointer-events-auto opacity-100"
+                            : "pointer-events-none opacity-0 focus-visible:pointer-events-auto focus-visible:opacity-100"), children: _jsx(Plus, { className: "h-4 w-4", strokeWidth: 1 }) }) }), _jsxs(PopoverContent, { side: "right", align: "start", sideOffset: 12, collisionPadding: 12, onOpenAutoFocus: (event) => event.preventDefault(), "data-testid": "component-tree-placeholder-picker", className: "border-border-default text-popover-foreground z-250 w-60 max-w-[15rem] overflow-hidden rounded-[4px] border bg-white/95 p-1.5 backdrop-blur-md", children: [_jsx("div", { className: "text-neutral-grey-50 px-2 pt-1 pb-1.5 text-[11px] font-semibold tracking-wide uppercase", children: "Choose placeholder" }), _jsx("div", { className: "flex flex-col gap-0.5", children: placeholders.map((placeholder) => {
+                                const label = cleanComponentTreePlaceholderLabel(placeholder);
+                                return (_jsxs("button", { type: "button", "data-testid": "component-tree-placeholder-option", "data-placeholder-key": placeholder.key, onClick: (event) => {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        setSelectedPlaceholder(placeholder);
+                                        onOpenChange?.(getPlaceholderInsertTargetKey(component, placeholder), true);
+                                    }, className: "hover:bg-neutral-grey-5 focus-visible:bg-neutral-grey-5 flex w-full items-center gap-2 rounded-[4px] px-2 py-1.5 text-left text-[12px] transition-colors focus-visible:outline-none", children: [_jsx(Folder, { className: "text-neutral-grey-50 h-4 w-4 shrink-0", strokeWidth: 1 }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsx(ChevronRight, { className: "text-neutral-grey-50 h-3.5 w-3.5 shrink-0", strokeWidth: 1 })] }, placeholder.key));
+                            }) })] })] }) }));
+}
+function ComponentTreeGapInsertControl({ placement, targetKey, activeTargetKey, hoveredTargetKey, onHoverTarget, testId, title, ariaLabel, options, onOpenChange, onSelect, quickInsertComponent, }) {
+    const isActive = activeTargetKey === targetKey;
+    const isHoverVisible = hoveredTargetKey === targetKey;
+    return (_jsxs("div", { className: cn("pointer-events-none absolute right-0 left-0 z-20 flex h-6 items-center justify-center transition-opacity", placement === "above"
+            ? "top-0 -translate-y-[17px]"
+            : "bottom-0 translate-y-[17px]", isActive || isHoverVisible
+            ? "opacity-100"
+            : "opacity-0 focus-within:opacity-100"), "data-testid": `${testId}-gap`, onMouseEnter: () => onHoverTarget?.(targetKey), onMouseLeave: () => onHoverTarget?.(null), children: [_jsx("span", { className: "pointer-events-auto absolute inset-x-0 top-1/2 h-2 -translate-y-1/2", "data-testid": "component-tree-insert-gap-hover-zone", "data-insert-target": targetKey }), _jsx("span", { className: "bg-component-default absolute inset-x-0 top-1/2 h-[2px] -translate-y-1/2 rounded-full", "data-testid": "component-tree-insert-gap-line" }), _jsx(ComponentTreeInsertButton, { targetKey: targetKey, activeTargetKey: activeTargetKey, hoverVisible: isHoverVisible, testId: testId, title: title, ariaLabel: ariaLabel, options: options, onOpenChange: onOpenChange, onSelect: onSelect, quickInsertComponent: quickInsertComponent, className: "relative z-10 h-6 w-6 shrink-0", children: _jsx(Plus, { className: "h-4 w-4", strokeWidth: 1 }) })] }));
+}
+function ComponentTreeInsertButton({ targetKey, activeTargetKey, hoverVisible, testId, title, ariaLabel, options, onOpenChange, onSelect, quickInsertComponent, className, children, }) {
+    const isActive = activeTargetKey === targetKey;
+    return (_jsxs(Tooltip, { children: [_jsx(InsertComponentMenu, { open: isActive, onOpenChange: (open) => onOpenChange?.(targetKey, open), title: title, options: options, onSelect: onSelect, side: "right", align: "start", sideOffset: 12, children: _jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "data-testid": testId, "data-insert-target": targetKey, "data-active": isActive ? "true" : undefined, "aria-label": ariaLabel, onMouseDown: (event) => event.stopPropagation(), onClick: (event) => {
+                            event.stopPropagation();
+                            if (quickInsertComponent && (event.ctrlKey || event.metaKey)) {
+                                event.preventDefault();
+                                const matchingOption = getMatchingInsertOption(quickInsertComponent, options);
+                                if (matchingOption)
+                                    onSelect(matchingOption);
+                            }
+                        }, className: cn("bg-component-default flex items-center justify-center rounded-[4px] text-white transition-all hover:brightness-105 active:scale-95", isActive || hoverVisible
+                            ? "pointer-events-auto opacity-100"
+                            : "pointer-events-none opacity-0 focus-visible:pointer-events-auto focus-visible:opacity-100", className), children: children }) }) }), _jsx(TooltipContent, { side: "right", sideOffset: 8, children: title })] }));
+}
+function getPlaceholderInsertTargetKey(component, placeholder) {
+    return `placeholder:${component.id}:${placeholder.key}`;
+}
+function getPlaceholderPickerTargetKey(component) {
+    return `placeholder-picker:${component.id}`;
+}
+function cleanComponentTreePlaceholderLabel(placeholder) {
+    return (placeholder.description ||
+        placeholder.name ||
+        placeholder.key).replace(/_{[0-9a-fA-F-]+}$/, "");
 }
-function getMatchingInsertBelowOption(component, insertOptions) {
+function getMatchingInsertOption(component, insertOptions) {
     const componentTypeId = normalizeInsertTypeId(component.typeId);
     if (!componentTypeId)
         return undefined;