@appius-fr/apx 2.6.0 → 2.6.2

package/modules/toast/README.md

@@ -66,13 +66,14 @@ APX.toast.use('admin').closeAll();
 {
   position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left', // default 'bottom-right'
   maxToasts: number,                // default 5
-  defaultDurationMs: number,        // default 5000
+  defaultDurationMs: number,       // default 5000
   zIndex: number,                   // default 11000
   ariaLive: 'polite'|'assertive'|'off', // default 'polite'
   gap: number,                      // default 8
-  dedupe: boolean,                  // default false
+  dedupe: boolean,                 // default false
   containerClass: string,           // extra class on container
-  offset: number                    // px offset from screen edges
+  offset: number,                  // px offset from screen edges
+  progress: false | true | { enable, position?, pauseButton? }  // default false; pauseButton default false (v2.6.1)
 }
 
 // ToastOptions (per toast)
@@ -83,6 +84,7 @@ APX.toast.use('admin').closeAll();
   dismissible: boolean,             // default true
   id: string,                       // stable id for dedupe updates
   className: string,                // extra classes on the toast element
+  progress: true | { enable: boolean, position?: 'top'|'bottom', pauseButton?: boolean },  // v2.6.1; pauseButton default false
   onClick: (ref, ev) => void,
   onClose: (ref, reason) => void    // reason: 'timeout'|'close'|'api'|'overflow'
 }
@@ -106,15 +108,39 @@ Class structure (BEM‑like):
 - Container: `APX-toast-container APX-toast-container--{corner}`
 - Toast: `APX-toast APX-toast--{type}`
 - Children: `APX-toast__content`, optional `APX-toast__close`
+- Progress (v2.6.1): `APX-toast__progress`, `APX-toast__progress-track`, `APX-toast__progress-bar`, optional `APX-toast__progress-pause`
 - Animations: `APX-toast--enter/--enter-active`, `APX-toast--exit/--exit-active`
 
+## Progress bar (v2.6.1)
+
+Optional visual countdown for toasts with a duration. Bar shows time remaining (100% → 0%); sync with timer and hover pause.
+
+```js
+// Bar on top (default), no pause button by default
+APX.toast.show({ message: 'Saving…', type: 'info', progress: true });
+
+// Bar with pause/resume button
+APX.toast.show({ message: 'Pausable', type: 'info', progress: { enable: true, position: 'top', pauseButton: true } });
+
+// Bar at bottom
+APX.toast.show({ message: 'Done', type: 'success', progress: { enable: true, position: 'bottom' } });
+
+// Default progress for all toasts from a manager
+APX.toast.configure({ progress: true });
+```
+
+- `progress: true` → bar at top, no pause button.
+- `progress: { enable, position: 'top'|'bottom', pauseButton?: boolean }` — `pauseButton` defaults to `false`; set `pauseButton: true` to show the round pause/resume button on the toast corner.
+- No bar if `durationMs === 0` (sticky). Extra spacing is applied when the button is present so stacked toasts do not overlap.
+
 ## Behavior
 
 - Lazy container creation (first `show`).
 - `maxToasts` enforced; oldest removed with reason `'overflow'`.
-- Hover pauses timer; resumes on mouse leave.
-- `durationMs = 0` makes the toast sticky.
+- Hover pauses timer; resumes on mouse leave (unless user clicked pause).
+- `durationMs = 0` makes the toast sticky (no progress bar).
 - If `dedupe: true` and `id` matches an open toast, it updates instead of creating a new one.
+- With `progress`, a bar and optional pause/resume button show; button toggles pause (same as hover).
 
 ## Accessibility & SSR
 

package/modules/toast/css/toast.css

@@ -51,6 +51,91 @@
     font-size: 16px; line-height: 1; text-align: center;
 }
 
+/* Progress bar (outside content, flush to toast edges) */
+.APX-toast__progress {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: var(--apx-toast-progress-height, 4px);
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    flex-shrink: 0;
+    border-radius: inherit;
+    overflow: visible;
+}
+.APX-toast__progress--top {
+    top: 0;
+    border-radius: var(--apx-toast-radius, 6px) var(--apx-toast-radius, 6px) 0 0;
+}
+.APX-toast__progress--bottom {
+    bottom: 0;
+    border-radius: 0 0 var(--apx-toast-radius, 6px) var(--apx-toast-radius, 6px);
+}
+/* Track contains the bar; no margin (pause button is on the corner, overlapping) */
+.APX-toast__progress-track {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+}
+.APX-toast__progress-bar {
+    height: 100%;
+    width: 100%;
+    max-width: 100%;
+    transition: width 80ms linear;
+    background: rgba(0, 0, 0, 0.25);
+}
+.APX-toast--info .APX-toast__progress-bar { background: rgba(5, 44, 101, 0.5); }
+.APX-toast--success .APX-toast__progress-bar { background: rgba(0, 0, 0, 0.25); }
+.APX-toast--warning .APX-toast__progress-bar { background: rgba(102, 77, 3, 0.5); }
+.APX-toast--danger .APX-toast__progress-bar { background: rgba(0, 0, 0, 0.25); }
+/* Pause/Resume button: round, center exactly on toast corner (top-left or bottom-left) */
+.APX-toast__progress-pause {
+    position: absolute;
+    width: var(--apx-toast-progress-pause-size, 18px);
+    height: var(--apx-toast-progress-pause-size, 18px);
+    left: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #eee;
+    color: currentColor;
+    border: 1px solid rgba(0, 0, 0, 0.35);
+    border-radius: 50%;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    line-height: 1;
+    opacity: 0.95;
+    transition: opacity 120ms ease;
+    flex-shrink: 0;
+}
+.APX-toast__progress--top .APX-toast__progress-pause {
+    top: 0;
+    transform: translate(-50%, -50%);
+}
+.APX-toast__progress--bottom .APX-toast__progress-pause {
+    bottom: 0;
+    transform: translate(-50%, 50%);
+}
+.APX-toast--info .APX-toast__progress-pause { background: var(--apx-toast-info-bg, #0dcaf0); border-color: rgba(5, 44, 101, 0.55); }
+.APX-toast--success .APX-toast__progress-pause { background: var(--apx-toast-success-bg, #198754); border-color: rgba(0, 0, 0, 0.3); }
+.APX-toast--warning .APX-toast__progress-pause { background: var(--apx-toast-warning-bg, #ffc107); border-color: rgba(102, 77, 3, 0.6); }
+.APX-toast--danger .APX-toast__progress-pause { background: var(--apx-toast-danger-bg, #dc3545); border-color: rgba(0, 0, 0, 0.35); }
+.APX-toast__progress-pause:hover { opacity: 1; }
+.APX-toast__progress-pause:focus { outline: 2px solid rgba(0,0,0,.4); outline-offset: -2px; }
+.APX-toast__progress-pause svg {
+    width: 10px;
+    height: 10px;
+    display: block;
+}
+/* Extra top/bottom padding when progress bar is present (default content padding 10px + bar height) */
+.APX-toast--has-progress-top { padding-top: calc(10px + var(--apx-toast-progress-height, 4px)); }
+.APX-toast--has-progress-bottom { padding-bottom: calc(10px + var(--apx-toast-progress-height, 4px)); }
+/* Reserve space for stacking when pause button is present (button extends outside toast corner) */
+.APX-toast--has-progress-top.APX-toast--has-progress-pause { margin-top: calc(var(--apx-toast-progress-pause-size, 18px) / 2); }
+.APX-toast--has-progress-bottom.APX-toast--has-progress-pause { margin-bottom: calc(var(--apx-toast-progress-pause-size, 18px) / 2); }
+
 /* Animations */
 .APX-toast--enter { opacity: 0; transform: translateY(8px); }
 .APX-toast--enter.APX-toast--enter-active { opacity: 1; transform: translateY(0); }

package/modules/toast/toast.mjs

@@ -30,6 +30,11 @@ import './css/toast.css';
  * @property {string} [containerClass]
  * @property {number} [offset]
  * @property {string} [id]
+ * @property {boolean|{enable: boolean, position: 'top'|'bottom'}} [progress] Default: false. Show progress bar when true or { enable: true, position: 'top'|'bottom' }.
+ */
+
+/**
+ * @typedef {{enable: boolean, position: 'top'|'bottom', pauseButton: boolean}} ProgressOpt
  */
 
 /**
@@ -44,6 +49,7 @@ import './css/toast.css';
  * @property {string} [className]
  * @property {Position} [position]
  * @property {'up'|'down'|'auto'} [flow] Flow direction for stacking toasts. 'auto' determines based on position. Default: 'auto'
+ * @property {boolean|{enable: boolean, position: 'top'|'bottom', pauseButton?: boolean}} [progress] Show progress bar: true = top, or { enable, position, pauseButton } (pauseButton default false).
  */
 
 /**
@@ -104,7 +110,8 @@ const DEFAULT_CONFIG = {
     gap: 8,
     dedupe: false,
     containerClass: '',
-    offset: 0
+    offset: 0,
+    progress: false
 };
 
 /**
@@ -118,6 +125,101 @@ function createEl(tag, classNames) {
     return el;
 }
 
+/** Minimal line-based pause (two bars) / resume (triangle right) icon SVG. Uses currentColor. */
+function getProgressPauseResumeIconSVG(paused) {
+    if (paused) {
+        return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M8 6L8 18L17 12Z"/></svg>`;
+    }
+    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><line x1="9" y1="6" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="18"/></svg>`;
+}
+
+/**
+ * Create and insert progress block (track + bar, optional pause button) into toast. Button is fixed at left via track layout.
+ * @param {HTMLElement} toastEl
+ * @param {HTMLElement} contentEl
+ * @param {HTMLElement|null} closeBtn
+ * @param {ProgressOpt} progressOpt
+ * @returns {{ wrap: HTMLElement, bar: HTMLElement, pauseBtn: HTMLElement|null }}
+ */
+function createProgressBlock(toastEl, contentEl, closeBtn, progressOpt) {
+    const pos = progressOpt.position;
+    const showPauseButton = progressOpt.pauseButton === true;
+    const wrap = createEl('div', `APX-toast__progress APX-toast__progress--${pos}`);
+    const track = createEl('div', 'APX-toast__progress-track');
+    const bar = createEl('div', 'APX-toast__progress-bar');
+    bar.setAttribute('role', 'progressbar');
+    bar.setAttribute('aria-valuemin', '0');
+    bar.setAttribute('aria-valuemax', '100');
+    bar.setAttribute('aria-label', 'Temps restant');
+    bar.setAttribute('aria-valuenow', '100');
+    bar.style.width = '100%';
+    track.appendChild(bar);
+    wrap.appendChild(track);
+    let pauseBtn = null;
+    if (showPauseButton) {
+        pauseBtn = createEl('button', 'APX-toast__progress-pause');
+        pauseBtn.type = 'button';
+        pauseBtn.setAttribute('aria-label', 'Pause');
+        pauseBtn.setAttribute('title', 'Pause');
+        pauseBtn.innerHTML = getProgressPauseResumeIconSVG(false); // running = show pause icon
+        wrap.insertBefore(pauseBtn, track);
+    }
+    if (pos === 'top') {
+        toastEl.insertBefore(wrap, contentEl);
+        toastEl.classList.add('APX-toast--has-progress-top');
+    } else {
+        toastEl.insertBefore(wrap, closeBtn);
+        toastEl.classList.add('APX-toast--has-progress-bottom');
+    }
+    if (showPauseButton) toastEl.classList.add('APX-toast--has-progress-pause');
+    return { wrap, bar, pauseBtn };
+}
+
+/**
+ * Update progress block position (classes + DOM order)
+ * @param {HTMLElement} toastEl
+ * @param {HTMLElement} progressWrap
+ * @param {HTMLElement} contentEl
+ * @param {HTMLElement|null} closeBtn
+ * @param {'top'|'bottom'} pos
+ */
+function applyProgressPosition(toastEl, progressWrap, contentEl, closeBtn, pos) {
+    toastEl.classList.remove('APX-toast--has-progress-top', 'APX-toast--has-progress-bottom');
+    toastEl.classList.add(pos === 'top' ? 'APX-toast--has-progress-top' : 'APX-toast--has-progress-bottom');
+    progressWrap.classList.remove('APX-toast__progress--top', 'APX-toast__progress--bottom');
+    progressWrap.classList.add(`APX-toast__progress--${pos}`);
+    const target = pos === 'top' ? contentEl : closeBtn;
+    if (progressWrap.nextElementSibling !== target) toastEl.insertBefore(progressWrap, target);
+}
+
+/**
+ * Resolve progress option from per-call option and config default
+ * @param {boolean|{enable: boolean, position: 'top'|'bottom'}|undefined} option
+ * @param {boolean|{enable: boolean, position: 'top'|'bottom'}|undefined} configDefault
+ * @returns {ProgressOpt}
+ */
+function resolveProgress(option, configDefault) {
+    const fromConfig = configDefault === true
+        ? { enable: true, position: 'top', pauseButton: false }
+        : (configDefault && typeof configDefault === 'object'
+            ? {
+                enable: !!configDefault.enable,
+                position: configDefault.position === 'bottom' ? 'bottom' : 'top',
+                pauseButton: configDefault.pauseButton === true
+            }
+            : { enable: false, position: 'top', pauseButton: false });
+    if (option === undefined || option === null) return fromConfig;
+    if (option === true) return { enable: true, position: 'top', pauseButton: false };
+    if (typeof option === 'object') {
+        return {
+            enable: !!option.enable,
+            position: option.position === 'bottom' ? 'bottom' : 'top',
+            pauseButton: option.pauseButton === true
+        };
+    }
+    return { enable: false, position: 'top', pauseButton: false };
+}
+
 /**
  * Normalize placement synonyms to CSS values
  * @param {string} placement
@@ -388,6 +490,16 @@ class ToastManager {
             toastEl.appendChild(closeBtn);
         }
 
+        let progressWrap = null;
+        let progressBarEl = null;
+        let progressPauseBtn = null;
+        if (options.progress.enable && options.durationMs > 0) {
+            const created = createProgressBlock(toastEl, contentEl, closeBtn, options.progress);
+            progressWrap = created.wrap;
+            progressBarEl = created.bar;
+            progressPauseBtn = created.pauseBtn;
+        }
+
         // Get or create container for this specific position
         let container = null;
         let positionUpdateFn = null;
@@ -564,12 +676,27 @@ class ToastManager {
         let remaining = options.durationMs;
         let timerId = null;
         let startTs = null;
+        let userPaused = false;
+        let progressRafId = null;
         const handlers = { click: new Set(), close: new Set() };
 
         const startTimer = () => {
             if (!remaining || remaining <= 0) return; // sticky
             startTs = Date.now();
             timerId = window.setTimeout(() => ref.close('timeout'), remaining);
+            if (progressBarEl) {
+                const tick = () => {
+                    if (timerId == null || startTs == null) return;
+                    const elapsed = Date.now() - startTs;
+                    const remainingMs = Math.max(0, remaining - elapsed);
+                    const durationMs = options.durationMs;
+                    const pct = durationMs > 0 ? Math.max(0, Math.min(100, (remainingMs / durationMs) * 100)) : 0;
+                    progressBarEl.style.width = `${pct}%`;
+                    progressBarEl.setAttribute('aria-valuenow', String(Math.round(pct)));
+                    progressRafId = requestAnimationFrame(tick);
+                };
+                progressRafId = requestAnimationFrame(tick);
+            }
         };
         const pauseTimer = () => {
             if (timerId != null) {
@@ -577,6 +704,22 @@ class ToastManager {
                 timerId = null;
                 if (startTs != null) remaining -= (Date.now() - startTs);
             }
+            if (progressRafId != null) {
+                cancelAnimationFrame(progressRafId);
+                progressRafId = null;
+            }
+        };
+
+        const attachProgressPauseHandler = (btn) => {
+            btn.addEventListener('click', (ev) => {
+                ev.stopPropagation();
+                userPaused = !userPaused;
+                if (userPaused) pauseTimer(); else startTimer();
+                const label = userPaused ? 'Reprendre' : 'Pause';
+                btn.setAttribute('aria-label', label);
+                btn.setAttribute('title', label);
+                btn.innerHTML = getProgressPauseResumeIconSVG(userPaused); // paused = resume (triangle)
+            });
         };
 
         /** @type {ToastRef} */
@@ -603,9 +746,34 @@ class ToastManager {
                     if (options.className) toastEl.classList.remove(...options.className.split(' ').filter(Boolean));
                     if (merged.className) toastEl.classList.add(...merged.className.split(' ').filter(Boolean));
                 }
+                // update progress visibility/position
+                options.progress = merged.progress;
+                if (progressWrap) {
+                    if (!merged.progress.enable || merged.durationMs <= 0) {
+                        progressWrap.style.display = 'none';
+                    } else {
+                        progressWrap.style.display = '';
+                        applyProgressPosition(toastEl, progressWrap, contentEl, closeBtn, merged.progress.position);
+                    }
+                } else if (merged.progress.enable && merged.durationMs > 0) {
+                    const created = createProgressBlock(toastEl, contentEl, closeBtn, merged.progress);
+                    progressWrap = created.wrap;
+                    progressBarEl = created.bar;
+                    progressPauseBtn = created.pauseBtn;
+                    if (progressPauseBtn) attachProgressPauseHandler(progressPauseBtn);
+                }
+                if (progressWrap && progressWrap.style.display !== 'none' && merged.progress.pauseButton === true) {
+                    toastEl.classList.add('APX-toast--has-progress-pause');
+                } else {
+                    toastEl.classList.remove('APX-toast--has-progress-pause');
+                }
                 // update duration logic
                 options.durationMs = merged.durationMs;
                 remaining = merged.durationMs;
+                if (progressBarEl) {
+                    progressBarEl.style.width = '100%';
+                    progressBarEl.setAttribute('aria-valuenow', '100');
+                }
                 pauseTimer();
                 startTimer();
             },
@@ -628,7 +796,10 @@ class ToastManager {
             const cleanup = (reason) => {
                 if (!toastEl) return;
                 pauseTimer();
-                
+                if (progressRafId != null) {
+                    cancelAnimationFrame(progressRafId);
+                    progressRafId = null;
+                }
                 // Cleanup position listeners and restore styles
                 if (positionCleanup) {
                     positionCleanup();
@@ -678,9 +849,10 @@ class ToastManager {
 
         // Hover pause
         toastEl.addEventListener('mouseenter', pauseTimer);
-        toastEl.addEventListener('mouseleave', () => startTimer());
+        toastEl.addEventListener('mouseleave', () => { if (!userPaused) startTimer(); });
 
         if (closeBtn) closeBtn.addEventListener('click', (ev) => { ev.stopPropagation(); ref.close('close'); });
+        if (progressPauseBtn) attachProgressPauseHandler(progressPauseBtn);
 
         // Track
         this.open.push(ref);
@@ -719,6 +891,7 @@ class ToastManager {
         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;
+        o.progress = resolveProgress(opts.progress, this.config.progress);
         return o;
     }
 

package/modules/tools/form-packer/README.md

@@ -123,12 +123,14 @@ The module intelligently handles mixed structures (objects with both numeric and
 
 ## API
 
-### `APX.tools.packFormToJSON(form)`
+### `APX.tools.packFormToJSON(form, options?)`
 
 Converts an HTML form element into a JSON object.
 
 **Parameters:**
 - `form` (HTMLFormElement): The form element to convert
+- `options` (Object, optional):
+  - `numericKeysAlwaysArray` (boolean, default `false`): If `true`, every numeric bracket key (e.g. `[26]`) is treated as an array index (pre-2.6.2 behaviour). If `false`, the heuristic applies: array only when indices are dense 0,1,2,…,n; otherwise object with string keys.
 
 **Returns:** (Object) The JSON object representation of the form data
 
@@ -137,30 +139,26 @@ Converts an HTML form element into a JSON object.
 **Example:**
 ```javascript
 const form = document.querySelector('#myForm');
-try {
-    const data = APX.tools.packFormToJSON(form);
-    console.log(data);
-} catch (error) {
-    console.error('Error:', error.message);
-}
+const data = APX.tools.packFormToJSON(form);
+// Legacy: always use arrays for numeric keys
+const dataLegacy = APX.tools.packFormToJSON(form, { numericKeysAlwaysArray: true });
 ```
 
-### `APX('form').pack()`
+### `APX('form').pack(options?)`
 
 Converts the first selected form element into a JSON object. This is a chainable method on APX objects.
 
+**Parameters:**
+- `options` (Object, optional): Same as the second argument of `packFormToJSON` (e.g. `{ numericKeysAlwaysArray: true }`).
+
 **Returns:** (Object) The JSON object representation of the form data
 
 **Throws:** (Error) If no element is found or the first element is not a form
 
 **Example:**
 ```javascript
-try {
-    const data = APX('form#myForm').pack();
-    console.log(data);
-} catch (error) {
-    console.error('Error:', error.message);
-}
+const data = APX('form#myForm').pack();
+const dataLegacy = APX('form#myForm').pack({ numericKeysAlwaysArray: true });
 ```
 
 ---

package/modules/tools/form-packer/augment-apx.mjs

@@ -8,12 +8,14 @@ import { packFormToJSON } from './packToJson.mjs';
 export default function (apx) {
     /**
      * Convertit le premier formulaire sélectionné en objet JSON
+     * @param {Object} [options] - Options passées à packFormToJSON (ex. { numericKeysAlwaysArray: true })
      * @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();
+     * const dataLegacy = APX('form').pack({ numericKeysAlwaysArray: true });
      */
-    apx.pack = function () {
+    apx.pack = function (options) {
         const firstElement = this.first();
         if (!firstElement) {
             throw new Error('No element found');
@@ -21,7 +23,7 @@ export default function (apx) {
         if (firstElement.tagName !== 'FORM') {
             throw new Error('Element is not a form');
         }
-        return packFormToJSON(firstElement);
+        return packFormToJSON(firstElement, options);
     };
     
     return apx;

package/modules/tools/form-packer/packToJson.mjs

@@ -1,15 +1,19 @@
 /**
  * Convertit un formulaire HTML en objet JSON
  * @param {HTMLFormElement} form - Le formulaire à convertir
+ * @param {Object} [options] - Options de conversion
+ * @param {boolean} [options.numericKeysAlwaysArray=false] - Si true, toute clé numérique est traitée comme index de tableau (comportement d'avant 2.6.2). Sinon, heuristique : tableau seulement si indices denses 0,1,2,…,n.
  * @returns {Object} L'objet JSON résultant
  * @throws {TypeError} Si form n'est pas un HTMLFormElement
  */
-export const packFormToJSON = (form) => {
+export const packFormToJSON = (form, options = {}) => {
     // Validation de l'entrée
     if (!form || !(form instanceof HTMLFormElement)) {
         throw new TypeError('packFormToJSON expects an HTMLFormElement');
     }
 
+    const numericKeysAlwaysArray = options.numericKeysAlwaysArray === true;
+
     const formData = new FormData(form);
     const jsonData = {};
     
@@ -48,6 +52,7 @@ export const packFormToJSON = (form) => {
     
     const pathUsage = new Map(); // Map<pathString, PathUsage>
     const keyAnalysis = new Map(); // Map<basePath, {hasNumeric: boolean, hasString: boolean}>
+    const numericIndicesByPath = new Map(); // Map<pathString, Set<number>> — indices under each parent path
     const allEntries = [];
     
     /**
@@ -100,6 +105,13 @@ export const packFormToJSON = (form) => {
             if (part.type === 'key') {
                 currentPath = currentPath ? `${currentPath}[${part.name}]` : part.name;
             } else if (part.type === 'numeric') {
+                const parentPath = currentPath;
+                let set = numericIndicesByPath.get(parentPath);
+                if (!set) {
+                    set = new Set();
+                    numericIndicesByPath.set(parentPath, set);
+                }
+                set.add(part.index);
                 currentPath = `${currentPath}[${part.index}]`;
             } else if (part.type === 'array') {
                 currentPath = `${currentPath}[]`;
@@ -190,6 +202,34 @@ export const packFormToJSON = (form) => {
         return analysis?.hasNumeric && analysis?.hasString;
     };
 
+    /**
+     * True if indices are exactly 0, 1, 2, ..., n (dense, sequential from 0).
+     * @param {number[]} indices - Sorted array of indices
+     * @returns {boolean}
+     */
+    const isDenseSequential = (indices) => {
+        if (indices.length === 0) return false;
+        const sorted = [...indices].sort((a, b) => a - b);
+        for (let j = 0; j < sorted.length; j++) {
+            if (sorted[j] !== j) return false;
+        }
+        return true;
+    };
+
+    /**
+     * True if numeric keys under this path should be treated as array indices.
+     * With numericKeysAlwaysArray: always true when path has numeric children.
+     * Otherwise: true only when indices are dense 0..n.
+     * @param {string} parentPath - Path to the container that has numeric children
+     * @returns {boolean}
+     */
+    const useArrayForNumericPath = (parentPath) => {
+        const set = numericIndicesByPath.get(parentPath);
+        if (!set || set.size === 0) return true;
+        if (numericKeysAlwaysArray) return true;
+        return isDenseSequential([...set]);
+    };
+
     /**
      * Convertit un tableau en objet en préservant les indices numériques comme propriétés
      * @param {Array} arr - Le tableau à convertir
@@ -285,8 +325,9 @@ export const packFormToJSON = (form) => {
      * @param {*} value - La valeur à assigner
      * @param {Object} parent - Le conteneur parent
      * @param {string} basePath - Le chemin de base pour la détection de conflit
+     * @param {string} parentPath - Chemin du conteneur actuel (pour heuristique numeric)
      */
-    const processFinalValue = (container, part, value, parent, basePath) => {
+    const processFinalValue = (container, part, value, parent, basePath, parentPath) => {
         if (part.type === 'array') {
             // Tableau explicite avec []
             container[part.name] ??= [];
@@ -296,13 +337,18 @@ export const packFormToJSON = (form) => {
                 container[part.name] = [container[part.name], value];
             }
         } else if (part.type === 'numeric') {
-            // Indice numérique final
             const { index } = part;
-            container = ensureArray(container, parent.key, parent.container);
-            while (container.length <= index) {
-                container.push(undefined);
+            const useArray = useArrayForNumericPath(parentPath);
+            if (useArray) {
+                container = ensureArray(container, parent.key, parent.container);
+                while (container.length <= index) {
+                    container.push(undefined);
+                }
+                container[index] = value;
+            } else {
+                container = ensureObject(container, parent.key, parent.container, true);
+                container[index] = value;
             }
-            container[index] = value;
         } else {
             // Clé simple finale
             const conflict = hasConflict(basePath);
@@ -348,16 +394,14 @@ export const packFormToJSON = (form) => {
      */
     const 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)
             const { index } = part;
-            const conflict = hasConflict(basePath);
+            const parentPath = buildPathString(parts.slice(0, i));
+            const useArray = useArrayForNumericPath(parentPath) && !hasConflict(basePath);
             
-            if (conflict) {
-                // Conflit : utiliser un objet (les indices seront des propriétés)
+            if (!useArray) {
                 container = ensureObject(container, parent.key, parent.container, true);
                 container[index] ??= {};
                 if (typeof container[index] !== 'object' || container[index] === null) {
-                    // Cette erreur ne devrait jamais se produire si la détection fonctionne correctement
                     const pathParts = parts.slice(0, i + 1);
                     const currentPath = buildPathString(pathParts);
                     throw new Error(
@@ -367,14 +411,12 @@ export const packFormToJSON = (form) => {
                     );
                 }
             } else {
-                // Pas de conflit : utiliser un tableau
                 container = ensureArray(container, parent.key, parent.container);
                 while (container.length <= index) {
                     container.push(undefined);
                 }
                 container[index] ??= {};
                 if (typeof container[index] !== 'object' || container[index] === null) {
-                    // Cette erreur ne devrait jamais se produire si la détection fonctionne correctement
                     const pathParts = parts.slice(0, i + 1);
                     const currentPath = buildPathString(pathParts);
                     throw new Error(
@@ -459,8 +501,8 @@ export const packFormToJSON = (form) => {
             const parent = path[path.length - 1];
 
             if (isLast) {
-                // Dernière partie : assigner la valeur
-                processFinalValue(container, part, value, parent, basePath);
+                const parentPath = buildPathString(parts.slice(0, i));
+                processFinalValue(container, part, value, parent, basePath, parentPath);
             } else {
                 // Partie intermédiaire : créer la structure
                 const newContainer = processIntermediatePart(container, part, nextPart, parent, basePath, parts, i, key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appius-fr/apx",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "description": "Appius Extended JS - A powerful JavaScript extension library",
   "main": "dist/APX.prod.mjs",
   "module": "dist/APX.prod.mjs",