@verbb/plugin-kit-react 1.0.0

package/dist/components/tiptap/LinkDropdown.js

@@ -0,0 +1,155 @@
+import { cn } from "../../utils/classes.js";
+import { hostOpenElementSelector } from "../../utils/hostBridge.js";
+import "../../utils/index.js";
+import { useTranslation } from "../../hooks/useTranslation.js";
+import "../../hooks/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../DropdownMenu.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip.js";
+import { Button } from "../Button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLink } from "@fortawesome/pro-solid-svg-icons";
+import { useEditorState } from "@tiptap/react";
+//#region src/components/tiptap/LinkDropdown.tsx
+function openCraftElementModal(config, elementSiteId, linkSelectorStorageKeyPrefix, onSelect, getSelectedText) {
+	if (!linkSelectorStorageKeyPrefix) throw new Error("LinkDropdown requires \"linkSelectorStorageKeyPrefix\" when using element selector links.");
+	hostOpenElementSelector(config.elementType, {
+		storageKey: `${linkSelectorStorageKeyPrefix}.${config.elementType}`,
+		sources: config.sources,
+		criteria: config.criteria,
+		defaultSiteId: elementSiteId,
+		autoFocusSearchBox: false,
+		onSelect: (elements) => {
+			if (elements?.length) {
+				const [element] = elements;
+				onSelect(`${element.url || ""}#${config.refHandle}:${element.id}@${element.siteId}`, getSelectedText() || element.label || "");
+			}
+		},
+		closeOtherModals: false
+	});
+}
+function isLinkOptionsArray(value) {
+	return Array.isArray(value) && value.length > 0;
+}
+function getCraftOptionsFromLinkOptions(linkOptions) {
+	if (!linkOptions) return [];
+	if (isLinkOptionsArray(linkOptions)) return linkOptions;
+	const items = [];
+	if (linkOptions.linkToEntry) items.push({
+		...linkOptions.linkToEntry,
+		optionTitle: "Link to an entry"
+	});
+	if (linkOptions.linkToAsset) items.push({
+		...linkOptions.linkToAsset,
+		optionTitle: "Link to an asset"
+	});
+	if (linkOptions.linkToCategory) items.push({
+		...linkOptions.linkToCategory,
+		optionTitle: "Link to a category"
+	});
+	return items;
+}
+function LinkDropdown({ editor, linkOptions = {}, linkSelectorStorageKeyPrefix, openInsertLinkDialog, title }) {
+	const t = useTranslation();
+	const craftOptions = getCraftOptionsFromLinkOptions(linkOptions);
+	const elementSiteId = !isLinkOptionsArray(linkOptions) ? linkOptions?.elementSiteId : void 0;
+	const getSelectedText = () => {
+		if (!editor) return "";
+		const { from, to } = editor.state.selection;
+		return editor.state.doc.textBetween(from, to, " ");
+	};
+	const handleCraftElementSelect = (url, text) => {
+		openInsertLinkDialog({
+			url,
+			text
+		});
+	};
+	const handleCraftOption = (config) => {
+		openCraftElementModal(config, elementSiteId, linkSelectorStorageKeyPrefix, handleCraftElementSelect, getSelectedText);
+	};
+	const handleLinkToEntry = () => {
+		const config = !isLinkOptionsArray(linkOptions) ? linkOptions?.linkToEntry : void 0;
+		if (config) handleCraftOption(config);
+		else openInsertLinkDialog();
+	};
+	const handleLinkToAsset = () => {
+		const config = !isLinkOptionsArray(linkOptions) ? linkOptions?.linkToAsset : void 0;
+		if (config) handleCraftOption(config);
+		else openInsertLinkDialog();
+	};
+	const handleLinkToCategory = () => {
+		const config = !isLinkOptionsArray(linkOptions) ? linkOptions?.linkToCategory : void 0;
+		if (config) handleCraftOption(config);
+		else openInsertLinkDialog();
+	};
+	const handleUnlink = () => {
+		editor?.chain().focus().extendMarkRange("link").unsetLink().run();
+	};
+	const isLinkActive = useEditorState({
+		editor,
+		selector: ({ editor: ed }) => {
+			return (ed?.isFocused && ed?.isActive("link")) ?? false;
+		}
+	});
+	const showCraftOptions = !isLinkOptionsArray(linkOptions) && (linkOptions?.linkToEntry || linkOptions?.linkToAsset || linkOptions?.linkToCategory) || craftOptions.length > 0;
+	const triggerButton = /* @__PURE__ */ jsx(Button, {
+		variant: "transparent",
+		className: cn("w-[32px] h-[32px]", "text-[#1c2e36]", "hover:bg-slate-100!", isLinkActive && "bg-slate-250! hover:bg-slate-250!"),
+		children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+			icon: faLink,
+			className: "size-4"
+		})
+	});
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [title ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: triggerButton }) }), /* @__PURE__ */ jsx(TooltipContent, {
+		sideOffset: 4,
+		children: title
+	})] }) : /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: triggerButton }), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "start",
+		side: "bottom",
+		children: [
+			showCraftOptions && /* @__PURE__ */ jsxs(Fragment, { children: [craftOptions.length > 0 ? craftOptions.map((option, index) => {
+				return /* @__PURE__ */ jsx(DropdownMenuItem, {
+					onClick: () => {
+						return handleCraftOption(option);
+					},
+					children: option.optionTitle
+				}, index);
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				!isLinkOptionsArray(linkOptions) && linkOptions?.linkToEntry && /* @__PURE__ */ jsx(DropdownMenuItem, {
+					onClick: handleLinkToEntry,
+					children: t("Link to an entry")
+				}),
+				!isLinkOptionsArray(linkOptions) && linkOptions?.linkToAsset && /* @__PURE__ */ jsx(DropdownMenuItem, {
+					onClick: handleLinkToAsset,
+					children: t("Link to an asset")
+				}),
+				!isLinkOptionsArray(linkOptions) && linkOptions?.linkToCategory && /* @__PURE__ */ jsx(DropdownMenuItem, {
+					onClick: handleLinkToCategory,
+					children: t("Link to a category")
+				})
+			] }), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }),
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: () => {
+					const selected = getSelectedText();
+					const { from, to } = editor?.state.selection ?? {};
+					openInsertLinkDialog(typeof from === "number" && typeof to === "number" && from !== to ? {
+						text: selected,
+						from,
+						to
+					} : void 0);
+				},
+				children: t("Insert Link")
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: handleUnlink,
+				disabled: !isLinkActive,
+				className: !isLinkActive ? "opacity-50" : "",
+				children: t("Unlink")
+			})
+		]
+	})] });
+}
+//#endregion
+export { LinkDropdown };
+
+//# sourceMappingURL=LinkDropdown.js.map

package/dist/components/tiptap/LinkDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkDropdown.js","names":[],"sources":["../../../src/components/tiptap/LinkDropdown.tsx"],"sourcesContent":["import { useEditorState } from '@tiptap/react';\nimport type { Editor } from '@tiptap/core';\nimport {\n    DropdownMenu,\n    DropdownMenuTrigger,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuSeparator,\n} from '@verbb/plugin-kit-react/components/DropdownMenu';\nimport { Button } from '@verbb/plugin-kit-react/components/Button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@verbb/plugin-kit-react/components/Tooltip';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faLink } from '@fortawesome/pro-solid-svg-icons';\nimport { cn, hostOpenElementSelector } from '@verbb/plugin-kit-react/utils';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\n\nexport type LinkElementConfig = {\n    elementType: string;\n    refHandle: string;\n    sources?: string[];\n    criteria?: Record<string, unknown>;\n};\n\nexport type LinkOptionSchemaItem = LinkElementConfig & {\n    optionTitle: string;\n};\n\nexport type LinkOptions = {\n    elementSiteId?: number;\n    linkToEntry?: LinkElementConfig;\n    linkToAsset?: LinkElementConfig;\n    linkToCategory?: LinkElementConfig;\n};\n\n/** linkOptions can be the object format above, or an array from schema: { optionTitle, elementType, refHandle, sources?, criteria? }[] */\nexport type LinkOptionsInput = LinkOptions | LinkOptionSchemaItem[];\n\ntype LinkDropdownProps = {\n    editor: Editor | null | undefined;\n    linkOptions?: LinkOptionsInput;\n    linkSelectorStorageKeyPrefix?: string;\n    openInsertLinkDialog: (initial?: { url?: string; text?: string; from?: number; to?: number }) => void;\n    title?: string;\n};\n\ndeclare global {\n    interface Window {\n        Craft?: {\n            createElementSelectorModal?: (\n                elementType: string,\n                options: {\n                    storageKey: string;\n                    sources?: string[];\n                    criteria?: Record<string, unknown>;\n                    defaultSiteId?: number;\n                    autoFocusSearchBox?: boolean;\n                    onSelect: (elements: Array<{ url?: string; label?: string; id?: number; siteId?: number }>) => void;\n                    closeOtherModals?: boolean;\n                },\n            ) => void;\n        };\n    }\n}\n\nfunction openCraftElementModal(\n    config: LinkElementConfig,\n    elementSiteId: number | undefined,\n    linkSelectorStorageKeyPrefix: string | undefined,\n    onSelect: (url: string, text: string) => void,\n    getSelectedText: () => string,\n) {\n    if (!linkSelectorStorageKeyPrefix) {\n        throw new Error('LinkDropdown requires \"linkSelectorStorageKeyPrefix\" when using element selector links.');\n    }\n\n    hostOpenElementSelector(config.elementType, {\n        storageKey: `${linkSelectorStorageKeyPrefix}.${config.elementType}`,\n        sources: config.sources,\n        criteria: config.criteria,\n        defaultSiteId: elementSiteId,\n        autoFocusSearchBox: false,\n        onSelect: (elements) => {\n            if (elements?.length) {\n                const [element] = elements;\n                const url = `${element.url || ''}#${config.refHandle}:${element.id}@${element.siteId}`;\n                const text = getSelectedText() || element.label || '';\n                onSelect(url, text);\n            }\n        },\n        closeOtherModals: false,\n    });\n}\n\nfunction isLinkOptionsArray(value: LinkOptionsInput | undefined): value is LinkOptionSchemaItem[] {\n    return Array.isArray(value) && value.length > 0;\n}\n\nfunction getCraftOptionsFromLinkOptions(linkOptions: LinkOptionsInput | undefined): LinkOptionSchemaItem[] {\n    if (!linkOptions) {\n        return [];\n    }\n    if (isLinkOptionsArray(linkOptions)) {\n        return linkOptions;\n    }\n    const items: LinkOptionSchemaItem[] = [];\n    if (linkOptions.linkToEntry) {\n        items.push({ ...linkOptions.linkToEntry, optionTitle: 'Link to an entry' });\n    }\n    if (linkOptions.linkToAsset) {\n        items.push({ ...linkOptions.linkToAsset, optionTitle: 'Link to an asset' });\n    }\n    if (linkOptions.linkToCategory) {\n        items.push({ ...linkOptions.linkToCategory, optionTitle: 'Link to a category' });\n    }\n    return items;\n}\n\nexport function LinkDropdown({\n    editor,\n    linkOptions = {},\n    linkSelectorStorageKeyPrefix,\n    openInsertLinkDialog,\n    title,\n}: LinkDropdownProps) {\n    const t = useTranslation();\n    const craftOptions = getCraftOptionsFromLinkOptions(linkOptions);\n    const elementSiteId = !isLinkOptionsArray(linkOptions) ? linkOptions?.elementSiteId : undefined;\n\n    const getSelectedText = () => {\n        if (!editor) {\n            return '';\n        }\n        const { from, to } = editor.state.selection;\n        return editor.state.doc.textBetween(from, to, ' ');\n    };\n\n    const handleCraftElementSelect = (url: string, text: string) => {\n        openInsertLinkDialog({ url, text });\n    };\n\n    const handleCraftOption = (config: LinkElementConfig) => {\n        openCraftElementModal(\n            config,\n            elementSiteId,\n            linkSelectorStorageKeyPrefix,\n            handleCraftElementSelect,\n            getSelectedText,\n        );\n    };\n\n    const handleLinkToEntry = () => {\n        const config = !isLinkOptionsArray(linkOptions) ? linkOptions?.linkToEntry : undefined;\n        if (config) {\n            handleCraftOption(config);\n        } else {\n            openInsertLinkDialog();\n        }\n    };\n\n    const handleLinkToAsset = () => {\n        const config = !isLinkOptionsArray(linkOptions) ? linkOptions?.linkToAsset : undefined;\n        if (config) {\n            handleCraftOption(config);\n        } else {\n            openInsertLinkDialog();\n        }\n    };\n\n    const handleLinkToCategory = () => {\n        const config = !isLinkOptionsArray(linkOptions) ? linkOptions?.linkToCategory : undefined;\n        if (config) {\n            handleCraftOption(config);\n        } else {\n            openInsertLinkDialog();\n        }\n    };\n\n    const handleUnlink = () => {\n        editor?.chain().focus().extendMarkRange('link').unsetLink().run();\n    };\n\n    const isLinkActive = useEditorState({\n        editor,\n        selector: ({ editor: ed }) => {\n            return (ed?.isFocused && ed?.isActive('link')) ?? false;\n        },\n    });\n\n    const showCraftOptionsFromObject = !isLinkOptionsArray(linkOptions) && (linkOptions?.linkToEntry || linkOptions?.linkToAsset || linkOptions?.linkToCategory);\n    const showCraftOptions = showCraftOptionsFromObject || craftOptions.length > 0;\n\n    const triggerButton = (\n        <Button\n            variant=\"transparent\"\n            className={cn(\n                'w-[32px] h-[32px]',\n                'text-[#1c2e36]',\n                'hover:bg-slate-100!',\n                isLinkActive && 'bg-slate-250! hover:bg-slate-250!',\n            )}\n        >\n            <FontAwesomeIcon icon={faLink} className=\"size-4\" />\n        </Button>\n    );\n\n    return (\n        <DropdownMenu>\n            {title ? (\n                <Tooltip>\n                    <TooltipTrigger render={<DropdownMenuTrigger render={triggerButton} />} />\n                    <TooltipContent sideOffset={4}>{title}</TooltipContent>\n                </Tooltip>\n            ) : (\n                <DropdownMenuTrigger render={triggerButton} />\n            )}\n                <DropdownMenuContent align=\"start\" side=\"bottom\">\n                    {showCraftOptions && (\n                        <>\n                            {craftOptions.length > 0 ? (\n                                craftOptions.map((option, index) => {\n                                    return (\n                                        <DropdownMenuItem\n                                            key={index}\n                                            onClick={() => { return handleCraftOption(option); }}\n                                        >\n                                            {option.optionTitle}\n                                        </DropdownMenuItem>\n                                    );\n                                })\n                            ) : (\n                                <>\n                                    {!isLinkOptionsArray(linkOptions) && linkOptions?.linkToEntry && (\n                                        <DropdownMenuItem onClick={handleLinkToEntry}>\n                                            {t('Link to an entry')}\n                                        </DropdownMenuItem>\n                                    )}\n                                    {!isLinkOptionsArray(linkOptions) && linkOptions?.linkToAsset && (\n                                        <DropdownMenuItem onClick={handleLinkToAsset}>\n                                            {t('Link to an asset')}\n                                        </DropdownMenuItem>\n                                    )}\n                                    {!isLinkOptionsArray(linkOptions) && linkOptions?.linkToCategory && (\n                                        <DropdownMenuItem onClick={handleLinkToCategory}>\n                                            {t('Link to a category')}\n                                        </DropdownMenuItem>\n                                    )}\n                                </>\n                            )}\n                            <DropdownMenuSeparator />\n                        </>\n                    )}\n                    <DropdownMenuItem onClick={() => {\n                        const selected = getSelectedText();\n                        const { from, to } = editor?.state.selection ?? {};\n                        const hasSelection = typeof from === 'number' && typeof to === 'number' && from !== to;\n                        openInsertLinkDialog(hasSelection ? { text: selected, from, to } : undefined);\n                    }}>\n                        {t('Insert Link')}\n                    </DropdownMenuItem>\n                    <DropdownMenuItem\n                        onClick={handleUnlink}\n                        disabled={!isLinkActive}\n                        className={!isLinkActive ? 'opacity-50' : ''}\n                    >\n                        {t('Unlink')}\n                    </DropdownMenuItem>\n                </DropdownMenuContent>\n        </DropdownMenu>\n    );\n}\n"],"mappings":"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"}

package/dist/components/tiptap/VariableCommandList.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { VariableOption } from './VariableDropdown';
+export type VariableGroup = {
+    label: string;
+    value: string;
+    items: VariableOption[];
+};
+export type VariableCommandListProps = {
+    /** Search query - controls Command filter. Use empty string to show all. */
+    search: string;
+    onSearchChange?: (value: string) => void;
+    /** Grouped items (top-level categories). When null, shows flat options (child mode). */
+    groups: VariableGroup[] | null;
+    /** Flat options for child mode when groups is null */
+    options: VariableOption[];
+    /** Currently selected value for keyboard-nav sync (inline picker). Pass to highlight. */
+    selectedValue?: string | null;
+    onSelect: (item: VariableOption, baseVariable?: VariableOption) => void;
+    /** Placeholder for search input */
+    placeholder?: string;
+    /** Show search input */
+    showSearch?: boolean;
+    /** Disable built-in filtering - we provide pre-filtered items */
+    shouldFilter?: boolean;
+    /** Optional: render back button row when in child mode */
+    onBack?: () => void;
+    /** True when showing a drilled-in child page; used to restore scroll when navigating back */
+    isChildMode?: boolean;
+    /** When false, don't auto-select first item (e.g. for toolbar/button trigger) */
+    selectFirstItem?: boolean;
+    /** Control autofocus of command search input when list opens/navigates */
+    autoFocusSearchInput?: boolean;
+    /** Optional content rendered directly below search input */
+    afterSearchContent?: React.ReactNode;
+};
+export declare function VariableCommandList({ search, onSearchChange, groups, options, selectedValue, onSelect, placeholder, showSearch, shouldFilter, onBack, isChildMode, selectFirstItem, autoFocusSearchInput, afterSearchContent, }: VariableCommandListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VariableCommandList.d.ts.map

package/dist/components/tiptap/VariableCommandList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableCommandList.d.ts","sourceRoot":"","sources":["../../../src/components/tiptap/VariableCommandList.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAkC,MAAM,OAAO,CAAC;AAcvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,MAAM,MAAM,aAAa,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,cAAc,EAAE,CAAC;CAC3B,CAAC;AA0CF,MAAM,MAAM,wBAAwB,GAAG;IACnC,4EAA4E;IAC5E,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,wFAAwF;IACxF,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;IAC/B,sDAAsD;IACtD,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,yFAAyF;IACzF,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,YAAY,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IACxE,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,6FAA6F;IAC7F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxC,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAChC,MAAM,EACN,cAAc,EACd,MAAM,EACN,OAAO,EACP,aAAa,EACb,QAAQ,EACR,WAAW,EACX,UAAiB,EACjB,YAAoB,EACpB,MAAM,EACN,WAAmB,EACnB,eAAsB,EACtB,oBAA2B,EAC3B,kBAAkB,GACrB,EAAE,wBAAwB,2CAoK1B"}

package/dist/components/tiptap/VariableCommandList.js

@@ -0,0 +1,166 @@
+import { cn } from "../../utils/classes.js";
+import "../../utils/index.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../Command.js";
+import { useTranslation } from "../../hooks/useTranslation.js";
+import "../../hooks/index.js";
+import { Button } from "../Button.js";
+import React, { useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/pro-solid-svg-icons";
+//#region src/components/tiptap/VariableCommandList.tsx
+/**
+* Command-based variable list. Used by VariableDropdown and InlineVariablePickerPopover.
+* Supports grouped items and nested "pages" (parent → children) via groups/options.
+*/
+/** Renders child item only when search is non-empty and child matches (cmdk sub-item pattern) */
+function VariableSubItem({ child, parent, groupLabel, search, handleSelectItem }) {
+	const q = search.trim().toLowerCase();
+	if (!q) return null;
+	if (!((child.label ?? "").toLowerCase().includes(q) || String(child.value ?? "").toLowerCase().includes(q))) return null;
+	const key = child.value ?? child.label ?? `sub-${parent.label}-${child.label}`;
+	return /* @__PURE__ */ jsx(CommandItem, {
+		value: child.value ?? child.label ?? key,
+		onSelect: () => {
+			return handleSelectItem(child, parent);
+		},
+		keywords: [
+			child.label,
+			child.value ?? "",
+			parent.label,
+			groupLabel
+		],
+		children: child.label
+	}, key);
+}
+function VariableCommandList({ search, onSearchChange, groups, options, selectedValue, onSelect, placeholder, showSearch = true, shouldFilter = false, onBack, isChildMode = false, selectFirstItem = true, autoFocusSearchInput = true, afterSearchContent }) {
+	const t = useTranslation();
+	const listRef = useRef(null);
+	const commandRef = useRef(null);
+	const savedScrollTopRef = useRef(null);
+	const flatItems = groups ? groups.flatMap((g) => {
+		return g.items;
+	}) : options;
+	const isControlled = selectedValue !== void 0 && selectedValue !== null;
+	const currentValue = selectedValue ?? (selectFirstItem ? flatItems[0]?.value ?? "" : "");
+	const commandProps = isControlled ? {
+		value: currentValue,
+		onValueChange: () => {}
+	} : { defaultValue: currentValue || void 0 };
+	const handleSelectItem = (item, baseVariable) => {
+		if (Array.isArray(item.children) && item.children.length > 0) savedScrollTopRef.current = listRef.current?.scrollTop ?? 0;
+		onSelect(item, baseVariable);
+	};
+	const wasChildModeRef = React.useRef(isChildMode);
+	useLayoutEffect(() => {
+		const wasChild = wasChildModeRef.current;
+		wasChildModeRef.current = isChildMode;
+		if (wasChild && !isChildMode && savedScrollTopRef.current != null && listRef.current) {
+			listRef.current.scrollTop = savedScrollTopRef.current;
+			savedScrollTopRef.current = null;
+		}
+		if (!wasChild && isChildMode && showSearch && autoFocusSearchInput) (commandRef.current?.querySelector("[data-slot=\"command-input\"]"))?.focus();
+	}, [
+		autoFocusSearchInput,
+		isChildMode,
+		showSearch
+	]);
+	const handleKeyDown = (e) => {
+		if (onBack && !search.trim() && e.key === "Backspace") {
+			e.preventDefault();
+			e.stopPropagation();
+			onBack();
+		}
+	};
+	const content = /* @__PURE__ */ jsx("div", {
+		ref: commandRef,
+		className: "contents",
+		children: /* @__PURE__ */ jsxs(Command, {
+			shouldFilter,
+			className: "border-0 shadow-none rounded-none",
+			...commandProps,
+			children: [
+				showSearch && /* @__PURE__ */ jsx(CommandInput, {
+					value: search,
+					onValueChange: onSearchChange,
+					placeholder: placeholder ?? t("Search variables"),
+					className: "border-0"
+				}),
+				afterSearchContent,
+				onBack && /* @__PURE__ */ jsxs(Button, {
+					variant: "none",
+					className: cn(["w-full text-left text-[11px] flex flex-1 items-center justify-start", "hover:bg-slate-100 gap-1 border-b border-slate-150 px-2 py-1.5"]),
+					onClick: (e) => {
+						e.preventDefault();
+						onBack();
+					},
+					children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
+						icon: faChevronLeft,
+						className: "size-[8px] shrink-0"
+					}), t("Back")]
+				}),
+				/* @__PURE__ */ jsxs(CommandList, {
+					ref: listRef,
+					className: "max-h-[280px]",
+					children: [/* @__PURE__ */ jsx(CommandEmpty, { children: t("No variables found.") }), groups ? groups.map((group, gi) => {
+						return /* @__PURE__ */ jsxs(React.Fragment, { children: [gi > 0 && /* @__PURE__ */ jsx(CommandSeparator, {}), /* @__PURE__ */ jsx(CommandGroup, {
+							heading: group.label,
+							children: group.items.map((item, ii) => {
+								const q = search.trim().toLowerCase();
+								const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+								const showParent = !hasChildren || !q;
+								return /* @__PURE__ */ jsxs(React.Fragment, { children: [showParent && /* @__PURE__ */ jsxs(CommandItem, {
+									value: item.value ?? item.label ?? `${gi}-${ii}`,
+									onSelect: () => {
+										return handleSelectItem(item);
+									},
+									keywords: [
+										item.label,
+										item.value ?? "",
+										group.label
+									],
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "truncate flex-1",
+										children: item.label
+									}), hasChildren && /* @__PURE__ */ jsx(FontAwesomeIcon, {
+										icon: faChevronRight,
+										className: cn("size-3 shrink-0 text-gray-400 ml-2"),
+										"aria-hidden": true
+									})]
+								}), hasChildren && item.children.map((child) => {
+									return /* @__PURE__ */ jsx(VariableSubItem, {
+										child,
+										parent: item,
+										groupLabel: group.label,
+										search,
+										handleSelectItem
+									}, child.value ?? child.label ?? `${gi}-${ii}-${child.label}`);
+								})] }, item.value ?? item.label ?? `${gi}-${ii}`);
+							})
+						})] }, group.value ?? group.label ?? gi);
+					}) : /* @__PURE__ */ jsx(CommandGroup, {
+						heading: t("Selectors"),
+						children: options.map((item, i) => {
+							return /* @__PURE__ */ jsx(CommandItem, {
+								value: item.value ?? item.label ?? `opt-${i}`,
+								onSelect: () => {
+									return handleSelectItem(item);
+								},
+								children: item.label
+							}, item.value ?? item.label ?? `opt-${i}`);
+						})
+					})]
+				})
+			]
+		})
+	});
+	return onBack ? /* @__PURE__ */ jsx("div", {
+		onKeyDown: handleKeyDown,
+		className: "contents",
+		children: content
+	}) : content;
+}
+//#endregion
+export { VariableCommandList };
+
+//# sourceMappingURL=VariableCommandList.js.map

package/dist/components/tiptap/VariableCommandList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableCommandList.js","names":[],"sources":["../../../src/components/tiptap/VariableCommandList.tsx"],"sourcesContent":["/**\n * Command-based variable list. Used by VariableDropdown and InlineVariablePickerPopover.\n * Supports grouped items and nested \"pages\" (parent → children) via groups/options.\n */\n\nimport React, { useRef, useLayoutEffect } from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/pro-solid-svg-icons';\nimport {\n    Command,\n    CommandEmpty,\n    CommandGroup,\n    CommandInput,\n    CommandItem,\n    CommandList,\n    CommandSeparator,\n} from '@verbb/plugin-kit-react/components/Command';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport type { VariableOption } from './VariableDropdown';\nimport { Button } from '@verbb/plugin-kit-react/components/Button';\n\nexport type VariableGroup = {\n    label: string;\n    value: string;\n    items: VariableOption[];\n};\n\n/** Renders child item only when search is non-empty and child matches (cmdk sub-item pattern) */\nfunction VariableSubItem({\n    child,\n    parent,\n    groupLabel,\n    search,\n    handleSelectItem,\n}: {\n    child: VariableOption;\n    parent: VariableOption;\n    groupLabel: string;\n    search: string;\n    handleSelectItem: (item: VariableOption, baseVariable?: VariableOption) => void;\n}) {\n    const q = search.trim().toLowerCase();\n    if (!q) {\n        return null;\n    }\n    const matches =\n        (child.label ?? '').toLowerCase().includes(q) ||\n        String(child.value ?? '').toLowerCase().includes(q);\n    if (!matches) {\n        return null;\n    }\n    const key = child.value ?? child.label ?? `sub-${parent.label}-${child.label}`;\n    const value = child.value ?? child.label ?? key;\n    return (\n        <CommandItem\n            key={key}\n            value={value}\n            onSelect={() => {\n                return handleSelectItem(child, parent);\n            }}\n            keywords={[child.label, child.value ?? '', parent.label, groupLabel]}\n        >\n            {child.label}\n        </CommandItem>\n    );\n}\n\nexport type VariableCommandListProps = {\n    /** Search query - controls Command filter. Use empty string to show all. */\n    search: string;\n    onSearchChange?: (value: string) => void;\n    /** Grouped items (top-level categories). When null, shows flat options (child mode). */\n    groups: VariableGroup[] | null;\n    /** Flat options for child mode when groups is null */\n    options: VariableOption[];\n    /** Currently selected value for keyboard-nav sync (inline picker). Pass to highlight. */\n    selectedValue?: string | null;\n    onSelect: (item: VariableOption, baseVariable?: VariableOption) => void;\n    /** Placeholder for search input */\n    placeholder?: string;\n    /** Show search input */\n    showSearch?: boolean;\n    /** Disable built-in filtering - we provide pre-filtered items */\n    shouldFilter?: boolean;\n    /** Optional: render back button row when in child mode */\n    onBack?: () => void;\n    /** True when showing a drilled-in child page; used to restore scroll when navigating back */\n    isChildMode?: boolean;\n    /** When false, don't auto-select first item (e.g. for toolbar/button trigger) */\n    selectFirstItem?: boolean;\n    /** Control autofocus of command search input when list opens/navigates */\n    autoFocusSearchInput?: boolean;\n    /** Optional content rendered directly below search input */\n    afterSearchContent?: React.ReactNode;\n};\n\nexport function VariableCommandList({\n    search,\n    onSearchChange,\n    groups,\n    options,\n    selectedValue,\n    onSelect,\n    placeholder,\n    showSearch = true,\n    shouldFilter = false,\n    onBack,\n    isChildMode = false,\n    selectFirstItem = true,\n    autoFocusSearchInput = true,\n    afterSearchContent,\n}: VariableCommandListProps) {\n    const t = useTranslation();\n    const listRef = useRef<HTMLDivElement>(null);\n    const commandRef = useRef<HTMLDivElement>(null);\n    const savedScrollTopRef = useRef<number | null>(null);\n\n    const flatItems = groups ? groups.flatMap(g => {\n        return g.items;\n    }) : options;\n    const isControlled = selectedValue !== undefined && selectedValue !== null;\n    const currentValue = selectedValue ?? (selectFirstItem ? flatItems[0]?.value ?? '' : '');\n    // Dropdown: uncontrolled (no value/onValueChange) so cmdk handles scroll natively like shadcn static example\n    const commandProps = isControlled\n        ? { value: currentValue, onValueChange: () => { } }\n        : { defaultValue: currentValue || undefined };\n\n    const handleSelectItem = (item: VariableOption, baseVariable?: VariableOption) => {\n        if (Array.isArray(item.children) && item.children.length > 0) {\n            savedScrollTopRef.current = listRef.current?.scrollTop ?? 0;\n        }\n        onSelect(item, baseVariable);\n    };\n\n    const wasChildModeRef = React.useRef(isChildMode);\n    useLayoutEffect(() => {\n        const wasChild = wasChildModeRef.current;\n        wasChildModeRef.current = isChildMode;\n        if (wasChild && !isChildMode && savedScrollTopRef.current != null && listRef.current) {\n            listRef.current.scrollTop = savedScrollTopRef.current;\n            savedScrollTopRef.current = null;\n        }\n        if (!wasChild && isChildMode && showSearch && autoFocusSearchInput) {\n            const input = commandRef.current?.querySelector<HTMLInputElement>('[data-slot=\"command-input\"]');\n            input?.focus();\n        }\n    }, [autoFocusSearchInput, isChildMode, showSearch]);\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n        if (onBack && !search.trim() && e.key === 'Backspace') {\n            e.preventDefault();\n            e.stopPropagation();\n            onBack();\n        }\n    };\n\n    const content = (\n        <div ref={commandRef} className=\"contents\">\n            <Command\n                shouldFilter={shouldFilter}\n                className=\"border-0 shadow-none rounded-none\"\n                {...commandProps}\n            >\n                {showSearch && (\n                    <CommandInput\n                        value={search}\n                        onValueChange={onSearchChange}\n                        placeholder={placeholder ?? t('Search variables')}\n                        className=\"border-0\"\n                    />\n                )}\n\n                {afterSearchContent}\n\n                {onBack && (\n                    <Button\n                        variant=\"none\"\n                        className={cn([\n                            'w-full text-left text-[11px] flex flex-1 items-center justify-start',\n                            'hover:bg-slate-100 gap-1 border-b border-slate-150 px-2 py-1.5'\n                        ])}\n                        onClick={(e) => {\n                            e.preventDefault();\n                            onBack();\n                        }}\n                    >\n                        <FontAwesomeIcon icon={faChevronLeft} className=\"size-[8px] shrink-0\" />\n                        {t('Back')}\n                    </Button>\n                )}\n\n                <CommandList ref={listRef} className=\"max-h-[280px]\">\n                    <CommandEmpty>{t('No variables found.')}</CommandEmpty>\n\n                    {groups ? (\n                        groups.map((group, gi) => {\n                            return (\n                                <React.Fragment key={group.value ?? group.label ?? gi}>\n                                    {gi > 0 && <CommandSeparator />}\n                                    <CommandGroup heading={group.label}>\n                                        {group.items.map((item, ii) => {\n                                            const q = search.trim().toLowerCase();\n                                            const hasChildren = Array.isArray(item.children) && item.children.length > 0;\n                                            // In search mode, for nested items show only matching children (visual test behavior).\n                                            // Parents are still shown when not searching.\n                                            const showParent = !hasChildren || !q;\n                                            return (\n                                                <React.Fragment key={item.value ?? item.label ?? `${gi}-${ii}`}>\n                                                    {showParent && (\n                                                        <CommandItem\n                                                            value={item.value ?? item.label ?? `${gi}-${ii}`}\n                                                            onSelect={() => {\n                                                                return handleSelectItem(item);\n                                                            }}\n                                                            keywords={[item.label, item.value ?? '', group.label]}\n                                                        >\n                                                            <span className=\"truncate flex-1\">{item.label}</span>\n                                                            {hasChildren && (\n                                                                <FontAwesomeIcon\n                                                                    icon={faChevronRight}\n                                                                    className={cn('size-3 shrink-0 text-gray-400 ml-2')}\n                                                                    aria-hidden\n                                                                />\n                                                            )}\n                                                        </CommandItem>\n                                                    )}\n                                                    {hasChildren &&\n                                                        item.children!.map(child => {\n                                                            return (\n                                                                <VariableSubItem\n                                                                    key={child.value ?? child.label ?? `${gi}-${ii}-${child.label}`}\n                                                                    child={child}\n                                                                    parent={item}\n                                                                    groupLabel={group.label}\n                                                                    search={search}\n                                                                    handleSelectItem={handleSelectItem}\n                                                                />\n                                                            );\n                                                        })}\n                                                </React.Fragment>\n                                            );\n                                        })}\n                                    </CommandGroup>\n                                </React.Fragment>\n                            );\n                        })\n                    ) : (\n                        <CommandGroup heading={t('Selectors')}>\n                            {options.map((item, i) => {\n                                return (\n                                    <CommandItem\n                                        key={item.value ?? item.label ?? `opt-${i}`}\n                                        value={item.value ?? item.label ?? `opt-${i}`}\n                                        onSelect={() => {\n                                            return handleSelectItem(item);\n                                        }}\n                                    >\n                                        {item.label}\n                                    </CommandItem>\n                                );\n                            })}\n                        </CommandGroup>\n                    )}\n                </CommandList>\n            </Command>\n        </div>\n    );\n\n    return onBack ? (\n        <div onKeyDown={handleKeyDown} className=\"contents\">\n            {content}\n        </div>\n    ) : (\n        content\n    );\n}\n"],"mappings":"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"}

package/dist/components/tiptap/VariableDropdown.d.ts

@@ -0,0 +1,33 @@
+import { Editor } from '@tiptap/core';
+export type VariableOption = {
+    label: string;
+    value?: string;
+    children?: VariableOption[];
+    /** Optional display bucket for first-level grouping (e.g. page headings). */
+    pageLabel?: string;
+    /** For child items: selector | format | value. Used by variableSerialization. */
+    group?: string;
+    /** Supported transform value types for this variable (e.g. text, number, date, url). */
+    transformValueTypes?: string[];
+};
+export type VariableCategories = {
+    [key: string]: VariableOption[] | undefined;
+};
+export declare function formatVariableCategoryLabel(key: string, labels?: Record<string, string> | null): string;
+type VariableDropdownProps = {
+    editor: Editor | null | undefined;
+    variableCategories: VariableCategories;
+    variableCategoryLabels?: Record<string, string>;
+    variableCategoryOrder?: string[];
+    title?: string;
+    buttonLabel?: string;
+    buttonVariant?: 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent' | 'link' | 'none';
+    buttonSize?: 'default' | 'none' | 'xs' | 'sm' | 'lg' | 'xl';
+    buttonClassName?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    triggerMode?: 'toolbar' | 'input';
+};
+export declare function VariableDropdown({ editor, variableCategories, variableCategoryLabels, variableCategoryOrder, title, buttonLabel, buttonVariant, buttonSize, buttonClassName, open, onOpenChange, triggerMode, }: VariableDropdownProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=VariableDropdown.d.ts.map

package/dist/components/tiptap/VariableDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/tiptap/VariableDropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAa3C,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,SAAS,CAAC;CAC/C,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,GAAG,MAAM,CAEvG;AAED,KAAK,qBAAqB,GAAG;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7G,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CACrC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,EACL,WAAW,EACX,aAAa,EACb,UAAU,EACV,eAAe,EACf,IAAI,EACJ,YAAY,EACZ,WAAuB,GAC1B,EAAE,qBAAqB,kDA2HvB"}

package/dist/components/tiptap/VariableDropdown.js

@@ -0,0 +1,121 @@
+import { cn } from "../../utils/classes.js";
+import "../../utils/index.js";
+import { useTranslation } from "../../hooks/useTranslation.js";
+import "../../hooks/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip.js";
+import { buildVariableTagAttrs } from "./variableSerialization.js";
+import { VariableCommandList } from "./VariableCommandList.js";
+import { useVariablePicker } from "./useVariablePicker.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover.js";
+import "../index.js";
+import { Button } from "../Button.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEditorState } from "@tiptap/react";
+import { faPlusCircle } from "@fortawesome/pro-regular-svg-icons";
+//#region src/components/tiptap/VariableDropdown.tsx
+function formatVariableCategoryLabel(key, labels) {
+	return labels?.[key] ?? key;
+}
+function VariableDropdown({ editor, variableCategories, variableCategoryLabels, variableCategoryOrder, title, buttonLabel, buttonVariant, buttonSize, buttonClassName, open, onOpenChange, triggerMode = "toolbar" }) {
+	const t = useTranslation();
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	const isControlledOpen = typeof open === "boolean";
+	const isOpen = isControlledOpen ? open : uncontrolledOpen;
+	const picker = useVariablePicker({
+		variableCategories,
+		variableCategoryLabels,
+		variableCategoryOrder,
+		isOpen,
+		onApply: (baseVariable, variable) => {
+			const attrs = buildVariableTagAttrs(baseVariable, variable);
+			(editor?.chain())?.focus?.()?.setVariableTag?.(attrs)?.run?.();
+			if (!isControlledOpen) setUncontrolledOpen(false);
+			onOpenChange?.(false);
+			picker.reset();
+		}
+	});
+	const isVariableActive = useEditorState({
+		editor,
+		selector: ({ editor: ed }) => {
+			return (ed?.isFocused && ed?.isActive("variableTag")) ?? false;
+		}
+	});
+	const handleOpenChange = (nextOpen) => {
+		if (!nextOpen) picker.reset();
+		if (!isControlledOpen) setUncontrolledOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	};
+	if (!Object.values(variableCategories ?? {}).some((items) => {
+		return Array.isArray(items) && items.length > 0;
+	})) return null;
+	const triggerButton = /* @__PURE__ */ jsxs(Button, {
+		variant: buttonVariant ?? "none",
+		size: buttonSize,
+		className: cn(triggerMode === "toolbar" && [
+			buttonLabel ? "h-[32px] px-[8px] gap-1.5" : "w-[32px] h-[32px]",
+			"text-[#1c2e36]",
+			"hover:bg-slate-100!",
+			isVariableActive && "bg-slate-250! hover:bg-slate-250!"
+		], triggerMode === "input" && [
+			"absolute right-[1px] top-1/2 -translate-y-1/2",
+			"border-l border-transparent",
+			"rounded-[3px] rounded-l-none",
+			"h-[calc(100%-2px)]",
+			"text-[#8d959b]",
+			"bg-white hover:bg-slate-50",
+			"border-[#d7dfe7]",
+			"text-[#1c2e36]"
+		], buttonClassName ?? ""),
+		children: [/* @__PURE__ */ jsx(FontAwesomeIcon, {
+			icon: faPlusCircle,
+			className: "size-4"
+		}), buttonLabel && /* @__PURE__ */ jsx("span", { children: buttonLabel })]
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		modal: false,
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		children: [buttonLabel || title ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(PopoverTrigger, {
+			nativeButton: true,
+			render: triggerButton
+		}) }), /* @__PURE__ */ jsx(TooltipContent, {
+			sideOffset: 4,
+			children: buttonLabel || title
+		})] }) : /* @__PURE__ */ jsx(PopoverTrigger, {
+			nativeButton: true,
+			render: triggerButton
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: triggerMode === "input" ? "end" : "start",
+			side: "bottom",
+			sideOffset: 6,
+			positionMethod: "fixed",
+			collisionAvoidance: {
+				side: "flip",
+				align: "shift",
+				fallbackAxisSide: "none"
+			},
+			className: "min-w-[260px] max-w-[360px] p-0 overflow-hidden flex flex-col",
+			portalClassName: "z-250",
+			children: /* @__PURE__ */ jsx(VariableCommandList, {
+				search: picker.search,
+				onSearchChange: picker.setSearch,
+				groups: picker.groups,
+				options: picker.options,
+				onSelect: picker.handleSelect,
+				placeholder: t("Search variables"),
+				showSearch: true,
+				shouldFilter: false,
+				onBack: picker.page ? picker.handleBack : void 0,
+				isChildMode: !!picker.page,
+				selectFirstItem: triggerMode === "input",
+				autoFocusSearchInput: triggerMode !== "input"
+			})
+		})]
+	});
+}
+//#endregion
+export { VariableDropdown, formatVariableCategoryLabel };
+
+//# sourceMappingURL=VariableDropdown.js.map

package/dist/components/tiptap/VariableDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableDropdown.js","names":[],"sources":["../../../src/components/tiptap/VariableDropdown.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useEditorState } from '@tiptap/react';\nimport type { Editor } from '@tiptap/core';\nimport { Button } from '@verbb/plugin-kit-react/components/Button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@verbb/plugin-kit-react/components';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@verbb/plugin-kit-react/components/Tooltip';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPlusCircle } from '@fortawesome/pro-regular-svg-icons';\nimport { cn } from '@verbb/plugin-kit-react/utils';\nimport { useTranslation } from '@verbb/plugin-kit-react/hooks';\n\nimport { buildVariableTagAttrs } from './variableSerialization';\nimport { VariableCommandList } from './VariableCommandList';\nimport { useVariablePicker } from './useVariablePicker';\n\nexport type VariableOption = {\n    label: string;\n    value?: string;\n    children?: VariableOption[];\n    /** Optional display bucket for first-level grouping (e.g. page headings). */\n    pageLabel?: string;\n    /** For child items: selector | format | value. Used by variableSerialization. */\n    group?: string;\n    /** Supported transform value types for this variable (e.g. text, number, date, url). */\n    transformValueTypes?: string[];\n};\n\nexport type VariableCategories = {\n    [key: string]: VariableOption[] | undefined;\n};\n\nexport function formatVariableCategoryLabel(key: string, labels?: Record<string, string> | null): string {\n    return labels?.[key] ?? key;\n}\n\ntype VariableDropdownProps = {\n    editor: Editor | null | undefined;\n    variableCategories: VariableCategories;\n    variableCategoryLabels?: Record<string, string>;\n    variableCategoryOrder?: string[];\n    title?: string;\n    buttonLabel?: string;\n    buttonVariant?: 'default' | 'primary' | 'secondary' | 'dashed' | 'outline' | 'transparent' | 'link' | 'none';\n    buttonSize?: 'default' | 'none' | 'xs' | 'sm' | 'lg' | 'xl';\n    buttonClassName?: string;\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    triggerMode?: 'toolbar' | 'input';\n};\n\nexport function VariableDropdown({\n    editor,\n    variableCategories,\n    variableCategoryLabels,\n    variableCategoryOrder,\n    title,\n    buttonLabel,\n    buttonVariant,\n    buttonSize,\n    buttonClassName,\n    open,\n    onOpenChange,\n    triggerMode = 'toolbar',\n}: VariableDropdownProps) {\n    const t = useTranslation();\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n    const isControlledOpen = typeof open === 'boolean';\n    const isOpen = isControlledOpen ? open : uncontrolledOpen;\n\n    const picker = useVariablePicker({\n        variableCategories,\n        variableCategoryLabels,\n        variableCategoryOrder,\n        isOpen,\n        onApply: (baseVariable, variable) => {\n            const attrs = buildVariableTagAttrs(baseVariable, variable);\n            const chain = editor?.chain();\n            chain?.focus?.()?.setVariableTag?.(attrs)?.run?.();\n            if (!isControlledOpen) {\n                setUncontrolledOpen(false);\n            }\n            onOpenChange?.(false);\n            picker.reset();\n        },\n    });\n\n    const isVariableActive = useEditorState({\n        editor: editor as import('@tiptap/core').Editor | null,\n        selector: ({ editor: ed }) => {\n            return (ed?.isFocused && ed?.isActive('variableTag')) ?? false;\n        },\n    });\n\n    const handleOpenChange = (nextOpen: boolean) => {\n        if (!nextOpen) {\n            picker.reset();\n        }\n        if (!isControlledOpen) {\n            setUncontrolledOpen(nextOpen);\n        }\n        onOpenChange?.(nextOpen);\n    };\n\n    const hasAnyVariables = Object.values(variableCategories ?? {}).some(\n        items => {\n            return Array.isArray(items) && items.length > 0;\n        },\n    );\n\n    if (!hasAnyVariables) {\n        return null;\n    }\n\n    const triggerButton = (\n        <Button\n            variant={buttonVariant ?? 'none'}\n            size={buttonSize}\n            className={cn(\n                triggerMode === 'toolbar' && [\n                    buttonLabel ? 'h-[32px] px-[8px] gap-1.5' : 'w-[32px] h-[32px]',\n                    'text-[#1c2e36]',\n                    'hover:bg-slate-100!',\n                    isVariableActive && 'bg-slate-250! hover:bg-slate-250!',\n                ],\n                triggerMode === 'input' && [\n                    'absolute right-[1px] top-1/2 -translate-y-1/2',\n                    'border-l border-transparent',\n                    'rounded-[3px] rounded-l-none',\n                    'h-[calc(100%-2px)]',\n                    'text-[#8d959b]',\n                    'bg-white hover:bg-slate-50',\n                    'border-[#d7dfe7]',\n                    'text-[#1c2e36]',\n                ],\n\n                buttonClassName ?? '',\n            )}\n        >\n            <FontAwesomeIcon icon={faPlusCircle} className=\"size-4\" />\n            {buttonLabel && <span>{buttonLabel}</span>}\n        </Button>\n    );\n\n    const content = (\n        <Popover modal={false} open={isOpen} onOpenChange={handleOpenChange}>\n            {(buttonLabel || title) ? (\n                <Tooltip>\n                    <TooltipTrigger render={<PopoverTrigger nativeButton={true} render={triggerButton} />} />\n                    <TooltipContent sideOffset={4}>{buttonLabel || title}</TooltipContent>\n                </Tooltip>\n            ) : (\n                <PopoverTrigger nativeButton={true} render={triggerButton} />\n            )}\n            <PopoverContent\n                align={triggerMode === 'input' ? 'end' : 'start'}\n                side=\"bottom\"\n                sideOffset={6}\n                positionMethod=\"fixed\"\n                collisionAvoidance={{\n                    side: 'flip',\n                    align: 'shift',\n                    fallbackAxisSide: 'none',\n                }}\n                className=\"min-w-[260px] max-w-[360px] p-0 overflow-hidden flex flex-col\"\n                portalClassName=\"z-250\"\n            >\n                <VariableCommandList\n                    search={picker.search}\n                    onSearchChange={picker.setSearch}\n                    groups={picker.groups}\n                    options={picker.options}\n                    onSelect={picker.handleSelect}\n                    placeholder={t('Search variables')}\n                    showSearch\n                    shouldFilter={false}\n                    onBack={picker.page ? picker.handleBack : undefined}\n                    isChildMode={!!picker.page}\n                    selectFirstItem={triggerMode === 'input'}\n                    autoFocusSearchInput={triggerMode !== 'input'}\n                />\n            </PopoverContent>\n        </Popover>\n    );\n\n    return content;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,SAAgB,4BAA4B,KAAa,QAAgD;AACrG,QAAO,SAAS,QAAQ;;AAkB5B,SAAgB,iBAAiB,EAC7B,QACA,oBACA,wBACA,uBACA,OACA,aACA,eACA,YACA,iBACA,MACA,cACA,cAAc,aACQ;CACtB,MAAM,IAAI,gBAAgB;CAC1B,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAE/D,MAAM,mBAAmB,OAAO,SAAS;CACzC,MAAM,SAAS,mBAAmB,OAAO;CAEzC,MAAM,SAAS,kBAAkB;EAC7B;EACA;EACA;EACA;EACA,UAAU,cAAc,aAAa;GACjC,MAAM,QAAQ,sBAAsB,cAAc,SAAS;AAE3D,IADc,QAAQ,OAAO,GACtB,SAAS,EAAE,iBAAiB,MAAM,EAAE,OAAO;AAClD,OAAI,CAAC,iBACD,qBAAoB,MAAM;AAE9B,kBAAe,MAAM;AACrB,UAAO,OAAO;;EAErB,CAAC;CAEF,MAAM,mBAAmB,eAAe;EAC5B;EACR,WAAW,EAAE,QAAQ,SAAS;AAC1B,WAAQ,IAAI,aAAa,IAAI,SAAS,cAAc,KAAK;;EAEhE,CAAC;CAEF,MAAM,oBAAoB,aAAsB;AAC5C,MAAI,CAAC,SACD,QAAO,OAAO;AAElB,MAAI,CAAC,iBACD,qBAAoB,SAAS;AAEjC,iBAAe,SAAS;;AAS5B,KAAI,CANoB,OAAO,OAAO,sBAAsB,EAAE,CAAC,CAAC,MAC5D,UAAS;AACL,SAAO,MAAM,QAAQ,MAAM,IAAI,MAAM,SAAS;GAIjD,CACD,QAAO;CAGX,MAAM,gBACF,qBAAC,QAAD;EACI,SAAS,iBAAiB;EAC1B,MAAM;EACN,WAAW,GACP,gBAAgB,aAAa;GACzB,cAAc,8BAA8B;GAC5C;GACA;GACA,oBAAoB;GACvB,EACD,gBAAgB,WAAW;GACvB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACH,EAED,mBAAmB,GACtB;YAtBL,CAwBI,oBAAC,iBAAD;GAAiB,MAAM;GAAc,WAAU;GAAW,CAAA,EACzD,eAAe,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA,CACrC;;AA4Cb,QAxCI,qBAAC,SAAD;EAAS,OAAO;EAAO,MAAM;EAAQ,cAAc;YAAnD,CACM,eAAe,QACb,qBAAC,SAAD,EAAA,UAAA,CACI,oBAAC,gBAAD,EAAgB,QAAQ,oBAAC,gBAAD;GAAgB,cAAc;GAAM,QAAQ;GAAiB,CAAA,EAAI,CAAA,EACzF,oBAAC,gBAAD;GAAgB,YAAY;aAAI,eAAe;GAAuB,CAAA,CAChE,EAAA,CAAA,GAEV,oBAAC,gBAAD;GAAgB,cAAc;GAAM,QAAQ;GAAiB,CAAA,EAEjE,oBAAC,gBAAD;GACI,OAAO,gBAAgB,UAAU,QAAQ;GACzC,MAAK;GACL,YAAY;GACZ,gBAAe;GACf,oBAAoB;IAChB,MAAM;IACN,OAAO;IACP,kBAAkB;IACrB;GACD,WAAU;GACV,iBAAgB;aAEhB,oBAAC,qBAAD;IACI,QAAQ,OAAO;IACf,gBAAgB,OAAO;IACvB,QAAQ,OAAO;IACf,SAAS,OAAO;IAChB,UAAU,OAAO;IACjB,aAAa,EAAE,mBAAmB;IAClC,YAAA;IACA,cAAc;IACd,QAAQ,OAAO,OAAO,OAAO,aAAa,KAAA;IAC1C,aAAa,CAAC,CAAC,OAAO;IACtB,iBAAiB,gBAAgB;IACjC,sBAAsB,gBAAgB;IACxC,CAAA;GACW,CAAA,CACX;GAGP"}