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

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', {
@@ -53678,31 +53700,53 @@ 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 {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 runUnaryTestEvaluation(expressionLanguage, value, expressionContextInfo) {
+    return expressionLanguage.evaluateUnaryTest(value, buildExpressionContext(expressionContextInfo));
+  }
+
+  /**
+   * 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]);
+  }
+
+  /**
+   * Evaluate if condition is met reactively based on the expression language and form data.
    *
    * @param {string | undefined} condition
    *
-   * @returns {boolean} true if condition is met or no condition or condition checker exists
+   * @returns {boolean | null} true if condition is met, false if not, null if no condition or expression language
    */
   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]);
+    return useUnaryTestEvaluation(condition);
   }
 
   /**
@@ -54188,16 +54232,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;
   }
@@ -59049,7 +59093,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 +59145,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 +59232,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 +59250,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 +59270,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 +59283,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 +59347,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       documentMetadata,
       endpoint,
       maxHeight,
-      domId
+      domId,
+      requestInit
     } = props;
     const {
       metadata
@@ -59265,13 +59367,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 +59395,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 +59416,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 +59429,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 +59437,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 +59496,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 +59678,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 +59702,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 +59802,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 +59944,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 +59978,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 +61505,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 +61638,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 +61656,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 +62291,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 +69796,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 +69828,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 +70725,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"
         })]
       })
     });
@@ -82446,9 +82627,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 +84961,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       editorProperties,
       viewerAdditionalModules,
       editorAdditionalModules,
+      editorSlots,
       propertiesPanel: propertiesPanelConfig,
       apiLinkTarget,
       onInit
@@ -84694,7 +85029,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 +85095,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(() => {