"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
import { cn } from "../../lib/utils";
import { buildInsertMenuSections } from "../insertMenuItems";
import { getAbsoluteIconUrl } from "../utils";
/**
 * The component insert/append menu. Unlike a context menu it is anchored to the
 * placeholder "+" button it belongs to (via {@link PopoverTrigger}) rather than
 * popping up at the mouse position. It opens to the right by default, flips/
 * shifts to stay on-screen (Radix collision handling), and animates in with a
 * slide + zoom from the anchor.
 *
 * The trigger is the caller's "+" button: pass it as {@link children}. The
 * caller keeps full ownership of the button's click handling - opening is driven
 * by the controlled `open`/`onOpenChange` pair, so modifier-click / quick-insert
 * shortcuts can short-circuit (preventDefault) without ever opening the menu.
 */
export function InsertComponentMenu({ open, onOpenChange, title, contextLabel, options, onSelect, side = "right", align = "start", sideOffset = 14, children, }) {
    const sections = buildInsertMenuSections(options);
    const headerLabel = contextLabel || title;
    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: children }), _jsxs(PopoverContent, { side: side, align: align, sideOffset: sideOffset, collisionPadding: 12, 
                // Keep focus on the canvas; the overlay sits above an iframe and
                // auto-focusing the panel can scroll the editor unexpectedly.
                onOpenAutoFocus: (event) => event.preventDefault(), "data-testid": "insert-component-menu", className: cn("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", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=right]:slide-in-from-left-1.5 data-[side=left]:slide-in-from-right-1.5", "data-[side=top]:slide-in-from-bottom-1.5 data-[side=bottom]:slide-in-from-top-1.5", "duration-150 ease-out"), children: [_jsx("div", { className: "px-2 pt-1 pb-1.5", children: _jsx("div", { title: contextLabel || undefined, "data-testid": contextLabel
                                ? "insert-component-menu-context"
                                : "insert-component-menu-title", className: cn("text-neutral-grey-50 whitespace-normal break-words text-[11px] leading-snug [overflow-wrap:anywhere]", contextLabel
                                ? "font-medium tracking-normal normal-case"
                                : "font-semibold tracking-wide uppercase"), children: headerLabel }) }), _jsx("div", { className: "flex max-h-[min(60vh,22rem)] flex-col gap-0.5 overflow-y-auto", children: sections.map((section, sectionIndex) => (_jsxs("div", { className: "flex flex-col", children: [section.name && (_jsx("div", { className: "text-neutral-grey-50/80 px-2 pt-2 pb-0.5 text-[10px] font-medium tracking-wide uppercase", children: section.name })), section.options.map((option) => (_jsxs("button", { type: "button", "data-testid": "insert-component-menu-item", "data-type-id": option.typeId, onClick: (event) => {
                                        event.preventDefault();
                                        event.stopPropagation();
                                        onSelect(option);
                                    }, className: cn("group flex w-full items-center gap-2.5 rounded-[4px] px-2 py-1.5 text-left text-[12px]", "transition-colors duration-100 ease-out", "hover:bg-neutral-grey-5 focus-visible:bg-neutral-grey-5 focus-visible:outline-none"), children: [_jsx("span", { className: "bg-neutral-grey-5 flex h-6 w-6 shrink-0 items-center justify-center rounded-[4px] transition-colors duration-100 group-hover:bg-white", children: _jsx("img", { src: getAbsoluteIconUrl(option.icon), width: 16, height: 16, className: "shrink-0", alt: "" }) }), _jsx("span", { className: "truncate", children: option.name })] }, option.typeId)))] }, section.name ?? sectionIndex))) })] })] }));
}
//# sourceMappingURL=InsertComponentMenu.js.map