@bpmn-io/form-js-playground 1.20.1 → 1.21.1

package/dist/form-playground.umd.js

@@ -585,7 +585,7 @@
    *
    * @return {Object} map with { attrValue => [ a, b, c ] }
    */
-  function groupBy(collection, extractor, grouped = {}) {
+  function groupBy$1(collection, extractor, grouped = {}) {
     extractor = toExtractor(extractor);
     forEach(collection, function (val) {
       let discriminator = extractor(val) || '_';
@@ -600,7 +600,7 @@
   function uniqueBy(extractor, ...collections) {
     extractor = toExtractor(extractor);
     let grouped = {};
-    forEach(collections, c => groupBy(c, extractor, grouped));
+    forEach(collections, c => groupBy$1(c, extractor, grouped));
     let result = map(grouped, function (val, key) {
       return val[0];
     });
@@ -53226,16 +53226,38 @@ Please report this to https://github.com/markedjs/marked.`, e) {
      * @returns {any}
      */
     evaluate(expression, data = {}) {
-      if (!expression) {
+      if (!this.isExpression(expression)) {
         return null;
       }
-      if (!isString$2(expression) || !expression.startsWith('=')) {
+      try {
+        const {
+          value: result
+        } = evaluate$1(expression.slice(1), data);
+        return result;
+      } catch (error) {
+        this._eventBus.fire('error', {
+          error
+        });
+        return null;
+      }
+    }
+
+    /**
+     * Evaluate a unary test expression. Returns null for invalid/missing expressions.
+     *
+     * @param {string} expression
+     * @param {import('../../types').Data} [data]
+     *
+     * @returns {boolean|null}
+     */
+    evaluateUnaryTest(expression, data = {}) {
+      if (!this.isExpression(expression)) {
         return null;
       }
       try {
         const {
           value: result
-        } = evaluate$1(expression.slice(1), data);
+        } = unaryTest(expression.slice(1), data);
         return result;
       } catch (error) {
         this._eventBus.fire('error', {
@@ -53558,6 +53580,110 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     });
     return result;
   }
+
+  /**
+   * Returns the options data for the provided if they can be simply determined, ignoring expression defined options.
+   *
+   * @param {object} formField
+   * @param {object} formData
+   */
+  function getSimpleOptionsData(formField, formData) {
+    const {
+      valuesExpression: optionsExpression,
+      valuesKey: optionsKey,
+      values: staticOptions
+    } = formField;
+    if (optionsExpression) {
+      return null;
+    }
+    return optionsKey ? get$1(formData, [optionsKey]) : staticOptions;
+  }
+
+  /**
+   * Normalizes the provided options data to a format that can be used by the select components.
+   * If the options data is not valid, it is filtered out.
+   *
+   * @param {any[]} optionsData
+   *
+   * @returns {object[]}
+   */
+  function normalizeOptionsData(optionsData) {
+    return optionsData.filter(_isAllowedValue).map(_normalizeOption).filter(o => !isNil$1(o));
+  }
+
+  /**
+   * Creates an options object with default values if no options are provided.
+   *
+   * @param {object} options
+   *
+   * @returns {object}
+   */
+  function createEmptyOptions(options = {}) {
+    const defaults = {};
+
+    // provide default options if valuesKey and valuesExpression are not set
+    if (!options.valuesKey && !options.valuesExpression) {
+      defaults.values = [{
+        label: 'Value',
+        value: 'value'
+      }];
+    }
+    return {
+      ...defaults,
+      ...options
+    };
+  }
+
+  /**
+   * Converts the provided option to a normalized format.
+   * If the option is not valid, null is returned.
+   *
+   * @param {object} option
+   * @param {string} option.label
+   * @param {*} option.value
+   *
+   * @returns
+   */
+  function _normalizeOption(option) {
+    // (1) simple primitive case, use it as both label and value
+    if (_isAllowedPrimitive(option)) {
+      return {
+        value: option,
+        label: `${option}`
+      };
+    }
+    if (isObject(option)) {
+      const isValidLabel = _isValidLabel(option.label);
+
+      // (2) no label provided, but value is a simple primitive, use it as label and value
+      if (!isValidLabel && _isAllowedPrimitive(option.value)) {
+        return {
+          value: option.value,
+          label: `${option.value}`
+        };
+      }
+
+      // (3) both label and value are provided, use them as is
+      if (isValidLabel && _isAllowedValue(option.value)) {
+        return option;
+      }
+    }
+    return null;
+  }
+  function _isAllowedPrimitive(value) {
+    const isAllowedPrimitiveType = ['number', 'string', 'boolean'].includes(typeof value);
+    const isValid = value || value === 0 || value === false;
+    return isAllowedPrimitiveType && isValid;
+  }
+  function _isValidLabel(label) {
+    return label && isString$2(label);
+  }
+  function _isAllowedValue(value) {
+    if (isObject(value)) {
+      return Object.keys(value).length > 0;
+    }
+    return _isAllowedPrimitive(value);
+  }
   const FormRenderContext = G$1({
     Empty: props => {
       return null;
@@ -53598,7 +53724,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     },
     hoverInfo: {
       cleanup: () => {}
-    }
+    },
+    applyVisibilityConditions: true
   });
   const LocalExpressionContext = G$1({
     data: null,
@@ -53678,135 +53805,29 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   /**
    * If the value is a valid expression, it is evaluated and returned. Otherwise, it is returned as-is.
    *
-   * @param {any} expressionLanguage - The expression language to use.
+   * @param {import('../types').ExpressionLanguage} expressionLanguage - The expression language to use.
    * @param {any} value - The static value or expression to evaluate.
    * @param {Object} expressionContextInfo - The context information to use.
    * @returns {any} - Evaluated value or the original value if not an expression.
    */
   function runExpressionEvaluation(expressionLanguage, value, expressionContextInfo) {
-    if (expressionLanguage && expressionLanguage.isExpression(value)) {
+    if (expressionLanguage.isExpression(value)) {
       return expressionLanguage.evaluate(value, buildExpressionContext(expressionContextInfo));
     }
     return value;
   }
 
   /**
-   * Evaluate if condition is met reactively based on the conditionChecker and form data.
+   * Evaluate a value as a unary test expression. Returns null for invalid/missing expressions or
+   * if the expression language is not available.
    *
-   * @param {string | undefined} condition
-   *
-   * @returns {boolean} true if condition is met or no condition or condition checker exists
-   */
-  function useCondition(condition) {
-    const conditionChecker = useService$2('conditionChecker', false);
-    const expressionContextInfo = q$2(LocalExpressionContext);
-    return F$2(() => {
-      return conditionChecker ? conditionChecker.check(condition, buildExpressionContext(expressionContextInfo)) : null;
-    }, [conditionChecker, condition, expressionContextInfo]);
-  }
-
-  /**
-   * Returns the options data for the provided if they can be simply determined, ignoring expression defined options.
-   *
-   * @param {object} formField
-   * @param {object} formData
-   */
-  function getSimpleOptionsData(formField, formData) {
-    const {
-      valuesExpression: optionsExpression,
-      valuesKey: optionsKey,
-      values: staticOptions
-    } = formField;
-    if (optionsExpression) {
-      return null;
-    }
-    return optionsKey ? get$1(formData, [optionsKey]) : staticOptions;
-  }
-
-  /**
-   * Normalizes the provided options data to a format that can be used by the select components.
-   * If the options data is not valid, it is filtered out.
-   *
-   * @param {any[]} optionsData
-   *
-   * @returns {object[]}
+   * @param {import('../types').ExpressionLanguage} expressionLanguage - The expression language to use.
+   * @param {string} value - The unary test expression to evaluate.
+   * @param {Object} expressionContextInfo - The context information to use.
+   * @returns {boolean | null} - Evaluated result, or null if expression is invalid/missing.
    */
-  function normalizeOptionsData(optionsData) {
-    return optionsData.filter(_isAllowedValue).map(_normalizeOption).filter(o => !isNil$1(o));
-  }
-
-  /**
-   * Creates an options object with default values if no options are provided.
-   *
-   * @param {object} options
-   *
-   * @returns {object}
-   */
-  function createEmptyOptions(options = {}) {
-    const defaults = {};
-
-    // provide default options if valuesKey and valuesExpression are not set
-    if (!options.valuesKey && !options.valuesExpression) {
-      defaults.values = [{
-        label: 'Value',
-        value: 'value'
-      }];
-    }
-    return {
-      ...defaults,
-      ...options
-    };
-  }
-
-  /**
-   * Converts the provided option to a normalized format.
-   * If the option is not valid, null is returned.
-   *
-   * @param {object} option
-   * @param {string} option.label
-   * @param {*} option.value
-   *
-   * @returns
-   */
-  function _normalizeOption(option) {
-    // (1) simple primitive case, use it as both label and value
-    if (_isAllowedPrimitive(option)) {
-      return {
-        value: option,
-        label: `${option}`
-      };
-    }
-    if (isObject(option)) {
-      const isValidLabel = _isValidLabel(option.label);
-
-      // (2) no label provided, but value is a simple primitive, use it as label and value
-      if (!isValidLabel && _isAllowedPrimitive(option.value)) {
-        return {
-          value: option.value,
-          label: `${option.value}`
-        };
-      }
-
-      // (3) both label and value are provided, use them as is
-      if (isValidLabel && _isAllowedValue(option.value)) {
-        return option;
-      }
-    }
-    return null;
-  }
-  function _isAllowedPrimitive(value) {
-    const isAllowedPrimitiveType = ['number', 'string', 'boolean'].includes(typeof value);
-    const isValid = value || value === 0 || value === false;
-    return isAllowedPrimitiveType && isValid;
-  }
-  function _isValidLabel(label) {
-    return label && isString$2(label);
-  }
-  function _isAllowedValue(value) {
-    if (isObject(value)) {
-      return Object.keys(value).length > 0;
-    }
-    return _isAllowedPrimitive(value);
+  function runUnaryTestEvaluation(expressionLanguage, value, expressionContextInfo) {
+    return expressionLanguage.evaluateUnaryTest(value, buildExpressionContext(expressionContextInfo));
   }
 
   /**
@@ -54139,6 +54160,19 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }, [expressionLanguage, expressionContextInfo, value]);
   }
 
+  /**
+   * Evaluate a unary test expression reactively. Returns null for invalid/missing expressions.
+   * The function is memoized to minimize re-renders.
+   *
+   * @param {string | undefined} value - A unary test expression to evaluate.
+   * @returns {boolean | null} - Evaluated result, or null if expression is invalid/missing.
+   */
+  function useUnaryTestEvaluation(value) {
+    const expressionLanguage = useService$2('expressionLanguage');
+    const expressionContextInfo = q$2(LocalExpressionContext);
+    return F$2(() => runUnaryTestEvaluation(expressionLanguage, value, expressionContextInfo), [expressionLanguage, expressionContextInfo, value]);
+  }
+
   /**
    * Returns the conditionally filtered data of a form reactively.
    * Memoised to minimize re-renders
@@ -54188,16 +54222,16 @@ Please report this to https://github.com/markedjs/marked.`, e) {
    */
   function useReadonly(formField, properties = {}) {
     const expressionLanguage = useService$2('expressionLanguage');
-    const conditionChecker = useService$2('conditionChecker', false);
-    const expressionContextInfo = q$2(LocalExpressionContext);
     const {
       readonly
     } = formField;
+    const isExpression = expressionLanguage && expressionLanguage.isExpression(readonly);
+    const evaluatedReadonly = useUnaryTestEvaluation(isExpression ? readonly : undefined);
     if (properties.readOnly) {
       return true;
     }
-    if (expressionLanguage && expressionLanguage.isExpression(readonly)) {
-      return conditionChecker ? conditionChecker.check(readonly, buildExpressionContext(expressionContextInfo)) : false;
+    if (isExpression) {
+      return evaluatedReadonly === true;
     }
     return readonly || false;
   }
@@ -54937,7 +54971,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     const {
       Element,
       Hidden,
-      Column
+      Column,
+      applyVisibilityConditions
     } = q$2(FormRenderContext);
     const {
       formId
@@ -54961,7 +54996,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 
     // add precedence: global readonly > form field disabled
     const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
-    const hidden = useCondition(field.conditional && field.conditional.hide || null);
+    const conditionResult = useUnaryTestEvaluation(field.conditional && field.conditional.hide || null);
+    const hidden = applyVisibilityConditions ? conditionResult : null;
     const instanceId = F$2(() => {
       if (!formFieldInstanceRegistry) {
         return null;
@@ -59049,7 +59085,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 
   /**
    * @typedef DocumentEndpointBuilder
-   * @property {(document: DocumentMetadata) => string} buildUrl
+   * @property {(document: DocumentMetadata) => string} [buildUrl]
+   * @property {(document: DocumentMetadata) => RequestInit|undefined} [buildRequestInit]
    */
 
   /**
@@ -59100,13 +59137,18 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         class: `fjs-${type$k}-document-container`,
         id: domId,
         children: data.map((document, index) => {
-          const finalEndpoint = tryCatch(() => documentEndpointBuilder?.buildUrl(document)) ?? document.endpoint;
-          return isValidDocumentEndpoint(finalEndpoint) ? o(DocumentRenderer, {
+          const finalEndpoint = tryCatch(() => documentEndpointBuilder?.buildUrl?.(document)) ?? document.endpoint;
+          if (!isValidDocumentEndpoint(finalEndpoint)) {
+            return null;
+          }
+          const requestInit = getDocumentRequestInit(documentEndpointBuilder, document);
+          return o(DocumentRenderer, {
             documentMetadata: document,
             endpoint: finalEndpoint,
+            requestInit: requestInit,
             maxHeight: maxHeight,
             domId: `${domId}-${index}`
-          }, document.documentId) : null;
+          }, document.documentId);
         })
       }), o(Errors, {
         id: errorMessageId,
@@ -59182,13 +59224,15 @@ Please report this to https://github.com/markedjs/marked.`, e) {
    * @param {string} props.fileName
    * @param {Function} props.onError
    * @param {string} props.errorMessageId
+   * @param {RequestInit|undefined} props.requestInit
    * @returns {import("preact").JSX.Element}
    */
   function PdfRenderer(props) {
     const {
       url,
       onError,
-      errorMessageId
+      errorMessageId,
+      requestInit
     } = props;
     /** @type {ReturnType<typeof import("preact/hooks").useState<null | string>>} */
     const [pdfObjectUrl, setPdfObjectUrl] = h(null);
@@ -59198,7 +59242,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       let objectUrl = null;
       const fetchPdf = async () => {
         try {
-          const response = await fetch(url);
+          const response = await fetch(url, requestInit);
           if (!response.ok) {
             setHasError(true);
             onError();
@@ -59218,7 +59262,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           URL.revokeObjectURL(objectUrl);
         }
       };
-    }, [url, onError]);
+    }, [url, onError, requestInit]);
     return o(k$3, {
       children: [pdfObjectUrl !== null ? o("embed", {
         src: pdfObjectUrl,
@@ -59231,12 +59275,61 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     });
   }
 
+  /**
+   * @param {Object} props
+   * @param {string} props.url
+   * @param {string} props.alt
+   * @param {Function} props.onError
+   * @param {RequestInit|undefined} props.requestInit
+   * @returns {import("preact").JSX.Element}
+   */
+  function ImageRenderer(props) {
+    const {
+      url,
+      alt,
+      onError,
+      requestInit
+    } = props;
+    /** @type {ReturnType<typeof import("preact/hooks").useState<null | string>>} */
+    const [imageObjectUrl, setImageObjectUrl] = h(null);
+    p(() => {
+      /** @type {null | string} */
+      let objectUrl = null;
+      const fetchImage = async () => {
+        try {
+          const response = await fetch(url, requestInit);
+          if (!response.ok) {
+            onError();
+            return;
+          }
+          const blob = await response.blob();
+          objectUrl = URL.createObjectURL(blob);
+          setImageObjectUrl(objectUrl);
+        } catch {
+          onError();
+        }
+      };
+      fetchImage();
+      return () => {
+        if (objectUrl) {
+          URL.revokeObjectURL(objectUrl);
+        }
+      };
+    }, [url, onError, requestInit]);
+    return imageObjectUrl !== null ? o("img", {
+      src: imageObjectUrl,
+      alt: alt,
+      class: `fjs-${type$k}-image`
+    }) : null;
+  }
+
   /**
    *
    * @param {Object} props
    * @param {DocumentMetadata} props.documentMetadata
    * @param {string} props.endpoint
    * @param {string} props.domId
+   * @param {RequestInit|undefined} props.requestInit
    * @param {number|undefined} props.maxHeight
    *
    * @returns {import("preact").JSX.Element}
@@ -59246,7 +59339,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       documentMetadata,
       endpoint,
       maxHeight,
-      domId
+      domId,
+      requestInit
     } = props;
     const {
       metadata
@@ -59265,13 +59359,15 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           maxHeight
         },
         "aria-describedby": hasError ? errorMessageId : undefined,
-        children: [o("img", {
-          src: endpoint,
+        children: [o(ImageRenderer, {
+          url: endpoint,
           alt: metadata.fileName,
-          class: `fjs-${type$k}-image`
+          requestInit: requestInit,
+          onError: () => setHasError(true)
         }), o(DownloadButton, {
           endpoint: endpoint,
           fileName: metadata.fileName,
+          requestInit: requestInit,
           onDownloadError: () => {
             setHasError(true);
           }
@@ -59291,6 +59387,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         children: o(PdfRenderer, {
           url: endpoint,
           fileName: metadata.fileName,
+          requestInit: requestInit,
           onError: () => setHasError(true),
           errorMessageId: errorMessageId
         })
@@ -59311,6 +59408,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       }), o(DownloadButton, {
         endpoint: endpoint,
         fileName: metadata.fileName,
+        requestInit: requestInit,
         onDownloadError: () => {
           setHasError(true);
         }
@@ -59323,6 +59421,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
    * @param {string} props.endpoint
    * @param {string} props.fileName
    * @param {Function} props.onDownloadError
+   * @param {RequestInit|undefined} props.requestInit
    *
    * @returns {import("preact").JSX.Element}
    */
@@ -59330,11 +59429,12 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     const {
       endpoint,
       fileName,
-      onDownloadError
+      onDownloadError,
+      requestInit
     } = props;
     const handleDownload = async () => {
       try {
-        const response = await fetch(endpoint);
+        const response = await fetch(endpoint, requestInit);
         if (!response.ok) {
           onDownloadError();
           return;
@@ -59388,6 +59488,16 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     return isInViewport;
   }
 
+  /**
+   * @param {DocumentEndpointBuilder | null} documentEndpointBuilder
+   * @param {DocumentMetadata} document
+   * @returns {RequestInit|undefined}
+   */
+  function getDocumentRequestInit(documentEndpointBuilder, document) {
+    const requestInit = tryCatch(() => documentEndpointBuilder?.buildRequestInit?.(document));
+    return requestInit !== null && typeof requestInit === 'object' ? requestInit : undefined;
+  }
+
   /**
    * @template T
    * @param {() => T} fn - Function to execute
@@ -59560,6 +59670,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
 
   /**
    * @typedef { import('../types').Schema } Schema
+   * @typedef { import('../types').ExpressionLanguage } ExpressionLanguage
+   * @typedef { import('../types').Templating } Templating
    */
 
   /**
@@ -59582,8 +59694,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
    *
    * @param {Schema} schema
    * @param {object} [options]
-   * @param {any} [options.expressionLanguage]
-   * @param {any} [options.templating]
+   * @param {ExpressionLanguage} [options.expressionLanguage]
+   * @param {Templating} [options.templating]
    * @param {any} [options.formFields]
    * @param {boolean} [options.inputs=true]
    * @param {boolean} [options.outputs=true]
@@ -59682,15 +59794,26 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     return ids;
   };
 
+  /**
+   * @typedef { import('../../types').ExpressionLanguage } ExpressionLanguage
+   */
+
   /**
    * @typedef {object} Condition
    * @property {string} [hide]
    */
 
   class ConditionChecker {
-    constructor(formFieldRegistry, pathRegistry, eventBus) {
+    /**
+     * @param {Object} formFieldRegistry
+     * @param {Object} pathRegistry
+     * @param {ExpressionLanguage} expressionLanguage
+     * @param {Object} eventBus
+     */
+    constructor(formFieldRegistry, pathRegistry, expressionLanguage, eventBus) {
       this._formFieldRegistry = formFieldRegistry;
       this._pathRegistry = pathRegistry;
+      this._expressionLanguage = expressionLanguage;
       this._eventBus = eventBus;
     }
 
@@ -59813,24 +59936,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
      * @returns {boolean|null}
      */
     check(condition, data = {}) {
-      if (!condition) {
-        return null;
-      }
-      if (!isString$2(condition) || !condition.startsWith('=')) {
-        return null;
-      }
-      try {
-        // cut off initial '='
-        const {
-          value: result
-        } = unaryTest(condition.slice(1), data);
-        return result;
-      } catch (error) {
-        this._eventBus.fire('error', {
-          error
-        });
-        return null;
-      }
+      return this._expressionLanguage.evaluateUnaryTest(condition, data);
     }
 
     /**
@@ -59864,7 +59970,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       return Array.isArray(parentObject) && (!parentObject.length || parentObject.every(item => item === undefined));
     }
   }
-  ConditionChecker.$inject = ['formFieldRegistry', 'pathRegistry', 'eventBus'];
+  ConditionChecker.$inject = ['formFieldRegistry', 'pathRegistry', 'expressionLanguage', 'eventBus'];
   const ExpressionLanguageModule = {
     __init__: ['expressionLanguage', 'templating', 'conditionChecker'],
     expressionLanguage: ['type', FeelExpressionLanguage],
@@ -61391,6 +61497,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   function invokeFunction$1(fn, args) {
     return fn.apply(null, args);
   }
+
+  /**
+   * @typedef { import('../types').ExpressionLanguage } ExpressionLanguage
+   */
+
   const EMAIL_PATTERN = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
   const PHONE_PATTERN = /(\+|00)(297|93|244|1264|358|355|376|971|54|374|1684|1268|61|43|994|257|32|229|226|880|359|973|1242|387|590|375|501|1441|591|55|1246|673|975|267|236|1|61|41|56|86|225|237|243|242|682|57|269|238|506|53|5999|61|1345|357|420|49|253|1767|45|1809|1829|1849|213|593|20|291|212|34|372|251|358|679|500|33|298|691|241|44|995|44|233|350|224|590|220|245|240|30|1473|299|502|594|1671|592|852|504|385|509|36|62|44|91|246|353|98|964|354|972|39|1876|44|962|81|76|77|254|996|855|686|1869|82|383|965|856|961|231|218|1758|423|94|266|370|352|371|853|590|212|377|373|261|960|52|692|389|223|356|95|382|976|1670|258|222|1664|596|230|265|60|262|264|687|227|672|234|505|683|31|47|977|674|64|968|92|507|64|51|63|680|675|48|1787|1939|850|351|595|970|689|974|262|40|7|250|966|249|221|65|500|4779|677|232|503|378|252|508|381|211|239|597|421|386|46|268|1721|248|963|1649|235|228|66|992|690|993|670|676|1868|216|90|688|886|255|256|380|598|1|998|3906698|379|1784|58|1284|1340|84|678|681|685|967|27|260|263)(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{4,20}$/;
   const VALIDATE_FEEL_PROPERTIES = ['min', 'max', 'minLength', 'maxLength'];
@@ -61519,6 +61630,12 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
     return errors;
   }
+
+  /**
+   * @param {Object} validate
+   * @param {ExpressionLanguage} expressionLanguage
+   * @param {Object} expressionContextInfo
+   */
   function evaluateFEELValues(validate, expressionLanguage, expressionContextInfo) {
     const evaluatedValidate = {
       ...validate
@@ -61531,6 +61648,13 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     });
     return evaluatedValidate;
   }
+
+  /**
+   * @param {Object} validate
+   * @param {ExpressionLanguage} expressionLanguage
+   * @param {Object} conditionChecker
+   * @param {Object} form
+   */
   function oldEvaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
     const evaluatedValidate = {
       ...validate
@@ -62159,7 +62283,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   // helpers //////
 
   function groupByRow(components, ids) {
-    return groupBy(components, c => {
+    return groupBy$1(components, c => {
       // mitigate missing row by creating new (handle legacy)
       const {
         layout
@@ -69664,7 +69788,26 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     const fillsAndSeparators = F$2(() => {
       return buildFills(groups, fillRoot, separatorFn);
     }, [groups, fillRoot, separatorFn]);
-    return fillsAndSeparators;
+
+    // Framework-agnostic fills from SlotFillManager
+    const editorContext = q$2(FormEditorContext);
+    const slotFillManager = editorContext ? editorContext.getService('slotFillManager', false) : null;
+    const eventBus = editorContext ? editorContext.getService('eventBus', false) : null;
+    const [managerFills, setManagerFills] = h([]);
+    p(() => {
+      if (!eventBus || !slotFillManager) {
+        return;
+      }
+      setManagerFills(slotFillManager.getFills(name));
+      const onChange = () => setManagerFills(slotFillManager.getFills(name));
+      eventBus.on('slotFillManager.changed', onChange);
+      return () => eventBus.off('slotFillManager.changed', onChange);
+    }, [eventBus, slotFillManager, name]);
+    return o(k$3, {
+      children: [fillsAndSeparators, managerFills.map(fill => o(FillContainer, {
+        fill: fill
+      }, fill.fillId))]
+    });
   };
 
   /**
@@ -69677,6 +69820,34 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     children: fill.children
   }, fill.id);
 
+  /**
+   * Mounts a single SlotFillManager fill's render callback into a DOM container.
+   */
+  function FillContainer({
+    fill
+  }) {
+    const containerRef = _$2(null);
+    const cleanupRef = _$2(null);
+    p(() => {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      cleanupRef.current = fill.render(container) || null;
+      return () => {
+        if (typeof cleanupRef.current === 'function') {
+          cleanupRef.current();
+          cleanupRef.current = null;
+        }
+        container.innerHTML = '';
+      };
+    }, [fill]);
+    return o("div", {
+      ref: containerRef,
+      "data-slot-fill": fill.fillId
+    });
+  }
+
   /**
    * Creates an array of fills, with separators inserted between groups.
    *
@@ -70546,6 +70717,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           children: "Drag and drop components here to start designing."
         }), o("span", {
           children: "Use the preview window to test your form."
+        }), o(Slot, {
+          name: "editor-empty-state__footer"
         })]
       })
     });
@@ -70851,7 +71024,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       Element: Element$1,
       Empty,
       Row,
-      hoverInfo: {}
+      hoverInfo: {},
+      applyVisibilityConditions: false
     }), []);
     const formContext = F$2(() => ({
       getService(type, strict = true) {
@@ -82446,9 +82620,162 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
   }
   RenderInjector.$inject = ['eventBus'];
+
+  /**
+   * Framework-agnostic service for managing slot fills.
+   *
+   * Fills are registered as render callbacks: `(container: HTMLElement) => (() => void) | void`.
+   * The optional return value is a cleanup function called when the fill is removed or the slot unmounts.
+   *
+   * @example
+   *
+   * // Via config (simplest):
+   * new FormEditor({
+   *   slots: {
+   *     'editor-empty-state__footer': (container) => {
+   *       container.textContent = 'Hello from vanilla JS';
+   *     }
+   *   }
+   * });
+   *
+   * // Via config (multiple fills per slot):
+   * new FormEditor({
+   *   slots: {
+   *     'editor-empty-state__footer': [
+   *       (container) => { container.textContent = 'First'; },
+   *       { render: (container) => { container.textContent = 'Second'; }, priority: 10 }
+   *     ]
+   *   }
+   * });
+   *
+   * // Via service (runtime):
+   * const slotFillManager = editor.get('slotFillManager');
+   * slotFillManager.addFill('editor-empty-state__footer', 'my-fill', {
+   *   render: (container) => { ... },
+   *   priority: 10,
+   *   group: 'custom'
+   * });
+   */
+  class SlotFillManager {
+    /**
+     * @param {Object} slotsConfig
+     * @param {import('../../core/EventBus').EventBus} eventBus
+     */
+    constructor(slotsConfig, eventBus) {
+      this._eventBus = eventBus;
+
+      /** @type {Array<{ slotName: string, fillId: string, render: Function, priority: number, group: string }>} */
+      this._fills = [];
+      this._populateFromConfig(slotsConfig);
+    }
+
+    /**
+     * Register a fill for a named slot.
+     *
+     * @param {string} slotName - The slot to fill.
+     * @param {string} fillId - Unique identifier for this fill.
+     * @param {Function|Object} options - A render callback `(container) => cleanup`, or `{ render, priority?, group? }`.
+     */
+    addFill(slotName, fillId, options) {
+      const fill = normalizeFill(slotName, fillId, options);
+      this._fills = [...this._fills.filter(f => f.fillId !== fillId), fill];
+      this._eventBus.fire('slotFillManager.changed');
+    }
+
+    /**
+     * Remove a fill by its ID.
+     *
+     * @param {string} fillId
+     */
+    removeFill(fillId) {
+      const remaining = this._fills.filter(f => f.fillId !== fillId);
+      if (remaining.length === this._fills.length) {
+        return;
+      }
+      this._fills = remaining;
+      this._eventBus.fire('slotFillManager.changed');
+    }
+
+    /**
+     * Get fills for a given slot, sorted by group (alphabetical) then priority (descending).
+     *
+     * @param {string} slotName
+     * @returns {Array<{ slotName: string, fillId: string, render: Function, priority: number, group: string }>}
+     */
+    getFills(slotName) {
+      const matching = this._fills.filter(f => f.slotName === slotName);
+      return sortFills(matching);
+    }
+
+    /**
+     * @private
+     */
+    _populateFromConfig(slotsConfig) {
+      Object.entries(slotsConfig || {}).forEach(([slotName, value]) => {
+        if (Array.isArray(value)) {
+          value.forEach((entry, index) => {
+            this.addFill(slotName, `config__${slotName}_${index}`, entry);
+          });
+        } else {
+          this.addFill(slotName, `config__${slotName}`, value);
+        }
+      });
+    }
+  }
+  SlotFillManager.$inject = ['config.slots', 'eventBus'];
+
+  // helpers //////////
+
+  /**
+   * @param {string} slotName
+   * @param {string} fillId
+   * @param {Function|Object} options
+   * @returns {{ slotName: string, fillId: string, render: Function, priority: number, group: string }}
+   */
+  function normalizeFill(slotName, fillId, options) {
+    if (typeof options === 'function') {
+      return {
+        slotName,
+        fillId,
+        render: options,
+        priority: 0,
+        group: 'z_default'
+      };
+    }
+    const {
+      render,
+      priority = 0,
+      group = 'z_default'
+    } = options;
+    return {
+      slotName,
+      fillId,
+      render,
+      priority,
+      group
+    };
+  }
+
+  /**
+   * Sort fills by group (alphabetical) then by priority (descending) within each group.
+   */
+  function sortFills(fills) {
+    const grouped = groupBy(fills, f => f.group);
+    return Object.keys(grouped).sort().flatMap(key => grouped[key].toSorted((a, b) => b.priority - a.priority));
+  }
+  function groupBy(items, keyFn) {
+    return items.reduce((groups, item) => {
+      const key = keyFn(item);
+      return {
+        ...groups,
+        [key]: [...(groups[key] || []), item]
+      };
+    }, {});
+  }
   const RenderInjectionModule = {
-    __init__: ['renderInjector'],
-    renderInjector: ['type', RenderInjector]
+    __init__: ['renderInjector', 'slotFillManager'],
+    renderInjector: ['type', RenderInjector],
+    slotFillManager: ['type', SlotFillManager]
   };
   var _path;
   function _extends() {
@@ -84627,6 +84954,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       editorProperties,
       viewerAdditionalModules,
       editorAdditionalModules,
+      editorSlots,
       propertiesPanel: propertiesPanelConfig,
       apiLinkTarget,
       onInit
@@ -84694,7 +85022,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           ...(editorProperties || {}),
           ariaLabel: 'Form Definition'
         },
-        additionalModules: [...(additionalModules || []), ...(editorAdditionalModules || [])]
+        additionalModules: [...(additionalModules || []), ...(editorAdditionalModules || [])],
+        ...(editorSlots ? {
+          slots: editorSlots
+        } : {})
       });
       formEditor.on('formField.add', ({
         formField
@@ -84757,7 +85088,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         formViewer.destroy();
         formEditor.destroy();
       };
-    }, [additionalModules, editorAdditionalModules, editorProperties, emit, exporterConfig, propertiesPanelConfig, viewerAdditionalModules, viewerProperties]);
+    }, [additionalModules, editorAdditionalModules, editorProperties, editorSlots, emit, exporterConfig, propertiesPanelConfig, viewerAdditionalModules, viewerProperties]);
 
     // initialize data through props
     p(() => {