@lmb-it/kitsconcerto-native 0.1.267 → 0.1.270

package/animations/index.cjs

@@ -28,7 +28,38 @@ const overlayAnimations = {
   // Slightly heavier damping/lower stiffness so the sheet glides up without
   // overshoot. Exit: timed slide-down.
   sheet: {
-    enter: { damping: 26, stiffness: 140, mass: 1 },
+    /*
+     * ⛔ 130ms, MEASURED OFF THE PLATFORM'S OWN SHEET — not chosen by feel.
+     *
+     * The entrance was `{damping: 26, stiffness: 140, mass: 1}`, and Fouad's
+     * note on the select popup was "too slow". It was, and the number that
+     * made it slow is not the one it looks like: damping 26 against
+     * stiffness 140 is a damping RATIO of 1.10 — very slightly OVERDAMPED —
+     * so the panel approaches its resting place asymptotically and never
+     * visibly arrives.
+     *
+     * MEASURED on an iPhone 16 Pro simulator with
+     * `UML/Working/tools/motionProbe.mjs`, one instrument for both:
+     *
+     *   the platform's own sheet      travel over  9 frames / 126ms,
+     *   (RN `Modal animationType`         then STOPPED
+     *    ="slide"`, which is what
+     *    `WorkspaceSwitcherSheet`
+     *    and React Navigation's
+     *    `slide_from_bottom` present)
+     *
+     *   this sheet, on the old spring travel over  8 frames / 154ms,
+     *                                     and STILL MOVING at 437ms
+     *
+     * ⚠️ THE INITIAL TRAVEL WAS NEVER THE PROBLEM — 154ms against 126ms is
+     * nothing. The tail is. The old spring was still creeping a third of a
+     * second after it looked finished, and that is what reads as slow.
+     *
+     * So the shape follows the house and not the library's habit (§5): the
+     * platform slides for a fixed time on an ease-out and stops dead, so
+     * this does too. 130 is the measured 126 rounded to the nearest 10ms.
+     */
+    enter: { duration: 130 },
     exitDuration: 260},
   // ── Toast ────────────────────────────────────────────────
   // One element owns the entrance: FadeInUp/FadeInDown animate opacity AND

package/animations/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/animations/index.ts"],"sourcesContent":["/**\n * ════════════════════════════════════════════════════════════════════════\n *  Overlay animation tuning  —  EDIT THIS FILE TO CONTROL ALL OVERLAY MOTION\n * ════════════════════════════════════════════════════════════════════════\n *\n * Every in/out animation value used by the animated overlay components on\n * React Native (reanimated) lives here. Change a number and it updates\n * everywhere that animation is used — no need to touch the component files.\n *\n * Consumed by (native):\n *   • components/overlay/Dialog/index.native.tsx\n *   • components/overlay/ConfirmDialog/index.native.tsx\n *   • components/overlay/Toast/index.native.tsx\n *\n *  Two kinds of value:\n *   • spring  → reanimated `.springify().damping(d).stiffness(s)` (+ optional `.delay`)\n *               - damping   ↓ lower  = bouncier, longer settle\n *               - stiffness ↑ higher = snappier, faster\n *   • duration → milliseconds for `.duration(ms)` (timing-based fade/slide)\n */\n\nexport interface ISpringConfig {\n    /** reanimated `.damping()` — lower = bouncier / slower to settle. */\n    damping: number;\n    /** reanimated `.stiffness()` — higher = snappier / faster. */\n    stiffness: number;\n    /** reanimated `.mass()` — heavier = slower / more inertia. Defaults to 1. */\n    mass?: number;\n    /** reanimated `.delay()` in ms — wait before the animation starts. */\n    delay?: number;\n}\n\nexport interface IOverlayAnimations {\n    /**\n     * Dimmed backdrop behind every overlay (fade in/out).\n     *\n     * ⚠️ `exitDuration` is a FLOOR, not the value to pass — read\n     * `scrimExitDuration()` below before using it. The dim has to outlast the\n     * panel's own exit or the page behind reappears while the panel is still\n     * leaving. ⛔ The old wording here said \"the scrim is the panel's PARENT\";\n     * that stopped being true of the Dialog on 29 September 2026, and the\n     * function's own comment records both the old reason and the new one.\n     */\n    scrim: { enterDuration: number; exitDuration: number };\n    /** Centered Dialog panel (zoom-in spring in, timed zoom-out). */\n    dialog: { enter: ISpringConfig; exitDuration: number };\n    /** Confirm: centered panel, its floating icon bubble, and the content-only/prompt panel. */\n    confirm: { enter: ISpringConfig; icon: ISpringConfig; content: ISpringConfig; exitDuration: number };\n    /**\n     * Bottom sheet shared by Dialog & Confirm (slide-up spring in, timed\n     * slide-down out).\n     *\n     * `keepMotionWhenReduced` asks Reanimated to run this one even when the\n     * reader has iOS \"Reduce Motion\" on — see the note beside the value.\n     */\n    sheet: { enter: ISpringConfig; exitDuration: number; keepMotionWhenReduced: boolean };\n    /** Toast — single merged fade+slide entrance, timed exit, re-layout, keyboard gap. */\n    toast: {\n        enter: ISpringConfig;\n        exitDuration: number;\n        layoutDuration: number;\n        keyboardGap: number;\n    };\n}\n\nexport const overlayAnimations: IOverlayAnimations = {\n    // ── Backdrop / scrim ─────────────────────────────────────\n    scrim: {\n        enterDuration: 120,\n        exitDuration: 100,\n    },\n\n    // ── Centered Dialog panel ────────────────────────────────\n    // Enter: critically-ish damped spring — snappy but settles cleanly (no\n    // ringing). Exit: timing-based zoom-out (springs are enter-only).\n    dialog: {\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        exitDuration: 120,\n    },\n\n    // ── Confirm dialog ───────────────────────────────────────\n    confirm: {\n        /** Centered confirm panel pop. */\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        /** Floating severity-icon bubble — pops in slightly after the panel. */\n        icon: { damping: 26, stiffness: 420, mass: 1, delay: 60 },\n        /** Content-only / prompt panel (no header/buttons chrome). */\n        content: { damping: 26, stiffness: 420, mass: 1 },\n        /** Timed zoom-out for the confirm center/content panels. */\n        exitDuration: 120,\n    },\n\n    // ── Bottom sheet (Dialog + Confirm, position=\"bottom\") ───\n    // Slightly heavier damping/lower stiffness so the sheet glides up without\n    // overshoot. Exit: timed slide-down.\n    sheet: {\n        enter: { damping: 26, stiffness: 140, mass: 1 },\n        exitDuration: 260,\n        /*\n         * ⛔ REDUCE MOTION TURNS THIS OFF, AND THAT READS AS A FADE. Reanimated\n         * honours iOS \"Reduce Motion\" by default: the entering/exiting\n         * animation is skipped and the panel simply appears, so the only thing\n         * left moving is the scrim's opacity. Measured on an iPhone 16 Pro\n         * simulator, sheet top edge per frame at 30fps:\n         *     Reduce Motion OFF — 1924 → 1302 → 898 → 683 → 655 px\n         *     Reduce Motion ON  — 655 in a single frame\n         * That second row is exactly the \"it still fades\" report.\n         *\n         * A bottom sheet is kept moving because the platform keeps it moving:\n         * iOS's own sheets still slide up under Reduce Motion — what that\n         * setting removes is parallax and zoom, not the presentation of a\n         * sheet. The centred Dialog's ZoomIn and the scrim's fade are NOT\n         * overridden; they stay on the system default.\n         */\n        keepMotionWhenReduced: true,\n    },\n\n    // ── Toast ────────────────────────────────────────────────\n    // One element owns the entrance: FadeInUp/FadeInDown animate opacity AND\n    // translateY together, so there is no second concurrent layer to desync.\n    toast: {\n        /** Merged fade+slide entrance (position-appropriate direction). */\n        enter: { damping: 30, stiffness: 400, mass: 1 },\n        /** Timed fade+slide out. */\n        exitDuration: 120,\n        /** Re-positioning when toasts stack/unstack. */\n        layoutDuration: 150,\n        /** Gap (pt) kept between a bottom toast and the keyboard when it opens. */\n        keyboardGap: 8,\n    },\n};\n\n/**\n * How long the SCRIM may take to leave, so the dim outlasts the panel.\n *\n * ⛔ THE REASON IS NOW VISUAL, NOT STRUCTURAL — rewritten 29 September 2026 when\n * the Dialog's scrim and panel became siblings. The panel slides down over\n * `sheet.exitDuration` (260ms). If the dim were allowed to finish in\n * `scrim.exitDuration` (100ms), the last 160ms of that slide would play against\n * the undimmed screen behind it: the page reappears at full brightness while a\n * panel is still visibly on its way out. `max()` keeps the dim present until the\n * panel is off screen.\n *\n * THE TWO NUMBERS, so neither is a bare literal: `scrim.exitDuration` is 100ms —\n * the fade's own pace, and the floor. `sheet.exitDuration` is 260ms and\n * `dialog.exitDuration` is 120ms. So the sheet gets 260 and the centred dialog\n * gets 120; in both cases the panel's own duration wins, and the floor only\n * matters if a caller ever passes something shorter than 100.\n *\n * ── ✅ AND THE FAULT THIS FUNCTION WAS ORIGINALLY WRITTEN FOR IS FIXED ───────\n *\n * It used to exist because the scrim was the panel's PARENT: React unmounts a\n * subtree as one thing, so when the parent's exiting animation reported finished\n * the child was removed wherever its own animation happened to be. A 260ms slide\n * under a 100ms fade did not play for 260ms — it played for 100 and the sheet was\n * simply gone.\n *\n * ⚠️ THE MEASUREMENT IS KEPT, because it is the evidence and a fix that erases\n * its own evidence leaves nothing for the next reader (§12.5). iPhone 16 Pro\n * simulator, 30fps, closing the bottom sheet. The flags inside the sheet are the\n * only saturated pixels on screen, so their y is the sheet's own edge and not the\n * screen's:\n *\n *     frame   flag y (of 348)   sheet white   scrim\n *       125        140              237        143    settled\n *       126        143              240        149    starts down\n *       127        197              253        192    54 units travelled\n *       128        gone              —         234    removed\n *\n * Three frames. The sheet covered a sixth of its travel and vanished while the\n * scrim faded normally — which is exactly the report that the overlay fades and\n * the sheet does not move.\n *\n * ⚠️ IT WAS INVISIBLE TO THE OBVIOUS MEASUREMENT. A scan for the topmost bright\n * row could not tell a sheet edge at y=655 from the page behind it at y=655; both\n * read white. Only a feature that exists ONLY inside the sheet could say which was\n * on screen.\n *\n * ⛔ THE DIALOG NO LONGER HAS THAT CONTAINMENT. Its panel is a sibling of the\n * scrim and owns the teardown — the Modal unmounts on the PANEL's exit callback,\n * so a scrim that finishes first can no longer take the panel with it.\n * ⚠️ `ConfirmDialog` still nests its panel inside its scrim and therefore still\n * depends on this function for the original reason as well as the visual one.\n * Converting it is a separate unit.\n */\nexport function scrimExitDuration(panelExitDuration: number): number {\n    return Math.max(overlayAnimations.scrim.exitDuration, panelExitDuration);\n}\n\nexport default overlayAnimations;\n"],"names":[],"mappings":";;AAiEO,MAAM,iBAAA,GAAwC;AAAA;AAAA,EAEjD,KAAA,EAAO;AAAA,IACH,aAAA,EAAe,GAAA;AAAA,IACf,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAA,EAAQ;AAAA,IACJ,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA,IAC9C,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA,EAGA,OAAA,EAAS;AAAA;AAAA,IAEL,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,IAAA,EAAM,EAAE,OAAA,EAAS,EAAA,EAAI,WAAW,GAAA,EAAK,IAAA,EAAM,CAAA,EAAG,KAAA,EAAO,EAAA,EAAG;AAAA;AAAA,IAExD,SAAS,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAEhD,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA,IACH,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA,IAC9C,YAAA,EAAc,GAkBlB,CAAA;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA;AAAA,IAEH,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,YAAA,EAAc,GAAA;AAAA;AAAA,IAEd,cAAA,EAAgB,GAAA;AAAA;AAAA,IAEhB,WAAA,EAAa;AAAA;AAErB;AAuDO,SAAS,kBAAkB,iBAAA,EAAmC;AACjE,EAAA,OAAO,IAAA,CAAK,GAAA,CAAI,iBAAA,CAAkB,KAAA,CAAM,cAAc,iBAAiB,CAAA;AAC3E;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/animations/index.ts"],"sourcesContent":["/**\n * ════════════════════════════════════════════════════════════════════════\n *  Overlay animation tuning  —  EDIT THIS FILE TO CONTROL ALL OVERLAY MOTION\n * ════════════════════════════════════════════════════════════════════════\n *\n * Every in/out animation value used by the animated overlay components on\n * React Native (reanimated) lives here. Change a number and it updates\n * everywhere that animation is used — no need to touch the component files.\n *\n * Consumed by (native):\n *   • components/overlay/Dialog/index.native.tsx\n *   • components/overlay/ConfirmDialog/index.native.tsx\n *   • components/overlay/Toast/index.native.tsx\n *\n *  Two kinds of value:\n *   • spring  → reanimated `.springify().damping(d).stiffness(s)` (+ optional `.delay`)\n *               - damping   ↓ lower  = bouncier, longer settle\n *               - stiffness ↑ higher = snappier, faster\n *   • duration → milliseconds for `.duration(ms)` (timing-based fade/slide)\n */\n\nexport interface ISpringConfig {\n    /** reanimated `.damping()` — lower = bouncier / slower to settle. */\n    damping: number;\n    /** reanimated `.stiffness()` — higher = snappier / faster. */\n    stiffness: number;\n    /** reanimated `.mass()` — heavier = slower / more inertia. Defaults to 1. */\n    mass?: number;\n    /** reanimated `.delay()` in ms — wait before the animation starts. */\n    delay?: number;\n}\n\nexport interface IOverlayAnimations {\n    /**\n     * Dimmed backdrop behind every overlay (fade in/out).\n     *\n     * ⚠️ `exitDuration` is a FLOOR, not the value to pass — read\n     * `scrimExitDuration()` below before using it. The dim has to outlast the\n     * panel's own exit or the page behind reappears while the panel is still\n     * leaving. ⛔ The old wording here said \"the scrim is the panel's PARENT\";\n     * that stopped being true of the Dialog on 29 September 2026, and the\n     * function's own comment records both the old reason and the new one.\n     */\n    scrim: { enterDuration: number; exitDuration: number };\n    /** Centered Dialog panel (zoom-in spring in, timed zoom-out). */\n    dialog: { enter: ISpringConfig; exitDuration: number };\n    /** Confirm: centered panel, its floating icon bubble, and the content-only/prompt panel. */\n    confirm: { enter: ISpringConfig; icon: ISpringConfig; content: ISpringConfig; exitDuration: number };\n    /**\n     * Bottom sheet shared by Dialog & Confirm (slide-up spring in, timed\n     * slide-down out).\n     *\n     * `keepMotionWhenReduced` asks Reanimated to run this one even when the\n     * reader has iOS \"Reduce Motion\" on — see the note beside the value.\n     */\n    sheet: {\n        /**\n         * ⛔ THE ENTRANCE IS A DURATION NOW, NOT A SPRING — 30 September 2026.\n         * See the value below for the measurement that decided it.\n         */\n        /**\n         * ⛔ CARRIES BOTH, AND THE `duration` IS THE ONE THAT DRIVES THIS LIBRARY.\n         *\n         * `duration` is what `sheetMotion.native.ts` uses — see the value below\n         * for the measurement that set it.\n         *\n         * ⚠️ THE SPRING FIELDS STAY, AND NOT OUT OF TIDINESS. A consumer drives\n         * its own animation off them: `App/src/components/shared/ConfirmSheet`\n         * reads `.damping/.stiffness/.mass` into RN's own `Animated.spring`,\n         * deliberately, because importing Reanimated there dragged its native\n         * chain into every suite that mounts it. Deleting them would break that\n         * sheet silently.\n         * ⛔ SO THAT ONE SHEET IS NOW OUT OF STEP, AND THAT IS A DEBT. It still\n         * rises on the slow spring every other sheet just moved off. Named here\n         * rather than found later.\n         *\n         * ⚠️ Keeping both on ONE object is also what leaves `Dialog` and\n         * `ConfirmDialog` untouched: both already pass `anim.sheet.enter`, and\n         * they still do.\n         */\n        enter: ISpringConfig & {duration: number};\n        exitDuration: number;\n        keepMotionWhenReduced: boolean;\n    };\n    /** Toast — single merged fade+slide entrance, timed exit, re-layout, keyboard gap. */\n    toast: {\n        enter: ISpringConfig;\n        exitDuration: number;\n        layoutDuration: number;\n        keyboardGap: number;\n    };\n}\n\nexport const overlayAnimations: IOverlayAnimations = {\n    // ── Backdrop / scrim ─────────────────────────────────────\n    scrim: {\n        enterDuration: 120,\n        exitDuration: 100,\n    },\n\n    // ── Centered Dialog panel ────────────────────────────────\n    // Enter: critically-ish damped spring — snappy but settles cleanly (no\n    // ringing). Exit: timing-based zoom-out (springs are enter-only).\n    dialog: {\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        exitDuration: 120,\n    },\n\n    // ── Confirm dialog ───────────────────────────────────────\n    confirm: {\n        /** Centered confirm panel pop. */\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        /** Floating severity-icon bubble — pops in slightly after the panel. */\n        icon: { damping: 26, stiffness: 420, mass: 1, delay: 60 },\n        /** Content-only / prompt panel (no header/buttons chrome). */\n        content: { damping: 26, stiffness: 420, mass: 1 },\n        /** Timed zoom-out for the confirm center/content panels. */\n        exitDuration: 120,\n    },\n\n    // ── Bottom sheet (Dialog + Confirm, position=\"bottom\") ───\n    // Slightly heavier damping/lower stiffness so the sheet glides up without\n    // overshoot. Exit: timed slide-down.\n    sheet: {\n        /*\n         * ⛔ 130ms, MEASURED OFF THE PLATFORM'S OWN SHEET — not chosen by feel.\n         *\n         * The entrance was `{damping: 26, stiffness: 140, mass: 1}`, and Fouad's\n         * note on the select popup was \"too slow\". It was, and the number that\n         * made it slow is not the one it looks like: damping 26 against\n         * stiffness 140 is a damping RATIO of 1.10 — very slightly OVERDAMPED —\n         * so the panel approaches its resting place asymptotically and never\n         * visibly arrives.\n         *\n         * MEASURED on an iPhone 16 Pro simulator with\n         * `UML/Working/tools/motionProbe.mjs`, one instrument for both:\n         *\n         *   the platform's own sheet      travel over  9 frames / 126ms,\n         *   (RN `Modal animationType`         then STOPPED\n         *    =\"slide\"`, which is what\n         *    `WorkspaceSwitcherSheet`\n         *    and React Navigation's\n         *    `slide_from_bottom` present)\n         *\n         *   this sheet, on the old spring travel over  8 frames / 154ms,\n         *                                     and STILL MOVING at 437ms\n         *\n         * ⚠️ THE INITIAL TRAVEL WAS NEVER THE PROBLEM — 154ms against 126ms is\n         * nothing. The tail is. The old spring was still creeping a third of a\n         * second after it looked finished, and that is what reads as slow.\n         *\n         * So the shape follows the house and not the library's habit (§5): the\n         * platform slides for a fixed time on an ease-out and stops dead, so\n         * this does too. 130 is the measured 126 rounded to the nearest 10ms.\n         */\n        enter: { damping: 26, stiffness: 140, mass: 1, duration: 130 },\n        exitDuration: 260,\n        /*\n         * ⛔ REDUCE MOTION TURNS THIS OFF, AND THAT READS AS A FADE. Reanimated\n         * honours iOS \"Reduce Motion\" by default: the entering/exiting\n         * animation is skipped and the panel simply appears, so the only thing\n         * left moving is the scrim's opacity. Measured on an iPhone 16 Pro\n         * simulator, sheet top edge per frame at 30fps:\n         *     Reduce Motion OFF — 1924 → 1302 → 898 → 683 → 655 px\n         *     Reduce Motion ON  — 655 in a single frame\n         * That second row is exactly the \"it still fades\" report.\n         *\n         * A bottom sheet is kept moving because the platform keeps it moving:\n         * iOS's own sheets still slide up under Reduce Motion — what that\n         * setting removes is parallax and zoom, not the presentation of a\n         * sheet. The centred Dialog's ZoomIn and the scrim's fade are NOT\n         * overridden; they stay on the system default.\n         */\n        keepMotionWhenReduced: true,\n    },\n\n    // ── Toast ────────────────────────────────────────────────\n    // One element owns the entrance: FadeInUp/FadeInDown animate opacity AND\n    // translateY together, so there is no second concurrent layer to desync.\n    toast: {\n        /** Merged fade+slide entrance (position-appropriate direction). */\n        enter: { damping: 30, stiffness: 400, mass: 1 },\n        /** Timed fade+slide out. */\n        exitDuration: 120,\n        /** Re-positioning when toasts stack/unstack. */\n        layoutDuration: 150,\n        /** Gap (pt) kept between a bottom toast and the keyboard when it opens. */\n        keyboardGap: 8,\n    },\n};\n\n/**\n * How long the SCRIM may take to leave, so the dim outlasts the panel.\n *\n * ⛔ THE REASON IS NOW VISUAL, NOT STRUCTURAL — rewritten 29 September 2026 when\n * the Dialog's scrim and panel became siblings. The panel slides down over\n * `sheet.exitDuration` (260ms). If the dim were allowed to finish in\n * `scrim.exitDuration` (100ms), the last 160ms of that slide would play against\n * the undimmed screen behind it: the page reappears at full brightness while a\n * panel is still visibly on its way out. `max()` keeps the dim present until the\n * panel is off screen.\n *\n * THE TWO NUMBERS, so neither is a bare literal: `scrim.exitDuration` is 100ms —\n * the fade's own pace, and the floor. `sheet.exitDuration` is 260ms and\n * `dialog.exitDuration` is 120ms. So the sheet gets 260 and the centred dialog\n * gets 120; in both cases the panel's own duration wins, and the floor only\n * matters if a caller ever passes something shorter than 100.\n *\n * ── ✅ AND THE FAULT THIS FUNCTION WAS ORIGINALLY WRITTEN FOR IS FIXED ───────\n *\n * It used to exist because the scrim was the panel's PARENT: React unmounts a\n * subtree as one thing, so when the parent's exiting animation reported finished\n * the child was removed wherever its own animation happened to be. A 260ms slide\n * under a 100ms fade did not play for 260ms — it played for 100 and the sheet was\n * simply gone.\n *\n * ⚠️ THE MEASUREMENT IS KEPT, because it is the evidence and a fix that erases\n * its own evidence leaves nothing for the next reader (§12.5). iPhone 16 Pro\n * simulator, 30fps, closing the bottom sheet. The flags inside the sheet are the\n * only saturated pixels on screen, so their y is the sheet's own edge and not the\n * screen's:\n *\n *     frame   flag y (of 348)   sheet white   scrim\n *       125        140              237        143    settled\n *       126        143              240        149    starts down\n *       127        197              253        192    54 units travelled\n *       128        gone              —         234    removed\n *\n * Three frames. The sheet covered a sixth of its travel and vanished while the\n * scrim faded normally — which is exactly the report that the overlay fades and\n * the sheet does not move.\n *\n * ⚠️ IT WAS INVISIBLE TO THE OBVIOUS MEASUREMENT. A scan for the topmost bright\n * row could not tell a sheet edge at y=655 from the page behind it at y=655; both\n * read white. Only a feature that exists ONLY inside the sheet could say which was\n * on screen.\n *\n * ⛔ THE DIALOG NO LONGER HAS THAT CONTAINMENT. Its panel is a sibling of the\n * scrim and owns the teardown — the Modal unmounts on the PANEL's exit callback,\n * so a scrim that finishes first can no longer take the panel with it.\n * ⚠️ `ConfirmDialog` still nests its panel inside its scrim and therefore still\n * depends on this function for the original reason as well as the visual one.\n * Converting it is a separate unit.\n */\nexport function scrimExitDuration(panelExitDuration: number): number {\n    return Math.max(overlayAnimations.scrim.exitDuration, panelExitDuration);\n}\n\nexport default overlayAnimations;\n"],"names":[],"mappings":";;AA6FO,MAAM,iBAAA,GAAwC;AAAA;AAAA,EAEjD,KAAA,EAAO;AAAA,IACH,aAAA,EAAe,GAAA;AAAA,IACf,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAA,EAAQ;AAAA,IACJ,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA,IAC9C,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA,EAGA,OAAA,EAAS;AAAA;AAAA,IAEL,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,IAAA,EAAM,EAAE,OAAA,EAAS,EAAA,EAAI,WAAW,GAAA,EAAK,IAAA,EAAM,CAAA,EAAG,KAAA,EAAO,EAAA,EAAG;AAAA;AAAA,IAExD,SAAS,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAEhD,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgCH,KAAA,EAAO,EAAwC,QAAA,EAAU,GAAA,EAAI;AAAA,IAC7D,YAAA,EAAc,GAkBlB,CAAA;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA;AAAA,IAEH,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,YAAA,EAAc,GAAA;AAAA;AAAA,IAEd,cAAA,EAAgB,GAAA;AAAA;AAAA,IAEhB,WAAA,EAAa;AAAA;AAErB;AAuDO,SAAS,kBAAkB,iBAAA,EAAmC;AACjE,EAAA,OAAO,IAAA,CAAK,GAAA,CAAI,iBAAA,CAAkB,KAAA,CAAM,cAAc,iBAAiB,CAAA;AAC3E;;;;;"}

package/animations/index.js

@@ -26,7 +26,38 @@ const overlayAnimations = {
   // Slightly heavier damping/lower stiffness so the sheet glides up without
   // overshoot. Exit: timed slide-down.
   sheet: {
-    enter: { damping: 26, stiffness: 140, mass: 1 },
+    /*
+     * ⛔ 130ms, MEASURED OFF THE PLATFORM'S OWN SHEET — not chosen by feel.
+     *
+     * The entrance was `{damping: 26, stiffness: 140, mass: 1}`, and Fouad's
+     * note on the select popup was "too slow". It was, and the number that
+     * made it slow is not the one it looks like: damping 26 against
+     * stiffness 140 is a damping RATIO of 1.10 — very slightly OVERDAMPED —
+     * so the panel approaches its resting place asymptotically and never
+     * visibly arrives.
+     *
+     * MEASURED on an iPhone 16 Pro simulator with
+     * `UML/Working/tools/motionProbe.mjs`, one instrument for both:
+     *
+     *   the platform's own sheet      travel over  9 frames / 126ms,
+     *   (RN `Modal animationType`         then STOPPED
+     *    ="slide"`, which is what
+     *    `WorkspaceSwitcherSheet`
+     *    and React Navigation's
+     *    `slide_from_bottom` present)
+     *
+     *   this sheet, on the old spring travel over  8 frames / 154ms,
+     *                                     and STILL MOVING at 437ms
+     *
+     * ⚠️ THE INITIAL TRAVEL WAS NEVER THE PROBLEM — 154ms against 126ms is
+     * nothing. The tail is. The old spring was still creeping a third of a
+     * second after it looked finished, and that is what reads as slow.
+     *
+     * So the shape follows the house and not the library's habit (§5): the
+     * platform slides for a fixed time on an ease-out and stops dead, so
+     * this does too. 130 is the measured 126 rounded to the nearest 10ms.
+     */
+    enter: { duration: 130 },
     exitDuration: 260},
   // ── Toast ────────────────────────────────────────────────
   // One element owns the entrance: FadeInUp/FadeInDown animate opacity AND

package/animations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/animations/index.ts"],"sourcesContent":["/**\n * ════════════════════════════════════════════════════════════════════════\n *  Overlay animation tuning  —  EDIT THIS FILE TO CONTROL ALL OVERLAY MOTION\n * ════════════════════════════════════════════════════════════════════════\n *\n * Every in/out animation value used by the animated overlay components on\n * React Native (reanimated) lives here. Change a number and it updates\n * everywhere that animation is used — no need to touch the component files.\n *\n * Consumed by (native):\n *   • components/overlay/Dialog/index.native.tsx\n *   • components/overlay/ConfirmDialog/index.native.tsx\n *   • components/overlay/Toast/index.native.tsx\n *\n *  Two kinds of value:\n *   • spring  → reanimated `.springify().damping(d).stiffness(s)` (+ optional `.delay`)\n *               - damping   ↓ lower  = bouncier, longer settle\n *               - stiffness ↑ higher = snappier, faster\n *   • duration → milliseconds for `.duration(ms)` (timing-based fade/slide)\n */\n\nexport interface ISpringConfig {\n    /** reanimated `.damping()` — lower = bouncier / slower to settle. */\n    damping: number;\n    /** reanimated `.stiffness()` — higher = snappier / faster. */\n    stiffness: number;\n    /** reanimated `.mass()` — heavier = slower / more inertia. Defaults to 1. */\n    mass?: number;\n    /** reanimated `.delay()` in ms — wait before the animation starts. */\n    delay?: number;\n}\n\nexport interface IOverlayAnimations {\n    /**\n     * Dimmed backdrop behind every overlay (fade in/out).\n     *\n     * ⚠️ `exitDuration` is a FLOOR, not the value to pass — read\n     * `scrimExitDuration()` below before using it. The dim has to outlast the\n     * panel's own exit or the page behind reappears while the panel is still\n     * leaving. ⛔ The old wording here said \"the scrim is the panel's PARENT\";\n     * that stopped being true of the Dialog on 29 September 2026, and the\n     * function's own comment records both the old reason and the new one.\n     */\n    scrim: { enterDuration: number; exitDuration: number };\n    /** Centered Dialog panel (zoom-in spring in, timed zoom-out). */\n    dialog: { enter: ISpringConfig; exitDuration: number };\n    /** Confirm: centered panel, its floating icon bubble, and the content-only/prompt panel. */\n    confirm: { enter: ISpringConfig; icon: ISpringConfig; content: ISpringConfig; exitDuration: number };\n    /**\n     * Bottom sheet shared by Dialog & Confirm (slide-up spring in, timed\n     * slide-down out).\n     *\n     * `keepMotionWhenReduced` asks Reanimated to run this one even when the\n     * reader has iOS \"Reduce Motion\" on — see the note beside the value.\n     */\n    sheet: { enter: ISpringConfig; exitDuration: number; keepMotionWhenReduced: boolean };\n    /** Toast — single merged fade+slide entrance, timed exit, re-layout, keyboard gap. */\n    toast: {\n        enter: ISpringConfig;\n        exitDuration: number;\n        layoutDuration: number;\n        keyboardGap: number;\n    };\n}\n\nexport const overlayAnimations: IOverlayAnimations = {\n    // ── Backdrop / scrim ─────────────────────────────────────\n    scrim: {\n        enterDuration: 120,\n        exitDuration: 100,\n    },\n\n    // ── Centered Dialog panel ────────────────────────────────\n    // Enter: critically-ish damped spring — snappy but settles cleanly (no\n    // ringing). Exit: timing-based zoom-out (springs are enter-only).\n    dialog: {\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        exitDuration: 120,\n    },\n\n    // ── Confirm dialog ───────────────────────────────────────\n    confirm: {\n        /** Centered confirm panel pop. */\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        /** Floating severity-icon bubble — pops in slightly after the panel. */\n        icon: { damping: 26, stiffness: 420, mass: 1, delay: 60 },\n        /** Content-only / prompt panel (no header/buttons chrome). */\n        content: { damping: 26, stiffness: 420, mass: 1 },\n        /** Timed zoom-out for the confirm center/content panels. */\n        exitDuration: 120,\n    },\n\n    // ── Bottom sheet (Dialog + Confirm, position=\"bottom\") ───\n    // Slightly heavier damping/lower stiffness so the sheet glides up without\n    // overshoot. Exit: timed slide-down.\n    sheet: {\n        enter: { damping: 26, stiffness: 140, mass: 1 },\n        exitDuration: 260,\n        /*\n         * ⛔ REDUCE MOTION TURNS THIS OFF, AND THAT READS AS A FADE. Reanimated\n         * honours iOS \"Reduce Motion\" by default: the entering/exiting\n         * animation is skipped and the panel simply appears, so the only thing\n         * left moving is the scrim's opacity. Measured on an iPhone 16 Pro\n         * simulator, sheet top edge per frame at 30fps:\n         *     Reduce Motion OFF — 1924 → 1302 → 898 → 683 → 655 px\n         *     Reduce Motion ON  — 655 in a single frame\n         * That second row is exactly the \"it still fades\" report.\n         *\n         * A bottom sheet is kept moving because the platform keeps it moving:\n         * iOS's own sheets still slide up under Reduce Motion — what that\n         * setting removes is parallax and zoom, not the presentation of a\n         * sheet. The centred Dialog's ZoomIn and the scrim's fade are NOT\n         * overridden; they stay on the system default.\n         */\n        keepMotionWhenReduced: true,\n    },\n\n    // ── Toast ────────────────────────────────────────────────\n    // One element owns the entrance: FadeInUp/FadeInDown animate opacity AND\n    // translateY together, so there is no second concurrent layer to desync.\n    toast: {\n        /** Merged fade+slide entrance (position-appropriate direction). */\n        enter: { damping: 30, stiffness: 400, mass: 1 },\n        /** Timed fade+slide out. */\n        exitDuration: 120,\n        /** Re-positioning when toasts stack/unstack. */\n        layoutDuration: 150,\n        /** Gap (pt) kept between a bottom toast and the keyboard when it opens. */\n        keyboardGap: 8,\n    },\n};\n\n/**\n * How long the SCRIM may take to leave, so the dim outlasts the panel.\n *\n * ⛔ THE REASON IS NOW VISUAL, NOT STRUCTURAL — rewritten 29 September 2026 when\n * the Dialog's scrim and panel became siblings. The panel slides down over\n * `sheet.exitDuration` (260ms). If the dim were allowed to finish in\n * `scrim.exitDuration` (100ms), the last 160ms of that slide would play against\n * the undimmed screen behind it: the page reappears at full brightness while a\n * panel is still visibly on its way out. `max()` keeps the dim present until the\n * panel is off screen.\n *\n * THE TWO NUMBERS, so neither is a bare literal: `scrim.exitDuration` is 100ms —\n * the fade's own pace, and the floor. `sheet.exitDuration` is 260ms and\n * `dialog.exitDuration` is 120ms. So the sheet gets 260 and the centred dialog\n * gets 120; in both cases the panel's own duration wins, and the floor only\n * matters if a caller ever passes something shorter than 100.\n *\n * ── ✅ AND THE FAULT THIS FUNCTION WAS ORIGINALLY WRITTEN FOR IS FIXED ───────\n *\n * It used to exist because the scrim was the panel's PARENT: React unmounts a\n * subtree as one thing, so when the parent's exiting animation reported finished\n * the child was removed wherever its own animation happened to be. A 260ms slide\n * under a 100ms fade did not play for 260ms — it played for 100 and the sheet was\n * simply gone.\n *\n * ⚠️ THE MEASUREMENT IS KEPT, because it is the evidence and a fix that erases\n * its own evidence leaves nothing for the next reader (§12.5). iPhone 16 Pro\n * simulator, 30fps, closing the bottom sheet. The flags inside the sheet are the\n * only saturated pixels on screen, so their y is the sheet's own edge and not the\n * screen's:\n *\n *     frame   flag y (of 348)   sheet white   scrim\n *       125        140              237        143    settled\n *       126        143              240        149    starts down\n *       127        197              253        192    54 units travelled\n *       128        gone              —         234    removed\n *\n * Three frames. The sheet covered a sixth of its travel and vanished while the\n * scrim faded normally — which is exactly the report that the overlay fades and\n * the sheet does not move.\n *\n * ⚠️ IT WAS INVISIBLE TO THE OBVIOUS MEASUREMENT. A scan for the topmost bright\n * row could not tell a sheet edge at y=655 from the page behind it at y=655; both\n * read white. Only a feature that exists ONLY inside the sheet could say which was\n * on screen.\n *\n * ⛔ THE DIALOG NO LONGER HAS THAT CONTAINMENT. Its panel is a sibling of the\n * scrim and owns the teardown — the Modal unmounts on the PANEL's exit callback,\n * so a scrim that finishes first can no longer take the panel with it.\n * ⚠️ `ConfirmDialog` still nests its panel inside its scrim and therefore still\n * depends on this function for the original reason as well as the visual one.\n * Converting it is a separate unit.\n */\nexport function scrimExitDuration(panelExitDuration: number): number {\n    return Math.max(overlayAnimations.scrim.exitDuration, panelExitDuration);\n}\n\nexport default overlayAnimations;\n"],"names":[],"mappings":"AAiEO,MAAM,iBAAA,GAAwC;AAAA;AAAA,EAEjD,KAAA,EAAO;AAAA,IACH,aAAA,EAAe,GAAA;AAAA,IACf,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAA,EAAQ;AAAA,IACJ,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA,IAC9C,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA,EAGA,OAAA,EAAS;AAAA;AAAA,IAEL,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,IAAA,EAAM,EAAE,OAAA,EAAS,EAAA,EAAI,WAAW,GAAA,EAAK,IAAA,EAAM,CAAA,EAAG,KAAA,EAAO,EAAA,EAAG;AAAA;AAAA,IAExD,SAAS,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAEhD,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA,IACH,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA,IAC9C,YAAA,EAAc,GAkBlB,CAAA;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA;AAAA,IAEH,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,YAAA,EAAc,GAAA;AAAA;AAAA,IAEd,cAAA,EAAgB,GAAA;AAAA;AAAA,IAEhB,WAAA,EAAa;AAAA;AAErB;AAuDO,SAAS,kBAAkB,iBAAA,EAAmC;AACjE,EAAA,OAAO,IAAA,CAAK,GAAA,CAAI,iBAAA,CAAkB,KAAA,CAAM,cAAc,iBAAiB,CAAA;AAC3E;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/animations/index.ts"],"sourcesContent":["/**\n * ════════════════════════════════════════════════════════════════════════\n *  Overlay animation tuning  —  EDIT THIS FILE TO CONTROL ALL OVERLAY MOTION\n * ════════════════════════════════════════════════════════════════════════\n *\n * Every in/out animation value used by the animated overlay components on\n * React Native (reanimated) lives here. Change a number and it updates\n * everywhere that animation is used — no need to touch the component files.\n *\n * Consumed by (native):\n *   • components/overlay/Dialog/index.native.tsx\n *   • components/overlay/ConfirmDialog/index.native.tsx\n *   • components/overlay/Toast/index.native.tsx\n *\n *  Two kinds of value:\n *   • spring  → reanimated `.springify().damping(d).stiffness(s)` (+ optional `.delay`)\n *               - damping   ↓ lower  = bouncier, longer settle\n *               - stiffness ↑ higher = snappier, faster\n *   • duration → milliseconds for `.duration(ms)` (timing-based fade/slide)\n */\n\nexport interface ISpringConfig {\n    /** reanimated `.damping()` — lower = bouncier / slower to settle. */\n    damping: number;\n    /** reanimated `.stiffness()` — higher = snappier / faster. */\n    stiffness: number;\n    /** reanimated `.mass()` — heavier = slower / more inertia. Defaults to 1. */\n    mass?: number;\n    /** reanimated `.delay()` in ms — wait before the animation starts. */\n    delay?: number;\n}\n\nexport interface IOverlayAnimations {\n    /**\n     * Dimmed backdrop behind every overlay (fade in/out).\n     *\n     * ⚠️ `exitDuration` is a FLOOR, not the value to pass — read\n     * `scrimExitDuration()` below before using it. The dim has to outlast the\n     * panel's own exit or the page behind reappears while the panel is still\n     * leaving. ⛔ The old wording here said \"the scrim is the panel's PARENT\";\n     * that stopped being true of the Dialog on 29 September 2026, and the\n     * function's own comment records both the old reason and the new one.\n     */\n    scrim: { enterDuration: number; exitDuration: number };\n    /** Centered Dialog panel (zoom-in spring in, timed zoom-out). */\n    dialog: { enter: ISpringConfig; exitDuration: number };\n    /** Confirm: centered panel, its floating icon bubble, and the content-only/prompt panel. */\n    confirm: { enter: ISpringConfig; icon: ISpringConfig; content: ISpringConfig; exitDuration: number };\n    /**\n     * Bottom sheet shared by Dialog & Confirm (slide-up spring in, timed\n     * slide-down out).\n     *\n     * `keepMotionWhenReduced` asks Reanimated to run this one even when the\n     * reader has iOS \"Reduce Motion\" on — see the note beside the value.\n     */\n    sheet: {\n        /**\n         * ⛔ THE ENTRANCE IS A DURATION NOW, NOT A SPRING — 30 September 2026.\n         * See the value below for the measurement that decided it.\n         */\n        /**\n         * ⛔ CARRIES BOTH, AND THE `duration` IS THE ONE THAT DRIVES THIS LIBRARY.\n         *\n         * `duration` is what `sheetMotion.native.ts` uses — see the value below\n         * for the measurement that set it.\n         *\n         * ⚠️ THE SPRING FIELDS STAY, AND NOT OUT OF TIDINESS. A consumer drives\n         * its own animation off them: `App/src/components/shared/ConfirmSheet`\n         * reads `.damping/.stiffness/.mass` into RN's own `Animated.spring`,\n         * deliberately, because importing Reanimated there dragged its native\n         * chain into every suite that mounts it. Deleting them would break that\n         * sheet silently.\n         * ⛔ SO THAT ONE SHEET IS NOW OUT OF STEP, AND THAT IS A DEBT. It still\n         * rises on the slow spring every other sheet just moved off. Named here\n         * rather than found later.\n         *\n         * ⚠️ Keeping both on ONE object is also what leaves `Dialog` and\n         * `ConfirmDialog` untouched: both already pass `anim.sheet.enter`, and\n         * they still do.\n         */\n        enter: ISpringConfig & {duration: number};\n        exitDuration: number;\n        keepMotionWhenReduced: boolean;\n    };\n    /** Toast — single merged fade+slide entrance, timed exit, re-layout, keyboard gap. */\n    toast: {\n        enter: ISpringConfig;\n        exitDuration: number;\n        layoutDuration: number;\n        keyboardGap: number;\n    };\n}\n\nexport const overlayAnimations: IOverlayAnimations = {\n    // ── Backdrop / scrim ─────────────────────────────────────\n    scrim: {\n        enterDuration: 120,\n        exitDuration: 100,\n    },\n\n    // ── Centered Dialog panel ────────────────────────────────\n    // Enter: critically-ish damped spring — snappy but settles cleanly (no\n    // ringing). Exit: timing-based zoom-out (springs are enter-only).\n    dialog: {\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        exitDuration: 120,\n    },\n\n    // ── Confirm dialog ───────────────────────────────────────\n    confirm: {\n        /** Centered confirm panel pop. */\n        enter: { damping: 26, stiffness: 420, mass: 1 },\n        /** Floating severity-icon bubble — pops in slightly after the panel. */\n        icon: { damping: 26, stiffness: 420, mass: 1, delay: 60 },\n        /** Content-only / prompt panel (no header/buttons chrome). */\n        content: { damping: 26, stiffness: 420, mass: 1 },\n        /** Timed zoom-out for the confirm center/content panels. */\n        exitDuration: 120,\n    },\n\n    // ── Bottom sheet (Dialog + Confirm, position=\"bottom\") ───\n    // Slightly heavier damping/lower stiffness so the sheet glides up without\n    // overshoot. Exit: timed slide-down.\n    sheet: {\n        /*\n         * ⛔ 130ms, MEASURED OFF THE PLATFORM'S OWN SHEET — not chosen by feel.\n         *\n         * The entrance was `{damping: 26, stiffness: 140, mass: 1}`, and Fouad's\n         * note on the select popup was \"too slow\". It was, and the number that\n         * made it slow is not the one it looks like: damping 26 against\n         * stiffness 140 is a damping RATIO of 1.10 — very slightly OVERDAMPED —\n         * so the panel approaches its resting place asymptotically and never\n         * visibly arrives.\n         *\n         * MEASURED on an iPhone 16 Pro simulator with\n         * `UML/Working/tools/motionProbe.mjs`, one instrument for both:\n         *\n         *   the platform's own sheet      travel over  9 frames / 126ms,\n         *   (RN `Modal animationType`         then STOPPED\n         *    =\"slide\"`, which is what\n         *    `WorkspaceSwitcherSheet`\n         *    and React Navigation's\n         *    `slide_from_bottom` present)\n         *\n         *   this sheet, on the old spring travel over  8 frames / 154ms,\n         *                                     and STILL MOVING at 437ms\n         *\n         * ⚠️ THE INITIAL TRAVEL WAS NEVER THE PROBLEM — 154ms against 126ms is\n         * nothing. The tail is. The old spring was still creeping a third of a\n         * second after it looked finished, and that is what reads as slow.\n         *\n         * So the shape follows the house and not the library's habit (§5): the\n         * platform slides for a fixed time on an ease-out and stops dead, so\n         * this does too. 130 is the measured 126 rounded to the nearest 10ms.\n         */\n        enter: { damping: 26, stiffness: 140, mass: 1, duration: 130 },\n        exitDuration: 260,\n        /*\n         * ⛔ REDUCE MOTION TURNS THIS OFF, AND THAT READS AS A FADE. Reanimated\n         * honours iOS \"Reduce Motion\" by default: the entering/exiting\n         * animation is skipped and the panel simply appears, so the only thing\n         * left moving is the scrim's opacity. Measured on an iPhone 16 Pro\n         * simulator, sheet top edge per frame at 30fps:\n         *     Reduce Motion OFF — 1924 → 1302 → 898 → 683 → 655 px\n         *     Reduce Motion ON  — 655 in a single frame\n         * That second row is exactly the \"it still fades\" report.\n         *\n         * A bottom sheet is kept moving because the platform keeps it moving:\n         * iOS's own sheets still slide up under Reduce Motion — what that\n         * setting removes is parallax and zoom, not the presentation of a\n         * sheet. The centred Dialog's ZoomIn and the scrim's fade are NOT\n         * overridden; they stay on the system default.\n         */\n        keepMotionWhenReduced: true,\n    },\n\n    // ── Toast ────────────────────────────────────────────────\n    // One element owns the entrance: FadeInUp/FadeInDown animate opacity AND\n    // translateY together, so there is no second concurrent layer to desync.\n    toast: {\n        /** Merged fade+slide entrance (position-appropriate direction). */\n        enter: { damping: 30, stiffness: 400, mass: 1 },\n        /** Timed fade+slide out. */\n        exitDuration: 120,\n        /** Re-positioning when toasts stack/unstack. */\n        layoutDuration: 150,\n        /** Gap (pt) kept between a bottom toast and the keyboard when it opens. */\n        keyboardGap: 8,\n    },\n};\n\n/**\n * How long the SCRIM may take to leave, so the dim outlasts the panel.\n *\n * ⛔ THE REASON IS NOW VISUAL, NOT STRUCTURAL — rewritten 29 September 2026 when\n * the Dialog's scrim and panel became siblings. The panel slides down over\n * `sheet.exitDuration` (260ms). If the dim were allowed to finish in\n * `scrim.exitDuration` (100ms), the last 160ms of that slide would play against\n * the undimmed screen behind it: the page reappears at full brightness while a\n * panel is still visibly on its way out. `max()` keeps the dim present until the\n * panel is off screen.\n *\n * THE TWO NUMBERS, so neither is a bare literal: `scrim.exitDuration` is 100ms —\n * the fade's own pace, and the floor. `sheet.exitDuration` is 260ms and\n * `dialog.exitDuration` is 120ms. So the sheet gets 260 and the centred dialog\n * gets 120; in both cases the panel's own duration wins, and the floor only\n * matters if a caller ever passes something shorter than 100.\n *\n * ── ✅ AND THE FAULT THIS FUNCTION WAS ORIGINALLY WRITTEN FOR IS FIXED ───────\n *\n * It used to exist because the scrim was the panel's PARENT: React unmounts a\n * subtree as one thing, so when the parent's exiting animation reported finished\n * the child was removed wherever its own animation happened to be. A 260ms slide\n * under a 100ms fade did not play for 260ms — it played for 100 and the sheet was\n * simply gone.\n *\n * ⚠️ THE MEASUREMENT IS KEPT, because it is the evidence and a fix that erases\n * its own evidence leaves nothing for the next reader (§12.5). iPhone 16 Pro\n * simulator, 30fps, closing the bottom sheet. The flags inside the sheet are the\n * only saturated pixels on screen, so their y is the sheet's own edge and not the\n * screen's:\n *\n *     frame   flag y (of 348)   sheet white   scrim\n *       125        140              237        143    settled\n *       126        143              240        149    starts down\n *       127        197              253        192    54 units travelled\n *       128        gone              —         234    removed\n *\n * Three frames. The sheet covered a sixth of its travel and vanished while the\n * scrim faded normally — which is exactly the report that the overlay fades and\n * the sheet does not move.\n *\n * ⚠️ IT WAS INVISIBLE TO THE OBVIOUS MEASUREMENT. A scan for the topmost bright\n * row could not tell a sheet edge at y=655 from the page behind it at y=655; both\n * read white. Only a feature that exists ONLY inside the sheet could say which was\n * on screen.\n *\n * ⛔ THE DIALOG NO LONGER HAS THAT CONTAINMENT. Its panel is a sibling of the\n * scrim and owns the teardown — the Modal unmounts on the PANEL's exit callback,\n * so a scrim that finishes first can no longer take the panel with it.\n * ⚠️ `ConfirmDialog` still nests its panel inside its scrim and therefore still\n * depends on this function for the original reason as well as the visual one.\n * Converting it is a separate unit.\n */\nexport function scrimExitDuration(panelExitDuration: number): number {\n    return Math.max(overlayAnimations.scrim.exitDuration, panelExitDuration);\n}\n\nexport default overlayAnimations;\n"],"names":[],"mappings":"AA6FO,MAAM,iBAAA,GAAwC;AAAA;AAAA,EAEjD,KAAA,EAAO;AAAA,IACH,aAAA,EAAe,GAAA;AAAA,IACf,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAA,EAAQ;AAAA,IACJ,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA,IAC9C,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA,EAGA,OAAA,EAAS;AAAA;AAAA,IAEL,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,IAAA,EAAM,EAAE,OAAA,EAAS,EAAA,EAAI,WAAW,GAAA,EAAK,IAAA,EAAM,CAAA,EAAG,KAAA,EAAO,EAAA,EAAG;AAAA;AAAA,IAExD,SAAS,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAEhD,YAAA,EAAc;AAAA,GAClB;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgCH,KAAA,EAAO,EAAwC,QAAA,EAAU,GAAA,EAAI;AAAA,IAC7D,YAAA,EAAc,GAkBlB,CAAA;AAAA;AAAA;AAAA;AAAA,EAKA,KAAA,EAAO;AAAA;AAAA,IAEH,OAAO,EAAE,OAAA,EAAS,IAAI,SAAA,EAAW,GAAA,EAAK,MAAM,CAAA,EAAE;AAAA;AAAA,IAE9C,YAAA,EAAc,GAAA;AAAA;AAAA,IAEd,cAAA,EAAgB,GAAA;AAAA;AAAA,IAEhB,WAAA,EAAa;AAAA;AAErB;AAuDO,SAAS,kBAAkB,iBAAA,EAAmC;AACjE,EAAA,OAAO,IAAA,CAAK,GAAA,CAAI,iBAAA,CAAkB,KAAA,CAAM,cAAc,iBAAiB,CAAA;AAC3E;;;;"}

package/components/overlay/sheetMotion.cjs

@@ -2,18 +2,19 @@
 
 var Animated = require('react-native-reanimated');
 
-const sheetEnter = (spring) => (values) => {
+const sheetEnter = (sheet) => (values) => {
   "worklet";
   return {
     initialValues: { transform: [{ translateY: values.targetHeight }] },
     animations: {
       transform: [{
-        translateY: Animated.withSpring(0, {
-          damping: spring.damping,
-          stiffness: spring.stiffness,
-          mass: spring.mass ?? 1
-          /* The spec keeps the entrance a spring, so no duration
-             is introduced here — only the distance changed. */
+        translateY: Animated.withTiming(0, {
+          duration: sheet.duration,
+          /* Deceleration, which is what a platform sheet does: fast
+             off the bottom edge, easing into its stop. `Easing.out`
+             is resolved here rather than stored in the preset,
+             because an Easing function is not serialisable config. */
+          easing: Animated.Easing.out(Animated.Easing.cubic)
         })
       }]
     }

package/components/overlay/sheetMotion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sheetMotion.cjs","sources":["../../../../src/components/overlay/sheetMotion.native.ts"],"sourcesContent":["import {Easing, runOnJS, withSpring, withTiming} from \"react-native-reanimated\";\n\n/**\n * The bottom sheet's entering and exiting motion, for every overlay in this\n * library that presents one. ⛔ ONE DEFINITION, TWO CALLERS — `Dialog` and\n * `ConfirmDialog` both draw a sheet inside their own RN `Modal`, both hit the\n * same fault, and two copies of an animation drift the moment one is tuned.\n *\n**\n * ⛔ THE SHEET'S SLIDE IS WRITTEN BY HAND, BECAUSE `SlideInDown` DOES NOT MOVE\n * THIS PANEL AT ALL — measured on an iPhone 16 Pro simulator, 30 September 2026.\n *\n * ⚠️ THE MEASUREMENT, because three earlier rounds of this hunt cited\n * instruments that exist in no repository. One view, one tree, one Modal, one\n * method — a tap followed by a screenshot — and only the animation changed:\n *\n *     FadeIn.duration(10000)        the panel is caught HALF TRANSPARENT\n *     SlideInDown.duration(10000)   the panel is at rest and fully opaque\n *     translateY 700 -> 0, 10000ms  the panel is caught PARTWAY UP THE SCREEN\n *\n * So the view can be faded, and it can be translated. What fails is\n * `SlideInDown`'s own arithmetic for HOW FAR to travel. It derives that from\n * the window — and inside a React Native `Modal`, which hosts its own native\n * view hierarchy, the window it measures is not the screen. The distance comes\n * out as nothing, so the panel is placed at its resting position on frame one.\n *\n * ⚠️ THE DURATIONS ABOVE ARE THE INSTRUMENT, NOT THE PRODUCT. 10000ms was used\n * because the only method available — tap, then screenshot — has a round trip\n * longer than three seconds, which silently invalidated an earlier round of\n * 3000ms probes: every one of them showed a finished animation and read as\n * \"nothing ran\". No shipped duration was touched to make anything look better\n * (§12.5); the numbers below are still `overlayAnimations`'.\n *\n * ⛔ AND THIS IS WHY THE SCRIM-AND-PANEL SIBLING FIX CHANGED NOTHING VISIBLE.\n * That fix was real: the panel had been inheriting the scrim's fade. But the\n * panel's own slide had never run, so removing the inherited fade left a panel\n * that simply appears. The fix made the sheet strictly LESS animated, and the\n * report that \"it is the same\" was correct.\n *\n * WHAT THESE USE INSTEAD. `targetHeight` and `currentHeight` are the PANEL's\n * own box, laid out inside the Modal's own hierarchy, so they are the one\n * distance that is right in this coordinate space. A sheet travels its own\n * height; it never needed the window.\n */\nexport const sheetEnter = (spring: {damping: number; stiffness: number; mass?: number}) =>\n    (values: any) => {\n        'worklet';\n        return {\n            initialValues: {transform: [{translateY: values.targetHeight}]},\n            animations: {\n                transform: [{\n                    translateY: withSpring(0, {\n                        damping: spring.damping,\n                        stiffness: spring.stiffness,\n                        mass: spring.mass ?? 1,\n                        /* The spec keeps the entrance a spring, so no duration\n                           is introduced here — only the distance changed. */\n                    }),\n                }],\n            },\n        };\n    };\n\nexport const sheetExit = (duration: number, onFinished: () => void) =>\n    (values: any) => {\n        'worklet';\n        return {\n            initialValues: {transform: [{translateY: 0}]},\n            animations: {\n                transform: [{\n                    translateY: withTiming(values.currentHeight, {\n                        duration,\n                        easing: Easing.in(Easing.ease),\n                    }),\n                }],\n            },\n            /* ⛔ THE MODAL UNMOUNTS ON THIS. A custom exiting reports through\n               `callback`, where a built-in used `.withCallback`. Losing it\n               would leave the RN Modal mounted over the app for ever. */\n            callback: (finished: boolean) => {\n                'worklet';\n                if (finished) runOnJS(onFinished)();\n            },\n        };\n    };\n\n\n"],"names":["withSpring","withTiming","Easing","runOnJS"],"mappings":";;;;AA4CO,MAAM,UAAA,GAAa,CAAC,MAAA,KACvB,CAAC,MAAA,KAAgB;AACb,EAAA,SAAA;AACA,EAAA,OAAO;AAAA,IACH,aAAA,EAAe,EAAC,SAAA,EAAW,CAAC,EAAC,UAAA,EAAY,MAAA,CAAO,YAAA,EAAa,CAAA,EAAC;AAAA,IAC9D,UAAA,EAAY;AAAA,MACR,WAAW,CAAC;AAAA,QACR,UAAA,EAAYA,oBAAW,CAAA,EAAG;AAAA,UACtB,SAAS,MAAA,CAAO,OAAA;AAAA,UAChB,WAAW,MAAA,CAAO,SAAA;AAAA,UAClB,IAAA,EAAM,OAAO,IAAA,IAAQ;AAAA;AAAA;AAAA,SAGxB;AAAA,OACJ;AAAA;AACL,GACJ;AACJ;AAEG,MAAM,SAAA,GAAY,CAAC,QAAA,EAAkB,UAAA,KACxC,CAAC,MAAA,KAAgB;AACb,EAAA,SAAA;AACA,EAAA,OAAO;AAAA,IACH,aAAA,EAAe,EAAC,SAAA,EAAW,CAAC,EAAC,UAAA,EAAY,CAAA,EAAE,CAAA,EAAC;AAAA,IAC5C,UAAA,EAAY;AAAA,MACR,WAAW,CAAC;AAAA,QACR,UAAA,EAAYC,mBAAA,CAAW,MAAA,CAAO,aAAA,EAAe;AAAA,UACzC,QAAA;AAAA,UACA,MAAA,EAAQC,eAAA,CAAO,EAAA,CAAGA,eAAA,CAAO,IAAI;AAAA,SAChC;AAAA,OACJ;AAAA,KACL;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA,EAAU,CAAC,QAAA,KAAsB;AAC7B,MAAA,SAAA;AACA,MAAA,IAAI,QAAA,EAAUC,gBAAA,CAAQ,UAAU,CAAA,EAAE;AAAA,IACtC;AAAA,GACJ;AACJ;;;;;"}
+{"version":3,"file":"sheetMotion.cjs","sources":["../../../../src/components/overlay/sheetMotion.native.ts"],"sourcesContent":["import {Easing, runOnJS, withTiming} from \"react-native-reanimated\";\n\n/**\n * The bottom sheet's entering and exiting motion, for every overlay in this\n * library that presents one. ⛔ ONE DEFINITION, TWO CALLERS — `Dialog` and\n * `ConfirmDialog` both draw a sheet inside their own RN `Modal`, both hit the\n * same fault, and two copies of an animation drift the moment one is tuned.\n *\n**\n * ⛔ THE SHEET'S SLIDE IS WRITTEN BY HAND, BECAUSE `SlideInDown` DOES NOT MOVE\n * THIS PANEL AT ALL — measured on an iPhone 16 Pro simulator, 30 September 2026.\n *\n * ⚠️ THE MEASUREMENT, because three earlier rounds of this hunt cited\n * instruments that exist in no repository. One view, one tree, one Modal, one\n * method — a tap followed by a screenshot — and only the animation changed:\n *\n *     FadeIn.duration(10000)        the panel is caught HALF TRANSPARENT\n *     SlideInDown.duration(10000)   the panel is at rest and fully opaque\n *     translateY 700 -> 0, 10000ms  the panel is caught PARTWAY UP THE SCREEN\n *\n * So the view can be faded, and it can be translated. What fails is\n * `SlideInDown`'s own arithmetic for HOW FAR to travel. It derives that from\n * the window — and inside a React Native `Modal`, which hosts its own native\n * view hierarchy, the window it measures is not the screen. The distance comes\n * out as nothing, so the panel is placed at its resting position on frame one.\n *\n * ⚠️ THE DURATIONS ABOVE ARE THE INSTRUMENT, NOT THE PRODUCT. 10000ms was used\n * because the only method available — tap, then screenshot — has a round trip\n * longer than three seconds, which silently invalidated an earlier round of\n * 3000ms probes: every one of them showed a finished animation and read as\n * \"nothing ran\". No shipped duration was touched to make anything look better\n * (§12.5); the numbers below are still `overlayAnimations`'.\n *\n * ⛔ AND THIS IS WHY THE SCRIM-AND-PANEL SIBLING FIX CHANGED NOTHING VISIBLE.\n * That fix was real: the panel had been inheriting the scrim's fade. But the\n * panel's own slide had never run, so removing the inherited fade left a panel\n * that simply appears. The fix made the sheet strictly LESS animated, and the\n * report that \"it is the same\" was correct.\n *\n * WHAT THESE USE INSTEAD. `targetHeight` and `currentHeight` are the PANEL's\n * own box, laid out inside the Modal's own hierarchy, so they are the one\n * distance that is right in this coordinate space. A sheet travels its own\n * height; it never needed the window.\n */\n/**\n * ⛔ A DURATION, NOT A SPRING, AND THE RULING CHANGED TO GET HERE. The entrance\n * was a spring because the motion spec said so. Fouad withdrew that on 30\n * September 2026 in favour of §5: whatever the app's existing sheets do, this\n * does. They are presented by the PLATFORM — RN's `Modal animationType=\"slide\"`\n * and React Navigation's `slide_from_bottom` — which slides for a fixed time on\n * an ease-out and stops dead.\n *\n * ⚠️ AND THE MEASUREMENT SAID THE SAME THING. The old spring's damping ratio was\n * 1.10 — overdamped — so it approached its resting place asymptotically. Its\n * first travel was fine (154ms against the platform's 126ms); it was still\n * creeping 437ms after the tap. A duration cannot do that: it arrives and stops.\n * Numbers, method and instrument: `overlayAnimations.sheet.enter.duration`.\n *\n * ⚠️ THE SIGNATURE IS UNCHANGED ON PURPOSE. `duration` was added to the SAME\n * `anim.sheet.enter` object the spring fields live on, so `Dialog` and\n * `ConfirmDialog` still pass exactly what they passed before and neither file is\n * touched by this change. The spring fields are still read — by a consumer\n * driving its own `Animated.spring`; see the preset's note.\n */\nexport const sheetEnter = (sheet: {duration: number}) =>\n    (values: any) => {\n        'worklet';\n        return {\n            initialValues: {transform: [{translateY: values.targetHeight}]},\n            animations: {\n                transform: [{\n                    translateY: withTiming(0, {\n                        duration: sheet.duration,\n                        /* Deceleration, which is what a platform sheet does: fast\n                           off the bottom edge, easing into its stop. `Easing.out`\n                           is resolved here rather than stored in the preset,\n                           because an Easing function is not serialisable config. */\n                        easing: Easing.out(Easing.cubic),\n                    }),\n                }],\n            },\n        };\n    };\n\nexport const sheetExit = (duration: number, onFinished: () => void) =>\n    (values: any) => {\n        'worklet';\n        return {\n            initialValues: {transform: [{translateY: 0}]},\n            animations: {\n                transform: [{\n                    translateY: withTiming(values.currentHeight, {\n                        duration,\n                        easing: Easing.in(Easing.ease),\n                    }),\n                }],\n            },\n            /* ⛔ THE MODAL UNMOUNTS ON THIS. A custom exiting reports through\n               `callback`, where a built-in used `.withCallback`. Losing it\n               would leave the RN Modal mounted over the app for ever. */\n            callback: (finished: boolean) => {\n                'worklet';\n                if (finished) runOnJS(onFinished)();\n            },\n        };\n    };\n\n\n"],"names":["withTiming","Easing","runOnJS"],"mappings":";;;;AAgEO,MAAM,UAAA,GAAa,CAAC,KAAA,KACvB,CAAC,MAAA,KAAgB;AACb,EAAA,SAAA;AACA,EAAA,OAAO;AAAA,IACH,aAAA,EAAe,EAAC,SAAA,EAAW,CAAC,EAAC,UAAA,EAAY,MAAA,CAAO,YAAA,EAAa,CAAA,EAAC;AAAA,IAC9D,UAAA,EAAY;AAAA,MACR,WAAW,CAAC;AAAA,QACR,UAAA,EAAYA,oBAAW,CAAA,EAAG;AAAA,UACtB,UAAU,KAAA,CAAM,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAKhB,MAAA,EAAQC,eAAA,CAAO,GAAA,CAAIA,eAAA,CAAO,KAAK;AAAA,SAClC;AAAA,OACJ;AAAA;AACL,GACJ;AACJ;AAEG,MAAM,SAAA,GAAY,CAAC,QAAA,EAAkB,UAAA,KACxC,CAAC,MAAA,KAAgB;AACb,EAAA,SAAA;AACA,EAAA,OAAO;AAAA,IACH,aAAA,EAAe,EAAC,SAAA,EAAW,CAAC,EAAC,UAAA,EAAY,CAAA,EAAE,CAAA,EAAC;AAAA,IAC5C,UAAA,EAAY;AAAA,MACR,WAAW,CAAC;AAAA,QACR,UAAA,EAAYD,mBAAA,CAAW,MAAA,CAAO,aAAA,EAAe;AAAA,UACzC,QAAA;AAAA,UACA,MAAA,EAAQC,eAAA,CAAO,EAAA,CAAGA,eAAA,CAAO,IAAI;AAAA,SAChC;AAAA,OACJ;AAAA,KACL;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA,EAAU,CAAC,QAAA,KAAsB;AAC7B,MAAA,SAAA;AACA,MAAA,IAAI,QAAA,EAAUC,gBAAA,CAAQ,UAAU,CAAA,EAAE;AAAA,IACtC;AAAA,GACJ;AACJ;;;;;"}

package/components/overlay/sheetMotion.js

@@ -1,17 +1,18 @@
-import { runOnJS, withTiming, Easing, withSpring } from 'react-native-reanimated';
+import { runOnJS, withTiming, Easing } from 'react-native-reanimated';
 
-const sheetEnter = (spring) => (values) => {
+const sheetEnter = (sheet) => (values) => {
   "worklet";
   return {
     initialValues: { transform: [{ translateY: values.targetHeight }] },
     animations: {
       transform: [{
-        translateY: withSpring(0, {
-          damping: spring.damping,
-          stiffness: spring.stiffness,
-          mass: spring.mass ?? 1
-          /* The spec keeps the entrance a spring, so no duration
-             is introduced here — only the distance changed. */
+        translateY: withTiming(0, {
+          duration: sheet.duration,
+          /* Deceleration, which is what a platform sheet does: fast
+             off the bottom edge, easing into its stop. `Easing.out`
+             is resolved here rather than stored in the preset,
+             because an Easing function is not serialisable config. */
+          easing: Easing.out(Easing.cubic)
         })
       }]
     }

package/components/overlay/sheetMotion.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheetMotion.js","sources":["../../../../src/components/overlay/sheetMotion.native.ts"],"sourcesContent":["import {Easing, runOnJS, withSpring, withTiming} from \"react-native-reanimated\";\n\n/**\n * The bottom sheet's entering and exiting motion, for every overlay in this\n * library that presents one. ⛔ ONE DEFINITION, TWO CALLERS — `Dialog` and\n * `ConfirmDialog` both draw a sheet inside their own RN `Modal`, both hit the\n * same fault, and two copies of an animation drift the moment one is tuned.\n *\n**\n * ⛔ THE SHEET'S SLIDE IS WRITTEN BY HAND, BECAUSE `SlideInDown` DOES NOT MOVE\n * THIS PANEL AT ALL — measured on an iPhone 16 Pro simulator, 30 September 2026.\n *\n * ⚠️ THE MEASUREMENT, because three earlier rounds of this hunt cited\n * instruments that exist in no repository. One view, one tree, one Modal, one\n * method — a tap followed by a screenshot — and only the animation changed:\n *\n *     FadeIn.duration(10000)        the panel is caught HALF TRANSPARENT\n *     SlideInDown.duration(10000)   the panel is at rest and fully opaque\n *     translateY 700 -> 0, 10000ms  the panel is caught PARTWAY UP THE SCREEN\n *\n * So the view can be faded, and it can be translated. What fails is\n * `SlideInDown`'s own arithmetic for HOW FAR to travel. It derives that from\n * the window — and inside a React Native `Modal`, which hosts its own native\n * view hierarchy, the window it measures is not the screen. The distance comes\n * out as nothing, so the panel is placed at its resting position on frame one.\n *\n * ⚠️ THE DURATIONS ABOVE ARE THE INSTRUMENT, NOT THE PRODUCT. 10000ms was used\n * because the only method available — tap, then screenshot — has a round trip\n * longer than three seconds, which silently invalidated an earlier round of\n * 3000ms probes: every one of them showed a finished animation and read as\n * \"nothing ran\". No shipped duration was touched to make anything look better\n * (§12.5); the numbers below are still `overlayAnimations`'.\n *\n * ⛔ AND THIS IS WHY THE SCRIM-AND-PANEL SIBLING FIX CHANGED NOTHING VISIBLE.\n * That fix was real: the panel had been inheriting the scrim's fade. But the\n * panel's own slide had never run, so removing the inherited fade left a panel\n * that simply appears. The fix made the sheet strictly LESS animated, and the\n * report that \"it is the same\" was correct.\n *\n * WHAT THESE USE INSTEAD. `targetHeight` and `currentHeight` are the PANEL's\n * own box, laid out inside the Modal's own hierarchy, so they are the one\n * distance that is right in this coordinate space. A sheet travels its own\n * height; it never needed the window.\n */\nexport const sheetEnter = (spring: {damping: number; stiffness: number; mass?: number}) =>\n    (values: any) => {\n        'worklet';\n        return {\n            initialValues: {transform: [{translateY: values.targetHeight}]},\n            animations: {\n                transform: [{\n                    translateY: withSpring(0, {\n                        damping: spring.damping,\n                        stiffness: spring.stiffness,\n                        mass: spring.mass ?? 1,\n                        /* The spec keeps the entrance a spring, so no duration\n                           is introduced here — only the distance changed. */\n                    }),\n                }],\n            },\n        };\n    };\n\nexport const sheetExit = (duration: number, onFinished: () => void) =>\n    (values: any) => {\n        'worklet';\n        return {\n            initialValues: {transform: [{translateY: 0}]},\n            animations: {\n                transform: [{\n                    translateY: withTiming(values.currentHeight, {\n                        duration,\n                        easing: Easing.in(Easing.ease),\n                    }),\n                }],\n            },\n            /* ⛔ THE MODAL UNMOUNTS ON THIS. A custom exiting reports through\n               `callback`, where a built-in used `.withCallback`. Losing it\n               would leave the RN Modal mounted over the app for ever. */\n            callback: (finished: boolean) => {\n                'worklet';\n                if (finished) runOnJS(onFinished)();\n            },\n        };\n    };\n\n\n"],"names":[],"mappings":";;AA4CO,MAAM,UAAA,GAAa,CAAC,MAAA,KACvB,CAAC,MAAA,KAAgB;AACb,EAAA,SAAA;AACA,EAAA,OAAO;AAAA,IACH,aAAA,EAAe,EAAC,SAAA,EAAW,CAAC,EAAC,UAAA,EAAY,MAAA,CAAO,YAAA,EAAa,CAAA,EAAC;AAAA,IAC9D,UAAA,EAAY;AAAA,MACR,WAAW,CAAC;AAAA,QACR,UAAA,EAAY,WAAW,CAAA,EAAG;AAAA,UACtB,SAAS,MAAA,CAAO,OAAA;AAAA,UAChB,WAAW,MAAA,CAAO,SAAA;AAAA,UAClB,IAAA,EAAM,OAAO,IAAA,IAAQ;AAAA;AAAA;AAAA,SAGxB;AAAA,OACJ;AAAA;AACL,GACJ;AACJ;AAEG,MAAM,SAAA,GAAY,CAAC,QAAA,EAAkB,UAAA,KACxC,CAAC,MAAA,KAAgB;AACb,EAAA,SAAA;AACA,EAAA,OAAO;AAAA,IACH,aAAA,EAAe,EAAC,SAAA,EAAW,CAAC,EAAC,UAAA,EAAY,CAAA,EAAE,CAAA,EAAC;AAAA,IAC5C,UAAA,EAAY;AAAA,MACR,WAAW,CAAC;AAAA,QACR,UAAA,EAAY,UAAA,CAAW,MAAA,CAAO,aAAA,EAAe;AAAA,UACzC,QAAA;AAAA,UACA,MAAA,EAAQ,MAAA,CAAO,EAAA,CAAG,MAAA,CAAO,IAAI;AAAA,SAChC;AAAA,OACJ;AAAA,KACL;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA,EAAU,CAAC,QAAA,KAAsB;AAC7B,MAAA,SAAA;AACA,MAAA,IAAI,QAAA,EAAU,OAAA,CAAQ,UAAU,CAAA,EAAE;AAAA,IACtC;AAAA,GACJ;AACJ;;;;"}
+{"version":3,"file":"sheetMotion.js","sources":["../../../../src/components/overlay/sheetMotion.native.ts"],"sourcesContent":["import {Easing, runOnJS, withTiming} from \"react-native-reanimated\";\n\n/**\n * The bottom sheet's entering and exiting motion, for every overlay in this\n * library that presents one. ⛔ ONE DEFINITION, TWO CALLERS — `Dialog` and\n * `ConfirmDialog` both draw a sheet inside their own RN `Modal`, both hit the\n * same fault, and two copies of an animation drift the moment one is tuned.\n *\n**\n * ⛔ THE SHEET'S SLIDE IS WRITTEN BY HAND, BECAUSE `SlideInDown` DOES NOT MOVE\n * THIS PANEL AT ALL — measured on an iPhone 16 Pro simulator, 30 September 2026.\n *\n * ⚠️ THE MEASUREMENT, because three earlier rounds of this hunt cited\n * instruments that exist in no repository. One view, one tree, one Modal, one\n * method — a tap followed by a screenshot — and only the animation changed:\n *\n *     FadeIn.duration(10000)        the panel is caught HALF TRANSPARENT\n *     SlideInDown.duration(10000)   the panel is at rest and fully opaque\n *     translateY 700 -> 0, 10000ms  the panel is caught PARTWAY UP THE SCREEN\n *\n * So the view can be faded, and it can be translated. What fails is\n * `SlideInDown`'s own arithmetic for HOW FAR to travel. It derives that from\n * the window — and inside a React Native `Modal`, which hosts its own native\n * view hierarchy, the window it measures is not the screen. The distance comes\n * out as nothing, so the panel is placed at its resting position on frame one.\n *\n * ⚠️ THE DURATIONS ABOVE ARE THE INSTRUMENT, NOT THE PRODUCT. 10000ms was used\n * because the only method available — tap, then screenshot — has a round trip\n * longer than three seconds, which silently invalidated an earlier round of\n * 3000ms probes: every one of them showed a finished animation and read as\n * \"nothing ran\". No shipped duration was touched to make anything look better\n * (§12.5); the numbers below are still `overlayAnimations`'.\n *\n * ⛔ AND THIS IS WHY THE SCRIM-AND-PANEL SIBLING FIX CHANGED NOTHING VISIBLE.\n * That fix was real: the panel had been inheriting the scrim's fade. But the\n * panel's own slide had never run, so removing the inherited fade left a panel\n * that simply appears. The fix made the sheet strictly LESS animated, and the\n * report that \"it is the same\" was correct.\n *\n * WHAT THESE USE INSTEAD. `targetHeight` and `currentHeight` are the PANEL's\n * own box, laid out inside the Modal's own hierarchy, so they are the one\n * distance that is right in this coordinate space. A sheet travels its own\n * height; it never needed the window.\n */\n/**\n * ⛔ A DURATION, NOT A SPRING, AND THE RULING CHANGED TO GET HERE. The entrance\n * was a spring because the motion spec said so. Fouad withdrew that on 30\n * September 2026 in favour of §5: whatever the app's existing sheets do, this\n * does. They are presented by the PLATFORM — RN's `Modal animationType=\"slide\"`\n * and React Navigation's `slide_from_bottom` — which slides for a fixed time on\n * an ease-out and stops dead.\n *\n * ⚠️ AND THE MEASUREMENT SAID THE SAME THING. The old spring's damping ratio was\n * 1.10 — overdamped — so it approached its resting place asymptotically. Its\n * first travel was fine (154ms against the platform's 126ms); it was still\n * creeping 437ms after the tap. A duration cannot do that: it arrives and stops.\n * Numbers, method and instrument: `overlayAnimations.sheet.enter.duration`.\n *\n * ⚠️ THE SIGNATURE IS UNCHANGED ON PURPOSE. `duration` was added to the SAME\n * `anim.sheet.enter` object the spring fields live on, so `Dialog` and\n * `ConfirmDialog` still pass exactly what they passed before and neither file is\n * touched by this change. The spring fields are still read — by a consumer\n * driving its own `Animated.spring`; see the preset's note.\n */\nexport const sheetEnter = (sheet: {duration: number}) =>\n    (values: any) => {\n        'worklet';\n        return {\n            initialValues: {transform: [{translateY: values.targetHeight}]},\n            animations: {\n                transform: [{\n                    translateY: withTiming(0, {\n                        duration: sheet.duration,\n                        /* Deceleration, which is what a platform sheet does: fast\n                           off the bottom edge, easing into its stop. `Easing.out`\n                           is resolved here rather than stored in the preset,\n                           because an Easing function is not serialisable config. */\n                        easing: Easing.out(Easing.cubic),\n                    }),\n                }],\n            },\n        };\n    };\n\nexport const sheetExit = (duration: number, onFinished: () => void) =>\n    (values: any) => {\n        'worklet';\n        return {\n            initialValues: {transform: [{translateY: 0}]},\n            animations: {\n                transform: [{\n                    translateY: withTiming(values.currentHeight, {\n                        duration,\n                        easing: Easing.in(Easing.ease),\n                    }),\n                }],\n            },\n            /* ⛔ THE MODAL UNMOUNTS ON THIS. A custom exiting reports through\n               `callback`, where a built-in used `.withCallback`. Losing it\n               would leave the RN Modal mounted over the app for ever. */\n            callback: (finished: boolean) => {\n                'worklet';\n                if (finished) runOnJS(onFinished)();\n            },\n        };\n    };\n\n\n"],"names":[],"mappings":";;AAgEO,MAAM,UAAA,GAAa,CAAC,KAAA,KACvB,CAAC,MAAA,KAAgB;AACb,EAAA,SAAA;AACA,EAAA,OAAO;AAAA,IACH,aAAA,EAAe,EAAC,SAAA,EAAW,CAAC,EAAC,UAAA,EAAY,MAAA,CAAO,YAAA,EAAa,CAAA,EAAC;AAAA,IAC9D,UAAA,EAAY;AAAA,MACR,WAAW,CAAC;AAAA,QACR,UAAA,EAAY,WAAW,CAAA,EAAG;AAAA,UACtB,UAAU,KAAA,CAAM,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAKhB,MAAA,EAAQ,MAAA,CAAO,GAAA,CAAI,MAAA,CAAO,KAAK;AAAA,SAClC;AAAA,OACJ;AAAA;AACL,GACJ;AACJ;AAEG,MAAM,SAAA,GAAY,CAAC,QAAA,EAAkB,UAAA,KACxC,CAAC,MAAA,KAAgB;AACb,EAAA,SAAA;AACA,EAAA,OAAO;AAAA,IACH,aAAA,EAAe,EAAC,SAAA,EAAW,CAAC,EAAC,UAAA,EAAY,CAAA,EAAE,CAAA,EAAC;AAAA,IAC5C,UAAA,EAAY;AAAA,MACR,WAAW,CAAC;AAAA,QACR,UAAA,EAAY,UAAA,CAAW,MAAA,CAAO,aAAA,EAAe;AAAA,UACzC,QAAA;AAAA,UACA,MAAA,EAAQ,MAAA,CAAO,EAAA,CAAG,MAAA,CAAO,IAAI;AAAA,SAChC;AAAA,OACJ;AAAA,KACL;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA,EAAU,CAAC,QAAA,KAAsB;AAC7B,MAAA,SAAA;AACA,MAAA,IAAI,QAAA,EAAU,OAAA,CAAQ,UAAU,CAAA,EAAE;AAAA,IACtC;AAAA,GACJ;AACJ;;;;"}

package/form-renderer/components/FormRenderer/index.cjs

@@ -109,39 +109,48 @@ const FormRenderer = ({
           return null;
         }
         const colSpan = parseInt(gridItemProps[elementId] ?? "12", 10);
-        return /* @__PURE__ */ jsxRuntime.jsx(KitsGridItem.default, { id: elementId, colSpan, children: /* @__PURE__ */ jsxRuntime.jsx(
-          FieldWrapper_native.FieldWrapper,
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          KitsGridItem.default,
           {
-            element: resolvedElement,
-            control,
-            grid,
-            groupField,
-            getValues,
-            focusedField,
-            setFocusedField,
-            onGridChange: (value) => {
-              if (value != gridItemProps[elementId]) {
-                setGridItemProps((prevState) => ({
-                  ...prevState,
-                  [elementId]: value
-                }));
-              }
-            },
-            children: (props) => /* @__PURE__ */ jsxRuntime.jsx(
-              FieldComponent,
+            id: elementId,
+            colSpan,
+            style: resolvedElement.cellStyle,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              FieldWrapper_native.FieldWrapper,
               {
-                groupField,
                 element: resolvedElement,
                 control,
+                grid,
+                groupField,
                 getValues,
                 focusedField,
                 setFocusedField,
-                fieldLogic: props
-              }
+                onGridChange: (value) => {
+                  if (value != gridItemProps[elementId]) {
+                    setGridItemProps((prevState) => ({
+                      ...prevState,
+                      [elementId]: value
+                    }));
+                  }
+                },
+                children: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+                  FieldComponent,
+                  {
+                    groupField,
+                    element: resolvedElement,
+                    control,
+                    getValues,
+                    focusedField,
+                    setFocusedField,
+                    fieldLogic: props
+                  }
+                )
+              },
+              elementId
             )
           },
           elementId
-        ) }, elementId);
+        );
       })
     }
   ) });

package/form-renderer/components/FormRenderer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n    Checkboxes,\n    ColorPicker,\n    CombinedElement,\n    ContainerElement,\n    DateField,\n    FileUploader,\n    Group,\n    InputNumber,\n    InputText,\n    ListBox,\n    Location,\n    NormalSelect,\n    ObjectElement,\n    Password,\n    Phone,\n    RadiusPicker,\n    Radios,\n    Select,\n    Switch,\n    TagsSelect,\n    Textarea,\n    TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n    elements: IFormElement<T>[];\n    control: Control<T>;\n    getValues: UseFormGetValues<T>;\n    parentPath?: string; // ✨ Pass down the parent path for nesting\n    grid?: IStyleClasses;\n    focusedField?: string;\n    setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n                                                        elements,\n                                                        control,\n                                                        getValues,\n                                                        groupField,\n                                                        grid = {},\n                                                        parentPath = '',\n                                                        focusedField, setFocusedField\n                                                    }: FormRendererProps<T>) => {\n\n    const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n    // --- Keyboard navigation ---\n    const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n    const textFieldIds = useMemo(() => {\n        return elements\n            .filter((el) => TEXT_TYPES.includes(el.type))\n            .map((el) => `${parentPath}${el.id as string}`);\n    }, [elements, parentPath]);\n\n    const keyboardNavCtx = useKeyboardNavProvider();\n\n    useEffect(() => {\n        keyboardNavCtx.setElementsOrder(textFieldIds);\n    }, [textFieldIds]);\n\n    const getElement = useCallback((elementType: string) => {\n\n        switch (elementType) {\n\n            case 'Email':\n            case 'Text':\n                return InputText;\n            case 'Number':\n                return InputNumber;\n            case 'Password':\n                return Password;\n            case 'Location':\n                return Location;\n            case 'Phone':\n                return Phone\n            case 'Date':\n                return DateField\n            case 'ColorPicker':\n                return ColorPicker\n            case 'RadiusPicker':\n                return RadiusPicker\n            case 'Radios':\n                return Radios\n            case 'Textarea':\n                return Textarea\n            case 'Image':\n            case 'File':\n                return FileUploader\n            case 'Switch':\n                return Switch\n            case 'Checkbox':\n                return Checkboxes\n            case 'Select':\n                return NormalSelect\n            case 'TreeSelect':\n                return TreeSelect\n            case 'Tags':\n                return TagsSelect\n            case 'ListBox':\n                return ListBox\n            case 'Multiselect':\n                return Select\n            case 'Group':\n                return Group\n            case 'Object':\n                return ObjectElement\n            case 'Container':\n                return ContainerElement\n            case 'Combined':\n                return CombinedElement\n            // default:\n            //     return <Flex/>;\n        }\n    }, []);\n\n\n    return (\n        <KeyboardNavContext.Provider value={keyboardNavCtx}>\n            <Grid\n                columns={12}\n                rowGap={6}\n                columnGap={8}\n            >\n                {elements.map((element) => {\n\n                    const FieldComponent = getElement(element.type);\n\n                    const elementId = `${parentPath}${element.id as string}`;\n                    const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n                    if (!FieldComponent) {\n                        console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n                        return null;\n                    }\n\n                    const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n                    return (\n                        <GridItem key={elementId} id={elementId} colSpan={colSpan}>\n                            <FieldWrapper\n                                key={elementId}\n                                element={resolvedElement}\n                                control={control}\n                                grid={grid}\n                                groupField={groupField}\n                                getValues={getValues}\n                                focusedField={focusedField}\n                                setFocusedField={setFocusedField}\n                                onGridChange={(value) => {\n                                    if (value != gridItemProps[elementId]) {\n                                        setGridItemProps(prevState => ({\n                                            ...prevState,\n                                            [elementId]: value\n                                        }));\n                                    }\n                                }}\n\n\n                            >\n                                {(props) => <FieldComponent\n                                    groupField={groupField}\n                                    element={resolvedElement}\n                                    control={control}\n                                    getValues={getValues}\n                                    focusedField={focusedField}\n                                    setFocusedField={setFocusedField}\n                                    fieldLogic={props}\n\n                                />}\n                            </FieldWrapper>\n                        </GridItem>\n                    );\n                })}\n            </Grid>\n        </KeyboardNavContext.Provider>\n    );\n};\n"],"names":["useState","useMemo","useKeyboardNavProvider","useEffect","useCallback","InputText","InputNumber","Password","Location","Phone","DateField","ColorPicker","RadiusPicker","Radios","Textarea","FileUploader","Switch","Checkboxes","NormalSelect","TreeSelect","TagsSelect","ListBox","Select","Group","ObjectElement","ContainerElement","CombinedElement","jsx","KeyboardNavContext","Grid","GridItem","FieldWrapper"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n    Checkboxes,\n    ColorPicker,\n    CombinedElement,\n    ContainerElement,\n    DateField,\n    FileUploader,\n    Group,\n    InputNumber,\n    InputText,\n    ListBox,\n    Location,\n    NormalSelect,\n    ObjectElement,\n    Password,\n    Phone,\n    RadiusPicker,\n    Radios,\n    Select,\n    Switch,\n    TagsSelect,\n    Textarea,\n    TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n    elements: IFormElement<T>[];\n    control: Control<T>;\n    getValues: UseFormGetValues<T>;\n    parentPath?: string; // ✨ Pass down the parent path for nesting\n    grid?: IStyleClasses;\n    focusedField?: string;\n    setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n                                                        elements,\n                                                        control,\n                                                        getValues,\n                                                        groupField,\n                                                        grid = {},\n                                                        parentPath = '',\n                                                        focusedField, setFocusedField\n                                                    }: FormRendererProps<T>) => {\n\n    const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n    // --- Keyboard navigation ---\n    const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n    const textFieldIds = useMemo(() => {\n        return elements\n            .filter((el) => TEXT_TYPES.includes(el.type))\n            .map((el) => `${parentPath}${el.id as string}`);\n    }, [elements, parentPath]);\n\n    const keyboardNavCtx = useKeyboardNavProvider();\n\n    useEffect(() => {\n        keyboardNavCtx.setElementsOrder(textFieldIds);\n    }, [textFieldIds]);\n\n    const getElement = useCallback((elementType: string) => {\n\n        switch (elementType) {\n\n            case 'Email':\n            case 'Text':\n                return InputText;\n            case 'Number':\n                return InputNumber;\n            case 'Password':\n                return Password;\n            case 'Location':\n                return Location;\n            case 'Phone':\n                return Phone\n            case 'Date':\n                return DateField\n            case 'ColorPicker':\n                return ColorPicker\n            case 'RadiusPicker':\n                return RadiusPicker\n            case 'Radios':\n                return Radios\n            case 'Textarea':\n                return Textarea\n            case 'Image':\n            case 'File':\n                return FileUploader\n            case 'Switch':\n                return Switch\n            case 'Checkbox':\n                return Checkboxes\n            case 'Select':\n                return NormalSelect\n            case 'TreeSelect':\n                return TreeSelect\n            case 'Tags':\n                return TagsSelect\n            case 'ListBox':\n                return ListBox\n            case 'Multiselect':\n                return Select\n            case 'Group':\n                return Group\n            case 'Object':\n                return ObjectElement\n            case 'Container':\n                return ContainerElement\n            case 'Combined':\n                return CombinedElement\n            // default:\n            //     return <Flex/>;\n        }\n    }, []);\n\n\n    return (\n        <KeyboardNavContext.Provider value={keyboardNavCtx}>\n            <Grid\n                columns={12}\n                rowGap={6}\n                columnGap={8}\n            >\n                {elements.map((element) => {\n\n                    const FieldComponent = getElement(element.type);\n\n                    const elementId = `${parentPath}${element.id as string}`;\n                    const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n                    if (!FieldComponent) {\n                        console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n                        return null;\n                    }\n\n                    const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n                    return (\n                        <GridItem\n                            key={elementId}\n                            id={elementId}\n                            colSpan={colSpan}\n                            /* The cell's own style — the stacking level an\n                               element config cannot otherwise reach. Sizing keys\n                               are forbidden by the type. */\n                            style={(resolvedElement as any).cellStyle}\n                        >\n                            <FieldWrapper\n                                key={elementId}\n                                element={resolvedElement}\n                                control={control}\n                                grid={grid}\n                                groupField={groupField}\n                                getValues={getValues}\n                                focusedField={focusedField}\n                                setFocusedField={setFocusedField}\n                                onGridChange={(value) => {\n                                    if (value != gridItemProps[elementId]) {\n                                        setGridItemProps(prevState => ({\n                                            ...prevState,\n                                            [elementId]: value\n                                        }));\n                                    }\n                                }}\n\n\n                            >\n                                {(props) => <FieldComponent\n                                    groupField={groupField}\n                                    element={resolvedElement}\n                                    control={control}\n                                    getValues={getValues}\n                                    focusedField={focusedField}\n                                    setFocusedField={setFocusedField}\n                                    fieldLogic={props}\n\n                                />}\n                            </FieldWrapper>\n                        </GridItem>\n                    );\n                })}\n            </Grid>\n        </KeyboardNavContext.Provider>\n    );\n};\n"],"names":["useState","useMemo","useKeyboardNavProvider","useEffect","useCallback","InputText","InputNumber","Password","Location","Phone","DateField","ColorPicker","RadiusPicker","Radios","Textarea","FileUploader","Switch","Checkboxes","NormalSelect","TreeSelect","TagsSelect","ListBox","Select","Group","ObjectElement","ContainerElement","CombinedElement","jsx","KeyboardNavContext","Grid","GridItem","FieldWrapper"],"mappings":"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"}

package/form-renderer/components/FormRenderer/index.js

@@ -107,39 +107,48 @@ const FormRenderer = ({
           return null;
         }
         const colSpan = parseInt(gridItemProps[elementId] ?? "12", 10);
-        return /* @__PURE__ */ jsx(KitsGridItem, { id: elementId, colSpan, children: /* @__PURE__ */ jsx(
-          FieldWrapper,
+        return /* @__PURE__ */ jsx(
+          KitsGridItem,
           {
-            element: resolvedElement,
-            control,
-            grid,
-            groupField,
-            getValues,
-            focusedField,
-            setFocusedField,
-            onGridChange: (value) => {
-              if (value != gridItemProps[elementId]) {
-                setGridItemProps((prevState) => ({
-                  ...prevState,
-                  [elementId]: value
-                }));
-              }
-            },
-            children: (props) => /* @__PURE__ */ jsx(
-              FieldComponent,
+            id: elementId,
+            colSpan,
+            style: resolvedElement.cellStyle,
+            children: /* @__PURE__ */ jsx(
+              FieldWrapper,
               {
-                groupField,
                 element: resolvedElement,
                 control,
+                grid,
+                groupField,
                 getValues,
                 focusedField,
                 setFocusedField,
-                fieldLogic: props
-              }
+                onGridChange: (value) => {
+                  if (value != gridItemProps[elementId]) {
+                    setGridItemProps((prevState) => ({
+                      ...prevState,
+                      [elementId]: value
+                    }));
+                  }
+                },
+                children: (props) => /* @__PURE__ */ jsx(
+                  FieldComponent,
+                  {
+                    groupField,
+                    element: resolvedElement,
+                    control,
+                    getValues,
+                    focusedField,
+                    setFocusedField,
+                    fieldLogic: props
+                  }
+                )
+              },
+              elementId
             )
           },
           elementId
-        ) }, elementId);
+        );
       })
     }
   ) });

package/form-renderer/components/FormRenderer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n    Checkboxes,\n    ColorPicker,\n    CombinedElement,\n    ContainerElement,\n    DateField,\n    FileUploader,\n    Group,\n    InputNumber,\n    InputText,\n    ListBox,\n    Location,\n    NormalSelect,\n    ObjectElement,\n    Password,\n    Phone,\n    RadiusPicker,\n    Radios,\n    Select,\n    Switch,\n    TagsSelect,\n    Textarea,\n    TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n    elements: IFormElement<T>[];\n    control: Control<T>;\n    getValues: UseFormGetValues<T>;\n    parentPath?: string; // ✨ Pass down the parent path for nesting\n    grid?: IStyleClasses;\n    focusedField?: string;\n    setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n                                                        elements,\n                                                        control,\n                                                        getValues,\n                                                        groupField,\n                                                        grid = {},\n                                                        parentPath = '',\n                                                        focusedField, setFocusedField\n                                                    }: FormRendererProps<T>) => {\n\n    const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n    // --- Keyboard navigation ---\n    const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n    const textFieldIds = useMemo(() => {\n        return elements\n            .filter((el) => TEXT_TYPES.includes(el.type))\n            .map((el) => `${parentPath}${el.id as string}`);\n    }, [elements, parentPath]);\n\n    const keyboardNavCtx = useKeyboardNavProvider();\n\n    useEffect(() => {\n        keyboardNavCtx.setElementsOrder(textFieldIds);\n    }, [textFieldIds]);\n\n    const getElement = useCallback((elementType: string) => {\n\n        switch (elementType) {\n\n            case 'Email':\n            case 'Text':\n                return InputText;\n            case 'Number':\n                return InputNumber;\n            case 'Password':\n                return Password;\n            case 'Location':\n                return Location;\n            case 'Phone':\n                return Phone\n            case 'Date':\n                return DateField\n            case 'ColorPicker':\n                return ColorPicker\n            case 'RadiusPicker':\n                return RadiusPicker\n            case 'Radios':\n                return Radios\n            case 'Textarea':\n                return Textarea\n            case 'Image':\n            case 'File':\n                return FileUploader\n            case 'Switch':\n                return Switch\n            case 'Checkbox':\n                return Checkboxes\n            case 'Select':\n                return NormalSelect\n            case 'TreeSelect':\n                return TreeSelect\n            case 'Tags':\n                return TagsSelect\n            case 'ListBox':\n                return ListBox\n            case 'Multiselect':\n                return Select\n            case 'Group':\n                return Group\n            case 'Object':\n                return ObjectElement\n            case 'Container':\n                return ContainerElement\n            case 'Combined':\n                return CombinedElement\n            // default:\n            //     return <Flex/>;\n        }\n    }, []);\n\n\n    return (\n        <KeyboardNavContext.Provider value={keyboardNavCtx}>\n            <Grid\n                columns={12}\n                rowGap={6}\n                columnGap={8}\n            >\n                {elements.map((element) => {\n\n                    const FieldComponent = getElement(element.type);\n\n                    const elementId = `${parentPath}${element.id as string}`;\n                    const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n                    if (!FieldComponent) {\n                        console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n                        return null;\n                    }\n\n                    const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n                    return (\n                        <GridItem key={elementId} id={elementId} colSpan={colSpan}>\n                            <FieldWrapper\n                                key={elementId}\n                                element={resolvedElement}\n                                control={control}\n                                grid={grid}\n                                groupField={groupField}\n                                getValues={getValues}\n                                focusedField={focusedField}\n                                setFocusedField={setFocusedField}\n                                onGridChange={(value) => {\n                                    if (value != gridItemProps[elementId]) {\n                                        setGridItemProps(prevState => ({\n                                            ...prevState,\n                                            [elementId]: value\n                                        }));\n                                    }\n                                }}\n\n\n                            >\n                                {(props) => <FieldComponent\n                                    groupField={groupField}\n                                    element={resolvedElement}\n                                    control={control}\n                                    getValues={getValues}\n                                    focusedField={focusedField}\n                                    setFocusedField={setFocusedField}\n                                    fieldLogic={props}\n\n                                />}\n                            </FieldWrapper>\n                        </GridItem>\n                    );\n                })}\n            </Grid>\n        </KeyboardNavContext.Provider>\n    );\n};\n"],"names":["NormalSelect","TreeSelect","TagsSelect","ListBox","ContainerElement","Grid","GridItem"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/form-renderer/components/FormRenderer/index.native.tsx"],"sourcesContent":["// components/FormRenderer.tsx\n\nimport React, {useCallback, useEffect, useMemo, useState} from 'react';\nimport type {Control, FieldValues, UseFormGetValues} from 'react-hook-form';\nimport type {GroupFieldConfigs, IFormElement} from '@lmb-it/kitsconcerto-types';\nimport {FieldWrapper} from '../layout/FieldWrapper';\nimport {KeyboardNavContext, useKeyboardNavProvider} from '../../../hooks/useKeyboardNavigation';\n\n// Import all your \"dumb\" field components\nimport {\n    Checkboxes,\n    ColorPicker,\n    CombinedElement,\n    ContainerElement,\n    DateField,\n    FileUploader,\n    Group,\n    InputNumber,\n    InputText,\n    ListBox,\n    Location,\n    NormalSelect,\n    ObjectElement,\n    Password,\n    Phone,\n    RadiusPicker,\n    Radios,\n    Select,\n    Switch,\n    TagsSelect,\n    Textarea,\n    TreeSelect\n} from '../fields';\nimport {Grid, GridItem} from \"../../../_compat\";\nimport type {IStyleClasses} from \"@lmb-it/kitsconcerto-types\";\n\n// ... import all other field components\n\ninterface FormRendererProps<T extends FieldValues> extends GroupFieldConfigs<T> {\n    elements: IFormElement<T>[];\n    control: Control<T>;\n    getValues: UseFormGetValues<T>;\n    parentPath?: string; // ✨ Pass down the parent path for nesting\n    grid?: IStyleClasses;\n    focusedField?: string;\n    setFocusedField: React.Dispatch<React.SetStateAction<string>>;\n}\n\nexport const FormRenderer = <T extends FieldValues>({\n                                                        elements,\n                                                        control,\n                                                        getValues,\n                                                        groupField,\n                                                        grid = {},\n                                                        parentPath = '',\n                                                        focusedField, setFocusedField\n                                                    }: FormRendererProps<T>) => {\n\n    const [gridItemProps, setGridItemProps] = useState<Record<string, string>>({})\n\n    // --- Keyboard navigation ---\n    const TEXT_TYPES = ['Text', 'Email', 'Number', 'Password', 'Phone', 'Textarea'];\n    const textFieldIds = useMemo(() => {\n        return elements\n            .filter((el) => TEXT_TYPES.includes(el.type))\n            .map((el) => `${parentPath}${el.id as string}`);\n    }, [elements, parentPath]);\n\n    const keyboardNavCtx = useKeyboardNavProvider();\n\n    useEffect(() => {\n        keyboardNavCtx.setElementsOrder(textFieldIds);\n    }, [textFieldIds]);\n\n    const getElement = useCallback((elementType: string) => {\n\n        switch (elementType) {\n\n            case 'Email':\n            case 'Text':\n                return InputText;\n            case 'Number':\n                return InputNumber;\n            case 'Password':\n                return Password;\n            case 'Location':\n                return Location;\n            case 'Phone':\n                return Phone\n            case 'Date':\n                return DateField\n            case 'ColorPicker':\n                return ColorPicker\n            case 'RadiusPicker':\n                return RadiusPicker\n            case 'Radios':\n                return Radios\n            case 'Textarea':\n                return Textarea\n            case 'Image':\n            case 'File':\n                return FileUploader\n            case 'Switch':\n                return Switch\n            case 'Checkbox':\n                return Checkboxes\n            case 'Select':\n                return NormalSelect\n            case 'TreeSelect':\n                return TreeSelect\n            case 'Tags':\n                return TagsSelect\n            case 'ListBox':\n                return ListBox\n            case 'Multiselect':\n                return Select\n            case 'Group':\n                return Group\n            case 'Object':\n                return ObjectElement\n            case 'Container':\n                return ContainerElement\n            case 'Combined':\n                return CombinedElement\n            // default:\n            //     return <Flex/>;\n        }\n    }, []);\n\n\n    return (\n        <KeyboardNavContext.Provider value={keyboardNavCtx}>\n            <Grid\n                columns={12}\n                rowGap={6}\n                columnGap={8}\n            >\n                {elements.map((element) => {\n\n                    const FieldComponent = getElement(element.type);\n\n                    const elementId = `${parentPath}${element.id as string}`;\n                    const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;\n\n\n                    if (!FieldComponent) {\n                        console.warn(`No component found for element type: \"${resolvedElement.type}\"`);\n                        return null;\n                    }\n\n                    const colSpan = parseInt(gridItemProps[elementId] ?? '12', 10);\n\n                    return (\n                        <GridItem\n                            key={elementId}\n                            id={elementId}\n                            colSpan={colSpan}\n                            /* The cell's own style — the stacking level an\n                               element config cannot otherwise reach. Sizing keys\n                               are forbidden by the type. */\n                            style={(resolvedElement as any).cellStyle}\n                        >\n                            <FieldWrapper\n                                key={elementId}\n                                element={resolvedElement}\n                                control={control}\n                                grid={grid}\n                                groupField={groupField}\n                                getValues={getValues}\n                                focusedField={focusedField}\n                                setFocusedField={setFocusedField}\n                                onGridChange={(value) => {\n                                    if (value != gridItemProps[elementId]) {\n                                        setGridItemProps(prevState => ({\n                                            ...prevState,\n                                            [elementId]: value\n                                        }));\n                                    }\n                                }}\n\n\n                            >\n                                {(props) => <FieldComponent\n                                    groupField={groupField}\n                                    element={resolvedElement}\n                                    control={control}\n                                    getValues={getValues}\n                                    focusedField={focusedField}\n                                    setFocusedField={setFocusedField}\n                                    fieldLogic={props}\n\n                                />}\n                            </FieldWrapper>\n                        </GridItem>\n                    );\n                })}\n            </Grid>\n        </KeyboardNavContext.Provider>\n    );\n};\n"],"names":["NormalSelect","TreeSelect","TagsSelect","ListBox","ContainerElement","Grid","GridItem"],"mappings":"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"}

package/index.d.ts

@@ -1622,6 +1622,22 @@ export type IElementStyle = {
     helperText?: IStyleClasses;
     errorMessage?: IStyleClasses;
 };
+/**
+ * The style a form grid CELL may carry, with every key that decides its size
+ * removed.
+ *
+ * ⛔ THE GRID OWNS THE WIDTH. It measures its container, divides by `columns`,
+ * and hands each cell an exact pixel width. A caller who sets `width`, `flex`
+ * or `flexBasis` breaks that arithmetic for the whole ROW — flexbox then
+ * redistributes space the neighbouring cells were counting on, and the symptom
+ * appears on a SIBLING, nowhere near the line that caused it. Refusing them in
+ * the type is the only place that mistake is cheap.
+ *
+ * ⚠️ The short aliases go too (`w`, `minW`, `maxW`): they are the same keys
+ * under another name, and leaving them would make the ban look enforced while
+ * a one-letter spelling walked straight through it.
+ */
+export type IGridCellStyle = Omit<IStyleClasses, 'width' | 'minWidth' | 'maxWidth' | 'w' | 'minW' | 'maxW' | 'flex' | 'flexBasis' | 'flexGrow' | 'flexShrink'>;
 /** Core properties shared by all form elements. */
 export interface IElementBase<T extends FieldValues> {
     /** The unique identifier for the field. */
@@ -1665,6 +1681,30 @@ export interface IElementBase<T extends FieldValues> {
     /** Grid layout properties. */
     hideError?: boolean;
     displayOnly?: boolean;
+    /**
+     * Style for the field's GRID CELL — the wrapper the form grid puts around
+     * every element, outside the element's own `slots.container`.
+     *
+     * ⛔ THIS IS THE ONLY WAY TO REACH THAT LEVEL. A suggestion panel, a popover
+     * or a menu that opens out of its own field is painted UNDER the fields
+     * after it, because every cell sits at the default stacking level and the
+     * later ones simply paint last. `slots.container`, the element's own
+     * `zIndex` and the panel's own `zIndex` all order things INSIDE the cell,
+     * one level too deep to matter.
+     *
+     * ⚠️ SIZING KEYS ARE REFUSED BY THE TYPE — `width`, `minWidth`, `maxWidth`,
+     * `flex`, `flexBasis`, `flexGrow`, `flexShrink`. The grid hands each cell a
+     * measured pixel width, and overriding it breaks the arithmetic for the
+     * whole row, with the symptom appearing on a sibling.
+     *
+     * ⚠️ NOT THEME-RESOLVED. It is a plain React Native `ViewStyle`, applied
+     * after the cell's width. A token string lands as a literal string, so use
+     * it for `zIndex`, `elevation` and `overflow`, not for colours.
+     *
+     * ⚠️ NATIVE ONLY. On web the FieldWrapper owns the GridItem and already
+     * spreads the element's container style onto it.
+     */
+    cellStyle?: IGridCellStyle;
     /** When true, the molecule component renders without its KitsContainer wrapper (no label, no error). */
     attached?: boolean;
     placeholder?: DynamicValue<T, string>;
@@ -8283,11 +8323,41 @@ export interface IKitsGridProps {
  */
 declare const KitsGrid: ({ columns, columnGap, rowGap, children, }: IKitsGridProps) => React__default.JSX.Element;
 
+/**
+ * The style a grid cell may carry, with the keys that decide its SIZE removed.
+ *
+ * ⛔ `width`, `flex` AND `flexBasis` ARE FORBIDDEN BY THE TYPE, not merely
+ * discouraged. The grid measures its container, divides by `columns`, and hands
+ * every cell an exact pixel width. A caller who sets any of these breaks that
+ * arithmetic for the whole ROW, because flexbox then redistributes space the
+ * neighbouring cells were counting on — and the symptom shows up on a SIBLING,
+ * nowhere near the line that caused it. A compile error is the only place that
+ * mistake is cheap.
+ *
+ * ⚠️ `minWidth`, `maxWidth`, `flexGrow` and `flexShrink` go with them: each
+ * overrides a measured width without looking like it does.
+ */
+export type IKitsGridItemStyle = Omit<ViewStyle, 'width' | 'minWidth' | 'maxWidth' | 'flex' | 'flexBasis' | 'flexGrow' | 'flexShrink'>;
 export interface IKitsGridItemProps {
     /** Unique identifier — used for context registration. Auto-generated if omitted. */
     id?: string;
     /** Number of grid columns this item spans */
     colSpan: number;
+    /**
+     * Extra style for the cell, applied AFTER its measured width.
+     *
+     * ⛔ THIS IS THE STACKING LEVEL, AND NOTHING ELSE COULD REACH IT. Cells are
+     * siblings inside one flex-wrap row, so a panel that opens out of its own
+     * field — autocomplete suggestions, a popover, a menu — is painted UNDER
+     * every cell that comes after it. A `zIndex` on anything INSIDE the cell
+     * orders that thing within the cell and changes nothing outside it, and
+     * `FieldWrapper`'s own `zIndex: isFocused ? 1000 : undefined` is inside it
+     * too. Measured on a device: an address suggestion list drew its background,
+     * and the next field's label and box drew on top of it.
+     *
+     * ⚠️ Sizing keys are removed by the type — see `IKitsGridItemStyle`.
+     */
+    style?: IKitsGridItemStyle;
     children?: ReactNode;
 }
 /**
@@ -8299,7 +8369,7 @@ export interface IKitsGridItemProps {
  * Does NOT need to be a direct child of KitsGrid — context
  * handles communication regardless of hierarchy depth.
  */
-declare const KitsGridItem: ({ id: externalId, colSpan, children }: IKitsGridItemProps) => React__default.JSX.Element;
+declare const KitsGridItem: ({ id: externalId, colSpan, style, children, }: IKitsGridItemProps) => React__default.JSX.Element;
 
 declare const Flex: {
     ({ className, children, ref, ...props }: PropsWithChildren<IFlexComponent>): React__default.JSX.Element;
@@ -14917,4 +14987,4 @@ declare const localeFiles: {
 };
 
 export { ALPHA_COLOR_VARS, ALPHA_STEPS, ALPHA_TOKEN_NAMES, AccentEdge, CustomAccordion as Accordion, ActionCard, Alert, AlertDescription, AlertIcon, AlertTitle, KitsAnimatePresence as AnimatePresence, AnyFile, Avatar, AvatarStack, Badge, Banner, BottomTabBar, Box, BreadCrumb, Button, Card, Carousel, Center, ChatBubble, Chip, CircularProgress, Collapse, CommandPalette, Container, CustomPopover, DEFAULT_NATIVE_SHADOWS, DataView, DataViewContext, DateSeparator, Delta, DetailList as DetailsList, Divider, Donut, DotGrid, EDateFormat, EKeyFilter, Editable, EmptyState, FIELD_LABEL_MARGIN, FIELD_MARGIN, Flex, Form, FormSelect, GUTTER, Gallery, Gauge, Form as GoForm, Datatable as GoTable, KitsGrid as Grid, KitsGridItem as GridItem, GroupedBars, HELPER_TEXT_MARGIN, HStack, Heading, Icon, IconMap, Image, KitsInputSwitch as InputSwitch, KeyboardNavContext, KitsAutoComplete, KitsBarChart, KitsCascadeSelect, KitsCheckbox as KitsCheckboxes, KitsConfirm, KitsConfirmPopup, KitsContainer, KitsInputCalendar as KitsDatepicker, KitsDialogControlled as KitsDialog, KitsDropdown, FilePicker as KitsFilePicker, KitsInputColorPicker, KitsInputLocation, KitsInputMask, KitsInputNumber, KitsInputPassword, KitsInputText, KitsInputTextarea, KitsLineChart, KitsListBox, KitsMultiSelect, KitsPhoneComponent, KitsRadar, KitsRadio as KitsRadios, RadiusPicker as KitsRadiusPicker, KitsSliders, KitsThemeProvider, KitsToast, KitsTreeSelect, Label, Legend, Link, List, ListItem, Loader, LocaleContext, LocaleContextProvider, MainContext, MainContextProvider, MapTile, MessageComposer, MessageReceipt, MetricCard, KitsMultiSelect as MultiSelect, PersonCard, ProgressBar, RadiusPicker, RankedList, ReducedMotionProvider, Rise, SHADOW_PRESET_KEYS, SPACER, KitsScrollView as ScrollView, SegmentedControl, FormSelect as Select, SelectButton, Skeleton$1 as Skeleton, SkeletonRows, Skeleton as SkeletonText, Sparkline, StackedBars, StatCard, StatGroup, StatePill, StatusCard, Stepper, Striped, Svg, TableContext, Tabs, Text, ThemeContextProvider, Timeline, Tip, Tooltip, Translate, KitsTreeSelect as TreeSelect, TreeView, TriStateCheckbox, TypingIndicator, VStack, Wash, WidgetPanel, borderProperties, breakpoints, capitalizeFirstLetter, checkExtAgainstAccepted, checkNameDuplication, colorWithAlpha, dateTimeFormat, deepMerge, defaultSeverityTheme, defaultTheme, downloadCanvas, dynamicList, expandShadowNative, extendTheme, fileTypeIcon, fileValidation, filesExt, filesMemes, filesTypes, flattenSlotStyles, fontSizeMapping, formFileValidation, formatNumber, getActiveNativeShadows, getCombinedChildIds, getCustomDateTime, getDateElements, getDefaultValues, getMeme, getParams, getPropertyByPath, getType, getTypes, getURLParams, imagesExt, imagesMemes, imagesTypes, isAlphaToken, isNumber, isSemanticToken, isShadowPreset, isThemeToken, isToday, isValidURL, kitsMotion, listingProperties, localeFiles, allProperties as mapCssProperties, mergeRefs, nonPxProperties, propertiesWithoutCssEquivalent, pxProperties, resolveStyleRecord, resolveTokenValue, schemaBuilder, setActiveNativeShadows, shadowNative, shadowWeb, sizeMapping, sizingProperties, timeAgo, timeSince, toMemes, useAllSeverityColors, useComponentDefaults, useCountUp, useDataView, useDialog, useDisclosure, useEnter, useFieldLogic, useFocusStyles, useFormFieldKeyboardNav, useFormManager, useKeyboardNav, useKeyboardNavProvider, useKitsColorScheme, useKitsConcerto, useKitsTheme, useLanguage, useMeasuredWidth, useNativeColorMap, usePopup, useReducedMotion, useResolvedElementStyles, useResolvedStyle, useRtlLineHeight, useScrollState, useSelectionController, useSeverityColors, useTable, useTheme, useThemedFont, useToast };
-export type { AlignmentsValues, AllSlotKeys, AnimationsValues, AvatarShape, AvatarSize, AvatarStatus, BannerAction, BannerStatus, BaseFieldProps, Booleanish, Breakpoint, CallbackProps, ChatBubbleTone, ChatBubbleVariant, ChipSeverity, ChipSize, ColorMode, ColorScale, ColorValue, Colors, ColorsType, ComponentSize, CustomSubmitButtonProps, DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableSelectionSingleChangeEvent, DataTableSortMeta, DeepPartial, DetailItemInputType, DynamicValue, ElementProps, EnteringAnimation, ExitingAnimation, ExpandedKeys, FetchError, FetchSuccess, FetchTableDataRes, FetchTablePaginationData, FieldWrapperProps, File$1 as File, FileUploaderTemplate, FileUploaderTemplateParams, FlexAlignmentsValues, FlexValues, FormBooleanEvent, FormBooleanTarget, FormEvent, FormTarget, GroupFieldConfigs, HighSizingValue, IAccentEdgeProps, IAccordionElementSlots, IAccordionProps, IActionCardProps, IAddressComponentValue, IAddressExperianFormat, IAddressFormat, IAddressFormatResults, IAddressSearchResults, IAlertComponent, IAlertProps, IAlignment, IAnimation, IAutoCompleteCore, IAutoCompleteElement, IAvatarElementSlots, IAvatarProps, IAvatarStackElementSlots, IAvatarStackProps, IBadgeProps, IBannerProps, IBarChartProps, IBaseValidation, IBasicSectionProps, IBg, IBodyTemplate, IBodyTemplateIcon, IBorder, IBottomTabBarElementSlots, IBottomTabBarProps, IBoxComponent, IBuilderAddressField, IBuilderCheckboxField, IBuilderContainerField, IBuilderDateField, IBuilderField, IBuilderFieldBase, IBuilderFieldExport, IBuilderFileField, IBuilderGroupField, IBuilderMultiselectField, IBuilderNumberField, IBuilderPhoneField, IBuilderRadiosField, IBuilderRadiusPickerField, IBuilderSectionField, IBuilderSelectField, IBuilderSwitchField, IBuilderTagsField, IBuilderTextField, IBuilderTextareaField, IButton, IButtonElementSlots, IButtonParams, IButtonProps, IButtonState, IButtonsFilter, ICanvasProps, ICardComponent, ICardElementSlots, ICarouselElementSlots, ICarouselProps, ICascadeSelect, ICascadeSelectCore, IChatBubbleElementSlots, IChatBubbleProps, ICheckbox, ICheckboxFilter, ICheckboxSlots, IChildren, IChildrenParams, IChipProps, ICircularProgressProps, ICollapseProps, IColorPicker, IColumn, IColumnBase, ICombined, ICommandPaletteGroup, ICommandPaletteItem, ICommandPaletteProps, IComponentThemeConfig, IConditionGroupProps, IConditionRowProps, IConditionRule, IConditionsSectionProps, IConfirmDialogProps, IConfirmPopupProps, IContainer, IContainerCardProps, IContainerProps, IContextValues, ICountrySearchResults, ICssStyling, IDVButtonsFilter, IDVCheckboxFilter, IDVDateFilter, IDVDropdownFilter, IDVFilters, IDVMessages, IDVMultiselectFilter, IDVNumberFilter, IDVPaginationRequest, IDVPaginationResponse, IDVPaginationState, IDVPhoneFilter, IDVRangeFilter, IDVTextFilter, IDVTriStateFilter, IDataTableContextValues, IDataTableProps, IDataViewContextValues, IDataViewProps, IDataViewRefValues, IDatatableRefValues, IDate, IDateFilter, IDateProps, IDateSeparatorElementSlots, IDateSeparatorProps, IDateValidation, IDatepickerSlots, IDeltaProps, IDetailItem, IDetailListProps, IDialogButton, IDialogProps, IDialogRef, IDialogState, IDisplay, IDividerComponent, IDonutProps, IDonutSegment, IDotGridProps, IDoughnutChartProps, IDropdownCore, IDropdownFilter, IDropdownSelect, IEditableProps, IEditors, IEffects, IElementBase, IElementSlotConfig, IElementStyle, IEmail, IEmailSearchResults, IEmptyStateElementSlots, IEmptyStateProps, IFieldCardProps, IFieldCondition, IFieldPreviewProps, IFile, IFileUploader, IFileUploaderElement, IFileUploaderTypes, IFileValidation, IFilesExtTypeKeys, IFilters, IFlexAlignment, IFlexComponent, IFormAddon, IFormBuilderInternalState, IFormBuilderMeta, IFormBuilderPayload, IFormBuilderProps, IFormComponent, IFormElement, IFormElementBaseSlots, IFormElementSlots, IFormGrid, IFormListsElements, IFormSelect, IFormSelectElements, IFormSingleElement, IGalleryElementSlots, IGalleryItem, IGalleryProps, IGaugeProps, IGrid, IGridComponent, IGridItem, IGridItemComponent, IGroup, IGroupCardProps, IGroupElementSlots, IGroupSettings, IGroupedBarsDatum, IGroupedBarsProps, IHeaderElementSlots, IHeadingComponent, IIconProps, IImageComponent, IImagesExtTypeKeys, IInteractivity, IKeyedColumn, IKitsAnimation, IKitsBarChartDatum, IKitsBarChartProps, IKitsCheckboxProps, IKitsComponentDefaults, IKitsContainer, IKitsDialogControlled, IKitsInputCalendar, IKitsInputColorPicker, IKitsInputLocation, IKitsInputMask, IKitsInputNumber, IKitsInputPassword, IKitsInputRating, IKitsInputSwitch, IKitsInputText, IKitsInputTextarea, IKitsLineChartProps, IKitsLineChartSeries, IKitsPhoneInput, IKitsRadioProps, IKitsTheme, IKitsThemeColors, IKitsThemeConfig, IKitsThemeContextValues, IKitsThemeFontSizes, IKitsThemeFontWeights, IKitsThemeFonts, IKitsThemeLineHeights, IKitsThemeRadii, IKitsThemeShadows, IKitsThemeSpacing, IKitsToastRef, ILabelElement, ILabelProps, ILanguage, ILayout, ILegendItem, ILegendProps, ILineChartProps, ILinkComponent, ILinkOverrides, IList, IListBoxCore, IListBoxElement, IListBoxSelect, IListItem, IListing, ILoaderProps, ILoadingIndicatorContext, ILocaleContextProps, ILocaleContextValues, ILocation, ILocationDetailsResponse, ILocationResponse, IMainContextProps, IMainContextValues, IMapTilePoint, IMapTileProps, IMemes, IMenuItem, IMessageComposerElementSlots, IMessageComposerProps, IMessageReceiptElementSlots, IMessageReceiptProps, IMessages, IMetricCardProps, IMinusButton, IModalComponent, IModalFormProps, IMultiSelect, IMultiSelectCore, IMultiSelectSlots, IMultiselect, IMultiselectFilter, INativeShadow, INonCrossPlatformTypes, INumberFilter, INumberInput, INumberProps, INumberValidation, IObjectGroup, IOneOfTypes, IOptionItem, IOptionsEditorProps, IOptionsSource, IPageISection, IPaginationRequest, IPaginationResponse, IPaginatorLabels, IPaletteItemProps, IPaletteProps, IPanelCustomSlot, IPassword, IPasswordProps, IPersonCardProps, IPhone, IPhoneFilter, IPhoneObjectValue, IPhoneValidationResults, IPhoneValue, IPieChartProps, IPlusButton, IPolarAreaChartProps, IPopoverProps, IProgressBarElementSlots, IProgressBarProps, IPropertiesPanelProps, IRTLDetection, IRadarChartProps, IRadarProps, IRadarSeries, IRadioCheckboxListItem, IRadioGroup, IRadioSlots, IRadiusPickerEvents, IRadiusPickerField, IRadiusPickerI18n, IRadiusPickerProps, IRangeFilter, IRankedListProps, IRankedListRow, IRef, IRepeatableSettings, IResponsiveElement, IRiseProps, ISVGComponent, IScrollViewComponent, ISegmentedControlOption, ISegmentedControlProps, ISelect, ISelectBase, ISelectCore, ISelectElement, ISelectSlots, ISelectType, ISelectedFile, ISelectedFileType, ISelectionValidation, ISeverityColorSlots, ISeverityThemeMap, IShadowDefinition, IShadowValue, ISidebarElementSlots, ISizing, ISkeleton, ISkeletonRowsProps, ISkeletonText, ISliderProps, ISpacing, ISparklineProps, IStackProps, IStackedBarsDatum, IStackedBarsProps, IStatCardElementSlots, IStatCardProps, IStatGroupElementSlots, IStatGroupProps, IStatePillProps, IStatisticsProps, IStats, IStatusCardProps, IStepperElementSlots, IStepperProps, IStripedProps, IStyleClasses, ISwitch, ISwitchSlots, ITabBarItem, ITabItem, ITableElementSlots, ITableFlatConfig, ITabsElementSlots, ITabsProps, ITags, IText, ITextComponent, ITextFieldProps, ITextFilter, ITextInput, ITextInputProps, ITextInputSlots, ITextValidation, ITextarea, IThemeContextProps, IThemeContextValues, ITimelineElementSlots, ITimelineItem, ITimelineProps, ITipProps, IToastAction, IToastFunction, IToastOptions, IToastParams, IToolbarProps, ITransforms, ITransition, ITranslatableInputProps, ITranslatableText, ITranslateComponent, ITreeItem, ITreeSelect, ITreeSelectCore, ITreeSelectElement, ITreeSelectNode, ITreeViewProps, ITriStateFilter, ITypingIndicatorElementSlots, ITypingIndicatorProps, IUnkeyedColumn, IUseCountUpOptions, IUseFormReturn, IUserAvatar, IValidationSectionProps, IWashProps, IWidgetBarIncomingProp, IWidgetChartContextProps, IWidgetChartProp, IWidgetData, IWidgetDoughnutIncomingProp, IWidgetLineIncomingProp, IWidgetPanelProps, IWidgetPieIncomingProp, IWidgetPolarAreaIncomingProp, IWidgetRadarIncomingProp, IconName, IconType, InputTextFieldProps, KitsBreakpoint, KitsConditionalObject, KitsDevice, KitsMotion, KitsOrientation, KitsPlatform, KitsResponsiveObject, KitsResponsiveValue, KitsThemeOverride, LabelVariant, LatLng, LoadMode, LoadingIndicatorRenderer, LogicFunction, MapInteraction, MeasurementValues, MessageReceiptState, Nullable, Numbering0_12, Numbering0_32, Numberish, OnCenterChange, OnLocationError, OnLocationFound, OnRadiusChange, OnRadiusValueChange, OnSubmitHandler, OnUnitChange, Orientation, PaginationState, PaginatorPageChangeEvent$1 as PaginatorPageChangeEvent, Permissions, PlatformKey, RadiusPickerDisplay, RadiusPickerLayout, RadiusPickerSize, RadiusUnit, RadiusValue, RenderLocationButtonProps, RenderMapProps, RenderSearchBoxProps, SelectFieldProps, SemanticColorTokens, ServerMethod, ServerResponse, ServerSideProps, SetManyOpts, Severity, Shades, ShadowPreset, Shapes, SidesValues, SizingNumbering, SizingValue, StatePillState, StepperVariant, TAcceptedFileType, TBuilderFieldType, TCheckboxRadioMode, TCheckboxRadioSize, TConditionAction, TConditionMatch, TConditionOperator, TDateBoundary, TDynamicFlag, TExternalFilterLabelMode, TFiltersLayout, TIsoFormat, TItemsPerRow, TKeyFilter, TLocationProvider, TPaginatorAlign, TextLabels, TextProps, ThemedFontKind, TimelineItemStatus, Timeout, TimingNumbering, ToastPosition, ToastSeverity, ToastSize, TooltipDataAttributes, TooltipProps, TreeChangeProps, TreeCheckboxSelectionKeyType, TreeCheckboxSelectionKeys, TreeNode, TreeNodeClickEvent, TreeNodeTemplateOptions, TreeProps, TreeRef, TreeSelectionEvent, Types, UseComponentDefaultsResult, UseDisclosureReturnType, UseFieldLogicElementProps, UseFieldLogicProps, UseFieldLogicReturn, UseFormManagerEvents, UseFormManagerReturn, UseToastApi, ValidationProps, children, clearFunction, downloadableFileResponse, settings1, settings2 };
+export type { AlignmentsValues, AllSlotKeys, AnimationsValues, AvatarShape, AvatarSize, AvatarStatus, BannerAction, BannerStatus, BaseFieldProps, Booleanish, Breakpoint, CallbackProps, ChatBubbleTone, ChatBubbleVariant, ChipSeverity, ChipSize, ColorMode, ColorScale, ColorValue, Colors, ColorsType, ComponentSize, CustomSubmitButtonProps, DataTableFilterMeta, DataTableFilterMetaData, DataTableOperatorFilterMetaData, DataTableSelectionSingleChangeEvent, DataTableSortMeta, DeepPartial, DetailItemInputType, DynamicValue, ElementProps, EnteringAnimation, ExitingAnimation, ExpandedKeys, FetchError, FetchSuccess, FetchTableDataRes, FetchTablePaginationData, FieldWrapperProps, File$1 as File, FileUploaderTemplate, FileUploaderTemplateParams, FlexAlignmentsValues, FlexValues, FormBooleanEvent, FormBooleanTarget, FormEvent, FormTarget, GroupFieldConfigs, HighSizingValue, IAccentEdgeProps, IAccordionElementSlots, IAccordionProps, IActionCardProps, IAddressComponentValue, IAddressExperianFormat, IAddressFormat, IAddressFormatResults, IAddressSearchResults, IAlertComponent, IAlertProps, IAlignment, IAnimation, IAutoCompleteCore, IAutoCompleteElement, IAvatarElementSlots, IAvatarProps, IAvatarStackElementSlots, IAvatarStackProps, IBadgeProps, IBannerProps, IBarChartProps, IBaseValidation, IBasicSectionProps, IBg, IBodyTemplate, IBodyTemplateIcon, IBorder, IBottomTabBarElementSlots, IBottomTabBarProps, IBoxComponent, IBuilderAddressField, IBuilderCheckboxField, IBuilderContainerField, IBuilderDateField, IBuilderField, IBuilderFieldBase, IBuilderFieldExport, IBuilderFileField, IBuilderGroupField, IBuilderMultiselectField, IBuilderNumberField, IBuilderPhoneField, IBuilderRadiosField, IBuilderRadiusPickerField, IBuilderSectionField, IBuilderSelectField, IBuilderSwitchField, IBuilderTagsField, IBuilderTextField, IBuilderTextareaField, IButton, IButtonElementSlots, IButtonParams, IButtonProps, IButtonState, IButtonsFilter, ICanvasProps, ICardComponent, ICardElementSlots, ICarouselElementSlots, ICarouselProps, ICascadeSelect, ICascadeSelectCore, IChatBubbleElementSlots, IChatBubbleProps, ICheckbox, ICheckboxFilter, ICheckboxSlots, IChildren, IChildrenParams, IChipProps, ICircularProgressProps, ICollapseProps, IColorPicker, IColumn, IColumnBase, ICombined, ICommandPaletteGroup, ICommandPaletteItem, ICommandPaletteProps, IComponentThemeConfig, IConditionGroupProps, IConditionRowProps, IConditionRule, IConditionsSectionProps, IConfirmDialogProps, IConfirmPopupProps, IContainer, IContainerCardProps, IContainerProps, IContextValues, ICountrySearchResults, ICssStyling, IDVButtonsFilter, IDVCheckboxFilter, IDVDateFilter, IDVDropdownFilter, IDVFilters, IDVMessages, IDVMultiselectFilter, IDVNumberFilter, IDVPaginationRequest, IDVPaginationResponse, IDVPaginationState, IDVPhoneFilter, IDVRangeFilter, IDVTextFilter, IDVTriStateFilter, IDataTableContextValues, IDataTableProps, IDataViewContextValues, IDataViewProps, IDataViewRefValues, IDatatableRefValues, IDate, IDateFilter, IDateProps, IDateSeparatorElementSlots, IDateSeparatorProps, IDateValidation, IDatepickerSlots, IDeltaProps, IDetailItem, IDetailListProps, IDialogButton, IDialogProps, IDialogRef, IDialogState, IDisplay, IDividerComponent, IDonutProps, IDonutSegment, IDotGridProps, IDoughnutChartProps, IDropdownCore, IDropdownFilter, IDropdownSelect, IEditableProps, IEditors, IEffects, IElementBase, IElementSlotConfig, IElementStyle, IEmail, IEmailSearchResults, IEmptyStateElementSlots, IEmptyStateProps, IFieldCardProps, IFieldCondition, IFieldPreviewProps, IFile, IFileUploader, IFileUploaderElement, IFileUploaderTypes, IFileValidation, IFilesExtTypeKeys, IFilters, IFlexAlignment, IFlexComponent, IFormAddon, IFormBuilderInternalState, IFormBuilderMeta, IFormBuilderPayload, IFormBuilderProps, IFormComponent, IFormElement, IFormElementBaseSlots, IFormElementSlots, IFormGrid, IFormListsElements, IFormSelect, IFormSelectElements, IFormSingleElement, IGalleryElementSlots, IGalleryItem, IGalleryProps, IGaugeProps, IGrid, IGridCellStyle, IGridComponent, IGridItem, IGridItemComponent, IGroup, IGroupCardProps, IGroupElementSlots, IGroupSettings, IGroupedBarsDatum, IGroupedBarsProps, IHeaderElementSlots, IHeadingComponent, IIconProps, IImageComponent, IImagesExtTypeKeys, IInteractivity, IKeyedColumn, IKitsAnimation, IKitsBarChartDatum, IKitsBarChartProps, IKitsCheckboxProps, IKitsComponentDefaults, IKitsContainer, IKitsDialogControlled, IKitsInputCalendar, IKitsInputColorPicker, IKitsInputLocation, IKitsInputMask, IKitsInputNumber, IKitsInputPassword, IKitsInputRating, IKitsInputSwitch, IKitsInputText, IKitsInputTextarea, IKitsLineChartProps, IKitsLineChartSeries, IKitsPhoneInput, IKitsRadioProps, IKitsTheme, IKitsThemeColors, IKitsThemeConfig, IKitsThemeContextValues, IKitsThemeFontSizes, IKitsThemeFontWeights, IKitsThemeFonts, IKitsThemeLineHeights, IKitsThemeRadii, IKitsThemeShadows, IKitsThemeSpacing, IKitsToastRef, ILabelElement, ILabelProps, ILanguage, ILayout, ILegendItem, ILegendProps, ILineChartProps, ILinkComponent, ILinkOverrides, IList, IListBoxCore, IListBoxElement, IListBoxSelect, IListItem, IListing, ILoaderProps, ILoadingIndicatorContext, ILocaleContextProps, ILocaleContextValues, ILocation, ILocationDetailsResponse, ILocationResponse, IMainContextProps, IMainContextValues, IMapTilePoint, IMapTileProps, IMemes, IMenuItem, IMessageComposerElementSlots, IMessageComposerProps, IMessageReceiptElementSlots, IMessageReceiptProps, IMessages, IMetricCardProps, IMinusButton, IModalComponent, IModalFormProps, IMultiSelect, IMultiSelectCore, IMultiSelectSlots, IMultiselect, IMultiselectFilter, INativeShadow, INonCrossPlatformTypes, INumberFilter, INumberInput, INumberProps, INumberValidation, IObjectGroup, IOneOfTypes, IOptionItem, IOptionsEditorProps, IOptionsSource, IPageISection, IPaginationRequest, IPaginationResponse, IPaginatorLabels, IPaletteItemProps, IPaletteProps, IPanelCustomSlot, IPassword, IPasswordProps, IPersonCardProps, IPhone, IPhoneFilter, IPhoneObjectValue, IPhoneValidationResults, IPhoneValue, IPieChartProps, IPlusButton, IPolarAreaChartProps, IPopoverProps, IProgressBarElementSlots, IProgressBarProps, IPropertiesPanelProps, IRTLDetection, IRadarChartProps, IRadarProps, IRadarSeries, IRadioCheckboxListItem, IRadioGroup, IRadioSlots, IRadiusPickerEvents, IRadiusPickerField, IRadiusPickerI18n, IRadiusPickerProps, IRangeFilter, IRankedListProps, IRankedListRow, IRef, IRepeatableSettings, IResponsiveElement, IRiseProps, ISVGComponent, IScrollViewComponent, ISegmentedControlOption, ISegmentedControlProps, ISelect, ISelectBase, ISelectCore, ISelectElement, ISelectSlots, ISelectType, ISelectedFile, ISelectedFileType, ISelectionValidation, ISeverityColorSlots, ISeverityThemeMap, IShadowDefinition, IShadowValue, ISidebarElementSlots, ISizing, ISkeleton, ISkeletonRowsProps, ISkeletonText, ISliderProps, ISpacing, ISparklineProps, IStackProps, IStackedBarsDatum, IStackedBarsProps, IStatCardElementSlots, IStatCardProps, IStatGroupElementSlots, IStatGroupProps, IStatePillProps, IStatisticsProps, IStats, IStatusCardProps, IStepperElementSlots, IStepperProps, IStripedProps, IStyleClasses, ISwitch, ISwitchSlots, ITabBarItem, ITabItem, ITableElementSlots, ITableFlatConfig, ITabsElementSlots, ITabsProps, ITags, IText, ITextComponent, ITextFieldProps, ITextFilter, ITextInput, ITextInputProps, ITextInputSlots, ITextValidation, ITextarea, IThemeContextProps, IThemeContextValues, ITimelineElementSlots, ITimelineItem, ITimelineProps, ITipProps, IToastAction, IToastFunction, IToastOptions, IToastParams, IToolbarProps, ITransforms, ITransition, ITranslatableInputProps, ITranslatableText, ITranslateComponent, ITreeItem, ITreeSelect, ITreeSelectCore, ITreeSelectElement, ITreeSelectNode, ITreeViewProps, ITriStateFilter, ITypingIndicatorElementSlots, ITypingIndicatorProps, IUnkeyedColumn, IUseCountUpOptions, IUseFormReturn, IUserAvatar, IValidationSectionProps, IWashProps, IWidgetBarIncomingProp, IWidgetChartContextProps, IWidgetChartProp, IWidgetData, IWidgetDoughnutIncomingProp, IWidgetLineIncomingProp, IWidgetPanelProps, IWidgetPieIncomingProp, IWidgetPolarAreaIncomingProp, IWidgetRadarIncomingProp, IconName, IconType, InputTextFieldProps, KitsBreakpoint, KitsConditionalObject, KitsDevice, KitsMotion, KitsOrientation, KitsPlatform, KitsResponsiveObject, KitsResponsiveValue, KitsThemeOverride, LabelVariant, LatLng, LoadMode, LoadingIndicatorRenderer, LogicFunction, MapInteraction, MeasurementValues, MessageReceiptState, Nullable, Numbering0_12, Numbering0_32, Numberish, OnCenterChange, OnLocationError, OnLocationFound, OnRadiusChange, OnRadiusValueChange, OnSubmitHandler, OnUnitChange, Orientation, PaginationState, PaginatorPageChangeEvent$1 as PaginatorPageChangeEvent, Permissions, PlatformKey, RadiusPickerDisplay, RadiusPickerLayout, RadiusPickerSize, RadiusUnit, RadiusValue, RenderLocationButtonProps, RenderMapProps, RenderSearchBoxProps, SelectFieldProps, SemanticColorTokens, ServerMethod, ServerResponse, ServerSideProps, SetManyOpts, Severity, Shades, ShadowPreset, Shapes, SidesValues, SizingNumbering, SizingValue, StatePillState, StepperVariant, TAcceptedFileType, TBuilderFieldType, TCheckboxRadioMode, TCheckboxRadioSize, TConditionAction, TConditionMatch, TConditionOperator, TDateBoundary, TDynamicFlag, TExternalFilterLabelMode, TFiltersLayout, TIsoFormat, TItemsPerRow, TKeyFilter, TLocationProvider, TPaginatorAlign, TextLabels, TextProps, ThemedFontKind, TimelineItemStatus, Timeout, TimingNumbering, ToastPosition, ToastSeverity, ToastSize, TooltipDataAttributes, TooltipProps, TreeChangeProps, TreeCheckboxSelectionKeyType, TreeCheckboxSelectionKeys, TreeNode, TreeNodeClickEvent, TreeNodeTemplateOptions, TreeProps, TreeRef, TreeSelectionEvent, Types, UseComponentDefaultsResult, UseDisclosureReturnType, UseFieldLogicElementProps, UseFieldLogicProps, UseFieldLogicReturn, UseFormManagerEvents, UseFormManagerReturn, UseToastApi, ValidationProps, children, clearFunction, downloadableFileResponse, settings1, settings2 };

package/layout/GridItem/native/KitsGridItem.cjs

@@ -7,7 +7,12 @@ var React = require('react');
 var reactNative = require('react-native');
 var GridContext = require('../../Grid/native/GridContext.cjs');
 
-const KitsGridItem = ({ id: externalId, colSpan, children }) => {
+const KitsGridItem = ({
+  id: externalId,
+  colSpan,
+  style,
+  children
+}) => {
   const autoId = React.useId();
   const id = externalId ?? autoId;
   const { registerItem, unregisterItem, getItemWidth, containerWidth } = GridContext.useGridContext();
@@ -24,7 +29,10 @@ const KitsGridItem = ({ id: externalId, colSpan, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
-      style: measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,
+      style: [
+        measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,
+        style
+      ],
       children
     }
   );

package/layout/GridItem/native/KitsGridItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"KitsGridItem.cjs","sources":["../../../../../src/layout/GridItem/native/KitsGridItem.tsx"],"sourcesContent":["import React, { useEffect, useId, type ReactNode } from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { useGridContext } from '../../Grid/native/GridContext';\n\nexport interface IKitsGridItemProps {\n  /** Unique identifier — used for context registration. Auto-generated if omitted. */\n  id?: string;\n  /** Number of grid columns this item spans */\n  colSpan: number;\n  children?: ReactNode;\n}\n\n/**\n * Pure React Native grid item.\n *\n * Registers its colSpan with the parent KitsGrid via context.\n * Reads its calculated pixel width from context and applies it.\n *\n * Does NOT need to be a direct child of KitsGrid — context\n * handles communication regardless of hierarchy depth.\n */\nconst KitsGridItem = ({ id: externalId, colSpan, children }: IKitsGridItemProps) => {\n  const autoId = useId();\n  const id = externalId ?? autoId;\n  const { registerItem, unregisterItem, getItemWidth, containerWidth } =\n    useGridContext();\n\n  // Register on mount and when colSpan changes\n  useEffect(() => {\n    registerItem(id, colSpan);\n  }, [id, colSpan, registerItem]);\n\n  // Unregister on unmount\n  useEffect(() => {\n    return () => {\n      unregisterItem(id);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id]);\n\n  const width = getItemWidth(id);\n  const measured = containerWidth > 0 && width != null;\n\n  return (\n    <View\n      style={\n        measured\n          ? { width, flexShrink: 0, flexGrow: 0 }\n          : styles.fallback\n      }\n    >\n      {children}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  fallback: {\n    width: '100%',\n  },\n});\n\nexport default KitsGridItem;\n"],"names":["useId","useGridContext","useEffect","jsx","View","StyleSheet"],"mappings":";;;;;;;;;AAqBA,MAAM,eAAe,CAAC,EAAE,IAAI,UAAA,EAAY,OAAA,EAAS,UAAS,KAA0B;AAClF,EAAA,MAAM,SAASA,WAAA,EAAM;AACrB,EAAA,MAAM,KAAK,UAAA,IAAc,MAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAgB,YAAA,EAAc,cAAA,KAClDC,0BAAA,EAAe;AAGjB,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,IAAI,OAAO,CAAA;AAAA,EAC1B,CAAA,EAAG,CAAC,EAAA,EAAI,OAAA,EAAS,YAAY,CAAC,CAAA;AAG9B,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,cAAA,CAAe,EAAE,CAAA;AAAA,IACnB,CAAA;AAAA,EAEF,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAA,MAAM,KAAA,GAAQ,aAAa,EAAE,CAAA;AAC7B,EAAA,MAAM,QAAA,GAAW,cAAA,GAAiB,CAAA,IAAK,KAAA,IAAS,IAAA;AAEhD,EAAA,uBACEC,cAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EACE,WACI,EAAE,KAAA,EAAO,YAAY,CAAA,EAAG,QAAA,EAAU,CAAA,EAAE,GACpC,MAAA,CAAO,QAAA;AAAA,MAGZ;AAAA;AAAA,GACH;AAEJ;AAEA,MAAM,MAAA,GAASC,uBAAW,MAAA,CAAO;AAAA,EAC/B,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;;;;"}
+{"version":3,"file":"KitsGridItem.cjs","sources":["../../../../../src/layout/GridItem/native/KitsGridItem.tsx"],"sourcesContent":["import React, { useEffect, useId, type ReactNode } from 'react';\nimport { View, StyleSheet, type ViewStyle } from 'react-native';\nimport { useGridContext } from '../../Grid/native/GridContext';\n\n/**\n * The style a grid cell may carry, with the keys that decide its SIZE removed.\n *\n * ⛔ `width`, `flex` AND `flexBasis` ARE FORBIDDEN BY THE TYPE, not merely\n * discouraged. The grid measures its container, divides by `columns`, and hands\n * every cell an exact pixel width. A caller who sets any of these breaks that\n * arithmetic for the whole ROW, because flexbox then redistributes space the\n * neighbouring cells were counting on — and the symptom shows up on a SIBLING,\n * nowhere near the line that caused it. A compile error is the only place that\n * mistake is cheap.\n *\n * ⚠️ `minWidth`, `maxWidth`, `flexGrow` and `flexShrink` go with them: each\n * overrides a measured width without looking like it does.\n */\nexport type IKitsGridItemStyle = Omit<\n  ViewStyle,\n  | 'width'\n  | 'minWidth'\n  | 'maxWidth'\n  | 'flex'\n  | 'flexBasis'\n  | 'flexGrow'\n  | 'flexShrink'\n>;\n\nexport interface IKitsGridItemProps {\n  /** Unique identifier — used for context registration. Auto-generated if omitted. */\n  id?: string;\n  /** Number of grid columns this item spans */\n  colSpan: number;\n  /**\n   * Extra style for the cell, applied AFTER its measured width.\n   *\n   * ⛔ THIS IS THE STACKING LEVEL, AND NOTHING ELSE COULD REACH IT. Cells are\n   * siblings inside one flex-wrap row, so a panel that opens out of its own\n   * field — autocomplete suggestions, a popover, a menu — is painted UNDER\n   * every cell that comes after it. A `zIndex` on anything INSIDE the cell\n   * orders that thing within the cell and changes nothing outside it, and\n   * `FieldWrapper`'s own `zIndex: isFocused ? 1000 : undefined` is inside it\n   * too. Measured on a device: an address suggestion list drew its background,\n   * and the next field's label and box drew on top of it.\n   *\n   * ⚠️ Sizing keys are removed by the type — see `IKitsGridItemStyle`.\n   */\n  style?: IKitsGridItemStyle;\n  children?: ReactNode;\n}\n\n/**\n * Pure React Native grid item.\n *\n * Registers its colSpan with the parent KitsGrid via context.\n * Reads its calculated pixel width from context and applies it.\n *\n * Does NOT need to be a direct child of KitsGrid — context\n * handles communication regardless of hierarchy depth.\n */\nconst KitsGridItem = ({\n  id: externalId,\n  colSpan,\n  style,\n  children,\n}: IKitsGridItemProps) => {\n  const autoId = useId();\n  const id = externalId ?? autoId;\n  const { registerItem, unregisterItem, getItemWidth, containerWidth } =\n    useGridContext();\n\n  // Register on mount and when colSpan changes\n  useEffect(() => {\n    registerItem(id, colSpan);\n  }, [id, colSpan, registerItem]);\n\n  // Unregister on unmount\n  useEffect(() => {\n    return () => {\n      unregisterItem(id);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id]);\n\n  const width = getItemWidth(id);\n  const measured = containerWidth > 0 && width != null;\n\n  return (\n    <View\n      /* The measured width comes FIRST, so a caller's style layers on top of it\n         for everything the type still permits and cannot replace it. */\n      style={[\n        measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,\n        style,\n      ]}\n    >\n      {children}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  fallback: {\n    width: '100%',\n  },\n});\n\nexport default KitsGridItem;\n"],"names":["useId","useGridContext","useEffect","jsx","View","StyleSheet"],"mappings":";;;;;;;;;AA6DA,MAAM,eAAe,CAAC;AAAA,EACpB,EAAA,EAAI,UAAA;AAAA,EACJ,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,KAA0B;AACxB,EAAA,MAAM,SAASA,WAAA,EAAM;AACrB,EAAA,MAAM,KAAK,UAAA,IAAc,MAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAgB,YAAA,EAAc,cAAA,KAClDC,0BAAA,EAAe;AAGjB,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,IAAI,OAAO,CAAA;AAAA,EAC1B,CAAA,EAAG,CAAC,EAAA,EAAI,OAAA,EAAS,YAAY,CAAC,CAAA;AAG9B,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,cAAA,CAAe,EAAE,CAAA;AAAA,IACnB,CAAA;AAAA,EAEF,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAA,MAAM,KAAA,GAAQ,aAAa,EAAE,CAAA;AAC7B,EAAA,MAAM,QAAA,GAAW,cAAA,GAAiB,CAAA,IAAK,KAAA,IAAS,IAAA;AAEhD,EAAA,uBACEC,cAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MAGC,KAAA,EAAO;AAAA,QACL,QAAA,GAAW,EAAE,KAAA,EAAO,UAAA,EAAY,GAAG,QAAA,EAAU,CAAA,KAAM,MAAA,CAAO,QAAA;AAAA,QAC1D;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEA,MAAM,MAAA,GAASC,uBAAW,MAAA,CAAO;AAAA,EAC/B,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;;;;"}

package/layout/GridItem/native/KitsGridItem.js

@@ -3,7 +3,12 @@ import { useId, useEffect } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useGridContext } from '../../Grid/native/GridContext.js';
 
-const KitsGridItem = ({ id: externalId, colSpan, children }) => {
+const KitsGridItem = ({
+  id: externalId,
+  colSpan,
+  style,
+  children
+}) => {
   const autoId = useId();
   const id = externalId ?? autoId;
   const { registerItem, unregisterItem, getItemWidth, containerWidth } = useGridContext();
@@ -20,7 +25,10 @@ const KitsGridItem = ({ id: externalId, colSpan, children }) => {
   return /* @__PURE__ */ jsx(
     View,
     {
-      style: measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,
+      style: [
+        measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,
+        style
+      ],
       children
     }
   );

package/layout/GridItem/native/KitsGridItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"KitsGridItem.js","sources":["../../../../../src/layout/GridItem/native/KitsGridItem.tsx"],"sourcesContent":["import React, { useEffect, useId, type ReactNode } from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { useGridContext } from '../../Grid/native/GridContext';\n\nexport interface IKitsGridItemProps {\n  /** Unique identifier — used for context registration. Auto-generated if omitted. */\n  id?: string;\n  /** Number of grid columns this item spans */\n  colSpan: number;\n  children?: ReactNode;\n}\n\n/**\n * Pure React Native grid item.\n *\n * Registers its colSpan with the parent KitsGrid via context.\n * Reads its calculated pixel width from context and applies it.\n *\n * Does NOT need to be a direct child of KitsGrid — context\n * handles communication regardless of hierarchy depth.\n */\nconst KitsGridItem = ({ id: externalId, colSpan, children }: IKitsGridItemProps) => {\n  const autoId = useId();\n  const id = externalId ?? autoId;\n  const { registerItem, unregisterItem, getItemWidth, containerWidth } =\n    useGridContext();\n\n  // Register on mount and when colSpan changes\n  useEffect(() => {\n    registerItem(id, colSpan);\n  }, [id, colSpan, registerItem]);\n\n  // Unregister on unmount\n  useEffect(() => {\n    return () => {\n      unregisterItem(id);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id]);\n\n  const width = getItemWidth(id);\n  const measured = containerWidth > 0 && width != null;\n\n  return (\n    <View\n      style={\n        measured\n          ? { width, flexShrink: 0, flexGrow: 0 }\n          : styles.fallback\n      }\n    >\n      {children}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  fallback: {\n    width: '100%',\n  },\n});\n\nexport default KitsGridItem;\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,eAAe,CAAC,EAAE,IAAI,UAAA,EAAY,OAAA,EAAS,UAAS,KAA0B;AAClF,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,KAAK,UAAA,IAAc,MAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAgB,YAAA,EAAc,cAAA,KAClD,cAAA,EAAe;AAGjB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,IAAI,OAAO,CAAA;AAAA,EAC1B,CAAA,EAAG,CAAC,EAAA,EAAI,OAAA,EAAS,YAAY,CAAC,CAAA;AAG9B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,cAAA,CAAe,EAAE,CAAA;AAAA,IACnB,CAAA;AAAA,EAEF,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAA,MAAM,KAAA,GAAQ,aAAa,EAAE,CAAA;AAC7B,EAAA,MAAM,QAAA,GAAW,cAAA,GAAiB,CAAA,IAAK,KAAA,IAAS,IAAA;AAEhD,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,KAAA,EACE,WACI,EAAE,KAAA,EAAO,YAAY,CAAA,EAAG,QAAA,EAAU,CAAA,EAAE,GACpC,MAAA,CAAO,QAAA;AAAA,MAGZ;AAAA;AAAA,GACH;AAEJ;AAEA,MAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC/B,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;;;;"}
+{"version":3,"file":"KitsGridItem.js","sources":["../../../../../src/layout/GridItem/native/KitsGridItem.tsx"],"sourcesContent":["import React, { useEffect, useId, type ReactNode } from 'react';\nimport { View, StyleSheet, type ViewStyle } from 'react-native';\nimport { useGridContext } from '../../Grid/native/GridContext';\n\n/**\n * The style a grid cell may carry, with the keys that decide its SIZE removed.\n *\n * ⛔ `width`, `flex` AND `flexBasis` ARE FORBIDDEN BY THE TYPE, not merely\n * discouraged. The grid measures its container, divides by `columns`, and hands\n * every cell an exact pixel width. A caller who sets any of these breaks that\n * arithmetic for the whole ROW, because flexbox then redistributes space the\n * neighbouring cells were counting on — and the symptom shows up on a SIBLING,\n * nowhere near the line that caused it. A compile error is the only place that\n * mistake is cheap.\n *\n * ⚠️ `minWidth`, `maxWidth`, `flexGrow` and `flexShrink` go with them: each\n * overrides a measured width without looking like it does.\n */\nexport type IKitsGridItemStyle = Omit<\n  ViewStyle,\n  | 'width'\n  | 'minWidth'\n  | 'maxWidth'\n  | 'flex'\n  | 'flexBasis'\n  | 'flexGrow'\n  | 'flexShrink'\n>;\n\nexport interface IKitsGridItemProps {\n  /** Unique identifier — used for context registration. Auto-generated if omitted. */\n  id?: string;\n  /** Number of grid columns this item spans */\n  colSpan: number;\n  /**\n   * Extra style for the cell, applied AFTER its measured width.\n   *\n   * ⛔ THIS IS THE STACKING LEVEL, AND NOTHING ELSE COULD REACH IT. Cells are\n   * siblings inside one flex-wrap row, so a panel that opens out of its own\n   * field — autocomplete suggestions, a popover, a menu — is painted UNDER\n   * every cell that comes after it. A `zIndex` on anything INSIDE the cell\n   * orders that thing within the cell and changes nothing outside it, and\n   * `FieldWrapper`'s own `zIndex: isFocused ? 1000 : undefined` is inside it\n   * too. Measured on a device: an address suggestion list drew its background,\n   * and the next field's label and box drew on top of it.\n   *\n   * ⚠️ Sizing keys are removed by the type — see `IKitsGridItemStyle`.\n   */\n  style?: IKitsGridItemStyle;\n  children?: ReactNode;\n}\n\n/**\n * Pure React Native grid item.\n *\n * Registers its colSpan with the parent KitsGrid via context.\n * Reads its calculated pixel width from context and applies it.\n *\n * Does NOT need to be a direct child of KitsGrid — context\n * handles communication regardless of hierarchy depth.\n */\nconst KitsGridItem = ({\n  id: externalId,\n  colSpan,\n  style,\n  children,\n}: IKitsGridItemProps) => {\n  const autoId = useId();\n  const id = externalId ?? autoId;\n  const { registerItem, unregisterItem, getItemWidth, containerWidth } =\n    useGridContext();\n\n  // Register on mount and when colSpan changes\n  useEffect(() => {\n    registerItem(id, colSpan);\n  }, [id, colSpan, registerItem]);\n\n  // Unregister on unmount\n  useEffect(() => {\n    return () => {\n      unregisterItem(id);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [id]);\n\n  const width = getItemWidth(id);\n  const measured = containerWidth > 0 && width != null;\n\n  return (\n    <View\n      /* The measured width comes FIRST, so a caller's style layers on top of it\n         for everything the type still permits and cannot replace it. */\n      style={[\n        measured ? { width, flexShrink: 0, flexGrow: 0 } : styles.fallback,\n        style,\n      ]}\n    >\n      {children}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  fallback: {\n    width: '100%',\n  },\n});\n\nexport default KitsGridItem;\n"],"names":[],"mappings":";;;;;AA6DA,MAAM,eAAe,CAAC;AAAA,EACpB,EAAA,EAAI,UAAA;AAAA,EACJ,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,KAA0B;AACxB,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,KAAK,UAAA,IAAc,MAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAgB,YAAA,EAAc,cAAA,KAClD,cAAA,EAAe;AAGjB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,IAAI,OAAO,CAAA;AAAA,EAC1B,CAAA,EAAG,CAAC,EAAA,EAAI,OAAA,EAAS,YAAY,CAAC,CAAA;AAG9B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,MAAM;AACX,MAAA,cAAA,CAAe,EAAE,CAAA;AAAA,IACnB,CAAA;AAAA,EAEF,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAEP,EAAA,MAAM,KAAA,GAAQ,aAAa,EAAE,CAAA;AAC7B,EAAA,MAAM,QAAA,GAAW,cAAA,GAAiB,CAAA,IAAK,KAAA,IAAS,IAAA;AAEhD,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MAGC,KAAA,EAAO;AAAA,QACL,QAAA,GAAW,EAAE,KAAA,EAAO,UAAA,EAAY,GAAG,QAAA,EAAU,CAAA,KAAM,MAAA,CAAO,QAAA;AAAA,QAC1D;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEA,MAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC/B,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lmb-it/kitsconcerto-native",
-  "version": "0.1.267",
+  "version": "0.1.270",
   "description": "KitsConcerto — Native (React Native) UI components",
   "main": "index.cjs",
   "module": "index.js",