xmlui 0.10.26 → 0.11.1

package/dist/metadata/{collectedComponentMetadata-BgHIc2Iu.mjs → collectedComponentMetadata-BAI5eK2v.js}

@@ -1197,6 +1197,22 @@ function asyncThrottle(func, wait, options2) {
     throttled(resolve, reject, args);
   });
 }
+const debounceRegistry = /* @__PURE__ */ new Map();
+function debounce(delayMs, func, ...args) {
+  const key = func.toString();
+  const existing = debounceRegistry.get(key);
+  if (existing !== void 0) {
+    clearTimeout(existing.timeoutId);
+  }
+  const timeoutId = setTimeout(() => {
+    const entry = debounceRegistry.get(key);
+    if (entry) {
+      func(...entry.args);
+      debounceRegistry.delete(key);
+    }
+  }, delayMs);
+  debounceRegistry.set(key, { timeoutId, args });
+}
 const ThemeContext = React__default.createContext(void 0);
 const ThemesContext = React__default.createContext(void 0);
 function useTheme() {
@@ -7434,21 +7450,21 @@ const themeComponentRenderer = createComponentRenderer(
   }
 );
 const themeVars$X = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "backgroundColor-navPanel-App": "var(--xmlui-backgroundColor-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "maxWidth-App": "var(--xmlui-maxWidth-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
-const wrapper$k = "_wrapper_ccbox_15";
-const verticalFullHeader = "_verticalFullHeader_ccbox_15";
-const navPanelWrapper = "_navPanelWrapper_ccbox_15";
-const vertical$7 = "_vertical_ccbox_15";
-const contentWrapper$2 = "_contentWrapper_ccbox_33";
-const noScrollbarGutters = "_noScrollbarGutters_ccbox_39";
-const PagesWrapper = "_PagesWrapper_ccbox_46";
-const footerWrapper = "_footerWrapper_ccbox_50";
-const sticky = "_sticky_ccbox_53";
-const horizontal$6 = "_horizontal_ccbox_57";
-const PagesWrapperInner = "_PagesWrapperInner_ccbox_106";
-const scrollWholePage = "_scrollWholePage_ccbox_118";
-const headerWrapper$1 = "_headerWrapper_ccbox_121";
-const content$8 = "_content_ccbox_33";
-const withDefaultContentPadding = "_withDefaultContentPadding_ccbox_217";
+const wrapper$k = "_wrapper_1gy6l_15";
+const verticalFullHeader = "_verticalFullHeader_1gy6l_15";
+const navPanelWrapper = "_navPanelWrapper_1gy6l_15";
+const vertical$7 = "_vertical_1gy6l_15";
+const contentWrapper$2 = "_contentWrapper_1gy6l_33";
+const noScrollbarGutters = "_noScrollbarGutters_1gy6l_39";
+const PagesWrapper = "_PagesWrapper_1gy6l_46";
+const footerWrapper = "_footerWrapper_1gy6l_50";
+const sticky = "_sticky_1gy6l_53";
+const horizontal$6 = "_horizontal_1gy6l_57";
+const PagesWrapperInner = "_PagesWrapperInner_1gy6l_106";
+const scrollWholePage = "_scrollWholePage_1gy6l_118";
+const headerWrapper$1 = "_headerWrapper_1gy6l_121";
+const content$8 = "_content_1gy6l_33";
+const withDefaultContentPadding = "_withDefaultContentPadding_1gy6l_217";
 const styles$1a = {
   themeVars: themeVars$X,
   wrapper: wrapper$k,
@@ -7573,17 +7589,17 @@ SheetTitle.displayName = SheetPrimitive.Title.displayName;
 const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, { ref, className: classnames("text-sm text-muted-foreground", className), ...props }));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 const themeVars$V = `'{"padding-AppHeader": "var(--xmlui-padding-AppHeader)", "paddingHorizontal-AppHeader": "var(--xmlui-paddingHorizontal-AppHeader, var(--xmlui-padding-AppHeader))", "paddingVertical-AppHeader": "var(--xmlui-paddingVertical-AppHeader, var(--xmlui-padding-AppHeader))", "paddingLeft-AppHeader": "var(--xmlui-paddingLeft-AppHeader, var(--xmlui-paddingHorizontal-AppHeader, var(--xmlui-padding-AppHeader)))", "paddingRight-AppHeader": "var(--xmlui-paddingRight-AppHeader, var(--xmlui-paddingHorizontal-AppHeader, var(--xmlui-padding-AppHeader)))", "paddingTop-AppHeader": "var(--xmlui-paddingTop-AppHeader, var(--xmlui-paddingVertical-AppHeader, var(--xmlui-padding-AppHeader)))", "paddingBottom-AppHeader": "var(--xmlui-paddingBottom-AppHeader, var(--xmlui-paddingVertical-AppHeader, var(--xmlui-padding-AppHeader)))", "padding-logo-AppHeader": "var(--xmlui-padding-logo-AppHeader)", "paddingHorizontal-logo-AppHeader": "var(--xmlui-paddingHorizontal-logo-AppHeader, var(--xmlui-padding-logo-AppHeader))", "paddingVertical-logo-AppHeader": "var(--xmlui-paddingVertical-logo-AppHeader, var(--xmlui-padding-logo-AppHeader))", "paddingLeft-logo-AppHeader": "var(--xmlui-paddingLeft-logo-AppHeader, var(--xmlui-paddingHorizontal-logo-AppHeader, var(--xmlui-padding-logo-AppHeader)))", "paddingRight-logo-AppHeader": "var(--xmlui-paddingRight-logo-AppHeader, var(--xmlui-paddingHorizontal-logo-AppHeader, var(--xmlui-padding-logo-AppHeader)))", "paddingTop-logo-AppHeader": "var(--xmlui-paddingTop-logo-AppHeader, var(--xmlui-paddingVertical-logo-AppHeader, var(--xmlui-padding-logo-AppHeader)))", "paddingBottom-logo-AppHeader": "var(--xmlui-paddingBottom-logo-AppHeader, var(--xmlui-paddingVertical-logo-AppHeader, var(--xmlui-padding-logo-AppHeader)))", "border-AppHeader": "var(--xmlui-border-AppHeader)", "borderHorizontal-AppHeader": "var(--xmlui-borderHorizontal-AppHeader, var(--xmlui-border-AppHeader))", "borderVertical-AppHeader": "var(--xmlui-borderVertical-AppHeader, var(--xmlui-border-AppHeader))", "borderLeft-AppHeader": "var(--xmlui-borderLeft-AppHeader, var(--xmlui-borderHorizontal-AppHeader, var(--xmlui-border-AppHeader)))", "borderRight-AppHeader": "var(--xmlui-borderRight-AppHeader, var(--xmlui-borderHorizontal-AppHeader, var(--xmlui-border-AppHeader)))", "borderTop-AppHeader": "var(--xmlui-borderTop-AppHeader, var(--xmlui-borderVertical-AppHeader, var(--xmlui-border-AppHeader)))", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader, var(--xmlui-borderVertical-AppHeader, var(--xmlui-border-AppHeader)))", "borderWidth-AppHeader": "var(--xmlui-borderWidth-AppHeader)", "borderHorizontalWidth-AppHeader": "var(--xmlui-borderHorizontalWidth-AppHeader, var(--xmlui-borderWidth-AppHeader))", "borderLeftWidth-AppHeader": "var(--xmlui-borderLeftWidth-AppHeader, var(--xmlui-borderHorizontalWidth-AppHeader, var(--xmlui-borderWidth-AppHeader)))", "borderRightWidth-AppHeader": "var(--xmlui-borderRightWidth-AppHeader, var(--xmlui-borderHorizontalWidth-AppHeader, var(--xmlui-borderWidth-AppHeader)))", "borderVerticalWidth-AppHeader": "var(--xmlui-borderVerticalWidth-AppHeader, var(--xmlui-borderWidth-AppHeader))", "borderTopWidth-AppHeader": "var(--xmlui-borderTopWidth-AppHeader, var(--xmlui-borderVerticalWidth-AppHeader, var(--xmlui-borderWidth-AppHeader)))", "borderBottomWidth-AppHeader": "var(--xmlui-borderBottomWidth-AppHeader, var(--xmlui-borderVerticalWidth-AppHeader, var(--xmlui-borderWidth-AppHeader)))", "borderStyle-AppHeader": "var(--xmlui-borderStyle-AppHeader)", "borderHorizontalStyle-AppHeader": "var(--xmlui-borderHorizontalStyle-AppHeader, var(--xmlui-borderStyle-AppHeader))", "borderLeftStyle-AppHeader": "var(--xmlui-borderLeftStyle-AppHeader, var(--xmlui-borderHorizontalStyle-AppHeader, var(--xmlui-borderStyle-AppHeader)))", "borderRightStyle-AppHeader": "var(--xmlui-borderRightStyle-AppHeader, var(--xmlui-borderHorizontalStyle-AppHeader, var(--xmlui-borderStyle-AppHeader)))", "borderVerticalStyle-AppHeader": "var(--xmlui-borderVerticalStyle-AppHeader, var(--xmlui-borderStyle-AppHeader))", "borderTopStyle-AppHeader": "var(--xmlui-borderTopStyle-AppHeader, var(--xmlui-borderVerticalStyle-AppHeader, var(--xmlui-borderStyle-AppHeader)))", "borderBottomStyle-AppHeader": "var(--xmlui-borderBottomStyle-AppHeader, var(--xmlui-borderVerticalStyle-AppHeader, var(--xmlui-borderStyle-AppHeader)))", "borderColor-AppHeader": "var(--xmlui-borderColor-AppHeader)", "borderHorizontalColor-AppHeader": "var(--xmlui-borderHorizontalColor-AppHeader, var(--xmlui-borderColor-AppHeader))", "borderLeftColor-AppHeader": "var(--xmlui-borderLeftColor-AppHeader, var(--xmlui-borderHorizontalColor-AppHeader, var(--xmlui-borderColor-AppHeader)))", "borderRightColor-AppHeader": "var(--xmlui-borderRightColor-AppHeader, var(--xmlui-borderHorizontalColor-AppHeader, var(--xmlui-borderColor-AppHeader)))", "borderVerticalColor-AppHeader": "var(--xmlui-borderVerticalColor-AppHeader, var(--xmlui-borderColor-AppHeader))", "borderTopColor-AppHeader": "var(--xmlui-borderTopColor-AppHeader, var(--xmlui-borderVerticalColor-AppHeader, var(--xmlui-borderColor-AppHeader)))", "borderBottomColor-AppHeader": "var(--xmlui-borderBottomColor-AppHeader, var(--xmlui-borderVerticalColor-AppHeader, var(--xmlui-borderColor-AppHeader)))", "borderStartStartRadius-AppHeader": "var(--xmlui-borderStartStartRadius-AppHeader, var(--xmlui-borderRadius-AppHeader))", "borderStartEndRadius-AppHeader": "var(--xmlui-borderStartEndRadius-AppHeader, var(--xmlui-borderRadius-AppHeader))", "borderEndStartRadius-AppHeader": "var(--xmlui-borderEndStartRadius-AppHeader, var(--xmlui-borderRadius-AppHeader))", "borderEndEndRadius-AppHeader": "var(--xmlui-borderEndEndRadius-AppHeader, var(--xmlui-borderRadius-AppHeader))", "width-logo-AppHeader": "var(--xmlui-width-logo-AppHeader)", "alignment-content-AppHeader": "var(--xmlui-alignment-content-AppHeader)", "height-AppHeader": "var(--xmlui-height-AppHeader)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "maxWidth-content-AppHeader": "var(--xmlui-maxWidth-content-AppHeader)", "maxWidth-AppHeader": "var(--xmlui-maxWidth-AppHeader)", "padding-drawerToggle-AppHeader": "var(--xmlui-padding-drawerToggle-AppHeader)"}'`;
-const header$2 = "_header_l3p6p_14";
-const headerInner = "_headerInner_l3p6p_40";
-const full$1 = "_full_l3p6p_58";
-const childrenWrapper = "_childrenWrapper_l3p6p_61";
-const subNavPanelSlot = "_subNavPanelSlot_l3p6p_72";
-const logoAndTitle = "_logoAndTitle_l3p6p_76";
-const logoContainer = "_logoContainer_l3p6p_88";
-const customLogoContainer = "_customLogoContainer_l3p6p_100";
-const rightItems = "_rightItems_l3p6p_108";
-const drawerToggle = "_drawerToggle_l3p6p_134";
-const logoLink = "_logoLink_l3p6p_143";
+const header$2 = "_header_1i887_14";
+const headerInner = "_headerInner_1i887_40";
+const full$1 = "_full_1i887_58";
+const childrenWrapper = "_childrenWrapper_1i887_61";
+const subNavPanelSlot = "_subNavPanelSlot_1i887_72";
+const logoAndTitle = "_logoAndTitle_1i887_76";
+const logoContainer = "_logoContainer_1i887_88";
+const customLogoContainer = "_customLogoContainer_1i887_100";
+const rightItems = "_rightItems_1i887_108";
+const drawerToggle = "_drawerToggle_1i887_134";
+const logoLink = "_logoLink_1i887_143";
 const styles$19 = {
   themeVars: themeVars$V,
   header: header$2,
@@ -19435,13 +19451,14 @@ var FormActionKind = /* @__PURE__ */ ((FormActionKind2) => {
   FormActionKind2["RESET"] = "FormActionKind:RESET";
   return FormActionKind2;
 })(FormActionKind || {});
-function fieldInitialized(uid, value, force = false) {
+function fieldInitialized(uid, value, force = false, noSubmit = false) {
   return {
     type: "FormActionKind:FIELD_INITIALIZED",
     payload: {
       uid,
       value,
-      force
+      force,
+      noSubmit
     }
   };
 }
@@ -20768,14 +20785,20 @@ const formReducer = produce((state, action2) => {
   }
   switch (action2.type) {
     case FormActionKind.FIELD_INITIALIZED: {
-      if (!state.interactionFlags[uid].isDirty || action2.payload.force) {
+      if (action2.payload.value !== void 0 && (!state.interactionFlags[uid].isDirty || action2.payload.force)) {
         set(state.subject, uid, action2.payload.value);
       }
+      if (state.noSubmitFields[uid] === true || action2.payload.noSubmit === true) {
+        state.noSubmitFields[uid] = true;
+      } else {
+        state.noSubmitFields[uid] = false;
+      }
       break;
     }
     case FormActionKind.FIELD_REMOVED: {
       delete state.validationResults[uid];
       delete state.interactionFlags[uid];
+      delete state.noSubmitFields[uid];
       break;
     }
     case FormActionKind.FIELD_VALUE_CHANGED: {
@@ -20891,6 +20914,7 @@ const initialState = {
   validationResults: {},
   generalValidationResults: [],
   interactionFlags: {},
+  noSubmitFields: {},
   submitInProgress: false,
   resetVersion: 0
 };
@@ -20902,12 +20926,14 @@ const defaultProps$N = {
   itemLabelBreak: true,
   keepModalOpenOnSubmit: false,
   swapCancelAndSave: false,
-  hideButtonRowUntilDirty: false
+  hideButtonRowUntilDirty: false,
+  hideButtonRow: false,
+  enableSubmit: true
 };
-function cleanUpSubject(subject) {
+function cleanUpSubject(subject, noSubmitFields) {
   return Object.entries(subject || {}).reduce(
     (acc, [key, value]) => {
-      if (!key.endsWith(UNBOUND_FIELD_SUFFIX)) {
+      if (!key.endsWith(UNBOUND_FIELD_SUFFIX) && !noSubmitFields[key]) {
         acc[key] = value;
       }
       return acc;
@@ -20940,6 +20966,8 @@ const Form = forwardRef(function({
   itemLabelPosition = defaultProps$N.itemLabelPosition,
   keepModalOpenOnSubmit = defaultProps$N.keepModalOpenOnSubmit,
   hideButtonRowUntilDirty,
+  hideButtonRow = defaultProps$N.hideButtonRow,
+  enableSubmit = defaultProps$N.enableSubmit,
   ...rest
 }, ref) {
   const formRef = useRef(null);
@@ -20981,6 +21009,20 @@ const Form = forwardRef(function({
     onCancel == null ? void 0 : onCancel();
     void requestModalFormClose();
   });
+  const doValidate = useEvent(async () => {
+    dispatch(triedToSubmit());
+    const { error: error2, warning: warning2 } = groupInvalidValidationResultsBySeverity(
+      Object.values(formState.validationResults)
+    );
+    const cleanedData = cleanUpSubject(formState.subject, formState.noSubmitFields);
+    return {
+      isValid: error2.length === 0,
+      data: cleanedData,
+      errors: error2,
+      warnings: warning2,
+      validationResults: formState.validationResults
+    };
+  });
   const doSubmit = useEvent(async (event) => {
     var _a2;
     event == null ? void 0 : event.preventDefault();
@@ -20988,21 +21030,18 @@ const Form = forwardRef(function({
       return;
     }
     setConfirmSubmitModalVisible(false);
-    dispatch(triedToSubmit());
-    const { error: error2, warning: warning2 } = groupInvalidValidationResultsBySeverity(
-      Object.values(formState.validationResults)
-    );
-    if (error2.length) {
+    const validationResult = await doValidate();
+    if (!validationResult.isValid) {
       return;
     }
-    if (warning2.length && !confirmSubmitModalVisible) {
+    if (validationResult.warnings.length > 0 && !confirmSubmitModalVisible) {
       setConfirmSubmitModalVisible(true);
       return;
     }
     const prevFocused = document.activeElement;
     dispatch(formSubmitting());
     try {
-      const filteredSubject = cleanUpSubject(formState.subject);
+      const filteredSubject = validationResult.data;
       const canSubmit = await (onWillSubmit == null ? void 0 : onWillSubmit(filteredSubject));
       if (canSubmit === false) {
         dispatch(
@@ -21031,7 +21070,7 @@ const Form = forwardRef(function({
       const fieldValidationResults = {};
       if (e instanceof Error && "errorCategory" in e && e.errorCategory === "GenericBackendError" && ((_a2 = e.details) == null ? void 0 : _a2.issues) && Array.isArray(e.details.issues)) {
         e.details.issues.forEach((issue) => {
-          const validationResult = {
+          const validationResult2 = {
             isValid: false,
             invalidMessage: issue.message,
             severity: issue.severity || "error",
@@ -21039,9 +21078,9 @@ const Form = forwardRef(function({
           };
           if (issue.field !== void 0) {
             fieldValidationResults[issue.field] = fieldValidationResults[issue.field] || [];
-            fieldValidationResults[issue.field].push(validationResult);
+            fieldValidationResults[issue.field].push(validationResult2);
           } else {
-            generalValidationResults.push(validationResult);
+            generalValidationResults.push(validationResult2);
           }
         });
       } else {
@@ -21091,15 +21130,16 @@ const Form = forwardRef(function({
     "cancel"
   );
   const submitButton = useMemo(
-    () => /* @__PURE__ */ jsx(Button, { "data-part-id": PART_SUBMIT_BUTTON, type: "submit", disabled: !isEnabled2, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit"),
-    [isEnabled2, formState.submitInProgress, saveInProgressLabel, saveLabel]
+    () => /* @__PURE__ */ jsx(Button, { "data-part-id": PART_SUBMIT_BUTTON, type: "submit", disabled: !isEnabled2 || !enableSubmit, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit"),
+    [isEnabled2, enableSubmit, formState.submitInProgress, saveInProgressLabel, saveLabel]
   );
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
       reset: doReset,
-      update: updateData
+      update: updateData,
+      validate: doValidate
     });
-  }, [doReset, updateData, registerComponentApi]);
+  }, [doReset, updateData, doValidate, registerComponentApi]);
   let safeButtonRow = /* @__PURE__ */ jsx(Fragment, { children: buttonRow2 || /* @__PURE__ */ jsxs("div", { className: styles$T.buttonRow, children: [
     swapCancelAndSave && [submitButton, cancelButton],
     !swapCancelAndSave && [cancelButton, submitButton]
@@ -21119,7 +21159,7 @@ const Form = forwardRef(function({
       },
       /* @__PURE__ */ jsx(ValidationSummary, { generalValidationResults: formState.generalValidationResults }),
       /* @__PURE__ */ jsx(FormContext.Provider, { value: formContextValue, children }),
-      (!hideButtonRowUntilDirty || isDirty) && safeButtonRow
+      !hideButtonRow && (!hideButtonRowUntilDirty || isDirty) && safeButtonRow
     ),
     confirmSubmitModalVisible && /* @__PURE__ */ jsx(
       ModalDialog,
@@ -21179,8 +21219,8 @@ const FormWithContextVar = forwardRef(function({
         });
       });
     };
-    return { ...cleanUpSubject(formState.subject), update: updateData };
-  }, [formState.subject]);
+    return { ...cleanUpSubject(formState.subject, formState.noSubmitFields), update: updateData };
+  }, [formState.subject, formState.noSubmitFields]);
   const nodeWithItem = useMemo(() => {
     return {
       type: "Fragment",
@@ -21206,6 +21246,8 @@ const FormWithContextVar = forwardRef(function({
       itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak),
       itemLabelWidth: itemLabelWidthCssProps.width,
       hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty),
+      hideButtonRow: extractValue.asOptionalBoolean(node.props.hideButtonRow),
+      enableSubmit: extractValue.asOptionalBoolean(node.props.enableSubmit),
       formState,
       dispatch,
       id: node.uid,
@@ -21305,6 +21347,16 @@ const FormMd = createMetadata({
       type: "boolean",
       defaultValue: defaultProps$N.hideButtonRowUntilDirty
     },
+    hideButtonRow: {
+      description: `This property hides the button row entirely when set to true.`,
+      type: "boolean",
+      defaultValue: defaultProps$N.hideButtonRow
+    },
+    enableSubmit: {
+      description: `This property controls whether the submit button is enabled. When set to false, the submit button is disabled and the form cannot be submitted.`,
+      type: "boolean",
+      defaultValue: defaultProps$N.enableSubmit
+    },
     submitUrl: d(`URL to submit the form data.`),
     submitMethod: {
       description: "This property sets the HTTP method to use when submitting the form data. If not defined, `put` is used when the form has initial data; otherwise, `post`."
@@ -21342,6 +21394,11 @@ const FormMd = createMetadata({
       parameters: {
         data: "An object containing the form data to update."
       }
+    },
+    validate: {
+      description: "This method triggers validation on all form fields without submitting the form. It displays validation errors and returns the validation result along with the cleaned form data. This is useful for implementing custom submit buttons or performing operations that require validated data without actually submitting the form.",
+      signature: "validate(): Promise<{ isValid: boolean, data: Record<string, any>, errors: ValidationResult[], warnings: ValidationResult[], validationResults: Record<string, ValidationResult> }>",
+      returns: "A promise that resolves to an object containing validation status, cleaned data, and detailed validation results."
     }
   },
   themeVars: parseScssVar(styles$T.themeVars),
@@ -31160,10 +31217,14 @@ function Queue({
   //progressFeedback,
   renderProgressFeedback,
   renderResultFeedback,
-  clearAfterFinish = defaultProps$u.clearAfterFinish
+  clearAfterFinish = defaultProps$u.clearAfterFinish,
+  queueState: externalQueueState,
+  dispatch: externalDispatch
 }) {
   const runningActionItemRef = useRef(/* @__PURE__ */ new Set());
-  const [queueState, dispatch] = useReducer(queueReducer, INITIAL_STATE);
+  const [internalQueueState, internalDispatch] = useReducer(queueReducer, INITIAL_STATE);
+  const queueState = externalQueueState ?? internalQueueState;
+  const dispatch = externalDispatch ?? internalDispatch;
   let appContext = useAppContext();
   const enqueueItem = useEvent((item2) => {
     const itemId = generatedId();
@@ -31331,6 +31392,89 @@ function Queue({
   }, [doComplete, doSingle, prevQueue, queue]);
   return null;
 }
+function QueueWithContextVar({
+  node,
+  renderChild: renderChild2,
+  extractValue,
+  lookupEventHandler,
+  registerComponentApi
+}) {
+  const [queueState, dispatch] = useReducer(queueReducer, INITIAL_STATE);
+  const completedItems = useMemo(() => {
+    return Object.values(queueState.queueState).filter((item2) => item2.status === "completed");
+  }, [queueState.queueState]);
+  const queuedItems = useMemo(() => {
+    return Object.values(queueState.queueState);
+  }, [queueState.queueState]);
+  const $completedItems = completedItems;
+  const $queuedItems = queuedItems;
+  return /* @__PURE__ */ jsx(
+    Queue,
+    {
+      queueState,
+      dispatch,
+      registerComponentApi,
+      renderResultFeedback: node.props.resultFeedback ? (completedItems2, queuedItems2) => {
+        return /* @__PURE__ */ jsx(
+          MemoizedItem,
+          {
+            node: node.props.resultFeedback,
+            contextVars: {
+              $completedItems: completedItems2,
+              $queuedItems: queuedItems2
+            },
+            renderChild: renderChild2
+          }
+        );
+      } : void 0,
+      renderProgressFeedback: node.props.progressFeedback ? (completedItems2, queuedItems2) => {
+        return /* @__PURE__ */ jsx(
+          MemoizedItem,
+          {
+            node: node.props.progressFeedback,
+            contextVars: {
+              $completedItems: completedItems2,
+              $queuedItems: queuedItems2
+            },
+            renderChild: renderChild2
+          }
+        );
+      } : void 0,
+      willProcessItem: lookupEventHandler("willProcess", {
+        context: {
+          $completedItems,
+          $queuedItems
+        }
+      }),
+      processItem: lookupEventHandler("process", {
+        signError: false,
+        context: {
+          $completedItems,
+          $queuedItems
+        }
+      }),
+      didProcessItem: lookupEventHandler("didProcess", {
+        context: {
+          $completedItems,
+          $queuedItems
+        }
+      }),
+      processItemError: lookupEventHandler("processError", {
+        context: {
+          $completedItems,
+          $queuedItems
+        }
+      }),
+      onComplete: lookupEventHandler("complete", {
+        context: {
+          $completedItems,
+          $queuedItems
+        }
+      }),
+      clearAfterFinish: extractValue.asOptionalBoolean(node.props.clearAfterFinish)
+    }
+  );
+}
 const COMP$S = "Queue";
 const QueueMd = createMetadata({
   status: "stable",
@@ -31408,41 +31552,13 @@ const queueComponentRenderer = createComponentRenderer(
   QueueMd,
   ({ node, registerComponentApi, lookupEventHandler, renderChild: renderChild2, extractValue }) => {
     return /* @__PURE__ */ jsx(
-      Queue,
+      QueueWithContextVar,
       {
-        registerComponentApi,
-        renderResultFeedback: node.props.resultFeedback ? (completedItems, queuedItems) => {
-          return /* @__PURE__ */ jsx(
-            MemoizedItem,
-            {
-              node: node.props.resultFeedback,
-              contextVars: {
-                $completedItems: completedItems,
-                $queuedItems: queuedItems
-              },
-              renderChild: renderChild2
-            }
-          );
-        } : void 0,
-        renderProgressFeedback: node.props.progressFeedback ? (completedItems, queuedItems) => {
-          return /* @__PURE__ */ jsx(
-            MemoizedItem,
-            {
-              node: node.props.progressFeedback,
-              contextVars: {
-                $completedItems: completedItems,
-                $queuedItems: queuedItems
-              },
-              renderChild: renderChild2
-            }
-          );
-        } : void 0,
-        willProcessItem: lookupEventHandler("willProcess"),
-        processItem: lookupEventHandler("process", { signError: false }),
-        didProcessItem: lookupEventHandler("didProcess"),
-        processItemError: lookupEventHandler("processError"),
-        onComplete: lookupEventHandler("complete"),
-        clearAfterFinish: extractValue.asOptionalBoolean(node.props.clearAfterFinish)
+        node,
+        renderChild: renderChild2,
+        extractValue,
+        lookupEventHandler,
+        registerComponentApi
       }
     );
   }
@@ -31765,7 +31881,7 @@ const ListNative = forwardRef(function DynamicHeightList({
   defaultGroups = EMPTY_ARRAY,
   registerComponentApi,
   borderCollapse: borderCollapse2 = defaultProps$t.borderCollapse,
-  ...rest2
+  ...rest
 }, ref) {
   var _a2;
   const virtualizerRef = useRef(null);
@@ -31912,7 +32028,7 @@ const ListNative = forwardRef(function DynamicHeightList({
   return /* @__PURE__ */ jsx(ListItemTypeContext.Provider, { value: rowTypeContextValue, children: /* @__PURE__ */ jsx(ListContext.Provider, { value: expandContextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      ...rest2,
+      ...rest,
       ref: rootRef,
       style: style2,
       className: classnames(
@@ -39448,12 +39564,14 @@ const TableOfContentsMd = createMetadata({
     [`paddingLeft-${COMP_CHILD}-level-5`]: "$space-6",
     [`paddingLeft-${COMP_CHILD}-level-6`]: "$space-6",
     [`fontWeight-${COMP_CHILD}`]: "$fontWeight-bold",
-    [`fontWeight-${COMP_CHILD}-level-3`]: "normal",
-    [`fontWeight-${COMP_CHILD}-level-4`]: "normal",
-    [`fontWeight-${COMP_CHILD}-level-5`]: "normal",
-    [`fontWeight-${COMP_CHILD}-level-6`]: "normal",
+    [`fontWeight-${COMP_CHILD}-level-2`]: "$fontWeight-medium",
+    [`fontWeight-${COMP_CHILD}-level-3`]: "$fontWeight-normal",
+    [`fontWeight-${COMP_CHILD}-level-4`]: "$fontWeight-normal",
+    [`fontWeight-${COMP_CHILD}-level-5`]: "$fontWeight-normal",
+    [`fontWeight-${COMP_CHILD}-level-6`]: "$fontWeight-normal",
     [`fontStyle-${COMP_CHILD}-level-6`]: "italic",
-    [`color-${COMP_CHILD}--active`]: "$color-primary-500"
+    [`textColor-${COMP_CHILD}--active`]: "$color-primary-400",
+    [`fontWeight-${COMP_CHILD}--active`]: "$fontWeight-bold"
   }
 });
 function IndexAwareTableOfContents(props) {
@@ -44578,7 +44696,8 @@ function BarChart({
     hide: miniMode || hideX,
     height: miniMode || hideX ? 0 : xAxisHeight,
     tick: miniMode || hideTickX ? false : { fill: "currentColor", fontSize },
-    tickFormatter: miniMode || hideTickX ? void 0 : tickFormatterX
+    tickFormatter: miniMode || hideTickX ? void 0 : tickFormatterX,
+    domain: [0, (dataMax) => dataMax * 1.05]
   } : {
     type: "category",
     dataKey: nameKey,
@@ -44607,7 +44726,8 @@ function BarChart({
     hide: miniMode || hideY,
     tickCount: yTickCount,
     tickFormatter: miniMode || hideTickY ? void 0 : tickFormatterY,
-    width: miniMode || hideY ? 0 : yAxisWidth
+    width: miniMode || hideY ? 0 : yAxisWidth,
+    domain: [0, (dataMax) => dataMax * 1.1]
   };
   return /* @__PURE__ */ jsxs(ChartProvider, { value: chartContextValue, children: [
     children,
@@ -45440,7 +45560,8 @@ const LineChart = forwardRef(function LineChart2({
                       hide: miniMode || hideY,
                       tickLine: false,
                       tickFormatter: miniMode ? void 0 : tickFormatterY,
-                      tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }
+                      tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize },
+                      domain: [(dataMin) => dataMin * 0.95, (dataMax) => dataMax * 1.05]
                     }
                   ),
                   !miniMode && !hideTooltip && /* @__PURE__ */ jsx(Tooltip$2, { content: safeTooltipRenderer }),
@@ -47764,14 +47885,15 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.10.26";
+const version = "0.11.1";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
   defaultTo,
   toHashObject,
   findByField,
-  distinct
+  distinct,
+  debounce
 };
 function isoDateString(date) {
   return (!date ? /* @__PURE__ */ new Date() : new Date(date)).toJSON();
@@ -48363,10 +48485,12 @@ async function evalBinaryAsync(evaluator, thisStack, expr, evalContext, thread)
   const l = await completeExprValue(expr.left, thread);
   if (expr.op === "&&" && !l) {
     setExprValue(expr, { value: l }, thread);
+    thisStack.push(l);
     return l;
   }
   if (expr.op === "||" && l) {
     setExprValue(expr, { value: l }, thread);
+    thisStack.push(l);
     return l;
   }
   await evaluator(thisStack, expr.right, evalContext, thread);
@@ -52216,120 +52340,374 @@ const styles$3 = {
   contentWrapper,
   content
 };
+const MotionContent = motion.create(SheetPrimitive.Content);
+const overlayVariants = {
+  visible: { opacity: 1 },
+  hidden: { opacity: 0 }
+};
+const contentVariants = {
+  initial: (custom) => ({
+    opacity: 0,
+    scale: 0.2,
+    x: custom.x - window.innerWidth / 2,
+    y: custom.y - window.innerHeight / 2
+  }),
+  animate: {
+    opacity: 1,
+    scale: 1,
+    x: 0,
+    y: 0
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.2,
+    transition: { duration: 0.2 }
+  }
+};
+function durationToSeconds(durationString) {
+  if (!durationString) {
+    return void 0;
+  }
+  const trimmedString = durationString.trim();
+  if (trimmedString.endsWith("ms")) {
+    const milliseconds = parseFloat(trimmedString);
+    return milliseconds / 1e3;
+  } else if (trimmedString.endsWith("s")) {
+    return parseFloat(trimmedString);
+  } else {
+    return parseFloat(trimmedString);
+  }
+}
+const InspectorDialog = React__default.forwardRef(
+  ({ children, style: style2, isOpen, setIsOpen, clickPosition }, ref) => {
+    const { root: root2, getThemeVar } = useTheme();
+    const modalRef = useRef(null);
+    const composedRef = ref ? composeRefs(ref, modalRef) : modalRef;
+    const [rendered, setRendered] = useState(true);
+    useEffect(() => {
+      var _a2;
+      if (isOpen) {
+        (_a2 = modalRef.current) == null ? void 0 : _a2.focus();
+      }
+    }, [isOpen]);
+    useEffect(() => {
+      if (isOpen) {
+        const timer = setTimeout(() => {
+          document.body.style.pointerEvents = "";
+        }, 0);
+        return () => clearTimeout(timer);
+      } else {
+        document.body.style.pointerEvents = "auto";
+      }
+    }, [isOpen]);
+    if (!root2) {
+      return null;
+    }
+    const onExitComplete = () => {
+      setIsOpen(false);
+    };
+    return /* @__PURE__ */ jsx(SheetPrimitive.Root, { defaultOpen: false, open: isOpen, onOpenChange: setRendered, children: /* @__PURE__ */ jsx(SheetPrimitive.Portal, { container: root2, children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete, children: rendered && /* @__PURE__ */ jsxs(SheetPrimitive.Overlay, { className: styles$3.overlay, forceMount: true, children: [
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          className: styles$3.overlayBg,
+          variants: overlayVariants,
+          initial: "hidden",
+          animate: "visible",
+          exit: "hidden",
+          transition: {
+            duration: 0.2,
+            ease: [0.16, 1, 0.3, 1]
+          }
+        },
+        "overlay"
+      ),
+      /* @__PURE__ */ jsx(
+        MotionContent,
+        {
+          forceMount: true,
+          onPointerDownOutside: (event) => {
+            if (event.target instanceof Element && event.target.closest("._debug-inspect-button") !== null) {
+              event.preventDefault();
+            }
+          },
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              ref: composedRef,
+              className: classnames(styles$3.content, styles$3.contentWrapper),
+              variants: contentVariants,
+              custom: { x: clickPosition.x, y: clickPosition.y },
+              initial: "initial",
+              animate: "animate",
+              exit: "exit",
+              transition: {
+                duration: durationToSeconds(getThemeVar("duration-startAnimation-ModalDialog")) || 0.8,
+                ease: [0.16, 1, 0.3, 1]
+              },
+              style: { ...style2, gap: void 0 },
+              children
+            }
+          )
+        }
+      )
+    ] }) }) }) });
+  }
+);
+InspectorDialog.displayName = "InspectorDialog";
+const TooltipContent = "_TooltipContent_1q9qu_14";
+const styles$2 = {
+  TooltipContent
+};
+const Tooltip$1 = ({ trigger: trigger2, label: label2 }) => {
+  return /* @__PURE__ */ jsx(RadixTooltip.Provider, { children: /* @__PURE__ */ jsxs(RadixTooltip.Root, { children: [
+    /* @__PURE__ */ jsx(RadixTooltip.Trigger, { asChild: true, children: trigger2 }),
+    /* @__PURE__ */ jsx(RadixTooltip.Portal, { children: /* @__PURE__ */ jsx(RadixTooltip.Content, { side: "bottom", align: "start", className: styles$2.TooltipContent, children: label2 }) })
+  ] }) });
+};
 var define_process_env_default$2 = {};
-function ApiInterceptorProvider({
-  interceptor,
-  children,
-  parentInterceptorContext = null,
-  waitForApiInterceptor = false
-}) {
-  const hasParentInterceptorContext = parentInterceptorContext !== null;
-  const [initialized2, setInitialized] = useState(!interceptor);
-  const [forceInitialize, setForceInitialize] = useState(false);
-  const [interceptorWorker, setInterceptorWorker] = useState(null);
-  const [apiInstance, setApiInstance] = useState(null);
-  const useWorker = (interceptor == null ? void 0 : interceptor.useWorker) ?? true;
-  let forceInitializeParent = parentInterceptorContext == null ? void 0 : parentInterceptorContext.forceInitialize;
-  let parentInterceptorWorker = parentInterceptorContext == null ? void 0 : parentInterceptorContext.interceptorWorker;
-  useEffect(() => {
-    if (useWorker) {
-      return;
+const ComponentViewer = () => {
+  const { mockApi, setIsOpen, isOpen, inspectedNode: inspectedNode2, clickPosition, projectCompilation, sources } = useDevTools();
+  const { appGlobals } = useAppContext();
+  const components = useMemo(() => {
+    if (!projectCompilation) {
+      return [];
     }
-    if (!interceptor) {
-      return;
+    return projectCompilation.components.map((component2) => {
+      return component2.markupSource;
+    });
+  }, [projectCompilation]);
+  const value = useMemo(() => {
+    var _a2;
+    const compSrc = (_a2 = inspectedNode2 == null ? void 0 : inspectedNode2.debug) == null ? void 0 : _a2.source;
+    if (!compSrc) {
+      return "";
     }
-    void (async () => {
-      const { initMock } = await import("./initMock-B3UDa-rw.mjs");
-      const apiInstance2 = await initMock(interceptor);
-      setApiInstance(apiInstance2);
-      setInitialized(true);
-    })();
-  }, [interceptor, useWorker]);
-  useEffect(() => {
-    if (!useWorker) {
-      return;
+    if (!sources) {
+      return "";
     }
-    if (!hasParentInterceptorContext) {
-      if (interceptor || forceInitialize) {
-        let interceptorWorker2;
-        void (async () => {
-          if (define_process_env_default$2.VITE_MOCK_ENABLED) {
-            const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
-              useWorker ? import("./apiInterceptorWorker-Dql7QGw2.mjs") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-B3UDa-rw.mjs")
-            ]);
-            if (interceptor || forceInitialize) {
-              const apiInstance2 = await initMock(interceptor || {});
-              interceptorWorker2 = await createApiInterceptorWorker(apiInstance2);
-              const workerFileLocation = normalizePath(
-                define_process_env_default$2.VITE_MOCK_WORKER_LOCATION || "mockServiceWorker.js"
-              );
-              await interceptorWorker2.start({
-                onUnhandledRequest: "bypass",
-                quiet: true,
-                serviceWorker: {
-                  url: workerFileLocation
-                }
-              });
-              setInterceptorWorker(interceptorWorker2);
-            }
-          }
-          setInitialized(true);
-        })();
-        return () => {
-          if (!parentInterceptorWorker) {
-            interceptorWorker2 == null ? void 0 : interceptorWorker2.stop();
-          }
-          setInitialized(false);
-        };
-      } else {
-        setInitialized(true);
-      }
-    } else {
-      if (!interceptor) {
+    const { start: start2, end: end2, fileId } = compSrc;
+    const slicedSrc = sources[fileId].slice(start2, end2);
+    let dropEmptyLines = true;
+    const prunedLines = [];
+    let trimBeginCount = void 0;
+    slicedSrc.split("\n").forEach((line2) => {
+      if (line2.trim() === "" && dropEmptyLines) {
         return;
-      }
-      if (parentInterceptorWorker) {
-        void (async () => {
-          const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
-            import("./apiInterceptorWorker-Dql7QGw2.mjs"),
-            import("./initMock-B3UDa-rw.mjs")
-          ]);
-          const apiInstance2 = await initMock(interceptor);
-          await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
-          setTimeout(() => {
-            setInitialized(true);
-          }, 0);
-        })();
       } else {
-        forceInitializeParent == null ? void 0 : forceInitializeParent();
+        dropEmptyLines = false;
+        prunedLines.push(line2);
+        const startingWhiteSpaces = line2.search(/\S|$/);
+        if (line2.trim() !== "" && (trimBeginCount === void 0 || startingWhiteSpaces < trimBeginCount)) {
+          trimBeginCount = startingWhiteSpaces;
+        }
       }
+    });
+    return prunedLines.map((line2) => line2.slice(trimBeginCount).replace(/inspect="true"/g, "")).join("\n");
+  }, [inspectedNode2, sources]);
+  return define_process_env_default$2.VITE_USER_COMPONENTS_Inspect !== "false" && isOpen && inspectedNode2 !== null ? /* @__PURE__ */ jsx(InspectorDialog, { isOpen, setIsOpen, clickPosition, children: /* @__PURE__ */ jsx(
+    AppWithCodeViewNative,
+    {
+      height: "500px",
+      allowPlaygroundPopup: true,
+      initiallyShowCode: (appGlobals == null ? void 0 : appGlobals.initiallyShowCode) ?? true,
+      splitView: true,
+      controlsWidth: "120px",
+      closeButton: /* @__PURE__ */ jsx(
+        Tooltip$1,
+        {
+          trigger: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: styles$e.headerButton,
+              onClick: () => {
+                setIsOpen(false);
+              },
+              children: /* @__PURE__ */ jsx(AiOutlineClose, {})
+            }
+          ),
+          label: "Close"
+        }
+      ),
+      markdown: `\`\`\`xmlui
+${value}
+\`\`\``,
+      api: mockApi,
+      app: value,
+      components
     }
-  }, [
-    useWorker,
-    forceInitialize,
-    hasParentInterceptorContext,
-    interceptor,
-    forceInitializeParent,
-    parentInterceptorWorker
-  ]);
-  const isMocked = useCallback(
-    (url) => interceptor !== void 0 && !!define_process_env_default$2.VITE_MOCK_ENABLED,
-    [interceptor]
-  );
-  const doForceInitialize = useCallback(() => {
-    setForceInitialize(true);
-  }, []);
-  const contextValue2 = useMemo(() => {
+  ) }) : null;
+};
+var define_process_env_default$1 = {};
+const AppWrapper = ({
+  node,
+  previewMode = false,
+  routerBaseName: baseName = "",
+  contributes = EMPTY_OBJECT,
+  globalProps,
+  standalone,
+  trackContainerHeight,
+  decorateComponentsWithTestId,
+  debugEnabled,
+  defaultTheme,
+  defaultTone,
+  resources,
+  resourceMap,
+  sources,
+  children,
+  projectCompilation,
+  onInit
+}) => {
+  if (previewMode) {
+    HelmetProvider.canUseDOM = false;
+  }
+  const siteName = (globalProps == null ? void 0 : globalProps.name) || "XMLUI app";
+  const useHashBasedRouting = (globalProps == null ? void 0 : globalProps.useHashBasedRouting) ?? true;
+  const dynamicChildren = /* @__PURE__ */ jsxs(HelmetProvider, { children: [
+    /* @__PURE__ */ jsx(Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }),
+    /* @__PURE__ */ jsxs(LoggerProvider, { children: [
+      /* @__PURE__ */ jsx(LoggerInitializer, {}),
+      /* @__PURE__ */ jsx(IconProvider, { children: /* @__PURE__ */ jsx(
+        ThemeProvider,
+        {
+          resourceMap,
+          themes: contributes.themes,
+          defaultTheme,
+          defaultTone,
+          resources,
+          children: /* @__PURE__ */ jsx(
+            InspectorProvider,
+            {
+              sources,
+              projectCompilation,
+              mockApi: globalProps == null ? void 0 : globalProps.demoMockApi,
+              children: /* @__PURE__ */ jsx(ConfirmationModalContextProvider, { children: /* @__PURE__ */ jsxs(
+                AppContent,
+                {
+                  onInit,
+                  rootContainer: node,
+                  routerBaseName: baseName,
+                  globalProps,
+                  standalone,
+                  decorateComponentsWithTestId,
+                  debugEnabled,
+                  trackContainerHeight,
+                  children: [
+                    /* @__PURE__ */ jsx(ComponentViewer, {}),
+                    children
+                  ]
+                }
+              ) })
+            }
+          )
+        }
+      ) })
+    ] })
+  ] });
+  const Router = previewMode ? MemoryRouter : useHashBasedRouting ? HashRouter : BrowserRouter;
+  const shouldSkipClientRouter = previewMode ? false : typeof window === "undefined" || define_process_env_default$1.VITE_REMIX;
+  return /* @__PURE__ */ jsx(ErrorBoundary, { node, location: "root-outer", children: /* @__PURE__ */ jsxs(QueryClientProvider, { client: queryClient, children: [
+    !!shouldSkipClientRouter && dynamicChildren,
+    !shouldSkipClientRouter && /* @__PURE__ */ jsx(Router, { basename: Router === HashRouter ? void 0 : baseName, children: dynamicChildren })
+  ] }) });
+};
+enableMapSet();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+});
+function AppRoot({
+  apiInterceptor,
+  contributes,
+  node,
+  decorateComponentsWithTestId,
+  debugEnabled,
+  defaultTheme,
+  defaultTone,
+  resources,
+  globalProps,
+  standalone,
+  trackContainerHeight,
+  routerBaseName,
+  previewMode,
+  resourceMap,
+  sources,
+  extensionManager,
+  children,
+  projectCompilation,
+  isNested = false,
+  onInit
+}) {
+  const rootNode = useMemo(() => {
+    const themedRoot = {
+      type: "Theme",
+      props: {
+        root: true
+      },
+      children: [node]
+    };
     return {
-      interceptorWorker,
-      apiInstance,
-      initialized: initialized2,
-      forceInitialize: doForceInitialize,
-      isMocked
+      type: "Container",
+      uid: "root",
+      children: [themedRoot],
+      uses: []
     };
-  }, [interceptorWorker, apiInstance, initialized2, doForceInitialize, isMocked]);
-  return /* @__PURE__ */ jsx(ApiInterceptorContext.Provider, { value: contextValue2, children: waitForApiInterceptor && !initialized2 ? null : children });
+  }, [node]);
+  if (projectCompilation) {
+    const entryDeps = projectCompilation.entrypoint.dependencies;
+    getTransitiveDependencies(entryDeps, projectCompilation.components);
+  }
+  const enhancedGlobalProps = useMemo(() => ({
+    ...globalProps,
+    isNested
+  }), [globalProps, isNested]);
+  return /* @__PURE__ */ jsx(ComponentProvider, { contributes, extensionManager, children: /* @__PURE__ */ jsx(StyleProvider, { children: /* @__PURE__ */ jsx(DebugViewProvider, { debugConfig: globalProps == null ? void 0 : globalProps.debug, children: /* @__PURE__ */ jsx(
+    AppWrapper,
+    {
+      projectCompilation,
+      resourceMap,
+      apiInterceptor,
+      node: rootNode,
+      contributes,
+      resources,
+      routerBaseName,
+      decorateComponentsWithTestId,
+      debugEnabled,
+      defaultTheme,
+      defaultTone,
+      globalProps: enhancedGlobalProps,
+      standalone,
+      trackContainerHeight,
+      previewMode,
+      sources,
+      onInit,
+      children
+    }
+  ) }) }) });
+}
+function getTransitiveDependencies(directCompDepNames, components) {
+  const allDepsByCompName = components.reduce(
+    function addDepsByNameToCollection(collection, { definition: { name }, dependencies }) {
+      return collection.set(name, dependencies);
+    },
+    /* @__PURE__ */ new Map()
+  );
+  const transitiveDeps = /* @__PURE__ */ new Set();
+  populateTransitiveDeps(directCompDepNames);
+  return transitiveDeps;
+  function populateTransitiveDeps(directCompDepNames2) {
+    if (!directCompDepNames2) return;
+    for (const directDep of directCompDepNames2) {
+      if (!transitiveDeps.has(directDep)) {
+        transitiveDeps.add(directDep);
+        const depsOfDirectDep = allDepsByCompName.get(directDep);
+        populateTransitiveDeps(depsOfDirectDep);
+      }
+    }
+  }
 }
 var SyntaxKind = /* @__PURE__ */ ((SyntaxKind2) => {
   SyntaxKind2[SyntaxKind2["Unknown"] = 0] = "Unknown";
@@ -55151,374 +55529,120 @@ function createDocumentCursor(text2) {
     return pos;
   }
 }
-const MotionContent = motion.create(SheetPrimitive.Content);
-const overlayVariants = {
-  visible: { opacity: 1 },
-  hidden: { opacity: 0 }
-};
-const contentVariants = {
-  initial: (custom) => ({
-    opacity: 0,
-    scale: 0.2,
-    x: custom.x - window.innerWidth / 2,
-    y: custom.y - window.innerHeight / 2
-  }),
-  animate: {
-    opacity: 1,
-    scale: 1,
-    x: 0,
-    y: 0
-  },
-  exit: {
-    opacity: 0,
-    scale: 0.2,
-    transition: { duration: 0.2 }
-  }
-};
-function durationToSeconds(durationString) {
-  if (!durationString) {
-    return void 0;
-  }
-  const trimmedString = durationString.trim();
-  if (trimmedString.endsWith("ms")) {
-    const milliseconds = parseFloat(trimmedString);
-    return milliseconds / 1e3;
-  } else if (trimmedString.endsWith("s")) {
-    return parseFloat(trimmedString);
-  } else {
-    return parseFloat(trimmedString);
-  }
-}
-const InspectorDialog = React__default.forwardRef(
-  ({ children, style: style2, isOpen, setIsOpen, clickPosition }, ref) => {
-    const { root: root2, getThemeVar } = useTheme();
-    const modalRef = useRef(null);
-    const composedRef = ref ? composeRefs(ref, modalRef) : modalRef;
-    const [rendered, setRendered] = useState(true);
-    useEffect(() => {
-      var _a2;
-      if (isOpen) {
-        (_a2 = modalRef.current) == null ? void 0 : _a2.focus();
-      }
-    }, [isOpen]);
-    useEffect(() => {
-      if (isOpen) {
-        const timer = setTimeout(() => {
-          document.body.style.pointerEvents = "";
-        }, 0);
-        return () => clearTimeout(timer);
-      } else {
-        document.body.style.pointerEvents = "auto";
-      }
-    }, [isOpen]);
-    if (!root2) {
-      return null;
-    }
-    const onExitComplete = () => {
-      setIsOpen(false);
-    };
-    return /* @__PURE__ */ jsx(SheetPrimitive.Root, { defaultOpen: false, open: isOpen, onOpenChange: setRendered, children: /* @__PURE__ */ jsx(SheetPrimitive.Portal, { container: root2, children: /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete, children: rendered && /* @__PURE__ */ jsxs(SheetPrimitive.Overlay, { className: styles$3.overlay, forceMount: true, children: [
-      /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          className: styles$3.overlayBg,
-          variants: overlayVariants,
-          initial: "hidden",
-          animate: "visible",
-          exit: "hidden",
-          transition: {
-            duration: 0.2,
-            ease: [0.16, 1, 0.3, 1]
-          }
-        },
-        "overlay"
-      ),
-      /* @__PURE__ */ jsx(
-        MotionContent,
-        {
-          forceMount: true,
-          onPointerDownOutside: (event) => {
-            if (event.target instanceof Element && event.target.closest("._debug-inspect-button") !== null) {
-              event.preventDefault();
-            }
-          },
-          children: /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              ref: composedRef,
-              className: classnames(styles$3.content, styles$3.contentWrapper),
-              variants: contentVariants,
-              custom: { x: clickPosition.x, y: clickPosition.y },
-              initial: "initial",
-              animate: "animate",
-              exit: "exit",
-              transition: {
-                duration: durationToSeconds(getThemeVar("duration-startAnimation-ModalDialog")) || 0.8,
-                ease: [0.16, 1, 0.3, 1]
-              },
-              style: { ...style2, gap: void 0 },
-              children
-            }
-          )
-        }
-      )
-    ] }) }) }) });
-  }
-);
-InspectorDialog.displayName = "InspectorDialog";
-const TooltipContent = "_TooltipContent_1q9qu_14";
-const styles$2 = {
-  TooltipContent
-};
-const Tooltip$1 = ({ trigger: trigger2, label: label2 }) => {
-  return /* @__PURE__ */ jsx(RadixTooltip.Provider, { children: /* @__PURE__ */ jsxs(RadixTooltip.Root, { children: [
-    /* @__PURE__ */ jsx(RadixTooltip.Trigger, { asChild: true, children: trigger2 }),
-    /* @__PURE__ */ jsx(RadixTooltip.Portal, { children: /* @__PURE__ */ jsx(RadixTooltip.Content, { side: "bottom", align: "start", className: styles$2.TooltipContent, children: label2 }) })
-  ] }) });
-};
-var define_process_env_default$1 = {};
-const ComponentViewer = () => {
-  const { mockApi, setIsOpen, isOpen, inspectedNode: inspectedNode2, clickPosition, projectCompilation, sources } = useDevTools();
-  const { appGlobals } = useAppContext();
-  const components = useMemo(() => {
-    if (!projectCompilation) {
-      return [];
+var define_process_env_default = {};
+function ApiInterceptorProvider({
+  interceptor,
+  children,
+  parentInterceptorContext = null,
+  waitForApiInterceptor = false
+}) {
+  const hasParentInterceptorContext = parentInterceptorContext !== null;
+  const [initialized2, setInitialized] = useState(!interceptor);
+  const [forceInitialize, setForceInitialize] = useState(false);
+  const [interceptorWorker, setInterceptorWorker] = useState(null);
+  const [apiInstance, setApiInstance] = useState(null);
+  const useWorker = (interceptor == null ? void 0 : interceptor.useWorker) ?? true;
+  let forceInitializeParent = parentInterceptorContext == null ? void 0 : parentInterceptorContext.forceInitialize;
+  let parentInterceptorWorker = parentInterceptorContext == null ? void 0 : parentInterceptorContext.interceptorWorker;
+  useEffect(() => {
+    if (useWorker) {
+      return;
     }
-    return projectCompilation.components.map((component2) => {
-      return component2.markupSource;
-    });
-  }, [projectCompilation]);
-  const value = useMemo(() => {
-    var _a2;
-    const compSrc = (_a2 = inspectedNode2 == null ? void 0 : inspectedNode2.debug) == null ? void 0 : _a2.source;
-    if (!compSrc) {
-      return "";
+    if (!interceptor) {
+      return;
     }
-    if (!sources) {
-      return "";
+    void (async () => {
+      const { initMock } = await import("./initMock-CekNG5Ax.js");
+      const apiInstance2 = await initMock(interceptor);
+      setApiInstance(apiInstance2);
+      setInitialized(true);
+    })();
+  }, [interceptor, useWorker]);
+  useEffect(() => {
+    if (!useWorker) {
+      return;
     }
-    const { start: start2, end: end2, fileId } = compSrc;
-    const slicedSrc = sources[fileId].slice(start2, end2);
-    let dropEmptyLines = true;
-    const prunedLines = [];
-    let trimBeginCount = void 0;
-    slicedSrc.split("\n").forEach((line2) => {
-      if (line2.trim() === "" && dropEmptyLines) {
+    if (!hasParentInterceptorContext) {
+      if (interceptor || forceInitialize) {
+        let interceptorWorker2;
+        void (async () => {
+          if (define_process_env_default.VITE_MOCK_ENABLED) {
+            const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
+              useWorker ? import("./apiInterceptorWorker-Dql7QGw2.js") : Promise.resolve({ createApiInterceptorWorker: () => null }),
+              import("./initMock-CekNG5Ax.js")
+            ]);
+            if (interceptor || forceInitialize) {
+              const apiInstance2 = await initMock(interceptor || {});
+              interceptorWorker2 = await createApiInterceptorWorker(apiInstance2);
+              const workerFileLocation = normalizePath(
+                define_process_env_default.VITE_MOCK_WORKER_LOCATION || "mockServiceWorker.js"
+              );
+              await interceptorWorker2.start({
+                onUnhandledRequest: "bypass",
+                quiet: true,
+                serviceWorker: {
+                  url: workerFileLocation
+                }
+              });
+              setInterceptorWorker(interceptorWorker2);
+            }
+          }
+          setInitialized(true);
+        })();
+        return () => {
+          if (!parentInterceptorWorker) {
+            interceptorWorker2 == null ? void 0 : interceptorWorker2.stop();
+          }
+          setInitialized(false);
+        };
+      } else {
+        setInitialized(true);
+      }
+    } else {
+      if (!interceptor) {
         return;
+      }
+      if (parentInterceptorWorker) {
+        void (async () => {
+          const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
+            import("./apiInterceptorWorker-Dql7QGw2.js"),
+            import("./initMock-CekNG5Ax.js")
+          ]);
+          const apiInstance2 = await initMock(interceptor);
+          await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
+          setTimeout(() => {
+            setInitialized(true);
+          }, 0);
+        })();
       } else {
-        dropEmptyLines = false;
-        prunedLines.push(line2);
-        const startingWhiteSpaces = line2.search(/\S|$/);
-        if (line2.trim() !== "" && (trimBeginCount === void 0 || startingWhiteSpaces < trimBeginCount)) {
-          trimBeginCount = startingWhiteSpaces;
-        }
+        forceInitializeParent == null ? void 0 : forceInitializeParent();
       }
-    });
-    return prunedLines.map((line2) => line2.slice(trimBeginCount).replace(/inspect="true"/g, "")).join("\n");
-  }, [inspectedNode2, sources]);
-  return define_process_env_default$1.VITE_USER_COMPONENTS_Inspect !== "false" && isOpen && inspectedNode2 !== null ? /* @__PURE__ */ jsx(InspectorDialog, { isOpen, setIsOpen, clickPosition, children: /* @__PURE__ */ jsx(
-    AppWithCodeViewNative,
-    {
-      height: "500px",
-      allowPlaygroundPopup: true,
-      initiallyShowCode: (appGlobals == null ? void 0 : appGlobals.initiallyShowCode) ?? true,
-      splitView: true,
-      controlsWidth: "120px",
-      closeButton: /* @__PURE__ */ jsx(
-        Tooltip$1,
-        {
-          trigger: /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: styles$e.headerButton,
-              onClick: () => {
-                setIsOpen(false);
-              },
-              children: /* @__PURE__ */ jsx(AiOutlineClose, {})
-            }
-          ),
-          label: "Close"
-        }
-      ),
-      markdown: `\`\`\`xmlui
-${value}
-\`\`\``,
-      api: mockApi,
-      app: value,
-      components
     }
-  ) }) : null;
-};
-var define_process_env_default = {};
-const AppWrapper = ({
-  node,
-  previewMode = false,
-  routerBaseName: baseName = "",
-  contributes = EMPTY_OBJECT,
-  globalProps,
-  standalone,
-  trackContainerHeight,
-  decorateComponentsWithTestId,
-  debugEnabled,
-  defaultTheme,
-  defaultTone,
-  resources,
-  resourceMap,
-  sources,
-  children,
-  projectCompilation,
-  onInit
-}) => {
-  if (previewMode) {
-    HelmetProvider.canUseDOM = false;
-  }
-  const siteName = (globalProps == null ? void 0 : globalProps.name) || "XMLUI app";
-  const useHashBasedRouting = (globalProps == null ? void 0 : globalProps.useHashBasedRouting) ?? true;
-  const dynamicChildren = /* @__PURE__ */ jsxs(HelmetProvider, { children: [
-    /* @__PURE__ */ jsx(Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }),
-    /* @__PURE__ */ jsxs(LoggerProvider, { children: [
-      /* @__PURE__ */ jsx(LoggerInitializer, {}),
-      /* @__PURE__ */ jsx(IconProvider, { children: /* @__PURE__ */ jsx(
-        ThemeProvider,
-        {
-          resourceMap,
-          themes: contributes.themes,
-          defaultTheme,
-          defaultTone,
-          resources,
-          children: /* @__PURE__ */ jsx(
-            InspectorProvider,
-            {
-              sources,
-              projectCompilation,
-              mockApi: globalProps == null ? void 0 : globalProps.demoMockApi,
-              children: /* @__PURE__ */ jsx(ConfirmationModalContextProvider, { children: /* @__PURE__ */ jsxs(
-                AppContent,
-                {
-                  onInit,
-                  rootContainer: node,
-                  routerBaseName: baseName,
-                  globalProps,
-                  standalone,
-                  decorateComponentsWithTestId,
-                  debugEnabled,
-                  trackContainerHeight,
-                  children: [
-                    /* @__PURE__ */ jsx(ComponentViewer, {}),
-                    children
-                  ]
-                }
-              ) })
-            }
-          )
-        }
-      ) })
-    ] })
-  ] });
-  const Router = previewMode ? MemoryRouter : useHashBasedRouting ? HashRouter : BrowserRouter;
-  const shouldSkipClientRouter = previewMode ? false : typeof window === "undefined" || define_process_env_default.VITE_REMIX;
-  return /* @__PURE__ */ jsx(ErrorBoundary, { node, location: "root-outer", children: /* @__PURE__ */ jsxs(QueryClientProvider, { client: queryClient, children: [
-    !!shouldSkipClientRouter && dynamicChildren,
-    !shouldSkipClientRouter && /* @__PURE__ */ jsx(Router, { basename: Router === HashRouter ? void 0 : baseName, children: dynamicChildren })
-  ] }) });
-};
-enableMapSet();
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false
-    }
-  }
-});
-function AppRoot({
-  apiInterceptor,
-  contributes,
-  node,
-  decorateComponentsWithTestId,
-  debugEnabled,
-  defaultTheme,
-  defaultTone,
-  resources,
-  globalProps,
-  standalone,
-  trackContainerHeight,
-  routerBaseName,
-  previewMode,
-  resourceMap,
-  sources,
-  extensionManager,
-  children,
-  projectCompilation,
-  isNested = false,
-  onInit
-}) {
-  const rootNode = useMemo(() => {
-    const themedRoot = {
-      type: "Theme",
-      props: {
-        root: true
-      },
-      children: [node]
-    };
+  }, [
+    useWorker,
+    forceInitialize,
+    hasParentInterceptorContext,
+    interceptor,
+    forceInitializeParent,
+    parentInterceptorWorker
+  ]);
+  const isMocked = useCallback(
+    (url) => interceptor !== void 0 && !!define_process_env_default.VITE_MOCK_ENABLED,
+    [interceptor]
+  );
+  const doForceInitialize = useCallback(() => {
+    setForceInitialize(true);
+  }, []);
+  const contextValue2 = useMemo(() => {
     return {
-      type: "Container",
-      uid: "root",
-      children: [themedRoot],
-      uses: []
+      interceptorWorker,
+      apiInstance,
+      initialized: initialized2,
+      forceInitialize: doForceInitialize,
+      isMocked
     };
-  }, [node]);
-  if (projectCompilation) {
-    const entryDeps = projectCompilation.entrypoint.dependencies;
-    getTransitiveDependencies(entryDeps, projectCompilation.components);
-  }
-  const enhancedGlobalProps = useMemo(() => ({
-    ...globalProps,
-    isNested
-  }), [globalProps, isNested]);
-  return /* @__PURE__ */ jsx(ComponentProvider, { contributes, extensionManager, children: /* @__PURE__ */ jsx(StyleProvider, { children: /* @__PURE__ */ jsx(DebugViewProvider, { debugConfig: globalProps == null ? void 0 : globalProps.debug, children: /* @__PURE__ */ jsx(
-    AppWrapper,
-    {
-      projectCompilation,
-      resourceMap,
-      apiInterceptor,
-      node: rootNode,
-      contributes,
-      resources,
-      routerBaseName,
-      decorateComponentsWithTestId,
-      debugEnabled,
-      defaultTheme,
-      defaultTone,
-      globalProps: enhancedGlobalProps,
-      standalone,
-      trackContainerHeight,
-      previewMode,
-      sources,
-      onInit,
-      children
-    }
-  ) }) }) });
-}
-function getTransitiveDependencies(directCompDepNames, components) {
-  const allDepsByCompName = components.reduce(
-    function addDepsByNameToCollection(collection, { definition: { name }, dependencies }) {
-      return collection.set(name, dependencies);
-    },
-    /* @__PURE__ */ new Map()
-  );
-  const transitiveDeps = /* @__PURE__ */ new Set();
-  populateTransitiveDeps(directCompDepNames);
-  return transitiveDeps;
-  function populateTransitiveDeps(directCompDepNames2) {
-    if (!directCompDepNames2) return;
-    for (const directDep of directCompDepNames2) {
-      if (!transitiveDeps.has(directDep)) {
-        transitiveDeps.add(directDep);
-        const depsOfDirectDep = allDepsByCompName.get(directDep);
-        populateTransitiveDeps(depsOfDirectDep);
-      }
-    }
-  }
+  }, [interceptorWorker, apiInstance, initialized2, doForceInitialize, isMocked]);
+  return /* @__PURE__ */ jsx(ApiInterceptorContext.Provider, { value: contextValue2, children: waitForApiInterceptor && !initialized2 ? null : children });
 }
 function AnimatedLogo() {
   return /* @__PURE__ */ jsxs("div", { className: styles$e.loadingContainer, children: [
@@ -55976,8 +56100,8 @@ function AppWithCodeViewNative({
     )
   ] });
 }
-const codeText = "_codeText_1vsbi_14";
-const codefence = "_codefence_1vsbi_21";
+const codeText = "_codeText_trvop_14";
+const codefence = "_codefence_trvop_21";
 const styles$1 = {
   codeText,
   codefence
@@ -57381,7 +57505,8 @@ const defaultProps = {
   labelBreak: true,
   enabled: true,
   customValidationsDebounce: 0,
-  gap: "0"
+  gap: "0",
+  noSubmit: false
 };
 const FormItemContext = createContext({ parentFormItemId: null });
 function ArrayLikeFormItem({
@@ -57448,6 +57573,7 @@ const FormItem = memo(function FormItem2({
   itemIndex,
   initialValue: initialValueFromProps,
   gap,
+  noSubmit = defaultProps.noSubmit,
   ...rest
 }) {
   const validations = useShallowCompareMemoize({
@@ -57502,10 +57628,8 @@ const FormItem = memo(function FormItem2({
   const formEnabled = useFormContextPart((value2) => value2 == null ? void 0 : value2.enabled);
   const isEnabled2 = enabled2 && formEnabled;
   useEffect(() => {
-    if (initialValue !== void 0) {
-      dispatch(fieldInitialized(formItemId, initialValue));
-    }
-  }, [dispatch, formItemId, initialValue]);
+    dispatch(fieldInitialized(formItemId, initialValue, false, noSubmit));
+  }, [dispatch, formItemId, initialValue, noSubmit]);
   useValidation(validations, onValidate, value, dispatch, formItemId, customValidationsDebounce);
   const onStateChange = useCallback(
     ({ value: value2 }, options2) => {
@@ -57951,6 +58075,11 @@ const FormItemMd = createMetadata({
       description: "This property defines the gap between the adornments and the input area.",
       valueType: "string",
       defaultValue: defaultProps.gap
+    },
+    noSubmit: {
+      description: "When set to `true`, the field will not be included in the form's submitted data. This is useful for fields that should be present in the form but not submitted, similar to hidden fields. If multiple FormItems reference the same `bindTo` value and any of them has `noSubmit` set to `true`, the field will NOT be submitted.",
+      type: "boolean",
+      defaultValue: defaultProps.noSubmit
     }
   },
   events: {
@@ -58030,6 +58159,7 @@ const formItemComponentRenderer = createComponentRenderer(
       validationMode,
       maxTextLength,
       gap,
+      noSubmit,
       ...rest
     } = node.props;
     const resolvedRestProps = extractValue(rest);
@@ -58074,6 +58204,7 @@ const formItemComponentRenderer = createComponentRenderer(
         maxTextLength: extractValue(maxTextLength),
         itemIndex: extractValue("{$itemIndex}"),
         initialValue: extractValue(node.props.initialValue),
+        noSubmit: extractValue.asOptionalBoolean(noSubmit),
         inputRenderer: inputTemplate ? (contextVars) => /* @__PURE__ */ jsx(
           MemoizedItem,
           {