@appius-fr/apx 2.5.0 → 2.6.0

package/dist/APX.standalone.js

@@ -1612,7 +1612,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   toast: () => (/* binding */ toast)
 /* harmony export */ });
 /* harmony import */ var _css_toast_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./css/toast.css */ "./modules/toast/css/toast.css");
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -1627,13 +1626,30 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 // Minimal, framework-agnostic ToastManager for APX
 // ESM-first, no side effects on import. DOM only when used.
 
 
+/**
+ * @typedef {Object} PositionObject
+ * @property {'sticky'|'relative'|'anchored'} [type]
+ * @property {string} [x]
+ * @property {string} [y]
+ * @property {HTMLElement} [element]
+ * @property {'top'|'right'|'bottom'|'left'|'above'|'below'|'before'|'after'} [placement]
+ * @property {string} [gap]
+ * @property {boolean} [useNativeCSS]
+ */
+
+/**
+ * @typedef {string|PositionObject} Position
+ */
+
 /**
  * @typedef {Object} ToastConfig
- * @property {'bottom-right'|'bottom-left'|'top-right'|'top-left'} [position]
+ * @property {Position} [position]
+ * @property {'up'|'down'|'auto'} [flow] Flow direction for stacking toasts. 'auto' determines based on position. Default: 'auto'
  * @property {number} [maxToasts]
  * @property {number} [defaultDurationMs]
  * @property {number} [zIndex]
@@ -1642,6 +1658,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * @property {boolean} [dedupe]
  * @property {string} [containerClass]
  * @property {number} [offset]
+ * @property {string} [id]
  */
 
 /**
@@ -1654,6 +1671,8 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * @property {(ref: ToastRef, ev: MouseEvent) => void} [onClick]
  * @property {(ref: ToastRef, reason: 'timeout'|'close'|'api'|'overflow') => void} [onClose]
  * @property {string} [className]
+ * @property {Position} [position]
+ * @property {'up'|'down'|'auto'} [flow] Flow direction for stacking toasts. 'auto' determines based on position. Default: 'auto'
  */
 
 /**
@@ -1668,6 +1687,40 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  */
 
 var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+
+// Shared container cache: Map<position, HTMLElement>
+// Containers are shared between managers with the same position
+var _containerCache = new Map();
+
+// Garbage collection: cleanup empty unmanaged containers after a delay
+var GC_DELAY_MS = 20000; // 20 seconds
+var _gcTimeoutId = null;
+
+// Wrapper for all toast containers (keeps DOM clean)
+var _toastWrapper = null;
+
+/**
+ * Get or create the toast containers wrapper
+ * @returns {HTMLElement|null}
+ */
+function getToastWrapper() {
+  if (!isBrowser) return null;
+  if (!_toastWrapper) {
+    _toastWrapper = document.querySelector('.APX-toast-wrapper');
+    if (!_toastWrapper) {
+      _toastWrapper = createEl('div', 'APX-toast-wrapper');
+      _toastWrapper.style.position = 'fixed';
+      _toastWrapper.style.top = '0';
+      _toastWrapper.style.left = '0';
+      _toastWrapper.style.width = '0';
+      _toastWrapper.style.height = '0';
+      _toastWrapper.style.pointerEvents = 'none';
+      _toastWrapper.style.zIndex = '10000'; // Below containers but above most content
+      document.body.appendChild(_toastWrapper);
+    }
+  }
+  return _toastWrapper;
+}
 var DEFAULT_CONFIG = {
   position: 'bottom-right',
   maxToasts: 5,
@@ -1693,6 +1746,194 @@ function createEl(tag, classNames) {
   return el;
 }
 
+/**
+ * Normalize placement synonyms to CSS values
+ * @param {string} placement
+ * @returns {'top'|'right'|'bottom'|'left'}
+ */
+function normalizePlacement(placement) {
+  var synonyms = {
+    'above': 'top',
+    'below': 'bottom',
+    'before': 'left',
+    'after': 'right'
+  };
+  return synonyms[placement] || placement;
+}
+
+/**
+ * Determine flow direction based on position
+ * @param {Position} position
+ * @returns {'up'|'down'}
+ */
+function determineFlow(position) {
+  if (typeof position === 'string') {
+    // String positions: top = up, bottom = down
+    if (position.includes('top')) return 'up';
+    if (position.includes('bottom')) return 'down';
+    return 'down'; // default
+  }
+
+  if (_typeof(position) === 'object' && position !== null) {
+    var type = position.type || (position.x || position.y ? 'sticky' : null);
+    if (type === 'sticky' || !type && (position.x || position.y)) {
+      // Sticky: determine based on y coordinate
+      if (position.y !== undefined) {
+        // If y starts with '-' or is a small value, likely top (up)
+        // If y is a large value or percentage, likely bottom (down)
+        if (position.y.startsWith('-')) {
+          // Negative = from bottom, so flow down
+          return 'down';
+        }
+        var num = parseFloat(position.y);
+        if (!isNaN(num)) {
+          // If y < 50% of viewport height, likely top (up)
+          // Otherwise likely bottom (down)
+          if (position.y.includes('%')) {
+            return num < 50 ? 'up' : 'down';
+          }
+          // For px values, assume < 400px is top (up)
+          return num < 400 ? 'up' : 'down';
+        }
+      }
+      return 'down'; // default
+    }
+
+    if (type === 'anchored' && position.placement) {
+      // Anchored: placement determines flow
+      var placement = normalizePlacement(position.placement);
+      if (placement === 'top' || placement === 'above') return 'up';
+      if (placement === 'bottom' || placement === 'below') return 'down';
+      // For left/right, default to down
+      return 'down';
+    }
+    if (type === 'relative') {
+      // Relative: determine based on y offset
+      if (position.y !== undefined) {
+        var _num = parseFloat(position.y);
+        if (!isNaN(_num)) {
+          // Negative y = above element = flow up
+          // Positive y = below element = flow down
+          return _num < 0 ? 'up' : 'down';
+        }
+      }
+      return 'down'; // default
+    }
+  }
+
+  return 'down'; // default
+}
+
+/**
+ * Garbage collection: remove empty unmanaged containers
+ */
+function cleanupEmptyContainers() {
+  if (!isBrowser) return;
+  var containers = document.querySelectorAll('.APX-toast-container:not([data-apx-toast-managed="true"])');
+  containers.forEach(function (container) {
+    // Check if container is empty (no toasts)
+    if (container.children.length === 0) {
+      var positionKey = container.getAttribute('data-apx-toast-position');
+      if (positionKey) {
+        _containerCache["delete"](positionKey);
+      }
+      container.remove();
+    }
+  });
+
+  // Clean up wrapper if it's empty (all containers removed)
+  if (_toastWrapper && _toastWrapper.children.length === 0) {
+    _toastWrapper.remove();
+    _toastWrapper = null;
+  }
+  _gcTimeoutId = null;
+}
+
+/**
+ * Schedule garbage collection for empty unmanaged containers
+ */
+function scheduleGarbageCollection() {
+  if (_gcTimeoutId) {
+    clearTimeout(_gcTimeoutId);
+  }
+  _gcTimeoutId = setTimeout(cleanupEmptyContainers, GC_DELAY_MS);
+}
+
+/**
+ * Find all scrollable parent elements
+ * @param {HTMLElement} element
+ * @returns {HTMLElement[]}
+ */
+function findScrollableParents(element) {
+  var scrollables = [];
+  var current = element.parentElement;
+  while (current && current !== document.body && current !== document.documentElement) {
+    var style = window.getComputedStyle(current);
+    var overflow = style.overflow + style.overflowY + style.overflowX;
+    if (overflow.includes('scroll') || overflow.includes('auto')) {
+      scrollables.push(current);
+    }
+    current = current.parentElement;
+  }
+  return scrollables;
+}
+
+/**
+ * Hash an element to create a unique identifier
+ * @param {HTMLElement} el
+ * @returns {string}
+ */
+function hashElement(el) {
+  var rect = el.getBoundingClientRect();
+  var str = "".concat(el.tagName, "_").concat(rect.left, "_").concat(rect.top, "_").concat(rect.width, "_").concat(rect.height);
+  var hash = 0;
+  for (var i = 0; i < str.length; i++) {
+    var _char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + _char;
+    hash = hash & hash; // Convert to 32bit integer
+  }
+
+  return Math.abs(hash).toString(36);
+}
+
+/**
+ * Serialize position options into a unique key
+ * @param {Position} position
+ * @returns {string}
+ */
+function serializePosition(position) {
+  if (typeof position === 'string') {
+    return "s:".concat(position);
+  }
+  if (_typeof(position) === 'object' && position !== null) {
+    var parts = [];
+
+    // Type (default: sticky if x/y provided)
+    var type = position.type || (position.x || position.y ? 'sticky' : null);
+    if (type) parts.push("t:".concat(type));
+
+    // Coordinates
+    if (position.x !== undefined) parts.push("x:".concat(position.x));
+    if (position.y !== undefined) parts.push("y:".concat(position.y));
+
+    // For relative/anchored: use element ID or hash
+    if (position.element) {
+      var _position$element$dat;
+      var elementId = position.element.id || ((_position$element$dat = position.element.dataset) === null || _position$element$dat === void 0 ? void 0 : _position$element$dat.apxToastAnchorId) || "el_".concat(hashElement(position.element));
+      parts.push("el:".concat(elementId));
+    }
+    if (position.placement) {
+      // Normalize placement for serialization (use CSS values)
+      var normalized = normalizePlacement(position.placement);
+      parts.push("p:".concat(normalized));
+    }
+    if (position.gap !== undefined) parts.push("g:".concat(position.gap));
+    if (position.useNativeCSS) parts.push("native:true");
+    return "o:".concat(parts.join('|'));
+  }
+  return 's:bottom-right';
+}
+
 /**
  * ToastManager class
  */
@@ -1747,9 +1988,17 @@ var ToastManager = /*#__PURE__*/function () {
         _ref.update(options);
         return _ref;
       }
+
+      // Determine position and flow for this toast (options take precedence over config)
+      var position = options.position || this.config.position || 'bottom-right';
+      var flow = options.flow !== undefined ? options.flow : this.config.flow !== undefined ? this.config.flow : 'auto';
+      var finalFlow = flow === 'auto' ? determineFlow(position) : flow;
+
+      // Ensure default container is set (for backward compatibility)
       this.ensureContainer();
       var toastEl = createEl('div', "APX-toast APX-toast--".concat(options.type));
       toastEl.setAttribute('role', 'status');
+      // Priority: options.id > config.id > auto-generated
       var toastId = options.id || "t_".concat(Date.now(), "_").concat(Math.random().toString(36).slice(2, 8));
       toastEl.dataset.toastId = toastId;
       if (options.className) toastEl.className += " ".concat(options.className);
@@ -1767,7 +2016,172 @@ var ToastManager = /*#__PURE__*/function () {
         closeBtn.type = 'button';
         toastEl.appendChild(closeBtn);
       }
-      this.container.appendChild(toastEl);
+
+      // Get or create container for this specific position
+      var container = null;
+      var positionUpdateFn = null;
+      var positionCleanup = null;
+      var originalElementStyle = null;
+      if (position && _typeof(position) === 'object' && position !== null) {
+        var type = position.type || (position.x || position.y ? 'sticky' : null);
+        if (position.useNativeCSS && (type === 'relative' || type === 'anchored') && position.element) {
+          // useNativeCSS: true - create container in target element using native CSS
+          var targetEl = position.element;
+          originalElementStyle = targetEl.style.position;
+          targetEl.style.position = 'relative';
+
+          // Create a container for stacking toasts (reuse if exists)
+          var positionKey = serializePosition(position);
+          var nativeContainer = targetEl.querySelector("[data-apx-toast-position=\"".concat(positionKey, "\"]"));
+          if (!nativeContainer) {
+            nativeContainer = createEl('div', 'APX-toast-container APX-toast-container-native');
+            nativeContainer.setAttribute('data-apx-toast-position', positionKey);
+            nativeContainer.style.position = 'absolute';
+            nativeContainer.style.zIndex = String(this.config.zIndex);
+            nativeContainer.style.gap = "".concat(this.config.gap, "px");
+            nativeContainer.setAttribute('aria-live', String(this.config.ariaLive));
+            nativeContainer.style.flexDirection = finalFlow === 'up' ? 'column-reverse' : 'column';
+
+            // Apply positioning to container
+            if (type === 'relative') {
+              // Relative: use x/y directly
+              if (position.x !== undefined) {
+                if (position.x.startsWith('-')) {
+                  nativeContainer.style.right = position.x.substring(1);
+                } else {
+                  nativeContainer.style.left = position.x;
+                }
+              }
+              if (position.y !== undefined) {
+                if (position.y.startsWith('-')) {
+                  nativeContainer.style.bottom = position.y.substring(1);
+                } else {
+                  nativeContainer.style.top = position.y;
+                }
+              }
+            } else if (type === 'anchored') {
+              // Anchored: position outside the element using 100% (element size) + gap
+              var placement = normalizePlacement(position.placement);
+              var gap = position.gap || '1em';
+              switch (placement) {
+                case 'top':
+                  nativeContainer.style.bottom = "calc(100% + ".concat(gap, ")");
+                  nativeContainer.style.left = '0';
+                  break;
+                case 'bottom':
+                  nativeContainer.style.top = "calc(100% + ".concat(gap, ")");
+                  nativeContainer.style.left = '0';
+                  break;
+                case 'left':
+                  nativeContainer.style.right = "calc(100% + ".concat(gap, ")");
+                  nativeContainer.style.top = '0';
+                  break;
+                case 'right':
+                  nativeContainer.style.left = "calc(100% + ".concat(gap, ")");
+                  nativeContainer.style.top = '0';
+                  break;
+              }
+            }
+            targetEl.appendChild(nativeContainer);
+          } else {
+            // Update flow direction if container exists
+            nativeContainer.style.flexDirection = finalFlow === 'up' ? 'column-reverse' : 'column';
+          }
+          container = nativeContainer;
+          positionCleanup = function positionCleanup() {
+            if (targetEl && targetEl.parentElement) {
+              targetEl.style.position = originalElementStyle || '';
+              // Remove native container if empty
+              if (nativeContainer && nativeContainer.children.length === 0) {
+                var _positionKey = nativeContainer.getAttribute('data-apx-toast-position');
+                if (_positionKey) {
+                  _containerCache["delete"](_positionKey);
+                }
+                nativeContainer.remove();
+              }
+            }
+          };
+        } else {
+          // Default: get or create container for this position
+          container = this.getContainerForPosition(position, finalFlow);
+          var updateContainerPosition = function updateContainerPosition() {
+            var styles = _this.calculatePosition(position, container);
+            Object.assign(container.style, styles);
+          };
+          updateContainerPosition();
+
+          // For relative/anchored, listen to scroll/resize
+          if ((type === 'relative' || type === 'anchored') && position.element) {
+            var rafId = null;
+            var lastUpdate = 0;
+            var throttleMs = 16; // ~60fps
+
+            var throttledUpdate = function throttledUpdate() {
+              var now = Date.now();
+              if (now - lastUpdate < throttleMs) {
+                if (rafId) cancelAnimationFrame(rafId);
+                rafId = requestAnimationFrame(function () {
+                  updateContainerPosition();
+                  lastUpdate = Date.now();
+                });
+              } else {
+                updateContainerPosition();
+                lastUpdate = now;
+              }
+            };
+
+            // Find all scrollable parents
+            var scrollableParents = findScrollableParents(position.element);
+
+            // Listen to scroll on window and all scrollable parents
+            window.addEventListener('scroll', throttledUpdate, {
+              passive: true
+            });
+            window.addEventListener('resize', throttledUpdate, {
+              passive: true
+            });
+
+            // Listen to scroll on all scrollable parent elements
+            scrollableParents.forEach(function (parent) {
+              parent.addEventListener('scroll', throttledUpdate, {
+                passive: true
+              });
+            });
+
+            // Watch for element removal
+            var observer = new MutationObserver(function () {
+              if (!position.element.parentElement) {
+                ref.close('api');
+              }
+            });
+            observer.observe(document.body, {
+              childList: true,
+              subtree: true
+            });
+            positionUpdateFn = updateContainerPosition;
+            positionCleanup = function positionCleanup() {
+              window.removeEventListener('scroll', throttledUpdate);
+              window.removeEventListener('resize', throttledUpdate);
+              scrollableParents.forEach(function (parent) {
+                parent.removeEventListener('scroll', throttledUpdate);
+              });
+              observer.disconnect();
+              if (rafId) cancelAnimationFrame(rafId);
+            };
+          }
+        }
+      } else {
+        // String position - get or create container for this position
+        container = this.getContainerForPosition(position, finalFlow);
+      }
+
+      // Append toast to the appropriate container
+      if (container) {
+        container.appendChild(toastEl);
+      } else {
+        // Fallback to default container
+        this.container.appendChild(toastEl);
+      }
 
       // Enter animation
       toastEl.classList.add('APX-toast--enter');
@@ -1864,6 +2278,13 @@ var ToastManager = /*#__PURE__*/function () {
         var cleanup = function cleanup(reason) {
           if (!toastEl) return;
           pauseTimer();
+
+          // Cleanup position listeners and restore styles
+          if (positionCleanup) {
+            positionCleanup();
+            positionCleanup = null;
+          }
+
           // If overflow, remove immediately to enforce hard cap
           if (reason === 'overflow') {
             if (toastEl.parentElement) toastEl.parentElement.removeChild(toastEl);
@@ -1885,6 +2306,9 @@ var ToastManager = /*#__PURE__*/function () {
             var idx = _this.open.indexOf(ref);
             if (idx >= 0) _this.open.splice(idx, 1);
             _this.idToRef["delete"](toastId);
+
+            // Schedule garbage collection for unmanaged containers
+            scheduleGarbageCollection();
             finish(reason);
           };
           toastEl.addEventListener('transitionend', removeEl);
@@ -1984,42 +2408,245 @@ var ToastManager = /*#__PURE__*/function () {
       if (!o.type) o.type = 'info';
       if (typeof o.dismissible !== 'boolean') o.dismissible = true;
       if (typeof o.durationMs !== 'number') o.durationMs = this.config.defaultDurationMs;
+      // Use id from options if provided, otherwise use id from config, otherwise undefined (will be auto-generated)
+      if (!o.id && this.config.id) o.id = this.config.id;
       return o;
     }
+
+    /**
+     * Find or create a container for a specific position
+     * @param {Position} position
+     * @param {'up'|'down'} [flow] Flow direction (already determined, not 'auto')
+     * @param {boolean} [managed] Whether this container is managed by a manager (default: false)
+     * @returns {HTMLElement|null}
+     */
+  }, {
+    key: "getContainerForPosition",
+    value: function getContainerForPosition(position, flow) {
+      var managed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      if (!isBrowser) return null;
+      var positionKey = serializePosition(position);
+
+      // Flow should already be determined ('up' or 'down'), but fallback to auto if needed
+      var finalFlow = flow && flow !== 'auto' ? flow : determineFlow(position);
+
+      // 1. Check memory cache
+      var c = _containerCache.get(positionKey);
+
+      // 2. If not in cache, search in DOM by data attribute
+      if (!c && isBrowser) {
+        c = document.querySelector("[data-apx-toast-position=\"".concat(positionKey, "\"]"));
+        if (c) {
+          _containerCache.set(positionKey, c);
+        }
+      }
+
+      // 3. If still not found, create new container
+      if (!c) {
+        c = createEl('div', 'APX-toast-container');
+        c.setAttribute('data-apx-toast-position', positionKey);
+
+        // Mark as managed if created by a manager
+        if (managed) {
+          c.setAttribute('data-apx-toast-managed', 'true');
+        }
+
+        // Determine position class (for CSS)
+        var posClass = typeof position === 'string' ? position : position.type || 'bottom-right';
+        c.classList.add("APX-toast-container--".concat(posClass));
+        c.setAttribute('aria-live', String(this.config.ariaLive));
+        c.style.zIndex = String(this.config.zIndex);
+        c.style.gap = "".concat(this.config.gap, "px");
+
+        // Apply flow direction
+        c.style.flexDirection = finalFlow === 'up' ? 'column-reverse' : 'column';
+
+        // Apply position styles if object position
+        if (_typeof(position) === 'object' && position !== null) {
+          c.style.position = 'fixed';
+          var styles = this.calculatePosition(position, c);
+          Object.assign(c.style, styles);
+        }
+
+        // Append to wrapper for clean DOM organization
+        var wrapper = getToastWrapper();
+        if (wrapper) {
+          wrapper.appendChild(c);
+        } else {
+          document.body.appendChild(c);
+        }
+        _containerCache.set(positionKey, c);
+      } else {
+        // Update flow direction if container exists (may be shared)
+        c.style.flexDirection = finalFlow === 'up' ? 'column-reverse' : 'column';
+
+        // If container exists and is now managed, mark it
+        if (managed && !c.hasAttribute('data-apx-toast-managed')) {
+          c.setAttribute('data-apx-toast-managed', 'true');
+        }
+      }
+      return c;
+    }
   }, {
     key: "ensureContainer",
     value: function ensureContainer() {
       if (this.container || !isBrowser) return;
-      var c = createEl('div', 'APX-toast-container');
-      var pos = this.config.position || 'bottom-right';
-      c.classList.add("APX-toast-container--".concat(pos));
-      if (this.config.containerClass) c.classList.add(this.config.containerClass);
-      c.style.zIndex = String(this.config.zIndex);
-      c.style.gap = "".concat(this.config.gap, "px");
-      if (this.config.offset) {
-        var offset = "".concat(this.config.offset, "px");
-        if (pos.includes('bottom')) c.style.bottom = offset;else c.style.top = offset;
-        if (pos.includes('right')) c.style.right = offset;else c.style.left = offset;
-      }
-      c.setAttribute('aria-live', String(this.config.ariaLive));
-      document.body.appendChild(c);
-      this.container = c;
+      var position = this.config.position || 'bottom-right';
+      var flow = this.config.flow !== undefined ? this.config.flow : 'auto';
+      // Containers created by ensureContainer are managed
+      this.container = this.getContainerForPosition(position, flow, true);
       this.applyContainerConfig();
     }
   }, {
     key: "applyContainerConfig",
     value: function applyContainerConfig() {
-      var _this$container$class;
+      var _this2 = this;
       if (!this.container) return;
+      var position = this.config.position || 'bottom-right';
+      var pos = typeof position === 'string' ? position : position.type || 'bottom-right';
+
+      // Apply styles (these may be overridden by other managers sharing the container)
       this.container.style.zIndex = String(this.config.zIndex);
       this.container.style.gap = "".concat(this.config.gap, "px");
       this.container.setAttribute('aria-live', String(this.config.ariaLive));
-      // Update position class
-      var posClasses = ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(function (p) {
-        return "APX-toast-container--".concat(p);
-      });
-      (_this$container$class = this.container.classList).remove.apply(_this$container$class, _toConsumableArray(posClasses));
-      this.container.classList.add("APX-toast-container--".concat(this.config.position));
+
+      // Update position class (only for string positions)
+      if (typeof position === 'string') {
+        var _this$container$class;
+        var posClasses = ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(function (p) {
+          return "APX-toast-container--".concat(p);
+        });
+        (_this$container$class = this.container.classList).remove.apply(_this$container$class, _toConsumableArray(posClasses));
+        this.container.classList.add("APX-toast-container--".concat(pos));
+      }
+
+      // Apply container class if specified
+      if (this.config.containerClass) {
+        this.config.containerClass.split(' ').filter(Boolean).forEach(function (cls) {
+          _this2.container.classList.add(cls);
+        });
+      }
+
+      // Apply offset (only for string positions)
+      if (typeof position === 'string') {
+        if (this.config.offset) {
+          var offset = "".concat(this.config.offset, "px");
+          if (pos.includes('bottom')) this.container.style.bottom = offset;else this.container.style.top = offset;
+          if (pos.includes('right')) this.container.style.right = offset;else this.container.style.left = offset;
+        } else {
+          // Reset offset if not specified
+          if (pos.includes('bottom')) this.container.style.bottom = '';else this.container.style.top = '';
+          if (pos.includes('right')) this.container.style.right = '';else this.container.style.left = '';
+        }
+      } else if (_typeof(position) === 'object' && position !== null) {
+        // For object positions, ensure container has position: fixed
+        this.container.style.position = 'fixed';
+      }
+    }
+
+    /**
+     * Calculate position for a container based on position config
+     * @param {Position} position
+     * @param {HTMLElement} containerEl
+     * @returns {{left?: string, top?: string, right?: string, bottom?: string}}
+     */
+  }, {
+    key: "calculatePosition",
+    value: function calculatePosition(position, containerEl) {
+      if (typeof position === 'string') {
+        // String positions are handled by container CSS
+        return {};
+      }
+      if (_typeof(position) === 'object' && position !== null) {
+        var type = position.type || (position.x || position.y ? 'sticky' : null);
+        if (type === 'sticky' || !type && (position.x || position.y)) {
+          // Sticky: fixed position relative to viewport
+          var styles = {};
+          if (position.x !== undefined) {
+            if (position.x.startsWith('-')) {
+              styles.right = position.x.substring(1);
+            } else {
+              styles.left = position.x;
+            }
+          }
+          if (position.y !== undefined) {
+            if (position.y.startsWith('-')) {
+              styles.bottom = position.y.substring(1);
+            } else {
+              styles.top = position.y;
+            }
+          }
+          return styles;
+        }
+        if (type === 'relative' && position.element) {
+          // Relative: position relative to element with x/y offset
+          // Use fixed positioning, so getBoundingClientRect() is relative to viewport
+          var rect = position.element.getBoundingClientRect();
+
+          // Parse x/y offsets (can be px, em, etc.)
+          var parseOffset = function parseOffset(val) {
+            if (!val) return 0;
+            var num = parseFloat(val);
+            if (val.includes('em')) {
+              // Convert em to px (approximate: 1em = 16px)
+              return num * 16;
+            }
+            return num;
+          };
+          var offsetX = parseOffset(position.x || '0');
+          var offsetY = parseOffset(position.y || '0');
+          var _styles = {
+            left: "".concat(rect.left + offsetX, "px"),
+            top: "".concat(rect.top + offsetY, "px")
+          };
+          return _styles;
+        }
+        if (type === 'anchored' && position.element) {
+          // Anchored: position relative to element with placement
+          var _rect = position.element.getBoundingClientRect();
+          var gap = position.gap || '1em';
+
+          // Parse gap (can be px, em, etc.)
+          var parseGap = function parseGap(val) {
+            var num = parseFloat(val);
+            if (val.includes('em')) {
+              return num * 16; // Approximate: 1em = 16px
+            }
+
+            return num;
+          };
+          var gapPx = parseGap(gap);
+          var _styles2 = {};
+
+          // Normalize placement synonyms (above/below/before/after) to CSS values
+          var placement = normalizePlacement(position.placement);
+          switch (placement) {
+            case 'top':
+              // Toast above element: bottom of toast = top of element - gap
+              // bottom = viewport height - (element top - gap) = viewport height - element top + gap
+              _styles2.bottom = "".concat(window.innerHeight - _rect.top + gapPx, "px");
+              _styles2.left = "".concat(_rect.left, "px");
+              break;
+            case 'bottom':
+              // Toast below element: top of toast = bottom of element + gap
+              _styles2.top = "".concat(_rect.bottom + gapPx, "px");
+              _styles2.left = "".concat(_rect.left, "px");
+              break;
+            case 'left':
+              // Toast to the left: right of toast = left of element - gap
+              _styles2.right = "".concat(window.innerWidth - _rect.left + gapPx, "px");
+              _styles2.top = "".concat(_rect.top, "px");
+              break;
+            case 'right':
+              // Toast to the right: left of toast = right of element + gap
+              _styles2.left = "".concat(_rect.right + gapPx, "px");
+              _styles2.top = "".concat(_rect.top, "px");
+              break;
+          }
+          return _styles2;
+        }
+      }
+      return {};
     }
   }]);
   return ToastManager;
@@ -2101,6 +2728,698 @@ Object.assign(toast, {
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (toast);
 
 
+/***/ }),
+
+/***/ "./modules/tools/exports.mjs":
+/*!***********************************!*\
+  !*** ./modules/tools/exports.mjs ***!
+  \***********************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   augmentWithPack: () => (/* reexport safe */ _form_packer_augment_apx_mjs__WEBPACK_IMPORTED_MODULE_0__["default"]),
+/* harmony export */   packFormToJSON: () => (/* reexport safe */ _form_packer_packToJson_mjs__WEBPACK_IMPORTED_MODULE_1__.packFormToJSON),
+/* harmony export */   tools: () => (/* binding */ tools)
+/* harmony export */ });
+/* harmony import */ var _form_packer_augment_apx_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./form-packer/augment-apx.mjs */ "./modules/tools/form-packer/augment-apx.mjs");
+/* harmony import */ var _form_packer_packToJson_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./form-packer/packToJson.mjs */ "./modules/tools/form-packer/packToJson.mjs");
+// Import des fonctions et modules des sous-modules
+
+
+
+// Export de la fonction d'augmentation
+
+
+// Export des fonctions utilitaires
+
+
+// Export d'un objet tools pour faciliter l'utilisation
+var tools = {
+  packFormToJSON: _form_packer_packToJson_mjs__WEBPACK_IMPORTED_MODULE_1__.packFormToJSON
+};
+
+/***/ }),
+
+/***/ "./modules/tools/form-packer/augment-apx.mjs":
+/*!***************************************************!*\
+  !*** ./modules/tools/form-packer/augment-apx.mjs ***!
+  \***************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _packToJson_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./packToJson.mjs */ "./modules/tools/form-packer/packToJson.mjs");
+
+
+/**
+ * Ajoute la méthode pack() aux objets APX pour convertir les formulaires en JSON
+ * @param {Object} apx - L'objet APX à augmenter
+ * @returns {Object} L'objet APX augmenté
+ */
+/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(apx) {
+  /**
+   * Convertit le premier formulaire sélectionné en objet JSON
+   * @returns {Object} L'objet JSON résultant
+   * @throws {Error} Si aucun formulaire n'est trouvé ou si le premier élément n'est pas un formulaire
+   * @example
+   * const data = APX('form.myformclass').pack();
+   */
+  apx.pack = function () {
+    var firstElement = this.first();
+    if (!firstElement) {
+      throw new Error('No element found');
+    }
+    if (firstElement.tagName !== 'FORM') {
+      throw new Error('Element is not a form');
+    }
+    return (0,_packToJson_mjs__WEBPACK_IMPORTED_MODULE_0__.packFormToJSON)(firstElement);
+  };
+  return apx;
+}
+
+/***/ }),
+
+/***/ "./modules/tools/form-packer/packToJson.mjs":
+/*!**************************************************!*\
+  !*** ./modules/tools/form-packer/packToJson.mjs ***!
+  \**************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   packFormToJSON: () => (/* binding */ packFormToJSON)
+/* harmony export */ });
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * Convertit un formulaire HTML en objet JSON
+ * @param {HTMLFormElement} form - Le formulaire à convertir
+ * @returns {Object} L'objet JSON résultant
+ * @throws {TypeError} Si form n'est pas un HTMLFormElement
+ */
+var packFormToJSON = function packFormToJSON(form) {
+  // Validation de l'entrée
+  if (!form || !(form instanceof HTMLFormElement)) {
+    throw new TypeError('packFormToJSON expects an HTMLFormElement');
+  }
+  var formData = new FormData(form);
+  var jsonData = {};
+
+  /**
+   * Construit une représentation string du chemin pour les messages d'erreur
+   * @param {Array} parts - Les parties du chemin
+   * @returns {string} Le chemin formaté
+   */
+  var buildPathString = function buildPathString(parts) {
+    return parts.reduce(function (path, part) {
+      if (part.type === 'key') {
+        return path ? "".concat(path, "[").concat(part.name, "]") : part.name;
+      }
+      if (part.type === 'numeric') {
+        return "".concat(path, "[").concat(part.index, "]");
+      }
+      if (part.type === 'array') {
+        return "".concat(path, "[]");
+      }
+      return path;
+    }, '');
+  };
+
+  // ============================================================================
+  // PHASE 1 : ANALYSE ET DÉTECTION DES CONFLITS
+  // ============================================================================
+
+  /**
+   * Structure pour stocker l'utilisation d'un chemin
+   * @typedef {Object} PathUsage
+   * @property {boolean} isFinal - Le chemin est utilisé comme valeur finale
+   * @property {boolean} isIntermediate - Le chemin est utilisé comme chemin intermédiaire
+   * @property {boolean} hasArraySuffix - Le chemin se termine par [] (crée des valeurs primitives)
+   * @property {string} key - La clé du formulaire qui utilise ce chemin
+   */
+
+  var pathUsage = new Map(); // Map<pathString, PathUsage>
+  var keyAnalysis = new Map(); // Map<basePath, {hasNumeric: boolean, hasString: boolean}>
+  var allEntries = [];
+
+  /**
+   * Enregistre l'utilisation d'un chemin dans pathUsage
+   * @param {string} currentPath - Le chemin à enregistrer
+   * @param {boolean} isFinal - Si c'est une valeur finale
+   * @param {boolean} isArraySuffix - Si le chemin se termine par []
+   * @param {string} key - La clé du formulaire
+   */
+  var recordPathUsage = function recordPathUsage(currentPath, isFinal, isArraySuffix, key) {
+    var _pathUsage$get;
+    var usage = (_pathUsage$get = pathUsage.get(currentPath)) !== null && _pathUsage$get !== void 0 ? _pathUsage$get : {
+      isFinal: false,
+      isIntermediate: false,
+      hasArraySuffix: false,
+      key: key
+    };
+    if (!pathUsage.has(currentPath)) {
+      pathUsage.set(currentPath, usage);
+    }
+    if (isFinal) {
+      usage.isFinal = true;
+      usage.key = key;
+      if (isArraySuffix) {
+        usage.hasArraySuffix = true;
+      }
+    } else {
+      var _usage$key;
+      usage.isIntermediate = true;
+      (_usage$key = usage.key) !== null && _usage$key !== void 0 ? _usage$key : usage.key = key;
+    }
+  };
+
+  // Première passe : analyser toutes les clés et enregistrer les chemins
+  var _iterator = _createForOfIteratorHelper(formData.entries()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _slicedToArray(_step.value, 2),
+        _key = _step$value[0],
+        _value = _step$value[1];
+      if (!_key) continue;
+      allEntries.push({
+        key: _key,
+        value: _value
+      });
+      var _parts = parseKey(_key);
+
+      // Construire tous les chemins intermédiaires et le chemin final
+      var currentPath = '';
+      for (var _i4 = 0; _i4 < _parts.length; _i4++) {
+        var _part = _parts[_i4];
+        var _isLast = _i4 === _parts.length - 1;
+        var isArraySuffix = _part.type === 'array';
+
+        // Construire le chemin jusqu'à ce niveau
+        if (_part.type === 'key') {
+          currentPath = currentPath ? "".concat(currentPath, "[").concat(_part.name, "]") : _part.name;
+        } else if (_part.type === 'numeric') {
+          currentPath = "".concat(currentPath, "[").concat(_part.index, "]");
+        } else if (_part.type === 'array') {
+          currentPath = "".concat(currentPath, "[]");
+        }
+
+        // Enregistrer l'utilisation du chemin
+        recordPathUsage(currentPath, _isLast, isArraySuffix && _isLast, _key);
+      }
+
+      // Analyser chaque niveau de la hiérarchie pour détecter les conflits (indices numériques vs clés de chaîne)
+      for (var _i5 = 0; _i5 < _parts.length - 1; _i5++) {
+        var _part2 = _parts[_i5];
+        var _nextPart = _parts[_i5 + 1];
+
+        // Analyser seulement les clés (pas les indices numériques)
+        if (_part2.type === 'key') {
+          var _keyAnalysis$get;
+          var _basePath = _part2.name; // Le nom de la première clé dans le chemin
+
+          var analysis = (_keyAnalysis$get = keyAnalysis.get(_basePath)) !== null && _keyAnalysis$get !== void 0 ? _keyAnalysis$get : {
+            hasNumeric: false,
+            hasString: false
+          };
+          if (!keyAnalysis.has(_basePath)) {
+            keyAnalysis.set(_basePath, analysis);
+          }
+          if (_nextPart) {
+            if (_nextPart.type === 'numeric') {
+              analysis.hasNumeric = true;
+            } else if (_nextPart.type === 'key' || _nextPart.type === 'array') {
+              analysis.hasString = true;
+            }
+          }
+        }
+      }
+    }
+
+    /**
+     * Détecte et lève une exception pour tous les conflits de chemins
+     * 
+     * Principe simple : pour chaque chemin final (valeur primitive), vérifier si un chemin
+     * intermédiaire commence par ce chemin suivi de '['. Si c'est le cas, c'est un conflit.
+     * 
+     * Cette approche unifiée couvre tous les cas :
+     * - items[] (final) vs items[0][name] (intermédiaire)
+     * - array[3] (final) vs array[3][nested] (intermédiaire)
+     * - data[key] (final) vs data[key][sub] (intermédiaire)
+     */
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var detectPathConflicts = function detectPathConflicts() {
+    // 1. Collecter tous les chemins finaux (valeurs primitives)
+    var finalPaths = new Set();
+    var finalPathKeys = new Map(); // Pour les messages d'erreur
+    var _iterator2 = _createForOfIteratorHelper(pathUsage.entries()),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _step2$value = _slicedToArray(_step2.value, 2),
+          path = _step2$value[0],
+          usage = _step2$value[1];
+        if (usage.isFinal) {
+          finalPaths.add(path);
+          finalPathKeys.set(path, usage.key);
+        }
+      }
+
+      // 2. Pour chaque chemin intermédiaire, vérifier s'il commence par un chemin final
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    var _iterator3 = _createForOfIteratorHelper(pathUsage.entries()),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var _step3$value = _slicedToArray(_step3.value, 2),
+          _path = _step3$value[0],
+          _usage = _step3$value[1];
+        if (_usage.isIntermediate) {
+          var _iterator4 = _createForOfIteratorHelper(finalPaths),
+            _step4;
+          try {
+            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+              var finalPath = _step4.value;
+              // Vérifier si ce chemin intermédiaire commence par un chemin final suivi de '['
+              // Exemple: finalPath = "array[3]", path = "array[3][nested]" → conflit
+              if (_path.startsWith("".concat(finalPath, "["))) {
+                throw new Error("Path conflict: \"".concat(finalPath, "\" is used as a final value (in field \"").concat(finalPathKeys.get(finalPath), "\"), ") + "but \"".concat(_path, "\" tries to use it as an intermediate path (in field \"").concat(_usage.key, "\"). ") + "This creates incompatible data structures. " + "You cannot use \"".concat(finalPath, "\" as a primitive value and then access it as an object."));
+              }
+            }
+          } catch (err) {
+            _iterator4.e(err);
+          } finally {
+            _iterator4.f();
+          }
+        }
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+  };
+
+  // Exécuter la détection des conflits
+  detectPathConflicts();
+
+  /**
+   * Vérifie si un chemin de base a un conflit (indices numériques ET clés de chaîne)
+   * @param {string} basePath - Le chemin de base à vérifier
+   * @returns {boolean}
+   */
+  var hasConflict = function hasConflict(basePath) {
+    if (!basePath) return false;
+    var analysis = keyAnalysis.get(basePath);
+    return (analysis === null || analysis === void 0 ? void 0 : analysis.hasNumeric) && (analysis === null || analysis === void 0 ? void 0 : analysis.hasString);
+  };
+
+  /**
+   * Convertit un tableau en objet en préservant les indices numériques comme propriétés
+   * @param {Array} arr - Le tableau à convertir
+   * @returns {Object} L'objet résultant
+   */
+  var arrayToObject = function arrayToObject(arr) {
+    var obj = {};
+    // Copier les indices numériques
+    for (var idx = 0; idx < arr.length; idx++) {
+      obj[idx] = arr[idx];
+    }
+    // Copier les propriétés non-numériques
+    for (var _i = 0, _Object$entries = Object.entries(arr); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        k = _Object$entries$_i[0],
+        v = _Object$entries$_i[1];
+      var numKey = Number.parseInt(k, 10);
+      if (Number.isNaN(numKey) || k !== String(numKey)) {
+        obj[k] = v;
+      }
+    }
+    return obj;
+  };
+
+  /**
+   * Convertit un objet en tableau en préservant les indices numériques
+   * @param {Object} obj - L'objet à convertir
+   * @returns {Array} Le tableau résultant
+   */
+  var objectToArray = function objectToArray(obj) {
+    if (Array.isArray(obj)) return obj;
+    var arr = [];
+    if (_typeof(obj) === 'object' && obj !== null) {
+      for (var _i2 = 0, _Object$entries2 = Object.entries(obj); _i2 < _Object$entries2.length; _i2++) {
+        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
+          k = _Object$entries2$_i[0],
+          v = _Object$entries2$_i[1];
+        var numKey = Number.parseInt(k, 10);
+        if (!Number.isNaN(numKey)) {
+          arr[numKey] = v;
+        }
+      }
+    }
+    return arr;
+  };
+
+  /**
+   * Assure qu'un conteneur est un objet, en convertissant si nécessaire
+   * @param {*} container - Le conteneur à vérifier
+   * @param {string|null} key - La clé dans le conteneur parent
+   * @param {Object|null} parent - Le conteneur parent
+   * @param {boolean} forceObject - Forcer la conversion en objet même s'il n'y a pas de conflit
+   * @returns {Object} Le conteneur (converti en objet si nécessaire)
+   */
+  var ensureObject = function ensureObject(container, key, parent) {
+    var forceObject = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    if (Array.isArray(container)) {
+      var obj = arrayToObject(container);
+      if (parent && key !== null) {
+        parent[key] = obj;
+      }
+      return obj;
+    }
+    if (_typeof(container) !== 'object' || container === null) {
+      var _obj = {};
+      if (parent && key !== null) {
+        parent[key] = _obj;
+      }
+      return _obj;
+    }
+    return container;
+  };
+
+  /**
+   * Assure qu'un conteneur est un tableau, en convertissant si nécessaire
+   * @param {*} container - Le conteneur à vérifier
+   * @param {string|null} key - La clé dans le conteneur parent
+   * @param {Object|null} parent - Le conteneur parent
+   * @returns {Array} Le conteneur (converti en tableau si nécessaire)
+   */
+  var ensureArray = function ensureArray(container, key, parent) {
+    if (!Array.isArray(container)) {
+      var arr = objectToArray(container);
+      if (parent && key !== null) {
+        parent[key] = arr;
+      }
+      return arr;
+    }
+    return container;
+  };
+
+  // ============================================================================
+  // PHASE 2 : TRAITEMENT DES VALEURS
+  // ============================================================================
+
+  /**
+   * Traite une valeur finale (dernière partie du chemin)
+   * @param {*} container - Le conteneur actuel
+   * @param {Object} part - La partie à traiter
+   * @param {*} value - La valeur à assigner
+   * @param {Object} parent - Le conteneur parent
+   * @param {string} basePath - Le chemin de base pour la détection de conflit
+   */
+  var processFinalValue = function processFinalValue(container, part, value, parent, basePath) {
+    if (part.type === 'array') {
+      var _container, _part$name, _container$_part$name;
+      // Tableau explicite avec []
+      (_container$_part$name = (_container = container)[_part$name = part.name]) !== null && _container$_part$name !== void 0 ? _container$_part$name : _container[_part$name] = [];
+      if (Array.isArray(container[part.name])) {
+        container[part.name].push(value);
+      } else {
+        container[part.name] = [container[part.name], value];
+      }
+    } else if (part.type === 'numeric') {
+      // Indice numérique final
+      var index = part.index;
+      container = ensureArray(container, parent.key, parent.container);
+      while (container.length <= index) {
+        container.push(undefined);
+      }
+      container[index] = value;
+    } else {
+      // Clé simple finale
+      var conflict = hasConflict(basePath);
+      if (conflict) {
+        container = ensureObject(container, parent.key, parent.container, true);
+        if (Array.isArray(container[part.name])) {
+          container[part.name] = arrayToObject(container[part.name]);
+        }
+        if (container[part.name] !== undefined && (_typeof(container[part.name]) !== 'object' || container[part.name] === null)) {
+          container[part.name] = value;
+        } else if (container[part.name] === undefined) {
+          container[part.name] = value;
+        } else if (Array.isArray(container[part.name])) {
+          container[part.name].push(value);
+        } else {
+          container[part.name] = [container[part.name], value];
+        }
+      } else {
+        if (container[part.name] === undefined) {
+          container[part.name] = value;
+        } else if (Array.isArray(container[part.name])) {
+          container[part.name].push(value);
+        } else {
+          container[part.name] = [container[part.name], value];
+        }
+      }
+    }
+  };
+
+  /**
+   * Traite une partie intermédiaire (crée la structure)
+   * @param {*} container - Le conteneur actuel
+   * @param {Object} part - La partie à traiter
+   * @param {Object|null} nextPart - La partie suivante (peut être null)
+   * @param {Object} parent - Le conteneur parent
+   * @param {string} basePath - Le chemin de base pour la détection de conflit
+   * @param {Array} parts - Toutes les parties du chemin (pour construire le chemin complet dans les erreurs)
+   * @param {number} i - L'index de la partie actuelle (pour construire le chemin complet dans les erreurs)
+   * @param {string} key - La clé du formulaire (pour les messages d'erreur)
+   * @returns {*} Le nouveau conteneur après traitement
+   */
+  var processIntermediatePart = function processIntermediatePart(container, part, nextPart, parent, basePath, parts, i, key) {
+    if (part.type === 'numeric') {
+      // Indice numérique : le container doit être un tableau ou un objet (selon conflit)
+      var index = part.index;
+      var _conflict = hasConflict(basePath);
+      if (_conflict) {
+        var _container2, _container2$index;
+        // Conflit : utiliser un objet (les indices seront des propriétés)
+        container = ensureObject(container, parent.key, parent.container, true);
+        (_container2$index = (_container2 = container)[index]) !== null && _container2$index !== void 0 ? _container2$index : _container2[index] = {};
+        if (_typeof(container[index]) !== 'object' || container[index] === null) {
+          // Cette erreur ne devrait jamais se produire si la détection fonctionne correctement
+          var pathParts = parts.slice(0, i + 1);
+          var currentPath = buildPathString(pathParts);
+          throw new Error("Cannot access property on primitive value. " + "Key \"".concat(key, "\" tries to access \"").concat(currentPath, "\" but it is already a ").concat(_typeof(container[index]), " value: ").concat(JSON.stringify(container[index]), ". ") + "This should have been detected during conflict detection phase.");
+        }
+      } else {
+        var _container3, _container3$index;
+        // Pas de conflit : utiliser un tableau
+        container = ensureArray(container, parent.key, parent.container);
+        while (container.length <= index) {
+          container.push(undefined);
+        }
+        (_container3$index = (_container3 = container)[index]) !== null && _container3$index !== void 0 ? _container3$index : _container3[index] = {};
+        if (_typeof(container[index]) !== 'object' || container[index] === null) {
+          // Cette erreur ne devrait jamais se produire si la détection fonctionne correctement
+          var _pathParts = parts.slice(0, i + 1);
+          var _currentPath = buildPathString(_pathParts);
+          throw new Error("Cannot access property on primitive value. " + "Key \"".concat(key, "\" tries to access \"").concat(_currentPath, "\" but it is already a ").concat(_typeof(container[index]), " value: ").concat(JSON.stringify(container[index]), ". ") + "This should have been detected during conflict detection phase.");
+        }
+      }
+      return container[index];
+    }
+
+    // Clé normale : créer objet ou tableau selon la partie suivante
+    var nextIsNumeric = (nextPart === null || nextPart === void 0 ? void 0 : nextPart.type) === 'numeric';
+    var conflict = hasConflict(basePath);
+    if (conflict) {
+      var _container4, _part$name2, _container4$_part$nam;
+      // Conflit : toujours utiliser un objet
+      container = ensureObject(container, parent.key, parent.container, true);
+      (_container4$_part$nam = (_container4 = container)[_part$name2 = part.name]) !== null && _container4$_part$nam !== void 0 ? _container4$_part$nam : _container4[_part$name2] = {};
+      if (Array.isArray(container[part.name])) {
+        container[part.name] = arrayToObject(container[part.name]);
+      } else if (_typeof(container[part.name]) !== 'object' || container[part.name] === null) {
+        // Cette erreur ne devrait jamais se produire si la détection fonctionne correctement
+        var _pathParts2 = parts.slice(0, i + 1);
+        var _currentPath2 = buildPathString(_pathParts2);
+        throw new Error("Cannot access property on primitive value. " + "Key \"".concat(key, "\" tries to access \"").concat(_currentPath2, "\" but it is already a ").concat(_typeof(container[part.name]), " value: ").concat(JSON.stringify(container[part.name]), ". ") + "This should have been detected during conflict detection phase.");
+      }
+    } else if (container[part.name] === undefined) {
+      // Pas de conflit, créer selon la partie suivante
+      container[part.name] = nextIsNumeric ? [] : {};
+    } else if (nextIsNumeric && !Array.isArray(container[part.name])) {
+      // On a besoin d'un tableau mais c'est un objet
+      var hasStringKeys = Object.keys(container[part.name]).some(function (k) {
+        var numKey = Number.parseInt(k, 10);
+        return Number.isNaN(numKey) || k !== String(numKey);
+      });
+      if (!hasStringKeys) {
+        container[part.name] = objectToArray(container[part.name]);
+      }
+    } else if (!nextIsNumeric && !isPlainObject(container[part.name])) {
+      // On a besoin d'un objet mais c'est un tableau
+      if (Array.isArray(container[part.name])) {
+        container[part.name] = arrayToObject(container[part.name]);
+      } else {
+        container[part.name] = {};
+      }
+    }
+
+    // S'assurer que container[part.name] est bien un objet après toutes les conversions
+    if (container[part.name] !== undefined && (_typeof(container[part.name]) !== 'object' || container[part.name] === null)) {
+      // Cette erreur ne devrait jamais se produire si la détection fonctionne correctement
+      var _pathParts3 = parts.slice(0, i + 1);
+      var _currentPath3 = buildPathString(_pathParts3);
+      throw new Error("Cannot access property on primitive value. " + "Key \"".concat(key, "\" tries to access \"").concat(_currentPath3, "\" but it is already a ").concat(_typeof(container[part.name]), " value: ").concat(JSON.stringify(container[part.name]), ". ") + "This should have been detected during conflict detection phase.");
+    }
+    return container[part.name];
+  };
+
+  // Traiter toutes les entrées
+  for (var _i3 = 0, _allEntries = allEntries; _i3 < _allEntries.length; _i3++) {
+    var _parts$;
+    var _allEntries$_i = _allEntries[_i3],
+      value = _allEntries$_i.value,
+      key = _allEntries$_i.key;
+    if (!key) continue;
+    var parts = parseKey(key);
+    var path = [{
+      container: jsonData,
+      key: null
+    }];
+    var container = jsonData;
+    var basePath = ((_parts$ = parts[0]) === null || _parts$ === void 0 ? void 0 : _parts$.type) === 'key' ? parts[0].name : '';
+    for (var i = 0; i < parts.length; i++) {
+      var part = parts[i];
+      var isLast = i === parts.length - 1;
+      var nextPart = i + 1 < parts.length ? parts[i + 1] : null;
+      var parent = path[path.length - 1];
+      if (isLast) {
+        // Dernière partie : assigner la valeur
+        processFinalValue(container, part, value, parent, basePath);
+      } else {
+        // Partie intermédiaire : créer la structure
+        var newContainer = processIntermediatePart(container, part, nextPart, parent, basePath, parts, i, key);
+        path.push({
+          container: container,
+          key: part.type === 'numeric' ? part.index : part.name
+        });
+        container = newContainer;
+      }
+    }
+  }
+  return jsonData;
+};
+
+/**
+ * Parse une clé de formulaire pour extraire les parties (nom, indices, etc.)
+ * @param {string} key - La clé à parser (ex: "user[email]", "tags[]", "items[0][name]")
+ * @returns {Array<{name: string, type: string, index?: number}>} Tableau des parties parsées
+ * @private
+ */
+var parseKey = function parseKey(key) {
+  var parts = [];
+  var current = '';
+  var i = 0;
+  var len = key.length;
+  while (i < len) {
+    var _char = key[i];
+    if (_char === '[') {
+      // Sauvegarder la partie précédente si elle existe
+      if (current) {
+        parts.push({
+          name: current,
+          type: 'key'
+        });
+        current = '';
+      }
+
+      // Trouver la fin du crochet
+      i++;
+      var bracketContent = '';
+      while (i < len && key[i] !== ']') {
+        bracketContent += key[i];
+        i++;
+      }
+      if (bracketContent === '') {
+        // [] vide = tableau
+        var lastPart = parts[parts.length - 1];
+        if (lastPart) {
+          lastPart.type = 'array';
+        } else {
+          // [] au début, créer une partie spéciale
+          parts.push({
+            name: '',
+            type: 'array'
+          });
+        }
+      } else {
+        // Contenu dans les crochets
+        var numIndex = Number.parseInt(bracketContent, 10);
+        if (!Number.isNaN(numIndex) && bracketContent === String(numIndex)) {
+          // Indice numérique
+          parts.push({
+            name: String(numIndex),
+            type: 'numeric',
+            index: numIndex
+          });
+        } else {
+          // Nom de propriété
+          parts.push({
+            name: bracketContent,
+            type: 'key'
+          });
+        }
+      }
+      i++; // Passer le ']'
+    } else {
+      current += _char;
+      i++;
+    }
+  }
+
+  // Ajouter la dernière partie si elle existe
+  if (current) {
+    parts.push({
+      name: current,
+      type: 'key'
+    });
+  }
+  return parts;
+};
+
+/**
+ * Vérifie si une valeur est un objet simple (pas un tableau, pas null)
+ * @param {*} obj - La valeur à vérifier
+ * @returns {boolean}
+ * @private
+ */
+var isPlainObject = function isPlainObject(obj) {
+  return _typeof(obj) === 'object' && obj !== null && !Array.isArray(obj);
+};
+
 /***/ }),
 
 /***/ "./modules/tristate/tristate.mjs":
@@ -2412,42 +3731,44 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _modules_dialog_dialog_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/dialog/dialog.mjs */ "./modules/dialog/dialog.mjs");
 /* harmony import */ var _modules_toast_toast_mjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/toast/toast.mjs */ "./modules/toast/toast.mjs");
 /* harmony import */ var _modules_common_mjs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./modules/common.mjs */ "./modules/common.mjs");
-
-
-
-
-
-
-/**
- * Creates an APX object that wraps one or more HTML elements.
- * @param {string|HTMLElement|NodeList|HTMLCollection|Array<HTMLElement>|jQuery|Function} input - The input to create the APX object from.
- * @returns {Object} The APX object.
- * @throws {Error} If the input type is invalid.
- * @example
- * // XPath
- * const apx1 = APX('//div[@class="example"]');
- *
- * // CSS selector
- * const apx2 = APX('.example');
- *
- * // Single element
- * const element = document.querySelector('.example');
- * const apx3 = APX(element);
- *
- * // NodeList or HTMLCollection
- * const nodeList = document.querySelectorAll('.example');
- * const apx4 = APX(nodeList);
- *
- * // Array of elements
- * const elements = [document.querySelector('.example1'), document.querySelector('.example2')];
- * const apx5 = APX(elements);
- *
- * // jQuery object
- * const $example = $('.example');
- * const apx6 = APX($example);
- *
- * // Function returning an APX object
- * const apx7 = APX(() => APX('.example'));
+/* harmony import */ var _modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modules/tools/exports.mjs */ "./modules/tools/exports.mjs");
+
+
+
+
+
+
+
+/**
+ * Creates an APX object that wraps one or more HTML elements.
+ * @param {string|HTMLElement|NodeList|HTMLCollection|Array<HTMLElement>|jQuery|Function} input - The input to create the APX object from.
+ * @returns {Object} The APX object.
+ * @throws {Error} If the input type is invalid.
+ * @example
+ * // XPath
+ * const apx1 = APX('//div[@class="example"]');
+ *
+ * // CSS selector
+ * const apx2 = APX('.example');
+ *
+ * // Single element
+ * const element = document.querySelector('.example');
+ * const apx3 = APX(element);
+ *
+ * // NodeList or HTMLCollection
+ * const nodeList = document.querySelectorAll('.example');
+ * const apx4 = APX(nodeList);
+ *
+ * // Array of elements
+ * const elements = [document.querySelector('.example1'), document.querySelector('.example2')];
+ * const apx5 = APX(elements);
+ *
+ * // jQuery object
+ * const $example = $('.example');
+ * const apx6 = APX($example);
+ *
+ * // Function returning an APX object
+ * const apx7 = APX(() => APX('.example'));
  */
 var APX = function APX(input) {
   var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
@@ -2523,11 +3844,13 @@ var APX = function APX(input) {
   };
   (0,_modules_listen_listen_mjs__WEBPACK_IMPORTED_MODULE_0__["default"])(apx);
   (0,_modules_tristate_tristate_mjs__WEBPACK_IMPORTED_MODULE_1__["default"])(apx);
+  (0,_modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_5__.augmentWithPack)(apx);
   return apx;
 };
 APX.loadCss = _modules_common_mjs__WEBPACK_IMPORTED_MODULE_4__.loadCss;
 APX.dialog = _modules_dialog_dialog_mjs__WEBPACK_IMPORTED_MODULE_2__["default"];
 APX.toast = _modules_toast_toast_mjs__WEBPACK_IMPORTED_MODULE_3__["default"];
+APX.tools = _modules_tools_exports_mjs__WEBPACK_IMPORTED_MODULE_5__.tools;
 APX.isAPXObject = function (obj) {
   return obj && obj._isAPXObject === true;
 };