@kunpeng-js/properties-panel 0.0.0-stage → 2026.0.0-alpha2

package/dist/index.esm.js

@@ -0,0 +1,3958 @@
+import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "../preact/hooks";
+import { assign, debounce, get, isArray, isFunction, isNumber, isObject, isString, set } from "min-dash";
+import { createPortal, forwardRef } from "../preact/compat";
+import { Fragment, jsx, jsxs } from "../preact/jsx-runtime";
+import { createContext, createElement, render } from "../preact";
+import classnames from "classnames";
+import { domify, query } from "min-dom";
+import { EditorView, drawSelection, highlightSpecialChars, keymap, lineNumbers, placeholder } from "@codemirror/view";
+import { Annotation, EditorState } from "@codemirror/state";
+import { bracketMatching, defaultHighlightStyle, foldGutter, foldKeymap, syntaxHighlighting } from "@codemirror/language";
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { json, jsonParseLinter } from "@codemirror/lang-json";
+import { linter } from "@codemirror/lint";
+import Editor, { ExpressionEditor } from "@kunpeng-js/expression-editor";
+import * as focusTrap from "focus-trap";
+//#region src/components/icons/index.js
+var ArrowIcon = function ArrowIcon(props) {
+	return jsx("svg", {
+		...props,
+		children: jsx("path", {
+			fillRule: "evenodd",
+			d: "m11.657 8-4.95 4.95a1 1 0 0 1-1.414-1.414L8.828 8 5.293 4.464A1 1 0 1 1 6.707 3.05L11.657 8Z"
+		})
+	});
+};
+ArrowIcon.defaultProps = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "16",
+	height: "16"
+};
+var CloseIcon = function CloseIcon(props) {
+	return jsx("svg", {
+		...props,
+		children: jsx("path", {
+			fillRule: "evenodd",
+			d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+			fill: "currentColor"
+		})
+	});
+};
+CloseIcon.defaultProps = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "16",
+	height: "16"
+};
+var CreateIcon = function CreateIcon(props) {
+	return jsx("svg", {
+		...props,
+		children: jsx("path", {
+			fillRule: "evenodd",
+			d: "M9 13V9h4a1 1 0 0 0 0-2H9V3a1 1 0 1 0-2 0v4H3a1 1 0 1 0 0 2h4v4a1 1 0 0 0 2 0Z"
+		})
+	});
+};
+CreateIcon.defaultProps = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "16",
+	height: "16"
+};
+var DeleteIcon = function DeleteIcon(props) {
+	return jsx("svg", {
+		...props,
+		children: jsx("path", {
+			fillRule: "evenodd",
+			d: "M12 6v7c0 1.1-.4 1.55-1.5 1.55h-5C4.4 14.55 4 14.1 4 13V6h8Zm-1.5 1.5h-5v4.3c0 .66.5 1.2 1.111 1.2H9.39c.611 0 1.111-.54 1.111-1.2V7.5ZM13 3h-2l-1-1H6L5 3H3v1.5h10V3Z"
+		})
+	});
+};
+DeleteIcon.defaultProps = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "16",
+	height: "16"
+};
+var DragIcon = function DragIcon(props) {
+	return jsx("svg", {
+		...props,
+		children: jsx("path", {
+			d: "M7 3H5v2h2V3zm4 0H9v2h2V3zM7 7H5v2h2V7zm4 0H9v2h2V7zm-4 4H5v2h2v-2zm4 0H9v2h2v-2z",
+			fill: "currentColor"
+		})
+	});
+};
+DragIcon.defaultProps = {
+	width: "16",
+	height: "16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg"
+};
+var ExternalLinkIcon = function ExternalLinkIcon(props) {
+	return jsx("svg", {
+		...props,
+		children: jsx("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M12.637 12.637v-4.72h1.362v4.721c0 .36-.137.676-.411.95-.275.275-.591.412-.95.412H3.362c-.38 0-.703-.132-.967-.396A1.315 1.315 0 0 1 2 12.638V3.362c0-.38.132-.703.396-.967S2.982 2 3.363 2h4.553v1.363H3.363v9.274h9.274ZM14 2H9.28l-.001 1.362h2.408L5.065 9.984l.95.95 6.622-6.622v2.409H14V2Z",
+			fill: "currentcolor"
+		})
+	});
+};
+ExternalLinkIcon.defaultProps = {
+	width: "16",
+	height: "16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg"
+};
+var FeelIcon = function FeelIcon(props) {
+	return jsx("svg", {
+		...props,
+		children: jsx("path", {
+			d: "M3.617 11.99c-.137.684-.392 1.19-.765 1.518-.362.328-.882.492-1.558.492H0l.309-1.579h1.264l1.515-7.64h-.912l.309-1.579h.911l.236-1.191c.137-.685.387-1.192.75-1.52C4.753.164 5.277 0 5.953 0h1.294L6.94 1.579H5.675l-.323 1.623h1.264l-.309 1.579H5.043l-1.426 7.208ZM5.605 11.021l3.029-4.155L7.28 3.202h2.073l.706 2.547h.176l1.691-2.547H14l-3.014 4.051 1.338 3.768H10.25l-.706-2.606H9.37L7.678 11.02H5.605Z",
+			fill: "currentcolor"
+		})
+	});
+};
+FeelIcon.defaultProps = {
+	width: "14",
+	height: "14",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg"
+};
+var LaunchIcon = function LaunchIcon(props) {
+	return jsxs("svg", {
+		...props,
+		children: [jsx("path", { d: "M26 28H6a2.003 2.003 0 0 1-2-2V6a2.003 2.003 0 0 1 2-2h10v2H6v20h20V16h2v10a2.003 2.003 0 0 1-2 2Z" }), jsx("path", { d: "M20 2v2h6.586L18 12.586 19.414 14 28 5.414V12h2V2H20z" })]
+	});
+};
+LaunchIcon.defaultProps = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 32 32"
+};
+var OpenPopupIcon = function OpenPopupIcon(props) {
+	return jsx("svg", {
+		...props,
+		children: jsx("path", { d: "M6 15v-1H2.7L7 9.7 6.3 9 2 13.3V10H1v5zM10 1v1h3.3L9 6.3l.7.7L14 2.7V6h1V1z" })
+	});
+};
+OpenPopupIcon.defaultProps = {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 16 16"
+};
+//#endregion
+//#region src/components/Header.js
+/**
+* @typedef { {
+*  getElementLabel: (element: object) => string,
+*  getTypeLabel: (element: object) => string,
+*  getElementIcon: (element: object) => import('preact').Component,
+*  getDocumentationRef: (element: object) => string
+* } } HeaderProvider
+*/
+/**
+* @param {Object} props
+* @param {Object} props.element,
+* @param {HeaderProvider} props.headerProvider
+*/
+function Header(props) {
+	const { element, headerProvider } = props;
+	const { getElementIcon, getDocumentationRef, getElementLabel, getTypeLabel } = headerProvider;
+	const label = getElementLabel(element);
+	const type = getTypeLabel(element);
+	const documentationRef = getDocumentationRef && getDocumentationRef(element);
+	const ElementIcon = getElementIcon(element);
+	return jsxs("div", {
+		class: "bio-properties-panel-header",
+		children: [
+			jsx("div", {
+				class: "bio-properties-panel-header-icon",
+				children: ElementIcon && jsx(ElementIcon, {
+					width: "32",
+					height: "32",
+					viewBox: "0 0 32 32"
+				})
+			}),
+			jsxs("div", {
+				class: "bio-properties-panel-header-labels",
+				children: [jsx("div", {
+					class: "bio-properties-panel-header-type",
+					children: type
+				}), label ? jsx("div", {
+					class: "bio-properties-panel-header-label",
+					children: label
+				}) : null]
+			}),
+			jsx("div", {
+				class: "bio-properties-panel-header-actions",
+				children: documentationRef ? jsx("a", {
+					rel: "noreferrer",
+					class: "bio-properties-panel-header-link",
+					href: documentationRef,
+					title: "Open documentation",
+					target: "_blank",
+					children: jsx(ExternalLinkIcon, {})
+				}) : null
+			})
+		]
+	});
+}
+//#endregion
+//#region src/context/DescriptionContext.js
+var DescriptionContext = createContext({
+	description: {},
+	getDescriptionForId: () => {}
+});
+//#endregion
+//#region src/context/ErrorsContext.js
+var ErrorsContext = createContext({ errors: {} });
+//#endregion
+//#region src/context/EventContext.js
+/**
+* @typedef {Function} <propertiesPanel.showEntry> callback
+*
+* @example
+*
+* useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+*   // ...
+* });
+*
+* @param {Object} context
+* @param {boolean} [context.focus]
+*
+* @returns void
+*/
+/**
+* @typedef {Function} <propertiesPanel.showError> callback
+*
+* @example
+*
+* useEvent('propertiesPanel.showError', ({ focus = false, message, ...rest }) => {
+*   // ...
+* });
+*
+* @param {Object} context
+* @param {string} context.message
+* @param {boolean} [context.focus]
+*
+* @returns void
+*/
+var EventContext = createContext({ eventBus: null });
+//#endregion
+//#region src/context/FeelLanguageContext.js
+/**
+* @typedef { {
+*   parserDialect?: import('@kunpeng-js/expression-editor').ParserDialect,
+*   builtins?: import('@kunpeng-js/expression-editor').Variable[],
+*   dialect?: import('@kunpeng-js/expression-editor').Dialect
+* } } FeelLanguageContextType
+*/
+/**
+* @type {import('preact').Context<FeelLanguageContextType>}
+*/
+var FeelLanguageContext = createContext({});
+//#endregion
+//#region src/context/LayoutContext.js
+var LayoutContext = createContext({
+	layout: {},
+	setLayout: () => {},
+	getLayoutForKey: () => {},
+	setLayoutForKey: () => {}
+});
+//#endregion
+//#region src/context/TooltipContext.js
+var TooltipContext = createContext({
+	tooltip: {},
+	getTooltipForId: () => {}
+});
+//#endregion
+//#region src/hooks/useTooltipContext.js
+/**
+* Accesses the global TooltipContext and returns a tooltip for a given id and element.
+*
+* @example
+* ```jsx
+* function TextField(props) {
+*   const tooltip = useTooltipContext('input1', element);
+* }
+* ```
+*
+* @param {string} id
+* @param {object} element
+*
+* @returns {string}
+*/
+function useTooltipContext(id, element) {
+	const { getTooltipForId } = useContext(TooltipContext);
+	return getTooltipForId(id, element);
+}
+//#endregion
+//#region src/components/entries/Tooltip.js
+/**
+* @typedef {Object} TooltipProps
+* @property {Object} [parent] - Parent element ref for portal rendering
+* @property {String} [direction='right'] - Tooltip direction ( 'right', 'top')
+* @property {String} [position] - Custom CSS position override
+* @property {Number} [showDelay=250] - Delay in ms before showing tooltip on hover
+* @property {Number} [hideDelay=250] - Delay in ms before hiding tooltip when mouse leaves, to avoid multiple tooltips from being opened, this should be the same as showDelay
+* @property {*} [children] - Child elements to render inside the tooltip wrapper
+*/
+/**
+* Tooltip wrapper that provides context-based tooltip content lookup.
+* All props are forwarded to the underlying Tooltip component.
+*
+* @param {TooltipProps & {
+*   forId: String,
+*   value?: String|Object,
+*   element?: Object
+* }} props - Shared tooltip props plus wrapper-specific ones
+*/
+function TooltipWrapper(props) {
+	const { forId, element } = props;
+	const contextDescription = useTooltipContext(forId, element);
+	const value = props.value || contextDescription;
+	if (!value) return props.children;
+	return jsx(Tooltip, {
+		...props,
+		value,
+		forId: `bio-properties-panel-${forId}`
+	});
+}
+/**
+* @param {TooltipProps & {
+*   forId: String,
+*   value: String|Object
+* }} props
+*/
+function Tooltip(props) {
+	const { forId, value, parent, direction = "right", position, showDelay = 250, hideDelay = 250 } = props;
+	const [visible, setVisible] = useState(false);
+	const showTimeoutRef = useRef(null);
+	const hideTimeoutRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const tooltipRef = useRef(null);
+	const show = (_, delay) => {
+		clearTimeout(showTimeoutRef.current);
+		clearTimeout(hideTimeoutRef.current);
+		if (visible) return;
+		if (delay) showTimeoutRef.current = setTimeout(() => {
+			setVisible(true);
+		}, showDelay);
+		else setVisible(true);
+	};
+	const handleWrapperMouseEnter = (e) => {
+		show(e, true);
+	};
+	const hide = (delay = false) => {
+		clearTimeout(showTimeoutRef.current);
+		clearTimeout(hideTimeoutRef.current);
+		if (delay) hideTimeoutRef.current = setTimeout(() => {
+			setVisible(false);
+		}, hideDelay);
+		else setVisible(false);
+	};
+	useEffect(() => {
+		return () => {
+			clearTimeout(showTimeoutRef.current);
+			clearTimeout(hideTimeoutRef.current);
+		};
+	}, []);
+	useEffect(() => {
+		if (!visible) return;
+		const handleClickOutside = (e) => {
+			if (wrapperRef.current && !wrapperRef.current.contains(e.target) && tooltipRef.current && !tooltipRef.current.contains(e.target)) hide(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [visible, hide]);
+	const handleMouseLeave = ({ relatedTarget }) => {
+		if (relatedTarget === wrapperRef.current || relatedTarget === tooltipRef.current || relatedTarget?.parentElement === tooltipRef.current) return;
+		const selection = window.getSelection();
+		if (selection && selection.toString().length > 0) {
+			const selectionRange = selection.getRangeAt(0);
+			if (tooltipRef.current?.contains(selectionRange.commonAncestorContainer) || tooltipRef.current?.contains(selection.anchorNode) || tooltipRef.current?.contains(selection.focusNode)) return;
+		}
+		hide(true);
+	};
+	const handleTooltipMouseEnter = () => {
+		clearTimeout(hideTimeoutRef.current);
+	};
+	const handleFocusOut = (e) => {
+		const { relatedTarget } = e;
+		if (tooltipRef.current?.contains(relatedTarget) || wrapperRef.current?.contains(relatedTarget)) return;
+		hide(false);
+	};
+	const hideTooltipViaEscape = (e) => {
+		e.code === "Escape" && hide(false);
+	};
+	const renderTooltip = () => {
+		return jsxs("div", {
+			class: `bio-properties-panel-tooltip ${direction}`,
+			role: "tooltip",
+			id: "bio-properties-panel-tooltip",
+			"aria-labelledby": forId,
+			style: position || getTooltipPosition(wrapperRef.current),
+			ref: tooltipRef,
+			onClick: (e) => e.stopPropagation(),
+			onMouseEnter: handleTooltipMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			children: [jsx("div", {
+				class: "bio-properties-panel-tooltip-content",
+				children: value
+			}), jsx("div", { class: "bio-properties-panel-tooltip-arrow" })]
+		});
+	};
+	return jsxs("div", {
+		class: "bio-properties-panel-tooltip-wrapper",
+		tabIndex: "0",
+		ref: wrapperRef,
+		onMouseEnter: handleWrapperMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		onFocus: show,
+		onBlur: handleFocusOut,
+		onKeyDown: hideTooltipViaEscape,
+		children: [props.children, visible ? parent ? createPortal(renderTooltip(), parent.current) : renderTooltip() : null]
+	});
+}
+function getTooltipPosition(refElement) {
+	const refPosition = refElement.getBoundingClientRect();
+	return `right: ${`calc(100% - ${refPosition.x}px)`}; top: ${`${refPosition.top - 10}px`};`;
+}
+//#endregion
+//#region src/hooks/useDescriptionContext.js
+/**
+* Accesses the global DescriptionContext and returns a description for a given id and element.
+*
+* @example
+* ```jsx
+* function TextField(props) {
+*   const description = useDescriptionContext('input1', element);
+* }
+* ```
+*
+* @param {string} id
+* @param {object} element
+*
+* @returns {string}
+*/
+function useDescriptionContext(id, element) {
+	const { getDescriptionForId } = useContext(DescriptionContext);
+	return getDescriptionForId(id, element);
+}
+//#endregion
+//#region src/hooks/useDebounce.js
+function useDebounce(callback, debounceFn) {
+	const debouncedCallback = useCallback(debounceFn(callback), [callback, debounceFn]);
+	useEffect(() => {
+		return () => {
+			debouncedCallback.cancel?.();
+		};
+	}, [debouncedCallback]);
+	return debouncedCallback;
+}
+//#endregion
+//#region src/hooks/useError.js
+function useError(id) {
+	const { errors } = useContext(ErrorsContext);
+	return errors[id];
+}
+function useErrors() {
+	const { errors } = useContext(ErrorsContext);
+	return errors;
+}
+//#endregion
+//#region src/hooks/useEvent.js
+/**
+* Subscribe to an event immediately. Update subscription after inputs changed.
+*
+* @param {string} event
+* @param {Function} callback
+*/
+function useEvent(event, callback, eventBus) {
+	const eventContext = useContext(EventContext);
+	if (!eventBus) ({eventBus} = eventContext);
+	const didMount = useRef(false);
+	if (eventBus && !didMount.current) eventBus.on(event, callback);
+	useEffect(() => {
+		if (eventBus && didMount.current) eventBus.on(event, callback);
+		didMount.current = true;
+		return () => {
+			if (eventBus) eventBus.off(event, callback);
+		};
+	}, [
+		callback,
+		event,
+		eventBus
+	]);
+}
+//#endregion
+//#region src/hooks/useKeyFactory.js
+/**
+* Create a persistent key factory for plain objects without id.
+*
+* @example
+* ```jsx
+* function List({ objects }) {
+*   const getKey = useKeyFactory();
+*   return (<ol>{
+*     objects.map(obj => {
+*       const key = getKey(obj);
+*       return <li key={key}>obj.name</li>
+*     })
+*   }</ol>);
+* }
+* ```
+*
+* @param {any[]} dependencies
+* @returns {(element: object) => string}
+*/
+function useKeyFactory(dependencies = []) {
+	const map = useMemo(() => /* @__PURE__ */ new Map(), dependencies);
+	const getKey = (el) => {
+		let key = map.get(el);
+		if (!key) {
+			key = Math.random().toString().slice(-6);
+			map.set(el, key);
+		}
+		return key;
+	};
+	return getKey;
+}
+//#endregion
+//#region src/hooks/useLayoutState.js
+/**
+* Creates a state that persists in the global LayoutContext.
+*
+* @example
+* ```jsx
+* function Group(props) {
+*   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+* }
+* ```
+*
+* @param {(string|number)[]} path
+* @param {any} [defaultValue]
+*
+* @returns {[ any, Function ]}
+*/
+function useLayoutState(path, defaultValue) {
+	const { getLayoutForKey, setLayoutForKey } = useContext(LayoutContext);
+	return [getLayoutForKey(path, defaultValue), useCallback((newValue) => {
+		setLayoutForKey(path, newValue);
+	}, [setLayoutForKey])];
+}
+//#endregion
+//#region src/hooks/usePrevious.js
+/**
+* @pinussilvestrus: we need to introduce our own hook to persist the previous
+* state on updates.
+*
+* cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+*/
+function usePrevious(value) {
+	const ref = useRef();
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+}
+//#endregion
+//#region src/hooks/useShowEntryEvent.js
+/**
+* Subscribe to `propertiesPanel.showEntry`.
+*
+* @param {string} id
+*
+* @returns {import('preact').Ref}
+*/
+function useShowEntryEvent(id) {
+	const { onShow } = useContext(LayoutContext);
+	const ref = useRef();
+	const focus = useRef(false);
+	const onShowEntry = useCallback((event) => {
+		if (event.id === id) {
+			onShow();
+			if (!focus.current) focus.current = true;
+		}
+	}, [id]);
+	useEffect(() => {
+		if (focus.current && ref.current) {
+			if (isFunction(ref.current.focus)) ref.current.focus();
+			if (isFunction(ref.current.select)) ref.current.select();
+			focus.current = false;
+		}
+	});
+	useEvent("propertiesPanel.showEntry", onShowEntry);
+	return ref;
+}
+//#endregion
+//#region src/hooks/useStickyIntersectionObserver.js
+/**
+* @callback setSticky
+* @param {boolean} value
+*/
+/**
+* Use IntersectionObserver to identify when DOM element is in sticky mode.
+* If sticky is observered setSticky(true) will be called.
+* If sticky mode is left, setSticky(false) will be called.
+*
+*
+* @param {Object} ref
+* @param {string} scrollContainerSelector
+* @param {setSticky} setSticky
+*/
+function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
+	const [scrollContainer, setScrollContainer] = useState(query(scrollContainerSelector));
+	const updateScrollContainer = useCallback(() => {
+		const newScrollContainer = query(scrollContainerSelector);
+		if (newScrollContainer !== scrollContainer) setScrollContainer(newScrollContainer);
+	}, [scrollContainerSelector, scrollContainer]);
+	useEffect(() => {
+		updateScrollContainer();
+	}, [updateScrollContainer]);
+	useEvent("propertiesPanel.attach", updateScrollContainer);
+	useEvent("propertiesPanel.detach", updateScrollContainer);
+	useEffect(() => {
+		const Observer = IntersectionObserver;
+		if (!Observer) return;
+		if (!ref.current || !scrollContainer) return;
+		const observer = new Observer((entries) => {
+			if (scrollContainer.scrollHeight === 0) return;
+			entries.forEach((entry) => {
+				if (entry.intersectionRatio < 1) setSticky(true);
+				else if (entry.intersectionRatio === 1) setSticky(false);
+			});
+		}, {
+			root: scrollContainer,
+			rootMargin: "0px 0px 999999% 0px",
+			threshold: [1]
+		});
+		observer.observe(ref.current);
+		return () => {
+			observer.unobserve(ref.current);
+		};
+	}, [
+		ref.current,
+		scrollContainer,
+		setSticky
+	]);
+}
+//#endregion
+//#region src/hooks/useStaticCallback.js
+/**
+* Creates a static function reference with changing body.
+* This is necessary when external libraries require a callback function
+* that has references to state variables.
+*
+* Usage:
+* const callback = useStaticCallback((val) => {val === currentState});
+*
+* The `callback` reference is static and can be safely used in external
+* libraries or as a prop that does not cause rerendering of children.
+*
+* @param {Function} callback function with changing reference
+* @returns {Function} static function reference
+*/
+function useStaticCallback(callback) {
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	return useCallback((...args) => callbackRef.current(...args), []);
+}
+//#endregion
+//#region src/hooks/useElementVisible.js
+function useElementVisible(element) {
+	const [visible, setVisible] = useState(!!element && !!element.clientHeight);
+	useLayoutEffect(() => {
+		if (!element) return;
+		const resizeObserver = new ResizeObserver(([entry]) => {
+			requestAnimationFrame(() => {
+				const newVisible = !!entry.contentRect.height;
+				if (newVisible !== visible) setVisible(newVisible);
+			});
+		});
+		resizeObserver.observe(element);
+		return () => resizeObserver.disconnect();
+	}, [element, visible]);
+	return visible;
+}
+//#endregion
+//#region src/components/Group.js
+/**
+* @param {import('../PropertiesPanel').GroupDefinition} props
+*/
+function Group(props) {
+	const { element, entries = [], id, label, shouldOpen = false } = props;
+	const groupRef = useRef(null);
+	const [open, setOpen] = useLayoutState([
+		"groups",
+		id,
+		"open"
+	], shouldOpen);
+	const onShow = useCallback(() => setOpen(true), [setOpen]);
+	const toggleOpen = () => setOpen(!open);
+	const [edited, setEdited] = useState(false);
+	const [sticky, setSticky] = useState(false);
+	useEffect(() => {
+		const scheduled = requestAnimationFrame(() => {
+			const hasOneEditedEntry = entries.find((entry) => {
+				const { id, isEdited } = entry;
+				const entryNode = query(`[data-entry-id="${id}"]`);
+				if (!isFunction(isEdited) || !entryNode) return false;
+				return isEdited(query(".bio-properties-panel-input", entryNode));
+			});
+			setEdited(hasOneEditedEntry);
+		});
+		return () => cancelAnimationFrame(scheduled);
+	}, [entries, setEdited]);
+	const allErrors = useErrors();
+	const hasErrors = entries.some((entry) => allErrors[entry.id]);
+	useStickyIntersectionObserver(groupRef, "div.bio-properties-panel-scroll-container", setSticky);
+	const propertiesPanelContext = {
+		...useContext(LayoutContext),
+		onShow
+	};
+	return jsxs("div", {
+		class: "bio-properties-panel-group",
+		"data-group-id": "group-" + id,
+		ref: groupRef,
+		children: [jsxs("div", {
+			class: classnames("bio-properties-panel-group-header", edited ? "" : "empty", open ? "open" : "", sticky && open ? "sticky" : ""),
+			onClick: toggleOpen,
+			children: [jsx("div", {
+				class: "bio-properties-panel-group-header-title",
+				children: jsx(TooltipWrapper, {
+					value: props.tooltip,
+					forId: "group-" + id,
+					element,
+					parent: groupRef,
+					children: label
+				})
+			}), jsxs("div", {
+				class: "bio-properties-panel-group-header-buttons",
+				children: [jsx(DataMarker, {
+					edited,
+					hasErrors
+				}), jsx("button", {
+					type: "button",
+					title: "Toggle section",
+					class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
+					children: jsx(ArrowIcon, { class: open ? "bio-properties-panel-arrow-down" : "bio-properties-panel-arrow-right" })
+				})]
+			})]
+		}), jsx("div", {
+			class: classnames("bio-properties-panel-group-entries", open ? "open" : ""),
+			children: jsx(LayoutContext.Provider, {
+				value: propertiesPanelContext,
+				children: entries.map((entry) => {
+					const { component: Component, id } = entry;
+					return createElement(Component, {
+						...entry,
+						element,
+						key: id
+					});
+				})
+			})
+		})]
+	});
+}
+function DataMarker(props) {
+	const { edited, hasErrors } = props;
+	if (hasErrors) return jsx("div", {
+		title: "Section contains an error",
+		class: "bio-properties-panel-dot bio-properties-panel-dot--error"
+	});
+	if (edited) return jsx("div", {
+		title: "Section contains edits",
+		class: "bio-properties-panel-dot"
+	});
+	return null;
+}
+//#endregion
+//#region src/components/Placeholder.js
+/**
+* @typedef { {
+*  text: (element: object) => string,
+*  icon?: (element: Object) => import('preact').Component
+* } } PlaceholderDefinition
+*
+* @param { PlaceholderDefinition } props
+*/
+function Placeholder(props) {
+	const { text, icon: Icon } = props;
+	return jsx("div", {
+		class: "bio-properties-panel open",
+		children: jsxs("section", {
+			class: "bio-properties-panel-placeholder",
+			children: [Icon && jsx(Icon, { class: "bio-properties-panel-placeholder-icon" }), jsx("p", {
+				class: "bio-properties-panel-placeholder-text",
+				children: text
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/PropertiesPanel.js
+var DEFAULT_LAYOUT = {};
+var DEFAULT_DESCRIPTION = {};
+var DEFAULT_TOOLTIP = {};
+/**
+* @typedef { {
+*    component: import('preact').Component,
+*    id: String,
+*    isEdited?: Function
+* } } EntryDefinition
+*
+* @typedef { {
+*    autoFocusEntry: String,
+*    autoOpen?: Boolean,
+*    entries: Array<EntryDefinition>,
+*    id: String,
+*    label: String,
+*    remove: (event: MouseEvent) => void
+* } } ListItemDefinition
+*
+* @typedef { {
+*    add: (event: MouseEvent) => void,
+*    component: import('preact').Component,
+*    element: Object,
+*    id: String,
+*    items: Array<ListItemDefinition>,
+*    label: String,
+*    shouldOpen?: Boolean
+* } } ListGroupDefinition
+*
+* @typedef { {
+*    component?: import('preact').Component,
+*    entries: Array<EntryDefinition>,
+*    id: String,
+*    label: String,
+*    shouldOpen?: Boolean
+* } } GroupDefinition
+*
+*  @typedef { {
+*    [id: String]: GetDescriptionFunction
+* } } DescriptionConfig
+*
+*  @typedef { {
+*    [id: String]: GetTooltipFunction
+* } } TooltipConfig
+*
+* @callback { {
+* @param {string} id
+* @param {Object} element
+* @returns {string}
+* } } GetDescriptionFunction
+*
+* @callback { {
+* @param {string} id
+* @param {Object} element
+* @returns {string}
+* } } GetTooltipFunction
+*
+* @typedef { {
+*  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+*  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+* } } PlaceholderProvider
+*
+*/
+/**
+* A basic properties panel component. Describes *how* content will be rendered, accepts
+* data from implementor to describe *what* will be rendered.
+*
+* @param {Object} props
+* @param {Object|Array} props.element
+* @param {import('./components/Header').HeaderProvider} props.headerProvider
+* @param {PlaceholderProvider} [props.placeholderProvider]
+* @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+* @param {Object} [props.layoutConfig]
+* @param {Function} [props.layoutChanged]
+* @param {DescriptionConfig} [props.descriptionConfig]
+* @param {Function} [props.descriptionLoaded]
+* @param {TooltipConfig} [props.tooltipConfig]
+* @param {Function} [props.tooltipLoaded]
+* @param {HTMLElement} [props.feelPopupContainer]
+* @param {Function} [props.getFeelPopupLinks]
+* @param {Object} [props.eventBus]
+*/
+function PropertiesPanel(props) {
+	const { element, headerProvider, placeholderProvider, groups, layoutConfig, layoutChanged, descriptionConfig, descriptionLoaded, tooltipConfig, tooltipLoaded, eventBus } = props;
+	const [layout, setLayout] = useState(createLayout(layoutConfig));
+	useUpdateLayoutEffect(() => {
+		const newLayout = createLayout(layoutConfig);
+		setLayout(newLayout);
+	}, [layoutConfig]);
+	useEffect(() => {
+		if (typeof layoutChanged === "function") layoutChanged(layout);
+	}, [layout, layoutChanged]);
+	const getLayoutForKey = (key, defaultValue) => {
+		return get(layout, key, defaultValue);
+	};
+	const setLayoutForKey = (key, config) => {
+		const newLayout = assign({}, layout);
+		set(newLayout, key, config);
+		setLayout(newLayout);
+	};
+	const layoutContext = {
+		layout,
+		setLayout,
+		getLayoutForKey,
+		setLayoutForKey
+	};
+	const description = useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
+	useEffect(() => {
+		if (typeof descriptionLoaded === "function") descriptionLoaded(description);
+	}, [description, descriptionLoaded]);
+	const getDescriptionForId = (id, element) => {
+		return description[id] && description[id](element);
+	};
+	const descriptionContext = {
+		description,
+		getDescriptionForId
+	};
+	const tooltip = useMemo(() => createTooltipContext(tooltipConfig), [tooltipConfig]);
+	useEffect(() => {
+		if (typeof tooltipLoaded === "function") tooltipLoaded(tooltip);
+	}, [tooltip, tooltipLoaded]);
+	const getTooltipForId = (id, element) => {
+		return tooltip[id] && tooltip[id](element);
+	};
+	const tooltipContext = {
+		tooltip,
+		getTooltipForId
+	};
+	const [errors, setErrors] = useState({});
+	const onSetErrors = ({ errors }) => setErrors(errors);
+	useEvent("propertiesPanel.setErrors", onSetErrors, eventBus);
+	const errorsContext = { errors };
+	const eventContext = { eventBus };
+	const propertiesPanelContext = { element };
+	if (placeholderProvider && !element) return jsx(Placeholder, { ...placeholderProvider.getEmpty() });
+	if (placeholderProvider && isArray(element)) return jsx(Placeholder, { ...placeholderProvider.getMultiple() });
+	return jsx(LayoutContext.Provider, {
+		value: propertiesPanelContext,
+		children: jsx(ErrorsContext.Provider, {
+			value: errorsContext,
+			children: jsx(DescriptionContext.Provider, {
+				value: descriptionContext,
+				children: jsx(TooltipContext.Provider, {
+					value: tooltipContext,
+					children: jsx(LayoutContext.Provider, {
+						value: layoutContext,
+						children: jsx(EventContext.Provider, {
+							value: eventContext,
+							children: jsxs("div", {
+								class: "bio-properties-panel",
+								children: [jsx(Header, {
+									element,
+									headerProvider
+								}), jsx("div", {
+									class: "bio-properties-panel-scroll-container",
+									children: groups.map((group) => {
+										const { component: Component = Group, id } = group;
+										return createElement(Component, {
+											...group,
+											key: id,
+											element
+										});
+									})
+								})]
+							})
+						})
+					})
+				})
+			})
+		})
+	});
+}
+function createLayout(overrides = {}, defaults = DEFAULT_LAYOUT) {
+	return {
+		...defaults,
+		...overrides
+	};
+}
+function createDescriptionContext(overrides = {}) {
+	return {
+		...DEFAULT_DESCRIPTION,
+		...overrides
+	};
+}
+function createTooltipContext(overrides = {}) {
+	return {
+		...DEFAULT_TOOLTIP,
+		...overrides
+	};
+}
+/**
+* This hook behaves like useLayoutEffect, but does not trigger on the first render.
+*
+* @param {Function} effect
+* @param {Array} deps
+*/
+function useUpdateLayoutEffect(effect, deps) {
+	const isMounted = useRef(false);
+	useLayoutEffect(() => {
+		if (isMounted.current) return effect();
+		else isMounted.current = true;
+	}, deps);
+}
+//#endregion
+//#region src/components/DropdownButton.js
+/**
+*
+* @param {object} props
+* @param {string} [props.class]
+* @param {import('preact').Component[]} [props.menuItems]
+* @returns
+*/
+function DropdownButton(props) {
+	const { class: className, children, menuItems = [] } = props;
+	const dropdownRef = useRef(null);
+	const menuRef = useRef(null);
+	const [open, setOpen] = useState(false);
+	const close = () => setOpen(false);
+	function onDropdownToggle(event) {
+		if (menuRef.current && menuRef.current.contains(event.target)) return;
+		event.stopPropagation();
+		setOpen((open) => !open);
+	}
+	function onActionClick(event, action) {
+		event.stopPropagation();
+		close();
+		action();
+	}
+	useGlobalClick([dropdownRef.current], () => close());
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-dropdown-button", { open }, className),
+		onClick: onDropdownToggle,
+		ref: dropdownRef,
+		children: [children, jsx("div", {
+			class: "bio-properties-panel-dropdown-button__menu",
+			ref: menuRef,
+			children: menuItems.map((item, index) => jsx(MenuItem, {
+				onClick: onActionClick,
+				item
+			}, index))
+		})]
+	});
+}
+function MenuItem({ item, onClick }) {
+	if (item.separator) return jsx("div", { class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--separator" });
+	if (item.action) return jsx("button", {
+		type: "button",
+		class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable",
+		onClick: (event) => onClick(event, item.action),
+		children: item.entry
+	});
+	return jsx("div", {
+		class: "bio-properties-panel-dropdown-button__menu-item",
+		children: item.entry
+	});
+}
+/**
+*
+* @param {Array<null | Element>} ignoredElements
+* @param {Function} callback
+*/
+function useGlobalClick(ignoredElements, callback) {
+	useEffect(() => {
+		/**
+		* @param {MouseEvent} event
+		*/
+		function listener(event) {
+			if (ignoredElements.some((element) => element && element.contains(event.target))) return;
+			callback();
+		}
+		document.addEventListener("click", listener, { capture: true });
+		return () => document.removeEventListener("click", listener, { capture: true });
+	}, [...ignoredElements, callback]);
+}
+//#endregion
+//#region src/components/HeaderButton.js
+function HeaderButton(props) {
+	const { children = null, class: classname, onClick = () => {}, ...otherProps } = props;
+	return jsx("button", {
+		type: "button",
+		...otherProps,
+		onClick,
+		class: classnames("bio-properties-panel-group-header-button", classname),
+		children
+	});
+}
+//#endregion
+//#region src/components/util/translateFallback.js
+/**
+* @typedef { {
+*   [key: string]: string;
+* } } TranslateReplacements
+*/
+/**
+* A simple translation stub to be used for multi-language support.
+* Can be easily replaced with a more sophisticated solution.
+*
+* @param {string} template to interpolate
+* @param {TranslateReplacements} [replacements] a map with substitutes
+*
+* @return {string} the translated string
+*/
+function translateFallback(template, replacements) {
+	replacements = replacements || {};
+	return template.replace(/{([^}]+)}/g, function(_, key) {
+		return replacements[key] || "{" + key + "}";
+	});
+}
+//#endregion
+//#region src/components/entries/Collapsible.js
+function CollapsibleEntry(props) {
+	const { element, entries = [], id, label, open: shouldOpen, remove, translate = translateFallback } = props;
+	const [open, setOpen] = useState(shouldOpen);
+	const toggleOpen = () => setOpen(!open);
+	const { onShow } = useContext(LayoutContext);
+	const propertiesPanelContext = {
+		...useContext(LayoutContext),
+		onShow: useCallback(() => {
+			setOpen(true);
+			if (isFunction(onShow)) onShow();
+		}, [onShow, setOpen])
+	};
+	const placeholderLabel = translate("<empty>");
+	return jsxs("div", {
+		"data-entry-id": id,
+		class: classnames("bio-properties-panel-collapsible-entry", open ? "open" : ""),
+		children: [jsxs("div", {
+			class: "bio-properties-panel-collapsible-entry-header",
+			onClick: toggleOpen,
+			children: [
+				jsx("div", {
+					class: classnames("bio-properties-panel-collapsible-entry-header-title", !label && "empty"),
+					children: label || placeholderLabel
+				}),
+				jsx("button", {
+					type: "button",
+					title: translate("Toggle list item"),
+					class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
+					children: jsx(ArrowIcon, { class: open ? "bio-properties-panel-arrow-down" : "bio-properties-panel-arrow-right" })
+				}),
+				remove ? jsx("button", {
+					type: "button",
+					title: translate("Delete item"),
+					class: "bio-properties-panel-remove-entry",
+					onClick: remove,
+					children: jsx(DeleteIcon, {})
+				}) : null
+			]
+		}), jsx("div", {
+			class: classnames("bio-properties-panel-collapsible-entry-entries", open ? "open" : ""),
+			children: jsx(LayoutContext.Provider, {
+				value: propertiesPanelContext,
+				children: entries.map((entry) => {
+					const { component: Component, id } = entry;
+					return createElement(Component, {
+						...entry,
+						element,
+						key: id
+					});
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/ListItem.js
+/**
+* @param {import('../PropertiesPanel').ListItemDefinition} props
+*/
+function ListItem(props) {
+	const { autoFocusEntry, autoOpen, translate = translateFallback } = props;
+	useEffect(() => {
+		if (autoOpen && autoFocusEntry) {
+			const entry = query(`[data-entry-id="${autoFocusEntry}"]`);
+			const focusableInput = query(".bio-properties-panel-input", entry);
+			if (focusableInput) {
+				if (isFunction(focusableInput.select)) focusableInput.select();
+				else if (isFunction(focusableInput.focus)) focusableInput.focus();
+				focusableInput.scrollIntoView();
+			}
+		}
+	}, [autoOpen, autoFocusEntry]);
+	return jsx("div", {
+		class: "bio-properties-panel-list-item",
+		children: jsx(CollapsibleEntry, {
+			...props,
+			open: autoOpen,
+			translate
+		})
+	});
+}
+//#endregion
+//#region src/components/ListGroup.js
+var noop$6 = () => {};
+/**
+* @param {import('../PropertiesPanel').ListGroupDefinition} props
+*/
+function ListGroup(props) {
+	const { add, element, id, items, label, shouldOpen = false, translate = translateFallback } = props;
+	useEffect(() => {
+		if (props.shouldSort != void 0) console.warn("the property 'shouldSort' is no longer supported");
+	}, [props.shouldSort]);
+	const groupRef = useRef(null);
+	const [open, setOpen] = useLayoutState([
+		"groups",
+		id,
+		"open"
+	], shouldOpen);
+	const [sticky, setSticky] = useState(false);
+	const onShow = useCallback(() => setOpen(true), [setOpen]);
+	const [localItems, setLocalItems] = useState([]);
+	const [addTriggered, setAddTriggered] = useState(false);
+	const prevElement = usePrevious(element);
+	const toggleOpen = useCallback(() => setOpen(!open), [open]);
+	const openItemIds = element === prevElement && open && addTriggered ? getNewItemIds(items, localItems) : [];
+	useEffect(() => {
+		setLocalItems(items);
+		setAddTriggered(false);
+	}, [items]);
+	useStickyIntersectionObserver(groupRef, "div.bio-properties-panel-scroll-container", setSticky);
+	const hasItems = !!items.length;
+	const propertiesPanelContext = {
+		...useContext(LayoutContext),
+		onShow
+	};
+	const handleAddClick = (e) => {
+		setAddTriggered(true);
+		setOpen(true);
+		add(e);
+	};
+	const allErrors = useErrors();
+	const hasError = items.some((item) => {
+		if (allErrors[item.id]) return true;
+		if (!item.entries) return;
+		return item.entries.some((entry) => allErrors[entry.id]);
+	});
+	return jsxs("div", {
+		class: "bio-properties-panel-group",
+		"data-group-id": "group-" + id,
+		ref: groupRef,
+		children: [jsxs("div", {
+			class: classnames("bio-properties-panel-group-header", hasItems ? "" : "empty", hasItems && open ? "open" : "", sticky && open ? "sticky" : ""),
+			onClick: hasItems ? toggleOpen : noop$6,
+			children: [jsx("div", {
+				class: "bio-properties-panel-group-header-title",
+				children: jsx(TooltipWrapper, {
+					value: props.tooltip,
+					forId: "group-" + id,
+					element,
+					parent: groupRef,
+					children: label
+				})
+			}), jsxs("div", {
+				class: "bio-properties-panel-group-header-buttons",
+				children: [
+					add ? jsxs("button", {
+						type: "button",
+						title: translate("Create new list item"),
+						class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
+						onClick: handleAddClick,
+						children: [jsx(CreateIcon, {}), !hasItems ? jsx("span", {
+							class: "bio-properties-panel-add-entry-label",
+							children: translate("Create")
+						}) : null]
+					}) : null,
+					hasItems ? jsx("div", {
+						title: translate(`List contains {numOfItems} item${items.length != 1 ? "s" : ""}`, { numOfItems: items.length }),
+						class: classnames("bio-properties-panel-list-badge", hasError ? "bio-properties-panel-list-badge--error" : ""),
+						children: items.length
+					}) : null,
+					hasItems ? jsx("button", {
+						type: "button",
+						title: translate("Toggle section"),
+						class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
+						children: jsx(ArrowIcon, { class: open ? "bio-properties-panel-arrow-down" : "bio-properties-panel-arrow-right" })
+					}) : null
+				]
+			})]
+		}), jsx("div", {
+			class: classnames("bio-properties-panel-list", open && hasItems ? "open" : ""),
+			children: jsx(LayoutContext.Provider, {
+				value: propertiesPanelContext,
+				children: items.map((item, index) => {
+					if (!item) return;
+					const { id } = item;
+					const autoOpen = openItemIds.includes(item.id);
+					return createElement(ListItem, {
+						...item,
+						autoOpen,
+						element,
+						index,
+						key: id,
+						translate
+					});
+				})
+			})
+		})]
+	});
+}
+function getNewItemIds(newItems, oldItems) {
+	const newIds = newItems.map((item) => item.id);
+	const oldIds = oldItems.map((item) => item.id);
+	return newIds.filter((itemId) => !oldIds.includes(itemId));
+}
+//#endregion
+//#region src/components/entries/Description.js
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.forId - id of the entry the description is used for
+* @param {String} props.value
+*/
+function Description(props) {
+	const { element, forId, value } = props;
+	const contextDescription = useDescriptionContext(forId, element);
+	const description = value || contextDescription;
+	if (description) return jsx("div", {
+		class: "bio-properties-panel-description",
+		children: description
+	});
+}
+//#endregion
+//#region src/components/entries/Checkbox.js
+function Checkbox(props) {
+	const { id, label, onChange, disabled, value = false, onFocus, onBlur, tooltip } = props;
+	const [localValue, setLocalValue] = useState(value);
+	const handleChangeCallback = ({ target }) => {
+		onChange(target.checked);
+	};
+	const handleChange = (e) => {
+		handleChangeCallback(e);
+		setLocalValue(e.target.value);
+	};
+	useEffect(() => {
+		if (value === localValue) return;
+		setLocalValue(value);
+	}, [value]);
+	const ref = useShowEntryEvent(id);
+	return jsxs("div", {
+		class: "bio-properties-panel-checkbox",
+		children: [jsx("input", {
+			ref,
+			id: prefixId$8(id),
+			name: id,
+			onFocus,
+			onBlur,
+			type: "checkbox",
+			class: "bio-properties-panel-input",
+			onChange: handleChange,
+			checked: localValue,
+			disabled
+		}), jsx("label", {
+			for: prefixId$8(id),
+			class: "bio-properties-panel-label",
+			children: jsx(TooltipWrapper, {
+				value: tooltip,
+				forId: id,
+				element: props.element,
+				children: label
+			})
+		})]
+	});
+}
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.id
+* @param {String} props.description
+* @param {String} props.label
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+* @param {string|import('preact').Component} props.tooltip
+* @param {boolean} [props.disabled]
+*/
+function CheckboxEntry(props) {
+	const { element, id, description, label, getValue, setValue, disabled, onFocus, onBlur, tooltip } = props;
+	const value = getValue(element);
+	const error = useError(id);
+	return jsxs("div", {
+		class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
+		"data-entry-id": id,
+		children: [
+			jsx(Checkbox, {
+				disabled,
+				id,
+				label,
+				onChange: setValue,
+				onFocus,
+				onBlur,
+				value,
+				tooltip,
+				element
+			}, element),
+			error && jsx("div", {
+				class: "bio-properties-panel-error",
+				children: error
+			}),
+			jsx(Description, {
+				forId: id,
+				element,
+				value: description
+			})
+		]
+	});
+}
+function isEdited(node) {
+	return node && !!node.checked;
+}
+function prefixId$8(id) {
+	return `bio-properties-panel-${id}`;
+}
+//#endregion
+//#region src/components/entries/CheckboxGroup.js
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.id
+* @param {String} props.label
+* @param {Array<{label: String, value: *}>} props.options
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {String} [props.description]
+* @param {string|import('preact').Component} [props.tooltip]
+* @param {boolean} [props.disabled]
+* @param {Function} [props.onFocus]
+* @param {Function} [props.onBlur]
+*/
+function CheckboxGroup(props) {
+	const { element, id, label, description, tooltip, options = [], getValue, setValue, disabled, onFocus, onBlur } = props;
+	const value = getValue(element) || [];
+	const handleOptionChange = (optionValue, checked) => {
+		const newValue = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue);
+		setValue(newValue);
+	};
+	return jsxs("div", {
+		class: "bio-properties-panel-entry bio-properties-panel-checkbox-group",
+		"data-entry-id": id,
+		children: [
+			jsx("div", {
+				class: "bio-properties-panel-group-header",
+				children: jsx("p", {
+					class: "bio-properties-panel-label",
+					children: jsx(TooltipWrapper, {
+						value: tooltip,
+						forId: id,
+						element,
+						children: label
+					})
+				})
+			}),
+			jsx("div", {
+				class: "bio-properties-panel-checkbox-group-entries",
+				children: options.map((option) => jsx(CheckboxEntry, {
+					id: `${id}-${option.value}`,
+					label: option.label,
+					setValue: (checked) => handleOptionChange(option.value, checked),
+					getValue: () => value.includes(option.value),
+					disabled,
+					onFocus,
+					onBlur,
+					element
+				}, option.value))
+			}),
+			jsx(Description, {
+				forId: id,
+				element,
+				value: description
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/entries/JsonEditor.js
+var ExternalChange = Annotation.define();
+var parseJsonLinter = jsonParseLinter();
+/**
+* A CodeMirror based JSON editor for the properties panel.
+*
+* @param {object} props
+* @param {string} props.id
+* @param {string} props.label
+* @param {string} [props.value]
+* @param {Function} props.onInput
+* @param {boolean} [props.disabled]
+* @param {string} [props.placeholder]
+* @param {string} [props.tooltip]
+* @param {object} [props.element]
+*/
+function JsonEditor(props) {
+	const { id, label, debounce, value = "", onInput: commitValue, disabled, placeholder: placeholder$1, tooltip, element } = props;
+	const containerRef = useRef(null);
+	const viewRef = useRef(null);
+	const editorRef = useShowEntryEvent(id);
+	const handleChange = useDebounce(useStaticCallback((newValue) => {
+		commitValue(newValue === "" ? void 0 : newValue);
+	}), debounce);
+	useEffect(() => {
+		const view = new EditorView({
+			state: EditorState.create({
+				doc: value,
+				extensions: [
+					highlightSpecialChars(),
+					history(),
+					drawSelection(),
+					syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+					foldGutter(),
+					bracketMatching(),
+					closeBrackets(),
+					keymap.of([
+						...defaultKeymap,
+						...historyKeymap,
+						...closeBracketsKeymap,
+						...foldKeymap
+					]),
+					EditorState.tabSize.of(2),
+					EditorView.lineWrapping,
+					EditorState.readOnly.of(!!disabled),
+					...placeholder$1 ? [placeholder(placeholder$1)] : [],
+					EditorView.updateListener.of((update) => {
+						const isExternal = update.transactions.some((tr) => tr.annotation(ExternalChange));
+						if (update.docChanged && !isExternal) handleChange(update.state.doc.toString());
+					}),
+					json(),
+					linter((view) => {
+						if (!view.state.doc.toString().trim()) return [];
+						return parseJsonLinter(view);
+					}, { delay: 300 })
+				]
+			}),
+			parent: containerRef.current
+		});
+		viewRef.current = view;
+		editorRef.current = view.contentDOM;
+		const prefixedId = `bio-properties-panel-${id}`;
+		view.contentDOM.setAttribute("id", prefixedId);
+		view.contentDOM.setAttribute("aria-label", label);
+		return () => {
+			view.destroy();
+		};
+	}, []);
+	useEffect(() => {
+		const view = viewRef.current;
+		if (!view) return;
+		const currentValue = view.state.doc.toString();
+		if (value === currentValue) return;
+		view.dispatch({
+			changes: {
+				from: 0,
+				to: currentValue.length,
+				insert: value || ""
+			},
+			annotations: ExternalChange.of(true)
+		});
+	}, [value]);
+	const focusEditor = () => {
+		viewRef.current && viewRef.current.focus();
+	};
+	return jsxs("div", {
+		class: "bio-properties-panel-json-editor",
+		children: [jsx("label", {
+			class: "bio-properties-panel-label",
+			onClick: focusEditor,
+			children: jsx(TooltipWrapper, {
+				value: tooltip,
+				forId: id,
+				element,
+				children: label
+			})
+		}), jsx("div", {
+			class: classnames("bio-properties-panel-input", value && "edited"),
+			ref: containerRef
+		})]
+	});
+}
+/**
+* Entry wrapper for JsonEditor, handles getValue/setValue, built-in JSON validation, error display, and description.
+*
+* @param {object} props
+* @param {object} props.element
+* @param {string} props.id
+* @param {string} [props.description]
+* @param {string} props.label
+* @param {Function} props.debounce
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {boolean} [props.disabled]
+* @param {string} [props.placeholder]
+* @param {string} [props.tooltip]
+* @param {Function} [props.validate]
+* @param {Function} [props.translate]
+*/
+function JsonEditorEntry(props) {
+	const { element, id, description, debounce, label, getValue, setValue, disabled, placeholder, tooltip, validate, translate = translateFallback } = props;
+	const globalError = useError(id);
+	let value = getValue(element);
+	const [localError, setLocalError] = useState(() => computeError(validate, value, translate));
+	const [editorValue, setEditorValue] = useState(value);
+	useEffect(() => {
+		if (value === editorValue) return;
+		setEditorValue(value);
+		setLocalError(computeError(validate, value, translate));
+	}, [value, validate]);
+	const onInput = useStaticCallback((newValue) => {
+		setEditorValue(newValue);
+		if (newValue !== getValue(element)) {
+			const newValidationError = computeError(validate, newValue, translate);
+			setValue(newValue, newValidationError);
+			setLocalError(newValidationError);
+		}
+	});
+	const error = globalError || localError;
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-entry", error && "has-error"),
+		"data-entry-id": id,
+		children: [
+			jsx(JsonEditor, {
+				id,
+				label,
+				debounce,
+				value,
+				onInput,
+				disabled,
+				placeholder,
+				tooltip,
+				element
+			}, element),
+			error && jsx("div", {
+				class: "bio-properties-panel-error",
+				children: error
+			}),
+			jsx(Description, {
+				forId: id,
+				element,
+				value: description
+			})
+		]
+	});
+}
+/**
+* Check if the JSON editor entry has been edited.
+*/
+function isEdited$2(node) {
+	return node && node.classList.contains("edited");
+}
+function computeError(validate, value, translate) {
+	return (isFunction(validate) ? validate(value) : null) || validateJson(value, translate);
+}
+function validateJson(value, translate = translateFallback) {
+	if (!value || !value.trim()) return null;
+	try {
+		return isObject(JSON.parse(value)) ? null : translate("JSON contains errors");
+	} catch (e) {
+		return translate("JSON contains errors");
+	}
+}
+//#endregion
+//#region src/components/OpenPopupButton.js
+/**
+* Button to open popups.
+*
+* @param {Object} props
+* @param {Function} props.onClick - Callback to trigger when the button is clicked.
+* @param {string} [props.title] - Tooltip text for the button.
+* @param {boolean} [props.disabled] - Whether the button is disabled.
+* @param {string} [props.className] - Additional class names for the button.
+*/
+function OpenPopupButton({ onClick, title = "Open pop-up editor" }) {
+	return jsx("button", {
+		type: "button",
+		title,
+		class: "bio-properties-panel-open-feel-popup",
+		onClick,
+		children: jsx(OpenPopupIcon, {})
+	});
+}
+//#endregion
+//#region src/components/entries/templating/TemplatingEditor.js
+var noop$5 = () => {};
+/**
+* Buffer `.focus()` calls while the editor is not initialized.
+* Set Focus inside when the editor is ready.
+*/
+var useBufferedFocus$1 = function(editor, ref) {
+	const [buffer, setBuffer] = useState(void 0);
+	ref.current = useMemo(() => ({ focus: (offset) => {
+		if (editor) editor.focus(offset);
+		else {
+			if (typeof offset === "undefined") offset = Infinity;
+			setBuffer(offset);
+		}
+	} }), [editor]);
+	useEffect(() => {
+		if (typeof buffer !== "undefined" && editor) {
+			editor.focus(buffer);
+			setBuffer(false);
+		}
+	}, [editor, buffer]);
+};
+var TemplatingEditor = forwardRef((props, ref) => {
+	const { onInput, disabled, tooltipContainer, enableGutters, value, onLint = noop$5, onOpenPopup = noop$5, popupOpen, contentAttributes = {}, hostLanguage = null, singleLine = false } = props;
+	const inputRef = useRef();
+	const [editor, setEditor] = useState();
+	const [localValue, setLocalValue] = useState(value || "");
+	useBufferedFocus$1(editor, ref);
+	const handleInput = useStaticCallback((newValue) => {
+		onInput(newValue);
+		setLocalValue(newValue);
+	});
+	useEffect(() => {
+		let editor;
+		editor = new ExpressionEditor({
+			container: inputRef.current,
+			onChange: handleInput,
+			value: localValue,
+			onLint,
+			contentAttributes,
+			tooltipContainer,
+			enableGutters,
+			hostLanguage,
+			singleLine,
+			lineWrap: true
+		});
+		setEditor(editor);
+		return () => {
+			onLint([]);
+			inputRef.current.innerHTML = "";
+			setEditor(null);
+		};
+	}, []);
+	useEffect(() => {
+		if (!editor) return;
+		if (value === localValue) return;
+		editor.setValue(value);
+		setLocalValue(value);
+	}, [value]);
+	const handleClick = () => {
+		ref.current.focus();
+	};
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-feelers-editor-container", popupOpen ? "popupOpen" : null),
+		children: [
+			popupOpen && jsx("div", {
+				class: "bio-properties-panel-feelers-editor__popup-placeholder",
+				children: "Opened in popup"
+			}),
+			jsx("div", {
+				name: props.name,
+				class: classnames("bio-properties-panel-feelers-editor bio-properties-panel-input", localValue ? "edited" : null, disabled ? "disabled" : null),
+				ref: inputRef,
+				onClick: handleClick
+			}),
+			!disabled && jsx(OpenPopupButton, { onClick: () => onOpenPopup("feelers") })
+		]
+	});
+});
+//#endregion
+//#region src/components/entries/expression/ExpressionEditor.js
+var noop$4 = () => {};
+/**
+* Buffer `.focus()` calls while the editor is not initialized.
+* Set Focus inside when the editor is ready.
+*/
+var useBufferedFocus = function(editor, ref) {
+	const [buffer, setBuffer] = useState(void 0);
+	ref.current = useMemo(() => ({ focus: (offset) => {
+		if (editor) editor.focus(offset);
+		else {
+			if (typeof offset === "undefined") offset = Infinity;
+			setBuffer(offset);
+		}
+	} }), [editor]);
+	useEffect(() => {
+		if (typeof buffer !== "undefined" && editor) {
+			editor.focus(buffer);
+			setBuffer(false);
+		}
+	}, [editor, buffer]);
+};
+var ExpressionEditor$1 = forwardRef((props, ref) => {
+	const { contentAttributes, enableGutters, value, onInput, onKeyDown: onKeyDownProp = noop$4, onFeelToggle = noop$4, onLint = noop$4, onOpenPopup = noop$4, placeholder, popupOpen, disabled, tooltipContainer, variables, feelLanguageContext } = props;
+	const inputRef = useRef();
+	const [editor, setEditor] = useState();
+	const [localValue, setLocalValue] = useState(value || "");
+	const { builtins, dialect, parserDialect } = feelLanguageContext || {};
+	useBufferedFocus(editor, ref);
+	const handleInput = useStaticCallback((newValue) => {
+		onInput(newValue);
+		setLocalValue(newValue);
+	});
+	useEffect(() => {
+		let editor;
+		const onKeyDown = (e) => {
+			onKeyDownProp(e);
+			if (e.key !== "Backspace" || !editor) return;
+			const selection = editor.getSelection();
+			const range = selection.ranges[selection.mainIndex];
+			if (range.from === 0 && range.to === 0) onFeelToggle();
+		};
+		editor = new Editor({
+			container: inputRef.current,
+			onChange: handleInput,
+			onKeyDown,
+			onLint,
+			placeholder,
+			tooltipContainer,
+			value: localValue,
+			variables,
+			builtins,
+			dialect,
+			parserDialect,
+			extensions: [...enableGutters ? [lineNumbers()] : [], EditorView.lineWrapping],
+			contentAttributes
+		});
+		setEditor(editor);
+		return () => {
+			onLint([]);
+			inputRef.current.innerHTML = "";
+			setEditor(null);
+		};
+	}, []);
+	useEffect(() => {
+		if (!editor) return;
+		if (value === localValue) return;
+		editor.setValue(value);
+		setLocalValue(value);
+	}, [value]);
+	useEffect(() => {
+		if (!editor) return;
+		editor.setVariables(variables);
+	}, [variables]);
+	useEffect(() => {
+		if (!editor) return;
+		editor.setPlaceholder(placeholder);
+	}, [placeholder]);
+	const handleClick = () => {
+		ref.current.focus();
+	};
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-feel-editor-container", disabled ? "disabled" : null, popupOpen ? "popupOpen" : null),
+		children: [
+			popupOpen && jsx("div", {
+				class: "bio-properties-panel-feel-editor__open-popup-placeholder",
+				children: "Opened in editor"
+			}),
+			jsx("div", {
+				name: props.name,
+				class: classnames("bio-properties-panel-input", localValue ? "edited" : null),
+				ref: inputRef,
+				onClick: handleClick
+			}),
+			!disabled && jsx(OpenPopupButton, { onClick: () => onOpenPopup("feel") })
+		]
+	});
+});
+//#endregion
+//#region src/components/entries/expression/ExpressionIndicator.js
+function ExpressionIndicator(props) {
+	const { active } = props;
+	if (!active) return null;
+	return jsx("span", {
+		class: "bio-properties-panel-expression-indicator",
+		children: "="
+	});
+}
+//#endregion
+//#region src/components/entries/expression/ExpressionIcon.js
+var noop$3 = () => {};
+/**
+* @param {Object} props
+* @param {Object} props.label
+* @param {String} props.feel
+*/
+function ExpressionIcon(props) {
+	const { feel = false, active, disabled = false, onClick = noop$3 } = props;
+	const feelRequiredLabel = "Expression expression is mandatory";
+	const feelOptionalLabel = `Click to ${active ? "remove" : "set a"} dynamic value with FEEL expression`;
+	const handleClick = (e) => {
+		onClick(e);
+		if (!e.pointerType) e.stopPropagation();
+	};
+	return jsx("button", {
+		type: "button",
+		class: classnames("bio-properties-panel-feel-icon", active ? "active" : null, feel === "required" ? "required" : "optional"),
+		onClick: handleClick,
+		disabled: feel === "required" || disabled,
+		title: feel === "required" ? feelRequiredLabel : feelOptionalLabel,
+		children: jsx(FeelIcon, {})
+	});
+}
+//#endregion
+//#region src/components/util/keyboardUtils.js
+/**
+* @param {KeyboardEvent} event
+* @return {boolean}
+*/
+function isCmd(event) {
+	if (event.altKey) return false;
+	return event.ctrlKey || event.metaKey;
+}
+function isCmdWithChar(event) {
+	return isCmd(event) && event.key.length === 1 && /^[a-zA-Z]$/.test(event.key);
+}
+//#endregion
+//#region src/components/entries/ToggleSwitch.js
+function ToggleSwitch(props) {
+	const { id, label, onInput, value, switcherLabel, inline, onFocus, onBlur, inputRef, tooltip } = props;
+	const [localValue, setLocalValue] = useState(value);
+	const handleInputCallback = async () => {
+		onInput(!value);
+	};
+	const handleInput = (e) => {
+		handleInputCallback(e);
+		setLocalValue(e.target.value);
+	};
+	useEffect(() => {
+		if (value === localValue) return;
+		setLocalValue(value);
+	}, [value]);
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-toggle-switch", { inline }),
+		children: [jsx("label", {
+			class: "bio-properties-panel-label",
+			for: prefixId$7(id),
+			children: jsx(TooltipWrapper, {
+				value: tooltip,
+				forId: id,
+				element: props.element,
+				children: label
+			})
+		}), jsxs("div", {
+			class: "bio-properties-panel-field-wrapper",
+			children: [jsxs("label", {
+				class: "bio-properties-panel-toggle-switch__switcher",
+				children: [jsx("input", {
+					ref: inputRef,
+					id: prefixId$7(id),
+					class: "bio-properties-panel-input",
+					type: "checkbox",
+					onFocus,
+					onBlur,
+					name: id,
+					onInput: handleInput,
+					checked: !!localValue
+				}), jsx("span", { class: "bio-properties-panel-toggle-switch__slider" })]
+			}), switcherLabel && jsx("p", {
+				class: "bio-properties-panel-toggle-switch__label",
+				children: switcherLabel
+			})]
+		})]
+	});
+}
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.id
+* @param {String} props.description
+* @param {String} props.label
+* @param {String} props.switcherLabel
+* @param {Boolean} props.inline
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+* @param {string|import('preact').Component} props.tooltip
+*/
+function ToggleSwitchEntry(props) {
+	const { element, id, description, label, switcherLabel, inline, getValue, setValue, onFocus, onBlur, tooltip } = props;
+	const value = getValue(element);
+	return jsxs("div", {
+		class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
+		"data-entry-id": id,
+		children: [jsx(ToggleSwitch, {
+			id,
+			label,
+			value,
+			onInput: setValue,
+			onFocus,
+			onBlur,
+			switcherLabel,
+			inline,
+			tooltip,
+			element
+		}), jsx(Description, {
+			forId: id,
+			element,
+			value: description
+		})]
+	});
+}
+function isEdited$9(node) {
+	return node && !!node.checked;
+}
+function prefixId$7(id) {
+	return `bio-properties-panel-${id}`;
+}
+//#endregion
+//#region src/components/entries/NumberField.js
+function NumberField(props) {
+	const { debounce, disabled, displayLabel = true, id, inputRef, label, max, min, onInput, step, value = "", onFocus, onBlur, tooltip } = props;
+	const [localValue, setLocalValue] = useState(value);
+	const handleInputCallback = useMemo(() => {
+		return debounce((target) => {
+			if (target.validity.valid) onInput(target.value ? parseFloat(target.value) : void 0);
+		});
+	}, [onInput, debounce]);
+	const handleInput = (e) => {
+		handleInputCallback(e.target);
+		setLocalValue(e.target.value);
+	};
+	useEffect(() => {
+		if (value === localValue) return;
+		setLocalValue(value);
+	}, [value]);
+	return jsxs("div", {
+		class: "bio-properties-panel-numberfield",
+		children: [displayLabel && jsx("label", {
+			for: prefixId$6(id),
+			class: "bio-properties-panel-label",
+			children: jsx(TooltipWrapper, {
+				value: tooltip,
+				forId: id,
+				element: props.element,
+				children: label
+			})
+		}), jsx("input", {
+			id: prefixId$6(id),
+			ref: inputRef,
+			type: "number",
+			name: id,
+			spellCheck: "false",
+			autoComplete: "off",
+			disabled,
+			class: "bio-properties-panel-input",
+			max,
+			min,
+			onInput: handleInput,
+			onFocus,
+			onBlur,
+			step,
+			value: localValue
+		})]
+	});
+}
+/**
+* @param {Object} props
+* @param {Boolean} props.debounce
+* @param {String} props.description
+* @param {Boolean} props.disabled
+* @param {Object} props.element
+* @param {Function} props.getValue
+* @param {String} props.id
+* @param {String} props.label
+* @param {String} props.max
+* @param {String} props.min
+* @param {Function} props.setValue
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+* @param {String} props.step
+* @param {Function} props.validate
+*/
+function NumberFieldEntry(props) {
+	const { debounce, description, disabled, element, getValue, id, label, max, min, setValue, step, onFocus, onBlur, validate, tooltip } = props;
+	const globalError = useError(id);
+	const [localError, setLocalError] = useState(null);
+	let value = getValue(element);
+	useEffect(() => {
+		if (isFunction(validate)) {
+			const newValidationError = validate(value) || null;
+			setLocalError(newValidationError);
+		}
+	}, [value, validate]);
+	const onInput = (newValue) => {
+		let newValidationError = null;
+		if (isFunction(validate)) newValidationError = validate(newValue) || null;
+		setValue(newValue, newValidationError);
+		setLocalError(newValidationError);
+	};
+	const error = globalError || localError;
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-entry", error ? "has-error" : ""),
+		"data-entry-id": id,
+		children: [
+			jsx(NumberField, {
+				debounce,
+				disabled,
+				id,
+				label,
+				onFocus,
+				onBlur,
+				onInput,
+				max,
+				min,
+				step,
+				value,
+				tooltip
+			}, element),
+			error && jsx("div", {
+				class: "bio-properties-panel-error",
+				children: error
+			}),
+			jsx(Description, {
+				forId: id,
+				element,
+				value: description
+			})
+		]
+	});
+}
+function isEdited$3(node) {
+	return node && !!node.value;
+}
+function prefixId$6(id) {
+	return `bio-properties-panel-${id}`;
+}
+//#endregion
+//#region src/components/entries/expression/Expression.js
+var noop$2 = () => {};
+/**
+* @typedef {'required'|'optional'|'static'} FeelType
+*/
+/**
+* @param {Object} props
+* @param {Boolean} props.debounce
+* @param {String} props.id
+* @param {Object} props.element
+* @param {String} props.label
+* @param {String} props.hostLanguage
+* @param {Function} props.onInput
+* @param {Function} props.onBlur
+* @param {Function} props.onError
+* @param {FeelType} [props.feel]
+* @param {String} props.value
+* @param {Boolean} [props.singleLine]
+* @param {Function} props.tooltipContainer
+* @param {Function | import('preact').Component} props.OptionalComponent
+* @param {Boolean} props.disabled
+* @param {Array} props.variables
+* @param {string} [props.placeholder]
+* @param {string | import('preact').Component} props.tooltip
+*/
+function FeelTextfield(props) {
+	const { debounce, id, element, label, hostLanguage, onInput: commitValue, onBlur, onError, placeholder, feel, value = "", disabled = false, variables, singleLine, tooltipContainer, OptionalComponent = OptionalFeelInput, tooltip } = props;
+	const [localValue, setLocalValue] = useState(value);
+	const editorRef = useShowEntryEvent(id);
+	const containerRef = useRef();
+	const onInput = useCallback((newValue) => {
+		commitValue(newValue === "" || newValue === "=" ? void 0 : newValue);
+	}, [commitValue]);
+	const feelActive = isString(localValue) && localValue.startsWith("=") || feel === "required";
+	const feelOnlyValue = isString(localValue) && localValue.startsWith("=") ? localValue.substring(1) : localValue;
+	const feelLanguageContext = useContext(FeelLanguageContext);
+	const [focus, _setFocus] = useState(void 0);
+	const { eventBus } = useContext(EventContext);
+	const [isPopupOpen, setIsPopupOpen] = useState(false);
+	const setFocus = (offset = 0) => {
+		const position = containerRef.current.contains(document.activeElement) ? document.activeElement.selectionStart : Infinity;
+		_setFocus(position + offset);
+	};
+	/**
+	* @type { import('min-dash').DebouncedFunction }
+	*/
+	const handleInput = useDebounce(onInput, debounce);
+	const handleFeelToggle = useStaticCallback(() => {
+		if (feel === "required") return;
+		if (!feelActive) {
+			setLocalValue("=" + localValue);
+			handleInput("=" + localValue);
+		} else {
+			setLocalValue(feelOnlyValue);
+			handleInput(feelOnlyValue);
+		}
+	});
+	const handleLocalInput = (newValue, useDebounce = true) => {
+		if (feelActive) newValue = "=" + newValue;
+		if (newValue === localValue) return;
+		setLocalValue(newValue);
+		if (useDebounce) handleInput(newValue);
+		else onInput(newValue);
+		if (!feelActive && isString(newValue) && newValue.startsWith("=")) setFocus(-1);
+	};
+	const handleOnBlur = (e) => {
+		handleInput.cancel?.();
+		if (e.target.type === "checkbox") onInput(e.target.checked);
+		else {
+			const trimmedValue = e.target.value.trim();
+			handleLocalInput(trimmedValue, false);
+		}
+		if (onBlur) onBlur(e);
+	};
+	const handleOnKeyDown = (e) => {
+		if (isCmdWithChar(e)) handleInput.flush();
+	};
+	const handleLint = useStaticCallback((lint = []) => {
+		if (lint.some((report) => report.type === "Syntax Error")) onError("Unparsable FEEL expression.");
+		else onError(void 0);
+	});
+	const handleOpenPopup = (type = "feel") => {
+		const isOpen = eventBus.fire("propertiesPanel.openPopup", {
+			element,
+			entryId: id,
+			hostLanguage,
+			label,
+			onInput: handleLocalInput,
+			singleLine,
+			sourceElement: editorRef.current,
+			tooltipContainer,
+			type,
+			value: feelOnlyValue,
+			variables,
+			feelLanguageContext
+		});
+		if (isOpen) eventBus.once("propertiesPanelPopup.close", () => {
+			setIsPopupOpen(false);
+		});
+		setIsPopupOpen(isOpen === true);
+	};
+	useEffect(() => {
+		if (typeof focus !== "undefined") {
+			editorRef.current.focus(focus);
+			_setFocus(void 0);
+		}
+	}, [focus]);
+	useEffect(() => {
+		if (value === localValue) return;
+		if (!value) {
+			setLocalValue(feelActive ? "=" : "");
+			return;
+		}
+		setLocalValue(value);
+	}, [value]);
+	useEffect(() => {
+		return () => {
+			eventBus.fire("propertiesPanel.closePopup");
+		};
+	}, []);
+	useEffect(() => {
+		const copyHandler = (event) => {
+			if (!feelActive) return;
+			event.clipboardData.setData("application/FEEL", event.clipboardData.getData("text"));
+		};
+		const pasteHandler = (event) => {
+			if (feelActive || isPopupOpen) return;
+			if (event.clipboardData.getData("application/FEEL")) {
+				setTimeout(() => {
+					handleFeelToggle();
+					setFocus();
+				});
+				return;
+			}
+			const input = event.target;
+			const isFieldEmpty = !input.value;
+			const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+			if (isFieldEmpty || isAllSelected) {
+				const trimmedValue = event.clipboardData.getData("text").trim();
+				setLocalValue(trimmedValue);
+				handleInput(trimmedValue);
+				if (!feelActive && isString(trimmedValue) && trimmedValue.startsWith("=")) setFocus(trimmedValue.length - 1);
+				event.preventDefault();
+			}
+		};
+		containerRef.current.addEventListener("copy", copyHandler);
+		containerRef.current.addEventListener("cut", copyHandler);
+		containerRef.current.addEventListener("paste", pasteHandler);
+		return () => {
+			containerRef.current.removeEventListener("copy", copyHandler);
+			containerRef.current.removeEventListener("cut", copyHandler);
+			containerRef.current.removeEventListener("paste", pasteHandler);
+		};
+	}, [
+		containerRef,
+		feelActive,
+		handleFeelToggle,
+		setFocus
+	]);
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-feel-entry", { "feel-active": feelActive }),
+		children: [jsxs("label", {
+			for: prefixId$5(id),
+			class: "bio-properties-panel-label",
+			onClick: () => setFocus(),
+			children: [jsx(TooltipWrapper, {
+				value: tooltip,
+				forId: id,
+				element: props.element,
+				children: label
+			}), jsx(ExpressionIcon, {
+				label,
+				feel,
+				onClick: handleFeelToggle,
+				active: feelActive
+			})]
+		}), jsxs("div", {
+			class: "bio-properties-panel-feel-container",
+			ref: containerRef,
+			children: [jsx(ExpressionIndicator, {
+				active: feelActive,
+				disabled: feel !== "optional" || disabled,
+				onClick: handleFeelToggle
+			}), feelActive ? jsx(ExpressionEditor$1, {
+				name: id,
+				onInput: handleLocalInput,
+				onKeyDown: handleOnKeyDown,
+				contentAttributes: {
+					"id": prefixId$5(id),
+					"aria-label": label
+				},
+				disabled,
+				popupOpen: isPopupOpen,
+				onFeelToggle: () => {
+					handleFeelToggle();
+					setFocus(true);
+				},
+				onLint: handleLint,
+				onOpenPopup: handleOpenPopup,
+				placeholder,
+				value: feelOnlyValue,
+				variables,
+				feelLanguageContext,
+				ref: editorRef,
+				tooltipContainer
+			}) : jsx(OptionalComponent, {
+				...props,
+				popupOpen: isPopupOpen,
+				onInput: handleLocalInput,
+				onKeyDown: handleOnKeyDown,
+				onBlur: handleOnBlur,
+				contentAttributes: {
+					"id": prefixId$5(id),
+					"aria-label": label
+				},
+				value: localValue,
+				ref: editorRef,
+				onOpenPopup: handleOpenPopup,
+				containerRef
+			})]
+		})]
+	});
+}
+var OptionalFeelInput = forwardRef((props, ref) => {
+	const { id, disabled, onInput, onKeyDown, value, onFocus, onBlur, placeholder } = props;
+	const inputRef = useRef();
+	ref.current = { focus: (position) => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.focus();
+		if (typeof position === "number") {
+			if (position > value.length) position = value.length;
+			input.setSelectionRange(position, position);
+		}
+	} };
+	return jsx("input", {
+		id: prefixId$5(id),
+		type: "text",
+		ref: inputRef,
+		name: id,
+		spellCheck: "false",
+		autoComplete: "off",
+		disabled,
+		class: "bio-properties-panel-input",
+		onInput: (e) => onInput(e.target.value),
+		onFocus,
+		onKeyDown,
+		onBlur,
+		placeholder,
+		value: value || ""
+	});
+});
+var OptionalFeelNumberField = forwardRef((props, ref) => {
+	const { id, debounce, disabled, onInput, value, min, max, step, onFocus, onBlur } = props;
+	const inputRef = useRef();
+	ref.current = { focus: (position) => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.focus();
+		if (typeof position === "number" && position !== Infinity) {
+			if (position > value.length) position = value.length;
+			input.setSelectionRange(position, position);
+		}
+	} };
+	return jsx(NumberField, {
+		id,
+		debounce,
+		disabled,
+		displayLabel: false,
+		inputRef,
+		max,
+		min,
+		onInput,
+		step,
+		value,
+		onFocus,
+		onBlur
+	});
+});
+var OptionalFeelTextArea = forwardRef((props, ref) => {
+	const { id, disabled, onInput, value, onFocus, onBlur, placeholder } = props;
+	const inputRef = useRef();
+	ref.current = { focus: () => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.focus();
+		input.setSelectionRange(0, 0);
+	} };
+	return jsx("textarea", {
+		id: prefixId$5(id),
+		type: "text",
+		ref: inputRef,
+		name: id,
+		spellCheck: "false",
+		autoComplete: "off",
+		disabled,
+		class: "bio-properties-panel-input",
+		onInput: (e) => onInput(e.target.value),
+		onFocus,
+		onBlur,
+		placeholder,
+		value: value || "",
+		"data-gramm": "false"
+	});
+});
+var OptionalFeelToggleSwitch = forwardRef((props, ref) => {
+	const { id, onInput, value, onFocus, onBlur, switcherLabel } = props;
+	const inputRef = useRef();
+	ref.current = { focus: () => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.focus();
+	} };
+	return jsx(ToggleSwitch, {
+		id,
+		value,
+		inputRef,
+		onInput,
+		onFocus,
+		onBlur,
+		switcherLabel
+	});
+});
+var OptionalFeelCheckbox = forwardRef((props, ref) => {
+	const { id, disabled, onInput, value, onFocus, onBlur } = props;
+	const inputRef = useRef();
+	const handleChange = ({ target }) => {
+		onInput(target.checked);
+	};
+	ref.current = { focus: () => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.focus();
+	} };
+	return jsx("input", {
+		ref: inputRef,
+		id: prefixId$5(id),
+		name: id,
+		onFocus,
+		onBlur,
+		type: "checkbox",
+		class: "bio-properties-panel-input",
+		onChange: handleChange,
+		checked: value,
+		disabled
+	});
+});
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.id
+* @param {String} props.description
+* @param {Boolean} props.debounce
+* @param {Boolean} props.disabled
+* @param {FeelType} [props.feel]
+* @param {String} props.label
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.tooltipContainer
+* @param {Function} props.validate
+* @param {Function} props.show
+* @param {Function} props.example
+* @param {Array} props.variables
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+* @param {string} [props.placeholder]
+* @param {string|import('preact').Component} props.tooltip
+*/
+function FeelEntry(props) {
+	const { element, id, description, debounce, disabled, feel, label, getValue, setValue, tooltipContainer, hostLanguage, singleLine, validate, show = noop$2, example, variables, onFocus, onBlur, placeholder, tooltip } = props;
+	const [validationError, setValidationError] = useState(null);
+	const [localError, setLocalError] = useState(null);
+	let value = getValue(element);
+	useEffect(() => {
+		if (isFunction(validate)) {
+			const newValidationError = validate(value) || null;
+			setValidationError(newValidationError);
+		}
+	}, [value, validate]);
+	const onInput = useStaticCallback((newValue) => {
+		const value = getValue(element);
+		let newValidationError = null;
+		if (isFunction(validate)) newValidationError = validate(newValue) || null;
+		if (newValue !== value) setValue(newValue, newValidationError);
+		setValidationError(newValidationError);
+	});
+	const onError = useCallback((err) => {
+		setLocalError(err);
+	}, []);
+	const error = useError(id) || localError || validationError;
+	return jsxs("div", {
+		class: classnames(props.class, "bio-properties-panel-entry", error ? "has-error" : ""),
+		"data-entry-id": id,
+		children: [
+			createElement(FeelTextfield, {
+				...props,
+				debounce,
+				disabled,
+				feel,
+				id,
+				key: element,
+				label,
+				onInput,
+				onError,
+				onFocus,
+				onBlur,
+				placeholder,
+				example,
+				hostLanguage,
+				singleLine,
+				show,
+				value,
+				variables,
+				tooltipContainer,
+				OptionalComponent: props.OptionalComponent,
+				tooltip
+			}),
+			error && jsx("div", {
+				class: "bio-properties-panel-error",
+				children: error
+			}),
+			jsx(Description, {
+				forId: id,
+				element,
+				value: description
+			})
+		]
+	});
+}
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.id
+* @param {String} props.description
+* @param {Boolean} props.debounce
+* @param {Boolean} props.disabled
+* @param {String} props.max
+* @param {String} props.min
+* @param {String} props.step
+* @param {FeelType} [props.feel]
+* @param {String} props.label
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.tooltipContainer
+* @param {Function} props.validate
+* @param {Function} props.show
+* @param {Function} props.example
+* @param {Array} props.variables
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+*/
+function FeelNumberEntry(props) {
+	return jsx(FeelEntry, {
+		class: "bio-properties-panel-feel-number",
+		OptionalComponent: OptionalFeelNumberField,
+		...props
+	});
+}
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.id
+* @param {String} props.description
+* @param {Boolean} props.debounce
+* @param {Boolean} props.disabled
+* @param {FeelType} [props.feel]
+* @param {String} props.label
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.tooltipContainer
+* @param {Function} props.validate
+* @param {Function} props.show
+* @param {Function} props.example
+* @param {Array} props.variables
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+* @param {string} [props.placeholder]
+*/
+function FeelTextAreaEntry(props) {
+	return jsx(FeelEntry, {
+		class: "bio-properties-panel-feel-textarea",
+		OptionalComponent: OptionalFeelTextArea,
+		...props
+	});
+}
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.id
+* @param {String} props.description
+* @param {Boolean} props.debounce
+* @param {Boolean} props.disabled
+* @param {FeelType} [props.feel]
+* @param {String} props.label
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.tooltipContainer
+* @param {Function} props.validate
+* @param {Function} props.show
+* @param {Function} props.example
+* @param {Array} props.variables
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+*/
+function FeelToggleSwitchEntry(props) {
+	return jsx(FeelEntry, {
+		class: "bio-properties-panel-feel-toggle-switch",
+		OptionalComponent: OptionalFeelToggleSwitch,
+		...props
+	});
+}
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.id
+* @param {String} props.description
+* @param {Boolean} props.debounce
+* @param {Boolean} props.disabled
+* @param {FeelType} [props.feel]
+* @param {String} props.label
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.tooltipContainer
+* @param {Function} props.validate
+* @param {Function} props.show
+* @param {Function} props.example
+* @param {Array} props.variables
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+*/
+function FeelCheckboxEntry(props) {
+	return jsx(FeelEntry, {
+		class: "bio-properties-panel-feel-checkbox",
+		OptionalComponent: OptionalFeelCheckbox,
+		...props
+	});
+}
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.id
+* @param {String} props.description
+* @param {String} props.hostLanguage
+* @param {Boolean} props.singleLine
+* @param {Boolean} props.debounce
+* @param {Boolean} props.disabled
+* @param {FeelType} [props.feel]
+* @param {String} props.label
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.tooltipContainer
+* @param {Function} props.validate
+* @param {Function} props.show
+* @param {Function} props.example
+* @param {Array} props.variables
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+*/
+function FeelTemplatingEntry(props) {
+	return jsx(FeelEntry, {
+		class: "bio-properties-panel-feel-templating",
+		OptionalComponent: TemplatingEditor,
+		...props
+	});
+}
+function isEdited$1(node) {
+	if (!node) return false;
+	if (node.type === "checkbox") return !!node.checked || node.classList.contains("edited");
+	return !!node.value || node.classList.contains("edited");
+}
+function prefixId$5(id) {
+	return `bio-properties-panel-${id}`;
+}
+//#endregion
+//#region src/components/entries/templating/Templating.js
+var noop$1 = () => {};
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.id
+* @param {String} props.description
+* @param {Boolean} props.debounce
+* @param {Boolean} props.disabled
+* @param {String} props.label
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.tooltipContainer
+* @param {Function} props.validate
+* @param {Function} props.show
+*/
+function TemplatingEntry(props) {
+	const { element, id, description, debounce, disabled, label, getValue, setValue, tooltipContainer, validate, show = noop$1 } = props;
+	const [validationError, setValidationError] = useState(null);
+	const [localError, setLocalError] = useState(null);
+	let value = getValue(element);
+	useEffect(() => {
+		if (isFunction(validate)) {
+			const newValidationError = validate(value) || null;
+			setValidationError(newValidationError);
+		}
+	}, [value, validate]);
+	const onInput = useStaticCallback((newValue) => {
+		let newValidationError = null;
+		if (isFunction(validate)) newValidationError = validate(newValue) || null;
+		if (newValue !== value) setValue(newValue, newValidationError);
+		setValidationError(newValidationError);
+	});
+	const onError = useCallback((err) => {
+		setLocalError(err);
+	}, []);
+	const temporaryError = useError(id);
+	const error = localError || temporaryError || validationError;
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-entry", error ? "has-error" : ""),
+		"data-entry-id": id,
+		children: [
+			jsx(Templating, {
+				debounce,
+				disabled,
+				id,
+				label,
+				onInput,
+				onError,
+				show,
+				value,
+				tooltipContainer
+			}, element),
+			error && jsx("div", {
+				class: "bio-properties-panel-error",
+				children: error
+			}),
+			jsx(Description, {
+				forId: id,
+				element,
+				value: description
+			})
+		]
+	});
+}
+function Templating(props) {
+	const { debounce, id, label, onInput, onError, value = "", disabled = false, tooltipContainer } = props;
+	const [localValue, setLocalValue] = useState(value);
+	const editorRef = useShowEntryEvent(id);
+	const containerRef = useRef();
+	const [focus, _setFocus] = useState(void 0);
+	const setFocus = (offset = 0) => {
+		const position = containerRef.current.contains(document.activeElement) ? document.activeElement.selectionStart : Infinity;
+		_setFocus(position + offset);
+	};
+	const handleInputCallback = useMemo(() => {
+		return debounce((newValue) => onInput(newValue.length ? newValue : void 0));
+	}, [onInput, debounce]);
+	const handleInput = (newValue) => {
+		handleInputCallback(newValue);
+		setLocalValue(newValue);
+	};
+	const handleLint = useStaticCallback((lint) => {
+		if (!(lint && lint.length && lint.filter((e) => e.severity === "error") || []).length) {
+			onError(void 0);
+			return;
+		}
+		const error = lint[0];
+		const message = `${error.source}: ${error.message}`;
+		onError(message);
+	});
+	useEffect(() => {
+		if (typeof focus !== "undefined") {
+			editorRef.current.focus(focus);
+			_setFocus(void 0);
+		}
+	}, [focus]);
+	useEffect(() => {
+		if (value === localValue) return;
+		setLocalValue(value ? value : "");
+	}, [value]);
+	return jsxs("div", {
+		class: "bio-properties-panel-feelers",
+		children: [jsx("label", {
+			id: prefixIdLabel(id),
+			class: "bio-properties-panel-label",
+			onClick: () => setFocus(),
+			children: label
+		}), jsx("div", {
+			class: "bio-properties-panel-feelers-input",
+			ref: containerRef,
+			children: jsx(TemplatingEditor, {
+				name: id,
+				onInput: handleInput,
+				contentAttributes: { "aria-labelledby": prefixIdLabel(id) },
+				disabled,
+				onLint: handleLint,
+				value: localValue,
+				ref: editorRef,
+				tooltipContainer
+			})
+		})]
+	});
+}
+function isEdited$6(node) {
+	return node && (!!node.value || node.classList.contains("edited"));
+}
+function prefixIdLabel(id) {
+	return `bio-properties-panel-feelers-${id}-label`;
+}
+//#endregion
+//#region src/components/entries/List.js
+/**
+* Entry for handling lists represented as nested entries.
+*
+* @template Item
+* @param {object} props
+* @param {string} props.id
+* @param {*} props.element
+* @param {Function} props.onAdd
+* @param {import('preact').Component} props.component
+* @param {string} [props.label='<empty>']
+* @param {Function} [props.onRemove]
+* @param {Item[]} [props.items]
+* @param {boolean} [props.open]
+* @param {string|boolean} [props.autoFocusEntry] either a custom selector string or true to focus the first input
+* @returns
+*/
+function List(props) {
+	const { id, element, items = [], component, label = "<empty>", open: shouldOpen, onAdd, onRemove, autoFocusEntry, ...restProps } = props;
+	const entryRef = useRef(null);
+	const [open, setOpen] = useState(!!shouldOpen);
+	const [sticky, setSticky] = useState(false);
+	const hasItems = !!items.length;
+	const toggleOpen = () => hasItems && setOpen(!open);
+	const newItems = useNewItems(items, usePrevious(element) !== element);
+	useEffect(() => {
+		if (open && !hasItems) setOpen(false);
+	}, [open, hasItems]);
+	/**
+	* @param {MouseEvent} event
+	*/
+	function addItem(event) {
+		event.stopPropagation();
+		onAdd();
+		if (!open) setOpen(true);
+	}
+	useStickyIntersectionObserver(entryRef, "div.bio-properties-panel-scroll-container", setSticky);
+	return jsxs("div", {
+		"data-entry-id": id,
+		class: classnames("bio-properties-panel-entry", "bio-properties-panel-list-entry", hasItems ? "" : "empty", open ? "open" : ""),
+		ref: entryRef,
+		children: [jsxs("div", {
+			class: classnames("bio-properties-panel-list-entry-header", sticky && open ? "sticky" : ""),
+			onClick: toggleOpen,
+			children: [jsx("div", {
+				class: classnames("bio-properties-panel-list-entry-header-title", open && "open"),
+				children: label
+			}), jsxs("div", {
+				class: "bio-properties-panel-list-entry-header-buttons",
+				children: [
+					jsxs("button", {
+						type: "button",
+						title: "Create new list item",
+						onClick: addItem,
+						class: "bio-properties-panel-add-entry",
+						children: [jsx(CreateIcon, {}), !hasItems ? jsx("span", {
+							class: "bio-properties-panel-add-entry-label",
+							children: "Create"
+						}) : null]
+					}),
+					hasItems && jsx("div", {
+						title: `List contains ${items.length} item${items.length != 1 ? "s" : ""}`,
+						class: "bio-properties-panel-list-badge",
+						children: items.length
+					}),
+					hasItems && jsx("button", {
+						type: "button",
+						title: "Toggle list item",
+						class: "bio-properties-panel-arrow",
+						children: jsx(ArrowIcon, { class: open ? "bio-properties-panel-arrow-down" : "bio-properties-panel-arrow-right" })
+					})
+				]
+			})]
+		}), hasItems && jsx(ItemsList, {
+			...restProps,
+			autoFocusEntry,
+			component,
+			element,
+			id,
+			items,
+			newItems,
+			onRemove,
+			open
+		})]
+	});
+}
+function ItemsList(props) {
+	const { autoFocusEntry, component: Component, element, id, items, newItems, onRemove, open, ...restProps } = props;
+	const getKey = useKeyFactory();
+	const newItem = newItems[0];
+	useEffect(() => {
+		if (newItem && autoFocusEntry) {
+			const entry = query(`[data-entry-id="${id}"]`);
+			const focusableInput = query(typeof autoFocusEntry === "boolean" ? ".bio-properties-panel-input" : autoFocusEntry, entry);
+			if (focusableInput) {
+				if (isFunction(focusableInput.select)) focusableInput.select();
+				else if (isFunction(focusableInput.focus)) focusableInput.focus();
+			}
+		}
+	}, [
+		newItem,
+		autoFocusEntry,
+		id
+	]);
+	return jsx("ol", {
+		class: classnames("bio-properties-panel-list-entry-items", open ? "open" : ""),
+		children: items.map((item, index) => {
+			const key = getKey(item);
+			return jsxs("li", {
+				class: "bio-properties-panel-list-entry-item",
+				children: [jsx(Component, {
+					...restProps,
+					element,
+					id,
+					index,
+					item,
+					open: item === newItem
+				}), onRemove && jsx("button", {
+					type: "button",
+					title: "Delete item",
+					class: "bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry",
+					onClick: () => onRemove && onRemove(item),
+					children: jsx(DeleteIcon, {})
+				})]
+			}, key);
+		})
+	});
+}
+function useNewItems(items = [], shouldReset) {
+	const previousItems = usePrevious(items.slice()) || [];
+	if (shouldReset) return [];
+	return previousItems ? items.filter((item) => !previousItems.includes(item)) : [];
+}
+//#endregion
+//#region src/components/entries/Select.js
+/**
+* @typedef { { value: string, label: string, disabled: boolean, children: { value: string, label: string, disabled: boolean } } } Option
+*/
+/**
+* Provides basic select input.
+*
+* @param {object} props
+* @param {string} props.id
+* @param {string[]} props.path
+* @param {string} props.label
+* @param {Function} props.onChange
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+* @param {Array<Option>} [props.options]
+* @param {string} props.value
+* @param {boolean} [props.disabled]
+*/
+function Select(props) {
+	const { id, label, onChange, options = [], value = "", disabled, onFocus, onBlur, tooltip } = props;
+	const ref = useShowEntryEvent(id);
+	const [localValue, setLocalValue] = useState(value);
+	const handleChangeCallback = ({ target }) => {
+		onChange(target.value);
+	};
+	const handleChange = (e) => {
+		handleChangeCallback(e);
+		setLocalValue(e.target.value);
+	};
+	useEffect(() => {
+		if (value === localValue) return;
+		setLocalValue(value);
+	}, [value]);
+	return jsxs("div", {
+		class: "bio-properties-panel-select",
+		children: [jsx("label", {
+			for: prefixId$4(id),
+			class: "bio-properties-panel-label",
+			children: jsx(TooltipWrapper, {
+				value: tooltip,
+				forId: id,
+				element: props.element,
+				children: label
+			})
+		}), jsx("select", {
+			ref,
+			id: prefixId$4(id),
+			name: id,
+			class: "bio-properties-panel-input",
+			onInput: handleChange,
+			onFocus,
+			onBlur,
+			value: localValue,
+			disabled,
+			children: options.map((option, idx) => {
+				if (option.children) return jsx("optgroup", {
+					label: option.label,
+					children: option.children.map((child, idx) => jsx("option", {
+						value: child.value,
+						disabled: child.disabled,
+						children: child.label
+					}, idx))
+				}, idx);
+				return jsx("option", {
+					value: option.value,
+					disabled: option.disabled,
+					children: option.label
+				}, idx);
+			})
+		})]
+	});
+}
+/**
+* @param {object} props
+* @param {object} props.element
+* @param {string} props.id
+* @param {string} [props.description]
+* @param {string} props.label
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+* @param {Function} props.getOptions
+* @param {boolean} [props.disabled]
+* @param {Function} [props.validate]
+* @param {string|import('preact').Component} props.tooltip
+*/
+function SelectEntry(props) {
+	const { element, id, description, label, getValue, setValue, getOptions, disabled, onFocus, onBlur, validate, tooltip } = props;
+	const options = getOptions(element);
+	const globalError = useError(id);
+	const [localError, setLocalError] = useState(null);
+	let value = getValue(element);
+	useEffect(() => {
+		if (isFunction(validate)) {
+			const newValidationError = validate(value) || null;
+			setLocalError(newValidationError);
+		}
+	}, [value, validate]);
+	const onChange = (newValue) => {
+		let newValidationError = null;
+		if (isFunction(validate)) newValidationError = validate(newValue) || null;
+		setValue(newValue, newValidationError);
+		setLocalError(newValidationError);
+	};
+	const error = globalError || localError;
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-entry", error ? "has-error" : ""),
+		"data-entry-id": id,
+		children: [
+			jsx(Select, {
+				id,
+				label,
+				value,
+				onChange,
+				onFocus,
+				onBlur,
+				options,
+				disabled,
+				tooltip,
+				element
+			}, element),
+			error && jsx("div", {
+				class: "bio-properties-panel-error",
+				children: error
+			}),
+			jsx(Description, {
+				forId: id,
+				element,
+				value: description
+			})
+		]
+	});
+}
+function isEdited$4(node) {
+	return node && !!node.value;
+}
+function prefixId$4(id) {
+	return `bio-properties-panel-${id}`;
+}
+//#endregion
+//#region src/components/entries/Simple.js
+/**
+* @param {Object} props
+* @param {Function} props.debounce
+* @param {Boolean} [props.disabled]
+* @param {Object} props.element
+* @param {Function} props.getValue
+* @param {String} props.id
+* @param {Function} [props.onBlur]
+* @param {Function} [props.onFocus]
+* @param {Function} props.setValue
+*/
+function Simple(props) {
+	const { debounce, disabled, element, getValue, id, onBlur, onFocus, setValue } = props;
+	const value = getValue(element);
+	const [localValue, setLocalValue] = useState(value);
+	const handleInputCallback = useMemo(() => {
+		return debounce((target) => setValue(target.value.length ? target.value : void 0));
+	}, [setValue, debounce]);
+	const handleInput = (e) => {
+		handleInputCallback(e.target);
+		setLocalValue(e.target.value);
+	};
+	useEffect(() => {
+		if (value === localValue) return;
+		setLocalValue(value);
+	}, [value]);
+	return jsx("div", {
+		class: "bio-properties-panel-simple",
+		children: jsx("input", {
+			id: prefixId$3(id),
+			type: "text",
+			name: id,
+			spellCheck: "false",
+			autoComplete: "off",
+			disabled,
+			class: "bio-properties-panel-input",
+			onInput: handleInput,
+			"aria-label": localValue || "<empty>",
+			onFocus,
+			onBlur,
+			value: localValue
+		}, element)
+	});
+}
+function isEdited$5(node) {
+	return node && !!node.value;
+}
+function prefixId$3(id) {
+	return `bio-properties-panel-${id}`;
+}
+//#endregion
+//#region src/components/entries/TextArea.js
+function resizeToContents(element) {
+	element.style.height = "auto";
+	element.style.height = `${element.scrollHeight + 2}px`;
+}
+function TextArea(props) {
+	const { id, label, debounce, onInput: commitValue, value = "", disabled, monospace, onFocus, onBlur, onPaste, autoResize = true, placeholder, rows = autoResize ? 1 : 2, tooltip } = props;
+	const [localValue, setLocalValue] = useState(value);
+	const ref = useShowEntryEvent(id);
+	const onInput = useCallback((newValue) => {
+		commitValue(newValue === "" ? void 0 : newValue);
+	}, [commitValue]);
+	const visible = useElementVisible(ref.current);
+	/**
+	* @type { import('min-dash').DebouncedFunction }
+	*/
+	const handleInput = useDebounce(onInput, debounce);
+	const handleLocalInput = (e) => {
+		autoResize && resizeToContents(e.target);
+		if (e.target.value === localValue) return;
+		setLocalValue(e.target.value);
+		handleInput(e.target.value);
+	};
+	const handleOnBlur = (e) => {
+		const trimmedValue = e.target.value.trim();
+		handleInput.cancel?.();
+		onInput(trimmedValue);
+		setLocalValue(trimmedValue);
+		if (onBlur) onBlur(e);
+	};
+	const handleOnPaste = (e) => {
+		const input = e.target;
+		const isFieldEmpty = !input.value;
+		const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+		if (isFieldEmpty || isAllSelected) {
+			const trimmedValue = e.clipboardData.getData("text").trim();
+			setLocalValue(trimmedValue);
+			handleInput(trimmedValue);
+			if (onPaste) onPaste(e);
+			e.preventDefault();
+			return;
+		}
+		if (onPaste) onPaste(e);
+	};
+	const handleOnKeyDown = (e) => {
+		if (isCmdWithChar(e)) handleInput.flush();
+	};
+	useLayoutEffect(() => {
+		autoResize && resizeToContents(ref.current);
+	}, []);
+	useLayoutEffect(() => {
+		visible && autoResize && resizeToContents(ref.current);
+	}, [visible]);
+	useEffect(() => {
+		if (value === localValue) return;
+		setLocalValue(value);
+	}, [value]);
+	return jsxs("div", {
+		class: "bio-properties-panel-textarea",
+		children: [jsx("label", {
+			for: prefixId$2(id),
+			class: "bio-properties-panel-label",
+			children: jsx(TooltipWrapper, {
+				value: tooltip,
+				forId: id,
+				element: props.element,
+				children: label
+			})
+		}), jsx("textarea", {
+			ref,
+			id: prefixId$2(id),
+			name: id,
+			spellCheck: "false",
+			class: classnames("bio-properties-panel-input", monospace ? "bio-properties-panel-input-monospace" : "", autoResize ? "auto-resize" : ""),
+			onInput: handleLocalInput,
+			onFocus,
+			onKeyDown: handleOnKeyDown,
+			onBlur: handleOnBlur,
+			onPaste: handleOnPaste,
+			placeholder,
+			rows,
+			value: localValue,
+			disabled,
+			"data-gramm": "false"
+		})]
+	});
+}
+/**
+* @param {object} props
+* @param {object} props.element
+* @param {string} props.id
+* @param {string} props.description
+* @param {boolean} props.debounce
+* @param {string} props.label
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+* @param {Function} props.onPaste
+* @param {number} props.rows
+* @param {boolean} props.monospace
+* @param {Function} [props.validate]
+* @param {boolean} [props.disabled]
+*/
+function TextAreaEntry(props) {
+	const { element, id, description, debounce, label, getValue, setValue, rows, monospace, disabled, validate, onFocus, onBlur, onPaste, placeholder, autoResize, tooltip } = props;
+	const globalError = useError(id);
+	const [localError, setLocalError] = useState(null);
+	let value = getValue(element);
+	useEffect(() => {
+		if (isFunction(validate)) {
+			const newValidationError = validate(value) || null;
+			setLocalError(newValidationError);
+		}
+	}, [value, validate]);
+	const onInput = useStaticCallback((newValue) => {
+		const value = getValue(element);
+		let newValidationError = null;
+		if (isFunction(validate)) newValidationError = validate(newValue) || null;
+		if (newValue !== value) setValue(newValue, newValidationError);
+		setLocalError(newValidationError);
+	});
+	const error = globalError || localError;
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-entry", error ? "has-error" : ""),
+		"data-entry-id": id,
+		children: [
+			jsx(TextArea, {
+				id,
+				label,
+				value,
+				onInput,
+				onFocus,
+				onBlur,
+				onPaste,
+				rows,
+				debounce,
+				monospace,
+				disabled,
+				placeholder,
+				autoResize,
+				tooltip,
+				element
+			}, element),
+			error && jsx("div", {
+				class: "bio-properties-panel-error",
+				children: error
+			}),
+			jsx(Description, {
+				forId: id,
+				element,
+				value: description
+			})
+		]
+	});
+}
+function isEdited$7(node) {
+	return node && !!node.value;
+}
+function prefixId$2(id) {
+	return `bio-properties-panel-${id}`;
+}
+//#endregion
+//#region src/components/entries/TextField.js
+function Textfield(props) {
+	const { debounce, disabled = false, id, label, onInput: commitValue, onFocus, onBlur, onPaste, placeholder, value = "", tooltip } = props;
+	const [localValue, setLocalValue] = useState(value || "");
+	const ref = useShowEntryEvent(id);
+	const onInput = useCallback((newValue) => {
+		commitValue(newValue === "" ? void 0 : newValue);
+	}, [commitValue]);
+	/**
+	* @type { import('min-dash').DebouncedFunction }
+	*/
+	const handleInput = useDebounce(onInput, debounce);
+	const handleOnBlur = (e) => {
+		const trimmedValue = e.target.value.trim();
+		handleInput.cancel?.();
+		onInput(trimmedValue);
+		setLocalValue(trimmedValue);
+		if (onBlur) onBlur(e);
+	};
+	const handleOnPaste = (e) => {
+		const input = e.target;
+		const isFieldEmpty = !input.value;
+		const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+		if (isFieldEmpty || isAllSelected) {
+			const trimmedValue = e.clipboardData.getData("text").trim();
+			setLocalValue(trimmedValue);
+			handleInput(trimmedValue);
+			if (onPaste) onPaste(e);
+			e.preventDefault();
+			return;
+		}
+		if (onPaste) onPaste(e);
+	};
+	const handleLocalInput = (e) => {
+		if (e.target.value === localValue) return;
+		setLocalValue(e.target.value);
+		handleInput(e.target.value);
+	};
+	useEffect(() => {
+		if (value === localValue) return;
+		setLocalValue(value);
+	}, [value]);
+	const handleOnKeyDown = (e) => {
+		if (isCmdWithChar(e)) handleInput.flush();
+	};
+	return jsxs("div", {
+		class: "bio-properties-panel-textfield",
+		children: [jsx("label", {
+			for: prefixId$1(id),
+			class: "bio-properties-panel-label",
+			children: jsx(TooltipWrapper, {
+				value: tooltip,
+				forId: id,
+				element: props.element,
+				children: label
+			})
+		}), jsx("input", {
+			ref,
+			id: prefixId$1(id),
+			type: "text",
+			name: id,
+			spellCheck: "false",
+			autoComplete: "off",
+			disabled,
+			class: "bio-properties-panel-input",
+			onInput: handleLocalInput,
+			onFocus,
+			onKeyDown: handleOnKeyDown,
+			onBlur: handleOnBlur,
+			onPaste: handleOnPaste,
+			placeholder,
+			value: localValue
+		})]
+	});
+}
+/**
+* @param {Object} props
+* @param {Object} props.element
+* @param {String} props.id
+* @param {String} props.description
+* @param {Boolean} props.debounce
+* @param {Boolean} props.disabled
+* @param {String} props.label
+* @param {Function} props.getValue
+* @param {Function} props.setValue
+* @param {Function} props.onFocus
+* @param {Function} props.onBlur
+* @param {string|import('preact').Component} props.tooltip
+* @param {Function} props.validate
+*/
+function TextfieldEntry(props) {
+	const { element, id, description, debounce, disabled, label, getValue, setValue, validate, onFocus, onBlur, onPaste, placeholder, tooltip } = props;
+	const globalError = useError(id);
+	const [localError, setLocalError] = useState(null);
+	let value = getValue(element);
+	useEffect(() => {
+		if (isFunction(validate)) {
+			const newValidationError = validate(value) || null;
+			setLocalError(newValidationError);
+		}
+	}, [value, validate]);
+	const onInput = useStaticCallback((newValue) => {
+		const value = getValue(element);
+		let newValidationError = null;
+		if (isFunction(validate)) newValidationError = validate(newValue) || null;
+		if (newValue !== value) setValue(newValue, newValidationError);
+		setLocalError(newValidationError);
+	});
+	const error = globalError || localError;
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-entry", error ? "has-error" : ""),
+		"data-entry-id": id,
+		children: [
+			jsx(Textfield, {
+				debounce,
+				disabled,
+				id,
+				label,
+				onInput,
+				onFocus,
+				onBlur,
+				onPaste,
+				placeholder,
+				value,
+				tooltip,
+				element
+			}, element),
+			error && jsx("div", {
+				class: "bio-properties-panel-error",
+				children: error
+			}),
+			jsx(Description, {
+				forId: id,
+				element,
+				value: description
+			})
+		]
+	});
+}
+function isEdited$8(node) {
+	return node && !!node.value;
+}
+function prefixId$1(id) {
+	return `bio-properties-panel-${id}`;
+}
+//#endregion
+//#region src/features/debounce-input/debounceInput.js
+var DEFAULT_DEBOUNCE_TIME = 600;
+/**
+* Creates a debounced version of a function, delaying its execution based on `debounceDelay`.
+*
+* - If `debounceDelay` is `false`, the function executes immediately without debouncing.
+* - If a number is provided, the function execution is delayed by the given time in milliseconds.
+*
+* @param { Boolean | Number } [debounceDelay=600]
+*
+* @example
+* const debounce = debounceInput();
+* const debouncedFn = debounce(fn);
+*
+* debouncedFn(); // Executes after 300ms (default) if no further calls occur.
+*/
+function debounceInput(debounceDelay) {
+	/**
+	* Applies debounce to the provided function, with a previously setup delay.
+	*
+	* @template { (...args: any[]) => any } T
+	*
+	* @param {T} fn
+	*
+	* @return { (...p: Parameters<T>) => any }
+	*/
+	return function debounce$1(fn) {
+		if (debounceDelay === false) return fn;
+		var debounceTime = isNumber(debounceDelay) ? debounceDelay : DEFAULT_DEBOUNCE_TIME;
+		return debounce(fn, debounceTime);
+	};
+}
+debounceInput.$inject = ["config.debounceInput"];
+//#endregion
+//#region src/features/debounce-input/index.js
+var debounce_input_default = { debounceInput: ["factory", debounceInput] };
+//#endregion
+//#region src/components/util/dragger.js
+/**
+* Add a dragger that calls back the passed function with
+* { event, delta } on drag.
+*
+* @example
+*
+* function dragMove(event, delta) {
+*   // we are dragging (!!)
+* }
+*
+* domElement.addEventListener('dragstart', dragger(dragMove));
+*
+* @param {Function} fn
+* @param {Element} [dragPreview]
+*
+* @return {Function} drag start callback function
+*/
+function createDragger(fn, dragPreview) {
+	let self;
+	let startX, startY;
+	/** drag start */
+	function onDragStart(event) {
+		self = this;
+		startX = event.clientX;
+		startY = event.clientY;
+		if (event.dataTransfer) event.dataTransfer.setDragImage(dragPreview || emptyCanvas(), 0, 0);
+		document.addEventListener("dragover", onDrag, true);
+		document.addEventListener("dragenter", preventDefault, true);
+		document.addEventListener("dragend", onEnd);
+		document.addEventListener("drop", preventDefault);
+	}
+	function onDrag(event) {
+		const delta = {
+			x: event.clientX - startX,
+			y: event.clientY - startY
+		};
+		return fn.call(self, event, delta);
+	}
+	function onEnd() {
+		document.removeEventListener("dragover", onDrag, true);
+		document.removeEventListener("dragenter", preventDefault, true);
+		document.removeEventListener("dragend", onEnd);
+		document.removeEventListener("drop", preventDefault);
+	}
+	return onDragStart;
+}
+function preventDefault(event) {
+	event.preventDefault();
+	event.stopPropagation();
+}
+function emptyCanvas() {
+	return domify("<canvas width=\"0\" height=\"0\" />");
+}
+//#endregion
+//#region src/features/expression-popup/components/Popup.js
+var noop = () => {};
+/**
+* A generic popup component.
+*
+* @param {Object} props
+* @param {string} [props.className]
+* @param {boolean} [props.delayInitialFocus]
+* @param {{top: number, left: number}} [props.position]
+* @param {number} [props.width]
+* @param {number} [props.height]
+* @param {Function} props.onClose
+* @param {Function} [props.onPostActivate]
+* @param {Function} [props.onPostDeactivate]
+* @param {boolean} [props.returnFocus]
+* @param {boolean} [props.closeOnEscape]
+* @param {string} props.title
+* @param {Ref} [ref]
+*/
+function PopupComponent(props, globalRef) {
+	const { className, delayInitialFocus, position, width, height, onClose, onPostActivate = noop, onPostDeactivate = noop, returnFocus = true, closeOnEscape = true, title } = props;
+	const focusTrapRef = useRef(null);
+	const localRef = useRef(null);
+	const popupRef = globalRef || localRef;
+	const handleKeydown = (event) => {
+		event.stopPropagation();
+		if (closeOnEscape && event.key === "Escape") onClose();
+	};
+	const handleFocus = () => {
+		if (focusTrapRef.current) focusTrapRef.current.activate();
+	};
+	let style = {};
+	if (position) style = {
+		...style,
+		top: position.top + "px",
+		left: position.left + "px"
+	};
+	if (width) style.width = width + "px";
+	if (height) style.height = height + "px";
+	useEffect(() => {
+		if (popupRef.current) popupRef.current.addEventListener("focusin", handleFocus);
+		return () => {
+			if (popupRef.current) popupRef.current.removeEventListener("focusin", handleFocus);
+		};
+	}, [popupRef]);
+	useEffect(() => {
+		if (popupRef.current) {
+			focusTrapRef.current = focusTrap.createFocusTrap(popupRef.current, {
+				clickOutsideDeactivates: true,
+				delayInitialFocus,
+				fallbackFocus: popupRef.current,
+				onPostActivate,
+				onPostDeactivate,
+				returnFocusOnDeactivate: returnFocus
+			});
+			focusTrapRef.current.activate();
+		}
+		return () => focusTrapRef.current && focusTrapRef.current.deactivate();
+	}, [popupRef]);
+	return jsx("div", {
+		"aria-label": title,
+		tabIndex: -1,
+		ref: popupRef,
+		onKeyDown: handleKeydown,
+		role: "dialog",
+		class: classnames("bio-properties-panel-popup", className),
+		style,
+		children: props.children
+	});
+}
+var Popup = forwardRef(PopupComponent);
+Popup.Title = Title;
+Popup.Body = Body;
+Popup.Footer = Footer;
+function Title(props) {
+	const { children, className, draggable, eventBus, title, showCloseButton = false, closeButtonTooltip = "Close popup", onClose, ...rest } = props;
+	const context = useRef({
+		startPosition: null,
+		newPosition: null
+	});
+	const dragPreviewRef = useRef();
+	const titleRef = useRef();
+	const onMove = (event, delta) => {
+		cancel(event);
+		const { x: dx, y: dy } = delta;
+		const newPosition = {
+			x: context.current.startPosition.x + dx,
+			y: context.current.startPosition.y + dy
+		};
+		const popupParent = getPopupParent(titleRef.current);
+		popupParent.style.top = newPosition.y + "px";
+		popupParent.style.left = newPosition.x + "px";
+		eventBus?.fire("feelPopup.dragover", {
+			newPosition,
+			delta
+		});
+	};
+	const onMoveStart = (event) => {
+		createDragger(onMove, dragPreviewRef.current)(event);
+		event.stopPropagation();
+		const bounds = getPopupParent(titleRef.current).getBoundingClientRect();
+		context.current.startPosition = {
+			x: bounds.left,
+			y: bounds.top
+		};
+		eventBus?.fire("feelPopup.dragstart");
+	};
+	const onMoveEnd = () => {
+		context.current.newPosition = null;
+		eventBus?.fire("feelPopup.dragend");
+	};
+	return jsxs("div", {
+		class: classnames("bio-properties-panel-popup__header", draggable && "draggable", className),
+		ref: titleRef,
+		draggable,
+		onDragStart: onMoveStart,
+		onDragEnd: onMoveEnd,
+		...rest,
+		children: [
+			draggable && jsxs(Fragment, { children: [jsx("div", {
+				ref: dragPreviewRef,
+				class: "bio-properties-panel-popup__drag-preview"
+			}), jsx("div", {
+				class: "bio-properties-panel-popup__drag-handle",
+				children: jsx(DragIcon, {})
+			})] }),
+			jsx("div", {
+				class: "bio-properties-panel-popup__title",
+				children: title
+			}),
+			children,
+			showCloseButton && jsx("button", {
+				title: closeButtonTooltip,
+				class: "bio-properties-panel-popup__close",
+				onClick: onClose,
+				children: jsx(CloseIcon, {})
+			})
+		]
+	});
+}
+function Body(props) {
+	const { children, className, ...rest } = props;
+	return jsx("div", {
+		class: classnames("bio-properties-panel-popup__body", className),
+		...rest,
+		children
+	});
+}
+function Footer(props) {
+	const { children, className, ...rest } = props;
+	return jsx("div", {
+		class: classnames("bio-properties-panel-popup__footer", className),
+		...rest,
+		children: props.children
+	});
+}
+function getPopupParent(node) {
+	return node.closest(".bio-properties-panel-popup");
+}
+function cancel(event) {
+	event.preventDefault();
+	event.stopPropagation();
+}
+/**
+* Expression editor popup component
+* @param {ExpressionPopupProps} props
+*/
+function ExpressionPopup$1(props) {
+	const { entryId, onInput, onClose, title, type, value, links, variables, position, hostLanguage, singleLine, sourceElement, tooltipContainer, eventBus, feelLanguageContext } = props;
+	const editorRef = useRef();
+	const popupRef = useRef();
+	const isAutoCompletionOpen = useRef(false);
+	const handleSetReturnFocus = () => {
+		sourceElement && sourceElement.focus();
+	};
+	const onKeyDownCapture = (event) => {
+		if (event.key === "Escape") isAutoCompletionOpen.current = autoCompletionOpen(event.target);
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") {
+			if (!isAutoCompletionOpen.current) {
+				onClose();
+				isAutoCompletionOpen.current = false;
+			}
+		}
+	};
+	useEffect(() => {
+		if (editorRef.current) editorRef.current.focus();
+	}, [editorRef]);
+	return jsxs(Popup, {
+		className: "bio-properties-panel-feel-popup",
+		position,
+		title,
+		returnFocus: false,
+		closeOnEscape: false,
+		delayInitialFocus: false,
+		onPostDeactivate: handleSetReturnFocus,
+		height: 250,
+		width: 700,
+		ref: popupRef,
+		children: [jsx(Popup.Title, {
+			title,
+			eventBus,
+			showCloseButton: true,
+			closeButtonTooltip: "Save and close",
+			onClose,
+			draggable: true,
+			children: jsx(Fragment, { children: (links || []).map((link, index) => {
+				return jsxs("a", {
+					rel: "noreferrer",
+					href: link.href,
+					target: "_blank",
+					class: "bio-properties-panel-feel-popup__title-link",
+					children: [link.title, jsx(LaunchIcon, {})]
+				}, index);
+			}) })
+		}), jsx(Popup.Body, { children: jsxs("div", {
+			onKeyDownCapture,
+			onKeyDown,
+			class: "bio-properties-panel-feel-popup__body",
+			children: [type === "feel" && jsx(ExpressionEditor$1, {
+				enableGutters: true,
+				id: prefixId(entryId),
+				name: entryId,
+				onInput,
+				value,
+				variables,
+				feelLanguageContext,
+				ref: editorRef,
+				tooltipContainer
+			}), type === "feelers" && jsx(TemplatingEditor, {
+				id: prefixId(entryId),
+				contentAttributes: { "aria-label": title },
+				enableGutters: true,
+				hostLanguage,
+				name: entryId,
+				onInput,
+				value,
+				ref: editorRef,
+				singleLine,
+				tooltipContainer
+			})]
+		}) })]
+	});
+}
+function prefixId(id) {
+	return `bio-properties-panel-${id}`;
+}
+function autoCompletionOpen(element) {
+	const editor = element.closest(".cm-editor");
+	return editor ? editor.querySelector(".cm-tooltip-autocomplete") : null;
+}
+//#endregion
+//#region src/features/expression-popup/components/helpers.js
+function getPopupTitle({ element, label }) {
+	let popupTitle = "";
+	if (element && element.type) popupTitle = `${element.type} / `;
+	return `${popupTitle}${label}`;
+}
+function getPopupPosition() {
+	const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+	const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+	return {
+		left: Math.max(0, (viewportWidth - 700) / 2),
+		top: Math.max(0, (viewportHeight - 250) / 2)
+	};
+}
+//#endregion
+//#region src/features/expression-popup/ExpressionPopup.js
+/**
+* FEEL popup component, built as a singleton.
+*
+* In order to implement a custom replacement, handle the following events:
+* - `propertiesPanel.openPopup`
+* - `propertiesPanel.closePopup`
+* - `propertiesPanel.detach`
+*
+* Within the custom renderer, make sure to emit the following events:
+*  - `feelPopup.open` - fired before the popup is mounted
+*  - `feelPopup.opened` - fired after the popup is mounted. Event context contains the DOM node of the popup as `domNode`
+*  - `feelPopup.close` - fired before the popup is unmounted. Event context contains the DOM node of the popup as `domNode`
+*  - `feelPopup.closed` - fired after the popup is unmounted
+*/
+var ExpressionPopup = class {
+	constructor(eventBus, config = {}) {
+		this._eventBus = eventBus;
+		this._config = config;
+		this._isOpen = false;
+		eventBus.on("propertiesPanel.openPopup", (_, context) => {
+			this.open(context.entryId, context, context.sourceElement);
+			return true;
+		});
+		eventBus.on(["propertiesPanel.closePopup", "propertiesPanel.detach"], () => {
+			this.close();
+		});
+	}
+	/**
+	* Check if the FEEL popup is open.
+	* @return {Boolean}
+	*/
+	isOpen() {
+		return this._isOpen;
+	}
+	/**
+	* Open the FEEL popup.
+	*
+	* @param {String} entryId
+	* @param {Object} popupConfig
+	* @param {HTMLElement} sourceElement
+	*/
+	open(entryId, popupConfig, sourceElement) {
+		this.close();
+		this._openPopup({
+			...popupConfig,
+			entryId,
+			sourceElement
+		});
+	}
+	/**
+	* Close the FEEL popup.
+	*/
+	close() {
+		this._closePopup();
+	}
+	_openPopup(context) {
+		const { element, label, sourceElement, type } = context;
+		this._isOpen = true;
+		this._eventBus.fire("propertiesPanelPopup.open", {
+			container: this._config.feelPopupContainer,
+			config: {
+				...context,
+				links: this._config.getFeelPopupLinks?.(type) || [],
+				onClose: () => {
+					this._closePopup();
+					setTimeout(() => {
+						sourceElement && sourceElement.focus();
+					}, 0);
+				},
+				position: getPopupPosition(),
+				title: getPopupTitle({
+					element,
+					label
+				})
+			}
+		});
+	}
+	_closePopup() {
+		if (this._isOpen) {
+			this._isOpen = false;
+			this._eventBus.fire("propertiesPanelPopup.close");
+		}
+	}
+};
+ExpressionPopup.$inject = ["eventBus", "config.propertiesPanel"];
+//#endregion
+//#region src/features/expression-popup/ExpressionPopupRenderer.js
+var ExpressionPopupRenderer = class {
+	constructor(eventBus) {
+		this._eventBus = eventBus;
+		this._container = null;
+		this._element = null;
+		eventBus.on("propertiesPanelPopup.open", (context) => {
+			this._renderPopup(context);
+		});
+		eventBus.on("propertiesPanelPopup.close", () => {
+			this._removePopup();
+		});
+	}
+	_renderPopup(context) {
+		let { container, config } = context;
+		container = this._container = getContainer(container) || document.body;
+		const element = this._element = createElement$1();
+		container.appendChild(element);
+		this._emit("feelPopup.open");
+		render(jsx(ExpressionPopup$1, {
+			...config,
+			eventBus: this._eventBus
+		}), element);
+		this._emit("feelPopup.opened", { domNode: element });
+	}
+	_removePopup() {
+		if (!this._container) return;
+		this._emit("feelPopup.close", { domNode: this._element });
+		render(null, this._element);
+		this._container.removeChild(this._element);
+		this._container = null;
+		this._emit("feelPopup.closed");
+	}
+	_emit(event, context) {
+		this._eventBus.fire(event, context);
+	}
+};
+ExpressionPopupRenderer.$inject = ["eventBus"];
+function createElement$1() {
+	const element = document.createElement("div");
+	element.classList.add("bio-properties-panel-popup-container");
+	return element;
+}
+function getContainer(container) {
+	if (isString(container)) return query(container);
+	return container;
+}
+//#endregion
+//#region src/features/expression-popup/index.js
+var expression_popup_default = {
+	__init__: ["expressionPopup", "expressionPopupRenderer"],
+	expressionPopup: ["type", ExpressionPopup],
+	expressionPopupRenderer: ["type", ExpressionPopupRenderer]
+};
+//#endregion
+export { ArrowIcon, CheckboxEntry, CheckboxGroup, CloseIcon, CollapsibleEntry, CreateIcon, debounce_input_default as DebounceInputModule, DeleteIcon, DescriptionContext, Description as DescriptionEntry, DragIcon, DropdownButton, ErrorsContext, EventContext, expression_popup_default as ExpressionPopupModule, ExternalLinkIcon, FeelCheckboxEntry, FeelEntry, FeelIcon, FeelLanguageContext, FeelNumberEntry, FeelTemplatingEntry, FeelTextAreaEntry, FeelToggleSwitchEntry, Group, Header, HeaderButton, JsonEditorEntry, LaunchIcon, LayoutContext, LayoutContext as PropertiesPanelContext, List as ListEntry, ListGroup, ListItem, NumberFieldEntry, OpenPopupIcon, Placeholder, PropertiesPanel, SelectEntry, Simple as SimpleEntry, TemplatingEntry, TextAreaEntry, TextfieldEntry as TextFieldEntry, ToggleSwitchEntry, TooltipContext, TooltipWrapper as TooltipEntry, isEdited as isCheckboxEntryEdited, isEdited$1 as isFeelEntryEdited, isEdited$2 as isJsonEditorEntryEdited, isEdited$3 as isNumberFieldEntryEdited, isEdited$4 as isSelectEntryEdited, isEdited$5 as isSimpleEntryEdited, isEdited$6 as isTemplatingEntryEdited, isEdited$7 as isTextAreaEntryEdited, isEdited$8 as isTextFieldEntryEdited, isEdited$9 as isToggleSwitchEntryEdited, useDebounce, useDescriptionContext, useElementVisible, useError, useErrors, useEvent, useKeyFactory, useLayoutState, usePrevious, useShowEntryEvent, useStaticCallback, useStickyIntersectionObserver, useTooltipContext };
+
+//# sourceMappingURL=index.esm.js.map